@lwc/engine-core 2.37.2 → 2.37.3

package/dist/engine-core.cjs.js

@@ -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;
         }
@@ -6864,4 +6906,4 @@ exports.swapTemplate = swapTemplate;
 exports.track = track;
 exports.unwrap = unwrap;
 exports.wire = wire;
-/* version: 2.37.2 */
+/* 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';
 
@@ -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;
         }
@@ -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.2 */
+/* version: 2.37.3 */

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@lwc/engine-core",
-    "version": "2.37.2",
+    "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.2",
-        "@lwc/features": "2.37.2",
-        "@lwc/shared": "2.37.2"
+        "@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/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>>;