lwc 2.31.1 → 2.32.1

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

@@ -347,9 +347,9 @@
    * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
    */
   // Increment whenever the LWC template compiler changes
-  const LWC_VERSION = "2.31.1";
+  const LWC_VERSION = "2.32.1";
   const LWC_VERSION_COMMENT_REGEX = /\/\*LWC compiler v([\d.]+)\*\/\s*}/;
-  /** version: 2.31.1 */
+  /** version: 2.32.1 */
 
   /**
    * Copyright (C) 2018 salesforce.com, inc.
@@ -431,7 +431,7 @@
           patch$1(propName);
       }
   }
-  /** version: 2.31.1 */
+  /** version: 2.32.1 */
 
   /**
    * Copyright (C) 2018 salesforce.com, inc.
@@ -445,19 +445,14 @@
    */
   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) });
@@ -511,7 +506,7 @@
           setFeatureFlag(name, value);
       }
   }
-  /** version: 2.31.1 */
+  /** version: 2.32.1 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -1082,7 +1077,7 @@
           }),
       };
       // 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');
@@ -2335,45 +2330,6 @@
           configurable: true,
       };
   }
-  class AccessorReactiveObserver extends ReactiveObserver {
-      constructor(vm, set) {
-          super(() => {
-              if (isFalse(this.debouncing)) {
-                  this.debouncing = true;
-                  addCallbackToNextTick(() => {
-                      if (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 (isTrue(vm.isDirty) && 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 new AccessorReactiveObserver(vm, set)
-          ;
-  }
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -2382,90 +2338,71 @@
    * 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;
-        }
-        componentValueObserved(vm, key);
-        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;
-        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 \`${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;
+              }
+              componentValueObserved(vm, key);
+              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;
+              componentValueMutated(vm, key);
+          },
+          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(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 (!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,
+      };
   }
 
   /*
@@ -2791,12 +2728,6 @@
       }
   }
 
-  /*
-   * 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 [];
@@ -2814,32 +2745,6 @@
           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;
@@ -4376,11 +4281,13 @@
   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
       });
     }
   }
@@ -4796,7 +4703,7 @@
                       // 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);
@@ -5676,15 +5583,10 @@
     } = 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);
@@ -5737,7 +5639,6 @@
       cmpSlots: {
         slotAssignments: create(null)
       },
-      oar: create(null),
       cmpTemplate: null,
       hydrated: Boolean(hydrated),
       renderMode: def.renderMode,
@@ -6918,94 +6819,166 @@
   // 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 (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;
-                  },
-              });
+    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;
           }
-          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;
-              },
+          // 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)) {
+          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;
+          }
+        });
       }
+    }
   }
 
   /*
@@ -7030,7 +7003,7 @@
       }
       return ctor;
   }
-  /* version: 2.31.1 */
+  /* version: 2.32.1 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -7881,25 +7854,25 @@
   // multiple times per tag name.
   const createUserConstructor = (HTMLElementToExtend, upgradeCallback, connectedCallback, disconnectedCallback) => {
     // TODO [#2972]: this class should expose observedAttributes as necessary
-    class UserConstructor extends HTMLElementToExtend {
+    return class UserConstructor extends HTMLElementToExtend {
       constructor() {
         super();
         upgradeCallback(this);
       }
-    }
-    // Do not unnecessarily add a connectedCallback/disconnectedCallback, as it introduces perf overhead
-    // See: https://github.com/salesforce/lwc/pull/3162#issuecomment-1311851174
-    if (!isUndefined$1(connectedCallback)) {
-      UserConstructor.prototype.connectedCallback = function () {
-        connectedCallback(this);
-      };
-    }
-    if (!isUndefined$1(disconnectedCallback)) {
-      UserConstructor.prototype.disconnectedCallback = function () {
-        disconnectedCallback(this);
-      };
-    }
-    return UserConstructor;
+      // Note that there is no need to do the "avoid defining connectedCallback/disconnectedCallback" optimization
+      // here, because in create-scoped-registry.ts, the registered class will always have these callbacks anyway.
+      // See: https://github.com/salesforce/lwc/pull/3162#issuecomment-1311851174
+      connectedCallback() {
+        if (!isUndefined$1(connectedCallback)) {
+          connectedCallback(this);
+        }
+      }
+      disconnectedCallback() {
+        if (!isUndefined$1(disconnectedCallback)) {
+          disconnectedCallback(this);
+        }
+      }
+    };
   };
   function createCustomElementScoped(tagName, upgradeCallback, connectedCallback, disconnectedCallback) {
     if (isUndefined$1(createScopedConstructor) || isUndefined$1(CachedHTMLElement)) {
@@ -8003,7 +7976,7 @@
       function isNull(obj) {
           return obj === null;
       }
-      /** version: 2.31.1 */
+      /** version: 2.32.1 */
 
       /*
        * Copyright (c) 2018, salesforce.com, inc.
@@ -8564,7 +8537,7 @@
   });
   freeze(LightningElement);
   seal(LightningElement.prototype);
-  /* version: 2.31.1 */
+  /* version: 2.32.1 */
 
   exports.LightningElement = LightningElement;
   exports.__unstable__ProfilerControl = profilerControl;