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

package/dist/index.cjs.js

@@ -251,16 +251,6 @@ 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.
@@ -601,14 +591,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 the following to ensure re-render is subscribed at the correct time.
+    // We check 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) &&
-        safeHasProp(target, 'value') &&
-        safeHasProp(target, 'subscribe') &&
+        'value' in target &&
+        'subscribe' in target &&
         shared.isFunction(target.subscribe) &&
         shared.isTrustedSignal(target) &&
         // Only subscribe if a template is being rendered by the engine
@@ -2960,10 +2950,7 @@ function HTMLBridgeElementFactory(SuperClass, publicProperties, methods, observe
     const { observedAttributes: superObservedAttributes = [] } = SuperClass;
     const descriptors = shared.create(null);
     // present a hint message so that developers are aware that they have not decorated property with @api
-    // 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) {
+    if (process.env.NODE_ENV !== 'production') {
         // TODO [#3761]: enable for components that don't extend from LightningElement
         if (!shared.isUndefined(proto) && !shared.isNull(proto) && !hasCustomSuperClass) {
             const nonPublicPropertiesToWarnOn = new Set([
@@ -3980,6 +3967,15 @@ 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.
@@ -5824,9 +5820,8 @@ const operationIdNameMapping = [
     'renderedCallback',
     'disconnectedCallback',
     'errorCallback',
-    'lwc-render',
-    'lwc-rerender',
-    'lwc-ssr-hydrate',
+    'lwc-hydrate',
+    'lwc-rehydrate',
 ];
 const operationTooltipMapping = [
     // constructor
@@ -5843,12 +5838,10 @@ const operationTooltipMapping = [
     'component disconnectedCallback()',
     // errorCallback
     'component errorCallback()',
-    // lwc-render
+    // lwc-hydrate
     'component first rendered',
-    // lwc-rerender
+    // lwc-rehydrate
     '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.
@@ -5902,14 +5895,13 @@ function getProperties(vm) {
 function getColor(opId) {
     // As of Sept 2024: primary (dark blue), secondary (light blue), tertiary (green)
     switch (opId) {
-        // GlobalSsrHydrate, GlobalRender, and Constructor tend to occur at the top level
-        case 7 /* OperationId.GlobalRender */:
-        case 9 /* OperationId.GlobalSsrHydrate */:
+        // GlobalHydrate and Constructor tend to occur at the top level
+        case 7 /* OperationId.GlobalHydrate */:
         case 0 /* OperationId.Constructor */:
             return 'primary';
-        // GlobalRerender also occurs at the top level, but we want to use tertiary (green) because it's easier to
+        // GlobalRehydrate 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.GlobalRerender */:
+        case 8 /* OperationId.GlobalRehydrate */:
             return 'tertiary';
         // Everything else (patch/render/callbacks)
         default:
@@ -6114,7 +6106,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) {
@@ -6482,10 +6474,7 @@ 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.
-        const isInvalidConstructor = lwcRuntimeFlags.LEGACY_LOCKER_ENABLED
-            ? vmBeingConstructed.component !== result
-            : !(result instanceof LightningElement);
-        if (isInvalidConstructor) {
+        if (vmBeingConstructed.component !== result) {
             throw new TypeError('Invalid component constructor, the class should extend LightningElement.');
         }
     }
@@ -6671,10 +6660,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-rerender). Right now we're at the first render (lwc-hydrate).
+        // in subsequent re-renders (lwc-rehydrate). Right now we're at the first render (lwc-hydrate).
         flushMutationLogsForVM(vm);
     }
-    logGlobalOperationStartWithVM(7 /* OperationId.GlobalRender */, vm);
+    logGlobalOperationStartWithVM(7 /* OperationId.GlobalHydrate */, vm);
     // Usually means moving the element from one place to another, which is observable via
     // life-cycle hooks.
     if (vm.state === 1 /* VMState.connected */) {
@@ -6682,7 +6671,7 @@ function connectRootElement(elm) {
     }
     runConnectedCallback(vm);
     rehydrate(vm);
-    logGlobalOperationEndWithVM(7 /* OperationId.GlobalRender */, vm);
+    logGlobalOperationEndWithVM(7 /* OperationId.GlobalHydrate */, vm);
 }
 function disconnectRootElement(elm) {
     const vm = getAssociatedVM(elm);
@@ -6991,7 +6980,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.GlobalRerender */);
+    logGlobalOperationStart(8 /* OperationId.GlobalRehydrate */);
     if (process.env.NODE_ENV !== 'production') {
         shared.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}.`);
     }
@@ -7011,13 +7000,13 @@ function flushRehydrationQueue() {
                 shared.ArrayUnshift.apply(rehydrateQueue, shared.ArraySlice.call(vms, i + 1));
             }
             // we need to end the measure before throwing.
-            logGlobalOperationEnd(8 /* OperationId.GlobalRerender */, mutationLogs);
+            logGlobalOperationEnd(8 /* OperationId.GlobalRehydrate */, 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.GlobalRerender */, mutationLogs);
+    logGlobalOperationEnd(8 /* OperationId.GlobalRehydrate */, mutationLogs);
 }
 function runConnectedCallback(vm) {
     const { state } = vm;
@@ -7539,78 +7528,6 @@ 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.
@@ -7623,20 +7540,11 @@ const EMPTY_SET = new Set();
 let hasMismatch = false;
 function hydrateRoot(vm) {
     hasMismatch = false;
-    logGlobalOperationStartWithVM(9 /* OperationId.GlobalSsrHydrate */, vm);
     runConnectedCallback(vm);
     hydrateVM(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.');
-        }
+    if (hasMismatch && process.env.NODE_ENV !== 'production') {
+        logWarn('Hydration completed with errors.', vm);
     }
-    logGlobalOperationEndWithVM(9 /* OperationId.GlobalSsrHydrate */, vm);
 }
 function hydrateVM(vm) {
     const children = renderComponent(vm);
@@ -7644,9 +7552,7 @@ 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) {
@@ -7675,25 +7581,21 @@ 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 validateTextNodeEquality(node, vnode, renderer) {
+function textNodeContentsAreEqual(node, vnode, renderer) {
     const { getProperty } = renderer;
     const nodeValue = getProperty(node, NODE_VALUE_PROP);
-    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);
+    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;
     }
+    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
@@ -7716,7 +7618,7 @@ function getValidationPredicate(elm, renderer, optOutStaticProp) {
         !shared.isUndefined(optOutStaticProp) &&
         !shared.isTrue(optOutStaticProp) &&
         !isValidArray) {
-        logHydrationWarning('`validationOptOut` must be `true` or an array of attributes that should not be validated.');
+        logWarn('`validationOptOut` must be `true` or an array of attributes that should not be validated.');
     }
     return (attrName) => {
         // Component wants to opt out of all validation
@@ -7736,14 +7638,16 @@ function getValidationPredicate(elm, renderer, optOutStaticProp) {
     };
 }
 function hydrateText(node, vnode, renderer) {
-    if (!isTypeText(node)) {
+    if (!hasCorrectNodeType(vnode, node, 3 /* EnvNodeTypes.TEXT */, renderer)) {
         return handleMismatch(node, vnode, renderer);
     }
-    return updateTextContent(node, vnode, renderer);
+    return updateTextContent(node, vnode, vnode.owner, renderer);
 }
-function updateTextContent(node, vnode, renderer) {
+function updateTextContent(node, vnode, owner, renderer) {
     if (process.env.NODE_ENV !== 'production') {
-        validateTextNodeEquality(node, vnode, renderer);
+        if (!textNodeContentsAreEqual(node, vnode, renderer)) {
+            logWarn('Hydration mismatch: text values do not match, will recover from the difference', owner);
+        }
     }
     const { setText } = renderer;
     setText(node, vnode.text ?? null);
@@ -7751,14 +7655,14 @@ function updateTextContent(node, vnode, renderer) {
     return node;
 }
 function hydrateComment(node, vnode, renderer) {
-    if (!isTypeComment(node)) {
+    if (!hasCorrectNodeType(vnode, node, 8 /* EnvNodeTypes.COMMENT */, renderer)) {
         return handleMismatch(node, vnode, renderer);
     }
     if (process.env.NODE_ENV !== 'production') {
         const { getProperty } = renderer;
         const nodeValue = getProperty(node, NODE_VALUE_PROP);
         if (nodeValue !== vnode.text) {
-            queueHydrationError('comment', nodeValue, vnode.text);
+            logWarn('Hydration mismatch: comment values do not match, will recover from the difference', vnode.owner);
         }
     }
     const { setProperty } = renderer;
@@ -7769,12 +7673,11 @@ function hydrateComment(node, vnode, renderer) {
     return node;
 }
 function hydrateStaticElement(elm, vnode, renderer) {
-    if (isTypeElement(elm) &&
-        isTypeElement(vnode.fragment) &&
-        areStaticElementsCompatible(vnode.fragment, elm, vnode, renderer)) {
-        return hydrateStaticElementParts(elm, vnode, renderer);
+    if (!hasCorrectNodeType(vnode, elm, 1 /* EnvNodeTypes.ELEMENT */, renderer) ||
+        !areCompatibleStaticNodes(vnode.fragment, elm, vnode, renderer)) {
+        return handleMismatch(elm, vnode, renderer);
     }
-    return handleMismatch(elm, vnode, renderer);
+    return hydrateStaticElementParts(elm, vnode, renderer);
 }
 function hydrateStaticElementParts(elm, vnode, renderer) {
     const { parts } = vnode;
@@ -7797,7 +7700,8 @@ function hydrateFragment(elm, vnode, renderer) {
     return (vnode.elm = children[children.length - 1].elm);
 }
 function hydrateElement(elm, vnode, renderer) {
-    if (!isTypeElement(elm) || !isMatchingElement(vnode, elm, renderer)) {
+    if (!hasCorrectNodeType(vnode, elm, 1 /* EnvNodeTypes.ELEMENT */, renderer) ||
+        !isMatchingElement(vnode, elm, renderer)) {
         return handleMismatch(elm, vnode, renderer);
     }
     vnode.elm = elm;
@@ -7810,17 +7714,17 @@ function hydrateElement(elm, vnode, renderer) {
         const { data: { props }, } = vnode;
         const { getProperty } = renderer;
         if (!shared.isUndefined(props) && !shared.isUndefined(props.innerHTML)) {
-            const unwrappedServerInnerHTML = unwrapIfNecessary(getProperty(elm, 'innerHTML'));
-            const unwrappedClientInnerHTML = unwrapIfNecessary(props.innerHTML);
-            if (unwrappedServerInnerHTML === unwrappedClientInnerHTML) {
+            if (isSanitizedHtmlContentEqual(getProperty(elm, 'innerHTML'), props.innerHTML)) {
                 // 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') {
-                queueHydrationError('innerHTML', unwrappedServerInnerHTML, unwrappedClientInnerHTML);
+            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);
+                }
             }
         }
     }
@@ -7843,7 +7747,8 @@ 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 (!isTypeElement(elm) || !isMatchingElement(vnode, elm, renderer, shouldValidateAttr)) {
+    if (!hasCorrectNodeType(vnode, elm, 1 /* EnvNodeTypes.ELEMENT */, renderer) ||
+        !isMatchingElement(vnode, elm, renderer, shouldValidateAttr)) {
         return handleMismatch(elm, vnode, renderer);
     }
     const { sel, mode, ctor, owner } = vnode;
@@ -7879,13 +7784,9 @@ 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 mismatchedChildren = false;
+    let hasWarned = 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)) {
@@ -7893,7 +7794,13 @@ expectAddlSiblings) {
                 nextNode = hydrateNode(nextNode, childVnode, renderer);
             }
             else {
-                mismatchedChildren = true;
+                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);
+                    }
+                }
                 mount(childVnode, parentNode, renderer, nextNode);
                 nextNode = renderer.nextSibling(childVnode.type === 5 /* VNodeType.Fragment */ ? childVnode.trailing : childVnode.elm);
             }
@@ -7910,7 +7817,12 @@ expectAddlSiblings) {
     // rendered more nodes than the client.
     (!useCommentsForBookends || !expectAddlSiblings) &&
         nextNode) {
-        mismatchedChildren = true;
+        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);
+            }
+        }
         // 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
@@ -7922,14 +7834,6 @@ 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;
@@ -7945,21 +7849,31 @@ 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') {
-            queueHydrationError('node', elm);
+            logWarn(`Hydration mismatch: expecting element with tag "${vnode.sel.toLowerCase()}" but found "${getProperty(elm, 'tagName').toLowerCase()}".`, vnode.owner);
         }
         return false;
     }
     const { data } = vnode;
-    const hasCompatibleAttrs = validateAttrs(elm, data, renderer, shouldValidateAttr);
+    const hasCompatibleAttrs = validateAttrs(vnode, elm, data, renderer, shouldValidateAttr);
     const hasCompatibleClass = shouldValidateAttr('class')
         ? validateClassAttr(vnode, elm, data, renderer)
         : true;
     const hasCompatibleStyle = shouldValidateAttr('style')
-        ? validateStyleAttr(elm, data, renderer)
+        ? validateStyleAttr(vnode, elm, data, renderer)
         : true;
     return hasCompatibleAttrs && hasCompatibleClass && hasCompatibleStyle;
 }
@@ -7976,7 +7890,7 @@ function attributeValuesAreEqual(vnodeValue, value) {
     // In all other cases, the two values are not considered equal
     return false;
 }
-function validateAttrs(elm, data, renderer, shouldValidateAttr) {
+function validateAttrs(vnode, elm, data, renderer, shouldValidateAttr) {
     const { attrs = {} } = data;
     let nodesAreCompatible = true;
     // Validate attributes, though we could always recovery from those by running the update mods.
@@ -7989,7 +7903,8 @@ function validateAttrs(elm, data, renderer, shouldValidateAttr) {
         const elmAttrValue = getAttribute(elm, attrName);
         if (!attributeValuesAreEqual(attrValue, elmAttrValue)) {
             if (process.env.NODE_ENV !== 'production') {
-                queueHydrationError('attribute', prettyPrintAttribute(attrName, elmAttrValue), prettyPrintAttribute(attrName, attrValue));
+                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);
             }
             nodesAreCompatible = false;
         }
@@ -8017,6 +7932,7 @@ 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.
@@ -8062,11 +7978,12 @@ function validateClassAttr(vnode, elm, data, renderer) {
     // ---------- Step 3: check for compatibility
     const classesAreCompatible = checkClassesCompatibility(vnodeClasses, elmClasses);
     if (process.env.NODE_ENV !== 'production' && !classesAreCompatible) {
-        queueHydrationError('attribute', prettyPrintClasses(elmClasses), prettyPrintClasses(vnodeClasses));
+        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);
     }
     return classesAreCompatible;
 }
-function validateStyleAttr(elm, data, renderer) {
+function validateStyleAttr(vnode, elm, data, renderer) {
     // Note styleDecls is always undefined for VStaticPartData, casting here to default it to undefined
     const { style, styleDecls } = data;
     const { getAttribute } = renderer;
@@ -8100,33 +8017,49 @@ function validateStyleAttr(elm, data, renderer) {
         }
         vnodeStyle = shared.ArrayJoin.call(expectedStyle, ' ');
     }
-    if (process.env.NODE_ENV !== 'production' && !nodesAreCompatible) {
-        queueHydrationError('attribute', prettyPrintAttribute('style', elmStyle), prettyPrintAttribute('style', vnodeStyle));
+    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);
+        }
     }
     return nodesAreCompatible;
 }
-function areStaticElementsCompatible(clientElement, serverElement, vnode, renderer) {
+function areCompatibleStaticNodes(client, ssr, vnode, renderer) {
     const { getProperty, getAttribute } = renderer;
-    const { parts } = vnode;
+    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;
     let isCompatibleElements = true;
-    if (getProperty(clientElement, 'tagName') !== getProperty(serverElement, 'tagName')) {
+    if (getProperty(client, 'tagName') !== getProperty(ssr, 'tagName')) {
         if (process.env.NODE_ENV !== 'production') {
-            queueHydrationError('node', serverElement);
+            logWarn(`Hydration mismatch: expecting element with tag "${getProperty(client, 'tagName').toLowerCase()}" but found "${getProperty(ssr, 'tagName').toLowerCase()}".`, owner);
         }
         return false;
     }
-    const clientAttrsNames = getProperty(clientElement, 'getAttributeNames').call(clientElement);
+    const clientAttrsNames = getProperty(client, 'getAttributeNames').call(client);
     clientAttrsNames.forEach((attrName) => {
-        const clientAttributeValue = getAttribute(clientElement, attrName);
-        const serverAttributeValue = getAttribute(serverElement, attrName);
-        if (clientAttributeValue !== serverAttributeValue) {
+        if (getAttribute(client, attrName) !== getAttribute(ssr, attrName)) {
             // 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') {
-                    queueHydrationError('attribute', prettyPrintAttribute(attrName, serverAttributeValue), prettyPrintAttribute(attrName, clientAttributeValue));
+                    logWarn(`Mismatch hydrating element <${getProperty(client, 'tagName').toLowerCase()}>: attribute "${attrName}" has different values, expected "${getAttribute(client, attrName)}" but found "${getAttribute(ssr, attrName)}"`, owner);
                 }
                 isCompatibleElements = false;
             }
@@ -8135,7 +8068,7 @@ function areStaticElementsCompatible(clientElement, serverElement, vnode, render
     return isCompatibleElements;
 }
 function haveCompatibleStaticParts(vnode, renderer) {
-    const { parts } = vnode;
+    const { parts, owner } = vnode;
     if (shared.isUndefined(parts)) {
         return true;
     }
@@ -8146,11 +8079,11 @@ function haveCompatibleStaticParts(vnode, renderer) {
     for (const part of parts) {
         const { elm } = part;
         if (isVStaticPartElement(part)) {
-            if (!isTypeElement(elm)) {
+            if (!hasCorrectNodeType(vnode, elm, 1 /* EnvNodeTypes.ELEMENT */, renderer)) {
                 return false;
             }
             const { data } = part;
-            const hasMatchingAttrs = validateAttrs(elm, data, renderer, () => true);
+            const hasMatchingAttrs = validateAttrs(vnode, 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.
@@ -8160,7 +8093,7 @@ function haveCompatibleStaticParts(vnode, renderer) {
                 ? validateClassAttr(vnode, elm, data, renderer)
                 : true;
             const hasMatchingStyleAttr = shouldValidateAttr(data, 'style')
-                ? validateStyleAttr(elm, data, renderer)
+                ? validateStyleAttr(vnode, elm, data, renderer)
                 : true;
             if (shared.isFalse(hasMatchingAttrs && hasMatchingClass && hasMatchingStyleAttr)) {
                 return false;
@@ -8168,10 +8101,10 @@ function haveCompatibleStaticParts(vnode, renderer) {
         }
         else {
             // VStaticPartText
-            if (!isTypeText(elm)) {
+            if (!hasCorrectNodeType(vnode, elm, 3 /* EnvNodeTypes.TEXT */, renderer)) {
                 return false;
             }
-            updateTextContent(elm, part, renderer);
+            updateTextContent(elm, part, owner, renderer);
         }
     }
     return true;
@@ -8488,5 +8421,5 @@ exports.swapTemplate = swapTemplate;
 exports.track = track;
 exports.unwrap = unwrap;
 exports.wire = wire;
-/** version: 8.12.6 */
+/** version: 8.12.2 */
 //# sourceMappingURL=index.cjs.js.map