lwc 2.21.0 → 2.23.0

package/dist/engine-dom/esm/es2017/engine-dom.js

@@ -299,9 +299,9 @@ function htmlPropertyToAttribute(propName) {
  * 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.21.0";
+const LWC_VERSION = "2.23.0";
 const LWC_VERSION_COMMENT_REGEX = /\/\*LWC compiler v([\d.]+)\*\/\s*}/;
-/** version: 2.21.0 */
+/** version: 2.23.0 */
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -455,7 +455,7 @@ function setFeatureFlagForTest(name, value) {
         setFeatureFlag(name, value);
     }
 }
-/** version: 2.21.0 */
+/** version: 2.23.0 */
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -687,18 +687,21 @@ class ReactiveObserver {
         ArrayPush$1.call(this.listeners, reactiveObservers);
     }
 }
-
-/*
- * Copyright (c) 2018, salesforce.com, inc.
- * All rights reserved.
- * SPDX-License-Identifier: MIT
- * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
- */
 function componentValueMutated(vm, key) {
-    valueMutated(vm.component, key);
+    // On the server side, we don't need mutation tracking. Skipping it improves performance.
+    {
+        valueMutated(vm.component, key);
+    }
 }
 function componentValueObserved(vm, key) {
-    valueObserved(vm.component, key);
+    // On the server side, we don't need mutation tracking. Skipping it improves performance.
+    {
+        valueObserved(vm.component, key);
+    }
+}
+function createReactiveObserver(callback) {
+    // On the server side, we don't need mutation tracking. Skipping it improves performance.
+    return new ReactiveObserver(callback) ;
 }
 
 /*
@@ -1257,6 +1260,14 @@ function patchLightningElementPrototypeWithRestrictions(proto) {
     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.
  */
@@ -1820,7 +1831,24 @@ const reactiveMembrane = new ObservableMembrane({
  * change or being removed.
  */
 function unwrap(value) {
-    return reactiveMembrane.unwrapProxy(value);
+    // On the server side, we don't need mutation tracking. Skipping it improves performance.
+    return reactiveMembrane.unwrapProxy(value) ;
+}
+function getReadOnlyProxy(value) {
+    // We must return a frozen wrapper around the value, so that child components cannot mutate properties passed to
+    // them from their parents. This applies to both the client and server.
+    return reactiveMembrane.getReadOnlyProxy(value);
+}
+function getReactiveProxy(value) {
+    // On the server side, we don't need mutation tracking. Skipping it improves performance.
+    return reactiveMembrane.getProxy(value) ;
+}
+// Making the component instance a live value when using Locker to support expandos.
+function markLockerLiveObject(obj) {
+    // On the server side, we don't need mutation tracking. Skipping it improves performance.
+    {
+        obj[lockerLivePropertyKey] = undefined;
+    }
 }
 
 /*
@@ -1872,10 +1900,7 @@ function createBridgeToElementDescriptor(propName, descriptor) {
                 assert.isFalse(isBeingConstructed(vm), `Failed to construct '${getComponentTag(vm)}': The result must not have attributes.`);
                 assert.invariant(!isObject(newValue) || 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);
         },
     };
@@ -1910,8 +1935,7 @@ const LightningElement = function () {
         vm.setHook = setHook;
         vm.getHook = getHook;
     }
-    // Making the component instance a live value when using Locker to support expandos.
-    this[lockerLivePropertyKey] = undefined;
+    markLockerLiveObject(this);
     // Linking elm, shadow root and component with the VM.
     associateVM(component, vm);
     associateVM(elm, vm);
@@ -2171,15 +2195,51 @@ 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,
     };
 }
+class AccessorReactiveObserver extends ReactiveObserver {
+    constructor(vm, set) {
+        super(() => {
+            if (isFalse(this.debouncing)) {
+                this.debouncing = true;
+                addCallbackToNextTick(() => {
+                    if (isTrue(this.debouncing)) {
+                        const { value } = this;
+                        const { isDirty: dirtyStateBeforeSetterCall, component, idx } = vm;
+                        set.call(component, value);
+                        // de-bouncing after the call to the original setter to prevent
+                        // infinity loop if the setter itself is mutating things that
+                        // were accessed during the previous invocation.
+                        this.debouncing = false;
+                        if (isTrue(vm.isDirty) && isFalse(dirtyStateBeforeSetterCall) && idx > 0) {
+                            // immediate rehydration due to a setter driven mutation, otherwise
+                            // the component will get rendered on the second tick, which it is not
+                            // desirable.
+                            rerenderVM(vm);
+                        }
+                    }
+                });
+            }
+        });
+        this.debouncing = false;
+    }
+    reset(value) {
+        super.reset();
+        this.debouncing = false;
+        if (arguments.length > 0) {
+            this.value = value;
+        }
+    }
+}
+function createAccessorReactiveObserver(vm, set) {
+    // On the server side, we don't need mutation tracking. Skipping it improves performance.
+    return new AccessorReactiveObserver(vm, set)
+        ;
+}
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -2228,50 +2288,6 @@ function createPublicPropertyDescriptor(key) {
     configurable: true
   };
 }
-class AccessorReactiveObserver extends ReactiveObserver {
-  constructor(vm, set) {
-    super(() => {
-      if (isFalse(this.debouncing)) {
-        this.debouncing = true;
-        addCallbackToNextTick(() => {
-          if (isTrue(this.debouncing)) {
-            const {
-              value
-            } = this;
-            const {
-              isDirty: dirtyStateBeforeSetterCall,
-              component,
-              idx
-            } = vm;
-            set.call(component, value); // de-bouncing after the call to the original setter to prevent
-            // infinity loop if the setter itself is mutating things that
-            // were accessed during the previous invocation.
-
-            this.debouncing = false;
-
-            if (isTrue(vm.isDirty) && isFalse(dirtyStateBeforeSetterCall) && idx > 0) {
-              // immediate rehydration due to a setter driven mutation, otherwise
-              // the component will get rendered on the second tick, which it is not
-              // desirable.
-              rerenderVM(vm);
-            }
-          }
-        });
-      }
-    });
-    this.debouncing = false;
-  }
-
-  reset(value) {
-    super.reset();
-    this.debouncing = false;
-
-    if (arguments.length > 0) {
-      this.value = value;
-    }
-  }
-
-}
 function createPublicAccessorDescriptor(key, descriptor) {
   const {
     get,
@@ -2312,7 +2328,7 @@ function createPublicAccessorDescriptor(key, descriptor) {
           let ro = vm.oar[key];
 
           if (isUndefined$1(ro)) {
-            ro = vm.oar[key] = new AccessorReactiveObserver(vm, set);
+            ro = vm.oar[key] = createAccessorReactiveObserver(vm, set);
           } // every time we invoke this setter from outside (through this wrapper setter)
           // we should reset the value and then debounce just in case there is a pending
           // invocation the next tick that is not longer relevant since the value is changing
@@ -2344,7 +2360,7 @@ function createPublicAccessorDescriptor(key, descriptor) {
  */
 function track(target) {
     if (arguments.length === 1) {
-        return reactiveMembrane.getProxy(target);
+        return getReactiveProxy(target);
     }
     if (process.env.NODE_ENV !== 'production') {
         assert.fail(`@track decorator can only be used with one argument to return a trackable object, or as a decorator function.`);
@@ -2365,11 +2381,8 @@ function internalTrackDecorator(key) {
                 assert.invariant(!isInvokingRender, `${vmBeingRendered}.render() method has side effects on the state of ${vm}.${toString$1(key)}`);
                 assert.invariant(!isUpdatingTemplate, `Updating the template of ${vmBeingRendered} has side effects on the state of ${vm}.${toString$1(key)}`);
             }
-            const reactiveOrAnyValue = reactiveMembrane.getProxy(newValue);
-            if (reactiveOrAnyValue !== vm.cmpFields[key]) {
-                vm.cmpFields[key] = reactiveOrAnyValue;
-                componentValueMutated(vm, key);
-            }
+            const reactiveOrAnyValue = getReactiveProxy(newValue);
+            updateComponentValue(vm, key, reactiveOrAnyValue);
         },
         enumerable: true,
         configurable: true,
@@ -2408,10 +2421,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,
@@ -2757,7 +2767,7 @@ function createSetter(key) {
         fn = cachedSetterByKey[key] = function (newValue) {
             const vm = getAssociatedVM(this);
             const { setHook } = vm;
-            newValue = reactiveMembrane.getReadOnlyProxy(newValue);
+            newValue = getReadOnlyProxy(newValue);
             setHook(vm.component, key, newValue);
         };
     }
@@ -3500,13 +3510,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 (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.
@@ -3807,7 +3817,7 @@ function patchChildren(c1, c2, parent, renderer) {
         updateStaticChildren(c1, c2, parent, renderer);
     }
 }
-function patch(n1, n2, renderer) {
+function patch(n1, n2, parent, renderer) {
     var _a, _b;
     if (n1 === n2) {
         return;
@@ -3836,7 +3846,7 @@ function patch(n1, n2, renderer) {
             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);
+            patchCustomElement(n1, n2, parent, (_b = n2.data.renderer) !== null && _b !== void 0 ? _b : renderer);
             break;
     }
 }
@@ -3897,10 +3907,11 @@ function mountElement(vnode, parent, anchor, renderer) {
     const { sel, owner, data: { svg }, } = vnode;
     const { createElement } = renderer;
     const namespace = isTrue(svg) ? SVG_NAMESPACE : undefined;
-    const elm = createElement(sel, namespace);
+    const elm = (vnode.elm = createElement(sel, namespace));
     linkNodeToShadow(elm, owner, renderer);
-    fallbackElmHook(elm, vnode, renderer);
-    vnode.elm = elm;
+    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);
@@ -3915,6 +3926,7 @@ function mountStatic(vnode, parent, anchor, renderer) {
     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) {
@@ -3922,10 +3934,6 @@ function mountStatic(vnode, parent, anchor, renderer) {
             elm[KEY__SHADOW_STATIC] = true;
         }
     }
-    if (process.env.NODE_ENV !== 'production') {
-        const isLight = renderMode === 0 /* RenderMode.Light */;
-        patchElementWithRestrictions(elm, { isPortal: false, isLight });
-    }
     insertNode(elm, parent, anchor, renderer);
 }
 function mountCustomElement(vnode, parent, anchor, renderer) {
@@ -3942,9 +3950,10 @@ function mountCustomElement(vnode, parent, anchor, renderer) {
         // the custom element from the registry is expecting an upgrade callback
         vm = createViewModelHook(elm, vnode, renderer);
     });
-    linkNodeToShadow(elm, owner, renderer);
     vnode.elm = elm;
     vnode.vm = vm;
+    linkNodeToShadow(elm, owner, renderer);
+    applyStyleScoping(elm, owner, renderer);
     if (vm) {
         allocateChildren(vnode, vm);
     }
@@ -3964,22 +3973,32 @@ function mountCustomElement(vnode, parent, anchor, renderer) {
         appendVM(vm);
     }
 }
-function patchCustomElement(n1, n2, renderer) {
-    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);
+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);
     }
-    // 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);
+    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) {
@@ -4028,22 +4047,6 @@ function unmountVNodes(vnodes, parent, renderer, doRemove = false, start = 0, en
 function isVNode(vnode) {
     return vnode != null;
 }
-function observeElementChildNodes(elm) {
-    elm.$domManual$ = true;
-}
-function setElementShadowToken(elm, token) {
-    elm.$shadowToken$ = token;
-}
-// Set the scope token class for *.scoped.css styles
-function setScopeTokenClassIfNecessary(elm, owner, renderer) {
-    const token = getScopeTokenClass(owner);
-    if (!isNull(token)) {
-        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(token);
-    }
-}
 function linkNodeToShadow(elm, owner, renderer) {
     const { renderRoot, renderMode, shadowMode } = owner;
     const { isSyntheticShadowDefined } = renderer;
@@ -4096,31 +4099,37 @@ function patchElementPropsAndAttrs$1(oldVnode, vnode, renderer) {
     patchAttributes(oldVnode, vnode, renderer);
     patchProps(oldVnode, vnode, renderer);
 }
-function fallbackElmHook(elm, vnode, renderer) {
-    const { owner } = vnode;
-    setScopeTokenClassIfNecessary(elm, owner, renderer);
-    if (owner.shadowMode === 1 /* ShadowMode.Synthetic */) {
-        const { data: { context }, } = vnode;
-        const { stylesheetToken } = owner.context;
-        if (!isUndefined$1(context) &&
-            !isUndefined$1(context.lwc) &&
-            context.lwc.dom === "manual" /* LwcDomMode.Manual */) {
-            // this element will now accept any manual content inserted into it
-            observeElementChildNodes(elm);
-        }
-        if (!isUndefined$1(stylesheetToken)) {
-            // when running in synthetic shadow mode, we need to set the shadowToken value
-            // into each element from the template, so they can be styled accordingly.
-            setElementShadowToken(elm, stylesheetToken);
-        }
+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;
+    }
+}
+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;
     }
+}
+function applyElementRestrictions(elm, vnode) {
+    var _a, _b;
     if (process.env.NODE_ENV !== 'production') {
-        const { data: { context }, } = vnode;
-        const isPortal = !isUndefined$1(context) &&
-            !isUndefined$1(context.lwc) &&
-            context.lwc.dom === "manual" /* LwcDomMode.Manual */;
-        const isLight = owner.renderMode === 0 /* RenderMode.Light */;
-        patchElementWithRestrictions(elm, { isPortal, isLight });
+        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) {
@@ -4155,15 +4164,6 @@ function createViewModelHook(elm, vnode, renderer) {
         return vm;
     }
     const { sel, mode, ctor, owner } = vnode;
-    setScopeTokenClassIfNecessary(elm, owner, renderer);
-    if (owner.shadowMode === 1 /* ShadowMode.Synthetic */) {
-        const { stylesheetToken } = owner.context;
-        // when running in synthetic shadow mode, we need to set the shadowToken value
-        // into each element from the template, so they can be styled accordingly.
-        if (!isUndefined$1(stylesheetToken)) {
-            setElementShadowToken(elm, stylesheetToken);
-        }
-    }
     vm = createVM(elm, ctor, renderer, {
         mode,
         owner,
@@ -4268,25 +4268,25 @@ function updateDynamicChildren(oldCh, newCh, parent, renderer) {
             newEndVnode = newCh[--newEndIdx];
         }
         else if (isSameVnode(oldStartVnode, newStartVnode)) {
-            patch(oldStartVnode, newStartVnode, renderer);
+            patch(oldStartVnode, newStartVnode, parent, renderer);
             oldStartVnode = oldCh[++oldStartIdx];
             newStartVnode = newCh[++newStartIdx];
         }
         else if (isSameVnode(oldEndVnode, newEndVnode)) {
-            patch(oldEndVnode, newEndVnode, renderer);
+            patch(oldEndVnode, newEndVnode, parent, renderer);
             oldEndVnode = oldCh[--oldEndIdx];
             newEndVnode = newCh[--newEndIdx];
         }
         else if (isSameVnode(oldStartVnode, newEndVnode)) {
             // Vnode moved right
-            patch(oldStartVnode, newEndVnode, renderer);
+            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, renderer);
+            patch(oldEndVnode, newStartVnode, parent, renderer);
             insertNode(newStartVnode.elm, parent, oldStartVnode.elm, renderer);
             oldEndVnode = oldCh[--oldEndIdx];
             newStartVnode = newCh[++newStartIdx];
@@ -4309,7 +4309,7 @@ function updateDynamicChildren(oldCh, newCh, parent, renderer) {
                         mount(newStartVnode, parent, renderer, oldStartVnode.elm);
                     }
                     else {
-                        patch(elmToMove, newStartVnode, renderer);
+                        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.
@@ -4369,7 +4369,7 @@ function updateStaticChildren(c1, c2, parent, renderer) {
             if (isVNode(n1)) {
                 if (isVNode(n2)) {
                     // both vnodes are equivalent, and we just need to patch them
-                    patch(n1, n2, renderer);
+                    patch(n1, n2, parent, renderer);
                     anchor = n2.elm;
                 }
                 else {
@@ -4703,13 +4703,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}>`
  */
@@ -4726,18 +4719,7 @@ function dc(sel, Ctor, data, children = EmptyArray) {
     if (!isComponentConstructor(Ctor)) {
         throw new Error(`Invalid LWC Constructor ${toString$1(Ctor)} for custom element <${sel}>.`);
     }
-    let idx = DynamicImportedComponentMap.get(Ctor);
-    if (isUndefined$1(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
@@ -5213,7 +5195,7 @@ function getComponentRegisteredTemplate(Ctor) {
     return signedTemplateMap.get(Ctor);
 }
 function getTemplateReactiveObserver(vm) {
-    return new ReactiveObserver(() => {
+    return createReactiveObserver(() => {
         const { isDirty } = vm;
         if (isFalse(isDirty)) {
             markComponentAsDirty(vm);
@@ -5631,16 +5613,9 @@ function runRenderedCallback(vm) {
   const {
     def: {
       renderedCallback
-    },
-    renderer: {
-      ssr
     }
   } = vm;
 
-  if (isTrue(ssr)) {
-    return;
-  }
-
   const {
     rendered
   } = Services;
@@ -5890,13 +5865,7 @@ function resetComponentRoot(vm) {
   vm.velements = EmptyArray;
 }
 function scheduleRehydration(vm) {
-  const {
-    renderer: {
-      ssr
-    }
-  } = vm;
-
-  if (isTrue(ssr) || isTrue(vm.isScheduled)) {
+  if (isTrue(vm.isScheduled)) {
     return;
   }
 
@@ -6003,15 +5972,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);
   };
 }
 
@@ -6028,7 +5990,7 @@ function createMethodDataCallback(vm, method) {
 function createConfigWatcher(component, configCallback, callbackWhenConfigIsReady) {
   let hasPendingConfig = false; // creating the reactive observer for reactive params when needed
 
-  const ro = new ReactiveObserver(() => {
+  const ro = createReactiveObserver(() => {
     if (hasPendingConfig === false) {
       hasPendingConfig = true; // collect new config in the micro-task
 
@@ -6324,7 +6286,7 @@ function readonly(obj) {
             assert.fail('@readonly cannot be used as a decorator just yet, use it as a function with one argument to produce a readonly version of the provided value.');
         }
     }
-    return reactiveMembrane.getReadOnlyProxy(obj);
+    return getReadOnlyProxy(obj);
 }
 
 /*
@@ -6835,7 +6797,7 @@ function getComponentConstructor(elm) {
     }
     return ctor;
 }
-/* version: 2.21.0 */
+/* version: 2.23.0 */
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -6979,6 +6941,69 @@ function insertStylesheet(content, target) {
     }
 }
 
+/*
+ * Copyright (c) 2018, salesforce.com, inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: MIT
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
+ */
+const SUPPORTS_TEMPLATE = typeof HTMLTemplateElement === 'function';
+let createFragment;
+if (SUPPORTS_TEMPLATE) {
+    // Parse the fragment HTML string into DOM
+    createFragment = function (html) {
+        const template = document.createElement('template');
+        template.innerHTML = html;
+        return template.content.firstChild;
+    };
+}
+else {
+    // In browsers that don't support <template> (e.g. IE11), we need to be careful to wrap elements like
+    // <td> in the proper container elements (e.g. <tbody>), because otherwise they will be parsed as null.
+    // Via https://github.com/webcomponents/polyfills/blob/ee1db33/packages/template/template.js#L273-L280
+    // With other elements added from:
+    // https://github.com/sindresorhus/html-tags/blob/95dcdd5/index.js
+    // Using the test:
+    // document.createRange().createContextualFragment(`<${tag}></${tag}>`).firstChild === null
+    // And omitting <html>, <head>, and <body> as these are not practical in an LWC component.
+    const topLevelWrappingMap = {
+        caption: ['table'],
+        col: ['colgroup', 'table'],
+        colgroup: ['table'],
+        option: ['select'],
+        tbody: ['table'],
+        td: ['tr', 'tbody', 'table'],
+        th: ['tr', 'tbody', 'table'],
+        thead: ['table'],
+        tfoot: ['table'],
+        tr: ['tbody', 'table'],
+    };
+    // Via https://github.com/webcomponents/polyfills/blob/ee1db33/packages/template/template.js#L282-L288
+    const getTagName = function (text) {
+        return (/<([a-z][^/\0>\x20\t\r\n\f]+)/i.exec(text) || ['', ''])[1].toLowerCase();
+    };
+    // Via https://github.com/webcomponents/polyfills/blob/ee1db33/packages/template/template.js#L295-L320
+    createFragment = function (html) {
+        const wrapperTags = topLevelWrappingMap[getTagName(html)];
+        if (!isUndefined$1(wrapperTags)) {
+            for (const wrapperTag of wrapperTags) {
+                html = `<${wrapperTag}>${html}</${wrapperTag}>`;
+            }
+        }
+        // For IE11, the document title must not be undefined, but it can be an empty string
+        // https://developer.mozilla.org/en-US/docs/Web/API/DOMImplementation/createHTMLDocument#browser_compatibility
+        const doc = document.implementation.createHTMLDocument('');
+        doc.body.innerHTML = html;
+        let content = doc.body;
+        if (!isUndefined$1(wrapperTags)) {
+            for (let i = 0; i < wrapperTags.length; i++) {
+                content = content.firstChild;
+            }
+        }
+        return content.firstChild;
+    };
+}
+
 /*
  * Copyright (c) 2018, salesforce.com, inc.
  * All rights reserved.
@@ -7044,22 +7069,11 @@ else {
     };
     HTMLElementConstructor.prototype = HTMLElement.prototype;
 }
-let hydrating = false;
-function setIsHydrating(value) {
-    hydrating = value;
-}
-const ssr = false;
-function isHydrating() {
-    return hydrating;
-}
 const isNativeShadowDefined = _globalThis[KEY__IS_NATIVE_SHADOW_ROOT_DEFINED];
 const isSyntheticShadowDefined = hasOwnProperty$1.call(Element.prototype, KEY__SHADOW_TOKEN);
 function cloneNode(node, deep) {
     return node.cloneNode(deep);
 }
-function createFragment(html) {
-    return document.createRange().createContextualFragment(html).firstChild;
-}
 function createElement$1(tagName, namespace) {
     return isUndefined$1(namespace)
         ? document.createElement(tagName)
@@ -7081,15 +7095,11 @@ function nextSibling(node) {
     return node.nextSibling;
 }
 function attachShadow(element, options) {
-    // `hydrating` will be true in two cases:
+    // `shadowRoot` will be non-null in two cases:
     //   1. upon initial load with an SSR-generated DOM, while in Shadow render mode
     //   2. when a webapp author places <c-app> in their static HTML and mounts their
-    //      root component with customeElement.define('c-app', Ctor)
-    //
-    // The second case can be treated as a failed hydration with nominal impact
-    // to performance. However, because <c-app> won't have a <template shadowroot>
-    // declarative child, `element.shadowRoot` is `null`.
-    if (hydrating && element.shadowRoot) {
+    //      root component with customElement.define('c-app', Ctor)
+    if (!isNull(element.shadowRoot)) {
         return element.shadowRoot;
     }
     return element.attachShadow(options);
@@ -7185,11 +7195,9 @@ function assertInstanceOfHTMLElement(elm, msg) {
 }
 const HTMLElementExported = HTMLElementConstructor;
 const renderer = {
-    ssr,
     isNativeShadowDefined,
     isSyntheticShadowDefined,
     HTMLElementExported,
-    isHydrating,
     insert,
     remove,
     cloneNode,
@@ -7275,13 +7283,8 @@ function hydrateComponent(element, Ctor, props = {}) {
         return;
     }
     try {
-        // Let the renderer know we are hydrating, so it does not replace the existing shadowRoot
-        // and uses the same algo to create the stylesheets as in SSR.
-        setIsHydrating(true);
         const vm = createVMWithProps(element, Ctor, props);
         hydrateRoot(vm);
-        // set it back since now we finished hydration.
-        setIsHydrating(false);
     }
     catch (e) {
         // Fallback: In case there's an error while hydrating, let's log the error, and replace the element content
@@ -7292,13 +7295,8 @@ function hydrateComponent(element, Ctor, props = {}) {
         resetShadowRootAndLightDom(element, Ctor);
         // we need to recreate the vm with the hydration flag on, so it re-uses the existing shadowRoot.
         createVMWithProps(element, Ctor, props);
-        setIsHydrating(false);
         connectRootElement(element);
     }
-    finally {
-        // in case there's an error during recovery
-        setIsHydrating(false);
-    }
 }
 
 /*
@@ -7523,6 +7521,6 @@ defineProperty(LightningElement, 'CustomElementConstructor', {
 });
 freeze(LightningElement);
 seal(LightningElement.prototype);
-/* version: 2.21.0 */
+/* version: 2.23.0 */
 
 export { LightningElement, profilerControl as __unstable__ProfilerControl, api$1 as api, deprecatedBuildCustomElementConstructor as buildCustomElementConstructor, createContextProvider, createElement, freezeTemplate, getComponentConstructor, getComponentDef, hydrateComponent, isComponentConstructor, isNodeShadowed as isNodeFromTemplate, parseFragment, parseSVGFragment, readonly, register, registerComponent, registerDecorators, registerTemplate, renderer, sanitizeAttribute, setFeatureFlag, setFeatureFlagForTest, setHooks, swapComponent, swapStyle, swapTemplate, track, unwrap, wire };