refactor(proto_view_factory): expose data for generating change detectors

Also consolidates metadata handling in `ElementInjector`

BREAKING CHANGE:
- renames `DirectiveMetadataReader` into `DirectiveResolver`
  and removes `src/core/compiler/directive_metadata`.

Fixes angular#1712
Fixes angular#1713

Author: tbosch

modules/angular2/router.js

@@ -18,15 +18,15 @@ import {Router, RootRouter} from './src/router/router';
 import {RouteRegistry} from './src/router/route_registry';
 import {Pipeline} from './src/router/pipeline';
 import {Location} from './src/router/location';
-import {appComponentAnnotatedTypeToken} from './src/core/application_tokens';
+import {appComponentRefToken} from './src/core/application_tokens';
 import {bind} from './di';
 
 export var routerInjectables:List = [
   RouteRegistry,
   Pipeline,
   BrowserLocation,
   Location,
-  bind(Router).toFactory((registry, pipeline, location, meta) => {
-    return new RootRouter(registry, pipeline, location, meta.type);
-  }, [RouteRegistry, Pipeline, Location, appComponentAnnotatedTypeToken])
+  bind(Router).toFactory((registry, pipeline, location, app) => {
+    return new RootRouter(registry, pipeline, location, app.hostComponentType);
+  }, [RouteRegistry, Pipeline, Location, appComponentRefToken])
 ];

modules/angular2/src/change_detection/interfaces.ts

@@ -68,4 +68,4 @@ export class ChangeDetectorDefinition {
   constructor(public id: string, public strategy: string, public variableNames: List<string>,
               public bindingRecords: List<BindingRecord>,
               public directiveRecords: List<DirectiveRecord>) {}
-}
+}

modules/angular2/src/core/application.js

@@ -9,7 +9,7 @@ import {Parser, Lexer, ChangeDetection, DynamicChangeDetection, PipeRegistry, de
 import {ExceptionHandler} from './exception_handler';
 import {TemplateLoader} from 'angular2/src/render/dom/compiler/template_loader';
 import {TemplateResolver} from './compiler/template_resolver';
-import {DirectiveMetadataReader} from './compiler/directive_metadata_reader';
+import {DirectiveResolver} from './compiler/directive_resolver';
 import {List, ListWrapper} from 'angular2/src/facade/collection';
 import {Promise, PromiseWrapper} from 'angular2/src/facade/async';
 import {NgZone} from 'angular2/src/core/zone/ng_zone';
@@ -39,8 +39,7 @@ import {DefaultDomCompiler} from 'angular2/src/render/dom/compiler/compiler';
 import {internalView} from 'angular2/src/core/compiler/view_ref';
 
 import {
-  appComponentRefToken,
-  appComponentAnnotatedTypeToken
+  appComponentRefToken
 } from './application_tokens';
 
 var _rootInjector: Injector;
@@ -54,24 +53,22 @@ var _rootBindings = [
 function _injectorBindings(appComponentType): List<Binding> {
   return [
       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(appComponentRefToken).toAsyncFactory((dynamicComponentLoader, injector,
-        appComponentAnnotatedType, testability, registry) => {
+        metadataReader, testability, registry) => {
+
+        var annotation = metadataReader.resolve(appComponentType);
 
-        var selector = appComponentAnnotatedType.annotation.selector;
-        return dynamicComponentLoader.loadIntoNewLocation(appComponentAnnotatedType.type, null, selector, injector).then( (componentRef) => {
+        var selector = annotation.selector;
+        // TODO(rado): investigate whether to support bindings on root component.
+        return dynamicComponentLoader.loadIntoNewLocation(appComponentType, 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,
+      }, [DynamicComponentLoader, Injector, DirectiveResolver,
         Testability, TestabilityRegistry]),
 
       bind(appComponentType).toFactory((ref) => ref.instance,
@@ -109,7 +106,7 @@ function _injectorBindings(appComponentType): List<Binding> {
       bind(PipeRegistry).toValue(defaultPipeRegistry),
       bind(ChangeDetection).toClass(DynamicChangeDetection),
       TemplateLoader,
-      DirectiveMetadataReader,
+      DirectiveResolver,
       Parser,
       Lexer,
       ExceptionHandler,
@@ -262,7 +259,7 @@ export function bootstrap(appComponentType: Type,
         lc.registerWith(zone, appChangeDetector);
         lc.tick(); //the first tick that will bootstrap the app
 
-        bootstrapProcess.resolve(new ApplicationRef(componentRef, appInjector));
+        bootstrapProcess.resolve(new ApplicationRef(componentRef, appComponentType, appInjector));
       },
 
       (err) => {
@@ -276,9 +273,15 @@ export function bootstrap(appComponentType: Type,
 export class ApplicationRef {
   _hostComponent:ComponentRef;
   _injector:Injector;
-  constructor(hostComponent:ComponentRef, injector:Injector) {
+  _hostComponentType:Type;
+  constructor(hostComponent:ComponentRef, hostComponentType:Type, injector:Injector) {
     this._hostComponent = hostComponent;
     this._injector = injector;
+    this._hostComponentType = hostComponentType;
+  }
+
+  get hostComponentType() {
+    return this._hostComponentType;
   }
 
   get hostComponent() {

modules/angular2/src/core/application_tokens.js

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

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

@@ -4,9 +4,10 @@ import {Type, isBlank, isPresent, BaseException, normalizeBlank, stringify} from
 import {Promise, PromiseWrapper} from 'angular2/src/facade/async';
 import {List, ListWrapper, Map, MapWrapper} from 'angular2/src/facade/collection';
 
-import {DirectiveMetadataReader} from './directive_metadata_reader';
-import {Component, Directive} from '../annotations_impl/annotations';
+import {DirectiveResolver} from './directive_resolver';
+
 import {AppProtoView} from './view';
+import {ElementBinder} from './element_binder';
 import {ProtoViewRef} from './view_ref';
 import {DirectiveBinding} from './element_injector';
 import {TemplateResolver} from './template_resolver';
@@ -47,7 +48,7 @@ export class CompilerCache {
  */
 @Injectable()
 export class Compiler {
-  _reader: DirectiveMetadataReader;
+  _reader: DirectiveResolver;
   _compilerCache:CompilerCache;
   _compiling:Map<Type, Promise>;
   _templateResolver: TemplateResolver;
@@ -57,7 +58,7 @@ export class Compiler {
   _render: renderApi.RenderCompiler;
   _protoViewFactory:ProtoViewFactory;
 
-  constructor(reader: DirectiveMetadataReader,
+  constructor(reader: DirectiveResolver,
               cache:CompilerCache,
               templateResolver: TemplateResolver,
               componentUrlMapper: ComponentUrlMapper,
@@ -79,11 +80,11 @@ export class Compiler {
     if (directiveTypeOrBinding instanceof DirectiveBinding) {
       return directiveTypeOrBinding;
     } else if (directiveTypeOrBinding instanceof Binding) {
-      let meta = this._reader.read(directiveTypeOrBinding.token);
-      return DirectiveBinding.createFromBinding(directiveTypeOrBinding, meta.annotation);
+      let annotation = this._reader.resolve(directiveTypeOrBinding.token);
+      return DirectiveBinding.createFromBinding(directiveTypeOrBinding, annotation);
     } else {
-      let meta = this._reader.read(directiveTypeOrBinding);
-      return DirectiveBinding.createFromType(meta.type, meta.annotation);
+      let annotation = this._reader.resolve(directiveTypeOrBinding);
+      return DirectiveBinding.createFromType(directiveTypeOrBinding, annotation);
     }
   }
 
@@ -93,9 +94,9 @@ export class Compiler {
     var componentBinding = this._bindDirective(componentTypeOrBinding);
     this._assertTypeIsComponent(componentBinding);
 
-    var directiveMetadata = Compiler.buildRenderDirective(componentBinding);
+    var directiveMetadata = componentBinding.metadata;
     return this._render.compileHost(directiveMetadata).then( (hostRenderPv) => {
-      return this._compileNestedProtoViews(null, null, hostRenderPv, [componentBinding], true);
+      return this._compileNestedProtoViews(componentBinding, hostRenderPv, [componentBinding]);
     }).then( (appProtoView) => {
       return new ProtoViewRef(appProtoView);
     });
@@ -139,44 +140,39 @@ export class Compiler {
     );
     var renderTemplate = this._buildRenderTemplate(component, template, directives);
     pvPromise = this._render.compile(renderTemplate).then( (renderPv) => {
-      return this._compileNestedProtoViews(null, componentBinding, renderPv, directives, true);
+      return this._compileNestedProtoViews(componentBinding, renderPv, directives);
     });
 
     MapWrapper.set(this._compiling, component, pvPromise);
     return pvPromise;
   }
 
   // TODO(tbosch): union type return AppProtoView or Promise<AppProtoView>
-  _compileNestedProtoViews(parentProtoView, componentBinding, renderPv, directives, isComponentRootView) {
-    var nestedPVPromises = [];
-    var protoView = this._protoViewFactory.createProtoView(parentProtoView, componentBinding, renderPv, directives);
-    if (isComponentRootView && isPresent(componentBinding)) {
+  _compileNestedProtoViews(componentBinding, renderPv, directives) {
+    var protoViews = this._protoViewFactory.createAppProtoViews(componentBinding, renderPv, directives);
+    var protoView = protoViews[0];
+    // TODO(tbosch): we should be caching host protoViews as well!
+    // -> need a separate cache for this...
+    if (renderPv.type === renderApi.ProtoViewDto.COMPONENT_VIEW_TYPE && isPresent(componentBinding)) {
       // Populate the cache before compiling the nested components,
       // so that components can reference themselves in their template.
       var component = componentBinding.key.token;
       this._compilerCache.set(component, protoView);
       MapWrapper.delete(this._compiling, component);
     }
 
-    var binderIndex = 0;
-    ListWrapper.forEach(protoView.elementBinders, (elementBinder) => {
+    var nestedPVPromises = [];
+    ListWrapper.forEach(this._collectComponentElementBinders(protoViews), (elementBinder) => {
       var nestedComponent = elementBinder.componentDirective;
-      var nestedRenderProtoView = renderPv.elementBinders[binderIndex].nestedProtoView;
       var elementBinderDone = (nestedPv) => {
         elementBinder.nestedProtoView = nestedPv;
       };
-      var nestedCall = null;
-      if (isPresent(nestedComponent)) {
-        nestedCall = this._compile(nestedComponent);
-      } else if (isPresent(nestedRenderProtoView)) {
-        nestedCall = this._compileNestedProtoViews(protoView, componentBinding, nestedRenderProtoView, directives, false);
-      }
+      var nestedCall = this._compile(nestedComponent);
       if (PromiseWrapper.isPromise(nestedCall)) {
         ListWrapper.push(nestedPVPromises, nestedCall.then(elementBinderDone));
       } else if (isPresent(nestedCall)) {
         elementBinderDone(nestedCall);
       }
-      binderIndex++;
     });
 
     var protoViewDone = (_) => {
@@ -189,6 +185,18 @@ export class Compiler {
     }
   }
 
+  _collectComponentElementBinders(protoViews:List<AppProtoView>):List<ElementBinder> {
+    var componentElementBinders = [];
+    ListWrapper.forEach(protoViews, (protoView) => {
+      ListWrapper.forEach(protoView.elementBinders, (elementBinder) => {
+        if (isPresent(elementBinder.componentDirective)) {
+          ListWrapper.push(componentElementBinders, elementBinder);
+        }
+      });
+    });
+    return componentElementBinders;
+  }
+
   _buildRenderTemplate(component, view, directives): renderApi.ViewDefinition {
     var componentUrl = this._urlResolver.resolve(
         this._appUrl, this._componentUrlMapper.getUrl(component)
@@ -206,36 +214,7 @@ export class Compiler {
       componentId: stringify(component),
       absUrl: templateAbsUrl,
       template: view.template,
-      directives: ListWrapper.map(directives, Compiler.buildRenderDirective)
-    });
-  }
-
-  static buildRenderDirective(directiveBinding):renderApi.DirectiveMetadata {
-    var ann = directiveBinding.annotation;
-    var renderType;
-    var compileChildren = ann.compileChildren;
-    if (ann instanceof Component) {
-      renderType = renderApi.DirectiveMetadata.COMPONENT_TYPE;
-    } else {
-      renderType = renderApi.DirectiveMetadata.DIRECTIVE_TYPE;
-    }
-    var readAttributes = [];
-    ListWrapper.forEach(directiveBinding.dependencies, (dep) => {
-      if (isPresent(dep.attributeName)) {
-        ListWrapper.push(readAttributes, dep.attributeName);
-      }
-    });
-    return new renderApi.DirectiveMetadata({
-      id: stringify(directiveBinding.key.token),
-      type: renderType,
-      selector: ann.selector,
-      compileChildren: compileChildren,
-      hostListeners: isPresent(ann.hostListeners) ? MapWrapper.createFromStringMap(ann.hostListeners) : null,
-      hostProperties: isPresent(ann.hostProperties) ? MapWrapper.createFromStringMap(ann.hostProperties) : null,
-      hostAttributes: isPresent(ann.hostAttributes) ? MapWrapper.createFromStringMap(ann.hostAttributes) : null,
-      hostActions: isPresent(ann.hostActions) ? MapWrapper.createFromStringMap(ann.hostActions) : null,
-      properties: isPresent(ann.properties) ? MapWrapper.createFromStringMap(ann.properties) : null,
-      readAttributes: readAttributes
+      directives: ListWrapper.map(directives, directiveBinding => directiveBinding.metadata )
     });
   }
 
@@ -260,7 +239,7 @@ export class Compiler {
   }
 
   _assertTypeIsComponent(directiveBinding:DirectiveBinding):void {
-    if (!(directiveBinding.annotation instanceof Component)) {
+    if (directiveBinding.metadata.type !== renderApi.DirectiveMetadata.COMPONENT_TYPE) {
       throw new BaseException(`Could not load '${stringify(directiveBinding.key.token)}' because it is not a component.`);
     }
   }

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

@@ -1,24 +1,18 @@
-import {Injector} from 'angular2/di';
 import {Injectable} from 'angular2/src/di/annotations_impl';
 import {Type, isPresent, BaseException, stringify} from 'angular2/src/facade/lang';
-import {Directive, Component} from '../annotations_impl/annotations';
-import {DirectiveMetadata} from './directive_metadata';
+import {Directive} from '../annotations_impl/annotations';
 import {reflector} from 'angular2/src/reflection/reflection';
 
 @Injectable()
-export class DirectiveMetadataReader {
-  read(type:Type):DirectiveMetadata {
+export class DirectiveResolver {
+  resolve(type:Type):Directive {
     var annotations = reflector.annotations(type);
     if (isPresent(annotations)) {
       for (var i=0; i<annotations.length; i++) {
         var annotation = annotations[i];
 
         if (annotation instanceof Directive) {
-          var resolvedInjectables = null;
-          if (annotation instanceof Component && isPresent(annotation.injectables)) {
-            resolvedInjectables = Injector.resolve(annotation.injectables);
-          }
-          return new DirectiveMetadata(type, annotation, resolvedInjectables);
+          return annotation;
         }
       }
     }