lwc 2.13.3 → 2.14.1

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

@@ -49,7 +49,7 @@
    */
   const { assign, create, defineProperties, defineProperty, freeze, getOwnPropertyDescriptor: getOwnPropertyDescriptor$1, getOwnPropertyNames: getOwnPropertyNames$1, getPrototypeOf: getPrototypeOf$1, hasOwnProperty: hasOwnProperty$1, isFrozen, keys, seal, setPrototypeOf, } = Object;
   const { isArray: isArray$1 } = Array;
-  const { filter: ArrayFilter, find: ArrayFind, indexOf: ArrayIndexOf, join: ArrayJoin, map: ArrayMap, push: ArrayPush$1, reduce: ArrayReduce, reverse: ArrayReverse, slice: ArraySlice, splice: ArraySplice, unshift: ArrayUnshift, forEach, } = Array.prototype;
+  const { copyWithin: ArrayCopyWithin, fill: ArrayFill, filter: ArrayFilter, find: ArrayFind, indexOf: ArrayIndexOf, join: ArrayJoin, map: ArrayMap, pop: ArrayPop, push: ArrayPush$1, reduce: ArrayReduce, reverse: ArrayReverse, shift: ArrayShift, slice: ArraySlice, sort: ArraySort, splice: ArraySplice, unshift: ArrayUnshift, forEach, } = Array.prototype;
   const { fromCharCode: StringFromCharCode } = String;
   const { charCodeAt: StringCharCodeAt, replace: StringReplace, slice: StringSlice, toLowerCase: StringToLowerCase, } = String.prototype;
   function isUndefined$1(obj) {
@@ -293,7 +293,7 @@
   const XML_NAMESPACE = 'http://www.w3.org/XML/1998/namespace';
   const SVG_NAMESPACE = 'http://www.w3.org/2000/svg';
   const XLINK_NAMESPACE = 'http://www.w3.org/1999/xlink';
-  /** version: 2.13.3 */
+  /** version: 2.14.1 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -383,6 +383,7 @@
    * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
    */
   const features = {
+      DUMMY_TEST_FLAG: null,
       ENABLE_ELEMENT_PATCH: null,
       ENABLE_FORCE_NATIVE_SHADOW_MODE_FOR_TEST: null,
       ENABLE_HMR: null,
@@ -436,9 +437,6 @@
    */
   function setFeatureFlagForTest(name, value) {
   }
-  /** version: 2.13.3 */
-
-  /* proxy-compat-disable */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -518,10 +516,6 @@
   function setHTMLElement(HTMLElementImpl) {
       HTMLElementExported$1 = HTMLElementImpl;
   }
-  let isHydrating$1;
-  function setIsHydrating$1(isHydratingImpl) {
-      isHydrating$1 = isHydratingImpl;
-  }
   let insert$1;
   function setInsert(insertImpl) {
       insert$1 = insertImpl;
@@ -642,10 +636,6 @@
   function setIsConnected(isConnectedImpl) {
       isConnected$1 = isConnectedImpl;
   }
-  let insertGlobalStylesheet$1;
-  function setInsertGlobalStylesheet(insertGlobalStylesheetImpl) {
-      insertGlobalStylesheet$1 = insertGlobalStylesheetImpl;
-  }
   let insertStylesheet$1;
   function setInsertStylesheet(insertStylesheetImpl) {
       insertStylesheet$1 = insertStylesheetImpl;
@@ -2079,6 +2069,8 @@
       // 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)) {
@@ -2871,16 +2863,20 @@
       }
   }
   function unmount(vnode, parent, doRemove = false) {
-      const { type, elm } = vnode;
+      const { type, elm, sel } = vnode;
       // When unmounting a VNode subtree not all the elements have to removed from the DOM. The
       // subtree root, is the only element worth unmounting from the subtree.
       if (doRemove) {
           removeNode(elm, parent);
       }
       switch (type) {
-          case 2 /* Element */:
-              unmountVNodes(vnode.children, elm);
+          case 2 /* Element */: {
+              // Slot content is removed to trigger slotchange event when removing slot.
+              // Only required for synthetic shadow.
+              const removeChildren = sel === 'slot' && vnode.owner.shadowMode === 1 /* Synthetic */;
+              unmountVNodes(vnode.children, elm, removeChildren);
               break;
+          }
           case 3 /* CustomElement */: {
               const { vm } = vnode;
               // No need to unmount the children here, `removeVM` will take care of removing the
@@ -3647,10 +3643,10 @@
       const { renderMode, shadowMode } = vm;
       if (renderMode === 1 /* Shadow */ && shadowMode === 1 /* Synthetic */) {
           for (let i = 0; i < stylesheets.length; i++) {
-              insertGlobalStylesheet$1(stylesheets[i]);
+              insertStylesheet$1(stylesheets[i]);
           }
       }
-      else if (ssr$1 || isHydrating$1()) {
+      else if (ssr$1 || vm.hydrated) {
           // Note: We need to ensure that during hydration, the stylesheets method is the same as those in ssr.
           //       This works in the client, because the stylesheets are created, and cached in the VM
           //       the first time the VM renders.
@@ -3661,15 +3657,10 @@
       else {
           // native shadow or light DOM, DOM renderer
           const root = getNearestNativeShadowComponent(vm);
-          const isGlobal = isNull(root);
+          // null root means a global style
+          const target = isNull(root) ? undefined : root.shadowRoot;
           for (let i = 0; i < stylesheets.length; i++) {
-              if (isGlobal) {
-                  insertGlobalStylesheet$1(stylesheets[i]);
-              }
-              else {
-                  // local level
-                  insertStylesheet$1(stylesheets[i], root.shadowRoot);
-              }
+              insertStylesheet$1(stylesheets[i], target);
           }
       }
       return null;
@@ -4068,13 +4059,25 @@
 
     resetComponentStateWhenRemoved(vm);
   }
-  function createVM(elm, ctor, options) {
-    var _a;
 
+  function getNearestShadowAncestor(vm) {
+    let ancestor = vm.owner;
+
+    while (!isNull(ancestor) && ancestor.renderMode === 0
+    /* Light */
+    ) {
+      ancestor = ancestor.owner;
+    }
+
+    return ancestor;
+  }
+
+  function createVM(elm, ctor, options) {
     const {
       mode,
       owner,
-      tagName
+      tagName,
+      hydrated
     } = options;
     const def = getComponentInternalDef(ctor);
     const vm = {
@@ -4097,9 +4100,8 @@
       cmpSlots: create(null),
       oar: create(null),
       cmpTemplate: null,
+      hydrated: Boolean(hydrated),
       renderMode: def.renderMode,
-      shadowMode: computeShadowMode(def, owner),
-      nearestShadowMode: (owner === null || owner === void 0 ? void 0 : owner.shadowRoot) ? owner.shadowMode : (_a = owner === null || owner === void 0 ? void 0 : owner.nearestShadowMode) !== null && _a !== void 0 ? _a : null,
       context: {
         stylesheetToken: undefined,
         hasTokenInClass: undefined,
@@ -4112,6 +4114,7 @@
       },
       // Properties set right after VM creation.
       tro: null,
+      shadowMode: null,
       // Properties set by the LightningElement constructor.
       component: null,
       shadowRoot: null,
@@ -4120,6 +4123,7 @@
       setHook,
       getHook
     };
+    vm.shadowMode = computeShadowMode(vm);
     vm.tro = getTemplateReactiveObserver(vm);
 
 
@@ -4132,9 +4136,10 @@
     return vm;
   }
 
-  function computeShadowMode(def, owner) {
-    var _a;
-
+  function computeShadowMode(vm) {
+    const {
+      def
+    } = vm;
     let shadowMode;
 
     if (isSyntheticShadowDefined$1) {
@@ -4157,13 +4162,23 @@
             /* Native */
             ;
           } else {
-            // Transitive support for native Shadow DOM. A component in native mode
-            // transitively opts all of its descendants into native.
-            // Synthetic if neither this component nor any of its ancestors are configured
-            // to be native.
-            shadowMode = (_a = owner === null || owner === void 0 ? void 0 : owner.nearestShadowMode) !== null && _a !== void 0 ? _a : 1
-            /* Synthetic */
-            ;
+            const shadowAncestor = getNearestShadowAncestor(vm);
+
+            if (!isNull(shadowAncestor) && shadowAncestor.shadowMode === 0
+            /* Native */
+            ) {
+              // Transitive support for native Shadow DOM. A component in native mode
+              // transitively opts all of its descendants into native.
+              shadowMode = 0
+              /* Native */
+              ;
+            } else {
+              // Synthetic if neither this component nor any of its ancestors are configured
+              // to be native.
+              shadowMode = 1
+              /* Synthetic */
+              ;
+            }
           }
         } else {
           shadowMode = 1
@@ -4990,6 +5005,7 @@
           mode,
           owner,
           tagName: sel,
+          hydrated: true,
       });
       vnode.elm = elm;
       vnode.vm = vm;
@@ -5139,6 +5155,10 @@
       hooksAreSet = true;
       setSanitizeHtmlContentHook(hooks.sanitizeHtmlContent);
   }
+  // TODO [#2782]: eventually freezeTemplate() will _actually_ freeze the tmpl object. Today it
+  // just warns on mutation.
+  function freezeTemplate(tmpl) {
+  }
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -5162,7 +5182,7 @@
       }
       return ctor;
   }
-  /* version: 2.13.3 */
+  /* version: 2.14.1 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -5170,17 +5190,138 @@
    * SPDX-License-Identifier: MIT
    * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
    */
-  const globalStylesheets = create(null);
-  const globalStylesheetsParentElement = document.head || document.body || document;
-  // This check for constructable stylesheets is similar to Fast's:
+  //
+  // Feature detection
+  //
+  // This check for constructable style sheets is similar to Fast's:
   // https://github.com/microsoft/fast/blob/d49d1ec/packages/web-components/fast-element/src/dom.ts#L51-L53
   // See also: https://github.com/whatwg/webidl/issues/1027#issuecomment-934510070
-  const supportsConstructableStyleSheets = isFunction$1(CSSStyleSheet.prototype.replaceSync) && isArray$1(document.adoptedStyleSheets);
-  const supportsMutableAdoptedStyleSheets = supportsConstructableStyleSheets &&
+  const supportsConstructableStylesheets = isFunction$1(CSSStyleSheet.prototype.replaceSync) && isArray$1(document.adoptedStyleSheets);
+  // The original adoptedStylesheet proposal used a frozen array. A follow-up proposal made the array mutable.
+  // Chromium 99+ and Firefox 101+ support mutable arrays. We check if the array is mutable, to ensure backward compat.
+  // (If the length is writable, then the array is mutable.) See: https://chromestatus.com/feature/5638996492288000
+  // TODO [#2828]: Re-evaluate this in the future once we drop support for older browser versions.
+  const supportsMutableAdoptedStyleSheets = supportsConstructableStylesheets &&
       getOwnPropertyDescriptor$1(document.adoptedStyleSheets, 'length').writable;
-  const styleElements = create(null);
-  const styleSheets = create(null);
-  const shadowRootsToStyleSheets = new WeakMap();
+  // Detect IE, via https://stackoverflow.com/a/9851769
+  const isIE11 = !isUndefined$1(document.documentMode);
+  const stylesheetCache = new Map();
+  function isDocument(target) {
+      return !isUndefined$1(target.head);
+  }
+  function createFreshStyleElement(content) {
+      const elm = document.createElement('style');
+      elm.type = 'text/css';
+      elm.textContent = content;
+      return elm;
+  }
+  function createStyleElement(content, cacheData) {
+      const { stylesheet, used } = cacheData;
+      // If the <style> was already used, then we should clone it. We cannot insert
+      // the same <style> in two places in the DOM.
+      if (used) {
+          // For a mysterious reason, IE11 doesn't like the way we clone <style> nodes
+          // and will render the incorrect styles if we do things that way. It's just
+          // a perf optimization, so we can skip it for IE11.
+          if (isIE11) {
+              return createFreshStyleElement(content);
+          }
+          // This `<style>` may be repeated multiple times in the DOM, so cache it. It's a bit
+          // faster to call `cloneNode()` on an existing node than to recreate it every time.
+          return stylesheet.cloneNode(true);
+      }
+      // We don't clone every time, because that would be a perf tax on the first time
+      cacheData.used = true;
+      return stylesheet;
+  }
+  function createConstructableStylesheet(content) {
+      const stylesheet = new CSSStyleSheet();
+      stylesheet.replaceSync(content);
+      return stylesheet;
+  }
+  function insertConstructableStylesheet(content, target, cacheData) {
+      const { adoptedStyleSheets } = target;
+      const { stylesheet } = cacheData;
+      // Mutable adopted stylesheets are only supported in certain browsers.
+      // The reason we use it is for perf: https://github.com/salesforce/lwc/pull/2683
+      if (supportsMutableAdoptedStyleSheets) {
+          adoptedStyleSheets.push(stylesheet);
+      }
+      else {
+          target.adoptedStyleSheets = [...adoptedStyleSheets, stylesheet];
+      }
+  }
+  function insertStyleElement(content, target, cacheData) {
+      const elm = createStyleElement(content, cacheData);
+      const targetAnchorPoint = isDocument(target) ? target.head : target;
+      targetAnchorPoint.appendChild(elm);
+  }
+  function doInsertStylesheet(content, target, cacheData) {
+      // Constructable stylesheets are only supported in certain browsers:
+      // https://caniuse.com/mdn-api_document_adoptedstylesheets
+      // The reason we use it is for perf: https://github.com/salesforce/lwc/pull/2460
+      if (supportsConstructableStylesheets) {
+          insertConstructableStylesheet(content, target, cacheData);
+      }
+      else {
+          // Fall back to <style> element
+          insertStyleElement(content, target, cacheData);
+      }
+  }
+  function getCacheData(content) {
+      let cacheData = stylesheetCache.get(content);
+      if (isUndefined$1(cacheData)) {
+          cacheData = {
+              stylesheet: supportsConstructableStylesheets
+                  ? createConstructableStylesheet(content)
+                  : createFreshStyleElement(content),
+              roots: undefined,
+              global: false,
+              used: false,
+          };
+          stylesheetCache.set(content, cacheData);
+      }
+      return cacheData;
+  }
+  function insertGlobalStylesheet(content) {
+      const cacheData = getCacheData(content);
+      if (cacheData.global) {
+          // already inserted
+          return;
+      }
+      cacheData.global = true; // mark inserted
+      doInsertStylesheet(content, document, cacheData);
+  }
+  function insertLocalStylesheet(content, target) {
+      const cacheData = getCacheData(content);
+      let { roots } = cacheData;
+      if (isUndefined$1(roots)) {
+          roots = cacheData.roots = new WeakSet(); // lazily initialize (not needed for global styles)
+      }
+      else if (roots.has(target)) {
+          // already inserted
+          return;
+      }
+      roots.add(target); // mark inserted
+      doInsertStylesheet(content, target, cacheData);
+  }
+  function insertStylesheet(content, target) {
+      if (isUndefined$1(target)) {
+          // global
+          insertGlobalStylesheet(content);
+      }
+      else {
+          // local
+          insertLocalStylesheet(content, target);
+      }
+  }
+
+  /*
+   * 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
+   */
   let getCustomElement;
   let defineCustomElement;
   let HTMLElementConstructor;
@@ -5207,52 +5348,6 @@
           return false;
       }
   }
-  function insertConstructableStyleSheet(content, target) {
-      // It's important for CSSStyleSheets to be unique based on their content, so that
-      // `shadowRoot.adoptedStyleSheets.includes(sheet)` works.
-      let styleSheet = styleSheets[content];
-      if (isUndefined$1(styleSheet)) {
-          styleSheet = new CSSStyleSheet();
-          styleSheet.replaceSync(content);
-          styleSheets[content] = styleSheet;
-      }
-      const { adoptedStyleSheets } = target;
-      if (!adoptedStyleSheets.includes(styleSheet)) {
-          if (supportsMutableAdoptedStyleSheets) {
-              // This is only supported in later versions of Chromium:
-              // https://chromestatus.com/feature/5638996492288000
-              adoptedStyleSheets.push(styleSheet);
-          }
-          else {
-              target.adoptedStyleSheets = [...adoptedStyleSheets, styleSheet];
-          }
-      }
-  }
-  function insertStyleElement(content, target) {
-      // Avoid inserting duplicate `<style>`s
-      let sheets = shadowRootsToStyleSheets.get(target);
-      if (isUndefined$1(sheets)) {
-          sheets = create(null);
-          shadowRootsToStyleSheets.set(target, sheets);
-      }
-      if (sheets[content]) {
-          return;
-      }
-      sheets[content] = true;
-      // This `<style>` may be repeated multiple times in the DOM, so cache it. It's a bit
-      // faster to call `cloneNode()` on an existing node than to recreate it every time.
-      let elm = styleElements[content];
-      if (isUndefined$1(elm)) {
-          elm = document.createElement('style');
-          elm.type = 'text/css';
-          elm.textContent = content;
-          styleElements[content] = elm;
-      }
-      else {
-          elm = elm.cloneNode(true);
-      }
-      target.appendChild(elm);
-  }
   if (isCustomElementRegistryAvailable()) {
       getCustomElement = customElements.get.bind(customElements);
       defineCustomElement = customElements.define.bind(customElements);
@@ -5291,9 +5386,6 @@
       hydrating = value;
   }
   const ssr = false;
-  function isHydrating() {
-      return hydrating;
-  }
   const isNativeShadowDefined = _globalThis[KEY__IS_NATIVE_SHADOW_ROOT_DEFINED];
   const isSyntheticShadowDefined = hasOwnProperty$1.call(Element.prototype, KEY__SHADOW_TOKEN);
   function createElement$1(tagName, namespace) {
@@ -5402,25 +5494,6 @@
   function isConnected(node) {
       return node.isConnected;
   }
-  function insertGlobalStylesheet(content) {
-      if (!isUndefined$1(globalStylesheets[content])) {
-          return;
-      }
-      globalStylesheets[content] = true;
-      const elm = document.createElement('style');
-      elm.type = 'text/css';
-      elm.textContent = content;
-      globalStylesheetsParentElement.appendChild(elm);
-  }
-  function insertStylesheet(content, target) {
-      if (supportsConstructableStyleSheets) {
-          insertConstructableStyleSheet(content, target);
-      }
-      else {
-          // Fall back to <style> element
-          insertStyleElement(content, target);
-      }
-  }
   const HTMLElementExported = HTMLElementConstructor;
   setAttachShadow(attachShadow);
   setCreateComment(createComment);
@@ -5443,10 +5516,7 @@
   setGetProperty(getProperty);
   setHTMLElement(HTMLElementExported);
   setInsert(insert);
-  setInsertGlobalStylesheet(insertGlobalStylesheet);
-  setInsertStylesheet(insertStylesheet);
   setIsConnected(isConnected);
-  setIsHydrating$1(isHydrating);
   setIsNativeShadowDefined(isNativeShadowDefined);
   setIsSyntheticShadowDefined(isSyntheticShadowDefined);
   setNextSibling(nextSibling);
@@ -5461,6 +5531,7 @@
   setSetText(setText);
   setSsr(ssr);
   setAddEventListener(addEventListener);
+  setInsertStylesheet(insertStylesheet);
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -5486,6 +5557,7 @@
           mode: 'open',
           owner: null,
           tagName: element.tagName.toLowerCase(),
+          hydrated: true,
       });
       for (const [key, value] of Object.entries(props)) {
           element[key] = value;
@@ -5748,7 +5820,7 @@
   });
   freeze(LightningElement);
   seal(LightningElement.prototype);
-  /* version: 2.13.3 */
+  /* version: 2.14.1 */
 
   exports.LightningElement = LightningElement;
   exports.__unstable__ProfilerControl = profilerControl;
@@ -5756,6 +5828,7 @@
   exports.buildCustomElementConstructor = deprecatedBuildCustomElementConstructor;
   exports.createContextProvider = createContextProvider;
   exports.createElement = createElement;
+  exports.freezeTemplate = freezeTemplate;
   exports.getComponentConstructor = getComponentConstructor;
   exports.getComponentDef = getComponentDef;
   exports.hydrateComponent = hydrateComponent;