angular · crisbeto · Jan 29, 2024 · Jan 29, 2024 · Jan 29, 2024 · Jan 30, 2024
diff --git a/.../test/compliance/test_cases/r3_view_compiler_bindings/property_bindings/GOLDEN_PARTIAL.js b/.../test/compliance/test_cases/r3_view_compiler_bindings/property_bindings/GOLDEN_PARTIAL.js
@@ -721,3 +721,68 @@ export declare class MyComponent {
     static ɵcmp: i0.ɵɵComponentDeclaration<MyComponent, "my-component", never, {}, {}, never, never, true, never>;
 }
 
+/****************************************************************************************************
+ * PARTIAL FILE: mixed_one_way_two_way_property_order.js
+ ****************************************************************************************************/
+import { Component, Directive, Input, Output } from '@angular/core';
+import * as i0 from "@angular/core";
+export class Dir {
+}
+Dir.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDER", ngImport: i0, type: Dir, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+Dir.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "0.0.0-PLACEHOLDER", type: Dir, isStandalone: true, selector: "[dir]", inputs: { a: "a", b: "b", c: "c", d: "d" }, outputs: { aChange: "aChange", cChange: "cChange" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDER", ngImport: i0, type: Dir, decorators: [{
+            type: Directive,
+            args: [{ standalone: true, selector: '[dir]' }]
+        }], propDecorators: { a: [{
+                type: Input
+            }], aChange: [{
+                type: Output
+            }], b: [{
+                type: Input
+            }], c: [{
+                type: Input
+            }], cChange: [{
+                type: Output
+            }], d: [{
+                type: Input
+            }] } });
+export class App {
+    constructor() {
+        this.value = 'hi';
+    }
+}
+App.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDER", ngImport: i0, type: App, deps: [], target: i0.ɵɵFactoryTarget.Component });
+App.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "0.0.0-PLACEHOLDER", type: App, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
+    <div dir [(a)]="value" [b]="value" [(c)]="value" [d]="value"></div>
+  `, isInline: true, dependencies: [{ kind: "directive", type: Dir, selector: "[dir]", inputs: ["a", "b", "c", "d"], outputs: ["aChange", "cChange"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDER", ngImport: i0, type: App, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    imports: [Dir],
+                    template: `
+    <div dir [(a)]="value" [b]="value" [(c)]="value" [d]="value"></div>
+  `,
+                }]
+        }] });
+
+/****************************************************************************************************
+ * PARTIAL FILE: mixed_one_way_two_way_property_order.d.ts
+ ****************************************************************************************************/
+import * as i0 from "@angular/core";
+export declare class Dir {
+    a: unknown;
+    aChange: unknown;
+    b: unknown;
+    c: unknown;
+    cChange: unknown;
+    d: unknown;
+    static ɵfac: i0.ɵɵFactoryDeclaration<Dir, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<Dir, "[dir]", never, { "a": { "alias": "a"; "required": false; }; "b": { "alias": "b"; "required": false; }; "c": { "alias": "c"; "required": false; }; "d": { "alias": "d"; "required": false; }; }, { "aChange": "aChange"; "cChange": "cChange"; }, never, never, true, never>;
+}
+export declare class App {
+    value: string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<App, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<App, "ng-component", never, {}, {}, never, never, true, never>;
+}
+
diff --git a/...li/test/compliance/test_cases/r3_view_compiler_bindings/property_bindings/TEST_CASES.json b/...li/test/compliance/test_cases/r3_view_compiler_bindings/property_bindings/TEST_CASES.json
@@ -196,6 +196,20 @@
           ]
         }
       ]
+    },
+    {
+      "description": "should maintain the binding order between one-way and two-way properties",
+      "inputFiles": [
+        "mixed_one_way_two_way_property_order.ts"
+      ],
+      "expectations": [
+        {
+          "failureMessage": "Incorrect template",
+          "files": [
+            "mixed_one_way_two_way_property_order.js"
+          ]
+        }
+      ]
     }
   ]
 }
diff --git a/...cases/r3_view_compiler_bindings/property_bindings/mixed_one_way_two_way_property_order.js b/...cases/r3_view_compiler_bindings/property_bindings/mixed_one_way_two_way_property_order.js
@@ -0,0 +1,6 @@
+if (rf & 2) {
+  $r3$.ɵɵtwoWayProperty("a", ctx.value);
+  $r3$.ɵɵproperty("b", ctx.value);
+  $r3$.ɵɵtwoWayProperty("c", ctx.value);
+  $r3$.ɵɵproperty("d", ctx.value);
+}
diff --git a/...cases/r3_view_compiler_bindings/property_bindings/mixed_one_way_two_way_property_order.ts b/...cases/r3_view_compiler_bindings/property_bindings/mixed_one_way_two_way_property_order.ts
@@ -0,0 +1,25 @@
+import {Component, Directive, Input, Output} from '@angular/core';
+
+@Directive({standalone: true, selector: '[dir]'})
+export class Dir {
+  @Input() a: unknown;
+  @Output() aChange: unknown;
+
+  @Input() b: unknown;
+
+  @Input() c: unknown;
+  @Output() cChange: unknown;
+
+  @Input() d: unknown;
+}
+
+@Component({
+  standalone: true,
+  imports: [Dir],
+  template: `
+    <div dir [(a)]="value" [b]="value" [(c)]="value" [d]="value"></div>
+  `,
+})
+export class App {
+  value = 'hi';
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/GOLDEN_PARTIAL.js b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/GOLDEN_PARTIAL.js
@@ -850,3 +850,70 @@ export declare class MyComponent {
     static ɵcmp: i0.ɵɵComponentDeclaration<MyComponent, "my-component", never, {}, {}, never, never, true, never>;
 }
 
+/****************************************************************************************************
+ * PARTIAL FILE: mixed_one_way_two_way_listener_order.js
+ ****************************************************************************************************/
+import { Component, Directive, Input, Output } from '@angular/core';
+import * as i0 from "@angular/core";
+export class Dir {
+}
+Dir.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDER", ngImport: i0, type: Dir, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+Dir.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "0.0.0-PLACEHOLDER", type: Dir, isStandalone: true, selector: "[dir]", inputs: { a: "a", c: "c" }, outputs: { aChange: "aChange", b: "b", cChange: "cChange", d: "d" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDER", ngImport: i0, type: Dir, decorators: [{
+            type: Directive,
+            args: [{ standalone: true, selector: '[dir]' }]
+        }], propDecorators: { a: [{
+                type: Input
+            }], aChange: [{
+                type: Output
+            }], b: [{
+                type: Output
+            }], c: [{
+                type: Input
+            }], cChange: [{
+                type: Output
+            }], d: [{
+                type: Output
+            }] } });
+export class App {
+    constructor() {
+        this.value = 'hi';
+        this.noop = () => { };
+    }
+}
+App.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDER", ngImport: i0, type: App, deps: [], target: i0.ɵɵFactoryTarget.Component });
+App.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "0.0.0-PLACEHOLDER", type: App, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
+    <div dir [(a)]="value" (b)="noop()" [(c)]="value" (d)="noop()"></div>
+  `, isInline: true, dependencies: [{ kind: "directive", type: Dir, selector: "[dir]", inputs: ["a", "c"], outputs: ["aChange", "b", "cChange", "d"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDER", ngImport: i0, type: App, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    imports: [Dir],
+                    template: `
+    <div dir [(a)]="value" (b)="noop()" [(c)]="value" (d)="noop()"></div>
+  `,
+                }]
+        }] });
+
+/****************************************************************************************************
+ * PARTIAL FILE: mixed_one_way_two_way_listener_order.d.ts
+ ****************************************************************************************************/
+import * as i0 from "@angular/core";
+export declare class Dir {
+    a: unknown;
+    aChange: unknown;
+    b: unknown;
+    c: unknown;
+    cChange: unknown;
+    d: unknown;
+    static ɵfac: i0.ɵɵFactoryDeclaration<Dir, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<Dir, "[dir]", never, { "a": { "alias": "a"; "required": false; }; "c": { "alias": "c"; "required": false; }; }, { "aChange": "aChange"; "b": "b"; "cChange": "cChange"; "d": "d"; }, never, never, true, never>;
+}
+export declare class App {
+    value: string;
+    noop: () => void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<App, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<App, "ng-component", never, {}, {}, never, never, true, never>;
+}
+
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/TEST_CASES.json b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/TEST_CASES.json
@@ -344,6 +344,17 @@
           "failureMessage": "Incorrect template"
         }
       ]
+    },
+    {
+      "description": "should maintain the binding order between plain listeners and listeners part of a two-way binding",
+      "inputFiles": [
+        "mixed_one_way_two_way_listener_order.ts"
+      ],
+      "expectations": [
+        {
+          "failureMessage": "Incorrect template"
+        }
+      ]
     }
   ]
 }
diff --git a/...t/compliance/test_cases/r3_view_compiler_listener/mixed_one_way_two_way_listener_order.js b/...t/compliance/test_cases/r3_view_compiler_listener/mixed_one_way_two_way_listener_order.js
@@ -0,0 +1,18 @@
+if (rf & 1) {
+  $r3$.ɵɵelementStart(0, "div", 0);
+  $r3$.ɵɵtwoWayListener("aChange", function App_Template_div_aChange_0_listener($event) {
+    $r3$.ɵɵtwoWayBindingSet(ctx.value, $event) || (ctx.value = $event);
+    return $event;
+  });
+  $r3$.ɵɵlistener("b", function App_Template_div_b_0_listener() {
+    return ctx.noop();
+  });
+  $r3$.ɵɵtwoWayListener("cChange", function App_Template_div_cChange_0_listener($event) {
+    $r3$.ɵɵtwoWayBindingSet(ctx.value, $event) || (ctx.value = $event);
+    return $event;
+  });
+  $r3$.ɵɵlistener("d", function App_Template_div_d_0_listener() {
+    return ctx.noop();
+  });
+  $r3$.ɵɵelementEnd();
+}
diff --git a/...t/compliance/test_cases/r3_view_compiler_listener/mixed_one_way_two_way_listener_order.ts b/...t/compliance/test_cases/r3_view_compiler_listener/mixed_one_way_two_way_listener_order.ts
@@ -0,0 +1,26 @@
+import {Component, Directive, Input, Output} from '@angular/core';
+
+@Directive({standalone: true, selector: '[dir]'})
+export class Dir {
+  @Input() a: unknown;
+  @Output() aChange: unknown;
+
+  @Output() b: unknown;
+
+  @Input() c: unknown;
+  @Output() cChange: unknown;
+
+  @Output() d: unknown;
+}
+
+@Component({
+  standalone: true,
+  imports: [Dir],
+  template: `
+    <div dir [(a)]="value" (b)="noop()" [(c)]="value" (d)="noop()"></div>
+  `,
+})
+export class App {
+  value = 'hi';
+  noop = () => {};
+}
diff --git a/...piler-cli/test/compliance/test_cases/r3_view_compiler_listener/nested_two_way_template.js b/...piler-cli/test/compliance/test_cases/r3_view_compiler_listener/nested_two_way_template.js
@@ -1,15 +1,16 @@
 function TestCmp_ng_template_1_Template(rf, ctx) {
   if (rf & 1) {
-    const $_r2$ = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "input", 0);
-    i0.ɵɵlistener("ngModelChange", function TestCmp_ng_template_1_Template_input_ngModelChange_0_listener($event) {
-      i0.ɵɵrestoreView($_r2$);
-      const $ctx_r1$ = i0.ɵɵnextContext();
-      return i0.ɵɵresetView($ctx_r1$.name = $event);
+    const $_r2$ = $r3$.ɵɵgetCurrentView();
+    $r3$.ɵɵelementStart(0, "input", 0);
+    $r3$.ɵɵtwoWayListener("ngModelChange", function TestCmp_ng_template_1_Template_input_ngModelChange_0_listener($event) {
+      $r3$.ɵɵrestoreView($_r2$);
+      const $ctx_r1$ = $r3$.ɵɵnextContext();
+      $r3$.ɵɵtwoWayBindingSet($ctx_r1$.name, $event) || ($ctx_r1$.name = $event);
+      return $r3$.ɵɵresetView($event);
     });
-    i0.ɵɵelementEnd();
+    $r3$.ɵɵelementEnd();
   } if (rf & 2) {
-    const $ctx_r0$ = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngModel", $ctx_r0$.name);
+    const $ctx_r0$ = $r3$.ɵɵnextContext();
+    $r3$.ɵɵtwoWayProperty("ngModel", $ctx_r0$.name);
   }
 }
diff --git a/...piler-cli/test/compliance/test_cases/r3_view_compiler_listener/simple_two_way_template.js b/...piler-cli/test/compliance/test_cases/r3_view_compiler_listener/simple_two_way_template.js
@@ -1,13 +1,14 @@
 function TestCmp_Template(rf, ctx) {
   if (rf & 1) {
-    i0.ɵɵtext(0, "Name: ");
-    i0.ɵɵelementStart(1, "input", 0);
-    i0.ɵɵlistener("ngModelChange", function TestCmp_Template_input_ngModelChange_1_listener($event) {
-      return ctx.name = $event;
+    $r3$.ɵɵtext(0, "Name: ");
+    $r3$.ɵɵelementStart(1, "input", 0);
+    $r3$.ɵɵtwoWayListener("ngModelChange", function TestCmp_Template_input_ngModelChange_1_listener($event) {
+      $r3$.ɵɵtwoWayBindingSet(ctx.name, $event) || (ctx.name = $event);
+      return $event;
     });
-    i0.ɵɵelementEnd();
+    $r3$.ɵɵelementEnd();
   } if (rf & 2) {
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("ngModel", ctx.name);
+    $r3$.ɵɵadvance();
+    $r3$.ɵɵtwoWayProperty("ngModel", ctx.name);
   }
 }
diff --git a/...li/test/compliance/test_cases/source_mapping/inline_templates/two_way_binding_longhand.js b/...li/test/compliance/test_cases/source_mapping/inline_templates/two_way_binding_longhand.js
@@ -1,6 +1,6 @@
 i0.ɵɵelementStart(1, "input", 0) // SOURCE: "/two_way_binding_longhand.ts" "<input "
 …
 // TODO: improve mappings here
-i0.ɵɵlistener("ngModelChange", function TestCmp_Template_input_ngModelChange_1_listener($event) { return ctx.name = $event; }) // SOURCE: "/two_way_binding_longhand.ts" "bindon-ngModel=\"name\""
+i0.ɵɵtwoWayListener("ngModelChange", function TestCmp_Template_input_ngModelChange_1_listener($event) { i0.ɵɵtwoWayBindingSet(ctx.name, $event) || (ctx.name = $event); return $event; }) // SOURCE: "/two_way_binding_longhand.ts" "bindon-ngModel=\"name\""
 …
 i0.ɵɵelementEnd() // SOURCE: "/two_way_binding_longhand.ts" "<input "
diff --git a/...compliance/test_cases/source_mapping/inline_templates/two_way_binding_longhand_partial.js b/...compliance/test_cases/source_mapping/inline_templates/two_way_binding_longhand_partial.js
@@ -1,7 +1,7 @@
 .ɵɵelementStart(1, "input", 0) // SOURCE: "/two_way_binding_longhand.ts" "<input "
 …
 // TODO: improve mappings here
-.ɵɵlistener("ngModelChange", function TestCmp_Template_input_ngModelChange_1_listener($event) {\n         // SOURCE: "/two_way_binding_longhand.ts" "bindon-ngModel=\"name\">'"
+.ɵɵtwoWayListener("ngModelChange", function TestCmp_Template_input_ngModelChange_1_listener($event) {\n         // SOURCE: "/two_way_binding_longhand.ts" "bindon-ngModel=\"name\">'"
 …
 // TODO: Work out how to fix the broken segment for the last item in a template
 .ɵɵelementEnd() // SOURCE: "/two_way_binding_longhand.ts" "<input "
diff --git a/...-cli/test/compliance/test_cases/source_mapping/inline_templates/two_way_binding_simple.js b/...-cli/test/compliance/test_cases/source_mapping/inline_templates/two_way_binding_simple.js
@@ -2,6 +2,6 @@
 i0.ɵɵelementStart(1, "input", 0) // SOURCE: "/two_way_binding_simple.ts" "<input "
 …
 // TODO: improve mappings here
-i0.ɵɵlistener("ngModelChange", function TestCmp_Template_input_ngModelChange_1_listener($event) { return ctx.name = $event; }) // SOURCE: "/two_way_binding_simple.ts" "[(ngModel)]=\"name\""
+i0.ɵɵtwoWayListener("ngModelChange", function TestCmp_Template_input_ngModelChange_1_listener($event) { i0.ɵɵtwoWayBindingSet(ctx.name, $event) || (ctx.name = $event); return $event; }) // SOURCE: "/two_way_binding_simple.ts" "[(ngModel)]=\"name\""
 …
 i0.ɵɵelementEnd() // SOURCE: "/two_way_binding_simple.ts" "<input "
diff --git a/...t/compliance/test_cases/source_mapping/inline_templates/two_way_binding_simple_partial.js b/...t/compliance/test_cases/source_mapping/inline_templates/two_way_binding_simple_partial.js
@@ -2,6 +2,6 @@
 .ɵɵelementStart(1, "input", 0) // SOURCE: "/two_way_binding_simple.ts" "<input "
 …
 // TODO: improve mappings here
-.ɵɵlistener("ngModelChange", function TestCmp_Template_input_ngModelChange_1_listener($event) {\n         // SOURCE: "/two_way_binding_simple.ts" "[(ngModel)]=\"name\">'"
+.ɵɵtwoWayListener("ngModelChange", function TestCmp_Template_input_ngModelChange_1_listener($event) {\n         // SOURCE: "/two_way_binding_simple.ts" "[(ngModel)]=\"name\">'"
 …
 .ɵɵelementEnd() // SOURCE: "/two_way_binding_simple.ts" "<input "