lwc 2.23.0 → 2.23.3

package/dist/engine-server/commonjs/es2017/engine-server.js

@@ -254,7 +254,7 @@ const XLINK_NAMESPACE = 'http://www.w3.org/1999/xlink';
 // e.g. `</tagName>` or `<tagName />`. For instance, `<meta>` closes on its own; no need for a slash.
 // These only come from HTML; there are no void elements in the SVG or MathML namespaces.
 // See: https://html.spec.whatwg.org/multipage/syntax.html#syntax-tags
-const VOID_ELEMENTS_SET = new Set([
+const VOID_ELEMENTS = [
     'area',
     'base',
     'br',
@@ -268,7 +268,12 @@ const VOID_ELEMENTS_SET = new Set([
     'source',
     'track',
     'wbr',
-]);
+];
+// These elements have been deprecated but preserving their usage for backwards compatibility
+// until we can officially deprecate them from LWC.
+// See: https://html.spec.whatwg.org/multipage/obsolete.html#obsolete-but-conforming-features
+const DEPRECATED_VOID_ELEMENTS = ['param', 'keygen', 'menuitem'];
+const VOID_ELEMENTS_SET = new Set([...VOID_ELEMENTS, ...DEPRECATED_VOID_ELEMENTS]);
 function isVoidElement(name, namespace) {
     return namespace === HTML_NAMESPACE && VOID_ELEMENTS_SET.has(name.toLowerCase());
 }
@@ -317,24 +322,36 @@ function isBooleanAttribute(attrName, tagName) {
     return (allowedTagNames !== undefined &&
         (allowedTagNames.size === 0 || allowedTagNames.has(tagName)));
 }
+// This list is based on https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes
 const GLOBAL_ATTRIBUTE = new Set([
-    'role',
     'accesskey',
+    'autocapitalize',
+    'autofocus',
     'class',
     'contenteditable',
     'contextmenu',
     'dir',
     'draggable',
-    'dropzone',
+    'enterkeyhint',
+    'exportparts',
     'hidden',
     'id',
+    'inputmode',
+    'is',
+    'itemid',
     'itemprop',
+    'itemref',
+    'itemscope',
+    'itemtype',
     'lang',
+    'nonce',
+    'part',
     'slot',
     'spellcheck',
     'style',
     'tabindex',
     'title',
+    'translate',
 ]);
 function isGlobalHtmlAttribute(attrName) {
     return GLOBAL_ATTRIBUTE.has(attrName);
@@ -419,9 +436,9 @@ function htmlEscape(str, attrMode = false) {
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
 // Increment whenever the LWC template compiler changes
-const LWC_VERSION = "2.23.0";
+const LWC_VERSION = "2.23.3";
 const LWC_VERSION_COMMENT_REGEX = /\/\*LWC compiler v([\d.]+)\*\/\s*}/;
-/** version: 2.23.0 */
+/** version: 2.23.3 */
 
 /*
  * Copyright (c) 2020, salesforce.com, inc.
@@ -473,6 +490,7 @@ const features = {
     ENABLE_HTML_COLLECTIONS_PATCH: null,
     ENABLE_INNER_OUTER_TEXT_PATCH: null,
     ENABLE_MIXED_SHADOW_MODE: null,
+    ENABLE_NATIVE_CUSTOM_ELEMENT_LIFECYCLE: null,
     ENABLE_NODE_LIST_PATCH: null,
     ENABLE_NODE_PATCH: null,
     ENABLE_REACTIVE_SETTER: null,
@@ -481,7 +499,7 @@ const features = {
 if (!_globalThis.lwcRuntimeFlags) {
     Object.defineProperty(_globalThis, 'lwcRuntimeFlags', { value: create(null) });
 }
-const runtimeFlags = _globalThis.lwcRuntimeFlags;
+const lwcRuntimeFlags = _globalThis.lwcRuntimeFlags;
 /**
  * Set the value at runtime of a given feature flag. This method only be invoked once per feature
  * flag. It is meant to be used during the app initialization.
@@ -508,17 +526,17 @@ function setFeatureFlag(name, value) {
     }
     if (process.env.NODE_ENV !== 'production') {
         // Allow the same flag to be set more than once outside of production to enable testing
-        runtimeFlags[name] = value;
+        lwcRuntimeFlags[name] = value;
     }
     else {
         // Disallow the same flag to be set more than once in production
-        const runtimeValue = runtimeFlags[name];
+        const runtimeValue = lwcRuntimeFlags[name];
         if (!isUndefined$1(runtimeValue)) {
             // eslint-disable-next-line no-console
             console.error(`Failed to set the value "${value}" for the runtime feature flag "${name}". "${name}" has already been set with the value "${runtimeValue}".`);
             return;
         }
-        defineProperty(runtimeFlags, name, { value });
+        defineProperty(lwcRuntimeFlags, name, { value });
     }
 }
 /**
@@ -530,7 +548,7 @@ function setFeatureFlagForTest(name, value) {
         setFeatureFlag(name, value);
     }
 }
-/** version: 2.23.0 */
+/** version: 2.23.3 */
 
 /* proxy-compat-disable */
 
@@ -546,7 +564,7 @@ if (process.env.NODE_ENV !== 'production' && typeof __karma__ !== 'undefined') {
   window.addEventListener('test-dummy-flag', () => {
     let hasFlag = false;
 
-    if (runtimeFlags.DUMMY_TEST_FLAG) {
+    if (lwcRuntimeFlags.DUMMY_TEST_FLAG) {
       hasFlag = true;
     }
 
@@ -2208,7 +2226,7 @@ function createPublicAccessorDescriptor(key, descriptor) {
       }
 
       if (set) {
-        if (runtimeFlags.ENABLE_REACTIVE_SETTER) {
+        if (lwcRuntimeFlags.ENABLE_REACTIVE_SETTER) {
           let ro = vm.oar[key];
 
           if (isUndefined$1(ro)) {
@@ -2787,7 +2805,7 @@ function getTemplateOrSwappedTemplate(tpl) {
     throw new ReferenceError();
   }
 
-  if (runtimeFlags.ENABLE_HMR) {
+  if (lwcRuntimeFlags.ENABLE_HMR) {
     const visited = new Set();
 
     while (swappedTemplateMap.has(tpl) && !visited.has(tpl)) {
@@ -2804,7 +2822,7 @@ function getComponentOrSwappedComponent(Ctor) {
     throw new ReferenceError();
   }
 
-  if (runtimeFlags.ENABLE_HMR) {
+  if (lwcRuntimeFlags.ENABLE_HMR) {
     const visited = new Set();
 
     while (swappedComponentMap.has(Ctor) && !visited.has(Ctor)) {
@@ -2821,7 +2839,7 @@ function getStyleOrSwappedStyle(style) {
     throw new ReferenceError();
   }
 
-  if (runtimeFlags.ENABLE_HMR) {
+  if (lwcRuntimeFlags.ENABLE_HMR) {
     const visited = new Set();
 
     while (swappedStyleMap.has(style) && !visited.has(style)) {
@@ -2838,7 +2856,7 @@ function setActiveVM(vm) {
     throw new ReferenceError();
   }
 
-  if (runtimeFlags.ENABLE_HMR) {
+  if (lwcRuntimeFlags.ENABLE_HMR) {
     // tracking active component
     const Ctor = vm.def.ctor;
     let componentVMs = activeComponents.get(Ctor);
@@ -2895,7 +2913,7 @@ function removeActiveVM(vm) {
     throw new ReferenceError();
   }
 
-  if (runtimeFlags.ENABLE_HMR) {
+  if (lwcRuntimeFlags.ENABLE_HMR) {
     // tracking inactive component
     const Ctor = vm.def.ctor;
     let list = activeComponents.get(Ctor);
@@ -3284,30 +3302,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 = !isUndefined$1(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 (!isUndefined$1(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 (!isUndefined$1(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 (isFunction$1(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 (isFunction$1(upgradeCallback)) {
-                upgradeCallback(this); // nothing to do with the result for now
-            }
-        }
+
+  };
+
+  if (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;
 }
 
 /*
@@ -3553,579 +3608,790 @@ 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, 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;
+  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 = isTrue(svg) ? 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 = isTrue(svg) ? 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[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[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) {
-        if (process.env.NODE_ENV !== 'production') {
-            assert.isTrue(vm.state === 0 /* VMState.created */, `${vm} cannot be recycled.`);
-        }
-        runConnectedCallback(vm);
-    }
-    mountVNodes(vnode.children, elm, renderer, null);
-    if (vm) {
-        appendVM(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) {
+    {
+      // 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);
+  }
 }
+
 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 (!isUndefined$1(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
-        // will happen, but in native, it does allocate the light dom
-        patchChildren(n1.children, n2.children, elm, renderer);
-        if (!isUndefined$1(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);
-        }
+  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 (!isUndefined$1(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
+    // will happen, but in native, it does allocate the light dom
+
+
+    patchChildren(n1.children, n2.children, elm, renderer);
+
+    if (!isUndefined$1(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 (!isUndefined$1(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 (!isUndefined$1(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[KEY__SHADOW_RESOLVER] = renderRoot[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[KEY__SHADOW_RESOLVER] = renderRoot[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 (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 (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 (!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 */ && !isUndefined$1(syntheticToken)) {
-        elm.$shadowToken$ = syntheticToken;
-    }
+  // Set the class name for `*.scoped.css` style scoping.
+  const scopeToken = getScopeTokenClass(owner);
+
+  if (!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 */
+  && !isUndefined$1(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 (!isUndefined$1(vm)) {
-        return vm;
-    }
-    const { sel, mode, ctor, owner } = vnode;
-    vm = createVM(elm, ctor, renderer, {
-        mode,
-        owner,
-        tagName: sel,
-    });
-    if (process.env.NODE_ENV !== 'production') {
-        assert.isTrue(isArray$1(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 (!isUndefined$1(vm)) {
     return vm;
+  }
+
+  const {
+    sel,
+    mode,
+    ctor,
+    owner
+  } = vnode;
+  vm = createVM(elm, ctor, renderer, {
+    mode,
+    owner,
+    tagName: sel
+  });
+
+  if (process.env.NODE_ENV !== 'production') {
+    assert.isTrue(isArray$1(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 = create(null));
-    for (let i = 0, len = children.length; i < len; i += 1) {
-        const vnode = children[i];
-        if (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] || []);
-        ArrayPush$1.call(vnodes, vnode);
-    }
-    if (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 = keys(oldSlots);
-        if (oldKeys.length !== keys(cmpSlots).length) {
-            markComponentAsDirty(vm);
-            return;
-        }
-        for (let i = 0, len = oldKeys.length; i < len; i += 1) {
-            const key = oldKeys[i];
-            if (isUndefined$1(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 = create(null);
+
+  for (let i = 0, len = children.length; i < len; i += 1) {
+    const vnode = children[i];
+
+    if (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] || [];
+    ArrayPush$1.call(vnodes, vnode);
+  }
+
+  if (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 = keys(oldSlots);
+
+    if (oldKeys.length !== keys(cmpSlots).length) {
+      markComponentAsDirty(vm);
+      return;
+    }
+
+    for (let i = 0, len = oldKeys.length; i < len; i += 1) {
+      const key = oldKeys[i];
+
+      if (isUndefined$1(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, 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 (isUndefined$1(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];
-            }
+  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 (isUndefined$1(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, 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;
-            }
+  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;
+      }
     }
+  }
 }
 
 /*
@@ -5143,7 +5409,7 @@ function createVM(elm, ctor, renderer, options) {
       return `[object:vm ${def.name} (${vm.idx})]`;
     };
 
-    if (runtimeFlags.ENABLE_FORCE_NATIVE_SHADOW_MODE_FOR_TEST) {
+    if (lwcRuntimeFlags.ENABLE_FORCE_NATIVE_SHADOW_MODE_FOR_TEST) {
       vm.shadowMode = 0
       /* ShadowMode.Native */
       ;
@@ -5182,7 +5448,7 @@ function computeShadowMode(vm, renderer) {
     } else if (isNativeShadowDefined) {
       // Not combined with above condition because @lwc/features only supports identifiers in
       // the if-condition.
-      if (runtimeFlags.ENABLE_MIXED_SHADOW_MODE) {
+      if (lwcRuntimeFlags.ENABLE_MIXED_SHADOW_MODE) {
         if (def.shadowSupportMode === "any"
         /* ShadowSupportMode.Any */
         ) {
@@ -5771,7 +6037,7 @@ function installWireAdapters(vm) {
       ArrayPush$1.call(wiredConnecting, () => {
         connector.connect();
 
-        if (!runtimeFlags.ENABLE_WIRE_SYNC_EMIT) {
+        if (!lwcRuntimeFlags.ENABLE_WIRE_SYNC_EMIT) {
           if (hasDynamicParams) {
             Promise.resolve().then(computeConfigAndUpdate);
             return;
@@ -5980,7 +6246,7 @@ function freezeTemplate(tmpl) {
         });
     }
 }
-/* version: 2.23.0 */
+/* version: 2.23.3 */
 
 /*
  * Copyright (c) 2020, salesforce.com, inc.
@@ -6450,7 +6716,7 @@ function renderComponent(tagName, Ctor, props = {}) {
  */
 freeze(LightningElement);
 seal(LightningElement.prototype);
-/* version: 2.23.0 */
+/* version: 2.23.3 */
 
 exports.LightningElement = LightningElement;
 exports.api = api$1;