@lwc/template-compiler 8.18.1 → 8.19.0

package/README.md

@@ -60,6 +60,7 @@ const { code, warnings } = compile(`<template><h1>Hello World!</h1></template>`,
 - `preserveHtmlComments` (boolean, optional, `false` by default) - set to `true` to disable the default behavior of stripping HTML comments.
 - `enableStaticContentOptimization` (boolean, optional, `true` by default) - set to `false` to disable static content optimizations.
 - `enableLwcSpread` (boolean, optional, `true` by default) - Deprecated. Ignored by template-compiler. `lwc:spread` is always enabled.
+- `enableLwcOn` (boolean, optional, `false` by default) - set to `true` to enable `lwc:on` directive in the template.
 - `customRendererConfig` (CustomRendererConfig, optional) - specifies a configuration to use to match elements. Matched elements will get a custom renderer hook in the generated template.
 - `instrumentation` (InstrumentationObject, optional) - instrumentation object to gather metrics and non-error logs for internal use. See the `@lwc/errors` package for details on the interface.
 - `disableSyntheticShadowSupport` (type: `boolean`, default: `false`) - Set to true if synthetic shadow DOM support is not needed, which can result in smaller/faster output.

package/dist/codegen/codegen.d.ts

@@ -1,7 +1,7 @@
 import * as t from '../shared/estree';
 import { LWCDirectiveRenderMode } from '../shared/types';
 import type State from '../state';
-import type { ChildNode, Expression, ComplexExpression, Literal, Root, EventListener, RefDirective, Text, StaticElement, Attribute, KeyDirective } from '../shared/types';
+import type { ChildNode, Expression, ComplexExpression, Literal, Root, EventListener, RefDirective, Text, StaticElement, Attribute, KeyDirective, OnDirective } from '../shared/types';
 import type { APIVersion } from '@lwc/shared';
 export default class CodeGen {
     /** The AST root. */
@@ -93,6 +93,7 @@ export default class CodeGen {
     getMemoizationId(): import("estree").Identifier;
     genBooleanAttributeExpr(bindExpr: t.Expression): import("estree").ConditionalExpression;
     genEventListeners(listeners: EventListener[]): import("estree").Property;
+    genDynamicEventListeners(onDirective: OnDirective): import("estree").Property[];
     genRef(ref: RefDirective): import("estree").Property;
     genKeyExpression(ref: KeyDirective | undefined, slotParentName: string | undefined): import("estree").SimpleLiteral | import("estree").CallExpression;
     /**

package/dist/config.d.ts

@@ -56,6 +56,10 @@ export interface Config {
      * @deprecated Spread operator is now always enabled.
      */
     enableLwcSpread?: boolean;
+    /**
+     * When true, enables `lwc:on` directive.
+     */
+    enableLwcOn?: boolean;
     /**
      * Config to use to collect metrics and logs
      */

package/dist/index.cjs.js

@@ -207,6 +207,7 @@ const AVAILABLE_OPTION_NAMES = new Set([
     'apiVersion',
     'customRendererConfig',
     'enableLwcSpread',
+    'enableLwcOn',
     'enableStaticContentOptimization',
     // TODO [#3370]: remove experimental template expression flag
     'experimentalComplexExpressions',
@@ -269,6 +270,7 @@ function normalizeConfig(config) {
         enableDynamicComponents: false,
         enableStaticContentOptimization: true,
         enableLwcSpread: true,
+        enableLwcOn: false,
         disableSyntheticShadowSupport: false,
         ...config,
         apiVersion, // overrides the config apiVersion
@@ -9110,6 +9112,14 @@ function spreadDirective(value, location) {
         location,
     };
 }
+function OnDirective(value, location) {
+    return {
+        type: 'Directive',
+        name: 'On',
+        value,
+        location,
+    };
+}
 function slotBindDirective(value, location) {
     return {
         type: 'Directive',
@@ -9273,6 +9283,9 @@ function isDomDirective(directive) {
 function isSpreadDirective(directive) {
     return directive.name === 'Spread';
 }
+function isOnDirective(directive) {
+    return directive.name === 'On';
+}
 function isInnerHTMLDirective(directive) {
     return directive.name === 'InnerHTML';
 }
@@ -9339,6 +9352,7 @@ exports.ElementDirectiveName = void 0;
     ElementDirectiveName["SlotBind"] = "lwc:slot-bind";
     ElementDirectiveName["SlotData"] = "lwc:slot-data";
     ElementDirectiveName["Spread"] = "lwc:spread";
+    ElementDirectiveName["On"] = "lwc:on";
     ElementDirectiveName["Key"] = "key";
 })(exports.ElementDirectiveName || (exports.ElementDirectiveName = {}));
 exports.RootDirectiveName = void 0;
@@ -10884,6 +10898,7 @@ const HTML_ELEMENT_ATTRIBUTE_MAP = {
         'itemtype',
         'lang',
         'nonce',
+        'popover',
         'slot',
         'spellcheck',
         'style',
@@ -10948,6 +10963,8 @@ const HTML_ELEMENT_ATTRIBUTE_MAP = {
         'formnovalidate',
         'formtarget',
         'name',
+        'popovertarget',
+        'popovertargetaction',
         'type',
         'value',
     ],
@@ -11970,6 +11987,7 @@ const LWC_DIRECTIVE_PROCESSORS = [
     applyLwcInnerHtmlDirective,
     applyRefDirective,
     applyLwcSpreadDirective,
+    applyLwcOnDirective,
     applyLwcSlotBindDirective,
 ];
 function applyLwcDirectives(ctx, parsedAttr, element) {
@@ -12032,6 +12050,28 @@ function applyLwcSpreadDirective(ctx, parsedAttr, element) {
     }
     element.directives.push(spreadDirective(lwcSpreadAttr, lwcSpread.location));
 }
+function applyLwcOnDirective(ctx, parsedAttr, element) {
+    const { name: tag } = element;
+    const lwcOn = parsedAttr.pick(exports.ElementDirectiveName.On);
+    if (!lwcOn) {
+        return;
+    }
+    if (!ctx.config.enableLwcOn) {
+        ctx.throwOnNode(errors.ParserDiagnostics.INVALID_LWC_ON_OPTS, element);
+    }
+    const { value: lwcOnValue } = lwcOn;
+    if (!isExpression$1(lwcOnValue)) {
+        ctx.throwOnNode(errors.ParserDiagnostics.INVALID_LWC_ON_LITERAL_PROP, element, [`<${tag}>`]);
+    }
+    // At this point element.listeners stores declarative event listeners (e.g., `onfoo`)
+    // `lwc:on` directive cannot be used together with declarative event listeners.
+    if (element.listeners.length) {
+        ctx.throwOnNode(errors.ParserDiagnostics.INVALID_LWC_ON_WITH_DECLARATIVE_LISTENERS, element, [
+            `<${tag}>`,
+        ]);
+    }
+    element.directives.push(OnDirective(lwcOnValue, lwcOn.location));
+}
 function applyLwcExternalDirective(ctx, parsedAttr, element) {
     const lwcExternalAttribute = parsedAttr.pick(exports.ElementDirectiveName.External);
     if (!lwcExternalAttribute) {
@@ -12492,6 +12532,12 @@ function validateTemplate(ctx, parsedAttr, template, parse5ElmLocation) {
     if (parsedAttr.get(exports.ElementDirectiveName.Is)) {
         ctx.throwAtLocation(errors.ParserDiagnostics.LWC_IS_INVALID_ELEMENT, location, ['<template>']);
     }
+    if (parsedAttr.get(exports.ElementDirectiveName.On)) {
+        if (!ctx.config.enableLwcOn) {
+            ctx.throwAtLocation(errors.ParserDiagnostics.INVALID_LWC_ON_OPTS, location, ['<template>']);
+        }
+        ctx.throwAtLocation(errors.ParserDiagnostics.INVALID_LWC_ON_ELEMENT, location, ['<template>']);
+    }
     // At this point in the parsing all supported attributes from a non root template element
     // should have been removed from ParsedAttribute and all other attributes will be ignored.
     const invalidTemplateAttributes = parsedAttr.getAttributes();
@@ -13655,6 +13701,19 @@ class CodeGen {
             return property$1(identifier('on'), memoize(objectToAST(listenerObj, (k) => listenerObj[k].handler)));
         }
     }
+    genDynamicEventListeners(onDirective) {
+        // Example Input : lwc:on={someObj}
+        // $cmp.someObj
+        const rawValue = this.bindExpression(onDirective.value);
+        // {__proto__: null, ...$cmp.someObj}
+        const clonedValue = objectExpression([
+            property$1(identifier('__proto__'), literal$1(null)),
+            spreadElement(rawValue),
+        ]);
+        const dynamicOnRawProperty = property$1(identifier('dynamicOnRaw'), rawValue);
+        const dynamicOnProperty = property$1(identifier('dynamicOn'), clonedValue);
+        return [dynamicOnRawProperty, dynamicOnProperty];
+    }
     genRef(ref) {
         this.hasRefs = true;
         return property$1(identifier('ref'), ref.value);
@@ -14484,6 +14543,7 @@ function transform(codeGen) {
         const dom = element.directives.find(isDomDirective);
         const ref = element.directives.find(isRefDirective);
         const spread = element.directives.find(isSpreadDirective);
+        const onDirective = element.directives.find(isOnDirective);
         const addSanitizationHook = isCustomRendererHookRequired(element, codeGen.state);
         const slotBindDirective = element.directives.find(isSlotBindDirective);
         // Attributes
@@ -14585,6 +14645,11 @@ function transform(codeGen) {
         if (listeners.length) {
             data.push(codeGen.genEventListeners(listeners));
         }
+        // dynamic event listeners: lwc:on directive
+        // codeGen.genDynamicEventListeners returns an array containing 2 properties: 'dynamicOn' & 'dynamicOnRaw'
+        if (onDirective) {
+            data.push(...codeGen.genDynamicEventListeners(onDirective));
+        }
         // SVG handling
         if (element.namespace === shared.SVG_NAMESPACE) {
             data.push(property$1(identifier('svg'), literal$1(true)));
@@ -14703,5 +14768,5 @@ exports.generateScopeTokens = generateScopeTokens;
 exports.kebabcaseToCamelcase = kebabcaseToCamelcase;
 exports.parse = parse;
 exports.toPropertyName = toPropertyName;
-/** version: 8.18.1 */
+/** version: 8.19.0 */
 //# sourceMappingURL=index.cjs.js.map

package/dist/index.js

@@ -183,6 +183,7 @@ const AVAILABLE_OPTION_NAMES = new Set([
     'apiVersion',
     'customRendererConfig',
     'enableLwcSpread',
+    'enableLwcOn',
     'enableStaticContentOptimization',
     // TODO [#3370]: remove experimental template expression flag
     'experimentalComplexExpressions',
@@ -245,6 +246,7 @@ function normalizeConfig(config) {
         enableDynamicComponents: false,
         enableStaticContentOptimization: true,
         enableLwcSpread: true,
+        enableLwcOn: false,
         disableSyntheticShadowSupport: false,
         ...config,
         apiVersion, // overrides the config apiVersion
@@ -9086,6 +9088,14 @@ function spreadDirective(value, location) {
         location,
     };
 }
+function OnDirective(value, location) {
+    return {
+        type: 'Directive',
+        name: 'On',
+        value,
+        location,
+    };
+}
 function slotBindDirective(value, location) {
     return {
         type: 'Directive',
@@ -9249,6 +9259,9 @@ function isDomDirective(directive) {
 function isSpreadDirective(directive) {
     return directive.name === 'Spread';
 }
+function isOnDirective(directive) {
+    return directive.name === 'On';
+}
 function isInnerHTMLDirective(directive) {
     return directive.name === 'InnerHTML';
 }
@@ -9315,6 +9328,7 @@ var ElementDirectiveName;
     ElementDirectiveName["SlotBind"] = "lwc:slot-bind";
     ElementDirectiveName["SlotData"] = "lwc:slot-data";
     ElementDirectiveName["Spread"] = "lwc:spread";
+    ElementDirectiveName["On"] = "lwc:on";
     ElementDirectiveName["Key"] = "key";
 })(ElementDirectiveName || (ElementDirectiveName = {}));
 var RootDirectiveName;
@@ -10860,6 +10874,7 @@ const HTML_ELEMENT_ATTRIBUTE_MAP = {
         'itemtype',
         'lang',
         'nonce',
+        'popover',
         'slot',
         'spellcheck',
         'style',
@@ -10924,6 +10939,8 @@ const HTML_ELEMENT_ATTRIBUTE_MAP = {
         'formnovalidate',
         'formtarget',
         'name',
+        'popovertarget',
+        'popovertargetaction',
         'type',
         'value',
     ],
@@ -11946,6 +11963,7 @@ const LWC_DIRECTIVE_PROCESSORS = [
     applyLwcInnerHtmlDirective,
     applyRefDirective,
     applyLwcSpreadDirective,
+    applyLwcOnDirective,
     applyLwcSlotBindDirective,
 ];
 function applyLwcDirectives(ctx, parsedAttr, element) {
@@ -12008,6 +12026,28 @@ function applyLwcSpreadDirective(ctx, parsedAttr, element) {
     }
     element.directives.push(spreadDirective(lwcSpreadAttr, lwcSpread.location));
 }
+function applyLwcOnDirective(ctx, parsedAttr, element) {
+    const { name: tag } = element;
+    const lwcOn = parsedAttr.pick(ElementDirectiveName.On);
+    if (!lwcOn) {
+        return;
+    }
+    if (!ctx.config.enableLwcOn) {
+        ctx.throwOnNode(ParserDiagnostics.INVALID_LWC_ON_OPTS, element);
+    }
+    const { value: lwcOnValue } = lwcOn;
+    if (!isExpression$1(lwcOnValue)) {
+        ctx.throwOnNode(ParserDiagnostics.INVALID_LWC_ON_LITERAL_PROP, element, [`<${tag}>`]);
+    }
+    // At this point element.listeners stores declarative event listeners (e.g., `onfoo`)
+    // `lwc:on` directive cannot be used together with declarative event listeners.
+    if (element.listeners.length) {
+        ctx.throwOnNode(ParserDiagnostics.INVALID_LWC_ON_WITH_DECLARATIVE_LISTENERS, element, [
+            `<${tag}>`,
+        ]);
+    }
+    element.directives.push(OnDirective(lwcOnValue, lwcOn.location));
+}
 function applyLwcExternalDirective(ctx, parsedAttr, element) {
     const lwcExternalAttribute = parsedAttr.pick(ElementDirectiveName.External);
     if (!lwcExternalAttribute) {
@@ -12468,6 +12508,12 @@ function validateTemplate(ctx, parsedAttr, template, parse5ElmLocation) {
     if (parsedAttr.get(ElementDirectiveName.Is)) {
         ctx.throwAtLocation(ParserDiagnostics.LWC_IS_INVALID_ELEMENT, location, ['<template>']);
     }
+    if (parsedAttr.get(ElementDirectiveName.On)) {
+        if (!ctx.config.enableLwcOn) {
+            ctx.throwAtLocation(ParserDiagnostics.INVALID_LWC_ON_OPTS, location, ['<template>']);
+        }
+        ctx.throwAtLocation(ParserDiagnostics.INVALID_LWC_ON_ELEMENT, location, ['<template>']);
+    }
     // At this point in the parsing all supported attributes from a non root template element
     // should have been removed from ParsedAttribute and all other attributes will be ignored.
     const invalidTemplateAttributes = parsedAttr.getAttributes();
@@ -13631,6 +13677,19 @@ class CodeGen {
             return property$1(identifier('on'), memoize(objectToAST(listenerObj, (k) => listenerObj[k].handler)));
         }
     }
+    genDynamicEventListeners(onDirective) {
+        // Example Input : lwc:on={someObj}
+        // $cmp.someObj
+        const rawValue = this.bindExpression(onDirective.value);
+        // {__proto__: null, ...$cmp.someObj}
+        const clonedValue = objectExpression([
+            property$1(identifier('__proto__'), literal$1(null)),
+            spreadElement(rawValue),
+        ]);
+        const dynamicOnRawProperty = property$1(identifier('dynamicOnRaw'), rawValue);
+        const dynamicOnProperty = property$1(identifier('dynamicOn'), clonedValue);
+        return [dynamicOnRawProperty, dynamicOnProperty];
+    }
     genRef(ref) {
         this.hasRefs = true;
         return property$1(identifier('ref'), ref.value);
@@ -14460,6 +14519,7 @@ function transform(codeGen) {
         const dom = element.directives.find(isDomDirective);
         const ref = element.directives.find(isRefDirective);
         const spread = element.directives.find(isSpreadDirective);
+        const onDirective = element.directives.find(isOnDirective);
         const addSanitizationHook = isCustomRendererHookRequired(element, codeGen.state);
         const slotBindDirective = element.directives.find(isSlotBindDirective);
         // Attributes
@@ -14561,6 +14621,11 @@ function transform(codeGen) {
         if (listeners.length) {
             data.push(codeGen.genEventListeners(listeners));
         }
+        // dynamic event listeners: lwc:on directive
+        // codeGen.genDynamicEventListeners returns an array containing 2 properties: 'dynamicOn' & 'dynamicOnRaw'
+        if (onDirective) {
+            data.push(...codeGen.genDynamicEventListeners(onDirective));
+        }
         // SVG handling
         if (element.namespace === SVG_NAMESPACE) {
             data.push(property$1(identifier('svg'), literal$1(true)));
@@ -14674,5 +14739,5 @@ function compile(source, filename, config) {
 }
 
 export { ElementDirectiveName, LWCDirectiveDomMode, LWCDirectiveRenderMode, LwcTagName, RootDirectiveName, TemplateDirectiveName, compile, compile as default, generateScopeTokens, kebabcaseToCamelcase, parse, toPropertyName };
-/** version: 8.18.1 */
+/** version: 8.19.0 */
 //# sourceMappingURL=index.js.map

package/dist/shared/ast.d.ts

@@ -1,5 +1,5 @@
 import type { Token as parse5TokenInfo } from 'parse5';
-import type { Literal, SourceLocation, Element, ExternalComponent, Component, Expression, ComplexExpression, Comment, Text, ForEach, ForBlock, Slot, Identifier, Root, EventListener, KeyDirective, DynamicDirective, DomDirective, PreserveCommentsDirective, RenderModeDirective, Attribute, Property, ParentNode, BaseNode, ForOf, LWCDirectiveRenderMode, If, IfBlock, ElseBlock, ElseifBlock, ElementSourceLocation, InnerHTMLDirective, BaseElement, LWCDirectiveDomMode, RefDirective, SpreadDirective, ElementDirective, RootDirective, SlotBindDirective, ScopedSlotFragment, SlotDataDirective, IsDirective, LwcComponent, LwcTagName, BaseLwcElement } from './types';
+import type { Literal, SourceLocation, Element, ExternalComponent, Component, Expression, ComplexExpression, Comment, Text, ForEach, ForBlock, Slot, Identifier, Root, EventListener, KeyDirective, DynamicDirective, DomDirective, PreserveCommentsDirective, RenderModeDirective, Attribute, Property, ParentNode, BaseNode, ForOf, LWCDirectiveRenderMode, If, IfBlock, ElseBlock, ElseifBlock, ElementSourceLocation, InnerHTMLDirective, BaseElement, LWCDirectiveDomMode, RefDirective, SpreadDirective, OnDirective, ElementDirective, RootDirective, SlotBindDirective, ScopedSlotFragment, SlotDataDirective, IsDirective, LwcComponent, LwcTagName, BaseLwcElement } from './types';
 export declare function root(parse5ElmLocation: parse5TokenInfo.ElementLocation): Root;
 export declare function element(tagName: string, namespaceURI: string, parse5ElmLocation: parse5TokenInfo.ElementLocation): Element;
 export declare function externalComponent(tagName: string, parse5ElmLocation: parse5TokenInfo.ElementLocation): ExternalComponent;
@@ -23,6 +23,7 @@ export declare function keyDirective(value: Expression, location: SourceLocation
 export declare function dynamicDirective(value: Expression, location: SourceLocation): DynamicDirective;
 export declare function lwcIsDirective(value: Expression, location: SourceLocation): IsDirective;
 export declare function spreadDirective(value: Expression, location: SourceLocation): SpreadDirective;
+export declare function OnDirective(value: Expression, location: SourceLocation): OnDirective;
 export declare function slotBindDirective(value: Expression, location: SourceLocation): SlotBindDirective;
 export declare function slotDataDirective(value: Identifier, location: SourceLocation): SlotDataDirective;
 export declare function domDirective(lwcDomAttr: LWCDirectiveDomMode, location: SourceLocation): DomDirective;
@@ -60,6 +61,7 @@ export declare function isDynamicDirective(directive: ElementDirective): directi
 export declare function isLwcIsDirective(directive: ElementDirective): directive is IsDirective;
 export declare function isDomDirective(directive: ElementDirective): directive is DomDirective;
 export declare function isSpreadDirective(directive: ElementDirective): directive is SpreadDirective;
+export declare function isOnDirective(directive: ElementDirective): directive is OnDirective;
 export declare function isInnerHTMLDirective(directive: ElementDirective): directive is InnerHTMLDirective;
 export declare function isRefDirective(directive: ElementDirective): directive is RefDirective;
 export declare function isKeyDirective(directive: ElementDirective): directive is KeyDirective;

package/dist/shared/types.d.ts

@@ -84,6 +84,9 @@ export interface DomDirective extends Directive<'Dom'> {
 export interface SpreadDirective extends Directive<'Spread'> {
     value: Expression;
 }
+export interface OnDirective extends Directive<'On'> {
+    value: Expression;
+}
 export interface InnerHTMLDirective extends Directive<'InnerHTML'> {
     value: Expression | Literal<string>;
 }
@@ -102,7 +105,7 @@ export interface SlotBindDirective extends Directive<'SlotBind'> {
 export interface SlotDataDirective extends Directive<'SlotData'> {
     value: Identifier;
 }
-export type ElementDirective = KeyDirective | DynamicDirective | IsDirective | DomDirective | InnerHTMLDirective | RefDirective | SlotBindDirective | SlotDataDirective | SpreadDirective;
+export type ElementDirective = KeyDirective | DynamicDirective | IsDirective | DomDirective | InnerHTMLDirective | RefDirective | SlotBindDirective | SlotDataDirective | SpreadDirective | OnDirective;
 export type RootDirective = RenderModeDirective | PreserveCommentsDirective;
 export interface Text extends BaseNode {
     type: 'Text';
@@ -234,6 +237,7 @@ export declare enum ElementDirectiveName {
     SlotBind = "lwc:slot-bind",
     SlotData = "lwc:slot-data",
     Spread = "lwc:spread",
+    On = "lwc:on",
     Key = "key"
 }
 export declare enum RootDirectiveName {

package/package.json

@@ -4,7 +4,7 @@
         "You can safely modify dependencies, devDependencies, keywords, etc., but other props will be overwritten."
     ],
     "name": "@lwc/template-compiler",
-    "version": "8.18.1",
+    "version": "8.19.0",
     "description": "Template compiler package",
     "keywords": [
         "lwc"
@@ -46,8 +46,8 @@
         }
     },
     "dependencies": {
-        "@lwc/errors": "8.18.1",
-        "@lwc/shared": "8.18.1",
+        "@lwc/errors": "8.19.0",
+        "@lwc/shared": "8.19.0",
         "acorn": "~8.14.1",
         "astring": "~1.9.0",
         "he": "~1.2.0"