@lwc/engine-core 8.11.0 → 8.12.0

package/dist/framework/api.d.ts

@@ -1,3 +1,4 @@
+import { normalizeClass } from '@lwc/shared';
 import type { SanitizedHtmlContent } from './sanitized-html-content';
 import type { Key, VComment, VCustomElement, VElement, VElementData, VFragment, VNode, VNodes, VScopedSlotFragment, VStatic, VStaticPart, VStaticPartData, VText } from './vnodes';
 import type { LightningElementConstructor } from './base-lightning-element';
@@ -41,16 +42,6 @@ declare function ddc(sel: string, Ctor: LightningElementConstructor | null | und
  */
 declare function dc(Ctor: LightningElementConstructor | null | undefined, data: VElementData, children?: VNodes): VCustomElement | null;
 declare function shc(content: unknown): SanitizedHtmlContent;
-/**
- * [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
- */
-declare function ncls(value: unknown): string | undefined;
 declare const api: Readonly<{
     s: typeof s;
     h: typeof h;
@@ -72,7 +63,7 @@ declare const api: Readonly<{
     ssf: typeof ssf;
     ddc: typeof ddc;
     sp: typeof sp;
-    ncls: typeof ncls;
+    ncls: typeof normalizeClass;
 }>;
 export default api;
 export type RenderAPI = typeof api;

package/dist/index.cjs.js

@@ -5932,45 +5932,7 @@ function shc(content) {
     const sanitizedString = shared.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 (shared.isUndefined(value) || shared.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 (shared.isString(value)) {
-        res = value;
-    }
-    else if (shared.isArray(value)) {
-        for (let i = 0; i < value.length; i++) {
-            const normalized = ncls(value[i]);
-            if (normalized) {
-                res += normalized + ' ';
-            }
-        }
-    }
-    else if (shared.isObject(value) && !shared.isNull(value)) {
-        // Iterate own enumerable keys of the object
-        const keys = shared.keys(value);
-        for (let i = 0; i < keys.length; i += 1) {
-            const key = keys[i];
-            if (value[key]) {
-                res += key + ' ';
-            }
-        }
-    }
-    return shared.StringTrim.call(res);
-}
+const ncls = shared.normalizeClass;
 const api = shared.freeze({
     s,
     h,
@@ -7723,6 +7685,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) {
@@ -8098,6 +8062,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
@@ -8107,17 +8087,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(shared.ArrayFrom(elm.classList));
+    const elmClasses = elm.classList.length ? new Set(shared.ArrayFrom(elm.classList)) : EMPTY_SET;
     let vnodeClasses;
     if (!shared.isUndefined(className)) {
         // ignore empty spaces entirely, filter them out using `filter(..., Boolean)`
-        vnodeClasses = new Set(shared.ArrayFilter.call(shared.StringSplit.call(className, /\s+/), Boolean));
+        const classes = shared.ArrayFilter.call(shared.StringSplit.call(className, /\s+/), Boolean);
+        vnodeClasses = classes.length ? new Set(classes) : EMPTY_SET;
     }
     else if (!shared.isUndefined(classMap)) {
-        vnodeClasses = new Set(shared.keys(classMap));
+        const classes = shared.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
@@ -8129,7 +8111,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 (!shared.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.
@@ -8140,27 +8127,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(shared.ArrayJoin.call(shared.ArraySort.call(shared.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
@@ -8599,5 +8571,5 @@ exports.swapTemplate = swapTemplate;
 exports.track = track;
 exports.unwrap = unwrap;
 exports.wire = wire;
-/** version: 8.11.0 */
+/** version: 8.12.0 */
 //# sourceMappingURL=index.cjs.js.map