feat: add parsing of lwc:on directive

Author: gaurav-rk9

packages/@lwc/errors/src/compiler/error-info/index.ts

@@ -5,7 +5,7 @@
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
 /**
- * Next error code: 1203
+ * Next error code: 1204
  */
 
 export * from './compiler';

packages/@lwc/errors/src/compiler/error-info/template-transform.ts

@@ -955,4 +955,12 @@ export const ParserDiagnostics = {
         level: DiagnosticLevel.Error,
         url: '',
     },
+
+    INVALID_LWC_ON_LITERAL_PROP: {
+        code: 1203,
+        message:
+            'Invalid lwc:on usage on element "{0}". The directive binding must be an expression.',
+        level: DiagnosticLevel.Error,
+        url: '',
+    },
 };

packages/@lwc/template-compiler/src/parser/index.ts

@@ -884,6 +884,7 @@ const LWC_DIRECTIVE_PROCESSORS = [
     applyLwcInnerHtmlDirective,
     applyRefDirective,
     applyLwcSpreadDirective,
+    applyLwcOnDirective,
     applyLwcSlotBindDirective,
 ];
 
@@ -972,6 +973,26 @@ function applyLwcSpreadDirective(
     element.directives.push(ast.spreadDirective(lwcSpreadAttr, lwcSpread.location));
 }
 
+function applyLwcOnDirective(
+    ctx: ParserCtx,
+    parsedAttr: ParsedAttribute,
+    element: BaseElement
+): void {
+    const { name: tag } = element;
+
+    const lwcOn = parsedAttr.pick(ElementDirectiveName.On);
+    if (!lwcOn) {
+        return;
+    }
+
+    const { value: lwcOnValue } = lwcOn;
+    if (!ast.isExpression(lwcOnValue)) {
+        ctx.throwOnNode(ParserDiagnostics.INVALID_LWC_ON_LITERAL_PROP, element, [`<${tag}>`]);
+    }
+
+    element.directives.push(ast.OnDirective(lwcOnValue, lwcOn.location));
+}
+
 function applyLwcExternalDirective(
     ctx: ParserCtx,
     parsedAttr: ParsedAttribute,