From 02523debe533c6d0562db19838e9c177e9f827f6 Mon Sep 17 00:00:00 2001
From: Andrew Kushnir <akushnir@google.com>
Date: Mon, 20 May 2019 14:40:44 -0700
Subject: [PATCH] fix(ivy): handle pipes in i18n attributes properly (#30573)

Prior to this change we processed binding expression (including bindings with pipes) in i18n attributes before we generate update instruction. As a result, slot offsets for pipeBind instructions were calculated incorrectly. Now we perform binding expression processing when we generate "update block" instructions, so offsets are calculated correctly.

PR Close #30573
---
 .../test/compliance/r3_view_compiler_i18n_spec.ts      | 10 +++++-----
 packages/compiler/src/render3/view/template.ts         |  5 +++--
 packages/core/test/acceptance/i18n_spec.ts             |  8 ++++++++
 3 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/packages/compiler-cli/test/compliance/r3_view_compiler_i18n_spec.ts b/packages/compiler-cli/test/compliance/r3_view_compiler_i18n_spec.ts
index 5d65f8d700..0951d62d62 100644
--- a/packages/compiler-cli/test/compliance/r3_view_compiler_i18n_spec.ts
+++ b/packages/compiler-cli/test/compliance/r3_view_compiler_i18n_spec.ts
@@ -470,7 +470,7 @@ describe('i18n support in the view compiler', () => {
           }
           if (rf & 2) {
             $r3$.ɵɵselect(0);
-            $r3$.ɵɵi18nExp($r3$.ɵɵbind($r3$.ɵɵpipeBind1(1, 0, ctx.valueA)));
+            $r3$.ɵɵi18nExp($r3$.ɵɵbind($r3$.ɵɵpipeBind1(1, 6, ctx.valueA)));
             $r3$.ɵɵi18nExp($r3$.ɵɵbind(ctx.valueB));
             $r3$.ɵɵi18nApply(2);
             $r3$.ɵɵselect(3);
@@ -520,7 +520,7 @@ describe('i18n support in the view compiler', () => {
           }
           if (rf & 2) {
             $r3$.ɵɵselect(0);
-            $r3$.ɵɵi18nExp($r3$.ɵɵbind($r3$.ɵɵpipeBind1(1, 0, ctx.valueA)));
+            $r3$.ɵɵi18nExp($r3$.ɵɵbind($r3$.ɵɵpipeBind1(1, 1, ctx.valueA)));
             $r3$.ɵɵi18nApply(2);
           }
         }
@@ -567,7 +567,7 @@ describe('i18n support in the view compiler', () => {
           if (rf & 2) {
             const $outer_r1$ = ctx.$implicit;
             $r3$.ɵɵselect(1);
-            $r3$.ɵɵi18nExp($r3$.ɵɵbind($r3$.ɵɵpipeBind1(2, 0, $outer_r1$)));
+            $r3$.ɵɵi18nExp($r3$.ɵɵbind($r3$.ɵɵpipeBind1(2, 1, $outer_r1$)));
             $r3$.ɵɵi18nApply(3);
           }
         }
@@ -699,7 +699,7 @@ describe('i18n support in the view compiler', () => {
           }
           if (rf & 2) {
             $r3$.ɵɵselect(0);
-            $r3$.ɵɵi18nExp($r3$.ɵɵbind($r3$.ɵɵpipeBind1(1, 0, ctx.valueA)));
+            $r3$.ɵɵi18nExp($r3$.ɵɵbind($r3$.ɵɵpipeBind1(1, 6, ctx.valueA)));
             $r3$.ɵɵi18nExp($r3$.ɵɵbind(ctx.valueB));
             $r3$.ɵɵi18nApply(2);
             $r3$.ɵɵselect(3);
@@ -754,7 +754,7 @@ describe('i18n support in the view compiler', () => {
           if (rf & 2) {
             const $outer_r1$ = ctx.$implicit;
             $r3$.ɵɵselect(1);
-            $r3$.ɵɵi18nExp($r3$.ɵɵbind($r3$.ɵɵpipeBind1(2, 0, $outer_r1$)));
+            $r3$.ɵɵi18nExp($r3$.ɵɵbind($r3$.ɵɵpipeBind1(2, 1, $outer_r1$)));
             $r3$.ɵɵi18nApply(3);
           }
         }
diff --git a/packages/compiler/src/render3/view/template.ts b/packages/compiler/src/render3/view/template.ts
index 758ceb66ea..32d990934b 100644
--- a/packages/compiler/src/render3/view/template.ts
+++ b/packages/compiler/src/render3/view/template.ts
@@ -643,8 +643,9 @@ export class TemplateDefinitionBuilder implements t.Visitor<void>, LocalResolver
               i18nAttrArgs.push(o.literal(attr.name), this.i18nTranslate(message, params));
               converted.expressions.forEach(expression => {
                 hasBindings = true;
-                const binding = this.convertExpressionBinding(implicit, expression);
-                this.updateInstruction(elementIndex, element.sourceSpan, R3.i18nExp, [binding]);
+                this.updateInstruction(
+                    elementIndex, element.sourceSpan, R3.i18nExp,
+                    () => [this.convertExpressionBinding(implicit, expression)]);
               });
             }
           }
diff --git a/packages/core/test/acceptance/i18n_spec.ts b/packages/core/test/acceptance/i18n_spec.ts
index f63ed86800..647d86c5ec 100644
--- a/packages/core/test/acceptance/i18n_spec.ts
+++ b/packages/core/test/acceptance/i18n_spec.ts
@@ -570,6 +570,14 @@ onlyInIvy('Ivy i18n logic').describe('runtime i18n', () => {
       expect(fixture.nativeElement.innerHTML).toEqual(`<div title="bonjour John"></div>`);
     });
 
+    it('with pipes', () => {
+      ɵi18nConfigureLocalize(
+          {translations: {'hello {$interpolation}': 'bonjour {$interpolation}'}});
+      const fixture = initWithTemplate(
+          AppComp, `<div i18n i18n-title title="hello {{name | uppercase}}"></div>`);
+      expect(fixture.nativeElement.innerHTML).toEqual(`<div title="bonjour ANGULAR"></div>`);
+    });
+
     it('multiple attributes', () => {
       ɵi18nConfigureLocalize(
           {translations: {'hello {$interpolation}': 'bonjour {$interpolation}'}});