@lwc/engine-core 2.37.1 → 2.37.3

package/dist/engine-core.cjs.js

@@ -2522,7 +2522,7 @@ function checkVersionMismatch(func, type) {
             // stylesheets and templates do not have user-meaningful names, but components do
             const friendlyName = type === 'component' ? `${type} ${func.name}` : type;
             logError(`LWC WARNING: current engine is v${shared.LWC_VERSION}, but ${friendlyName} was compiled with v${version}.\nPlease update your compiled code or LWC engine so that the versions match.\nNo further warnings will appear.`);
-            report(1 /* ReportingEventId.CompilerRuntimeVersionMismatch */, {
+            report("CompilerRuntimeVersionMismatch" /* ReportingEventId.CompilerRuntimeVersionMismatch */, {
                 compilerVersion: version,
                 runtimeVersion: shared.LWC_VERSION,
             });
@@ -5884,7 +5884,7 @@ function reportViolation$1(source, target, attrName) {
         // vm should never be undefined here, but just to be safe, bail out and don't report
         return;
     }
-    report(0 /* ReportingEventId.CrossRootAriaInSyntheticShadow */, {
+    report("CrossRootAriaInSyntheticShadow" /* ReportingEventId.CrossRootAriaInSyntheticShadow */, {
         tagName: vm.tagName,
         attributeName: attrName,
     });
@@ -6064,7 +6064,7 @@ function checkAndReportViolation(elm, prop, isSetter, setValue) {
             // https://github.com/salesforce/lwc/issues/3284
             setValueType = shared.isNull(setValue) ? 'null' : typeof setValue;
         }
-        report(2 /* ReportingEventId.NonStandardAriaReflection */, {
+        report("NonStandardAriaReflection" /* ReportingEventId.NonStandardAriaReflection */, {
             tagName: vm === null || vm === void 0 ? void 0 : vm.tagName,
             propertyName: prop,
             isSetter,
@@ -6231,15 +6231,44 @@ function hydrateNode(node, vnode, renderer) {
     return renderer.nextSibling(hydratedNode);
 }
 const NODE_VALUE_PROP = 'nodeValue';
+const PARENT_NODE_PROP = 'parentNode';
+const TAG_NAME_PROP = 'tagName';
+function textNodeContentsAreEqual(node, vnode, renderer) {
+    const { getProperty } = renderer;
+    const nodeValue = getProperty(node, NODE_VALUE_PROP);
+    if (nodeValue === vnode.text) {
+        return true;
+    }
+    // Special case for empty text nodes – these are serialized differently on the server
+    // See https://github.com/salesforce/lwc/pull/2656
+    if (nodeValue === '\u200D' && vnode.text === '') {
+        return true;
+    }
+    // Special case for text nodes inside `<style>` tags – these are escaped when rendered server-size,
+    // but not when generated by the engine client-side.
+    const parentNode = getProperty(node, PARENT_NODE_PROP);
+    // Should never be null, but just to be safe, we check.
+    /* istanbul ignore else */
+    if (!shared.isNull(parentNode)) {
+        const tagName = getProperty(parentNode, TAG_NAME_PROP);
+        // If the tagName is STYLE, then the following condition should always be true.
+        // The LWC compiler blocks using `<style>`s inside of templates, so it should be impossible
+        // for component authors to render different `<style>` text content on the client and server.
+        // But just to be safe, we check.
+        /* istanbul ignore next */
+        if (tagName === 'STYLE' && shared.htmlEscape(vnode.text) === nodeValue) {
+            return true;
+        }
+    }
+    return false;
+}
 function hydrateText(node, vnode, renderer) {
     var _a;
     if (!hasCorrectNodeType(vnode, node, 3 /* EnvNodeTypes.TEXT */, renderer)) {
         return handleMismatch(node, vnode, renderer);
     }
     if (process.env.NODE_ENV !== 'production') {
-        const { getProperty } = renderer;
-        const nodeValue = getProperty(node, NODE_VALUE_PROP);
-        if (nodeValue !== vnode.text && !(nodeValue === '\u200D' && vnode.text === '')) {
+        if (!textNodeContentsAreEqual(node, vnode, renderer)) {
             logWarn('Hydration mismatch: text values do not match, will recover from the difference', vnode.owner);
         }
     }
@@ -6419,6 +6448,19 @@ function isMatchingElement(vnode, elm, renderer) {
     const hasIncompatibleStyle = validateStyleAttr(vnode, elm, renderer);
     return hasIncompatibleAttrs && hasIncompatibleClass && hasIncompatibleStyle;
 }
+function attributeValuesAreEqual(vnodeValue, value) {
+    const vnodeValueAsString = String(vnodeValue);
+    if (vnodeValueAsString === value) {
+        return true;
+    }
+    // If the expected value is null, this means that the attribute does not exist. In that case,
+    // we accept any nullish value (undefined or null).
+    if (shared.isNull(value) && (shared.isUndefined(vnodeValue) || shared.isNull(vnodeValue))) {
+        return true;
+    }
+    // In all other cases, the two values are not considered equal
+    return false;
+}
 function validateAttrs(vnode, elm, renderer) {
     const { data: { attrs = {} }, } = vnode;
     let nodesAreCompatible = true;
@@ -6428,10 +6470,10 @@ function validateAttrs(vnode, elm, renderer) {
         const { owner } = vnode;
         const { getAttribute } = renderer;
         const elmAttrValue = getAttribute(elm, attrName);
-        if (String(attrValue) !== elmAttrValue) {
+        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 "${elmAttrValue}"`, owner);
+                logError(`Mismatch hydrating element <${getProperty(elm, 'tagName').toLowerCase()}>: attribute "${attrName}" has different values, expected "${attrValue}" but found ${shared.isNull(elmAttrValue) ? 'null' : `"${elmAttrValue}"`}`, owner);
             }
             nodesAreCompatible = false;
         }
@@ -6650,10 +6692,10 @@ function reportViolation(type, eventId, prop) {
     report(eventId, { propertyName: prop });
 }
 function reportTemplateViolation(prop) {
-    reportViolation('template', 3 /* ReportingEventId.TemplateMutation */, prop);
+    reportViolation('template', "TemplateMutation" /* ReportingEventId.TemplateMutation */, prop);
 }
 function reportStylesheetViolation(prop) {
-    reportViolation('stylesheet', 4 /* ReportingEventId.StylesheetMutation */, prop);
+    reportViolation('stylesheet', "StylesheetMutation" /* ReportingEventId.StylesheetMutation */, prop);
 }
 // Warn if the user tries to mutate a stylesheets array, e.g.:
 // `tmpl.stylesheets.push(someStylesheetFunction)`
@@ -6864,4 +6906,4 @@ exports.swapTemplate = swapTemplate;
 exports.track = track;
 exports.unwrap = unwrap;
 exports.wire = wire;
-/* version: 2.37.1 */
+/* version: 2.37.3 */

package/dist/engine-core.js

@@ -1,5 +1,5 @@
 /* proxy-compat-disable */
-import { noop, StringToLowerCase, isNull, ArrayPush as ArrayPush$1, ArrayJoin, isFrozen, isUndefined as isUndefined$1, defineProperty, ArrayIndexOf, ArraySplice, create, seal, isArray as isArray$1, isFunction as isFunction$1, keys, hasOwnProperty as hasOwnProperty$1, forEach, AriaPropNameToAttrNameMap, getPropertyDescriptor, defineProperties, getOwnPropertyNames as getOwnPropertyNames$1, getPrototypeOf as getPrototypeOf$1, setPrototypeOf, assign, isObject, assert, freeze, KEY__SYNTHETIC_MODE, toString as toString$1, getOwnPropertyDescriptor as getOwnPropertyDescriptor$1, isFalse, LWC_VERSION_COMMENT_REGEX, LWC_VERSION, htmlPropertyToAttribute, ArraySlice, ArrayMap, KEY__SCOPED_CSS, StringCharCodeAt, XML_NAMESPACE, XLINK_NAMESPACE, htmlAttributeToProperty, isString, StringSlice, isTrue, SVG_NAMESPACE, KEY__SHADOW_STATIC, KEY__SHADOW_RESOLVER, ArraySome, ArrayPop, isNumber, StringReplace, ArrayUnshift, globalThis as globalThis$1, KEY__NATIVE_GET_ELEMENT_BY_ID, KEY__NATIVE_QUERY_SELECTOR_ALL, ID_REFERENCING_ATTRIBUTES_SET, KEY__SHADOW_TOKEN, ArrayFilter, StringSplit, ArrayCopyWithin, ArrayFill, ArraySort, ArrayReverse, ArrayShift } from '@lwc/shared';
+import { noop, StringToLowerCase, isNull, ArrayPush as ArrayPush$1, ArrayJoin, isFrozen, isUndefined as isUndefined$1, defineProperty, ArrayIndexOf, ArraySplice, create, seal, isArray as isArray$1, isFunction as isFunction$1, keys, hasOwnProperty as hasOwnProperty$1, forEach, AriaPropNameToAttrNameMap, getPropertyDescriptor, defineProperties, getOwnPropertyNames as getOwnPropertyNames$1, getPrototypeOf as getPrototypeOf$1, setPrototypeOf, assign, isObject, assert, freeze, KEY__SYNTHETIC_MODE, toString as toString$1, getOwnPropertyDescriptor as getOwnPropertyDescriptor$1, isFalse, LWC_VERSION_COMMENT_REGEX, LWC_VERSION, htmlPropertyToAttribute, ArraySlice, ArrayMap, KEY__SCOPED_CSS, StringCharCodeAt, XML_NAMESPACE, XLINK_NAMESPACE, htmlAttributeToProperty, isString, StringSlice, isTrue, SVG_NAMESPACE, KEY__SHADOW_STATIC, KEY__SHADOW_RESOLVER, ArraySome, ArrayPop, isNumber, StringReplace, ArrayUnshift, globalThis as globalThis$1, KEY__NATIVE_GET_ELEMENT_BY_ID, KEY__NATIVE_QUERY_SELECTOR_ALL, ID_REFERENCING_ATTRIBUTES_SET, KEY__SHADOW_TOKEN, ArrayFilter, StringSplit, htmlEscape, ArrayCopyWithin, ArrayFill, ArraySort, ArrayReverse, ArrayShift } from '@lwc/shared';
 import { applyAriaReflection } from '@lwc/aria-reflection';
 export { setFeatureFlag, setFeatureFlagForTest } from '@lwc/features';
 
@@ -2520,7 +2520,7 @@ function checkVersionMismatch(func, type) {
             // stylesheets and templates do not have user-meaningful names, but components do
             const friendlyName = type === 'component' ? `${type} ${func.name}` : type;
             logError(`LWC WARNING: current engine is v${LWC_VERSION}, but ${friendlyName} was compiled with v${version}.\nPlease update your compiled code or LWC engine so that the versions match.\nNo further warnings will appear.`);
-            report(1 /* ReportingEventId.CompilerRuntimeVersionMismatch */, {
+            report("CompilerRuntimeVersionMismatch" /* ReportingEventId.CompilerRuntimeVersionMismatch */, {
                 compilerVersion: version,
                 runtimeVersion: LWC_VERSION,
             });
@@ -5882,7 +5882,7 @@ function reportViolation$1(source, target, attrName) {
         // vm should never be undefined here, but just to be safe, bail out and don't report
         return;
     }
-    report(0 /* ReportingEventId.CrossRootAriaInSyntheticShadow */, {
+    report("CrossRootAriaInSyntheticShadow" /* ReportingEventId.CrossRootAriaInSyntheticShadow */, {
         tagName: vm.tagName,
         attributeName: attrName,
     });
@@ -6062,7 +6062,7 @@ function checkAndReportViolation(elm, prop, isSetter, setValue) {
             // https://github.com/salesforce/lwc/issues/3284
             setValueType = isNull(setValue) ? 'null' : typeof setValue;
         }
-        report(2 /* ReportingEventId.NonStandardAriaReflection */, {
+        report("NonStandardAriaReflection" /* ReportingEventId.NonStandardAriaReflection */, {
             tagName: vm === null || vm === void 0 ? void 0 : vm.tagName,
             propertyName: prop,
             isSetter,
@@ -6229,15 +6229,44 @@ function hydrateNode(node, vnode, renderer) {
     return renderer.nextSibling(hydratedNode);
 }
 const NODE_VALUE_PROP = 'nodeValue';
+const PARENT_NODE_PROP = 'parentNode';
+const TAG_NAME_PROP = 'tagName';
+function textNodeContentsAreEqual(node, vnode, renderer) {
+    const { getProperty } = renderer;
+    const nodeValue = getProperty(node, NODE_VALUE_PROP);
+    if (nodeValue === vnode.text) {
+        return true;
+    }
+    // Special case for empty text nodes – these are serialized differently on the server
+    // See https://github.com/salesforce/lwc/pull/2656
+    if (nodeValue === '\u200D' && vnode.text === '') {
+        return true;
+    }
+    // Special case for text nodes inside `<style>` tags – these are escaped when rendered server-size,
+    // but not when generated by the engine client-side.
+    const parentNode = getProperty(node, PARENT_NODE_PROP);
+    // Should never be null, but just to be safe, we check.
+    /* istanbul ignore else */
+    if (!isNull(parentNode)) {
+        const tagName = getProperty(parentNode, TAG_NAME_PROP);
+        // If the tagName is STYLE, then the following condition should always be true.
+        // The LWC compiler blocks using `<style>`s inside of templates, so it should be impossible
+        // for component authors to render different `<style>` text content on the client and server.
+        // But just to be safe, we check.
+        /* istanbul ignore next */
+        if (tagName === 'STYLE' && htmlEscape(vnode.text) === nodeValue) {
+            return true;
+        }
+    }
+    return false;
+}
 function hydrateText(node, vnode, renderer) {
     var _a;
     if (!hasCorrectNodeType(vnode, node, 3 /* EnvNodeTypes.TEXT */, renderer)) {
         return handleMismatch(node, vnode, renderer);
     }
     if (process.env.NODE_ENV !== 'production') {
-        const { getProperty } = renderer;
-        const nodeValue = getProperty(node, NODE_VALUE_PROP);
-        if (nodeValue !== vnode.text && !(nodeValue === '\u200D' && vnode.text === '')) {
+        if (!textNodeContentsAreEqual(node, vnode, renderer)) {
             logWarn('Hydration mismatch: text values do not match, will recover from the difference', vnode.owner);
         }
     }
@@ -6417,6 +6446,19 @@ function isMatchingElement(vnode, elm, renderer) {
     const hasIncompatibleStyle = validateStyleAttr(vnode, elm, renderer);
     return hasIncompatibleAttrs && hasIncompatibleClass && hasIncompatibleStyle;
 }
+function attributeValuesAreEqual(vnodeValue, value) {
+    const vnodeValueAsString = String(vnodeValue);
+    if (vnodeValueAsString === value) {
+        return true;
+    }
+    // If the expected value is null, this means that the attribute does not exist. In that case,
+    // we accept any nullish value (undefined or null).
+    if (isNull(value) && (isUndefined$1(vnodeValue) || isNull(vnodeValue))) {
+        return true;
+    }
+    // In all other cases, the two values are not considered equal
+    return false;
+}
 function validateAttrs(vnode, elm, renderer) {
     const { data: { attrs = {} }, } = vnode;
     let nodesAreCompatible = true;
@@ -6426,10 +6468,10 @@ function validateAttrs(vnode, elm, renderer) {
         const { owner } = vnode;
         const { getAttribute } = renderer;
         const elmAttrValue = getAttribute(elm, attrName);
-        if (String(attrValue) !== elmAttrValue) {
+        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 "${elmAttrValue}"`, owner);
+                logError(`Mismatch hydrating element <${getProperty(elm, 'tagName').toLowerCase()}>: attribute "${attrName}" has different values, expected "${attrValue}" but found ${isNull(elmAttrValue) ? 'null' : `"${elmAttrValue}"`}`, owner);
             }
             nodesAreCompatible = false;
         }
@@ -6648,10 +6690,10 @@ function reportViolation(type, eventId, prop) {
     report(eventId, { propertyName: prop });
 }
 function reportTemplateViolation(prop) {
-    reportViolation('template', 3 /* ReportingEventId.TemplateMutation */, prop);
+    reportViolation('template', "TemplateMutation" /* ReportingEventId.TemplateMutation */, prop);
 }
 function reportStylesheetViolation(prop) {
-    reportViolation('stylesheet', 4 /* ReportingEventId.StylesheetMutation */, prop);
+    reportViolation('stylesheet', "StylesheetMutation" /* ReportingEventId.StylesheetMutation */, prop);
 }
 // Warn if the user tries to mutate a stylesheets array, e.g.:
 // `tmpl.stylesheets.push(someStylesheetFunction)`
@@ -6825,4 +6867,4 @@ function getComponentConstructor(elm) {
 }
 
 export { LightningElement, profilerControl as __unstable__ProfilerControl, reportingControl as __unstable__ReportingControl, api$1 as api, connectRootElement, createContextProvider, createVM, disconnectRootElement, freezeTemplate, getAssociatedVMIfPresent, getComponentConstructor, getComponentDef, getComponentHtmlPrototype, hydrateRoot, isComponentConstructor, parseFragment, parseSVGFragment, readonly, register, registerComponent, registerDecorators, registerTemplate, sanitizeAttribute, setHooks, swapComponent, swapStyle, swapTemplate, track, unwrap, wire };
-/* version: 2.37.1 */
+/* version: 2.37.3 */

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@lwc/engine-core",
-    "version": "2.37.1",
+    "version": "2.37.3",
     "description": "Core LWC engine APIs.",
     "homepage": "https://lwc.dev/",
     "repository": {
@@ -24,9 +24,9 @@
         "types/"
     ],
     "dependencies": {
-        "@lwc/aria-reflection": "2.37.1",
-        "@lwc/features": "2.37.1",
-        "@lwc/shared": "2.37.1"
+        "@lwc/aria-reflection": "2.37.3",
+        "@lwc/features": "2.37.3",
+        "@lwc/shared": "2.37.3"
     },
     "devDependencies": {
         "observable-membrane": "2.0.0"

package/types/framework/reporting.d.ts

@@ -1,9 +1,9 @@
 export declare const enum ReportingEventId {
-    CrossRootAriaInSyntheticShadow = 0,
-    CompilerRuntimeVersionMismatch = 1,
-    NonStandardAriaReflection = 2,
-    TemplateMutation = 3,
-    StylesheetMutation = 4
+    CrossRootAriaInSyntheticShadow = "CrossRootAriaInSyntheticShadow",
+    CompilerRuntimeVersionMismatch = "CompilerRuntimeVersionMismatch",
+    NonStandardAriaReflection = "NonStandardAriaReflection",
+    TemplateMutation = "TemplateMutation",
+    StylesheetMutation = "StylesheetMutation"
 }
 export interface BasePayload {
     tagName?: string;

package/types/framework/vnodes.d.ts

@@ -68,7 +68,7 @@ export interface VCustomElement extends VBaseElement {
 }
 export interface VNodeData {
     readonly props?: Readonly<Record<string, any>>;
-    readonly attrs?: Readonly<Record<string, string | number | boolean>>;
+    readonly attrs?: Readonly<Record<string, string | number | boolean | null | undefined>>;
     readonly className?: string;
     readonly style?: string;
     readonly classMap?: Readonly<Record<string, boolean>>;