@lwc/engine-core 8.12.7-alpha.0 → 8.12.7

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
@@ -2947,7 +2957,10 @@ function HTMLBridgeElementFactory(SuperClass, publicProperties, methods, observe
     const { observedAttributes: superObservedAttributes = [] } = SuperClass;
     const descriptors = create(null);
     // present a hint message so that developers are aware that they have not decorated property with @api
-    if (process.env.NODE_ENV !== 'production') {
+    // Note that we also don't do this in SSR because we cannot sniff for what props are declared on
+    // HTMLElementPrototype, and it seems not worth it to have these dev-only warnings there, since
+    // an `in` check could mistakenly assume that a prop is declared on a LightningElement prototype.
+    if (process.env.NODE_ENV !== 'production' && process.env.IS_BROWSER) {
         // TODO [#3761]: enable for components that don't extend from LightningElement
         if (!isUndefined$1(proto) && !isNull(proto) && !hasCustomSuperClass) {
             const nonPublicPropertiesToWarnOn = new Set([
@@ -3964,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.
@@ -5817,8 +5821,9 @@ const operationIdNameMapping = [
     'renderedCallback',
     'disconnectedCallback',
     'errorCallback',
-    'lwc-hydrate',
-    'lwc-rehydrate',
+    'lwc-render',
+    'lwc-rerender',
+    'lwc-ssr-hydrate',
 ];
 const operationTooltipMapping = [
     // constructor
@@ -5835,10 +5840,12 @@ const operationTooltipMapping = [
     'component disconnectedCallback()',
     // errorCallback
     'component errorCallback()',
-    // lwc-hydrate
+    // lwc-render
     'component first rendered',
-    // lwc-rehydrate
+    // lwc-rerender
     'component re-rendered',
+    // lwc-ssr-hydrate
+    'component hydrated from server-rendered HTML',
 ];
 // Even if all the browser the engine supports implements the UserTiming API, we need to guard the measure APIs.
 // JSDom (used in Jest) for example doesn't implement the UserTiming APIs.
@@ -5892,13 +5899,14 @@ function getProperties(vm) {
 function getColor(opId) {
     // As of Sept 2024: primary (dark blue), secondary (light blue), tertiary (green)
     switch (opId) {
-        // GlobalHydrate and Constructor tend to occur at the top level
-        case 7 /* OperationId.GlobalHydrate */:
+        // GlobalSsrHydrate, GlobalRender, and Constructor tend to occur at the top level
+        case 7 /* OperationId.GlobalRender */:
+        case 9 /* OperationId.GlobalSsrHydrate */:
         case 0 /* OperationId.Constructor */:
             return 'primary';
-        // GlobalRehydrate also occurs at the top level, but we want to use tertiary (green) because it's easier to
+        // GlobalRerender also occurs at the top level, but we want to use tertiary (green) because it's easier to
         // distinguish from primary, and at a glance you should be able to easily tell re-renders from first renders.
-        case 8 /* OperationId.GlobalRehydrate */:
+        case 8 /* OperationId.GlobalRerender */:
             return 'tertiary';
         // Everything else (patch/render/callbacks)
         default:
@@ -6103,7 +6111,7 @@ function getVMBeingRendered() {
 function setVMBeingRendered(vm) {
     vmBeingRendered = vm;
 }
-const VALID_SCOPE_TOKEN_REGEX = /^[a-zA-Z0-9\-_.]+$/;
+const VALID_SCOPE_TOKEN_REGEX = /^[a-zA-Z0-9\-_]+$/;
 // See W-16614556
 // TODO [#2826]: freeze the template object
 function isValidScopeToken(token) {
@@ -6471,7 +6479,10 @@ function invokeComponentConstructor(vm, Ctor) {
         // the "instanceof" operator would not work here since Locker Service provides its own
         // implementation of LightningElement, so we indirectly check if the base constructor is
         // invoked by accessing the component on the vm.
-        if (vmBeingConstructed.component !== result) {
+        const isInvalidConstructor = lwcRuntimeFlags.LEGACY_LOCKER_ENABLED
+            ? vmBeingConstructed.component !== result
+            : !(result instanceof LightningElement);
+        if (isInvalidConstructor) {
             throw new TypeError('Invalid component constructor, the class should extend LightningElement.');
         }
     }
@@ -6657,10 +6668,10 @@ function connectRootElement(elm) {
     const vm = getAssociatedVM(elm);
     if (process.env.NODE_ENV !== 'production') {
         // Flush any logs for this VM so that the initial properties from the constructor don't "count"
-        // in subsequent re-renders (lwc-rehydrate). Right now we're at the first render (lwc-hydrate).
+        // in subsequent re-renders (lwc-rerender). Right now we're at the first render (lwc-hydrate).
         flushMutationLogsForVM(vm);
     }
-    logGlobalOperationStartWithVM(7 /* OperationId.GlobalHydrate */, vm);
+    logGlobalOperationStartWithVM(7 /* OperationId.GlobalRender */, vm);
     // Usually means moving the element from one place to another, which is observable via
     // life-cycle hooks.
     if (vm.state === 1 /* VMState.connected */) {
@@ -6668,7 +6679,7 @@ function connectRootElement(elm) {
     }
     runConnectedCallback(vm);
     rehydrate(vm);
-    logGlobalOperationEndWithVM(7 /* OperationId.GlobalHydrate */, vm);
+    logGlobalOperationEndWithVM(7 /* OperationId.GlobalRender */, vm);
 }
 function disconnectRootElement(elm) {
     const vm = getAssociatedVM(elm);
@@ -6977,7 +6988,7 @@ function flushRehydrationQueue() {
     // Gather the logs before rehydration starts so they can be reported at the end of rehydration.
     // Note that we also clear all existing logs at this point so that subsequent re-renders start from a clean slate.
     const mutationLogs = process.env.NODE_ENV === 'production' ? undefined : getAndFlushMutationLogs();
-    logGlobalOperationStart(8 /* OperationId.GlobalRehydrate */);
+    logGlobalOperationStart(8 /* OperationId.GlobalRerender */);
     if (process.env.NODE_ENV !== 'production') {
         assert.invariant(rehydrateQueue.length, `If rehydrateQueue was scheduled, it is because there must be at least one VM on this pending queue instead of ${rehydrateQueue}.`);
     }
@@ -6997,13 +7008,13 @@ function flushRehydrationQueue() {
                 ArrayUnshift.apply(rehydrateQueue, ArraySlice.call(vms, i + 1));
             }
             // we need to end the measure before throwing.
-            logGlobalOperationEnd(8 /* OperationId.GlobalRehydrate */, mutationLogs);
+            logGlobalOperationEnd(8 /* OperationId.GlobalRerender */, mutationLogs);
             // re-throwing the original error will break the current tick, but since the next tick is
             // already scheduled, it should continue patching the rest.
             throw error;
         }
     }
-    logGlobalOperationEnd(8 /* OperationId.GlobalRehydrate */, mutationLogs);
+    logGlobalOperationEnd(8 /* OperationId.GlobalRerender */, mutationLogs);
 }
 function runConnectedCallback(vm) {
     const { state } = vm;
@@ -7525,6 +7536,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.
@@ -7537,11 +7620,20 @@ const EMPTY_SET = new Set();
 let hasMismatch = false;
 function hydrateRoot(vm) {
     hasMismatch = false;
+    logGlobalOperationStartWithVM(9 /* OperationId.GlobalSsrHydrate */, vm);
     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.');
+        }
     }
+    logGlobalOperationEndWithVM(9 /* OperationId.GlobalSsrHydrate */, vm);
 }
 function hydrateVM(vm) {
     const children = renderComponent(vm);
@@ -7549,7 +7641,9 @@ function hydrateVM(vm) {
     // reset the refs; they will be set during `hydrateChildren`
     resetRefVNodes(vm);
     const { renderRoot: parentNode, renderer: { getFirstChild }, } = vm;
+    logOperationStart(2 /* OperationId.Patch */, vm);
     hydrateChildren(getFirstChild(parentNode), children, parentNode, vm, false);
+    logOperationEnd(2 /* OperationId.Patch */, vm);
     runRenderedCallback(vm);
 }
 function hydrateNode(node, vnode, renderer) {
@@ -7578,21 +7672,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 +7713,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 +7733,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 +7748,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 +7766,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 +7794,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 +7807,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 +7840,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 +7876,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 +7890,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 +7907,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 +7919,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 +7942,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 +7973,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 +7986,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 +8014,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 +8059,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 +8097,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 +8132,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 +8143,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 +8157,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 +8165,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 +8434,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.2 */
+/** version: 8.12.7 */
 //# sourceMappingURL=index.js.map