@lwc/engine-core 7.2.0 → 7.2.2

package/dist/framework/fragment-cache.d.ts

@@ -0,0 +1,6 @@
+export declare const enum FragmentCacheKey {
+    HAS_SCOPED_STYLE = 1,
+    SHADOW_MODE_SYNTHETIC = 2
+}
+export declare function getFromFragmentCache(cacheKey: number, strings: string[]): Element | undefined;
+export declare function setInFragmentCache(cacheKey: number, strings: string[], element: Element): void;

package/dist/framework/stylesheet.d.ts

@@ -12,7 +12,7 @@ export type Stylesheet = (stylesheetToken: string | undefined, useActualHostSele
  */
 export type Stylesheets = Array<Stylesheet | Stylesheets>;
 export declare function updateStylesheetToken(vm: VM, template: Template, legacy: boolean): void;
-export declare function getStylesheetsContent(vm: VM, template: Template): string[];
+export declare function getStylesheetsContent(vm: VM, template: Template): ReadonlyArray<string>;
 /**
  * If the component that is currently being rendered uses scoped styles,
  * this returns the unique token for that scoped stylesheet. Otherwise
@@ -29,5 +29,5 @@ export declare function getScopeTokenClass(owner: VM, legacy: boolean): string |
  * @param vnode
  */
 export declare function getStylesheetTokenHost(vnode: VCustomElement): string | null;
-export declare function createStylesheet(vm: VM, stylesheets: string[]): VNode[] | null;
+export declare function createStylesheet(vm: VM, stylesheets: ReadonlyArray<string>): VNode[] | null;
 export declare function unrenderStylesheet(stylesheet: Stylesheet): void;

package/dist/index.cjs.js

@@ -155,7 +155,7 @@ function log(method, message, vm, once) {
         }
         alreadyLoggedMessages.add(msg);
     }
-    // In Jest tests, reduce the warning and error verbosity by not printing the callstack
+    // In Vitest tests, reduce the warning and error verbosity by not printing the callstack
     if (process.env.NODE_ENV === 'test') {
         /* eslint-disable-next-line no-console */
         console[method](msg);
@@ -3133,15 +3133,22 @@ function evaluateStylesheetsContent(stylesheets, stylesheetToken, vm) {
 function getStylesheetsContent(vm, template) {
     const { stylesheets, stylesheetToken } = template;
     const { stylesheets: vmStylesheets } = vm;
-    let content = [];
-    if (hasStyles(stylesheets)) {
-        content = evaluateStylesheetsContent(stylesheets, stylesheetToken, vm);
+    const hasTemplateStyles = hasStyles(stylesheets);
+    const hasVmStyles = hasStyles(vmStylesheets);
+    if (hasTemplateStyles) {
+        const content = evaluateStylesheetsContent(stylesheets, stylesheetToken, vm);
+        if (hasVmStyles) {
+            // Slow path – merge the template styles and vm styles
+            shared.ArrayPush.apply(content, evaluateStylesheetsContent(vmStylesheets, stylesheetToken, vm));
+        }
+        return content;
     }
-    // VM (component) stylesheets apply after template stylesheets
-    if (hasStyles(vmStylesheets)) {
-        shared.ArrayPush.apply(content, evaluateStylesheetsContent(vmStylesheets, stylesheetToken, vm));
+    if (hasVmStyles) {
+        // No template styles, so return vm styles directly
+        return evaluateStylesheetsContent(vmStylesheets, stylesheetToken, vm);
     }
-    return content;
+    // Fastest path - no styles, so return an empty array
+    return EmptyArray;
 }
 // It might be worth caching this to avoid doing the lookup repeatedly, but
 // perf testing has not shown it to be a huge improvement yet:
@@ -5252,22 +5259,30 @@ function s(slotName, data, children, slotset) {
                     if (renderMode === 0 /* RenderMode.Light */ &&
                         shared.isAPIFeatureEnabled(6 /* APIFeature.USE_LIGHT_DOM_SLOT_FORWARDING */, apiVersion) &&
                         (isVBaseElement(vnode) || isVStatic(vnode)) &&
-                        // We only need to copy the vnodes when the slot assignment changes, copying every time causes issues with
-                        // disconnected/connected callback firing.
                         vnode.slotAssignment !== data.slotAssignment) {
-                        // When the light DOM slot assignment (slot attribute) changes we can't use the same reference
-                        // to the vnode because the current way the diffing algo works, it will replace the original reference
-                        // to the host element with a new one. This means the new element will be mounted and immediately unmounted.
-                        // Creating a copy of the vnode to preserve a reference to the previous host element.
-                        if (shared.isUndefined(vnode.elm)) {
-                            // vnode.elm is undefined during initial render.
-                            // We don't need to clone at this point because it doesn't need to be unmounted.
-                            vnode.slotAssignment = data.slotAssignment;
-                        }
-                        else {
-                            // Clone when the vnode.elm is defined to ensure we don't lose reference to the previous element.
-                            // This is specifically for slot forwarding.
-                            clonedVNode = { ...vnode, slotAssignment: data.slotAssignment };
+                        // When the light DOM slot assignment (slot attribute) changes, we can't use the same reference
+                        // to the vnode because the current way the diffing algo works, it will replace the original
+                        // reference to the host element with a new one. This means the new element will be mounted and
+                        // immediately unmounted. Creating a copy of the vnode preserves a reference to the previous
+                        // host element.
+                        clonedVNode = { ...vnode, slotAssignment: data.slotAssignment };
+                        // For disconnectedCallback to work correctly in synthetic lifecycle mode, we need to link the
+                        // current VM's velements to the clone, so that when the VM unmounts, the clone also unmounts.
+                        // Note this only applies to VCustomElements, since those are the elements that we manually need
+                        // to call disconnectedCallback for, when running in synthetic lifecycle mode.
+                        //
+                        // You might think it would make more sense to add the clonedVNode to the same velements array
+                        // as the original vnode's VM (i.e. `vnode.owner.velements`) rather than the current VM (i.e.
+                        // `vmBeingRendered.velements`), but this actually might not trigger disconnectedCallback
+                        // in synthetic lifecycle mode. The reason for this is that a reactivity change may cause
+                        // the slottable component to unmount, but _not_ the slotter component (see issue #4446).
+                        //
+                        // If this occurs, then the slottable component (i.e .this component we are rendering right
+                        // now) is the one that needs to own the clone. Whereas if a reactivity change higher in the
+                        // tree causes the slotter to unmount, then the slottable will also unmount. So using the
+                        // current VM works either way.
+                        if (isVCustomElement(vnode)) {
+                            addVNodeToChildLWC(clonedVNode);
                         }
                     }
                     // If the slot content is standard type, the content is static, no additional
@@ -5345,14 +5360,14 @@ function i(iterable, factory) {
     // TODO [#1276]: compiler should give us some sort of indicator when a vnodes collection is dynamic
     sc(list);
     const vmBeingRendered = getVMBeingRendered();
-    if (shared.isUndefined(iterable) || iterable === null) {
+    if (shared.isUndefined(iterable) || shared.isNull(iterable)) {
         if (process.env.NODE_ENV !== 'production') {
-            logError(`Invalid template iteration for value "${shared.toString(iterable)}" in ${vmBeingRendered}. It must be an Array or an iterable Object.`, vmBeingRendered);
+            logError(`Invalid template iteration for value \`${shared.toString(iterable)}\` in ${vmBeingRendered}. It must be an array-like object.`, vmBeingRendered);
         }
         return list;
     }
     if (process.env.NODE_ENV !== 'production') {
-        shared.assert.isFalse(shared.isUndefined(iterable[SymbolIterator]), `Invalid template iteration for value \`${shared.toString(iterable)}\` in ${vmBeingRendered}. It must be an array-like object and not \`null\` nor \`undefined\`.`);
+        shared.assert.isFalse(shared.isUndefined(iterable[SymbolIterator]), `Invalid template iteration for value \`${shared.toString(iterable)}\` in ${vmBeingRendered}. It must be an array-like object.`);
     }
     const iterator = iterable[SymbolIterator]();
     if (process.env.NODE_ENV !== 'production') {
@@ -5489,9 +5504,6 @@ function k(compilerKey, obj) {
 function gid(id) {
     const vmBeingRendered = getVMBeingRendered();
     if (shared.isUndefined(id) || id === '') {
-        if (process.env.NODE_ENV !== 'production') {
-            logError(`Invalid id value "${id}". The id attribute must contain a non-empty string.`, vmBeingRendered);
-        }
         return id;
     }
     // We remove attributes when they are assigned a value of null
@@ -5508,11 +5520,6 @@ function gid(id) {
 function fid(url) {
     const vmBeingRendered = getVMBeingRendered();
     if (shared.isUndefined(url) || url === '') {
-        if (process.env.NODE_ENV !== 'production') {
-            if (shared.isUndefined(url)) {
-                logError(`Undefined url value for "href" or "xlink:href" attribute. Expected a non-empty string.`, vmBeingRendered);
-            }
-        }
         return url;
     }
     // We remove attributes when they are assigned a value of null
@@ -5797,6 +5804,44 @@ function logGlobalOperationEnd(opId, vm) {
     }
 }
 
+/*
+ * Copyright (c) 2024, Salesforce, Inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: MIT
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
+ */
+// HAS_SCOPED_STYLE | SHADOW_MODE_SYNTHETIC = 3
+const MAX_CACHE_KEY = 3;
+// Mapping of cacheKeys to `string[]` (assumed to come from a tagged template literal) to an Element.
+// Note that every unique tagged template literal will have a unique `string[]`. So by using `string[]`
+// as the WeakMap key, we effectively associate each Element with a unique tagged template literal.
+// See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#tagged_templates
+// Also note that this array only needs to be large enough to account for the maximum possible cache key
+const fragmentCache = shared.ArrayFrom({ length: MAX_CACHE_KEY + 1 }, () => new WeakMap());
+// Only used in LWC's Karma tests
+if (process.env.NODE_ENV === 'test-karma-lwc') {
+    window.__lwcResetFragmentCache = () => {
+        for (let i = 0; i < fragmentCache.length; i++) {
+            fragmentCache[i] = new WeakMap();
+        }
+    };
+}
+function checkIsBrowser() {
+    // The fragment cache only serves prevent calling innerHTML multiple times which doesn't happen on the server.
+    /* istanbul ignore next */
+    if (!process.env.IS_BROWSER) {
+        throw new Error('The fragment cache is intended to only be used in @lwc/engine-dom, not @lwc/engine-server');
+    }
+}
+function getFromFragmentCache(cacheKey, strings) {
+    checkIsBrowser();
+    return fragmentCache[cacheKey].get(strings);
+}
+function setInFragmentCache(cacheKey, strings, element) {
+    checkIsBrowser();
+    fragmentCache[cacheKey].set(strings, element);
+}
+
 /*
  * Copyright (c) 2024, Salesforce, Inc.
  * All rights reserved.
@@ -5940,43 +5985,24 @@ function serializeClassAttribute(part, classToken) {
     const computedClassName = `${classToken} ${shared.keys(classMap).join(' ')}`.trim();
     return computedClassName.length ? ` class="${shared.htmlEscape(computedClassName, true)}"` : '';
 }
-// This should be a no-op outside of LWC's Karma tests, where it's not needed
-let registerFragmentCache = shared.noop;
-// Only used in LWC's Karma tests
-if (process.env.NODE_ENV === 'test-karma-lwc') {
-    // Keep track of fragmentCaches, so we can clear them in LWC's Karma tests
-    const fragmentCaches = [];
-    registerFragmentCache = (fragmentCache) => {
-        fragmentCaches.push(fragmentCache);
-    };
-    window.__lwcResetFragmentCaches = () => {
-        for (const fragmentCache of fragmentCaches) {
-            for (const key of shared.keys(fragmentCache)) {
-                delete fragmentCache[key];
-            }
-        }
-    };
-}
 function buildParseFragmentFn(createFragmentFn) {
-    return (strings, ...keys) => {
-        const cache = shared.create(null);
-        registerFragmentCache(cache);
-        return function (parts) {
+    return function parseFragment(strings, ...keys) {
+        return function applyFragmentParts(parts) {
             const { context: { hasScopedStyles, stylesheetToken, legacyStylesheetToken }, shadowMode, renderer, } = getVMBeingRendered();
             const hasStyleToken = !shared.isUndefined(stylesheetToken);
             const isSyntheticShadow = shadowMode === 1 /* ShadowMode.Synthetic */;
             const hasLegacyToken = lwcRuntimeFlags.ENABLE_LEGACY_SCOPE_TOKENS && !shared.isUndefined(legacyStylesheetToken);
             let cacheKey = 0;
             if (hasStyleToken && hasScopedStyles) {
-                cacheKey |= 1 /* FragmentCache.HAS_SCOPED_STYLE */;
+                cacheKey |= 1 /* FragmentCacheKey.HAS_SCOPED_STYLE */;
             }
             if (hasStyleToken && isSyntheticShadow) {
-                cacheKey |= 2 /* FragmentCache.SHADOW_MODE_SYNTHETIC */;
+                cacheKey |= 2 /* FragmentCacheKey.SHADOW_MODE_SYNTHETIC */;
             }
             // Cache is only here to prevent calling innerHTML multiple times which doesn't happen on the server.
             if (process.env.IS_BROWSER) {
                 // Disable this on the server to prevent cache poisoning when expressions are used.
-                const cached = cache[cacheKey];
+                const cached = getFromFragmentCache(cacheKey, strings);
                 if (!shared.isUndefined(cached)) {
                     return cached;
                 }
@@ -6016,8 +6042,12 @@ function buildParseFragmentFn(createFragmentFn) {
                 }
             }
             htmlFragment += strings[strings.length - 1];
-            cache[cacheKey] = createFragmentFn(htmlFragment, renderer);
-            return cache[cacheKey];
+            const element = createFragmentFn(htmlFragment, renderer);
+            // Cache is only here to prevent calling innerHTML multiple times which doesn't happen on the server.
+            if (process.env.IS_BROWSER) {
+                setInFragmentCache(cacheKey, strings, element);
+            }
+            return element;
         };
     };
 }
@@ -6552,6 +6582,8 @@ function computeShadowMode(def, owner, renderer, hydrated) {
     // on, but components running in actual native shadow mode
     (process.env.NODE_ENV === 'test-karma-lwc' &&
         process.env.FORCE_NATIVE_SHADOW_MODE_FOR_TEST) ||
+        // If synthetic shadow is explicitly disabled, use pure-native
+        lwcRuntimeFlags.DISABLE_SYNTHETIC_SHADOW ||
         // hydration only supports native shadow
         shared.isTrue(hydrated)) {
         return 0 /* ShadowMode.Native */;
@@ -8091,5 +8123,5 @@ exports.swapTemplate = swapTemplate;
 exports.track = track;
 exports.unwrap = unwrap;
 exports.wire = wire;
-/** version: 7.2.0 */
+/** version: 7.2.2 */
 //# sourceMappingURL=index.cjs.js.map