@lwc/engine-core 5.1.1-alpha.0 → 5.2.0

package/dist/framework/modules/attrs.d.ts

@@ -1,4 +1,3 @@
 import { RendererAPI } from '../renderer';
-import { VBaseElement, VStatic } from '../vnodes';
+import { VBaseElement } from '../vnodes';
 export declare function patchAttributes(oldVnode: VBaseElement | null, vnode: VBaseElement, renderer: RendererAPI): void;
-export declare function patchSlotAssignment(oldVnode: VBaseElement | VStatic | null, vnode: VBaseElement | VStatic, renderer: RendererAPI): void;

package/dist/framework/reporting.d.ts

@@ -1,10 +1,12 @@
+import { ShadowMode } from './vm';
 export declare const enum ReportingEventId {
     CrossRootAriaInSyntheticShadow = "CrossRootAriaInSyntheticShadow",
     CompilerRuntimeVersionMismatch = "CompilerRuntimeVersionMismatch",
     NonStandardAriaReflection = "NonStandardAriaReflection",
     TemplateMutation = "TemplateMutation",
     StylesheetMutation = "StylesheetMutation",
-    ConnectedCallbackWhileDisconnected = "ConnectedCallbackWhileDisconnected"
+    ConnectedCallbackWhileDisconnected = "ConnectedCallbackWhileDisconnected",
+    ShadowModeUsage = "ShadowModeUsage"
 }
 export interface BasePayload {
     tagName?: string;
@@ -29,6 +31,9 @@ export interface StylesheetMutationPayload extends BasePayload {
 }
 export interface ConnectedCallbackWhileDisconnectedPayload extends BasePayload {
 }
+export interface ShadowModeUsagePayload extends BasePayload {
+    mode: ShadowMode;
+}
 export type ReportingPayloadMapping = {
     [ReportingEventId.CrossRootAriaInSyntheticShadow]: CrossRootAriaInSyntheticShadowPayload;
     [ReportingEventId.CompilerRuntimeVersionMismatch]: CompilerRuntimeVersionMismatchPayload;
@@ -36,6 +41,7 @@ export type ReportingPayloadMapping = {
     [ReportingEventId.TemplateMutation]: TemplateMutationPayload;
     [ReportingEventId.StylesheetMutation]: StylesheetMutationPayload;
     [ReportingEventId.ConnectedCallbackWhileDisconnected]: ConnectedCallbackWhileDisconnectedPayload;
+    [ReportingEventId.ShadowModeUsage]: ShadowModeUsagePayload;
 };
 export type ReportingDispatcher<T extends ReportingEventId = ReportingEventId> = (reportingEventId: T, payload: ReportingPayloadMapping[T]) => void;
 /** Callbacks to invoke when reporting is enabled **/

package/dist/framework/shadow-migration-mode.d.ts

@@ -0,0 +1 @@
+export declare function applyShadowMigrateMode(shadowRoot: ShadowRoot): void;

package/dist/framework/vm.d.ts

@@ -83,6 +83,8 @@ export interface VM<N = HostNode, E = HostElement> {
     /** Rendering operations associated with the VM */
     renderMode: RenderMode;
     shadowMode: ShadowMode;
+    /** True if shadow migrate mode is in effect, i.e. this is native with synthetic-like modifications */
+    shadowMigrateMode: boolean;
     /** The component creation index. */
     idx: number;
     /** Component state, analogous to Element.isConnected */

package/dist/framework/vnodes.d.ts

@@ -40,7 +40,6 @@ export interface VStatic extends BaseVNode {
     readonly fragment: Element;
     readonly parts: VStaticPart[] | undefined;
     elm: Element | undefined;
-    slotAssignment: string | undefined;
 }
 export interface VFragment extends BaseVNode, BaseVParent {
     sel: undefined;
@@ -66,7 +65,6 @@ export interface VBaseElement extends BaseVNode, BaseVParent {
     data: VElementData;
     elm: Element | undefined;
     key: Key;
-    slotAssignment: string | undefined;
 }
 export interface VElement extends VBaseElement {
     type: VNodeType.Element;
@@ -95,11 +93,9 @@ export interface VElementData extends VNodeData {
     readonly external?: boolean;
     readonly ref?: string;
     readonly slotData?: any;
-    readonly slotAssignment?: string;
 }
 export declare function isVBaseElement(vnode: VNode): vnode is VElement | VCustomElement;
 export declare function isSameVnode(vnode1: VNode, vnode2: VNode): boolean;
 export declare function isVCustomElement(vnode: VNode | VBaseElement): vnode is VCustomElement;
 export declare function isVFragment(vnode: VNode): vnode is VFragment;
 export declare function isVScopedSlotFragment(vnode: VNode): vnode is VScopedSlotFragment;
-export declare function isVStatic(vnode: VNode): vnode is VStatic;

package/dist/index.cjs.js

@@ -1354,6 +1354,77 @@ function markLockerLiveObject(obj) {
     }
 }
 
+/*
+ * Copyright (c) 2023, salesforce.com, 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
+ */
+let globalStylesheet;
+function isStyleElement(elm) {
+    return elm.tagName === 'STYLE';
+}
+async function fetchStylesheet(elm) {
+    if (isStyleElement(elm)) {
+        return elm.textContent;
+    }
+    else {
+        // <link>
+        const { href } = elm;
+        try {
+            return await (await fetch(href)).text();
+        }
+        catch (err) {
+            logWarnOnce(`Ignoring cross-origin stylesheet in migrate mode: ${href}`);
+            // ignore errors with cross-origin stylesheets - nothing we can do for those
+            return '';
+        }
+    }
+}
+function initGlobalStylesheet() {
+    const stylesheet = new CSSStyleSheet();
+    const elmsToPromises = new Map();
+    let lastSeenLength = 0;
+    const copyToGlobalStylesheet = () => {
+        const elms = document.head.querySelectorAll('style:not([data-rendered-by-lwc]),link[rel="stylesheet"]');
+        if (elms.length === lastSeenLength) {
+            return; // nothing to update
+        }
+        lastSeenLength = elms.length;
+        const promises = [...elms].map((elm) => {
+            let promise = elmsToPromises.get(elm);
+            if (!promise) {
+                // Cache the promise
+                promise = fetchStylesheet(elm);
+                elmsToPromises.set(elm, promise);
+            }
+            return promise;
+        });
+        Promise.all(promises).then((stylesheetTexts) => {
+            // When replaceSync() is called, the entire contents of the constructable stylesheet are replaced
+            // with the copied+concatenated styles. This means that any shadow root's adoptedStyleSheets that
+            // contains this constructable stylesheet will immediately get the new styles.
+            stylesheet.replaceSync(stylesheetTexts.join('\n'));
+        });
+    };
+    const headObserver = new MutationObserver(copyToGlobalStylesheet);
+    // By observing only the childList, note that we are not covering the case where someone changes an `href`
+    // on an existing <link>`, or the textContent on an existing `<style>`. This is assumed to be an uncommon
+    // case and not worth covering.
+    headObserver.observe(document.head, {
+        childList: true,
+    });
+    copyToGlobalStylesheet();
+    return stylesheet;
+}
+function applyShadowMigrateMode(shadowRoot) {
+    if (!globalStylesheet) {
+        globalStylesheet = initGlobalStylesheet();
+    }
+    shadowRoot.synthetic = true; // pretend to be synthetic mode
+    shadowRoot.adoptedStyleSheets.push(globalStylesheet);
+}
+
 /*
  * Copyright (c) 2018, salesforce.com, inc.
  * All rights reserved.
@@ -1481,6 +1552,11 @@ function doAttachShadow(vm) {
     if (process.env.NODE_ENV !== 'production') {
         patchShadowRootWithRestrictions(shadowRoot);
     }
+    if (process.env.IS_BROWSER &&
+        lwcRuntimeFlags.ENABLE_FORCE_SHADOW_MIGRATE_MODE &&
+        vm.shadowMigrateMode) {
+        applyShadowMigrateMode(shadowRoot);
+    }
     return shadowRoot;
 }
 function warnIfInvokedDuringConstruction(vm, methodOrPropName) {
@@ -3244,8 +3320,8 @@ function getComponentDef(Ctor) {
     for (const key in props) {
         // avoid leaking the reference to the public props descriptors
         publicProps[key] = {
-            config: propsConfig[key] || 0,
-            type: "any" /* PropDefType.any */,
+            config: propsConfig[key] || 0, // a property by default
+            type: "any" /* PropDefType.any */, // no type inference for public services
             attr: shared.htmlPropertyToAttribute(key),
         };
     }
@@ -3274,7 +3350,7 @@ function makeHostToken(token) {
 }
 function createInlineStyleVNode(content) {
     return api.h('style', {
-        key: 'style',
+        key: 'style', // special key
         attrs: {
             type: 'text/css',
         },
@@ -3507,9 +3583,6 @@ function isVFragment(vnode) {
 function isVScopedSlotFragment(vnode) {
     return vnode.type === 6 /* VNodeType.ScopedSlotFragment */;
 }
-function isVStatic(vnode) {
-    return vnode.type === 4 /* VNodeType.Static */;
-}
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -3558,19 +3631,6 @@ function patchAttributes(oldVnode, vnode, renderer) {
         }
     }
 }
-function patchSlotAssignment(oldVnode, vnode, renderer) {
-    if ((oldVnode === null || oldVnode === void 0 ? void 0 : oldVnode.slotAssignment) === vnode.slotAssignment) {
-        return;
-    }
-    const { elm } = vnode;
-    const { setAttribute, removeAttribute } = renderer;
-    if (shared.isUndefined(vnode.slotAssignment) || shared.isNull(vnode.slotAssignment)) {
-        removeAttribute(elm, 'slot');
-    }
-    else {
-        setAttribute(elm, 'slot', vnode.slotAssignment);
-    }
-}
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -4020,8 +4080,6 @@ function mountElement(vnode, parent, anchor, renderer) {
 }
 function patchStatic(n1, n2, renderer) {
     const elm = (n2.elm = n1.elm);
-    // slotAssignments can only apply to the top level element, never to a static part.
-    patchSlotAssignment(n1, n2, renderer);
     // The `refs` object is blown away in every re-render, so we always need to re-apply them
     applyStaticParts(elm, n2, renderer, false);
 }
@@ -4043,8 +4101,6 @@ function mountStatic(vnode, parent, anchor, renderer) {
             elm[shared.KEY__SHADOW_STATIC] = true;
         }
     }
-    // slotAssignments can only apply to the top level element, never to a static part.
-    patchSlotAssignment(null, vnode, renderer);
     insertNode(elm, parent, anchor, renderer);
     applyStaticParts(elm, vnode, renderer, true);
 }
@@ -4270,7 +4326,6 @@ function patchElementPropsAndAttrsAndRefs$1(oldVnode, vnode, renderer) {
     patchStyleAttribute(oldVnode, vnode, renderer);
     patchAttributes(oldVnode, vnode, renderer);
     patchProps(oldVnode, vnode, renderer);
-    patchSlotAssignment(oldVnode, vnode, renderer);
     // The `refs` object is blown away in every re-render, so we always need to re-apply them
     applyRefs(vnode, vnode.owner);
 }
@@ -4424,7 +4479,7 @@ function createViewModelHook(elm, vnode, renderer) {
     return vm;
 }
 function allocateInSlot(vm, children, owner) {
-    var _a;
+    var _a, _b;
     const { cmpSlots: { slotAssignments: oldSlotsMapping }, } = vm;
     const cmpSlotsMapping = shared.create(null);
     // Collect all slots into cmpSlotsMapping
@@ -4434,8 +4489,8 @@ function allocateInSlot(vm, children, owner) {
             continue;
         }
         let slotName = '';
-        if (isVBaseElement(vnode) || isVStatic(vnode)) {
-            slotName = (_a = vnode.slotAssignment) !== null && _a !== void 0 ? _a : '';
+        if (isVBaseElement(vnode)) {
+            slotName = (_b = (_a = vnode.data.attrs) === null || _a === void 0 ? void 0 : _a.slot) !== null && _b !== void 0 ? _b : '';
         }
         else if (isVScopedSlotFragment(vnode)) {
             slotName = vnode.slotName;
@@ -4705,7 +4760,6 @@ function st(fragment, key, parts) {
         fragment,
         owner,
         parts,
-        slotAssignment: undefined,
     };
     return vnode;
 }
@@ -4750,7 +4804,7 @@ function h(sel, data, children = EmptyArray) {
             }
         });
     }
-    const { key, slotAssignment } = data;
+    const { key } = data;
     const vnode = {
         type: 2 /* VNodeType.Element */,
         sel,
@@ -4759,7 +4813,6 @@ function h(sel, data, children = EmptyArray) {
         elm: undefined,
         key,
         owner: vmBeingRendered,
-        slotAssignment,
     };
     return vnode;
 }
@@ -4784,8 +4837,6 @@ function s(slotName, data, children, slotset) {
         shared.assert.isTrue(shared.isObject(data), `s() 2nd argument data must be an object.`);
         shared.assert.isTrue(shared.isArray(children), `h() 3rd argument children must be an array.`);
     }
-    const vmBeingRendered = getVMBeingRendered();
-    const { renderMode } = vmBeingRendered;
     if (!shared.isUndefined(slotset) &&
         !shared.isUndefined(slotset.slotAssignments) &&
         !shared.isUndefined(slotset.slotAssignments[slotName]) &&
@@ -4808,6 +4859,7 @@ function s(slotName, data, children, slotset) {
                 }
                 // If the passed slot content is factory, evaluate it and add the produced vnodes
                 if (assignedNodeIsScopedSlot) {
+                    const vmBeingRenderedInception = getVMBeingRendered();
                     // Evaluate in the scope of the slot content's owner
                     // if a slotset is provided, there will always be an owner. The only case where owner is
                     // undefined is for root components, but root components cannot accept slotted content
@@ -4821,32 +4873,20 @@ function s(slotName, data, children, slotset) {
                         });
                     }
                     finally {
-                        setVMBeingRendered(vmBeingRendered);
+                        setVMBeingRendered(vmBeingRenderedInception);
                     }
                 }
                 else {
-                    // This block is for standard slots (non-scoped slots)
-                    let clonedVNode;
-                    if (renderMode === 0 /* RenderMode.Light */ &&
-                        (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.
-                        clonedVNode = Object.assign(Object.assign({}, vnode), { slotAssignment: data.slotAssignment });
-                    }
                     // If the slot content is standard type, the content is static, no additional
                     // processing needed on the vnode
-                    shared.ArrayPush.call(newChildren, clonedVNode !== null && clonedVNode !== void 0 ? clonedVNode : vnode);
+                    shared.ArrayPush.call(newChildren, vnode);
                 }
             }
         }
         children = newChildren;
     }
-    const { shadowMode, apiVersion } = vmBeingRendered;
+    const vmBeingRendered = getVMBeingRendered();
+    const { renderMode, shadowMode, apiVersion } = vmBeingRendered;
     if (renderMode === 0 /* RenderMode.Light */) {
         // light DOM slots - backwards-compatible behavior uses flattening, new behavior uses fragments
         if (shared.isAPIFeatureEnabled(2 /* APIFeature.USE_FRAGMENTS_FOR_LIGHT_DOM_SLOTS */, apiVersion)) {
@@ -4888,7 +4928,7 @@ function c(sel, Ctor, data, children = EmptyArray) {
             });
         }
     }
-    const { key, slotAssignment } = data;
+    const { key } = data;
     let elm, aChildren, vm;
     const vnode = {
         type: 3 /* VNodeType.CustomElement */,
@@ -4897,10 +4937,9 @@ function c(sel, Ctor, data, children = EmptyArray) {
         children,
         elm,
         key,
-        slotAssignment,
         ctor: Ctor,
         owner: vmBeingRendered,
-        mode: 'open',
+        mode: 'open', // TODO [#1294]: this should be defined in Ctor
         aChildren,
         vm,
     };
@@ -5804,6 +5843,7 @@ function createVM(elm, ctor, renderer, options) {
         // Properties set right after VM creation.
         tro: null,
         shadowMode: null,
+        shadowMigrateMode: false,
         stylesheets: null,
         // Properties set by the LightningElement constructor.
         component: null,
@@ -5819,8 +5859,22 @@ function createVM(elm, ctor, renderer, options) {
         vm.debugInfo = shared.create(null);
     }
     vm.stylesheets = computeStylesheets(vm, def.ctor);
-    vm.shadowMode = computeShadowMode(def, vm.owner, renderer);
+    const computedShadowMode = computeShadowMode(def, vm.owner, renderer);
+    if (lwcRuntimeFlags.ENABLE_FORCE_SHADOW_MIGRATE_MODE) {
+        vm.shadowMode = 0 /* ShadowMode.Native */;
+        vm.shadowMigrateMode = computedShadowMode === 1 /* ShadowMode.Synthetic */;
+    }
+    else {
+        vm.shadowMode = computedShadowMode;
+    }
     vm.tro = getTemplateReactiveObserver(vm);
+    // We don't need to report the shadow mode if we're rendering in light DOM
+    if (isReportingEnabled() && vm.renderMode === 1 /* RenderMode.Shadow */) {
+        report("ShadowModeUsage" /* ReportingEventId.ShadowModeUsage */, {
+            tagName: vm.tagName,
+            mode: vm.shadowMode,
+        });
+    }
     if (process.env.NODE_ENV !== 'production') {
         vm.toString = () => {
             return `[object:vm ${def.name} (${vm.idx})]`;
@@ -5904,7 +5958,8 @@ function computeShadowMode(def, owner, renderer) {
     }
     const { isSyntheticShadowDefined } = renderer;
     let shadowMode;
-    if (isSyntheticShadowDefined) {
+    // If ENABLE_FORCE_SHADOW_MIGRATE_MODE is true, then ShadowMode.Synthetic here will mean "force-migrate" mode.
+    if (isSyntheticShadowDefined || lwcRuntimeFlags.ENABLE_FORCE_SHADOW_MIGRATE_MODE) {
         if (def.renderMode === 0 /* RenderMode.Light */) {
             // ShadowMode.Native implies "not synthetic shadow" which is consistent with how
             // everything defaults to native when the synthetic shadow polyfill is unavailable.
@@ -7363,5 +7418,5 @@ exports.swapTemplate = swapTemplate;
 exports.track = track;
 exports.unwrap = unwrap;
 exports.wire = wire;
-/** version: 5.1.0 */
+/** version: 5.2.0 */
 //# sourceMappingURL=index.cjs.js.map