refactor(compiler): Add support for ng-content in i18n blocks (#53327)

mmalerba · dylhunn · commit 57b027154344 · 2023-12-04T14:24:22.000-08:00
Adds support for handling i18n paceholders on ng-content and adds a new test to verify behavior. PR Close #53327
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/nested_nodes/TEST_CASES.json b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/nested_nodes/TEST_CASES.json
@@ -242,6 +242,20 @@
         }
       ],
       "skipForTemplatePipeline": true
+    },
+    {
+      "description": "should handle ng-content in i18n block",
+      "inputFiles": [
+        "nested_ng-content.ts"
+      ],
+      "expectations": [
+        {
+          "extraChecks": [
+            "verifyPlaceholdersIntegrity",
+            "verifyUniqueConsts"
+          ]
+        }
+      ]
     }
   ]
 }
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/nested_nodes/nested_ng-content.js b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/nested_nodes/nested_ng-content.js
@@ -0,0 +1,20 @@
+const $_c2$ = [[["special"]], "*"];
+const $_c3$ = ["special", "*"];
+&hellip;
+decls: 4,
+vars: 0,
+consts: () => {
+  __i18nMsgWithPostprocess__('{$startTagNgContent}{$closeTagNgContent}{$startTagNgContent_1}{$closeTagNgContent}', [['closeTagNgContent', String.raw`[\uFFFD/#2\uFFFD|\uFFFD/#3\uFFFD]`], ['startTagNgContent', String.raw`\uFFFD#2\uFFFD`], ['startTagNgContent_1', String.raw`\uFFFD#3\uFFFD`]], {original_code: { 'closeTagNgContent': '</ng-content>', 'startTagNgContent': '<ng-content select=\"special\">', 'startTagNgContent_1': '<ng-content>' }}, {}, [])
+  return [$i18n_0$];
+},
+template: function MyComponent_Template(rf, ctx) {
+  if (rf & 1) {
+    i0.&#629;&#629;projectionDef($_c2$);
+    i0.&#629;&#629;elementStart(0, "div");
+    i0.&#629;&#629;i18nStart(1, 0);
+    i0.&#629;&#629;projection(2);
+    i0.&#629;&#629;projection(3, 1);
+    i0.&#629;&#629;i18nEnd();
+    i0.&#629;&#629;elementEnd();
+  } 
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/nested_nodes/nested_ng-content.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/nested_nodes/nested_ng-content.ts
@@ -0,0 +1,14 @@
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'my-component',
+  standalone: true,
+  template: `
+  <div i18n>
+    <ng-content select="special"></ng-content>
+    <ng-content></ng-content>
+  </div>
+`,
+})
+export class MyComponent {
+}
diff --git a/packages/compiler/src/template/pipeline/ir/src/ops/create.ts b/packages/compiler/src/template/pipeline/ir/src/ops/create.ts
@@ -584,16 +584,20 @@ export interface ProjectionOp extends Op<CreateOp>, ConsumesSlotOpTrait {
 
   selector: string;
 
+  i18nPlaceholder?: i18n.TagPlaceholder;
+
   sourceSpan: ParseSourceSpan;
 }
 
 export function createProjectionOp(
-    xref: XrefId, selector: string, sourceSpan: ParseSourceSpan): ProjectionOp {
+    xref: XrefId, selector: string, i18nPlaceholder: i18n.TagPlaceholder|undefined,
+    sourceSpan: ParseSourceSpan): ProjectionOp {
   return {
     kind: OpKind.Projection,
     xref,
     handle: new SlotHandle(),
     selector,
+    i18nPlaceholder,
     projectionSlotIndex: 0,
     attributes: [],
     localRefs: [],
diff --git a/packages/compiler/src/template/pipeline/src/ingest.ts b/packages/compiler/src/template/pipeline/src/ingest.ts
@@ -232,7 +232,11 @@ function ingestTemplate(unit: ViewCompilationUnit, tmpl: t.Template): void {
  * Ingest a literal text node from the AST into the given `ViewCompilation`.
  */
 function ingestContent(unit: ViewCompilationUnit, content: t.Content): void {
-  const op = ir.createProjectionOp(unit.job.allocateXrefId(), content.selector, content.sourceSpan);
+  if (content.i18n !== undefined && !(content.i18n instanceof i18n.TagPlaceholder)) {
+    throw Error(`Unhandled i18n metadata type for element: ${content.i18n.constructor.name}`);
+  }
+  const op = ir.createProjectionOp(
+      unit.job.allocateXrefId(), content.selector, content.i18n, content.sourceSpan);
   for (const attr of content.attributes) {
     ingestBinding(
         unit, op.xref, attr.name, o.literal(attr.value), e.BindingType.Attribute, null,
diff --git a/packages/compiler/src/template/pipeline/src/phases/resolve_i18n_element_placeholders.ts b/packages/compiler/src/template/pipeline/src/phases/resolve_i18n_element_placeholders.ts
@@ -86,6 +86,24 @@ function resolvePlaceholdersForView(
           }
         }
         break;
+      case ir.OpKind.Projection:
+        debugger;
+        // For content projections with i18n placeholders, record its slot value in the params map
+        // under the corresponding tag start and close placeholders.
+        if (op.i18nPlaceholder !== undefined) {
+          if (currentOps === null) {
+            throw Error('i18n tag placeholder should only occur inside an i18n block');
+          }
+          const {startName, closeName} = op.i18nPlaceholder;
+          let flags = ir.I18nParamValueFlags.ElementTag;
+          addParam(
+              currentOps.i18nContext.params, startName, op.handle.slot!,
+              currentOps.i18nBlock.subTemplateIndex, flags | ir.I18nParamValueFlags.OpenTag);
+          addParam(
+              currentOps.i18nContext.params, closeName, op.handle.slot!,
+              currentOps.i18nBlock.subTemplateIndex, flags | ir.I18nParamValueFlags.CloseTag);
+        }
+        break;
       case ir.OpKind.Template:
         // For templates with i18n placeholders, record its slot value in the params map under the
         // corresponding template start and close placeholders.

Original file line number	Diff line number	Diff line change
`@@ -242,6 +242,20 @@`
`242`	`242`	`}`
`243`	`243`	`],`
`244`	`244`	`"skipForTemplatePipeline": true`
	`245`	`+ },`
	`246`	`+ {`
	`247`	`+ "description": "should handle ng-content in i18n block",`
	`248`	`+ "inputFiles": [`
	`249`	`+ "nested_ng-content.ts"`
	`250`	`+ ],`
	`251`	`+ "expectations": [`
	`252`	`+ {`
	`253`	`+ "extraChecks": [`
	`254`	`+ "verifyPlaceholdersIntegrity",`
	`255`	`+ "verifyUniqueConsts"`
	`256`	`+ ]`
	`257`	`+ }`
	`258`	`+ ]`
`245`	`259`	`}`
`246`	`260`	`]`
`247`	`261`	`}`
-Original file line number
+Diff line change
@@ @@ -0,0 +1,20 @@ @@
 +const $_c2$ = [[["special"]], "*"];
 +const $_c3$ = ["special", "*"];
 +…
 +decls: 4,
 +vars: 0,
 +consts: () => {
 +  __i18nMsgWithPostprocess__('{$startTagNgContent}{$closeTagNgContent}{$startTagNgContent_1}{$closeTagNgContent}', [['closeTagNgContent', String.raw`[\uFFFD/#2\uFFFD|\uFFFD/#3\uFFFD]`], ['startTagNgContent', String.raw`\uFFFD#2\uFFFD`], ['startTagNgContent_1', String.raw`\uFFFD#3\uFFFD`]], {original_code: { 'closeTagNgContent': '</ng-content>', 'startTagNgContent': '<ng-content select=\"special\">', 'startTagNgContent_1': '<ng-content>' }}, {}, [])
 +  return [$i18n_0$];
 +},
 +template: function MyComponent_Template(rf, ctx) {
 +  if (rf & 1) {
 +    i0.ɵɵprojectionDef($_c2$);
 +    i0.ɵɵelementStart(0, "div");
 +    i0.ɵɵi18nStart(1, 0);
 +    i0.ɵɵprojection(2);
 +    i0.ɵɵprojection(3, 1);
 +    i0.ɵɵi18nEnd();
 +    i0.ɵɵelementEnd();
 +  }
 +}