lwc 2.20.4 → 2.22.0

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

@@ -368,9 +368,9 @@
   // Increment whenever the LWC template compiler changes
 
 
-  var LWC_VERSION = "2.20.4";
+  var LWC_VERSION = "2.22.0";
   var LWC_VERSION_COMMENT_REGEX = /\/\*LWC compiler v([\d.]+)\*\/\s*}/;
-  /** version: 2.20.4 */
+  /** version: 2.22.0 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -549,7 +549,7 @@
       setFeatureFlag(name, value);
     }
   }
-  /** version: 2.20.4 */
+  /** version: 2.22.0 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -855,20 +855,24 @@
 
     return ReactiveObserver;
   }();
-  /*
-   * 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
-   */
-
 
   function componentValueMutated(vm, key) {
-    valueMutated(vm.component, key);
+    // On the server side, we don't need mutation tracking. Skipping it improves performance.
+    {
+      valueMutated(vm.component, key);
+    }
   }
 
   function componentValueObserved(vm, key) {
-    valueObserved(vm.component, key);
+    // On the server side, we don't need mutation tracking. Skipping it improves performance.
+    {
+      valueObserved(vm.component, key);
+    }
+  }
+
+  function createReactiveObserver(callback) {
+    // On the server side, we don't need mutation tracking. Skipping it improves performance.
+    return new ReactiveObserver(callback);
   }
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -2283,8 +2287,28 @@
    */
 
   function unwrap(value) {
+    // On the server side, we don't need mutation tracking. Skipping it improves performance.
     return reactiveMembrane.unwrapProxy(value);
   }
+
+  function getReadOnlyProxy(value) {
+    // We must return a frozen wrapper around the value, so that child components cannot mutate properties passed to
+    // them from their parents. This applies to both the client and server.
+    return reactiveMembrane.getReadOnlyProxy(value);
+  }
+
+  function getReactiveProxy(value) {
+    // On the server side, we don't need mutation tracking. Skipping it improves performance.
+    return reactiveMembrane.getProxy(value);
+  } // Making the component instance a live value when using Locker to support expandos.
+
+
+  function markLockerLiveObject(obj) {
+    // On the server side, we don't need mutation tracking. Skipping it improves performance.
+    {
+      obj[lockerLivePropertyKey] = undefined;
+    }
+  }
   /*
    * Copyright (c) 2018, salesforce.com, inc.
    * All rights reserved.
@@ -2399,10 +2423,9 @@
       vm.callHook = _callHook;
       vm.setHook = _setHook;
       vm.getHook = _getHook;
-    } // Making the component instance a live value when using Locker to support expandos.
-
+    }
 
-    this[lockerLivePropertyKey] = undefined; // Linking elm, shadow root and component with the VM.
+    markLockerLiveObject(this); // Linking elm, shadow root and component with the VM.
 
     associateVM(component, vm);
     associateVM(elm, vm);
@@ -2742,55 +2765,6 @@
       configurable: true
     };
   }
-  /*
-   * 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
-   */
-
-
-  function api$1() {
-    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: function get() {
-        var vm = getAssociatedVM(this);
-
-        if (isBeingConstructed(vm)) {
-          if (process.env.NODE_ENV !== 'production') {
-            logError("Can\u2019t read the value of property `".concat(toString$1(key), "` from the constructor because the owner component hasn\u2019t 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: function set(newValue) {
-        var vm = getAssociatedVM(this);
-
-        if (process.env.NODE_ENV !== 'production') {
-          var _vmBeingRendered3 = getVMBeingRendered();
-
-          assert.invariant(!isInvokingRender, "".concat(_vmBeingRendered3, ".render() method has side effects on the state of ").concat(vm, ".").concat(toString$1(key)));
-          assert.invariant(!isUpdatingTemplate, "Updating the template of ".concat(_vmBeingRendered3, " has side effects on the state of ").concat(vm, ".").concat(toString$1(key)));
-        }
-
-        vm.cmpProps[key] = newValue;
-        componentValueMutated(vm, key);
-      },
-      enumerable: true,
-      configurable: true
-    };
-  }
 
   var AccessorReactiveObserver = /*#__PURE__*/function (_ReactiveObserver) {
     _inherits(AccessorReactiveObserver, _ReactiveObserver);
@@ -2849,6 +2823,60 @@
     return AccessorReactiveObserver;
   }(ReactiveObserver);
 
+  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.
+   * 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
+   */
+
+
+  function api$1() {
+    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: function get() {
+        var vm = getAssociatedVM(this);
+
+        if (isBeingConstructed(vm)) {
+          if (process.env.NODE_ENV !== 'production') {
+            logError("Can\u2019t read the value of property `".concat(toString$1(key), "` from the constructor because the owner component hasn\u2019t 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: function set(newValue) {
+        var vm = getAssociatedVM(this);
+
+        if (process.env.NODE_ENV !== 'production') {
+          var _vmBeingRendered3 = getVMBeingRendered();
+
+          assert.invariant(!isInvokingRender, "".concat(_vmBeingRendered3, ".render() method has side effects on the state of ").concat(vm, ".").concat(toString$1(key)));
+          assert.invariant(!isUpdatingTemplate, "Updating the template of ".concat(_vmBeingRendered3, " has side effects on the state of ").concat(vm, ".").concat(toString$1(key)));
+        }
+
+        vm.cmpProps[key] = newValue;
+        componentValueMutated(vm, key);
+      },
+      enumerable: true,
+      configurable: true
+    };
+  }
+
   function createPublicAccessorDescriptor(key, descriptor) {
     var _get3 = descriptor.get,
         _set2 = descriptor.set,
@@ -2889,7 +2917,7 @@
             var ro = vm.oar[key];
 
             if (isUndefined$1(ro)) {
-              ro = vm.oar[key] = new AccessorReactiveObserver(vm, _set2);
+              ro = vm.oar[key] = createAccessorReactiveObserver(vm, _set2);
             } // 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
@@ -2921,7 +2949,7 @@
 
   function track(target) {
     if (arguments.length === 1) {
-      return reactiveMembrane.getProxy(target);
+      return getReactiveProxy(target);
     }
 
     if (process.env.NODE_ENV !== 'production') {
@@ -2948,7 +2976,7 @@
           assert.invariant(!isUpdatingTemplate, "Updating the template of ".concat(_vmBeingRendered5, " has side effects on the state of ").concat(vm, ".").concat(toString$1(key)));
         }
 
-        var reactiveOrAnyValue = reactiveMembrane.getProxy(newValue);
+        var reactiveOrAnyValue = getReactiveProxy(newValue);
 
         if (reactiveOrAnyValue !== vm.cmpFields[key]) {
           vm.cmpFields[key] = reactiveOrAnyValue;
@@ -3423,7 +3451,7 @@
       fn = cachedSetterByKey[key] = function (newValue) {
         var vm = getAssociatedVM(this);
         var setHook = vm.setHook;
-        newValue = reactiveMembrane.getReadOnlyProxy(newValue);
+        newValue = getReadOnlyProxy(newValue);
         setHook(vm.component, key, newValue);
       };
     }
@@ -4855,10 +4883,11 @@
         svg = vnode.data.svg;
     var createElement = renderer.createElement;
     var namespace = isTrue(svg) ? SVG_NAMESPACE : undefined;
-    var elm = createElement(sel, namespace);
+    var elm = vnode.elm = createElement(sel, namespace);
     linkNodeToShadow(elm, owner, renderer);
-    fallbackElmHook(elm, vnode, renderer);
-    vnode.elm = elm;
+    applyStyleScoping(elm, owner, renderer);
+    applyDomManual(elm, vnode);
+    applyElementRestrictions(elm, vnode);
     patchElementPropsAndAttrs$1(null, vnode, renderer);
     insertNode(elm, parent, anchor, renderer);
     mountVNodes(vnode.children, elm, renderer, null);
@@ -4875,7 +4904,8 @@
     var cloneNode = renderer.cloneNode,
         isSyntheticShadowDefined = renderer.isSyntheticShadowDefined;
     var elm = vnode.elm = cloneNode(vnode.fragment, true);
-    linkNodeToShadow(elm, owner, renderer); // Marks this node as Static to propagate the shadow resolver. must happen after elm is assigned to the proper shadow
+    linkNodeToShadow(elm, owner, renderer);
+    applyElementRestrictions(elm, vnode); // Marks this node as Static to propagate the shadow resolver. must happen after elm is assigned to the proper shadow
 
     var renderMode = owner.renderMode,
         shadowMode = owner.shadowMode;
@@ -4890,16 +4920,6 @@
       }
     }
 
-    if (process.env.NODE_ENV !== 'production') {
-      var isLight = renderMode === 0
-      /* RenderMode.Light */
-      ;
-      patchElementWithRestrictions(elm, {
-        isPortal: false,
-        isLight: isLight
-      });
-    }
-
     insertNode(elm, parent, anchor, renderer);
   }
 
@@ -4919,9 +4939,10 @@
       // the custom element from the registry is expecting an upgrade callback
       vm = createViewModelHook(elm, vnode, renderer);
     });
-    linkNodeToShadow(elm, owner, renderer);
     vnode.elm = elm;
     vnode.vm = vm;
+    linkNodeToShadow(elm, owner, renderer);
+    applyStyleScoping(elm, owner, renderer);
 
     if (vm) {
       allocateChildren(vnode, vm);
@@ -5043,26 +5064,6 @@
     return vnode != null;
   }
 
-  function observeElementChildNodes(elm) {
-    elm.$domManual$ = true;
-  }
-
-  function setElementShadowToken(elm, token) {
-    elm.$shadowToken$ = token;
-  } // Set the scope token class for *.scoped.css styles
-
-
-  function setScopeTokenClassIfNecessary(elm, owner, renderer) {
-    var token = getScopeTokenClass(owner);
-
-    if (!isNull(token)) {
-      var _getClassList = renderer.getClassList; // TODO [#2762]: this dot notation with add is probably problematic
-      // probably we should have a renderer api for just the add operation
-
-      _getClassList(elm).add(token);
-    }
-  }
-
   function linkNodeToShadow(elm, owner, renderer) {
     var renderRoot = owner.renderRoot,
         renderMode = owner.renderMode,
@@ -5135,36 +5136,52 @@
     patchProps(oldVnode, vnode, renderer);
   }
 
-  function fallbackElmHook(elm, vnode, renderer) {
-    var owner = vnode.owner;
-    setScopeTokenClassIfNecessary(elm, owner, renderer);
+  function applyStyleScoping(elm, owner, renderer) {
+    // Set the class name for `*.scoped.css` style scoping.
+    var scopeToken = getScopeTokenClass(owner);
+
+    if (!isNull(scopeToken)) {
+      var _getClassList = renderer.getClassList; // TODO [#2762]: this dot notation with add is probably problematic
+      // probably we should have a renderer api for just the add operation
+
+      _getClassList(elm).add(scopeToken);
+    } // Set property element for synthetic shadow DOM style scoping.
+
+
+    var syntheticToken = owner.context.stylesheetToken;
 
     if (owner.shadowMode === 1
     /* ShadowMode.Synthetic */
-    ) {
-      var context = vnode.data.context;
-      var stylesheetToken = owner.context.stylesheetToken;
+    && !isUndefined$1(syntheticToken)) {
+      elm.$shadowToken$ = syntheticToken;
+    }
+  }
 
-      if (!isUndefined$1(context) && !isUndefined$1(context.lwc) && context.lwc.dom === "manual"
-      /* LwcDomMode.Manual */
-      ) {
-        // this element will now accept any manual content inserted into it
-        observeElementChildNodes(elm);
-      }
+  function applyDomManual(elm, vnode) {
+    var _a;
 
-      if (!isUndefined$1(stylesheetToken)) {
-        // when running in synthetic shadow mode, we need to set the shadowToken value
-        // into each element from the template, so they can be styled accordingly.
-        setElementShadowToken(elm, stylesheetToken);
-      }
+    var owner = vnode.owner,
+        context = vnode.data.context;
+
+    if (owner.shadowMode === 1
+    /* ShadowMode.Synthetic */
+    && ((_a = context === null || context === void 0 ? void 0 : context.lwc) === null || _a === void 0 ? void 0 : _a.dom) === "manual"
+    /* LwcDomMode.Manual */
+    ) {
+      elm.$domManual$ = true;
     }
+  }
+
+  function applyElementRestrictions(elm, vnode) {
+    var _a, _b;
 
     if (process.env.NODE_ENV !== 'production') {
-      var _context = vnode.data.context;
-      var isPortal = !isUndefined$1(_context) && !isUndefined$1(_context.lwc) && _context.lwc.dom === "manual"
+      var 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 */
       ;
-      var isLight = owner.renderMode === 0
+      var isLight = vnode.owner.renderMode === 0
       /* RenderMode.Light */
       ;
       patchElementWithRestrictions(elm, {
@@ -5217,19 +5234,6 @@
         mode = vnode.mode,
         ctor = vnode.ctor,
         owner = vnode.owner;
-    setScopeTokenClassIfNecessary(elm, owner, renderer);
-
-    if (owner.shadowMode === 1
-    /* ShadowMode.Synthetic */
-    ) {
-      var stylesheetToken = owner.context.stylesheetToken; // when running in synthetic shadow mode, we need to set the shadowToken value
-      // into each element from the template, so they can be styled accordingly.
-
-      if (!isUndefined$1(stylesheetToken)) {
-        setElementShadowToken(elm, stylesheetToken);
-      }
-    }
-
     vm = createVM(elm, ctor, renderer, {
       mode: mode,
       owner: owner,
@@ -6496,7 +6500,7 @@
   }
 
   function getTemplateReactiveObserver(vm) {
-    return new ReactiveObserver(function () {
+    return createReactiveObserver(function () {
       var isDirty = vm.isDirty;
 
       if (isFalse(isDirty)) {
@@ -7315,7 +7319,7 @@
   function createConfigWatcher(component, configCallback, callbackWhenConfigIsReady) {
     var hasPendingConfig = false; // creating the reactive observer for reactive params when needed
 
-    var ro = new ReactiveObserver(function () {
+    var ro = createReactiveObserver(function () {
       if (hasPendingConfig === false) {
         hasPendingConfig = true; // collect new config in the micro-task
 
@@ -7616,7 +7620,7 @@
       }
     }
 
-    return reactiveMembrane.getReadOnlyProxy(obj);
+    return getReadOnlyProxy(obj);
   }
   /*
    * Copyright (c) 2022, salesforce.com, inc.
@@ -8297,7 +8301,7 @@
 
     return ctor;
   }
-  /* version: 2.20.4 */
+  /* version: 2.22.0 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -8465,6 +8469,85 @@
    */
 
 
+  var SUPPORTS_TEMPLATE = typeof HTMLTemplateElement === 'function';
+  var createFragment;
+
+  if (SUPPORTS_TEMPLATE) {
+    // Parse the fragment HTML string into DOM
+    createFragment = function createFragment(html) {
+      var template = document.createElement('template');
+      template.innerHTML = html;
+      return template.content.firstChild;
+    };
+  } else {
+    // In browsers that don't support <template> (e.g. IE11), we need to be careful to wrap elements like
+    // <td> in the proper container elements (e.g. <tbody>), because otherwise they will be parsed as null.
+    // Via https://github.com/webcomponents/polyfills/blob/ee1db33/packages/template/template.js#L273-L280
+    // With other elements added from:
+    // https://github.com/sindresorhus/html-tags/blob/95dcdd5/index.js
+    // Using the test:
+    // document.createRange().createContextualFragment(`<${tag}></${tag}>`).firstChild === null
+    // And omitting <html>, <head>, and <body> as these are not practical in an LWC component.
+    var topLevelWrappingMap = {
+      caption: ['table'],
+      col: ['colgroup', 'table'],
+      colgroup: ['table'],
+      option: ['select'],
+      tbody: ['table'],
+      td: ['tr', 'tbody', 'table'],
+      th: ['tr', 'tbody', 'table'],
+      thead: ['table'],
+      tfoot: ['table'],
+      tr: ['tbody', 'table']
+    }; // Via https://github.com/webcomponents/polyfills/blob/ee1db33/packages/template/template.js#L282-L288
+
+    var getTagName = function getTagName(text) {
+      return (/<([a-z][^/\0>\x20\t\r\n\f]+)/i.exec(text) || ['', ''])[1].toLowerCase();
+    }; // Via https://github.com/webcomponents/polyfills/blob/ee1db33/packages/template/template.js#L295-L320
+
+
+    createFragment = function createFragment(html) {
+      var wrapperTags = topLevelWrappingMap[getTagName(html)];
+
+      if (!isUndefined$1(wrapperTags)) {
+        var _iterator5 = _createForOfIteratorHelper(wrapperTags),
+            _step5;
+
+        try {
+          for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
+            var wrapperTag = _step5.value;
+            html = "<".concat(wrapperTag, ">").concat(html, "</").concat(wrapperTag, ">");
+          }
+        } catch (err) {
+          _iterator5.e(err);
+        } finally {
+          _iterator5.f();
+        }
+      } // For IE11, the document title must not be undefined, but it can be an empty string
+      // https://developer.mozilla.org/en-US/docs/Web/API/DOMImplementation/createHTMLDocument#browser_compatibility
+
+
+      var doc = document.implementation.createHTMLDocument('');
+      doc.body.innerHTML = html;
+      var content = doc.body;
+
+      if (!isUndefined$1(wrapperTags)) {
+        for (var _i32 = 0; _i32 < wrapperTags.length; _i32++) {
+          content = content.firstChild;
+        }
+      }
+
+      return content.firstChild;
+    };
+  }
+  /*
+   * 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
+   */
+
+
   var getCustomElement;
   var defineCustomElement;
   var HTMLElementConstructor;
@@ -8565,10 +8648,6 @@
     return node.cloneNode(deep);
   }
 
-  function createFragment(html) {
-    return document.createRange().createContextualFragment(html).firstChild;
-  }
-
   function createElement$1(tagName, namespace) {
     return isUndefined$1(namespace) ? document.createElement(tagName) : document.createElementNS(namespace, tagName);
   }
@@ -8793,8 +8872,8 @@
       hydrated: true
     });
 
-    for (var _i32 = 0, _Object$entries2 = Object.entries(props); _i32 < _Object$entries2.length; _i32++) {
-      var _Object$entries2$_i = _slicedToArray(_Object$entries2[_i32], 2),
+    for (var _i33 = 0, _Object$entries2 = Object.entries(props); _i33 < _Object$entries2.length; _i33++) {
+      var _Object$entries2$_i = _slicedToArray(_Object$entries2[_i33], 2),
           key = _Object$entries2$_i[0],
           value = _Object$entries2$_i[1];
 
@@ -9126,7 +9205,7 @@
   });
   freeze(LightningElement);
   seal(LightningElement.prototype);
-  /* version: 2.20.4 */
+  /* version: 2.22.0 */
 
   exports.LightningElement = LightningElement;
   exports.__unstable__ProfilerControl = profilerControl;