lwc 2.20.2 → 2.21.0

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

@@ -349,7 +349,7 @@
     CACHED_PROPERTY_ATTRIBUTE_MAPPING.set(propName, attributeName);
     return attributeName;
   }
-  /** version: 2.20.2 */
+  /** version: 2.21.0 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -2913,6 +2913,233 @@
       methods: publicMethods
     };
   }
+  /*
+   * 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 "".concat(token, "-host");
+  }
+
+  function createInlineStyleVNode(content) {
+    return api.h('style', {
+      key: 'style',
+      attrs: {
+        type: 'text/css'
+      }
+    }, [api.t(content)]);
+  }
+
+  function updateStylesheetToken(vm, template) {
+    var elm = vm.elm,
+        context = vm.context,
+        renderMode = vm.renderMode,
+        shadowMode = vm.shadowMode,
+        _vm$renderer = vm.renderer,
+        getClassList = _vm$renderer.getClassList,
+        removeAttribute = _vm$renderer.removeAttribute,
+        setAttribute = _vm$renderer.setAttribute;
+    var newStylesheets = template.stylesheets,
+        newStylesheetToken = template.stylesheetToken;
+    var isSyntheticShadow = renderMode === 1
+    /* RenderMode.Shadow */
+    && shadowMode === 1
+    /* ShadowMode.Synthetic */
+    ;
+    var hasScopedStyles = context.hasScopedStyles;
+    var newToken;
+    var newHasTokenInClass;
+    var newHasTokenInAttribute; // Reset the styling token applied to the host element.
+
+    var oldToken = context.stylesheetToken,
+        oldHasTokenInClass = context.hasTokenInClass,
+        oldHasTokenInAttribute = context.hasTokenInAttribute;
+
+    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) {
+    var content = [];
+    var root;
+
+    for (var _i11 = 0; _i11 < stylesheets.length; _i11++) {
+      var stylesheet = stylesheets[_i11];
+
+      if (isArray$1(stylesheet)) {
+        ArrayPush$1.apply(content, evaluateStylesheetsContent(stylesheet, stylesheetToken, vm));
+      } else {
+
+        var isScopedCss = stylesheet[KEY__SCOPED_CSS]; // Apply the scope token only if the stylesheet itself is scoped, or if we're rendering synthetic shadow.
+
+        var 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`.
+
+        var 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().
+
+        var useNativeDirPseudoclass = void 0;
+
+        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) {
+    var stylesheets = template.stylesheets,
+        stylesheetToken = template.stylesheetToken;
+    var 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) {
+    var 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) {
+    var cmpTemplate = owner.cmpTemplate,
+        context = owner.context;
+    return context.hasScopedStyles && (cmpTemplate === null || cmpTemplate === void 0 ? void 0 : cmpTemplate.stylesheetToken) || null;
+  }
+
+  function getNearestNativeShadowComponent(vm) {
+    var 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) {
+    var renderMode = vm.renderMode,
+        shadowMode = vm.shadowMode,
+        _vm$renderer2 = vm.renderer,
+        ssr = _vm$renderer2.ssr,
+        insertStylesheet = _vm$renderer2.insertStylesheet;
+
+    if (renderMode === 1
+    /* RenderMode.Shadow */
+    && shadowMode === 1
+    /* ShadowMode.Synthetic */
+    ) {
+      for (var _i12 = 0; _i12 < stylesheets.length; _i12++) {
+        insertStylesheet(stylesheets[_i12]);
+      }
+    } 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
+      var root = getNearestNativeShadowComponent(vm); // null root means a global style
+
+      var target = isNull(root) ? undefined : root.shadowRoot;
+
+      for (var _i13 = 0; _i13 < stylesheets.length; _i13++) {
+        insertStylesheet(stylesheets[_i13], target);
+      }
+    }
+
+    return null;
+  }
   /*
    * Copyright (c) 2020, salesforce.com, inc.
    * All rights reserved.
@@ -3250,8 +3477,8 @@
 
     var setCSSStyleProperty = renderer.setCSSStyleProperty;
 
-    for (var _i11 = 0; _i11 < styleDecls.length; _i11++) {
-      var _styleDecls$_i = _slicedToArray(styleDecls[_i11], 3),
+    for (var _i14 = 0; _i14 < styleDecls.length; _i14++) {
+      var _styleDecls$_i = _slicedToArray(styleDecls[_i14], 3),
           prop = _styleDecls$_i[0],
           value = _styleDecls$_i[1],
           important = _styleDecls$_i[2];
@@ -3580,15 +3807,13 @@
 
 
   function setScopeTokenClassIfNecessary(elm, owner, renderer) {
-    var cmpTemplate = owner.cmpTemplate,
-        context = owner.context;
-    var getClassList = renderer.getClassList;
-    var token = cmpTemplate === null || cmpTemplate === void 0 ? void 0 : cmpTemplate.stylesheetToken;
+    var token = getScopeTokenClass(owner);
 
-    if (!isUndefined$1(token) && context.hasScopedStyles) {
-      // TODO [#2762]: this dot notation with add is probably problematic
+    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);
+
+      _getClassList(elm).add(token);
     }
   }
 
@@ -3738,8 +3963,8 @@
     var oldSlots = vm.cmpSlots;
     var cmpSlots = vm.cmpSlots = create(null);
 
-    for (var _i12 = 0, len = children.length; _i12 < len; _i12 += 1) {
-      var vnode = children[_i12];
+    for (var _i15 = 0, len = children.length; _i15 < len; _i15 += 1) {
+      var vnode = children[_i15];
 
       if (isNull(vnode)) {
         continue;
@@ -3765,8 +3990,8 @@
         return;
       }
 
-      for (var _i13 = 0, _len4 = oldKeys.length; _i13 < _len4; _i13 += 1) {
-        var key = oldKeys[_i13];
+      for (var _i16 = 0, _len4 = oldKeys.length; _i16 < _len4; _i16 += 1) {
+        var key = oldKeys[_i16];
 
         if (isUndefined$1(cmpSlots[key]) || oldSlots[key].length !== cmpSlots[key].length) {
           markComponentAsDirty(vm);
@@ -3906,12 +4131,12 @@
       if (oldStartIdx > oldEndIdx) {
         // There's some cases in which the sub array of vnodes to be inserted is followed by null(s) and an
         // already processed vnode, in such cases the vnodes to be inserted should be before that processed vnode.
-        var _i14 = newEndIdx;
+        var _i17 = newEndIdx;
         var n;
 
         do {
-          n = newCh[++_i14];
-        } while (!isVNode(n) && _i14 < newChEnd);
+          n = newCh[++_i17];
+        } while (!isVNode(n) && _i17 < newChEnd);
 
         before = isVNode(n) ? n.elm : null;
         mountVNodes(newCh, parent, renderer, before, newStartIdx, newEndIdx + 1);
@@ -3942,9 +4167,9 @@
 
     var anchor = null;
 
-    for (var _i15 = c2Length - 1; _i15 >= 0; _i15 -= 1) {
-      var n1 = c1[_i15];
-      var n2 = c2[_i15];
+    for (var _i18 = c2Length - 1; _i18 >= 0; _i18 -= 1) {
+      var n1 = c1[_i18];
+      var n2 = c2[_i18];
 
       if (n2 !== n1) {
         if (isVNode(n1)) {
@@ -4360,220 +4585,6 @@
     fid: fid,
     shc: 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 "".concat(token, "-host");
-  }
-
-  function createInlineStyleVNode(content) {
-    return api.h('style', {
-      key: 'style',
-      attrs: {
-        type: 'text/css'
-      }
-    }, [api.t(content)]);
-  }
-
-  function updateStylesheetToken(vm, template) {
-    var elm = vm.elm,
-        context = vm.context,
-        renderMode = vm.renderMode,
-        shadowMode = vm.shadowMode,
-        _vm$renderer = vm.renderer,
-        getClassList = _vm$renderer.getClassList,
-        removeAttribute = _vm$renderer.removeAttribute,
-        setAttribute = _vm$renderer.setAttribute;
-    var newStylesheets = template.stylesheets,
-        newStylesheetToken = template.stylesheetToken;
-    var isSyntheticShadow = renderMode === 1
-    /* RenderMode.Shadow */
-    && shadowMode === 1
-    /* ShadowMode.Synthetic */
-    ;
-    var hasScopedStyles = context.hasScopedStyles;
-    var newToken;
-    var newHasTokenInClass;
-    var newHasTokenInAttribute; // Reset the styling token applied to the host element.
-
-    var oldToken = context.stylesheetToken,
-        oldHasTokenInClass = context.hasTokenInClass,
-        oldHasTokenInAttribute = context.hasTokenInAttribute;
-
-    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) {
-    var content = [];
-    var root;
-
-    for (var _i16 = 0; _i16 < stylesheets.length; _i16++) {
-      var stylesheet = stylesheets[_i16];
-
-      if (isArray$1(stylesheet)) {
-        ArrayPush$1.apply(content, evaluateStylesheetsContent(stylesheet, stylesheetToken, vm));
-      } else {
-
-        var isScopedCss = stylesheet[KEY__SCOPED_CSS]; // Apply the scope token only if the stylesheet itself is scoped, or if we're rendering synthetic shadow.
-
-        var 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`.
-
-        var 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().
-
-        var useNativeDirPseudoclass = void 0;
-
-        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) {
-    var stylesheets = template.stylesheets,
-        stylesheetToken = template.stylesheetToken;
-    var 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) {
-    var owner = vm;
-
-    while (!isNull(owner)) {
-      if (owner.renderMode === 1
-      /* RenderMode.Shadow */
-      ) {
-        return owner;
-      }
-
-      owner = owner.owner;
-    }
-
-    return owner;
-  }
-
-  function getNearestNativeShadowComponent(vm) {
-    var 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) {
-    var renderMode = vm.renderMode,
-        shadowMode = vm.shadowMode,
-        _vm$renderer2 = vm.renderer,
-        ssr = _vm$renderer2.ssr,
-        insertStylesheet = _vm$renderer2.insertStylesheet;
-
-    if (renderMode === 1
-    /* RenderMode.Shadow */
-    && shadowMode === 1
-    /* ShadowMode.Synthetic */
-    ) {
-      for (var _i17 = 0; _i17 < stylesheets.length; _i17++) {
-        insertStylesheet(stylesheets[_i17]);
-      }
-    } 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
-      var root = getNearestNativeShadowComponent(vm); // null root means a global style
-
-      var target = isNull(root) ? undefined : root.shadowRoot;
-
-      for (var _i18 = 0; _i18 < stylesheets.length; _i18++) {
-        insertStylesheet(stylesheets[_i18], target);
-      }
-    }
-
-    return null;
-  }
   /** Indicates if operations should be logged by the profiler. */
 
   var isProfilerEnabled = false;
@@ -6286,11 +6297,27 @@
   }
 
   function validateClassAttr(vnode, elm, renderer) {
-    var _vnode$data = vnode.data,
-        className = _vnode$data.className,
-        classMap = _vnode$data.classMap;
+    var data = vnode.data,
+        owner = vnode.owner;
+    var className = data.className,
+        classMap = data.classMap;
     var getProperty = renderer.getProperty,
         getClassList = renderer.getClassList;
+    var 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 = "".concat(scopedToken, " ").concat(className);
+      } else if (!isUndefined$1(classMap)) {
+        classMap = Object.assign(Object.assign({}, classMap), _defineProperty({}, scopedToken, true));
+      }
+    }
+
     var nodesAreCompatible = true;
 
     if (!isUndefined$1(className) && String(className) !== getProperty(elm, 'className')) {
@@ -6320,9 +6347,9 @@
   }
 
   function validateStyleAttr(vnode, elm, renderer) {
-    var _vnode$data2 = vnode.data,
-        style = _vnode$data2.style,
-        styleDecls = _vnode$data2.styleDecls;
+    var _vnode$data = vnode.data,
+        style = _vnode$data.style,
+        styleDecls = _vnode$data.styleDecls;
     var getAttribute = renderer.getAttribute;
     var elmStyle = getAttribute(elm, 'style') || '';
     var nodesAreCompatible = true;
@@ -6458,7 +6485,7 @@
 
     return ctor;
   }
-  /* version: 2.20.2 */
+  /* version: 2.21.0 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -6746,7 +6773,15 @@
   }
 
   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;
     }
 
@@ -7257,7 +7292,7 @@
   });
   freeze(LightningElement);
   seal(LightningElement.prototype);
-  /* version: 2.20.2 */
+  /* version: 2.21.0 */
 
   exports.LightningElement = LightningElement;
   exports.__unstable__ProfilerControl = profilerControl;