lwc 2.13.3 → 2.13.4

package/dist/engine-dom/umd/es2017/engine-dom.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) {
@@ -304,9 +304,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.13.3";
+  const LWC_VERSION = "2.13.4";
   const LWC_VERSION_COMMENT_REGEX = /\/\*LWC compiler v([\d.]+)\*\/\s*}/;
-  /** version: 2.13.3 */
+  /** version: 2.13.4 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -396,6 +396,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,
@@ -459,10 +460,35 @@
           setFeatureFlag(name, value);
       }
   }
-  /** version: 2.13.3 */
+  /** version: 2.13.4 */
 
   /* proxy-compat-disable */
 
+  /*
+   * 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
+   */
+  // @ts-ignore
+
+  if (process.env.NODE_ENV !== 'production' && typeof __karma__ !== 'undefined') {
+    window.addEventListener('test-dummy-flag', () => {
+      let hasFlag = false;
+
+      if (runtimeFlags.DUMMY_TEST_FLAG) {
+        hasFlag = true;
+      }
+
+      window.dispatchEvent(new CustomEvent('has-dummy-flag', {
+        detail: {
+          package: '@lwc/engine-core',
+          hasFlag
+        }
+      }));
+    });
+  }
+
   /*
    * Copyright (c) 2018, salesforce.com, inc.
    * All rights reserved.
@@ -563,10 +589,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;
@@ -687,10 +709,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;
@@ -2806,6 +2824,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)) {
@@ -3889,15 +3909,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;
@@ -4815,10 +4836,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.
@@ -4829,15 +4850,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;
@@ -5385,7 +5401,8 @@
     const {
       mode,
       owner,
-      tagName
+      tagName,
+      hydrated
     } = options;
     const def = getComponentInternalDef(ctor);
     const vm = {
@@ -5408,6 +5425,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,
@@ -6382,6 +6400,7 @@
           mode,
           owner,
           tagName: sel,
+          hydrated: true,
       });
       vnode.elm = elm;
       vnode.vm = vm;
@@ -6576,6 +6595,105 @@
       setSanitizeHtmlContentHook(hooks.sanitizeHtmlContent);
   }
 
+  /*
+   * 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
+   */
+  // 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',
+  ];
+  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;
+      }
+  }
+  let mutationWarningsSilenced = false;
+  // Warn if the user tries to mutate tmpl.stylesheets, 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);
+          };
+      }
+  }
+  // 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;
+                  },
+              });
+          }
+          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;
+              },
+          });
+      }
+  }
+
   /*
    * Copyright (c) 2018, salesforce.com, inc.
    * All rights reserved.
@@ -6598,7 +6716,7 @@
       }
       return ctor;
   }
-  /* version: 2.13.3 */
+  /* version: 2.13.4 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -6606,25 +6724,147 @@
    * 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);
+  //
+  // 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);
+  // 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;
+  // Detect IE, via https://stackoverflow.com/a/9851769
+  const isIE11 = !isUndefined$1(document.documentMode);
+  const stylesheetCache = new Map();
+  //
+  // Test utilities
+  //
   if (process.env.NODE_ENV === 'development') {
       // @ts-ignore
       window.__lwcResetGlobalStylesheets = () => {
-          for (const key of Object.keys(globalStylesheets)) {
-              delete globalStylesheets[key];
-          }
+          stylesheetCache.clear();
       };
   }
-  const globalStylesheetsParentElement = document.head || document.body || document;
-  // This check for constructable stylesheets 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 &&
-      getOwnPropertyDescriptor$1(document.adoptedStyleSheets, 'length').writable;
-  const styleElements = create(null);
-  const styleSheets = create(null);
-  const shadowRootsToStyleSheets = new WeakMap();
+  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;
@@ -6651,52 +6891,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);
@@ -6735,9 +6929,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) {
@@ -6852,25 +7043,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);
-      }
-  }
   function assertInstanceOfHTMLElement(elm, msg) {
       assert.invariant(elm instanceof HTMLElement, msg);
   }
@@ -6904,10 +7076,7 @@
   setGetProperty(getProperty);
   setHTMLElement(HTMLElementExported);
   setInsert(insert);
-  setInsertGlobalStylesheet(insertGlobalStylesheet);
-  setInsertStylesheet(insertStylesheet);
   setIsConnected(isConnected);
-  setIsHydrating$1(isHydrating);
   setIsNativeShadowDefined(isNativeShadowDefined);
   setIsSyntheticShadowDefined(isSyntheticShadowDefined);
   setNextSibling(nextSibling);
@@ -6922,6 +7091,32 @@
   setSetText(setText);
   setSsr(ssr);
   setAddEventListener(addEventListener);
+  setInsertStylesheet(insertStylesheet);
+
+  /*
+   * 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
+   */
+  // @ts-ignore
+
+  if (process.env.NODE_ENV !== 'production' && typeof __karma__ !== 'undefined') {
+    window.addEventListener('test-dummy-flag', () => {
+      let hasFlag = false;
+
+      if (runtimeFlags.DUMMY_TEST_FLAG) {
+        hasFlag = true;
+      }
+
+      window.dispatchEvent(new CustomEvent('has-dummy-flag', {
+        detail: {
+          package: '@lwc/engine-dom',
+          hasFlag
+        }
+      }));
+    });
+  }
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -6947,6 +7142,7 @@
           mode: 'open',
           owner: null,
           tagName: element.tagName.toLowerCase(),
+          hydrated: true,
       });
       for (const [key, value] of Object.entries(props)) {
           element[key] = value;
@@ -7217,7 +7413,7 @@
   });
   freeze(LightningElement);
   seal(LightningElement.prototype);
-  /* version: 2.13.3 */
+  /* version: 2.13.4 */
 
   exports.LightningElement = LightningElement;
   exports.__unstable__ProfilerControl = profilerControl;
@@ -7225,6 +7421,7 @@
   exports.buildCustomElementConstructor = deprecatedBuildCustomElementConstructor;
   exports.createContextProvider = createContextProvider;
   exports.createElement = createElement;
+  exports.freezeTemplate = freezeTemplate;
   exports.getComponentConstructor = getComponentConstructor;
   exports.getComponentDef = getComponentDef;
   exports.hydrateComponent = hydrateComponent;