@lwc/engine-core 2.22.0 → 2.23.2

package/dist/engine-core.cjs.js

@@ -18,7 +18,7 @@ if (process.env.NODE_ENV !== 'production' && typeof __karma__ !== 'undefined') {
   window.addEventListener('test-dummy-flag', () => {
     let hasFlag = false;
 
-    if (features.runtimeFlags.DUMMY_TEST_FLAG) {
+    if (features.lwcRuntimeFlags.DUMMY_TEST_FLAG) {
       hasFlag = true;
     }
 
@@ -796,6 +796,14 @@ function patchLightningElementPrototypeWithRestrictions(proto) {
     shared.defineProperties(proto, getLightningElementPrototypeRestrictionsDescriptors(proto));
 }
 
+function updateComponentValue(vm, key, newValue) {
+    const { cmpFields } = vm;
+    if (newValue !== cmpFields[key]) {
+        cmpFields[key] = newValue;
+        componentValueMutated(vm, key);
+    }
+}
+
 /**
  * Copyright (C) 2017 salesforce.com, inc.
  */
@@ -1428,10 +1436,7 @@ function createBridgeToElementDescriptor(propName, descriptor) {
                 shared.assert.isFalse(isBeingConstructed(vm), `Failed to construct '${getComponentTag(vm)}': The result must not have attributes.`);
                 shared.assert.invariant(!shared.isObject(newValue) || shared.isNull(newValue), `Invalid value "${newValue}" for "${propName}" of ${vm}. Value cannot be an object, must be a primitive value.`);
             }
-            if (newValue !== vm.cmpProps[propName]) {
-                vm.cmpProps[propName] = newValue;
-                componentValueMutated(vm, propName);
-            }
+            updateComponentValue(vm, propName, newValue);
             return set.call(vm.elm, newValue);
         },
     };
@@ -1726,10 +1731,7 @@ function createObservedFieldPropertyDescriptor(key) {
         },
         set(newValue) {
             const vm = getAssociatedVM(this);
-            if (newValue !== vm.cmpFields[key]) {
-                vm.cmpFields[key] = newValue;
-                componentValueMutated(vm, key);
-            }
+            updateComponentValue(vm, key, newValue);
         },
         enumerable: true,
         configurable: true,
@@ -1873,7 +1875,7 @@ function createPublicAccessorDescriptor(key, descriptor) {
       }
 
       if (set) {
-        if (features.runtimeFlags.ENABLE_REACTIVE_SETTER) {
+        if (features.lwcRuntimeFlags.ENABLE_REACTIVE_SETTER) {
           let ro = vm.oar[key];
 
           if (shared.isUndefined(ro)) {
@@ -1931,10 +1933,7 @@ function internalTrackDecorator(key) {
                 shared.assert.invariant(!isUpdatingTemplate, `Updating the template of ${vmBeingRendered} has side effects on the state of ${vm}.${shared.toString(key)}`);
             }
             const reactiveOrAnyValue = getReactiveProxy(newValue);
-            if (reactiveOrAnyValue !== vm.cmpFields[key]) {
-                vm.cmpFields[key] = reactiveOrAnyValue;
-                componentValueMutated(vm, key);
-            }
+            updateComponentValue(vm, key, reactiveOrAnyValue);
         },
         enumerable: true,
         configurable: true,
@@ -1973,10 +1972,7 @@ function internalWireFieldDecorator(key) {
              * letting the author to do the wrong thing, but it will keep our
              * system to be backward compatible.
              */
-            if (value !== vm.cmpFields[key]) {
-                vm.cmpFields[key] = value;
-                componentValueMutated(vm, key);
-            }
+            updateComponentValue(vm, key, value);
         },
         enumerable: true,
         configurable: true,
@@ -2531,7 +2527,7 @@ function getTemplateOrSwappedTemplate(tpl) {
     throw new ReferenceError();
   }
 
-  if (features.runtimeFlags.ENABLE_HMR) {
+  if (features.lwcRuntimeFlags.ENABLE_HMR) {
     const visited = new Set();
 
     while (swappedTemplateMap.has(tpl) && !visited.has(tpl)) {
@@ -2548,7 +2544,7 @@ function getComponentOrSwappedComponent(Ctor) {
     throw new ReferenceError();
   }
 
-  if (features.runtimeFlags.ENABLE_HMR) {
+  if (features.lwcRuntimeFlags.ENABLE_HMR) {
     const visited = new Set();
 
     while (swappedComponentMap.has(Ctor) && !visited.has(Ctor)) {
@@ -2565,7 +2561,7 @@ function getStyleOrSwappedStyle(style) {
     throw new ReferenceError();
   }
 
-  if (features.runtimeFlags.ENABLE_HMR) {
+  if (features.lwcRuntimeFlags.ENABLE_HMR) {
     const visited = new Set();
 
     while (swappedStyleMap.has(style) && !visited.has(style)) {
@@ -2582,7 +2578,7 @@ function setActiveVM(vm) {
     throw new ReferenceError();
   }
 
-  if (features.runtimeFlags.ENABLE_HMR) {
+  if (features.lwcRuntimeFlags.ENABLE_HMR) {
     // tracking active component
     const Ctor = vm.def.ctor;
     let componentVMs = activeComponents.get(Ctor);
@@ -2639,7 +2635,7 @@ function removeActiveVM(vm) {
     throw new ReferenceError();
   }
 
-  if (features.runtimeFlags.ENABLE_HMR) {
+  if (features.lwcRuntimeFlags.ENABLE_HMR) {
     // tracking inactive component
     const Ctor = vm.def.ctor;
     let list = activeComponents.get(Ctor);
@@ -2686,7 +2682,7 @@ function swapTemplate(oldTpl, newTpl) {
     }
   }
 
-  if (!features.runtimeFlags.ENABLE_HMR) {
+  if (!features.lwcRuntimeFlags.ENABLE_HMR) {
     throw new Error('HMR is not enabled');
   }
 
@@ -2702,7 +2698,7 @@ function swapComponent(oldComponent, newComponent) {
     }
   }
 
-  if (!features.runtimeFlags.ENABLE_HMR) {
+  if (!features.lwcRuntimeFlags.ENABLE_HMR) {
     throw new Error('HMR is not enabled');
   }
 
@@ -2716,7 +2712,7 @@ function swapStyle(oldStyle, newStyle) {
     return rehydrateHotStyle(oldStyle);
   }
 
-  if (!features.runtimeFlags.ENABLE_HMR) {
+  if (!features.lwcRuntimeFlags.ENABLE_HMR) {
     throw new Error('HMR is not enabled');
   }
 
@@ -3065,13 +3061,13 @@ function getNearestNativeShadowComponent(vm) {
     return owner;
 }
 function createStylesheet(vm, stylesheets) {
-    const { renderMode, shadowMode, renderer: { ssr, insertStylesheet }, } = vm;
+    const { renderMode, shadowMode, renderer: { insertStylesheet }, } = vm;
     if (renderMode === 1 /* RenderMode.Shadow */ && shadowMode === 1 /* ShadowMode.Synthetic */) {
         for (let i = 0; i < stylesheets.length; i++) {
             insertStylesheet(stylesheets[i]);
         }
     }
-    else if (ssr || vm.hydrated) {
+    else if (!process.env.IS_BROWSER || vm.hydrated) {
         // Note: We need to ensure that during hydration, the stylesheets method is the same as those in ssr.
         //       This works in the client, because the stylesheets are created, and cached in the VM
         //       the first time the VM renders.
@@ -3096,30 +3092,67 @@ function createStylesheet(vm, stylesheets) {
  * SPDX-License-Identifier: MIT
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
+
+function checkHasVM(elm) {
+  const hasVM = !shared.isUndefined(getAssociatedVMIfPresent(elm));
+
+  if (process.env.NODE_ENV !== 'production' && !hasVM) {
+    // Occurs when an element is manually created with the same tag name as an existing LWC component. In that case,
+    // we skip calling the LWC connectedCallback/disconnectedCallback logic and log an error.
+    logError(`VM for tag name "${elm.tagName.toLowerCase()}" is undefined. ` + `This indicates that an element was created with this tag name, ` + `which is already reserved by an LWC component. Use lwc.createElement ` + `instead to create elements.`);
+  }
+
+  return hasVM;
+}
+
 function getUpgradableConstructor(tagName, renderer) {
-    const { getCustomElement, HTMLElementExported: RendererHTMLElement, defineCustomElement, } = renderer;
-    // Should never get a tag with upper case letter at this point, the compiler should
-    // produce only tags with lowercase letters
-    // But, for backwards compatibility, we will lower case the tagName
-    tagName = tagName.toLowerCase();
-    let CE = getCustomElement(tagName);
-    if (!shared.isUndefined(CE)) {
-        return CE;
+  const {
+    getCustomElement,
+    HTMLElementExported: RendererHTMLElement,
+    defineCustomElement
+  } = renderer; // Should never get a tag with upper case letter at this point, the compiler should
+  // produce only tags with lowercase letters
+  // But, for backwards compatibility, we will lower case the tagName
+
+  tagName = tagName.toLowerCase();
+  let CE = getCustomElement(tagName);
+
+  if (!shared.isUndefined(CE)) {
+    return CE;
+  }
+  /**
+   * LWC Upgradable Element reference to an element that was created
+   * via the scoped registry mechanism, and that is ready to be upgraded.
+   */
+
+
+  CE = class LWCUpgradableElement extends RendererHTMLElement {
+    constructor(upgradeCallback) {
+      super();
+
+      if (shared.isFunction(upgradeCallback)) {
+        upgradeCallback(this); // nothing to do with the result for now
+      }
     }
-    /**
-     * LWC Upgradable Element reference to an element that was created
-     * via the scoped registry mechanism, and that is ready to be upgraded.
-     */
-    CE = class LWCUpgradableElement extends RendererHTMLElement {
-        constructor(upgradeCallback) {
-            super();
-            if (shared.isFunction(upgradeCallback)) {
-                upgradeCallback(this); // nothing to do with the result for now
-            }
-        }
+
+  };
+
+  if (features.lwcRuntimeFlags.ENABLE_NATIVE_CUSTOM_ELEMENT_LIFECYCLE) {
+    CE.prototype.connectedCallback = function () {
+      if (checkHasVM(this)) {
+        connectRootElement(this);
+      }
     };
-    defineCustomElement(tagName, CE);
-    return CE;
+
+    CE.prototype.disconnectedCallback = function () {
+      if (checkHasVM(this)) {
+        disconnectRootElement(this);
+      }
+    };
+  }
+
+  defineCustomElement(tagName, CE);
+  return CE;
 }
 
 /*
@@ -3207,6 +3240,14 @@ function patchProps(oldVnode, vnode, renderer) {
         // different than the one previously set.
         if (isFirstPatch ||
             cur !== (isLiveBindingProp(sel, key) ? getProperty(elm, key) : oldProps[key])) {
+            // Additional verification if properties are supported by the element
+            // Validation relies on html properties and public properties being defined on the element,
+            // SSR has its own custom validation.
+            if (process.env.IS_BROWSER && process.env.NODE_ENV !== 'production') {
+                if (!(key in elm)) {
+                    logWarn(`Unknown public property "${key}" of element <${elm.tagName.toLowerCase()}>. This is either a typo on the corresponding attribute "${shared.htmlPropertyToAttribute(key)}", or the attribute does not exist in this browser or DOM implementation.`);
+                }
+            }
             setProperty(elm, key, cur);
         }
     }
@@ -3365,569 +3406,802 @@ function applyStaticStyleAttribute(vnode, renderer) {
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
 function patchChildren(c1, c2, parent, renderer) {
-    if (hasDynamicChildren(c2)) {
-        updateDynamicChildren(c1, c2, parent, renderer);
-    }
-    else {
-        updateStaticChildren(c1, c2, parent, renderer);
-    }
+  if (hasDynamicChildren(c2)) {
+    updateDynamicChildren(c1, c2, parent, renderer);
+  } else {
+    updateStaticChildren(c1, c2, parent, renderer);
+  }
 }
-function patch(n1, n2, renderer) {
-    var _a, _b;
-    if (n1 === n2) {
-        return;
-    }
-    if (process.env.NODE_ENV !== 'production') {
-        if (!isSameVnode(n1, n2)) {
-            throw new Error('Expected these VNodes to be the same: ' +
-                JSON.stringify({ sel: n1.sel, key: n1.key }) +
-                ', ' +
-                JSON.stringify({ sel: n2.sel, key: n2.key }));
-        }
-    }
-    switch (n2.type) {
-        case 0 /* VNodeType.Text */:
-            // VText has no special capability, fallback to the owner's renderer
-            patchText(n1, n2, renderer);
-            break;
-        case 1 /* VNodeType.Comment */:
-            // VComment has no special capability, fallback to the owner's renderer
-            patchComment(n1, n2, renderer);
-            break;
-        case 4 /* VNodeType.Static */:
-            n2.elm = n1.elm;
-            break;
-        case 2 /* VNodeType.Element */:
-            patchElement(n1, n2, (_a = n2.data.renderer) !== null && _a !== void 0 ? _a : renderer);
-            break;
-        case 3 /* VNodeType.CustomElement */:
-            patchCustomElement(n1, n2, (_b = n2.data.renderer) !== null && _b !== void 0 ? _b : renderer);
-            break;
+
+function patch(n1, n2, parent, renderer) {
+  var _a, _b;
+
+  if (n1 === n2) {
+    return;
+  }
+
+  if (process.env.NODE_ENV !== 'production') {
+    if (!isSameVnode(n1, n2)) {
+      throw new Error('Expected these VNodes to be the same: ' + JSON.stringify({
+        sel: n1.sel,
+        key: n1.key
+      }) + ', ' + JSON.stringify({
+        sel: n2.sel,
+        key: n2.key
+      }));
     }
+  }
+
+  switch (n2.type) {
+    case 0
+    /* VNodeType.Text */
+    :
+      // VText has no special capability, fallback to the owner's renderer
+      patchText(n1, n2, renderer);
+      break;
+
+    case 1
+    /* VNodeType.Comment */
+    :
+      // VComment has no special capability, fallback to the owner's renderer
+      patchComment(n1, n2, renderer);
+      break;
+
+    case 4
+    /* VNodeType.Static */
+    :
+      n2.elm = n1.elm;
+      break;
+
+    case 2
+    /* VNodeType.Element */
+    :
+      patchElement(n1, n2, (_a = n2.data.renderer) !== null && _a !== void 0 ? _a : renderer);
+      break;
+
+    case 3
+    /* VNodeType.CustomElement */
+    :
+      patchCustomElement(n1, n2, parent, (_b = n2.data.renderer) !== null && _b !== void 0 ? _b : renderer);
+      break;
+  }
 }
+
 function mount(node, parent, renderer, anchor) {
-    var _a, _b;
-    switch (node.type) {
-        case 0 /* VNodeType.Text */:
-            // VText has no special capability, fallback to the owner's renderer
-            mountText(node, parent, anchor, renderer);
-            break;
-        case 1 /* VNodeType.Comment */:
-            // VComment has no special capability, fallback to the owner's renderer
-            mountComment(node, parent, anchor, renderer);
-            break;
-        case 4 /* VNodeType.Static */:
-            // VStatic cannot have a custom renderer associated to them, using owner's renderer
-            mountStatic(node, parent, anchor, renderer);
-            break;
-        case 2 /* VNodeType.Element */:
-            // If the vnode data has a renderer override use it, else fallback to owner's renderer
-            mountElement(node, parent, anchor, (_a = node.data.renderer) !== null && _a !== void 0 ? _a : renderer);
-            break;
-        case 3 /* VNodeType.CustomElement */:
-            // If the vnode data has a renderer override use it, else fallback to owner's renderer
-            mountCustomElement(node, parent, anchor, (_b = node.data.renderer) !== null && _b !== void 0 ? _b : renderer);
-            break;
-    }
+  var _a, _b;
+
+  switch (node.type) {
+    case 0
+    /* VNodeType.Text */
+    :
+      // VText has no special capability, fallback to the owner's renderer
+      mountText(node, parent, anchor, renderer);
+      break;
+
+    case 1
+    /* VNodeType.Comment */
+    :
+      // VComment has no special capability, fallback to the owner's renderer
+      mountComment(node, parent, anchor, renderer);
+      break;
+
+    case 4
+    /* VNodeType.Static */
+    :
+      // VStatic cannot have a custom renderer associated to them, using owner's renderer
+      mountStatic(node, parent, anchor, renderer);
+      break;
+
+    case 2
+    /* VNodeType.Element */
+    :
+      // If the vnode data has a renderer override use it, else fallback to owner's renderer
+      mountElement(node, parent, anchor, (_a = node.data.renderer) !== null && _a !== void 0 ? _a : renderer);
+      break;
+
+    case 3
+    /* VNodeType.CustomElement */
+    :
+      // If the vnode data has a renderer override use it, else fallback to owner's renderer
+      mountCustomElement(node, parent, anchor, (_b = node.data.renderer) !== null && _b !== void 0 ? _b : renderer);
+      break;
+  }
 }
+
 function patchText(n1, n2, renderer) {
-    n2.elm = n1.elm;
-    if (n2.text !== n1.text) {
-        updateTextContent(n2, renderer);
-    }
+  n2.elm = n1.elm;
+
+  if (n2.text !== n1.text) {
+    updateTextContent(n2, renderer);
+  }
 }
+
 function mountText(vnode, parent, anchor, renderer) {
-    const { owner } = vnode;
-    const { createText } = renderer;
-    const textNode = (vnode.elm = createText(vnode.text));
-    linkNodeToShadow(textNode, owner, renderer);
-    insertNode(textNode, parent, anchor, renderer);
+  const {
+    owner
+  } = vnode;
+  const {
+    createText
+  } = renderer;
+  const textNode = vnode.elm = createText(vnode.text);
+  linkNodeToShadow(textNode, owner, renderer);
+  insertNode(textNode, parent, anchor, renderer);
 }
+
 function patchComment(n1, n2, renderer) {
-    n2.elm = n1.elm;
-    // FIXME: Comment nodes should be static, we shouldn't need to diff them together. However
-    // it is the case today.
-    if (n2.text !== n1.text) {
-        updateTextContent(n2, renderer);
-    }
+  n2.elm = n1.elm; // FIXME: Comment nodes should be static, we shouldn't need to diff them together. However
+  // it is the case today.
+
+  if (n2.text !== n1.text) {
+    updateTextContent(n2, renderer);
+  }
 }
+
 function mountComment(vnode, parent, anchor, renderer) {
-    const { owner } = vnode;
-    const { createComment } = renderer;
-    const commentNode = (vnode.elm = createComment(vnode.text));
-    linkNodeToShadow(commentNode, owner, renderer);
-    insertNode(commentNode, parent, anchor, renderer);
+  const {
+    owner
+  } = vnode;
+  const {
+    createComment
+  } = renderer;
+  const commentNode = vnode.elm = createComment(vnode.text);
+  linkNodeToShadow(commentNode, owner, renderer);
+  insertNode(commentNode, parent, anchor, renderer);
 }
+
 function mountElement(vnode, parent, anchor, renderer) {
-    const { sel, owner, data: { svg }, } = vnode;
-    const { createElement } = renderer;
-    const namespace = shared.isTrue(svg) ? shared.SVG_NAMESPACE : undefined;
-    const elm = (vnode.elm = createElement(sel, namespace));
-    linkNodeToShadow(elm, owner, renderer);
-    applyStyleScoping(elm, owner, renderer);
-    applyDomManual(elm, vnode);
-    applyElementRestrictions(elm, vnode);
-    patchElementPropsAndAttrs$1(null, vnode, renderer);
-    insertNode(elm, parent, anchor, renderer);
-    mountVNodes(vnode.children, elm, renderer, null);
+  const {
+    sel,
+    owner,
+    data: {
+      svg
+    }
+  } = vnode;
+  const {
+    createElement
+  } = renderer;
+  const namespace = shared.isTrue(svg) ? shared.SVG_NAMESPACE : undefined;
+  const elm = vnode.elm = createElement(sel, namespace);
+  linkNodeToShadow(elm, owner, renderer);
+  applyStyleScoping(elm, owner, renderer);
+  applyDomManual(elm, vnode);
+  applyElementRestrictions(elm, vnode);
+  patchElementPropsAndAttrs$1(null, vnode, renderer);
+  insertNode(elm, parent, anchor, renderer);
+  mountVNodes(vnode.children, elm, renderer, null);
 }
+
 function patchElement(n1, n2, renderer) {
-    const elm = (n2.elm = n1.elm);
-    patchElementPropsAndAttrs$1(n1, n2, renderer);
-    patchChildren(n1.children, n2.children, elm, renderer);
+  const elm = n2.elm = n1.elm;
+  patchElementPropsAndAttrs$1(n1, n2, renderer);
+  patchChildren(n1.children, n2.children, elm, renderer);
 }
+
 function mountStatic(vnode, parent, anchor, renderer) {
-    const { owner } = vnode;
-    const { cloneNode, isSyntheticShadowDefined } = renderer;
-    const elm = (vnode.elm = cloneNode(vnode.fragment, true));
-    linkNodeToShadow(elm, owner, renderer);
-    applyElementRestrictions(elm, vnode);
-    // Marks this node as Static to propagate the shadow resolver. must happen after elm is assigned to the proper shadow
-    const { renderMode, shadowMode } = owner;
-    if (isSyntheticShadowDefined) {
-        if (shadowMode === 1 /* ShadowMode.Synthetic */ || renderMode === 0 /* RenderMode.Light */) {
-            elm[shared.KEY__SHADOW_STATIC] = true;
-        }
+  const {
+    owner
+  } = vnode;
+  const {
+    cloneNode,
+    isSyntheticShadowDefined
+  } = renderer;
+  const elm = vnode.elm = cloneNode(vnode.fragment, true);
+  linkNodeToShadow(elm, owner, renderer);
+  applyElementRestrictions(elm, vnode); // Marks this node as Static to propagate the shadow resolver. must happen after elm is assigned to the proper shadow
+
+  const {
+    renderMode,
+    shadowMode
+  } = owner;
+
+  if (isSyntheticShadowDefined) {
+    if (shadowMode === 1
+    /* ShadowMode.Synthetic */
+    || renderMode === 0
+    /* RenderMode.Light */
+    ) {
+      elm[shared.KEY__SHADOW_STATIC] = true;
     }
-    insertNode(elm, parent, anchor, renderer);
+  }
+
+  insertNode(elm, parent, anchor, renderer);
 }
+
 function mountCustomElement(vnode, parent, anchor, renderer) {
-    const { sel, owner } = vnode;
-    const UpgradableConstructor = getUpgradableConstructor(sel, renderer);
-    /**
-     * Note: if the upgradable constructor does not expect, or throw when we new it
-     * with a callback as the first argument, we could implement a more advanced
-     * mechanism that only passes that argument if the constructor is known to be
-     * an upgradable custom element.
-     */
-    let vm;
-    const elm = new UpgradableConstructor((elm) => {
-        // the custom element from the registry is expecting an upgrade callback
-        vm = createViewModelHook(elm, vnode, renderer);
-    });
-    vnode.elm = elm;
-    vnode.vm = vm;
-    linkNodeToShadow(elm, owner, renderer);
-    applyStyleScoping(elm, owner, renderer);
-    if (vm) {
-        allocateChildren(vnode, vm);
-    }
-    else if (vnode.ctor !== UpgradableConstructor) {
-        throw new TypeError(`Incorrect Component Constructor`);
-    }
-    patchElementPropsAndAttrs$1(null, vnode, renderer);
-    insertNode(elm, parent, anchor, renderer);
-    if (vm) {
+  const {
+    sel,
+    owner
+  } = vnode;
+  const UpgradableConstructor = getUpgradableConstructor(sel, renderer);
+  /**
+   * Note: if the upgradable constructor does not expect, or throw when we new it
+   * with a callback as the first argument, we could implement a more advanced
+   * mechanism that only passes that argument if the constructor is known to be
+   * an upgradable custom element.
+   */
+
+  let vm;
+  const elm = new UpgradableConstructor(elm => {
+    // the custom element from the registry is expecting an upgrade callback
+    vm = createViewModelHook(elm, vnode, renderer);
+  });
+  vnode.elm = elm;
+  vnode.vm = vm;
+  linkNodeToShadow(elm, owner, renderer);
+  applyStyleScoping(elm, owner, renderer);
+
+  if (vm) {
+    allocateChildren(vnode, vm);
+  } else if (vnode.ctor !== UpgradableConstructor) {
+    throw new TypeError(`Incorrect Component Constructor`);
+  }
+
+  patchElementPropsAndAttrs$1(null, vnode, renderer);
+  insertNode(elm, parent, anchor, renderer);
+
+  if (vm) {
+    if (process.env.IS_BROWSER) {
+      if (!features.lwcRuntimeFlags.ENABLE_NATIVE_CUSTOM_ELEMENT_LIFECYCLE) {
         if (process.env.NODE_ENV !== 'production') {
-            shared.assert.isTrue(vm.state === 0 /* VMState.created */, `${vm} cannot be recycled.`);
+          // With synthetic lifecycle callbacks, it's possible for elements to be removed without the engine
+          // noticing it (e.g. `appendChild` the same host element twice). This test ensures we don't regress.
+          shared.assert.isTrue(vm.state === 0
+          /* VMState.created */
+          , `${vm} cannot be recycled.`);
         }
+
         runConnectedCallback(vm);
+      }
+    } else {
+      // On the server, we don't have native custom element lifecycle callbacks, so we must
+      // manually invoke the connectedCallback for a child component.
+      runConnectedCallback(vm);
     }
-    mountVNodes(vnode.children, elm, renderer, null);
-    if (vm) {
-        appendVM(vm);
-    }
+  }
+
+  mountVNodes(vnode.children, elm, renderer, null);
+
+  if (vm) {
+    appendVM(vm);
+  }
 }
-function patchCustomElement(n1, n2, renderer) {
-    const elm = (n2.elm = n1.elm);
-    const vm = (n2.vm = n1.vm);
+
+function patchCustomElement(n1, n2, parent, renderer) {
+  if (n1.ctor !== n2.ctor) {
+    // If the constructor, unmount the current component and mount a new one using the new
+    // constructor.
+    const anchor = renderer.nextSibling(n1.elm);
+    unmount(n1, parent, renderer, true);
+    mountCustomElement(n2, parent, anchor, renderer);
+  } else {
+    // Otherwise patch the existing component with new props/attrs/etc.
+    const elm = n2.elm = n1.elm;
+    const vm = n2.vm = n1.vm;
     patchElementPropsAndAttrs$1(n1, n2, renderer);
+
     if (!shared.isUndefined(vm)) {
-        // in fallback mode, the allocation will always set children to
-        // empty and delegate the real allocation to the slot elements
-        allocateChildren(n2, vm);
-    }
-    // in fallback mode, the children will be always empty, so, nothing
+      // in fallback mode, the allocation will always set children to
+      // empty and delegate the real allocation to the slot elements
+      allocateChildren(n2, vm);
+    } // in fallback mode, the children will be always empty, so, nothing
     // will happen, but in native, it does allocate the light dom
+
+
     patchChildren(n1.children, n2.children, elm, renderer);
+
     if (!shared.isUndefined(vm)) {
-        // this will probably update the shadowRoot, but only if the vm is in a dirty state
-        // this is important to preserve the top to bottom synchronous rendering phase.
-        rerenderVM(vm);
+      // this will probably update the shadowRoot, but only if the vm is in a dirty state
+      // this is important to preserve the top to bottom synchronous rendering phase.
+      rerenderVM(vm);
     }
+  }
 }
+
 function mountVNodes(vnodes, parent, renderer, anchor, start = 0, end = vnodes.length) {
-    for (; start < end; ++start) {
-        const vnode = vnodes[start];
-        if (isVNode(vnode)) {
-            mount(vnode, parent, renderer, anchor);
-        }
+  for (; start < end; ++start) {
+    const vnode = vnodes[start];
+
+    if (isVNode(vnode)) {
+      mount(vnode, parent, renderer, anchor);
     }
+  }
 }
+
 function unmount(vnode, parent, renderer, doRemove = false) {
-    const { type, elm, sel } = vnode;
-    // When unmounting a VNode subtree not all the elements have to removed from the DOM. The
-    // subtree root, is the only element worth unmounting from the subtree.
-    if (doRemove) {
-        // The vnode might or might not have a data.renderer associated to it
-        // but the removal used here is from the owner instead.
-        removeNode(elm, parent, renderer);
-    }
-    switch (type) {
-        case 2 /* VNodeType.Element */: {
-            // Slot content is removed to trigger slotchange event when removing slot.
-            // Only required for synthetic shadow.
-            const shouldRemoveChildren = sel === 'slot' && vnode.owner.shadowMode === 1 /* ShadowMode.Synthetic */;
-            unmountVNodes(vnode.children, elm, renderer, shouldRemoveChildren);
-            break;
-        }
-        case 3 /* VNodeType.CustomElement */: {
-            const { vm } = vnode;
-            // No need to unmount the children here, `removeVM` will take care of removing the
-            // children.
-            if (!shared.isUndefined(vm)) {
-                removeVM(vm);
-            }
+  const {
+    type,
+    elm,
+    sel
+  } = vnode; // When unmounting a VNode subtree not all the elements have to removed from the DOM. The
+  // subtree root, is the only element worth unmounting from the subtree.
+
+  if (doRemove) {
+    // The vnode might or might not have a data.renderer associated to it
+    // but the removal used here is from the owner instead.
+    removeNode(elm, parent, renderer);
+  }
+
+  switch (type) {
+    case 2
+    /* VNodeType.Element */
+    :
+      {
+        // Slot content is removed to trigger slotchange event when removing slot.
+        // Only required for synthetic shadow.
+        const shouldRemoveChildren = sel === 'slot' && vnode.owner.shadowMode === 1
+        /* ShadowMode.Synthetic */
+        ;
+        unmountVNodes(vnode.children, elm, renderer, shouldRemoveChildren);
+        break;
+      }
+
+    case 3
+    /* VNodeType.CustomElement */
+    :
+      {
+        const {
+          vm
+        } = vnode; // No need to unmount the children here, `removeVM` will take care of removing the
+        // children.
+
+        if (!shared.isUndefined(vm)) {
+          removeVM(vm);
         }
-    }
+      }
+  }
 }
+
 function unmountVNodes(vnodes, parent, renderer, doRemove = false, start = 0, end = vnodes.length) {
-    for (; start < end; ++start) {
-        const ch = vnodes[start];
-        if (isVNode(ch)) {
-            unmount(ch, parent, renderer, doRemove);
-        }
+  for (; start < end; ++start) {
+    const ch = vnodes[start];
+
+    if (isVNode(ch)) {
+      unmount(ch, parent, renderer, doRemove);
     }
+  }
 }
+
 function isVNode(vnode) {
-    return vnode != null;
+  return vnode != null;
 }
+
 function linkNodeToShadow(elm, owner, renderer) {
-    const { renderRoot, renderMode, shadowMode } = owner;
-    const { isSyntheticShadowDefined } = renderer;
-    // TODO [#1164]: this should eventually be done by the polyfill directly
-    if (isSyntheticShadowDefined) {
-        if (shadowMode === 1 /* ShadowMode.Synthetic */ || renderMode === 0 /* RenderMode.Light */) {
-            elm[shared.KEY__SHADOW_RESOLVER] = renderRoot[shared.KEY__SHADOW_RESOLVER];
-        }
+  const {
+    renderRoot,
+    renderMode,
+    shadowMode
+  } = owner;
+  const {
+    isSyntheticShadowDefined
+  } = renderer; // TODO [#1164]: this should eventually be done by the polyfill directly
+
+  if (isSyntheticShadowDefined) {
+    if (shadowMode === 1
+    /* ShadowMode.Synthetic */
+    || renderMode === 0
+    /* RenderMode.Light */
+    ) {
+      elm[shared.KEY__SHADOW_RESOLVER] = renderRoot[shared.KEY__SHADOW_RESOLVER];
     }
+  }
 }
+
 function updateTextContent(vnode, renderer) {
-    const { elm, text } = vnode;
-    const { setText } = renderer;
-    if (process.env.NODE_ENV !== 'production') {
-        unlockDomMutation();
-    }
-    setText(elm, text);
-    if (process.env.NODE_ENV !== 'production') {
-        lockDomMutation();
-    }
+  const {
+    elm,
+    text
+  } = vnode;
+  const {
+    setText
+  } = renderer;
+
+  if (process.env.NODE_ENV !== 'production') {
+    unlockDomMutation();
+  }
+
+  setText(elm, text);
+
+  if (process.env.NODE_ENV !== 'production') {
+    lockDomMutation();
+  }
 }
+
 function insertNode(node, parent, anchor, renderer) {
-    if (process.env.NODE_ENV !== 'production') {
-        unlockDomMutation();
-    }
-    renderer.insert(node, parent, anchor);
-    if (process.env.NODE_ENV !== 'production') {
-        lockDomMutation();
-    }
+  if (process.env.NODE_ENV !== 'production') {
+    unlockDomMutation();
+  }
+
+  renderer.insert(node, parent, anchor);
+
+  if (process.env.NODE_ENV !== 'production') {
+    lockDomMutation();
+  }
 }
+
 function removeNode(node, parent, renderer) {
-    if (process.env.NODE_ENV !== 'production') {
-        unlockDomMutation();
-    }
-    renderer.remove(node, parent);
-    if (process.env.NODE_ENV !== 'production') {
-        lockDomMutation();
-    }
+  if (process.env.NODE_ENV !== 'production') {
+    unlockDomMutation();
+  }
+
+  renderer.remove(node, parent);
+
+  if (process.env.NODE_ENV !== 'production') {
+    lockDomMutation();
+  }
 }
+
 function patchElementPropsAndAttrs$1(oldVnode, vnode, renderer) {
-    if (shared.isNull(oldVnode)) {
-        applyEventListeners(vnode, renderer);
-        applyStaticClassAttribute(vnode, renderer);
-        applyStaticStyleAttribute(vnode, renderer);
-    }
-    // Attrs need to be applied to element before props IE11 will wipe out value on radio inputs if
-    // value is set before type=radio.
-    patchClassAttribute(oldVnode, vnode, renderer);
-    patchStyleAttribute(oldVnode, vnode, renderer);
-    patchAttributes(oldVnode, vnode, renderer);
-    patchProps(oldVnode, vnode, renderer);
+  if (shared.isNull(oldVnode)) {
+    applyEventListeners(vnode, renderer);
+    applyStaticClassAttribute(vnode, renderer);
+    applyStaticStyleAttribute(vnode, renderer);
+  } // Attrs need to be applied to element before props IE11 will wipe out value on radio inputs if
+  // value is set before type=radio.
+
+
+  patchClassAttribute(oldVnode, vnode, renderer);
+  patchStyleAttribute(oldVnode, vnode, renderer);
+  patchAttributes(oldVnode, vnode, renderer);
+  patchProps(oldVnode, vnode, renderer);
 }
+
 function applyStyleScoping(elm, owner, renderer) {
-    // Set the class name for `*.scoped.css` style scoping.
-    const scopeToken = getScopeTokenClass(owner);
-    if (!shared.isNull(scopeToken)) {
-        const { getClassList } = renderer;
-        // TODO [#2762]: this dot notation with add is probably problematic
-        // probably we should have a renderer api for just the add operation
-        getClassList(elm).add(scopeToken);
-    }
-    // Set property element for synthetic shadow DOM style scoping.
-    const { stylesheetToken: syntheticToken } = owner.context;
-    if (owner.shadowMode === 1 /* ShadowMode.Synthetic */ && !shared.isUndefined(syntheticToken)) {
-        elm.$shadowToken$ = syntheticToken;
-    }
+  // Set the class name for `*.scoped.css` style scoping.
+  const scopeToken = getScopeTokenClass(owner);
+
+  if (!shared.isNull(scopeToken)) {
+    const {
+      getClassList
+    } = renderer; // TODO [#2762]: this dot notation with add is probably problematic
+    // probably we should have a renderer api for just the add operation
+
+    getClassList(elm).add(scopeToken);
+  } // Set property element for synthetic shadow DOM style scoping.
+
+
+  const {
+    stylesheetToken: syntheticToken
+  } = owner.context;
+
+  if (owner.shadowMode === 1
+  /* ShadowMode.Synthetic */
+  && !shared.isUndefined(syntheticToken)) {
+    elm.$shadowToken$ = syntheticToken;
+  }
 }
+
 function applyDomManual(elm, vnode) {
-    var _a;
-    const { owner, data: { context }, } = vnode;
-    if (owner.shadowMode === 1 /* ShadowMode.Synthetic */ && ((_a = context === null || context === void 0 ? void 0 : context.lwc) === null || _a === void 0 ? void 0 : _a.dom) === "manual" /* LwcDomMode.Manual */) {
-        elm.$domManual$ = true;
+  var _a;
+
+  const {
+    owner,
+    data: {
+      context
     }
+  } = vnode;
+
+  if (owner.shadowMode === 1
+  /* ShadowMode.Synthetic */
+  && ((_a = context === null || context === void 0 ? void 0 : context.lwc) === null || _a === void 0 ? void 0 : _a.dom) === "manual"
+  /* LwcDomMode.Manual */
+  ) {
+    elm.$domManual$ = true;
+  }
 }
+
 function applyElementRestrictions(elm, vnode) {
-    var _a, _b;
-    if (process.env.NODE_ENV !== 'production') {
-        const isPortal = vnode.type === 2 /* VNodeType.Element */ && ((_b = (_a = vnode.data.context) === null || _a === void 0 ? void 0 : _a.lwc) === null || _b === void 0 ? void 0 : _b.dom) === "manual" /* LwcDomMode.Manual */;
-        const isLight = vnode.owner.renderMode === 0 /* RenderMode.Light */;
-        patchElementWithRestrictions(elm, {
-            isPortal,
-            isLight,
-        });
-    }
+  var _a, _b;
+
+  if (process.env.NODE_ENV !== 'production') {
+    const isPortal = vnode.type === 2
+    /* VNodeType.Element */
+    && ((_b = (_a = vnode.data.context) === null || _a === void 0 ? void 0 : _a.lwc) === null || _b === void 0 ? void 0 : _b.dom) === "manual"
+    /* LwcDomMode.Manual */
+    ;
+    const isLight = vnode.owner.renderMode === 0
+    /* RenderMode.Light */
+    ;
+    patchElementWithRestrictions(elm, {
+      isPortal,
+      isLight
+    });
+  }
 }
+
 function allocateChildren(vnode, vm) {
-    // A component with slots will re-render because:
-    // 1- There is a change of the internal state.
-    // 2- There is a change on the external api (ex: slots)
-    //
-    // In case #1, the vnodes in the cmpSlots will be reused since they didn't changed. This routine emptied the
-    // slotted children when those VCustomElement were rendered and therefore in subsequent calls to allocate children
-    // in a reused VCustomElement, there won't be any slotted children.
-    // For those cases, we will use the reference for allocated children stored when rendering the fresh VCustomElement.
-    //
-    // In case #2, we will always get a fresh VCustomElement.
-    const children = vnode.aChildren || vnode.children;
-    vm.aChildren = children;
-    const { renderMode, shadowMode } = vm;
-    if (shadowMode === 1 /* ShadowMode.Synthetic */ || renderMode === 0 /* RenderMode.Light */) {
-        // slow path
-        allocateInSlot(vm, children);
-        // save the allocated children in case this vnode is reused.
-        vnode.aChildren = children;
-        // every child vnode is now allocated, and the host should receive none directly, it receives them via the shadow!
-        vnode.children = EmptyArray;
-    }
+  // A component with slots will re-render because:
+  // 1- There is a change of the internal state.
+  // 2- There is a change on the external api (ex: slots)
+  //
+  // In case #1, the vnodes in the cmpSlots will be reused since they didn't changed. This routine emptied the
+  // slotted children when those VCustomElement were rendered and therefore in subsequent calls to allocate children
+  // in a reused VCustomElement, there won't be any slotted children.
+  // For those cases, we will use the reference for allocated children stored when rendering the fresh VCustomElement.
+  //
+  // In case #2, we will always get a fresh VCustomElement.
+  const children = vnode.aChildren || vnode.children;
+  vm.aChildren = children;
+  const {
+    renderMode,
+    shadowMode
+  } = vm;
+
+  if (shadowMode === 1
+  /* ShadowMode.Synthetic */
+  || renderMode === 0
+  /* RenderMode.Light */
+  ) {
+    // slow path
+    allocateInSlot(vm, children); // save the allocated children in case this vnode is reused.
+
+    vnode.aChildren = children; // every child vnode is now allocated, and the host should receive none directly, it receives them via the shadow!
+
+    vnode.children = EmptyArray;
+  }
 }
+
 function createViewModelHook(elm, vnode, renderer) {
-    let vm = getAssociatedVMIfPresent(elm);
-    // There is a possibility that a custom element is registered under tagName, in which case, the
-    // initialization is already carry on, and there is nothing else to do here since this hook is
-    // called right after invoking `document.createElement`.
-    if (!shared.isUndefined(vm)) {
-        return vm;
-    }
-    const { sel, mode, ctor, owner } = vnode;
-    vm = createVM(elm, ctor, renderer, {
-        mode,
-        owner,
-        tagName: sel,
-    });
-    if (process.env.NODE_ENV !== 'production') {
-        shared.assert.isTrue(shared.isArray(vnode.children), `Invalid vnode for a custom element, it must have children defined.`);
-    }
+  let vm = getAssociatedVMIfPresent(elm); // There is a possibility that a custom element is registered under tagName, in which case, the
+  // initialization is already carry on, and there is nothing else to do here since this hook is
+  // called right after invoking `document.createElement`.
+
+  if (!shared.isUndefined(vm)) {
     return vm;
+  }
+
+  const {
+    sel,
+    mode,
+    ctor,
+    owner
+  } = vnode;
+  vm = createVM(elm, ctor, renderer, {
+    mode,
+    owner,
+    tagName: sel
+  });
+
+  if (process.env.NODE_ENV !== 'production') {
+    shared.assert.isTrue(shared.isArray(vnode.children), `Invalid vnode for a custom element, it must have children defined.`);
+  }
+
+  return vm;
 }
+
 function allocateInSlot(vm, children) {
-    var _a;
-    const { cmpSlots: oldSlots } = vm;
-    const cmpSlots = (vm.cmpSlots = shared.create(null));
-    for (let i = 0, len = children.length; i < len; i += 1) {
-        const vnode = children[i];
-        if (shared.isNull(vnode)) {
-            continue;
-        }
-        let slotName = '';
-        if (isVBaseElement(vnode)) {
-            slotName = ((_a = vnode.data.attrs) === null || _a === void 0 ? void 0 : _a.slot) || '';
-        }
-        const vnodes = (cmpSlots[slotName] = cmpSlots[slotName] || []);
-        shared.ArrayPush.call(vnodes, vnode);
-    }
-    if (shared.isFalse(vm.isDirty)) {
-        // We need to determine if the old allocation is really different from the new one
-        // and mark the vm as dirty
-        const oldKeys = shared.keys(oldSlots);
-        if (oldKeys.length !== shared.keys(cmpSlots).length) {
-            markComponentAsDirty(vm);
-            return;
-        }
-        for (let i = 0, len = oldKeys.length; i < len; i += 1) {
-            const key = oldKeys[i];
-            if (shared.isUndefined(cmpSlots[key]) || oldSlots[key].length !== cmpSlots[key].length) {
-                markComponentAsDirty(vm);
-                return;
-            }
-            const oldVNodes = oldSlots[key];
-            const vnodes = cmpSlots[key];
-            for (let j = 0, a = cmpSlots[key].length; j < a; j += 1) {
-                if (oldVNodes[j] !== vnodes[j]) {
-                    markComponentAsDirty(vm);
-                    return;
-                }
-            }
+  var _a;
+
+  const {
+    cmpSlots: oldSlots
+  } = vm;
+  const cmpSlots = vm.cmpSlots = shared.create(null);
+
+  for (let i = 0, len = children.length; i < len; i += 1) {
+    const vnode = children[i];
+
+    if (shared.isNull(vnode)) {
+      continue;
+    }
+
+    let slotName = '';
+
+    if (isVBaseElement(vnode)) {
+      slotName = ((_a = vnode.data.attrs) === null || _a === void 0 ? void 0 : _a.slot) || '';
+    }
+
+    const vnodes = cmpSlots[slotName] = cmpSlots[slotName] || [];
+    shared.ArrayPush.call(vnodes, vnode);
+  }
+
+  if (shared.isFalse(vm.isDirty)) {
+    // We need to determine if the old allocation is really different from the new one
+    // and mark the vm as dirty
+    const oldKeys = shared.keys(oldSlots);
+
+    if (oldKeys.length !== shared.keys(cmpSlots).length) {
+      markComponentAsDirty(vm);
+      return;
+    }
+
+    for (let i = 0, len = oldKeys.length; i < len; i += 1) {
+      const key = oldKeys[i];
+
+      if (shared.isUndefined(cmpSlots[key]) || oldSlots[key].length !== cmpSlots[key].length) {
+        markComponentAsDirty(vm);
+        return;
+      }
+
+      const oldVNodes = oldSlots[key];
+      const vnodes = cmpSlots[key];
+
+      for (let j = 0, a = cmpSlots[key].length; j < a; j += 1) {
+        if (oldVNodes[j] !== vnodes[j]) {
+          markComponentAsDirty(vm);
+          return;
         }
+      }
     }
-}
-// Using a WeakMap instead of a WeakSet because this one works in IE11 :(
-const FromIteration = new WeakMap();
-// dynamic children means it was generated by an iteration
+  }
+} // Using a WeakMap instead of a WeakSet because this one works in IE11 :(
+
+
+const FromIteration = new WeakMap(); // dynamic children means it was generated by an iteration
 // in a template, and will require a more complex diffing algo.
+
 function markAsDynamicChildren(children) {
-    FromIteration.set(children, 1);
+  FromIteration.set(children, 1);
 }
+
 function hasDynamicChildren(children) {
-    return FromIteration.has(children);
+  return FromIteration.has(children);
 }
+
 function createKeyToOldIdx(children, beginIdx, endIdx) {
-    const map = {};
-    // TODO [#1637]: simplify this by assuming that all vnodes has keys
-    for (let j = beginIdx; j <= endIdx; ++j) {
-        const ch = children[j];
-        if (isVNode(ch)) {
-            const { key } = ch;
-            if (key !== undefined) {
-                map[key] = j;
-            }
-        }
+  const map = {}; // TODO [#1637]: simplify this by assuming that all vnodes has keys
+
+  for (let j = beginIdx; j <= endIdx; ++j) {
+    const ch = children[j];
+
+    if (isVNode(ch)) {
+      const {
+        key
+      } = ch;
+
+      if (key !== undefined) {
+        map[key] = j;
+      }
     }
-    return map;
+  }
+
+  return map;
 }
+
 function updateDynamicChildren(oldCh, newCh, parent, renderer) {
-    let oldStartIdx = 0;
-    let newStartIdx = 0;
-    let oldEndIdx = oldCh.length - 1;
-    let oldStartVnode = oldCh[0];
-    let oldEndVnode = oldCh[oldEndIdx];
-    const newChEnd = newCh.length - 1;
-    let newEndIdx = newChEnd;
-    let newStartVnode = newCh[0];
-    let newEndVnode = newCh[newEndIdx];
-    let oldKeyToIdx;
-    let idxInOld;
-    let elmToMove;
-    let before;
-    let clonedOldCh = false;
-    while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
-        if (!isVNode(oldStartVnode)) {
-            oldStartVnode = oldCh[++oldStartIdx]; // Vnode might have been moved left
-        }
-        else if (!isVNode(oldEndVnode)) {
-            oldEndVnode = oldCh[--oldEndIdx];
-        }
-        else if (!isVNode(newStartVnode)) {
-            newStartVnode = newCh[++newStartIdx];
-        }
-        else if (!isVNode(newEndVnode)) {
-            newEndVnode = newCh[--newEndIdx];
-        }
-        else if (isSameVnode(oldStartVnode, newStartVnode)) {
-            patch(oldStartVnode, newStartVnode, renderer);
-            oldStartVnode = oldCh[++oldStartIdx];
-            newStartVnode = newCh[++newStartIdx];
-        }
-        else if (isSameVnode(oldEndVnode, newEndVnode)) {
-            patch(oldEndVnode, newEndVnode, renderer);
-            oldEndVnode = oldCh[--oldEndIdx];
-            newEndVnode = newCh[--newEndIdx];
-        }
-        else if (isSameVnode(oldStartVnode, newEndVnode)) {
-            // Vnode moved right
-            patch(oldStartVnode, newEndVnode, renderer);
-            insertNode(oldStartVnode.elm, parent, renderer.nextSibling(oldEndVnode.elm), renderer);
-            oldStartVnode = oldCh[++oldStartIdx];
-            newEndVnode = newCh[--newEndIdx];
-        }
-        else if (isSameVnode(oldEndVnode, newStartVnode)) {
-            // Vnode moved left
-            patch(oldEndVnode, newStartVnode, renderer);
-            insertNode(newStartVnode.elm, parent, oldStartVnode.elm, renderer);
-            oldEndVnode = oldCh[--oldEndIdx];
-            newStartVnode = newCh[++newStartIdx];
-        }
-        else {
-            if (oldKeyToIdx === undefined) {
-                oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx);
-            }
-            idxInOld = oldKeyToIdx[newStartVnode.key];
-            if (shared.isUndefined(idxInOld)) {
-                // New element
-                mount(newStartVnode, parent, renderer, oldStartVnode.elm);
-                newStartVnode = newCh[++newStartIdx];
-            }
-            else {
-                elmToMove = oldCh[idxInOld];
-                if (isVNode(elmToMove)) {
-                    if (elmToMove.sel !== newStartVnode.sel) {
-                        // New element
-                        mount(newStartVnode, parent, renderer, oldStartVnode.elm);
-                    }
-                    else {
-                        patch(elmToMove, newStartVnode, renderer);
-                        // Delete the old child, but copy the array since it is read-only.
-                        // The `oldCh` will be GC'ed after `updateDynamicChildren` is complete,
-                        // so we only care about the `oldCh` object inside this function.
-                        // To avoid cloning over and over again, we check `clonedOldCh`
-                        // and only clone once.
-                        if (!clonedOldCh) {
-                            clonedOldCh = true;
-                            oldCh = [...oldCh];
-                        }
-                        // We've already cloned at least once, so it's no longer read-only
-                        oldCh[idxInOld] = undefined;
-                        insertNode(elmToMove.elm, parent, oldStartVnode.elm, renderer);
-                    }
-                }
-                newStartVnode = newCh[++newStartIdx];
-            }
+  let oldStartIdx = 0;
+  let newStartIdx = 0;
+  let oldEndIdx = oldCh.length - 1;
+  let oldStartVnode = oldCh[0];
+  let oldEndVnode = oldCh[oldEndIdx];
+  const newChEnd = newCh.length - 1;
+  let newEndIdx = newChEnd;
+  let newStartVnode = newCh[0];
+  let newEndVnode = newCh[newEndIdx];
+  let oldKeyToIdx;
+  let idxInOld;
+  let elmToMove;
+  let before;
+  let clonedOldCh = false;
+
+  while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
+    if (!isVNode(oldStartVnode)) {
+      oldStartVnode = oldCh[++oldStartIdx]; // Vnode might have been moved left
+    } else if (!isVNode(oldEndVnode)) {
+      oldEndVnode = oldCh[--oldEndIdx];
+    } else if (!isVNode(newStartVnode)) {
+      newStartVnode = newCh[++newStartIdx];
+    } else if (!isVNode(newEndVnode)) {
+      newEndVnode = newCh[--newEndIdx];
+    } else if (isSameVnode(oldStartVnode, newStartVnode)) {
+      patch(oldStartVnode, newStartVnode, parent, renderer);
+      oldStartVnode = oldCh[++oldStartIdx];
+      newStartVnode = newCh[++newStartIdx];
+    } else if (isSameVnode(oldEndVnode, newEndVnode)) {
+      patch(oldEndVnode, newEndVnode, parent, renderer);
+      oldEndVnode = oldCh[--oldEndIdx];
+      newEndVnode = newCh[--newEndIdx];
+    } else if (isSameVnode(oldStartVnode, newEndVnode)) {
+      // Vnode moved right
+      patch(oldStartVnode, newEndVnode, parent, renderer);
+      insertNode(oldStartVnode.elm, parent, renderer.nextSibling(oldEndVnode.elm), renderer);
+      oldStartVnode = oldCh[++oldStartIdx];
+      newEndVnode = newCh[--newEndIdx];
+    } else if (isSameVnode(oldEndVnode, newStartVnode)) {
+      // Vnode moved left
+      patch(oldEndVnode, newStartVnode, parent, renderer);
+      insertNode(newStartVnode.elm, parent, oldStartVnode.elm, renderer);
+      oldEndVnode = oldCh[--oldEndIdx];
+      newStartVnode = newCh[++newStartIdx];
+    } else {
+      if (oldKeyToIdx === undefined) {
+        oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx);
+      }
+
+      idxInOld = oldKeyToIdx[newStartVnode.key];
+
+      if (shared.isUndefined(idxInOld)) {
+        // New element
+        mount(newStartVnode, parent, renderer, oldStartVnode.elm);
+        newStartVnode = newCh[++newStartIdx];
+      } else {
+        elmToMove = oldCh[idxInOld];
+
+        if (isVNode(elmToMove)) {
+          if (elmToMove.sel !== newStartVnode.sel) {
+            // New element
+            mount(newStartVnode, parent, renderer, oldStartVnode.elm);
+          } else {
+            patch(elmToMove, newStartVnode, parent, renderer); // Delete the old child, but copy the array since it is read-only.
+            // The `oldCh` will be GC'ed after `updateDynamicChildren` is complete,
+            // so we only care about the `oldCh` object inside this function.
+            // To avoid cloning over and over again, we check `clonedOldCh`
+            // and only clone once.
+
+            if (!clonedOldCh) {
+              clonedOldCh = true;
+              oldCh = [...oldCh];
+            } // We've already cloned at least once, so it's no longer read-only
+
+
+            oldCh[idxInOld] = undefined;
+            insertNode(elmToMove.elm, parent, oldStartVnode.elm, renderer);
+          }
         }
+
+        newStartVnode = newCh[++newStartIdx];
+      }
     }
-    if (oldStartIdx <= oldEndIdx || newStartIdx <= newEndIdx) {
-        if (oldStartIdx > oldEndIdx) {
-            // There's some cases in which the sub array of vnodes to be inserted is followed by null(s) and an
-            // already processed vnode, in such cases the vnodes to be inserted should be before that processed vnode.
-            let i = newEndIdx;
-            let n;
-            do {
-                n = newCh[++i];
-            } while (!isVNode(n) && i < newChEnd);
-            before = isVNode(n) ? n.elm : null;
-            mountVNodes(newCh, parent, renderer, before, newStartIdx, newEndIdx + 1);
-        }
-        else {
-            unmountVNodes(oldCh, parent, renderer, true, oldStartIdx, oldEndIdx + 1);
-        }
+  }
+
+  if (oldStartIdx <= oldEndIdx || newStartIdx <= newEndIdx) {
+    if (oldStartIdx > oldEndIdx) {
+      // There's some cases in which the sub array of vnodes to be inserted is followed by null(s) and an
+      // already processed vnode, in such cases the vnodes to be inserted should be before that processed vnode.
+      let i = newEndIdx;
+      let n;
+
+      do {
+        n = newCh[++i];
+      } while (!isVNode(n) && i < newChEnd);
+
+      before = isVNode(n) ? n.elm : null;
+      mountVNodes(newCh, parent, renderer, before, newStartIdx, newEndIdx + 1);
+    } else {
+      unmountVNodes(oldCh, parent, renderer, true, oldStartIdx, oldEndIdx + 1);
     }
+  }
 }
+
 function updateStaticChildren(c1, c2, parent, renderer) {
-    const c1Length = c1.length;
-    const c2Length = c2.length;
-    if (c1Length === 0) {
-        // the old list is empty, we can directly insert anything new
-        mountVNodes(c2, parent, renderer, null);
-        return;
-    }
-    if (c2Length === 0) {
-        // the old list is nonempty and the new list is empty so we can directly remove all old nodes
-        // this is the case in which the dynamic children of an if-directive should be removed
-        unmountVNodes(c1, parent, renderer, true);
-        return;
-    }
-    // if the old list is not empty, the new list MUST have the same
-    // amount of nodes, that's why we call this static children
-    let anchor = null;
-    for (let i = c2Length - 1; i >= 0; i -= 1) {
-        const n1 = c1[i];
-        const n2 = c2[i];
-        if (n2 !== n1) {
-            if (isVNode(n1)) {
-                if (isVNode(n2)) {
-                    // both vnodes are equivalent, and we just need to patch them
-                    patch(n1, n2, renderer);
-                    anchor = n2.elm;
-                }
-                else {
-                    // removing the old vnode since the new one is null
-                    unmount(n1, parent, renderer, true);
-                }
-            }
-            else if (isVNode(n2)) {
-                mount(n2, parent, renderer, anchor);
-                anchor = n2.elm;
-            }
+  const c1Length = c1.length;
+  const c2Length = c2.length;
+
+  if (c1Length === 0) {
+    // the old list is empty, we can directly insert anything new
+    mountVNodes(c2, parent, renderer, null);
+    return;
+  }
+
+  if (c2Length === 0) {
+    // the old list is nonempty and the new list is empty so we can directly remove all old nodes
+    // this is the case in which the dynamic children of an if-directive should be removed
+    unmountVNodes(c1, parent, renderer, true);
+    return;
+  } // if the old list is not empty, the new list MUST have the same
+  // amount of nodes, that's why we call this static children
+
+
+  let anchor = null;
+
+  for (let i = c2Length - 1; i >= 0; i -= 1) {
+    const n1 = c1[i];
+    const n2 = c2[i];
+
+    if (n2 !== n1) {
+      if (isVNode(n1)) {
+        if (isVNode(n2)) {
+          // both vnodes are equivalent, and we just need to patch them
+          patch(n1, n2, parent, renderer);
+          anchor = n2.elm;
+        } else {
+          // removing the old vnode since the new one is null
+          unmount(n1, parent, renderer, true);
         }
+      } else if (isVNode(n2)) {
+        mount(n2, parent, renderer, anchor);
+        anchor = n2.elm;
+      }
     }
+  }
 }
 
 /*
@@ -4248,13 +4522,6 @@ function fid(url) {
     }
     return url;
 }
-/**
- * Map to store an index value assigned to any dynamic component reference ingested
- * by dc() api. This allows us to generate a unique unique per template per dynamic
- * component reference to avoid diffing algo mismatches.
- */
-const DynamicImportedComponentMap = new Map();
-let dynamicImportedComponentCounter = 0;
 /**
  * create a dynamic component via `<x-foo lwc:dynamic={Ctor}>`
  */
@@ -4271,18 +4538,7 @@ function dc(sel, Ctor, data, children = EmptyArray) {
     if (!isComponentConstructor(Ctor)) {
         throw new Error(`Invalid LWC Constructor ${shared.toString(Ctor)} for custom element <${sel}>.`);
     }
-    let idx = DynamicImportedComponentMap.get(Ctor);
-    if (shared.isUndefined(idx)) {
-        idx = dynamicImportedComponentCounter++;
-        DynamicImportedComponentMap.set(Ctor, idx);
-    }
-    // the new vnode key is a mix of idx and compiler key, this is required by the diffing algo
-    // to identify different constructors as vnodes with different keys to avoid reusing the
-    // element used for previous constructors.
-    // Shallow clone is necessary here becuase VElementData may be shared across VNodes due to
-    // hoisting optimization.
-    const newData = Object.assign(Object.assign({}, data), { key: `dc:${idx}:${data.key}` });
-    return c(sel, Ctor, newData, children);
+    return c(sel, Ctor, data, children);
 }
 /**
  * slow children collection marking mechanism. this API allows the compiler to signal
@@ -5008,7 +5264,7 @@ function createVM(elm, ctor, renderer, options) {
       return `[object:vm ${def.name} (${vm.idx})]`;
     };
 
-    if (features.runtimeFlags.ENABLE_FORCE_NATIVE_SHADOW_MODE_FOR_TEST) {
+    if (features.lwcRuntimeFlags.ENABLE_FORCE_NATIVE_SHADOW_MODE_FOR_TEST) {
       vm.shadowMode = 0
       /* ShadowMode.Native */
       ;
@@ -5047,7 +5303,7 @@ function computeShadowMode(vm, renderer) {
     } else if (isNativeShadowDefined) {
       // Not combined with above condition because @lwc/features only supports identifiers in
       // the if-condition.
-      if (features.runtimeFlags.ENABLE_MIXED_SHADOW_MODE) {
+      if (features.lwcRuntimeFlags.ENABLE_MIXED_SHADOW_MODE) {
         if (def.shadowSupportMode === "any"
         /* ShadowSupportMode.Any */
         ) {
@@ -5176,13 +5432,10 @@ function runRenderedCallback(vm) {
   const {
     def: {
       renderedCallback
-    },
-    renderer: {
-      ssr
     }
   } = vm;
 
-  if (shared.isTrue(ssr)) {
+  if (!process.env.IS_BROWSER) {
     return;
   }
 
@@ -5435,13 +5688,7 @@ function resetComponentRoot(vm) {
   vm.velements = EmptyArray;
 }
 function scheduleRehydration(vm) {
-  const {
-    renderer: {
-      ssr
-    }
-  } = vm;
-
-  if (shared.isTrue(ssr) || shared.isTrue(vm.isScheduled)) {
+  if (!process.env.IS_BROWSER || shared.isTrue(vm.isScheduled)) {
     return;
   }
 
@@ -5548,15 +5795,8 @@ class WireContextRegistrationEvent extends CustomEvent {
 }
 
 function createFieldDataCallback(vm, name) {
-  const {
-    cmpFields
-  } = vm;
   return value => {
-    if (value !== vm.cmpFields[name]) {
-      // storing the value in the underlying storage
-      cmpFields[name] = value;
-      componentValueMutated(vm, name);
-    }
+    updateComponentValue(vm, name, value);
   };
 }
 
@@ -5774,7 +6014,7 @@ function installWireAdapters(vm) {
       shared.ArrayPush.call(wiredConnecting, () => {
         connector.connect();
 
-        if (!features.runtimeFlags.ENABLE_WIRE_SYNC_EMIT) {
+        if (!features.lwcRuntimeFlags.ENABLE_WIRE_SYNC_EMIT) {
           if (hasDynamicParams) {
             Promise.resolve().then(computeConfigAndUpdate);
             return;
@@ -5920,6 +6160,7 @@ function hydrateNode(node, vnode, renderer) {
     }
     return renderer.nextSibling(hydratedNode);
 }
+const NODE_VALUE_PROP = 'nodeValue';
 function hydrateText(node, vnode, renderer) {
     var _a;
     if (!hasCorrectNodeType(vnode, node, 3 /* EnvNodeTypes.TEXT */, renderer)) {
@@ -5927,7 +6168,7 @@ function hydrateText(node, vnode, renderer) {
     }
     if (process.env.NODE_ENV !== 'production') {
         const { getProperty } = renderer;
-        const nodeValue = getProperty(node, 'nodeValue');
+        const nodeValue = getProperty(node, NODE_VALUE_PROP);
         if (nodeValue !== vnode.text && !(nodeValue === '\u200D' && vnode.text === '')) {
             logWarn('Hydration mismatch: text values do not match, will recover from the difference', vnode.owner);
         }
@@ -5944,13 +6185,13 @@ function hydrateComment(node, vnode, renderer) {
     }
     if (process.env.NODE_ENV !== 'production') {
         const { getProperty } = renderer;
-        const nodeValue = getProperty(node, 'nodeValue');
+        const nodeValue = getProperty(node, NODE_VALUE_PROP);
         if (nodeValue !== vnode.text) {
             logWarn('Hydration mismatch: comment values do not match, will recover from the difference', vnode.owner);
         }
     }
     const { setProperty } = renderer;
-    setProperty(node, 'nodeValue', (_a = vnode.text) !== null && _a !== void 0 ? _a : null);
+    setProperty(node, NODE_VALUE_PROP, (_a = vnode.text) !== null && _a !== void 0 ? _a : null);
     vnode.elm = node;
     return node;
 }
@@ -6218,13 +6459,13 @@ function areCompatibleNodes(client, ssr, vnode, renderer) {
         if (!hasCorrectNodeType(vnode, ssr, 3 /* EnvNodeTypes.TEXT */, renderer)) {
             return false;
         }
-        return getProperty(client, 'nodeValue') === getProperty(ssr, 'nodeValue');
+        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, 'nodeValue') === getProperty(ssr, 'nodeValue');
+        return getProperty(client, NODE_VALUE_PROP) === getProperty(ssr, NODE_VALUE_PROP);
     }
     if (!hasCorrectNodeType(vnode, ssr, 1 /* EnvNodeTypes.ELEMENT */, renderer)) {
         return false;
@@ -6419,4 +6660,4 @@ exports.swapTemplate = swapTemplate;
 exports.track = track;
 exports.unwrap = unwrap;
 exports.wire = wire;
-/* version: 2.22.0 */
+/* version: 2.23.2 */