lwc 2.13.2 → 2.14.0

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.2 */
+  /** version: 2.14.0 */
 
   /*
    * 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.2 */
-
-  /* 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;
@@ -2054,6 +2044,12 @@
       return isUndefined$1(meta) ? defaultMeta : meta;
   }
 
+  /*
+   * 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 [];
@@ -2068,6 +2064,32 @@
    */
   function registerTemplate(tpl) {
       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;
@@ -2841,15 +2863,16 @@
       }
   }
   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);
       }
+      const removeChildren = sel === 'slot'; // slot content is removed to trigger slotchange event when removing slot
       switch (type) {
           case 2 /* Element */:
-              unmountVNodes(vnode.children, elm);
+              unmountVNodes(vnode.children, elm, removeChildren);
               break;
           case 3 /* CustomElement */: {
               const { vm } = vnode;
@@ -3617,10 +3640,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.
@@ -3631,15 +3654,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;
@@ -4044,7 +4062,8 @@
     const {
       mode,
       owner,
-      tagName
+      tagName,
+      hydrated
     } = options;
     const def = getComponentInternalDef(ctor);
     const vm = {
@@ -4067,6 +4086,7 @@
       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,
@@ -4960,6 +4980,7 @@
           mode,
           owner,
           tagName: sel,
+          hydrated: true,
       });
       vnode.elm = elm;
       vnode.vm = vm;
@@ -5109,6 +5130,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.
@@ -5132,7 +5157,7 @@
       }
       return ctor;
   }
-  /* version: 2.13.2 */
+  /* version: 2.14.0 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -5140,17 +5165,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;
@@ -5177,52 +5323,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);
@@ -5261,9 +5361,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) {
@@ -5372,25 +5469,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);
@@ -5413,10 +5491,7 @@
   setGetProperty(getProperty);
   setHTMLElement(HTMLElementExported);
   setInsert(insert);
-  setInsertGlobalStylesheet(insertGlobalStylesheet);
-  setInsertStylesheet(insertStylesheet);
   setIsConnected(isConnected);
-  setIsHydrating$1(isHydrating);
   setIsNativeShadowDefined(isNativeShadowDefined);
   setIsSyntheticShadowDefined(isSyntheticShadowDefined);
   setNextSibling(nextSibling);
@@ -5431,6 +5506,7 @@
   setSetText(setText);
   setSsr(ssr);
   setAddEventListener(addEventListener);
+  setInsertStylesheet(insertStylesheet);
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -5456,6 +5532,7 @@
           mode: 'open',
           owner: null,
           tagName: element.tagName.toLowerCase(),
+          hydrated: true,
       });
       for (const [key, value] of Object.entries(props)) {
           element[key] = value;
@@ -5718,7 +5795,7 @@
   });
   freeze(LightningElement);
   seal(LightningElement.prototype);
-  /* version: 2.13.2 */
+  /* version: 2.14.0 */
 
   exports.LightningElement = LightningElement;
   exports.__unstable__ProfilerControl = profilerControl;
@@ -5726,6 +5803,7 @@
   exports.buildCustomElementConstructor = deprecatedBuildCustomElementConstructor;
   exports.createContextProvider = createContextProvider;
   exports.createElement = createElement;
+  exports.freezeTemplate = freezeTemplate;
   exports.getComponentConstructor = getComponentConstructor;
   exports.getComponentDef = getComponentDef;
   exports.hydrateComponent = hydrateComponent;