@lwc/engine-core 2.38.1 → 2.39.0

package/dist/engine-core.js

@@ -2746,6 +2746,93 @@ if (process.env.IS_BROWSER) {
 freeze(BaseBridgeElement);
 seal(BaseBridgeElement.prototype);
 
+/*
+ * 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
+ */
+const supportsWeakRefs = typeof WeakRef === 'function' && typeof FinalizationRegistry === 'function';
+// In browsers that doesn't support WeakRefs, the values will still leak, but at least the keys won't
+class LegacyWeakMultiMap {
+    constructor() {
+        this._map = new WeakMap();
+    }
+    _getValues(key) {
+        let values = this._map.get(key);
+        if (isUndefined$1(values)) {
+            values = new Set();
+            this._map.set(key, values);
+        }
+        return values;
+    }
+    get(key) {
+        return this._getValues(key);
+    }
+    add(key, vm) {
+        const set = this._getValues(key);
+        set.add(vm);
+    }
+    delete(key) {
+        this._map.delete(key);
+    }
+}
+// This implementation relies on the WeakRef/FinalizationRegistry proposal.
+// For some background, see: https://github.com/tc39/proposal-weakrefs
+class ModernWeakMultiMap {
+    constructor() {
+        this._map = new WeakMap();
+        this._registry = new FinalizationRegistry((weakRefs) => {
+            // This should be considered an optional cleanup method to remove GC'ed values from their respective arrays.
+            // JS VMs are not obligated to call FinalizationRegistry callbacks.
+            // Work backwards, removing stale VMs
+            for (let i = weakRefs.length - 1; i >= 0; i--) {
+                const vm = weakRefs[i].deref();
+                if (isUndefined$1(vm)) {
+                    ArraySplice.call(weakRefs, i, 1); // remove
+                }
+            }
+        });
+    }
+    _getWeakRefs(key) {
+        let weakRefs = this._map.get(key);
+        if (isUndefined$1(weakRefs)) {
+            weakRefs = [];
+            this._map.set(key, weakRefs);
+        }
+        return weakRefs;
+    }
+    get(key) {
+        const weakRefs = this._getWeakRefs(key);
+        const result = new Set();
+        for (const weakRef of weakRefs) {
+            const vm = weakRef.deref();
+            if (!isUndefined$1(vm)) {
+                result.add(vm);
+            }
+        }
+        return result;
+    }
+    add(key, value) {
+        const weakRefs = this._getWeakRefs(key);
+        // We could check for duplicate values here, but it doesn't seem worth it.
+        // We transform the output into a Set anyway
+        ArrayPush$1.call(weakRefs, new WeakRef(value));
+        // It's important here not to leak the second argument, which is the "held value." The FinalizationRegistry
+        // effectively creates a strong reference between the first argument (the "target") and the held value. When
+        // the target is GC'ed, the callback is called, and then the held value is GC'ed.
+        // Putting the key here would mean the key is not GC'ed until the value is GC'ed, which defeats the purpose
+        // of the WeakMap. Whereas putting the weakRefs array here is fine, because it doesn't have a strong reference
+        // to anything. See also this example:
+        // https://gist.github.com/nolanlawson/79a3d36e8e6cc25c5048bb17c1795aea
+        this._registry.register(value, weakRefs);
+    }
+    delete(key) {
+        this._map.delete(key);
+    }
+}
+const WeakMultiMap = supportsWeakRefs ? ModernWeakMultiMap : LegacyWeakMultiMap;
+
 /*
  * Copyright (c) 2020, salesforce.com, inc.
  * All rights reserved.
@@ -2755,67 +2842,62 @@ seal(BaseBridgeElement.prototype);
 const swappedTemplateMap = new WeakMap();
 const swappedComponentMap = new WeakMap();
 const swappedStyleMap = new WeakMap();
-const activeTemplates = new WeakMap();
-const activeComponents = new WeakMap();
-const activeStyles = new WeakMap();
+// The important thing here is the weak values – VMs are transient (one per component instance) and should be GC'ed,
+// so we don't want to create strong references to them.
+// The weak keys are kind of useless, because Templates, LightningElementConstructors, and StylesheetFactories are
+// never GC'ed. But maybe they will be someday, so we may as well use weak keys too.
+const activeTemplates = new WeakMultiMap();
+const activeComponents = new WeakMultiMap();
+const activeStyles = new WeakMultiMap();
 function rehydrateHotTemplate(tpl) {
     const list = activeTemplates.get(tpl);
-    if (!isUndefined$1(list)) {
-        list.forEach((vm) => {
-            if (isFalse(vm.isDirty)) {
-                // forcing the vm to rehydrate in the micro-task:
-                markComponentAsDirty(vm);
-                scheduleRehydration(vm);
-            }
-        });
-        // resetting the Set to release the memory of those vm references
-        // since they are not longer related to this template, instead
-        // they will get re-associated once these instances are rehydrated.
-        list.clear();
+    for (const vm of list) {
+        if (isFalse(vm.isDirty)) {
+            // forcing the vm to rehydrate in the micro-task:
+            markComponentAsDirty(vm);
+            scheduleRehydration(vm);
+        }
     }
+    // Resetting the Set since these VMs are no longer related to this template, instead
+    // they will get re-associated once these instances are rehydrated.
+    activeTemplates.delete(tpl);
     return true;
 }
 function rehydrateHotStyle(style) {
     const list = activeStyles.get(style);
-    if (!isUndefined$1(list)) {
-        list.forEach((vm) => {
-            // if a style definition is swapped, we must reset
-            // vm's template content in the next micro-task:
-            forceRehydration(vm);
-        });
-        // resetting the Set to release the memory of those vm references
-        // since they are not longer related to this style, instead
-        // they will get re-associated once these instances are rehydrated.
-        list.clear();
-    }
+    for (const vm of list) {
+        // if a style definition is swapped, we must reset
+        // vm's template content in the next micro-task:
+        forceRehydration(vm);
+    }
+    // Resetting the Set since these VMs are no longer related to this style, instead
+    // they will get re-associated once these instances are rehydrated.
+    activeStyles.delete(style);
     return true;
 }
 function rehydrateHotComponent(Ctor) {
     const list = activeComponents.get(Ctor);
     let canRefreshAllInstances = true;
-    if (!isUndefined$1(list)) {
-        list.forEach((vm) => {
-            const { owner } = vm;
-            if (!isNull(owner)) {
-                // if a component class definition is swapped, we must reset
-                // owner's template content in the next micro-task:
-                forceRehydration(owner);
-            }
-            else {
-                // the hot swapping for components only work for instances of components
-                // created from a template, root elements can't be swapped because we
-                // don't have a way to force the creation of the element with the same state
-                // of the current element.
-                // Instead, we can report the problem to the caller so it can take action,
-                // for example: reload the entire page.
-                canRefreshAllInstances = false;
-            }
-        });
-        // resetting the Set to release the memory of those vm references
-        // since they are not longer related to this constructor, instead
-        // they will get re-associated once these instances are rehydrated.
-        list.clear();
-    }
+    for (const vm of list) {
+        const { owner } = vm;
+        if (!isNull(owner)) {
+            // if a component class definition is swapped, we must reset
+            // owner's template content in the next micro-task:
+            forceRehydration(owner);
+        }
+        else {
+            // the hot swapping for components only work for instances of components
+            // created from a template, root elements can't be swapped because we
+            // don't have a way to force the creation of the element with the same state
+            // of the current element.
+            // Instead, we can report the problem to the caller so it can take action,
+            // for example: reload the entire page.
+            canRefreshAllInstances = false;
+        }
+    }
+    // resetting the Set since these VMs are no longer related to this constructor, instead
+    // they will get re-associated once these instances are rehydrated.
+    activeComponents.delete(Ctor);
     return canRefreshAllInstances;
 }
 function getTemplateOrSwappedTemplate(tpl) {
@@ -2849,72 +2931,27 @@ function setActiveVM(vm) {
     assertNotProd(); // this method should never leak to prod
     // tracking active component
     const Ctor = vm.def.ctor;
-    let componentVMs = activeComponents.get(Ctor);
-    if (isUndefined$1(componentVMs)) {
-        componentVMs = new Set();
-        activeComponents.set(Ctor, componentVMs);
-    }
     // this will allow us to keep track of the hot components
-    componentVMs.add(vm);
+    activeComponents.add(Ctor, vm);
     // tracking active template
     const tpl = vm.cmpTemplate;
     if (tpl) {
-        let templateVMs = activeTemplates.get(tpl);
-        if (isUndefined$1(templateVMs)) {
-            templateVMs = new Set();
-            activeTemplates.set(tpl, templateVMs);
-        }
         // this will allow us to keep track of the templates that are
         // being used by a hot component
-        templateVMs.add(vm);
+        activeTemplates.add(tpl, vm);
         // tracking active styles associated to template
         const stylesheets = tpl.stylesheets;
         if (!isUndefined$1(stylesheets)) {
-            flattenStylesheets(stylesheets).forEach((stylesheet) => {
+            for (const stylesheet of flattenStylesheets(stylesheets)) {
                 // this is necessary because we don't hold the list of styles
                 // in the vm, we only hold the selected (already swapped template)
                 // but the styles attached to the template might not be the actual
                 // active ones, but the swapped versions of those.
-                stylesheet = getStyleOrSwappedStyle(stylesheet);
-                let stylesheetVMs = activeStyles.get(stylesheet);
-                if (isUndefined$1(stylesheetVMs)) {
-                    stylesheetVMs = new Set();
-                    activeStyles.set(stylesheet, stylesheetVMs);
-                }
+                const swappedStylesheet = getStyleOrSwappedStyle(stylesheet);
                 // this will allow us to keep track of the stylesheet that are
                 // being used by a hot component
-                stylesheetVMs.add(vm);
-            });
-        }
-    }
-}
-function removeActiveVM(vm) {
-    assertNotProd(); // this method should never leak to prod
-    // tracking inactive component
-    const Ctor = vm.def.ctor;
-    let list = activeComponents.get(Ctor);
-    if (!isUndefined$1(list)) {
-        // deleting the vm from the set to avoid leaking memory
-        list.delete(vm);
-    }
-    // removing inactive template
-    const tpl = vm.cmpTemplate;
-    if (tpl) {
-        list = activeTemplates.get(tpl);
-        if (!isUndefined$1(list)) {
-            // deleting the vm from the set to avoid leaking memory
-            list.delete(vm);
-        }
-        // removing active styles associated to template
-        const styles = tpl.stylesheets;
-        if (!isUndefined$1(styles)) {
-            flattenStylesheets(styles).forEach((style) => {
-                list = activeStyles.get(style);
-                if (!isUndefined$1(list)) {
-                    // deleting the vm from the set to avoid leaking memory
-                    list.delete(vm);
-                }
-            });
+                activeStyles.add(swappedStylesheet, vm);
+            }
         }
     }
 }
@@ -3676,7 +3713,12 @@ function patch(n1, n2, parent, renderer) {
         return;
     }
     if (process.env.NODE_ENV !== 'production') {
-        if (!isSameVnode(n1, n2)) {
+        if (!isSameVnode(n1, n2) &&
+            // Currently the only scenario when patch does not receive the same vnodes are for
+            // dynamic components. When a dynamic component's constructor changes, the value of its
+            // tag name (sel) will be different. The engine will unmount the previous element
+            // and mount the new one using the new constructor in patchCustomElement.
+            !(isVCustomElement(n1) && isVCustomElement(n2))) {
             throw new Error('Expected these VNodes to be the same: ' +
                 JSON.stringify({ sel: n1.sel, key: n1.key }) +
                 ', ' +
@@ -3874,8 +3916,9 @@ function mountCustomElement(vnode, parent, anchor, renderer) {
     }
 }
 function patchCustomElement(n1, n2, parent, renderer) {
+    // TODO [#3331]: This if branch should be removed in 246 with lwc:dynamic
     if (n1.ctor !== n2.ctor) {
-        // If the constructor, unmount the current component and mount a new one using the new
+        // If the constructor differs, unmount the current component and mount a new one using the new
         // constructor.
         const anchor = renderer.nextSibling(n1.elm);
         unmount(n1, parent, renderer, true);
@@ -4368,9 +4411,17 @@ function updateStaticChildren(c1, c2, parent, renderer) {
         if (n2 !== n1) {
             if (isVNode(n1)) {
                 if (isVNode(n2)) {
-                    // both vnodes are equivalent, and we just need to patch them
-                    patch(n1, n2, parent, renderer);
-                    anchor = n2.elm;
+                    if (isSameVnode(n1, n2)) {
+                        // both vnodes are equivalent, and we just need to patch them
+                        patch(n1, n2, parent, renderer);
+                        anchor = n2.elm;
+                    }
+                    else {
+                        // removing the old vnode since the new one is different
+                        unmount(n1, parent, renderer, true);
+                        mount(n2, parent, renderer, anchor);
+                        anchor = n2.elm;
+                    }
                 }
                 else {
                     // removing the old vnode since the new one is null
@@ -4772,16 +4823,18 @@ function fid(url) {
     return url;
 }
 /**
- * create a dynamic component via `<x-foo lwc:dynamic={Ctor}>`
+ * [ddc] - create a (deprecated) dynamic component via `<x-foo lwc:dynamic={Ctor}>`
+ *
+ * TODO [#3331]: remove usage of lwc:dynamic in 246
  */
-function dc(sel, Ctor, data, children = EmptyArray) {
+function ddc(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.`);
         assert.isTrue(arguments.length === 3 || isArray$1(children), `dc() 4nd argument data must be an array.`);
     }
     // null or undefined values should produce a null value in the VNodes
-    if (Ctor == null) {
+    if (isNull(Ctor) || isUndefined$1(Ctor)) {
         return null;
     }
     if (!isComponentConstructor(Ctor)) {
@@ -4789,6 +4842,30 @@ function dc(sel, Ctor, data, children = EmptyArray) {
     }
     return c(sel, Ctor, data, children);
 }
+/**
+ * [dc] - create a dynamic component via `<lwc:component lwc:is={Ctor}>`
+ */
+function dc(Ctor, data, children = EmptyArray) {
+    if (process.env.NODE_ENV !== 'production') {
+        assert.isTrue(isObject(data), `dc() 2nd argument data must be an object.`);
+        assert.isTrue(arguments.length === 3 || isArray$1(children), `dc() 3rd argument data must be an array.`);
+    }
+    // Null or undefined values should produce a null value in the VNodes.
+    // This is the only value at compile time as the constructor will not be known.
+    if (isNull(Ctor) || isUndefined$1(Ctor)) {
+        return null;
+    }
+    if (!isComponentConstructor(Ctor)) {
+        throw new Error(`Invalid constructor ${toString$1(Ctor)} is not a LightningElement constructor.`);
+    }
+    // Look up the dynamic component's name at runtime once the constructor is available.
+    // This information is only known at runtime and is stored as part of registerComponent.
+    const sel = getComponentRegisteredName(Ctor);
+    if (isUndefined$1(sel) || sel === '') {
+        throw new Error(`Invalid LWC constructor ${toString$1(Ctor)} does not have a registered name`);
+    }
+    return c(sel, Ctor, data, children);
+}
 /**
  * slow children collection marking mechanism. this API allows the compiler to signal
  * to the engine that a particular collection of children must be diffed using the slow
@@ -4851,6 +4928,7 @@ const api = freeze({
     fid,
     shc,
     ssf,
+    ddc,
 });
 
 /*
@@ -5250,28 +5328,34 @@ function invokeEventListener(vm, fn, thisValue, event) {
  * SPDX-License-Identifier: MIT
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
-const signedTemplateMap = new Map();
+const registeredComponentMap = new Map();
 /**
  * INTERNAL: This function can only be invoked by compiled code. The compiler
  * will prevent this function from being imported by userland code.
  */
 function registerComponent(
 // We typically expect a LightningElementConstructor, but technically you can call this with anything
-Ctor, { tmpl }) {
+Ctor, metadata) {
     if (isFunction$1(Ctor)) {
         if (process.env.NODE_ENV !== 'production') {
             // There is no point in running this in production, because the version mismatch check relies
             // on code comments which are stripped out in production by minifiers
             checkVersionMismatch(Ctor, 'component');
         }
-        signedTemplateMap.set(Ctor, tmpl);
+        // TODO [#3331]: add validation to check the value of metadata.sel is not an empty string.
+        registeredComponentMap.set(Ctor, metadata);
     }
     // chaining this method as a way to wrap existing assignment of component constructor easily,
     // without too much transformation
     return Ctor;
 }
 function getComponentRegisteredTemplate(Ctor) {
-    return signedTemplateMap.get(Ctor);
+    var _a;
+    return (_a = registeredComponentMap.get(Ctor)) === null || _a === void 0 ? void 0 : _a.tmpl;
+}
+function getComponentRegisteredName(Ctor) {
+    var _a;
+    return (_a = registeredComponentMap.get(Ctor)) === null || _a === void 0 ? void 0 : _a.sel;
 }
 function getTemplateReactiveObserver(vm) {
     return createReactiveObserver(() => {
@@ -5407,9 +5491,6 @@ function resetComponentStateWhenRemoved(vm) {
         runChildNodesDisconnectedCallback(vm);
         runLightChildNodesDisconnectedCallback(vm);
     }
-    if (process.env.NODE_ENV !== 'production') {
-        removeActiveVM(vm);
-    }
 }
 // this method is triggered by the diffing algo only when a vnode from the
 // old vnode.children is removed from the DOM.
@@ -6869,5 +6950,5 @@ function readonly(obj) {
 }
 
 export { LightningElement, profilerControl as __unstable__ProfilerControl, reportingControl as __unstable__ReportingControl, api$1 as api, connectRootElement, createContextProviderWithRegister, createVM, disconnectRootElement, freezeTemplate, getAssociatedVMIfPresent, getComponentConstructor, getComponentDef, getComponentHtmlPrototype, hydrateRoot, isComponentConstructor, parseFragment, parseSVGFragment, readonly, register, registerComponent, registerDecorators, registerTemplate, sanitizeAttribute, setHooks, swapComponent, swapStyle, swapTemplate, track, unwrap, wire };
-/* version: 2.38.1 */
+/* version: 2.39.0 */
 //# sourceMappingURL=engine-core.js.map