refactor(shadow dom): do not use injectors nor directives

This prepares us for the app/render split in the compiler.

Author: yjbanov

modules/angular2/src/core/application.js

@@ -67,7 +67,7 @@ function _injectorBindings(appComponentType): List<Binding> {
           // the angular application. Thus the context and lightDomInjector are
           // empty.
           var view = appProtoView.instantiate(null, eventManager);
-          view.hydrate(injector, null, new Object());
+          view.hydrate(injector, null, null, new Object());
           return view;
         });
       }, [ChangeDetection, Compiler, Injector, appElementToken, appComponentAnnotatedTypeToken,

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

@@ -11,7 +11,6 @@ import {CompileElement} from './pipeline/compile_element';
 import {createDefaultSteps} from './pipeline/default_steps';
 import {TemplateLoader} from './template_loader';
 import {TemplateResolver} from './template_resolver';
-import {DirectiveMetadata} from './directive_metadata';
 import {Template} from '../annotations/template';
 import {ShadowDomStrategy} from './shadow_dom_strategy';
 import {CompileStep} from './pipeline/compile_step';
@@ -56,7 +55,6 @@ export class Compiler {
   _templateLoader:TemplateLoader;
   _compiling:Map<Type, Promise>;
   _shadowDomStrategy: ShadowDomStrategy;
-  _shadowDomDirectives: List<DirectiveMetadata>;
   _templateResolver: TemplateResolver;
   _componentUrlMapper: ComponentUrlMapper;
   _urlResolver: UrlResolver;
@@ -80,11 +78,6 @@ export class Compiler {
     this._templateLoader = templateLoader;
     this._compiling = MapWrapper.create();
     this._shadowDomStrategy = shadowDomStrategy;
-    this._shadowDomDirectives = [];
-    var types = shadowDomStrategy.polyfillDirectives();
-    for (var i = 0; i < types.length; i++) {
-      ListWrapper.push(this._shadowDomDirectives, reader.read(types[i]));
-    }
     this._templateResolver = templateResolver;
     this._componentUrlMapper = componentUrlMapper;
     this._urlResolver = urlResolver;
@@ -93,12 +86,8 @@ export class Compiler {
   }
 
   createSteps(component:Type, template: Template):List<CompileStep> {
-    // Merge directive metadata (from the template and from the shadow dom strategy)
-    var dirMetadata = [];
-    var tplMetadata = ListWrapper.map(this._flattenDirectives(template),
+    var dirMetadata = ListWrapper.map(this._flattenDirectives(template),
       (d) => this._reader.read(d));
-    dirMetadata = ListWrapper.concat(dirMetadata, tplMetadata);
-    dirMetadata = ListWrapper.concat(dirMetadata, this._shadowDomDirectives);
 
     var cmpMetadata = this._reader.read(component);
 

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

@@ -1,3 +1,4 @@
+import {int, isBlank, BaseException} from 'angular2/src/facade/lang';
 import {ProtoElementInjector} from './element_injector';
 import {DirectiveMetadata} from './directive_metadata';
 import {List, StringMap} from 'angular2/src/facade/collection';
@@ -11,12 +12,24 @@ export class ElementBinder {
   hasElementPropertyBindings:boolean;
   nestedProtoView: ProtoView;
   events:StringMap;
+  contentTagSelector:string;
+  parent:ElementBinder;
+  index:int;
+  distanceToParent:int;
   constructor(
+    index:int, parent:ElementBinder, distanceToParent: int, 
     protoElementInjector: ProtoElementInjector, componentDirective:DirectiveMetadata,
     viewportDirective:DirectiveMetadata) {
+    if (isBlank(index)) {
+      throw new BaseException('null index not allowed.');
+    }
+
     this.protoElementInjector = protoElementInjector;
     this.componentDirective = componentDirective;
     this.viewportDirective = viewportDirective;
+    this.parent = parent;
+    this.index = index;
+    this.distanceToParent = distanceToParent;
     // updated later when events are bound
     this.events = null;
     // updated later when text nodes are bound
@@ -25,5 +38,7 @@ export class ElementBinder {
     this.hasElementPropertyBindings = false;
     // updated later, so we are able to resolve cycles
     this.nestedProtoView = null;
+    // updated later in the compilation pipeline
+    this.contentTagSelector = null;
   }
 }

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

@@ -5,7 +5,6 @@ import {Injector, Key, Dependency, bind, Binding, NoProviderError, ProviderError
 import {Parent, Ancestor} from 'angular2/src/core/annotations/visibility';
 import {EventEmitter, PropertySetter} from 'angular2/src/core/annotations/di';
 import * as viewModule from 'angular2/src/core/compiler/view';
-import {LightDom, DestinationLightDom} from 'angular2/src/core/compiler/shadow_dom_emulation/light_dom';
 import {ViewContainer} from 'angular2/src/core/compiler/view_container';
 import {NgElement} from 'angular2/src/core/dom/element';
 import {Directive, onChange, onDestroy} from 'angular2/src/core/annotations/annotations'
@@ -24,17 +23,13 @@ class StaticKeys {
   viewId:number;
   ngElementId:number;
   viewContainerId:number;
-  destinationLightDomId:number;
-  lightDomId:number;
   bindingPropagationConfigId:number;
 
   constructor() {
     //TODO: vsavkin Key.annotate(Key.get(View), 'static')
     this.viewId = Key.get(viewModule.View).id;
     this.ngElementId = Key.get(NgElement).id;
     this.viewContainerId = Key.get(ViewContainer).id;
-    this.destinationLightDomId = Key.get(DestinationLightDom).id;
-    this.lightDomId = Key.get(LightDom).id;
     this.bindingPropagationConfigId = Key.get(BindingPropagationConfig).id;
   }
 
@@ -166,14 +161,12 @@ export class PreBuiltObjects {
   view:viewModule.View;
   element:NgElement;
   viewContainer:ViewContainer;
-  lightDom:LightDom;
   bindingPropagationConfig:BindingPropagationConfig;
-  constructor(view, element:NgElement, viewContainer:ViewContainer, lightDom:LightDom,
+  constructor(view, element:NgElement, viewContainer:ViewContainer,
               bindingPropagationConfig:BindingPropagationConfig) {
     this.view = view;
     this.element = element;
     this.viewContainer = viewContainer;
-    this.lightDom = lightDom;
     this.bindingPropagationConfig = bindingPropagationConfig;
   }
 }
@@ -577,13 +570,6 @@ export class ElementInjector extends TreeNode {
     if (keyId === staticKeys.ngElementId) return this._preBuiltObjects.element;
     if (keyId === staticKeys.viewContainerId) return this._preBuiltObjects.viewContainer;
     if (keyId === staticKeys.bindingPropagationConfigId) return this._preBuiltObjects.bindingPropagationConfig;
-    if (keyId === staticKeys.destinationLightDomId) {
-      var p:ElementInjector = this.directParent();
-      return isPresent(p) ? p._preBuiltObjects.lightDom : null;
-    }
-    if (keyId === staticKeys.lightDomId)   {
-      return this._preBuiltObjects.lightDom;
-    }
 
     //TODO add other objects as needed
     return _undefined;

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

@@ -36,10 +36,12 @@ export class CompileElement {
   inheritedProtoView:ProtoView;
   inheritedProtoElementInjector:ProtoElementInjector;
   inheritedElementBinder:ElementBinder;
-  distanceToParentInjector:number;
+  distanceToParentInjector:int;
+  distanceToParentBinder:int;
   compileChildren: boolean;
   ignoreBindings: boolean;
   elementDescription: string; // e.g. '<div [class]="foo">' : used to provide context in case of error
+  contentTagSelector: string;
 
   constructor(element, compilationUnit = '') {
     this.element = element;
@@ -65,9 +67,11 @@ export class CompileElement {
     // an own elementBinder
     this.inheritedElementBinder = null;
     this.distanceToParentInjector = 0;
+    this.distanceToParentBinder = 0;
     this.compileChildren = true;
     // set to true to ignore all the bindings on the element
     this.ignoreBindings = false;
+    this.contentTagSelector = null;
     // description is calculated here as compilation steps may change the element
     var tplDesc = assertionsEnabled()? getElementDescription(element) : null;
     if (compilationUnit !== '') {

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

@@ -1,6 +1,5 @@
 import {ChangeDetection, Parser} from 'angular2/change_detection';
 import {List, ListWrapper} from 'angular2/src/facade/collection';
-import {isPresent} from 'angular2/src/facade/lang';
 
 import {PropertyBindingParser} from './property_binding_parser';
 import {TextInterpolationParser} from './text_interpolation_parser';
@@ -32,6 +31,7 @@ export function createDefaultSteps(
   var steps = [
     new ViewSplitter(parser),
     cssProcessor.getCompileStep(compiledComponent, shadowDomStrategy, templateUrl),
+    shadowDomStrategy.getTemplateCompileStep(compiledComponent),
     new PropertyBindingParser(parser),
     new DirectiveParser(directives),
     new TextInterpolationParser(parser),
@@ -41,10 +41,5 @@ export function createDefaultSteps(
     new ElementBinderBuilder(parser),
   ];
 
-  var shadowDomStep = shadowDomStrategy.getTemplateCompileStep(compiledComponent);
-  if (isPresent(shadowDomStep)) {
-    ListWrapper.push(steps, shadowDomStep);
-  }
-
   return steps;
 }

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

@@ -49,7 +49,8 @@ export class DirectiveParser extends CompileStep {
     var classList = current.classList();
 
     var cssSelector = new CssSelector();
-    cssSelector.setElement(DOM.nodeName(current.element));
+    var nodeName = DOM.nodeName(current.element);
+    cssSelector.setElement(nodeName);
     for (var i=0; i < classList.length; i++) {
       cssSelector.addClassName(classList[i]);
     }

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

@@ -135,6 +135,11 @@ export class ElementBinderBuilder extends CompileStep {
 
   process(parent:CompileElement, current:CompileElement, control:CompileControl) {
     var elementBinder = null;
+    var parentElementBinder = null;
+    var distanceToParentBinder = this._getDistanceToParentBinder(parent, current);
+    if (isPresent(parent)) {
+      parentElementBinder = parent.inheritedElementBinder;
+    }
     if (current.hasBindings) {
       var protoView = current.inheritedProtoView;
       var protoInjectorWasBuilt = isBlank(parent) ? true :
@@ -143,8 +148,9 @@ export class ElementBinderBuilder extends CompileStep {
       var currentProtoElementInjector = protoInjectorWasBuilt ?
           current.inheritedProtoElementInjector : null;
 
-      elementBinder = protoView.bindElement(currentProtoElementInjector,
-        current.componentDirective, current.viewportDirective);
+      elementBinder = protoView.bindElement(parentElementBinder, distanceToParentBinder,
+          currentProtoElementInjector, current.componentDirective, current.viewportDirective);
+      current.distanceToParentBinder = 0;
 
       if (isPresent(current.textNodeBindings)) {
         this._bindTextNodes(protoView, current);
@@ -155,15 +161,23 @@ export class ElementBinderBuilder extends CompileStep {
       if (isPresent(current.eventBindings)) {
         this._bindEvents(protoView, current);
       }
+      if (isPresent(current.contentTagSelector)) {
+        elementBinder.contentTagSelector = current.contentTagSelector;
+      }
       var directives = current.getAllDirectives();
       this._bindDirectiveProperties(directives, current);
       this._bindDirectiveEvents(directives, current);
     } else if (isPresent(parent)) {
-      elementBinder = parent.inheritedElementBinder;
+      elementBinder = parentElementBinder;
+      current.distanceToParentBinder = distanceToParentBinder;
     }
     current.inheritedElementBinder = elementBinder;
   }
 
+  _getDistanceToParentBinder(parent, current) {
+    return isPresent(parent) ? parent.distanceToParentBinder + 1 : 0;
+  }
+
   _bindTextNodes(protoView, compileElement) {
     MapWrapper.forEach(compileElement.textNodeBindings, (expression, indexInParent) => {
       protoView.bindTextNode(indexInParent, expression);

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

@@ -37,7 +37,8 @@ export class ElementBindingMarker extends CompileStep {
       (isPresent(current.eventBindings) && MapWrapper.size(current.eventBindings)>0) ||
       (isPresent(current.decoratorDirectives) && current.decoratorDirectives.length > 0) ||
       isPresent(current.viewportDirective) ||
-      isPresent(current.componentDirective);
+      isPresent(current.componentDirective) || 
+      isPresent(current.contentTagSelector);
 
     if (hasBindings) {
       var element = current.element;

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

@@ -1,10 +1,7 @@
-import {Decorator} from '../../annotations/annotations';
 import * as ldModule from './light_dom';
-import {Inject} from 'angular2/di';
 import {DOM} from 'angular2/src/dom/dom_adapter';
 import {isPresent} from 'angular2/src/facade/lang';
 import {List, ListWrapper} from 'angular2/src/facade/collection';
-import {NgElement} from 'angular2/src/core/dom/element';
 
 class ContentStrategy {
   nodes:List;
@@ -17,23 +14,16 @@ class ContentStrategy {
  * and thus does not affect redistribution.
  */
 class RenderedContent extends ContentStrategy {
-  static _lazyScriptTemplate;
   beginScript;
   endScript;
 
   constructor(contentEl) {
     super();
-    this._replaceContentElementWithScriptTags(contentEl);
+    this.beginScript = contentEl;
+    this.endScript = DOM.nextSibling(this.beginScript);
     this.nodes = [];
   }
 
-  _scriptTemplate() {
-    if (!isPresent(RenderedContent._lazyScriptTemplate)) {
-      RenderedContent._lazyScriptTemplate = DOM.createScriptTag('type', 'ng/content');
-    }
-    return RenderedContent._lazyScriptTemplate;
-  }
-
   // Inserts the nodes in between the start and end scripts.
   // Previous content is removed.
   insert(nodes:List) {
@@ -42,16 +32,6 @@ class RenderedContent extends ContentStrategy {
     this._removeNodesUntil(ListWrapper.isEmpty(nodes) ? this.endScript : nodes[0]);
   }
 
-  // Replaces the content tag with a pair of script tags
-  _replaceContentElementWithScriptTags(contentEl) {
-    this.beginScript = DOM.clone(this._scriptTemplate());
-    this.endScript = DOM.clone(this._scriptTemplate());
-
-    DOM.insertBefore(contentEl, this.beginScript);
-    DOM.insertBefore(contentEl, this.endScript);
-    DOM.removeChild(DOM.parentElement(contentEl), contentEl);
-  }
-
   _removeNodesUntil(node) {
     var p = DOM.parentElement(this.beginScript);
     for (var next = DOM.nextSibling(this.beginScript);
@@ -83,18 +63,17 @@ class IntermediateContent extends ContentStrategy {
 }
 
 
-@Decorator({
-  selector: 'content'
-})
 export class Content {
   select:string;
   _strategy:ContentStrategy;
+  contentStartElement;
 
-  constructor(@Inject(ldModule.DestinationLightDom) destinationLightDom, contentEl:NgElement) {
-    this.select = contentEl.getAttribute('select');
+  constructor(destinationLightDom:ldModule.LightDom, contentStartEl, selector:string) {
+    this.select = selector;
+    this.contentStartElement = contentStartEl;
     this._strategy = isPresent(destinationLightDom) ?
       new IntermediateContent(destinationLightDom) :
-      new RenderedContent(contentEl.domElement);
+      new RenderedContent(contentStartEl);
   }
 
   nodes():List {