lwc 2.21.1 → 2.23.1

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

@@ -299,9 +299,13 @@ 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.1";
+const LWC_VERSION = "2.23.1";
 const LWC_VERSION_COMMENT_REGEX = /\/\*LWC compiler v([\d.]+)\*\/\s*}/;
-/** version: 2.21.1 */
+/** version: 2.23.1 */
+
+/**
+ * Copyright (C) 2018 salesforce.com, inc.
+ */
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -310,7 +314,7 @@ const LWC_VERSION_COMMENT_REGEX = /\/\*LWC compiler v([\d.]+)\*\/\s*}/;
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
 function detect(propName) {
-    return Object.getOwnPropertyDescriptor(Element.prototype, propName) === undefined;
+    return getOwnPropertyDescriptor$1(Element.prototype, propName) === undefined;
 }
 
 /*
@@ -379,6 +383,7 @@ for (let i = 0, len = ElementPrototypeAriaPropertyNames.length; i < len; i += 1)
         patch$1(propName);
     }
 }
+/** version: 2.23.1 */
 
 /**
  * Copyright (C) 2018 salesforce.com, inc.
@@ -406,7 +411,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.
@@ -433,17 +438,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 });
     }
 }
 /**
@@ -455,7 +460,7 @@ function setFeatureFlagForTest(name, value) {
         setFeatureFlag(name, value);
     }
 }
-/** version: 2.21.1 */
+/** version: 2.23.1 */
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -469,7 +474,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;
     }
 
@@ -496,7 +501,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;
     }
 
@@ -687,18 +692,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 +1265,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 +1836,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 +1905,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 +1940,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 +2200,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 +2293,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,
@@ -2308,11 +2329,11 @@ 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)) {
-            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 +2365,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 +2386,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 +2426,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 +2772,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);
         };
     }
@@ -2966,7 +2981,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)) {
@@ -2983,7 +2998,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)) {
@@ -3000,7 +3015,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)) {
@@ -3017,7 +3032,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);
@@ -3074,7 +3089,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);
@@ -3121,7 +3136,7 @@ function swapTemplate(oldTpl, newTpl) {
     }
   }
 
-  if (!runtimeFlags.ENABLE_HMR) {
+  if (!lwcRuntimeFlags.ENABLE_HMR) {
     throw new Error('HMR is not enabled');
   }
 
@@ -3137,7 +3152,7 @@ function swapComponent(oldComponent, newComponent) {
     }
   }
 
-  if (!runtimeFlags.ENABLE_HMR) {
+  if (!lwcRuntimeFlags.ENABLE_HMR) {
     throw new Error('HMR is not enabled');
   }
 
@@ -3151,7 +3166,7 @@ function swapStyle(oldStyle, newStyle) {
     return rehydrateHotStyle(oldStyle);
   }
 
-  if (!runtimeFlags.ENABLE_HMR) {
+  if (!lwcRuntimeFlags.ENABLE_HMR) {
     throw new Error('HMR is not enabled');
   }
 
@@ -3500,13 +3515,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 +3822,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 +3851,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;
     }
 }
@@ -3963,22 +3978,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) {
@@ -4248,25 +4273,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];
@@ -4289,7 +4314,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.
@@ -4349,7 +4374,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 {
@@ -4683,13 +4708,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}>`
  */
@@ -4706,18 +4724,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
@@ -5193,7 +5200,7 @@ function getComponentRegisteredTemplate(Ctor) {
     return signedTemplateMap.get(Ctor);
 }
 function getTemplateReactiveObserver(vm) {
-    return new ReactiveObserver(() => {
+    return createReactiveObserver(() => {
         const { isDirty } = vm;
         if (isFalse(isDirty)) {
             markComponentAsDirty(vm);
@@ -5443,7 +5450,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 */
       ;
@@ -5482,7 +5489,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 */
         ) {
@@ -5611,16 +5618,9 @@ function runRenderedCallback(vm) {
   const {
     def: {
       renderedCallback
-    },
-    renderer: {
-      ssr
     }
   } = vm;
 
-  if (isTrue(ssr)) {
-    return;
-  }
-
   const {
     rendered
   } = Services;
@@ -5870,13 +5870,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;
   }
 
@@ -5983,15 +5977,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);
   };
 }
 
@@ -6008,7 +5995,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
 
@@ -6209,7 +6196,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;
@@ -6304,7 +6291,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);
 }
 
 /*
@@ -6815,7 +6802,7 @@ function getComponentConstructor(elm) {
     }
     return ctor;
 }
-/* version: 2.21.1 */
+/* version: 2.23.1 */
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -6959,6 +6946,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.
@@ -7024,22 +7074,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)
@@ -7061,15 +7100,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);
@@ -7165,11 +7200,9 @@ function assertInstanceOfHTMLElement(elm, msg) {
 }
 const HTMLElementExported = HTMLElementConstructor;
 const renderer = {
-    ssr,
     isNativeShadowDefined,
     isSyntheticShadowDefined,
     HTMLElementExported,
-    isHydrating,
     insert,
     remove,
     cloneNode,
@@ -7255,13 +7288,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
@@ -7272,13 +7300,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);
-    }
 }
 
 /*
@@ -7503,6 +7526,6 @@ defineProperty(LightningElement, 'CustomElementConstructor', {
 });
 freeze(LightningElement);
 seal(LightningElement.prototype);
-/* version: 2.21.1 */
+/* version: 2.23.1 */
 
 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 };