refactor(render): remove recursion from renderer

The goal is to make implementing a renderer straight forward.

BREAKING_CHANGE:

- Renderer interface was redone / simplified.
- `DirectDomRenderer` was replaced by `DomRenderer`.
- `DirectDomRenderer.setImperativeComponentRootNodes` is replaced
  by the following 2 steps:
    1. `ViewManager.getComponentView(elementRef) -> ViewRef`
    2. `DomRenderer.setComponentViewRootNodes(viewRef, rootNodes)`
- all `@View` annotations need to have a template, but the template
  may be empty. Previously views that had a `renderer` property did
  not have to have a `template`.
- `dynamicComponentLoader.loadIntoNewLocation` does no more allow
  to pass an element, but requires a css selector.
  Special syntax: `:document` can be used as prefix to search globally
  on the document instead of in the provided parent view.

Part of #1675

Author: tbosch

modules/angular2/angular2.js

@@ -5,4 +5,4 @@ export * from './directives';
 export * from './forms';
 export {Observable, EventEmitter} from 'angular2/src/facade/async';
 export * from 'angular2/src/render/api';
-export {DirectDomRenderer} from 'angular2/src/render/dom/direct_dom_renderer';
+export {DomRenderer, DOCUMENT_TOKEN} from 'angular2/src/render/dom/dom_renderer';

modules/angular2/src/core/application.js

@@ -33,17 +33,14 @@ 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, 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';
-import * as rvh from 'angular2/src/render/dom/view/view_hydrator';
+import {DomRenderer, DOCUMENT_TOKEN} from 'angular2/src/render/dom/dom_renderer';
+import {resolveInternalDomView} from 'angular2/src/render/dom/view/view';
+import {DefaultDomCompiler} from 'angular2/src/render/dom/compiler/compiler';
 import {internalView} from 'angular2/src/core/compiler/view_ref';
 
 import {
   appComponentRefToken,
-  appElementToken,
-  appComponentAnnotatedTypeToken,
-  appDocumentToken,
+  appComponentAnnotatedTypeToken
 } from './application_tokens';
 
 var _rootInjector: Injector;
@@ -56,28 +53,25 @@ var _rootBindings = [
 
 function _injectorBindings(appComponentType): List<Binding> {
   return [
-      bind(appDocumentToken).toValue(DOM.defaultDoc()),
+      bind(DOCUMENT_TOKEN).toValue(DOM.defaultDoc()),
       bind(appComponentAnnotatedTypeToken).toFactory((reader) => {
         // TODO(rado): investigate whether to support bindings on root component.
         return reader.read(appComponentType);
       }, [DirectiveMetadataReader]),
 
-      bind(appElementToken).toFactory((appComponentAnnotatedType, appDocument) => {
-        var selector = appComponentAnnotatedType.annotation.selector;
-        var element = DOM.querySelector(appDocument, selector);
-        if (isBlank(element)) {
-          throw new BaseException(`The app selector "${selector}" did not match any elements`);
-        }
-        return element;
-      }, [appComponentAnnotatedTypeToken, appDocumentToken]),
-      bind(appComponentRefToken).toAsyncFactory((dynamicComponentLoader, injector, appElement,
+      bind(appComponentRefToken).toAsyncFactory((dynamicComponentLoader, injector,
         appComponentAnnotatedType, testability, registry) => {
 
-        // We need to do this here to ensure that we create Testability and
-        // it's ready on the window for users.
-        registry.registerApplication(appElement, testability);
-        return dynamicComponentLoader.loadIntoNewLocation(appComponentAnnotatedType.type, null, appElement, injector);
-      }, [DynamicComponentLoader, Injector, appElementToken, appComponentAnnotatedTypeToken,
+        var selector = appComponentAnnotatedType.annotation.selector;
+        return dynamicComponentLoader.loadIntoNewLocation(appComponentAnnotatedType.type, null, selector, injector).then( (componentRef) => {
+          var domView = resolveInternalDomView(componentRef.hostView.render);
+          // We need to do this here to ensure that we create Testability and
+          // it's ready on the window for users.
+          registry.registerApplication(domView.boundElements[0], testability);
+
+          return componentRef;
+        });
+      }, [DynamicComponentLoader, Injector, appComponentAnnotatedTypeToken,
         Testability, TestabilityRegistry]),
 
       bind(appComponentType).toFactory((ref) => ref.instance,
@@ -89,18 +83,16 @@ function _injectorBindings(appComponentType): List<Binding> {
       }, [VmTurnZone]),
       bind(ShadowDomStrategy).toFactory(
           (styleUrlResolver, doc) => new EmulatedUnscopedShadowDomStrategy(styleUrlResolver, doc.head),
-          [StyleUrlResolver, appDocumentToken]),
-      DirectDomRenderer,
-      bind(Renderer).toClass(DirectDomRenderer),
-      bind(RenderCompiler).toClass(rc.DefaultDomCompiler),
+          [StyleUrlResolver, DOCUMENT_TOKEN]),
       // TODO(tbosch): We need an explicit factory here, as
       // we are getting errors in dart2js with mirrors...
-      bind(rvf.ViewFactory).toFactory(
-        (capacity, eventManager, shadowDomStrategy) => new rvf.ViewFactory(capacity, eventManager, shadowDomStrategy),
-        [rvf.VIEW_POOL_CAPACITY, EventManager, ShadowDomStrategy]
+      bind(DomRenderer).toFactory(
+          (eventManager, shadowDomStrategy, doc) => new DomRenderer(eventManager, shadowDomStrategy, doc),
+          [EventManager, ShadowDomStrategy, DOCUMENT_TOKEN]
       ),
-      bind(rvf.VIEW_POOL_CAPACITY).toValue(10000),
-      rvh.RenderViewHydrator,
+      DefaultDomCompiler,
+      bind(Renderer).toAlias(DomRenderer),
+      bind(RenderCompiler).toAlias(DefaultDomCompiler),
       ProtoViewFactory,
       // TODO(tbosch): We need an explicit factory here, as
       // we are getting errors in dart2js with mirrors...

modules/angular2/src/core/application_tokens.js

@@ -1,6 +1,4 @@
 import {OpaqueToken} from 'angular2/di';
 
 export var appComponentRefToken:OpaqueToken = new OpaqueToken('ComponentRef');
-export var appElementToken:OpaqueToken = new OpaqueToken('AppElement');
 export var appComponentAnnotatedTypeToken:OpaqueToken = new OpaqueToken('AppComponentAnnotatedType');
-export var appDocumentToken:OpaqueToken = new OpaqueToken('AppDocument');

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

@@ -133,21 +133,14 @@ export class Compiler {
     if (isBlank(template)) {
       return null;
     }
-    if (isPresent(template.renderer)) {
-      var directives = [];
-      pvPromise = this._render.createImperativeComponentProtoView(template.renderer).then( (renderPv) => {
-        return this._compileNestedProtoViews(null, componentBinding, renderPv, directives, true);
-      });
-    } else {
-      var directives = ListWrapper.map(
-        this._flattenDirectives(template),
-        (directive) => this._bindDirective(directive)
-      );
-      var renderTemplate = this._buildRenderTemplate(component, template, directives);
-      pvPromise = this._render.compile(renderTemplate).then( (renderPv) => {
-        return this._compileNestedProtoViews(null, componentBinding, renderPv, directives, true);
-      });
-    }
+    var directives = ListWrapper.map(
+      this._flattenDirectives(template),
+      (directive) => this._bindDirective(directive)
+    );
+    var renderTemplate = this._buildRenderTemplate(component, template, directives);
+    pvPromise = this._render.compile(renderTemplate).then( (renderPv) => {
+      return this._compileNestedProtoViews(null, componentBinding, renderPv, directives, true);
+    });
 
     MapWrapper.set(this._compiling, component, pvPromise);
     return pvPromise;
@@ -187,14 +180,6 @@ export class Compiler {
     });
 
     var protoViewDone = (_) => {
-      var childComponentRenderPvRefs = [];
-      ListWrapper.forEach(protoView.elementBinders, (eb) => {
-        if (isPresent(eb.componentDirective)) {
-          var componentPv = eb.nestedProtoView;
-          ListWrapper.push(childComponentRenderPvRefs, isPresent(componentPv) ? componentPv.render : null);
-        }
-      });
-      this._render.mergeChildComponentProtoViews(protoView.render, childComponentRenderPvRefs);
       return protoView;
     };
     if (nestedPVPromises.length > 0) {

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

@@ -62,14 +62,14 @@ export class DynamicComponentLoader {
   }
 
   /**
-   * Loads a component in the element specified by elementOrSelector. The loaded component receives
+   * Loads a component in the element specified by elementSelector. The loaded component receives
    * injection normally as a hosted view.
    */
-  loadIntoNewLocation(typeOrBinding, parentComponentLocation:ElementRef, elementOrSelector:any,
+  loadIntoNewLocation(typeOrBinding, parentComponentLocation:ElementRef, elementSelector:string,
                       injector:Injector = null):Promise<ComponentRef> {
     return  this._compiler.compileInHost(this._getBinding(typeOrBinding)).then(hostProtoViewRef => {
       var hostViewRef = this._viewManager.createInPlaceHostView(
-        parentComponentLocation, elementOrSelector, hostProtoViewRef, injector);
+        parentComponentLocation, elementSelector, hostProtoViewRef, injector);
       var newLocation = new ElementRef(hostViewRef, 0);
       var component = this._viewManager.getComponent(newLocation);
 

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

@@ -894,7 +894,7 @@ export class ElementInjector extends TreeNode {
 
   _getPreBuiltObjectByKeyId(keyId:int) {
     var staticKeys = StaticKeys.instance();
-    if (keyId === staticKeys.viewManagerId) return this._preBuiltObjects.viewManagerId;
+    if (keyId === staticKeys.viewManagerId) return this._preBuiltObjects.viewManager;
 
     //TODO add other objects as needed
     return _undefined;

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

@@ -1,7 +1,7 @@
 import {DOM} from 'angular2/src/dom/dom_adapter';
 import {normalizeBlank} from 'angular2/src/facade/lang';
 import {ViewRef} from './view_ref';
-import {DirectDomViewRef} from 'angular2/src/render/dom/direct_dom_renderer';
+import {resolveInternalDomView} from 'angular2/src/render/dom/view/view';
 
 /**
  * @exportedAs angular2/view
@@ -23,8 +23,7 @@ export class ElementRef {
   // We need a more general way to read/write to the DOM element
   // via a proper abstraction in the render layer
   get domElement() {
-    var renderViewRef:DirectDomViewRef = this.parentView.render;
-    return renderViewRef.delegate.boundElements[this.boundElementIndex];
+    return resolveInternalDomView(this.parentView.render).boundElements[this.boundElementIndex];
   }
 
   /**

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

@@ -32,7 +32,7 @@ export class AppView {
   componentChildViews: List<AppView>;
   /// Host views that were added by an imperative view.
   /// This is a dynamically growing / shrinking array.
-  imperativeHostViews: List<AppView>;
+  inPlaceHostViews: List<AppView>;
   viewContainers: List<AppViewContainer>;
   preBuiltObjects: List<PreBuiltObjects>;
   proto: AppProtoView;
@@ -64,7 +64,7 @@ export class AppView {
     this.context = null;
     this.locals = new Locals(null, MapWrapper.clone(protoLocals)); //TODO optimize this
     this.renderer = renderer;
-    this.imperativeHostViews = [];
+    this.inPlaceHostViews = [];
   }
 
   init(changeDetector:ChangeDetector, elementInjectors:List, rootElementInjectors:List,