@lwc/engine-core 2.11.0 → 2.12.0

package/dist/engine-core.cjs.js

@@ -4705,11 +4705,15 @@ const signedTemplateMap = new Map();
  * INTERNAL: This function can only be invoked by compiled code. The compiler
  * will prevent this function from being imported by userland code.
  */
-function registerComponent(Ctor, { tmpl }) {
-    if (process.env.NODE_ENV !== 'production') {
-        checkVersionMismatch(Ctor, 'component');
+function registerComponent(
+// We typically expect a LightningElementConstructor, but technically you can call this with anything
+Ctor, { tmpl }) {
+    if (shared.isFunction(Ctor)) {
+        if (process.env.NODE_ENV !== 'production') {
+            checkVersionMismatch(Ctor, 'component');
+        }
+        signedTemplateMap.set(Ctor, tmpl);
     }
-    signedTemplateMap.set(Ctor, tmpl);
     // chaining this method as a way to wrap existing assignment of component constructor easily,
     // without too much transformation
     return Ctor;
@@ -4798,236 +4802,6 @@ function invokeServiceHook(vm, cbs) {
     }
 }
 
-/*
- * Copyright (c) 2022, salesforce.com, 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
- */
-function hydrate(vnode, node) {
-    switch (vnode.type) {
-        case 0 /* Text */:
-            hydrateText(vnode, node);
-            break;
-        case 1 /* Comment */:
-            hydrateComment(vnode, node);
-            break;
-        case 2 /* Element */:
-            hydrateElement(vnode, node);
-            break;
-        case 3 /* CustomElement */:
-            hydrateCustomElement(vnode, node);
-            break;
-    }
-}
-function hydrateText(vnode, node) {
-    var _a;
-    if (process.env.NODE_ENV !== 'production') {
-        validateNodeType(vnode, node, 3 /* TEXT */);
-        const nodeValue = getProperty(node, 'nodeValue');
-        if (nodeValue !== vnode.text && !(nodeValue === '\u200D' && vnode.text === '')) {
-            logWarn('Hydration mismatch: text values do not match, will recover from the difference', vnode.owner);
-        }
-    }
-    // always set the text value to the one from the vnode.
-    setText(node, (_a = vnode.text) !== null && _a !== void 0 ? _a : null);
-    vnode.elm = node;
-}
-function hydrateComment(vnode, node) {
-    var _a;
-    if (process.env.NODE_ENV !== 'production') {
-        validateNodeType(vnode, node, 8 /* COMMENT */);
-        if (getProperty(node, 'nodeValue') !== vnode.text) {
-            logWarn('Hydration mismatch: comment values do not match, will recover from the difference', vnode.owner);
-        }
-    }
-    // always set the text value to the one from the vnode.
-    setProperty(node, 'nodeValue', (_a = vnode.text) !== null && _a !== void 0 ? _a : null);
-    vnode.elm = node;
-}
-function hydrateElement(vnode, node) {
-    if (process.env.NODE_ENV !== 'production') {
-        validateNodeType(vnode, node, 1 /* ELEMENT */);
-        validateElement(vnode, node);
-    }
-    const elm = node;
-    vnode.elm = elm;
-    const { context } = vnode.data;
-    const isDomManual = Boolean(!shared.isUndefined(context) && !shared.isUndefined(context.lwc) && context.lwc.dom === "manual" /* Manual */);
-    if (isDomManual) {
-        // it may be that this element has lwc:inner-html, we need to diff and in case are the same,
-        // remove the innerHTML from props so it reuses the existing dom elements.
-        const { props } = vnode.data;
-        if (!shared.isUndefined(props) && !shared.isUndefined(props.innerHTML)) {
-            if (getProperty(elm, 'innerHTML') === props.innerHTML) {
-                // Do a shallow clone since VNodeData may be shared across VNodes due to hoist optimization
-                vnode.data = Object.assign(Object.assign({}, vnode.data), { props: cloneAndOmitKey(props, 'innerHTML') });
-            }
-            else {
-                logWarn(`Mismatch hydrating element <${getProperty(elm, 'tagName').toLowerCase()}>: innerHTML values do not match for element, will recover from the difference`, vnode.owner);
-            }
-        }
-    }
-    patchElementPropsAndAttrs(vnode);
-    if (!isDomManual) {
-        hydrateChildren(getChildNodes(vnode.elm), vnode.children, vnode.owner);
-    }
-}
-function hydrateCustomElement(vnode, node) {
-    if (process.env.NODE_ENV !== 'production') {
-        validateNodeType(vnode, node, 1 /* ELEMENT */);
-        validateElement(vnode, node);
-    }
-    const elm = node;
-    const { sel, mode, ctor, owner } = vnode;
-    const vm = createVM(elm, ctor, {
-        mode,
-        owner,
-        tagName: sel,
-    });
-    vnode.elm = elm;
-    vnode.vm = vm;
-    allocateChildren(vnode, vm);
-    patchElementPropsAndAttrs(vnode);
-    // Insert hook section:
-    if (process.env.NODE_ENV !== 'production') {
-        shared.assert.isTrue(vm.state === 0 /* created */, `${vm} cannot be recycled.`);
-    }
-    runConnectedCallback(vm);
-    if (vm.renderMode !== 0 /* Light */) {
-        // VM is not rendering in Light DOM, we can proceed and hydrate the slotted content.
-        // Note: for Light DOM, this is handled while hydrating the VM
-        hydrateChildren(getChildNodes(vnode.elm), vnode.children, vm);
-    }
-    hydrateVM(vm);
-}
-function hydrateChildren(elmChildren, children, vm) {
-    if (process.env.NODE_ENV !== 'production') {
-        const filteredVNodes = shared.ArrayFilter.call(children, (vnode) => !!vnode);
-        if (elmChildren.length !== filteredVNodes.length) {
-            logError(`Hydration mismatch: incorrect number of rendered nodes, expected ${filteredVNodes.length} but found ${elmChildren.length}.`, vm);
-            throwHydrationError();
-        }
-    }
-    let childNodeIndex = 0;
-    for (let i = 0; i < children.length; i++) {
-        const childVnode = children[i];
-        if (!shared.isNull(childVnode)) {
-            const childNode = elmChildren[childNodeIndex];
-            hydrate(childVnode, childNode);
-            childNodeIndex++;
-        }
-    }
-}
-function patchElementPropsAndAttrs(vnode) {
-    applyEventListeners(vnode);
-    patchProps(null, vnode);
-}
-function throwHydrationError() {
-    shared.assert.fail('Server rendered elements do not match client side generated elements');
-}
-function validateNodeType(vnode, node, nodeType) {
-    if (getProperty(node, 'nodeType') !== nodeType) {
-        logError('Hydration mismatch: incorrect node type received', vnode.owner);
-        shared.assert.fail('Hydration mismatch: incorrect node type received.');
-    }
-}
-function validateElement(vnode, elm) {
-    if (vnode.sel.toLowerCase() !== getProperty(elm, 'tagName').toLowerCase()) {
-        logError(`Hydration mismatch: expecting element with tag "${vnode.sel.toLowerCase()}" but found "${getProperty(elm, 'tagName').toLowerCase()}".`, vnode.owner);
-        throwHydrationError();
-    }
-    const hasIncompatibleAttrs = validateAttrs(vnode, elm);
-    const hasIncompatibleClass = validateClassAttr(vnode, elm);
-    const hasIncompatibleStyle = validateStyleAttr(vnode, elm);
-    const isVNodeAndElementCompatible = hasIncompatibleAttrs && hasIncompatibleClass && hasIncompatibleStyle;
-    if (!isVNodeAndElementCompatible) {
-        throwHydrationError();
-    }
-}
-function validateAttrs(vnode, elm) {
-    const { data: { attrs = {} }, } = vnode;
-    let nodesAreCompatible = true;
-    // Validate attributes, though we could always recovery from those by running the update mods.
-    // Note: intentionally ONLY matching vnodes.attrs to elm.attrs, in case SSR is adding extra attributes.
-    for (const [attrName, attrValue] of Object.entries(attrs)) {
-        const elmAttrValue = getAttribute(elm, attrName);
-        if (String(attrValue) !== elmAttrValue) {
-            logError(`Mismatch hydrating element <${getProperty(elm, 'tagName').toLowerCase()}>: attribute "${attrName}" has different values, expected "${attrValue}" but found "${elmAttrValue}"`, vnode.owner);
-            nodesAreCompatible = false;
-        }
-    }
-    return nodesAreCompatible;
-}
-function validateClassAttr(vnode, elm) {
-    const { data: { className, classMap }, } = vnode;
-    let nodesAreCompatible = true;
-    let vnodeClassName;
-    if (!shared.isUndefined(className) && String(className) !== getProperty(elm, 'className')) {
-        // className is used when class is bound to an expr.
-        nodesAreCompatible = false;
-        vnodeClassName = className;
-    }
-    else if (!shared.isUndefined(classMap)) {
-        // classMap is used when class is set to static value.
-        const classList = getClassList(elm);
-        let computedClassName = '';
-        // all classes from the vnode should be in the element.classList
-        for (const name in classMap) {
-            computedClassName += ' ' + name;
-            if (!classList.contains(name)) {
-                nodesAreCompatible = false;
-            }
-        }
-        vnodeClassName = computedClassName.trim();
-        if (classList.length > shared.keys(classMap).length) {
-            nodesAreCompatible = false;
-        }
-    }
-    if (!nodesAreCompatible) {
-        logError(`Mismatch hydrating element <${getProperty(elm, 'tagName').toLowerCase()}>: attribute "class" has different values, expected "${vnodeClassName}" but found "${getProperty(elm, 'className')}"`, vnode.owner);
-    }
-    return nodesAreCompatible;
-}
-function validateStyleAttr(vnode, elm) {
-    const { data: { style, styleDecls }, } = vnode;
-    const elmStyle = getAttribute(elm, 'style') || '';
-    let vnodeStyle;
-    let nodesAreCompatible = true;
-    if (!shared.isUndefined(style) && style !== elmStyle) {
-        nodesAreCompatible = false;
-        vnodeStyle = style;
-    }
-    else if (!shared.isUndefined(styleDecls)) {
-        const parsedVnodeStyle = parseStyleText(elmStyle);
-        const expectedStyle = [];
-        // styleMap is used when style is set to static value.
-        for (let i = 0, n = styleDecls.length; i < n; i++) {
-            const [prop, value, important] = styleDecls[i];
-            expectedStyle.push(`${prop}: ${value + (important ? ' important!' : '')}`);
-            const parsedPropValue = parsedVnodeStyle[prop];
-            if (shared.isUndefined(parsedPropValue)) {
-                nodesAreCompatible = false;
-            }
-            else if (!parsedPropValue.startsWith(value)) {
-                nodesAreCompatible = false;
-            }
-            else if (important && !parsedPropValue.endsWith('!important')) {
-                nodesAreCompatible = false;
-            }
-        }
-        if (shared.keys(parsedVnodeStyle).length > styleDecls.length) {
-            nodesAreCompatible = false;
-        }
-        vnodeStyle = shared.ArrayJoin.call(expectedStyle, ';');
-    }
-    if (!nodesAreCompatible) {
-        // style is used when class is bound to an expr.
-        logError(`Mismatch hydrating element <${getProperty(elm, 'tagName').toLowerCase()}>: attribute "style" has different values, expected "${vnodeStyle}" but found "${elmStyle}".`, vnode.owner);
-    }
-    return nodesAreCompatible;
-}
-
 /*
  * Copyright (c) 2018, salesforce.com, inc.
  * All rights reserved.
@@ -5073,32 +4847,12 @@ function connectRootElement(elm) {
   /* GlobalHydrate */
   , vm);
 }
-function hydrateRootElement(elm) {
-  const vm = getAssociatedVM(elm);
-  runConnectedCallback(vm);
-  hydrateVM(vm);
-}
 function disconnectRootElement(elm) {
   const vm = getAssociatedVM(elm);
   resetComponentStateWhenRemoved(vm);
 }
 function appendVM(vm) {
   rehydrate(vm);
-}
-function hydrateVM(vm) {
-  if (shared.isTrue(vm.isDirty)) {
-    // manually diffing/patching here.
-    // This routine is:
-    // patchShadowRoot(vm, children);
-    //  -> addVnodes.
-    const children = renderComponent(vm);
-    vm.children = children;
-    const vmChildren = vm.renderMode === 0
-    /* Light */
-    ? getChildNodes(vm.elm) : getChildNodes(vm.elm.shadowRoot);
-    hydrateChildren(vmChildren, children, vm);
-    runRenderedCallback(vm);
-  }
 } // just in case the component comes back, with this we guarantee re-rendering it
 // while preventing any attempt to rehydration until after reinsertion.
 
@@ -5403,7 +5157,6 @@ function runRenderedCallback(vm) {
     , vm);
   }
 }
-
 let rehydrateQueue = [];
 
 function flushRehydrationQueue() {
@@ -6060,6 +5813,298 @@ function readonly(obj) {
     return reactiveMembrane.getReadOnlyProxy(obj);
 }
 
+/*
+ * Copyright (c) 2022, salesforce.com, 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
+ */
+// flag indicating if the hydration recovered from the DOM mismatch
+let hasMismatch = false;
+function hydrateRoot(vm) {
+    hasMismatch = false;
+    runConnectedCallback(vm);
+    hydrateVM(vm);
+    if (hasMismatch) {
+        logError('Hydration completed with errors.', vm);
+    }
+}
+function hydrateVM(vm) {
+    const children = renderComponent(vm);
+    vm.children = children;
+    const parentNode = vm.renderRoot;
+    hydrateChildren(getFirstChild(parentNode), children, parentNode, vm);
+    runRenderedCallback(vm);
+}
+function hydrateNode(node, vnode) {
+    let hydratedNode;
+    switch (vnode.type) {
+        case 0 /* Text */:
+            hydratedNode = hydrateText(node, vnode);
+            break;
+        case 1 /* Comment */:
+            hydratedNode = hydrateComment(node, vnode);
+            break;
+        case 2 /* Element */:
+            hydratedNode = hydrateElement(node, vnode);
+            break;
+        case 3 /* CustomElement */:
+            hydratedNode = hydrateCustomElement(node, vnode);
+            break;
+    }
+    return nextSibling(hydratedNode);
+}
+function hydrateText(node, vnode) {
+    var _a;
+    if (!hasCorrectNodeType(vnode, node, 3 /* TEXT */)) {
+        return handleMismatch(node, vnode);
+    }
+    if (process.env.NODE_ENV !== 'production') {
+        const nodeValue = getProperty(node, 'nodeValue');
+        if (nodeValue !== vnode.text && !(nodeValue === '\u200D' && vnode.text === '')) {
+            logWarn('Hydration mismatch: text values do not match, will recover from the difference', vnode.owner);
+        }
+    }
+    setText(node, (_a = vnode.text) !== null && _a !== void 0 ? _a : null);
+    vnode.elm = node;
+    return node;
+}
+function hydrateComment(node, vnode) {
+    var _a;
+    if (!hasCorrectNodeType(vnode, node, 8 /* COMMENT */)) {
+        return handleMismatch(node, vnode);
+    }
+    if (process.env.NODE_ENV !== 'production') {
+        const nodeValue = getProperty(node, 'nodeValue');
+        if (nodeValue !== vnode.text) {
+            logWarn('Hydration mismatch: comment values do not match, will recover from the difference', vnode.owner);
+        }
+    }
+    setProperty(node, 'nodeValue', (_a = vnode.text) !== null && _a !== void 0 ? _a : null);
+    vnode.elm = node;
+    return node;
+}
+function hydrateElement(elm, vnode) {
+    if (!hasCorrectNodeType(vnode, elm, 1 /* ELEMENT */) ||
+        !isMatchingElement(vnode, elm)) {
+        return handleMismatch(elm, vnode);
+    }
+    vnode.elm = elm;
+    const { context } = vnode.data;
+    const isDomManual = Boolean(!shared.isUndefined(context) && !shared.isUndefined(context.lwc) && context.lwc.dom === "manual" /* Manual */);
+    if (isDomManual) {
+        // it may be that this element has lwc:inner-html, we need to diff and in case are the same,
+        // remove the innerHTML from props so it reuses the existing dom elements.
+        const { props } = vnode.data;
+        if (!shared.isUndefined(props) && !shared.isUndefined(props.innerHTML)) {
+            if (getProperty(elm, 'innerHTML') === props.innerHTML) {
+                // Do a shallow clone since VNodeData may be shared across VNodes due to hoist optimization
+                vnode.data = Object.assign(Object.assign({}, 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`, vnode.owner);
+                }
+            }
+        }
+    }
+    patchElementPropsAndAttrs(vnode);
+    if (!isDomManual) {
+        hydrateChildren(getFirstChild(elm), vnode.children, elm, vnode.owner);
+    }
+    return elm;
+}
+function hydrateCustomElement(elm, vnode) {
+    if (!hasCorrectNodeType(vnode, elm, 1 /* ELEMENT */) ||
+        !isMatchingElement(vnode, elm)) {
+        return handleMismatch(elm, vnode);
+    }
+    const { sel, mode, ctor, owner } = vnode;
+    const vm = createVM(elm, ctor, {
+        mode,
+        owner,
+        tagName: sel,
+    });
+    vnode.elm = elm;
+    vnode.vm = vm;
+    allocateChildren(vnode, vm);
+    patchElementPropsAndAttrs(vnode);
+    // Insert hook section:
+    if (process.env.NODE_ENV !== 'production') {
+        shared.assert.isTrue(vm.state === 0 /* created */, `${vm} cannot be recycled.`);
+    }
+    runConnectedCallback(vm);
+    if (vm.renderMode !== 0 /* Light */) {
+        // VM is not rendering in Light DOM, we can proceed and hydrate the slotted content.
+        // Note: for Light DOM, this is handled while hydrating the VM
+        hydrateChildren(getFirstChild(elm), vnode.children, elm, vm);
+    }
+    hydrateVM(vm);
+    return elm;
+}
+function hydrateChildren(node, children, parentNode, owner) {
+    let hasWarned = false;
+    let nextNode = node;
+    let anchor = null;
+    for (let i = 0; i < children.length; i++) {
+        const childVnode = children[i];
+        if (!shared.isNull(childVnode)) {
+            if (nextNode) {
+                nextNode = hydrateNode(nextNode, childVnode);
+                anchor = childVnode.elm;
+            }
+            else {
+                hasMismatch = true;
+                if (process.env.NODE_ENV !== 'production') {
+                    if (!hasWarned) {
+                        hasWarned = true;
+                        logError(`Hydration mismatch: incorrect number of rendered nodes. Client produced more nodes than the server.`, owner);
+                    }
+                }
+                mount(childVnode, parentNode, anchor);
+                anchor = childVnode.elm;
+            }
+        }
+    }
+    if (nextNode) {
+        hasMismatch = true;
+        if (process.env.NODE_ENV !== 'production') {
+            if (!hasWarned) {
+                logError(`Hydration mismatch: incorrect number of rendered nodes. Server rendered more nodes than the client.`, owner);
+            }
+        }
+        do {
+            const current = nextNode;
+            nextNode = nextSibling(nextNode);
+            removeNode(current, parentNode);
+        } while (nextNode);
+    }
+}
+function handleMismatch(node, vnode, msg) {
+    hasMismatch = true;
+    if (!shared.isUndefined(msg)) {
+        if (process.env.NODE_ENV !== 'production') {
+            logError(msg, vnode.owner);
+        }
+    }
+    const parentNode = getProperty(node, 'parentNode');
+    mount(vnode, parentNode, node);
+    removeNode(node, parentNode);
+    return vnode.elm;
+}
+function patchElementPropsAndAttrs(vnode) {
+    applyEventListeners(vnode);
+    patchProps(null, vnode);
+}
+function hasCorrectNodeType(vnode, node, nodeType) {
+    if (getProperty(node, 'nodeType') !== nodeType) {
+        if (process.env.NODE_ENV !== 'production') {
+            logError('Hydration mismatch: incorrect node type received', vnode.owner);
+        }
+        return false;
+    }
+    return true;
+}
+function isMatchingElement(vnode, elm) {
+    if (vnode.sel.toLowerCase() !== getProperty(elm, 'tagName').toLowerCase()) {
+        if (process.env.NODE_ENV !== 'production') {
+            logError(`Hydration mismatch: expecting element with tag "${vnode.sel.toLowerCase()}" but found "${getProperty(elm, 'tagName').toLowerCase()}".`, vnode.owner);
+        }
+        return false;
+    }
+    const hasIncompatibleAttrs = validateAttrs(vnode, elm);
+    const hasIncompatibleClass = validateClassAttr(vnode, elm);
+    const hasIncompatibleStyle = validateStyleAttr(vnode, elm);
+    return hasIncompatibleAttrs && hasIncompatibleClass && hasIncompatibleStyle;
+}
+function validateAttrs(vnode, elm) {
+    const { data: { attrs = {} }, } = vnode;
+    let nodesAreCompatible = true;
+    // Validate attributes, though we could always recovery from those by running the update mods.
+    // Note: intentionally ONLY matching vnodes.attrs to elm.attrs, in case SSR is adding extra attributes.
+    for (const [attrName, attrValue] of Object.entries(attrs)) {
+        const elmAttrValue = getAttribute(elm, attrName);
+        if (String(attrValue) !== elmAttrValue) {
+            if (process.env.NODE_ENV !== 'production') {
+                logError(`Mismatch hydrating element <${getProperty(elm, 'tagName').toLowerCase()}>: attribute "${attrName}" has different values, expected "${attrValue}" but found "${elmAttrValue}"`, vnode.owner);
+            }
+            nodesAreCompatible = false;
+        }
+    }
+    return nodesAreCompatible;
+}
+function validateClassAttr(vnode, elm) {
+    const { data: { className, classMap }, } = vnode;
+    let nodesAreCompatible = true;
+    let vnodeClassName;
+    if (!shared.isUndefined(className) && String(className) !== getProperty(elm, 'className')) {
+        // className is used when class is bound to an expr.
+        nodesAreCompatible = false;
+        vnodeClassName = className;
+    }
+    else if (!shared.isUndefined(classMap)) {
+        // classMap is used when class is set to static value.
+        const classList = getClassList(elm);
+        let computedClassName = '';
+        // all classes from the vnode should be in the element.classList
+        for (const name in classMap) {
+            computedClassName += ' ' + name;
+            if (!classList.contains(name)) {
+                nodesAreCompatible = false;
+            }
+        }
+        vnodeClassName = computedClassName.trim();
+        if (classList.length > shared.keys(classMap).length) {
+            nodesAreCompatible = false;
+        }
+    }
+    if (!nodesAreCompatible) {
+        if (process.env.NODE_ENV !== 'production') {
+            logError(`Mismatch hydrating element <${getProperty(elm, 'tagName').toLowerCase()}>: attribute "class" has different values, expected "${vnodeClassName}" but found "${getProperty(elm, 'className')}"`, vnode.owner);
+        }
+    }
+    return nodesAreCompatible;
+}
+function validateStyleAttr(vnode, elm) {
+    const { data: { style, styleDecls }, } = vnode;
+    const elmStyle = getAttribute(elm, 'style') || '';
+    let vnodeStyle;
+    let nodesAreCompatible = true;
+    if (!shared.isUndefined(style) && style !== elmStyle) {
+        nodesAreCompatible = false;
+        vnodeStyle = style;
+    }
+    else if (!shared.isUndefined(styleDecls)) {
+        const parsedVnodeStyle = parseStyleText(elmStyle);
+        const expectedStyle = [];
+        // styleMap is used when style is set to static value.
+        for (let i = 0, n = styleDecls.length; i < n; i++) {
+            const [prop, value, important] = styleDecls[i];
+            expectedStyle.push(`${prop}: ${value + (important ? ' important!' : '')}`);
+            const parsedPropValue = parsedVnodeStyle[prop];
+            if (shared.isUndefined(parsedPropValue)) {
+                nodesAreCompatible = false;
+            }
+            else if (!parsedPropValue.startsWith(value)) {
+                nodesAreCompatible = false;
+            }
+            else if (important && !parsedPropValue.endsWith('!important')) {
+                nodesAreCompatible = false;
+            }
+        }
+        if (shared.keys(parsedVnodeStyle).length > styleDecls.length) {
+            nodesAreCompatible = false;
+        }
+        vnodeStyle = shared.ArrayJoin.call(expectedStyle, ';');
+    }
+    if (!nodesAreCompatible) {
+        if (process.env.NODE_ENV !== 'production') {
+            logError(`Mismatch hydrating element <${getProperty(elm, 'tagName').toLowerCase()}>: attribute "style" has different values, expected "${vnodeStyle}" but found "${elmStyle}".`, vnode.owner);
+        }
+    }
+    return nodesAreCompatible;
+}
+
 /*
  * Copyright (c) 2018, salesforce.com, inc.
  * All rights reserved.
@@ -6092,7 +6137,7 @@ exports.getAssociatedVMIfPresent = getAssociatedVMIfPresent;
 exports.getComponentDef = getComponentDef;
 exports.getComponentHtmlPrototype = getComponentHtmlPrototype;
 exports.getUpgradableConstructor = getUpgradableConstructor;
-exports.hydrateRootElement = hydrateRootElement;
+exports.hydrateRoot = hydrateRoot;
 exports.isComponentConstructor = isComponentConstructor;
 exports.readonly = readonly;
 exports.register = register;
@@ -6147,4 +6192,4 @@ exports.swapTemplate = swapTemplate;
 exports.track = track;
 exports.unwrap = unwrap;
 exports.wire = wire;
-/* version: 2.11.0 */
+/* version: 2.12.0 */

package/dist/engine-core.js

@@ -1,5 +1,5 @@
 /* proxy-compat-disable */
-import { seal, create, isFunction as isFunction$1, ArrayPush as ArrayPush$1, isUndefined as isUndefined$1, ArrayIndexOf, ArraySplice, StringToLowerCase, ArrayJoin, isNull, isFrozen, defineProperty, assign, forEach, keys, AriaPropNameToAttrNameMap, getPropertyDescriptor, defineProperties, getOwnPropertyNames as getOwnPropertyNames$1, getPrototypeOf as getPrototypeOf$1, setPrototypeOf, isObject, assert, KEY__SYNTHETIC_MODE, toString as toString$1, isFalse, isTrue, getOwnPropertyDescriptor as getOwnPropertyDescriptor$1, LWC_VERSION_COMMENT_REGEX, LWC_VERSION, freeze, htmlPropertyToAttribute, ArraySlice, hasOwnProperty as hasOwnProperty$1, StringCharCodeAt, XML_NAMESPACE, XLINK_NAMESPACE, isString, StringSlice, SVG_NAMESPACE, KEY__SHADOW_RESOLVER, isArray as isArray$1, isNumber, StringReplace, KEY__SCOPED_CSS, noop, ArrayUnshift, ArrayFilter } from '@lwc/shared';
+import { seal, create, isFunction as isFunction$1, ArrayPush as ArrayPush$1, isUndefined as isUndefined$1, ArrayIndexOf, ArraySplice, StringToLowerCase, ArrayJoin, isNull, isFrozen, defineProperty, assign, forEach, keys, AriaPropNameToAttrNameMap, getPropertyDescriptor, defineProperties, getOwnPropertyNames as getOwnPropertyNames$1, getPrototypeOf as getPrototypeOf$1, setPrototypeOf, isObject, assert, KEY__SYNTHETIC_MODE, toString as toString$1, isFalse, isTrue, getOwnPropertyDescriptor as getOwnPropertyDescriptor$1, LWC_VERSION_COMMENT_REGEX, LWC_VERSION, freeze, htmlPropertyToAttribute, ArraySlice, hasOwnProperty as hasOwnProperty$1, StringCharCodeAt, XML_NAMESPACE, XLINK_NAMESPACE, isString, StringSlice, SVG_NAMESPACE, KEY__SHADOW_RESOLVER, isArray as isArray$1, isNumber, StringReplace, KEY__SCOPED_CSS, noop, ArrayUnshift } from '@lwc/shared';
 import { runtimeFlags } from '@lwc/features';
 export { setFeatureFlag, setFeatureFlagForTest } from '@lwc/features';
 
@@ -4702,11 +4702,15 @@ const signedTemplateMap = new Map();
  * INTERNAL: This function can only be invoked by compiled code. The compiler
  * will prevent this function from being imported by userland code.
  */
-function registerComponent(Ctor, { tmpl }) {
-    if (process.env.NODE_ENV !== 'production') {
-        checkVersionMismatch(Ctor, 'component');
+function registerComponent(
+// We typically expect a LightningElementConstructor, but technically you can call this with anything
+Ctor, { tmpl }) {
+    if (isFunction$1(Ctor)) {
+        if (process.env.NODE_ENV !== 'production') {
+            checkVersionMismatch(Ctor, 'component');
+        }
+        signedTemplateMap.set(Ctor, tmpl);
     }
-    signedTemplateMap.set(Ctor, tmpl);
     // chaining this method as a way to wrap existing assignment of component constructor easily,
     // without too much transformation
     return Ctor;
@@ -4795,236 +4799,6 @@ function invokeServiceHook(vm, cbs) {
     }
 }
 
-/*
- * Copyright (c) 2022, salesforce.com, 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
- */
-function hydrate(vnode, node) {
-    switch (vnode.type) {
-        case 0 /* Text */:
-            hydrateText(vnode, node);
-            break;
-        case 1 /* Comment */:
-            hydrateComment(vnode, node);
-            break;
-        case 2 /* Element */:
-            hydrateElement(vnode, node);
-            break;
-        case 3 /* CustomElement */:
-            hydrateCustomElement(vnode, node);
-            break;
-    }
-}
-function hydrateText(vnode, node) {
-    var _a;
-    if (process.env.NODE_ENV !== 'production') {
-        validateNodeType(vnode, node, 3 /* TEXT */);
-        const nodeValue = getProperty(node, 'nodeValue');
-        if (nodeValue !== vnode.text && !(nodeValue === '\u200D' && vnode.text === '')) {
-            logWarn('Hydration mismatch: text values do not match, will recover from the difference', vnode.owner);
-        }
-    }
-    // always set the text value to the one from the vnode.
-    setText(node, (_a = vnode.text) !== null && _a !== void 0 ? _a : null);
-    vnode.elm = node;
-}
-function hydrateComment(vnode, node) {
-    var _a;
-    if (process.env.NODE_ENV !== 'production') {
-        validateNodeType(vnode, node, 8 /* COMMENT */);
-        if (getProperty(node, 'nodeValue') !== vnode.text) {
-            logWarn('Hydration mismatch: comment values do not match, will recover from the difference', vnode.owner);
-        }
-    }
-    // always set the text value to the one from the vnode.
-    setProperty(node, 'nodeValue', (_a = vnode.text) !== null && _a !== void 0 ? _a : null);
-    vnode.elm = node;
-}
-function hydrateElement(vnode, node) {
-    if (process.env.NODE_ENV !== 'production') {
-        validateNodeType(vnode, node, 1 /* ELEMENT */);
-        validateElement(vnode, node);
-    }
-    const elm = node;
-    vnode.elm = elm;
-    const { context } = vnode.data;
-    const isDomManual = Boolean(!isUndefined$1(context) && !isUndefined$1(context.lwc) && context.lwc.dom === "manual" /* Manual */);
-    if (isDomManual) {
-        // it may be that this element has lwc:inner-html, we need to diff and in case are the same,
-        // remove the innerHTML from props so it reuses the existing dom elements.
-        const { props } = vnode.data;
-        if (!isUndefined$1(props) && !isUndefined$1(props.innerHTML)) {
-            if (getProperty(elm, 'innerHTML') === props.innerHTML) {
-                // Do a shallow clone since VNodeData may be shared across VNodes due to hoist optimization
-                vnode.data = Object.assign(Object.assign({}, vnode.data), { props: cloneAndOmitKey(props, 'innerHTML') });
-            }
-            else {
-                logWarn(`Mismatch hydrating element <${getProperty(elm, 'tagName').toLowerCase()}>: innerHTML values do not match for element, will recover from the difference`, vnode.owner);
-            }
-        }
-    }
-    patchElementPropsAndAttrs(vnode);
-    if (!isDomManual) {
-        hydrateChildren(getChildNodes(vnode.elm), vnode.children, vnode.owner);
-    }
-}
-function hydrateCustomElement(vnode, node) {
-    if (process.env.NODE_ENV !== 'production') {
-        validateNodeType(vnode, node, 1 /* ELEMENT */);
-        validateElement(vnode, node);
-    }
-    const elm = node;
-    const { sel, mode, ctor, owner } = vnode;
-    const vm = createVM(elm, ctor, {
-        mode,
-        owner,
-        tagName: sel,
-    });
-    vnode.elm = elm;
-    vnode.vm = vm;
-    allocateChildren(vnode, vm);
-    patchElementPropsAndAttrs(vnode);
-    // Insert hook section:
-    if (process.env.NODE_ENV !== 'production') {
-        assert.isTrue(vm.state === 0 /* created */, `${vm} cannot be recycled.`);
-    }
-    runConnectedCallback(vm);
-    if (vm.renderMode !== 0 /* Light */) {
-        // VM is not rendering in Light DOM, we can proceed and hydrate the slotted content.
-        // Note: for Light DOM, this is handled while hydrating the VM
-        hydrateChildren(getChildNodes(vnode.elm), vnode.children, vm);
-    }
-    hydrateVM(vm);
-}
-function hydrateChildren(elmChildren, children, vm) {
-    if (process.env.NODE_ENV !== 'production') {
-        const filteredVNodes = ArrayFilter.call(children, (vnode) => !!vnode);
-        if (elmChildren.length !== filteredVNodes.length) {
-            logError(`Hydration mismatch: incorrect number of rendered nodes, expected ${filteredVNodes.length} but found ${elmChildren.length}.`, vm);
-            throwHydrationError();
-        }
-    }
-    let childNodeIndex = 0;
-    for (let i = 0; i < children.length; i++) {
-        const childVnode = children[i];
-        if (!isNull(childVnode)) {
-            const childNode = elmChildren[childNodeIndex];
-            hydrate(childVnode, childNode);
-            childNodeIndex++;
-        }
-    }
-}
-function patchElementPropsAndAttrs(vnode) {
-    applyEventListeners(vnode);
-    patchProps(null, vnode);
-}
-function throwHydrationError() {
-    assert.fail('Server rendered elements do not match client side generated elements');
-}
-function validateNodeType(vnode, node, nodeType) {
-    if (getProperty(node, 'nodeType') !== nodeType) {
-        logError('Hydration mismatch: incorrect node type received', vnode.owner);
-        assert.fail('Hydration mismatch: incorrect node type received.');
-    }
-}
-function validateElement(vnode, elm) {
-    if (vnode.sel.toLowerCase() !== getProperty(elm, 'tagName').toLowerCase()) {
-        logError(`Hydration mismatch: expecting element with tag "${vnode.sel.toLowerCase()}" but found "${getProperty(elm, 'tagName').toLowerCase()}".`, vnode.owner);
-        throwHydrationError();
-    }
-    const hasIncompatibleAttrs = validateAttrs(vnode, elm);
-    const hasIncompatibleClass = validateClassAttr(vnode, elm);
-    const hasIncompatibleStyle = validateStyleAttr(vnode, elm);
-    const isVNodeAndElementCompatible = hasIncompatibleAttrs && hasIncompatibleClass && hasIncompatibleStyle;
-    if (!isVNodeAndElementCompatible) {
-        throwHydrationError();
-    }
-}
-function validateAttrs(vnode, elm) {
-    const { data: { attrs = {} }, } = vnode;
-    let nodesAreCompatible = true;
-    // Validate attributes, though we could always recovery from those by running the update mods.
-    // Note: intentionally ONLY matching vnodes.attrs to elm.attrs, in case SSR is adding extra attributes.
-    for (const [attrName, attrValue] of Object.entries(attrs)) {
-        const elmAttrValue = getAttribute(elm, attrName);
-        if (String(attrValue) !== elmAttrValue) {
-            logError(`Mismatch hydrating element <${getProperty(elm, 'tagName').toLowerCase()}>: attribute "${attrName}" has different values, expected "${attrValue}" but found "${elmAttrValue}"`, vnode.owner);
-            nodesAreCompatible = false;
-        }
-    }
-    return nodesAreCompatible;
-}
-function validateClassAttr(vnode, elm) {
-    const { data: { className, classMap }, } = vnode;
-    let nodesAreCompatible = true;
-    let vnodeClassName;
-    if (!isUndefined$1(className) && String(className) !== getProperty(elm, 'className')) {
-        // className is used when class is bound to an expr.
-        nodesAreCompatible = false;
-        vnodeClassName = className;
-    }
-    else if (!isUndefined$1(classMap)) {
-        // classMap is used when class is set to static value.
-        const classList = getClassList(elm);
-        let computedClassName = '';
-        // all classes from the vnode should be in the element.classList
-        for (const name in classMap) {
-            computedClassName += ' ' + name;
-            if (!classList.contains(name)) {
-                nodesAreCompatible = false;
-            }
-        }
-        vnodeClassName = computedClassName.trim();
-        if (classList.length > keys(classMap).length) {
-            nodesAreCompatible = false;
-        }
-    }
-    if (!nodesAreCompatible) {
-        logError(`Mismatch hydrating element <${getProperty(elm, 'tagName').toLowerCase()}>: attribute "class" has different values, expected "${vnodeClassName}" but found "${getProperty(elm, 'className')}"`, vnode.owner);
-    }
-    return nodesAreCompatible;
-}
-function validateStyleAttr(vnode, elm) {
-    const { data: { style, styleDecls }, } = vnode;
-    const elmStyle = getAttribute(elm, 'style') || '';
-    let vnodeStyle;
-    let nodesAreCompatible = true;
-    if (!isUndefined$1(style) && style !== elmStyle) {
-        nodesAreCompatible = false;
-        vnodeStyle = style;
-    }
-    else if (!isUndefined$1(styleDecls)) {
-        const parsedVnodeStyle = parseStyleText(elmStyle);
-        const expectedStyle = [];
-        // styleMap is used when style is set to static value.
-        for (let i = 0, n = styleDecls.length; i < n; i++) {
-            const [prop, value, important] = styleDecls[i];
-            expectedStyle.push(`${prop}: ${value + (important ? ' important!' : '')}`);
-            const parsedPropValue = parsedVnodeStyle[prop];
-            if (isUndefined$1(parsedPropValue)) {
-                nodesAreCompatible = false;
-            }
-            else if (!parsedPropValue.startsWith(value)) {
-                nodesAreCompatible = false;
-            }
-            else if (important && !parsedPropValue.endsWith('!important')) {
-                nodesAreCompatible = false;
-            }
-        }
-        if (keys(parsedVnodeStyle).length > styleDecls.length) {
-            nodesAreCompatible = false;
-        }
-        vnodeStyle = ArrayJoin.call(expectedStyle, ';');
-    }
-    if (!nodesAreCompatible) {
-        // style is used when class is bound to an expr.
-        logError(`Mismatch hydrating element <${getProperty(elm, 'tagName').toLowerCase()}>: attribute "style" has different values, expected "${vnodeStyle}" but found "${elmStyle}".`, vnode.owner);
-    }
-    return nodesAreCompatible;
-}
-
 /*
  * Copyright (c) 2018, salesforce.com, inc.
  * All rights reserved.
@@ -5070,32 +4844,12 @@ function connectRootElement(elm) {
   /* GlobalHydrate */
   , vm);
 }
-function hydrateRootElement(elm) {
-  const vm = getAssociatedVM(elm);
-  runConnectedCallback(vm);
-  hydrateVM(vm);
-}
 function disconnectRootElement(elm) {
   const vm = getAssociatedVM(elm);
   resetComponentStateWhenRemoved(vm);
 }
 function appendVM(vm) {
   rehydrate(vm);
-}
-function hydrateVM(vm) {
-  if (isTrue(vm.isDirty)) {
-    // manually diffing/patching here.
-    // This routine is:
-    // patchShadowRoot(vm, children);
-    //  -> addVnodes.
-    const children = renderComponent(vm);
-    vm.children = children;
-    const vmChildren = vm.renderMode === 0
-    /* Light */
-    ? getChildNodes(vm.elm) : getChildNodes(vm.elm.shadowRoot);
-    hydrateChildren(vmChildren, children, vm);
-    runRenderedCallback(vm);
-  }
 } // just in case the component comes back, with this we guarantee re-rendering it
 // while preventing any attempt to rehydration until after reinsertion.
 
@@ -5400,7 +5154,6 @@ function runRenderedCallback(vm) {
     , vm);
   }
 }
-
 let rehydrateQueue = [];
 
 function flushRehydrationQueue() {
@@ -6057,6 +5810,298 @@ function readonly(obj) {
     return reactiveMembrane.getReadOnlyProxy(obj);
 }
 
+/*
+ * Copyright (c) 2022, salesforce.com, 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
+ */
+// flag indicating if the hydration recovered from the DOM mismatch
+let hasMismatch = false;
+function hydrateRoot(vm) {
+    hasMismatch = false;
+    runConnectedCallback(vm);
+    hydrateVM(vm);
+    if (hasMismatch) {
+        logError('Hydration completed with errors.', vm);
+    }
+}
+function hydrateVM(vm) {
+    const children = renderComponent(vm);
+    vm.children = children;
+    const parentNode = vm.renderRoot;
+    hydrateChildren(getFirstChild(parentNode), children, parentNode, vm);
+    runRenderedCallback(vm);
+}
+function hydrateNode(node, vnode) {
+    let hydratedNode;
+    switch (vnode.type) {
+        case 0 /* Text */:
+            hydratedNode = hydrateText(node, vnode);
+            break;
+        case 1 /* Comment */:
+            hydratedNode = hydrateComment(node, vnode);
+            break;
+        case 2 /* Element */:
+            hydratedNode = hydrateElement(node, vnode);
+            break;
+        case 3 /* CustomElement */:
+            hydratedNode = hydrateCustomElement(node, vnode);
+            break;
+    }
+    return nextSibling(hydratedNode);
+}
+function hydrateText(node, vnode) {
+    var _a;
+    if (!hasCorrectNodeType(vnode, node, 3 /* TEXT */)) {
+        return handleMismatch(node, vnode);
+    }
+    if (process.env.NODE_ENV !== 'production') {
+        const nodeValue = getProperty(node, 'nodeValue');
+        if (nodeValue !== vnode.text && !(nodeValue === '\u200D' && vnode.text === '')) {
+            logWarn('Hydration mismatch: text values do not match, will recover from the difference', vnode.owner);
+        }
+    }
+    setText(node, (_a = vnode.text) !== null && _a !== void 0 ? _a : null);
+    vnode.elm = node;
+    return node;
+}
+function hydrateComment(node, vnode) {
+    var _a;
+    if (!hasCorrectNodeType(vnode, node, 8 /* COMMENT */)) {
+        return handleMismatch(node, vnode);
+    }
+    if (process.env.NODE_ENV !== 'production') {
+        const nodeValue = getProperty(node, 'nodeValue');
+        if (nodeValue !== vnode.text) {
+            logWarn('Hydration mismatch: comment values do not match, will recover from the difference', vnode.owner);
+        }
+    }
+    setProperty(node, 'nodeValue', (_a = vnode.text) !== null && _a !== void 0 ? _a : null);
+    vnode.elm = node;
+    return node;
+}
+function hydrateElement(elm, vnode) {
+    if (!hasCorrectNodeType(vnode, elm, 1 /* ELEMENT */) ||
+        !isMatchingElement(vnode, elm)) {
+        return handleMismatch(elm, vnode);
+    }
+    vnode.elm = elm;
+    const { context } = vnode.data;
+    const isDomManual = Boolean(!isUndefined$1(context) && !isUndefined$1(context.lwc) && context.lwc.dom === "manual" /* Manual */);
+    if (isDomManual) {
+        // it may be that this element has lwc:inner-html, we need to diff and in case are the same,
+        // remove the innerHTML from props so it reuses the existing dom elements.
+        const { props } = vnode.data;
+        if (!isUndefined$1(props) && !isUndefined$1(props.innerHTML)) {
+            if (getProperty(elm, 'innerHTML') === props.innerHTML) {
+                // Do a shallow clone since VNodeData may be shared across VNodes due to hoist optimization
+                vnode.data = Object.assign(Object.assign({}, 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`, vnode.owner);
+                }
+            }
+        }
+    }
+    patchElementPropsAndAttrs(vnode);
+    if (!isDomManual) {
+        hydrateChildren(getFirstChild(elm), vnode.children, elm, vnode.owner);
+    }
+    return elm;
+}
+function hydrateCustomElement(elm, vnode) {
+    if (!hasCorrectNodeType(vnode, elm, 1 /* ELEMENT */) ||
+        !isMatchingElement(vnode, elm)) {
+        return handleMismatch(elm, vnode);
+    }
+    const { sel, mode, ctor, owner } = vnode;
+    const vm = createVM(elm, ctor, {
+        mode,
+        owner,
+        tagName: sel,
+    });
+    vnode.elm = elm;
+    vnode.vm = vm;
+    allocateChildren(vnode, vm);
+    patchElementPropsAndAttrs(vnode);
+    // Insert hook section:
+    if (process.env.NODE_ENV !== 'production') {
+        assert.isTrue(vm.state === 0 /* created */, `${vm} cannot be recycled.`);
+    }
+    runConnectedCallback(vm);
+    if (vm.renderMode !== 0 /* Light */) {
+        // VM is not rendering in Light DOM, we can proceed and hydrate the slotted content.
+        // Note: for Light DOM, this is handled while hydrating the VM
+        hydrateChildren(getFirstChild(elm), vnode.children, elm, vm);
+    }
+    hydrateVM(vm);
+    return elm;
+}
+function hydrateChildren(node, children, parentNode, owner) {
+    let hasWarned = false;
+    let nextNode = node;
+    let anchor = null;
+    for (let i = 0; i < children.length; i++) {
+        const childVnode = children[i];
+        if (!isNull(childVnode)) {
+            if (nextNode) {
+                nextNode = hydrateNode(nextNode, childVnode);
+                anchor = childVnode.elm;
+            }
+            else {
+                hasMismatch = true;
+                if (process.env.NODE_ENV !== 'production') {
+                    if (!hasWarned) {
+                        hasWarned = true;
+                        logError(`Hydration mismatch: incorrect number of rendered nodes. Client produced more nodes than the server.`, owner);
+                    }
+                }
+                mount(childVnode, parentNode, anchor);
+                anchor = childVnode.elm;
+            }
+        }
+    }
+    if (nextNode) {
+        hasMismatch = true;
+        if (process.env.NODE_ENV !== 'production') {
+            if (!hasWarned) {
+                logError(`Hydration mismatch: incorrect number of rendered nodes. Server rendered more nodes than the client.`, owner);
+            }
+        }
+        do {
+            const current = nextNode;
+            nextNode = nextSibling(nextNode);
+            removeNode(current, parentNode);
+        } while (nextNode);
+    }
+}
+function handleMismatch(node, vnode, msg) {
+    hasMismatch = true;
+    if (!isUndefined$1(msg)) {
+        if (process.env.NODE_ENV !== 'production') {
+            logError(msg, vnode.owner);
+        }
+    }
+    const parentNode = getProperty(node, 'parentNode');
+    mount(vnode, parentNode, node);
+    removeNode(node, parentNode);
+    return vnode.elm;
+}
+function patchElementPropsAndAttrs(vnode) {
+    applyEventListeners(vnode);
+    patchProps(null, vnode);
+}
+function hasCorrectNodeType(vnode, node, nodeType) {
+    if (getProperty(node, 'nodeType') !== nodeType) {
+        if (process.env.NODE_ENV !== 'production') {
+            logError('Hydration mismatch: incorrect node type received', vnode.owner);
+        }
+        return false;
+    }
+    return true;
+}
+function isMatchingElement(vnode, elm) {
+    if (vnode.sel.toLowerCase() !== getProperty(elm, 'tagName').toLowerCase()) {
+        if (process.env.NODE_ENV !== 'production') {
+            logError(`Hydration mismatch: expecting element with tag "${vnode.sel.toLowerCase()}" but found "${getProperty(elm, 'tagName').toLowerCase()}".`, vnode.owner);
+        }
+        return false;
+    }
+    const hasIncompatibleAttrs = validateAttrs(vnode, elm);
+    const hasIncompatibleClass = validateClassAttr(vnode, elm);
+    const hasIncompatibleStyle = validateStyleAttr(vnode, elm);
+    return hasIncompatibleAttrs && hasIncompatibleClass && hasIncompatibleStyle;
+}
+function validateAttrs(vnode, elm) {
+    const { data: { attrs = {} }, } = vnode;
+    let nodesAreCompatible = true;
+    // Validate attributes, though we could always recovery from those by running the update mods.
+    // Note: intentionally ONLY matching vnodes.attrs to elm.attrs, in case SSR is adding extra attributes.
+    for (const [attrName, attrValue] of Object.entries(attrs)) {
+        const elmAttrValue = getAttribute(elm, attrName);
+        if (String(attrValue) !== elmAttrValue) {
+            if (process.env.NODE_ENV !== 'production') {
+                logError(`Mismatch hydrating element <${getProperty(elm, 'tagName').toLowerCase()}>: attribute "${attrName}" has different values, expected "${attrValue}" but found "${elmAttrValue}"`, vnode.owner);
+            }
+            nodesAreCompatible = false;
+        }
+    }
+    return nodesAreCompatible;
+}
+function validateClassAttr(vnode, elm) {
+    const { data: { className, classMap }, } = vnode;
+    let nodesAreCompatible = true;
+    let vnodeClassName;
+    if (!isUndefined$1(className) && String(className) !== getProperty(elm, 'className')) {
+        // className is used when class is bound to an expr.
+        nodesAreCompatible = false;
+        vnodeClassName = className;
+    }
+    else if (!isUndefined$1(classMap)) {
+        // classMap is used when class is set to static value.
+        const classList = getClassList(elm);
+        let computedClassName = '';
+        // all classes from the vnode should be in the element.classList
+        for (const name in classMap) {
+            computedClassName += ' ' + name;
+            if (!classList.contains(name)) {
+                nodesAreCompatible = false;
+            }
+        }
+        vnodeClassName = computedClassName.trim();
+        if (classList.length > keys(classMap).length) {
+            nodesAreCompatible = false;
+        }
+    }
+    if (!nodesAreCompatible) {
+        if (process.env.NODE_ENV !== 'production') {
+            logError(`Mismatch hydrating element <${getProperty(elm, 'tagName').toLowerCase()}>: attribute "class" has different values, expected "${vnodeClassName}" but found "${getProperty(elm, 'className')}"`, vnode.owner);
+        }
+    }
+    return nodesAreCompatible;
+}
+function validateStyleAttr(vnode, elm) {
+    const { data: { style, styleDecls }, } = vnode;
+    const elmStyle = getAttribute(elm, 'style') || '';
+    let vnodeStyle;
+    let nodesAreCompatible = true;
+    if (!isUndefined$1(style) && style !== elmStyle) {
+        nodesAreCompatible = false;
+        vnodeStyle = style;
+    }
+    else if (!isUndefined$1(styleDecls)) {
+        const parsedVnodeStyle = parseStyleText(elmStyle);
+        const expectedStyle = [];
+        // styleMap is used when style is set to static value.
+        for (let i = 0, n = styleDecls.length; i < n; i++) {
+            const [prop, value, important] = styleDecls[i];
+            expectedStyle.push(`${prop}: ${value + (important ? ' important!' : '')}`);
+            const parsedPropValue = parsedVnodeStyle[prop];
+            if (isUndefined$1(parsedPropValue)) {
+                nodesAreCompatible = false;
+            }
+            else if (!parsedPropValue.startsWith(value)) {
+                nodesAreCompatible = false;
+            }
+            else if (important && !parsedPropValue.endsWith('!important')) {
+                nodesAreCompatible = false;
+            }
+        }
+        if (keys(parsedVnodeStyle).length > styleDecls.length) {
+            nodesAreCompatible = false;
+        }
+        vnodeStyle = ArrayJoin.call(expectedStyle, ';');
+    }
+    if (!nodesAreCompatible) {
+        if (process.env.NODE_ENV !== 'production') {
+            logError(`Mismatch hydrating element <${getProperty(elm, 'tagName').toLowerCase()}>: attribute "style" has different values, expected "${vnodeStyle}" but found "${elmStyle}".`, vnode.owner);
+        }
+    }
+    return nodesAreCompatible;
+}
+
 /*
  * Copyright (c) 2018, salesforce.com, inc.
  * All rights reserved.
@@ -6070,5 +6115,5 @@ function setHooks(hooks) {
     setSanitizeHtmlContentHook(hooks.sanitizeHtmlContent);
 }
 
-export { LightningElement, profilerControl as __unstable__ProfilerControl, api$1 as api, connectRootElement, createContextProvider, createVM, disconnectRootElement, getAssociatedVMIfPresent, getComponentDef, getComponentHtmlPrototype, getUpgradableConstructor, hydrateRootElement, isComponentConstructor, readonly, register, registerComponent, registerDecorators, registerTemplate, sanitizeAttribute, setAddEventListener, setAssertInstanceOfHTMLElement, setAttachShadow, setCreateComment, setCreateElement, setCreateText, setDefineCustomElement, setDispatchEvent, setGetAttribute, setGetBoundingClientRect, setGetChildNodes, setGetChildren, setGetClassList, setGetCustomElement, setGetElementsByClassName, setGetElementsByTagName, setGetFirstChild, setGetFirstElementChild, setGetLastChild, setGetLastElementChild, setGetProperty, setHTMLElement, setHooks, setInsert, setInsertGlobalStylesheet, setInsertStylesheet, setIsConnected, setIsHydrating, setIsNativeShadowDefined, setIsSyntheticShadowDefined, setNextSibling, setQuerySelector, setQuerySelectorAll, setRemove, setRemoveAttribute, setRemoveEventListener, setSetAttribute, setSetCSSStyleProperty, setSetProperty, setSetText, setSsr, swapComponent, swapStyle, swapTemplate, track, unwrap, wire };
-/* version: 2.11.0 */
+export { LightningElement, profilerControl as __unstable__ProfilerControl, api$1 as api, connectRootElement, createContextProvider, createVM, disconnectRootElement, getAssociatedVMIfPresent, getComponentDef, getComponentHtmlPrototype, getUpgradableConstructor, hydrateRoot, isComponentConstructor, readonly, register, registerComponent, registerDecorators, registerTemplate, sanitizeAttribute, setAddEventListener, setAssertInstanceOfHTMLElement, setAttachShadow, setCreateComment, setCreateElement, setCreateText, setDefineCustomElement, setDispatchEvent, setGetAttribute, setGetBoundingClientRect, setGetChildNodes, setGetChildren, setGetClassList, setGetCustomElement, setGetElementsByClassName, setGetElementsByTagName, setGetFirstChild, setGetFirstElementChild, setGetLastChild, setGetLastElementChild, setGetProperty, setHTMLElement, setHooks, setInsert, setInsertGlobalStylesheet, setInsertStylesheet, setIsConnected, setIsHydrating, setIsNativeShadowDefined, setIsSyntheticShadowDefined, setNextSibling, setQuerySelector, setQuerySelectorAll, setRemove, setRemoveAttribute, setRemoveEventListener, setSetAttribute, setSetCSSStyleProperty, setSetProperty, setSetText, setSsr, swapComponent, swapStyle, swapTemplate, track, unwrap, wire };
+/* version: 2.12.0 */

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@lwc/engine-core",
-    "version": "2.11.0",
+    "version": "2.12.0",
     "description": "Core LWC engine APIs.",
     "homepage": "https://lwc.dev/",
     "repository": {
@@ -17,21 +17,21 @@
     "license": "MIT",
     "scripts": {
         "clean": "rm -rf dist/ types/",
-        "build": "rollup --config scripts/rollup.config.js"
+        "build": "rollup --config scripts/rollup.config.js",
+        "dev": "rollup  --config scripts/rollup.config.js --watch --no-watch.clearScreen"
     },
     "files": [
         "dist/",
         "types/"
     ],
     "dependencies": {
-        "@lwc/features": "2.11.0",
-        "@lwc/shared": "2.11.0"
+        "@lwc/features": "2.12.0",
+        "@lwc/shared": "2.12.0"
     },
     "devDependencies": {
         "observable-membrane": "2.0.0"
     },
     "publishConfig": {
         "access": "public"
-    },
-    "gitHead": "94040389ab8fc717b8753e503f659489480a327d"
+    }
 }

package/types/framework/component.d.ts

@@ -7,9 +7,9 @@ import { VNodes } from './vnodes';
  * INTERNAL: This function can only be invoked by compiled code. The compiler
  * will prevent this function from being imported by userland code.
  */
-export declare function registerComponent(Ctor: LightningElementConstructor, { tmpl }: {
+export declare function registerComponent(Ctor: any, { tmpl }: {
     tmpl: Template;
-}): LightningElementConstructor;
+}): any;
 export declare function getComponentRegisteredTemplate(Ctor: LightningElementConstructor): Template | undefined;
 export declare function getTemplateReactiveObserver(vm: VM): ReactiveObserver;
 export declare function renderComponent(vm: VM): VNodes;

package/types/framework/hydration.d.ts

@@ -1,3 +1,2 @@
 import { VM } from './vm';
-import { VNodes } from './vnodes';
-export declare function hydrateChildren(elmChildren: NodeList, children: VNodes, vm: VM): void;
+export declare function hydrateRoot(vm: VM): void;

package/types/framework/main.d.ts

@@ -7,7 +7,8 @@ export { default as wire } from './decorators/wire';
 export { readonly } from './readonly';
 export { setFeatureFlag, setFeatureFlagForTest } from '@lwc/features';
 export { getComponentHtmlPrototype } from './def';
-export { createVM, connectRootElement, disconnectRootElement, getAssociatedVMIfPresent, hydrateRootElement, } from './vm';
+export { createVM, connectRootElement, disconnectRootElement, getAssociatedVMIfPresent, } from './vm';
+export { hydrateRoot } from './hydration';
 export { registerComponent } from './component';
 export { registerTemplate } from './secure-template';
 export { registerDecorators } from './decorators/register';

package/types/framework/rendering.d.ts

@@ -1,5 +1,7 @@
 import { VM } from './vm';
-import { VNodes, VCustomElement } from './vnodes';
+import { VNode, VNodes, VCustomElement } from './vnodes';
 export declare function patchChildren(c1: VNodes, c2: VNodes, parent: ParentNode): void;
+export declare function mount(node: VNode, parent: ParentNode, anchor: Node | null): void;
+export declare function removeNode(node: Node, parent: ParentNode): void;
 export declare function allocateChildren(vnode: VCustomElement, vm: VM): void;
 export declare function markAsDynamicChildren(children: VNodes): void;

package/types/framework/vm.d.ts

@@ -123,10 +123,8 @@ export interface VM<N = HostNode, E = HostElement> {
 declare type VMAssociable = HostNode | LightningElement;
 export declare function rerenderVM(vm: VM): void;
 export declare function connectRootElement(elm: any): void;
-export declare function hydrateRootElement(elm: any): void;
 export declare function disconnectRootElement(elm: any): void;
 export declare function appendVM(vm: VM): void;
-export declare function hydrateVM(vm: VM): void;
 export declare function removeVM(vm: VM): void;
 export declare function createVM<HostNode, HostElement>(elm: HostElement, ctor: LightningElementConstructor, options: {
     mode: ShadowRootMode;
@@ -136,6 +134,7 @@ export declare function createVM<HostNode, HostElement>(elm: HostElement, ctor:
 export declare function associateVM(obj: VMAssociable, vm: VM): void;
 export declare function getAssociatedVM(obj: VMAssociable): VM;
 export declare function getAssociatedVMIfPresent(obj: VMAssociable): VM | undefined;
+export declare function runRenderedCallback(vm: VM): void;
 export declare function runConnectedCallback(vm: VM): void;
 export declare function resetComponentRoot(vm: VM): void;
 export declare function scheduleRehydration(vm: VM): void;