lwc 2.35.2 → 2.36.0

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

@@ -335,9 +335,9 @@
    * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
    */
   // Increment whenever the LWC template compiler changes
-  const LWC_VERSION = "2.35.2";
+  const LWC_VERSION = "2.36.0";
   const LWC_VERSION_COMMENT_REGEX = /\/\*LWC compiler v([\d.]+)\*\/\s*}/;
-  /** version: 2.35.2 */
+  /** version: 2.36.0 */
 
   /**
    * Copyright (C) 2018 salesforce.com, inc.
@@ -416,7 +416,7 @@
           setFeatureFlag(name, value);
       }
   }
-  /** version: 2.35.2 */
+  /** version: 2.36.0 */
 
   /**
    * Copyright (C) 2018 salesforce.com, inc.
@@ -480,7 +480,7 @@
           }
       }
   }
-  /** version: 2.35.2 */
+  /** version: 2.36.0 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -546,7 +546,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;
@@ -604,11 +603,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);
       }
   }
 
@@ -883,7 +882,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];
           }
@@ -893,7 +892,7 @@
   function flattenStylesheets(stylesheets) {
       const list = [];
       for (const stylesheet of stylesheets) {
-          if (!Array.isArray(stylesheet)) {
+          if (!isArray$1(stylesheet)) {
               list.push(stylesheet);
           }
           else {
@@ -3170,6 +3169,10 @@
               // stylesheets and templates do not have user-meaningful names, but components do
               const friendlyName = type === 'component' ? `${type} ${func.name}` : type;
               logError(`LWC WARNING: current engine is v${LWC_VERSION}, but ${friendlyName} was compiled with v${version}.\nPlease update your compiled code or LWC engine so that the versions match.\nNo further warnings will appear.`);
+              report(1 /* ReportingEventId.CompilerRuntimeVersionMismatch */, {
+                  compilerVersion: version,
+                  runtimeVersion: LWC_VERSION,
+              });
           }
       }
   }
@@ -4905,7 +4908,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 = {
@@ -5971,6 +5979,8 @@
   Ctor, { tmpl }) {
       if (isFunction$1(Ctor)) {
           if (process.env.NODE_ENV !== 'production') {
+              // There is no point in running this in production, because the version mismatch check relies
+              // on code comments which are stripped out in production by minifiers
               checkVersionMismatch(Ctor, 'component');
           }
           signedTemplateMap.set(Ctor, tmpl);
@@ -6236,6 +6246,7 @@
   // Validate and flatten any stylesheets defined as `static stylesheets`
   function computeStylesheets(vm, ctor) {
     if (lwcRuntimeFlags.ENABLE_PROGRAMMATIC_STYLESHEETS) {
+      warnOnStylesheetsMutation(ctor);
       const {
         stylesheets
       } = ctor;
@@ -6250,6 +6261,24 @@
     }
     return null;
   }
+  function warnOnStylesheetsMutation(ctor) {
+    if (process.env.NODE_ENV !== 'production') {
+      let {
+        stylesheets
+      } = ctor;
+      defineProperty(ctor, 'stylesheets', {
+        enumerable: true,
+        configurable: true,
+        get() {
+          return stylesheets;
+        },
+        set(newValue) {
+          logWarnOnce(`Dynamically setting the "stylesheets" static property on ${ctor.name} ` + 'will not affect the stylesheets injected.');
+          stylesheets = newValue;
+        }
+      });
+    }
+  }
   function computeShadowMode(vm, renderer) {
     const {
       def
@@ -6629,7 +6658,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);
@@ -6640,7 +6669,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,
+      });
       if (process.env.NODE_ENV !== 'production') {
           // Avoid excessively logging to the console in the case of duplicates.
           logWarnOnce(`Element <${source.tagName.toLowerCase()}> uses attribute "${attrName}" to reference element ` +
@@ -6672,7 +6704,7 @@
                   const sourceElement = sourceElements[i];
                   const sourceRoot = sourceElement.getRootNode();
                   if (sourceRoot !== root) {
-                      reportViolation(sourceElement, elm, idRefAttrName);
+                      reportViolation$1(sourceElement, elm, idRefAttrName);
                       break;
                   }
               }
@@ -6687,7 +6719,7 @@
                   const targetRoot = target.getRootNode();
                   if (targetRoot !== root) {
                       // target element's shadow root is not the same as ours
-                      reportViolation(elm, target, attrName);
+                      reportViolation$1(elm, target, attrName);
                   }
               }
           }
@@ -6696,7 +6728,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
       }
@@ -6748,14 +6780,112 @@
   if (supportsCssEscape() && isSyntheticShadowLoaded()) {
       // Always run detection in dev mode, so we can at least print to the console
       if (process.env.NODE_ENV !== 'production') {
-          enableDetection();
+          enableDetection$1();
       }
       else {
           // 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);
+      if (process.env.NODE_ENV !== 'production') {
+        logWarnOnce(`Element <${elm.tagName.toLowerCase()}> ` + (isUndefined$1(vm) ? '' : `owned by <${vm.elm.tagName.toLowerCase()}> `) + `uses non-standard property "${prop}". This will be removed in a future version of LWC. ` + `See https://lwc.dev/guide/accessibility#deprecated-aria-reflected-properties`);
+      }
+      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);
+      // The descriptor should exist because the @lwc/aria-reflection polyfill has run by now.
+      // This happens automatically because of the ordering of imports.
+      if (process.env.NODE_ENV !== 'production') {
+        /* istanbul ignore if */
+        if (isUndefined$1(descriptor) || isUndefined$1(descriptor.get) || isUndefined$1(descriptor.set)) {
+          // should never happen
+          throw new Error('detect-non-standard-aria.ts loaded before @lwc/aria-reflection');
+        }
+      }
+      // @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
+      if (process.env.NODE_ENV !== 'production') {
+        enableDetection();
+      } else {
+        // In prod mode, only enable detection if reporting is enabled
+        onReportingEnabled(enableDetection);
+      }
+    }
+  }
+
   /*
    * Copyright (c) 2018, salesforce.com, inc.
    * All rights reserved.
@@ -7240,12 +7370,13 @@
    */
   // See @lwc/engine-core/src/framework/template.ts
   const TEMPLATE_PROPS = ['slots', 'stylesheetToken', 'stylesheets', 'renderMode'];
-  // Via https://www.npmjs.com/package/object-observer
-  const ARRAY_MUTATION_METHODS = ['pop', 'push', 'shift', 'unshift', 'reverse', 'sort', 'fill', 'splice', 'copyWithin'];
   // Expandos that may be placed on a stylesheet factory function, and which are meaningful to LWC at runtime
-  const STYLESHEET_FUNCTION_EXPANDOS = [
+  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':
@@ -7268,7 +7399,20 @@
         return ArrayCopyWithin;
     }
   }
-  let mutationWarningsSilenced = false;
+  function reportViolation(type, eventId, prop) {
+    if (process.env.NODE_ENV !== 'production') {
+      logWarnOnce(`Mutating the "${prop}" property on a ${type} ` + `is deprecated and will be removed in a future version of LWC. ` + `See: https://lwc.dev/guide/css#deprecated-template-mutation`);
+    }
+    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) {
@@ -7277,7 +7421,7 @@
     for (const prop of ARRAY_MUTATION_METHODS) {
       const originalArrayMethod = getOriginalArrayMethod(prop);
       stylesheets[prop] = function arrayMutationWarningWrapper() {
-        logError(`Mutating the "stylesheets" array on a template function ` + `is deprecated and may be removed in a future version of LWC.`);
+        reportTemplateViolation('stylesheets');
         // @ts-ignore
         return originalArrayMethod.apply(this, arguments);
       };
@@ -7286,8 +7430,7 @@
   // Warn if the user tries to mutate a stylesheet factory function, e.g.:
   // `stylesheet.$scoped$ = true`
   function warnOnStylesheetFunctionMutation(stylesheet) {
-    // We could warn on other properties, but in practice only certain expandos are meaningful to LWC at runtime
-    for (const prop of STYLESHEET_FUNCTION_EXPANDOS) {
+    for (const prop of STYLESHEET_PROPS) {
       let value = stylesheet[prop];
       defineProperty(stylesheet, prop, {
         enumerable: true,
@@ -7296,14 +7439,14 @@
           return value;
         },
         set(newValue) {
-          logError(`Dynamically setting the "${prop}" property on a stylesheet function ` + `is deprecated and may be removed in a future version of LWC.`);
+          reportStylesheetViolation(prop);
           value = newValue;
         }
       });
     }
   }
   // Warn on either array or stylesheet (function) mutation, in a deeply-nested array
-  function warnOnStylesheetsMutation(stylesheets) {
+  function trackStylesheetsMutation(stylesheets) {
     traverseStylesheets(stylesheets, subStylesheets => {
       if (isArray$1(subStylesheets)) {
         warnOnArrayMutation(subStylesheets);
@@ -7330,7 +7473,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);
@@ -7338,66 +7544,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;
-        }
-      });
-      // When ENABLE_FROZEN_TEMPLATE is false, warn in dev mode whenever someone is mutating the template
+      // 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
       if (process.env.NODE_ENV !== 'production') {
-        if (!isUndefined$1(tmpl.stylesheets)) {
-          warnOnStylesheetsMutation(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 (!mutationWarningsSilenced) {
-                logError(`Dynamically setting the "${prop}" property on a template function ` + `is deprecated and may be removed in a future version of LWC.`);
-              }
-              value = newValue;
-            }
-          });
-        }
-        const originalDescriptor = getOwnPropertyDescriptor$1(tmpl, 'stylesheetTokens');
-        defineProperty(tmpl, 'stylesheetTokens', {
-          enumerable: true,
-          configurable: true,
-          get: originalDescriptor.get,
-          set(value) {
-            logError(`Dynamically setting the "stylesheetTokens" property on a template function ` + `is deprecated and may be removed in a future version of LWC.`);
-            // Avoid logging twice (for both stylesheetToken and stylesheetTokens)
-            mutationWarningsSilenced = true;
-            originalDescriptor.set.call(this, value);
-            mutationWarningsSilenced = false;
-          }
+        trackMutations(tmpl);
+      } else {
+        // In prod mode, we only track mutations if reporting is enabled
+        onReportingEnabled(() => {
+          trackMutations(tmpl);
         });
       }
     }
@@ -7425,7 +7581,7 @@
       }
       return ctor;
   }
-  /* version: 2.35.2 */
+  /* version: 2.36.0 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -8399,7 +8555,7 @@
       function isNull(obj) {
           return obj === null;
       }
-      /** version: 2.35.2 */
+      /** version: 2.36.0 */
 
       /*
        * Copyright (c) 2018, salesforce.com, inc.
@@ -8960,7 +9116,7 @@
   });
   freeze(LightningElement);
   seal(LightningElement.prototype);
-  /* version: 2.35.2 */
+  /* version: 2.36.0 */
 
   exports.LightningElement = LightningElement;
   exports.__unstable__ProfilerControl = profilerControl;