lwc 2.5.8 → 2.5.9

package/dist/engine-dom/esm/es2017/engine-dom.js

@@ -69,7 +69,7 @@ const {
   find: ArrayFind,
   indexOf: ArrayIndexOf,
   join: ArrayJoin,
-  map: ArrayMap$1,
+  map: ArrayMap,
   push: ArrayPush$1,
   reduce: ArrayReduce,
   reverse: ArrayReverse,
@@ -136,7 +136,7 @@ function toString$1(obj) {
     // Array.prototype.toString directly will cause an error Iterate through
     // all the items and handle individually.
     if (isArray$1(obj)) {
-      return ArrayJoin.call(ArrayMap$1.call(obj, toString$1), ',');
+      return ArrayJoin.call(ArrayMap.call(obj, toString$1), ',');
     }
 
     return obj.toString();
@@ -299,7 +299,7 @@ function htmlPropertyToAttribute(propName) {
   CACHED_PROPERTY_ATTRIBUTE_MAPPING.set(propName, attributeName);
   return attributeName;
 }
-/** version: 2.5.8 */
+/** version: 2.5.9 */
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -479,7 +479,7 @@ function setFeatureFlagForTest(name, value) {
     setFeatureFlag(name, value);
   }
 }
-/** version: 2.5.8 */
+/** version: 2.5.9 */
 
 /* proxy-compat-disable */
 
@@ -1929,7 +1929,6 @@ const {
   getPrototypeOf,
   create: ObjectCreate,
   defineProperty: ObjectDefineProperty,
-  defineProperties: ObjectDefineProperties,
   isExtensible,
   getOwnPropertyDescriptor,
   getOwnPropertyNames,
@@ -1939,8 +1938,7 @@ const {
 } = Object;
 const {
   push: ArrayPush,
-  concat: ArrayConcat,
-  map: ArrayMap
+  concat: ArrayConcat
 } = Array.prototype;
 const OtS = {}.toString;
 
@@ -2005,7 +2003,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);
@@ -2033,11 +2033,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 */
@@ -2150,8 +2156,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();
 
@@ -2161,7 +2167,7 @@ class ReactiveProxyHandler extends BaseProxyHandler {
   }
 
   wrapGetter(originalGet) {
-    const wrappedGetter = getterMap.get(originalGet);
+    const wrappedGetter = getterMap$1.get(originalGet);
 
     if (!isUndefined(wrappedGetter)) {
       return wrappedGetter;
@@ -2174,13 +2180,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;
@@ -2191,7 +2197,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;
   }
@@ -2232,7 +2238,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;
   }
@@ -2251,7 +2257,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;
   }
@@ -2292,6 +2298,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.`);
     }
@@ -2305,6 +2312,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;
@@ -2346,8 +2358,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) {
@@ -2355,7 +2367,7 @@ class ReadOnlyHandler extends BaseProxyHandler {
   }
 
   wrapGetter(originalGet) {
-    const wrappedGetter = getterMap$1.get(originalGet);
+    const wrappedGetter = getterMap.get(originalGet);
 
     if (!isUndefined(wrappedGetter)) {
       return wrappedGetter;
@@ -2368,12 +2380,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;
@@ -2382,6 +2394,7 @@ class ReadOnlyHandler extends BaseProxyHandler {
     const handler = this;
 
     const set = function (v) {
+      /* istanbul ignore else */
       if (process.env.NODE_ENV !== 'production') {
         const {
           originalTarget
@@ -2390,33 +2403,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
@@ -2426,23 +2447,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;
   }
@@ -2500,6 +2527,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.
@@ -2524,6 +2553,7 @@ function getGlobal() {
 }
 
 function init() {
+  /* istanbul ignore if */
   if (process.env.NODE_ENV === 'production') {
     // this method should never leak to prod
     throw new ReferenceError();
@@ -2538,6 +2568,8 @@ function init() {
   ArrayPush.call(devtoolsFormatters, formatter);
   global.devtoolsFormatters = devtoolsFormatters;
 }
+/* istanbul ignore else */
+
 
 if (process.env.NODE_ENV !== 'production') {
   init();
@@ -2584,7 +2616,8 @@ class ReactiveMembrane {
     this.valueMutated = defaultValueMutated;
     this.valueObserved = defaultValueObserved;
     this.valueIsObservable = defaultValueIsObservable;
-    this.objectGraph = new WeakMap();
+    this.readOnlyObjectGraph = new WeakMap();
+    this.reactiveObjectGraph = new WeakMap();
 
     if (!isUndefined(options)) {
       const {
@@ -2607,10 +2640,13 @@ class ReactiveMembrane {
     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.readOnlyObjectGraph.get(distorted) === value) {
+        // when trying to extract the writable version of a readonly
+        // we return the readonly.
+        return value;
+      }
 
-      return o.readOnly === value ? value : o.reactive;
+      return this.getReactiveHandler(unwrappedValue, distorted);
     }
 
     return distorted;
@@ -2621,7 +2657,7 @@ class ReactiveMembrane {
     const distorted = this.valueDistortion(value);
 
     if (this.valueIsObservable(distorted)) {
-      return this.getReactiveState(value, distorted).readOnly;
+      return this.getReadOnlyHandler(value, distorted);
     }
 
     return distorted;
@@ -2631,47 +2667,36 @@ class ReactiveMembrane {
     return unwrap$1(p);
   }
 
-  getReactiveState(value, distortedValue) {
-    const {
-      objectGraph
-    } = this;
-    let reactiveState = objectGraph.get(distortedValue);
+  getReactiveHandler(value, distortedValue) {
+    let proxy = this.reactiveObjectGraph.get(distortedValue);
 
-    if (reactiveState) {
-      return reactiveState;
+    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);
     }
 
-    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, distortedValue) {
+    let proxy = this.readOnlyObjectGraph.get(distortedValue);
 
-        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, distortedValue);
+      proxy = new Proxy(createShadowTarget(distortedValue), handler);
+      registerProxy(proxy, value);
+      this.readOnlyObjectGraph.set(distortedValue, proxy);
+    }
 
-    };
-    objectGraph.set(distortedValue, reactiveState);
-    return reactiveState;
+    return proxy;
   }
 
 }
-/** version: 1.0.0 */
+/** version: 1.1.5 */
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -4823,7 +4848,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;
     }
@@ -4845,7 +4870,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;
@@ -5646,7 +5671,7 @@ function co(text) {
 
 
 function d(value) {
-  return value == null ? '' : value;
+  return value == null ? '' : String(value);
 } // [b]ind function
 
 
@@ -5937,6 +5962,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];
@@ -5949,23 +5975,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));
     }
   }
 
@@ -5989,14 +6038,12 @@ function getStylesheetsContent(vm, template) {
 // 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;
     }
@@ -6007,6 +6054,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,
@@ -6022,7 +6083,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.
@@ -7747,7 +7808,7 @@ function setHooks(hooks) {
   hooksAreSet = true;
   setSanitizeHtmlContentHook(hooks.sanitizeHtmlContent);
 }
-/* version: 2.5.8 */
+/* version: 2.5.9 */
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -7900,7 +7961,7 @@ function setIsHydrating(v) {
 const renderer = {
   ssr: false,
 
-  get isHydrating() {
+  isHydrating() {
     return isHydrating;
   },
 
@@ -8403,6 +8464,6 @@ defineProperty(LightningElement, 'CustomElementConstructor', {
 });
 freeze(LightningElement);
 seal(LightningElement.prototype);
-/* version: 2.5.8 */
+/* version: 2.5.9 */
 
 export { LightningElement, profilerControl as __unstable__ProfilerControl, api$1 as api, deprecatedBuildCustomElementConstructor as buildCustomElementConstructor, createContextProvider, createElement, getComponentConstructor, getComponentDef, hydrateComponent, isComponentConstructor, isNodeFromTemplate, readonly, register, registerComponent, registerDecorators, registerTemplate, sanitizeAttribute, setFeatureFlag, setFeatureFlagForTest, setHooks, swapComponent, swapStyle, swapTemplate, track, unwrap, wire };