@lwc/engine-core 8.8.0 → 8.10.0-alpha.0

package/dist/index.cjs.js

@@ -685,6 +685,129 @@ for (const [propName, attrName] of shared.entries(shared.AriaPropNameToAttrNameM
     }
 }
 
+/*
+ * 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 (shared.isNull(newValue)) {
+                this.removeAttribute(attrName);
+            }
+            else {
+                this.setAttribute(attrName, shared.toString(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', shared.toString(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 shared.entries(shared.AriaAttrNameToPropNameMap)) {
+    descriptors[propName] = ariaDescriptor(attrName);
+}
+
 /*
  * Copyright (c) 2018, salesforce.com, inc.
  * All rights reserved.
@@ -948,6 +1071,12 @@ function patchCustomElementWithRestrictions(elm) {
     shared.setPrototypeOf(elm, shared.create(elmProto, restrictionsDescriptors));
 }
 
+/*
+ * Copyright (c) 2018, 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
+ */
 function updateComponentValue(vm, key, newValue) {
     const { cmpFields } = vm;
     if (newValue !== cmpFields[key]) {
@@ -2088,7 +2217,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
-    shared.defineProperties(LightningElement.prototype, ariaReflectionPolyfillDescriptors);
+    shared.defineProperties(LightningElement.prototype, descriptors);
 }
 shared.defineProperties(LightningElement.prototype, lightningBasedDescriptors);
 shared.defineProperty(LightningElement, 'CustomElementConstructor', {
@@ -2099,6 +2228,12 @@ shared.defineProperty(LightningElement, 'CustomElementConstructor', {
     configurable: true,
 });
 
+/*
+ * Copyright (c) 2018, 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
+ */
 function createObservedFieldPropertyDescriptor(key) {
     return {
         get() {
@@ -2832,6 +2967,12 @@ function checkVersionMismatch(func, type) {
     }
 }
 
+/*
+ * Copyright (c) 2018, 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 signedTemplateSet = new Set();
 function defaultEmptyTemplate() {
     return [];
@@ -3163,7 +3304,13 @@ function updateStylesheetToken(vm, template, legacy) {
     // Set the new styling token on the host element
     if (!shared.isUndefined(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) {
@@ -3300,21 +3447,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 !shared.isUndefined(stylesheetToken) && computeHasScopedStyles(template, vm)
-        ? makeHostToken(stylesheetToken)
-        : null;
-}
 function getNearestNativeShadowComponent(vm) {
     const owner = getNearestShadowComponent(vm);
     if (!shared.isNull(owner) && owner.shadowMode === 1 /* ShadowMode.Synthetic */) {
@@ -3852,7 +3984,6 @@ function getComponentHtmlPrototype(Ctor) {
     return def.bridge;
 }
 const lightingElementDef = {
-    ctor: LightningElement,
     name: LightningElement.name,
     props: lightningBasedDescriptors,
     propsConfig: EmptyObject,
@@ -5762,7 +5893,7 @@ function dc(Ctor, data, children = EmptyArray) {
         return null;
     }
     if (!isComponentConstructor(Ctor)) {
-        throw new Error(`Invalid constructor ${shared.toString(Ctor)} is not a LightningElement constructor.`);
+        throw new Error(`Invalid constructor: "${shared.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.
@@ -7598,7 +7729,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) {
@@ -7853,7 +7984,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);
@@ -7875,7 +8006,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
@@ -7908,7 +8039,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;
     }
@@ -7918,7 +8049,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;
     }
@@ -7959,7 +8090,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 ${shared.isNull(elmAttrValue) ? 'null' : `"${elmAttrValue}"`}`, vnode.owner);
+                logWarn(`Mismatch hydrating element <${getProperty(elm, 'tagName').toLowerCase()}>: attribute "${attrName}" has different values, expected "${attrValue}" but found ${shared.isNull(elmAttrValue) ? 'null' : `"${elmAttrValue}"`}`, vnode.owner);
             }
             nodesAreCompatible = false;
         }
@@ -7970,78 +8101,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(shared.ArrayFrom(elm.classList));
+    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));
+    }
+    else if (!shared.isUndefined(classMap)) {
+        vnodeClasses = new Set(shared.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 (!shared.isNull(scopedToken) || !shared.isNull(stylesheetTokenHost)) {
-        if (!shared.isUndefined(className)) {
-            // The order of the className should be scopedToken className stylesheetTokenHost
-            const classTokens = [scopedToken, className, stylesheetTokenHost];
-            const classNames = shared.ArrayFilter.call(classTokens, (token) => !shared.isNull(token));
-            className = shared.ArrayJoin.call(classNames, ' ');
-        }
-        else if (!shared.isUndefined(classMap)) {
-            classMap = {
-                ...classMap,
-                ...(!shared.isNull(scopedToken) ? { [scopedToken]: true } : {}),
-                ...(!shared.isNull(stylesheetTokenHost) ? { [stylesheetTokenHost]: true } : {}),
-            };
-        }
-        else {
-            // The order of the className should be scopedToken stylesheetTokenHost
-            const classTokens = [scopedToken, stylesheetTokenHost];
-            const classNames = shared.ArrayFilter.call(classTokens, (token) => !shared.isNull(token));
-            if (classNames.length) {
-                className = shared.ArrayJoin.call(classNames, ' ');
-            }
-        }
+    if (!shared.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 (!shared.isNull(elmHostScopeToken)) {
+        elmClasses.delete(elmHostScopeToken);
+        vnodeClasses.delete(elmHostScopeToken);
+    }
+    // ---------- Step 3: check for compatibility
     let nodesAreCompatible = true;
-    let readableVnodeClassname;
-    const elmClassName = getAttribute(elm, 'class');
-    if (!shared.isUndefined(className) &&
-        String(className) !== elmClassName &&
-        // No mismatch if SSR `class` attribute is missing and CSR `class` is the empty string
-        !(className === '' && shared.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 (!shared.isUndefined(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 > shared.keys(classMap).length) {
-            nodesAreCompatible = false;
+        for (const elmClass of elmClasses) {
+            if (!vnodeClasses.has(elmClass)) {
+                nodesAreCompatible = false;
+            }
         }
     }
-    else if (shared.isUndefined(className) && !shared.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(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;
 }
@@ -8082,7 +8198,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;
@@ -8108,7 +8224,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;
     }
@@ -8121,7 +8237,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;
             }
@@ -8482,5 +8598,5 @@ exports.swapTemplate = swapTemplate;
 exports.track = track;
 exports.unwrap = unwrap;
 exports.wire = wire;
-/** version: 8.8.0 */
+/** version: 8.10.0-alpha.0 */
 //# sourceMappingURL=index.cjs.js.map