@lwc/engine-core 8.12.3 → 8.12.5

package/LICENSE.md

@@ -2,7 +2,7 @@
 
 MIT LICENSE
 
-Copyright (c) 2024, Salesforce, Inc.
+Copyright (c) 2025, Salesforce, Inc.
 All rights reserved.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

package/dist/framework/hydration-utils.d.ts

@@ -0,0 +1,10 @@
+export type Classes = Omit<Set<string>, 'add'>;
+export declare function prettyPrintAttribute(attribute: string, value: any): string;
+export declare function prettyPrintClasses(classes: Classes): string;
+export declare function queueHydrationError(type: string, serverRendered?: any, clientExpected?: any): void;
+export declare function flushHydrationErrors(source?: Node | null): void;
+export declare function isTypeElement(node?: Node): node is Element;
+export declare function isTypeText(node?: Node): node is Text;
+export declare function isTypeComment(node?: Node): node is Comment;
+export declare function logHydrationWarning(...args: any): void;
+//# sourceMappingURL=hydration-utils.d.ts.map

package/dist/framework/sanitized-html-content.d.ts

@@ -3,6 +3,7 @@ declare const sanitizedHtmlContentSymbol: unique symbol;
 export type SanitizedHtmlContent = {
     [sanitizedHtmlContentSymbol]: unknown;
 };
+export declare function unwrapIfNecessary(object: any): any;
 /**
  * Wrap a pre-sanitized string designated for `.innerHTML` via `lwc:inner-html`
  * as an object with a Symbol that only we have access to.
@@ -19,12 +20,5 @@ export declare function createSanitizedHtmlContent(sanitizedString: unknown): Sa
  * @param value -  value to set
  */
 export declare function safelySetProperty(setProperty: RendererAPI['setProperty'], elm: Element, key: string, value: any): void;
-/**
- * Given two objects (likely either a string or a SanitizedHtmlContent object), return true if their
- * string values are equivalent.
- * @param first
- * @param second
- */
-export declare function isSanitizedHtmlContentEqual(first: any, second: any): boolean;
 export {};
 //# sourceMappingURL=sanitized-html-content.d.ts.map

package/dist/framework/utils.d.ts

@@ -12,5 +12,6 @@ export declare function cloneAndOmitKey(object: {
 };
 export declare function assertNotProd(): void;
 export declare function shouldBeFormAssociated(Ctor: LightningElementConstructor): boolean;
+export declare function safeHasProp<K extends PropertyKey>(obj: unknown, prop: K): obj is Record<K, unknown>;
 export {};
 //# sourceMappingURL=utils.d.ts.map

package/dist/index.cjs.js

@@ -251,6 +251,16 @@ function shouldBeFormAssociated(Ctor) {
     }
     return ctorFormAssociated && apiFeatureEnabled;
 }
+// check if a property is in an object, and if the object throws an error merely because we are
+// checking if the property exists, return false
+function safeHasProp(obj, prop) {
+    try {
+        return prop in obj;
+    }
+    catch (_err) {
+        return false;
+    }
+}
 
 /*
  * Copyright (c) 2024, Salesforce, Inc.
@@ -591,14 +601,14 @@ function componentValueObserved(vm, key, target = {}) {
         valueObserved(component, key);
     }
     // The portion of reactivity that's exposed to signals is to subscribe a callback to re-render the VM (templates).
-    // We check check the following to ensure re-render is subscribed at the correct time.
+    // We check the following to ensure re-render is subscribed at the correct time.
     //  1. The template is currently being rendered (there is a template reactive observer)
     //  2. There was a call to a getter to access the signal (happens during vnode generation)
     if (lwcRuntimeFlags.ENABLE_EXPERIMENTAL_SIGNALS &&
         shared.isObject(target) &&
         !shared.isNull(target) &&
-        'value' in target &&
-        'subscribe' in target &&
+        safeHasProp(target, 'value') &&
+        safeHasProp(target, 'subscribe') &&
         shared.isFunction(target.subscribe) &&
         shared.isTrustedSignal(target) &&
         // Only subscribe if a template is being rendered by the engine
@@ -3967,15 +3977,6 @@ function safelySetProperty(setProperty, elm, key, value) {
         setProperty(elm, key, value);
     }
 }
-/**
- * Given two objects (likely either a string or a SanitizedHtmlContent object), return true if their
- * string values are equivalent.
- * @param first
- * @param second
- */
-function isSanitizedHtmlContentEqual(first, second) {
-    return unwrapIfNecessary(first) === unwrapIfNecessary(second);
-}
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -7528,6 +7529,78 @@ if (process.env.IS_BROWSER && isGlobalAriaPolyfillLoaded()) {
     }
 }
 
+/*
+ * 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
+ */
+// Errors that occured during the hydration process
+let hydrationErrors = [];
+/*
+    Prints attributes as null or "value"
+*/
+function prettyPrintAttribute(attribute, value) {
+    assertNotProd(); // this method should never leak to prod
+    return `${attribute}=${shared.isNull(value) || shared.isUndefined(value) ? value : `"${value}"`}`;
+}
+/*
+    Sorts and stringifies classes
+*/
+function prettyPrintClasses(classes) {
+    assertNotProd(); // this method should never leak to prod
+    const value = JSON.stringify(shared.ArrayJoin.call(shared.ArraySort.call(shared.ArrayFrom(classes)), ' '));
+    return `class=${value}`;
+}
+/*
+    Hydration errors occur before the source node has been fully hydrated,
+    queue them so they can be logged later against the mounted node.
+*/
+function queueHydrationError(type, serverRendered, clientExpected) {
+    assertNotProd(); // this method should never leak to prod
+    shared.ArrayPush.call(hydrationErrors, { type, serverRendered, clientExpected });
+}
+/*
+    Flushes (logs) any queued errors after the source node has been mounted.
+ */
+function flushHydrationErrors(source) {
+    assertNotProd(); // this method should never leak to prod
+    for (const hydrationError of hydrationErrors) {
+        logHydrationWarning(`Hydration ${hydrationError.type} mismatch on:`, source, `\n- rendered on server:`, hydrationError.serverRendered, `\n- expected on client:`, hydrationError.clientExpected || source);
+    }
+    hydrationErrors = [];
+}
+function isTypeElement(node) {
+    const isCorrectType = node?.nodeType === 1 /* EnvNodeTypes.ELEMENT */;
+    if (process.env.NODE_ENV !== 'production' && !isCorrectType) {
+        queueHydrationError('node', node);
+    }
+    return isCorrectType;
+}
+function isTypeText(node) {
+    const isCorrectType = node?.nodeType === 3 /* EnvNodeTypes.TEXT */;
+    if (process.env.NODE_ENV !== 'production' && !isCorrectType) {
+        queueHydrationError('node', node);
+    }
+    return isCorrectType;
+}
+function isTypeComment(node) {
+    const isCorrectType = node?.nodeType === 8 /* EnvNodeTypes.COMMENT */;
+    if (process.env.NODE_ENV !== 'production' && !isCorrectType) {
+        queueHydrationError('node', node);
+    }
+    return isCorrectType;
+}
+/*
+    logger.ts converts all args to a string, losing object referenences and has
+    legacy bloat which would have meant more pathing.
+*/
+function logHydrationWarning(...args) {
+    assertNotProd(); // this method should never leak to prod
+    /* eslint-disable-next-line no-console */
+    console.warn('[LWC warn:', ...args);
+}
+
 /*
  * Copyright (c) 2022, salesforce.com, inc.
  * All rights reserved.
@@ -7542,8 +7615,15 @@ function hydrateRoot(vm) {
     hasMismatch = false;
     runConnectedCallback(vm);
     hydrateVM(vm);
-    if (hasMismatch && process.env.NODE_ENV !== 'production') {
-        logWarn('Hydration completed with errors.', vm);
+    if (process.env.NODE_ENV !== 'production') {
+        /*
+            Errors are queued as they occur and then logged with the source element once it has been hydrated and mounted to the DOM.
+            Means the element in the console matches what is on the page and the highlighting works properly when you hover over the elements in the console.
+        */
+        flushHydrationErrors(vm.renderRoot);
+        if (hasMismatch) {
+            logHydrationWarning('Hydration completed with errors.');
+        }
     }
 }
 function hydrateVM(vm) {
@@ -7581,21 +7661,25 @@ function hydrateNode(node, vnode, renderer) {
             hydratedNode = hydrateCustomElement(node, vnode, vnode.data.renderer ?? renderer);
             break;
     }
+    if (process.env.NODE_ENV !== 'production') {
+        /*
+            Errors are queued as they occur and then logged with the source element once it has been hydrated and mounted to the DOM.
+            Means the element in the console matches what is on the page and the highlighting works properly when you hover over the elements in the console.
+        */
+        flushHydrationErrors(hydratedNode);
+    }
     return renderer.nextSibling(hydratedNode);
 }
 const NODE_VALUE_PROP = 'nodeValue';
-function textNodeContentsAreEqual(node, vnode, renderer) {
+function validateTextNodeEquality(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;
+    if (nodeValue !== vnode.text &&
+        // Special case for empty text nodes – these are serialized differently on the server
+        // See https://github.com/salesforce/lwc/pull/2656
+        (nodeValue !== '\u200D' || vnode.text !== '')) {
+        queueHydrationError('text content', nodeValue, vnode.text);
     }
-    return false;
 }
 // The validationOptOut static property can be an array of attribute names.
 // Any attribute names specified in that array will not be validated, and the
@@ -7618,7 +7702,7 @@ function getValidationPredicate(elm, renderer, optOutStaticProp) {
         !shared.isUndefined(optOutStaticProp) &&
         !shared.isTrue(optOutStaticProp) &&
         !isValidArray) {
-        logWarn('`validationOptOut` must be `true` or an array of attributes that should not be validated.');
+        logHydrationWarning('`validationOptOut` must be `true` or an array of attributes that should not be validated.');
     }
     return (attrName) => {
         // Component wants to opt out of all validation
@@ -7638,16 +7722,14 @@ function getValidationPredicate(elm, renderer, optOutStaticProp) {
     };
 }
 function hydrateText(node, vnode, renderer) {
-    if (!hasCorrectNodeType(vnode, node, 3 /* EnvNodeTypes.TEXT */, renderer)) {
+    if (!isTypeText(node)) {
         return handleMismatch(node, vnode, renderer);
     }
-    return updateTextContent(node, vnode, vnode.owner, renderer);
+    return updateTextContent(node, vnode, renderer);
 }
-function updateTextContent(node, vnode, owner, renderer) {
+function updateTextContent(node, vnode, renderer) {
     if (process.env.NODE_ENV !== 'production') {
-        if (!textNodeContentsAreEqual(node, vnode, renderer)) {
-            logWarn('Hydration mismatch: text values do not match, will recover from the difference', owner);
-        }
+        validateTextNodeEquality(node, vnode, renderer);
     }
     const { setText } = renderer;
     setText(node, vnode.text ?? null);
@@ -7655,14 +7737,14 @@ function updateTextContent(node, vnode, owner, renderer) {
     return node;
 }
 function hydrateComment(node, vnode, renderer) {
-    if (!hasCorrectNodeType(vnode, node, 8 /* EnvNodeTypes.COMMENT */, renderer)) {
+    if (!isTypeComment(node)) {
         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) {
-            logWarn('Hydration mismatch: comment values do not match, will recover from the difference', vnode.owner);
+            queueHydrationError('comment', nodeValue, vnode.text);
         }
     }
     const { setProperty } = renderer;
@@ -7673,11 +7755,12 @@ function hydrateComment(node, vnode, renderer) {
     return node;
 }
 function hydrateStaticElement(elm, vnode, renderer) {
-    if (!hasCorrectNodeType(vnode, elm, 1 /* EnvNodeTypes.ELEMENT */, renderer) ||
-        !areCompatibleStaticNodes(vnode.fragment, elm, vnode, renderer)) {
-        return handleMismatch(elm, vnode, renderer);
+    if (isTypeElement(elm) &&
+        isTypeElement(vnode.fragment) &&
+        areStaticElementsCompatible(vnode.fragment, elm, vnode, renderer)) {
+        return hydrateStaticElementParts(elm, vnode, renderer);
     }
-    return hydrateStaticElementParts(elm, vnode, renderer);
+    return handleMismatch(elm, vnode, renderer);
 }
 function hydrateStaticElementParts(elm, vnode, renderer) {
     const { parts } = vnode;
@@ -7700,8 +7783,7 @@ function hydrateFragment(elm, vnode, renderer) {
     return (vnode.elm = children[children.length - 1].elm);
 }
 function hydrateElement(elm, vnode, renderer) {
-    if (!hasCorrectNodeType(vnode, elm, 1 /* EnvNodeTypes.ELEMENT */, renderer) ||
-        !isMatchingElement(vnode, elm, renderer)) {
+    if (!isTypeElement(elm) || !isMatchingElement(vnode, elm, renderer)) {
         return handleMismatch(elm, vnode, renderer);
     }
     vnode.elm = elm;
@@ -7714,17 +7796,17 @@ function hydrateElement(elm, vnode, renderer) {
         const { data: { props }, } = vnode;
         const { getProperty } = renderer;
         if (!shared.isUndefined(props) && !shared.isUndefined(props.innerHTML)) {
-            if (isSanitizedHtmlContentEqual(getProperty(elm, 'innerHTML'), props.innerHTML)) {
+            const unwrappedServerInnerHTML = unwrapIfNecessary(getProperty(elm, 'innerHTML'));
+            const unwrappedClientInnerHTML = unwrapIfNecessary(props.innerHTML);
+            if (unwrappedServerInnerHTML === unwrappedClientInnerHTML) {
                 // Do a shallow clone since VNodeData may be shared across VNodes due to hoist optimization
                 vnode.data = {
                     ...vnode.data,
                     props: cloneAndOmitKey(props, 'innerHTML'),
                 };
             }
-            else {
-                if (process.env.NODE_ENV !== 'production') {
-                    logWarn(`Mismatch hydrating element <${getProperty(elm, 'tagName').toLowerCase()}>: innerHTML values do not match for element, will recover from the difference`, owner);
-                }
+            else if (process.env.NODE_ENV !== 'production') {
+                queueHydrationError('innerHTML', unwrappedServerInnerHTML, unwrappedClientInnerHTML);
             }
         }
     }
@@ -7747,8 +7829,7 @@ function hydrateCustomElement(elm, vnode, renderer) {
     //
     // Therefore, if validationOptOut is falsey or an array of strings, we need to
     // examine some or all of the custom element's attributes.
-    if (!hasCorrectNodeType(vnode, elm, 1 /* EnvNodeTypes.ELEMENT */, renderer) ||
-        !isMatchingElement(vnode, elm, renderer, shouldValidateAttr)) {
+    if (!isTypeElement(elm) || !isMatchingElement(vnode, elm, renderer, shouldValidateAttr)) {
         return handleMismatch(elm, vnode, renderer);
     }
     const { sel, mode, ctor, owner } = vnode;
@@ -7784,9 +7865,13 @@ function hydrateChildren(node, children, parentNode, owner,
 // last node of the fragment. Hydration should not fail if a trailing sibling is
 // found in this case.
 expectAddlSiblings) {
-    let hasWarned = false;
+    let mismatchedChildren = false;
     let nextNode = node;
     const { renderer } = owner;
+    const { getChildNodes, cloneNode } = renderer;
+    const serverNodes = process.env.NODE_ENV !== 'production'
+        ? Array.from(getChildNodes(parentNode), (node) => cloneNode(node, true))
+        : null;
     for (let i = 0; i < children.length; i++) {
         const childVnode = children[i];
         if (!shared.isNull(childVnode)) {
@@ -7794,13 +7879,7 @@ expectAddlSiblings) {
                 nextNode = hydrateNode(nextNode, childVnode, renderer);
             }
             else {
-                hasMismatch = true;
-                if (process.env.NODE_ENV !== 'production') {
-                    if (!hasWarned) {
-                        hasWarned = true;
-                        logWarn(`Hydration mismatch: incorrect number of rendered nodes. Client produced more nodes than the server.`, owner);
-                    }
-                }
+                mismatchedChildren = true;
                 mount(childVnode, parentNode, renderer, nextNode);
                 nextNode = renderer.nextSibling(childVnode.type === 5 /* VNodeType.Fragment */ ? childVnode.trailing : childVnode.elm);
             }
@@ -7817,12 +7896,7 @@ expectAddlSiblings) {
     // rendered more nodes than the client.
     (!useCommentsForBookends || !expectAddlSiblings) &&
         nextNode) {
-        hasMismatch = true;
-        if (process.env.NODE_ENV !== 'production') {
-            if (!hasWarned) {
-                logWarn(`Hydration mismatch: incorrect number of rendered nodes. Server rendered more nodes than the client.`, owner);
-            }
-        }
+        mismatchedChildren = true;
         // nextSibling is mostly harmless, and since we don't have
         // a good reference to what element to act upon, we instead
         // rely on the vm's associated renderer for navigating to the
@@ -7834,6 +7908,14 @@ expectAddlSiblings) {
             removeNode(current, parentNode, renderer);
         } while (nextNode);
     }
+    if (mismatchedChildren) {
+        hasMismatch = true;
+        // We can't know exactly which node(s) caused the delta, but we can provide context (parent) and the mismatched sets
+        if (process.env.NODE_ENV !== 'production') {
+            const clientNodes = shared.ArrayMap.call(children, (c) => c?.elm);
+            queueHydrationError('child node', serverNodes, clientNodes);
+        }
+    }
 }
 function handleMismatch(node, vnode, renderer) {
     hasMismatch = true;
@@ -7849,31 +7931,21 @@ function patchElementPropsAndAttrsAndRefs(vnode, renderer) {
     // The `refs` object is blown away in every re-render, so we always need to re-apply them
     applyRefs(vnode, vnode.owner);
 }
-function hasCorrectNodeType(vnode, node, nodeType, renderer) {
-    const { getProperty } = renderer;
-    if (getProperty(node, 'nodeType') !== nodeType) {
-        if (process.env.NODE_ENV !== 'production') {
-            logWarn('Hydration mismatch: incorrect node type received', vnode.owner);
-        }
-        return false;
-    }
-    return true;
-}
 function isMatchingElement(vnode, elm, renderer, shouldValidateAttr = () => true) {
     const { getProperty } = renderer;
     if (vnode.sel.toLowerCase() !== getProperty(elm, 'tagName').toLowerCase()) {
         if (process.env.NODE_ENV !== 'production') {
-            logWarn(`Hydration mismatch: expecting element with tag "${vnode.sel.toLowerCase()}" but found "${getProperty(elm, 'tagName').toLowerCase()}".`, vnode.owner);
+            queueHydrationError('node', elm);
         }
         return false;
     }
     const { data } = vnode;
-    const hasCompatibleAttrs = validateAttrs(vnode, elm, data, renderer, shouldValidateAttr);
+    const hasCompatibleAttrs = validateAttrs(elm, data, renderer, shouldValidateAttr);
     const hasCompatibleClass = shouldValidateAttr('class')
         ? validateClassAttr(vnode, elm, data, renderer)
         : true;
     const hasCompatibleStyle = shouldValidateAttr('style')
-        ? validateStyleAttr(vnode, elm, data, renderer)
+        ? validateStyleAttr(elm, data, renderer)
         : true;
     return hasCompatibleAttrs && hasCompatibleClass && hasCompatibleStyle;
 }
@@ -7890,7 +7962,7 @@ function attributeValuesAreEqual(vnodeValue, value) {
     // In all other cases, the two values are not considered equal
     return false;
 }
-function validateAttrs(vnode, elm, data, renderer, shouldValidateAttr) {
+function validateAttrs(elm, data, renderer, shouldValidateAttr) {
     const { attrs = {} } = data;
     let nodesAreCompatible = true;
     // Validate attributes, though we could always recovery from those by running the update mods.
@@ -7903,8 +7975,7 @@ function validateAttrs(vnode, elm, data, renderer, shouldValidateAttr) {
         const elmAttrValue = getAttribute(elm, attrName);
         if (!attributeValuesAreEqual(attrValue, elmAttrValue)) {
             if (process.env.NODE_ENV !== 'production') {
-                const { getProperty } = renderer;
-                logWarn(`Mismatch hydrating element <${getProperty(elm, 'tagName').toLowerCase()}>: attribute "${attrName}" has different values, expected "${attrValue}" but found ${shared.isNull(elmAttrValue) ? 'null' : `"${elmAttrValue}"`}`, vnode.owner);
+                queueHydrationError('attribute', prettyPrintAttribute(attrName, elmAttrValue), prettyPrintAttribute(attrName, attrValue));
             }
             nodesAreCompatible = false;
         }
@@ -7932,7 +8003,6 @@ function validateClassAttr(vnode, elm, data, renderer) {
     // classMap is never available on VStaticPartData so it can default to undefined
     // casting to prevent TS error.
     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.
@@ -7978,12 +8048,11 @@ function validateClassAttr(vnode, elm, data, renderer) {
     // ---------- Step 3: check for compatibility
     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);
+        queueHydrationError('attribute', prettyPrintClasses(elmClasses), prettyPrintClasses(vnodeClasses));
     }
     return classesAreCompatible;
 }
-function validateStyleAttr(vnode, elm, data, renderer) {
+function validateStyleAttr(elm, data, renderer) {
     // Note styleDecls is always undefined for VStaticPartData, casting here to default it to undefined
     const { style, styleDecls } = data;
     const { getAttribute } = renderer;
@@ -8017,49 +8086,33 @@ function validateStyleAttr(vnode, elm, data, renderer) {
         }
         vnodeStyle = shared.ArrayJoin.call(expectedStyle, ' ');
     }
-    if (!nodesAreCompatible) {
-        if (process.env.NODE_ENV !== 'production') {
-            const { getProperty } = renderer;
-            logWarn(`Mismatch hydrating element <${getProperty(elm, 'tagName').toLowerCase()}>: attribute "style" has different values, expected "${vnodeStyle}" but found "${elmStyle}".`, vnode.owner);
-        }
+    if (process.env.NODE_ENV !== 'production' && !nodesAreCompatible) {
+        queueHydrationError('attribute', prettyPrintAttribute('style', elmStyle), prettyPrintAttribute('style', vnodeStyle));
     }
     return nodesAreCompatible;
 }
-function areCompatibleStaticNodes(client, ssr, vnode, renderer) {
+function areStaticElementsCompatible(clientElement, serverElement, vnode, renderer) {
     const { getProperty, getAttribute } = renderer;
-    if (getProperty(client, 'nodeType') === 3 /* EnvNodeTypes.TEXT */) {
-        if (!hasCorrectNodeType(vnode, ssr, 3 /* EnvNodeTypes.TEXT */, renderer)) {
-            return false;
-        }
-        return getProperty(client, NODE_VALUE_PROP) === getProperty(ssr, NODE_VALUE_PROP);
-    }
-    if (getProperty(client, 'nodeType') === 8 /* EnvNodeTypes.COMMENT */) {
-        if (!hasCorrectNodeType(vnode, ssr, 8 /* EnvNodeTypes.COMMENT */, renderer)) {
-            return false;
-        }
-        return getProperty(client, NODE_VALUE_PROP) === getProperty(ssr, NODE_VALUE_PROP);
-    }
-    if (!hasCorrectNodeType(vnode, ssr, 1 /* EnvNodeTypes.ELEMENT */, renderer)) {
-        return false;
-    }
-    const { owner, parts } = vnode;
+    const { parts } = vnode;
     let isCompatibleElements = true;
-    if (getProperty(client, 'tagName') !== getProperty(ssr, 'tagName')) {
+    if (getProperty(clientElement, 'tagName') !== getProperty(serverElement, 'tagName')) {
         if (process.env.NODE_ENV !== 'production') {
-            logWarn(`Hydration mismatch: expecting element with tag "${getProperty(client, 'tagName').toLowerCase()}" but found "${getProperty(ssr, 'tagName').toLowerCase()}".`, owner);
+            queueHydrationError('node', serverElement);
         }
         return false;
     }
-    const clientAttrsNames = getProperty(client, 'getAttributeNames').call(client);
+    const clientAttrsNames = getProperty(clientElement, 'getAttributeNames').call(clientElement);
     clientAttrsNames.forEach((attrName) => {
-        if (getAttribute(client, attrName) !== getAttribute(ssr, attrName)) {
+        const clientAttributeValue = getAttribute(clientElement, attrName);
+        const serverAttributeValue = getAttribute(serverElement, attrName);
+        if (clientAttributeValue !== serverAttributeValue) {
             // Check if the root element attributes have expressions, if it does then we need to delegate hydration
             // validation to haveCompatibleStaticParts.
             // Note if there are no parts then it is a fully static fragment.
             // 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') {
-                    logWarn(`Mismatch hydrating element <${getProperty(client, 'tagName').toLowerCase()}>: attribute "${attrName}" has different values, expected "${getAttribute(client, attrName)}" but found "${getAttribute(ssr, attrName)}"`, owner);
+                    queueHydrationError('attribute', prettyPrintAttribute(attrName, serverAttributeValue), prettyPrintAttribute(attrName, clientAttributeValue));
                 }
                 isCompatibleElements = false;
             }
@@ -8068,7 +8121,7 @@ function areCompatibleStaticNodes(client, ssr, vnode, renderer) {
     return isCompatibleElements;
 }
 function haveCompatibleStaticParts(vnode, renderer) {
-    const { parts, owner } = vnode;
+    const { parts } = vnode;
     if (shared.isUndefined(parts)) {
         return true;
     }
@@ -8079,11 +8132,11 @@ function haveCompatibleStaticParts(vnode, renderer) {
     for (const part of parts) {
         const { elm } = part;
         if (isVStaticPartElement(part)) {
-            if (!hasCorrectNodeType(vnode, elm, 1 /* EnvNodeTypes.ELEMENT */, renderer)) {
+            if (!isTypeElement(elm)) {
                 return false;
             }
             const { data } = part;
-            const hasMatchingAttrs = validateAttrs(vnode, elm, data, renderer, () => true);
+            const hasMatchingAttrs = validateAttrs(elm, data, renderer, () => true);
             // Explicitly skip hydration validation when static parts don't contain `style` or `className`.
             // This means the style/class attributes are either static or don't exist on the element and
             // cannot be affected by hydration.
@@ -8093,7 +8146,7 @@ function haveCompatibleStaticParts(vnode, renderer) {
                 ? validateClassAttr(vnode, elm, data, renderer)
                 : true;
             const hasMatchingStyleAttr = shouldValidateAttr(data, 'style')
-                ? validateStyleAttr(vnode, elm, data, renderer)
+                ? validateStyleAttr(elm, data, renderer)
                 : true;
             if (shared.isFalse(hasMatchingAttrs && hasMatchingClass && hasMatchingStyleAttr)) {
                 return false;
@@ -8101,10 +8154,10 @@ function haveCompatibleStaticParts(vnode, renderer) {
         }
         else {
             // VStaticPartText
-            if (!hasCorrectNodeType(vnode, elm, 3 /* EnvNodeTypes.TEXT */, renderer)) {
+            if (!isTypeText(elm)) {
                 return false;
             }
-            updateTextContent(elm, part, owner, renderer);
+            updateTextContent(elm, part, renderer);
         }
     }
     return true;
@@ -8421,5 +8474,5 @@ exports.swapTemplate = swapTemplate;
 exports.track = track;
 exports.unwrap = unwrap;
 exports.wire = wire;
-/** version: 8.12.3 */
+/** version: 8.12.5 */
 //# sourceMappingURL=index.cjs.js.map

package/dist/index.js

@@ -248,6 +248,16 @@ function shouldBeFormAssociated(Ctor) {
     }
     return ctorFormAssociated && apiFeatureEnabled;
 }
+// check if a property is in an object, and if the object throws an error merely because we are
+// checking if the property exists, return false
+function safeHasProp(obj, prop) {
+    try {
+        return prop in obj;
+    }
+    catch (_err) {
+        return false;
+    }
+}
 
 /*
  * Copyright (c) 2024, Salesforce, Inc.
@@ -588,14 +598,14 @@ function componentValueObserved(vm, key, target = {}) {
         valueObserved(component, key);
     }
     // The portion of reactivity that's exposed to signals is to subscribe a callback to re-render the VM (templates).
-    // We check check the following to ensure re-render is subscribed at the correct time.
+    // We check the following to ensure re-render is subscribed at the correct time.
     //  1. The template is currently being rendered (there is a template reactive observer)
     //  2. There was a call to a getter to access the signal (happens during vnode generation)
     if (lwcRuntimeFlags.ENABLE_EXPERIMENTAL_SIGNALS &&
         isObject(target) &&
         !isNull(target) &&
-        'value' in target &&
-        'subscribe' in target &&
+        safeHasProp(target, 'value') &&
+        safeHasProp(target, 'subscribe') &&
         isFunction$1(target.subscribe) &&
         isTrustedSignal(target) &&
         // Only subscribe if a template is being rendered by the engine
@@ -3964,15 +3974,6 @@ function safelySetProperty(setProperty, elm, key, value) {
         setProperty(elm, key, value);
     }
 }
-/**
- * Given two objects (likely either a string or a SanitizedHtmlContent object), return true if their
- * string values are equivalent.
- * @param first
- * @param second
- */
-function isSanitizedHtmlContentEqual(first, second) {
-    return unwrapIfNecessary(first) === unwrapIfNecessary(second);
-}
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -7525,6 +7526,78 @@ if (process.env.IS_BROWSER && isGlobalAriaPolyfillLoaded()) {
     }
 }
 
+/*
+ * 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
+ */
+// Errors that occured during the hydration process
+let hydrationErrors = [];
+/*
+    Prints attributes as null or "value"
+*/
+function prettyPrintAttribute(attribute, value) {
+    assertNotProd(); // this method should never leak to prod
+    return `${attribute}=${isNull(value) || isUndefined$1(value) ? value : `"${value}"`}`;
+}
+/*
+    Sorts and stringifies classes
+*/
+function prettyPrintClasses(classes) {
+    assertNotProd(); // this method should never leak to prod
+    const value = JSON.stringify(ArrayJoin.call(ArraySort.call(ArrayFrom(classes)), ' '));
+    return `class=${value}`;
+}
+/*
+    Hydration errors occur before the source node has been fully hydrated,
+    queue them so they can be logged later against the mounted node.
+*/
+function queueHydrationError(type, serverRendered, clientExpected) {
+    assertNotProd(); // this method should never leak to prod
+    ArrayPush$1.call(hydrationErrors, { type, serverRendered, clientExpected });
+}
+/*
+    Flushes (logs) any queued errors after the source node has been mounted.
+ */
+function flushHydrationErrors(source) {
+    assertNotProd(); // this method should never leak to prod
+    for (const hydrationError of hydrationErrors) {
+        logHydrationWarning(`Hydration ${hydrationError.type} mismatch on:`, source, `\n- rendered on server:`, hydrationError.serverRendered, `\n- expected on client:`, hydrationError.clientExpected || source);
+    }
+    hydrationErrors = [];
+}
+function isTypeElement(node) {
+    const isCorrectType = node?.nodeType === 1 /* EnvNodeTypes.ELEMENT */;
+    if (process.env.NODE_ENV !== 'production' && !isCorrectType) {
+        queueHydrationError('node', node);
+    }
+    return isCorrectType;
+}
+function isTypeText(node) {
+    const isCorrectType = node?.nodeType === 3 /* EnvNodeTypes.TEXT */;
+    if (process.env.NODE_ENV !== 'production' && !isCorrectType) {
+        queueHydrationError('node', node);
+    }
+    return isCorrectType;
+}
+function isTypeComment(node) {
+    const isCorrectType = node?.nodeType === 8 /* EnvNodeTypes.COMMENT */;
+    if (process.env.NODE_ENV !== 'production' && !isCorrectType) {
+        queueHydrationError('node', node);
+    }
+    return isCorrectType;
+}
+/*
+    logger.ts converts all args to a string, losing object referenences and has
+    legacy bloat which would have meant more pathing.
+*/
+function logHydrationWarning(...args) {
+    assertNotProd(); // this method should never leak to prod
+    /* eslint-disable-next-line no-console */
+    console.warn('[LWC warn:', ...args);
+}
+
 /*
  * Copyright (c) 2022, salesforce.com, inc.
  * All rights reserved.
@@ -7539,8 +7612,15 @@ function hydrateRoot(vm) {
     hasMismatch = false;
     runConnectedCallback(vm);
     hydrateVM(vm);
-    if (hasMismatch && process.env.NODE_ENV !== 'production') {
-        logWarn('Hydration completed with errors.', vm);
+    if (process.env.NODE_ENV !== 'production') {
+        /*
+            Errors are queued as they occur and then logged with the source element once it has been hydrated and mounted to the DOM.
+            Means the element in the console matches what is on the page and the highlighting works properly when you hover over the elements in the console.
+        */
+        flushHydrationErrors(vm.renderRoot);
+        if (hasMismatch) {
+            logHydrationWarning('Hydration completed with errors.');
+        }
     }
 }
 function hydrateVM(vm) {
@@ -7578,21 +7658,25 @@ function hydrateNode(node, vnode, renderer) {
             hydratedNode = hydrateCustomElement(node, vnode, vnode.data.renderer ?? renderer);
             break;
     }
+    if (process.env.NODE_ENV !== 'production') {
+        /*
+            Errors are queued as they occur and then logged with the source element once it has been hydrated and mounted to the DOM.
+            Means the element in the console matches what is on the page and the highlighting works properly when you hover over the elements in the console.
+        */
+        flushHydrationErrors(hydratedNode);
+    }
     return renderer.nextSibling(hydratedNode);
 }
 const NODE_VALUE_PROP = 'nodeValue';
-function textNodeContentsAreEqual(node, vnode, renderer) {
+function validateTextNodeEquality(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;
+    if (nodeValue !== vnode.text &&
+        // Special case for empty text nodes – these are serialized differently on the server
+        // See https://github.com/salesforce/lwc/pull/2656
+        (nodeValue !== '\u200D' || vnode.text !== '')) {
+        queueHydrationError('text content', nodeValue, vnode.text);
     }
-    return false;
 }
 // The validationOptOut static property can be an array of attribute names.
 // Any attribute names specified in that array will not be validated, and the
@@ -7615,7 +7699,7 @@ function getValidationPredicate(elm, renderer, optOutStaticProp) {
         !isUndefined$1(optOutStaticProp) &&
         !isTrue(optOutStaticProp) &&
         !isValidArray) {
-        logWarn('`validationOptOut` must be `true` or an array of attributes that should not be validated.');
+        logHydrationWarning('`validationOptOut` must be `true` or an array of attributes that should not be validated.');
     }
     return (attrName) => {
         // Component wants to opt out of all validation
@@ -7635,16 +7719,14 @@ function getValidationPredicate(elm, renderer, optOutStaticProp) {
     };
 }
 function hydrateText(node, vnode, renderer) {
-    if (!hasCorrectNodeType(vnode, node, 3 /* EnvNodeTypes.TEXT */, renderer)) {
+    if (!isTypeText(node)) {
         return handleMismatch(node, vnode, renderer);
     }
-    return updateTextContent(node, vnode, vnode.owner, renderer);
+    return updateTextContent(node, vnode, renderer);
 }
-function updateTextContent(node, vnode, owner, renderer) {
+function updateTextContent(node, vnode, renderer) {
     if (process.env.NODE_ENV !== 'production') {
-        if (!textNodeContentsAreEqual(node, vnode, renderer)) {
-            logWarn('Hydration mismatch: text values do not match, will recover from the difference', owner);
-        }
+        validateTextNodeEquality(node, vnode, renderer);
     }
     const { setText } = renderer;
     setText(node, vnode.text ?? null);
@@ -7652,14 +7734,14 @@ function updateTextContent(node, vnode, owner, renderer) {
     return node;
 }
 function hydrateComment(node, vnode, renderer) {
-    if (!hasCorrectNodeType(vnode, node, 8 /* EnvNodeTypes.COMMENT */, renderer)) {
+    if (!isTypeComment(node)) {
         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) {
-            logWarn('Hydration mismatch: comment values do not match, will recover from the difference', vnode.owner);
+            queueHydrationError('comment', nodeValue, vnode.text);
         }
     }
     const { setProperty } = renderer;
@@ -7670,11 +7752,12 @@ function hydrateComment(node, vnode, renderer) {
     return node;
 }
 function hydrateStaticElement(elm, vnode, renderer) {
-    if (!hasCorrectNodeType(vnode, elm, 1 /* EnvNodeTypes.ELEMENT */, renderer) ||
-        !areCompatibleStaticNodes(vnode.fragment, elm, vnode, renderer)) {
-        return handleMismatch(elm, vnode, renderer);
+    if (isTypeElement(elm) &&
+        isTypeElement(vnode.fragment) &&
+        areStaticElementsCompatible(vnode.fragment, elm, vnode, renderer)) {
+        return hydrateStaticElementParts(elm, vnode, renderer);
     }
-    return hydrateStaticElementParts(elm, vnode, renderer);
+    return handleMismatch(elm, vnode, renderer);
 }
 function hydrateStaticElementParts(elm, vnode, renderer) {
     const { parts } = vnode;
@@ -7697,8 +7780,7 @@ function hydrateFragment(elm, vnode, renderer) {
     return (vnode.elm = children[children.length - 1].elm);
 }
 function hydrateElement(elm, vnode, renderer) {
-    if (!hasCorrectNodeType(vnode, elm, 1 /* EnvNodeTypes.ELEMENT */, renderer) ||
-        !isMatchingElement(vnode, elm, renderer)) {
+    if (!isTypeElement(elm) || !isMatchingElement(vnode, elm, renderer)) {
         return handleMismatch(elm, vnode, renderer);
     }
     vnode.elm = elm;
@@ -7711,17 +7793,17 @@ function hydrateElement(elm, vnode, renderer) {
         const { data: { props }, } = vnode;
         const { getProperty } = renderer;
         if (!isUndefined$1(props) && !isUndefined$1(props.innerHTML)) {
-            if (isSanitizedHtmlContentEqual(getProperty(elm, 'innerHTML'), props.innerHTML)) {
+            const unwrappedServerInnerHTML = unwrapIfNecessary(getProperty(elm, 'innerHTML'));
+            const unwrappedClientInnerHTML = unwrapIfNecessary(props.innerHTML);
+            if (unwrappedServerInnerHTML === unwrappedClientInnerHTML) {
                 // Do a shallow clone since VNodeData may be shared across VNodes due to hoist optimization
                 vnode.data = {
                     ...vnode.data,
                     props: cloneAndOmitKey(props, 'innerHTML'),
                 };
             }
-            else {
-                if (process.env.NODE_ENV !== 'production') {
-                    logWarn(`Mismatch hydrating element <${getProperty(elm, 'tagName').toLowerCase()}>: innerHTML values do not match for element, will recover from the difference`, owner);
-                }
+            else if (process.env.NODE_ENV !== 'production') {
+                queueHydrationError('innerHTML', unwrappedServerInnerHTML, unwrappedClientInnerHTML);
             }
         }
     }
@@ -7744,8 +7826,7 @@ function hydrateCustomElement(elm, vnode, renderer) {
     //
     // Therefore, if validationOptOut is falsey or an array of strings, we need to
     // examine some or all of the custom element's attributes.
-    if (!hasCorrectNodeType(vnode, elm, 1 /* EnvNodeTypes.ELEMENT */, renderer) ||
-        !isMatchingElement(vnode, elm, renderer, shouldValidateAttr)) {
+    if (!isTypeElement(elm) || !isMatchingElement(vnode, elm, renderer, shouldValidateAttr)) {
         return handleMismatch(elm, vnode, renderer);
     }
     const { sel, mode, ctor, owner } = vnode;
@@ -7781,9 +7862,13 @@ function hydrateChildren(node, children, parentNode, owner,
 // last node of the fragment. Hydration should not fail if a trailing sibling is
 // found in this case.
 expectAddlSiblings) {
-    let hasWarned = false;
+    let mismatchedChildren = false;
     let nextNode = node;
     const { renderer } = owner;
+    const { getChildNodes, cloneNode } = renderer;
+    const serverNodes = process.env.NODE_ENV !== 'production'
+        ? Array.from(getChildNodes(parentNode), (node) => cloneNode(node, true))
+        : null;
     for (let i = 0; i < children.length; i++) {
         const childVnode = children[i];
         if (!isNull(childVnode)) {
@@ -7791,13 +7876,7 @@ expectAddlSiblings) {
                 nextNode = hydrateNode(nextNode, childVnode, renderer);
             }
             else {
-                hasMismatch = true;
-                if (process.env.NODE_ENV !== 'production') {
-                    if (!hasWarned) {
-                        hasWarned = true;
-                        logWarn(`Hydration mismatch: incorrect number of rendered nodes. Client produced more nodes than the server.`, owner);
-                    }
-                }
+                mismatchedChildren = true;
                 mount(childVnode, parentNode, renderer, nextNode);
                 nextNode = renderer.nextSibling(childVnode.type === 5 /* VNodeType.Fragment */ ? childVnode.trailing : childVnode.elm);
             }
@@ -7814,12 +7893,7 @@ expectAddlSiblings) {
     // rendered more nodes than the client.
     (!useCommentsForBookends || !expectAddlSiblings) &&
         nextNode) {
-        hasMismatch = true;
-        if (process.env.NODE_ENV !== 'production') {
-            if (!hasWarned) {
-                logWarn(`Hydration mismatch: incorrect number of rendered nodes. Server rendered more nodes than the client.`, owner);
-            }
-        }
+        mismatchedChildren = true;
         // nextSibling is mostly harmless, and since we don't have
         // a good reference to what element to act upon, we instead
         // rely on the vm's associated renderer for navigating to the
@@ -7831,6 +7905,14 @@ expectAddlSiblings) {
             removeNode(current, parentNode, renderer);
         } while (nextNode);
     }
+    if (mismatchedChildren) {
+        hasMismatch = true;
+        // We can't know exactly which node(s) caused the delta, but we can provide context (parent) and the mismatched sets
+        if (process.env.NODE_ENV !== 'production') {
+            const clientNodes = ArrayMap.call(children, (c) => c?.elm);
+            queueHydrationError('child node', serverNodes, clientNodes);
+        }
+    }
 }
 function handleMismatch(node, vnode, renderer) {
     hasMismatch = true;
@@ -7846,31 +7928,21 @@ function patchElementPropsAndAttrsAndRefs(vnode, renderer) {
     // The `refs` object is blown away in every re-render, so we always need to re-apply them
     applyRefs(vnode, vnode.owner);
 }
-function hasCorrectNodeType(vnode, node, nodeType, renderer) {
-    const { getProperty } = renderer;
-    if (getProperty(node, 'nodeType') !== nodeType) {
-        if (process.env.NODE_ENV !== 'production') {
-            logWarn('Hydration mismatch: incorrect node type received', vnode.owner);
-        }
-        return false;
-    }
-    return true;
-}
 function isMatchingElement(vnode, elm, renderer, shouldValidateAttr = () => true) {
     const { getProperty } = renderer;
     if (vnode.sel.toLowerCase() !== getProperty(elm, 'tagName').toLowerCase()) {
         if (process.env.NODE_ENV !== 'production') {
-            logWarn(`Hydration mismatch: expecting element with tag "${vnode.sel.toLowerCase()}" but found "${getProperty(elm, 'tagName').toLowerCase()}".`, vnode.owner);
+            queueHydrationError('node', elm);
         }
         return false;
     }
     const { data } = vnode;
-    const hasCompatibleAttrs = validateAttrs(vnode, elm, data, renderer, shouldValidateAttr);
+    const hasCompatibleAttrs = validateAttrs(elm, data, renderer, shouldValidateAttr);
     const hasCompatibleClass = shouldValidateAttr('class')
         ? validateClassAttr(vnode, elm, data, renderer)
         : true;
     const hasCompatibleStyle = shouldValidateAttr('style')
-        ? validateStyleAttr(vnode, elm, data, renderer)
+        ? validateStyleAttr(elm, data, renderer)
         : true;
     return hasCompatibleAttrs && hasCompatibleClass && hasCompatibleStyle;
 }
@@ -7887,7 +7959,7 @@ function attributeValuesAreEqual(vnodeValue, value) {
     // In all other cases, the two values are not considered equal
     return false;
 }
-function validateAttrs(vnode, elm, data, renderer, shouldValidateAttr) {
+function validateAttrs(elm, data, renderer, shouldValidateAttr) {
     const { attrs = {} } = data;
     let nodesAreCompatible = true;
     // Validate attributes, though we could always recovery from those by running the update mods.
@@ -7900,8 +7972,7 @@ function validateAttrs(vnode, elm, data, renderer, shouldValidateAttr) {
         const elmAttrValue = getAttribute(elm, attrName);
         if (!attributeValuesAreEqual(attrValue, elmAttrValue)) {
             if (process.env.NODE_ENV !== 'production') {
-                const { getProperty } = renderer;
-                logWarn(`Mismatch hydrating element <${getProperty(elm, 'tagName').toLowerCase()}>: attribute "${attrName}" has different values, expected "${attrValue}" but found ${isNull(elmAttrValue) ? 'null' : `"${elmAttrValue}"`}`, vnode.owner);
+                queueHydrationError('attribute', prettyPrintAttribute(attrName, elmAttrValue), prettyPrintAttribute(attrName, attrValue));
             }
             nodesAreCompatible = false;
         }
@@ -7929,7 +8000,6 @@ function validateClassAttr(vnode, elm, data, renderer) {
     // classMap is never available on VStaticPartData so it can default to undefined
     // casting to prevent TS error.
     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.
@@ -7975,12 +8045,11 @@ function validateClassAttr(vnode, elm, data, renderer) {
     // ---------- Step 3: check for compatibility
     const classesAreCompatible = checkClassesCompatibility(vnodeClasses, elmClasses);
     if (process.env.NODE_ENV !== 'production' && !classesAreCompatible) {
-        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);
+        queueHydrationError('attribute', prettyPrintClasses(elmClasses), prettyPrintClasses(vnodeClasses));
     }
     return classesAreCompatible;
 }
-function validateStyleAttr(vnode, elm, data, renderer) {
+function validateStyleAttr(elm, data, renderer) {
     // Note styleDecls is always undefined for VStaticPartData, casting here to default it to undefined
     const { style, styleDecls } = data;
     const { getAttribute } = renderer;
@@ -8014,49 +8083,33 @@ function validateStyleAttr(vnode, elm, data, renderer) {
         }
         vnodeStyle = ArrayJoin.call(expectedStyle, ' ');
     }
-    if (!nodesAreCompatible) {
-        if (process.env.NODE_ENV !== 'production') {
-            const { getProperty } = renderer;
-            logWarn(`Mismatch hydrating element <${getProperty(elm, 'tagName').toLowerCase()}>: attribute "style" has different values, expected "${vnodeStyle}" but found "${elmStyle}".`, vnode.owner);
-        }
+    if (process.env.NODE_ENV !== 'production' && !nodesAreCompatible) {
+        queueHydrationError('attribute', prettyPrintAttribute('style', elmStyle), prettyPrintAttribute('style', vnodeStyle));
     }
     return nodesAreCompatible;
 }
-function areCompatibleStaticNodes(client, ssr, vnode, renderer) {
+function areStaticElementsCompatible(clientElement, serverElement, vnode, renderer) {
     const { getProperty, getAttribute } = renderer;
-    if (getProperty(client, 'nodeType') === 3 /* EnvNodeTypes.TEXT */) {
-        if (!hasCorrectNodeType(vnode, ssr, 3 /* EnvNodeTypes.TEXT */, renderer)) {
-            return false;
-        }
-        return getProperty(client, NODE_VALUE_PROP) === getProperty(ssr, NODE_VALUE_PROP);
-    }
-    if (getProperty(client, 'nodeType') === 8 /* EnvNodeTypes.COMMENT */) {
-        if (!hasCorrectNodeType(vnode, ssr, 8 /* EnvNodeTypes.COMMENT */, renderer)) {
-            return false;
-        }
-        return getProperty(client, NODE_VALUE_PROP) === getProperty(ssr, NODE_VALUE_PROP);
-    }
-    if (!hasCorrectNodeType(vnode, ssr, 1 /* EnvNodeTypes.ELEMENT */, renderer)) {
-        return false;
-    }
-    const { owner, parts } = vnode;
+    const { parts } = vnode;
     let isCompatibleElements = true;
-    if (getProperty(client, 'tagName') !== getProperty(ssr, 'tagName')) {
+    if (getProperty(clientElement, 'tagName') !== getProperty(serverElement, 'tagName')) {
         if (process.env.NODE_ENV !== 'production') {
-            logWarn(`Hydration mismatch: expecting element with tag "${getProperty(client, 'tagName').toLowerCase()}" but found "${getProperty(ssr, 'tagName').toLowerCase()}".`, owner);
+            queueHydrationError('node', serverElement);
         }
         return false;
     }
-    const clientAttrsNames = getProperty(client, 'getAttributeNames').call(client);
+    const clientAttrsNames = getProperty(clientElement, 'getAttributeNames').call(clientElement);
     clientAttrsNames.forEach((attrName) => {
-        if (getAttribute(client, attrName) !== getAttribute(ssr, attrName)) {
+        const clientAttributeValue = getAttribute(clientElement, attrName);
+        const serverAttributeValue = getAttribute(serverElement, attrName);
+        if (clientAttributeValue !== serverAttributeValue) {
             // Check if the root element attributes have expressions, if it does then we need to delegate hydration
             // validation to haveCompatibleStaticParts.
             // Note if there are no parts then it is a fully static fragment.
             // 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') {
-                    logWarn(`Mismatch hydrating element <${getProperty(client, 'tagName').toLowerCase()}>: attribute "${attrName}" has different values, expected "${getAttribute(client, attrName)}" but found "${getAttribute(ssr, attrName)}"`, owner);
+                    queueHydrationError('attribute', prettyPrintAttribute(attrName, serverAttributeValue), prettyPrintAttribute(attrName, clientAttributeValue));
                 }
                 isCompatibleElements = false;
             }
@@ -8065,7 +8118,7 @@ function areCompatibleStaticNodes(client, ssr, vnode, renderer) {
     return isCompatibleElements;
 }
 function haveCompatibleStaticParts(vnode, renderer) {
-    const { parts, owner } = vnode;
+    const { parts } = vnode;
     if (isUndefined$1(parts)) {
         return true;
     }
@@ -8076,11 +8129,11 @@ function haveCompatibleStaticParts(vnode, renderer) {
     for (const part of parts) {
         const { elm } = part;
         if (isVStaticPartElement(part)) {
-            if (!hasCorrectNodeType(vnode, elm, 1 /* EnvNodeTypes.ELEMENT */, renderer)) {
+            if (!isTypeElement(elm)) {
                 return false;
             }
             const { data } = part;
-            const hasMatchingAttrs = validateAttrs(vnode, elm, data, renderer, () => true);
+            const hasMatchingAttrs = validateAttrs(elm, data, renderer, () => true);
             // Explicitly skip hydration validation when static parts don't contain `style` or `className`.
             // This means the style/class attributes are either static or don't exist on the element and
             // cannot be affected by hydration.
@@ -8090,7 +8143,7 @@ function haveCompatibleStaticParts(vnode, renderer) {
                 ? validateClassAttr(vnode, elm, data, renderer)
                 : true;
             const hasMatchingStyleAttr = shouldValidateAttr(data, 'style')
-                ? validateStyleAttr(vnode, elm, data, renderer)
+                ? validateStyleAttr(elm, data, renderer)
                 : true;
             if (isFalse(hasMatchingAttrs && hasMatchingClass && hasMatchingStyleAttr)) {
                 return false;
@@ -8098,10 +8151,10 @@ function haveCompatibleStaticParts(vnode, renderer) {
         }
         else {
             // VStaticPartText
-            if (!hasCorrectNodeType(vnode, elm, 3 /* EnvNodeTypes.TEXT */, renderer)) {
+            if (!isTypeText(elm)) {
                 return false;
             }
-            updateTextContent(elm, part, owner, renderer);
+            updateTextContent(elm, part, renderer);
         }
     }
     return true;
@@ -8367,5 +8420,5 @@ function readonly(obj) {
 }
 
 export { BaseBridgeElement, 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.12.3 */
+/** version: 8.12.5 */
 //# sourceMappingURL=index.js.map

package/package.json

@@ -4,7 +4,7 @@
         "You can safely modify dependencies, devDependencies, keywords, etc., but other props will be overwritten."
     ],
     "name": "@lwc/engine-core",
-    "version": "8.12.3",
+    "version": "8.12.5",
     "description": "Core LWC engine APIs.",
     "keywords": [
         "lwc"
@@ -46,9 +46,9 @@
         }
     },
     "dependencies": {
-        "@lwc/features": "8.12.3",
-        "@lwc/shared": "8.12.3",
-        "@lwc/signals": "8.12.3"
+        "@lwc/features": "8.12.5",
+        "@lwc/shared": "8.12.5",
+        "@lwc/signals": "8.12.5"
     },
     "devDependencies": {
         "observable-membrane": "2.0.0"