lwc 2.45.4 → 2.46.0

package/README.md

@@ -1,10 +1,10 @@
-Lightning Web Components (LWC) is an enterprise-grade web components foundation for building user interfaces. LWC provides a simple authoring format for UI Components. LWC compiles this authoring format into low-level Web Component APIs. The `lwc` package is the main entry point for dependencies.
+Lightning Web Components (LWC) is an enterprise-grade web components foundation for building user interfaces. LWC provides a simple authoring format for UI components, which is compiled into low-level Web Component APIs. The `lwc` package is the main entry point for dependencies.
 
 -   Develop components quickly and declaratively using HTML, JavaScript, and CSS.
 -   Develop accessible components so that everyone can understand and navigate your app.
--   Components are encapsulated in all browsers via the `@lwc/synthetic-shadow` package, which polyfills the Shadow DOM.
+-   Components are encapsulated in Shadow DOM, with the `@lwc/synthetic-shadow` package as an optional polyfill for older browsers.
 
-Developing a Lightning web component is this easy.
+Developing a Lightning web component is this easy:
 
 ```ascii
 counter
@@ -58,16 +58,10 @@ For IE 11, LWC uses compatibility mode. Code is transpiled down to ES5 and the r
 
 [lwc.dev](https://lwc.dev) has all the information you need to develop components using LWC, including [code recipes](https://recipes.lwc.dev/) and code playgrounds.
 
-Get started fast using the [`create-lwc-app`](https://www.npmjs.com/package/create-lwc-app) tool.
-
-```bash
-npx create-lwc-app my-app
-cd my-app
-npm run watch
-```
-
 For support, use the `lwc` tag on [Stack Overflow](https://stackoverflow.com/questions/tagged/lwc) or the `lightning-web-components` tag on [Salesforce Stack Exchange](https://salesforce.stackexchange.com/questions/tagged/lightning-web-components).
 
+When filing a bug, it's useful to use [playground.lwc.dev](https://playground.lwc.dev/) to create a live reproduction of the issue.
+
 ## Release Notes
 
 Changes are documented at [github.com/salesforce/lwc/releases](https://github.com/salesforce/lwc/releases).

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

@@ -246,55 +246,35 @@ const XLINK_NAMESPACE = 'http://www.w3.org/1999/xlink';
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
 const CAMEL_REGEX = /-([a-z])/g;
-// Convoluted map generation so that @lwc/shared remains fully tree-shakable (verify-treeshakable)
-const { NO_STANDARD_ATTRIBUTE_PROPERTY_MAPPING, NO_STANDARD_PROPERTY_ATTRIBUTE_MAPPING } = 
-/*#__PURE__*/ (() => {
-    /**
-     * Map composed of properties to attributes not following the HTML property to attribute mapping
-     * convention.
-     */
-    const NO_STANDARD_PROPERTY_ATTRIBUTE_MAPPING = new Map([
-        ['accessKey', 'accesskey'],
-        ['readOnly', 'readonly'],
-        ['tabIndex', 'tabindex'],
-        ['bgColor', 'bgcolor'],
-        ['colSpan', 'colspan'],
-        ['rowSpan', 'rowspan'],
-        ['contentEditable', 'contenteditable'],
-        ['crossOrigin', 'crossorigin'],
-        ['dateTime', 'datetime'],
-        ['formAction', 'formaction'],
-        ['isMap', 'ismap'],
-        ['maxLength', 'maxlength'],
-        ['minLength', 'minlength'],
-        ['noValidate', 'novalidate'],
-        ['useMap', 'usemap'],
-        ['htmlFor', 'for'],
-    ]);
-    /**
-     * Inverted map with attribute name key and property name value.
-     */
-    const NO_STANDARD_ATTRIBUTE_PROPERTY_MAPPING = new Map();
-    NO_STANDARD_PROPERTY_ATTRIBUTE_MAPPING.forEach((value, key) => NO_STANDARD_ATTRIBUTE_PROPERTY_MAPPING.set(value, key));
-    return {
-        NO_STANDARD_ATTRIBUTE_PROPERTY_MAPPING,
-        NO_STANDARD_PROPERTY_ATTRIBUTE_MAPPING,
-    };
-})();
+// These are HTML standard prop/attribute IDL mappings, but are not predictable based on camel/kebab-case conversion
+const SPECIAL_PROPERTY_ATTRIBUTE_MAPPING = /*@__PURE__@*/ new Map([
+    ['accessKey', 'accesskey'],
+    ['readOnly', 'readonly'],
+    ['tabIndex', 'tabindex'],
+    ['bgColor', 'bgcolor'],
+    ['colSpan', 'colspan'],
+    ['rowSpan', 'rowspan'],
+    ['contentEditable', 'contenteditable'],
+    ['crossOrigin', 'crossorigin'],
+    ['dateTime', 'datetime'],
+    ['formAction', 'formaction'],
+    ['isMap', 'ismap'],
+    ['maxLength', 'maxlength'],
+    ['minLength', 'minlength'],
+    ['noValidate', 'novalidate'],
+    ['useMap', 'usemap'],
+    ['htmlFor', 'for'],
+]);
 /**
  * Map associating previously transformed HTML property into HTML attribute.
  */
 const CACHED_PROPERTY_ATTRIBUTE_MAPPING = /*@__PURE__@*/ new Map();
-/**
- * Map associating previously transformed HTML attribute into HTML property.
- */
-const CACHED_ATTRIBUTE_PROPERTY_MAPPING = /*@__PURE__@*/ new Map();
 function htmlPropertyToAttribute(propName) {
     const ariaAttributeName = AriaPropNameToAttrNameMap[propName];
     if (!isUndefined$1(ariaAttributeName)) {
         return ariaAttributeName;
     }
-    const specialAttributeName = NO_STANDARD_PROPERTY_ATTRIBUTE_MAPPING.get(propName);
+    const specialAttributeName = SPECIAL_PROPERTY_ATTRIBUTE_MAPPING.get(propName);
     if (!isUndefined$1(specialAttributeName)) {
         return specialAttributeName;
     }
@@ -317,22 +297,17 @@ function htmlPropertyToAttribute(propName) {
     CACHED_PROPERTY_ATTRIBUTE_MAPPING.set(propName, attributeName);
     return attributeName;
 }
-function htmlAttributeToProperty(attrName) {
-    const ariaPropertyName = AriaAttrNameToPropNameMap[attrName];
-    if (!isUndefined$1(ariaPropertyName)) {
-        return ariaPropertyName;
-    }
-    const specialPropertyName = NO_STANDARD_ATTRIBUTE_PROPERTY_MAPPING.get(attrName);
-    if (!isUndefined$1(specialPropertyName)) {
-        return specialPropertyName;
-    }
-    const cachedPropertyName = CACHED_ATTRIBUTE_PROPERTY_MAPPING.get(attrName);
-    if (!isUndefined$1(cachedPropertyName)) {
-        return cachedPropertyName;
+/**
+ * Map associating previously transformed kabab-case attributes into camel-case props.
+ */
+const CACHED_KEBAB_CAMEL_MAPPING = /*@__PURE__@*/ new Map();
+function kebabCaseToCamelCase(attrName) {
+    let result = CACHED_KEBAB_CAMEL_MAPPING.get(attrName);
+    if (isUndefined$1(result)) {
+        result = StringReplace.call(attrName, CAMEL_REGEX, (g) => g[1].toUpperCase());
+        CACHED_KEBAB_CAMEL_MAPPING.set(attrName, result);
     }
-    const propertyName = StringReplace.call(attrName, CAMEL_REGEX, (g) => g[1].toUpperCase());
-    CACHED_ATTRIBUTE_PROPERTY_MAPPING.set(attrName, propertyName);
-    return propertyName;
+    return result;
 }
 
 /*
@@ -342,9 +317,9 @@ function htmlAttributeToProperty(attrName) {
  * 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.45.4";
+const LWC_VERSION = "2.46.0";
 const LWC_VERSION_COMMENT_REGEX = /\/\*LWC compiler v([\d.]+)\*\/\s*}/;
-/** version: 2.45.4 */
+/** version: 2.46.0 */
 
 /* proxy-compat-disable */
 /**
@@ -423,7 +398,7 @@ function setFeatureFlagForTest(name, value) {
         setFeatureFlag(name, value);
     }
 }
-/** version: 2.45.4 */
+/** version: 2.46.0 */
 
 /* proxy-compat-disable */
 /**
@@ -488,7 +463,7 @@ function applyAriaReflection(prototype = Element.prototype) {
         }
     }
 }
-/** version: 2.45.4 */
+/** version: 2.46.0 */
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -3793,27 +3768,35 @@ function isVScopedSlotFragment(vnode) {
  * SPDX-License-Identifier: MIT
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
-const ColonCharCode$1 = 58;
+const ColonCharCode = 58;
 function patchAttributes(oldVnode, vnode, renderer) {
-    const { attrs } = vnode.data;
+    const { attrs, external } = vnode.data;
     if (isUndefined$1(attrs)) {
         return;
     }
     const oldAttrs = isNull(oldVnode) ? EmptyObject : oldVnode.data.attrs;
+    // Attrs may be the same due to the static content optimization, so we can skip diffing
     if (oldAttrs === attrs) {
         return;
     }
     const { elm } = vnode;
-    const { setAttribute, removeAttribute } = renderer;
+    const { setAttribute, removeAttribute, setProperty } = renderer;
     for (const key in attrs) {
         const cur = attrs[key];
         const old = oldAttrs[key];
         if (old !== cur) {
-            if (StringCharCodeAt.call(key, 3) === ColonCharCode$1) {
+            let propName;
+            // For external custom elements, sniff to see if the attr should be considered a prop.
+            // Use kebabCaseToCamelCase directly because we don't want to set props like `ariaLabel` or `tabIndex`
+            // on a custom element versus just using the more reliable attribute format.
+            if (external && (propName = kebabCaseToCamelCase(key)) in elm) {
+                setProperty(elm, propName, cur);
+            }
+            else if (StringCharCodeAt.call(key, 3) === ColonCharCode) {
                 // Assume xml namespace
                 setAttribute(elm, key, cur, XML_NAMESPACE);
             }
-            else if (StringCharCodeAt.call(key, 5) === ColonCharCode$1) {
+            else if (StringCharCodeAt.call(key, 5) === ColonCharCode) {
                 // Assume xlink namespace
                 setAttribute(elm, key, cur, XLINK_NAMESPACE);
             }
@@ -3827,46 +3810,6 @@ function patchAttributes(oldVnode, vnode, renderer) {
     }
 }
 
-/*
- * 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
- */
-const ColonCharCode = 58;
-function patchAttrUnlessProp(oldVnode, vnode, renderer) {
-    const { data: { attrs }, elm, } = vnode;
-    if (isUndefined$1(attrs)) {
-        return;
-    }
-    const { removeAttribute, setAttribute, setProperty } = renderer;
-    const oldAttrs = isNull(oldVnode) ? EmptyObject : oldVnode.data.attrs;
-    for (const name in attrs) {
-        const cur = attrs[name];
-        const old = oldAttrs[name];
-        if (old !== cur) {
-            const propName = htmlAttributeToProperty(name);
-            if (propName in elm) {
-                setProperty(elm, name, cur);
-            }
-            else if (StringCharCodeAt.call(name, 3) === ColonCharCode) {
-                // Assume xml namespace
-                setAttribute(elm, name, cur, XML_NAMESPACE);
-            }
-            else if (StringCharCodeAt.call(name, 5) === ColonCharCode) {
-                // Assume xlink namespace
-                setAttribute(elm, name, cur, XLINK_NAMESPACE);
-            }
-            else if (isNull(cur) || isUndefined$1(cur)) {
-                removeAttribute(elm, name);
-            }
-            else {
-                setAttribute(elm, name, cur);
-            }
-        }
-    }
-}
-
 /*
  * Copyright (c) 2018, salesforce.com, inc.
  * All rights reserved.
@@ -3888,6 +3831,7 @@ function patchProps(oldVnode, vnode, renderer) {
     if (!isNull(oldVnode)) {
         oldProps = oldVnode.data.props;
         const oldSpread = oldVnode.data.spread;
+        // Props may be the same due to the static content optimization, so we can skip diffing
         if (oldProps === props && oldSpread === spread) {
             return;
         }
@@ -4018,7 +3962,9 @@ function patchStyleAttribute(oldVnode, vnode, renderer) {
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
 function applyEventListeners(vnode, renderer) {
-    const { elm, data: { on }, } = vnode;
+    var _a;
+    const { elm } = vnode;
+    const on = (_a = vnode.data) === null || _a === void 0 ? void 0 : _a.on;
     if (isUndefined$1(on)) {
         return;
     }
@@ -4230,6 +4176,8 @@ function mountStatic(vnode, parent, anchor, renderer) {
         }
     }
     insertNode(elm, parent, anchor, renderer);
+    // Event listeners are only applied once when mounting, so they are allowed for static vnodes
+    applyEventListeners(vnode, renderer);
 }
 function mountCustomElement(vnode, parent, anchor, renderer) {
     const { sel, owner } = vnode;
@@ -4457,12 +4405,7 @@ function patchElementPropsAndAttrs$1(oldVnode, vnode, renderer) {
     // value is set before type=radio.
     patchClassAttribute(oldVnode, vnode, renderer);
     patchStyleAttribute(oldVnode, vnode, renderer);
-    if (vnode.data.external) {
-        patchAttrUnlessProp(oldVnode, vnode, renderer);
-    }
-    else {
-        patchAttributes(oldVnode, vnode, renderer);
-    }
+    patchAttributes(oldVnode, vnode, renderer);
     patchProps(oldVnode, vnode, renderer);
 }
 function applyStyleScoping(elm, owner, renderer) {
@@ -4862,7 +4805,7 @@ function ssf(slotName, factory) {
     };
 }
 // [st]atic node
-function st(fragment, key) {
+function st(fragment, key, data) {
     return {
         type: 4 /* VNodeType.Static */,
         sel: undefined,
@@ -4870,6 +4813,7 @@ function st(fragment, key) {
         elm: undefined,
         fragment,
         owner: getVMBeingRendered(),
+        data,
     };
 }
 // [fr]agment node
@@ -4975,7 +4919,12 @@ function s(slotName, data, children, slotset) {
                     // undefined is for root components, but root components cannot accept slotted content
                     setVMBeingRendered(slotset.owner);
                     try {
-                        ArrayPush$1.call(newChildren, vnode.factory(data.slotData, data.key));
+                        // The factory function is a template snippet from the slot set owner's template,
+                        // hence switch over to the slot set owner's template reactive observer
+                        const { tro } = slotset.owner;
+                        tro.observe(() => {
+                            ArrayPush$1.call(newChildren, vnode.factory(data.slotData, data.key));
+                        });
                     }
                     finally {
                         setVMBeingRendered(vmBeingRenderedInception);
@@ -6768,6 +6717,7 @@ function hydrateStaticElement(elm, vnode, renderer) {
         return handleMismatch(elm, vnode, renderer);
     }
     vnode.elm = elm;
+    applyEventListeners(vnode, renderer);
     return elm;
 }
 function hydrateFragment(elm, vnode, renderer) {
@@ -7375,7 +7325,7 @@ function readonly(obj) {
     }
     return getReadOnlyProxy(obj);
 }
-/** version: 2.45.4 */
+/** version: 2.46.0 */
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -7805,7 +7755,7 @@ function rendererFactory(baseRenderer) {
     function isNull(obj) {
         return obj === null;
     }
-    /** version: 2.45.4 */
+    /** version: 2.46.0 */
 
     /*
      * Copyright (c) 2023, salesforce.com, inc.
@@ -8424,7 +8374,7 @@ function registerContextProvider(elm, adapterContextToken, onContextSubscription
         });
     }));
 }
-/** version: 2.45.4 */
+/** version: 2.46.0 */
 
 export { LightningElement, profilerControl as __unstable__ProfilerControl, reportingControl as __unstable__ReportingControl, 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, rendererFactory, sanitizeAttribute, setFeatureFlag, setFeatureFlagForTest, setHooks, swapComponent, swapStyle, swapTemplate, track, unwrap, wire };
 //# sourceMappingURL=engine-dom.js.map