Skip to content

Commit

Permalink
fix(render): keep bindings of components in content and view in the r…
Browse files Browse the repository at this point in the history
…ight order

Bindings in the component view have to be first, before 
bindings of components in the light dom (i.e. have the same
order as used in the `ViewManagerUtils.createView()` method.

Fixes #4522
Closes #4523
  • Loading branch information
tbosch committed Oct 5, 2015
1 parent 649d310 commit 6fe8b85
Show file tree
Hide file tree
Showing 3 changed files with 78 additions and 11 deletions.
25 changes: 14 additions & 11 deletions modules/angular2/src/core/render/view_factory.ts
Original file line number Diff line number Diff line change
Expand Up @@ -128,13 +128,13 @@ class RenderViewBuilder<N> implements RenderCommandVisitor {
root = this.factory.createShadowRoot(el);
this.nativeShadowRoots.push(root);
}
this.parentStack.push(new Component(el, root, cmd, this.factory));
var component = new Component(el, root, cmd, this.factory, this.allBuilders);
this.parentStack.push(component);
return null;
}
visitEndComponent(context: any): any {
var c = <Component<N>>this.parent;
var template = this.factory.resolveComponentTemplate(c.cmd.templateId);
this._visitChildTemplate(template, c, c.shadowRoot);
c.build();
this._endElement();
return null;
}
Expand All @@ -143,7 +143,9 @@ class RenderViewBuilder<N> implements RenderCommandVisitor {
this._addChild(el, cmd.ngContentIndex);
this.boundElements.push(el);
if (cmd.isMerged) {
this._visitChildTemplate(cmd.children, this.parentComponent, null);
visitAll(
new RenderViewBuilder(this.parentComponent, null, null, this.allBuilders, this.factory),
cmd.children);
}
return null;
}
Expand Down Expand Up @@ -172,11 +174,6 @@ class RenderViewBuilder<N> implements RenderCommandVisitor {

private _endElement() { this.parentStack.pop(); }

private _visitChildTemplate(cmds: RenderTemplateCmd[], parent: Component<N>, rootNodesParent: N) {
visitAll(new RenderViewBuilder(parent, rootNodesParent, null, this.allBuilders, this.factory),
cmds);
}

private _addChild(node: N, ngContentIndex: number) {
var parent = this.parent;
if (isPresent(parent)) {
Expand All @@ -194,9 +191,12 @@ class RenderViewBuilder<N> implements RenderCommandVisitor {
class Component<N> {
private contentNodesByNgContentIndex: N[][] = [];
private projectingNgContentIndex: number = 0;
private viewBuilder: RenderViewBuilder<N>;

constructor(public hostElement: N, public shadowRoot: N, public cmd: RenderBeginComponentCmd,
public factory: NodeFactory<N>) {}
constructor(public hostElement: N, shadowRoot: N, public cmd: RenderBeginComponentCmd,
public factory: NodeFactory<N>, allBuilders: RenderViewBuilder<N>[]) {
this.viewBuilder = new RenderViewBuilder(this, shadowRoot, null, allBuilders, factory);
}
addContentNode(ngContentIndex: number, node: N) {
if (isBlank(ngContentIndex)) {
if (this.cmd.nativeShadow) {
Expand All @@ -215,6 +215,9 @@ class Component<N> {
this.contentNodesByNgContentIndex[ngContentIndex] :
[];
}
build() {
visitAll(this.viewBuilder, this.factory.resolveComponentTemplate(this.cmd.templateId));
}
}

function addAll(source: any[], target: any[]) {
Expand Down
26 changes: 26 additions & 0 deletions modules/angular2/test/core/linker/projection_integration_spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -112,6 +112,26 @@ export function main() {
});
}));

it('should project content components',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
tcb.overrideView(
Simple,
new ViewMetadata(
{template: 'SIMPLE({{0}}|<ng-content></ng-content>|{{2}})', directives: []}))
.overrideView(OtherComp, new ViewMetadata({template: '{{1}}', directives: []}))
.overrideView(MainComp, new ViewMetadata({
template: '<simple><other></other></simple>',
directives: [Simple, OtherComp]
}))
.createAsync(MainComp)
.then((main) => {

main.detectChanges();
expect(main.debugElement.nativeElement).toHaveText('SIMPLE(0|1|2)');
async.done();
});
}));

it('should not show the light dom even if there is no content tag',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
tcb.overrideView(MainComp,
Expand Down Expand Up @@ -453,6 +473,12 @@ class MainComp {
text: string = '';
}

@Component({selector: 'other'})
@View({template: '', directives: []})
class OtherComp {
text: string = '';
}

@Component({selector: 'simple', inputs: ['stringProp']})
@View({template: 'SIMPLE(<ng-content></ng-content>)', directives: []})
class Simple {
Expand Down
38 changes: 38 additions & 0 deletions modules/angular2/test/core/render/view_factory_spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -347,6 +347,28 @@ export function main() {
.toEqual(['1.1', '1.2', '1.3', '1.4', '2.1', '2.2', '3.1', '3.1']);
});

it('should store bound elements from the view before bound elements from content components',
() => {
componentTemplates.set(0, [
beginElement('a', ['id', '2.1'], [], true, null),
endElement(),
]);
componentTemplates.set(1, [
beginElement('a', ['id', '3.1'], [], true, null),
endElement(),
]);
var view = createRenderView(
[
beginComponent('a-comp', ['id', '1.1'], [], false, null, 0),
beginComponent('b-comp', ['id', '1.2'], [], false, null, 1),
endComponent(),
endComponent(),
],
null, nodeFactory);

expect(mapAttrs(view.boundElements, 'id')).toEqual(['1.1', '1.2', '2.1', '3.1']);
});

it('should store bound text nodes after the bound text nodes of the main template', () => {
componentTemplates.set(0, [
text('2.1', true, null),
Expand Down Expand Up @@ -374,6 +396,22 @@ export function main() {
});
});

it('should store bound text nodes from the view before bound text nodes from content components',
() => {
componentTemplates.set(0, [text('2.1', true, null)]);
componentTemplates.set(1, [text('3.1', true, null)]);
var view = createRenderView(
[
beginComponent('a-comp', [], [], false, null, 0),
beginComponent('b-comp', [], [], false, null, 1),
endComponent(),
endComponent(),
],
null, nodeFactory);

expect(mapText(view.boundTextNodes)).toEqual(['2.1', '3.1']);
});

describe('content projection', () => {
it('should remove non projected nodes', () => {
componentTemplates.set(0, []);
Expand Down

0 comments on commit 6fe8b85

Please sign in to comment.