fix(synthetic-shadow): dont add key for slotted text vnode (salesforce#1946)

jodarove · web-flow · commit 9746b87817f9 · 2020-06-25T09:46:58.000-07:00
diff --git a/packages/@lwc/engine-core/src/framework/vm.ts b/packages/@lwc/engine-core/src/framework/vm.ts
@@ -616,7 +616,9 @@ export function allocateInSlot(vm: VM, children: VNodes) {
         // which might have similar keys. Each vnode will always have a key that
         // starts with a numeric character from compiler. In this case, we add a unique
         // notation for slotted vnodes keys, e.g.: `@foo:1:1`
-        vnode.key = `@${slotName}:${vnode.key}`;
+        if (!isUndefined(vnode.key)) {
+            vnode.key = `@${slotName}:${vnode.key}`;
+        }
         ArrayPush.call(vnodes, vnode);
     }
     if (isFalse(vm.isDirty)) {
diff --git a/packages/integration-karma/test/rendering/slotted-text-diffing/index.spec.js b/packages/integration-karma/test/rendering/slotted-text-diffing/index.spec.js
@@ -0,0 +1,24 @@
+import { createElement } from 'lwc';
+import Container from 'x/container';
+
+describe('Dynamic diffing algo for slotted text', () => {
+    it('should not confuse text vnodes when moving elements', function () {
+        const elm = createElement('x-container', { is: Container });
+        document.body.appendChild(elm);
+
+        expect(elm.shadowRoot.textContent).toBe('first textDisplay Boolean Value: truesecond text');
+        elm.toggleVisibility();
+
+        return Promise.resolve()
+            .then(() => {
+                const text = elm.shadowRoot.textContent;
+                expect(text).toBe('Display Boolean Value: false');
+
+                elm.toggleVisibility();
+            })
+            .then(() => {
+                const text = elm.shadowRoot.textContent;
+                expect(text).toBe('first textDisplay Boolean Value: truesecond text');
+            });
+    });
+});
diff --git a/packages/integration-karma/test/rendering/slotted-text-diffing/x/child/child.html b/packages/integration-karma/test/rendering/slotted-text-diffing/x/child/child.html
@@ -0,0 +1,3 @@
+<template>
+    <slot></slot>
+</template>
diff --git a/packages/integration-karma/test/rendering/slotted-text-diffing/x/child/child.js b/packages/integration-karma/test/rendering/slotted-text-diffing/x/child/child.js
@@ -0,0 +1,3 @@
+import { LightningElement } from 'lwc';
+
+export default class Child extends LightningElement {}
diff --git a/packages/integration-karma/test/rendering/slotted-text-diffing/x/container/container.html b/packages/integration-karma/test/rendering/slotted-text-diffing/x/container/container.html
@@ -0,0 +1,11 @@
+<template>
+    <x-child>
+        <template if:true={visible}>
+            <span>first text</span>
+        </template>
+        Display Boolean Value: {visible}
+        <template if:true={visible}>
+            <span>second text</span>
+        </template>
+    </x-child>
+</template>
diff --git a/packages/integration-karma/test/rendering/slotted-text-diffing/x/container/container.js b/packages/integration-karma/test/rendering/slotted-text-diffing/x/container/container.js
@@ -0,0 +1,9 @@
+import { LightningElement, api } from 'lwc';
+
+export default class Container extends LightningElement {
+    visible = true;
+
+    @api toggleVisibility() {
+        this.visible = !this.visible;
+    }
+}

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+<template>`
	`2`	`+ <slot></slot>`
	`3`	`+</template>`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+import { LightningElement } from 'lwc';`
	`2`	`+`
	`3`	`+export default class Child extends LightningElement {}`