@lwc/engine-core 7.3.0-alpha.3 → 8.0.0-alpha.1

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/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);
@@ -1456,7 +1456,7 @@ async function fetchStylesheet(elm) {
         try {
             return await (await fetch(href)).text();
         }
-        catch (err) {
+        catch (_err) {
             logWarnOnce(`Ignoring cross-origin stylesheet in migrate mode: ${href}`);
             // ignore errors with cross-origin stylesheets - nothing we can do for those
             return '';
@@ -5261,22 +5261,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
@@ -5798,6 +5806,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.
@@ -5941,47 +5987,33 @@ 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;
                 }
             }
+            // See W-16614556
+            if ((hasStyleToken && !shared.isString(stylesheetToken)) ||
+                (hasLegacyToken && !shared.isString(legacyStylesheetToken))) {
+                throw new Error('stylesheet token must be a string');
+            }
             // If legacy stylesheet tokens are required, then add them to the rendered string
             const stylesheetTokenToRender = stylesheetToken + (hasLegacyToken ? ` ${legacyStylesheetToken}` : '');
             const classToken = hasScopedStyles && hasStyleToken ? ' ' + stylesheetTokenToRender : '';
@@ -6017,8 +6049,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;
         };
     };
 }
@@ -7801,7 +7837,13 @@ function setHooks(hooks) {
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
 // See @lwc/engine-core/src/framework/template.ts
-const TEMPLATE_PROPS = ['slots', 'stylesheetToken', 'stylesheets', 'renderMode'];
+const TEMPLATE_PROPS = [
+    'slots',
+    'stylesheetToken',
+    'stylesheets',
+    'renderMode',
+    'legacyStylesheetToken',
+];
 // Expandos that may be placed on a stylesheet factory function, and which are meaningful to LWC at runtime
 const STYLESHEET_PROPS = [
     // SEE `KEY__SCOPED_CSS` in @lwc/style-compiler
@@ -8094,5 +8136,5 @@ exports.swapTemplate = swapTemplate;
 exports.track = track;
 exports.unwrap = unwrap;
 exports.wire = wire;
-/** version: 7.2.0 */
+/** version: 8.0.0-alpha.1 */
 //# sourceMappingURL=index.cjs.js.map