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) => {