lwc 2.20.2 → 2.21.0

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

@@ -305,9 +305,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.20.2";
+  const LWC_VERSION = "2.21.0";
   const LWC_VERSION_COMMENT_REGEX = /\/\*LWC compiler v([\d.]+)\*\/\s*}/;
-  /** version: 2.20.2 */
+  /** version: 2.21.0 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -461,7 +461,7 @@
           setFeatureFlag(name, value);
       }
   }
-  /** version: 2.20.2 */
+  /** version: 2.21.0 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -3362,6 +3362,175 @@
       };
   }
 
+  /*
+   * 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 makeHostToken(token) {
+      return `${token}-host`;
+  }
+  function createInlineStyleVNode(content) {
+      return api.h('style', {
+          key: 'style',
+          attrs: {
+              type: 'text/css',
+          },
+      }, [api.t(content)]);
+  }
+  function updateStylesheetToken(vm, template) {
+      const { elm, context, renderMode, shadowMode, renderer: { getClassList, removeAttribute, setAttribute }, } = vm;
+      const { stylesheets: newStylesheets, stylesheetToken: newStylesheetToken } = template;
+      const isSyntheticShadow = renderMode === 1 /* RenderMode.Shadow */ && shadowMode === 1 /* ShadowMode.Synthetic */;
+      const { hasScopedStyles } = context;
+      let newToken;
+      let newHasTokenInClass;
+      let newHasTokenInAttribute;
+      // Reset the styling token applied to the host element.
+      const { stylesheetToken: oldToken, hasTokenInClass: oldHasTokenInClass, hasTokenInAttribute: oldHasTokenInAttribute, } = context;
+      if (!isUndefined$1(oldToken)) {
+          if (oldHasTokenInClass) {
+              getClassList(elm).remove(makeHostToken(oldToken));
+          }
+          if (oldHasTokenInAttribute) {
+              removeAttribute(elm, makeHostToken(oldToken));
+          }
+      }
+      // Apply the new template styling token to the host element, if the new template has any
+      // associated stylesheets. In the case of light DOM, also ensure there is at least one scoped stylesheet.
+      if (!isUndefined$1(newStylesheets) && newStylesheets.length !== 0) {
+          newToken = newStylesheetToken;
+      }
+      // Set the new styling token on the host element
+      if (!isUndefined$1(newToken)) {
+          if (hasScopedStyles) {
+              getClassList(elm).add(makeHostToken(newToken));
+              newHasTokenInClass = true;
+          }
+          if (isSyntheticShadow) {
+              setAttribute(elm, makeHostToken(newToken), '');
+              newHasTokenInAttribute = true;
+          }
+      }
+      // Update the styling tokens present on the context object.
+      context.stylesheetToken = newToken;
+      context.hasTokenInClass = newHasTokenInClass;
+      context.hasTokenInAttribute = newHasTokenInAttribute;
+  }
+  function evaluateStylesheetsContent(stylesheets, stylesheetToken, vm) {
+      const content = [];
+      let root;
+      for (let i = 0; i < stylesheets.length; i++) {
+          let stylesheet = stylesheets[i];
+          if (isArray$1(stylesheet)) {
+              ArrayPush$1.apply(content, evaluateStylesheetsContent(stylesheet, stylesheetToken, vm));
+          }
+          else {
+              if (process.env.NODE_ENV !== 'production') {
+                  // Check for compiler version mismatch in dev mode only
+                  checkVersionMismatch(stylesheet, 'stylesheet');
+                  // in dev-mode, we support hot swapping of stylesheet, which means that
+                  // the component instance might be attempting to use an old version of
+                  // the stylesheet, while internally, we have a replacement for it.
+                  stylesheet = getStyleOrSwappedStyle(stylesheet);
+              }
+              const isScopedCss = stylesheet[KEY__SCOPED_CSS];
+              // Apply the scope token only if the stylesheet itself is scoped, or if we're rendering synthetic shadow.
+              const scopeToken = isScopedCss ||
+                  (vm.shadowMode === 1 /* ShadowMode.Synthetic */ && vm.renderMode === 1 /* RenderMode.Shadow */)
+                  ? stylesheetToken
+                  : undefined;
+              // Use the actual `:host` selector if we're rendering global CSS for light DOM, or if we're rendering
+              // native shadow DOM. Synthetic shadow DOM never uses `:host`.
+              const useActualHostSelector = vm.renderMode === 0 /* RenderMode.Light */
+                  ? !isScopedCss
+                  : vm.shadowMode === 0 /* ShadowMode.Native */;
+              // Use the native :dir() pseudoclass only in native shadow DOM. Otherwise, in synthetic shadow,
+              // we use an attribute selector on the host to simulate :dir().
+              let useNativeDirPseudoclass;
+              if (vm.renderMode === 1 /* RenderMode.Shadow */) {
+                  useNativeDirPseudoclass = vm.shadowMode === 0 /* ShadowMode.Native */;
+              }
+              else {
+                  // Light DOM components should only render `[dir]` if they're inside of a synthetic shadow root.
+                  // At the top level (root is null) or inside of a native shadow root, they should use `:dir()`.
+                  if (isUndefined$1(root)) {
+                      // Only calculate the root once as necessary
+                      root = getNearestShadowComponent(vm);
+                  }
+                  useNativeDirPseudoclass = isNull(root) || root.shadowMode === 0 /* ShadowMode.Native */;
+              }
+              ArrayPush$1.call(content, stylesheet(scopeToken, useActualHostSelector, useNativeDirPseudoclass));
+          }
+      }
+      return content;
+  }
+  function getStylesheetsContent(vm, template) {
+      const { stylesheets, stylesheetToken } = template;
+      let content = [];
+      if (!isUndefined$1(stylesheets) && stylesheets.length !== 0) {
+          content = evaluateStylesheetsContent(stylesheets, stylesheetToken, vm);
+      }
+      return content;
+  }
+  // It might be worth caching this to avoid doing the lookup repeatedly, but
+  // perf testing has not shown it to be a huge improvement yet:
+  // https://github.com/salesforce/lwc/pull/2460#discussion_r691208892
+  function getNearestShadowComponent(vm) {
+      let owner = vm;
+      while (!isNull(owner)) {
+          if (owner.renderMode === 1 /* RenderMode.Shadow */) {
+              return owner;
+          }
+          owner = owner.owner;
+      }
+      return owner;
+  }
+  /**
+   * If the component that is currently being rendered uses scoped styles,
+   * this returns the unique token for that scoped stylesheet. Otherwise
+   * it returns null.
+   */
+  function getScopeTokenClass(owner) {
+      const { cmpTemplate, context } = owner;
+      return (context.hasScopedStyles && (cmpTemplate === null || cmpTemplate === void 0 ? void 0 : cmpTemplate.stylesheetToken)) || null;
+  }
+  function getNearestNativeShadowComponent(vm) {
+      const owner = getNearestShadowComponent(vm);
+      if (!isNull(owner) && owner.shadowMode === 1 /* ShadowMode.Synthetic */) {
+          // Synthetic-within-native is impossible. So if the nearest shadow component is
+          // synthetic, we know we won't find a native component if we go any further.
+          return null;
+      }
+      return owner;
+  }
+  function createStylesheet(vm, stylesheets) {
+      const { renderMode, shadowMode, renderer: { ssr, insertStylesheet }, } = vm;
+      if (renderMode === 1 /* RenderMode.Shadow */ && shadowMode === 1 /* ShadowMode.Synthetic */) {
+          for (let i = 0; i < stylesheets.length; i++) {
+              insertStylesheet(stylesheets[i]);
+          }
+      }
+      else if (ssr || 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.
+          // native shadow or light DOM, SSR
+          return ArrayMap.call(stylesheets, createInlineStyleVNode);
+      }
+      else {
+          // native shadow or light DOM, DOM renderer
+          const root = getNearestNativeShadowComponent(vm);
+          // null root means a global style
+          const target = isNull(root) ? undefined : root.shadowRoot;
+          for (let i = 0; i < stylesheets.length; i++) {
+              insertStylesheet(stylesheets[i], target);
+          }
+      }
+      return null;
+  }
+
   /*
    * Copyright (c) 2020, salesforce.com, inc.
    * All rights reserved.
@@ -3873,10 +4042,9 @@
   }
   // Set the scope token class for *.scoped.css styles
   function setScopeTokenClassIfNecessary(elm, owner, renderer) {
-      const { cmpTemplate, context } = owner;
-      const { getClassList } = renderer;
-      const token = cmpTemplate === null || cmpTemplate === void 0 ? void 0 : cmpTemplate.stylesheetToken;
-      if (!isUndefined$1(token) && context.hasScopedStyles) {
+      const token = getScopeTokenClass(owner);
+      if (!isNull(token)) {
+          const { getClassList } = renderer;
           // 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);
@@ -4639,166 +4807,6 @@
       shc,
   });
 
-  /*
-   * 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 makeHostToken(token) {
-      return `${token}-host`;
-  }
-  function createInlineStyleVNode(content) {
-      return api.h('style', {
-          key: 'style',
-          attrs: {
-              type: 'text/css',
-          },
-      }, [api.t(content)]);
-  }
-  function updateStylesheetToken(vm, template) {
-      const { elm, context, renderMode, shadowMode, renderer: { getClassList, removeAttribute, setAttribute }, } = vm;
-      const { stylesheets: newStylesheets, stylesheetToken: newStylesheetToken } = template;
-      const isSyntheticShadow = renderMode === 1 /* RenderMode.Shadow */ && shadowMode === 1 /* ShadowMode.Synthetic */;
-      const { hasScopedStyles } = context;
-      let newToken;
-      let newHasTokenInClass;
-      let newHasTokenInAttribute;
-      // Reset the styling token applied to the host element.
-      const { stylesheetToken: oldToken, hasTokenInClass: oldHasTokenInClass, hasTokenInAttribute: oldHasTokenInAttribute, } = context;
-      if (!isUndefined$1(oldToken)) {
-          if (oldHasTokenInClass) {
-              getClassList(elm).remove(makeHostToken(oldToken));
-          }
-          if (oldHasTokenInAttribute) {
-              removeAttribute(elm, makeHostToken(oldToken));
-          }
-      }
-      // Apply the new template styling token to the host element, if the new template has any
-      // associated stylesheets. In the case of light DOM, also ensure there is at least one scoped stylesheet.
-      if (!isUndefined$1(newStylesheets) && newStylesheets.length !== 0) {
-          newToken = newStylesheetToken;
-      }
-      // Set the new styling token on the host element
-      if (!isUndefined$1(newToken)) {
-          if (hasScopedStyles) {
-              getClassList(elm).add(makeHostToken(newToken));
-              newHasTokenInClass = true;
-          }
-          if (isSyntheticShadow) {
-              setAttribute(elm, makeHostToken(newToken), '');
-              newHasTokenInAttribute = true;
-          }
-      }
-      // Update the styling tokens present on the context object.
-      context.stylesheetToken = newToken;
-      context.hasTokenInClass = newHasTokenInClass;
-      context.hasTokenInAttribute = newHasTokenInAttribute;
-  }
-  function evaluateStylesheetsContent(stylesheets, stylesheetToken, vm) {
-      const content = [];
-      let root;
-      for (let i = 0; i < stylesheets.length; i++) {
-          let stylesheet = stylesheets[i];
-          if (isArray$1(stylesheet)) {
-              ArrayPush$1.apply(content, evaluateStylesheetsContent(stylesheet, stylesheetToken, vm));
-          }
-          else {
-              if (process.env.NODE_ENV !== 'production') {
-                  // Check for compiler version mismatch in dev mode only
-                  checkVersionMismatch(stylesheet, 'stylesheet');
-                  // in dev-mode, we support hot swapping of stylesheet, which means that
-                  // the component instance might be attempting to use an old version of
-                  // the stylesheet, while internally, we have a replacement for it.
-                  stylesheet = getStyleOrSwappedStyle(stylesheet);
-              }
-              const isScopedCss = stylesheet[KEY__SCOPED_CSS];
-              // Apply the scope token only if the stylesheet itself is scoped, or if we're rendering synthetic shadow.
-              const scopeToken = isScopedCss ||
-                  (vm.shadowMode === 1 /* ShadowMode.Synthetic */ && vm.renderMode === 1 /* RenderMode.Shadow */)
-                  ? stylesheetToken
-                  : undefined;
-              // Use the actual `:host` selector if we're rendering global CSS for light DOM, or if we're rendering
-              // native shadow DOM. Synthetic shadow DOM never uses `:host`.
-              const useActualHostSelector = vm.renderMode === 0 /* RenderMode.Light */
-                  ? !isScopedCss
-                  : vm.shadowMode === 0 /* ShadowMode.Native */;
-              // Use the native :dir() pseudoclass only in native shadow DOM. Otherwise, in synthetic shadow,
-              // we use an attribute selector on the host to simulate :dir().
-              let useNativeDirPseudoclass;
-              if (vm.renderMode === 1 /* RenderMode.Shadow */) {
-                  useNativeDirPseudoclass = vm.shadowMode === 0 /* ShadowMode.Native */;
-              }
-              else {
-                  // Light DOM components should only render `[dir]` if they're inside of a synthetic shadow root.
-                  // At the top level (root is null) or inside of a native shadow root, they should use `:dir()`.
-                  if (isUndefined$1(root)) {
-                      // Only calculate the root once as necessary
-                      root = getNearestShadowComponent(vm);
-                  }
-                  useNativeDirPseudoclass = isNull(root) || root.shadowMode === 0 /* ShadowMode.Native */;
-              }
-              ArrayPush$1.call(content, stylesheet(scopeToken, useActualHostSelector, useNativeDirPseudoclass));
-          }
-      }
-      return content;
-  }
-  function getStylesheetsContent(vm, template) {
-      const { stylesheets, stylesheetToken } = template;
-      let content = [];
-      if (!isUndefined$1(stylesheets) && stylesheets.length !== 0) {
-          content = evaluateStylesheetsContent(stylesheets, stylesheetToken, vm);
-      }
-      return content;
-  }
-  // It might be worth caching this to avoid doing the lookup repeatedly, but
-  // perf testing has not shown it to be a huge improvement yet:
-  // https://github.com/salesforce/lwc/pull/2460#discussion_r691208892
-  function getNearestShadowComponent(vm) {
-      let owner = vm;
-      while (!isNull(owner)) {
-          if (owner.renderMode === 1 /* RenderMode.Shadow */) {
-              return owner;
-          }
-          owner = owner.owner;
-      }
-      return owner;
-  }
-  function getNearestNativeShadowComponent(vm) {
-      const owner = getNearestShadowComponent(vm);
-      if (!isNull(owner) && owner.shadowMode === 1 /* ShadowMode.Synthetic */) {
-          // Synthetic-within-native is impossible. So if the nearest shadow component is
-          // synthetic, we know we won't find a native component if we go any further.
-          return null;
-      }
-      return owner;
-  }
-  function createStylesheet(vm, stylesheets) {
-      const { renderMode, shadowMode, renderer: { ssr, insertStylesheet }, } = vm;
-      if (renderMode === 1 /* RenderMode.Shadow */ && shadowMode === 1 /* ShadowMode.Synthetic */) {
-          for (let i = 0; i < stylesheets.length; i++) {
-              insertStylesheet(stylesheets[i]);
-          }
-      }
-      else if (ssr || 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.
-          // native shadow or light DOM, SSR
-          return ArrayMap.call(stylesheets, createInlineStyleVNode);
-      }
-      else {
-          // native shadow or light DOM, DOM renderer
-          const root = getNearestNativeShadowComponent(vm);
-          // null root means a global style
-          const target = isNull(root) ? undefined : root.shadowRoot;
-          for (let i = 0; i < stylesheets.length; i++) {
-              insertStylesheet(stylesheets[i], target);
-          }
-      }
-      return null;
-  }
-
   /*
    * Copyright (c) 2018, salesforce.com, inc.
    * All rights reserved.
@@ -6576,8 +6584,24 @@
       return nodesAreCompatible;
   }
   function validateClassAttr(vnode, elm, renderer) {
-      const { data: { className, classMap }, } = vnode;
+      const { data, owner } = vnode;
+      let { className, classMap } = data;
       const { getProperty, getClassList } = renderer;
+      const scopedToken = getScopeTokenClass(owner);
+      // Classnames for scoped CSS are added directly to the DOM during rendering,
+      // or to the VDOM on the server in the case of SSR. As such, these classnames
+      // are never present in VDOM nodes in the browser.
+      //
+      // Consequently, hydration mismatches will occur if scoped CSS token classnames
+      // are rendered during SSR. This needs to be accounted for when validating.
+      if (scopedToken) {
+          if (!isUndefined$1(className)) {
+              className = `${scopedToken} ${className}`;
+          }
+          else if (!isUndefined$1(classMap)) {
+              classMap = Object.assign(Object.assign({}, classMap), { [scopedToken]: true });
+          }
+      }
       let nodesAreCompatible = true;
       let vnodeClassName;
       if (!isUndefined$1(className) && String(className) !== getProperty(elm, 'className')) {
@@ -6817,7 +6841,7 @@
       }
       return ctor;
   }
-  /* version: 2.20.2 */
+  /* version: 2.21.0 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -7063,7 +7087,15 @@
       return node.nextSibling;
   }
   function attachShadow(element, options) {
-      if (hydrating) {
+      // `hydrating` will be true in two cases:
+      //   1. upon initial load with an SSR-generated DOM, while in Shadow render mode
+      //   2. when a webapp author places <c-app> in their static HTML and mounts their
+      //      root component with customeElement.define('c-app', Ctor)
+      //
+      // The second case can be treated as a failed hydration with nominal impact
+      // to performance. However, because <c-app> won't have a <template shadowroot>
+      // declarative child, `element.shadowRoot` is `null`.
+      if (hydrating && element.shadowRoot) {
           return element.shadowRoot;
       }
       return element.attachShadow(options);
@@ -7497,7 +7529,7 @@
   });
   freeze(LightningElement);
   seal(LightningElement.prototype);
-  /* version: 2.20.2 */
+  /* version: 2.21.0 */
 
   exports.LightningElement = LightningElement;
   exports.__unstable__ProfilerControl = profilerControl;