lwc 2.20.2 → 2.21.0

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

@@ -299,9 +299,9 @@ function htmlPropertyToAttribute(propName) {
  * 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.
@@ -455,7 +455,7 @@ function setFeatureFlagForTest(name, value) {
         setFeatureFlag(name, value);
     }
 }
-/** version: 2.20.2 */
+/** version: 2.21.0 */
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -3356,6 +3356,175 @@ function getComponentDef(Ctor) {
     };
 }
 
+/*
+ * 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.
@@ -3867,10 +4036,9 @@ function setElementShadowToken(elm, token) {
 }
 // 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);
@@ -4633,166 +4801,6 @@ const api = freeze({
     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.
@@ -6570,8 +6578,24 @@ function validateAttrs(vnode, elm, renderer) {
     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')) {
@@ -6811,7 +6835,7 @@ function getComponentConstructor(elm) {
     }
     return ctor;
 }
-/* version: 2.20.2 */
+/* version: 2.21.0 */
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -7057,7 +7081,15 @@ function nextSibling(node) {
     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);
@@ -7491,6 +7523,6 @@ defineProperty(LightningElement, 'CustomElementConstructor', {
 });
 freeze(LightningElement);
 seal(LightningElement.prototype);
-/* version: 2.20.2 */
+/* version: 2.21.0 */
 
 export { LightningElement, profilerControl as __unstable__ProfilerControl, api$1 as api, deprecatedBuildCustomElementConstructor as buildCustomElementConstructor, createContextProvider, createElement, freezeTemplate, getComponentConstructor, getComponentDef, hydrateComponent, isComponentConstructor, isNodeShadowed as isNodeFromTemplate, parseFragment, parseSVGFragment, readonly, register, registerComponent, registerDecorators, registerTemplate, renderer, sanitizeAttribute, setFeatureFlag, setFeatureFlagForTest, setHooks, swapComponent, swapStyle, swapTemplate, track, unwrap, wire };