@lwc/engine-core 2.31.1 → 2.32.1

package/dist/engine-core.cjs.js

@@ -562,7 +562,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 = shared.getPropertyDescriptor(elm, 'nodeValue');
         const originalInnerHTMLDescriptor = shared.getPropertyDescriptor(elm, 'innerHTML');
@@ -1816,60 +1816,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() { },
-};
-class AccessorReactiveObserver extends ReactiveObserver {
-    constructor(vm, set) {
-        super(() => {
-            if (shared.isFalse(this.debouncing)) {
-                this.debouncing = true;
-                addCallbackToNextTick(() => {
-                    if (shared.isTrue(this.debouncing)) {
-                        const { value } = this;
-                        const { isDirty: dirtyStateBeforeSetterCall, component, idx } = vm;
-                        set.call(component, value);
-                        // de-bouncing after the call to the original setter to prevent
-                        // infinity loop if the setter itself is mutating things that
-                        // were accessed during the previous invocation.
-                        this.debouncing = false;
-                        if (shared.isTrue(vm.isDirty) && shared.isFalse(dirtyStateBeforeSetterCall) && idx > 0) {
-                            // immediate rehydration due to a setter driven mutation, otherwise
-                            // the component will get rendered on the second tick, which it is not
-                            // desirable.
-                            rerenderVM(vm);
-                        }
-                    }
-                });
-            }
-        });
-        this.debouncing = false;
-    }
-    reset(value) {
-        super.reset();
-        this.debouncing = false;
-        if (arguments.length > 0) {
-            this.value = value;
-        }
-    }
-}
-function createAccessorReactiveObserver(vm, set) {
-    // On the server side, we don't need mutation tracking. Skipping it improves performance.
-    return process.env.IS_BROWSER
-        ? new AccessorReactiveObserver(vm, set)
-        : DUMMY_ACCESSOR_REACTIVE_OBSERVER;
-}
-
 /*
  * Copyright (c) 2018, salesforce.com, inc.
  * All rights reserved.
@@ -1877,90 +1823,71 @@ 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') {
-    shared.assert.fail(`@api decorator can only be used as a decorator function.`);
-  }
-  throw new Error();
+    if (process.env.NODE_ENV !== 'production') {
+        shared.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 \`${shared.toString(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;
-      }
-      componentValueObserved(vm, key);
-      return vm.cmpProps[key];
-    },
-    set(newValue) {
-      const vm = getAssociatedVM(this);
-      if (process.env.NODE_ENV !== 'production') {
-        const vmBeingRendered = getVMBeingRendered();
-        shared.assert.invariant(!isInvokingRender, `${vmBeingRendered}.render() method has side effects on the state of ${vm}.${shared.toString(key)}`);
-        shared.assert.invariant(!isUpdatingTemplate, `Updating the template of ${vmBeingRendered} has side effects on the state of ${vm}.${shared.toString(key)}`);
-      }
-      vm.cmpProps[key] = newValue;
-      componentValueMutated(vm, key);
-    },
-    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 \`${shared.toString(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;
+            }
+            componentValueObserved(vm, key);
+            return vm.cmpProps[key];
+        },
+        set(newValue) {
+            const vm = getAssociatedVM(this);
+            if (process.env.NODE_ENV !== 'production') {
+                const vmBeingRendered = getVMBeingRendered();
+                shared.assert.invariant(!isInvokingRender, `${vmBeingRendered}.render() method has side effects on the state of ${vm}.${shared.toString(key)}`);
+                shared.assert.invariant(!isUpdatingTemplate, `Updating the template of ${vmBeingRendered} has side effects on the state of ${vm}.${shared.toString(key)}`);
+            }
+            vm.cmpProps[key] = newValue;
+            componentValueMutated(vm, key);
+        },
+        enumerable: true,
+        configurable: true,
+    };
 }
 function createPublicAccessorDescriptor(key, descriptor) {
-  const {
-    get,
-    set,
-    enumerable,
-    configurable
-  } = descriptor;
-  if (!shared.isFunction(get)) {
-    if (process.env.NODE_ENV !== 'production') {
-      shared.assert.invariant(shared.isFunction(get), `Invalid compiler output for public accessor ${shared.toString(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();
-        shared.assert.invariant(!isInvokingRender, `${vmBeingRendered}.render() method has side effects on the state of ${vm}.${shared.toString(key)}`);
-        shared.assert.invariant(!isUpdatingTemplate, `Updating the template of ${vmBeingRendered} has side effects on the state of ${vm}.${shared.toString(key)}`);
-      }
-      if (set) {
-        if (features.lwcRuntimeFlags.ENABLE_REACTIVE_SETTER) {
-          let ro = vm.oar[key];
-          if (shared.isUndefined(ro)) {
-            ro = vm.oar[key] = createAccessorReactiveObserver(vm, set);
-          }
-          // 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 (!shared.isFunction(get)) {
+        if (process.env.NODE_ENV !== 'production') {
+            shared.assert.invariant(shared.isFunction(get), `Invalid compiler output for public accessor ${shared.toString(key)} decorated with @api`);
         }
-      } else if (process.env.NODE_ENV !== 'production') {
-        shared.assert.fail(`Invalid attempt to set a new value for property ${shared.toString(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();
+                shared.assert.invariant(!isInvokingRender, `${vmBeingRendered}.render() method has side effects on the state of ${vm}.${shared.toString(key)}`);
+                shared.assert.invariant(!isUpdatingTemplate, `Updating the template of ${vmBeingRendered} has side effects on the state of ${vm}.${shared.toString(key)}`);
+            }
+            if (set) {
+                set.call(this, newValue);
+            }
+            else if (process.env.NODE_ENV !== 'production') {
+                shared.assert.fail(`Invalid attempt to set a new value for property ${shared.toString(key)} of ${vm} that does not has a setter decorated with @api.`);
+            }
+        },
+        enumerable,
+        configurable,
+    };
 }
 
 /*
@@ -2286,12 +2213,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 [];
@@ -2309,32 +2230,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
-    shared.defineProperty(tpl, '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;
-        },
-    });
     // chaining this method as a way to wrap existing
     // assignment of templates easily, without too much transformation
     return tpl;
@@ -3875,11 +3770,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
     });
   }
 }
@@ -4295,7 +4192,7 @@ function s(slotName, data, children, slotset) {
                     // undefined is for root components, but root components cannot accept slotted content
                     setVMBeingRendered(slotset.owner);
                     try {
-                        shared.ArrayPush.apply(newChildren, vnode.factory(data.slotData));
+                        shared.ArrayPush.call(newChildren, vnode.factory(data.slotData, data.key));
                     }
                     finally {
                         setVMBeingRendered(vmBeingRenderedInception);
@@ -5175,15 +5072,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);
@@ -5236,7 +5128,6 @@ function createVM(elm, ctor, renderer, options) {
     cmpSlots: {
       slotAssignments: shared.create(null)
     },
-    oar: shared.create(null),
     cmpTemplate: null,
     hydrated: Boolean(hydrated),
     renderMode: def.renderMode,
@@ -6420,94 +6311,166 @@ 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 shared.ArrayPop;
-        case 'push':
-            return shared.ArrayPush;
-        case 'shift':
-            return shared.ArrayShift;
-        case 'unshift':
-            return shared.ArrayUnshift;
-        case 'reverse':
-            return shared.ArrayReverse;
-        case 'sort':
-            return shared.ArraySort;
-        case 'fill':
-            return shared.ArrayFill;
-        case 'splice':
-            return shared.ArraySplice;
-        case 'copyWithin':
-            return shared.ArrayCopyWithin;
-    }
+  switch (prop) {
+    case 'pop':
+      return shared.ArrayPop;
+    case 'push':
+      return shared.ArrayPush;
+    case 'shift':
+      return shared.ArrayShift;
+    case 'unshift':
+      return shared.ArrayUnshift;
+    case 'reverse':
+      return shared.ArrayReverse;
+    case 'sort':
+      return shared.ArraySort;
+    case 'fill':
+      return shared.ArrayFill;
+    case 'splice':
+      return shared.ArraySplice;
+    case 'copyWithin':
+      return shared.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];
+    shared.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 (shared.isArray(subStylesheets)) {
+      warnOnArrayMutation(subStylesheets);
+    } else {
+      warnOnStylesheetFunctionMutation(subStylesheets);
     }
+  });
+}
+// Deeply freeze the entire array (of arrays) of stylesheet factory functions
+function deepFreeze(stylesheets) {
+  traverseStylesheets(stylesheets, subStylesheets => {
+    shared.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 (shared.isArray(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 (features.lwcRuntimeFlags.ENABLE_FROZEN_TEMPLATE) {
+    // Deep freeze the template
+    shared.freeze(tmpl);
+    if (!shared.isUndefined(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
+    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
     if (process.env.NODE_ENV !== 'production') {
-        if (!shared.isUndefined(tmpl.stylesheets)) {
-            warnOnArrayMutation(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;
-            },
+      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;
+        }
+      });
     }
+  }
 }
 
 /*
@@ -6570,4 +6533,4 @@ exports.swapTemplate = swapTemplate;
 exports.track = track;
 exports.unwrap = unwrap;
 exports.wire = wire;
-/* version: 2.31.1 */
+/* version: 2.32.1 */