lwc 2.20.3 → 2.21.1

package/dist/engine-server/commonjs/es2017/engine-server.js

@@ -419,9 +419,9 @@ function htmlEscape(str, attrMode = false) {
  * 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.3";
+const LWC_VERSION = "2.21.1";
 const LWC_VERSION_COMMENT_REGEX = /\/\*LWC compiler v([\d.]+)\*\/\s*}/;
-/** version: 2.20.3 */
+/** version: 2.21.1 */
 
 /*
  * Copyright (c) 2020, salesforce.com, inc.
@@ -530,7 +530,7 @@ function setFeatureFlagForTest(name, value) {
         setFeatureFlag(name, value);
     }
 }
-/** version: 2.20.3 */
+/** version: 2.21.1 */
 
 /* proxy-compat-disable */
 
@@ -3796,10 +3796,11 @@ function mountElement(vnode, parent, anchor, renderer) {
     const { sel, owner, data: { svg }, } = vnode;
     const { createElement } = renderer;
     const namespace = isTrue(svg) ? SVG_NAMESPACE : undefined;
-    const elm = createElement(sel, namespace);
+    const elm = (vnode.elm = createElement(sel, namespace));
     linkNodeToShadow(elm, owner, renderer);
-    fallbackElmHook(elm, vnode, renderer);
-    vnode.elm = elm;
+    applyStyleScoping(elm, owner, renderer);
+    applyDomManual(elm, vnode);
+    applyElementRestrictions(elm, vnode);
     patchElementPropsAndAttrs$1(null, vnode, renderer);
     insertNode(elm, parent, anchor, renderer);
     mountVNodes(vnode.children, elm, renderer, null);
@@ -3814,6 +3815,7 @@ function mountStatic(vnode, parent, anchor, renderer) {
     const { cloneNode, isSyntheticShadowDefined } = renderer;
     const elm = (vnode.elm = cloneNode(vnode.fragment, true));
     linkNodeToShadow(elm, owner, renderer);
+    applyElementRestrictions(elm, vnode);
     // Marks this node as Static to propagate the shadow resolver. must happen after elm is assigned to the proper shadow
     const { renderMode, shadowMode } = owner;
     if (isSyntheticShadowDefined) {
@@ -3821,10 +3823,6 @@ function mountStatic(vnode, parent, anchor, renderer) {
             elm[KEY__SHADOW_STATIC] = true;
         }
     }
-    if (process.env.NODE_ENV !== 'production') {
-        const isLight = renderMode === 0 /* RenderMode.Light */;
-        patchElementWithRestrictions(elm, { isPortal: false, isLight });
-    }
     insertNode(elm, parent, anchor, renderer);
 }
 function mountCustomElement(vnode, parent, anchor, renderer) {
@@ -3841,9 +3839,10 @@ function mountCustomElement(vnode, parent, anchor, renderer) {
         // the custom element from the registry is expecting an upgrade callback
         vm = createViewModelHook(elm, vnode, renderer);
     });
-    linkNodeToShadow(elm, owner, renderer);
     vnode.elm = elm;
     vnode.vm = vm;
+    linkNodeToShadow(elm, owner, renderer);
+    applyStyleScoping(elm, owner, renderer);
     if (vm) {
         allocateChildren(vnode, vm);
     }
@@ -3927,22 +3926,6 @@ function unmountVNodes(vnodes, parent, renderer, doRemove = false, start = 0, en
 function isVNode(vnode) {
     return vnode != null;
 }
-function observeElementChildNodes(elm) {
-    elm.$domManual$ = true;
-}
-function setElementShadowToken(elm, token) {
-    elm.$shadowToken$ = token;
-}
-// Set the scope token class for *.scoped.css styles
-function setScopeTokenClassIfNecessary(elm, owner, renderer) {
-    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);
-    }
-}
 function linkNodeToShadow(elm, owner, renderer) {
     const { renderRoot, renderMode, shadowMode } = owner;
     const { isSyntheticShadowDefined } = renderer;
@@ -3995,31 +3978,37 @@ function patchElementPropsAndAttrs$1(oldVnode, vnode, renderer) {
     patchAttributes(oldVnode, vnode, renderer);
     patchProps(oldVnode, vnode, renderer);
 }
-function fallbackElmHook(elm, vnode, renderer) {
-    const { owner } = vnode;
-    setScopeTokenClassIfNecessary(elm, owner, renderer);
-    if (owner.shadowMode === 1 /* ShadowMode.Synthetic */) {
-        const { data: { context }, } = vnode;
-        const { stylesheetToken } = owner.context;
-        if (!isUndefined$1(context) &&
-            !isUndefined$1(context.lwc) &&
-            context.lwc.dom === "manual" /* LwcDomMode.Manual */) {
-            // this element will now accept any manual content inserted into it
-            observeElementChildNodes(elm);
-        }
-        if (!isUndefined$1(stylesheetToken)) {
-            // when running in synthetic shadow mode, we need to set the shadowToken value
-            // into each element from the template, so they can be styled accordingly.
-            setElementShadowToken(elm, stylesheetToken);
-        }
+function applyStyleScoping(elm, owner, renderer) {
+    // Set the class name for `*.scoped.css` style scoping.
+    const scopeToken = getScopeTokenClass(owner);
+    if (!isNull(scopeToken)) {
+        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(scopeToken);
     }
+    // Set property element for synthetic shadow DOM style scoping.
+    const { stylesheetToken: syntheticToken } = owner.context;
+    if (owner.shadowMode === 1 /* ShadowMode.Synthetic */ && !isUndefined$1(syntheticToken)) {
+        elm.$shadowToken$ = syntheticToken;
+    }
+}
+function applyDomManual(elm, vnode) {
+    var _a;
+    const { owner, data: { context }, } = vnode;
+    if (owner.shadowMode === 1 /* ShadowMode.Synthetic */ && ((_a = context === null || context === void 0 ? void 0 : context.lwc) === null || _a === void 0 ? void 0 : _a.dom) === "manual" /* LwcDomMode.Manual */) {
+        elm.$domManual$ = true;
+    }
+}
+function applyElementRestrictions(elm, vnode) {
+    var _a, _b;
     if (process.env.NODE_ENV !== 'production') {
-        const { data: { context }, } = vnode;
-        const isPortal = !isUndefined$1(context) &&
-            !isUndefined$1(context.lwc) &&
-            context.lwc.dom === "manual" /* LwcDomMode.Manual */;
-        const isLight = owner.renderMode === 0 /* RenderMode.Light */;
-        patchElementWithRestrictions(elm, { isPortal, isLight });
+        const isPortal = vnode.type === 2 /* VNodeType.Element */ && ((_b = (_a = vnode.data.context) === null || _a === void 0 ? void 0 : _a.lwc) === null || _b === void 0 ? void 0 : _b.dom) === "manual" /* LwcDomMode.Manual */;
+        const isLight = vnode.owner.renderMode === 0 /* RenderMode.Light */;
+        patchElementWithRestrictions(elm, {
+            isPortal,
+            isLight,
+        });
     }
 }
 function allocateChildren(vnode, vm) {
@@ -4054,15 +4043,6 @@ function createViewModelHook(elm, vnode, renderer) {
         return vm;
     }
     const { sel, mode, ctor, owner } = vnode;
-    setScopeTokenClassIfNecessary(elm, owner, renderer);
-    if (owner.shadowMode === 1 /* ShadowMode.Synthetic */) {
-        const { stylesheetToken } = owner.context;
-        // when running in synthetic shadow mode, we need to set the shadowToken value
-        // into each element from the template, so they can be styled accordingly.
-        if (!isUndefined$1(stylesheetToken)) {
-            setElementShadowToken(elm, stylesheetToken);
-        }
-    }
     vm = createVM(elm, ctor, renderer, {
         mode,
         owner,
@@ -6281,7 +6261,7 @@ function freezeTemplate(tmpl) {
         });
     }
 }
-/* version: 2.20.3 */
+/* version: 2.21.1 */
 
 /*
  * Copyright (c) 2020, salesforce.com, inc.
@@ -6289,6 +6269,16 @@ function freezeTemplate(tmpl) {
  * SPDX-License-Identifier: MIT
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
+// We use Symbols as the keys for HostElement properties to avoid conflicting
+// with public component properties defined by a component author.
+const HostNamespaceKey = Symbol('namespace');
+const HostTypeKey = Symbol('type');
+const HostParentKey = Symbol('parent');
+const HostShadowRootKey = Symbol('shadow-root');
+const HostChildrenKey = Symbol('children');
+const HostAttributesKey = Symbol('attributes');
+const HostEventListenersKey = Symbol('event-listeners');
+const HostValueKey = Symbol('value');
 var HostNodeType;
 (function (HostNodeType) {
     HostNodeType["Text"] = "text";
@@ -6323,16 +6313,16 @@ function unsupportedMethod(name) {
         throw new TypeError(`"${name}" is not supported in this environment`);
     };
 }
-function createElement(name, namespace) {
+function createElement(tagName, namespace) {
     return {
-        type: HostNodeType.Element,
-        name,
-        namespace: namespace !== null && namespace !== void 0 ? namespace : HTML_NAMESPACE,
-        parent: null,
-        shadowRoot: null,
-        children: [],
-        attributes: [],
-        eventListeners: {},
+        [HostTypeKey]: HostNodeType.Element,
+        tagName,
+        [HostNamespaceKey]: namespace !== null && namespace !== void 0 ? namespace : HTML_NAMESPACE,
+        [HostParentKey]: null,
+        [HostShadowRootKey]: null,
+        [HostChildrenKey]: [],
+        [HostAttributesKey]: [],
+        [HostEventListenersKey]: {},
     };
 }
 const registry = create(null);
@@ -6347,11 +6337,11 @@ function registerCustomElement(name, ctor) {
 class HTMLElementImpl {
     constructor() {
         const { constructor } = this;
-        const name = reverseRegistry.get(constructor);
-        if (!name) {
+        const tagName = reverseRegistry.get(constructor);
+        if (!tagName) {
             throw new TypeError(`Invalid Construction`);
         }
-        return createElement(name);
+        return createElement(tagName);
     }
 }
 const ssr = true;
@@ -6361,73 +6351,74 @@ function isHydrating() {
 const isNativeShadowDefined = false;
 const isSyntheticShadowDefined = false;
 function insert(node, parent, anchor) {
-    if (node.parent !== null && node.parent !== parent) {
-        const nodeIndex = node.parent.children.indexOf(node);
-        node.parent.children.splice(nodeIndex, 1);
+    const nodeParent = node[HostParentKey];
+    if (nodeParent !== null && nodeParent !== parent) {
+        const nodeIndex = nodeParent[HostChildrenKey].indexOf(node);
+        nodeParent[HostChildrenKey].splice(nodeIndex, 1);
     }
-    node.parent = parent;
-    const anchorIndex = isNull(anchor) ? -1 : parent.children.indexOf(anchor);
+    node[HostParentKey] = parent;
+    const anchorIndex = isNull(anchor) ? -1 : parent[HostChildrenKey].indexOf(anchor);
     if (anchorIndex === -1) {
-        parent.children.push(node);
+        parent[HostChildrenKey].push(node);
     }
     else {
-        parent.children.splice(anchorIndex, 0, node);
+        parent[HostChildrenKey].splice(anchorIndex, 0, node);
     }
 }
 function remove(node, parent) {
-    const nodeIndex = parent.children.indexOf(node);
-    parent.children.splice(nodeIndex, 1);
+    const nodeIndex = parent[HostChildrenKey].indexOf(node);
+    parent[HostChildrenKey].splice(nodeIndex, 1);
 }
 function cloneNode(node) {
     return node;
 }
 function createFragment(html) {
     return {
-        type: HostNodeType.Raw,
-        parent: null,
-        value: html,
+        [HostTypeKey]: HostNodeType.Raw,
+        [HostParentKey]: null,
+        [HostValueKey]: html,
     };
 }
 function createText(content) {
     return {
-        type: HostNodeType.Text,
-        value: String(content),
-        parent: null,
+        [HostTypeKey]: HostNodeType.Text,
+        [HostValueKey]: String(content),
+        [HostParentKey]: null,
     };
 }
 function createComment(content) {
     return {
-        type: HostNodeType.Comment,
-        value: content,
-        parent: null,
+        [HostTypeKey]: HostNodeType.Comment,
+        [HostValueKey]: content,
+        [HostParentKey]: null,
     };
 }
 function nextSibling(node) {
-    const { parent } = node;
+    const parent = node[HostParentKey];
     if (isNull(parent)) {
         return null;
     }
-    const nodeIndex = parent.children.indexOf(node);
-    return parent.children[nodeIndex + 1] || null;
+    const nodeIndex = parent[HostChildrenKey].indexOf(node);
+    return parent[HostChildrenKey][nodeIndex + 1] || null;
 }
 function attachShadow(element, config) {
-    element.shadowRoot = {
-        type: HostNodeType.ShadowRoot,
-        children: [],
+    element[HostShadowRootKey] = {
+        [HostTypeKey]: HostNodeType.ShadowRoot,
+        [HostChildrenKey]: [],
         mode: config.mode,
         delegatesFocus: !!config.delegatesFocus,
     };
-    return element.shadowRoot;
+    return element[HostShadowRootKey];
 }
 function getProperty(node, key) {
     var _a, _b;
     if (key in node) {
         return node[key];
     }
-    if (node.type === HostNodeType.Element) {
+    if (node[HostTypeKey] === HostNodeType.Element) {
         const attrName = htmlPropertyToAttribute(key);
         // Handle all the boolean properties.
-        if (isBooleanAttribute(attrName, node.name)) {
+        if (isBooleanAttribute(attrName, node.tagName)) {
             return (_a = getAttribute(node, attrName)) !== null && _a !== void 0 ? _a : false;
         }
         // Handle global html attributes and AOM.
@@ -6436,7 +6427,7 @@ function getProperty(node, key) {
         }
         // Handle special elements live bindings. The checked property is already handled above
         // in the boolean case.
-        if (node.name === 'input' && key === 'value') {
+        if (node.tagName === 'input' && key === 'value') {
             return (_b = getAttribute(node, 'value')) !== null && _b !== void 0 ? _b : '';
         }
     }
@@ -6449,20 +6440,20 @@ function setProperty(node, key, value) {
     if (key in node) {
         return (node[key] = value);
     }
-    if (node.type === HostNodeType.Element) {
+    if (node[HostTypeKey] === HostNodeType.Element) {
         const attrName = htmlPropertyToAttribute(key);
         if (key === 'innerHTML') {
-            node.children = [
+            node[HostChildrenKey] = [
                 {
-                    type: HostNodeType.Raw,
-                    parent: node,
-                    value,
+                    [HostTypeKey]: HostNodeType.Raw,
+                    [HostParentKey]: node,
+                    [HostValueKey]: value,
                 },
             ];
             return;
         }
         // Handle all the boolean properties.
-        if (isBooleanAttribute(attrName, node.name)) {
+        if (isBooleanAttribute(attrName, node.tagName)) {
             return value === true
                 ? setAttribute(node, attrName, '')
                 : removeAttribute(node, attrName);
@@ -6473,7 +6464,7 @@ function setProperty(node, key, value) {
         }
         // Handle special elements live bindings. The checked property is already handled above
         // in the boolean case.
-        if (node.name === 'input' && attrName === 'value') {
+        if (node.tagName === 'input' && attrName === 'value') {
             return isNull(value) || isUndefined$1(value)
                 ? removeAttribute(node, 'value')
                 : setAttribute(node, 'value', value);
@@ -6485,32 +6476,32 @@ function setProperty(node, key, value) {
     }
 }
 function setText(node, content) {
-    if (node.type === HostNodeType.Text) {
-        node.value = content;
+    if (node[HostTypeKey] === HostNodeType.Text) {
+        node[HostValueKey] = content;
     }
-    else if (node.type === HostNodeType.Element) {
-        node.children = [
+    else if (node[HostTypeKey] === HostNodeType.Element) {
+        node[HostChildrenKey] = [
             {
-                type: HostNodeType.Text,
-                parent: node,
-                value: content,
+                [HostTypeKey]: HostNodeType.Text,
+                [HostParentKey]: node,
+                [HostValueKey]: content,
             },
         ];
     }
 }
 function getAttribute(element, name, namespace = null) {
-    const attribute = element.attributes.find((attr) => attr.name === name && attr.namespace === namespace);
+    const attribute = element[HostAttributesKey].find((attr) => attr.name === name && attr[HostNamespaceKey] === namespace);
     return attribute ? attribute.value : null;
 }
 function setAttribute(element, name, value, namespace = null) {
-    const attribute = element.attributes.find((attr) => attr.name === name && attr.namespace === namespace);
+    const attribute = element[HostAttributesKey].find((attr) => attr.name === name && attr[HostNamespaceKey] === namespace);
     if (isUndefined$1(namespace)) {
         namespace = null;
     }
     if (isUndefined$1(attribute)) {
-        element.attributes.push({
+        element[HostAttributesKey].push({
             name,
-            namespace,
+            [HostNamespaceKey]: namespace,
             value: String(value),
         });
     }
@@ -6519,18 +6510,18 @@ function setAttribute(element, name, value, namespace = null) {
     }
 }
 function removeAttribute(element, name, namespace) {
-    element.attributes = element.attributes.filter((attr) => attr.name !== name && attr.namespace !== namespace);
+    element[HostAttributesKey] = element[HostAttributesKey].filter((attr) => attr.name !== name && attr[HostNamespaceKey] !== namespace);
 }
 function getClassList(element) {
     function getClassAttribute() {
-        let classAttribute = element.attributes.find((attr) => attr.name === 'class' && isNull(attr.namespace));
+        let classAttribute = element[HostAttributesKey].find((attr) => attr.name === 'class' && isNull(attr[HostNamespaceKey]));
         if (isUndefined$1(classAttribute)) {
             classAttribute = {
                 name: 'class',
-                namespace: null,
+                [HostNamespaceKey]: null,
                 value: '',
             };
-            element.attributes.push(classAttribute);
+            element[HostAttributesKey].push(classAttribute);
         }
         return classAttribute;
     }
@@ -6550,12 +6541,12 @@ function getClassList(element) {
     };
 }
 function setCSSStyleProperty(element, name, value, important) {
-    const styleAttribute = element.attributes.find((attr) => attr.name === 'style' && isNull(attr.namespace));
+    const styleAttribute = element[HostAttributesKey].find((attr) => attr.name === 'style' && isNull(attr[HostNamespaceKey]));
     const serializedProperty = `${name}: ${value}${important ? ' !important' : ''}`;
     if (isUndefined$1(styleAttribute)) {
-        element.attributes.push({
+        element[HostAttributesKey].push({
             name: 'style',
-            namespace: null,
+            [HostNamespaceKey]: null,
             value: serializedProperty,
         });
     }
@@ -6564,7 +6555,7 @@ function setCSSStyleProperty(element, name, value, important) {
     }
 }
 function isConnected(node) {
-    return !isNull(node.parent);
+    return !isNull(node[HostParentKey]);
 }
 // Noop on SSR (for now). This need to be reevaluated whenever we will implement support for
 // synthetic shadow.
@@ -6652,13 +6643,13 @@ function serializeAttributes(attributes) {
 function serializeChildNodes(children) {
     return children
         .map((child) => {
-        switch (child.type) {
+        switch (child[HostTypeKey]) {
             case HostNodeType.Text:
-                return child.value === '' ? '\u200D' : htmlEscape(child.value);
+                return child[HostValueKey] === '' ? '\u200D' : htmlEscape(child[HostValueKey]);
             case HostNodeType.Comment:
-                return `<!--${htmlEscape(child.value)}-->`;
+                return `<!--${htmlEscape(child[HostValueKey])}-->`;
             case HostNodeType.Raw:
-                return child.value;
+                return child[HostValueKey];
             case HostNodeType.Element:
                 return serializeElement(child);
         }
@@ -6670,27 +6661,30 @@ function serializeShadowRoot(shadowRoot) {
     if (shadowRoot.delegatesFocus) {
         attrs.push('shadowrootdelegatesfocus');
     }
-    return `<template ${attrs.join(' ')}>${serializeChildNodes(shadowRoot.children)}</template>`;
+    return `<template ${attrs.join(' ')}>${serializeChildNodes(shadowRoot[HostChildrenKey])}</template>`;
 }
 function serializeElement(element) {
     let output = '';
-    const { name, namespace } = element;
+    const tagName = element.tagName;
+    const namespace = element[HostNamespaceKey];
     const isForeignElement = namespace !== HTML_NAMESPACE;
-    const hasChildren = element.children.length > 0;
-    const attrs = element.attributes.length ? ` ${serializeAttributes(element.attributes)}` : '';
-    output += `<${name}${attrs}`;
+    const hasChildren = element[HostChildrenKey].length > 0;
+    const attrs = element[HostAttributesKey].length
+        ? ` ${serializeAttributes(element[HostAttributesKey])}`
+        : '';
+    output += `<${tagName}${attrs}`;
     // Note that foreign elements can have children but not shadow roots
     if (isForeignElement && !hasChildren) {
         output += '/>';
         return output;
     }
     output += '>';
-    if (element.shadowRoot) {
-        output += serializeShadowRoot(element.shadowRoot);
+    if (element[HostShadowRootKey]) {
+        output += serializeShadowRoot(element[HostShadowRootKey]);
     }
-    output += serializeChildNodes(element.children);
-    if (!isVoidElement(name, namespace) || hasChildren) {
-        output += `</${name}>`;
+    output += serializeChildNodes(element[HostChildrenKey]);
+    if (!isVoidElement(tagName, namespace) || hasChildren) {
+        output += `</${tagName}>`;
     }
     return output;
 }
@@ -6702,14 +6696,14 @@ function serializeElement(element) {
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
 const FakeRootElement = {
-    type: HostNodeType.Element,
-    name: 'fake-root-element',
-    namespace: HTML_NAMESPACE,
-    parent: null,
-    shadowRoot: null,
-    children: [],
-    attributes: [],
-    eventListeners: {},
+    [HostTypeKey]: HostNodeType.Element,
+    tagName: 'fake-root-element',
+    [HostNamespaceKey]: HTML_NAMESPACE,
+    [HostParentKey]: null,
+    [HostShadowRootKey]: null,
+    [HostChildrenKey]: [],
+    [HostAttributesKey]: [],
+    [HostEventListenersKey]: {},
 };
 function renderComponent(tagName, Ctor, props = {}) {
     if (!isString(tagName)) {
@@ -6730,7 +6724,7 @@ function renderComponent(tagName, Ctor, props = {}) {
     for (const [key, value] of Object.entries(props)) {
         element[key] = value;
     }
-    element.parent = FakeRootElement;
+    element[HostParentKey] = FakeRootElement;
     connectRootElement(element);
     return serializeElement(element);
 }
@@ -6743,7 +6737,7 @@ function renderComponent(tagName, Ctor, props = {}) {
  */
 freeze(LightningElement);
 seal(LightningElement.prototype);
-/* version: 2.20.3 */
+/* version: 2.21.1 */
 
 exports.LightningElement = LightningElement;
 exports.api = api$1;