@lwc/engine-core 8.7.0 → 8.9.0

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, 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, isNull, ArrayPush as ArrayPush$1, StringToLowerCase, ArrayJoin, isFrozen, isUndefined as isUndefined$1, defineProperty, seal, create, isAPIFeatureEnabled, isFunction as isFunction$1, keys, toString as toString$1, isString, ArrayFilter, isObject, isArray as isArray$1, getOwnPropertyNames as getOwnPropertyNames$1, getOwnPropertySymbols as getOwnPropertySymbols$1, ArrayIndexOf, ArrayPop, isFalse, isTrustedSignal, hasOwnProperty as hasOwnProperty$1, entries, AriaPropNameToAttrNameMap, getPropertyDescriptor, AriaAttrNameToPropNameMap, forEach, defineProperties, assign, getPrototypeOf as getPrototypeOf$1, setPrototypeOf, KEY__SYNTHETIC_MODE, freeze, assert, getOwnPropertyDescriptor as getOwnPropertyDescriptor$1, LWC_VERSION_COMMENT_REGEX, LWC_VERSION, getOwnPropertyDescriptors, htmlPropertyToAttribute, ArraySlice, isTrue, KEY__SCOPED_CSS, KEY__NATIVE_ONLY_CSS, ArrayMap, ArraySplice, flattenStylesheets, kebabCaseToCamelCase, StringCharCodeAt, XML_NAMESPACE, XLINK_NAMESPACE, StringSlice, KEY__SHADOW_RESOLVER, ArraySome, SVG_NAMESPACE, KEY__SHADOW_STATIC, StringTrim, sanitizeHtmlContent, StringReplace, isNumber, ArraySort, ArrayFrom, StringCharAt, htmlEscape, LOWEST_API_VERSION, ArrayUnshift, KEY__NATIVE_GET_ELEMENT_BY_ID, KEY__NATIVE_QUERY_SELECTOR_ALL, KEY__SHADOW_TOKEN, ID_REFERENCING_ATTRIBUTES_SET, StringSplit, arrayEvery, parseStyleText, ArrayCopyWithin, ArrayFill, ArrayReverse, ArrayShift } from '@lwc/shared';
 export { setHooks, setTrustedSignalSet } from '@lwc/shared';
 export { setFeatureFlag, setFeatureFlagForTest } from '@lwc/features';
 
@@ -682,6 +682,129 @@ for (const [propName, attrName] of entries(AriaPropNameToAttrNameMap)) {
     }
 }
 
+/*
+ * Copyright (c) 2024, Salesforce, 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
+ */
+/**
+ * Descriptor for IDL attribute reflections that merely reflect the string, e.g. `title`.
+ */
+const stringDescriptor = (attrName) => ({
+    configurable: true,
+    enumerable: true,
+    get() {
+        return this.getAttribute(attrName);
+    },
+    set(newValue) {
+        const currentValue = this.getAttribute(attrName);
+        const normalizedValue = String(newValue);
+        if (normalizedValue !== currentValue) {
+            this.setAttribute(attrName, normalizedValue);
+        }
+    },
+});
+/** Descriptor for a boolean that checks for `attr="true"` or `attr="false"`, e.g. `spellcheck` and `draggable`. */
+const explicitBooleanDescriptor = (attrName, defaultValue) => ({
+    configurable: true,
+    enumerable: true,
+    get() {
+        const value = this.getAttribute(attrName);
+        if (value === null)
+            return defaultValue;
+        // spellcheck=false => false, everything else => true
+        // draggable=true => true, everything else => false
+        return value.toLowerCase() === String(defaultValue) ? defaultValue : !defaultValue;
+    },
+    set(newValue) {
+        const currentValue = this.getAttribute(attrName);
+        const normalizedValue = String(Boolean(newValue));
+        if (normalizedValue !== currentValue) {
+            this.setAttribute(attrName, normalizedValue);
+        }
+    },
+});
+/**
+ * Descriptor for a "true" boolean attribute that checks solely for presence, e.g. `hidden`.
+ */
+const booleanAttributeDescriptor = (attrName) => ({
+    configurable: true,
+    enumerable: true,
+    get() {
+        return this.hasAttribute(attrName);
+    },
+    set(newValue) {
+        const hasAttribute = this.hasAttribute(attrName);
+        if (newValue) {
+            if (!hasAttribute) {
+                this.setAttribute(attrName, '');
+            }
+        }
+        else {
+            if (hasAttribute) {
+                this.removeAttribute(attrName);
+            }
+        }
+    },
+});
+/**
+ * Descriptor for ARIA reflections, e.g. `ariaLabel` and `role`.
+ */
+const ariaDescriptor = (attrName) => ({
+    configurable: true,
+    enumerable: true,
+    get() {
+        return this.getAttribute(attrName);
+    },
+    set(newValue) {
+        const currentValue = this.getAttribute(attrName);
+        if (newValue !== currentValue) {
+            // TODO [#3284]: According to the spec, IDL nullable type values
+            // (null and undefined) should remove the attribute; however, we
+            // only do so in the case of null for historical reasons.
+            if (isNull(newValue)) {
+                this.removeAttribute(attrName);
+            }
+            else {
+                this.setAttribute(attrName, toString$1(newValue));
+            }
+        }
+    },
+});
+const tabIndexDescriptor = () => ({
+    configurable: true,
+    enumerable: true,
+    get() {
+        const str = this.getAttribute('tabindex');
+        const num = Number(str);
+        return isFinite(num) ? Math.trunc(num) : -1;
+    },
+    set(newValue) {
+        const currentValue = this.getAttribute('tabindex');
+        const num = Number(newValue);
+        const normalizedValue = isFinite(num) ? String(Math.trunc(num)) : '0';
+        if (normalizedValue !== currentValue) {
+            this.setAttribute('tabindex', toString$1(newValue));
+        }
+    },
+});
+const descriptors = {
+    accessKey: stringDescriptor('accesskey'),
+    dir: stringDescriptor('dir'),
+    draggable: explicitBooleanDescriptor('draggable', true),
+    hidden: booleanAttributeDescriptor('hidden'),
+    id: stringDescriptor('id'),
+    lang: stringDescriptor('lang'),
+    spellcheck: explicitBooleanDescriptor('spellcheck', false),
+    tabIndex: tabIndexDescriptor(),
+    title: stringDescriptor('title'),
+};
+// Add descriptors for ARIA attributes
+for (const [attrName, propName] of entries(AriaAttrNameToPropNameMap)) {
+    descriptors[propName] = ariaDescriptor(attrName);
+}
+
 /*
  * Copyright (c) 2018, salesforce.com, inc.
  * All rights reserved.
@@ -2085,7 +2208,7 @@ if (process.env.IS_BROWSER) {
 else {
     // On the server, we cannot use createBridgeToElementDescriptor because getAttribute/setAttribute are
     // not supported on HTMLElement. So apply the polyfill directly on top of LightningElement
-    defineProperties(LightningElement.prototype, ariaReflectionPolyfillDescriptors);
+    defineProperties(LightningElement.prototype, descriptors);
 }
 defineProperties(LightningElement.prototype, lightningBasedDescriptors);
 defineProperty(LightningElement, 'CustomElementConstructor', {
@@ -3160,7 +3283,13 @@ function updateStylesheetToken(vm, template, legacy) {
     // Set the new styling token on the host element
     if (!isUndefined$1(newToken)) {
         if (hasScopedStyles) {
-            getClassList(elm).add(makeHostToken(newToken));
+            const hostScopeTokenClass = makeHostToken(newToken);
+            getClassList(elm).add(hostScopeTokenClass);
+            if (!process.env.IS_BROWSER) {
+                // This is only used in SSR to communicate to hydration that
+                // this class should be treated specially for purposes of hydration mismatches.
+                setAttribute(elm, 'data-lwc-host-scope-token', hostScopeTokenClass);
+            }
             newHasTokenInClass = true;
         }
         if (isSyntheticShadow) {
@@ -3297,21 +3426,6 @@ function getScopeTokenClass(owner, legacy) {
         (legacy ? cmpTemplate?.legacyStylesheetToken : cmpTemplate?.stylesheetToken)) ||
         null);
 }
-/**
- * This function returns the host style token for a custom element if it
- * exists. Otherwise it returns null.
- *
- * A host style token is applied to the component if scoped styles are used.
- * @param vnode
- */
-function getStylesheetTokenHost(vnode) {
-    const { template } = getComponentInternalDef(vnode.ctor);
-    const { vm } = vnode;
-    const { stylesheetToken } = template;
-    return !isUndefined$1(stylesheetToken) && computeHasScopedStyles(template, vm)
-        ? makeHostToken(stylesheetToken)
-        : null;
-}
 function getNearestNativeShadowComponent(vm) {
     const owner = getNearestShadowComponent(vm);
     if (!isNull(owner) && owner.shadowMode === 1 /* ShadowMode.Synthetic */) {
@@ -3849,7 +3963,6 @@ function getComponentHtmlPrototype(Ctor) {
     return def.bridge;
 }
 const lightingElementDef = {
-    ctor: LightningElement,
     name: LightningElement.name,
     props: lightningBasedDescriptors,
     propsConfig: EmptyObject,
@@ -5759,7 +5872,7 @@ 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$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.
@@ -7595,7 +7708,7 @@ function hydrateRoot(vm) {
     runConnectedCallback(vm);
     hydrateVM(vm);
     if (hasMismatch && process.env.NODE_ENV !== 'production') {
-        logError('Hydration completed with errors.', vm);
+        logWarn('Hydration completed with errors.', vm);
     }
 }
 function hydrateVM(vm) {
@@ -7850,7 +7963,7 @@ expectAddlSiblings) {
                 if (process.env.NODE_ENV !== 'production') {
                     if (!hasWarned) {
                         hasWarned = true;
-                        logError(`Hydration mismatch: incorrect number of rendered nodes. Client produced more nodes than the server.`, owner);
+                        logWarn(`Hydration mismatch: incorrect number of rendered nodes. Client produced more nodes than the server.`, owner);
                     }
                 }
                 mount(childVnode, parentNode, renderer, nextNode);
@@ -7872,7 +7985,7 @@ expectAddlSiblings) {
         hasMismatch = true;
         if (process.env.NODE_ENV !== 'production') {
             if (!hasWarned) {
-                logError(`Hydration mismatch: incorrect number of rendered nodes. Server rendered more nodes than the client.`, owner);
+                logWarn(`Hydration mismatch: incorrect number of rendered nodes. Server rendered more nodes than the client.`, owner);
             }
         }
         // nextSibling is mostly harmless, and since we don't have
@@ -7905,7 +8018,7 @@ function hasCorrectNodeType(vnode, node, nodeType, renderer) {
     const { getProperty } = renderer;
     if (getProperty(node, 'nodeType') !== nodeType) {
         if (process.env.NODE_ENV !== 'production') {
-            logError('Hydration mismatch: incorrect node type received', vnode.owner);
+            logWarn('Hydration mismatch: incorrect node type received', vnode.owner);
         }
         return false;
     }
@@ -7915,7 +8028,7 @@ function isMatchingElement(vnode, elm, renderer, shouldValidateAttr = () => true
     const { getProperty } = renderer;
     if (vnode.sel.toLowerCase() !== getProperty(elm, 'tagName').toLowerCase()) {
         if (process.env.NODE_ENV !== 'production') {
-            logError(`Hydration mismatch: expecting element with tag "${vnode.sel.toLowerCase()}" but found "${getProperty(elm, 'tagName').toLowerCase()}".`, vnode.owner);
+            logWarn(`Hydration mismatch: expecting element with tag "${vnode.sel.toLowerCase()}" but found "${getProperty(elm, 'tagName').toLowerCase()}".`, vnode.owner);
         }
         return false;
     }
@@ -7956,7 +8069,7 @@ function validateAttrs(vnode, elm, data, renderer, shouldValidateAttr) {
         if (!attributeValuesAreEqual(attrValue, elmAttrValue)) {
             if (process.env.NODE_ENV !== 'production') {
                 const { getProperty } = renderer;
-                logError(`Mismatch hydrating element <${getProperty(elm, 'tagName').toLowerCase()}>: attribute "${attrName}" has different values, expected "${attrValue}" but found ${isNull(elmAttrValue) ? 'null' : `"${elmAttrValue}"`}`, vnode.owner);
+                logWarn(`Mismatch hydrating element <${getProperty(elm, 'tagName').toLowerCase()}>: attribute "${attrName}" has different values, expected "${attrValue}" but found ${isNull(elmAttrValue) ? 'null' : `"${elmAttrValue}"`}`, vnode.owner);
             }
             nodesAreCompatible = false;
         }
@@ -7967,78 +8080,63 @@ function validateClassAttr(vnode, elm, data, renderer) {
     const { owner } = vnode;
     // classMap is never available on VStaticPartData so it can default to undefined
     // casting to prevent TS error.
-    let { className, classMap } = data;
-    const { getProperty, getClassList, getAttribute } = renderer;
+    const { className, classMap } = data;
+    const { getProperty } = 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));
+    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));
+    }
+    else if (!isUndefined$1(classMap)) {
+        vnodeClasses = new Set(keys(classMap));
+    }
+    else {
+        vnodeClasses = new Set();
+    }
+    // ---------- Step 2: handle the scope tokens
     // we don't care about legacy for hydration. it's a new use case
-    const scopedToken = getScopeTokenClass(owner, /* legacy */ false);
-    const stylesheetTokenHost = isVCustomElement(vnode) ? getStylesheetTokenHost(vnode) : null;
+    const scopeToken = getScopeTokenClass(owner, /* legacy */ false);
     // Classnames for scoped CSS are added directly to the DOM during rendering,
     // or to the VDOM on the server in the case of SSR. As such, these classnames
     // are never present in VDOM nodes in the browser.
     //
     // Consequently, hydration mismatches will occur if scoped CSS token classnames
     // are rendered during SSR. This needs to be accounted for when validating.
-    if (!isNull(scopedToken) || !isNull(stylesheetTokenHost)) {
-        if (!isUndefined$1(className)) {
-            // The order of the className should be scopedToken className stylesheetTokenHost
-            const classTokens = [scopedToken, className, stylesheetTokenHost];
-            const classNames = ArrayFilter.call(classTokens, (token) => !isNull(token));
-            className = ArrayJoin.call(classNames, ' ');
-        }
-        else if (!isUndefined$1(classMap)) {
-            classMap = {
-                ...classMap,
-                ...(!isNull(scopedToken) ? { [scopedToken]: true } : {}),
-                ...(!isNull(stylesheetTokenHost) ? { [stylesheetTokenHost]: true } : {}),
-            };
-        }
-        else {
-            // The order of the className should be scopedToken stylesheetTokenHost
-            const classTokens = [scopedToken, stylesheetTokenHost];
-            const classNames = ArrayFilter.call(classTokens, (token) => !isNull(token));
-            if (classNames.length) {
-                className = ArrayJoin.call(classNames, ' ');
-            }
-        }
+    if (!isNull(scopeToken)) {
+        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.
+    // TODO [#4866]: correctly validate the host scope token class
+    const elmHostScopeToken = renderer.getAttribute(elm, 'data-lwc-host-scope-token');
+    if (!isNull(elmHostScopeToken)) {
+        elmClasses.delete(elmHostScopeToken);
+        vnodeClasses.delete(elmHostScopeToken);
     }
+    // ---------- Step 3: check for compatibility
     let nodesAreCompatible = true;
-    let readableVnodeClassname;
-    const elmClassName = getAttribute(elm, 'class');
-    if (!isUndefined$1(className) &&
-        String(className) !== elmClassName &&
-        // No mismatch if SSR `class` attribute is missing and CSR `class` is the empty string
-        !(className === '' && isNull(elmClassName))) {
-        // className is used when class is bound to an expr.
+    if (vnodeClasses.size !== elmClasses.size) {
         nodesAreCompatible = false;
-        // stringify for pretty-printing
-        readableVnodeClassname = JSON.stringify(className);
     }
-    else if (!isUndefined$1(classMap)) {
-        // classMap is used when class is set to static value.
-        const classList = getClassList(elm);
-        let computedClassName = '';
-        // all classes from the vnode should be in the element.classList
-        for (const name in classMap) {
-            computedClassName += ' ' + name;
-            if (!classList.contains(name)) {
+    else {
+        for (const vnodeClass of vnodeClasses) {
+            if (!elmClasses.has(vnodeClass)) {
                 nodesAreCompatible = false;
             }
         }
-        // stringify for pretty-printing
-        readableVnodeClassname = JSON.stringify(computedClassName.trim());
-        if (classList.length > keys(classMap).length) {
-            nodesAreCompatible = false;
+        for (const elmClass of elmClasses) {
+            if (!vnodeClasses.has(elmClass)) {
+                nodesAreCompatible = false;
+            }
         }
     }
-    else if (isUndefined$1(className) && !isNull(elmClassName)) {
-        // SSR contains a className but client-side VDOM does not
-        nodesAreCompatible = false;
-        readableVnodeClassname = '""';
-    }
-    if (!nodesAreCompatible) {
-        if (process.env.NODE_ENV !== 'production') {
-            logError(`Mismatch hydrating element <${getProperty(elm, 'tagName').toLowerCase()}>: attribute "class" has different values, expected ${readableVnodeClassname} but found ${JSON.stringify(elmClassName)}`, vnode.owner);
-        }
+    if (process.env.NODE_ENV !== 'production' && !nodesAreCompatible) {
+        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;
 }
@@ -8079,7 +8177,7 @@ function validateStyleAttr(vnode, elm, data, renderer) {
     if (!nodesAreCompatible) {
         if (process.env.NODE_ENV !== 'production') {
             const { getProperty } = renderer;
-            logError(`Mismatch hydrating element <${getProperty(elm, 'tagName').toLowerCase()}>: attribute "style" has different values, expected "${vnodeStyle}" but found "${elmStyle}".`, vnode.owner);
+            logWarn(`Mismatch hydrating element <${getProperty(elm, 'tagName').toLowerCase()}>: attribute "style" has different values, expected "${vnodeStyle}" but found "${elmStyle}".`, vnode.owner);
         }
     }
     return nodesAreCompatible;
@@ -8105,7 +8203,7 @@ function areCompatibleStaticNodes(client, ssr, vnode, renderer) {
     let isCompatibleElements = true;
     if (getProperty(client, 'tagName') !== getProperty(ssr, 'tagName')) {
         if (process.env.NODE_ENV !== 'production') {
-            logError(`Hydration mismatch: expecting element with tag "${getProperty(client, 'tagName').toLowerCase()}" but found "${getProperty(ssr, 'tagName').toLowerCase()}".`, owner);
+            logWarn(`Hydration mismatch: expecting element with tag "${getProperty(client, 'tagName').toLowerCase()}" but found "${getProperty(ssr, 'tagName').toLowerCase()}".`, owner);
         }
         return false;
     }
@@ -8118,7 +8216,7 @@ function areCompatibleStaticNodes(client, ssr, vnode, renderer) {
             // partId === 0 will always refer to the root element, this is guaranteed by the compiler.
             if (parts?.[0].partId !== 0) {
                 if (process.env.NODE_ENV !== 'production') {
-                    logError(`Mismatch hydrating element <${getProperty(client, 'tagName').toLowerCase()}>: attribute "${attrName}" has different values, expected "${getAttribute(client, attrName)}" but found "${getAttribute(ssr, attrName)}"`, owner);
+                    logWarn(`Mismatch hydrating element <${getProperty(client, 'tagName').toLowerCase()}>: attribute "${attrName}" has different values, expected "${getAttribute(client, attrName)}" but found "${getAttribute(ssr, attrName)}"`, owner);
                 }
                 isCompatibleElements = false;
             }
@@ -8429,5 +8527,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.7.0 */
+/** version: 8.9.0 */
 //# sourceMappingURL=index.js.map