refactor(compiler): ICUs should roll up to the root i18n block for ap…

…plication Previously, if an ICU was inside a nested i18n root, it would use the nested root to calculate whether it should be applied. Now, we use the root i18n block.
dylhunn · Jan 23, 2024 · fbcc583 · fbcc583
1 parent e9c659a
commit fbcc583
Show file tree

Hide file tree

Showing 5 changed files with 88 additions and 1 deletion.
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/GOLDEN_PARTIAL.js b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/GOLDEN_PARTIAL.js
@@ -143,3 +143,43 @@ export declare class MyModule {
     static ɵinj: i0.ɵɵInjectorDeclaration<MyModule>;
 }
 
+/****************************************************************************************************
+ * PARTIAL FILE: icu_and_i18n.js
+ ****************************************************************************************************/
+import { Component } from '@angular/core';
+import * as i0 from "@angular/core";
+export class MyComponent {
+}
+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 i18n>
+      <div *ngFor="let diskView of disks">
+        {{diskView.name}} has {diskView.length, plural, =1 {VM} other {VMs}}
+      </div>
+    </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',
+                    standalone: true,
+                    template: `
+    <div i18n>
+      <div *ngFor="let diskView of disks">
+        {{diskView.name}} has {diskView.length, plural, =1 {VM} other {VMs}}
+      </div>
+    </div>
+  `,
+                }]
+        }] });
+
+/****************************************************************************************************
+ * PARTIAL FILE: icu_and_i18n.d.ts
+ ****************************************************************************************************/
+import * as i0 from "@angular/core";
+export declare class MyComponent {
+    disks: any;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MyComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MyComponent, "my-component", never, {}, {}, never, never, true, never>;
+}
+
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/TEST_CASES.json b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/TEST_CASES.json
@@ -28,6 +28,12 @@
           ]
         }
       ]
+    },
+    {
+      "description": "should support i18n nodes with ICUs inside",
+      "inputFiles": [
+        "icu_and_i18n.ts"
+      ]
     }
   ]
 }
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_and_i18n.js b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_and_i18n.js
@@ -0,0 +1,25 @@
+function MyComponent_div_2_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵi18nStart(0, 0, 1);
+        i0.ɵɵelement(1, "div");
+        i0.ɵɵi18nEnd();
+    } if (rf & 2) {
+        const diskView_r1 = ctx.$implicit;
+        i0.ɵɵadvance();
+        i0.ɵɵi18nExp(diskView_r1.name)(diskView_r1.length);
+        i0.ɵɵi18nApply(0);
+    }
+}
+…
+function MyComponent_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelementStart(0, "div");
+        i0.ɵɵi18nStart(1, 0);
+        i0.ɵɵtemplate(2, MyComponent_div_2_Template, 2, 2, "div", 1);
+        i0.ɵɵi18nEnd();
+        i0.ɵɵelementEnd();
+    } if (rf & 2) {
+        i0.ɵɵadvance(2);
+        i0.ɵɵproperty("ngForOf", ctx.disks);
+    }
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_and_i18n.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_and_i18n.ts
@@ -0,0 +1,16 @@
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'my-component',
+  standalone: true,
+  template: `
+    <div i18n>
+      <div *ngFor="let diskView of disks">
+        {{diskView.name}} has {diskView.length, plural, =1 {VM} other {VMs}}
+      </div>
+    </div>
+  `,
+})
+export class MyComponent {
+  disks: any;
+}
diff --git a/packages/compiler/src/template/pipeline/src/phases/create_i18n_contexts.ts b/packages/compiler/src/template/pipeline/src/phases/create_i18n_contexts.ts
@@ -97,7 +97,7 @@ export function createI18nContexts(job: CompilationJob) {
             // This ICU is a sub-message inside its parent i18n block message. We need to give it
             // its own context.
             const contextOp = ir.createI18nContextOp(
-                ir.I18nContextKind.Icu, job.allocateXrefId(), currentI18nOp.xref, op.message, null!
+                ir.I18nContextKind.Icu, job.allocateXrefId(), currentI18nOp.root, op.message, null!
             );
             unit.create.push(contextOp);
             op.context = contextOp.xref;