@lwc/engine-core 8.11.0 → 8.12.1

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

@@ -1091,18 +1091,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;
 }
@@ -1340,10 +1328,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)) {
@@ -1407,147 +1391,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) {
@@ -5932,45 +5800,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 +7553,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 +7930,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 +7955,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 +7979,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 +7995,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 +8439,5 @@ exports.swapTemplate = swapTemplate;
 exports.track = track;
 exports.unwrap = unwrap;
 exports.wire = wire;
-/** version: 8.11.0 */
+/** version: 8.12.1 */
 //# sourceMappingURL=index.cjs.js.map