fix: actually fix innerHTML

salesforce · Dec 7, 2021 · 1ddbe4a · 1ddbe4a
1 parent 5a980bb
commit 1ddbe4a
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 8 deletions.
diff --git a/packages/@lwc/engine-core/src/framework/api.ts b/packages/@lwc/engine-core/src/framework/api.ts
@@ -26,7 +26,7 @@ import {
 import { logError, logWarn } from '../shared/logger';
 import { invokeEventListener } from './invoker';
 import { getVMBeingRendered } from './template';
-import { EmptyArray, EmptyObject } from './utils';
+import { cloneAndOmitKey, EmptyArray, EmptyObject } from './utils';
 import {
     appendVM,
     getAssociatedVMIfPresent,
@@ -203,16 +203,12 @@ const ElementHook: Hooks<VElement> = {
             // remove the innerHTML from props so it reuses the existing dom elements.
             const { props } = vnode.data;
             if (!isUndefined(props) && !isUndefined(props.innerHTML)) {
-                // Do a shallow clone since VNodeData may be shared across VNodes due to hoist optimization
                 if (elm.innerHTML === props.innerHTML) {
-                    const newData = {
+                    // Do a shallow clone since VNodeData may be shared across VNodes due to hoist optimization
+                    vnode.data = {
                         ...vnode.data,
-                        props: {
-                            ...vnode.data.props,
-                            innerHTML: undefined,
-                        },
+                        props: cloneAndOmitKey(props, 'innerHTML'),
                     };
-                    vnode.data = newData;
                 } else {
                     logWarn(
                         `Mismatch hydrating element <${elm.tagName.toLowerCase()}>: innerHTML values do not match for element, will recover from the difference`,

diff --git a/packages/@lwc/engine-core/src/framework/utils.ts b/packages/@lwc/engine-core/src/framework/utils.ts
@@ -74,3 +74,14 @@ export function parseStyleText(cssText: string): { [name: string]: string } {
 
     return styleMap;
 }
+
+// Make a shallow copy of an object but omit the given key
+export function cloneAndOmitKey(object: { [key: string]: any }, keyToOmit: string) {
+    const result: { [key: string]: any } = {};
+    for (const key of Object.keys(object)) {
+        if (key !== keyToOmit) {
+            result[key] = object[key];
+        }
+    }
+    return result;
+}