refactor(views): clean up creating views in place and extract view_hydrator

Major changes:
- `compiler.compileRoot(el, type)`
  -> `compiler.compileInHost(type) + viewHydrator.hydrateHostViewInPlace(el, view)`
- move all `hydrate`/`dehydrate` methods out of `View` and `ViewContainer` into
  a standalone class `view_hydrator` as private methods and provide new public
  methods dedicated to the individual use cases.

Note: This PR does not change the current functionality, only moves it
into different places.

See design discussion in angular#1351, in preparation for imperative views.

Author: tbosch

modules/angular2/src/core/application.js

@@ -29,11 +29,13 @@ import {StyleInliner} from 'angular2/src/render/dom/shadow_dom/style_inliner';
 import {ComponentRef, DynamicComponentLoader} from 'angular2/src/core/compiler/dynamic_component_loader';
 import {TestabilityRegistry, Testability} from 'angular2/src/core/testability/testability';
 import {ViewFactory, VIEW_POOL_CAPACITY} from 'angular2/src/core/compiler/view_factory';
+import {AppViewHydrator} from 'angular2/src/core/compiler/view_hydrator';
 import {ProtoViewFactory} from 'angular2/src/core/compiler/proto_view_factory';
 import {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';
+import * as rvh from 'angular2/src/render/dom/view/view_hydrator';
 
 import {
   appComponentRefToken,
@@ -98,14 +100,16 @@ function _injectorBindings(appComponentType): List<Binding> {
         [rvf.VIEW_POOL_CAPACITY, EventManager, ShadowDomStrategy]
       ),
       bind(rvf.VIEW_POOL_CAPACITY).toValue(10000),
+      rvh.RenderViewHydrator,
       ProtoViewFactory,
       // TODO(tbosch): We need an explicit factory here, as
       // we are getting errors in dart2js with mirrors...
       bind(ViewFactory).toFactory(
-        (capacity) => new ViewFactory(capacity),
-        [VIEW_POOL_CAPACITY]
+        (capacity, renderer) => new ViewFactory(capacity, renderer),
+        [VIEW_POOL_CAPACITY, Renderer]
       ),
       bind(VIEW_POOL_CAPACITY).toValue(10000),
+      AppViewHydrator,
       Compiler,
       CompilerCache,
       TemplateResolver,

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

@@ -81,11 +81,11 @@ export class Compiler {
     return DirectiveBinding.createFromType(meta.type, meta.annotation);
   }
 
-  // Create a rootView as if the compiler encountered <rootcmp></rootcmp>.
+  // Create a hostView as if the compiler encountered <hostcmp></hostcmp>.
   // Used for bootstrapping.
-  compileRoot(elementOrSelector, componentTypeOrBinding:any):Promise<AppProtoView> {
-    return this._renderer.createRootProtoView(elementOrSelector, 'root').then( (rootRenderPv) => {
-      return this._compileNestedProtoViews(null, rootRenderPv, [this._bindDirective(componentTypeOrBinding)], true);
+  compileInHost(componentTypeOrBinding:any):Promise<AppProtoView> {
+    return this._renderer.createHostProtoView('host').then( (hostRenderPv) => {
+      return this._compileNestedProtoViews(null, hostRenderPv, [this._bindDirective(componentTypeOrBinding)], true);
     });
   }
 

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

@@ -2,12 +2,11 @@ import {Key, Injector, Injectable, ResolvedBinding} from 'angular2/di'
 import {Compiler} from './compiler';
 import {DirectiveMetadataReader} from './directive_metadata_reader';
 import {Type, BaseException, stringify, isPresent} from 'angular2/src/facade/lang';
-import {List} from 'angular2/src/facade/collection';
 import {Promise} from 'angular2/src/facade/async';
 import {Component} from 'angular2/src/core/annotations/annotations';
 import {ViewFactory} from 'angular2/src/core/compiler/view_factory';
-import {Renderer} from 'angular2/src/render/api';
-import {ElementRef} from './element_injector';
+import {AppViewHydrator} from 'angular2/src/core/compiler/view_hydrator';
+import {ElementRef, DirectiveBinding} from './element_injector';
 import {AppView} from './view';
 
 /**
@@ -43,13 +42,15 @@ export class ComponentRef {
 export class DynamicComponentLoader {
   _compiler:Compiler;
   _viewFactory:ViewFactory;
+  _viewHydrator:AppViewHydrator;
   _directiveMetadataReader:DirectiveMetadataReader;
 
   constructor(compiler:Compiler, directiveMetadataReader:DirectiveMetadataReader,
-              renderer:Renderer, viewFactory:ViewFactory) {
+              viewFactory:ViewFactory, viewHydrator:AppViewHydrator) {
     this._compiler = compiler;
     this._directiveMetadataReader = directiveMetadataReader;
-    this._viewFactory = viewFactory
+    this._viewFactory = viewFactory;
+    this._viewHydrator = viewHydrator;
   }
 
   /**
@@ -58,61 +59,44 @@ export class DynamicComponentLoader {
    */
   loadIntoExistingLocation(type:Type, location:ElementRef, injector:Injector = null):Promise<ComponentRef> {
     this._assertTypeIsComponent(type);
+    var annotation = this._directiveMetadataReader.read(type).annotation;
+    var componentBinding = DirectiveBinding.createFromType(type, annotation);
 
-    var directiveMetadata = this._directiveMetadataReader.read(type);
-
-    var inj = this._componentAppInjector(location, injector, directiveMetadata.resolvedInjectables);
-
-    var hostEi = location.elementInjector;
-    var hostView = location.hostView;
     return this._compiler.compile(type).then(componentProtoView => {
-      var component = hostEi.dynamicallyCreateComponent(type, directiveMetadata.annotation, inj);
-      var componentView = this._instantiateAndHydrateView(componentProtoView, injector, hostEi, component);
-
-      //TODO(vsavkin): do not use component child views as we need to clear the dynamically created views
-      //same problem exists on the render side
-      hostView.setDynamicComponentChildView(location.boundElementIndex, componentView);
+      var componentView = this._viewFactory.getView(componentProtoView);
+      var hostView = location.hostView;
+      this._viewHydrator.hydrateDynamicComponentView(
+        hostView, location.boundElementIndex, componentView, componentBinding, injector);
 
       // TODO(vsavkin): return a component ref that dehydrates the component view and removes it
       // from the component child views
-      return new ComponentRef(location, component, componentView);
+      // See ViewFactory.returnView
+      // See AppViewHydrator.dehydrateDynamicComponentView
+      return new ComponentRef(location, location.elementInjector.getDynamicallyLoadedComponent(), componentView);
     });
   }
 
   /**
    * Loads a component as a child of the View given by the provided ElementRef. The loaded
    * component receives injection normally as a hosted view.
-   *
-   * TODO(vsavkin, jelbourn): remove protoViewFactory after render layer exists.
    */
   loadIntoNewLocation(elementOrSelector:any, type:Type, location:ElementRef,
                       injector:Injector = null):Promise<ComponentRef> {
     this._assertTypeIsComponent(type);
 
-    var inj = this._componentAppInjector(location, injector, null);
-
-    //TODO(tbosch) this should always be a selector
-    return  this._compiler.compileRoot(elementOrSelector, type).then(pv => {
-      var hostView = this._instantiateAndHydrateView(pv, inj, null, new Object());
+    return  this._compiler.compileInHost(type).then(hostProtoView => {
+      var hostView = this._viewFactory.getView(hostProtoView);
+      this._viewHydrator.hydrateInPlaceHostView(null, elementOrSelector, hostView, injector);
 
       // TODO(vsavkin): return a component ref that dehydrates the host view
+      // See ViewFactory.returnView
+      // See AppViewHydrator.dehydrateInPlaceHostView
       var newLocation = new ElementRef(hostView.elementInjectors[0]);
       var component = hostView.elementInjectors[0].getComponent();
       return new ComponentRef(newLocation, component, hostView.componentChildViews[0]);
     });
   }
 
-  _componentAppInjector(location, injector:Injector, resolvedBindings:List<ResolvedBinding>) {
-    var inj = isPresent(injector) ? injector : location.injector;
-    return isPresent(resolvedBindings) ? inj.createChildFromResolved(resolvedBindings) : inj;
-  }
-
-  _instantiateAndHydrateView(protoView, injector, hostElementInjector, context) {
-    var componentView = this._viewFactory.getView(protoView);
-    componentView.hydrate(injector, hostElementInjector, context, null);
-    return componentView;
-  }
-
   /** Asserts that the type being dynamically instantiated is a Component. */
   _assertTypeIsComponent(type:Type) {
     var annotation = this._directiveMetadataReader.read(type).annotation;

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

@@ -575,9 +575,9 @@ export class ElementInjector extends TreeNode {
     if (isPresent(p._keyId9)) this._getDirectiveByKeyId(p._keyId9);
   }
 
-  dynamicallyCreateComponent(componentType:Type, annotation:Directive, injector:Injector) {
+  dynamicallyCreateComponent(directiveBinding, injector:Injector) {
     this._shadowDomAppInjector = injector;
-    this._dynamicallyCreatedComponentBinding = DirectiveBinding.createFromType(componentType, annotation);
+    this._dynamicallyCreatedComponentBinding = directiveBinding;
     this._dynamicallyCreatedComponent = this._new(this._dynamicallyCreatedComponentBinding);
     return this._dynamicallyCreatedComponent;
   }
@@ -708,7 +708,7 @@ export class ElementInjector extends TreeNode {
 
   _buildPropSetter(dep) {
     var view = this._getPreBuiltObjectByKeyId(StaticKeys.instance().viewId);
-    var renderer = view.proto.renderer;
+    var renderer = view.renderer;
     var index = this._proto.index;
     return function(v) {
       renderer.setElementProperty(view.render, index, dep.propSetterName, v);

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

@@ -13,11 +13,9 @@ import {ProtoElementInjector, DirectiveBinding} from './element_injector';
 @Injectable()
 export class ProtoViewFactory {
   _changeDetection:ChangeDetection;
-  _renderer:renderApi.Renderer;
 
-  constructor(changeDetection:ChangeDetection, renderer:renderApi.Renderer) {
+  constructor(changeDetection:ChangeDetection) {
     this._changeDetection = changeDetection;
-    this._renderer = renderer;
   }
 
   createProtoView(componentBinding:DirectiveBinding, renderProtoView: renderApi.ProtoViewDto, directives:List<DirectiveBinding>):AppProtoView {
@@ -30,7 +28,7 @@ export class ProtoViewFactory {
         'dummy', componentAnnotation.changeDetection
       );
     }
-    var protoView = new AppProtoView(this._renderer, renderProtoView.render, protoChangeDetector);
+    var protoView = new AppProtoView(renderProtoView.render, protoChangeDetector);
 
     for (var i=0; i<renderProtoView.elementBinders.length; i++) {
       var renderElementBinder = renderProtoView.elementBinders[i];