refactor(compiler): generate less code for bindings to DOM elements

Detailed changes:
- remove `UNINITIALIZED`, initialize change detection fields with `undefined`.
  * we use `view.numberOfChecks === 0` now everywhere
    as indicator whether we are in the first change detection cycle
    (previously we used this only in a couple of places).
  * we keep the initialization itself as change detection get slower without it.
- remove passing around `throwOnChange` in various generated calls,
  and store it on the view as property instead.
- change generated code for bindings to DOM elements as follows:
  Before:
  ```
  var currVal_10 = self.context.bgColor;
  if (jit_checkBinding15(self.throwOnChange,self._expr_10,currVal_10)) {
    self.renderer.setElementStyle(self._el_0,'backgroundColor',((self.viewUtils.sanitizer.sanitize(jit_21,currVal_10) == null)? null: self.viewUtils.sanitizer.sanitize(jit_21,currVal_10).toString()));
    self._expr_10 = currVal_10;
  }
  var currVal_11 = jit_inlineInterpolate16(1,' ',self.context.data.value,' ');
  if (jit_checkBinding15(self.throwOnChange,self._expr_11,currVal_11)) {
    self.renderer.setText(self._text_1,currVal_11);
    self._expr_11 = currVal_11;
  }
  ```,
  After:
  ```
  var currVal_10 = self.context.bgColor;
  jit_checkRenderStyle14(self,self._el_0,'backgroundColor',null,self._expr_10,self._expr_10=currVal_10,false,jit_21);
  var currVal_11 = jit_inlineInterpolate15(1,' ',self.context.data.value,' ');
  jit_checkRenderText16(self,self._text_1,self._expr_11,self._expr_11=currVal_11,false);
  ```

Performance impact:
- None seen (checked against internal latency lab)

Part of angular#13651

Author: tbosch

modules/@angular/compiler/src/compiler_util/binding_util.ts

@@ -21,28 +21,14 @@ export function createCheckBindingField(builder: ClassBuilder): CheckBindingFiel
   const fieldExpr = createBindFieldExpr(bindingId);
   // private is fine here as no child view will reference the cached value...
   builder.fields.push(new o.ClassField(fieldExpr.name, null, [o.StmtModifier.Private]));
-  builder.ctorStmts.push(o.THIS_EXPR.prop(fieldExpr.name)
-                             .set(o.importExpr(createIdentifier(Identifiers.UNINITIALIZED)))
-                             .toStmt());
+  builder.ctorStmts.push(o.THIS_EXPR.prop(fieldExpr.name).set(o.literal(undefined)).toStmt());
   return new CheckBindingField(fieldExpr, bindingId);
 }
 
-export function createCheckBindingStmt(
-    evalResult: ConvertPropertyBindingResult, fieldExpr: o.ReadPropExpr,
-    throwOnChangeVar: o.Expression, actions: o.Statement[]): o.Statement[] {
-  let condition: o.Expression = o.importExpr(createIdentifier(Identifiers.checkBinding)).callFn([
-    throwOnChangeVar, fieldExpr, evalResult.currValExpr
-  ]);
-  if (evalResult.forceUpdate) {
-    condition = evalResult.forceUpdate.or(condition);
-  }
-  return [
-    ...evalResult.stmts, new o.IfStmt(condition, actions.concat([
-      <o.Statement>o.THIS_EXPR.prop(fieldExpr.name).set(evalResult.currValExpr).toStmt()
-    ]))
-  ];
-}
-
 function createBindFieldExpr(bindingId: string): o.ReadPropExpr {
   return o.THIS_EXPR.prop(`_expr_${bindingId}`);
 }
+
+export function isFirstViewCheck(view: o.Expression): o.Expression {
+  return o.not(view.prop('numberOfChecks'));
+}

modules/@angular/compiler/src/compiler_util/render_util.ts

@@ -13,69 +13,64 @@ import * as o from '../output/output_ast';
 import {EMPTY_STATE as EMPTY_ANIMATION_STATE} from '../private_import_core';
 import {BoundElementPropertyAst, BoundEventAst, PropertyBindingType} from '../template_parser/template_ast';
 
+import {isFirstViewCheck} from './binding_util';
+import {ConvertPropertyBindingResult} from './expression_converter';
 import {createEnumExpression} from './identifier_util';
 
-export function writeToRenderer(
-    view: o.Expression, boundProp: BoundElementPropertyAst, renderElement: o.Expression,
-    renderValue: o.Expression, logBindingUpdate: boolean,
+export function createCheckRenderBindingStmt(
+    view: o.Expression, renderElement: o.Expression, boundProp: BoundElementPropertyAst,
+    oldValue: o.ReadPropExpr, evalResult: ConvertPropertyBindingResult,
     securityContextExpression?: o.Expression): o.Statement[] {
-  const updateStmts: o.Statement[] = [];
-  const renderer = view.prop('renderer');
-  renderValue = sanitizedValue(view, boundProp, renderValue, securityContextExpression);
+  const checkStmts: o.Statement[] = [...evalResult.stmts];
+  const securityContext = calcSecurityContext(boundProp, securityContextExpression);
   switch (boundProp.type) {
     case PropertyBindingType.Property:
-      if (logBindingUpdate) {
-        updateStmts.push(
-            o.importExpr(createIdentifier(Identifiers.setBindingDebugInfo))
-                .callFn([renderer, renderElement, o.literal(boundProp.name), renderValue])
-                .toStmt());
-      }
-      updateStmts.push(
-          renderer
-              .callMethod(
-                  'setElementProperty', [renderElement, o.literal(boundProp.name), renderValue])
-              .toStmt());
+      checkStmts.push(o.importExpr(createIdentifier(Identifiers.checkRenderProperty))
+                          .callFn([
+                            view, renderElement, o.literal(boundProp.name), oldValue,
+                            oldValue.set(evalResult.currValExpr),
+                            evalResult.forceUpdate || o.literal(false), securityContext
+                          ])
+                          .toStmt());
       break;
     case PropertyBindingType.Attribute:
-      renderValue =
-          renderValue.isBlank().conditional(o.NULL_EXPR, renderValue.callMethod('toString', []));
-      updateStmts.push(
-          renderer
-              .callMethod(
-                  'setElementAttribute', [renderElement, o.literal(boundProp.name), renderValue])
-              .toStmt());
+      checkStmts.push(o.importExpr(createIdentifier(Identifiers.checkRenderAttribute))
+                          .callFn([
+                            view, renderElement, o.literal(boundProp.name), oldValue,
+                            oldValue.set(evalResult.currValExpr),
+                            evalResult.forceUpdate || o.literal(false), securityContext
+                          ])
+                          .toStmt());
       break;
     case PropertyBindingType.Class:
-      updateStmts.push(
-          renderer
-              .callMethod(
-                  'setElementClass', [renderElement, o.literal(boundProp.name), renderValue])
+      checkStmts.push(
+          o.importExpr(createIdentifier(Identifiers.checkRenderClass))
+              .callFn([
+                view, renderElement, o.literal(boundProp.name), oldValue,
+                oldValue.set(evalResult.currValExpr), evalResult.forceUpdate || o.literal(false)
+              ])
               .toStmt());
       break;
     case PropertyBindingType.Style:
-      let strValue: o.Expression = renderValue.callMethod('toString', []);
-      if (isPresent(boundProp.unit)) {
-        strValue = strValue.plus(o.literal(boundProp.unit));
-      }
-
-      renderValue = renderValue.isBlank().conditional(o.NULL_EXPR, strValue);
-      updateStmts.push(
-          renderer
-              .callMethod(
-                  'setElementStyle', [renderElement, o.literal(boundProp.name), renderValue])
+      checkStmts.push(
+          o.importExpr(createIdentifier(Identifiers.checkRenderStyle))
+              .callFn([
+                view, renderElement, o.literal(boundProp.name), o.literal(boundProp.unit), oldValue,
+                oldValue.set(evalResult.currValExpr), evalResult.forceUpdate || o.literal(false),
+                securityContext
+              ])
               .toStmt());
       break;
     case PropertyBindingType.Animation:
       throw new Error('Illegal state: Should not come here!');
   }
-  return updateStmts;
+  return checkStmts;
 }
 
-function sanitizedValue(
-    view: o.Expression, boundProp: BoundElementPropertyAst, renderValue: o.Expression,
-    securityContextExpression?: o.Expression): o.Expression {
+function calcSecurityContext(
+    boundProp: BoundElementPropertyAst, securityContextExpression?: o.Expression): o.Expression {
   if (boundProp.securityContext === SecurityContext.NONE) {
-    return renderValue;  // No sanitization needed.
+    return o.NULL_EXPR;  // No sanitization needed.
   }
   if (!boundProp.needsRuntimeSecurityContext) {
     securityContextExpression =
@@ -84,15 +79,13 @@ function sanitizedValue(
   if (!securityContextExpression) {
     throw new Error(`internal error, no SecurityContext given ${boundProp.name}`);
   }
-  const ctx = view.prop('viewUtils').prop('sanitizer');
-  const args = [securityContextExpression, renderValue];
-  return ctx.callMethod('sanitize', args);
+  return securityContextExpression;
 }
 
-export function triggerAnimation(
+export function createCheckAnimationBindingStmts(
     view: o.Expression, componentView: o.Expression, boundProp: BoundElementPropertyAst,
     boundOutputs: BoundEventAst[], eventListener: o.Expression, renderElement: o.Expression,
-    renderValue: o.Expression, lastRenderValue: o.Expression) {
+    oldValue: o.ReadPropExpr, evalResult: ConvertPropertyBindingResult) {
   const detachStmts: o.Statement[] = [];
   const updateStmts: o.Statement[] = [];
 
@@ -104,22 +97,21 @@ export function triggerAnimation(
   // it's important to normalize the void value as `void` explicitly
   // so that the styles data can be obtained from the stringmap
   const emptyStateValue = o.literal(EMPTY_ANIMATION_STATE);
-  const unitializedValue = o.importExpr(createIdentifier(Identifiers.UNINITIALIZED));
   const animationTransitionVar = o.variable('animationTransition_' + animationName);
 
   updateStmts.push(
       animationTransitionVar
           .set(animationFnExpr.callFn([
-            view, renderElement,
-            lastRenderValue.equals(unitializedValue).conditional(emptyStateValue, lastRenderValue),
-            renderValue.equals(unitializedValue).conditional(emptyStateValue, renderValue)
+            view, renderElement, isFirstViewCheck(view).conditional(emptyStateValue, oldValue),
+            evalResult.currValExpr
           ]))
           .toDeclStmt());
+  updateStmts.push(oldValue.set(evalResult.currValExpr).toStmt());
 
-  detachStmts.push(
-      animationTransitionVar
-          .set(animationFnExpr.callFn([view, renderElement, lastRenderValue, emptyStateValue]))
-          .toDeclStmt());
+  detachStmts.push(animationTransitionVar
+                       .set(animationFnExpr.callFn(
+                           [view, renderElement, evalResult.currValExpr, emptyStateValue]))
+                       .toDeclStmt());
 
   const registerStmts: o.Statement[] = [];
   const animationStartMethodExists = boundOutputs.find(
@@ -151,5 +143,14 @@ export function triggerAnimation(
   updateStmts.push(...registerStmts);
   detachStmts.push(...registerStmts);
 
-  return {updateStmts, detachStmts};
+  const checkUpdateStmts: o.Statement[] = [
+    ...evalResult.stmts,
+    new o.IfStmt(
+        o.importExpr(createIdentifier(Identifiers.checkBinding)).callFn([
+          view, oldValue, evalResult.currValExpr, evalResult.forceUpdate || o.literal(false)
+        ]),
+        updateStmts)
+  ];
+  const checkDetachStmts: o.Statement[] = [...evalResult.stmts, ...detachStmts];
+  return {checkUpdateStmts, checkDetachStmts};
 }

modules/@angular/compiler/src/directive_wrapper_compiler.ts

@@ -7,9 +7,9 @@
  */
 
 import {CompileDirectiveMetadata, CompileDirectiveSummary, CompileIdentifierMetadata, dirWrapperClassName, identifierModuleUrl, identifierName} from './compile_metadata';
-import {createCheckBindingField, createCheckBindingStmt} from './compiler_util/binding_util';
+import {createCheckBindingField, isFirstViewCheck} from './compiler_util/binding_util';
 import {EventHandlerVars, convertActionBinding, convertPropertyBinding} from './compiler_util/expression_converter';
-import {triggerAnimation, writeToRenderer} from './compiler_util/render_util';
+import {createCheckAnimationBindingStmts, createCheckRenderBindingStmt} from './compiler_util/render_util';
 import {CompilerConfig} from './config';
 import {Parser} from './expression_parser/parser';
 import {Identifiers, createIdentifier} from './identifiers';
@@ -32,8 +32,8 @@ const CHANGES_FIELD_NAME = '_changes';
 const CHANGED_FIELD_NAME = '_changed';
 const EVENT_HANDLER_FIELD_NAME = '_eventHandler';
 
+const CHANGE_VAR = o.variable('change');
 const CURR_VALUE_VAR = o.variable('currValue');
-const THROW_ON_CHANGE_VAR = o.variable('throwOnChange');
 const FORCE_UPDATE_VAR = o.variable('forceUpdate');
 const VIEW_VAR = o.variable('view');
 const COMPONENT_VIEW_VAR = o.variable('componentView');
@@ -130,8 +130,9 @@ class DirectiveWrapperBuilder implements ClassBuilder {
       new o.ClassField(CONTEXT_FIELD_NAME, o.importType(this.dirMeta.type)),
       new o.ClassField(CHANGED_FIELD_NAME, o.BOOL_TYPE, [o.StmtModifier.Private]),
     ];
-    const ctorStmts: o.Statement[] =
-        [o.THIS_EXPR.prop(CHANGED_FIELD_NAME).set(o.literal(false)).toStmt()];
+    const ctorStmts: o.Statement[] = [
+      o.THIS_EXPR.prop(CHANGED_FIELD_NAME).set(o.literal(false)).toStmt(),
+    ];
     if (this.genChanges) {
       fields.push(new o.ClassField(
           CHANGES_FIELD_NAME, new o.MapType(o.DYNAMIC_TYPE), [o.StmtModifier.Private]));
@@ -180,14 +181,14 @@ function addNgDoCheckMethod(builder: DirectiveWrapperBuilder) {
 
   if (builder.ngOnInit) {
     lifecycleStmts.push(new o.IfStmt(
-        VIEW_VAR.prop('numberOfChecks').identical(new o.LiteralExpr(0)),
+        isFirstViewCheck(VIEW_VAR),
         [o.THIS_EXPR.prop(CONTEXT_FIELD_NAME).callMethod('ngOnInit', []).toStmt()]));
   }
   if (builder.ngDoCheck) {
     lifecycleStmts.push(o.THIS_EXPR.prop(CONTEXT_FIELD_NAME).callMethod('ngDoCheck', []).toStmt());
   }
   if (lifecycleStmts.length > 0) {
-    stmts.push(new o.IfStmt(o.not(THROW_ON_CHANGE_VAR), lifecycleStmts));
+    stmts.push(new o.IfStmt(o.not(VIEW_VAR.prop('throwOnChange')), lifecycleStmts));
   }
   stmts.push(new o.ReturnStatement(changedVar));
 
@@ -197,7 +198,6 @@ function addNgDoCheckMethod(builder: DirectiveWrapperBuilder) {
         new o.FnParam(
             VIEW_VAR.name, o.importType(createIdentifier(Identifiers.AppView), [o.DYNAMIC_TYPE])),
         new o.FnParam(RENDER_EL_VAR.name, o.DYNAMIC_TYPE),
-        new o.FnParam(THROW_ON_CHANGE_VAR.name, o.BOOL_TYPE),
       ],
       stmts, o.BOOL_TYPE));
 }
@@ -207,24 +207,35 @@ function addCheckInputMethod(input: string, builder: DirectiveWrapperBuilder) {
   const onChangeStatements: o.Statement[] = [
     o.THIS_EXPR.prop(CHANGED_FIELD_NAME).set(o.literal(true)).toStmt(),
     o.THIS_EXPR.prop(CONTEXT_FIELD_NAME).prop(input).set(CURR_VALUE_VAR).toStmt(),
+    field.expression.set(CURR_VALUE_VAR).toStmt()
   ];
+  let methodBody: o.Statement[];
   if (builder.genChanges) {
-    onChangeStatements.push(o.THIS_EXPR.prop(CHANGES_FIELD_NAME)
-                                .key(o.literal(input))
-                                .set(o.importExpr(createIdentifier(Identifiers.SimpleChange))
-                                         .instantiate([field.expression, CURR_VALUE_VAR]))
-                                .toStmt());
+    onChangeStatements.push(
+        o.THIS_EXPR.prop(CHANGES_FIELD_NAME).key(o.literal(input)).set(CHANGE_VAR).toStmt());
+    methodBody = [
+      CHANGE_VAR
+          .set(o.importExpr(createIdentifier(Identifiers.checkBindingChange)).callFn([
+            VIEW_VAR, field.expression, CURR_VALUE_VAR, FORCE_UPDATE_VAR
+          ]))
+          .toDeclStmt(),
+      new o.IfStmt(CHANGE_VAR, onChangeStatements)
+    ];
+  } else {
+    methodBody = [new o.IfStmt(
+        o.importExpr(createIdentifier(Identifiers.checkBinding)).callFn([
+          VIEW_VAR, field.expression, CURR_VALUE_VAR, FORCE_UPDATE_VAR
+        ]),
+        onChangeStatements)];
   }
 
-  const methodBody: o.Statement[] = createCheckBindingStmt(
-      {currValExpr: CURR_VALUE_VAR, forceUpdate: FORCE_UPDATE_VAR, stmts: []}, field.expression,
-      THROW_ON_CHANGE_VAR, onChangeStatements);
   builder.methods.push(new o.ClassMethod(
       `check_${input}`,
       [
+        new o.FnParam(
+            VIEW_VAR.name, o.importType(createIdentifier(Identifiers.AppView), [o.DYNAMIC_TYPE])),
         new o.FnParam(CURR_VALUE_VAR.name, o.DYNAMIC_TYPE),
-        new o.FnParam(THROW_ON_CHANGE_VAR.name, o.BOOL_TYPE),
-        new o.FnParam(FORCE_UPDATE_VAR.name, o.BOOL_TYPE),
+        new o.FnParam(FORCE_UPDATE_VAR.name, o.BOOL_TYPE)
       ],
       methodBody));
 }
@@ -240,7 +251,6 @@ function addCheckHostMethod(
         COMPONENT_VIEW_VAR.name,
         o.importType(createIdentifier(Identifiers.AppView), [o.DYNAMIC_TYPE])),
     new o.FnParam(RENDER_EL_VAR.name, o.DYNAMIC_TYPE),
-    new o.FnParam(THROW_ON_CHANGE_VAR.name, o.BOOL_TYPE),
   ];
   hostProps.forEach((hostProp, hostPropIdx) => {
     const field = createCheckBindingField(builder);
@@ -255,23 +265,18 @@ function addCheckHostMethod(
       methodParams.push(new o.FnParam(
           securityContextExpr.name, o.importType(createIdentifier(Identifiers.SecurityContext))));
     }
-    let checkBindingStmts: o.Statement[];
     if (hostProp.isAnimation) {
-      const {updateStmts, detachStmts} = triggerAnimation(
+      const {checkUpdateStmts, checkDetachStmts} = createCheckAnimationBindingStmts(
           VIEW_VAR, COMPONENT_VIEW_VAR, hostProp, hostEvents,
           o.THIS_EXPR.prop(EVENT_HANDLER_FIELD_NAME)
               .or(o.importExpr(createIdentifier(Identifiers.noop))),
-          RENDER_EL_VAR, evalResult.currValExpr, field.expression);
-      checkBindingStmts = updateStmts;
-      builder.detachStmts.push(...detachStmts);
+          RENDER_EL_VAR, field.expression, evalResult);
+      builder.detachStmts.push(...checkDetachStmts);
+      stmts.push(...checkUpdateStmts);
     } else {
-      checkBindingStmts = writeToRenderer(
-          VIEW_VAR, hostProp, RENDER_EL_VAR, evalResult.currValExpr,
-          builder.compilerConfig.logBindingUpdate, securityContextExpr);
+      stmts.push(...createCheckRenderBindingStmt(
+          VIEW_VAR, RENDER_EL_VAR, hostProp, field.expression, evalResult, securityContextExpr));
     }
-
-    stmts.push(...createCheckBindingStmt(
-        evalResult, field.expression, THROW_ON_CHANGE_VAR, checkBindingStmts));
   });
   builder.methods.push(new o.ClassMethod('checkHost', methodParams, stmts));
 }
@@ -381,20 +386,19 @@ export class DirectiveWrapperExpressions {
     return dirWrapper.prop(CONTEXT_FIELD_NAME);
   }
 
-  static ngDoCheck(
-      dirWrapper: o.Expression, view: o.Expression, renderElement: o.Expression,
-      throwOnChange: o.Expression): o.Expression {
-    return dirWrapper.callMethod('ngDoCheck', [view, renderElement, throwOnChange]);
+  static ngDoCheck(dirWrapper: o.Expression, view: o.Expression, renderElement: o.Expression, ):
+      o.Expression {
+    return dirWrapper.callMethod('ngDoCheck', [view, renderElement]);
   }
   static checkHost(
       hostProps: BoundElementPropertyAst[], dirWrapper: o.Expression, view: o.Expression,
-      componentView: o.Expression, renderElement: o.Expression, throwOnChange: o.Expression,
+      componentView: o.Expression, renderElement: o.Expression,
       runtimeSecurityContexts: o.Expression[]): o.Statement[] {
     if (hostProps.length) {
       return [dirWrapper
                   .callMethod(
-                      'checkHost', [view, componentView, renderElement, throwOnChange].concat(
-                                       runtimeSecurityContexts))
+                      'checkHost',
+                      [view, componentView, renderElement].concat(runtimeSecurityContexts))
                   .toStmt()];
     } else {
       return [];