refactor(compiler): allow name parsing logic to be reused (#60561)

crisbeto · alxhub · commit ec8c8f827e93 · 2025-03-26T20:46:45.000-07:00
Moves the logic for parsing event names out into methods on the `BindingParser` so we don't have to duplicate it. Also updates the types to more accurately represent the runtime value. PR Close #60561
diff --git a/packages/compiler/src/expression_parser/ast.ts b/packages/compiler/src/expression_parser/ast.ts
@@ -790,7 +790,7 @@ export class ParsedEvent {
   // Animation events have a phase
   constructor(
     name: string,
-    targetOrPhase: string,
+    targetOrPhase: string | null,
     type: ParsedEventType.TwoWay,
     handler: ASTWithSource<NonNullAssert | PropertyRead | KeyedRead>,
     sourceSpan: ParseSourceSpan,
@@ -800,7 +800,7 @@ export class ParsedEvent {
 
   constructor(
     name: string,
-    targetOrPhase: string,
+    targetOrPhase: string | null,
     type: ParsedEventType,
     handler: ASTWithSource,
     sourceSpan: ParseSourceSpan,
@@ -810,7 +810,7 @@ export class ParsedEvent {
 
   constructor(
     public name: string,
-    public targetOrPhase: string,
+    public targetOrPhase: string | null,
     public type: ParsedEventType,
     public handler: ASTWithSource,
     public sourceSpan: ParseSourceSpan,
diff --git a/packages/compiler/src/template_parser/binding_parser.ts b/packages/compiler/src/template_parser/binding_parser.ts
@@ -660,6 +660,16 @@ export class BindingParser {
     return calcPossibleSecurityContexts(this._schemaRegistry, selector, prop, isAttribute);
   }
 
+  parseEventListenerName(rawName: string): {eventName: string; target: string | null} {
+    const [target, eventName] = splitAtColon(rawName, [null, rawName]);
+    return {eventName: eventName!, target};
+  }
+
+  parseAnimationEventName(rawName: string): {eventName: string; phase: string | null} {
+    const matches = splitAtPeriod(rawName, [rawName, null]);
+    return {eventName: matches[0]!, phase: matches[1] === null ? null : matches[1].toLowerCase()};
+  }
+
   private _parseAnimationEvent(
     name: string,
     expression: string,
@@ -668,9 +678,7 @@ export class BindingParser {
     targetEvents: ParsedEvent[],
     keySpan: ParseSourceSpan,
   ) {
-    const matches = splitAtPeriod(name, [name, '']);
-    const eventName = matches[0];
-    const phase = matches[1].toLowerCase();
+    const {eventName, phase} = this.parseAnimationEventName(name);
     const ast = this._parseAction(expression, handlerSpan);
     targetEvents.push(
       new ParsedEvent(
@@ -713,7 +721,7 @@ export class BindingParser {
     keySpan: ParseSourceSpan,
   ): void {
     // long format: 'target: eventName'
-    const [target, eventName] = splitAtColon(name, [null!, name]);
+    const {eventName, target} = this.parseEventListenerName(name);
     const prevErrorCount = this.errors.length;
     const ast = this._parseAction(expression, handlerSpan);
     const isValid = this.errors.length === prevErrorCount;
diff --git a/packages/compiler/src/util.ts b/packages/compiler/src/util.ts
@@ -12,15 +12,19 @@ export function dashCaseToCamelCase(input: string): string {
   return input.replace(DASH_CASE_REGEXP, (...m: any[]) => m[1].toUpperCase());
 }
 
-export function splitAtColon(input: string, defaultValues: string[]): string[] {
+export function splitAtColon(input: string, defaultValues: (string | null)[]): (string | null)[] {
   return _splitAt(input, ':', defaultValues);
 }
 
-export function splitAtPeriod(input: string, defaultValues: string[]): string[] {
+export function splitAtPeriod(input: string, defaultValues: (string | null)[]): (string | null)[] {
   return _splitAt(input, '.', defaultValues);
 }
 
-function _splitAt(input: string, character: string, defaultValues: string[]): string[] {
+function _splitAt(
+  input: string,
+  character: string,
+  defaultValues: (string | null)[],
+): (string | null)[] {
   const characterIndex = input.indexOf(character);
   if (characterIndex == -1) return defaultValues;
   return [input.slice(0, characterIndex).trim(), input.slice(characterIndex + 1).trim()];
