lwc 2.21.0 → 2.23.0

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

@@ -302,9 +302,9 @@ var LWC = (function (exports) {
    * 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.
@@ -458,7 +458,7 @@ var LWC = (function (exports) {
           setFeatureFlag(name, value);
       }
   }
-  /** version: 2.21.0 */
+  /** version: 2.23.0 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -690,18 +690,21 @@ var LWC = (function (exports) {
           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) ;
   }
 
   /*
@@ -1260,6 +1263,14 @@ var LWC = (function (exports) {
       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.
    */
@@ -1823,7 +1834,24 @@ var LWC = (function (exports) {
    * 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;
+      }
   }
 
   /*
@@ -1875,10 +1903,7 @@ var LWC = (function (exports) {
                   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);
           },
       };
@@ -1913,8 +1938,7 @@ var LWC = (function (exports) {
           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);
@@ -2174,15 +2198,51 @@ var LWC = (function (exports) {
           },
           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.
@@ -2231,50 +2291,6 @@ var LWC = (function (exports) {
       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,
@@ -2315,7 +2331,7 @@ var LWC = (function (exports) {
             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
@@ -2347,7 +2363,7 @@ var LWC = (function (exports) {
    */
   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.`);
@@ -2368,11 +2384,8 @@ var LWC = (function (exports) {
                   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,
@@ -2411,10 +2424,7 @@ var LWC = (function (exports) {
                * 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,
@@ -2760,7 +2770,7 @@ var LWC = (function (exports) {
           fn = cachedSetterByKey[key] = function (newValue) {
               const vm = getAssociatedVM(this);
               const { setHook } = vm;
-              newValue = reactiveMembrane.getReadOnlyProxy(newValue);
+              newValue = getReadOnlyProxy(newValue);
               setHook(vm.component, key, newValue);
           };
       }
@@ -3503,13 +3513,13 @@ var LWC = (function (exports) {
       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.
@@ -3810,7 +3820,7 @@ var LWC = (function (exports) {
           updateStaticChildren(c1, c2, parent, renderer);
       }
   }
-  function patch(n1, n2, renderer) {
+  function patch(n1, n2, parent, renderer) {
       var _a, _b;
       if (n1 === n2) {
           return;
@@ -3839,7 +3849,7 @@ var LWC = (function (exports) {
               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;
       }
   }
@@ -3900,10 +3910,11 @@ var LWC = (function (exports) {
       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);
@@ -3918,6 +3929,7 @@ var LWC = (function (exports) {
       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) {
@@ -3925,10 +3937,6 @@ var LWC = (function (exports) {
               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) {
@@ -3945,9 +3953,10 @@ var LWC = (function (exports) {
           // 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);
       }
@@ -3967,22 +3976,32 @@ var LWC = (function (exports) {
           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) {
@@ -4031,22 +4050,6 @@ var LWC = (function (exports) {
   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;
@@ -4099,31 +4102,37 @@ var LWC = (function (exports) {
       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) {
@@ -4158,15 +4167,6 @@ var LWC = (function (exports) {
           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,
@@ -4271,25 +4271,25 @@ var LWC = (function (exports) {
               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];
@@ -4312,7 +4312,7 @@ var LWC = (function (exports) {
                           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.
@@ -4372,7 +4372,7 @@ var LWC = (function (exports) {
               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 {
@@ -4706,13 +4706,6 @@ var LWC = (function (exports) {
       }
       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}>`
    */
@@ -4729,18 +4722,7 @@ var LWC = (function (exports) {
       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
@@ -5216,7 +5198,7 @@ var LWC = (function (exports) {
       return signedTemplateMap.get(Ctor);
   }
   function getTemplateReactiveObserver(vm) {
-      return new ReactiveObserver(() => {
+      return createReactiveObserver(() => {
           const { isDirty } = vm;
           if (isFalse(isDirty)) {
               markComponentAsDirty(vm);
@@ -5634,16 +5616,9 @@ var LWC = (function (exports) {
     const {
       def: {
         renderedCallback
-      },
-      renderer: {
-        ssr
       }
     } = vm;
 
-    if (isTrue(ssr)) {
-      return;
-    }
-
     const {
       rendered
     } = Services;
@@ -5893,13 +5868,7 @@ var LWC = (function (exports) {
     vm.velements = EmptyArray;
   }
   function scheduleRehydration(vm) {
-    const {
-      renderer: {
-        ssr
-      }
-    } = vm;
-
-    if (isTrue(ssr) || isTrue(vm.isScheduled)) {
+    if (isTrue(vm.isScheduled)) {
       return;
     }
 
@@ -6006,15 +5975,8 @@ var LWC = (function (exports) {
   }
 
   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);
     };
   }
 
@@ -6031,7 +5993,7 @@ var LWC = (function (exports) {
   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
 
@@ -6327,7 +6289,7 @@ var LWC = (function (exports) {
               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);
   }
 
   /*
@@ -6838,7 +6800,7 @@ var LWC = (function (exports) {
       }
       return ctor;
   }
-  /* version: 2.21.0 */
+  /* version: 2.23.0 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -6982,6 +6944,69 @@ var LWC = (function (exports) {
       }
   }
 
+  /*
+   * 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.
@@ -7047,22 +7072,11 @@ var LWC = (function (exports) {
       };
       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)
@@ -7084,15 +7098,11 @@ var LWC = (function (exports) {
       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);
@@ -7188,11 +7198,9 @@ var LWC = (function (exports) {
   }
   const HTMLElementExported = HTMLElementConstructor;
   const renderer = {
-      ssr,
       isNativeShadowDefined,
       isSyntheticShadowDefined,
       HTMLElementExported,
-      isHydrating,
       insert,
       remove,
       cloneNode,
@@ -7278,13 +7286,8 @@ var LWC = (function (exports) {
           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
@@ -7295,13 +7298,8 @@ var LWC = (function (exports) {
           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);
-      }
   }
 
   /*
@@ -7526,7 +7524,7 @@ var LWC = (function (exports) {
   });
   freeze(LightningElement);
   seal(LightningElement.prototype);
-  /* version: 2.21.0 */
+  /* version: 2.23.0 */
 
   exports.LightningElement = LightningElement;
   exports.__unstable__ProfilerControl = profilerControl;