refactor(compiler): listeners should be ingested before i18nStart

Listener instructions should not be inside the i18n block. Listeners are the only kind of binding that gets ingested into the create block, so we previously missed this case.
dylhunn · Dec 6, 2023 · b6f03f2 · b6f03f2
1 parent ca08fd2
commit b6f03f2
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 5 deletions.
diff --git a/...ompiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/nested_nodes/TEST_CASES.json b/...ompiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/nested_nodes/TEST_CASES.json
@@ -240,13 +240,19 @@
       ],
       "expectations": [
         {
+          "files": [
+            {
+              "generated": "event_listeners.js",
+              "expected": "event_listeners_template.js",
+              "templatePipelineExpected": "event_listeners_template.pipeline.js"
+            }
+          ],
           "extraChecks": [
             "verifyPlaceholdersIntegrity",
             "verifyUniqueConsts"
           ]
         }
-      ],
-      "skipForTemplatePipeline": true
+      ]
     },
     {
       "description": "should handle ng-content in i18n block",

diff --git a/...iler_i18n/nested_nodes/event_listeners.js → .../nested_nodes/event_listeners_template.js b/...iler_i18n/nested_nodes/event_listeners.js → .../nested_nodes/event_listeners_template.js
diff --git a/...liance/test_cases/r3_view_compiler_i18n/nested_nodes/event_listeners_template.pipeline.js b/...liance/test_cases/r3_view_compiler_i18n/nested_nodes/event_listeners_template.pipeline.js
@@ -0,0 +1,16 @@
+consts: () => {
+	__i18nMsg__('Hello', [], {}, {})
+	return [
+	  $i18n_0$,
+	  [__AttributeMarker.Bindings__, "click"]
+	];
+  },
+  template: function MyComponent_Template(rf, ctx) {
+	if (rf & 1) {
+	  $r3$.ɵɵelementStart(0, "div", 1);
+	  $r3$.ɵɵlistener("click", function MyComponent_Template_div_click_0_listener() { return ctx.onClick(); });
+	  $r3$.ɵɵi18n(1, 0);
+	  $r3$.ɵɵelementEnd();
+	}
+  }
+
diff --git a/packages/compiler/src/template/pipeline/src/ingest.ts b/packages/compiler/src/template/pipeline/src/ingest.ts
@@ -167,6 +167,14 @@ function ingestElement(unit: ViewCompilationUnit, element: t.Element): void {
 
   ingestBindings(unit, startOp, element);
   ingestReferences(startOp, element);
+
+  // Start i18n, if needed, goes after the element create and bindings, but before the nodes
+  let i18nBlockId: ir.XrefId|null = null;
+  if (element.i18n instanceof i18n.Message) {
+    i18nBlockId = unit.job.allocateXrefId();
+    unit.create.push(ir.createI18nStartOp(i18nBlockId, element.i18n));
+  }
+
   ingestNodes(unit, element.children);
 
   // The source span for the end op is typically the element closing tag. However, if no closing tag
@@ -178,9 +186,7 @@ function ingestElement(unit: ViewCompilationUnit, element: t.Element): void {
   unit.create.push(endOp);
 
   // If there is an i18n message associated with this element, insert i18n start and end ops.
-  if (element.i18n instanceof i18n.Message) {
-    const i18nBlockId = unit.job.allocateXrefId();
-    ir.OpList.insertAfter<ir.CreateOp>(ir.createI18nStartOp(i18nBlockId, element.i18n), startOp);
+  if (i18nBlockId !== null) {
     ir.OpList.insertBefore<ir.CreateOp>(ir.createI18nEndOp(i18nBlockId), endOp);
   }
 }