fix(hydration): empty interpolated text mistmatch (#2656)

* fix(hydration): empty interpolated text mistmatch

* fix: use zero width joiner instead and rebase issues

packages/@lwc/engine-core/src/framework/hydration.ts

@@ -59,7 +59,7 @@ function hydrateText(vnode: VText, node: Node) {
         // eslint-disable-next-line lwc-internal/no-global-node
         validateNodeType(vnode, node, Node.TEXT_NODE);
 
-        if (node.nodeValue !== vnode.text) {
+        if (node.nodeValue !== vnode.text && !(node.nodeValue === '\u200D' && vnode.text === '')) {
             logWarn(
                 'Hydration mismatch: text values do not match, will recover from the difference',
                 vnode.owner

packages/@lwc/engine-server/src/serializer.ts

@@ -23,7 +23,7 @@ function serializeChildNodes(children: HostChildNode[]): string {
         .map((child): string => {
             switch (child.type) {
                 case HostNodeType.Text:
-                    return htmlEscape(child.value);
+                    return child.value === '' ? '\u200D' : htmlEscape(child.value);
                 case HostNodeType.Comment:
                     return `<!--${htmlEscape(child.value)}-->`;
                 case HostNodeType.Raw:

packages/integration-karma/test-hydration/mismatches/empty-nodes/index.spec.js

@@ -0,0 +1,18 @@
+export default {
+    snapshot(target) {
+        const p = target.shadowRoot.querySelector('p');
+        return {
+            p,
+            firstText: p.childNodes[0],
+        };
+    },
+    test(target, snapshots, consoleCalls) {
+        const hydratedSnapshots = this.snapshot(target);
+
+        expect(snapshots.p).toBe(hydratedSnapshots.p);
+        expect(snapshots.firstText).toBe(hydratedSnapshots.firstText);
+
+        expect(consoleCalls.error).toHaveSize(0);
+        expect(consoleCalls.warn).toHaveSize(0);
+    },
+};

packages/integration-karma/test-hydration/mismatches/empty-nodes/x/main/main.html

@@ -0,0 +1,3 @@
+<template>
+    <p>{emptyText}<span>foo</span></p>
+</template>

packages/integration-karma/test-hydration/mismatches/empty-nodes/x/main/main.js

@@ -0,0 +1,7 @@
+import { LightningElement } from 'lwc';
+
+export default class Main extends LightningElement {
+    get emptyText() {
+        return '';
+    }
+}