lwc 2.32.0 → 2.32.1

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

@@ -467,9 +467,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.32.0";
+const LWC_VERSION = "2.32.1";
 const LWC_VERSION_COMMENT_REGEX = /\/\*LWC compiler v([\d.]+)\*\/\s*}/;
-/** version: 2.32.0 */
+/** version: 2.32.1 */
 
 /*
  * Copyright (c) 2020, salesforce.com, inc.
@@ -515,19 +515,14 @@ if (typeof CustomEvent !== 'function') {
  */
 const features = {
     DUMMY_TEST_FLAG: null,
-    ENABLE_ELEMENT_PATCH: null,
     ENABLE_FORCE_NATIVE_SHADOW_MODE_FOR_TEST: null,
-    ENABLE_HTML_COLLECTIONS_PATCH: null,
-    ENABLE_INNER_OUTER_TEXT_PATCH: null,
     ENABLE_MIXED_SHADOW_MODE: null,
     ENABLE_NATIVE_CUSTOM_ELEMENT_LIFECYCLE: null,
-    ENABLE_NODE_LIST_PATCH: null,
-    ENABLE_NODE_PATCH: null,
-    ENABLE_REACTIVE_SETTER: null,
     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,
 };
 if (!_globalThis.lwcRuntimeFlags) {
     Object.defineProperty(_globalThis, 'lwcRuntimeFlags', { value: create(null) });
@@ -581,7 +576,7 @@ function setFeatureFlagForTest(name, value) {
         setFeatureFlag(name, value);
     }
 }
-/** version: 2.32.0 */
+/** version: 2.32.1 */
 
 /* proxy-compat-disable */
 
@@ -998,7 +993,7 @@ function patchElementWithRestrictions(elm, options) {
         }),
     };
     // Apply extra restriction related to DOM manipulation if the element is not a portal.
-    if (!options.isLight && !options.isPortal) {
+    if (!options.isLight && options.isSynthetic && !options.isPortal) {
         const { appendChild, insertBefore, removeChild, replaceChild } = elm;
         const originalNodeValueDescriptor = getPropertyDescriptor(elm, 'nodeValue');
         const originalInnerHTMLDescriptor = getPropertyDescriptor(elm, 'innerHTML');
@@ -2241,24 +2236,6 @@ function createObservedFieldPropertyDescriptor(key) {
     };
 }
 
-/*
- * 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
- */
-const DUMMY_ACCESSOR_REACTIVE_OBSERVER = {
-    observe(job) {
-        job();
-    },
-    reset() { },
-    link() { },
-};
-function createAccessorReactiveObserver(vm, set) {
-    // On the server side, we don't need mutation tracking. Skipping it improves performance.
-    return DUMMY_ACCESSOR_REACTIVE_OBSERVER;
-}
-
 /*
  * Copyright (c) 2018, salesforce.com, inc.
  * All rights reserved.
@@ -2266,88 +2243,69 @@ function createAccessorReactiveObserver(vm, set) {
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
 function api$1() {
-  if (process.env.NODE_ENV !== 'production') {
-    assert.fail(`@api decorator can only be used as a decorator function.`);
-  }
-  throw new Error();
+    if (process.env.NODE_ENV !== 'production') {
+        assert.fail(`@api decorator can only be used as a decorator function.`);
+    }
+    throw new Error();
 }
 function createPublicPropertyDescriptor(key) {
-  return {
-    get() {
-      const vm = getAssociatedVM(this);
-      if (isBeingConstructed(vm)) {
-        if (process.env.NODE_ENV !== 'production') {
-          logError(`Can’t read the value of property \`${toString$1(key)}\` from the constructor because the owner component hasn’t set the value yet. Instead, use the constructor to set a default value for the property.`, vm);
-        }
-        return;
-      }
-      return vm.cmpProps[key];
-    },
-    set(newValue) {
-      const vm = getAssociatedVM(this);
-      if (process.env.NODE_ENV !== 'production') {
-        const vmBeingRendered = getVMBeingRendered();
-        assert.invariant(!isInvokingRender, `${vmBeingRendered}.render() method has side effects on the state of ${vm}.${toString$1(key)}`);
-        assert.invariant(!isUpdatingTemplate, `Updating the template of ${vmBeingRendered} has side effects on the state of ${vm}.${toString$1(key)}`);
-      }
-      vm.cmpProps[key] = newValue;
-    },
-    enumerable: true,
-    configurable: true
-  };
+    return {
+        get() {
+            const vm = getAssociatedVM(this);
+            if (isBeingConstructed(vm)) {
+                if (process.env.NODE_ENV !== 'production') {
+                    logError(`Can’t read the value of property \`${toString$1(key)}\` from the constructor because the owner component hasn’t set the value yet. Instead, use the constructor to set a default value for the property.`, vm);
+                }
+                return;
+            }
+            return vm.cmpProps[key];
+        },
+        set(newValue) {
+            const vm = getAssociatedVM(this);
+            if (process.env.NODE_ENV !== 'production') {
+                const vmBeingRendered = getVMBeingRendered();
+                assert.invariant(!isInvokingRender, `${vmBeingRendered}.render() method has side effects on the state of ${vm}.${toString$1(key)}`);
+                assert.invariant(!isUpdatingTemplate, `Updating the template of ${vmBeingRendered} has side effects on the state of ${vm}.${toString$1(key)}`);
+            }
+            vm.cmpProps[key] = newValue;
+        },
+        enumerable: true,
+        configurable: true,
+    };
 }
 function createPublicAccessorDescriptor(key, descriptor) {
-  const {
-    get,
-    set,
-    enumerable,
-    configurable
-  } = descriptor;
-  if (!isFunction$1(get)) {
-    if (process.env.NODE_ENV !== 'production') {
-      assert.invariant(isFunction$1(get), `Invalid compiler output for public accessor ${toString$1(key)} decorated with @api`);
-    }
-    throw new Error();
-  }
-  return {
-    get() {
-      if (process.env.NODE_ENV !== 'production') {
-        // Assert that the this value is an actual Component with an associated VM.
-        getAssociatedVM(this);
-      }
-      return get.call(this);
-    },
-    set(newValue) {
-      const vm = getAssociatedVM(this);
-      if (process.env.NODE_ENV !== 'production') {
-        const vmBeingRendered = getVMBeingRendered();
-        assert.invariant(!isInvokingRender, `${vmBeingRendered}.render() method has side effects on the state of ${vm}.${toString$1(key)}`);
-        assert.invariant(!isUpdatingTemplate, `Updating the template of ${vmBeingRendered} has side effects on the state of ${vm}.${toString$1(key)}`);
-      }
-      if (set) {
-        if (lwcRuntimeFlags.ENABLE_REACTIVE_SETTER) {
-          let ro = vm.oar[key];
-          if (isUndefined$1(ro)) {
-            ro = vm.oar[key] = createAccessorReactiveObserver();
-          }
-          // every time we invoke this setter from outside (through this wrapper setter)
-          // we should reset the value and then debounce just in case there is a pending
-          // invocation the next tick that is not longer relevant since the value is changing
-          // from outside.
-          ro.reset(newValue);
-          ro.observe(() => {
-            set.call(this, newValue);
-          });
-        } else {
-          set.call(this, newValue);
+    const { get, set, enumerable, configurable } = descriptor;
+    if (!isFunction$1(get)) {
+        if (process.env.NODE_ENV !== 'production') {
+            assert.invariant(isFunction$1(get), `Invalid compiler output for public accessor ${toString$1(key)} decorated with @api`);
         }
-      } else if (process.env.NODE_ENV !== 'production') {
-        assert.fail(`Invalid attempt to set a new value for property ${toString$1(key)} of ${vm} that does not has a setter decorated with @api.`);
-      }
-    },
-    enumerable,
-    configurable
-  };
+        throw new Error();
+    }
+    return {
+        get() {
+            if (process.env.NODE_ENV !== 'production') {
+                // Assert that the this value is an actual Component with an associated VM.
+                getAssociatedVM(this);
+            }
+            return get.call(this);
+        },
+        set(newValue) {
+            const vm = getAssociatedVM(this);
+            if (process.env.NODE_ENV !== 'production') {
+                const vmBeingRendered = getVMBeingRendered();
+                assert.invariant(!isInvokingRender, `${vmBeingRendered}.render() method has side effects on the state of ${vm}.${toString$1(key)}`);
+                assert.invariant(!isUpdatingTemplate, `Updating the template of ${vmBeingRendered} has side effects on the state of ${vm}.${toString$1(key)}`);
+            }
+            if (set) {
+                set.call(this, newValue);
+            }
+            else if (process.env.NODE_ENV !== 'production') {
+                assert.fail(`Invalid attempt to set a new value for property ${toString$1(key)} of ${vm} that does not has a setter decorated with @api.`);
+            }
+        },
+        enumerable,
+        configurable,
+    };
 }
 
 /*
@@ -2671,12 +2629,6 @@ function checkVersionMismatch(func, type) {
     }
 }
 
-/*
- * 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
- */
 const signedTemplateSet = new Set();
 function defaultEmptyTemplate() {
     return [];
@@ -2694,32 +2646,6 @@ function registerTemplate(tpl) {
         checkVersionMismatch(tpl, 'template');
     }
     signedTemplateSet.add(tpl);
-    // FIXME[@W-10950976]: the template object should be frozen, and it should not be possible to set
-    // the stylesheets or stylesheetToken(s). For backwards compat, though, we shim stylesheetTokens
-    // on top of stylesheetToken for anyone who is accessing the old internal API.
-    // Details: https://salesforce.quip.com/v1rmAFu2cKAr
-    defineProperty(tpl, '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;
-        },
-    });
     // chaining this method as a way to wrap existing
     // assignment of templates easily, without too much transformation
     return tpl;
@@ -4111,11 +4037,13 @@ function applyDomManual(elm, vnode) {
 function applyElementRestrictions(elm, vnode) {
   var _a, _b;
   if (process.env.NODE_ENV !== 'production') {
+    const isSynthetic = vnode.owner.shadowMode === 1 /* ShadowMode.Synthetic */;
     const isPortal = vnode.type === 2 /* VNodeType.Element */ && ((_b = (_a = vnode.data.context) === null || _a === void 0 ? void 0 : _a.lwc) === null || _b === void 0 ? void 0 : _b.dom) === "manual" /* LwcDomMode.Manual */;
     const isLight = vnode.owner.renderMode === 0 /* RenderMode.Light */;
     patchElementWithRestrictions(elm, {
       isPortal,
-      isLight
+      isLight,
+      isSynthetic
     });
   }
 }
@@ -4531,7 +4459,7 @@ function s(slotName, data, children, slotset) {
                     // undefined is for root components, but root components cannot accept slotted content
                     setVMBeingRendered(slotset.owner);
                     try {
-                        ArrayPush$1.apply(newChildren, vnode.factory(data.slotData));
+                        ArrayPush$1.call(newChildren, vnode.factory(data.slotData, data.key));
                     }
                     finally {
                         setVMBeingRendered(vmBeingRenderedInception);
@@ -5366,15 +5294,10 @@ function resetComponentStateWhenRemoved(vm) {
   } = vm;
   if (state !== 2 /* VMState.disconnected */) {
     const {
-      oar,
       tro
     } = vm;
     // Making sure that any observing record will not trigger the rehydrated on this vm
     tro.reset();
-    // Making sure that any observing accessor record will not trigger the setter to be reinvoked
-    for (const key in oar) {
-      oar[key].reset();
-    }
     runDisconnectedCallback(vm);
     // Spec: https://dom.spec.whatwg.org/#concept-node-remove (step 14-15)
     runChildNodesDisconnectedCallback(vm);
@@ -5427,7 +5350,6 @@ function createVM(elm, ctor, renderer, options) {
     cmpSlots: {
       slotAssignments: create(null)
     },
-    oar: create(null),
     cmpTemplate: null,
     hydrated: Boolean(hydrated),
     renderMode: def.renderMode,
@@ -6113,96 +6035,168 @@ 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',
-];
+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 = [
+// SEE `KEY__SCOPED_CSS` in @lwc/style-compiler
+'$scoped$'];
 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;
-    }
+  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;
+  }
 }
 let mutationWarningsSilenced = false;
-// Warn if the user tries to mutate tmpl.stylesheets, e.g.:
+// 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() {
-            logError(`Mutating the "stylesheets" array on a template function ` +
-                `is deprecated and may be removed in a future version of LWC.`);
-            // @ts-ignore
-            return originalArrayMethod.apply(this, arguments);
-        };
+  // 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() {
+      logError(`Mutating the "stylesheets" array on a template function ` + `is deprecated and may be removed in a future version of LWC.`);
+      // @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) {
+  // 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) {
+    let value = stylesheet[prop];
+    defineProperty(stylesheet, prop, {
+      enumerable: true,
+      configurable: true,
+      get() {
+        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.`);
+        value = newValue;
+      }
+    });
+  }
+}
+// Warn on either array or stylesheet (function) mutation, in a deeply-nested array
+function warnOnStylesheetsMutation(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 => {
+    freeze(subStylesheets);
+  });
+}
+// Deep-traverse an array (of arrays) of stylesheet factory functions, and call the callback for every array/function
+function traverseStylesheets(stylesheets, callback) {
+  callback(stylesheets);
+  for (let i = 0; i < stylesheets.length; i++) {
+    const stylesheet = stylesheets[i];
+    if (isArray$1(stylesheet)) {
+      traverseStylesheets(stylesheet, callback);
+    } else {
+      callback(stylesheet);
     }
+  }
 }
-// TODO [#2782]: eventually freezeTemplate() will _actually_ freeze the tmpl object. Today it
-// just warns on mutation.
 function freezeTemplate(tmpl) {
+  if (lwcRuntimeFlags.ENABLE_FROZEN_TEMPLATE) {
+    // Deep freeze the template
+    freeze(tmpl);
+    if (!isUndefined$1(tmpl.stylesheets)) {
+      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
     if (process.env.NODE_ENV !== 'production') {
-        if (!isUndefined$1(tmpl.stylesheets)) {
-            warnOnArrayMutation(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;
-            },
+      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;
+        }
+      });
     }
+  }
 }
-/* version: 2.32.0 */
+/* version: 2.32.1 */
 
 /*
  * Copyright (c) 2020, salesforce.com, inc.
@@ -6673,6 +6667,6 @@ function renderComponent(tagName, Ctor, props = {}) {
  */
 freeze(LightningElement);
 seal(LightningElement.prototype);
-/* version: 2.32.0 */
+/* version: 2.32.1 */
 
 export { LightningElement, api$1 as api, createContextProvider, freezeTemplate, getComponentDef, isComponentConstructor, parseFragment, parseFragment as parseSVGFragment, readonly, register, registerComponent, registerDecorators, registerTemplate, renderComponent, renderer, sanitizeAttribute, setFeatureFlag, setFeatureFlagForTest, setHooks, track, unwrap, wire };