lwc 2.35.2 → 2.37.0

package/dist/engine-server/commonjs/es2017/engine-server.js

@@ -442,9 +442,9 @@ function htmlEscape(str, attrMode = false) {
  * 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.37.0";
 const LWC_VERSION_COMMENT_REGEX = /\/\*LWC compiler v([\d.]+)\*\/\s*}/;
-/** version: 2.35.2 */
+/** version: 2.37.0 */
 
 /*
  * Copyright (c) 2020, salesforce.com, inc.
@@ -496,10 +496,8 @@ const features = {
     ENABLE_WIRE_SYNC_EMIT: null,
     ENABLE_LIGHT_GET_ROOT_NODE_PATCH: null,
     DISABLE_LIGHT_DOM_UNSCOPED_CSS: null,
-    ENABLE_SCOPED_CUSTOM_ELEMENT_REGISTRY: null,
     ENABLE_FROZEN_TEMPLATE: null,
     DISABLE_ARIA_REFLECTION_POLYFILL: null,
-    ENABLE_PROGRAMMATIC_STYLESHEETS: null,
 };
 if (!_globalThis.lwcRuntimeFlags) {
     Object.defineProperty(_globalThis, 'lwcRuntimeFlags', { value: create(null) });
@@ -555,7 +553,7 @@ function setFeatureFlagForTest(name, value) {
         setFeatureFlag(name, value);
     }
 }
-/** version: 2.35.2 */
+/** version: 2.37.0 */
 
 /**
  * Copyright (C) 2018 salesforce.com, inc.
@@ -619,7 +617,7 @@ function applyAriaReflection(prototype = Element.prototype) {
         }
     }
 }
-/** version: 2.35.2 */
+/** version: 2.37.0 */
 
 /* proxy-compat-disable */
 
@@ -734,6 +732,9 @@ function log(method, message, vm, once) {
 function logError(message, vm) {
     log('error', message, vm, false);
 }
+function logWarnOnce(message, vm) {
+    log('warn', message, vm, true);
+}
 
 /*
  * Copyright (c) 2019, salesforce.com, inc.
@@ -792,7 +793,7 @@ function guid() {
 function flattenStylesheets(stylesheets) {
     const list = [];
     for (const stylesheet of stylesheets) {
-        if (!Array.isArray(stylesheet)) {
+        if (!isArray$1(stylesheet)) {
             list.push(stylesheet);
         }
         else {
@@ -4616,7 +4617,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 = {
@@ -5643,6 +5649,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);
@@ -5901,20 +5909,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 {
@@ -6279,12 +6304,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':
@@ -6307,7 +6333,17 @@ 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`);
+  }
+}
+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) {
@@ -6316,7 +6352,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);
     };
@@ -6325,8 +6361,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,
@@ -6335,14 +6370,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);
@@ -6369,7 +6404,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);
@@ -6377,71 +6475,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);
     }
   }
 }
-/* version: 2.35.2 */
+/* version: 2.37.0 */
 
 /*
  * Copyright (c) 2020, salesforce.com, inc.
@@ -6493,7 +6536,7 @@ function unsupportedMethod(name) {
         throw new TypeError(`"${name}" is not supported in this environment`);
     };
 }
-function createElement(tagName, namespace) {
+function createElement$1(tagName, namespace) {
     return {
         [HostTypeKey]: HostNodeType.Element,
         tagName,
@@ -6744,7 +6787,7 @@ const assertInstanceOfHTMLElement = noop;
 const localRegistryRecord = new Map();
 function createUpgradableElementConstructor(tagName) {
     return function Ctor(upgradeCallback) {
-        const elm = createElement(tagName);
+        const elm = createElement$1(tagName);
         if (isFunction$1(upgradeCallback)) {
             upgradeCallback(elm); // nothing to do with the result for now
         }
@@ -6771,7 +6814,7 @@ const renderer = {
     remove,
     cloneNode,
     createFragment,
-    createElement,
+    createElement: createElement$1,
     createText,
     createComment,
     createCustomElement,
@@ -6912,11 +6955,29 @@ function renderComponent(tagName, Ctor, props = {}) {
  */
 freeze(LightningElement);
 seal(LightningElement.prototype);
-/* version: 2.35.2 */
+
+/*
+ * 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
+ */
+/**
+ * This API is equivalent to the createElement function exposed by @lwc/engine-dom. It doesn't do anything on
+ * the server side, however, you may import it.
+ *
+ * The whole point of defining this and exporting it is so that you can import it in isomorphic code without
+ * an error being thrown by the import itself.
+ */
+function createElement() {
+    throw new Error('createElement is not supported in @lwc/engine-server, only @lwc/engine-dom.');
+}
+/* version: 2.37.0 */
 
 exports.LightningElement = LightningElement;
 exports.api = api$1;
 exports.createContextProvider = createContextProvider;
+exports.createElement = createElement;
 exports.freezeTemplate = freezeTemplate;
 exports.getComponentDef = getComponentDef;
 exports.isComponentConstructor = isComponentConstructor;