fix(compiler): fixes regression with event parsing and animate prefix (angular#63470)

The new animations was not correctly looking for the `.` when parsing bindings. This resulted in arbitrary event bindings creating animate.leave instruction calls.

fixes: angular#63466

PR Close angular#63470

Author: thePunderWoman

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/animations/GOLDEN_PARTIAL.js

@@ -471,3 +471,39 @@ export declare class MyComponent {
     static ɵcmp: i0.ɵɵComponentDeclaration<MyComponent, "my-component", never, {}, {}, never, never, true, never>;
 }
 
+/****************************************************************************************************
+ * PARTIAL FILE: animate_prefix_with_event_listener.js
+ ****************************************************************************************************/
+import { Component } from '@angular/core';
+import * as i0 from "@angular/core";
+export class MyComponent {
+    doSomething() { }
+}
+MyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDER", ngImport: i0, type: MyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "0.0.0-PLACEHOLDER", type: MyComponent, isStandalone: true, selector: "my-component", ngImport: i0, template: `
+    <div>
+      <p (animateABC)="doSomething()">Fading Content</p>
+    </div>
+  `, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDER", ngImport: i0, type: MyComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'my-component',
+                    template: `
+    <div>
+      <p (animateABC)="doSomething()">Fading Content</p>
+    </div>
+  `,
+                }]
+        }] });
+
+/****************************************************************************************************
+ * PARTIAL FILE: animate_prefix_with_event_listener.d.ts
+ ****************************************************************************************************/
+import * as i0 from "@angular/core";
+export declare class MyComponent {
+    doSomething(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MyComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MyComponent, "my-component", never, {}, {}, never, never, true, never>;
+}
+

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/animations/TEST_CASES.json

@@ -187,6 +187,23 @@
           "failureMessage": "Incorrect ɵɵanimateLeave() call"
         }
       ]
+    },
+    {
+      "description": "should not generate animate leave when using 'animate' as a binding prefix",
+      "inputFiles": [
+        "animate_prefix_with_event_listener.ts"
+      ],
+      "expectations": [
+        {
+          "files": [
+            {
+              "expected": "animate_prefix_with_event_listener_template.js",
+              "generated": "animate_prefix_with_event_listener.js"
+            }
+          ],
+          "failureMessage": "ɵɵanimateLeave() present when it should not be"
+        }
+      ]
     }
   ]
 }

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/animations/animate_prefix_with_event_listener.ts

@@ -0,0 +1,13 @@
+import {Component} from '@angular/core';
+
+@Component({
+    selector: 'my-component',
+    template: `
+    <div>
+      <p (animateABC)="doSomething()">Fading Content</p>
+    </div>
+  `,
+})
+export class MyComponent {
+  doSomething() {}
+}

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/animations/animate_prefix_with_event_listener_template.js

@@ -0,0 +1,6 @@
+MyComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MyComponent, selectors: [["my-component"]], decls: 3, vars: 0, consts: [[3, "animateABC"]], template: function MyComponent_Template(rf, ctx) { if (rf & 1) {
+        i0.ɵɵdomElementStart(0, "div")(1, "p", 0);
+        i0.ɵɵdomListener("animateABC", function MyComponent_Template_p_animateABC_1_listener() { return ctx.doSomething(); });
+        i0.ɵɵtext(2, "Fading Content");
+        i0.ɵɵdomElementEnd()();
+    } }, encapsulation: 2 });

packages/compiler/src/template_parser/binding_parser.ts

@@ -403,7 +403,7 @@ export class BindingParser {
         targetMatchableAttrs,
         targetProps,
       );
-    } else if (name.startsWith(ANIMATE_PREFIX)) {
+    } else if (name.startsWith(`${ANIMATE_PREFIX}${PROPERTY_PARTS_SEPARATOR}`)) {
       this._parseAnimation(
         name,
         this.parseBinding(expression, isHost, valueSpan || sourceSpan, absoluteOffset),
@@ -780,7 +780,7 @@ export class BindingParser {
     if (isAssignmentEvent) {
       eventType = ParsedEventType.TwoWay;
     }
-    if (name.startsWith(ANIMATE_PREFIX)) {
+    if (name.startsWith(`${ANIMATE_PREFIX}${PROPERTY_PARTS_SEPARATOR}`)) {
       eventType = ParsedEventType.Animation;
     }
 

packages/compiler/test/ml_parser/html_parser_spec.ts

@@ -435,6 +435,13 @@ describe('HtmlParser', () => {
           ]);
         });
 
+        it('should not parse any other animate prefix binding as animate.leave', () => {
+          expect(humanizeDom(parser.parse(`<div animateAbc="bar"></div>`, 'TestComp'))).toEqual([
+            [html.Element, 'div', 0],
+            [html.Attribute, 'animateAbc', 'bar', ['bar']],
+          ]);
+        });
+
         it('should parse both animate.enter and animate.leave as static attributes', () => {
           expect(
             humanizeDom(
@@ -487,6 +494,15 @@ describe('HtmlParser', () => {
           ]);
         });
 
+        it('should not parse other animate prefixes as animate.leave', () => {
+          expect(
+            humanizeDom(parser.parse(`<div (animateXYZ)="onAnimation()"></div>`, 'TestComp')),
+          ).toEqual([
+            [html.Element, 'div', 0],
+            [html.Attribute, '(animateXYZ)', 'onAnimation()', ['onAnimation()']],
+          ]);
+        });
+
         it('should parse a combination of animate property and event bindings', () => {
           expect(
             humanizeDom(

packages/compiler/test/render3/r3_template_transform_spec.ts

@@ -424,6 +424,11 @@ describe('R3 template transform', () => {
         ['Element', 'div'],
         ['BoundEvent', 3, 'animate.leave', null, 'animateFn($event)'],
       ]);
+
+      expectFromHtml(`<div (animateXYZ)="animateFn()"></div>`).toEqual([
+        ['Element', 'div'],
+        ['BoundEvent', 0, 'animateXYZ', null, 'animateFn()'],
+      ]);
     });
   });