lwc 2.35.1 → 2.36.0

package/dist/engine-dom/umd/es2017/engine-dom_debug.js

@@ -35,10 +35,10 @@
 
   var assert = /*#__PURE__*/Object.freeze({
       __proto__: null,
+      fail: fail,
       invariant: invariant,
-      isTrue: isTrue$1,
       isFalse: isFalse$1,
-      fail: fail
+      isTrue: isTrue$1
   });
 
   /*
@@ -324,7 +324,7 @@
       CACHED_ATTRIBUTE_PROPERTY_MAPPING.set(attrName, propertyName);
       return propertyName;
   }
-  /** version: 2.35.1 */
+  /** version: 2.36.0 */
 
   /**
    * Copyright (C) 2018 salesforce.com, inc.
@@ -392,7 +392,7 @@
    */
   function setFeatureFlagForTest(name, value) {
   }
-  /** version: 2.35.1 */
+  /** version: 2.36.0 */
 
   /**
    * Copyright (C) 2018 salesforce.com, inc.
@@ -456,7 +456,7 @@
           }
       }
   }
-  /** version: 2.35.1 */
+  /** version: 2.36.0 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -476,7 +476,6 @@
    * SPDX-License-Identifier: MIT
    * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
    */
-  /** Callbacks to invoke when reporting is enabled **/
   const onReportingEnabledCallbacks = [];
   /** The currently assigned reporting dispatcher. */
   let currentDispatcher$1 = noop;
@@ -534,11 +533,11 @@
   /**
    * Report to the current dispatcher, if there is one.
    * @param reportingEventId
-   * @param vm
+   * @param payload - data to report
    */
-  function report(reportingEventId, vm) {
+  function report(reportingEventId, payload) {
       if (enabled$1) {
-          currentDispatcher$1(reportingEventId, vm.tagName, vm.idx);
+          currentDispatcher$1(reportingEventId, payload);
       }
   }
 
@@ -784,7 +783,7 @@
   // Make a shallow copy of an object but omit the given key
   function cloneAndOmitKey(object, keyToOmit) {
       const result = {};
-      for (const key of Object.keys(object)) {
+      for (const key of keys(object)) {
           if (key !== keyToOmit) {
               result[key] = object[key];
           }
@@ -794,7 +793,7 @@
   function flattenStylesheets(stylesheets) {
       const list = [];
       for (const stylesheet of stylesheets) {
-          if (!Array.isArray(stylesheet)) {
+          if (!isArray$1(stylesheet)) {
               list.push(stylesheet);
           }
           else {
@@ -3759,7 +3758,12 @@
       } else if (isVScopedSlotFragment(vnode)) {
         slotName = vnode.slotName;
       }
-      const vnodes = cmpSlotsMapping[slotName] = cmpSlotsMapping[slotName] || [];
+      // Can't use toString here because Symbol(1).toString() is 'Symbol(1)'
+      // but elm.setAttribute('slot', Symbol(1)) is an error.
+      // the following line also throws same error for symbols
+      // Similar for Object.create(null)
+      const normalizedSlotName = '' + slotName;
+      const vnodes = cmpSlotsMapping[normalizedSlotName] = cmpSlotsMapping[normalizedSlotName] || [];
       ArrayPush$1.call(vnodes, vnode);
     }
     vm.cmpSlots = {
@@ -5192,7 +5196,7 @@
   function isSyntheticShadowRootInstance(rootNode) {
       return rootNode !== document && isTrue(rootNode.synthetic);
   }
-  function reportViolation(source, target, attrName) {
+  function reportViolation$1(source, target, attrName) {
       // The vm is either for the source, the target, or both. Either one or both must be using synthetic
       // shadow for a violation to be detected.
       let vm = getAssociatedVMIfPresent(source.getRootNode().host);
@@ -5203,7 +5207,10 @@
           // vm should never be undefined here, but just to be safe, bail out and don't report
           return;
       }
-      report(0 /* ReportingEventId.CrossRootAriaInSyntheticShadow */, vm);
+      report(0 /* ReportingEventId.CrossRootAriaInSyntheticShadow */, {
+          tagName: vm.tagName,
+          attributeName: attrName,
+      });
   }
   function parseIdRefAttributeValue(attrValue) {
       // split on whitespace and skip empty strings after splitting
@@ -5229,7 +5236,7 @@
                   const sourceElement = sourceElements[i];
                   const sourceRoot = sourceElement.getRootNode();
                   if (sourceRoot !== root) {
-                      reportViolation(sourceElement, elm);
+                      reportViolation$1(sourceElement, elm, idRefAttrName);
                       break;
                   }
               }
@@ -5244,7 +5251,7 @@
                   const targetRoot = target.getRootNode();
                   if (targetRoot !== root) {
                       // target element's shadow root is not the same as ours
-                      reportViolation(elm, target);
+                      reportViolation$1(elm, target, attrName);
                   }
               }
           }
@@ -5253,7 +5260,7 @@
   let enabled = false;
   // We want to avoid patching globals whenever possible, so this should be tree-shaken out in prod-mode and if
   // reporting is not enabled. It should also only run once
-  function enableDetection() {
+  function enableDetection$1() {
       if (enabled) {
           return; // don't double-apply the patches
       }
@@ -5306,10 +5313,94 @@
       // Always run detection in dev mode, so we can at least print to the console
       {
           // In prod mode, only enable detection if reporting is enabled
-          onReportingEnabled(enableDetection);
+          onReportingEnabled(enableDetection$1);
       }
   }
 
+  /*
+   * Copyright (c) 2018, salesforce.com, inc.
+   * All rights reserved.
+   * SPDX-License-Identifier: MIT
+   * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
+   */
+  //
+  // The goal of this code is to detect usages of non-standard reflected ARIA properties. These are caused by
+  // legacy non-standard Element.prototype extensions added by the @lwc/aria-reflection package.
+  //
+  // See the README for @lwc/aria-reflection
+  const NON_STANDARD_ARIA_PROPS = ['ariaActiveDescendant', 'ariaControls', 'ariaDescribedBy', 'ariaDetails', 'ariaErrorMessage', 'ariaFlowTo', 'ariaLabelledBy', 'ariaOwns'];
+  function isLightningElement(elm) {
+    // The former case is for `this.prop` (inside component) and the latter is for `element.prop` (outside component).
+    // In both cases, we apply the non-standard prop even when the global polyfill is disabled, so this is kosher.
+    return elm instanceof LightningElement || elm instanceof BaseBridgeElement;
+  }
+  function findVM(elm) {
+    // If it's a shadow DOM component, then it has a host
+    const {
+      host
+    } = elm.getRootNode();
+    const vm = isUndefined$1(host) ? undefined : getAssociatedVMIfPresent(host);
+    if (!isUndefined$1(vm)) {
+      return vm;
+    }
+    // Else it might be a light DOM component. Walk up the tree trying to find the owner
+    let parentElement = elm;
+    while (!isNull(parentElement = parentElement.parentElement)) {
+      if (isLightningElement(parentElement)) {
+        const vm = getAssociatedVMIfPresent(parentElement);
+        if (!isUndefined$1(vm)) {
+          return vm;
+        }
+      }
+    }
+    // If we return undefined, it's because the element was rendered wholly outside a LightningElement
+  }
+
+  function checkAndReportViolation(elm, prop) {
+    if (!isLightningElement(elm)) {
+      const vm = findVM(elm);
+      report(2 /* ReportingEventId.NonStandardAriaReflection */, {
+        tagName: vm === null || vm === void 0 ? void 0 : vm.tagName,
+        propertyName: prop
+      });
+    }
+  }
+  function enableDetection() {
+    const {
+      prototype
+    } = Element;
+    for (const prop of NON_STANDARD_ARIA_PROPS) {
+      const descriptor = getOwnPropertyDescriptor$1(prototype, prop);
+      // @ts-ignore
+      const {
+        get,
+        set
+      } = descriptor;
+      defineProperty(prototype, prop, {
+        get() {
+          checkAndReportViolation(this, prop);
+          return get.call(this);
+        },
+        set(val) {
+          checkAndReportViolation(this, prop);
+          return set.call(this, val);
+        },
+        configurable: true,
+        enumerable: true
+      });
+    }
+  }
+  // No point in running this code if we're not in a browser, or if the global polyfill is not loaded
+  {
+    if (!lwcRuntimeFlags.DISABLE_ARIA_REFLECTION_POLYFILL) {
+      // Always run detection in dev mode, so we can at least print to the console
+      {
+        // In prod mode, only enable detection if reporting is enabled
+        onReportingEnabled(enableDetection);
+      }
+    }
+  }
+
   /*
    * Copyright (c) 2018, salesforce.com, inc.
    * All rights reserved.
@@ -5714,6 +5805,97 @@
       hooksAreSet = true;
       setSanitizeHtmlContentHook(hooks.sanitizeHtmlContent);
   }
+
+  /*
+   * Copyright (c) 2018, salesforce.com, inc.
+   * All rights reserved.
+   * SPDX-License-Identifier: MIT
+   * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
+   */
+  // See @lwc/engine-core/src/framework/template.ts
+  const TEMPLATE_PROPS = ['slots', 'stylesheetToken', 'stylesheets', 'renderMode'];
+  // Expandos that may be placed on a stylesheet factory function, and which are meaningful to LWC at runtime
+  const STYLESHEET_PROPS = [
+  // SEE `KEY__SCOPED_CSS` in @lwc/style-compiler
+  '$scoped$'];
+  // Via https://www.npmjs.com/package/object-observer
+  const ARRAY_MUTATION_METHODS = ['pop', 'push', 'shift', 'unshift', 'reverse', 'sort', 'fill', 'splice', 'copyWithin'];
+  let mutationTrackingDisabled = false;
+  function getOriginalArrayMethod(prop) {
+    switch (prop) {
+      case 'pop':
+        return ArrayPop;
+      case 'push':
+        return ArrayPush$1;
+      case 'shift':
+        return ArrayShift;
+      case 'unshift':
+        return ArrayUnshift;
+      case 'reverse':
+        return ArrayReverse;
+      case 'sort':
+        return ArraySort;
+      case 'fill':
+        return ArrayFill;
+      case 'splice':
+        return ArraySplice;
+      case 'copyWithin':
+        return ArrayCopyWithin;
+    }
+  }
+  function reportViolation(type, eventId, prop) {
+    report(eventId, {
+      propertyName: prop
+    });
+  }
+  function reportTemplateViolation(prop) {
+    reportViolation('template', 3 /* ReportingEventId.TemplateMutation */, prop);
+  }
+  function reportStylesheetViolation(prop) {
+    reportViolation('stylesheet', 4 /* ReportingEventId.StylesheetMutation */, prop);
+  }
+  // Warn if the user tries to mutate a stylesheets array, e.g.:
+  // `tmpl.stylesheets.push(someStylesheetFunction)`
+  function warnOnArrayMutation(stylesheets) {
+    // We can't handle users calling Array.prototype.slice.call(tmpl.stylesheets), but
+    // we can at least warn when they use the most common mutation methods.
+    for (const prop of ARRAY_MUTATION_METHODS) {
+      const originalArrayMethod = getOriginalArrayMethod(prop);
+      stylesheets[prop] = function arrayMutationWarningWrapper() {
+        reportTemplateViolation('stylesheets');
+        // @ts-ignore
+        return originalArrayMethod.apply(this, arguments);
+      };
+    }
+  }
+  // Warn if the user tries to mutate a stylesheet factory function, e.g.:
+  // `stylesheet.$scoped$ = true`
+  function warnOnStylesheetFunctionMutation(stylesheet) {
+    for (const prop of STYLESHEET_PROPS) {
+      let value = stylesheet[prop];
+      defineProperty(stylesheet, prop, {
+        enumerable: true,
+        configurable: true,
+        get() {
+          return value;
+        },
+        set(newValue) {
+          reportStylesheetViolation(prop);
+          value = newValue;
+        }
+      });
+    }
+  }
+  // Warn on either array or stylesheet (function) mutation, in a deeply-nested array
+  function trackStylesheetsMutation(stylesheets) {
+    traverseStylesheets(stylesheets, subStylesheets => {
+      if (isArray$1(subStylesheets)) {
+        warnOnArrayMutation(subStylesheets);
+      } else {
+        warnOnStylesheetFunctionMutation(subStylesheets);
+      }
+    });
+  }
   // Deeply freeze the entire array (of arrays) of stylesheet factory functions
   function deepFreeze(stylesheets) {
     traverseStylesheets(stylesheets, subStylesheets => {
@@ -5732,7 +5914,70 @@
       }
     }
   }
+  function trackMutations(tmpl) {
+    if (!isUndefined$1(tmpl.stylesheets)) {
+      trackStylesheetsMutation(tmpl.stylesheets);
+    }
+    for (const prop of TEMPLATE_PROPS) {
+      let value = tmpl[prop];
+      defineProperty(tmpl, prop, {
+        enumerable: true,
+        configurable: true,
+        get() {
+          return value;
+        },
+        set(newValue) {
+          if (!mutationTrackingDisabled) {
+            reportTemplateViolation(prop);
+          }
+          value = newValue;
+        }
+      });
+    }
+    const originalDescriptor = getOwnPropertyDescriptor$1(tmpl, 'stylesheetTokens');
+    defineProperty(tmpl, 'stylesheetTokens', {
+      enumerable: true,
+      configurable: true,
+      get: originalDescriptor.get,
+      set(value) {
+        reportTemplateViolation('stylesheetTokens');
+        // Avoid logging/reporting twice (for both stylesheetToken and stylesheetTokens)
+        mutationTrackingDisabled = true;
+        originalDescriptor.set.call(this, value);
+        mutationTrackingDisabled = false;
+      }
+    });
+  }
+  function addLegacyStylesheetTokensShim(tmpl) {
+    // When ENABLE_FROZEN_TEMPLATE is false, then we shim stylesheetTokens on top of stylesheetToken for anyone who
+    // is accessing the old internal API (backwards compat). Details: https://salesforce.quip.com/v1rmAFu2cKAr
+    defineProperty(tmpl, 'stylesheetTokens', {
+      enumerable: true,
+      configurable: true,
+      get() {
+        const {
+          stylesheetToken
+        } = this;
+        if (isUndefined$1(stylesheetToken)) {
+          return stylesheetToken;
+        }
+        // Shim for the old `stylesheetTokens` property
+        // See https://github.com/salesforce/lwc/pull/2332/files#diff-7901555acef29969adaa6583185b3e9bce475cdc6f23e799a54e0018cb18abaa
+        return {
+          hostAttribute: `${stylesheetToken}-host`,
+          shadowAttribute: stylesheetToken
+        };
+      },
+      set(value) {
+        // If the value is null or some other exotic object, you would be broken anyway in the past
+        // because the engine would try to access hostAttribute/shadowAttribute, which would throw an error.
+        // However it may be undefined in newer versions of LWC, so we need to guard against that case.
+        this.stylesheetToken = isUndefined$1(value) ? undefined : value.shadowAttribute;
+      }
+    });
+  }
   function freezeTemplate(tmpl) {
+    // TODO [#2782]: remove this flag and delete the legacy behavior
     if (lwcRuntimeFlags.ENABLE_FROZEN_TEMPLATE) {
       // Deep freeze the template
       freeze(tmpl);
@@ -5740,33 +5985,16 @@
         deepFreeze(tmpl.stylesheets);
       }
     } else {
-      // TODO [#2782]: remove this flag and delete the legacy behavior
-      // When ENABLE_FROZEN_TEMPLATE is false, then we shim stylesheetTokens on top of stylesheetToken for anyone who
-      // is accessing the old internal API (backwards compat). Details: https://salesforce.quip.com/v1rmAFu2cKAr
-      defineProperty(tmpl, 'stylesheetTokens', {
-        enumerable: true,
-        configurable: true,
-        get() {
-          const {
-            stylesheetToken
-          } = this;
-          if (isUndefined$1(stylesheetToken)) {
-            return stylesheetToken;
-          }
-          // Shim for the old `stylesheetTokens` property
-          // See https://github.com/salesforce/lwc/pull/2332/files#diff-7901555acef29969adaa6583185b3e9bce475cdc6f23e799a54e0018cb18abaa
-          return {
-            hostAttribute: `${stylesheetToken}-host`,
-            shadowAttribute: stylesheetToken
-          };
-        },
-        set(value) {
-          // If the value is null or some other exotic object, you would be broken anyway in the past
-          // because the engine would try to access hostAttribute/shadowAttribute, which would throw an error.
-          // However it may be undefined in newer versions of LWC, so we need to guard against that case.
-          this.stylesheetToken = isUndefined$1(value) ? undefined : value.shadowAttribute;
-        }
-      });
+      // template is not frozen - shim, report, and warn
+      // this shim should be applied in both dev and prod
+      addLegacyStylesheetTokensShim(tmpl);
+      // When ENABLE_FROZEN_TEMPLATE is false, we want to warn in dev mode whenever someone is mutating the template
+      {
+        // In prod mode, we only track mutations if reporting is enabled
+        onReportingEnabled(() => {
+          trackMutations(tmpl);
+        });
+      }
     }
   }
 
@@ -5979,7 +6207,7 @@
   const cachedConstructors = new Map();
   const elementsUpgradedOutsideLWC = new WeakSet();
   let elementBeingUpgradedByLWC = false;
-  // Creates a constructor that is intended to be used as a vanilla custom element, except that the upgradeCallback is
+  // Creates a constructor that is intended to be used directly as a custom element, except that the upgradeCallback is
   // passed in to the constructor so LWC can reuse the same custom element constructor for multiple components.
   // Another benefit is that only LWC can create components that actually do anything – if you do
   // `customElements.define('x-foo')`, then you don't have access to the upgradeCallback, so it's a dummy custom element.
@@ -6024,7 +6252,7 @@
       }
       return UpgradableConstructor;
   };
-  const createCustomElementVanilla = (tagName, upgradeCallback, connectedCallback, disconnectedCallback) => {
+  const createCustomElementUsingUpgradableConstructor = (tagName, upgradeCallback, connectedCallback, disconnectedCallback) => {
       // use global custom elements registry
       let UpgradableConstructor = cachedConstructors.get(tagName);
       if (isUndefined$1(UpgradableConstructor)) {
@@ -6052,7 +6280,7 @@
    */
   /**
    * Create a scoped registry, i.e. a function that can create custom elements whose tag names
-   * do not conflict with vanilla custom elements having the same tag name.
+   * do not conflict with third-party custom elements having the same tag name.
    */
   function createScopedRegistry() {
       if (!hasCustomElements) {
@@ -6593,10 +6821,10 @@
    * We have three modes for creating custom elements:
    *
    * 1. Compat (legacy) browser support (e.g. IE11). Totally custom, doesn't rely on native browser APIs.
-   * 2. "Vanilla" custom elements registry. This system actually still allows us to have two LWC components with the
-   *    same tag name, via a simple trick: every custom element constructor we define in the registry is basically
-   *    the same. It's essentially a dummy `class extends HTMLElement` that accepts an `upgradeCallback` in its
-   *    constructor, which allows us to have completely customized functionality for different components.
+   * 2. "Upgradable constructor" custom element. This allows us to have two LWC components with the same tag name,
+   *    via a trick: every custom element constructor we define in the registry is basically the same. It's essentially
+   *    a dummy `class extends HTMLElement` that accepts an `upgradeCallback` in its constructor ("upgradable
+   *    constructor"), which allows us to have completely customized functionality for different components.
    * 3. "Scoped" (or "pivot") custom elements. This relies on a sophisticated system that emulates the "scoped custom
    *    elements registry" proposal, with support for avoiding conflicts in tag names both between LWC components and
    *    between LWC components and third-party elements. This uses a similar trick to #2, but is much more complex
@@ -6607,8 +6835,8 @@
     if (lwcRuntimeFlags.ENABLE_SCOPED_CUSTOM_ELEMENT_REGISTRY) {
       createCustomElement = createCustomElementScoped;
     } else {
-      // use global custom elements registry (vanilla)
-      createCustomElement = createCustomElementVanilla;
+      // use the global registry, with an upgradable constructor for the defined custom element
+      createCustomElement = createCustomElementUsingUpgradableConstructor;
     }
   } else {
     // no registry available here
@@ -6664,10 +6892,10 @@
 
       var assert = /*#__PURE__*/Object.freeze({
           __proto__: null,
+          fail: fail,
           invariant: invariant,
-          isTrue: isTrue$1,
           isFalse: isFalse$1,
-          fail: fail
+          isTrue: isTrue$1
       });
       function isUndefined(obj) {
           return obj === undefined;
@@ -6675,7 +6903,7 @@
       function isNull(obj) {
           return obj === null;
       }
-      /** version: 2.35.1 */
+      /** version: 2.36.0 */
 
       /*
        * Copyright (c) 2018, salesforce.com, inc.
@@ -7228,7 +7456,7 @@
   });
   freeze(LightningElement);
   seal(LightningElement.prototype);
-  /* version: 2.35.1 */
+  /* version: 2.36.0 */
 
   exports.LightningElement = LightningElement;
   exports.__unstable__ProfilerControl = profilerControl;