fix(engine): marking dynamic nodes as dynamic

packages/lwc-engine/src/framework/api.ts

@@ -27,7 +27,7 @@ import {
     createTextHook,
     createCommentHook,
 } from "./hooks";
-import { markAsDynamicChildren, hasDynamicChildren, patchEvent } from "./patch";
+import { markAsDynamicChildren, patchEvent } from "./patch";
 import {
     isNativeShadowRootAvailable,
 } from "../env/dom";
@@ -458,15 +458,18 @@ export function f(items: any[]): any[] {
     }
     const len = items.length;
     const flattened: VNodes = [];
+
+    // all flattened nodes should be marked as dynamic because
+    // flattened nodes are because of a conditional or iteration.
+    // We have to mark as dynamic because this could switch from an
+    // iterator to "static" text at any time.
+    // TODO: compiler should give us some sort of indicator
+    // to describe whether a vnode is dynamic or not
+    markAsDynamicChildren(flattened);
     for (let j = 0; j < len; j += 1) {
         const item = items[j];
         if (isArray(item)) {
             ArrayPush.apply(flattened, item);
-            // iteration mark propagation so the flattened structure can
-            // be diffed correctly.
-            if (hasDynamicChildren(item)) {
-                markAsDynamicChildren(flattened);
-            }
         } else {
             ArrayPush.call(flattened, item);
         }

packages/lwc-integration/src/components/rendering/test-duplicate-text-rendering/duplicate-text-rendering.spec.js

@@ -0,0 +1,14 @@
+const assert = require('assert');
+describe('Dynamic text nodes rendering duplicate text', () => {
+    const URL = 'http://localhost:4567/duplicate-text-rendering';
+
+    before(() => {
+        browser.url(URL);
+    });
+
+    it('should not render duplicate text', function () {
+        browser.click('integration-duplicate-text-rendering');
+        assert.notDeepEqual(browser.getText('integration-duplicate-text-rendering'), 'ab');
+        assert.deepEqual(browser.getText('integration-duplicate-text-rendering'), 'b');
+    });
+});

packages/lwc-integration/src/components/rendering/test-duplicate-text-rendering/integration/duplicate-text-rendering/duplicate-text-rendering.html

@@ -0,0 +1,15 @@
+<template>
+    <template if:true={hasParts}>
+        <template for:each={text} for:item="part">
+            <template if:true={part.highlight}>
+                {part.text}
+            </template>
+            <template if:false={part.highlight}>
+                {part.text}
+            </template>
+        </template>
+    </template>
+    <template if:false={hasParts}>
+        {text}
+    </template>
+</template>

packages/lwc-integration/src/components/rendering/test-duplicate-text-rendering/integration/duplicate-text-rendering/duplicate-text-rendering.js

@@ -0,0 +1,27 @@
+import { LightningElement, track } from 'lwc';
+
+export default class App extends LightningElement {
+    @track text = [{
+        text: 'a',
+        highlight: false,
+    }]
+
+    get hasParts() {
+        return Array.isArray(this.text) && this.text.length > 0;
+    }
+
+    get highlight() {
+        return false
+    }
+
+    get firstPart() {
+        return this.text[0]
+    }
+
+    connectedCallback() {
+        this.addEventListener('click', () => {
+            this.text = 'b'
+        })
+    }
+
+}