@lwc/engine-core 2.20.4 → 2.22.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;
 }
 
 /*
@@ -1342,7 +1359,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;
+    }
 }
 
 /*
@@ -1432,8 +1466,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);
@@ -1703,6 +1736,60 @@ function createObservedFieldPropertyDescriptor(key) {
     };
 }
 
+/*
+ * 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 +1837,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 +1877,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 +1909,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,7 +1930,7 @@ 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);
+            const reactiveOrAnyValue = getReactiveProxy(newValue);
             if (reactiveOrAnyValue !== vm.cmpFields[key]) {
                 vm.cmpFields[key] = reactiveOrAnyValue;
                 componentValueMutated(vm, key);
@@ -2279,7 +2322,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);
         };
     }
@@ -3419,10 +3462,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 +3481,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 +3489,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 +3505,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);
     }
@@ -3550,22 +3592,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 +3644,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 +3709,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,
@@ -4735,7 +4758,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);
@@ -5550,7 +5573,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 +5869,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 +6419,4 @@ exports.swapTemplate = swapTemplate;
 exports.track = track;
 exports.unwrap = unwrap;
 exports.wire = wire;
-/* version: 2.20.4 */
+/* version: 2.22.0 */

package/dist/engine-core.js

@@ -1,7 +1,7 @@
 /* proxy-compat-disable */
 import { runtimeFlags } from '@lwc/features';
 export { setFeatureFlag, setFeatureFlagForTest } from '@lwc/features';
-import { seal, create, isFunction as isFunction$1, ArrayPush as ArrayPush$1, isUndefined as isUndefined$1, ArrayIndexOf, ArraySplice, StringToLowerCase, isNull, ArrayJoin, isFrozen, defineProperty, hasOwnProperty as hasOwnProperty$1, assign, forEach, keys, AriaPropNameToAttrNameMap, getPropertyDescriptor, defineProperties, getOwnPropertyNames as getOwnPropertyNames$1, getPrototypeOf as getPrototypeOf$1, setPrototypeOf, isObject, assert, KEY__SYNTHETIC_MODE, toString as toString$1, isFalse, isTrue, getOwnPropertyDescriptor as getOwnPropertyDescriptor$1, LWC_VERSION_COMMENT_REGEX, LWC_VERSION, freeze, htmlPropertyToAttribute, ArraySlice, ArrayMap, isArray as isArray$1, KEY__SCOPED_CSS, StringCharCodeAt, XML_NAMESPACE, XLINK_NAMESPACE, isString, StringSlice, SVG_NAMESPACE, KEY__SHADOW_STATIC, KEY__SHADOW_RESOLVER, isNumber, StringReplace, noop, ArrayUnshift, ArrayCopyWithin, ArrayFill, ArraySort, ArrayReverse, ArrayShift, ArrayPop } from '@lwc/shared';
+import { seal, create, isFunction as isFunction$1, ArrayPush as ArrayPush$1, isUndefined as isUndefined$1, ArrayIndexOf, ArraySplice, StringToLowerCase, isNull, ArrayJoin, isFrozen, defineProperty, hasOwnProperty as hasOwnProperty$1, assign, forEach, keys, AriaPropNameToAttrNameMap, getPropertyDescriptor, defineProperties, getOwnPropertyNames as getOwnPropertyNames$1, getPrototypeOf as getPrototypeOf$1, setPrototypeOf, isObject, assert, KEY__SYNTHETIC_MODE, isFalse, isTrue, toString as toString$1, getOwnPropertyDescriptor as getOwnPropertyDescriptor$1, LWC_VERSION_COMMENT_REGEX, LWC_VERSION, freeze, htmlPropertyToAttribute, ArraySlice, ArrayMap, isArray as isArray$1, KEY__SCOPED_CSS, StringCharCodeAt, XML_NAMESPACE, XLINK_NAMESPACE, isString, StringSlice, SVG_NAMESPACE, KEY__SHADOW_STATIC, KEY__SHADOW_RESOLVER, isNumber, StringReplace, noop, ArrayUnshift, ArrayCopyWithin, ArrayFill, ArraySort, ArrayReverse, ArrayShift, ArrayPop } from '@lwc/shared';
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -213,11 +213,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;
 }
 
 /*
@@ -1339,7 +1356,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;
+    }
 }
 
 /*
@@ -1429,8 +1463,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);
@@ -1700,6 +1733,60 @@ function createObservedFieldPropertyDescriptor(key) {
     };
 }
 
+/*
+ * 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 (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 process.env.IS_BROWSER
+        ? new AccessorReactiveObserver(vm, set)
+        : DUMMY_ACCESSOR_REACTIVE_OBSERVER;
+}
+
 /*
  * Copyright (c) 2018, salesforce.com, inc.
  * All rights reserved.
@@ -1747,50 +1834,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,
@@ -1831,7 +1874,7 @@ function createPublicAccessorDescriptor(key, descriptor) {
           let ro = vm.oar[key];
 
           if (isUndefined$1(ro)) {
-            ro = vm.oar[key] = new AccessorReactiveObserver(vm, set);
+            ro = vm.oar[key] = createAccessorReactiveObserver(vm, set);
           } // every time we invoke this setter from outside (through this wrapper setter)
           // we should reset the value and then debounce just in case there is a pending
           // invocation the next tick that is not longer relevant since the value is changing
@@ -1863,7 +1906,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.`);
@@ -1884,7 +1927,7 @@ 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);
+            const reactiveOrAnyValue = getReactiveProxy(newValue);
             if (reactiveOrAnyValue !== vm.cmpFields[key]) {
                 vm.cmpFields[key] = reactiveOrAnyValue;
                 componentValueMutated(vm, key);
@@ -2276,7 +2319,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);
         };
     }
@@ -3416,10 +3459,11 @@ function mountElement(vnode, parent, anchor, renderer) {
     const { sel, owner, data: { svg }, } = vnode;
     const { createElement } = renderer;
     const namespace = isTrue(svg) ? SVG_NAMESPACE : undefined;
-    const elm = createElement(sel, namespace);
+    const elm = (vnode.elm = createElement(sel, namespace));
     linkNodeToShadow(elm, owner, renderer);
-    fallbackElmHook(elm, vnode, renderer);
-    vnode.elm = elm;
+    applyStyleScoping(elm, owner, renderer);
+    applyDomManual(elm, vnode);
+    applyElementRestrictions(elm, vnode);
     patchElementPropsAndAttrs$1(null, vnode, renderer);
     insertNode(elm, parent, anchor, renderer);
     mountVNodes(vnode.children, elm, renderer, null);
@@ -3434,6 +3478,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) {
@@ -3441,10 +3486,6 @@ function mountStatic(vnode, parent, anchor, renderer) {
             elm[KEY__SHADOW_STATIC] = true;
         }
     }
-    if (process.env.NODE_ENV !== 'production') {
-        const isLight = renderMode === 0 /* RenderMode.Light */;
-        patchElementWithRestrictions(elm, { isPortal: false, isLight });
-    }
     insertNode(elm, parent, anchor, renderer);
 }
 function mountCustomElement(vnode, parent, anchor, renderer) {
@@ -3461,9 +3502,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);
     }
@@ -3547,22 +3589,6 @@ function unmountVNodes(vnodes, parent, renderer, doRemove = false, start = 0, en
 function isVNode(vnode) {
     return vnode != null;
 }
-function observeElementChildNodes(elm) {
-    elm.$domManual$ = true;
-}
-function setElementShadowToken(elm, token) {
-    elm.$shadowToken$ = token;
-}
-// Set the scope token class for *.scoped.css styles
-function setScopeTokenClassIfNecessary(elm, owner, renderer) {
-    const token = getScopeTokenClass(owner);
-    if (!isNull(token)) {
-        const { getClassList } = renderer;
-        // TODO [#2762]: this dot notation with add is probably problematic
-        // probably we should have a renderer api for just the add operation
-        getClassList(elm).add(token);
-    }
-}
 function linkNodeToShadow(elm, owner, renderer) {
     const { renderRoot, renderMode, shadowMode } = owner;
     const { isSyntheticShadowDefined } = renderer;
@@ -3615,31 +3641,37 @@ function patchElementPropsAndAttrs$1(oldVnode, vnode, renderer) {
     patchAttributes(oldVnode, vnode, renderer);
     patchProps(oldVnode, vnode, renderer);
 }
-function fallbackElmHook(elm, vnode, renderer) {
-    const { owner } = vnode;
-    setScopeTokenClassIfNecessary(elm, owner, renderer);
-    if (owner.shadowMode === 1 /* ShadowMode.Synthetic */) {
-        const { data: { context }, } = vnode;
-        const { stylesheetToken } = owner.context;
-        if (!isUndefined$1(context) &&
-            !isUndefined$1(context.lwc) &&
-            context.lwc.dom === "manual" /* LwcDomMode.Manual */) {
-            // this element will now accept any manual content inserted into it
-            observeElementChildNodes(elm);
-        }
-        if (!isUndefined$1(stylesheetToken)) {
-            // when running in synthetic shadow mode, we need to set the shadowToken value
-            // into each element from the template, so they can be styled accordingly.
-            setElementShadowToken(elm, stylesheetToken);
-        }
+function applyStyleScoping(elm, owner, renderer) {
+    // Set the class name for `*.scoped.css` style scoping.
+    const scopeToken = getScopeTokenClass(owner);
+    if (!isNull(scopeToken)) {
+        const { getClassList } = renderer;
+        // TODO [#2762]: this dot notation with add is probably problematic
+        // probably we should have a renderer api for just the add operation
+        getClassList(elm).add(scopeToken);
+    }
+    // Set property element for synthetic shadow DOM style scoping.
+    const { stylesheetToken: syntheticToken } = owner.context;
+    if (owner.shadowMode === 1 /* ShadowMode.Synthetic */ && !isUndefined$1(syntheticToken)) {
+        elm.$shadowToken$ = syntheticToken;
     }
+}
+function applyDomManual(elm, vnode) {
+    var _a;
+    const { owner, data: { context }, } = vnode;
+    if (owner.shadowMode === 1 /* ShadowMode.Synthetic */ && ((_a = context === null || context === void 0 ? void 0 : context.lwc) === null || _a === void 0 ? void 0 : _a.dom) === "manual" /* LwcDomMode.Manual */) {
+        elm.$domManual$ = true;
+    }
+}
+function applyElementRestrictions(elm, vnode) {
+    var _a, _b;
     if (process.env.NODE_ENV !== 'production') {
-        const { data: { context }, } = vnode;
-        const isPortal = !isUndefined$1(context) &&
-            !isUndefined$1(context.lwc) &&
-            context.lwc.dom === "manual" /* LwcDomMode.Manual */;
-        const isLight = owner.renderMode === 0 /* RenderMode.Light */;
-        patchElementWithRestrictions(elm, { isPortal, isLight });
+        const isPortal = vnode.type === 2 /* VNodeType.Element */ && ((_b = (_a = vnode.data.context) === null || _a === void 0 ? void 0 : _a.lwc) === null || _b === void 0 ? void 0 : _b.dom) === "manual" /* LwcDomMode.Manual */;
+        const isLight = vnode.owner.renderMode === 0 /* RenderMode.Light */;
+        patchElementWithRestrictions(elm, {
+            isPortal,
+            isLight,
+        });
     }
 }
 function allocateChildren(vnode, vm) {
@@ -3674,15 +3706,6 @@ function createViewModelHook(elm, vnode, renderer) {
         return vm;
     }
     const { sel, mode, ctor, owner } = vnode;
-    setScopeTokenClassIfNecessary(elm, owner, renderer);
-    if (owner.shadowMode === 1 /* ShadowMode.Synthetic */) {
-        const { stylesheetToken } = owner.context;
-        // when running in synthetic shadow mode, we need to set the shadowToken value
-        // into each element from the template, so they can be styled accordingly.
-        if (!isUndefined$1(stylesheetToken)) {
-            setElementShadowToken(elm, stylesheetToken);
-        }
-    }
     vm = createVM(elm, ctor, renderer, {
         mode,
         owner,
@@ -4732,7 +4755,7 @@ function getComponentRegisteredTemplate(Ctor) {
     return signedTemplateMap.get(Ctor);
 }
 function getTemplateReactiveObserver(vm) {
-    return new ReactiveObserver(() => {
+    return createReactiveObserver(() => {
         const { isDirty } = vm;
         if (isFalse(isDirty)) {
             markComponentAsDirty(vm);
@@ -5547,7 +5570,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
 
@@ -5843,7 +5866,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);
 }
 
 /*
@@ -6356,4 +6379,4 @@ function getComponentConstructor(elm) {
 }
 
 export { LightningElement, profilerControl as __unstable__ProfilerControl, api$1 as api, connectRootElement, createContextProvider, createVM, disconnectRootElement, freezeTemplate, getAssociatedVMIfPresent, getComponentConstructor, getComponentDef, getComponentHtmlPrototype, getUpgradableConstructor, hydrateRoot, isComponentConstructor, parseFragment, parseSVGFragment, readonly, register, registerComponent, registerDecorators, registerTemplate, sanitizeAttribute, setHooks, swapComponent, swapStyle, swapTemplate, track, unwrap, wire };
-/* version: 2.20.4 */
+/* version: 2.22.0 */

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@lwc/engine-core",
-    "version": "2.20.4",
+    "version": "2.22.0",
     "description": "Core LWC engine APIs.",
     "homepage": "https://lwc.dev/",
     "repository": {
@@ -25,8 +25,8 @@
         "types/"
     ],
     "dependencies": {
-        "@lwc/features": "2.20.4",
-        "@lwc/shared": "2.20.4"
+        "@lwc/features": "2.22.0",
+        "@lwc/shared": "2.22.0"
     },
     "devDependencies": {
         "observable-membrane": "2.0.0"

package/types/framework/accessor-reactive-observer.d.ts

@@ -0,0 +1,9 @@
+import { ReactiveObserver } from '../libs/mutation-tracker';
+import { VM } from './vm';
+export declare class AccessorReactiveObserver extends ReactiveObserver {
+    private value;
+    private debouncing;
+    constructor(vm: VM, set: (v: any) => void);
+    reset(value?: any): void;
+}
+export declare function createAccessorReactiveObserver(vm: VM, set: (v: any) => void): AccessorReactiveObserver;

package/types/framework/component.d.ts

@@ -1,4 +1,4 @@
-import { ReactiveObserver } from '../libs/mutation-tracker';
+import { ReactiveObserver } from './mutation-tracker';
 import { VM } from './vm';
 import { LightningElementConstructor } from './base-lightning-element';
 import { Template } from './template';

package/types/framework/decorators/api.d.ts

@@ -1,5 +1,3 @@
-import { ReactiveObserver } from '../mutation-tracker';
-import { VM } from '../vm';
 /**
  * @api decorator to mark public fields and public methods in
  * LWC Components. This function implements the internals of this
@@ -7,10 +5,4 @@ import { VM } from '../vm';
  */
 export default function api(target: any, propertyKey: string, descriptor: PropertyDescriptor): void;
 export declare function createPublicPropertyDescriptor(key: string): PropertyDescriptor;
-export declare class AccessorReactiveObserver extends ReactiveObserver {
-    private value;
-    private debouncing;
-    constructor(vm: VM, set: (v: any) => void);
-    reset(value?: any): void;
-}
 export declare function createPublicAccessorDescriptor(key: PropertyKey, descriptor: PropertyDescriptor): PropertyDescriptor;

package/types/framework/membrane.d.ts

@@ -1,9 +1,9 @@
-import { ObservableMembrane } from 'observable-membrane';
-export declare const lockerLivePropertyKey: unique symbol;
-export declare const reactiveMembrane: ObservableMembrane;
 /**
  * EXPERIMENTAL: This function implements an unwrap mechanism that
  * works for observable membrane objects. This API is subject to
  * change or being removed.
  */
 export declare function unwrap(value: any): any;
+export declare function getReadOnlyProxy(value: any): any;
+export declare function getReactiveProxy(value: any): any;
+export declare function markLockerLiveObject(obj: any): void;

package/types/framework/mutation-tracker.d.ts

@@ -1,4 +1,6 @@
+import { CallbackFunction, ReactiveObserver } from '../libs/mutation-tracker';
 import { VM } from './vm';
 export declare function componentValueMutated(vm: VM, key: PropertyKey): void;
 export declare function componentValueObserved(vm: VM, key: PropertyKey): void;
+export declare function createReactiveObserver(callback: CallbackFunction): ReactiveObserver;
 export * from '../libs/mutation-tracker';

package/types/framework/vm.d.ts

@@ -3,7 +3,7 @@ import { Template } from './template';
 import { ComponentDef } from './def';
 import { LightningElement, LightningElementConstructor } from './base-lightning-element';
 import { ReactiveObserver } from './mutation-tracker';
-import { AccessorReactiveObserver } from './decorators/api';
+import { AccessorReactiveObserver } from './accessor-reactive-observer';
 import { VNodes, VCustomElement, VNode } from './vnodes';
 declare type ShadowRootMode = 'open' | 'closed';
 export interface TemplateCache {

package/types/libs/mutation-tracker/index.d.ts

@@ -1,7 +1,7 @@
 export declare function valueMutated(target: object, key: PropertyKey): void;
 export declare function valueObserved(target: object, key: PropertyKey): void;
-declare type CallbackFunction = (rp: ReactiveObserver) => void;
-declare type JobFunction = () => void;
+export declare type CallbackFunction = (rp: ReactiveObserver) => void;
+export declare type JobFunction = () => void;
 export declare class ReactiveObserver {
     private listeners;
     private callback;
@@ -16,4 +16,3 @@ export declare class ReactiveObserver {
     notify(): void;
     link(reactiveObservers: ReactiveObserver[]): void;
 }
-export {};