fix(engine-dom): hydration errors due type mismatch (#2556)

* fix(engine-dom): hydration errors due type mismatch

* wip: normalize text in vnode creation

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

@@ -671,8 +671,8 @@ function co(text: string): VComment {
 }
 
 // [d]ynamic text
-function d(value: any): string | any {
-    return value == null ? '' : value;
+function d(value: any): string {
+    return value == null ? '' : String(value);
 }
 
 // [b]ind function

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

@@ -279,7 +279,7 @@ function vnodesAndElementHaveCompatibleAttrs(vnode: VNode, elm: Element): boolea
     // Note: intentionally ONLY matching vnodes.attrs to elm.attrs, in case SSR is adding extra attributes.
     for (const [attrName, attrValue] of Object.entries(attrs)) {
         const elmAttrValue = renderer.getAttribute(elm, attrName);
-        if (attrValue !== elmAttrValue) {
+        if (String(attrValue) !== elmAttrValue) {
             logError(
                 `Mismatch hydrating element <${elm.tagName.toLowerCase()}>: attribute "${attrName}" has different values, expected "${attrValue}" but found "${elmAttrValue}"`,
                 vnode.owner
@@ -300,7 +300,7 @@ function vnodesAndElementHaveCompatibleClass(vnode: VNode, elm: Element): boolea
     let nodesAreCompatible = true;
     let vnodeClassName;
 
-    if (!isUndefined(className) && className !== elm.className) {
+    if (!isUndefined(className) && String(className) !== elm.className) {
         // className is used when class is bound to an expr.
         nodesAreCompatible = false;
         vnodeClassName = className;

packages/integration-karma/test-hydration/mismatches/type-coercion-to-string/index.spec.js

@@ -0,0 +1,21 @@
+export default {
+    snapshot(target) {
+        const p = target.shadowRoot.querySelector('p');
+        return {
+            p,
+            text: p.firstChild,
+        };
+    },
+    test(target, snapshots, consoleCalls) {
+        expect(consoleCalls.warn).toHaveSize(0);
+        expect(consoleCalls.error).toHaveSize(0);
+
+        const p = target.shadowRoot.querySelector('p');
+        expect(p).toBe(snapshots.p);
+        expect(p.firstChild).toBe(snapshots.text);
+
+        expect(p.textContent).toBe('123');
+        expect(p.getAttribute('class')).toBe('123');
+        expect(p.getAttribute('data-attr')).toBe('123');
+    },
+};

packages/integration-karma/test-hydration/mismatches/type-coercion-to-string/x/main/main.html

@@ -0,0 +1,4 @@
+<template>
+    <!-- style attr is validated at compile time -->
+    <p class={num} data-attr={num}>{num}</p>
+</template>

packages/integration-karma/test-hydration/mismatches/type-coercion-to-string/x/main/main.js

@@ -0,0 +1,5 @@
+import { LightningElement } from 'lwc';
+
+export default class Main extends LightningElement {
+    num = 123;
+}