@lwc/engine-core 8.12.4 → 8.12.5

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/index.cjs.js

@@ -3977,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.
@@ -7538,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.
@@ -7552,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) {
@@ -7591,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
@@ -7628,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
@@ -7648,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);
@@ -7665,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;
@@ -7683,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;
@@ -7710,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;
@@ -7724,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);
             }
         }
     }
@@ -7757,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;
@@ -7794,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)) {
@@ -7804,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);
             }
@@ -7827,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
@@ -7844,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;
@@ -7859,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;
 }
@@ -7900,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.
@@ -7913,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;
         }
@@ -7942,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.
@@ -7988,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;
@@ -8027,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;
             }
@@ -8078,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;
     }
@@ -8089,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.
@@ -8103,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;
@@ -8111,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;
@@ -8431,5 +8474,5 @@ exports.swapTemplate = swapTemplate;
 exports.track = track;
 exports.unwrap = unwrap;
 exports.wire = wire;
-/** version: 8.12.4 */
+/** version: 8.12.5 */
 //# sourceMappingURL=index.cjs.js.map

package/dist/index.js

@@ -3974,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.
@@ -7535,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.
@@ -7549,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) {
@@ -7588,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
@@ -7625,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
@@ -7645,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);
@@ -7662,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;
@@ -7680,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;
@@ -7707,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;
@@ -7721,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);
             }
         }
     }
@@ -7754,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;
@@ -7791,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)) {
@@ -7801,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);
             }
@@ -7824,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
@@ -7841,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;
@@ -7856,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;
 }
@@ -7897,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.
@@ -7910,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;
         }
@@ -7939,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.
@@ -7985,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;
@@ -8024,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;
             }
@@ -8075,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;
     }
@@ -8086,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.
@@ -8100,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;
@@ -8108,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;
@@ -8377,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.4 */
+/** 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.4",
+    "version": "8.12.5",
     "description": "Core LWC engine APIs.",
     "keywords": [
         "lwc"
@@ -46,9 +46,9 @@
         }
     },
     "dependencies": {
-        "@lwc/features": "8.12.4",
-        "@lwc/shared": "8.12.4",
-        "@lwc/signals": "8.12.4"
+        "@lwc/features": "8.12.5",
+        "@lwc/shared": "8.12.5",
+        "@lwc/signals": "8.12.5"
     },
     "devDependencies": {
         "observable-membrane": "2.0.0"