Reimplement custom element example

Refactor custom element example to conform to the newest versions of rxmarbles components. Add ES5 custom web component shim, since source code for rxmarbles clasess is compiled to ES5. Update webpack config to compile new custom element source file into distribution folder. Related to staltz#48.
xtianjohns · Oct 11, 2017 · 4979838 · 4979838
1 parent a31e372
commit 4979838
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 3 deletions.
diff --git a/dist/element.js b/dist/element.js
diff --git a/dist/element.js.map b/dist/element.js.map
diff --git a/src/element.js b/src/element.js
@@ -0,0 +1,26 @@
+import run from '@cycle/rxjs-run';
+import { Observable } from 'rxjs/Observable';
+import { makeDOMDriver, h } from '@cycle/dom';
+import { Sandbox } from './components/sandbox/sandbox';
+import { merge } from 'ramda';
+
+class SandboxElement extends HTMLElement {
+  connectedCallback() {
+    let key = this.attributes.key.value;
+    function main( sources ) {
+      const sandbox = Sandbox( sources );
+      const sinks = {
+        DOM: sandbox.DOM,
+        store: Observable.merge( sandbox.data ).scan(merge, { route: key, inputs: undefined }),
+      };
+      return sinks;
+    }
+
+    run(main, {
+      DOM: makeDOMDriver(this),
+      store: sources => sources,
+    });
+  }
+}
+
+customElements.define( 'rx-marbles', SandboxElement );
diff --git a/test-custom-element.html b/test-custom-element.html
@@ -6,7 +6,8 @@
     <meta name="description" content="Learn, build, and test Rx functions on Observables">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>RxMarbles: Interactive diagrams of Rx Observables</title>
-    <script src="dist/js/element.js"></script>
+    <script src="https://rawgit.com/webcomponents/custom-elements/master/src/native-shim.js"></script>
+    <script src="dist/element.js"></script>
   </head>
   <body>
     <!--[if lt IE 7]>

diff --git a/webpack.config.js b/webpack.config.js
@@ -27,11 +27,14 @@ if (isProduction) {
 }
 
 module.exports = {
-  entry: './src/app.js',
+  entry: {
+    app: './src/app.js',
+    element: './src/element.js'
+  },
 
   output: {
     path: path.resolve(__dirname, 'dist'),
-    filename: 'app.js',
+    filename: '[name].js',
   },
 
   devtool: isProduction ?