fix(3in2): smarter diff check for component values

Svelte will tell us that it changed, even if it's a reference to the exact same object. To avoid re-creating the svelte3 component constantly the wrapper needs to do a more specific diff before re-instantiating the svelte3 component.

Author: tivac

3in2/component.html

@@ -46,13 +46,15 @@
 
         if(component) {
             this.instantiate();
-        }    
+        }
 
-        this.on("state", ({ changed, current }) => {
-            if(changed.component) {
+        this.on("state", ({ changed, current, previous }) => {
+            // Second check is because svelte's diffing is pretty basic by default, so
+            // we need to be smarter about allowing inntances to persist
+            if(changed.component && (current.component !== previous.component)) {
                 return this.instantiate();
             }
-            
+
             if(this.instance) {
                 return this.instance.$set(current);
             }

3in2/tests/component.test.js

@@ -6,7 +6,7 @@ describe("3in2 component wrapper", () => {
     const Wrapper = require("../component.html");
     const { default : ComponentA } = require("./specimens/component-a.svelte");
     const { default : ComponentB } = require("./specimens/component-b.svelte");
-    
+
     let root;
 
     beforeEach(() => {
@@ -47,7 +47,7 @@ describe("3in2 component wrapper", () => {
 
         expect(wrapper.instance).toBeNull();
     });
-    
+
     it("should render a svelte3 component w/ props", async () => {
         new Wrapper({
             target : root,
@@ -61,7 +61,7 @@ describe("3in2 component wrapper", () => {
 
         expect(root.innerHTML).toMatchSnapshot();
     });
-   
+
     it("should update the svelte3 component when props change", async () => {
         const wrapper = new Wrapper({
             target : root,
@@ -74,16 +74,39 @@ describe("3in2 component wrapper", () => {
         });
 
         expect(root.innerHTML).toMatchSnapshot();
-        
+
         wrapper.set({
             a : "A2",
         });
 
         await wait();
-        
+
         expect(root.innerHTML).toMatchSnapshot();
     });
-    
+
+    it("shouldn't recreate the svelte3 component when props change", async () => {
+        const wrapper = new Wrapper({
+            target : root,
+
+            data : {
+                component : ComponentA,
+
+                a : "A",
+            },
+        });
+
+        const child = wrapper.instance;
+
+        wrapper.set({
+            component : ComponentA,
+            a : "A2",
+        });
+
+        await wait();
+
+        expect(child).toBe(wrapper.instance);
+    });
+
     it("should support swapping out the svelte3 component", async () => {
         const wrapper = new Wrapper({
             target : root,
@@ -96,36 +119,36 @@ describe("3in2 component wrapper", () => {
         });
 
         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();
     });
-    
+
     it("should set attributes on the wrapper element it creates", async () => {
         new Wrapper({
             target : root,
-            
+
             data : {
                 component : ComponentA,