refactor(compiler): add support for class map bindings (angular#50805)

Adds support for bindings of the form `[class]="classActiveMap"`

PR Close angular#50805

Author: mmalerba

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_styling/class_bindings/TEST_CASES.json

@@ -3,60 +3,43 @@
   "cases": [
     {
       "description": "should create class styling instructions on the element",
-      "inputFiles": [
-        "class_binding.ts"
-      ],
+      "inputFiles": ["class_binding.ts"],
       "expectations": [
         {
           "failureMessage": "Incorrect template",
-          "files": [
-            "class_binding.js"
-          ]
+          "files": ["class_binding.js"]
         }
-      ],
-      "skipForTemplatePipeline": true
+      ]
     },
     {
       "description": "should place initial, multi, singular and application followed by attribute class instructions in the template code in that order",
-      "inputFiles": [
-        "class_ordering.ts"
-      ],
+      "inputFiles": ["class_ordering.ts"],
       "expectations": [
         {
           "failureMessage": "Incorrect template",
-          "files": [
-            "class_ordering.js"
-          ]
+          "files": ["class_ordering.js"]
         }
       ],
       "skipForTemplatePipeline": true
     },
     {
       "description": "should not generate the styling apply instruction if there are only static style/class attributes",
-      "inputFiles": [
-        "static_bindings.ts"
-      ],
+      "inputFiles": ["static_bindings.ts"],
       "expectations": [
         {
           "failureMessage": "Incorrect template",
-          "files": [
-            "static_bindings.js"
-          ]
+          "files": ["static_bindings.js"]
         }
       ],
       "skipForTemplatePipeline": true
     },
     {
       "description": "should not create instructions for empty class bindings",
-      "inputFiles": [
-        "empty_class_bindings.ts"
-      ],
+      "inputFiles": ["empty_class_bindings.ts"],
       "expectations": [
         {
           "failureMessage": "Incorrect template",
-          "files": [
-            "empty_class_bindings.js"
-          ]
+          "files": ["empty_class_bindings.js"]
         }
       ],
       "skipForTemplatePipeline": true

packages/compiler/src/template/pipeline/ir/src/enums.ts

@@ -93,6 +93,11 @@ export enum OpKind {
    */
   StyleMap,
 
+  /**
+   * An operation to bind an expression to the classes of an element.
+   */
+  ClassMap,
+
   /**
    * An operation to interpolate text into a property binding.
    */

packages/compiler/src/template/pipeline/ir/src/expression.ts

@@ -737,6 +737,7 @@ export function transformExpressionsInOp(
     case OpKind.Property:
     case OpKind.StyleProp:
     case OpKind.StyleMap:
+    case OpKind.ClassMap:
       op.expression = transformExpressionsInExpression(op.expression, transform, flags);
       break;
     case OpKind.InterpolateProperty:

packages/compiler/src/template/pipeline/ir/src/ops/update.ts

@@ -18,8 +18,8 @@ import {ListEndOp, NEW_OP, StatementOp, VariableOp} from './shared';
  * An operation usable on the update side of the IR.
  */
 export type UpdateOp = ListEndOp<UpdateOp>|StatementOp<UpdateOp>|PropertyOp|AttributeOp|StylePropOp|
-    StyleMapOp|InterpolatePropertyOp|InterpolateAttributeOp|InterpolateStylePropOp|
-    InterpolateStyleMapOp|AttributeOp|InterpolateTextOp|AdvanceOp|VariableOp<UpdateOp>;
+    StyleMapOp|ClassMapOp|InterpolatePropertyOp|InterpolateAttributeOp|InterpolateStylePropOp|
+    InterpolateStyleMapOp|InterpolateTextOp|AdvanceOp|VariableOp<UpdateOp>;
 
 /**
  * A logical operation to perform string interpolation on a text node.
@@ -183,6 +183,37 @@ export function createStyleMapOp(xref: XrefId, expression: o.Expression): StyleM
   };
 }
 
+/**
+ * A logical operation representing binding to a style map in the update IR.
+ */
+export interface ClassMapOp extends Op<UpdateOp>, ConsumesVarsTrait, DependsOnSlotContextOpTrait {
+  kind: OpKind.ClassMap;
+
+  /**
+   * Reference to the element on which the property is bound.
+   */
+  target: XrefId;
+
+  /**
+   * Expression which is bound to the property.
+   */
+  expression: o.Expression;
+}
+
+/**
+ * Create a `ClassMapOp`.
+ */
+export function createClassMapOp(xref: XrefId, expression: o.Expression): ClassMapOp {
+  return {
+    kind: OpKind.ClassMap,
+    target: xref,
+    expression,
+    ...TRAIT_DEPENDS_ON_SLOT_CONTEXT,
+    ...TRAIT_CONSUMES_VARS,
+    ...NEW_OP,
+  };
+}
+
 /**
  * A logical operation representing setting an attribute  on an element in the update IR.
  */

packages/compiler/src/template/pipeline/src/ingest.ts

@@ -307,6 +307,11 @@ function ingestPropertyBinding(
             throw Error('Unexpected style binding on ng-template');
           }
           view.update.push(ir.createStyleMapOp(xref, convertAst(value, view.tpl)));
+        } else if (name === 'class') {
+          if (bindingKind !== ir.ElementAttributeKind.Binding) {
+            throw Error('Unexpected class binding on ng-template');
+          }
+          view.update.push(ir.createClassMapOp(xref, convertAst(value, view.tpl)));
         } else {
           view.update.push(
               ir.createPropertyOp(xref, bindingKind, name, convertAst(value, view.tpl)));

packages/compiler/src/template/pipeline/src/instruction.ts

@@ -156,6 +156,10 @@ export function styleMap(expression: o.Expression): ir.UpdateOp {
   return call(Identifiers.styleMap, [expression]);
 }
 
+export function classMap(expression: o.Expression): ir.UpdateOp {
+  return call(Identifiers.classMap, [expression]);
+}
+
 const PIPE_BINDINGS: o.ExternalReference[] = [
   Identifiers.pipeBind1,
   Identifiers.pipeBind2,

packages/compiler/src/template/pipeline/src/phases/reify.ts

@@ -127,6 +127,9 @@ function reifyUpdateOperations(_view: ViewCompilation, ops: ir.OpList<ir.UpdateO
       case ir.OpKind.StyleMap:
         ir.OpList.replace(op, ng.styleMap(op.expression));
         break;
+      case ir.OpKind.ClassMap:
+        ir.OpList.replace(op, ng.classMap(op.expression));
+        break;
       case ir.OpKind.InterpolateProperty:
         ir.OpList.replace(op, ng.propertyInterpolate(op.name, op.strings, op.expressions));
         break;

packages/compiler/src/template/pipeline/src/phases/var_counting.ts

@@ -69,6 +69,9 @@ function varsUsedByOp(op: (ir.CreateOp|ir.UpdateOp)&ir.ConsumesVarsTrait): numbe
     case ir.OpKind.Attribute:
       // Attribute bindings use 1 variable slot.
       return 1;
+    case ir.OpKind.ClassMap:
+      // TODO: explain why 2.
+      return 2;
     case ir.OpKind.InterpolateText:
       // `ir.InterpolateTextOp`s use a variable slot for each dynamic expression.
       return op.expressions.length;