@lwc/engine-core 2.5.8 → 2.6.1

package/dist/engine-core.cjs.js

@@ -1428,10 +1428,10 @@ const {
   isArray
 } = Array;
 const {
+  prototype: ObjectDotPrototype,
   getPrototypeOf,
   create: ObjectCreate,
   defineProperty: ObjectDefineProperty,
-  defineProperties: ObjectDefineProperties,
   isExtensible,
   getOwnPropertyDescriptor,
   getOwnPropertyNames,
@@ -1441,8 +1441,7 @@ const {
 } = Object;
 const {
   push: ArrayPush,
-  concat: ArrayConcat,
-  map: ArrayMap
+  concat: ArrayConcat
 } = Array.prototype;
 const OtS = {}.toString;
 
@@ -1507,7 +1506,9 @@ 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);
+    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 */
 
     if (!isUndefined(originalDescriptor)) {
       const wrappedDesc = this.wrapDescriptor(originalDescriptor);
@@ -1535,11 +1536,17 @@ 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 */
@@ -1652,8 +1659,8 @@ class BaseProxyHandler {
 
 }
 
-const getterMap = new WeakMap();
-const setterMap = new WeakMap();
+const getterMap$1 = new WeakMap();
+const setterMap$1 = new WeakMap();
 const reverseGetterMap = new WeakMap();
 const reverseSetterMap = new WeakMap();
 
@@ -1663,7 +1670,7 @@ class ReactiveProxyHandler extends BaseProxyHandler {
   }
 
   wrapGetter(originalGet) {
-    const wrappedGetter = getterMap.get(originalGet);
+    const wrappedGetter = getterMap$1.get(originalGet);
 
     if (!isUndefined(wrappedGetter)) {
       return wrappedGetter;
@@ -1676,13 +1683,13 @@ class ReactiveProxyHandler extends BaseProxyHandler {
       return handler.wrapValue(originalGet.call(unwrap$1(this)));
     };
 
-    getterMap.set(originalGet, get);
+    getterMap$1.set(originalGet, get);
     reverseGetterMap.set(get, originalGet);
     return get;
   }
 
   wrapSetter(originalSet) {
-    const wrappedSetter = setterMap.get(originalSet);
+    const wrappedSetter = setterMap$1.get(originalSet);
 
     if (!isUndefined(wrappedSetter)) {
       return wrappedSetter;
@@ -1693,7 +1700,7 @@ class ReactiveProxyHandler extends BaseProxyHandler {
       originalSet.call(unwrap$1(this), unwrap$1(v));
     };
 
-    setterMap.set(originalSet, set);
+    setterMap$1.set(originalSet, set);
     reverseSetterMap.set(set, originalSet);
     return set;
   }
@@ -1734,7 +1741,7 @@ class ReactiveProxyHandler extends BaseProxyHandler {
       return unwrap$1(redGet.call(handler.wrapValue(this)));
     };
 
-    getterMap.set(get, redGet);
+    getterMap$1.set(get, redGet);
     reverseGetterMap.set(redGet, get);
     return get;
   }
@@ -1753,7 +1760,7 @@ class ReactiveProxyHandler extends BaseProxyHandler {
       redSet.call(handler.wrapValue(this), handler.wrapValue(v));
     };
 
-    setterMap.set(set, redSet);
+    setterMap$1.set(set, redSet);
     reverseSetterMap.set(redSet, set);
     return set;
   }
@@ -1794,6 +1801,7 @@ 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.`);
     }
@@ -1807,6 +1815,11 @@ 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;
@@ -1848,8 +1861,8 @@ class ReactiveProxyHandler extends BaseProxyHandler {
 
 }
 
-const getterMap$1 = new WeakMap();
-const setterMap$1 = new WeakMap();
+const getterMap = new WeakMap();
+const setterMap = new WeakMap();
 
 class ReadOnlyHandler extends BaseProxyHandler {
   wrapValue(value) {
@@ -1857,7 +1870,7 @@ class ReadOnlyHandler extends BaseProxyHandler {
   }
 
   wrapGetter(originalGet) {
-    const wrappedGetter = getterMap$1.get(originalGet);
+    const wrappedGetter = getterMap.get(originalGet);
 
     if (!isUndefined(wrappedGetter)) {
       return wrappedGetter;
@@ -1870,12 +1883,12 @@ class ReadOnlyHandler extends BaseProxyHandler {
       return handler.wrapValue(originalGet.call(unwrap$1(this)));
     };
 
-    getterMap$1.set(originalGet, get);
+    getterMap.set(originalGet, get);
     return get;
   }
 
   wrapSetter(originalSet) {
-    const wrappedSetter = setterMap$1.get(originalSet);
+    const wrappedSetter = setterMap.get(originalSet);
 
     if (!isUndefined(wrappedSetter)) {
       return wrappedSetter;
@@ -1884,6 +1897,7 @@ class ReadOnlyHandler extends BaseProxyHandler {
     const handler = this;
 
     const set = function (v) {
+      /* istanbul ignore else */
       if (process.env.NODE_ENV !== 'production') {
         const {
           originalTarget
@@ -1892,33 +1906,41 @@ class ReadOnlyHandler extends BaseProxyHandler {
       }
     };
 
-    setterMap$1.set(originalSet, set);
+    setterMap.set(originalSet, set);
     return set;
   }
 
   set(shadowTarget, key, value) {
+    /* istanbul ignore else */
     if (process.env.NODE_ENV !== 'production') {
       const {
         originalTarget
       } = this;
-      throw new Error(`Invalid mutation: Cannot set "${key.toString()}" on "${originalTarget}". "${originalTarget}" is read-only.`);
+      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);
     }
+    /* 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
@@ -1928,23 +1950,29 @@ 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;
   }
@@ -2002,6 +2030,8 @@ 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.
@@ -2026,6 +2056,7 @@ function getGlobal() {
 }
 
 function init() {
+  /* istanbul ignore if */
   if (process.env.NODE_ENV === 'production') {
     // this method should never leak to prod
     throw new ReferenceError();
@@ -2040,13 +2071,13 @@ function init() {
   ArrayPush.call(devtoolsFormatters, formatter);
   global.devtoolsFormatters = devtoolsFormatters;
 }
+/* istanbul ignore else */
+
 
 if (process.env.NODE_ENV !== 'production') {
   init();
 }
 
-const ObjectDotPrototype = Object.prototype;
-
 function defaultValueIsObservable(value) {
   // intentionally checking for null
   if (value === null) {
@@ -2074,106 +2105,85 @@ const defaultValueMutated = (obj, key) => {
   /* do nothing */
 };
 
-const defaultValueDistortion = value => value;
-
 function createShadowTarget(value) {
   return isArray(value) ? [] : {};
 }
 
-class ReactiveMembrane {
-  constructor(options) {
-    this.valueDistortion = defaultValueDistortion;
-    this.valueMutated = defaultValueMutated;
-    this.valueObserved = defaultValueObserved;
-    this.valueIsObservable = defaultValueIsObservable;
-    this.objectGraph = new WeakMap();
-
-    if (!isUndefined(options)) {
-      const {
-        valueDistortion,
-        valueMutated,
-        valueObserved,
-        valueIsObservable,
-        tagPropertyKey
-      } = options;
-      this.valueDistortion = isFunction(valueDistortion) ? valueDistortion : defaultValueDistortion;
-      this.valueMutated = isFunction(valueMutated) ? valueMutated : defaultValueMutated;
-      this.valueObserved = isFunction(valueObserved) ? valueObserved : defaultValueObserved;
-      this.valueIsObservable = isFunction(valueIsObservable) ? valueIsObservable : defaultValueIsObservable;
-      this.tagPropertyKey = tagPropertyKey;
-    }
+class ObservableMembrane {
+  constructor(options = {}) {
+    this.readOnlyObjectGraph = new WeakMap();
+    this.reactiveObjectGraph = new WeakMap();
+    const {
+      valueMutated,
+      valueObserved,
+      valueIsObservable,
+      tagPropertyKey
+    } = options;
+    this.valueMutated = isFunction(valueMutated) ? valueMutated : defaultValueMutated;
+    this.valueObserved = isFunction(valueObserved) ? valueObserved : defaultValueObserved;
+    this.valueIsObservable = isFunction(valueIsObservable) ? valueIsObservable : defaultValueIsObservable;
+    this.tagPropertyKey = tagPropertyKey;
   }
 
   getProxy(value) {
     const unwrappedValue = unwrap$1(value);
-    const distorted = this.valueDistortion(unwrappedValue);
 
-    if (this.valueIsObservable(distorted)) {
-      const o = this.getReactiveState(unwrappedValue, distorted); // when trying to extract the writable version of a readonly
-      // we return the readonly.
+    if (this.valueIsObservable(unwrappedValue)) {
+      // When trying to extract the writable version of a readonly we return the readonly.
+      if (this.readOnlyObjectGraph.get(unwrappedValue) === value) {
+        return value;
+      }
 
-      return o.readOnly === value ? value : o.reactive;
+      return this.getReactiveHandler(unwrappedValue);
     }
 
-    return distorted;
+    return unwrappedValue;
   }
 
   getReadOnlyProxy(value) {
     value = unwrap$1(value);
-    const distorted = this.valueDistortion(value);
 
-    if (this.valueIsObservable(distorted)) {
-      return this.getReactiveState(value, distorted).readOnly;
+    if (this.valueIsObservable(value)) {
+      return this.getReadOnlyHandler(value);
     }
 
-    return distorted;
+    return value;
   }
 
   unwrapProxy(p) {
     return unwrap$1(p);
   }
 
-  getReactiveState(value, distortedValue) {
-    const {
-      objectGraph
-    } = this;
-    let reactiveState = objectGraph.get(distortedValue);
+  getReactiveHandler(value) {
+    let proxy = this.reactiveObjectGraph.get(value);
 
-    if (reactiveState) {
-      return reactiveState;
+    if (isUndefined(proxy)) {
+      // caching the proxy after the first time it is accessed
+      const handler = new ReactiveProxyHandler(this, value);
+      proxy = new Proxy(createShadowTarget(value), handler);
+      registerProxy(proxy, value);
+      this.reactiveObjectGraph.set(value, proxy);
     }
 
-    const membrane = this;
-    reactiveState = {
-      get reactive() {
-        const reactiveHandler = new ReactiveProxyHandler(membrane, distortedValue); // caching the reactive proxy after the first time it is accessed
-
-        const proxy = new Proxy(createShadowTarget(distortedValue), reactiveHandler);
-        registerProxy(proxy, value);
-        ObjectDefineProperty(this, 'reactive', {
-          value: proxy
-        });
-        return proxy;
-      },
+    return proxy;
+  }
 
-      get readOnly() {
-        const readOnlyHandler = new ReadOnlyHandler(membrane, distortedValue); // caching the readOnly proxy after the first time it is accessed
+  getReadOnlyHandler(value) {
+    let proxy = this.readOnlyObjectGraph.get(value);
 
-        const proxy = new Proxy(createShadowTarget(distortedValue), readOnlyHandler);
-        registerProxy(proxy, value);
-        ObjectDefineProperty(this, 'readOnly', {
-          value: proxy
-        });
-        return proxy;
-      }
+    if (isUndefined(proxy)) {
+      // caching the proxy after the first time it is accessed
+      const handler = new ReadOnlyHandler(this, value);
+      proxy = new Proxy(createShadowTarget(value), handler);
+      registerProxy(proxy, value);
+      this.readOnlyObjectGraph.set(value, proxy);
+    }
 
-    };
-    objectGraph.set(distortedValue, reactiveState);
-    return reactiveState;
+    return proxy;
   }
 
 }
-/** version: 1.0.0 */
+/** version: 2.0.0 */
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -2182,15 +2192,9 @@ class ReactiveMembrane {
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
 const lockerLivePropertyKey = Symbol.for('@@lockerLiveValue');
-
-function valueDistortion(value) {
-  return value;
-}
-
-const reactiveMembrane = new ReactiveMembrane({
+const reactiveMembrane = new ObservableMembrane({
   valueObserved,
   valueMutated,
-  valueDistortion,
   tagPropertyKey: lockerLivePropertyKey
 });
 /**
@@ -2199,16 +2203,9 @@ const reactiveMembrane = new ReactiveMembrane({
  * change or being removed.
  */
 
-const unwrap = function (value) {
-  const unwrapped = reactiveMembrane.unwrapProxy(value);
-
-  if (unwrapped !== value) {
-    // if value is a proxy, unwrap to access original value and apply distortion
-    return valueDistortion(unwrapped);
-  }
-
-  return value;
-};
+function unwrap(value) {
+  return reactiveMembrane.unwrapProxy(value);
+}
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -4283,7 +4280,7 @@ function vnodesAndElementHaveCompatibleAttrs(vnode, elm) {
   for (const [attrName, attrValue] of Object.entries(attrs)) {
     const elmAttrValue = renderer.getAttribute(elm, attrName);
 
-    if (attrValue !== elmAttrValue) {
+    if (String(attrValue) !== elmAttrValue) {
       logError(`Mismatch hydrating element <${elm.tagName.toLowerCase()}>: attribute "${attrName}" has different values, expected "${attrValue}" but found "${elmAttrValue}"`, vnode.owner);
       nodesAreCompatible = false;
     }
@@ -4305,7 +4302,7 @@ function vnodesAndElementHaveCompatibleClass(vnode, elm) {
   let nodesAreCompatible = true;
   let vnodeClassName;
 
-  if (!shared.isUndefined(className) && className !== elm.className) {
+  if (!shared.isUndefined(className) && String(className) !== elm.className) {
     // className is used when class is bound to an expr.
     nodesAreCompatible = false;
     vnodeClassName = className;
@@ -5100,7 +5097,7 @@ function co(text) {
 
 
 function d(value) {
-  return value == null ? '' : value;
+  return value == null ? '' : String(value);
 } // [b]ind function
 
 
@@ -5391,6 +5388,7 @@ 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];
@@ -5403,23 +5401,46 @@ 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);
-      } // 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]; // 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
+      // 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 */
-      ; // Apply the scope token only if the stylesheet itself is scoped, or if we're rendering synthetic shadow.
+      ; // 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().
 
-      const scopeToken = isScopedCss || vm.shadowMode === 1
-      /* Synthetic */
-      && vm.renderMode === 1
+      let useNativeDirPseudoclass;
+
+      if (vm.renderMode === 1
       /* Shadow */
-      ? stylesheetToken : undefined;
-      shared.ArrayPush.call(content, stylesheet(useActualHostSelector, scopeToken));
+      ) {
+        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));
     }
   }
 
@@ -5442,14 +5463,12 @@ 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 getNearestNativeShadowComponent(vm) {
+function getNearestShadowComponent(vm) {
   let owner = vm;
 
   while (!shared.isNull(owner)) {
     if (owner.renderMode === 1
     /* Shadow */
-    && owner.shadowMode === 0
-    /* Native */
     ) {
       return owner;
     }
@@ -5460,6 +5479,20 @@ function getNearestNativeShadowComponent(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,
@@ -5475,7 +5508,7 @@ function createStylesheet(vm, stylesheets) {
     for (let i = 0; i < stylesheets.length; i++) {
       renderer.insertGlobalStylesheet(stylesheets[i]);
     }
-  } else if (renderer.ssr || renderer.isHydrating) {
+  } else if (renderer.ssr || renderer.isHydrating()) {
     // 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.
@@ -7185,4 +7218,4 @@ exports.swapTemplate = swapTemplate;
 exports.track = track;
 exports.unwrap = unwrap;
 exports.wire = wire;
-/* version: 2.5.8 */
+/* version: 2.6.1 */

package/dist/engine-core.js

@@ -1425,10 +1425,10 @@ const {
   isArray
 } = Array;
 const {
+  prototype: ObjectDotPrototype,
   getPrototypeOf,
   create: ObjectCreate,
   defineProperty: ObjectDefineProperty,
-  defineProperties: ObjectDefineProperties,
   isExtensible,
   getOwnPropertyDescriptor,
   getOwnPropertyNames,
@@ -1438,8 +1438,7 @@ const {
 } = Object;
 const {
   push: ArrayPush,
-  concat: ArrayConcat,
-  map: ArrayMap
+  concat: ArrayConcat
 } = Array.prototype;
 const OtS = {}.toString;
 
@@ -1504,7 +1503,9 @@ 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);
+    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 */
 
     if (!isUndefined(originalDescriptor)) {
       const wrappedDesc = this.wrapDescriptor(originalDescriptor);
@@ -1532,11 +1533,17 @@ 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 */
@@ -1649,8 +1656,8 @@ class BaseProxyHandler {
 
 }
 
-const getterMap = new WeakMap();
-const setterMap = new WeakMap();
+const getterMap$1 = new WeakMap();
+const setterMap$1 = new WeakMap();
 const reverseGetterMap = new WeakMap();
 const reverseSetterMap = new WeakMap();
 
@@ -1660,7 +1667,7 @@ class ReactiveProxyHandler extends BaseProxyHandler {
   }
 
   wrapGetter(originalGet) {
-    const wrappedGetter = getterMap.get(originalGet);
+    const wrappedGetter = getterMap$1.get(originalGet);
 
     if (!isUndefined(wrappedGetter)) {
       return wrappedGetter;
@@ -1673,13 +1680,13 @@ class ReactiveProxyHandler extends BaseProxyHandler {
       return handler.wrapValue(originalGet.call(unwrap$1(this)));
     };
 
-    getterMap.set(originalGet, get);
+    getterMap$1.set(originalGet, get);
     reverseGetterMap.set(get, originalGet);
     return get;
   }
 
   wrapSetter(originalSet) {
-    const wrappedSetter = setterMap.get(originalSet);
+    const wrappedSetter = setterMap$1.get(originalSet);
 
     if (!isUndefined(wrappedSetter)) {
       return wrappedSetter;
@@ -1690,7 +1697,7 @@ class ReactiveProxyHandler extends BaseProxyHandler {
       originalSet.call(unwrap$1(this), unwrap$1(v));
     };
 
-    setterMap.set(originalSet, set);
+    setterMap$1.set(originalSet, set);
     reverseSetterMap.set(set, originalSet);
     return set;
   }
@@ -1731,7 +1738,7 @@ class ReactiveProxyHandler extends BaseProxyHandler {
       return unwrap$1(redGet.call(handler.wrapValue(this)));
     };
 
-    getterMap.set(get, redGet);
+    getterMap$1.set(get, redGet);
     reverseGetterMap.set(redGet, get);
     return get;
   }
@@ -1750,7 +1757,7 @@ class ReactiveProxyHandler extends BaseProxyHandler {
       redSet.call(handler.wrapValue(this), handler.wrapValue(v));
     };
 
-    setterMap.set(set, redSet);
+    setterMap$1.set(set, redSet);
     reverseSetterMap.set(redSet, set);
     return set;
   }
@@ -1791,6 +1798,7 @@ 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.`);
     }
@@ -1804,6 +1812,11 @@ 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;
@@ -1845,8 +1858,8 @@ class ReactiveProxyHandler extends BaseProxyHandler {
 
 }
 
-const getterMap$1 = new WeakMap();
-const setterMap$1 = new WeakMap();
+const getterMap = new WeakMap();
+const setterMap = new WeakMap();
 
 class ReadOnlyHandler extends BaseProxyHandler {
   wrapValue(value) {
@@ -1854,7 +1867,7 @@ class ReadOnlyHandler extends BaseProxyHandler {
   }
 
   wrapGetter(originalGet) {
-    const wrappedGetter = getterMap$1.get(originalGet);
+    const wrappedGetter = getterMap.get(originalGet);
 
     if (!isUndefined(wrappedGetter)) {
       return wrappedGetter;
@@ -1867,12 +1880,12 @@ class ReadOnlyHandler extends BaseProxyHandler {
       return handler.wrapValue(originalGet.call(unwrap$1(this)));
     };
 
-    getterMap$1.set(originalGet, get);
+    getterMap.set(originalGet, get);
     return get;
   }
 
   wrapSetter(originalSet) {
-    const wrappedSetter = setterMap$1.get(originalSet);
+    const wrappedSetter = setterMap.get(originalSet);
 
     if (!isUndefined(wrappedSetter)) {
       return wrappedSetter;
@@ -1881,6 +1894,7 @@ class ReadOnlyHandler extends BaseProxyHandler {
     const handler = this;
 
     const set = function (v) {
+      /* istanbul ignore else */
       if (process.env.NODE_ENV !== 'production') {
         const {
           originalTarget
@@ -1889,33 +1903,41 @@ class ReadOnlyHandler extends BaseProxyHandler {
       }
     };
 
-    setterMap$1.set(originalSet, set);
+    setterMap.set(originalSet, set);
     return set;
   }
 
   set(shadowTarget, key, value) {
+    /* istanbul ignore else */
     if (process.env.NODE_ENV !== 'production') {
       const {
         originalTarget
       } = this;
-      throw new Error(`Invalid mutation: Cannot set "${key.toString()}" on "${originalTarget}". "${originalTarget}" is read-only.`);
+      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);
     }
+    /* 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
@@ -1925,23 +1947,29 @@ 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;
   }
@@ -1999,6 +2027,8 @@ 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.
@@ -2023,6 +2053,7 @@ function getGlobal() {
 }
 
 function init() {
+  /* istanbul ignore if */
   if (process.env.NODE_ENV === 'production') {
     // this method should never leak to prod
     throw new ReferenceError();
@@ -2037,13 +2068,13 @@ function init() {
   ArrayPush.call(devtoolsFormatters, formatter);
   global.devtoolsFormatters = devtoolsFormatters;
 }
+/* istanbul ignore else */
+
 
 if (process.env.NODE_ENV !== 'production') {
   init();
 }
 
-const ObjectDotPrototype = Object.prototype;
-
 function defaultValueIsObservable(value) {
   // intentionally checking for null
   if (value === null) {
@@ -2071,106 +2102,85 @@ const defaultValueMutated = (obj, key) => {
   /* do nothing */
 };
 
-const defaultValueDistortion = value => value;
-
 function createShadowTarget(value) {
   return isArray(value) ? [] : {};
 }
 
-class ReactiveMembrane {
-  constructor(options) {
-    this.valueDistortion = defaultValueDistortion;
-    this.valueMutated = defaultValueMutated;
-    this.valueObserved = defaultValueObserved;
-    this.valueIsObservable = defaultValueIsObservable;
-    this.objectGraph = new WeakMap();
-
-    if (!isUndefined(options)) {
-      const {
-        valueDistortion,
-        valueMutated,
-        valueObserved,
-        valueIsObservable,
-        tagPropertyKey
-      } = options;
-      this.valueDistortion = isFunction(valueDistortion) ? valueDistortion : defaultValueDistortion;
-      this.valueMutated = isFunction(valueMutated) ? valueMutated : defaultValueMutated;
-      this.valueObserved = isFunction(valueObserved) ? valueObserved : defaultValueObserved;
-      this.valueIsObservable = isFunction(valueIsObservable) ? valueIsObservable : defaultValueIsObservable;
-      this.tagPropertyKey = tagPropertyKey;
-    }
+class ObservableMembrane {
+  constructor(options = {}) {
+    this.readOnlyObjectGraph = new WeakMap();
+    this.reactiveObjectGraph = new WeakMap();
+    const {
+      valueMutated,
+      valueObserved,
+      valueIsObservable,
+      tagPropertyKey
+    } = options;
+    this.valueMutated = isFunction(valueMutated) ? valueMutated : defaultValueMutated;
+    this.valueObserved = isFunction(valueObserved) ? valueObserved : defaultValueObserved;
+    this.valueIsObservable = isFunction(valueIsObservable) ? valueIsObservable : defaultValueIsObservable;
+    this.tagPropertyKey = tagPropertyKey;
   }
 
   getProxy(value) {
     const unwrappedValue = unwrap$1(value);
-    const distorted = this.valueDistortion(unwrappedValue);
 
-    if (this.valueIsObservable(distorted)) {
-      const o = this.getReactiveState(unwrappedValue, distorted); // when trying to extract the writable version of a readonly
-      // we return the readonly.
+    if (this.valueIsObservable(unwrappedValue)) {
+      // When trying to extract the writable version of a readonly we return the readonly.
+      if (this.readOnlyObjectGraph.get(unwrappedValue) === value) {
+        return value;
+      }
 
-      return o.readOnly === value ? value : o.reactive;
+      return this.getReactiveHandler(unwrappedValue);
     }
 
-    return distorted;
+    return unwrappedValue;
   }
 
   getReadOnlyProxy(value) {
     value = unwrap$1(value);
-    const distorted = this.valueDistortion(value);
 
-    if (this.valueIsObservable(distorted)) {
-      return this.getReactiveState(value, distorted).readOnly;
+    if (this.valueIsObservable(value)) {
+      return this.getReadOnlyHandler(value);
     }
 
-    return distorted;
+    return value;
   }
 
   unwrapProxy(p) {
     return unwrap$1(p);
   }
 
-  getReactiveState(value, distortedValue) {
-    const {
-      objectGraph
-    } = this;
-    let reactiveState = objectGraph.get(distortedValue);
+  getReactiveHandler(value) {
+    let proxy = this.reactiveObjectGraph.get(value);
 
-    if (reactiveState) {
-      return reactiveState;
+    if (isUndefined(proxy)) {
+      // caching the proxy after the first time it is accessed
+      const handler = new ReactiveProxyHandler(this, value);
+      proxy = new Proxy(createShadowTarget(value), handler);
+      registerProxy(proxy, value);
+      this.reactiveObjectGraph.set(value, proxy);
     }
 
-    const membrane = this;
-    reactiveState = {
-      get reactive() {
-        const reactiveHandler = new ReactiveProxyHandler(membrane, distortedValue); // caching the reactive proxy after the first time it is accessed
-
-        const proxy = new Proxy(createShadowTarget(distortedValue), reactiveHandler);
-        registerProxy(proxy, value);
-        ObjectDefineProperty(this, 'reactive', {
-          value: proxy
-        });
-        return proxy;
-      },
+    return proxy;
+  }
 
-      get readOnly() {
-        const readOnlyHandler = new ReadOnlyHandler(membrane, distortedValue); // caching the readOnly proxy after the first time it is accessed
+  getReadOnlyHandler(value) {
+    let proxy = this.readOnlyObjectGraph.get(value);
 
-        const proxy = new Proxy(createShadowTarget(distortedValue), readOnlyHandler);
-        registerProxy(proxy, value);
-        ObjectDefineProperty(this, 'readOnly', {
-          value: proxy
-        });
-        return proxy;
-      }
+    if (isUndefined(proxy)) {
+      // caching the proxy after the first time it is accessed
+      const handler = new ReadOnlyHandler(this, value);
+      proxy = new Proxy(createShadowTarget(value), handler);
+      registerProxy(proxy, value);
+      this.readOnlyObjectGraph.set(value, proxy);
+    }
 
-    };
-    objectGraph.set(distortedValue, reactiveState);
-    return reactiveState;
+    return proxy;
   }
 
 }
-/** version: 1.0.0 */
+/** version: 2.0.0 */
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -2179,15 +2189,9 @@ class ReactiveMembrane {
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
 const lockerLivePropertyKey = Symbol.for('@@lockerLiveValue');
-
-function valueDistortion(value) {
-  return value;
-}
-
-const reactiveMembrane = new ReactiveMembrane({
+const reactiveMembrane = new ObservableMembrane({
   valueObserved,
   valueMutated,
-  valueDistortion,
   tagPropertyKey: lockerLivePropertyKey
 });
 /**
@@ -2196,16 +2200,9 @@ const reactiveMembrane = new ReactiveMembrane({
  * change or being removed.
  */
 
-const unwrap = function (value) {
-  const unwrapped = reactiveMembrane.unwrapProxy(value);
-
-  if (unwrapped !== value) {
-    // if value is a proxy, unwrap to access original value and apply distortion
-    return valueDistortion(unwrapped);
-  }
-
-  return value;
-};
+function unwrap(value) {
+  return reactiveMembrane.unwrapProxy(value);
+}
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -4280,7 +4277,7 @@ function vnodesAndElementHaveCompatibleAttrs(vnode, elm) {
   for (const [attrName, attrValue] of Object.entries(attrs)) {
     const elmAttrValue = renderer.getAttribute(elm, attrName);
 
-    if (attrValue !== elmAttrValue) {
+    if (String(attrValue) !== elmAttrValue) {
       logError(`Mismatch hydrating element <${elm.tagName.toLowerCase()}>: attribute "${attrName}" has different values, expected "${attrValue}" but found "${elmAttrValue}"`, vnode.owner);
       nodesAreCompatible = false;
     }
@@ -4302,7 +4299,7 @@ function vnodesAndElementHaveCompatibleClass(vnode, elm) {
   let nodesAreCompatible = true;
   let vnodeClassName;
 
-  if (!isUndefined$1(className) && className !== elm.className) {
+  if (!isUndefined$1(className) && String(className) !== elm.className) {
     // className is used when class is bound to an expr.
     nodesAreCompatible = false;
     vnodeClassName = className;
@@ -5097,7 +5094,7 @@ function co(text) {
 
 
 function d(value) {
-  return value == null ? '' : value;
+  return value == null ? '' : String(value);
 } // [b]ind function
 
 
@@ -5388,6 +5385,7 @@ 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];
@@ -5400,23 +5398,46 @@ 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);
-      } // 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]; // 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
+      // 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 */
-      ; // Apply the scope token only if the stylesheet itself is scoped, or if we're rendering synthetic shadow.
+      ; // 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().
 
-      const scopeToken = isScopedCss || vm.shadowMode === 1
-      /* Synthetic */
-      && vm.renderMode === 1
+      let useNativeDirPseudoclass;
+
+      if (vm.renderMode === 1
       /* Shadow */
-      ? stylesheetToken : undefined;
-      ArrayPush$1.call(content, stylesheet(useActualHostSelector, scopeToken));
+      ) {
+        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));
     }
   }
 
@@ -5439,14 +5460,12 @@ 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 getNearestNativeShadowComponent(vm) {
+function getNearestShadowComponent(vm) {
   let owner = vm;
 
   while (!isNull(owner)) {
     if (owner.renderMode === 1
     /* Shadow */
-    && owner.shadowMode === 0
-    /* Native */
     ) {
       return owner;
     }
@@ -5457,6 +5476,20 @@ function getNearestNativeShadowComponent(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,
@@ -5472,7 +5505,7 @@ function createStylesheet(vm, stylesheets) {
     for (let i = 0; i < stylesheets.length; i++) {
       renderer.insertGlobalStylesheet(stylesheets[i]);
     }
-  } else if (renderer.ssr || renderer.isHydrating) {
+  } else if (renderer.ssr || renderer.isHydrating()) {
     // 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.
@@ -7149,4 +7182,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.8 */
+/* version: 2.6.1 */

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@lwc/engine-core",
-    "version": "2.5.8",
+    "version": "2.6.1",
     "description": "Core LWC engine APIs.",
     "homepage": "https://lwc.dev/",
     "repository": {
@@ -24,14 +24,14 @@
         "types/"
     ],
     "dependencies": {
-        "@lwc/features": "2.5.8",
-        "@lwc/shared": "2.5.8"
+        "@lwc/features": "2.6.1",
+        "@lwc/shared": "2.6.1"
     },
     "devDependencies": {
-        "observable-membrane": "1.0.1"
+        "observable-membrane": "2.0.0"
     },
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "223513a6a4e070b3243db0a345024a184f82dc08"
+    "gitHead": "65ae5d96106495314904cade2522cceef2067229"
 }

package/types/framework/api.d.ts

@@ -12,7 +12,7 @@ declare function i(iterable: Iterable<any>, factory: (value: any, index: number,
 declare function f(items: any[]): any[];
 declare function t(text: string): VText;
 declare function co(text: string): VComment;
-declare function d(value: any): string | any;
+declare function d(value: any): string;
 declare function b(fn: EventListener): EventListener;
 declare function k(compilerKey: number, obj: any): string | void;
 declare function gid(id: string | undefined | null): string | null | undefined;

package/types/framework/membrane.d.ts

@@ -1,4 +1,4 @@
-import ObservableMembrane from 'observable-membrane';
+import { ObservableMembrane } from 'observable-membrane';
 export declare const lockerLivePropertyKey: unique symbol;
 export declare const reactiveMembrane: ObservableMembrane;
 /**
@@ -6,4 +6,4 @@ export declare const reactiveMembrane: ObservableMembrane;
  * works for observable membrane objects. This API is subject to
  * change or being removed.
  */
-export declare const unwrap: (value: any) => any;
+export declare function unwrap(value: any): any;

package/types/framework/renderer.d.ts

@@ -2,7 +2,7 @@ export declare type HostNode = any;
 export declare type HostElement = any;
 export interface Renderer<N = HostNode, E = HostElement> {
     ssr: boolean;
-    readonly isHydrating: boolean;
+    isHydrating(): boolean;
     isNativeShadowDefined: boolean;
     isSyntheticShadowDefined: boolean;
     insert(node: N, parent: E, anchor: N | null): 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 = (useActualHostSelector: boolean, stylesheetToken: string | undefined) => string;
+export declare type StylesheetFactory = (stylesheetToken: string | undefined, useActualHostSelector: boolean, useNativeDirPseudoclass: boolean) => 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