refactor(core): introduce ViewRef and ProtoViewRef

BREAKING CHANGES:
- `NgElement` merged into `ElementRef`
- `Compiler.compile…` returns `ProtoViewRef`
- `ViewContainer` uses `ProtoViewRef`s and `ViewRef`s.
- `ViewRef`/`ProtoViewRef` in renderer were renamed to
  `RenderViewRef`/`RenderProtoViewRef`.

Related to angular#1477
Closes angular#1592

Author: tbosch

modules/angular2/core.js

@@ -21,9 +21,7 @@ export * from './src/render/dom/shadow_dom/native_shadow_dom_strategy';
 export * from './src/render/dom/shadow_dom/emulated_scoped_shadow_dom_strategy';
 export * from './src/render/dom/shadow_dom/emulated_unscoped_shadow_dom_strategy';
 export * from './src/core/compiler/dynamic_component_loader';
-export {ElementRef, ComponentRef} from './src/core/compiler/element_injector';
-export * from './src/core/compiler/view';
-export * from './src/core/compiler/view_container_ref';
-
-export * from './src/core/compiler/ng_element';
+export {ViewRef, ProtoViewRef} from './src/core/compiler/view_ref';
+export {ViewContainerRef} from './src/core/compiler/view_container_ref';
+export {ElementRef} from './src/core/compiler/element_ref';
 

modules/angular2/src/core/annotations/annotations.js

@@ -54,7 +54,7 @@ import {DEFAULT} from 'angular2/change_detection';
  * - `@Descendants query:Query<DirectiveType>`: A live collection of any child directives (will be implemented in later relaese).
  *
  * To inject element-specific special objects, declare the constructor parameter as:
- * - `element: NgElement` to obtain a DOM element (DEPRECATED: replacement coming)
+ * - `element: ElementRef` to obtain a reference to logical element in the view.
  * - `viewContainer: ViewContainerRef` to control child template instantiation, for {@link Viewport} directives only
  * - `bindingPropagation: BindingPropagation` to control change detection in a more granular way.
  *

modules/angular2/src/core/application.js

@@ -37,10 +37,10 @@ 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 {internalView} from 'angular2/src/core/compiler/view_ref';
 
 import {
   appComponentRefToken,
-  appChangeDetectorToken,
   appElementToken,
   appComponentAnnotatedTypeToken,
   appDocumentToken,
@@ -80,8 +80,6 @@ function _injectorBindings(appComponentType): List<Binding> {
       }, [DynamicComponentLoader, Injector, appElementToken, appComponentAnnotatedTypeToken,
         Testability, TestabilityRegistry]),
 
-      bind(appChangeDetectorToken).toFactory((ref) => ref.hostView.changeDetector,
-          [appComponentRefToken]),
       bind(appComponentType).toFactory((ref) => ref.instance,
           [appComponentRefToken]),
       bind(LifeCycle).toFactory((exceptionHandler) => new LifeCycle(exceptionHandler, null, assertionsEnabled()),[ExceptionHandler]),
@@ -253,7 +251,7 @@ function _createVmZone(givenReporter:Function): VmTurnZone {
  */
 export function bootstrap(appComponentType: Type,
                           componentInjectableBindings: List<Binding> = null,
-                          errorReporter: Function = null): Promise<ComponentRef> {
+                          errorReporter: Function = null): Promise<ApplicationRef> {
   BrowserDomAdapter.makeCurrent();
   var bootstrapProcess = PromiseWrapper.completer();
 
@@ -266,13 +264,13 @@ export function bootstrap(appComponentType: Type,
 
     PromiseWrapper.then(appInjector.asyncGet(appComponentRefToken),
       (componentRef) => {
-        var appChangeDetector = componentRef.hostView.changeDetector;
+        var appChangeDetector = internalView(componentRef.hostView).changeDetector;
         // retrieve life cycle: may have already been created if injected in root component
         var lc = appInjector.get(LifeCycle);
         lc.registerWith(zone, appChangeDetector);
         lc.tick(); //the first tick that will bootstrap the app
 
-        bootstrapProcess.resolve(componentRef);
+        bootstrapProcess.resolve(new ApplicationRef(componentRef, appInjector));
       },
 
       (err) => {
@@ -283,6 +281,28 @@ export function bootstrap(appComponentType: Type,
   return bootstrapProcess.promise;
 }
 
+export class ApplicationRef {
+  _hostComponent:ComponentRef;
+  _injector:Injector;
+  constructor(hostComponent:ComponentRef, injector:Injector) {
+    this._hostComponent = hostComponent;
+    this._injector = injector;
+  }
+
+  get hostComponent() {
+    return this._hostComponent.instance;
+  }
+
+  dispose() {
+    // TODO: We also need to clean up the Zone, ... here!
+    return this._hostComponent.dispose();
+  }
+
+  get injector() {
+    return this._injector;
+  }
+}
+
 function _createAppInjector(appComponentType: Type, bindings: List<Binding>, zone: VmTurnZone): Injector {
   if (isBlank(_rootInjector)) _rootInjector = Injector.resolveAndCreate(_rootBindings);
   var mergedBindings = isPresent(bindings) ?

modules/angular2/src/core/application_tokens.js

@@ -1,7 +1,6 @@
 import {OpaqueToken} from 'angular2/di';
 
 export var appComponentRefToken:OpaqueToken = new OpaqueToken('ComponentRef');
-export var appChangeDetectorToken:OpaqueToken = new OpaqueToken('AppChangeDetector');
 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

@@ -6,6 +6,7 @@ import {List, ListWrapper, Map, MapWrapper} from 'angular2/src/facade/collection
 import {DirectiveMetadataReader} from './directive_metadata_reader';
 import {Component, Viewport, DynamicComponent, Decorator} from '../annotations/annotations';
 import {AppProtoView} from './view';
+import {ProtoViewRef} from './view_ref';
 import {DirectiveBinding} from './element_injector';
 import {TemplateResolver} from './template_resolver';
 import {View} from '../annotations/view';
@@ -87,21 +88,26 @@ export class Compiler {
 
   // Create a hostView as if the compiler encountered <hostcmp></hostcmp>.
   // Used for bootstrapping.
-  compileInHost(componentTypeOrBinding:any):Promise<AppProtoView> {
+  compileInHost(componentTypeOrBinding:any):Promise<ProtoViewRef> {
     var componentBinding = this._bindDirective(componentTypeOrBinding);
     this._assertTypeIsComponent(componentBinding);
-    
+
     var directiveMetadata = Compiler.buildRenderDirective(componentBinding);
     return this._renderer.createHostProtoView(directiveMetadata).then( (hostRenderPv) => {
       return this._compileNestedProtoViews(null, hostRenderPv, [componentBinding], true);
+    }).then( (appProtoView) => {
+      return new ProtoViewRef(appProtoView);
     });
   }
 
-  compile(component: Type):Promise<AppProtoView> {
+  compile(component: Type):Promise<ProtoViewRef> {
     var componentBinding = this._bindDirective(component);
     this._assertTypeIsComponent(componentBinding);
     var protoView = this._compile(componentBinding);
-    return PromiseWrapper.isPromise(protoView) ? protoView : PromiseWrapper.resolve(protoView);
+    var pvPromise = PromiseWrapper.isPromise(protoView) ? protoView : PromiseWrapper.resolve(protoView);
+    return pvPromise.then( (appProtoView) => {
+      return new ProtoViewRef(appProtoView);
+    });
   }
 
   // TODO(vicb): union type return AppProtoView or Promise<AppProtoView>

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

@@ -2,32 +2,25 @@ import {Key, Injector, Injectable, ResolvedBinding, Binding, bind} from 'angular
 import {Compiler} from './compiler';
 import {Type, BaseException, stringify, isPresent} from 'angular2/src/facade/lang';
 import {Promise} from 'angular2/src/facade/async';
-import {AppViewManager} from 'angular2/src/core/compiler/view_manager';
-import {ElementRef} from './element_injector';
-import {AppView} from './view';
+import {AppViewManager, ComponentCreateResult} from 'angular2/src/core/compiler/view_manager';
+import {ElementRef} from './element_ref';
 
 /**
  * @exportedAs angular2/view
  */
 export class ComponentRef {
   location:ElementRef;
   instance:any;
-  componentView:AppView;
   _dispose:Function;
 
-  constructor(location:ElementRef, instance:any, componentView:AppView, dispose:Function){
+  constructor(location:ElementRef, instance:any, dispose:Function) {
     this.location = location;
     this.instance = instance;
-    this.componentView = componentView;
     this._dispose = dispose;
   }
 
-  get injector() {
-    return this.location.injector;
-  }
-
   get hostView() {
-    return this.location.hostView;
+    return this.location.parentView;
   }
 
   dispose() {
@@ -58,12 +51,12 @@ export class DynamicComponentLoader {
    */
   loadIntoExistingLocation(typeOrBinding, location:ElementRef, injector:Injector = null):Promise<ComponentRef> {
     var binding = this._getBinding(typeOrBinding);
-    return this._compiler.compile(binding.token).then(componentProtoView => {
-      var componentView = this._viewManager.createDynamicComponentView(
-        location, componentProtoView, binding, injector);
-
+    return this._compiler.compile(binding.token).then(componentProtoViewRef => {
+      this._viewManager.createDynamicComponentView(
+        location, componentProtoViewRef, binding, injector);
+      var component = this._viewManager.getComponent(location);
       var dispose = () => {throw new BaseException("Not implemented");};
-      return new ComponentRef(location, location.elementInjector.getDynamicallyLoadedComponent(), componentView, dispose);
+      return new ComponentRef(location, component, dispose);
     });
   }
 
@@ -73,16 +66,16 @@ export class DynamicComponentLoader {
    */
   loadIntoNewLocation(typeOrBinding, parentComponentLocation:ElementRef, elementOrSelector:any,
                       injector:Injector = null):Promise<ComponentRef> {
-    return  this._compiler.compileInHost(this._getBinding(typeOrBinding)).then(hostProtoView => {
-      var hostView = this._viewManager.createInPlaceHostView(
-        parentComponentLocation, elementOrSelector, hostProtoView, injector);
+    return  this._compiler.compileInHost(this._getBinding(typeOrBinding)).then(hostProtoViewRef => {
+      var hostViewRef = this._viewManager.createInPlaceHostView(
+        parentComponentLocation, elementOrSelector, hostProtoViewRef, injector);
+      var newLocation = new ElementRef(hostViewRef, 0);
+      var component = this._viewManager.getComponent(newLocation);
 
-      var newLocation = hostView.elementInjectors[0].getElementRef();
-      var component = hostView.elementInjectors[0].getComponent();
       var dispose = () => {
-        this._viewManager.destroyInPlaceHostView(parentComponentLocation, hostView);
+        this._viewManager.destroyInPlaceHostView(parentComponentLocation, hostViewRef);
       };
-      return new ComponentRef(newLocation, component, hostView.componentChildViews[0], dispose);
+      return new ComponentRef(newLocation, component, dispose);
     });
   }
 
@@ -92,16 +85,17 @@ export class DynamicComponentLoader {
    */
   loadNextToExistingLocation(typeOrBinding, location:ElementRef, injector:Injector = null):Promise<ComponentRef> {
     var binding = this._getBinding(typeOrBinding);
-    return this._compiler.compileInHost(binding).then(hostProtoView => {
-      var hostView = location.viewContainer.create(-1, hostProtoView, injector);
+    return this._compiler.compileInHost(binding).then(hostProtoViewRef => {
+      var viewContainer = this._viewManager.getViewContainer(location);
+      var hostViewRef = viewContainer.create(-1, hostProtoViewRef, injector);
+      var newLocation = new ElementRef(hostViewRef, 0);
+      var component = this._viewManager.getComponent(newLocation);
 
-      var newLocation = hostView.elementInjectors[0].getElementRef();
-      var component = hostView.elementInjectors[0].getComponent();
       var dispose = () => {
-        var index = location.viewContainer.indexOf(hostView);
-        location.viewContainer.remove(index);
+        var index = viewContainer.indexOf(hostViewRef);
+        viewContainer.remove(index);
       };
-      return new ComponentRef(newLocation, component, hostView.componentChildViews[0], dispose);
+      return new ComponentRef(newLocation, component, dispose);
     });
   }
 

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

@@ -6,10 +6,11 @@ import {Injector, Key, Dependency, bind, Binding, ResolvedBinding, NoBindingErro
   AbstractBindingError, CyclicDependencyError} from 'angular2/di';
 import {Parent, Ancestor} from 'angular2/src/core/annotations/visibility';
 import {Attribute, Query} from 'angular2/src/core/annotations/di';
-import * as viewModule from 'angular2/src/core/compiler/view';
+import * as viewModule from './view';
 import * as avmModule from './view_manager';
-import {ViewContainerRef} from 'angular2/src/core/compiler/view_container_ref';
-import {NgElement} from 'angular2/src/core/compiler/ng_element';
+import {ViewContainerRef} from './view_container_ref';
+import {ElementRef} from './element_ref';
+import {ProtoViewRef, ViewRef} from './view_ref';
 import {Directive, Component, onChange, onDestroy, onAllChangesDone} from 'angular2/src/core/annotations/annotations';
 import {ChangeDetector, ChangeDetectorRef} from 'angular2/change_detection';
 import {QueryList} from './query_list';
@@ -23,40 +24,17 @@ var _undefined = new Object();
 
 var _staticKeys;
 
-/**
- * @exportedAs angular2/view
- */
-export class ElementRef {
-  hostView:viewModule.AppView;
-  boundElementIndex:number;
-  injector:Injector;
-  elementInjector:ElementInjector;
-  viewContainer:ViewContainerRef;
-
-  constructor(elementInjector, hostView, boundElementIndex, injector, viewManager, defaultProtoView){
-    this.elementInjector = elementInjector;
-    this.hostView = hostView;
-    this.boundElementIndex = boundElementIndex;
-    this.injector = injector;
-    this.viewContainer = new ViewContainerRef(viewManager, this, defaultProtoView);
-  }
-}
-
 class StaticKeys {
   viewManagerId:number;
-  viewId:number;
-  ngElementId:number;
-  defaultProtoViewId:number;
+  protoViewId:number;
   viewContainerId:number;
   changeDetectorRefId:number;
   elementRefId:number;
 
   constructor() {
     //TODO: vsavkin Key.annotate(Key.get(AppView), 'static')
     this.viewManagerId = Key.get(avmModule.AppViewManager).id;
-    this.defaultProtoViewId = Key.get(viewModule.AppProtoView).id;
-    this.viewId = Key.get(viewModule.AppView).id;
-    this.ngElementId = Key.get(NgElement).id;
+    this.protoViewId = Key.get(ProtoViewRef).id;
     this.viewContainerId = Key.get(ViewContainerRef).id;
     this.changeDetectorRefId = Key.get(ChangeDetectorRef).id;
     this.elementRefId = Key.get(ElementRef).id;
@@ -294,14 +272,12 @@ export class DirectiveBinding extends ResolvedBinding {
 // TODO(rado): benchmark and consider rolling in as ElementInjector fields.
 export class PreBuiltObjects {
   viewManager:avmModule.AppViewManager;
-  defaultProtoView:viewModule.AppProtoView;
+  protoView:viewModule.AppProtoView;
   view:viewModule.AppView;
-  element:NgElement;
-  constructor(viewManager:avmModule.AppViewManager, view:viewModule.AppView, element:NgElement, defaultProtoView:viewModule.AppProtoView) {
+  constructor(viewManager:avmModule.AppViewManager, view:viewModule.AppView, protoView:viewModule.AppProtoView) {
     this.viewManager = viewManager;
     this.view = view;
-    this.defaultProtoView = defaultProtoView;
-    this.element = element;
+    this.protoView = protoView;
   }
 }
 
@@ -649,11 +625,6 @@ export class ElementInjector extends TreeNode {
     return this._proto.eventEmitterAccessors;
   }
 
-  /** Gets the NgElement associated with this ElementInjector */
-  getNgElement() {
-    return this._preBuiltObjects.element;
-  }
-
   getComponent() {
     if (this._proto._binding0IsComponent) {
       return this._obj0;
@@ -663,8 +634,11 @@ export class ElementInjector extends TreeNode {
   }
 
   getElementRef() {
-    return new ElementRef(this, this._preBuiltObjects.view, this._proto.index, this._lightDomAppInjector,
-        this._preBuiltObjects.viewManager, this._preBuiltObjects.defaultProtoView);
+    return new ElementRef(new ViewRef(this._preBuiltObjects.view), this._proto.index);
+  }
+
+  getViewContainerRef() {
+    return new ViewContainerRef(this._preBuiltObjects.viewManager, this.getElementRef(), new ProtoViewRef(this._preBuiltObjects.protoView));
   }
 
   getDynamicallyLoadedComponent() {
@@ -742,7 +716,10 @@ export class ElementInjector extends TreeNode {
       return this.getElementRef();
     }
     if (dep.key.id === StaticKeys.instance().viewContainerId) {
-      return this.getElementRef().viewContainer;
+      return this.getViewContainerRef();
+    }
+    if (dep.key.id === StaticKeys.instance().protoViewId) {
+      return new ProtoViewRef(this._preBuiltObjects.protoView);
     }
     return this._getByKey(dep.key, dep.depth, dep.optional, requestor);
   }
@@ -914,11 +891,7 @@ export class ElementInjector extends TreeNode {
 
   _getPreBuiltObjectByKeyId(keyId:int) {
     var staticKeys = StaticKeys.instance();
-    // TODO: AppView should not be injectable. Remove it.
     if (keyId === staticKeys.viewManagerId) return this._preBuiltObjects.viewManagerId;
-    if (keyId === staticKeys.viewId) return this._preBuiltObjects.view;
-    if (keyId === staticKeys.ngElementId) return this._preBuiltObjects.element;
-    if (keyId === staticKeys.defaultProtoViewId) return this._preBuiltObjects.defaultProtoView;
 
     //TODO add other objects as needed
     return _undefined;