feat(emuldated_shadow_dom): implement intermediate content tags

Author: vsavkin

modules/core/src/compiler/element_injector.js

@@ -325,6 +325,10 @@ export class ElementInjector extends TreeNode {
  return pb !== _undefined && isPresent(pb);
  }
 
+ forElement(el):boolean {
+ return this._preBuiltObjects.element.domElement === el;
+ }
+
  getComponent() {
  if (this._proto._binding0IsComponent) {
  return this._obj0;

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

@@ -2,50 +2,98 @@ import {Decorator} from '../../annotations/annotations';
 import {SourceLightDom, DestinationLightDom, LightDom} from './light_dom';
 import {Inject} from 'di/di';
 import {Element, Node, DOM} from 'facade/dom';
+import {isPresent} from 'facade/lang';
 import {List, ListWrapper} from 'facade/collection';
 import {NgElement} from 'core/dom/element';
 
 var _scriptTemplate = DOM.createScriptTag('type', 'ng/content')
 
-@Decorator({
- selector: 'content'
-})
-export class Content {
- _destinationLightDom:LightDom;
-
- _beginScript:Element;
- _endScript:Element;
-
- select:string;
-
- constructor(@Inject(DestinationLightDom) destinationLightDom, contentEl:NgElement) {
- this._destinationLightDom = destinationLightDom;
+class ContentStrategy {
+ nodes;
+ insert(nodes:List<Nodes>){}
+}
 
- this.select = contentEl.getAttribute('select');
+/**
+ * An implementation of the content tag that is used by transcluding components.
+ * It is used when the content tag is not a direct child of another component,
+ * and thus does not affect redistribution.
+ */
+class RenderedContent extends ContentStrategy {
+ beginScript:Element;
+ endScript:Element;
+ nodes:List<Node>;
 
- this._replaceContentElementWithScriptTags(contentEl.domElement);
+ constructor(el:Element) {
+ this._replaceContentElementWithScriptTags(el);
+ this.nodes = [];
  }
 
  insert(nodes:List<Node>) {
- DOM.insertAllBefore(this._endScript, nodes);
- this._removeNodesUntil(ListWrapper.isEmpty(nodes) ? this._endScript : nodes[0]);
+ this.nodes = nodes;
+ DOM.insertAllBefore(this.endScript, nodes);
+ this._removeNodesUntil(ListWrapper.isEmpty(nodes) ? this.endScript : nodes[0]);
  }
 
  _replaceContentElementWithScriptTags(contentEl:Element) {
- this._beginScript = DOM.clone(_scriptTemplate);
- this._endScript = DOM.clone(_scriptTemplate);
+ this.beginScript = DOM.clone(_scriptTemplate);
+ this.endScript = DOM.clone(_scriptTemplate);
 
- DOM.insertBefore(contentEl, this._beginScript);
- DOM.insertBefore(contentEl, this._endScript);
+ DOM.insertBefore(contentEl, this.beginScript);
+ DOM.insertBefore(contentEl, this.endScript);
  DOM.removeChild(DOM.parentElement(contentEl), contentEl);
  }
 
  _removeNodesUntil(node:Node) {
- var p = DOM.parentElement(this._beginScript);
- for (var next = DOM.nextSibling(this._beginScript);
+ var p = DOM.parentElement(this.beginScript);
+ for (var next = DOM.nextSibling(this.beginScript);
  next !== node;
- next = DOM.nextSibling(this._beginScript)) {
+ next = DOM.nextSibling(this.beginScript)) {
  DOM.removeChild(p, next);
  }
  }
+}
+
+/**
+ * An implementation of the content tag that is used by transcluding components.
+ * It is used when the content tag is a direct child of another component,
+ * and thus does not get rendered but only affect the distribution of its parent component.
+ */
+class IntermediateContent extends ContentStrategy {
+ destinationLightDom:LightDom;
+ nodes:List<Node>;
+
+ constructor(destinationLightDom:LightDom) {
+ this.destinationLightDom = destinationLightDom;
+ this.nodes = [];
+ }
+
+ insert(nodes:List<Node>) {
+ this.nodes = nodes;
+ this.destinationLightDom.redistribute();
+ }
+}
+
+
+@Decorator({
+ selector: 'content'
+})
+export class Content {
+ _element:Element;
+ select:string;
+ _strategy:ContentStrategy;
+
+ constructor(@Inject(DestinationLightDom) destinationLightDom, contentEl:NgElement) {
+ this.select = contentEl.getAttribute('select');
+ this._strategy = isPresent(destinationLightDom) ?
+ new IntermediateContent(destinationLightDom) :
+ new RenderedContent(contentEl.domElement);
+ }
+
+ nodes():List<Node> {
+ return this._strategy.nodes;
+ }
+
+ insert(nodes:List<Node>) {
+ this._strategy.insert(nodes);
+ }
 }

modules/core/src/compiler/shadow_dom_emulation/light_dom.js

@@ -10,30 +10,49 @@ import {Content} from './content_tag';
 export class SourceLightDom {}
 export class DestinationLightDom {}
 
+
+class _Root {
+ node:Node;
+ injector:ElementInjector;
+
+ constructor(node, injector) {
+ this.node = node;
+ this.injector = injector;
+ }
+}
+
 // TODO: LightDom should implement SourceLightDom and DestinationLightDom
 // once interfaces are supported
 export class LightDom {
  lightDomView:View;
  shadowDomView:View;
- roots:List<Node>;
+ nodes:List<Node>;
+ roots:List<_Root>;
 
  constructor(lightDomView:View, shadowDomView:View, element:Element) {
  this.lightDomView = lightDomView;
  this.shadowDomView = shadowDomView;
- this.roots = DOM.childNodesAsList(element);
- DOM.clearNodes(element);
+ this.nodes = DOM.childNodesAsList(element);
+ this.roots = null;
  }
 
  redistribute() {
- redistributeNodes(this.contentTags(), this.expandedDomNodes());
+ var tags = this.contentTags();
+ if (isPresent(tags)) {
+ redistributeNodes(tags, this.expandedDomNodes());
+ }
  }
 
  contentTags(): List<Content> {
  return this._collectAllContentTags(this.shadowDomView, []);
  }
 
  _collectAllContentTags(item, acc:List<Content>):List<Content> {
- ListWrapper.forEach(item.elementInjectors, (ei) => {
+ var eis = item.elementInjectors;
+ for (var i = 0; i < eis.length; ++i) {
+ var ei = eis[i];
+ if (isBlank(ei)) continue;
+
  if (ei.hasDirective(Content)) {
  ListWrapper.push(acc, ei.get(Content));
 
@@ -43,23 +62,43 @@ export class LightDom {
  this._collectAllContentTags(c, acc);
  });
  }
- });
+ }
  return acc;
  }
 
  expandedDomNodes():List {
  var res = [];
- ListWrapper.forEach(this.roots, (root) => {
- // TODO: vsavkin calculcate this info statically when creating light dom
- var viewPort = this.lightDomView.getViewPortByTemplateElement(root);
- if (isPresent(viewPort)) {
- res = ListWrapper.concat(res, viewPort.nodes());
+
+ var roots = this._roots();
+ for (var i = 0; i < roots.length; ++i) {
+
+ var root = roots[i];
+ var ei = root.injector;
+
+ if (isPresent(ei) && ei.hasPreBuiltObject(ViewPort)) {
+ var vp = root.injector.get(ViewPort);
+ res = ListWrapper.concat(res, vp.nodes());
+
+ } else if (isPresent(ei) && ei.hasDirective(Content)) {
+ var content = root.injector.get(Content);
+ res = ListWrapper.concat(res, content.nodes());
+
  } else {
- ListWrapper.push(res, root);
+ ListWrapper.push(res, root.node);
  }
- });
+ }
  return res;
  }
+
+ _roots() {
+ if (isPresent(this.roots)) return this.roots;
+
+ var viewInj = this.lightDomView.elementInjectors;
+ this.roots = ListWrapper.map(this.nodes, (n) =>
+ new _Root(n, ListWrapper.find(viewInj, (inj) => inj.forElement(n))));
+
+ return this.roots;
+ }
 }
 
 function redistributeNodes(contents:List<Content>, nodes:List<Node>) {

modules/core/src/compiler/view.js

@@ -155,9 +155,17 @@ export class View {
  if (isPresent(componentDirective)) {
  this.componentChildViews[componentChildViewIndex++].hydrate(shadowDomAppInjector,
  elementInjector, elementInjector.getComponent());
+ }
+ }
 
+ // this should be moved into DOM write queue
+ for (var i = 0; i < binders.length; ++i) {
+ var componentDirective = binders[i].componentDirective;
+ if (isPresent(componentDirective)) {
  var lightDom = this.preBuiltObjects[i].lightDom;
- if (isPresent(lightDom)) lightDom.redistribute();
+ if (isPresent(lightDom)) {
+ lightDom.redistribute();
+ }
  }
  }
  }
@@ -192,16 +200,6 @@ export class View {
  }
  }
 
- getViewPortByTemplateElement(node):ViewPort {
- if (!(node instanceof Element)) return null;
-
- for (var i = 0; i < this.viewPorts.length; ++i) {
- if (this.viewPorts[i].templateElement === node) return this.viewPorts[i];
- }
-
- return null;
- }
-
  _invokeMementoForRecords(records:List<Record>) {
  for(var i = 0; i < records.length; ++i) {
  this._invokeMementoFor(records[i]);

modules/core/test/compiler/integration_spec.js

@@ -109,50 +109,9 @@ export function main() {
  });
  });
  });
-
- it('should emulate content tag', (done) => {
- var temp = `<emulated-shadow-dom-component>` +
- `<div>Light</div>` +
- `<div template="trivial-template">DOM</div>` +
- `</emulated-shadow-dom-component>`;
-
- function createView(pv) {
- var view = pv.instantiate(null);
- view.hydrate(new Injector([]), null, {});
- return view;
- }
-
- compiler.compile(MyComp, el(temp)).
- then(createView).
- then((view) => {
- expect(DOM.getText(view.nodes[0])).toEqual('Before LightDOM After');
- done();
- });
- });
  });
 }
 
-@Template({
- selector: '[trivial-template]'
-})
-class TrivialTemplateDirective {
- constructor(viewPort:ViewPort) {
- viewPort.create();
- }
-}
-
-@Component({
- selector: 'emulated-shadow-dom-component',
- template: new TemplateConfig({
- inline: 'Before <content></content> After',
- directives: []
- }),
- shadowDom: ShadowDomEmulated
-})
-class EmulatedShadowDomCmp {
-
-}
-
 @Decorator({
  selector: '[my-dir]',
  bind: {'elprop':'dirProp'}
@@ -166,7 +125,7 @@ class MyDir {
 
 @Component({
  template: new TemplateConfig({
- directives: [MyDir, ChildComp, SomeTemplate, EmulatedShadowDomCmp, TrivialTemplateDirective]
+ directives: [MyDir, ChildComp, SomeTemplate]
  })
 })
 class MyComp {
@@ -207,3 +166,4 @@ class MyService {
  this.greeting = 'hello';
  }
 }
+

modules/core/test/compiler/shadow_dom/content_tag_spec.js

@@ -14,34 +14,31 @@ var _script = `<script type="ng/content"></script>`;
 export function main() {
  describe('Content', function() {
  it("should insert the nodes", () => {
- var lightDom = new DummyLightDom();
  var parent = el("<div><content></content></div>");
  var content = DOM.firstChild(parent);
 
- var c = new Content(lightDom, new NgElement(content));
+ var c = new Content(null, new NgElement(content));
  c.insert([el("<a></a>"), el("<b></b>")])
 
  expect(DOM.getInnerHTML(parent)).toEqual(`${_script}<a></a><b></b>${_script}`);
  });
 
  it("should remove the nodes from the previous insertion", () => {
- var lightDom = new DummyLightDom();
  var parent = el("<div><content></content></div>");
  var content = DOM.firstChild(parent);
 
- var c = new Content(lightDom, new NgElement(content));
+ var c = new Content(null, new NgElement(content));
  c.insert([el("<a></a>")]);
  c.insert([el("<b></b>")]);
 
  expect(DOM.getInnerHTML(parent)).toEqual(`${_script}<b></b>${_script}`);
  });
 
  it("should insert empty list", () => {
- var lightDom = new DummyLightDom();
  var parent = el("<div><content></content></div>");
  var content = DOM.firstChild(parent);
 
- var c = new Content(lightDom, new NgElement(content));
+ var c = new Content(null, new NgElement(content));
  c.insert([el("<a></a>")]);
  c.insert([]);