@lwc/engine-core 2.5.10 → 2.6.1

package/dist/engine-core.cjs.js

@@ -1428,6 +1428,7 @@ const {
   isArray
 } = Array;
 const {
+  prototype: ObjectDotPrototype,
   getPrototypeOf,
   create: ObjectCreate,
   defineProperty: ObjectDefineProperty,
@@ -2077,8 +2078,6 @@ if (process.env.NODE_ENV !== 'production') {
   init();
 }
 
-const ObjectDotPrototype = Object.prototype;
-
 function defaultValueIsObservable(value) {
   // intentionally checking for null
   if (value === null) {
@@ -2106,99 +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;
+class ObservableMembrane {
+  constructor(options = {}) {
     this.readOnlyObjectGraph = new WeakMap();
     this.reactiveObjectGraph = 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;
-    }
+    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)) {
-      if (this.readOnlyObjectGraph.get(distorted) === value) {
-        // 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 this.getReactiveHandler(unwrappedValue, distorted);
+      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.getReadOnlyHandler(value, distorted);
+    if (this.valueIsObservable(value)) {
+      return this.getReadOnlyHandler(value);
     }
 
-    return distorted;
+    return value;
   }
 
   unwrapProxy(p) {
     return unwrap$1(p);
   }
 
-  getReactiveHandler(value, distortedValue) {
-    let proxy = this.reactiveObjectGraph.get(distortedValue);
+  getReactiveHandler(value) {
+    let proxy = this.reactiveObjectGraph.get(value);
 
     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);
+      const handler = new ReactiveProxyHandler(this, value);
+      proxy = new Proxy(createShadowTarget(value), handler);
       registerProxy(proxy, value);
-      this.reactiveObjectGraph.set(distortedValue, proxy);
+      this.reactiveObjectGraph.set(value, proxy);
     }
 
     return proxy;
   }
 
-  getReadOnlyHandler(value, distortedValue) {
-    let proxy = this.readOnlyObjectGraph.get(distortedValue);
+  getReadOnlyHandler(value) {
+    let proxy = this.readOnlyObjectGraph.get(value);
 
     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);
+      const handler = new ReadOnlyHandler(this, value);
+      proxy = new Proxy(createShadowTarget(value), handler);
       registerProxy(proxy, value);
-      this.readOnlyObjectGraph.set(distortedValue, proxy);
+      this.readOnlyObjectGraph.set(value, proxy);
     }
 
     return proxy;
   }
 
 }
-/** version: 1.1.5 */
+/** version: 2.0.0 */
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -2207,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
 });
 /**
@@ -2224,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.
@@ -5416,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];
@@ -5428,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));
     }
   }
 
@@ -5467,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;
     }
@@ -5485,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,
@@ -7210,4 +7218,4 @@ exports.swapTemplate = swapTemplate;
 exports.track = track;
 exports.unwrap = unwrap;
 exports.wire = wire;
-/* version: 2.5.10 */
+/* version: 2.6.1 */

package/dist/engine-core.js

@@ -1425,6 +1425,7 @@ const {
   isArray
 } = Array;
 const {
+  prototype: ObjectDotPrototype,
   getPrototypeOf,
   create: ObjectCreate,
   defineProperty: ObjectDefineProperty,
@@ -2074,8 +2075,6 @@ if (process.env.NODE_ENV !== 'production') {
   init();
 }
 
-const ObjectDotPrototype = Object.prototype;
-
 function defaultValueIsObservable(value) {
   // intentionally checking for null
   if (value === null) {
@@ -2103,99 +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;
+class ObservableMembrane {
+  constructor(options = {}) {
     this.readOnlyObjectGraph = new WeakMap();
     this.reactiveObjectGraph = 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;
-    }
+    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)) {
-      if (this.readOnlyObjectGraph.get(distorted) === value) {
-        // 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 this.getReactiveHandler(unwrappedValue, distorted);
+      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.getReadOnlyHandler(value, distorted);
+    if (this.valueIsObservable(value)) {
+      return this.getReadOnlyHandler(value);
     }
 
-    return distorted;
+    return value;
   }
 
   unwrapProxy(p) {
     return unwrap$1(p);
   }
 
-  getReactiveHandler(value, distortedValue) {
-    let proxy = this.reactiveObjectGraph.get(distortedValue);
+  getReactiveHandler(value) {
+    let proxy = this.reactiveObjectGraph.get(value);
 
     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);
+      const handler = new ReactiveProxyHandler(this, value);
+      proxy = new Proxy(createShadowTarget(value), handler);
       registerProxy(proxy, value);
-      this.reactiveObjectGraph.set(distortedValue, proxy);
+      this.reactiveObjectGraph.set(value, proxy);
     }
 
     return proxy;
   }
 
-  getReadOnlyHandler(value, distortedValue) {
-    let proxy = this.readOnlyObjectGraph.get(distortedValue);
+  getReadOnlyHandler(value) {
+    let proxy = this.readOnlyObjectGraph.get(value);
 
     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);
+      const handler = new ReadOnlyHandler(this, value);
+      proxy = new Proxy(createShadowTarget(value), handler);
       registerProxy(proxy, value);
-      this.readOnlyObjectGraph.set(distortedValue, proxy);
+      this.readOnlyObjectGraph.set(value, proxy);
     }
 
     return proxy;
   }
 
 }
-/** version: 1.1.5 */
+/** version: 2.0.0 */
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -2204,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
 });
 /**
@@ -2221,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.
@@ -5413,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];
@@ -5425,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));
     }
   }
 
@@ -5464,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;
     }
@@ -5482,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,
@@ -7174,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.10 */
+/* version: 2.6.1 */

package/package.json

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

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/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