add connect util

cedeber · cedeber · commit 1e1742ddca7f · 2020-03-21T14:56:02.000+01:00
diff --git a/boilerplates/rollup-svelte/public/index.html b/boilerplates/rollup-svelte/public/index.html
@@ -11,5 +11,7 @@
     <link rel="stylesheet" type="text/css" href="/app.css">
     <script type="module" src="/main.js"></script>
 </head>
-<body></body>
+<body>
+    <svelte-app foo="bar"></svelte-app>
+</body>
 </html>
diff --git a/boilerplates/rollup-svelte/src/App.svelte b/boilerplates/rollup-svelte/src/App.svelte
@@ -1,8 +1,9 @@
 <script>
     import router from "./web_modules/page.js";
-
     import Home from "./routes/Home.svelte";
 
+    export let foo;
+
     let page;
     let params;
 
@@ -13,6 +14,8 @@
     }, () => page = Home);
 
     router.start();
+
+    console.log(foo);
 </script>
 
 <svelte:component this={page} params={params}/>
diff --git a/boilerplates/rollup-svelte/src/main.js b/boilerplates/rollup-svelte/src/main.js
@@ -1,13 +1,21 @@
+import connect from "./utils/connect";
 import App from "./App.svelte";
 import "./main.css";
 
+if ("serviceWorker" in navigator) {
+    navigator.serviceWorker.register("/service-worker.js");
+}
+
+// --- With Web Components ---
+// You can connect as much Web Components as you want.
+connect("svelte-app", App, ["foo"]);
+
+// --- Single Page App ---
+/*
 const app = new App({
     target: document.body,
     props: {},
 });
+*/
 
-if ("serviceWorker" in navigator) {
-    navigator.serviceWorker.register("/service-worker.js");
-}
-
-export default app;
+// export default app;
diff --git a/boilerplates/rollup-svelte/src/utils/connect.js b/boilerplates/rollup-svelte/src/utils/connect.js
@@ -0,0 +1,46 @@
+/**
+ * Connect Web Component attributes to Svelte Component properties
+ * @param {string} name Name of the Web Component
+ * @param {*} Component Svelte Component
+ * @param {string[]} attributes Which attributes will be passed as properties
+ */
+export default function connect(name, Component, attributes = []) {
+    return customElements.define(name, class extends HTMLElement {
+        constructor() {
+            super();
+            this.component = undefined;
+        }
+
+        static get observedAttributes() {
+            return attributes;
+        }
+
+        attributeChangedCallback(name, oldValue, newValue) {
+            if (this.component && oldValue !== newValue) {
+                this.component.$set({ [name]: newValue });
+            }
+        }
+
+        connectedCallback() {
+            let props = {};
+
+            for (let attr of attributes) {
+                props[attr] = this.getAttribute(attr) || undefined;
+            }
+
+            // empty element
+            while (this.firstChild) {
+                this.removeChild(this.lastChild);
+            }
+
+            this.component = new Component({
+                target: this,
+                props,
+            });
+        }
+
+        disconnectedCallback() {
+            this.component.$destroy();
+        }
+    });
+}
