refactor(compiler): initialize `RenderComponentType` eagerly

This moves the usage of `APP_ID` into the `DomRenderer`.

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

@@ -323,6 +323,11 @@ export class Identifiers {
     moduleUrl: VIEW_UTILS_MODULE_URL,
     runtime: view_utils.subscribeToRenderElement
   };
+  static createRenderComponentType: IdentifierSpec = {
+    name: 'createRenderComponentType',
+    moduleUrl: VIEW_UTILS_MODULE_URL,
+    runtime: view_utils.createRenderComponentType
+  };
   static noop:
       IdentifierSpec = {name: 'noop', moduleUrl: VIEW_UTILS_MODULE_URL, runtime: view_utils.noop};
 }

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

@@ -276,8 +276,7 @@ export class OfflineCompiler {
     if (componentStyles) {
       targetStatements.push(..._resolveStyleStatements(componentStyles, fileSuffix));
     }
-    compiledAnimations.forEach(
+    compiledAnimations.forEach(entry => targetStatements.push(...entry.statements));
-        entry => { entry.statements.forEach(statement => { targetStatements.push(statement); }); });
     targetStatements.push(..._resolveViewStatements(viewResult));
     return viewResult.viewFactoryVar;
   }

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

@@ -320,10 +320,9 @@ export class RuntimeCompiler implements Compiler {
         dwd.placeholder.reference = this._assertDirectiveWrapper(dwd.dir.reference);
       }
     });
-    const statements =
+    const statements = stylesCompileResult.componentStylesheet.statements
-        stylesCompileResult.componentStylesheet.statements.concat(compileResult.statements);
+                           .concat(...compiledAnimations.map(ca => ca.statements))
-    compiledAnimations.forEach(
+                           .concat(compileResult.statements);
-        entry => { entry.statements.forEach(statement => { statements.push(statement); }); });
     let factory: any;
     if (!this._compilerConfig.useJit) {
       factory = interpretStatements(statements, compileResult.viewFactoryVar);

modules/@angular/compiler/src/view_compiler/view_builder.ts

@@ -394,14 +394,29 @@ function createViewTopLevelStmts(view: CompileView, targetStatements: o.Statemen
   var renderCompTypeVar: o.ReadVarExpr =
       o.variable(`renderType_${view.component.type.name}`);  // fix highlighting: `
   if (view.viewIndex === 0) {
+    let templateUrlInfo: string;
+    if (view.component.template.templateUrl == view.component.type.moduleUrl) {
+      templateUrlInfo =
+          `${view.component.type.moduleUrl} class ${view.component.type.name} - inline template`;
+    } else {
+      templateUrlInfo = view.component.template.templateUrl;
+    }
     targetStatements.push(
-        renderCompTypeVar.set(o.NULL_EXPR)
+        renderCompTypeVar
+            .set(o.importExpr(resolveIdentifier(Identifiers.createRenderComponentType)).callFn([
+              view.genConfig.genDebugInfo ? o.literal(templateUrlInfo) : o.literal(''),
+              o.literal(view.component.template.ngContentSelectors.length),
+              ViewEncapsulationEnum.fromValue(view.component.template.encapsulation),
+              view.styles,
+              o.literalMap(view.animations.map(
+                  (entry): [string, o.Expression] => [entry.name, entry.fnExp])),
+            ]))
             .toDeclStmt(o.importType(resolveIdentifier(Identifiers.RenderComponentType))));
   }
 
   var viewClass = createViewClass(view, renderCompTypeVar, nodeDebugInfosVar);
   targetStatements.push(viewClass);
-  targetStatements.push(createViewFactory(view, viewClass, renderCompTypeVar));
+  targetStatements.push(createViewFactory(view, viewClass));
 }
 
 function createStaticNodeDebugInfo(node: CompileNode): o.Expression {
@@ -499,8 +514,7 @@ function generateDestroyMethod(view: CompileView): o.Statement[] {
   return stmts;
 }
 
-function createViewFactory(
+function createViewFactory(view: CompileView, viewClass: o.ClassStmt): o.Statement {
-    view: CompileView, viewClass: o.ClassStmt, renderCompTypeVar: o.ReadVarExpr): o.Statement {
   var viewFactoryArgs = [
     new o.FnParam(
         ViewConstructorVars.viewUtils.name, o.importType(resolveIdentifier(Identifiers.ViewUtils))),
@@ -510,41 +524,13 @@ function createViewFactory(
     new o.FnParam(ViewConstructorVars.parentIndex.name, o.NUMBER_TYPE),
     new o.FnParam(ViewConstructorVars.parentElement.name, o.DYNAMIC_TYPE)
   ];
-  var initRenderCompTypeStmts: any[] = [];
-  var templateUrlInfo: string;
-  if (view.component.template.templateUrl == view.component.type.moduleUrl) {
-    templateUrlInfo =
-        `${view.component.type.moduleUrl} class ${view.component.type.name} - inline template`;
-  } else {
-    templateUrlInfo = view.component.template.templateUrl;
-  }
-  if (view.viewIndex === 0) {
-    var animationsExpr = o.literalMap(
-        view.animations.map((entry): [string, o.Expression] => [entry.name, entry.fnExp]));
-    initRenderCompTypeStmts = [
-      new o.IfStmt(
-        renderCompTypeVar.identical(o.NULL_EXPR),
-        [
-          renderCompTypeVar
-             .set(ViewConstructorVars.viewUtils.callMethod(
-                 'createRenderComponentType',
-                 [
-                   view.genConfig.genDebugInfo ? o.literal(templateUrlInfo) : o.literal(''),
-                   o.literal(view.component.template.ngContentSelectors.length),
-                   ViewEncapsulationEnum.fromValue(view.component.template.encapsulation),
-                   view.styles,
-                   animationsExpr,
-                 ]))
-             .toStmt(),
-        ]),
-    ];
-  }
   return o
-      .fn(viewFactoryArgs, initRenderCompTypeStmts.concat([
+      .fn(viewFactoryArgs,
-        new o.ReturnStatement(o.variable(viewClass.name)
+          [
-                                  .instantiate(viewClass.constructorMethod.params.map(
+            new o.ReturnStatement(o.variable(viewClass.name)
-                                      (param) => o.variable(param.name)))),
+                                      .instantiate(viewClass.constructorMethod.params.map(
-      ]),
+                                          (param) => o.variable(param.name)))),
+          ],
           o.importType(resolveIdentifier(Identifiers.AppView), [getContextType(view)]))
       .toDeclStmt(view.viewFactory.name, [o.StmtModifier.Final]);
 }

modules/@angular/core/src/linker/view_utils.ts

@@ -24,23 +24,7 @@ export class ViewUtils {
   sanitizer: Sanitizer;
   private _nextCompTypeId: number = 0;
 
-  constructor(
+  constructor(private _renderer: RootRenderer, sanitizer: Sanitizer) { this.sanitizer = sanitizer; }
-      private _renderer: RootRenderer, @Inject(APP_ID) private _appId: string,
-      sanitizer: Sanitizer) {
-    this.sanitizer = sanitizer;
-  }
-
-  /**
-   * Used by the generated code
-   */
-  // TODO (matsko): add typing for the animation function
-  createRenderComponentType(
-      templateUrl: string, slotCount: number, encapsulation: ViewEncapsulation,
-      styles: Array<string|any[]>, animations: {[key: string]: Function}): RenderComponentType {
-    return new RenderComponentType(
-        `${this._appId}-${this._nextCompTypeId++}`, templateUrl, slotCount, encapsulation, styles,
-        animations);
-  }
 
   /** @internal */
   renderComponent(renderComponentType: RenderComponentType): Renderer {
@@ -48,6 +32,15 @@ export class ViewUtils {
   }
 }
 
+let nextRenderComponentTypeId = 0;
+
+export function createRenderComponentType(
+    templateUrl: string, slotCount: number, encapsulation: ViewEncapsulation,
+    styles: Array<string|any[]>, animations: {[key: string]: Function}): RenderComponentType {
+  return new RenderComponentType(
+      `${nextRenderComponentTypeId++}`, templateUrl, slotCount, encapsulation, styles, animations);
+}
+
 export function addToArray(e: any, array: any[]) {
   array.push(e);
 }

modules/@angular/platform-browser/src/dom/dom_renderer.ts

@@ -6,7 +6,8 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Inject, Injectable, RenderComponentType, Renderer, RootRenderer, ViewEncapsulation} from '@angular/core';
+import {APP_ID, Inject, Injectable, RenderComponentType, Renderer, RootRenderer, ViewEncapsulation} from '@angular/core';
+
 import {isBlank, isPresent, stringify} from '../facade/lang';
 import {AnimationKeyframe, AnimationPlayer, AnimationStyles, RenderDebugInfo} from '../private_import_core';
 
@@ -30,12 +31,14 @@ export abstract class DomRootRenderer implements RootRenderer {
 
   constructor(
       public document: any, public eventManager: EventManager,
-      public sharedStylesHost: DomSharedStylesHost, public animationDriver: AnimationDriver) {}
+      public sharedStylesHost: DomSharedStylesHost, public animationDriver: AnimationDriver,
+      public appId: string) {}
 
   renderComponent(componentProto: RenderComponentType): Renderer {
     var renderer = this.registeredComponents.get(componentProto.id);
     if (!renderer) {
-      renderer = new DomRenderer(this, componentProto, this.animationDriver);
+      renderer = new DomRenderer(
+          this, componentProto, this.animationDriver, `${this.appId}-${componentProto.id}`);
       this.registeredComponents.set(componentProto.id, renderer);
     }
     return renderer;
@@ -46,8 +49,9 @@ export abstract class DomRootRenderer implements RootRenderer {
 export class DomRootRenderer_ extends DomRootRenderer {
   constructor(
       @Inject(DOCUMENT) _document: any, _eventManager: EventManager,
-      sharedStylesHost: DomSharedStylesHost, animationDriver: AnimationDriver) {
+      sharedStylesHost: DomSharedStylesHost, animationDriver: AnimationDriver,
-    super(_document, _eventManager, sharedStylesHost, animationDriver);
+      @Inject(APP_ID) appId: string) {
+    super(_document, _eventManager, sharedStylesHost, animationDriver, appId);
   }
 }
 
@@ -58,14 +62,14 @@ export class DomRenderer implements Renderer {
 
   constructor(
       private _rootRenderer: DomRootRenderer, private componentProto: RenderComponentType,
-      private _animationDriver: AnimationDriver) {
+      private _animationDriver: AnimationDriver, styleShimId: string) {
-    this._styles = _flattenStyles(componentProto.id, componentProto.styles, []);
+    this._styles = _flattenStyles(styleShimId, componentProto.styles, []);
     if (componentProto.encapsulation !== ViewEncapsulation.Native) {
       this._rootRenderer.sharedStylesHost.addStyles(this._styles);
     }
     if (this.componentProto.encapsulation === ViewEncapsulation.Emulated) {
-      this._contentAttr = _shimContentAttribute(componentProto.id);
+      this._contentAttr = _shimContentAttribute(styleShimId);
-      this._hostAttr = _shimHostAttribute(componentProto.id);
+      this._hostAttr = _shimHostAttribute(styleShimId);
     } else {
       this._contentAttr = null;
       this._hostAttr = null;

modules/benchmarks/src/tree/ng2_ftl/app.ngfactory.ts

@@ -147,7 +147,7 @@ class AppModuleInjector extends import0.NgModuleInjector<import1.AppModule> {
     if ((this.__DomRootRenderer_19 == (null as any))) {
       (this.__DomRootRenderer_19 = new import13.DomRootRenderer_(
            this._DOCUMENT_13, this._EventManager_16, this._DomSharedStylesHost_17,
-           this._AnimationDriver_18));
+           this._AnimationDriver_18, this._APP_ID_12));
     }
     return this.__DomRootRenderer_19;
   }
@@ -172,8 +172,7 @@ class AppModuleInjector extends import0.NgModuleInjector<import1.AppModule> {
   }
   get _ViewUtils_23(): import15.ViewUtils {
     if ((this.__ViewUtils_23 == (null as any))) {
-      (this.__ViewUtils_23 =
+      (this.__ViewUtils_23 = new import15.ViewUtils(this._RootRenderer_20, this._Sanitizer_22));
-           new import15.ViewUtils(this._RootRenderer_20, this._APP_ID_12, this._Sanitizer_22));
     }
     return this.__ViewUtils_23;
   }

modules/benchmarks/src/tree/ng2_ftl/tree_host.ngfactory.ts

@@ -56,7 +56,7 @@ function viewFactory_TreeComponent_Host0(
     parentElement: any): import1.AppView<any> {
   if ((renderType_TreeComponent_Host === (null as any))) {
     (renderType_TreeComponent_Host =
-         viewUtils.createRenderComponentType('', 0, import8.ViewEncapsulation.None, [], {}));
+         import4.createRenderComponentType('', 0, import8.ViewEncapsulation.None, [], {}));
   }
   return new _View_TreeComponent_Host0(viewUtils, parentView, parentIndex, parentElement);
 }

modules/benchmarks/src/tree/ng2_static_ftl/app.ngfactory.ts

@@ -147,7 +147,7 @@ class AppModuleInjector extends import0.NgModuleInjector<import1.AppModule> {
     if ((this.__DomRootRenderer_19 == (null as any))) {
       (this.__DomRootRenderer_19 = new import13.DomRootRenderer_(
            this._DOCUMENT_13, this._EventManager_16, this._DomSharedStylesHost_17,
-           this._AnimationDriver_18));
+           this._AnimationDriver_18, this._APP_ID_12));
     }
     return this.__DomRootRenderer_19;
   }
@@ -172,8 +172,7 @@ class AppModuleInjector extends import0.NgModuleInjector<import1.AppModule> {
   }
   get _ViewUtils_23(): import15.ViewUtils {
     if ((this.__ViewUtils_23 == (null as any))) {
-      (this.__ViewUtils_23 =
+      (this.__ViewUtils_23 = new import15.ViewUtils(this._RootRenderer_20, this._Sanitizer_22));
-           new import15.ViewUtils(this._RootRenderer_20, this._APP_ID_12, this._Sanitizer_22));
     }
     return this.__ViewUtils_23;
   }

modules/benchmarks/src/tree/ng2_static_ftl/tree_root.ngfactory.ts

@@ -63,7 +63,7 @@ function viewFactory_TreeRootComponent_Host0(
     parentElement: any): import1.AppView<any> {
   if ((renderType_TreeRootComponent_Host === (null as any))) {
     (renderType_TreeRootComponent_Host =
-         viewUtils.createRenderComponentType('', 0, import8.ViewEncapsulation.None, [], {}));
+         import4.createRenderComponentType('', 0, import8.ViewEncapsulation.None, [], {}));
   }
   return new _View_TreeRootComponent_Host0(viewUtils, parentView, parentIndex, parentElement);
 }
@@ -125,7 +125,7 @@ export function viewFactory_TreeRootComponent0(
     viewUtils: import4.ViewUtils, parentView: import1.AppView<any>, parentIndex: number,
     parentElement: any): import1.AppView<import3.TreeRootComponent> {
   if ((renderType_TreeRootComponent === (null as any))) {
-    (renderType_TreeRootComponent = viewUtils.createRenderComponentType(
+    (renderType_TreeRootComponent = import4.createRenderComponentType(
          '/Users/tbosch/projects/conf-demos/ngc-demo/src/ng2_static/root_tree.ts class TreeRootComponent - inline template',
          0, import8.ViewEncapsulation.None, styles_TreeRootComponent, {}));
   }