feat(3in2): pass props along transparently

BREAKING CHANGE: Previously props to be passed to the svelte3 component would be set in a `props` object, now they live alongside the special `component` and `attrs` properties. This facilitates easier porting of code since the wrapper component can be instantiated & have updated props passed to it exactly like the svelte2 component did previously.

Author: tivac

3in2/component.html

@@ -15,7 +15,7 @@
 
     methods : {
         instantiate() {
-            const { component, props } = this.get();
+            const { component, attrs, ...props } = this.get();
             const { target } = this.refs;
 
             // Cleanup any previous component instance first
@@ -34,6 +34,10 @@
         },
 
         cleanup() {
+            if(!this.instance) {
+                return;
+            }
+
             this.instance.$destroy();
             this.instance = null;
         },
@@ -48,22 +52,19 @@
 
         this.on("state", ({ changed, current }) => {
             if(changed.component) {
-                this.instantiate();
-
-                return;
+                return this.instantiate();
             }
 
-            if(changed.props && this.instance) {
-                this.instance.$set(current.props)
+            if(this.instance) {
+                const { component, attrs, ...props } = current;
 
-                return;
+                return this.instance.$set(props);
             }
         });
     },
 
     ondestroy() {
-        this.instance.$destroy();
-        this.instance = null;
+        this.cleanup();
     },
 };
 </script>

3in2/tests/component.test.js

@@ -55,9 +55,7 @@ describe("3in2 component wrapper", () => {
             data : {
                 component : ComponentA,
 
-                props : {
-                    a : "A",
-                },
+                a : "A",
             },
         });
 
@@ -71,18 +69,14 @@ describe("3in2 component wrapper", () => {
             data : {
                 component : ComponentA,
 
-                props : {
-                    a : "A",
-                },
+                a : "A",
             },
         });
 
         expect(root.innerHTML).toMatchSnapshot();
 
         wrapper.set({
-            props : {
-                a : "A2",
-            },
+            a : "A2",
         });
 
         await wait();
@@ -97,9 +91,7 @@ describe("3in2 component wrapper", () => {
             data : {
                 component : ComponentA,
 
-                props : {
-                    a : "A",
-                },
+                a : "A",
             },
         });