@lwc/engine-core 2.8.0 → 2.9.0

package/dist/engine-core.cjs.js

@@ -71,6 +71,18 @@ function parseStyleText(cssText) {
   }
 
   return styleMap;
+} // Make a shallow copy of an object but omit the given key
+
+function cloneAndOmitKey(object, keyToOmit) {
+  const result = {};
+
+  for (const key of Object.keys(object)) {
+    if (key !== keyToOmit) {
+      result[key] = object[key];
+    }
+  }
+
+  return result;
 }
 
 //
@@ -4170,11 +4182,13 @@ function fallbackElmHook(elm, vnode) {
     ) {
       // this element will now accept any manual content inserted into it
       observeElementChildNodes(elm);
-    } // when running in synthetic shadow mode, we need to set the shadowToken value
-    // into each element from the template, so they can be styled accordingly.
-
+    }
 
-    setElementShadowToken(elm, stylesheetToken);
+    if (!shared.isUndefined(stylesheetToken)) {
+      // when running in synthetic shadow mode, we need to set the shadowToken value
+      // into each element from the template, so they can be styled accordingly.
+      setElementShadowToken(elm, stylesheetToken);
+    }
   }
 
   if (process.env.NODE_ENV !== 'production') {
@@ -4260,7 +4274,9 @@ function createViewModelHook(elm, vnode) {
     } = owner.context; // when running in synthetic shadow mode, we need to set the shadowToken value
     // into each element from the template, so they can be styled accordingly.
 
-    setElementShadowToken(elm, stylesheetToken);
+    if (!shared.isUndefined(stylesheetToken)) {
+      setElementShadowToken(elm, stylesheetToken);
+    }
   }
 
   vm = createVM(elm, ctor, {
@@ -4441,6 +4457,7 @@ function updateDynamicChildren(parentElm, oldCh, newCh) {
   let idxInOld;
   let elmToMove;
   let before;
+  let clonedOldCh = false;
 
   while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
     if (!isVNode(oldStartVnode)) {
@@ -4492,7 +4509,18 @@ function updateDynamicChildren(parentElm, oldCh, newCh) {
             newStartVnode.hook.create(newStartVnode);
             newStartVnode.hook.insert(newStartVnode, parentElm, oldStartVnode.elm);
           } else {
-            patchVnode(elmToMove, newStartVnode);
+            patchVnode(elmToMove, newStartVnode); // Delete the old child, but copy the array since it is read-only.
+            // The `oldCh` will be GC'ed after `updateDynamicChildren` is complete,
+            // so we only care about the `oldCh` object inside this function.
+            // To avoid cloning over and over again, we check `clonedOldCh`
+            // and only clone once.
+
+            if (!clonedOldCh) {
+              clonedOldCh = true;
+              oldCh = [...oldCh];
+            } // We've already cloned at least once, so it's no longer read-only
+
+
             oldCh[idxInOld] = undefined;
             newStartVnode.hook.move(elmToMove, parentElm, oldStartVnode.elm);
           }
@@ -4588,7 +4616,7 @@ function addVNodeToChildLWC(vnode) {
 } // [h]tml node
 
 
-function h(sel, data, children) {
+function h(sel, data, children = EmptyArray) {
   const vmBeingRendered = getVMBeingRendered();
 
   if (process.env.NODE_ENV !== 'production') {
@@ -4986,7 +5014,7 @@ let dynamicImportedComponentCounter = 0;
  * create a dynamic component via `<x-foo lwc:dynamic={Ctor}>`
  */
 
-function dc(sel, Ctor, data, children) {
+function dc(sel, Ctor, data, children = EmptyArray) {
   if (process.env.NODE_ENV !== 'production') {
     shared.assert.isTrue(shared.isString(sel), `dc() 1st argument sel must be a string.`);
     shared.assert.isTrue(shared.isObject(data), `dc() 3nd argument data must be an object.`);
@@ -5010,10 +5038,14 @@ function dc(sel, Ctor, data, children) {
   } // the new vnode key is a mix of idx and compiler key, this is required by the diffing algo
   // to identify different constructors as vnodes with different keys to avoid reusing the
   // element used for previous constructors.
+  // Shallow clone is necessary here becuase VElementData may be shared across VNodes due to
+  // hoisting optimization.
 
 
-  data.key = `dc:${idx}:${data.key}`;
-  return c(sel, Ctor, data, children);
+  const newData = Object.assign(Object.assign({}, data), {
+    key: `dc:${idx}:${data.key}`
+  });
+  return c(sel, Ctor, newData, children);
 }
 /**
  * slow children collection marking mechanism. this API allows the compiler to signal
@@ -5133,12 +5165,14 @@ function updateStylesheetToken(vm, template) {
     hasTokenInAttribute: oldHasTokenInAttribute
   } = context;
 
-  if (oldHasTokenInClass) {
-    getClassList(elm).remove(makeHostToken(oldToken));
-  }
+  if (!shared.isUndefined(oldToken)) {
+    if (oldHasTokenInClass) {
+      getClassList(elm).remove(makeHostToken(oldToken));
+    }
 
-  if (oldHasTokenInAttribute) {
-    removeAttribute(elm, makeHostToken(oldToken));
+    if (oldHasTokenInAttribute) {
+      removeAttribute(elm, makeHostToken(oldToken));
+    }
   } // Apply the new template styling token to the host element, if the new template has any
   // associated stylesheets. In the case of light DOM, also ensure there is at least one scoped stylesheet.
 
@@ -5919,7 +5953,10 @@ function hydrateElement(vnode, node) {
 
     if (!shared.isUndefined(props) && !shared.isUndefined(props.innerHTML)) {
       if (elm.innerHTML === props.innerHTML) {
-        delete props.innerHTML;
+        // Do a shallow clone since VNodeData may be shared across VNodes due to hoist optimization
+        vnode.data = Object.assign(Object.assign({}, vnode.data), {
+          props: cloneAndOmitKey(props, 'innerHTML')
+        });
       } else {
         logWarn(`Mismatch hydrating element <${elm.tagName.toLowerCase()}>: innerHTML values do not match for element, will recover from the difference`, vnode.owner);
       }
@@ -7268,4 +7305,4 @@ exports.swapTemplate = swapTemplate;
 exports.track = track;
 exports.unwrap = unwrap;
 exports.wire = wire;
-/* version: 2.8.0 */
+/* version: 2.9.0 */

package/dist/engine-core.js

@@ -68,6 +68,18 @@ function parseStyleText(cssText) {
   }
 
   return styleMap;
+} // Make a shallow copy of an object but omit the given key
+
+function cloneAndOmitKey(object, keyToOmit) {
+  const result = {};
+
+  for (const key of Object.keys(object)) {
+    if (key !== keyToOmit) {
+      result[key] = object[key];
+    }
+  }
+
+  return result;
 }
 
 //
@@ -4167,11 +4179,13 @@ function fallbackElmHook(elm, vnode) {
     ) {
       // this element will now accept any manual content inserted into it
       observeElementChildNodes(elm);
-    } // when running in synthetic shadow mode, we need to set the shadowToken value
-    // into each element from the template, so they can be styled accordingly.
-
+    }
 
-    setElementShadowToken(elm, stylesheetToken);
+    if (!isUndefined$1(stylesheetToken)) {
+      // when running in synthetic shadow mode, we need to set the shadowToken value
+      // into each element from the template, so they can be styled accordingly.
+      setElementShadowToken(elm, stylesheetToken);
+    }
   }
 
   if (process.env.NODE_ENV !== 'production') {
@@ -4257,7 +4271,9 @@ function createViewModelHook(elm, vnode) {
     } = owner.context; // when running in synthetic shadow mode, we need to set the shadowToken value
     // into each element from the template, so they can be styled accordingly.
 
-    setElementShadowToken(elm, stylesheetToken);
+    if (!isUndefined$1(stylesheetToken)) {
+      setElementShadowToken(elm, stylesheetToken);
+    }
   }
 
   vm = createVM(elm, ctor, {
@@ -4438,6 +4454,7 @@ function updateDynamicChildren(parentElm, oldCh, newCh) {
   let idxInOld;
   let elmToMove;
   let before;
+  let clonedOldCh = false;
 
   while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
     if (!isVNode(oldStartVnode)) {
@@ -4489,7 +4506,18 @@ function updateDynamicChildren(parentElm, oldCh, newCh) {
             newStartVnode.hook.create(newStartVnode);
             newStartVnode.hook.insert(newStartVnode, parentElm, oldStartVnode.elm);
           } else {
-            patchVnode(elmToMove, newStartVnode);
+            patchVnode(elmToMove, newStartVnode); // Delete the old child, but copy the array since it is read-only.
+            // The `oldCh` will be GC'ed after `updateDynamicChildren` is complete,
+            // so we only care about the `oldCh` object inside this function.
+            // To avoid cloning over and over again, we check `clonedOldCh`
+            // and only clone once.
+
+            if (!clonedOldCh) {
+              clonedOldCh = true;
+              oldCh = [...oldCh];
+            } // We've already cloned at least once, so it's no longer read-only
+
+
             oldCh[idxInOld] = undefined;
             newStartVnode.hook.move(elmToMove, parentElm, oldStartVnode.elm);
           }
@@ -4585,7 +4613,7 @@ function addVNodeToChildLWC(vnode) {
 } // [h]tml node
 
 
-function h(sel, data, children) {
+function h(sel, data, children = EmptyArray) {
   const vmBeingRendered = getVMBeingRendered();
 
   if (process.env.NODE_ENV !== 'production') {
@@ -4983,7 +5011,7 @@ let dynamicImportedComponentCounter = 0;
  * create a dynamic component via `<x-foo lwc:dynamic={Ctor}>`
  */
 
-function dc(sel, Ctor, data, children) {
+function dc(sel, Ctor, data, children = EmptyArray) {
   if (process.env.NODE_ENV !== 'production') {
     assert.isTrue(isString(sel), `dc() 1st argument sel must be a string.`);
     assert.isTrue(isObject(data), `dc() 3nd argument data must be an object.`);
@@ -5007,10 +5035,14 @@ function dc(sel, Ctor, data, children) {
   } // the new vnode key is a mix of idx and compiler key, this is required by the diffing algo
   // to identify different constructors as vnodes with different keys to avoid reusing the
   // element used for previous constructors.
+  // Shallow clone is necessary here becuase VElementData may be shared across VNodes due to
+  // hoisting optimization.
 
 
-  data.key = `dc:${idx}:${data.key}`;
-  return c(sel, Ctor, data, children);
+  const newData = Object.assign(Object.assign({}, data), {
+    key: `dc:${idx}:${data.key}`
+  });
+  return c(sel, Ctor, newData, children);
 }
 /**
  * slow children collection marking mechanism. this API allows the compiler to signal
@@ -5130,12 +5162,14 @@ function updateStylesheetToken(vm, template) {
     hasTokenInAttribute: oldHasTokenInAttribute
   } = context;
 
-  if (oldHasTokenInClass) {
-    getClassList(elm).remove(makeHostToken(oldToken));
-  }
+  if (!isUndefined$1(oldToken)) {
+    if (oldHasTokenInClass) {
+      getClassList(elm).remove(makeHostToken(oldToken));
+    }
 
-  if (oldHasTokenInAttribute) {
-    removeAttribute(elm, makeHostToken(oldToken));
+    if (oldHasTokenInAttribute) {
+      removeAttribute(elm, makeHostToken(oldToken));
+    }
   } // Apply the new template styling token to the host element, if the new template has any
   // associated stylesheets. In the case of light DOM, also ensure there is at least one scoped stylesheet.
 
@@ -5916,7 +5950,10 @@ function hydrateElement(vnode, node) {
 
     if (!isUndefined$1(props) && !isUndefined$1(props.innerHTML)) {
       if (elm.innerHTML === props.innerHTML) {
-        delete props.innerHTML;
+        // Do a shallow clone since VNodeData may be shared across VNodes due to hoist optimization
+        vnode.data = Object.assign(Object.assign({}, vnode.data), {
+          props: cloneAndOmitKey(props, 'innerHTML')
+        });
       } else {
         logWarn(`Mismatch hydrating element <${elm.tagName.toLowerCase()}>: innerHTML values do not match for element, will recover from the difference`, vnode.owner);
       }
@@ -7192,4 +7229,4 @@ function setHooks(hooks) {
 }
 
 export { LightningElement, profilerControl as __unstable__ProfilerControl, api$1 as api, connectRootElement, createContextProvider, createVM, disconnectRootElement, getAssociatedVMIfPresent, getComponentDef, getComponentHtmlPrototype, getUpgradableConstructor, hydrateRootElement, isComponentConstructor, readonly, register, registerComponent, registerDecorators, registerTemplate, sanitizeAttribute, setAddEventListener, setAssertInstanceOfHTMLElement, setAttachShadow, setCreateComment, setCreateElement, setCreateText, setDefineCustomElement, setDispatchEvent, setGetAttribute, setGetBoundingClientRect, setGetChildNodes, setGetChildren, setGetClassList, setGetCustomElement, setGetElementsByClassName, setGetElementsByTagName, setGetFirstChild, setGetFirstElementChild, setGetLastChild, setGetLastElementChild, setGetProperty, setHTMLElement, setHooks, setInsert, setInsertGlobalStylesheet, setInsertStylesheet, setIsConnected, setIsHydrating, setIsNativeShadowDefined, setIsSyntheticShadowDefined, setNextSibling, setQuerySelector, setQuerySelectorAll, setRemove, setRemoveAttribute, setRemoveEventListener, setSetAttribute, setSetCSSStyleProperty, setSetProperty, setSetText, setSsr, swapComponent, swapStyle, swapTemplate, track, unwrap, wire };
-/* version: 2.8.0 */
+/* version: 2.9.0 */

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@lwc/engine-core",
-    "version": "2.8.0",
+    "version": "2.9.0",
     "description": "Core LWC engine APIs.",
     "homepage": "https://lwc.dev/",
     "repository": {
@@ -24,8 +24,8 @@
         "types/"
     ],
     "dependencies": {
-        "@lwc/features": "2.8.0",
-        "@lwc/shared": "2.8.0"
+        "@lwc/features": "2.9.0",
+        "@lwc/shared": "2.9.0"
     },
     "devDependencies": {
         "observable-membrane": "2.0.0"

package/types/framework/api.d.ts

@@ -1,7 +1,7 @@
 import { SlotSet } from './vm';
 import { LightningElementConstructor } from './base-lightning-element';
 import { VNode, VNodes, VElement, VText, VCustomElement, VComment, VElementData } from './vnodes';
-declare function h(sel: string, data: VElementData, children: VNodes): VElement;
+declare function h(sel: string, data: VElementData, children?: VNodes): VElement;
 declare function ti(value: any): number;
 declare function s(slotName: string, data: VElementData, children: VNodes, slotset: SlotSet | undefined): VElement | VNodes;
 declare function c(sel: string, Ctor: LightningElementConstructor, data: VElementData, children?: VNodes): VCustomElement;
@@ -9,7 +9,7 @@ declare function i(iterable: Iterable<any>, factory: (value: any, index: number,
 /**
  * [f]lattening
  */
-declare function f(items: any[]): any[];
+declare function f(items: Readonly<Array<Readonly<Array<VNodes>> | VNodes>>): VNodes;
 declare function t(text: string): VText;
 declare function co(text: string): VComment;
 declare function d(value: any): string;

package/types/framework/template.d.ts

@@ -1,7 +1,7 @@
 import { RenderAPI } from './api';
 import { SlotSet, TemplateCache, VM } from './vm';
 import { TemplateStylesheetFactories } from './stylesheet';
-import { VNode, VNodes } from './vnodes';
+import { VNodes } from './vnodes';
 export interface Template {
     (api: RenderAPI, cmp: object, slotSet: SlotSet, cache: TemplateCache): VNodes;
     /** The list of slot names used in the template. */
@@ -16,4 +16,4 @@ export interface Template {
 export declare let isUpdatingTemplate: boolean;
 export declare function getVMBeingRendered(): VM | null;
 export declare function setVMBeingRendered(vm: VM | null): void;
-export declare function evaluateTemplate(vm: VM, html: Template): Array<VNode | null>;
+export declare function evaluateTemplate(vm: VM, html: Template): VNodes;

package/types/framework/utils.d.ts

@@ -7,4 +7,9 @@ export declare function guid(): string;
 export declare function parseStyleText(cssText: string): {
     [name: string]: string;
 };
+export declare function cloneAndOmitKey(object: {
+    [key: string]: any;
+}, keyToOmit: string): {
+    [key: string]: any;
+};
 export {};

package/types/framework/vnodes.d.ts

@@ -8,7 +8,7 @@ export declare const enum VNodeType {
 }
 export declare type VNode = VText | VComment | VElement | VCustomElement;
 export declare type VParentElement = VElement | VCustomElement;
-export declare type VNodes = Array<VNode | null>;
+export declare type VNodes = Readonly<Array<VNode | null>>;
 export interface BaseVNode {
     type: VNodeType;
     elm: Node | undefined;
@@ -46,18 +46,18 @@ export interface VCustomElement extends VBaseElement {
     aChildren?: VNodes;
 }
 export interface VNodeData {
-    props?: Record<string, any>;
-    attrs?: Record<string, string | number | boolean>;
-    className?: string;
-    style?: string;
-    classMap?: Record<string, boolean>;
-    styleDecls?: Array<[string, string, boolean]>;
-    context?: Record<string, Record<string, any>>;
-    on?: Record<string, (event: Event) => any>;
-    svg?: boolean;
+    readonly props?: Readonly<Record<string, any>>;
+    readonly attrs?: Readonly<Record<string, string | number | boolean>>;
+    readonly className?: string;
+    readonly style?: string;
+    readonly classMap?: Readonly<Record<string, boolean>>;
+    readonly styleDecls?: Readonly<Array<[string, string, boolean]>>;
+    readonly context?: Readonly<Record<string, Readonly<Record<string, any>>>>;
+    readonly on?: Readonly<Record<string, (event: Event) => any>>;
+    readonly svg?: boolean;
 }
 export interface VElementData extends VNodeData {
-    key: Key;
+    readonly key: Key;
 }
 export interface Hooks<N extends VNode> {
     create: (vNode: N) => void;