@lwc/engine-core 3.0.1 → 3.0.3

package/dist/framework/runtime-instrumentation.d.ts

@@ -0,0 +1,2 @@
+export declare const instrumentDef: any;
+export declare const instrumentInstance: any;

package/dist/framework/stylesheet.d.ts

@@ -12,14 +12,14 @@ export type StylesheetFactory = (stylesheetToken: string | undefined, useActualH
  * @import CSS declaration).
  */
 export type TemplateStylesheetFactories = Array<StylesheetFactory | TemplateStylesheetFactories>;
-export declare function updateStylesheetToken(vm: VM, template: Template): void;
+export declare function updateStylesheetToken(vm: VM, template: Template, legacy: boolean): void;
 export declare function getStylesheetsContent(vm: VM, template: Template): string[];
 /**
  * If the component that is currently being rendered uses scoped styles,
  * this returns the unique token for that scoped stylesheet. Otherwise
  * it returns null.
  */
-export declare function getScopeTokenClass(owner: VM): string | null;
+export declare function getScopeTokenClass(owner: VM, legacy: boolean): string | null;
 /**
  * This function returns the host style token for a custom element if it
  * exists. Otherwise it returns null.

package/dist/framework/template.d.ts

@@ -10,6 +10,8 @@ export interface Template {
     stylesheets?: TemplateStylesheetFactories;
     /** The string used for synthetic shadow style scoping and light DOM style scoping. */
     stylesheetToken?: string;
+    /** Same as the above, but for legacy use cases (pre-LWC v3.0.0) */
+    legacyStylesheetToken?: string;
     /** Render mode for the template. Could be light or undefined (which means it's shadow) */
     renderMode?: 'light';
     /** True if this template contains template refs, undefined or false otherwise */

package/dist/framework/vm.d.ts

@@ -42,6 +42,12 @@ export interface Context {
     hasTokenInClass: boolean | undefined;
     /** True if a stylesheetToken was added to the host attributes */
     hasTokenInAttribute: boolean | undefined;
+    /** The legacy string used for synthetic shadow DOM and light DOM style scoping. */
+    legacyStylesheetToken: string | undefined;
+    /** True if a legacyStylesheetToken was added to the host class */
+    hasLegacyTokenInClass: boolean | undefined;
+    /** True if a legacyStylesheetToken was added to the host attributes */
+    hasLegacyTokenInAttribute: boolean | undefined;
     /** Whether or not light DOM scoped styles are present in the stylesheets. */
     hasScopedStyles: boolean | undefined;
     /** The VNodes injected in all the shadow trees to apply the associated component stylesheets. */

package/dist/index.cjs.js

@@ -429,6 +429,10 @@ function isCircularModuleDependency(obj) {
     return shared.isFunction(obj) && shared.hasOwnProperty.call(obj, '__circular__');
 }
 
+var _a, _b;
+const instrumentDef = (_a = shared.globalThis.__lwc_instrument_cmp_def) !== null && _a !== void 0 ? _a : shared.noop;
+const instrumentInstance = (_b = shared.globalThis.__lwc_instrument_cmp_instance) !== null && _b !== void 0 ? _b : shared.noop;
+
 /*
  * Copyright (c) 2018, salesforce.com, inc.
  * All rights reserved.
@@ -1397,6 +1401,8 @@ const LightningElement = function () {
         // `class Foo extends LightningElement {}; new Foo()`
         throw new TypeError('Illegal constructor');
     }
+    // This is a no-op unless Lightning DevTools are enabled.
+    instrumentInstance(this, vmBeingConstructed);
     const vm = vmBeingConstructed;
     const { def, elm } = vm;
     const { bridge } = def;
@@ -2545,35 +2551,8 @@ function createAttributeChangedCallback(attributeToPropMap, superAttributeChange
     };
 }
 function HTMLBridgeElementFactory(SuperClass, props, methods) {
-    let HTMLBridgeElement;
-    /**
-     * Modern browsers will have all Native Constructors as regular Classes
-     * and must be instantiated with the new keyword. In older browsers,
-     * specifically IE11, those are objects with a prototype property defined,
-     * since they are not supposed to be extended or instantiated with the
-     * new keyword. This forking logic supports both cases, specifically because
-     * wc.ts relies on the construction path of the bridges to create new
-     * fully qualifying web components.
-     */
-    if (shared.isFunction(SuperClass)) {
-        HTMLBridgeElement = class extends SuperClass {
-        };
-    }
-    else {
-        HTMLBridgeElement = function () {
-            // Bridge classes are not supposed to be instantiated directly in
-            // browsers that do not support web components.
-            throw new TypeError('Illegal constructor');
-        };
-        // prototype inheritance dance
-        shared.setPrototypeOf(HTMLBridgeElement, SuperClass);
-        shared.setPrototypeOf(HTMLBridgeElement.prototype, SuperClass.prototype);
-        shared.defineProperty(HTMLBridgeElement.prototype, 'constructor', {
-            writable: true,
-            configurable: true,
-            value: HTMLBridgeElement,
-        });
-    }
+    const HTMLBridgeElement = class extends SuperClass {
+    };
     // generating the hash table for attributes to avoid duplicate fields and facilitate validation
     // and false positives in case of inheritance.
     const attributeToPropMap = shared.create(null);
@@ -2981,6 +2960,8 @@ function createComponentDef(Ctor) {
         errorCallback,
         render,
     };
+    // This is a no-op unless Lightning DevTools are enabled.
+    instrumentDef(def);
     if (process.env.NODE_ENV !== 'production') {
         shared.freeze(Ctor.prototype);
     }
@@ -3109,9 +3090,11 @@ function createInlineStyleVNode(content) {
         },
     }, [api.t(content)]);
 }
-function updateStylesheetToken(vm, template) {
+// TODO [#3733]: remove support for legacy scope tokens
+function updateStylesheetToken(vm, template, legacy) {
     const { elm, context, renderMode, shadowMode, renderer: { getClassList, removeAttribute, setAttribute }, } = vm;
-    const { stylesheets: newStylesheets, stylesheetToken: newStylesheetToken } = template;
+    const { stylesheets: newStylesheets } = template;
+    const newStylesheetToken = legacy ? template.legacyStylesheetToken : template.stylesheetToken;
     const { stylesheets: newVmStylesheets } = vm;
     const isSyntheticShadow = renderMode === 1 /* RenderMode.Shadow */ && shadowMode === 1 /* ShadowMode.Synthetic */;
     const { hasScopedStyles } = context;
@@ -3119,7 +3102,19 @@ function updateStylesheetToken(vm, template) {
     let newHasTokenInClass;
     let newHasTokenInAttribute;
     // Reset the styling token applied to the host element.
-    const { stylesheetToken: oldToken, hasTokenInClass: oldHasTokenInClass, hasTokenInAttribute: oldHasTokenInAttribute, } = context;
+    let oldToken;
+    let oldHasTokenInClass;
+    let oldHasTokenInAttribute;
+    if (legacy) {
+        oldToken = context.legacyStylesheetToken;
+        oldHasTokenInClass = context.hasLegacyTokenInClass;
+        oldHasTokenInAttribute = context.hasLegacyTokenInAttribute;
+    }
+    else {
+        oldToken = context.stylesheetToken;
+        oldHasTokenInClass = context.hasTokenInClass;
+        oldHasTokenInAttribute = context.hasTokenInAttribute;
+    }
     if (!shared.isUndefined(oldToken)) {
         if (oldHasTokenInClass) {
             getClassList(elm).remove(makeHostToken(oldToken));
@@ -3147,9 +3142,16 @@ function updateStylesheetToken(vm, template) {
         }
     }
     // Update the styling tokens present on the context object.
-    context.stylesheetToken = newToken;
-    context.hasTokenInClass = newHasTokenInClass;
-    context.hasTokenInAttribute = newHasTokenInAttribute;
+    if (legacy) {
+        context.legacyStylesheetToken = newToken;
+        context.hasLegacyTokenInClass = newHasTokenInClass;
+        context.hasLegacyTokenInAttribute = newHasTokenInAttribute;
+    }
+    else {
+        context.stylesheetToken = newToken;
+        context.hasTokenInClass = newHasTokenInClass;
+        context.hasTokenInAttribute = newHasTokenInAttribute;
+    }
 }
 function evaluateStylesheetsContent(stylesheets, stylesheetToken, vm) {
     const content = [];
@@ -3236,9 +3238,12 @@ function getNearestShadowComponent(vm) {
  * this returns the unique token for that scoped stylesheet. Otherwise
  * it returns null.
  */
-function getScopeTokenClass(owner) {
+// TODO [#3733]: remove support for legacy scope tokens
+function getScopeTokenClass(owner, legacy) {
     const { cmpTemplate, context } = owner;
-    return (context.hasScopedStyles && (cmpTemplate === null || cmpTemplate === void 0 ? void 0 : cmpTemplate.stylesheetToken)) || null;
+    return ((context.hasScopedStyles &&
+        (legacy ? cmpTemplate === null || cmpTemplate === void 0 ? void 0 : cmpTemplate.legacyStylesheetToken : cmpTemplate === null || cmpTemplate === void 0 ? void 0 : cmpTemplate.stylesheetToken)) ||
+        null);
 }
 /**
  * This function returns the host style token for a custom element if it
@@ -3964,18 +3969,35 @@ function patchElementPropsAndAttrs$1(oldVnode, vnode, renderer) {
     patchProps(oldVnode, vnode, renderer);
 }
 function applyStyleScoping(elm, owner, renderer) {
+    const { getClassList } = renderer;
     // Set the class name for `*.scoped.css` style scoping.
-    const scopeToken = getScopeTokenClass(owner);
+    const scopeToken = getScopeTokenClass(owner, /* legacy */ false);
     if (!shared.isNull(scopeToken)) {
-        const { getClassList } = renderer;
         // TODO [#2762]: this dot notation with add is probably problematic
         // probably we should have a renderer api for just the add operation
         getClassList(elm).add(scopeToken);
     }
+    // TODO [#3733]: remove support for legacy scope tokens
+    if (lwcRuntimeFlags.ENABLE_LEGACY_SCOPE_TOKENS) {
+        const legacyScopeToken = getScopeTokenClass(owner, /* legacy */ true);
+        if (!shared.isNull(legacyScopeToken)) {
+            // TODO [#2762]: this dot notation with add is probably problematic
+            // probably we should have a renderer api for just the add operation
+            getClassList(elm).add(legacyScopeToken);
+        }
+    }
     // Set property element for synthetic shadow DOM style scoping.
     const { stylesheetToken: syntheticToken } = owner.context;
-    if (owner.shadowMode === 1 /* ShadowMode.Synthetic */ && !shared.isUndefined(syntheticToken)) {
-        elm.$shadowToken$ = syntheticToken;
+    if (owner.shadowMode === 1 /* ShadowMode.Synthetic */) {
+        if (!shared.isUndefined(syntheticToken)) {
+            elm.$shadowToken$ = syntheticToken;
+        }
+        if (lwcRuntimeFlags.ENABLE_LEGACY_SCOPE_TOKENS) {
+            const legacyToken = owner.context.legacyStylesheetToken;
+            if (!shared.isUndefined(legacyToken)) {
+                elm.$legacyShadowToken$ = legacyToken;
+            }
+        }
     }
 }
 function applyDomManual(elm, vnode) {
@@ -4148,12 +4170,11 @@ function allocateInSlot(vm, children, owner) {
         }
     }
 }
-// Using a WeakMap instead of a WeakSet because this one works in IE11 :(
-const DynamicChildren = new WeakMap();
+const DynamicChildren = new WeakSet();
 // dynamic children means it was either generated by an iteration in a template
 // or part of an unstable fragment, and will require a more complex diffing algo.
 function markAsDynamicChildren(children) {
-    DynamicChildren.set(children, 1);
+    DynamicChildren.add(children);
 }
 function hasDynamicChildren(children) {
     return DynamicChildren.has(children);
@@ -5003,9 +5024,10 @@ function buildParseFragmentFn(createFragmentFn) {
     return (strings, ...keys) => {
         const cache = shared.create(null);
         return function () {
-            const { context: { hasScopedStyles, stylesheetToken }, shadowMode, renderer, } = getVMBeingRendered();
+            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 */;
@@ -5013,12 +5035,19 @@ function buildParseFragmentFn(createFragmentFn) {
             if (hasStyleToken && isSyntheticShadow) {
                 cacheKey |= 2 /* FragmentCache.SHADOW_MODE_SYNTHETIC */;
             }
+            if (hasLegacyToken) {
+                // This isn't strictly required for prod, but it's required for our karma tests
+                // since the lwcRuntimeFlag may change over time
+                cacheKey |= 4 /* FragmentCache.HAS_LEGACY_SCOPE_TOKEN */;
+            }
             if (!shared.isUndefined(cache[cacheKey])) {
                 return cache[cacheKey];
             }
-            const classToken = hasScopedStyles && hasStyleToken ? ' ' + stylesheetToken : '';
-            const classAttrToken = hasScopedStyles && hasStyleToken ? ` class="${stylesheetToken}"` : '';
-            const attrToken = hasStyleToken && isSyntheticShadow ? ' ' + stylesheetToken : '';
+            // If legacy stylesheet tokens are required, then add them to the rendered string
+            const stylesheetTokenToRender = stylesheetToken + (hasLegacyToken ? ` ${legacyStylesheetToken}` : '');
+            const classToken = hasScopedStyles && hasStyleToken ? ' ' + stylesheetTokenToRender : '';
+            const classAttrToken = hasScopedStyles && hasStyleToken ? ` class="${stylesheetTokenToRender}"` : '';
+            const attrToken = hasStyleToken && isSyntheticShadow ? ' ' + stylesheetTokenToRender : '';
             let htmlFragment = '';
             for (let i = 0, n = keys.length; i < n; i++) {
                 switch (keys[i]) {
@@ -5094,7 +5123,10 @@ function evaluateTemplate(vm, html) {
                 // Set the computeHasScopedStyles property in the context, to avoid recomputing it repeatedly.
                 context.hasScopedStyles = computeHasScopedStyles(html, vm);
                 // Update the scoping token on the host element.
-                updateStylesheetToken(vm, html);
+                updateStylesheetToken(vm, html, /* legacy */ false);
+                if (lwcRuntimeFlags.ENABLE_LEGACY_SCOPE_TOKENS) {
+                    updateStylesheetToken(vm, html, /* legacy */ true);
+                }
                 // Evaluate, create stylesheet and cache the produced VNode for future
                 // re-rendering.
                 const stylesheetsContent = getStylesheetsContent(vm, html);
@@ -5464,6 +5496,9 @@ function createVM(elm, ctor, renderer, options) {
             stylesheetToken: undefined,
             hasTokenInClass: undefined,
             hasTokenInAttribute: undefined,
+            legacyStylesheetToken: undefined,
+            hasLegacyTokenInClass: undefined,
+            hasLegacyTokenInAttribute: undefined,
             hasScopedStyles: undefined,
             styleVNodes: null,
             tplCache: EmptyObject,
@@ -6497,7 +6532,8 @@ function validateClassAttr(vnode, elm, renderer) {
     const { data, owner } = vnode;
     let { className, classMap } = data;
     const { getProperty, getClassList, getAttribute } = renderer;
-    const scopedToken = getScopeTokenClass(owner);
+    // we don't care about legacy for hydration. it's a new use case
+    const scopedToken = getScopeTokenClass(owner, /* legacy */ false);
     const stylesheetTokenHost = isVCustomElement(vnode) ? getStylesheetTokenHost(vnode) : null;
     // Classnames for scoped CSS are added directly to the DOM during rendering,
     // or to the VDOM on the server in the case of SSR. As such, these classnames
@@ -6945,5 +6981,5 @@ exports.swapTemplate = swapTemplate;
 exports.track = track;
 exports.unwrap = unwrap;
 exports.wire = wire;
-/** version: 3.0.1 */
+/** version: 3.0.3 */
 //# sourceMappingURL=index.cjs.js.map