lwc 2.38.1 → 2.39.0

package/dist/engine-dom/umd/es2017/engine-dom.js

@@ -353,9 +353,9 @@
      * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
      */
     // Increment whenever the LWC template compiler changes
-    const LWC_VERSION = "2.38.1";
+    const LWC_VERSION = "2.39.0";
     const LWC_VERSION_COMMENT_REGEX = /\/\*LWC compiler v([\d.]+)\*\/\s*}/;
-    /** version: 2.38.1 */
+    /** version: 2.39.0 */
 
     /**
      * Copyright (C) 2018 salesforce.com, inc.
@@ -434,7 +434,7 @@
             setFeatureFlag(name, value);
         }
     }
-    /** version: 2.38.1 */
+    /** version: 2.39.0 */
 
     /**
      * Copyright (C) 2018 salesforce.com, inc.
@@ -498,7 +498,7 @@
             }
         }
     }
-    /** version: 2.38.1 */
+    /** version: 2.39.0 */
 
     /*
      * Copyright (c) 2018, salesforce.com, inc.
@@ -3243,6 +3243,93 @@
     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.
@@ -3252,67 +3339,62 @@
     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) {
@@ -3346,72 +3428,27 @@
         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);
+                }
             }
         }
     }
@@ -4173,7 +4210,12 @@
             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 }) +
                     ', ' +
@@ -4366,8 +4408,9 @@
         }
     }
     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);
@@ -4860,9 +4903,17 @@
             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
@@ -5264,16 +5315,18 @@
         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)) {
@@ -5281,6 +5334,30 @@
         }
         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
@@ -5343,6 +5420,7 @@
         fid,
         shc,
         ssf,
+        ddc,
     });
 
     /*
@@ -5742,28 +5820,34 @@
      * 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(() => {
@@ -5899,9 +5983,6 @@
             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.
@@ -7356,7 +7437,7 @@
         }
         return getReadOnlyProxy(obj);
     }
-    /* version: 2.38.1 */
+    /* version: 2.39.0 */
 
     /*
      * Copyright (c) 2018, salesforce.com, inc.
@@ -7784,7 +7865,7 @@
         function isNull(obj) {
             return obj === null;
         }
-        /** version: 2.38.1 */
+        /** version: 2.39.0 */
 
         /*
          * Copyright (c) 2023, salesforce.com, inc.
@@ -8403,7 +8484,7 @@
             });
         }));
     }
-    /* version: 2.38.1 */
+    /* version: 2.39.0 */
 
     exports.LightningElement = LightningElement;
     exports.__unstable__ProfilerControl = profilerControl;