@lwc/engine-core 8.11.0 → 8.12.1

package/dist/index.js

@@ -1,7 +1,7 @@
 /**
  * Copyright (c) 2024 Salesforce, Inc.
  */
-import { noop, StringToLowerCase, isNull, ArrayPush as ArrayPush$1, ArrayJoin, isFrozen, isUndefined as isUndefined$1, defineProperty, seal, create, isAPIFeatureEnabled, isFunction as isFunction$1, keys, ArrayFilter, isObject, isArray as isArray$1, getOwnPropertyNames as getOwnPropertyNames$1, getOwnPropertySymbols as getOwnPropertySymbols$1, toString as toString$1, isString, ArrayIndexOf, ArrayPop, isFalse, isTrustedSignal, hasOwnProperty as hasOwnProperty$1, entries, AriaPropNameToAttrNameMap, getPropertyDescriptor, AriaAttrNameToPropNameMap, forEach, defineProperties, getPrototypeOf as getPrototypeOf$1, setPrototypeOf, assign, assert, freeze, KEY__SYNTHETIC_MODE, getOwnPropertyDescriptor as getOwnPropertyDescriptor$1, LWC_VERSION_COMMENT_REGEX, LWC_VERSION, getOwnPropertyDescriptors, htmlPropertyToAttribute, ArraySlice, ArrayMap, isTrue, KEY__SCOPED_CSS, KEY__NATIVE_ONLY_CSS, ArraySplice, flattenStylesheets, kebabCaseToCamelCase, StringCharCodeAt, XML_NAMESPACE, XLINK_NAMESPACE, StringSlice, SVG_NAMESPACE, KEY__SHADOW_STATIC, KEY__SHADOW_RESOLVER, ArraySome, isNumber, StringReplace, sanitizeHtmlContent, StringTrim, ArraySort, ArrayFrom, htmlEscape, StringCharAt, LOWEST_API_VERSION, ArrayUnshift, KEY__NATIVE_GET_ELEMENT_BY_ID, KEY__NATIVE_QUERY_SELECTOR_ALL, ID_REFERENCING_ATTRIBUTES_SET, KEY__SHADOW_TOKEN, StringSplit, parseStyleText, arrayEvery, ArrayCopyWithin, ArrayFill, ArrayReverse, ArrayShift } from '@lwc/shared';
+import { noop, StringToLowerCase, isNull, ArrayPush as ArrayPush$1, ArrayJoin, isFrozen, isUndefined as isUndefined$1, defineProperty, seal, create, isAPIFeatureEnabled, isFunction as isFunction$1, keys, ArrayFilter, isObject, isArray as isArray$1, getOwnPropertyNames as getOwnPropertyNames$1, getOwnPropertySymbols as getOwnPropertySymbols$1, toString, isString, ArrayIndexOf, ArrayPop, isFalse, isTrustedSignal, hasOwnProperty as hasOwnProperty$1, entries, AriaPropNameToAttrNameMap, getPropertyDescriptor, AriaAttrNameToPropNameMap, forEach, defineProperties, getPrototypeOf as getPrototypeOf$1, setPrototypeOf, assign, assert, freeze, KEY__SYNTHETIC_MODE, getOwnPropertyDescriptor as getOwnPropertyDescriptor$1, LWC_VERSION_COMMENT_REGEX, LWC_VERSION, getOwnPropertyDescriptors, htmlPropertyToAttribute, ArraySlice, ArrayMap, isTrue, KEY__SCOPED_CSS, KEY__NATIVE_ONLY_CSS, ArraySplice, flattenStylesheets, kebabCaseToCamelCase, StringCharCodeAt, XML_NAMESPACE, XLINK_NAMESPACE, StringSlice, SVG_NAMESPACE, KEY__SHADOW_STATIC, KEY__SHADOW_RESOLVER, ArraySome, isNumber, StringReplace, sanitizeHtmlContent, normalizeClass, ArraySort, ArrayFrom, htmlEscape, StringCharAt, LOWEST_API_VERSION, ArrayUnshift, KEY__NATIVE_GET_ELEMENT_BY_ID, KEY__NATIVE_QUERY_SELECTOR_ALL, ID_REFERENCING_ATTRIBUTES_SET, KEY__SHADOW_TOKEN, StringSplit, parseStyleText, arrayEvery, ArrayCopyWithin, ArrayFill, ArrayReverse, ArrayShift } from '@lwc/shared';
 export { setHooks, setTrustedSignalSet } from '@lwc/shared';
 export { setFeatureFlag, setFeatureFlagForTest } from '@lwc/features';
 
@@ -266,19 +266,19 @@ let mutationLogs = [];
 function toPrettyMemberNotation(parent, child) {
     if (isUndefined$1(parent)) {
         // Bare prop, just stringify the child
-        return toString$1(child);
+        return toString(child);
     }
     else if (!isString(child)) {
         // Symbol/number, e.g. `obj[Symbol("foo")]` or `obj[1234]`
-        return `${toString$1(parent)}[${toString$1(child)}]`;
+        return `${toString(parent)}[${toString(child)}]`;
     }
     else if (/^\w+$/.test(child)) {
         // Dot-notation-safe string, e.g. `obj.foo`
-        return `${toString$1(parent)}.${child}`;
+        return `${toString(parent)}.${child}`;
     }
     else {
         // Bracket-notation-requiring string, e.g. `obj["prop with spaces"]`
-        return `${toString$1(parent)}[${JSON.stringify(child)}]`;
+        return `${toString(parent)}[${JSON.stringify(child)}]`;
     }
 }
 function safelyCallGetter(target, key) {
@@ -767,7 +767,7 @@ const ariaDescriptor = (attrName) => ({
                 this.removeAttribute(attrName);
             }
             else {
-                this.setAttribute(attrName, toString$1(newValue));
+                this.setAttribute(attrName, toString(newValue));
             }
         }
     },
@@ -785,7 +785,7 @@ const tabIndexDescriptor = () => ({
         const num = Number(newValue);
         const normalizedValue = isFinite(num) ? String(Math.trunc(num)) : '0';
         if (normalizedValue !== currentValue) {
-            this.setAttribute('tabindex', toString$1(newValue));
+            this.setAttribute('tabindex', toString(newValue));
         }
     },
 });
@@ -1088,18 +1088,6 @@ function updateComponentValue(vm, key, newValue) {
 const { isArray } = Array;
 const { prototype: ObjectDotPrototype, getPrototypeOf, create: ObjectCreate, defineProperty: ObjectDefineProperty, isExtensible, getOwnPropertyDescriptor, getOwnPropertyNames, getOwnPropertySymbols, preventExtensions, hasOwnProperty, } = Object;
 const { push: ArrayPush, concat: ArrayConcat } = Array.prototype;
-const OtS = {}.toString;
-function toString(obj) {
-    if (obj && obj.toString) {
-        return obj.toString();
-    }
-    else if (typeof obj === 'object') {
-        return OtS.call(obj);
-    }
-    else {
-        return obj + '';
-    }
-}
 function isUndefined(obj) {
     return obj === undefined;
 }
@@ -1337,10 +1325,6 @@ class ReactiveProxyHandler extends BaseProxyHandler {
         return true;
     }
     setPrototypeOf(shadowTarget, prototype) {
-        /* istanbul ignore else */
-        if (process.env.NODE_ENV !== 'production') {
-            throw new Error(`Invalid setPrototypeOf invocation for reactive proxy ${toString(this.originalTarget)}. Prototype of reactive objects cannot be changed.`);
-        }
     }
     preventExtensions(shadowTarget) {
         if (isExtensible(shadowTarget)) {
@@ -1404,147 +1388,31 @@ class ReadOnlyHandler extends BaseProxyHandler {
         if (!isUndefined(wrappedSetter)) {
             return wrappedSetter;
         }
-        const handler = this;
         const set = function (v) {
-            /* istanbul ignore else */
-            if (process.env.NODE_ENV !== 'production') {
-                const { originalTarget } = handler;
-                throw new Error(`Invalid mutation: Cannot invoke a setter on "${originalTarget}". "${originalTarget}" is read-only.`);
-            }
         };
         setterMap.set(originalSet, set);
         return set;
     }
     set(shadowTarget, key, value) {
-        /* istanbul ignore else */
-        if (process.env.NODE_ENV !== 'production') {
-            const { originalTarget } = this;
-            const msg = isArray(originalTarget)
-                ? `Invalid mutation: Cannot mutate array at index ${key.toString()}. Array is read-only.`
-                : `Invalid mutation: Cannot set "${key.toString()}" on "${originalTarget}". "${originalTarget}" is read-only.`;
-            throw new Error(msg);
-        }
         /* istanbul ignore next */
         return false;
     }
     deleteProperty(shadowTarget, key) {
-        /* istanbul ignore else */
-        if (process.env.NODE_ENV !== 'production') {
-            const { originalTarget } = this;
-            throw new Error(`Invalid mutation: Cannot delete "${key.toString()}" on "${originalTarget}". "${originalTarget}" is read-only.`);
-        }
         /* istanbul ignore next */
         return false;
     }
     setPrototypeOf(shadowTarget, prototype) {
-        /* istanbul ignore else */
-        if (process.env.NODE_ENV !== 'production') {
-            const { originalTarget } = this;
-            throw new Error(`Invalid prototype mutation: Cannot set prototype on "${originalTarget}". "${originalTarget}" prototype is read-only.`);
-        }
     }
     preventExtensions(shadowTarget) {
-        /* istanbul ignore else */
-        if (process.env.NODE_ENV !== 'production') {
-            const { originalTarget } = this;
-            throw new Error(`Invalid mutation: Cannot preventExtensions on ${originalTarget}". "${originalTarget} is read-only.`);
-        }
         /* istanbul ignore next */
         return false;
     }
     defineProperty(shadowTarget, key, descriptor) {
-        /* istanbul ignore else */
-        if (process.env.NODE_ENV !== 'production') {
-            const { originalTarget } = this;
-            throw new Error(`Invalid mutation: Cannot defineProperty "${key.toString()}" on "${originalTarget}". "${originalTarget}" is read-only.`);
-        }
         /* istanbul ignore next */
         return false;
     }
 }
 
-function extract(objectOrArray) {
-    if (isArray(objectOrArray)) {
-        return objectOrArray.map((item) => {
-            const original = unwrap$1(item);
-            if (original !== item) {
-                return extract(original);
-            }
-            return item;
-        });
-    }
-    const obj = ObjectCreate(getPrototypeOf(objectOrArray));
-    const names = getOwnPropertyNames(objectOrArray);
-    return ArrayConcat.call(names, getOwnPropertySymbols(objectOrArray)).reduce((seed, key) => {
-        const item = objectOrArray[key];
-        const original = unwrap$1(item);
-        if (original !== item) {
-            seed[key] = extract(original);
-        }
-        else {
-            seed[key] = item;
-        }
-        return seed;
-    }, obj);
-}
-const formatter = {
-    header: (plainOrProxy) => {
-        const originalTarget = unwrap$1(plainOrProxy);
-        // if originalTarget is falsy or not unwrappable, exit
-        if (!originalTarget || originalTarget === plainOrProxy) {
-            return null;
-        }
-        const obj = extract(plainOrProxy);
-        return ['object', { object: obj }];
-    },
-    hasBody: () => {
-        return false;
-    },
-    body: () => {
-        return null;
-    },
-};
-// Inspired from paulmillr/es6-shim
-// https://github.com/paulmillr/es6-shim/blob/master/es6-shim.js#L176-L185
-/* istanbul ignore next */
-function getGlobal() {
-    // the only reliable means to get the global object is `Function('return this')()`
-    // However, this causes CSP violations in Chrome apps.
-    if (typeof globalThis !== 'undefined') {
-        return globalThis;
-    }
-    if (typeof self !== 'undefined') {
-        return self;
-    }
-    if (typeof window !== 'undefined') {
-        return window;
-    }
-    if (typeof global !== 'undefined') {
-        return global;
-    }
-    // Gracefully degrade if not able to locate the global object
-    return {};
-}
-function init() {
-    /* istanbul ignore if */
-    if (process.env.NODE_ENV === 'production') {
-        // this method should never leak to prod
-        throw new ReferenceError();
-    }
-    const global = getGlobal();
-    // Custom Formatter for Dev Tools. To enable this, open Chrome Dev Tools
-    //  - Go to Settings,
-    //  - Under console, select "Enable custom formatters"
-    // For more information, https://docs.google.com/document/d/1FTascZXT9cxfetuPRT2eXPQKXui4nWFivUnS_335T3U/preview
-    const devtoolsFormatters = global.devtoolsFormatters || [];
-    ArrayPush.call(devtoolsFormatters, formatter);
-    global.devtoolsFormatters = devtoolsFormatters;
-}
-
-/* istanbul ignore else */
-if (process.env.NODE_ENV !== 'production') {
-    init();
-}
 function defaultValueIsObservable(value) {
     // intentionally checking for null
     if (value === null) {
@@ -2551,7 +2419,7 @@ function createPublicPropertyDescriptor(key) {
             const vm = getAssociatedVM(this);
             if (isBeingConstructed(vm)) {
                 if (process.env.NODE_ENV !== 'production') {
-                    logError(`Can’t read the value of property \`${toString$1(key)}\` from the constructor because the owner component hasn’t set the value yet. Instead, use the constructor to set a default value for the property.`, vm);
+                    logError(`Can’t read the value of property \`${toString(key)}\` from the constructor because the owner component hasn’t set the value yet. Instead, use the constructor to set a default value for the property.`, vm);
                 }
                 return;
             }
@@ -2564,10 +2432,10 @@ function createPublicPropertyDescriptor(key) {
             if (process.env.NODE_ENV !== 'production') {
                 const vmBeingRendered = getVMBeingRendered();
                 if (isInvokingRender) {
-                    logError(`render() method has side effects on the state of property "${toString$1(key)}"`, isNull(vmBeingRendered) ? vm : vmBeingRendered);
+                    logError(`render() method has side effects on the state of property "${toString(key)}"`, isNull(vmBeingRendered) ? vm : vmBeingRendered);
                 }
                 if (isUpdatingTemplate) {
-                    logError(`Updating the template has side effects on the state of property "${toString$1(key)}"`, isNull(vmBeingRendered) ? vm : vmBeingRendered);
+                    logError(`Updating the template has side effects on the state of property "${toString(key)}"`, isNull(vmBeingRendered) ? vm : vmBeingRendered);
                 }
             }
             vm.cmpProps[key] = newValue;
@@ -2579,7 +2447,7 @@ function createPublicPropertyDescriptor(key) {
 }
 function createPublicAccessorDescriptor(key, descriptor) {
     const { get, set, enumerable, configurable } = descriptor;
-    assert.invariant(isFunction$1(get), `Invalid public accessor ${toString$1(key)} decorated with @api. The property is missing a getter.`);
+    assert.invariant(isFunction$1(get), `Invalid public accessor ${toString(key)} decorated with @api. The property is missing a getter.`);
     return {
         get() {
             if (process.env.NODE_ENV !== 'production') {
@@ -2593,17 +2461,17 @@ function createPublicAccessorDescriptor(key, descriptor) {
             if (process.env.NODE_ENV !== 'production') {
                 const vmBeingRendered = getVMBeingRendered();
                 if (isInvokingRender) {
-                    logError(`render() method has side effects on the state of property "${toString$1(key)}"`, isNull(vmBeingRendered) ? vm : vmBeingRendered);
+                    logError(`render() method has side effects on the state of property "${toString(key)}"`, isNull(vmBeingRendered) ? vm : vmBeingRendered);
                 }
                 if (isUpdatingTemplate) {
-                    logError(`Updating the template has side effects on the state of property "${toString$1(key)}"`, isNull(vmBeingRendered) ? vm : vmBeingRendered);
+                    logError(`Updating the template has side effects on the state of property "${toString(key)}"`, isNull(vmBeingRendered) ? vm : vmBeingRendered);
                 }
             }
             if (set) {
                 set.call(this, newValue);
             }
             else if (process.env.NODE_ENV !== 'production') {
-                logError(`Invalid attempt to set a new value for property "${toString$1(key)}" that does not has a setter decorated with @api.`, vm);
+                logError(`Invalid attempt to set a new value for property "${toString(key)}" that does not has a setter decorated with @api.`, vm);
             }
         },
         enumerable,
@@ -2641,10 +2509,10 @@ function internalTrackDecorator(key) {
             if (process.env.NODE_ENV !== 'production') {
                 const vmBeingRendered = getVMBeingRendered();
                 if (isInvokingRender) {
-                    logError(`${vmBeingRendered}.render() method has side effects on the state of ${vm}.${toString$1(key)}`);
+                    logError(`${vmBeingRendered}.render() method has side effects on the state of ${vm}.${toString(key)}`);
                 }
                 if (isUpdatingTemplate) {
-                    logError(`Updating the template of ${vmBeingRendered} has side effects on the state of ${vm}.${toString$1(key)}`);
+                    logError(`Updating the template of ${vmBeingRendered} has side effects on the state of ${vm}.${toString(key)}`);
                 }
             }
             const reactiveOrAnyValue = getReactiveProxy(newValue);
@@ -5518,7 +5386,7 @@ function ti(value) {
     if (process.env.NODE_ENV !== 'production') {
         const vmBeingRendered = getVMBeingRendered();
         if (shouldNormalize) {
-            logError(`Invalid tabindex value \`${toString$1(value)}\` in template for ${vmBeingRendered}. This attribute must be set to 0 or -1.`, vmBeingRendered);
+            logError(`Invalid tabindex value \`${toString(value)}\` in template for ${vmBeingRendered}. This attribute must be set to 0 or -1.`, vmBeingRendered);
         }
     }
     return shouldNormalize ? 0 : value;
@@ -5679,16 +5547,16 @@ function i(iterable, factory) {
     const vmBeingRendered = getVMBeingRendered();
     if (isUndefined$1(iterable) || isNull(iterable)) {
         if (process.env.NODE_ENV !== 'production') {
-            logError(`Invalid template iteration for value \`${toString$1(iterable)}\` in ${vmBeingRendered}. It must be an array-like object.`, vmBeingRendered);
+            logError(`Invalid template iteration for value \`${toString(iterable)}\` in ${vmBeingRendered}. It must be an array-like object.`, vmBeingRendered);
         }
         return list;
     }
     if (process.env.NODE_ENV !== 'production') {
-        assert.isFalse(isUndefined$1(iterable[SymbolIterator]), `Invalid template iteration for value \`${toString$1(iterable)}\` in ${vmBeingRendered}. It must be an array-like object.`);
+        assert.isFalse(isUndefined$1(iterable[SymbolIterator]), `Invalid template iteration for value \`${toString(iterable)}\` in ${vmBeingRendered}. It must be an array-like object.`);
     }
     const iterator = iterable[SymbolIterator]();
     if (process.env.NODE_ENV !== 'production') {
-        assert.isTrue(iterator && isFunction$1(iterator.next), `Invalid iterator function for "${toString$1(iterable)}" in ${vmBeingRendered}.`);
+        assert.isTrue(iterator && isFunction$1(iterator.next), `Invalid iterator function for "${toString(iterable)}" in ${vmBeingRendered}.`);
     }
     let next = iterator.next();
     let j = 0;
@@ -5870,7 +5738,7 @@ function ddc(sel, Ctor, data, children = EmptyArray) {
         return null;
     }
     if (!isComponentConstructor(Ctor)) {
-        throw new Error(`Invalid LWC Constructor ${toString$1(Ctor)} for custom element <${sel}>.`);
+        throw new Error(`Invalid LWC Constructor ${toString(Ctor)} for custom element <${sel}>.`);
     }
     return c(sel, Ctor, data, children);
 }
@@ -5891,13 +5759,13 @@ function dc(Ctor, data, children = EmptyArray) {
         return null;
     }
     if (!isComponentConstructor(Ctor)) {
-        throw new Error(`Invalid constructor: "${toString$1(Ctor)}" is not a LightningElement constructor.`);
+        throw new Error(`Invalid constructor: "${toString(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`);
+        throw new Error(`Invalid LWC constructor ${toString(Ctor)} does not have a registered name`);
     }
     return c(sel, Ctor, data, children);
 }
@@ -5929,45 +5797,7 @@ function shc(content) {
     const sanitizedString = sanitizeHtmlContent(content);
     return createSanitizedHtmlContent(sanitizedString);
 }
-/**
- * [ncls] - Normalize class name attribute.
- *
- * Transforms the provided class property value from an object/string into a string the diffing algo
- * can operate on.
- *
- * This implementation is borrowed from Vue:
- * https://github.com/vuejs/core/blob/e790e1bdd7df7be39e14780529db86e4da47a3db/packages/shared/src/normalizeProp.ts#L63-L82
- */
-function ncls(value) {
-    if (isUndefined$1(value) || isNull(value)) {
-        // Returning undefined here improves initial render cost, because the old vnode's class will be considered
-        // undefined in the `patchClassAttribute` routine, so `oldClass === newClass` will be true so we return early
-        return undefined;
-    }
-    let res = '';
-    if (isString(value)) {
-        res = value;
-    }
-    else if (isArray$1(value)) {
-        for (let i = 0; i < value.length; i++) {
-            const normalized = ncls(value[i]);
-            if (normalized) {
-                res += normalized + ' ';
-            }
-        }
-    }
-    else if (isObject(value) && !isNull(value)) {
-        // Iterate own enumerable keys of the object
-        const keys$1 = keys(value);
-        for (let i = 0; i < keys$1.length; i += 1) {
-            const key = keys$1[i];
-            if (value[key]) {
-                res += key + ' ';
-            }
-        }
-    }
-    return StringTrim.call(res);
-}
+const ncls = normalizeClass;
 const api = freeze({
     s,
     h,
@@ -6302,7 +6132,7 @@ function validateSlots(vm) {
     assertNotProd(); // this method should never leak to prod
     const { cmpSlots } = vm;
     for (const slotName in cmpSlots.slotAssignments) {
-        assert.isTrue(isArray$1(cmpSlots.slotAssignments[slotName]), `Slots can only be set to an array, instead received ${toString$1(cmpSlots.slotAssignments[slotName])} for slot "${slotName}" in ${vm}.`);
+        assert.isTrue(isArray$1(cmpSlots.slotAssignments[slotName]), `Slots can only be set to an array, instead received ${toString(cmpSlots.slotAssignments[slotName])} for slot "${slotName}" in ${vm}.`);
     }
 }
 function checkHasMatchingRenderMode(template, vm) {
@@ -6541,7 +6371,7 @@ function evaluateTemplate(vm, html) {
             if (html !== cmpTemplate) {
                 // Check that the template was built by the compiler.
                 if (!isTemplateRegistered(html)) {
-                    throw new TypeError(`Invalid template returned by the render() method on ${vm.tagName}. It must return an imported template (e.g.: \`import html from "./${vm.def.name}.html"\`), instead, it has returned: ${toString$1(html)}.`);
+                    throw new TypeError(`Invalid template returned by the render() method on ${vm.tagName}. It must return an imported template (e.g.: \`import html from "./${vm.def.name}.html"\`), instead, it has returned: ${toString(html)}.`);
                 }
                 checkHasMatchingRenderMode(html, vm);
                 // Perf opt: do not reset the shadow root during the first rendering (there is
@@ -7720,6 +7550,8 @@ if (process.env.IS_BROWSER && isGlobalAriaPolyfillLoaded()) {
  * SPDX-License-Identifier: MIT
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
+// Used as a perf optimization to avoid creating and discarding sets unnecessarily.
+const EMPTY_SET = new Set();
 // flag indicating if the hydration recovered from the DOM mismatch
 let hasMismatch = false;
 function hydrateRoot(vm) {
@@ -8095,6 +7927,22 @@ function validateAttrs(vnode, elm, data, renderer, shouldValidateAttr) {
     }
     return nodesAreCompatible;
 }
+function checkClassesCompatibility(first, second) {
+    if (first.size !== second.size) {
+        return false;
+    }
+    for (const f of first) {
+        if (!second.has(f)) {
+            return false;
+        }
+    }
+    for (const s of second) {
+        if (!first.has(s)) {
+            return false;
+        }
+    }
+    return true;
+}
 function validateClassAttr(vnode, elm, data, renderer) {
     const { owner } = vnode;
     // classMap is never available on VStaticPartData so it can default to undefined
@@ -8104,17 +7952,19 @@ function validateClassAttr(vnode, elm, data, renderer) {
     // ---------- Step 1: get the classes from the element and the vnode
     // Use a Set because we don't care to validate mismatches for 1) different ordering in SSR vs CSR, or 2)
     // duplicated class names. These don't have an effect on rendered styles.
-    const elmClasses = new Set(ArrayFrom(elm.classList));
+    const elmClasses = elm.classList.length ? new Set(ArrayFrom(elm.classList)) : EMPTY_SET;
     let vnodeClasses;
     if (!isUndefined$1(className)) {
         // ignore empty spaces entirely, filter them out using `filter(..., Boolean)`
-        vnodeClasses = new Set(ArrayFilter.call(StringSplit.call(className, /\s+/), Boolean));
+        const classes = ArrayFilter.call(StringSplit.call(className, /\s+/), Boolean);
+        vnodeClasses = classes.length ? new Set(classes) : EMPTY_SET;
     }
     else if (!isUndefined$1(classMap)) {
-        vnodeClasses = new Set(keys(classMap));
+        const classes = keys(classMap);
+        vnodeClasses = classes.length ? new Set(classes) : EMPTY_SET;
     }
     else {
-        vnodeClasses = new Set();
+        vnodeClasses = EMPTY_SET;
     }
     // ---------- Step 2: handle the scope tokens
     // we don't care about legacy for hydration. it's a new use case
@@ -8126,7 +7976,12 @@ function validateClassAttr(vnode, elm, data, renderer) {
     // Consequently, hydration mismatches will occur if scoped CSS token classnames
     // are rendered during SSR. This needs to be accounted for when validating.
     if (!isNull(scopeToken)) {
-        vnodeClasses.add(scopeToken);
+        if (vnodeClasses === EMPTY_SET) {
+            vnodeClasses = new Set([scopeToken]);
+        }
+        else {
+            vnodeClasses.add(scopeToken);
+        }
     }
     // This tells us which `*-host` scope token was rendered to the element's class.
     // For now we just ignore any mismatches involving this class.
@@ -8137,27 +7992,12 @@ function validateClassAttr(vnode, elm, data, renderer) {
         vnodeClasses.delete(elmHostScopeToken);
     }
     // ---------- Step 3: check for compatibility
-    let nodesAreCompatible = true;
-    if (vnodeClasses.size !== elmClasses.size) {
-        nodesAreCompatible = false;
-    }
-    else {
-        for (const vnodeClass of vnodeClasses) {
-            if (!elmClasses.has(vnodeClass)) {
-                nodesAreCompatible = false;
-            }
-        }
-        for (const elmClass of elmClasses) {
-            if (!vnodeClasses.has(elmClass)) {
-                nodesAreCompatible = false;
-            }
-        }
-    }
-    if (process.env.NODE_ENV !== 'production' && !nodesAreCompatible) {
+    const classesAreCompatible = checkClassesCompatibility(vnodeClasses, elmClasses);
+    if (process.env.NODE_ENV !== 'production' && !classesAreCompatible) {
         const prettyPrint = (set) => JSON.stringify(ArrayJoin.call(ArraySort.call(ArrayFrom(set)), ' '));
         logWarn(`Mismatch hydrating element <${getProperty(elm, 'tagName').toLowerCase()}>: attribute "class" has different values, expected ${prettyPrint(vnodeClasses)} but found ${prettyPrint(elmClasses)}`, vnode.owner);
     }
-    return nodesAreCompatible;
+    return classesAreCompatible;
 }
 function validateStyleAttr(vnode, elm, data, renderer) {
     // Note styleDecls is always undefined for VStaticPartData, casting here to default it to undefined
@@ -8546,5 +8386,5 @@ function readonly(obj) {
 }
 
 export { LightningElement, profilerControl as __unstable__ProfilerControl, reportingControl as __unstable__ReportingControl, api$1 as api, computeShadowAndRenderMode, connectRootElement, createContextProviderWithRegister, createVM, disconnectRootElement, freezeTemplate, getAssociatedVMIfPresent, getComponentAPIVersion, getComponentConstructor, getComponentDef, getComponentHtmlPrototype, hydrateRoot, isComponentConstructor, parseFragment, parseSVGFragment, readonly, registerComponent, registerDecorators, registerTemplate, runFormAssociatedCallback, runFormDisabledCallback, runFormResetCallback, runFormStateRestoreCallback, sanitizeAttribute, shouldBeFormAssociated, swapComponent, swapStyle, swapTemplate, track, unwrap, wire };
-/** version: 8.11.0 */
+/** version: 8.12.1 */
 //# sourceMappingURL=index.js.map