feat: Split props out into a separate field (#35)

Having it pass along everything leads to svelte complaining about unexpected props unless you define `export let component;` in every svelte3 component, which... no.

BREAKING CHANGE: Props for the svelte3 component must now be passed to the wrapped as `props` instead of the entire state of the wrapper being passed along. This prevents warnings from svelte3 components and is generally cleaner overall.

Author: tivac

3in2/component.html

@@ -6,13 +6,13 @@
         // svelte3 component to invoke
         component : false,
 
-        // All values are passed to the svelte3 component as props!
+        // props for the component
+        props : {},
     }),
 
     methods : {
         instantiate() {
-            const props = this.get();
-            const { component } = props;
+            const { component, props } = this.get();
             const { anchor } = this.refs;
 
             // Cleanup any previous component instance first
@@ -56,7 +56,7 @@
             }
 
             if(this.instance) {
-                return this.instance.$set(current);
+                return this.instance.$set(current.props);
             }
         });
     },

3in2/tests/component.test.js

@@ -29,7 +29,7 @@ describe("3in2 component wrapper", () => {
         expect(() => new Wrapper({
             target : root,
             data   : {
-                component : true
+                component : true,
             },
         })).toThrowErrorMatchingSnapshot();
     });
@@ -55,7 +55,9 @@ describe("3in2 component wrapper", () => {
             data : {
                 component : ComponentA,
 
-                a : "A",
+                props : {
+                    a : "A",
+                },
             },
         });
 
@@ -69,14 +71,18 @@ describe("3in2 component wrapper", () => {
             data : {
                 component : ComponentA,
 
-                a : "A",
+                props : {
+                    a : "A",
+                },
             },
         });
 
         expect(root.innerHTML).toMatchSnapshot();
 
         wrapper.set({
-            a : "A2",
+            props : {
+                a : "A2",
+            },
         });
 
         await wait();
@@ -91,15 +97,20 @@ describe("3in2 component wrapper", () => {
             data : {
                 component : ComponentA,
 
-                a : "A",
+                props : {
+                    a : "A",
+                },
             },
         });
 
         const child = wrapper.instance;
 
         wrapper.set({
             component : ComponentA,
-            a : "A2",
+
+            props : {
+                a : "A2",
+            },
         });
 
         await wait();
@@ -114,7 +125,9 @@ describe("3in2 component wrapper", () => {
             data : {
                 component : ComponentA,
 
-                a : "A",
+                props : {
+                    a : "A",
+                },
             },
         });
 
@@ -156,7 +169,7 @@ describe("3in2 component wrapper", () => {
                     class      : "class",
                     style      : "color: red;",
                     "data-foo" : "data-foo",
-                }
+                },
             },
         });
 

README.md

@@ -40,10 +40,10 @@ $> npm install svelte@latest
 Wrap up a v3 component so it can be included within a svelte2 component.
 
 ```html
-<Wrapper {...props} />
+<Wrapper {component} {props} />
 
 <script>
-import Component from "your-svelte3-component.svelte";
+import Component from "./svelte3-component.svelte";
 
 export default {
     components : {
@@ -52,20 +52,17 @@ export default {
 
     data : () => ({
         component : Component,
+        props     : {
+            // any props for the component
+        }
     }),
-
-    // This computed is here so that this component can essentially be invisible, it
-    // exists solvely to help the transition and can be removed once v2 is gone
-    computed : {
-        props : (state) => state,
-    },
 };
 ```
 
 | Data | Usage |
 | --- | --- |
 | `component` | The v3 component to wrap |
-| `...` | All other props on the component are passed directly to the v3 component |
+| `props` | Properties to set on the v3 component |
 
 #### Stores
 

package-lock.json

@@ -22,27 +22,27 @@
   "author": "Pat Cavit <npm@patcavit.com>",
   "license": "MIT",
   "dependencies": {
-    "rollup-pluginutils": "^2.7.0"
+    "rollup-pluginutils": "^2.8.1"
   },
   "devDependencies": {
     "@babel/plugin-transform-modules-commonjs": "^7.4.4",
-    "@tivac/eslint-config": "^2.3.1",
+    "@tivac/eslint-config": "^2.4.0",
     "babel-core": "^6.26.3",
-    "babel-eslint": "^10.0.1",
+    "babel-eslint": "^10.0.2",
     "babel-jest": "^24.8.0",
     "babel-plugin-add-module-exports": "^1.0.2",
     "conventional-changelog-cli": "^2.0.21",
-    "eslint": "^6.0.0",
-    "eslint-plugin-jest": "^22.5.1",
+    "eslint": "^6.0.1",
+    "eslint-plugin-jest": "^22.7.1",
     "jest": "^24.8.0",
     "jest-serializer-html": "^6.0.0",
     "p-immediate": "^3.1.0",
     "require-from-string": "^2.0.2",
-    "rollup": "^1.12.1",
+    "rollup": "^1.16.2",
     "rollup-plugin-hypothetical": "^2.1.0",
-    "rollup-plugin-node-resolve": "^5.0.0",
+    "rollup-plugin-node-resolve": "^5.1.0",
     "snapshot-diff": "^0.5.1",
-    "svelte": "^3.4.1",
+    "svelte": "^3.6.1",
     "svelte2": "npm:svelte@^2"
   },
   "peerDependencies": {