lwc 2.21.1 → 2.23.1

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

@@ -415,9 +415,9 @@ function htmlEscape(str, attrMode = false) {
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
 // Increment whenever the LWC template compiler changes
-const LWC_VERSION = "2.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) 2020, salesforce.com, inc.
@@ -477,7 +477,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.
@@ -504,17 +504,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 });
     }
 }
 /**
@@ -526,7 +526,7 @@ function setFeatureFlagForTest(name, value) {
         setFeatureFlag(name, value);
     }
 }
-/** version: 2.21.1 */
+/** version: 2.23.1 */
 
 /* proxy-compat-disable */
 
@@ -542,7 +542,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;
     }
 
@@ -554,40 +554,9 @@ if (process.env.NODE_ENV !== 'production' && typeof __karma__ !== 'undefined') {
     }));
   });
 }
-
-/*
- * 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
- */
-let nextTickCallbackQueue = [];
 const SPACE_CHAR = 32;
 const EmptyObject = seal(create(null));
 const EmptyArray = seal([]);
-function flushCallbackQueue() {
-    if (process.env.NODE_ENV !== 'production') {
-        if (nextTickCallbackQueue.length === 0) {
-            throw new Error(`Internal Error: If callbackQueue is scheduled, it is because there must be at least one callback on this pending queue.`);
-        }
-    }
-    const callbacks = nextTickCallbackQueue;
-    nextTickCallbackQueue = []; // reset to a new queue
-    for (let i = 0, len = callbacks.length; i < len; i += 1) {
-        callbacks[i]();
-    }
-}
-function addCallbackToNextTick(callback) {
-    if (process.env.NODE_ENV !== 'production') {
-        if (!isFunction$1(callback)) {
-            throw new Error(`Internal Error: addCallbackToNextTick() can only accept a function callback`);
-        }
-    }
-    if (nextTickCallbackQueue.length === 0) {
-        Promise.resolve().then(flushCallbackQueue);
-    }
-    ArrayPush$1.call(nextTickCallbackQueue, callback);
-}
 function guid() {
     function s4() {
         return Math.floor((1 + Math.random()) * 0x10000)
@@ -616,16 +585,6 @@ function flattenStylesheets(stylesheets) {
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
 const TargetToReactiveRecordMap = new WeakMap();
-function getReactiveRecord(target) {
-    let reactiveRecord = TargetToReactiveRecordMap.get(target);
-    if (isUndefined$1(reactiveRecord)) {
-        const newRecord = create(null);
-        reactiveRecord = newRecord;
-        TargetToReactiveRecordMap.set(target, newRecord);
-    }
-    return reactiveRecord;
-}
-let currentReactiveObserver = null;
 function valueMutated(target, key) {
     const reactiveRecord = TargetToReactiveRecordMap.get(target);
     if (!isUndefined$1(reactiveRecord)) {
@@ -640,71 +599,9 @@ function valueMutated(target, key) {
 }
 function valueObserved(target, key) {
     // We should determine if an active Observing Record is present to track mutations.
-    if (currentReactiveObserver === null) {
+    {
         return;
     }
-    const ro = currentReactiveObserver;
-    const reactiveRecord = getReactiveRecord(target);
-    let reactiveObservers = reactiveRecord[key];
-    if (isUndefined$1(reactiveObservers)) {
-        reactiveObservers = [];
-        reactiveRecord[key] = reactiveObservers;
-    }
-    else if (reactiveObservers[0] === ro) {
-        return; // perf optimization considering that most subscriptions will come from the same record
-    }
-    if (ArrayIndexOf.call(reactiveObservers, ro) === -1) {
-        ro.link(reactiveObservers);
-    }
-}
-class ReactiveObserver {
-    constructor(callback) {
-        this.listeners = [];
-        this.callback = callback;
-    }
-    observe(job) {
-        const inceptionReactiveRecord = currentReactiveObserver;
-        currentReactiveObserver = this;
-        let error;
-        try {
-            job();
-        }
-        catch (e) {
-            error = Object(e);
-        }
-        finally {
-            currentReactiveObserver = inceptionReactiveRecord;
-            if (error !== undefined) {
-                throw error; // eslint-disable-line no-unsafe-finally
-            }
-        }
-    }
-    /**
-     * This method is responsible for disconnecting the Reactive Observer
-     * from any Reactive Record that has a reference to it, to prevent future
-     * notifications about previously recorded access.
-     */
-    reset() {
-        const { listeners } = this;
-        const len = listeners.length;
-        if (len > 0) {
-            for (let i = 0; i < len; i += 1) {
-                const set = listeners[i];
-                const pos = ArrayIndexOf.call(listeners[i], this);
-                ArraySplice.call(set, pos, 1);
-            }
-            listeners.length = 0;
-        }
-    }
-    // friend methods
-    notify() {
-        this.callback.call(undefined, this);
-    }
-    link(reactiveObservers) {
-        ArrayPush$1.call(reactiveObservers, this);
-        // we keep track of observing records where the observing record was added to so we can do some clean up later on
-        ArrayPush$1.call(this.listeners, reactiveObservers);
-    }
 }
 
 /*
@@ -713,11 +610,16 @@ class ReactiveObserver {
  * 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);
-}
-function componentValueObserved(vm, key) {
-    valueObserved(vm.component, key);
+const DUMMY_REACTIVE_OBSERVER = {
+    observe(job) {
+        job();
+    },
+    reset() { },
+    link() { },
+};
+function createReactiveObserver(callback) {
+    // On the server side, we don't need mutation tracking. Skipping it improves performance.
+    return DUMMY_REACTIVE_OBSERVER;
 }
 
 /*
@@ -1273,6 +1175,13 @@ function patchLightningElementPrototypeWithRestrictions(proto) {
     defineProperties(proto, getLightningElementPrototypeRestrictionsDescriptors(proto));
 }
 
+function updateComponentValue(vm, key, newValue) {
+    const { cmpFields } = vm;
+    if (newValue !== cmpFields[key]) {
+        cmpFields[key] = newValue;
+    }
+}
+
 /**
  * Copyright (C) 2017 salesforce.com, inc.
  */
@@ -1836,7 +1745,17 @@ 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 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 value;
 }
 
 /*
@@ -1876,7 +1795,6 @@ function createBridgeToElementDescriptor(propName, descriptor) {
                 }
                 return;
             }
-            componentValueObserved(vm, propName);
             return get.call(vm.elm);
         },
         set(newValue) {
@@ -1888,10 +1806,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);
         },
     };
@@ -1926,8 +1841,6 @@ 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;
     // Linking elm, shadow root and component with the VM.
     associateVM(component, vm);
     associateVM(elm, vm);
@@ -2182,21 +2095,35 @@ function createObservedFieldPropertyDescriptor(key) {
     return {
         get() {
             const vm = getAssociatedVM(this);
-            componentValueObserved(vm, key);
             return vm.cmpFields[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,
     };
 }
 
+/*
+ * 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 DUMMY_ACCESSOR_REACTIVE_OBSERVER = {
+    observe(job) {
+        job();
+    },
+    reset() { },
+    link() { },
+};
+function createAccessorReactiveObserver(vm, set) {
+    // On the server side, we don't need mutation tracking. Skipping it improves performance.
+    return DUMMY_ACCESSOR_REACTIVE_OBSERVER;
+}
+
 /*
  * Copyright (c) 2018, salesforce.com, inc.
  * All rights reserved.
@@ -2222,8 +2149,6 @@ function createPublicPropertyDescriptor(key) {
 
         return;
       }
-
-      componentValueObserved(vm, key);
       return vm.cmpProps[key];
     },
 
@@ -2237,57 +2162,12 @@ function createPublicPropertyDescriptor(key) {
       }
 
       vm.cmpProps[key] = newValue;
-      componentValueMutated(vm, key);
     },
 
     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 createPublicAccessorDescriptor(key, descriptor) {
   const {
     get,
@@ -2324,11 +2204,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();
           } // 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
@@ -2360,7 +2240,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.`);
@@ -2371,7 +2251,6 @@ function internalTrackDecorator(key) {
     return {
         get() {
             const vm = getAssociatedVM(this);
-            componentValueObserved(vm, key);
             return vm.cmpFields[key];
         },
         set(newValue) {
@@ -2381,11 +2260,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,
@@ -2413,7 +2289,6 @@ function internalWireFieldDecorator(key) {
     return {
         get() {
             const vm = getAssociatedVM(this);
-            componentValueObserved(vm, key);
             return vm.cmpFields[key];
         },
         set(value) {
@@ -2424,10 +2299,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,
@@ -2773,7 +2645,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);
         };
     }
@@ -2911,7 +2783,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)) {
@@ -2928,7 +2800,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)) {
@@ -2945,7 +2817,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)) {
@@ -2962,7 +2834,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);
@@ -3019,7 +2891,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);
@@ -3385,38 +3257,20 @@ function getScopeTokenClass(owner) {
     const { cmpTemplate, context } = owner;
     return (context.hasScopedStyles && (cmpTemplate === null || cmpTemplate === void 0 ? void 0 : cmpTemplate.stylesheetToken)) || null;
 }
-function getNearestNativeShadowComponent(vm) {
-    const owner = getNearestShadowComponent(vm);
-    if (!isNull(owner) && owner.shadowMode === 1 /* ShadowMode.Synthetic */) {
-        // Synthetic-within-native is impossible. So if the nearest shadow component is
-        // synthetic, we know we won't find a native component if we go any further.
-        return null;
-    }
-    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 {
         // 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.
         // native shadow or light DOM, SSR
         return ArrayMap.call(stylesheets, createInlineStyleVNode);
     }
-    else {
-        // native shadow or light DOM, DOM renderer
-        const root = getNearestNativeShadowComponent(vm);
-        // null root means a global style
-        const target = isNull(root) ? undefined : root.shadowRoot;
-        for (let i = 0; i < stylesheets.length; i++) {
-            insertStylesheet(stylesheets[i], target);
-        }
-    }
     return null;
 }
 
@@ -3702,7 +3556,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;
@@ -3731,7 +3585,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;
     }
 }
@@ -3858,22 +3712,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) {
@@ -4143,25 +4007,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];
@@ -4184,7 +4048,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.
@@ -4244,7 +4108,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 {
@@ -4578,13 +4442,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}>`
  */
@@ -4601,18 +4458,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
@@ -5049,13 +4895,7 @@ function getComponentRegisteredTemplate(Ctor) {
     return signedTemplateMap.get(Ctor);
 }
 function getTemplateReactiveObserver(vm) {
-    return new ReactiveObserver(() => {
-        const { isDirty } = vm;
-        if (isFalse(isDirty)) {
-            markComponentAsDirty(vm);
-            scheduleRehydration(vm);
-        }
-    });
+    return createReactiveObserver();
 }
 function renderComponent$1(vm) {
     if (process.env.NODE_ENV !== 'production') {
@@ -5292,14 +5132,14 @@ function createVM(elm, ctor, renderer, options) {
     renderer
   };
   vm.shadowMode = computeShadowMode(vm, renderer);
-  vm.tro = getTemplateReactiveObserver(vm);
+  vm.tro = getTemplateReactiveObserver();
 
   if (process.env.NODE_ENV !== 'production') {
     vm.toString = () => {
       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 */
       ;
@@ -5338,7 +5178,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 */
         ) {
@@ -5454,89 +5294,7 @@ function patchShadowRoot(vm, newCh) {
 
   if (vm.state === 1
   /* VMState.connected */
-  ) {
-    // If the element is connected, that means connectedCallback was already issued, and
-    // any successive rendering should finish with the call to renderedCallback, otherwise
-    // the connectedCallback will take care of calling it in the right order at the end of
-    // the current rehydration process.
-    runRenderedCallback(vm);
-  }
-}
-
-function runRenderedCallback(vm) {
-  const {
-    def: {
-      renderedCallback
-    },
-    renderer: {
-      ssr
-    }
-  } = vm;
-
-  if (isTrue(ssr)) {
-    return;
-  }
-
-  const {
-    rendered
-  } = Services;
-
-  if (rendered) {
-    invokeServiceHook(vm, rendered);
-  }
-
-  if (!isUndefined$1(renderedCallback)) {
-    logOperationStart(4
-    /* OperationId.RenderedCallback */
-    , vm);
-    invokeComponentCallback(vm, renderedCallback);
-    logOperationEnd(4
-    /* OperationId.RenderedCallback */
-    , vm);
-  }
-}
-let rehydrateQueue = [];
-
-function flushRehydrationQueue() {
-  logGlobalOperationStart(8
-  /* OperationId.GlobalRehydrate */
-  );
-
-  if (process.env.NODE_ENV !== 'production') {
-    assert.invariant(rehydrateQueue.length, `If rehydrateQueue was scheduled, it is because there must be at least one VM on this pending queue instead of ${rehydrateQueue}.`);
-  }
-
-  const vms = rehydrateQueue.sort((a, b) => a.idx - b.idx);
-  rehydrateQueue = []; // reset to a new queue
-
-  for (let i = 0, len = vms.length; i < len; i += 1) {
-    const vm = vms[i];
-
-    try {
-      rehydrate(vm);
-    } catch (error) {
-      if (i + 1 < len) {
-        // pieces of the queue are still pending to be rehydrated, those should have priority
-        if (rehydrateQueue.length === 0) {
-          addCallbackToNextTick(flushRehydrationQueue);
-        }
-
-        ArrayUnshift.apply(rehydrateQueue, ArraySlice.call(vms, i + 1));
-      } // we need to end the measure before throwing.
-
-
-      logGlobalOperationEnd(8
-      /* OperationId.GlobalRehydrate */
-      ); // re-throwing the original error will break the current tick, but since the next tick is
-      // already scheduled, it should continue patching the rest.
-
-      throw error; // eslint-disable-line no-unsafe-finally
-    }
-  }
-
-  logGlobalOperationEnd(8
-  /* OperationId.GlobalRehydrate */
-  );
+  ) ;
 }
 
 function runConnectedCallback(vm) {
@@ -5725,25 +5483,6 @@ function resetComponentRoot(vm) {
   runChildNodesDisconnectedCallback(vm);
   vm.velements = EmptyArray;
 }
-function scheduleRehydration(vm) {
-  const {
-    renderer: {
-      ssr
-    }
-  } = vm;
-
-  if (isTrue(ssr) || isTrue(vm.isScheduled)) {
-    return;
-  }
-
-  vm.isScheduled = true;
-
-  if (rehydrateQueue.length === 0) {
-    addCallbackToNextTick(flushRehydrationQueue);
-  }
-
-  ArrayPush$1.call(rehydrateQueue, vm);
-}
 
 function getErrorBoundaryVM(vm) {
   let currentVm = vm;
@@ -5822,15 +5561,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);
   };
 }
 
@@ -5845,21 +5577,8 @@ 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(() => {
-    if (hasPendingConfig === false) {
-      hasPendingConfig = true; // collect new config in the micro-task
-
-      Promise.resolve().then(() => {
-        hasPendingConfig = false; // resetting current reactive params
-
-        ro.reset(); // dispatching a new config due to a change in the configuration
-
-        computeConfigAndUpdate();
-      });
-    }
-  });
+  const ro = createReactiveObserver();
 
   const computeConfigAndUpdate = () => {
     let config;
@@ -6048,7 +5767,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;
@@ -6143,7 +5862,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);
 }
 
 /*
@@ -6257,7 +5976,7 @@ function freezeTemplate(tmpl) {
         });
     }
 }
-/* version: 2.21.1 */
+/* version: 2.23.1 */
 
 /*
  * Copyright (c) 2020, salesforce.com, inc.
@@ -6340,10 +6059,6 @@ class HTMLElementImpl {
         return createElement(tagName);
     }
 }
-const ssr = true;
-function isHydrating() {
-    return false;
-}
 const isNativeShadowDefined = false;
 const isSyntheticShadowDefined = false;
 function insert(node, parent, anchor) {
@@ -6582,11 +6297,9 @@ const HTMLElementExported = HTMLElementImpl;
 /* noop */
 const assertInstanceOfHTMLElement = noop;
 const renderer = {
-    ssr,
     isNativeShadowDefined,
     isSyntheticShadowDefined,
     HTMLElementExported,
-    isHydrating,
     insert,
     remove,
     cloneNode,
@@ -6733,6 +6446,6 @@ function renderComponent(tagName, Ctor, props = {}) {
  */
 freeze(LightningElement);
 seal(LightningElement.prototype);
-/* version: 2.21.1 */
+/* version: 2.23.1 */
 
 export { LightningElement, api$1 as api, createContextProvider, freezeTemplate, getComponentDef, isComponentConstructor, parseFragment, parseFragment as parseSVGFragment, readonly, register, registerComponent, registerDecorators, registerTemplate, renderComponent, renderer, sanitizeAttribute, setFeatureFlag, setFeatureFlagForTest, setHooks, track, unwrap, wire };