@lwc/engine-core 2.21.0 → 2.23.0

package/dist/engine-core.cjs.js

@@ -216,11 +216,28 @@ class ReactiveObserver {
  * SPDX-License-Identifier: MIT
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
+const DUMMY_REACTIVE_OBSERVER = {
+    observe(job) {
+        job();
+    },
+    reset() { },
+    link() { },
+};
 function componentValueMutated(vm, key) {
-    valueMutated(vm.component, key);
+    // On the server side, we don't need mutation tracking. Skipping it improves performance.
+    if (process.env.IS_BROWSER) {
+        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.
+    if (process.env.IS_BROWSER) {
+        valueObserved(vm.component, key);
+    }
+}
+function createReactiveObserver(callback) {
+    // On the server side, we don't need mutation tracking. Skipping it improves performance.
+    return process.env.IS_BROWSER ? new ReactiveObserver(callback) : DUMMY_REACTIVE_OBSERVER;
 }
 
 /*
@@ -779,6 +796,14 @@ function patchLightningElementPrototypeWithRestrictions(proto) {
     shared.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.
  */
@@ -1342,7 +1367,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 process.env.IS_BROWSER ? reactiveMembrane.unwrapProxy(value) : 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 process.env.IS_BROWSER ? reactiveMembrane.getProxy(value) : 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.
+    if (process.env.IS_BROWSER) {
+        obj[lockerLivePropertyKey] = undefined;
+    }
 }
 
 /*
@@ -1394,10 +1436,7 @@ function createBridgeToElementDescriptor(propName, descriptor) {
                 shared.assert.isFalse(isBeingConstructed(vm), `Failed to construct '${getComponentTag(vm)}': The result must not have attributes.`);
                 shared.assert.invariant(!shared.isObject(newValue) || shared.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);
         },
     };
@@ -1432,8 +1471,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);
@@ -1693,16 +1731,67 @@ 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,
     };
 }
 
+/*
+ * 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() { },
+};
+class AccessorReactiveObserver extends ReactiveObserver {
+    constructor(vm, set) {
+        super(() => {
+            if (shared.isFalse(this.debouncing)) {
+                this.debouncing = true;
+                addCallbackToNextTick(() => {
+                    if (shared.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 (shared.isTrue(vm.isDirty) && shared.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 process.env.IS_BROWSER
+        ? new AccessorReactiveObserver(vm, set)
+        : DUMMY_ACCESSOR_REACTIVE_OBSERVER;
+}
+
 /*
  * Copyright (c) 2018, salesforce.com, inc.
  * All rights reserved.
@@ -1750,50 +1839,6 @@ function createPublicPropertyDescriptor(key) {
     configurable: true
   };
 }
-class AccessorReactiveObserver extends ReactiveObserver {
-  constructor(vm, set) {
-    super(() => {
-      if (shared.isFalse(this.debouncing)) {
-        this.debouncing = true;
-        addCallbackToNextTick(() => {
-          if (shared.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 (shared.isTrue(vm.isDirty) && shared.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,
@@ -1834,7 +1879,7 @@ function createPublicAccessorDescriptor(key, descriptor) {
           let ro = vm.oar[key];
 
           if (shared.isUndefined(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
@@ -1866,7 +1911,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') {
         shared.assert.fail(`@track decorator can only be used with one argument to return a trackable object, or as a decorator function.`);
@@ -1887,11 +1932,8 @@ function internalTrackDecorator(key) {
                 shared.assert.invariant(!isInvokingRender, `${vmBeingRendered}.render() method has side effects on the state of ${vm}.${shared.toString(key)}`);
                 shared.assert.invariant(!isUpdatingTemplate, `Updating the template of ${vmBeingRendered} has side effects on the state of ${vm}.${shared.toString(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,
@@ -1930,10 +1972,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,
@@ -2279,7 +2318,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);
         };
     }
@@ -3022,13 +3061,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 (!process.env.IS_BROWSER || 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.
@@ -3329,7 +3368,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;
@@ -3358,7 +3397,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;
     }
 }
@@ -3419,10 +3458,11 @@ function mountElement(vnode, parent, anchor, renderer) {
     const { sel, owner, data: { svg }, } = vnode;
     const { createElement } = renderer;
     const namespace = shared.isTrue(svg) ? shared.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);
@@ -3437,6 +3477,7 @@ function mountStatic(vnode, parent, anchor, renderer) {
     const { cloneNode, isSyntheticShadowDefined } = renderer;
     const elm = (vnode.elm = cloneNode(vnode.fragment, true));
     linkNodeToShadow(elm, owner, renderer);
+    applyElementRestrictions(elm, vnode);
     // Marks this node as Static to propagate the shadow resolver. must happen after elm is assigned to the proper shadow
     const { renderMode, shadowMode } = owner;
     if (isSyntheticShadowDefined) {
@@ -3444,10 +3485,6 @@ function mountStatic(vnode, parent, anchor, renderer) {
             elm[shared.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) {
@@ -3464,9 +3501,10 @@ function mountCustomElement(vnode, parent, anchor, renderer) {
         // the custom element from the registry is expecting an upgrade callback
         vm = createViewModelHook(elm, vnode, renderer);
     });
-    linkNodeToShadow(elm, owner, renderer);
     vnode.elm = elm;
     vnode.vm = vm;
+    linkNodeToShadow(elm, owner, renderer);
+    applyStyleScoping(elm, owner, renderer);
     if (vm) {
         allocateChildren(vnode, vm);
     }
@@ -3486,22 +3524,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 (!shared.isUndefined(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 (!shared.isUndefined(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 (!shared.isUndefined(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 (!shared.isUndefined(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) {
@@ -3550,22 +3598,6 @@ function unmountVNodes(vnodes, parent, renderer, doRemove = false, start = 0, en
 function isVNode(vnode) {
     return vnode != null;
 }
-function observeElementChildNodes(elm) {
-    elm.$domManual$ = true;
-}
-function setElementShadowToken(elm, token) {
-    elm.$shadowToken$ = token;
-}
-// Set the scope token class for *.scoped.css styles
-function setScopeTokenClassIfNecessary(elm, owner, renderer) {
-    const token = getScopeTokenClass(owner);
-    if (!shared.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;
@@ -3618,31 +3650,37 @@ function patchElementPropsAndAttrs$1(oldVnode, vnode, renderer) {
     patchAttributes(oldVnode, vnode, renderer);
     patchProps(oldVnode, vnode, renderer);
 }
-function fallbackElmHook(elm, vnode, renderer) {
-    const { owner } = vnode;
-    setScopeTokenClassIfNecessary(elm, owner, renderer);
-    if (owner.shadowMode === 1 /* ShadowMode.Synthetic */) {
-        const { data: { context }, } = vnode;
-        const { stylesheetToken } = owner.context;
-        if (!shared.isUndefined(context) &&
-            !shared.isUndefined(context.lwc) &&
-            context.lwc.dom === "manual" /* LwcDomMode.Manual */) {
-            // this element will now accept any manual content inserted into it
-            observeElementChildNodes(elm);
-        }
-        if (!shared.isUndefined(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 (!shared.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 */ && !shared.isUndefined(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 = !shared.isUndefined(context) &&
-            !shared.isUndefined(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) {
@@ -3677,15 +3715,6 @@ function createViewModelHook(elm, vnode, renderer) {
         return vm;
     }
     const { sel, mode, ctor, owner } = vnode;
-    setScopeTokenClassIfNecessary(elm, owner, renderer);
-    if (owner.shadowMode === 1 /* ShadowMode.Synthetic */) {
-        const { stylesheetToken } = owner.context;
-        // when running in synthetic shadow mode, we need to set the shadowToken value
-        // into each element from the template, so they can be styled accordingly.
-        if (!shared.isUndefined(stylesheetToken)) {
-            setElementShadowToken(elm, stylesheetToken);
-        }
-    }
     vm = createVM(elm, ctor, renderer, {
         mode,
         owner,
@@ -3790,25 +3819,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];
@@ -3831,7 +3860,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.
@@ -3891,7 +3920,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 {
@@ -4225,13 +4254,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}>`
  */
@@ -4248,18 +4270,7 @@ function dc(sel, Ctor, data, children = EmptyArray) {
     if (!isComponentConstructor(Ctor)) {
         throw new Error(`Invalid LWC Constructor ${shared.toString(Ctor)} for custom element <${sel}>.`);
     }
-    let idx = DynamicImportedComponentMap.get(Ctor);
-    if (shared.isUndefined(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
@@ -4735,7 +4746,7 @@ function getComponentRegisteredTemplate(Ctor) {
     return signedTemplateMap.get(Ctor);
 }
 function getTemplateReactiveObserver(vm) {
-    return new ReactiveObserver(() => {
+    return createReactiveObserver(() => {
         const { isDirty } = vm;
         if (shared.isFalse(isDirty)) {
             markComponentAsDirty(vm);
@@ -5153,13 +5164,10 @@ function runRenderedCallback(vm) {
   const {
     def: {
       renderedCallback
-    },
-    renderer: {
-      ssr
     }
   } = vm;
 
-  if (shared.isTrue(ssr)) {
+  if (!process.env.IS_BROWSER) {
     return;
   }
 
@@ -5412,13 +5420,7 @@ function resetComponentRoot(vm) {
   vm.velements = EmptyArray;
 }
 function scheduleRehydration(vm) {
-  const {
-    renderer: {
-      ssr
-    }
-  } = vm;
-
-  if (shared.isTrue(ssr) || shared.isTrue(vm.isScheduled)) {
+  if (!process.env.IS_BROWSER || shared.isTrue(vm.isScheduled)) {
     return;
   }
 
@@ -5525,15 +5527,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);
   };
 }
 
@@ -5550,7 +5545,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
 
@@ -5846,7 +5841,7 @@ function readonly(obj) {
             shared.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);
 }
 
 /*
@@ -6396,4 +6391,4 @@ exports.swapTemplate = swapTemplate;
 exports.track = track;
 exports.unwrap = unwrap;
 exports.wire = wire;
-/* version: 2.21.0 */
+/* version: 2.23.0 */