refactor(ivy): add new ɵɵattribute instruction (#30503)

- adds the ɵɵattribute instruction
- adds compilation handling for Δattribute instruction
- updates tests

PR Close #30503

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

@@ -547,7 +547,7 @@ describe('compiler compliance: styling', () => {
                   $r3$.ɵɵstyleProp(0, $ctx$.myWidth);
                   $r3$.ɵɵstyleProp(1, $ctx$.myHeight);
                   $r3$.ɵɵstylingApply();
-                  $r3$.ɵɵelementAttribute(0, "style", $r3$.ɵɵbind("border-width: 10px"), $r3$.ɵɵsanitizeStyle);
+                  $r3$.ɵɵattribute("style", "border-width: 10px", $r3$.ɵɵsanitizeStyle);
                 }
               },
               encapsulation: 2
@@ -772,7 +772,7 @@ describe('compiler compliance: styling', () => {
                   $r3$.ɵɵclassProp(0, $ctx$.yesToApple);
                   $r3$.ɵɵclassProp(1, $ctx$.yesToOrange);
                   $r3$.ɵɵstylingApply();
-                  $r3$.ɵɵelementAttribute(0, "class", $r3$.ɵɵbind("banana"));
+                  $r3$.ɵɵattribute("class", "banana");
                 }
               },
               encapsulation: 2
@@ -822,8 +822,8 @@ describe('compiler compliance: styling', () => {
                 }
                 if (rf & 2) {
                   $r3$.ɵɵselect(0);
-                  $r3$.ɵɵelementAttribute(0, "class", $r3$.ɵɵbind("round"));
+                  $r3$.ɵɵattribute("class", "round");
-                  $r3$.ɵɵelementAttribute(0, "style", $r3$.ɵɵbind("height:100px"), $r3$.ɵɵsanitizeStyle);
+                  $r3$.ɵɵattribute("style", "height:100px", $r3$.ɵɵsanitizeStyle);
                 }
               },
               encapsulation: 2

packages/compiler/src/render3/r3_identifiers.ts

@@ -41,6 +41,8 @@ export class Identifiers {
 
   static elementAttribute: o.ExternalReference = {name: 'ɵɵelementAttribute', moduleName: CORE};
 
+  static attribute: o.ExternalReference = {name: 'ɵɵattribute', moduleName: CORE};
+
   static classProp: o.ExternalReference = {name: 'ɵɵclassProp', moduleName: CORE};
 
   static elementContainerStart:

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

@@ -753,6 +753,7 @@ export class TemplateDefinitionBuilder implements t.Visitor<void>, LocalResolver
 
           if (inputType === BindingType.Property) {
             if (value instanceof Interpolation) {
+              // prop="{{value}}" and friends
               this.updateInstruction(
                   elementIndex, input.sourceSpan, getPropertyInterpolationExpression(value),
                   () =>
@@ -761,23 +762,33 @@ export class TemplateDefinitionBuilder implements t.Visitor<void>, LocalResolver
                        ...params]);
 
             } else {
-              // Bound, un-interpolated properties
+              // [prop]="value"
               this.updateInstruction(elementIndex, input.sourceSpan, R3.property, () => {
                 return [
                   o.literal(attrName), this.convertPropertyBinding(implicit, value, true), ...params
                 ];
               });
             }
-          } else {
+          } else if (inputType === BindingType.Attribute) {
-            let instruction: any;
+            if (value instanceof Interpolation) {
-
+              // attr.name="{{value}}" and friends
-            if (inputType === BindingType.Class) {
+              this.updateInstruction(elementIndex, input.sourceSpan, R3.elementAttribute, () => {
-              instruction = R3.classProp;
+                return [
+                  o.literal(elementIndex), o.literal(attrName),
+                  this.convertPropertyBinding(implicit, value), ...params
+                ];
+              });
             } else {
-              instruction = R3.elementAttribute;
+              // [attr.name]="value"
+              this.updateInstruction(elementIndex, input.sourceSpan, R3.attribute, () => {
+                return [
+                  o.literal(attrName), this.convertPropertyBinding(implicit, value, true), ...params
+                ];
+              });
             }
-
+          } else {
-            this.updateInstruction(elementIndex, input.sourceSpan, instruction, () => {
+            // class prop
+            this.updateInstruction(elementIndex, input.sourceSpan, R3.classProp, () => {
               return [
                 o.literal(elementIndex), o.literal(attrName),
                 this.convertPropertyBinding(implicit, value), ...params

packages/core/src/core_render3_private_export.ts

@@ -8,6 +8,7 @@
 
 // clang-format off
 export {
+  ɵɵattribute,
   ɵɵdefineBase,
   ɵɵdefineComponent,
   ɵɵdefineDirective,

packages/core/src/render3/index.ts

@@ -21,7 +21,9 @@ export {
   markDirty,
   store,
   tick,
+
   ɵɵallocHostVars,
+  ɵɵattribute,
   ɵɵbind,
   ɵɵclassMap,
   ɵɵclassProp,

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

@@ -26,6 +26,7 @@
  * Jira Issue = FW-1184
  */
 export * from './alloc_host_vars';
+export * from './attribute';
 export * from './change_detection';
 export * from './container';
 export * from './storage';

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

@@ -0,0 +1,31 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+import {SanitizerFn} from '../interfaces/sanitization';
+import {getSelectedIndex} from '../state';
+
+import {ΔelementAttribute} from './element';
+import {Δbind} from './property';
+
+/**
+ * Updates the value of or removes a bound attribute on an Element.
+ *
+ * Used in the case of `[attr.title]="value"`
+ *
+ * @param name name The name of the attribute.
+ * @param value value The attribute is removed when value is `null` or `undefined`.
+ *                  Otherwise the attribute value is set to the stringified value.
+ * @param sanitizer An optional function used to sanitize the value.
+ * @param namespace Optional namespace to use when setting the attribute.
+ *
+ * @codeGenApi
+ */
+export function Δattribute(
+    name: string, value: any, sanitizer?: SanitizerFn | null, namespace?: string) {
+  const index = getSelectedIndex();
+  return ΔelementAttribute(index, name, Δbind(value), sanitizer, namespace);
+}

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

@@ -198,7 +198,7 @@ export function ɵɵelement(
 
 
 /**
- * Updates the value of removes an attribute on an Element.
+ * Updates the value or removes an attribute on an Element.
  *
  * @param number index The index of the element in the data array
  * @param name name The name of the attribute.

packages/core/src/render3/jit/environment.ts

@@ -20,6 +20,7 @@ import * as r3 from '../index';
  */
 export const angularCoreEnv: {[name: string]: Function} =
     (() => ({
+       'ɵɵattribute': r3.ɵɵattribute,
        'ɵɵdefineBase': r3.ɵɵdefineBase,
        'ɵɵdefineComponent': r3.ɵɵdefineComponent,
        'ɵɵdefineDirective': r3.ɵɵdefineDirective,