Add Riot.js

README.md

@@ -34,6 +34,7 @@ npm start
 - [Polymer](https://github.com/webcomponents/custom-elements-everywhere/tree/master/libraries/polymer)
 - [Preact](https://github.com/webcomponents/custom-elements-everywhere/tree/master/libraries/preact)
 - [React](https://github.com/webcomponents/custom-elements-everywhere/tree/master/libraries/react)
+- [Riot.js](https://github.com/webcomponents/custom-elements-everywhere/tree/master/libraries/riot)
 - [Skate](https://github.com/webcomponents/custom-elements-everywhere/tree/master/libraries/skate)
 - [Surplus](https://github.com/webcomponents/custom-elements-everywhere/tree/master/libraries/surplus)
 - [Svelte](https://github.com/webcomponents/custom-elements-everywhere/tree/master/libraries/svelte)
@@ -136,7 +137,7 @@ run that folder's build command.
   to a custom element using properties.
 - The library/framework should be able to listen to DOM events from a custom
   element. These DOM events could use any casing style.
-  
+
 ## How does the site get deployed/maintained?
 
 Once a library is added to the repo, we use [Renovate](https://renovatebot.com/)

docs/index.js

@@ -31,6 +31,7 @@ const libraryMap = {
   polymer: "Polymer",
   preact: "Preact",
   react: "React",
+  riot: "Riot.js",
   skate: "Skate w/ Preact",
   surplus: "Surplus",
   svelte: "Svelte",

libraries/riot/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["es2015"]
+}

libraries/riot/karma.conf.js

@@ -0,0 +1,92 @@
+/**
+ * @license
+ * Copyright 2017 Google Inc. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+var webpack = require('webpack')
+var path = require('path')
+
+module.exports = function(config) {
+  config.set({
+    plugins: [
+      'karma-chrome-launcher',
+      'karma-firefox-launcher',
+      require(path.resolve(__dirname, '../__shared__/karma-plugins/karma-mocha')),
+      'karma-sourcemap-loader',
+      'karma-webpack',
+      require(path.resolve(__dirname, '../__shared__/karma-plugins/karma-custom-html-reporter')),
+      require(path.resolve(__dirname, '../__shared__/karma-plugins/karma-custom-json-reporter'))
+    ],
+    browsers: ['ChromeHeadless', 'FirefoxHeadless'], // run in Chrome and Firefox
+    customLaunchers: {
+      FirefoxHeadless: {
+        base: 'Firefox',
+        flags: [ '-headless' ],
+        displayName: 'FirefoxHeadless'
+      }
+    },
+    singleRun: true, // set this to false to leave the browser open
+    frameworks: ['mocha'], // use the mocha test framework
+    files: [
+      { pattern: path.resolve(__dirname, './node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js'), watched: false },
+      { pattern: path.resolve(__dirname, './node_modules/@webcomponents/webcomponentsjs/webcomponents-lite.js'), watched: false },
+      'tests.webpack.js' // just load this file
+    ],
+    preprocessors: {
+      'tests.webpack.js': ['webpack', 'sourcemap'] // preprocess with webpack and our sourcemap loader
+    },
+    reporters: ['dots', 'custom-html', 'custom-json'], // report results in these formats
+    htmlReporter: {
+      outputFile: path.resolve(__dirname, './results/results.html'),
+      pageTitle: 'Riot.js + Custom Elements',
+      groupSuites: true,
+      useCompactStyle: true
+    },
+    jsonResultReporter: {
+      outputFile: path.resolve(__dirname, './results/results.json')
+    },
+    webpack: { // kind of a copy of your webpack config
+      mode: 'development',
+      // devtool: 'inline-source-map', // just do inline source maps instead of the default
+      resolve: {
+        modules: [
+          path.resolve(__dirname, '../__shared__/webcomponents/src'),
+          path.resolve(__dirname, './node_modules')
+        ]
+      },
+      module: {
+        rules: [
+          {
+            test: /\.js$/,
+            exclude: /node_modules/,
+            use: {
+              loader: 'babel-loader'
+            }
+          },
+          {
+            test: /\.riot$/,
+            exclude: /node_modules/,
+            use: {
+              loader: '@riotjs/webpack-loader'
+            }
+          }
+        ]
+      }
+    },
+    webpackServer: {
+      // noInfo: true // please don't spam the console when running in karma!
+    }
+  })
+}

libraries/riot/meta/issues.json

@@ -0,0 +1,3 @@
+[
+
+]

libraries/riot/meta/summary.md

@@ -0,0 +1,9 @@
+<h4 id="riot-handling-data">Handling data</h4>
+
+By default, Riot.js passes all primitive data (strings, numbers, booleans) to Custom Elements as attributes. It passes complex data (Objects, Arrays) to Custom Elements as properties.
+
+<h4 id="riot-handling-events">Handling events</h4>
+
+Riot.js can listen to native DOM events dispatched from Custom Elements. It supports
+all styles of events (lowercase, camelCase, kebab-case, etc).
+