feat(viewPort): adds initial implementation of ViewPort.

ViewPort is the mechanism backing @template directives. Those directives can use the viewport to dynamically create, attach and detach views.

Author: rkirov

modules/core/src/compiler/element_injector.js

@@ -4,6 +4,7 @@ import {List, ListWrapper} from 'facade/collection';
 import {Injector, Key, Dependency, bind, Binding, NoProviderError, ProviderError, CyclicDependencyError} from 'di/di';
 import {Parent, Ancestor} from 'core/annotations/visibility';
 import {View} from 'core/compiler/view';
+import {ViewPort} from 'core/compiler/viewport';
 import {NgElement} from 'core/dom/element';
 
 var _MAX_DIRECTIVE_CONSTRUCTION_COUNTER = 10;
@@ -17,10 +18,12 @@ var _staticKeys;
 class StaticKeys {
  viewId:int;
  ngElementId:int;
+ viewPortId:int;
  constructor() {
  //TODO: vsavkin Key.annotate(Key.get(View), 'static')
  this.viewId = Key.get(View).id;
  this.ngElementId = Key.get(NgElement).id;
+ this.viewPortId = Key.get(ViewPort).id;
  }
 
  static instance() {
@@ -61,6 +64,10 @@ class TreeNode {
  return this._parent;
  }
 
+ set parent(node:TreeNode) {
+ this._parent = node;
+ }
+
  get children() {
  var res = [];
  var child = this._head;
@@ -92,12 +99,16 @@ class DirectiveDependency extends Dependency {
  }
 }
 
+
+// TODO(rado): benchmark and consider rolling in as ElementInjector fields.
 export class PreBuiltObjects {
  view:View;
  element:NgElement;
- constructor(view:View, element:NgElement) {
+ viewPort:ViewPort;
+ constructor(view, element:NgElement, viewPort: ViewPort) {
  this.view = view;
  this.element = element;
+ this.viewPort = viewPort;
  }
 }
 
@@ -410,6 +421,11 @@ export class ElementInjector extends TreeNode {
  var staticKeys = StaticKeys.instance();
  if (keyId === staticKeys.viewId) return this._preBuiltObjects.view;
  if (keyId === staticKeys.ngElementId) return this._preBuiltObjects.element;
+ if (keyId === staticKeys.viewPortId) {
+ if (isBlank(staticKeys.viewPortId)) throw new BaseException(
+ 'ViewPort is constructed only for @Template directives');
+ return this._preBuiltObjects.viewPort;
+ }
  //TODO add other objects as needed
  return _undefined;
  }

modules/core/src/compiler/view.js

@@ -11,10 +11,11 @@ import {SetterFn} from 'reflection/types';
 import {FIELD, IMPLEMENTS, int, isPresent, isBlank} from 'facade/lang';
 import {Injector} from 'di/di';
 import {NgElement} from 'core/dom/element';
+import {ViewPort} from './viewport';
 
 const NG_BINDING_CLASS = 'ng-binding';
 
-/***
+/**
  * Const of making objects: http://jsperf.com/instantiate-size-of-object
  */
 @IMPLEMENTS(WatchGroupDispatcher)
@@ -29,7 +30,8 @@ export class View {
  /// to keep track of the nodes.
  nodes:List<Node>;
  onChangeDispatcher:OnChangeDispatcher;
- childViews: List<View>;
+ componentChildViews: List<View>;
+ viewPorts: List<ViewPort>;
  constructor(nodes:List<Node>, elementInjectors:List,
  rootElementInjectors:List, textNodes:List, bindElements:List,
  protoRecordRange:ProtoRecordRange, context) {
@@ -41,9 +43,8 @@ export class View {
  this.bindElements = bindElements;
  this.recordRange = protoRecordRange.instantiate(this, MapWrapper.create());
  this.recordRange.setContext(context);
- // TODO(rado): Since this is only used in tests for now, investigate whether
- // we can remove it.
- this.childViews = [];
+ this.componentChildViews = null;
+ this.viewPorts = null;
  }
 
  onRecordChange(record:Record, target) {
@@ -62,10 +63,24 @@ export class View {
  }
  }
 
- addChild(childView: View) {
- ListWrapper.push(this.childViews, childView);
+ addViewPort(viewPort: ViewPort) {
+ if (isBlank(this.viewPorts)) this.viewPorts = [];
+ ListWrapper.push(this.viewPorts, viewPort);
+ }
+
+ addComponentChildView(childView: View) {
+ if (isBlank(this.componentChildViews)) this.componentChildViews = [];
+ ListWrapper.push(this.componentChildViews, childView);
+ this.recordRange.addRange(childView.recordRange);
+ }
+
+ addViewPortChildView(childView: View) {
  this.recordRange.addRange(childView.recordRange);
  }
+
+ removeViewPortChildView(childView: View) {
+ childView.recordRange.remove();
+ }
 }
 
 export class ProtoView {
@@ -120,9 +135,10 @@ export class ProtoView {
  bindElements, this.protoRecordRange, context);
 
  ProtoView._instantiateDirectives(
- view, elements, elementInjectors, lightDomAppInjector, shadowAppInjectors);
- ProtoView._instantiateChildComponentViews(
- elements, binders, elementInjectors, shadowAppInjectors, view);
+ view, elements, binders, elementInjectors, lightDomAppInjector,
+ shadowAppInjectors, hostElementInjector);
+ ProtoView._instantiateChildComponentViews(view, elements, binders,
+ elementInjectors, shadowAppInjectors);
 
  return view;
  }
@@ -212,12 +228,25 @@ export class ProtoView {
  }
 
  static _instantiateDirectives(
- view: View, elements:List, injectors:List<ElementInjectors>, lightDomAppInjector: Injector,
- shadowDomAppInjectors:List<Injectors>) {
+ view, elements:List, binders: List<ElementBinder>, injectors:List<ElementInjectors>,
+ lightDomAppInjector: Injector, shadowDomAppInjectors:List<Injectors>,
+ hostElementInjector: ElementInjector) {
  for (var i = 0; i < injectors.length; ++i) {
- var preBuiltObjs = new PreBuiltObjects(view, new NgElement(elements[i]));
- if (injectors[i] != null) injectors[i].instantiateDirectives(
+ var injector = injectors[i];
+ if (injector != null) {
+ var binder = binders[i];
+ var element = elements[i];
+ var ngElement = new NgElement(element);
+ var viewPort = null;
+ if (isPresent(binder.templateDirective)) {
+ viewPort = new ViewPort(view, element, binder.nestedProtoView, injector);
+ viewPort.attach(lightDomAppInjector, hostElementInjector);
+ view.addViewPort(viewPort);
+ }
+ var preBuiltObjs = new PreBuiltObjects(view, ngElement, viewPort);
+ injector.instantiateDirectives(
  lightDomAppInjector, shadowDomAppInjectors[i], preBuiltObjs);
+ }
  }
  }
 
@@ -252,20 +281,17 @@ export class ProtoView {
  }
  }
 
- static _instantiateChildComponentViews(elements, binders, injectors,
- shadowDomAppInjectors: List<Injector>, view: View) {
+ static _instantiateChildComponentViews(view: View, elements, binders,
+ injectors, shadowDomAppInjectors: List<Injector>) {
  for (var i = 0; i < binders.length; ++i) {
  var binder = binders[i];
  if (isPresent(binder.componentDirective)) {
  var injector = injectors[i];
  var childView = binder.nestedProtoView.instantiate(
  injector.getComponent(), shadowDomAppInjectors[i], injector);
- view.addChild(childView);
+ view.addComponentChildView(childView);
  var shadowRoot = elements[i].createShadowRoot();
- // TODO(rado): reuse utility from ViewPort/View.
- for (var j = 0; j < childView.nodes.length; ++j) {
- DOM.appendChild(shadowRoot, childView.nodes[j]);
- }
+ ViewPort.moveViewNodesIntoParent(shadowRoot, childView);
  }
  }
  }

modules/core/src/compiler/viewport.js

@@ -0,0 +1,119 @@
+import {View, ProtoView} from './view';
+import {DOM, Node, Element} from 'facade/dom';
+import {ListWrapper, MapWrapper, List} from 'facade/collection';
+import {BaseException} from 'facade/lang';
+import {Injector} from 'di/di';
+import {ElementInjector} from 'core/compiler/element_injector';
+import {isPresent, isBlank} from 'facade/lang';
+
+export class ViewPort {
+ parentView: View;
+ templateElement: Element;
+ defaultProtoView: ProtoView;
+ _views: List<View>;
+ _viewLastNode: List<Node>;
+ elementInjector: ElementInjector;
+ appInjector: Injector;
+ hostElementInjector: ElementInjector;
+
+ constructor(parentView: View, templateElement: Element, defaultProtoView: ProtoView,
+ elementInjector: ElementInjector) {
+ this.parentView = parentView;
+ this.templateElement = templateElement;
+ this.defaultProtoView = defaultProtoView;
+ this.elementInjector = elementInjector;
+
+ // The order in this list matches the DOM order.
+ this._views = [];
+ this.appInjector = null;
+ this.hostElementInjector = null;
+ }
+
+ attach(appInjector: Injector, hostElementInjector: ElementInjector) {
+ this.appInjector = appInjector;
+ this.hostElementInjector = hostElementInjector;
+ }
+
+ detach() {
+ this.appInjector = null;
+ this.hostElementInjector = null;
+ }
+
+ get(index: number): View {
+ return this._views[index];
+ }
+
+ get length() {
+ return this._views.length;
+ }
+
+ _siblingToInsertAfter(index: number) {
+ if (index == 0) return this.templateElement;
+ return ListWrapper.last(this._views[index - 1].nodes);
+ }
+
+ get detached() {
+ return isBlank(this.appInjector);
+ }
+
+ // TODO(rado): profile and decide whether bounds checks should be added
+ // to the methods below.
+ create(atIndex=-1): View {
+ if (this.detached) throw new BaseException(
+ 'Cannot create views on a detached view port');
+ // TODO(rado): replace curried defaultProtoView.instantiate(appInjector,
+ // hostElementInjector) with ViewFactory.
+ var newView = this.defaultProtoView.instantiate(
+ null, this.appInjector, this.hostElementInjector);
+ return this.insert(newView, atIndex);
+ }
+
+ insert(view, atIndex=-1): View {
+ if (atIndex == -1) atIndex = this._views.length;
+ ListWrapper.insert(this._views, atIndex, view);
+ ViewPort.moveViewNodesAfterSibling(this._siblingToInsertAfter(atIndex), view);
+ this.parentView.addViewPortChildView(view);
+ this._linkElementInjectors(view);
+ return view;
+ }
+
+ remove(atIndex=-1): View {
+ if (atIndex == -1) atIndex = this._views.length - 1;
+ var removedView = this.get(atIndex);
+ ListWrapper.removeAt(this._views, atIndex);
+ ViewPort.removeViewNodesFromParent(this.templateElement.parentNode, removedView);
+ this.parentView.removeViewPortChildView(removedView);
+ this._unlinkElementInjectors(removedView);
+ return removedView;
+ }
+
+ _linkElementInjectors(view) {
+ for (var i = 0; i < view.rootElementInjectors.length; ++i) {
+ view.rootElementInjectors[i].parent = this.elementInjector;
+ }
+ }
+
+ _unlinkElementInjectors(view) {
+ for (var i = 0; i < view.rootElementInjectors.length; ++i) {
+ view.rootElementInjectors[i].parent = null;
+ }
+ }
+
+ static moveViewNodesIntoParent(parent, view) {
+ for (var i = 0; i < view.nodes.length; ++i) {
+ DOM.appendChild(parent, view.nodes[i]);
+ }
+ }
+
+ static moveViewNodesAfterSibling(sibling, view) {
+ for (var i = view.nodes.length - 1; i >= 0; --i) {
+ DOM.insertAfter(sibling, view.nodes[i]);
+ }
+ }
+
+ static removeViewNodesFromParent(parent, view) {
+ for (var i = view.nodes.length - 1; i >= 0; --i) {
+ DOM.removeChild(parent, view.nodes[i]);
+ }
+ }
+}

modules/core/test/compiler/element_injector_spec.js

@@ -6,6 +6,7 @@ import {Parent, Ancestor} from 'core/annotations/visibility';
 import {Injector, Inject, bind} from 'di/di';
 import {View} from 'core/compiler/view';
 import {ProtoRecordRange} from 'change_detection/record_range';
+import {ViewPort} from 'core/compiler/viewport';
 import {NgElement} from 'core/dom/element';
 
 //TODO: vsavkin: use a spy object
@@ -66,7 +67,7 @@ class NeedsView {
 }
 
 export function main() {
- var defaultPreBuiltObjects = new PreBuiltObjects(null, null);
+ var defaultPreBuiltObjects = new PreBuiltObjects(null, null, null);
 
  function humanize(tree, names:List) {
  var lookupName = (item) =>
@@ -177,7 +178,7 @@ export function main() {
 
  it("should instantiate directives that depend on pre built objects", function () {
  var view = new DummyView();
- var inj = injector([NeedsView], null, null, new PreBuiltObjects(view, null));
+ var inj = injector([NeedsView], null, null, new PreBuiltObjects(view, null, null));
 
  expect(inj.get(NeedsView).view).toBe(view);
  });
@@ -282,17 +283,24 @@ export function main() {
  describe("pre built objects", function () {
  it("should return view", function () {
  var view = new DummyView();
- var inj = injector([], null, null, new PreBuiltObjects(view, null));
+ var inj = injector([], null, null, new PreBuiltObjects(view, null, null));
 
  expect(inj.get(View)).toEqual(view);
  });
 
  it("should return element", function () {
  var element = new NgElement(null);
- var inj = injector([], null, null, new PreBuiltObjects(null, element));
+ var inj = injector([], null, null, new PreBuiltObjects(null, element, null));
 
  expect(inj.get(NgElement)).toEqual(element);
  });
+
+ it('should return viewPort', function () {
+ var viewPort = new ViewPort(null, null, null, null);
+ var inj = injector([], null, null, new PreBuiltObjects(null, null, viewPort));
+
+ expect(inj.get(ViewPort)).toEqual(viewPort);
+ });
  });
  });
 }