feat(3in2): add component swapping support

Author: tivac

3in2/component.html

@@ -1,6 +1,4 @@
-<div {...attrs} ref:root>
-    <svelte:component this="{Component}" />
-</div>
+<div {...attrs} ref:target />
 
 <script>
 export default {
@@ -15,20 +13,52 @@
         attrs : false,
     }),
 
+    methods : {
+        instantiate() {
+            const { component, props } = this.get();
+            const { target } = this.refs;
+
+            // Cleanup any previous component instance first
+            if(this.instance) {
+                this.cleanup();
+            }
+
+            if(!component || typeof component !== "function") {
+                throw new Error("Invalid svelte3 component passed to wrapper");
+            }
+
+            this.instance = new component({
+                target,
+                props,
+            });
+        },
+
+        cleanup() {
+            this.instance.$destroy();
+            this.instance = null;
+        },
+    },
+
     oncreate() {
-        const { component, props } = this.get();
+        const { component } = this.get();
 
-        // TODO: someday this should support runtime setting/switching of the component value
-        if(!component || typeof component !== "function") {
-            throw new Error("Invalid svelte3 component passed to wrapper");
-        }
+        if(component) {
+            this.instantiate();
+        }    
 
-        this.instance = new component({
-            target : this.refs.root,
-            props,
-        });
+        this.on("state", ({ changed, current }) => {
+            if(changed.component) {
+                this.instantiate();
 
-        this.on("state", ({ current }) => this.instance.$set(current.props));
+                return;
+            }
+            
+            if(changed.props && this.instance) {
+                this.instance.$set(current.props)
+
+                return;
+            }
+        });
     },
 
     ondestroy() {

3in2/tests/__snapshots__/component.test.js.snap

@@ -4,7 +4,7 @@ exports[`3in2 component wrapper should render a svelte3 component 1`] = `
 
 <div>
   <p>
-    The answer is a mystery
+    a? a!
   </p>
 </div>
 
@@ -14,7 +14,7 @@ exports[`3in2 component wrapper should render a svelte3 component w/ props 1`] =
 
 <div>
   <p>
-    The answer is 42
+    a? A!
   </p>
 </div>
 
@@ -27,7 +27,44 @@ exports[`3in2 component wrapper should set attributes on the wrapper element it
      data-foo="data-foo"
 >
   <p>
-    The answer is a mystery
+    a? a!
+  </p>
+</div>
+
+`;
+
+exports[`3in2 component wrapper should support creation without a component 1`] = `
+
+<div>
+</div>
+
+`;
+
+exports[`3in2 component wrapper should support creation without a component 2`] = `
+
+<div>
+  <p>
+    B? b!
+  </p>
+</div>
+
+`;
+
+exports[`3in2 component wrapper should support swapping out the svelte3 component 1`] = `
+
+<div>
+  <p>
+    a? A!
+  </p>
+</div>
+
+`;
+
+exports[`3in2 component wrapper should support swapping out the svelte3 component 2`] = `
+
+<div>
+  <p>
+    B? b!
   </p>
 </div>
 
@@ -39,7 +76,7 @@ exports[`3in2 component wrapper should update the svelte3 component when props c
 
 <div>
   <p>
-    The answer is 42
+    a? A!
   </p>
 </div>
 
@@ -49,7 +86,7 @@ exports[`3in2 component wrapper should update the svelte3 component when props c
 
 <div>
   <p>
-    The answer is science
+    a? A2!
   </p>
 </div>
 

3in2/tests/component.test.js

@@ -4,7 +4,8 @@ const wait = require("p-immediate");
 
 describe("3in2 component wrapper", () => {
     const Wrapper = require("../component.html");
-    const { default : Component } = require("./specimens/component.svelte");
+    const { default : ComponentA } = require("./specimens/component-a.svelte");
+    const { default : ComponentB } = require("./specimens/component-b.svelte");
 
     let root;
 
@@ -17,23 +18,28 @@ describe("3in2 component wrapper", () => {
             target : root,
 
             data : {
-                component : Component,
+                component : ComponentA,
             },
         });
 
         expect(root.innerHTML).toMatchSnapshot();
     });
 
     it("should throw if not given a svelte3 component", async () => {
-        expect(() => new Wrapper({ target : root })).toThrowErrorMatchingSnapshot();
+        expect(() => new Wrapper({
+            target : root,
+            data   : {
+                component : true
+            },
+        })).toThrowErrorMatchingSnapshot();
     });
 
     it("should destroy the svelte3 component when the wrapper is destroyed", async () => {
         const wrapper = new Wrapper({
             target : root,
 
             data : {
-                component : Component,
+                component : ComponentA,
             },
         });
 
@@ -47,10 +53,10 @@ describe("3in2 component wrapper", () => {
             target : root,
 
             data : {
-                component : Component,
+                component : ComponentA,
 
                 props : {
-                    answer : "42",
+                    a : "A",
                 },
             },
         });
@@ -63,10 +69,10 @@ describe("3in2 component wrapper", () => {
             target : root,
 
             data : {
-                component : Component,
+                component : ComponentA,
 
                 props : {
-                    answer : "42",
+                    a : "A",
                 },
             },
         });
@@ -75,10 +81,50 @@ describe("3in2 component wrapper", () => {
 
         wrapper.set({
             props : {
-                answer : "science",
+                a : "A2",
+            },
+        });
+
+        await wait();
+        
+        expect(root.innerHTML).toMatchSnapshot();
+    });
+    
+    it("should support swapping out the svelte3 component", async () => {
+        const wrapper = new Wrapper({
+            target : root,
+
+            data : {
+                component : ComponentA,
+
+                props : {
+                    a : "A",
+                },
             },
         });
 
+        expect(root.innerHTML).toMatchSnapshot();
+        
+        wrapper.set({
+            component : ComponentB,
+        });
+
+        await wait();
+        
+        expect(root.innerHTML).toMatchSnapshot();
+    });
+    
+    it("should support creation without a component", async () => {
+        const wrapper = new Wrapper({
+            target : root,
+        });
+
+        expect(root.innerHTML).toMatchSnapshot();
+        
+        wrapper.set({
+            component : ComponentB,
+        });
+
         await wait();
 
         expect(root.innerHTML).toMatchSnapshot();
@@ -89,7 +135,7 @@ describe("3in2 component wrapper", () => {
             target : root,
 
             data : {
-                component : Component,
+                component : ComponentA,
 
                 attrs : {
                     class      : "class",

3in2/tests/specimens/component-a.svelte

@@ -0,0 +1,5 @@
+<script>
+	export let a = "a";
+</script>
+
+<p>a? {a}!</p>

3in2/tests/specimens/component-b.svelte

@@ -0,0 +1,5 @@
+<script>
+	export let b = "b";
+</script>
+
+<p>B? {b}!</p>