refactor(ivy): add new attribute interpolation instructions (angular#30503)

PR Close angular#30503

Author: benlesh

packages/compiler-cli/test/compliance/r3_view_compiler_binding_spec.ts

@@ -496,6 +496,51 @@ describe('compiler compliance: bindings', () => {
       expectEmit(result.source, template, 'Incorrect handling of interpolated properties');
     });
 
+
+    it('should generate the proper update instructions for interpolated attributes', () => {
+      const files: MockDirectory = getAppFiles(`
+        <div attr.title="a{{one}}b{{two}}c{{three}}d{{four}}e{{five}}f{{six}}g{{seven}}h{{eight}}i{{nine}}j"></div>
+        <div attr.title="a{{one}}b{{two}}c{{three}}d{{four}}e{{five}}f{{six}}g{{seven}}h{{eight}}i"></div>
+        <div attr.title="a{{one}}b{{two}}c{{three}}d{{four}}e{{five}}f{{six}}g{{seven}}h"></div>
+        <div attr.title="a{{one}}b{{two}}c{{three}}d{{four}}e{{five}}f{{six}}g"></div>
+        <div attr.title="a{{one}}b{{two}}c{{three}}d{{four}}e{{five}}f"></div>
+        <div attr.title="a{{one}}b{{two}}c{{three}}d{{four}}e"></div>
+        <div attr.title="a{{one}}b{{two}}c{{three}}d"></div>
+        <div attr.title="a{{one}}b{{two}}c"></div>
+        <div attr.title="a{{one}}b"></div>
+        <div attr.title="{{one}}"></div>
+      `);
+
+      const template = `
+      …
+        if (rf & 2) {
+          i0.Δselect(0);
+          i0.ΔattributeInterpolateV("title", ["a", ctx.one, "b", ctx.two, "c", ctx.three, "d", ctx.four, "e", ctx.five, "f", ctx.six, "g", ctx.seven, "h", ctx.eight, "i", ctx.nine, "j"]);
+          i0.Δselect(1);
+          i0.ΔattributeInterpolate8("title", "a", ctx.one, "b", ctx.two, "c", ctx.three, "d", ctx.four, "e", ctx.five, "f", ctx.six, "g", ctx.seven, "h", ctx.eight, "i");
+          i0.Δselect(2);
+          i0.ΔattributeInterpolate7("title", "a", ctx.one, "b", ctx.two, "c", ctx.three, "d", ctx.four, "e", ctx.five, "f", ctx.six, "g", ctx.seven, "h");
+          i0.Δselect(3);
+          i0.ΔattributeInterpolate6("title", "a", ctx.one, "b", ctx.two, "c", ctx.three, "d", ctx.four, "e", ctx.five, "f", ctx.six, "g");
+          i0.Δselect(4);
+          i0.ΔattributeInterpolate5("title", "a", ctx.one, "b", ctx.two, "c", ctx.three, "d", ctx.four, "e", ctx.five, "f");
+          i0.Δselect(5);
+          i0.ΔattributeInterpolate4("title", "a", ctx.one, "b", ctx.two, "c", ctx.three, "d", ctx.four, "e");
+          i0.Δselect(6);
+          i0.ΔattributeInterpolate3("title", "a", ctx.one, "b", ctx.two, "c", ctx.three, "d");
+          i0.Δselect(7);
+          i0.ΔattributeInterpolate2("title", "a", ctx.one, "b", ctx.two, "c");
+          i0.Δselect(8);
+          i0.ΔattributeInterpolate1("title", "a", ctx.one, "b");
+          i0.Δselect(9);
+          i0.ΔattributeInterpolate("title", ctx.one);
+      }
+      …
+      `;
+      const result = compile(files, angularFiles);
+      expectEmit(result.source, template, 'Incorrect handling of interpolated properties');
+    });
+
     it('should keep local ref for host element', () => {
       const files: MockDirectory = getAppFiles(`
         <b ngNonBindable #myRef id="my-id">

packages/compiler/src/render3/r3_identifiers.ts

@@ -43,6 +43,27 @@ export class Identifiers {
 
   static attribute: o.ExternalReference = {name: 'ɵɵattribute', moduleName: CORE};
 
+  static attributeInterpolate:
+      o.ExternalReference = {name: 'ɵɵattributeInterpolate', moduleName: CORE};
+  static attributeInterpolate1:
+      o.ExternalReference = {name: 'ɵɵattributeInterpolate1', moduleName: CORE};
+  static attributeInterpolate2:
+      o.ExternalReference = {name: 'ɵɵattributeInterpolate2', moduleName: CORE};
+  static attributeInterpolate3:
+      o.ExternalReference = {name: 'ɵɵattributeInterpolate3', moduleName: CORE};
+  static attributeInterpolate4:
+      o.ExternalReference = {name: 'ɵɵattributeInterpolate4', moduleName: CORE};
+  static attributeInterpolate5:
+      o.ExternalReference = {name: 'ɵɵattributeInterpolate5', moduleName: CORE};
+  static attributeInterpolate6:
+      o.ExternalReference = {name: 'ɵɵattributeInterpolate6', moduleName: CORE};
+  static attributeInterpolate7:
+      o.ExternalReference = {name: 'ɵɵattributeInterpolate7', moduleName: CORE};
+  static attributeInterpolate8:
+      o.ExternalReference = {name: 'ɵɵattributeInterpolate8', moduleName: CORE};
+  static attributeInterpolateV:
+      o.ExternalReference = {name: 'ɵɵattributeInterpolateV', moduleName: CORE};
+
   static classProp: o.ExternalReference = {name: 'ɵɵclassProp', moduleName: CORE};
 
   static elementContainerStart:

packages/compiler/src/render3/view/template.ts

@@ -772,12 +772,12 @@ export class TemplateDefinitionBuilder implements t.Visitor<void>, LocalResolver
           } else if (inputType === BindingType.Attribute) {
             if (value instanceof Interpolation) {
               // attr.name="{{value}}" and friends
-              this.updateInstruction(elementIndex, input.sourceSpan, R3.elementAttribute, () => {
-                return [
-                  o.literal(elementIndex), o.literal(attrName),
-                  this.convertPropertyBinding(implicit, value), ...params
-                ];
-              });
+              this.updateInstruction(
+                  elementIndex, input.sourceSpan, getAttributeInterpolationExpression(value),
+                  () =>
+                      [o.literal(attrName),
+                       ...this.getUpdateInstructionArguments(o.variable(CONTEXT_NAME), value),
+                       ...params]);
             } else {
               // [attr.name]="value"
               this.updateInstruction(elementIndex, input.sourceSpan, R3.attribute, () => {
@@ -1695,6 +1695,35 @@ function getPropertyInterpolationExpression(interpolation: Interpolation) {
   }
 }
 
+/**
+ * Gets the instruction to generate for an interpolated attribute
+ * @param interpolation An Interpolation AST
+ */
+function getAttributeInterpolationExpression(interpolation: Interpolation) {
+  switch (getInterpolationArgsLength(interpolation)) {
+    case 1:
+      return R3.attributeInterpolate;
+    case 3:
+      return R3.attributeInterpolate1;
+    case 5:
+      return R3.attributeInterpolate2;
+    case 7:
+      return R3.attributeInterpolate3;
+    case 9:
+      return R3.attributeInterpolate4;
+    case 11:
+      return R3.attributeInterpolate5;
+    case 13:
+      return R3.attributeInterpolate6;
+    case 15:
+      return R3.attributeInterpolate7;
+    case 17:
+      return R3.attributeInterpolate8;
+    default:
+      return R3.attributeInterpolateV;
+  }
+}
+
 /**
  * Gets the number of arguments expected to be passed to a generated instruction in the case of
  * interpolation instructions.

packages/core/src/core_render3_private_export.ts

@@ -9,6 +9,16 @@
 // clang-format off
 export {
   ɵɵattribute,
+  ɵɵattributeInterpolate,
+  ɵɵattributeInterpolate1,
+  ɵɵattributeInterpolate2,
+  ɵɵattributeInterpolate3,
+  ɵɵattributeInterpolate4,
+  ɵɵattributeInterpolate5,
+  ɵɵattributeInterpolate6,
+  ɵɵattributeInterpolate7,
+  ɵɵattributeInterpolate8,
+  ɵɵattributeInterpolateV,
   ɵɵdefineBase,
   ɵɵdefineComponent,
   ɵɵdefineDirective,

packages/core/src/render3/index.ts

@@ -23,7 +23,19 @@ export {
   tick,
 
   ɵɵallocHostVars,
+
   ɵɵattribute,
+  ɵɵattributeInterpolate,
+  ɵɵattributeInterpolate1,
+  ɵɵattributeInterpolate2,
+  ɵɵattributeInterpolate3,
+  ɵɵattributeInterpolate4,
+  ɵɵattributeInterpolate5,
+  ɵɵattributeInterpolate6,
+  ɵɵattributeInterpolate7,
+  ɵɵattributeInterpolate8,
+  ɵɵattributeInterpolateV,
+
   ɵɵbind,
   ɵɵclassMap,
   ɵɵclassProp,

packages/core/src/render3/instructions/all.ts

@@ -27,6 +27,7 @@
  */
 export * from './alloc_host_vars';
 export * from './attribute';
+export * from './attribute_interpolation';
 export * from './change_detection';
 export * from './container';
 export * from './storage';