@lwc/engine-core 2.5.9 → 2.5.10-alpha1

package/dist/engine-core.cjs.js

@@ -1431,6 +1431,7 @@ const {
   getPrototypeOf,
   create: ObjectCreate,
   defineProperty: ObjectDefineProperty,
+  defineProperties: ObjectDefineProperties,
   isExtensible,
   getOwnPropertyDescriptor,
   getOwnPropertyNames,
@@ -1440,7 +1441,8 @@ const {
 } = Object;
 const {
   push: ArrayPush,
-  concat: ArrayConcat
+  concat: ArrayConcat,
+  map: ArrayMap
 } = Array.prototype;
 const OtS = {}.toString;
 
@@ -1505,9 +1507,7 @@ class BaseProxyHandler {
     //       but it will always be compatible with the previous descriptor
     //       to preserve the object invariants, which makes these lines safe.
 
-    const originalDescriptor = getOwnPropertyDescriptor(originalTarget, key); // TODO: it should be impossible for the originalDescriptor to ever be undefined, this `if` can be removed
-
-    /* istanbul ignore else */
+    const originalDescriptor = getOwnPropertyDescriptor(originalTarget, key);
 
     if (!isUndefined(originalDescriptor)) {
       const wrappedDesc = this.wrapDescriptor(originalDescriptor);
@@ -1535,17 +1535,11 @@ class BaseProxyHandler {
 
     preventExtensions(shadowTarget);
   } // Shared Traps
-  // TODO: apply() is never called
-
-  /* istanbul ignore next */
 
 
   apply(shadowTarget, thisArg, argArray) {
     /* No op */
-  } // TODO: construct() is never called
-
-  /* istanbul ignore next */
-
+  }
 
   construct(shadowTarget, argArray, newTarget) {
     /* No op */
@@ -1658,8 +1652,8 @@ class BaseProxyHandler {
 
 }
 
-const getterMap$1 = new WeakMap();
-const setterMap$1 = new WeakMap();
+const getterMap = new WeakMap();
+const setterMap = new WeakMap();
 const reverseGetterMap = new WeakMap();
 const reverseSetterMap = new WeakMap();
 
@@ -1669,7 +1663,7 @@ class ReactiveProxyHandler extends BaseProxyHandler {
   }
 
   wrapGetter(originalGet) {
-    const wrappedGetter = getterMap$1.get(originalGet);
+    const wrappedGetter = getterMap.get(originalGet);
 
     if (!isUndefined(wrappedGetter)) {
       return wrappedGetter;
@@ -1682,13 +1676,13 @@ class ReactiveProxyHandler extends BaseProxyHandler {
       return handler.wrapValue(originalGet.call(unwrap$1(this)));
     };
 
-    getterMap$1.set(originalGet, get);
+    getterMap.set(originalGet, get);
     reverseGetterMap.set(get, originalGet);
     return get;
   }
 
   wrapSetter(originalSet) {
-    const wrappedSetter = setterMap$1.get(originalSet);
+    const wrappedSetter = setterMap.get(originalSet);
 
     if (!isUndefined(wrappedSetter)) {
       return wrappedSetter;
@@ -1699,7 +1693,7 @@ class ReactiveProxyHandler extends BaseProxyHandler {
       originalSet.call(unwrap$1(this), unwrap$1(v));
     };
 
-    setterMap$1.set(originalSet, set);
+    setterMap.set(originalSet, set);
     reverseSetterMap.set(set, originalSet);
     return set;
   }
@@ -1740,7 +1734,7 @@ class ReactiveProxyHandler extends BaseProxyHandler {
       return unwrap$1(redGet.call(handler.wrapValue(this)));
     };
 
-    getterMap$1.set(get, redGet);
+    getterMap.set(get, redGet);
     reverseGetterMap.set(redGet, get);
     return get;
   }
@@ -1759,7 +1753,7 @@ class ReactiveProxyHandler extends BaseProxyHandler {
       redSet.call(handler.wrapValue(this), handler.wrapValue(v));
     };
 
-    setterMap$1.set(set, redSet);
+    setterMap.set(set, redSet);
     reverseSetterMap.set(redSet, set);
     return set;
   }
@@ -1800,7 +1794,6 @@ class ReactiveProxyHandler extends BaseProxyHandler {
   }
 
   setPrototypeOf(shadowTarget, prototype) {
-    /* istanbul ignore else */
     if (process.env.NODE_ENV !== 'production') {
       throw new Error(`Invalid setPrototypeOf invocation for reactive proxy ${toString(this.originalTarget)}. Prototype of reactive objects cannot be changed.`);
     }
@@ -1814,11 +1807,6 @@ class ReactiveProxyHandler extends BaseProxyHandler {
       preventExtensions(originalTarget); // if the originalTarget is a proxy itself, it might reject
       // the preventExtension call, in which case we should not attempt to lock down
       // the shadow target.
-      // TODO: It should not actually be possible to reach this `if` statement.
-      // If a proxy rejects extensions, then calling preventExtensions will throw an error:
-      // https://codepen.io/nolanlawson-the-selector/pen/QWMOjbY
-
-      /* istanbul ignore if */
 
       if (isExtensible(originalTarget)) {
         return false;
@@ -1860,8 +1848,8 @@ class ReactiveProxyHandler extends BaseProxyHandler {
 
 }
 
-const getterMap = new WeakMap();
-const setterMap = new WeakMap();
+const getterMap$1 = new WeakMap();
+const setterMap$1 = new WeakMap();
 
 class ReadOnlyHandler extends BaseProxyHandler {
   wrapValue(value) {
@@ -1869,7 +1857,7 @@ class ReadOnlyHandler extends BaseProxyHandler {
   }
 
   wrapGetter(originalGet) {
-    const wrappedGetter = getterMap.get(originalGet);
+    const wrappedGetter = getterMap$1.get(originalGet);
 
     if (!isUndefined(wrappedGetter)) {
       return wrappedGetter;
@@ -1882,12 +1870,12 @@ class ReadOnlyHandler extends BaseProxyHandler {
       return handler.wrapValue(originalGet.call(unwrap$1(this)));
     };
 
-    getterMap.set(originalGet, get);
+    getterMap$1.set(originalGet, get);
     return get;
   }
 
   wrapSetter(originalSet) {
-    const wrappedSetter = setterMap.get(originalSet);
+    const wrappedSetter = setterMap$1.get(originalSet);
 
     if (!isUndefined(wrappedSetter)) {
       return wrappedSetter;
@@ -1896,7 +1884,6 @@ class ReadOnlyHandler extends BaseProxyHandler {
     const handler = this;
 
     const set = function (v) {
-      /* istanbul ignore else */
       if (process.env.NODE_ENV !== 'production') {
         const {
           originalTarget
@@ -1905,41 +1892,33 @@ class ReadOnlyHandler extends BaseProxyHandler {
       }
     };
 
-    setterMap.set(originalSet, set);
+    setterMap$1.set(originalSet, set);
     return set;
   }
 
   set(shadowTarget, key, value) {
-    /* istanbul ignore else */
     if (process.env.NODE_ENV !== 'production') {
       const {
         originalTarget
       } = this;
-      const msg = isArray(originalTarget) ? `Invalid mutation: Cannot mutate array at index ${key.toString()}. Array is read-only.` : `Invalid mutation: Cannot set "${key.toString()}" on "${originalTarget}". "${originalTarget}" is read-only.`;
-      throw new Error(msg);
+      throw new Error(`Invalid mutation: Cannot set "${key.toString()}" on "${originalTarget}". "${originalTarget}" is read-only.`);
     }
-    /* istanbul ignore next */
-
 
     return false;
   }
 
   deleteProperty(shadowTarget, key) {
-    /* istanbul ignore else */
     if (process.env.NODE_ENV !== 'production') {
       const {
         originalTarget
       } = this;
       throw new Error(`Invalid mutation: Cannot delete "${key.toString()}" on "${originalTarget}". "${originalTarget}" is read-only.`);
     }
-    /* istanbul ignore next */
-
 
     return false;
   }
 
   setPrototypeOf(shadowTarget, prototype) {
-    /* istanbul ignore else */
     if (process.env.NODE_ENV !== 'production') {
       const {
         originalTarget
@@ -1949,29 +1928,23 @@ class ReadOnlyHandler extends BaseProxyHandler {
   }
 
   preventExtensions(shadowTarget) {
-    /* istanbul ignore else */
     if (process.env.NODE_ENV !== 'production') {
       const {
         originalTarget
       } = this;
       throw new Error(`Invalid mutation: Cannot preventExtensions on ${originalTarget}". "${originalTarget} is read-only.`);
     }
-    /* istanbul ignore next */
-
 
     return false;
   }
 
   defineProperty(shadowTarget, key, descriptor) {
-    /* istanbul ignore else */
     if (process.env.NODE_ENV !== 'production') {
       const {
         originalTarget
       } = this;
       throw new Error(`Invalid mutation: Cannot defineProperty "${key.toString()}" on "${originalTarget}". "${originalTarget}" is read-only.`);
     }
-    /* istanbul ignore next */
-
 
     return false;
   }
@@ -2029,8 +2002,6 @@ const formatter = {
 }; // Inspired from paulmillr/es6-shim
 // https://github.com/paulmillr/es6-shim/blob/master/es6-shim.js#L176-L185
 
-/* istanbul ignore next */
-
 function getGlobal() {
   // the only reliable means to get the global object is `Function('return this')()`
   // However, this causes CSP violations in Chrome apps.
@@ -2055,7 +2026,6 @@ function getGlobal() {
 }
 
 function init() {
-  /* istanbul ignore if */
   if (process.env.NODE_ENV === 'production') {
     // this method should never leak to prod
     throw new ReferenceError();
@@ -2070,8 +2040,6 @@ function init() {
   ArrayPush.call(devtoolsFormatters, formatter);
   global.devtoolsFormatters = devtoolsFormatters;
 }
-/* istanbul ignore else */
-
 
 if (process.env.NODE_ENV !== 'production') {
   init();
@@ -2118,8 +2086,7 @@ class ReactiveMembrane {
     this.valueMutated = defaultValueMutated;
     this.valueObserved = defaultValueObserved;
     this.valueIsObservable = defaultValueIsObservable;
-    this.readOnlyObjectGraph = new WeakMap();
-    this.reactiveObjectGraph = new WeakMap();
+    this.objectGraph = new WeakMap();
 
     if (!isUndefined(options)) {
       const {
@@ -2142,13 +2109,10 @@ class ReactiveMembrane {
     const distorted = this.valueDistortion(unwrappedValue);
 
     if (this.valueIsObservable(distorted)) {
-      if (this.readOnlyObjectGraph.get(distorted) === value) {
-        // when trying to extract the writable version of a readonly
-        // we return the readonly.
-        return value;
-      }
+      const o = this.getReactiveState(unwrappedValue, distorted); // when trying to extract the writable version of a readonly
+      // we return the readonly.
 
-      return this.getReactiveHandler(unwrappedValue, distorted);
+      return o.readOnly === value ? value : o.reactive;
     }
 
     return distorted;
@@ -2159,7 +2123,7 @@ class ReactiveMembrane {
     const distorted = this.valueDistortion(value);
 
     if (this.valueIsObservable(distorted)) {
-      return this.getReadOnlyHandler(value, distorted);
+      return this.getReactiveState(value, distorted).readOnly;
     }
 
     return distorted;
@@ -2169,36 +2133,47 @@ class ReactiveMembrane {
     return unwrap$1(p);
   }
 
-  getReactiveHandler(value, distortedValue) {
-    let proxy = this.reactiveObjectGraph.get(distortedValue);
+  getReactiveState(value, distortedValue) {
+    const {
+      objectGraph
+    } = this;
+    let reactiveState = objectGraph.get(distortedValue);
 
-    if (isUndefined(proxy)) {
-      // caching the proxy after the first time it is accessed
-      const handler = new ReactiveProxyHandler(this, distortedValue);
-      proxy = new Proxy(createShadowTarget(distortedValue), handler);
-      registerProxy(proxy, value);
-      this.reactiveObjectGraph.set(distortedValue, proxy);
+    if (reactiveState) {
+      return reactiveState;
     }
 
-    return proxy;
-  }
+    const membrane = this;
+    reactiveState = {
+      get reactive() {
+        const reactiveHandler = new ReactiveProxyHandler(membrane, distortedValue); // caching the reactive proxy after the first time it is accessed
 
-  getReadOnlyHandler(value, distortedValue) {
-    let proxy = this.readOnlyObjectGraph.get(distortedValue);
+        const proxy = new Proxy(createShadowTarget(distortedValue), reactiveHandler);
+        registerProxy(proxy, value);
+        ObjectDefineProperty(this, 'reactive', {
+          value: proxy
+        });
+        return proxy;
+      },
 
-    if (isUndefined(proxy)) {
-      // caching the proxy after the first time it is accessed
-      const handler = new ReadOnlyHandler(this, distortedValue);
-      proxy = new Proxy(createShadowTarget(distortedValue), handler);
-      registerProxy(proxy, value);
-      this.readOnlyObjectGraph.set(distortedValue, proxy);
-    }
+      get readOnly() {
+        const readOnlyHandler = new ReadOnlyHandler(membrane, distortedValue); // caching the readOnly proxy after the first time it is accessed
+
+        const proxy = new Proxy(createShadowTarget(distortedValue), readOnlyHandler);
+        registerProxy(proxy, value);
+        ObjectDefineProperty(this, 'readOnly', {
+          value: proxy
+        });
+        return proxy;
+      }
 
-    return proxy;
+    };
+    objectGraph.set(distortedValue, reactiveState);
+    return reactiveState;
   }
 
 }
-/** version: 1.1.5 */
+/** version: 1.0.0 */
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -5416,7 +5391,6 @@ function updateStylesheetToken(vm, template) {
 
 function evaluateStylesheetsContent(stylesheets, stylesheetToken, vm) {
   const content = [];
-  let root;
 
   for (let i = 0; i < stylesheets.length; i++) {
     let stylesheet = stylesheets[i];
@@ -5429,46 +5403,23 @@ function evaluateStylesheetsContent(stylesheets, stylesheetToken, vm) {
         // the component instance might be attempting to use an old version of
         // the stylesheet, while internally, we have a replacement for it.
         stylesheet = getStyleOrSwappedStyle(stylesheet);
-      }
-
-      const isScopedCss = stylesheet[shared.KEY__SCOPED_CSS]; // Apply the scope token only if the stylesheet itself is scoped, or if we're rendering synthetic shadow.
-
-      const scopeToken = isScopedCss || vm.shadowMode === 1
-      /* Synthetic */
-      && vm.renderMode === 1
-      /* Shadow */
-      ? stylesheetToken : undefined; // Use the actual `:host` selector if we're rendering global CSS for light DOM, or if we're rendering
+      } // Use the actual `:host` selector if we're rendering global CSS for light DOM, or if we're rendering
       // native shadow DOM. Synthetic shadow DOM never uses `:host`.
 
+
+      const isScopedCss = stylesheet[shared.KEY__SCOPED_CSS];
       const useActualHostSelector = vm.renderMode === 0
       /* Light */
       ? !isScopedCss : vm.shadowMode === 0
       /* Native */
-      ; // Use the native :dir() pseudoclass only in native shadow DOM. Otherwise, in synthetic shadow,
-      // we use an attribute selector on the host to simulate :dir().
-
-      let useNativeDirPseudoclass;
+      ; // Apply the scope token only if the stylesheet itself is scoped, or if we're rendering synthetic shadow.
 
-      if (vm.renderMode === 1
+      const scopeToken = isScopedCss || vm.shadowMode === 1
+      /* Synthetic */
+      && vm.renderMode === 1
       /* Shadow */
-      ) {
-        useNativeDirPseudoclass = vm.shadowMode === 0
-        /* Native */
-        ;
-      } else {
-        // Light DOM components should only render `[dir]` if they're inside of a synthetic shadow root.
-        // At the top level (root is null) or inside of a native shadow root, they should use `:dir()`.
-        if (shared.isUndefined(root)) {
-          // Only calculate the root once as necessary
-          root = getNearestShadowComponent(vm);
-        }
-
-        useNativeDirPseudoclass = shared.isNull(root) || root.shadowMode === 0
-        /* Native */
-        ;
-      }
-
-      shared.ArrayPush.call(content, stylesheet(scopeToken, useActualHostSelector, useNativeDirPseudoclass));
+      ? stylesheetToken : undefined;
+      shared.ArrayPush.call(content, stylesheet(useActualHostSelector, scopeToken));
     }
   }
 
@@ -5491,12 +5442,14 @@ function getStylesheetsContent(vm, template) {
 // perf testing has not shown it to be a huge improvement yet:
 // https://github.com/salesforce/lwc/pull/2460#discussion_r691208892
 
-function getNearestShadowComponent(vm) {
+function getNearestNativeShadowComponent(vm) {
   let owner = vm;
 
   while (!shared.isNull(owner)) {
     if (owner.renderMode === 1
     /* Shadow */
+    && owner.shadowMode === 0
+    /* Native */
     ) {
       return owner;
     }
@@ -5507,20 +5460,6 @@ function getNearestShadowComponent(vm) {
   return owner;
 }
 
-function getNearestNativeShadowComponent(vm) {
-  const owner = getNearestShadowComponent(vm);
-
-  if (!shared.isNull(owner) && owner.shadowMode === 1
-  /* 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 {
     renderer,
@@ -7214,11 +7153,15 @@ function setHooks(hooks) {
 
 Object.defineProperty(exports, 'setFeatureFlag', {
     enumerable: true,
-    get: function () { return features.setFeatureFlag; }
+    get: function () {
+        return features.setFeatureFlag;
+    }
 });
 Object.defineProperty(exports, 'setFeatureFlagForTest', {
     enumerable: true,
-    get: function () { return features.setFeatureFlagForTest; }
+    get: function () {
+        return features.setFeatureFlagForTest;
+    }
 });
 exports.LightningElement = LightningElement;
 exports.__unstable__ProfilerControl = profilerControl;
@@ -7246,4 +7189,4 @@ exports.swapTemplate = swapTemplate;
 exports.track = track;
 exports.unwrap = unwrap;
 exports.wire = wire;
-/* version: 2.5.9 */
+/* version: 2.5.10-alpha1 */

package/dist/engine-core.js

@@ -1428,6 +1428,7 @@ const {
   getPrototypeOf,
   create: ObjectCreate,
   defineProperty: ObjectDefineProperty,
+  defineProperties: ObjectDefineProperties,
   isExtensible,
   getOwnPropertyDescriptor,
   getOwnPropertyNames,
@@ -1437,7 +1438,8 @@ const {
 } = Object;
 const {
   push: ArrayPush,
-  concat: ArrayConcat
+  concat: ArrayConcat,
+  map: ArrayMap
 } = Array.prototype;
 const OtS = {}.toString;
 
@@ -1502,9 +1504,7 @@ class BaseProxyHandler {
     //       but it will always be compatible with the previous descriptor
     //       to preserve the object invariants, which makes these lines safe.
 
-    const originalDescriptor = getOwnPropertyDescriptor(originalTarget, key); // TODO: it should be impossible for the originalDescriptor to ever be undefined, this `if` can be removed
-
-    /* istanbul ignore else */
+    const originalDescriptor = getOwnPropertyDescriptor(originalTarget, key);
 
     if (!isUndefined(originalDescriptor)) {
       const wrappedDesc = this.wrapDescriptor(originalDescriptor);
@@ -1532,17 +1532,11 @@ class BaseProxyHandler {
 
     preventExtensions(shadowTarget);
   } // Shared Traps
-  // TODO: apply() is never called
-
-  /* istanbul ignore next */
 
 
   apply(shadowTarget, thisArg, argArray) {
     /* No op */
-  } // TODO: construct() is never called
-
-  /* istanbul ignore next */
-
+  }
 
   construct(shadowTarget, argArray, newTarget) {
     /* No op */
@@ -1655,8 +1649,8 @@ class BaseProxyHandler {
 
 }
 
-const getterMap$1 = new WeakMap();
-const setterMap$1 = new WeakMap();
+const getterMap = new WeakMap();
+const setterMap = new WeakMap();
 const reverseGetterMap = new WeakMap();
 const reverseSetterMap = new WeakMap();
 
@@ -1666,7 +1660,7 @@ class ReactiveProxyHandler extends BaseProxyHandler {
   }
 
   wrapGetter(originalGet) {
-    const wrappedGetter = getterMap$1.get(originalGet);
+    const wrappedGetter = getterMap.get(originalGet);
 
     if (!isUndefined(wrappedGetter)) {
       return wrappedGetter;
@@ -1679,13 +1673,13 @@ class ReactiveProxyHandler extends BaseProxyHandler {
       return handler.wrapValue(originalGet.call(unwrap$1(this)));
     };
 
-    getterMap$1.set(originalGet, get);
+    getterMap.set(originalGet, get);
     reverseGetterMap.set(get, originalGet);
     return get;
   }
 
   wrapSetter(originalSet) {
-    const wrappedSetter = setterMap$1.get(originalSet);
+    const wrappedSetter = setterMap.get(originalSet);
 
     if (!isUndefined(wrappedSetter)) {
       return wrappedSetter;
@@ -1696,7 +1690,7 @@ class ReactiveProxyHandler extends BaseProxyHandler {
       originalSet.call(unwrap$1(this), unwrap$1(v));
     };
 
-    setterMap$1.set(originalSet, set);
+    setterMap.set(originalSet, set);
     reverseSetterMap.set(set, originalSet);
     return set;
   }
@@ -1737,7 +1731,7 @@ class ReactiveProxyHandler extends BaseProxyHandler {
       return unwrap$1(redGet.call(handler.wrapValue(this)));
     };
 
-    getterMap$1.set(get, redGet);
+    getterMap.set(get, redGet);
     reverseGetterMap.set(redGet, get);
     return get;
   }
@@ -1756,7 +1750,7 @@ class ReactiveProxyHandler extends BaseProxyHandler {
       redSet.call(handler.wrapValue(this), handler.wrapValue(v));
     };
 
-    setterMap$1.set(set, redSet);
+    setterMap.set(set, redSet);
     reverseSetterMap.set(redSet, set);
     return set;
   }
@@ -1797,7 +1791,6 @@ class ReactiveProxyHandler extends BaseProxyHandler {
   }
 
   setPrototypeOf(shadowTarget, prototype) {
-    /* istanbul ignore else */
     if (process.env.NODE_ENV !== 'production') {
       throw new Error(`Invalid setPrototypeOf invocation for reactive proxy ${toString(this.originalTarget)}. Prototype of reactive objects cannot be changed.`);
     }
@@ -1811,11 +1804,6 @@ class ReactiveProxyHandler extends BaseProxyHandler {
       preventExtensions(originalTarget); // if the originalTarget is a proxy itself, it might reject
       // the preventExtension call, in which case we should not attempt to lock down
       // the shadow target.
-      // TODO: It should not actually be possible to reach this `if` statement.
-      // If a proxy rejects extensions, then calling preventExtensions will throw an error:
-      // https://codepen.io/nolanlawson-the-selector/pen/QWMOjbY
-
-      /* istanbul ignore if */
 
       if (isExtensible(originalTarget)) {
         return false;
@@ -1857,8 +1845,8 @@ class ReactiveProxyHandler extends BaseProxyHandler {
 
 }
 
-const getterMap = new WeakMap();
-const setterMap = new WeakMap();
+const getterMap$1 = new WeakMap();
+const setterMap$1 = new WeakMap();
 
 class ReadOnlyHandler extends BaseProxyHandler {
   wrapValue(value) {
@@ -1866,7 +1854,7 @@ class ReadOnlyHandler extends BaseProxyHandler {
   }
 
   wrapGetter(originalGet) {
-    const wrappedGetter = getterMap.get(originalGet);
+    const wrappedGetter = getterMap$1.get(originalGet);
 
     if (!isUndefined(wrappedGetter)) {
       return wrappedGetter;
@@ -1879,12 +1867,12 @@ class ReadOnlyHandler extends BaseProxyHandler {
       return handler.wrapValue(originalGet.call(unwrap$1(this)));
     };
 
-    getterMap.set(originalGet, get);
+    getterMap$1.set(originalGet, get);
     return get;
   }
 
   wrapSetter(originalSet) {
-    const wrappedSetter = setterMap.get(originalSet);
+    const wrappedSetter = setterMap$1.get(originalSet);
 
     if (!isUndefined(wrappedSetter)) {
       return wrappedSetter;
@@ -1893,7 +1881,6 @@ class ReadOnlyHandler extends BaseProxyHandler {
     const handler = this;
 
     const set = function (v) {
-      /* istanbul ignore else */
       if (process.env.NODE_ENV !== 'production') {
         const {
           originalTarget
@@ -1902,41 +1889,33 @@ class ReadOnlyHandler extends BaseProxyHandler {
       }
     };
 
-    setterMap.set(originalSet, set);
+    setterMap$1.set(originalSet, set);
     return set;
   }
 
   set(shadowTarget, key, value) {
-    /* istanbul ignore else */
     if (process.env.NODE_ENV !== 'production') {
       const {
         originalTarget
       } = this;
-      const msg = isArray(originalTarget) ? `Invalid mutation: Cannot mutate array at index ${key.toString()}. Array is read-only.` : `Invalid mutation: Cannot set "${key.toString()}" on "${originalTarget}". "${originalTarget}" is read-only.`;
-      throw new Error(msg);
+      throw new Error(`Invalid mutation: Cannot set "${key.toString()}" on "${originalTarget}". "${originalTarget}" is read-only.`);
     }
-    /* istanbul ignore next */
-
 
     return false;
   }
 
   deleteProperty(shadowTarget, key) {
-    /* istanbul ignore else */
     if (process.env.NODE_ENV !== 'production') {
       const {
         originalTarget
       } = this;
       throw new Error(`Invalid mutation: Cannot delete "${key.toString()}" on "${originalTarget}". "${originalTarget}" is read-only.`);
     }
-    /* istanbul ignore next */
-
 
     return false;
   }
 
   setPrototypeOf(shadowTarget, prototype) {
-    /* istanbul ignore else */
     if (process.env.NODE_ENV !== 'production') {
       const {
         originalTarget
@@ -1946,29 +1925,23 @@ class ReadOnlyHandler extends BaseProxyHandler {
   }
 
   preventExtensions(shadowTarget) {
-    /* istanbul ignore else */
     if (process.env.NODE_ENV !== 'production') {
       const {
         originalTarget
       } = this;
       throw new Error(`Invalid mutation: Cannot preventExtensions on ${originalTarget}". "${originalTarget} is read-only.`);
     }
-    /* istanbul ignore next */
-
 
     return false;
   }
 
   defineProperty(shadowTarget, key, descriptor) {
-    /* istanbul ignore else */
     if (process.env.NODE_ENV !== 'production') {
       const {
         originalTarget
       } = this;
       throw new Error(`Invalid mutation: Cannot defineProperty "${key.toString()}" on "${originalTarget}". "${originalTarget}" is read-only.`);
     }
-    /* istanbul ignore next */
-
 
     return false;
   }
@@ -2026,8 +1999,6 @@ const formatter = {
 }; // Inspired from paulmillr/es6-shim
 // https://github.com/paulmillr/es6-shim/blob/master/es6-shim.js#L176-L185
 
-/* istanbul ignore next */
-
 function getGlobal() {
   // the only reliable means to get the global object is `Function('return this')()`
   // However, this causes CSP violations in Chrome apps.
@@ -2052,7 +2023,6 @@ function getGlobal() {
 }
 
 function init() {
-  /* istanbul ignore if */
   if (process.env.NODE_ENV === 'production') {
     // this method should never leak to prod
     throw new ReferenceError();
@@ -2067,8 +2037,6 @@ function init() {
   ArrayPush.call(devtoolsFormatters, formatter);
   global.devtoolsFormatters = devtoolsFormatters;
 }
-/* istanbul ignore else */
-
 
 if (process.env.NODE_ENV !== 'production') {
   init();
@@ -2115,8 +2083,7 @@ class ReactiveMembrane {
     this.valueMutated = defaultValueMutated;
     this.valueObserved = defaultValueObserved;
     this.valueIsObservable = defaultValueIsObservable;
-    this.readOnlyObjectGraph = new WeakMap();
-    this.reactiveObjectGraph = new WeakMap();
+    this.objectGraph = new WeakMap();
 
     if (!isUndefined(options)) {
       const {
@@ -2139,13 +2106,10 @@ class ReactiveMembrane {
     const distorted = this.valueDistortion(unwrappedValue);
 
     if (this.valueIsObservable(distorted)) {
-      if (this.readOnlyObjectGraph.get(distorted) === value) {
-        // when trying to extract the writable version of a readonly
-        // we return the readonly.
-        return value;
-      }
+      const o = this.getReactiveState(unwrappedValue, distorted); // when trying to extract the writable version of a readonly
+      // we return the readonly.
 
-      return this.getReactiveHandler(unwrappedValue, distorted);
+      return o.readOnly === value ? value : o.reactive;
     }
 
     return distorted;
@@ -2156,7 +2120,7 @@ class ReactiveMembrane {
     const distorted = this.valueDistortion(value);
 
     if (this.valueIsObservable(distorted)) {
-      return this.getReadOnlyHandler(value, distorted);
+      return this.getReactiveState(value, distorted).readOnly;
     }
 
     return distorted;
@@ -2166,36 +2130,47 @@ class ReactiveMembrane {
     return unwrap$1(p);
   }
 
-  getReactiveHandler(value, distortedValue) {
-    let proxy = this.reactiveObjectGraph.get(distortedValue);
+  getReactiveState(value, distortedValue) {
+    const {
+      objectGraph
+    } = this;
+    let reactiveState = objectGraph.get(distortedValue);
 
-    if (isUndefined(proxy)) {
-      // caching the proxy after the first time it is accessed
-      const handler = new ReactiveProxyHandler(this, distortedValue);
-      proxy = new Proxy(createShadowTarget(distortedValue), handler);
-      registerProxy(proxy, value);
-      this.reactiveObjectGraph.set(distortedValue, proxy);
+    if (reactiveState) {
+      return reactiveState;
     }
 
-    return proxy;
-  }
+    const membrane = this;
+    reactiveState = {
+      get reactive() {
+        const reactiveHandler = new ReactiveProxyHandler(membrane, distortedValue); // caching the reactive proxy after the first time it is accessed
 
-  getReadOnlyHandler(value, distortedValue) {
-    let proxy = this.readOnlyObjectGraph.get(distortedValue);
+        const proxy = new Proxy(createShadowTarget(distortedValue), reactiveHandler);
+        registerProxy(proxy, value);
+        ObjectDefineProperty(this, 'reactive', {
+          value: proxy
+        });
+        return proxy;
+      },
 
-    if (isUndefined(proxy)) {
-      // caching the proxy after the first time it is accessed
-      const handler = new ReadOnlyHandler(this, distortedValue);
-      proxy = new Proxy(createShadowTarget(distortedValue), handler);
-      registerProxy(proxy, value);
-      this.readOnlyObjectGraph.set(distortedValue, proxy);
-    }
+      get readOnly() {
+        const readOnlyHandler = new ReadOnlyHandler(membrane, distortedValue); // caching the readOnly proxy after the first time it is accessed
+
+        const proxy = new Proxy(createShadowTarget(distortedValue), readOnlyHandler);
+        registerProxy(proxy, value);
+        ObjectDefineProperty(this, 'readOnly', {
+          value: proxy
+        });
+        return proxy;
+      }
 
-    return proxy;
+    };
+    objectGraph.set(distortedValue, reactiveState);
+    return reactiveState;
   }
 
 }
-/** version: 1.1.5 */
+/** version: 1.0.0 */
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -5413,7 +5388,6 @@ function updateStylesheetToken(vm, template) {
 
 function evaluateStylesheetsContent(stylesheets, stylesheetToken, vm) {
   const content = [];
-  let root;
 
   for (let i = 0; i < stylesheets.length; i++) {
     let stylesheet = stylesheets[i];
@@ -5426,46 +5400,23 @@ function evaluateStylesheetsContent(stylesheets, stylesheetToken, vm) {
         // the component instance might be attempting to use an old version of
         // the stylesheet, while internally, we have a replacement for it.
         stylesheet = getStyleOrSwappedStyle(stylesheet);
-      }
-
-      const isScopedCss = stylesheet[KEY__SCOPED_CSS]; // Apply the scope token only if the stylesheet itself is scoped, or if we're rendering synthetic shadow.
-
-      const scopeToken = isScopedCss || vm.shadowMode === 1
-      /* Synthetic */
-      && vm.renderMode === 1
-      /* Shadow */
-      ? stylesheetToken : undefined; // Use the actual `:host` selector if we're rendering global CSS for light DOM, or if we're rendering
+      } // Use the actual `:host` selector if we're rendering global CSS for light DOM, or if we're rendering
       // native shadow DOM. Synthetic shadow DOM never uses `:host`.
 
+
+      const isScopedCss = stylesheet[KEY__SCOPED_CSS];
       const useActualHostSelector = vm.renderMode === 0
       /* Light */
       ? !isScopedCss : vm.shadowMode === 0
       /* Native */
-      ; // Use the native :dir() pseudoclass only in native shadow DOM. Otherwise, in synthetic shadow,
-      // we use an attribute selector on the host to simulate :dir().
-
-      let useNativeDirPseudoclass;
+      ; // Apply the scope token only if the stylesheet itself is scoped, or if we're rendering synthetic shadow.
 
-      if (vm.renderMode === 1
+      const scopeToken = isScopedCss || vm.shadowMode === 1
+      /* Synthetic */
+      && vm.renderMode === 1
       /* Shadow */
-      ) {
-        useNativeDirPseudoclass = vm.shadowMode === 0
-        /* Native */
-        ;
-      } else {
-        // Light DOM components should only render `[dir]` if they're inside of a synthetic shadow root.
-        // At the top level (root is null) or inside of a native shadow root, they should use `:dir()`.
-        if (isUndefined$1(root)) {
-          // Only calculate the root once as necessary
-          root = getNearestShadowComponent(vm);
-        }
-
-        useNativeDirPseudoclass = isNull(root) || root.shadowMode === 0
-        /* Native */
-        ;
-      }
-
-      ArrayPush$1.call(content, stylesheet(scopeToken, useActualHostSelector, useNativeDirPseudoclass));
+      ? stylesheetToken : undefined;
+      ArrayPush$1.call(content, stylesheet(useActualHostSelector, scopeToken));
     }
   }
 
@@ -5488,12 +5439,14 @@ function getStylesheetsContent(vm, template) {
 // perf testing has not shown it to be a huge improvement yet:
 // https://github.com/salesforce/lwc/pull/2460#discussion_r691208892
 
-function getNearestShadowComponent(vm) {
+function getNearestNativeShadowComponent(vm) {
   let owner = vm;
 
   while (!isNull(owner)) {
     if (owner.renderMode === 1
     /* Shadow */
+    && owner.shadowMode === 0
+    /* Native */
     ) {
       return owner;
     }
@@ -5504,20 +5457,6 @@ function getNearestShadowComponent(vm) {
   return owner;
 }
 
-function getNearestNativeShadowComponent(vm) {
-  const owner = getNearestShadowComponent(vm);
-
-  if (!isNull(owner) && owner.shadowMode === 1
-  /* 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 {
     renderer,
@@ -7210,4 +7149,4 @@ function setHooks(hooks) {
 }
 
 export { LightningElement, profilerControl as __unstable__ProfilerControl, api$1 as api, connectRootElement, createContextProvider, createVM, disconnectRootElement, getAssociatedVMIfPresent, getComponentDef, getComponentInternalDef, getUpgradableConstructor, hydrateRootElement, isComponentConstructor, readonly, register, registerComponent, registerDecorators, registerTemplate, sanitizeAttribute, setHooks, swapComponent, swapStyle, swapTemplate, track, unwrap, wire };
-/* version: 2.5.9 */
+/* version: 2.5.10-alpha1 */

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@lwc/engine-core",
-    "version": "2.5.9",
+    "version": "2.5.10-alpha1",
     "description": "Core LWC engine APIs.",
     "homepage": "https://lwc.dev/",
     "repository": {
@@ -24,8 +24,8 @@
         "types/"
     ],
     "dependencies": {
-        "@lwc/features": "2.5.9",
-        "@lwc/shared": "2.5.9"
+        "@lwc/features": "2.5.10-alpha1",
+        "@lwc/shared": "2.5.10-alpha1"
     },
     "devDependencies": {
         "observable-membrane": "1.1.5"
@@ -33,5 +33,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "3e50c5c599f5eb7af78bcfd6f634df10e8117145"
+    "gitHead": "b96b2d24f545c14a5c8984ab01081290afd5dc39"
 }

package/types/framework/performance-timing.d.ts

@@ -0,0 +1,10 @@
+import { VM } from './vm';
+export declare type MeasurementPhase = 'constructor' | 'render' | 'patch' | 'connectedCallback' | 'disconnectedCallback' | 'renderedCallback' | 'errorCallback';
+export declare enum GlobalMeasurementPhase {
+    REHYDRATE = "lwc-rehydrate",
+    HYDRATE = "lwc-hydrate"
+}
+export declare const startMeasure: (phase: MeasurementPhase, vm: VM) => void;
+export declare const endMeasure: (phase: MeasurementPhase, vm: VM) => void;
+export declare const startGlobalMeasure: (phase: GlobalMeasurementPhase, vm?: VM<any, any> | undefined) => void;
+export declare const endGlobalMeasure: (phase: GlobalMeasurementPhase, vm?: VM<any, any> | undefined) => void;

package/types/framework/stylesheet.d.ts

@@ -5,7 +5,7 @@ import { Template } from './template';
  * Function producing style based on a host and a shadow selector. This function is invoked by
  * the engine with different values depending on the mode that the component is running on.
  */
-export declare type StylesheetFactory = (stylesheetToken: string | undefined, useActualHostSelector: boolean, useNativeDirPseudoclass: boolean) => string;
+export declare type StylesheetFactory = (useActualHostSelector: boolean, stylesheetToken: string | undefined) => string;
 /**
  * The list of stylesheets associated with a template. Each entry is either a StylesheetFactory or a
  * TemplateStylesheetFactory a given stylesheet depends on other external stylesheets (via the