@lwc/engine-core 2.31.6 → 2.31.8

package/dist/engine-core.cjs.js

@@ -2497,6 +2497,93 @@ const BaseBridgeElement = HTMLBridgeElementFactory(HTMLElementConstructor, share
 shared.freeze(BaseBridgeElement);
 shared.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 (shared.isUndefined(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 (shared.isUndefined(vm)) {
+                    shared.ArraySplice.call(weakRefs, i, 1); // remove
+                }
+            }
+        });
+    }
+    _getWeakRefs(key) {
+        let weakRefs = this._map.get(key);
+        if (shared.isUndefined(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 (!shared.isUndefined(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
+        shared.ArrayPush.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.
@@ -2506,67 +2593,62 @@ shared.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 (!shared.isUndefined(list)) {
-        list.forEach((vm) => {
-            if (shared.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 (shared.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 (!shared.isUndefined(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 (!shared.isUndefined(list)) {
-        list.forEach((vm) => {
-            const { owner } = vm;
-            if (!shared.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 (!shared.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) {
@@ -2612,75 +2694,27 @@ function setActiveVM(vm) {
     }
     // tracking active component
     const Ctor = vm.def.ctor;
-    let componentVMs = activeComponents.get(Ctor);
-    if (shared.isUndefined(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 (shared.isUndefined(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 (!shared.isUndefined(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 (shared.isUndefined(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) {
-    if (process.env.NODE_ENV === 'production') {
-        // this method should never leak to prod
-        throw new ReferenceError();
-    }
-    // tracking inactive component
-    const Ctor = vm.def.ctor;
-    let list = activeComponents.get(Ctor);
-    if (!shared.isUndefined(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 (!shared.isUndefined(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 (!shared.isUndefined(styles)) {
-            flattenStylesheets(styles).forEach((style) => {
-                list = activeStyles.get(style);
-                if (!shared.isUndefined(list)) {
-                    // deleting the vm from the set to avoid leaking memory
-                    list.delete(vm);
-                }
-            });
+                activeStyles.add(swappedStylesheet, vm);
+            }
         }
     }
 }
@@ -5189,9 +5223,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.
@@ -5569,22 +5600,33 @@ function recursivelyDisconnectChildren(vnodes) {
 // into snabbdom. Especially useful when the reset is a consequence of an error, in which case the
 // children VNodes might not be representing the current state of the DOM.
 function resetComponentRoot(vm) {
+  recursivelyRemoveChildren(vm.children, vm);
+  vm.children = EmptyArray;
+  runChildNodesDisconnectedCallback(vm);
+  vm.velements = EmptyArray;
+}
+// Helper function to remove all children of the root node.
+// If the set of children includes VFragment nodes, we need to remove the children of those nodes too.
+// Since VFragments can contain other VFragments, we need to traverse the entire of tree of VFragments.
+// If the set contains no VFragment nodes, no traversal is needed.
+function recursivelyRemoveChildren(vnodes, vm) {
   const {
-    children,
     renderRoot,
     renderer: {
       remove
     }
   } = vm;
-  for (let i = 0, len = children.length; i < len; i++) {
-    const child = children[i];
-    if (!shared.isNull(child) && !shared.isUndefined(child.elm)) {
-      remove(child.elm, renderRoot);
+  for (let i = 0, len = vnodes.length; i < len; i += 1) {
+    const vnode = vnodes[i];
+    if (!shared.isNull(vnode)) {
+      // VFragments are special; their .elm property does not point to the root element since they have no single root.
+      if (isVFragment(vnode)) {
+        recursivelyRemoveChildren(vnode.children, vm);
+      } else if (!shared.isUndefined(vnode.elm)) {
+        remove(vnode.elm, renderRoot);
+      }
     }
   }
-  vm.children = EmptyArray;
-  runChildNodesDisconnectedCallback(vm);
-  vm.velements = EmptyArray;
 }
 function scheduleRehydration(vm) {
   if (!process.env.IS_BROWSER || shared.isTrue(vm.isScheduled)) {
@@ -6570,4 +6612,4 @@ exports.swapTemplate = swapTemplate;
 exports.track = track;
 exports.unwrap = unwrap;
 exports.wire = wire;
-/* version: 2.31.6 */
+/* version: 2.31.8 */

package/dist/engine-core.js

@@ -2496,6 +2496,93 @@ const BaseBridgeElement = HTMLBridgeElementFactory(HTMLElementConstructor, getOw
 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.
@@ -2505,67 +2592,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) {
@@ -2611,75 +2693,27 @@ function setActiveVM(vm) {
     }
     // 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) {
-    if (process.env.NODE_ENV === 'production') {
-        // this method should never leak to prod
-        throw new ReferenceError();
-    }
-    // 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);
+            }
         }
     }
 }
@@ -5188,9 +5222,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.
@@ -5568,22 +5599,33 @@ function recursivelyDisconnectChildren(vnodes) {
 // into snabbdom. Especially useful when the reset is a consequence of an error, in which case the
 // children VNodes might not be representing the current state of the DOM.
 function resetComponentRoot(vm) {
+  recursivelyRemoveChildren(vm.children, vm);
+  vm.children = EmptyArray;
+  runChildNodesDisconnectedCallback(vm);
+  vm.velements = EmptyArray;
+}
+// Helper function to remove all children of the root node.
+// If the set of children includes VFragment nodes, we need to remove the children of those nodes too.
+// Since VFragments can contain other VFragments, we need to traverse the entire of tree of VFragments.
+// If the set contains no VFragment nodes, no traversal is needed.
+function recursivelyRemoveChildren(vnodes, vm) {
   const {
-    children,
     renderRoot,
     renderer: {
       remove
     }
   } = vm;
-  for (let i = 0, len = children.length; i < len; i++) {
-    const child = children[i];
-    if (!isNull(child) && !isUndefined$1(child.elm)) {
-      remove(child.elm, renderRoot);
+  for (let i = 0, len = vnodes.length; i < len; i += 1) {
+    const vnode = vnodes[i];
+    if (!isNull(vnode)) {
+      // VFragments are special; their .elm property does not point to the root element since they have no single root.
+      if (isVFragment(vnode)) {
+        recursivelyRemoveChildren(vnode.children, vm);
+      } else if (!isUndefined$1(vnode.elm)) {
+        remove(vnode.elm, renderRoot);
+      }
     }
   }
-  vm.children = EmptyArray;
-  runChildNodesDisconnectedCallback(vm);
-  vm.velements = EmptyArray;
 }
 function scheduleRehydration(vm) {
   if (!process.env.IS_BROWSER || isTrue(vm.isScheduled)) {
@@ -6533,4 +6575,4 @@ function getComponentConstructor(elm) {
 }
 
 export { LightningElement, profilerControl as __unstable__ProfilerControl, api$1 as api, connectRootElement, createContextProvider, 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.31.6 */
+/* version: 2.31.8 */

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@lwc/engine-core",
-    "version": "2.31.6",
+    "version": "2.31.8",
     "description": "Core LWC engine APIs.",
     "homepage": "https://lwc.dev/",
     "repository": {
@@ -24,8 +24,8 @@
         "types/"
     ],
     "dependencies": {
-        "@lwc/features": "2.31.6",
-        "@lwc/shared": "2.31.6"
+        "@lwc/features": "2.31.8",
+        "@lwc/shared": "2.31.8"
     },
     "devDependencies": {
         "observable-membrane": "2.0.0"

package/types/framework/hot-swaps.d.ts

@@ -6,7 +6,6 @@ export declare function getTemplateOrSwappedTemplate(tpl: Template): Template;
 export declare function getComponentOrSwappedComponent(Ctor: LightningElementConstructor): LightningElementConstructor;
 export declare function getStyleOrSwappedStyle(style: StylesheetFactory): StylesheetFactory;
 export declare function setActiveVM(vm: VM): void;
-export declare function removeActiveVM(vm: VM): void;
 export declare function swapTemplate(oldTpl: Template, newTpl: Template): boolean;
 export declare function swapComponent(oldComponent: LightningElementConstructor, newComponent: LightningElementConstructor): boolean;
 export declare function swapStyle(oldStyle: StylesheetFactory, newStyle: StylesheetFactory): boolean;

package/types/framework/weak-multimap.d.ts

@@ -0,0 +1,29 @@
+/**
+ * A map where the keys are weakly held and the values are a Set that are also each weakly held.
+ * The goal is to avoid leaking the values, which is what would happen with a WeakMap<K, Set<V>>.
+ *
+ * Note that this is currently only intended to be used in dev/PRODDEBUG environments.
+ * It leaks in legacy browsers, which may be undesired.
+ */
+export interface WeakMultiMap<T extends object, V extends object> {
+    get(key: T): ReadonlySet<V>;
+    add(key: T, vm: V): void;
+    delete(key: T): void;
+}
+declare class LegacyWeakMultiMap<K extends object, V extends object> implements WeakMultiMap<K, V> {
+    private _map;
+    private _getValues;
+    get(key: K): ReadonlySet<V>;
+    add(key: K, vm: V): void;
+    delete(key: K): void;
+}
+declare class ModernWeakMultiMap<K extends object, V extends object> implements WeakMultiMap<K, V> {
+    private _map;
+    private _registry;
+    private _getWeakRefs;
+    get(key: K): ReadonlySet<V>;
+    add(key: K, value: V): void;
+    delete(key: K): void;
+}
+export declare const WeakMultiMap: typeof LegacyWeakMultiMap | typeof ModernWeakMultiMap;
+export {};