refactor(renderer): separate compiler from renderer

Part of angular#1675
Closes angular#1702

Author: tbosch

modules/angular2/src/core/application.js

@@ -32,7 +32,7 @@ import {AppViewPool, APP_VIEW_POOL_CAPACITY} from 'angular2/src/core/compiler/vi
 import {AppViewManager} from 'angular2/src/core/compiler/view_manager';
 import {AppViewManagerUtils} from 'angular2/src/core/compiler/view_manager_utils';
 import {ProtoViewFactory} from 'angular2/src/core/compiler/proto_view_factory';
-import {Renderer} from 'angular2/src/render/api';
+import {Renderer, RenderCompiler} from 'angular2/src/render/api';
 import {DirectDomRenderer} from 'angular2/src/render/dom/direct_dom_renderer';
 import * as rc from 'angular2/src/render/dom/compiler/compiler';
 import * as rvf from 'angular2/src/render/dom/view/view_factory';
@@ -92,7 +92,7 @@ function _injectorBindings(appComponentType): List<Binding> {
           [StyleUrlResolver, appDocumentToken]),
       DirectDomRenderer,
       bind(Renderer).toClass(DirectDomRenderer),
-      bind(rc.Compiler).toClass(rc.DefaultCompiler),
+      bind(RenderCompiler).toClass(rc.DefaultDomCompiler),
       // TODO(tbosch): We need an explicit factory here, as
       // we are getting errors in dart2js with mirrors...
       bind(rvf.ViewFactory).toFactory(

modules/angular2/src/core/compiler/compiler.js

@@ -54,15 +54,15 @@ export class Compiler {
   _componentUrlMapper: ComponentUrlMapper;
   _urlResolver: UrlResolver;
   _appUrl: string;
-  _renderer: renderApi.Renderer;
+  _render: renderApi.RenderCompiler;
   _protoViewFactory:ProtoViewFactory;
 
   constructor(reader: DirectiveMetadataReader,
               cache:CompilerCache,
               templateResolver: TemplateResolver,
               componentUrlMapper: ComponentUrlMapper,
               urlResolver: UrlResolver,
-              renderer: renderApi.Renderer,
+              render: renderApi.RenderCompiler,
               protoViewFactory: ProtoViewFactory) {
     this._reader = reader;
     this._compilerCache = cache;
@@ -71,7 +71,7 @@ export class Compiler {
     this._componentUrlMapper = componentUrlMapper;
     this._urlResolver = urlResolver;
     this._appUrl = urlResolver.resolve(null, './');
-    this._renderer = renderer;
+    this._render = render;
     this._protoViewFactory = protoViewFactory;
   }
 
@@ -94,7 +94,7 @@ export class Compiler {
     this._assertTypeIsComponent(componentBinding);
 
     var directiveMetadata = Compiler.buildRenderDirective(componentBinding);
-    return this._renderer.createHostProtoView(directiveMetadata).then( (hostRenderPv) => {
+    return this._render.compileHost(directiveMetadata).then( (hostRenderPv) => {
       return this._compileNestedProtoViews(null, null, hostRenderPv, [componentBinding], true);
     }).then( (appProtoView) => {
       return new ProtoViewRef(appProtoView);
@@ -135,7 +135,7 @@ export class Compiler {
     }
     if (isPresent(template.renderer)) {
       var directives = [];
-      pvPromise = this._renderer.createImperativeComponentProtoView(template.renderer).then( (renderPv) => {
+      pvPromise = this._render.createImperativeComponentProtoView(template.renderer).then( (renderPv) => {
         return this._compileNestedProtoViews(null, componentBinding, renderPv, directives, true);
       });
     } else {
@@ -144,7 +144,7 @@ export class Compiler {
         (directive) => this._bindDirective(directive)
       );
       var renderTemplate = this._buildRenderTemplate(component, template, directives);
-      pvPromise = this._renderer.compile(renderTemplate).then( (renderPv) => {
+      pvPromise = this._render.compile(renderTemplate).then( (renderPv) => {
         return this._compileNestedProtoViews(null, componentBinding, renderPv, directives, true);
       });
     }
@@ -194,7 +194,7 @@ export class Compiler {
           ListWrapper.push(childComponentRenderPvRefs, isPresent(componentPv) ? componentPv.render : null);
         }
       });
-      this._renderer.mergeChildComponentProtoViews(protoView.render, childComponentRenderPvRefs);
+      this._render.mergeChildComponentProtoViews(protoView.render, childComponentRenderPvRefs);
       return protoView;
     };
     if (nestedPVPromises.length > 0) {
@@ -213,7 +213,7 @@ export class Compiler {
       templateAbsUrl = this._urlResolver.resolve(componentUrl, view.templateUrl);
     } else if (isPresent(view.template)) {
       // Note: If we have an inline template, we also need to send
-      // the url for the component to the renderer so that it
+      // the url for the component to the render so that it
       // is able to resolve urls in stylesheets.
       templateAbsUrl = componentUrl;
     }

modules/angular2/src/render/api.js

@@ -160,11 +160,11 @@ export class ViewDefinition {
   }
 }
 
-export class Renderer {
+export class RenderCompiler {
   /**
    * Creats a ProtoViewDto that contains a single nested component with the given componentId.
    */
-  createHostProtoView(componentId):Promise<ProtoViewDto> { return null; }
+  compileHost(componentId):Promise<ProtoViewDto> { return null; }
 
   /**
    * Creats a ProtoViewDto for a component that will use an imperative View using the given
@@ -189,7 +189,9 @@ export class Renderer {
    *    RenderProtoView for every element with a component in this protoView or in a view container's protoView
    */
   mergeChildComponentProtoViews(protoViewRef:RenderProtoViewRef, componentProtoViewRefs:List<RenderProtoViewRef>) { return null; }
+}
 
+export class Renderer {
   /**
    * Creates a view and inserts it into a ViewContainer.
    * @param {RenderViewContainerRef} viewContainerRef

modules/angular2/src/render/dom/compiler/compiler.js

@@ -1,26 +1,35 @@
 import {Injectable} from 'angular2/src/di/annotations_impl';
 
 import {PromiseWrapper, Promise} from 'angular2/src/facade/async';
-import {BaseException} from 'angular2/src/facade/lang';
+import {BaseException, isPresent} from 'angular2/src/facade/lang';
+import {ListWrapper} from 'angular2/src/facade/collection';
 import {DOM} from 'angular2/src/dom/dom_adapter';
 
-import {ViewDefinition, ProtoViewDto, DirectiveMetadata} from '../../api';
+import {ViewDefinition, ProtoViewDto, DirectiveMetadata, RenderCompiler, RenderProtoViewRef} from '../../api';
 import {CompilePipeline} from './compile_pipeline';
 import {TemplateLoader} from 'angular2/src/render/dom/compiler/template_loader';
 import {CompileStepFactory, DefaultStepFactory} from './compile_step_factory';
 import {Parser} from 'angular2/change_detection';
 import {ShadowDomStrategy} from '../shadow_dom/shadow_dom_strategy';
+import {ProtoViewBuilder} from '../view/proto_view_builder';
+
+import {DirectDomProtoViewRef} from '../direct_dom_renderer';
+
+function _resolveProtoView(protoViewRef:DirectDomProtoViewRef) {
+  return isPresent(protoViewRef) ? protoViewRef.delegate : null;
+}
 
 /**
  * The compiler loads and translates the html templates of components into
  * nested ProtoViews. To decompose its functionality it uses
  * the CompilePipeline and the CompileSteps.
  */
-export class Compiler {
+export class DomCompiler extends RenderCompiler {
   _templateLoader: TemplateLoader;
   _stepFactory: CompileStepFactory;
 
   constructor(stepFactory: CompileStepFactory, templateLoader: TemplateLoader) {
+    super();
     this._templateLoader = templateLoader;
     this._stepFactory = stepFactory;
   }
@@ -44,6 +53,18 @@ export class Compiler {
     return this._compileTemplate(hostViewDef, element);
   }
 
+  createImperativeComponentProtoView(rendererId):Promise<ProtoViewDto> {
+    var protoViewBuilder = new ProtoViewBuilder(null);
+    protoViewBuilder.setImperativeRendererId(rendererId);
+    return PromiseWrapper.resolve(protoViewBuilder.build());
+  }
+
+  mergeChildComponentProtoViews(protoViewRef:RenderProtoViewRef, protoViewRefs:List<RenderProtoViewRef>) {
+    _resolveProtoView(protoViewRef).mergeChildComponentProtoViews(
+      ListWrapper.map(protoViewRefs, _resolveProtoView)
+    );
+  }
+
   _compileTemplate(viewDef: ViewDefinition, tplElement):Promise<ProtoViewDto> {
     var subTaskPromises = [];
     var pipeline = new CompilePipeline(this._stepFactory.createSteps(viewDef, subTaskPromises));
@@ -60,7 +81,7 @@ export class Compiler {
 }
 
 @Injectable()
-export class DefaultCompiler extends Compiler {
+export class DefaultDomCompiler extends DomCompiler {
   constructor(parser:Parser, shadowDomStrategy:ShadowDomStrategy, templateLoader: TemplateLoader) {
     super(new DefaultStepFactory(parser, shadowDomStrategy), templateLoader);
   }

modules/angular2/src/render/dom/direct_dom_renderer.js

@@ -1,6 +1,5 @@
 import {Injectable} from 'angular2/src/di/annotations_impl';
 
-import {Promise, PromiseWrapper} from 'angular2/src/facade/async';
 import {List, ListWrapper} from 'angular2/src/facade/collection';
 import {isBlank, isPresent, BaseException} from 'angular2/src/facade/lang';
 
@@ -9,9 +8,7 @@ import {RenderView} from './view/view';
 import {RenderProtoView} from './view/proto_view';
 import {ViewFactory} from './view/view_factory';
 import {RenderViewHydrator} from './view/view_hydrator';
-import {Compiler} from './compiler/compiler';
 import {ShadowDomStrategy} from './shadow_dom/shadow_dom_strategy';
-import {ProtoViewBuilder} from './view/proto_view_builder';
 import {ViewContainer} from './view/view_container';
 
 function _resolveViewContainer(vc:api.RenderViewContainerRef) {
@@ -66,42 +63,18 @@ export class DirectDomViewRef extends api.RenderViewRef {
 
 @Injectable()
 export class DirectDomRenderer extends api.Renderer {
-  _compiler: Compiler;
   _viewFactory: ViewFactory;
   _viewHydrator: RenderViewHydrator;
   _shadowDomStrategy: ShadowDomStrategy;
 
   constructor(
-      compiler: Compiler, viewFactory: ViewFactory, viewHydrator: RenderViewHydrator, shadowDomStrategy: ShadowDomStrategy) {
+      viewFactory: ViewFactory, viewHydrator: RenderViewHydrator, shadowDomStrategy: ShadowDomStrategy) {
     super();
-    this._compiler = compiler;
     this._viewFactory = viewFactory;
     this._viewHydrator = viewHydrator;
     this._shadowDomStrategy = shadowDomStrategy;
   }
 
-  createHostProtoView(directiveMetadata:api.DirectiveMetadata):Promise<api.ProtoViewDto> {
-    return this._compiler.compileHost(directiveMetadata);
-  }
-
-  createImperativeComponentProtoView(rendererId):Promise<api.ProtoViewDto> {
-    var protoViewBuilder = new ProtoViewBuilder(null);
-    protoViewBuilder.setImperativeRendererId(rendererId);
-    return PromiseWrapper.resolve(protoViewBuilder.build());
-  }
-
-  compile(view:api.ViewDefinition):Promise<api.ProtoViewDto> {
-    // Note: compiler already uses a DirectDomProtoViewRef, so we don't
-    // need to do anything here
-    return this._compiler.compile(view);
-  }
-
-  mergeChildComponentProtoViews(protoViewRef:api.RenderProtoViewRef, protoViewRefs:List<api.RenderProtoViewRef>) {
-    _resolveProtoView(protoViewRef).mergeChildComponentProtoViews(
-      ListWrapper.map(protoViewRefs, _resolveProtoView)
-    );
-  }
-
   createViewInContainer(vcRef:api.RenderViewContainerRef, atIndex:number, protoViewRef:api.RenderProtoViewRef):List<api.RenderViewRef> {
     var view = this._viewFactory.getView(_resolveProtoView(protoViewRef));
     var vc = _resolveViewContainer(vcRef);

modules/angular2/src/test_lib/test_injector.js

@@ -39,7 +39,7 @@ import {AppViewPool, APP_VIEW_POOL_CAPACITY} from 'angular2/src/core/compiler/vi
 import {AppViewManager} from 'angular2/src/core/compiler/view_manager';
 import {AppViewManagerUtils} from 'angular2/src/core/compiler/view_manager_utils';
 import {ProtoViewFactory} from 'angular2/src/core/compiler/proto_view_factory';
-import {Renderer} from 'angular2/src/render/api';
+import {RenderCompiler, Renderer} from 'angular2/src/render/api';
 import {DirectDomRenderer} from 'angular2/src/render/dom/direct_dom_renderer';
 import * as rc from 'angular2/src/render/dom/compiler/compiler';
 import * as rvf from 'angular2/src/render/dom/view/view_factory';
@@ -82,7 +82,7 @@ function _getAppBindings() {
         [StyleUrlResolver, appDocumentToken]),
     bind(DirectDomRenderer).toClass(DirectDomRenderer),
     bind(Renderer).toClass(DirectDomRenderer),
-    bind(rc.Compiler).toClass(rc.DefaultCompiler),
+    bind(RenderCompiler).toClass(rc.DefaultDomCompiler),
     rvf.ViewFactory,
     rvh.RenderViewHydrator,
     bind(rvf.VIEW_POOL_CAPACITY).toValue(500),

modules/angular2/test/core/compiler/compiler_spec.js

@@ -33,23 +33,23 @@ import {ProtoViewFactory} from 'angular2/src/core/compiler/proto_view_factory';
 import {UrlResolver} from 'angular2/src/services/url_resolver';
 import * as renderApi from 'angular2/src/render/api';
 // TODO(tbosch): Spys don't support named modules...
-import {Renderer} from 'angular2/src/render/api';
+import {RenderCompiler} from 'angular2/src/render/api';
 
 export function main() {
   describe('compiler', function() {
-    var reader, tplResolver, renderer, protoViewFactory, cmpUrlMapper, renderCompileRequests;
+    var reader, tplResolver, renderCompiler, protoViewFactory, cmpUrlMapper, renderCompileRequests;
 
     beforeEach(() => {
       reader = new DirectiveMetadataReader();
       tplResolver = new FakeTemplateResolver();
       cmpUrlMapper = new RuntimeComponentUrlMapper();
-      renderer = new SpyRenderer();
+      renderCompiler = new SpyRenderCompiler();
     });
 
     function createCompiler(renderCompileResults:List, protoViewFactoryResults:List<AppProtoView>) {
       var urlResolver = new FakeUrlResolver();
       renderCompileRequests = [];
-      renderer.spy('compile').andCallFake( (template) => {
+      renderCompiler.spy('compile').andCallFake( (template) => {
         ListWrapper.push(renderCompileRequests, template);
         return PromiseWrapper.resolve(ListWrapper.removeAt(renderCompileResults, 0));
       });
@@ -61,7 +61,7 @@ export function main() {
         tplResolver,
         cmpUrlMapper,
         urlResolver,
-        renderer,
+        renderCompiler,
         protoViewFactory
       );
     }
@@ -368,7 +368,7 @@ export function main() {
     }));
 
     it('should create host proto views', inject([AsyncTestCompleter], (async) => {
-      renderer.spy('createHostProtoView').andCallFake( (componentId) => {
+      renderCompiler.spy('compileHost').andCallFake( (componentId) => {
         return PromiseWrapper.resolve(
           createRenderProtoView([createRenderComponentElementBinder(0)])
         );
@@ -392,7 +392,7 @@ export function main() {
     }));
 
     it('should create imperative proto views', inject([AsyncTestCompleter], (async) => {
-      renderer.spy('createImperativeComponentProtoView').andCallFake( (rendererId) => {
+      renderCompiler.spy('createImperativeComponentProtoView').andCallFake( (rendererId) => {
         return PromiseWrapper.resolve(
           createRenderProtoView([])
         );
@@ -405,7 +405,7 @@ export function main() {
       );
       compiler.compile(MainComponent).then( (protoViewRef) => {
         expect(internalProtoView(protoViewRef)).toBe(mainProtoView);
-        expect(renderer.spy('createImperativeComponentProtoView')).toHaveBeenCalledWith('some-renderer');
+        expect(renderCompiler.spy('createImperativeComponentProtoView')).toHaveBeenCalledWith('some-renderer');
         async.done();
       });
     }));
@@ -515,9 +515,9 @@ class DirectiveWithAttributes {
 }
 
 @proxy
-@IMPLEMENTS(Renderer)
-class SpyRenderer extends SpyObject {
-  constructor(){super(Renderer);}
+@IMPLEMENTS(RenderCompiler)
+class SpyRenderCompiler extends SpyObject {
+  constructor(){super(RenderCompiler);}
   noSuchMethod(m){return super.noSuchMethod(m)}
 }
 

modules/angular2/test/render/dom/compiler/compiler_common_tests.js

@@ -16,7 +16,7 @@ import {List, ListWrapper, Map, MapWrapper, StringMapWrapper} from 'angular2/src
 import {Type, isBlank, stringify, isPresent} from 'angular2/src/facade/lang';
 import {PromiseWrapper, Promise} from 'angular2/src/facade/async';
 
-import {Compiler, CompilerCache} from 'angular2/src/render/dom/compiler/compiler';
+import {DomCompiler} from 'angular2/src/render/dom/compiler/compiler';
 import {ProtoViewDto, ViewDefinition, DirectiveMetadata} from 'angular2/src/render/api';
 import {CompileElement} from 'angular2/src/render/dom/compiler/compile_element';
 import {CompileStep} from 'angular2/src/render/dom/compiler/compile_step'
@@ -27,7 +27,7 @@ import {TemplateLoader} from 'angular2/src/render/dom/compiler/template_loader';
 import {UrlResolver} from 'angular2/src/services/url_resolver';
 
 export function runCompilerCommonTests() {
-  describe('compiler', function() {
+  describe('DomCompiler', function() {
     var mockStepFactory;
 
     function createCompiler(processClosure, urlData = null) {
@@ -36,7 +36,7 @@ export function runCompilerCommonTests() {
       }
       var tplLoader =  new FakeTemplateLoader(urlData);
       mockStepFactory = new MockStepFactory([new MockStep(processClosure)]);
-      return new Compiler(mockStepFactory, tplLoader);
+      return new DomCompiler(mockStepFactory, tplLoader);
     }
 
     it('should run the steps and build the AppProtoView of the root element', inject([AsyncTestCompleter], (async) => {