@lwc/engine-core 2.35.2 → 2.37.0

package/dist/engine-core.cjs.js

@@ -33,7 +33,6 @@ if (process.env.NODE_ENV === 'test-karma-lwc') {
  * 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 = shared.noop;
@@ -91,11 +90,11 @@ function onReportingEnabled(callback) {
 /**
  * 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);
     }
 }
 
@@ -384,7 +383,7 @@ function parseStyleText(cssText) {
 // 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 shared.keys(object)) {
         if (key !== keyToOmit) {
             result[key] = object[key];
         }
@@ -394,7 +393,7 @@ function cloneAndOmitKey(object, keyToOmit) {
 function flattenStylesheets(stylesheets) {
     const list = [];
     for (const stylesheet of stylesheets) {
-        if (!Array.isArray(stylesheet)) {
+        if (!shared.isArray(stylesheet)) {
             list.push(stylesheet);
         }
         else {
@@ -2673,6 +2672,10 @@ function checkVersionMismatch(func, type) {
             // 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${shared.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: shared.LWC_VERSION,
+            });
         }
     }
 }
@@ -4412,7 +4415,12 @@ function allocateInSlot(vm, children, owner) {
     } 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] || [];
     shared.ArrayPush.call(vnodes, vnode);
   }
   vm.cmpSlots = {
@@ -5478,6 +5486,8 @@ function registerComponent(
 Ctor, { tmpl }) {
     if (shared.isFunction(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);
@@ -5742,20 +5752,37 @@ function validateComponentStylesheets(vm, stylesheets) {
 }
 // Validate and flatten any stylesheets defined as `static stylesheets`
 function computeStylesheets(vm, ctor) {
-  if (features.lwcRuntimeFlags.ENABLE_PROGRAMMATIC_STYLESHEETS) {
-    const {
+  warnOnStylesheetsMutation(ctor);
+  const {
+    stylesheets
+  } = ctor;
+  if (!shared.isUndefined(stylesheets)) {
+    const valid = validateComponentStylesheets(vm, stylesheets);
+    if (valid) {
+      return flattenStylesheets(stylesheets);
+    } else if (process.env.NODE_ENV !== 'production') {
+      logError(`static stylesheets must be an array of CSS stylesheets. Found invalid stylesheets on <${vm.tagName}>`, vm);
+    }
+  }
+  return null;
+}
+function warnOnStylesheetsMutation(ctor) {
+  if (process.env.NODE_ENV !== 'production') {
+    let {
       stylesheets
     } = ctor;
-    if (!shared.isUndefined(stylesheets)) {
-      const valid = validateComponentStylesheets(vm, stylesheets);
-      if (valid) {
-        return flattenStylesheets(stylesheets);
-      } else if (process.env.NODE_ENV !== 'production') {
-        logError(`static stylesheets must be an array of CSS stylesheets. Found invalid stylesheets on <${vm.tagName}>`, vm);
+    shared.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;
       }
-    }
+    });
   }
-  return null;
 }
 function computeShadowMode(vm, renderer) {
   const {
@@ -6131,7 +6158,7 @@ function forceRehydration(vm) {
 // The goal of this code is to detect invalid cross-root ARIA references in synthetic shadow DOM.
 // These invalid references should be fixed before the offending components can be migrated to native shadow DOM.
 // When invalid usage is detected, we warn in dev mode and call the reporting API if enabled.
-// See: https://lwc.dev/guide/accessibility#link-ids-and-aria-attributes-from-different-templates
+// See: https://sfdc.co/synthetic-aria
 //
 // Use the unpatched native getElementById/querySelectorAll rather than the synthetic one
 const getElementById = shared.globalThis[shared.KEY__NATIVE_GET_ELEMENT_BY_ID];
@@ -6139,7 +6166,7 @@ const querySelectorAll = shared.globalThis[shared.KEY__NATIVE_QUERY_SELECTOR_ALL
 function isSyntheticShadowRootInstance(rootNode) {
     return rootNode !== document && shared.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);
@@ -6150,12 +6177,15 @@ function reportViolation(source, target, attrName) {
         // 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 ` +
             `<${target.tagName.toLowerCase()}>, which is not in the same shadow root. This will break in native shadow DOM. ` +
-            `For details, see: https://lwc.dev/guide/accessibility#link-ids-and-aria-attributes-from-different-templates`, vm);
+            `For details, see: https://sfdc.co/synthetic-aria`, vm);
     }
 }
 function parseIdRefAttributeValue(attrValue) {
@@ -6182,7 +6212,7 @@ function detectSyntheticCrossRootAria(elm, attrName, attrValue) {
                 const sourceElement = sourceElements[i];
                 const sourceRoot = sourceElement.getRootNode();
                 if (sourceRoot !== root) {
-                    reportViolation(sourceElement, elm, idRefAttrName);
+                    reportViolation$1(sourceElement, elm, idRefAttrName);
                     break;
                 }
             }
@@ -6197,7 +6227,7 @@ function detectSyntheticCrossRootAria(elm, attrName, attrValue) {
                 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);
                 }
             }
         }
@@ -6206,7 +6236,7 @@ function detectSyntheticCrossRootAria(elm, attrName, attrValue) {
 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
     }
@@ -6258,12 +6288,110 @@ function isSyntheticShadowLoaded() {
 if (process.env.IS_BROWSER && 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 = shared.isUndefined(host) ? undefined : getAssociatedVMIfPresent(host);
+  if (!shared.isUndefined(vm)) {
+    return vm;
+  }
+  // Else it might be a light DOM component. Walk up the tree trying to find the owner
+  let parentElement = elm;
+  while (!shared.isNull(parentElement = parentElement.parentElement)) {
+    if (isLightningElement(parentElement)) {
+      const vm = getAssociatedVMIfPresent(parentElement);
+      if (!shared.isUndefined(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()}> ` + (shared.isUndefined(vm) ? '' : `owned by <${vm.elm.tagName.toLowerCase()}> `) + `uses non-standard property "${prop}". This will be removed in a future version of LWC. ` + `See https://sfdc.co/deprecated-aria`);
+    }
+    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 = shared.getOwnPropertyDescriptor(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 (shared.isUndefined(descriptor) || shared.isUndefined(descriptor.get) || shared.isUndefined(descriptor.set)) {
+        // should never happen
+        throw new Error('detect-non-standard-aria.ts loaded before @lwc/aria-reflection');
+      }
+    }
+    // @ts-ignore
+    const {
+      get,
+      set
+    } = descriptor;
+    shared.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 (process.env.IS_BROWSER) {
+  if (!features.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);
     }
+  }
 }
 
 /*
@@ -6750,12 +6878,13 @@ function setHooks(hooks) {
  */
 // 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':
@@ -6778,7 +6907,20 @@ function getOriginalArrayMethod(prop) {
       return shared.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://sfdc.co/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) {
@@ -6787,7 +6929,7 @@ function warnOnArrayMutation(stylesheets) {
   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);
     };
@@ -6796,8 +6938,7 @@ function warnOnArrayMutation(stylesheets) {
 // 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];
     shared.defineProperty(stylesheet, prop, {
       enumerable: true,
@@ -6806,14 +6947,14 @@ function warnOnStylesheetFunctionMutation(stylesheet) {
         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 (shared.isArray(subStylesheets)) {
       warnOnArrayMutation(subStylesheets);
@@ -6840,7 +6981,70 @@ function traverseStylesheets(stylesheets, callback) {
     }
   }
 }
+function trackMutations(tmpl) {
+  if (!shared.isUndefined(tmpl.stylesheets)) {
+    trackStylesheetsMutation(tmpl.stylesheets);
+  }
+  for (const prop of TEMPLATE_PROPS) {
+    let value = tmpl[prop];
+    shared.defineProperty(tmpl, prop, {
+      enumerable: true,
+      configurable: true,
+      get() {
+        return value;
+      },
+      set(newValue) {
+        if (!mutationTrackingDisabled) {
+          reportTemplateViolation(prop);
+        }
+        value = newValue;
+      }
+    });
+  }
+  const originalDescriptor = shared.getOwnPropertyDescriptor(tmpl, 'stylesheetTokens');
+  shared.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
+  shared.defineProperty(tmpl, 'stylesheetTokens', {
+    enumerable: true,
+    configurable: true,
+    get() {
+      const {
+        stylesheetToken
+      } = this;
+      if (shared.isUndefined(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 = shared.isUndefined(value) ? undefined : value.shadowAttribute;
+    }
+  });
+}
 function freezeTemplate(tmpl) {
+  // TODO [#2782]: remove this flag and delete the legacy behavior
   if (features.lwcRuntimeFlags.ENABLE_FROZEN_TEMPLATE) {
     // Deep freeze the template
     shared.freeze(tmpl);
@@ -6848,66 +7052,16 @@ function freezeTemplate(tmpl) {
       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
-    shared.defineProperty(tmpl, 'stylesheetTokens', {
-      enumerable: true,
-      configurable: true,
-      get() {
-        const {
-          stylesheetToken
-        } = this;
-        if (shared.isUndefined(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 = shared.isUndefined(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 (!shared.isUndefined(tmpl.stylesheets)) {
-        warnOnStylesheetsMutation(tmpl.stylesheets);
-      }
-      for (const prop of TEMPLATE_PROPS) {
-        let value = tmpl[prop];
-        shared.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 = shared.getOwnPropertyDescriptor(tmpl, 'stylesheetTokens');
-      shared.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);
       });
     }
   }
@@ -6974,4 +7128,4 @@ exports.swapTemplate = swapTemplate;
 exports.track = track;
 exports.unwrap = unwrap;
 exports.wire = wire;
-/* version: 2.35.2 */
+/* version: 2.37.0 */

package/dist/engine-core.js

@@ -1,7 +1,7 @@
 /* proxy-compat-disable */
 import { lwcRuntimeFlags } from '@lwc/features';
 export { setFeatureFlag, setFeatureFlagForTest } from '@lwc/features';
-import { noop, StringToLowerCase, isNull, ArrayPush as ArrayPush$1, ArrayJoin, isFrozen, isUndefined as isUndefined$1, defineProperty, ArrayIndexOf, ArraySplice, create, seal, isFunction as isFunction$1, hasOwnProperty as hasOwnProperty$1, forEach, keys, AriaPropNameToAttrNameMap, getPropertyDescriptor, defineProperties, getOwnPropertyNames as getOwnPropertyNames$1, getPrototypeOf as getPrototypeOf$1, setPrototypeOf, assign, isObject, assert, freeze, KEY__SYNTHETIC_MODE, toString as toString$1, getOwnPropertyDescriptor as getOwnPropertyDescriptor$1, isFalse, LWC_VERSION_COMMENT_REGEX, LWC_VERSION, htmlPropertyToAttribute, ArraySlice, ArrayMap, isArray as isArray$1, KEY__SCOPED_CSS, StringCharCodeAt, XML_NAMESPACE, XLINK_NAMESPACE, htmlAttributeToProperty, isString, StringSlice, isTrue, SVG_NAMESPACE, KEY__SHADOW_STATIC, KEY__SHADOW_RESOLVER, ArraySome, ArrayPop, isNumber, StringReplace, ArrayUnshift, globalThis as globalThis$1, KEY__NATIVE_GET_ELEMENT_BY_ID, KEY__NATIVE_QUERY_SELECTOR_ALL, ID_REFERENCING_ATTRIBUTES_SET, KEY__SHADOW_TOKEN, ArrayFilter, StringSplit, ArrayCopyWithin, ArrayFill, ArraySort, ArrayReverse, ArrayShift } from '@lwc/shared';
+import { noop, StringToLowerCase, isNull, ArrayPush as ArrayPush$1, ArrayJoin, isFrozen, isUndefined as isUndefined$1, defineProperty, ArrayIndexOf, ArraySplice, create, seal, isArray as isArray$1, isFunction as isFunction$1, keys, hasOwnProperty as hasOwnProperty$1, forEach, AriaPropNameToAttrNameMap, getPropertyDescriptor, defineProperties, getOwnPropertyNames as getOwnPropertyNames$1, getPrototypeOf as getPrototypeOf$1, setPrototypeOf, assign, isObject, assert, freeze, KEY__SYNTHETIC_MODE, toString as toString$1, getOwnPropertyDescriptor as getOwnPropertyDescriptor$1, isFalse, LWC_VERSION_COMMENT_REGEX, LWC_VERSION, htmlPropertyToAttribute, ArraySlice, ArrayMap, KEY__SCOPED_CSS, StringCharCodeAt, XML_NAMESPACE, XLINK_NAMESPACE, htmlAttributeToProperty, isString, StringSlice, isTrue, SVG_NAMESPACE, KEY__SHADOW_STATIC, KEY__SHADOW_RESOLVER, ArraySome, ArrayPop, isNumber, StringReplace, ArrayUnshift, globalThis as globalThis$1, KEY__NATIVE_GET_ELEMENT_BY_ID, KEY__NATIVE_QUERY_SELECTOR_ALL, ID_REFERENCING_ATTRIBUTES_SET, KEY__SHADOW_TOKEN, ArrayFilter, StringSplit, ArrayCopyWithin, ArrayFill, ArraySort, ArrayReverse, ArrayShift } from '@lwc/shared';
 import { applyAriaReflection } from '@lwc/aria-reflection';
 
 /*
@@ -32,7 +32,6 @@ if (process.env.NODE_ENV === 'test-karma-lwc') {
  * 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;
@@ -90,11 +89,11 @@ function onReportingEnabled(callback) {
 /**
  * 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);
     }
 }
 
@@ -383,7 +382,7 @@ function parseStyleText(cssText) {
 // 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];
         }
@@ -393,7 +392,7 @@ function cloneAndOmitKey(object, keyToOmit) {
 function flattenStylesheets(stylesheets) {
     const list = [];
     for (const stylesheet of stylesheets) {
-        if (!Array.isArray(stylesheet)) {
+        if (!isArray$1(stylesheet)) {
             list.push(stylesheet);
         }
         else {
@@ -2672,6 +2671,10 @@ function checkVersionMismatch(func, type) {
             // 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,
+            });
         }
     }
 }
@@ -4411,7 +4414,12 @@ function allocateInSlot(vm, children, owner) {
     } 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 = {
@@ -5477,6 +5485,8 @@ function registerComponent(
 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);
@@ -5741,20 +5751,37 @@ function validateComponentStylesheets(vm, stylesheets) {
 }
 // Validate and flatten any stylesheets defined as `static stylesheets`
 function computeStylesheets(vm, ctor) {
-  if (lwcRuntimeFlags.ENABLE_PROGRAMMATIC_STYLESHEETS) {
-    const {
+  warnOnStylesheetsMutation(ctor);
+  const {
+    stylesheets
+  } = ctor;
+  if (!isUndefined$1(stylesheets)) {
+    const valid = validateComponentStylesheets(vm, stylesheets);
+    if (valid) {
+      return flattenStylesheets(stylesheets);
+    } else if (process.env.NODE_ENV !== 'production') {
+      logError(`static stylesheets must be an array of CSS stylesheets. Found invalid stylesheets on <${vm.tagName}>`, vm);
+    }
+  }
+  return null;
+}
+function warnOnStylesheetsMutation(ctor) {
+  if (process.env.NODE_ENV !== 'production') {
+    let {
       stylesheets
     } = ctor;
-    if (!isUndefined$1(stylesheets)) {
-      const valid = validateComponentStylesheets(vm, stylesheets);
-      if (valid) {
-        return flattenStylesheets(stylesheets);
-      } else if (process.env.NODE_ENV !== 'production') {
-        logError(`static stylesheets must be an array of CSS stylesheets. Found invalid stylesheets on <${vm.tagName}>`, vm);
+    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;
       }
-    }
+    });
   }
-  return null;
 }
 function computeShadowMode(vm, renderer) {
   const {
@@ -6130,7 +6157,7 @@ function forceRehydration(vm) {
 // The goal of this code is to detect invalid cross-root ARIA references in synthetic shadow DOM.
 // These invalid references should be fixed before the offending components can be migrated to native shadow DOM.
 // When invalid usage is detected, we warn in dev mode and call the reporting API if enabled.
-// See: https://lwc.dev/guide/accessibility#link-ids-and-aria-attributes-from-different-templates
+// See: https://sfdc.co/synthetic-aria
 //
 // Use the unpatched native getElementById/querySelectorAll rather than the synthetic one
 const getElementById = globalThis$1[KEY__NATIVE_GET_ELEMENT_BY_ID];
@@ -6138,7 +6165,7 @@ const querySelectorAll = globalThis$1[KEY__NATIVE_QUERY_SELECTOR_ALL];
 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);
@@ -6149,12 +6176,15 @@ function reportViolation(source, target, attrName) {
         // 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 ` +
             `<${target.tagName.toLowerCase()}>, which is not in the same shadow root. This will break in native shadow DOM. ` +
-            `For details, see: https://lwc.dev/guide/accessibility#link-ids-and-aria-attributes-from-different-templates`, vm);
+            `For details, see: https://sfdc.co/synthetic-aria`, vm);
     }
 }
 function parseIdRefAttributeValue(attrValue) {
@@ -6181,7 +6211,7 @@ function detectSyntheticCrossRootAria(elm, attrName, attrValue) {
                 const sourceElement = sourceElements[i];
                 const sourceRoot = sourceElement.getRootNode();
                 if (sourceRoot !== root) {
-                    reportViolation(sourceElement, elm, idRefAttrName);
+                    reportViolation$1(sourceElement, elm, idRefAttrName);
                     break;
                 }
             }
@@ -6196,7 +6226,7 @@ function detectSyntheticCrossRootAria(elm, attrName, attrValue) {
                 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);
                 }
             }
         }
@@ -6205,7 +6235,7 @@ function detectSyntheticCrossRootAria(elm, attrName, attrValue) {
 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
     }
@@ -6257,12 +6287,110 @@ function isSyntheticShadowLoaded() {
 if (process.env.IS_BROWSER && 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://sfdc.co/deprecated-aria`);
+    }
+    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 (process.env.IS_BROWSER) {
+  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);
     }
+  }
 }
 
 /*
@@ -6749,12 +6877,13 @@ function setHooks(hooks) {
  */
 // 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':
@@ -6777,7 +6906,20 @@ function getOriginalArrayMethod(prop) {
       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://sfdc.co/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) {
@@ -6786,7 +6928,7 @@ function warnOnArrayMutation(stylesheets) {
   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);
     };
@@ -6795,8 +6937,7 @@ function warnOnArrayMutation(stylesheets) {
 // 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,
@@ -6805,14 +6946,14 @@ function warnOnStylesheetFunctionMutation(stylesheet) {
         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);
@@ -6839,7 +6980,70 @@ function traverseStylesheets(stylesheets, callback) {
     }
   }
 }
+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);
@@ -6847,66 +7051,16 @@ function freezeTemplate(tmpl) {
       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);
       });
     }
   }
@@ -6936,4 +7090,4 @@ function getComponentConstructor(elm) {
 }
 
 export { LightningElement, profilerControl as __unstable__ProfilerControl, reportingControl as __unstable__ReportingControl, api$1 as api, connectRootElement, createContextProvider, createVM, disconnectRootElement, freezeTemplate, getAssociatedVMIfPresent, getComponentConstructor, getComponentDef, getComponentHtmlPrototype, hydrateRoot, isComponentConstructor, parseFragment, parseSVGFragment, readonly, register, registerComponent, registerDecorators, registerTemplate, sanitizeAttribute, setHooks, swapComponent, swapStyle, swapTemplate, track, unwrap, wire };
-/* version: 2.35.2 */
+/* version: 2.37.0 */

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@lwc/engine-core",
-    "version": "2.35.2",
+    "version": "2.37.0",
     "description": "Core LWC engine APIs.",
     "homepage": "https://lwc.dev/",
     "repository": {
@@ -24,9 +24,9 @@
         "types/"
     ],
     "dependencies": {
-        "@lwc/aria-reflection": "2.35.2",
-        "@lwc/features": "2.35.2",
-        "@lwc/shared": "2.35.2"
+        "@lwc/aria-reflection": "2.37.0",
+        "@lwc/features": "2.37.0",
+        "@lwc/shared": "2.37.0"
     },
     "devDependencies": {
         "observable-membrane": "2.0.0"

package/types/framework/api.d.ts

@@ -1,7 +1,7 @@
 import { SlotSet } from './vm';
 import { LightningElementConstructor } from './base-lightning-element';
 import { VNode, VNodes, VElement, VText, VCustomElement, VComment, VElementData, VStatic, Key, VFragment, VScopedSlotFragment } from './vnodes';
-declare function ssf(slotName: string, factory: (value: any, key: any) => VFragment): VScopedSlotFragment;
+declare function ssf(slotName: unknown, factory: (value: any, key: any) => VFragment): VScopedSlotFragment;
 declare function st(fragment: Element, key: Key): VStatic;
 declare function fr(key: Key, children: VNodes, stable: 0 | 1): VFragment;
 declare function h(sel: string, data: VElementData, children?: VNodes): VElement;

package/types/framework/reporting.d.ts

@@ -1,8 +1,38 @@
-import { VM } from './vm';
 export declare const enum ReportingEventId {
-    CrossRootAriaInSyntheticShadow = 0
+    CrossRootAriaInSyntheticShadow = 0,
+    CompilerRuntimeVersionMismatch = 1,
+    NonStandardAriaReflection = 2,
+    TemplateMutation = 3,
+    StylesheetMutation = 4
 }
-type ReportingDispatcher = (reportingEventId: ReportingEventId, tagName: string, vmIndex: number) => void;
+export interface BasePayload {
+    tagName?: string;
+}
+export interface CrossRootAriaInSyntheticShadowPayload extends BasePayload {
+    attributeName: string;
+}
+export interface CompilerRuntimeVersionMismatchPayload extends BasePayload {
+    compilerVersion: string;
+    runtimeVersion: string;
+}
+export interface NonStandardAriaReflectionPayload extends BasePayload {
+    propertyName: string;
+}
+export interface TemplateMutationPayload extends BasePayload {
+    propertyName: string;
+}
+export interface StylesheetMutationPayload extends BasePayload {
+    propertyName: string;
+}
+export type ReportingPayloadMapping = {
+    [ReportingEventId.CrossRootAriaInSyntheticShadow]: CrossRootAriaInSyntheticShadowPayload;
+    [ReportingEventId.CompilerRuntimeVersionMismatch]: CompilerRuntimeVersionMismatchPayload;
+    [ReportingEventId.NonStandardAriaReflection]: NonStandardAriaReflectionPayload;
+    [ReportingEventId.TemplateMutation]: TemplateMutationPayload;
+    [ReportingEventId.StylesheetMutation]: StylesheetMutationPayload;
+};
+export type ReportingDispatcher<T extends ReportingEventId = ReportingEventId> = (reportingEventId: T, payload: ReportingPayloadMapping[T]) => void;
+/** Callbacks to invoke when reporting is enabled **/
 type OnReportingEnabledCallback = () => void;
 export declare const reportingControl: {
     /**
@@ -25,7 +55,7 @@ export declare function onReportingEnabled(callback: OnReportingEnabledCallback)
 /**
  * Report to the current dispatcher, if there is one.
  * @param reportingEventId
- * @param vm
+ * @param payload - data to report
  */
-export declare function report(reportingEventId: ReportingEventId, vm: VM): void;
+export declare function report<T extends ReportingEventId>(reportingEventId: T, payload: ReportingPayloadMapping[T]): void;
 export {};

package/types/framework/vnodes.d.ts

@@ -25,7 +25,7 @@ export interface BaseVNode {
 export interface VScopedSlotFragment extends BaseVNode {
     factory: (value: any, key: any) => VFragment;
     type: VNodeType.ScopedSlotFragment;
-    slotName: string;
+    slotName: unknown;
 }
 export interface VStatic extends BaseVNode {
     type: VNodeType.Static;

package/types/index.d.ts

@@ -1,3 +1,4 @@
 import './testFeatureFlag';
 import './patches/detect-synthetic-cross-root-aria';
+import './patches/detect-non-standard-aria';
 export * from './framework/main';

package/types/patches/detect-non-standard-aria.d.ts

@@ -0,0 +1 @@
+export {};