X Tutup
Skip to content

fix(shadow_dom): redistribute light dom when a dynamic component is atta... #1315

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
tbosch wants to merge 1 commit into from
Closed

fix(shadow_dom): redistribute light dom when a dynamic component is atta... #1315

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions modules/angular2/src/render/dom/view/view.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,9 @@ export class RenderView {
this.componentChildViews[elementIndex] = childView;
if (this._hydrated) {
childView.hydrate(lightDom);
if (isPresent(lightDom)) {
lightDom.redistribute();
}
}
}

Expand Down
14 changes: 7 additions & 7 deletions modules/angular2/test/render/dom/direct_dom_renderer_integration_spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ import {IntegrationTestbed, LoggingEventDispatcher, FakeEvent} from './integrati

export function main() {
describe('DirectDomRenderer integration', () => {
var testbed, renderer, eventPlugin, compile, rootEl;
var testbed, renderer, eventPlugin, compileRoot, rootEl;

beforeEach(() => {
rootEl = el('<div></div>');
Expand All @@ -36,7 +36,7 @@ export function main() {
});
renderer = testbed.renderer;
eventPlugin = testbed.eventPlugin;
compile = (rootEl, componentId) => testbed.compile(rootEl, componentId);
compileRoot = (rootEl, componentId) => testbed.compileRoot(rootEl, componentId);
}

it('should create root views while using the given elements in place', inject([AsyncTestCompleter], (async) => {
Expand Down Expand Up @@ -93,7 +93,7 @@ export function main() {
directives: []
})]
});
compile(rootEl, 'someComponent').then( (rootProtoView) => {
compileRoot(rootEl, 'someComponent').then( (rootProtoView) => {
var viewRefs = renderer.createView(rootProtoView.render);
renderer.setText(viewRefs[1], 0, 'hello');
expect(rootEl).toHaveText('hello');
Expand All @@ -109,7 +109,7 @@ export function main() {
directives: []
})]
});
compile(rootEl, 'someComponent').then( (rootProtoView) => {
compileRoot(rootEl, 'someComponent').then( (rootProtoView) => {
var viewRefs = renderer.createView(rootProtoView.render);
renderer.setElementProperty(viewRefs[1], 0, 'value', 'hello');
expect(DOM.childNodes(rootEl)[0].value).toEqual('hello');
Expand All @@ -125,7 +125,7 @@ export function main() {
directives: []
})]
});
compile(rootEl, 'someComponent').then( (rootProtoView) => {
compileRoot(rootEl, 'someComponent').then( (rootProtoView) => {
var viewRef = renderer.createView(rootProtoView.render)[1];
var vcProtoViewRef = rootProtoView.elementBinders[0]
.nestedProtoView.elementBinders[0].nestedProtoView.render;
Expand All @@ -151,7 +151,7 @@ export function main() {
})],
viewCacheCapacity: 2
});
compile(rootEl, 'someComponent').then( (rootProtoView) => {
compileRoot(rootEl, 'someComponent').then( (rootProtoView) => {
var vcProtoViewRef = rootProtoView.elementBinders[0]
.nestedProtoView.elementBinders[0].nestedProtoView.render;

Expand All @@ -176,7 +176,7 @@ export function main() {
directives: []
})]
});
compile(rootEl, 'someComponent').then( (rootProtoView) => {
compileRoot(rootEl, 'someComponent').then( (rootProtoView) => {
var viewRef = renderer.createView(rootProtoView.render)[1];
var dispatcher = new LoggingEventDispatcher();
renderer.setEventDispatcher(viewRef, dispatcher);
Expand Down
18 changes: 12 additions & 6 deletions modules/angular2/test/render/dom/integration_testbed.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ export class IntegrationTestbed {
this.renderer = new DirectDomRenderer(compiler, viewFactory, shadowDomStrategy);
}

compile(rootEl, componentId):Promise<ProtoViewDto> {
compileRoot(rootEl, componentId):Promise<ProtoViewDto> {
return this.renderer.createRootProtoView(rootEl, componentId).then( (rootProtoView) => {
return this._compileNestedProtoViews(rootProtoView, [
new DirectiveMetadata({
Expand All @@ -59,9 +59,13 @@ export class IntegrationTestbed {
});
}

_compile(template):Promise<ProtoViewDto> {
return this.renderer.compile(template).then( (protoView) => {
return this._compileNestedProtoViews(protoView, template.directives);
compile(componentId):Promise<ProtoViewDto> {
var childTemplate = MapWrapper.get(this._templates, componentId);
if (isBlank(childTemplate)) {
throw new BaseException(`No template for component ${componentId}`);
}
return this.renderer.compile(childTemplate).then( (protoView) => {
return this._compileNestedProtoViews(protoView, childTemplate.directives);
});
}

Expand All @@ -80,9 +84,11 @@ export class IntegrationTestbed {
if (isPresent(nestedComponentId)) {
var childTemplate = MapWrapper.get(this._templates, nestedComponentId);
if (isBlank(childTemplate)) {
throw new BaseException(`Could not find template for ${nestedComponentId}!`);
// dynamic component
ListWrapper.push(childComponentRenderPvRefs, null);
} else {
nestedCall = this.compile(nestedComponentId);
}
nestedCall = this._compile(childTemplate);
} else if (isPresent(elementBinder.nestedProtoView)) {
nestedCall = this._compileNestedProtoViews(elementBinder.nestedProtoView, directives);
}
Expand Down
50 changes: 40 additions & 10 deletions modules/angular2/test/render/dom/shadow_dom_emulation_integration_spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,15 +52,16 @@ export function main() {

describe(`${name} shadow dom strategy`, () => {

var testbed, renderer, rootEl, compile;
var testbed, renderer, rootEl, compile, compileRoot;

function createRenderer({templates}) {
testbed = new IntegrationTestbed({
shadowDomStrategy: strategyFactory(),
templates: ListWrapper.concat(templates, componentTemplates)
});
renderer = testbed.renderer;
compile = (rootEl, componentId) => testbed.compile(rootEl, componentId);
compileRoot = (rootEl, componentId) => testbed.compileRoot(rootEl, componentId);
compile = (componentId) => testbed.compile(componentId);
}

beforeEach( () => {
Expand All @@ -77,7 +78,7 @@ export function main() {
directives: [simple]
})]
});
compile(rootEl, 'main').then( (pv) => {
compileRoot(rootEl, 'main').then( (pv) => {
renderer.createView(pv.render);

expect(rootEl).toHaveText('SIMPLE(A)');
Expand All @@ -86,6 +87,29 @@ export function main() {
});
}));

it('should support dynamic components', inject([AsyncTestCompleter], (async) => {
createRenderer({
templates: [new ViewDefinition({
componentId: 'main',
template: '<dynamic>' +
'<div>A</div>' +
'</dynamic>',
directives: [dynamicComponent]
})]
});
compileRoot(rootEl, 'main').then( (rootPv) => {
compile('simple').then( (simplePv) => {
var views = renderer.createView(rootPv.render);
var simpleViews = renderer.createView(simplePv.render);
renderer.setDynamicComponentView(views[1], 0, simpleViews[0]);

expect(rootEl).toHaveText('SIMPLE(A)');

async.done();
});
});
}));

it('should support multiple content tags', inject([AsyncTestCompleter], (async) => {
createRenderer({
templates: [new ViewDefinition({
Expand All @@ -98,7 +122,7 @@ export function main() {
directives: [multipleContentTagsComponent]
})]
});
compile(rootEl, 'main').then( (pv) => {
compileRoot(rootEl, 'main').then( (pv) => {
renderer.createView(pv.render);

expect(rootEl).toHaveText('(A, BC)');
Expand All @@ -118,7 +142,7 @@ export function main() {
directives: [multipleContentTagsComponent]
})]
});
compile(rootEl, 'main').then( (pv) => {
compileRoot(rootEl, 'main').then( (pv) => {
renderer.createView(pv.render);

expect(rootEl).toHaveText('(, BAC)');
Expand All @@ -138,7 +162,7 @@ export function main() {
directives: [multipleContentTagsComponent, manualViewportDirective]
})]
});
compile(rootEl, 'main').then( (pv) => {
compileRoot(rootEl, 'main').then( (pv) => {
var viewRefs = renderer.createView(pv.render);
var vcRef = new ViewContainerRef(viewRefs[1], 1);
var vcProtoViewRef = pv.elementBinders[0].nestedProtoView
Expand Down Expand Up @@ -170,7 +194,7 @@ export function main() {
directives: [multipleContentTagsComponent, manualViewportDirective]
})]
});
compile(rootEl, 'main').then( (pv) => {
compileRoot(rootEl, 'main').then( (pv) => {
var viewRefs = renderer.createView(pv.render);
var vcRef = new ViewContainerRef(viewRefs[1], 1);
var vcProtoViewRef = pv.elementBinders[0].nestedProtoView
Expand Down Expand Up @@ -202,7 +226,7 @@ export function main() {
directives: [outerWithIndirectNestedComponent]
})]
});
compile(rootEl, 'main').then( (pv) => {
compileRoot(rootEl, 'main').then( (pv) => {
renderer.createView(pv.render);

expect(rootEl).toHaveText('OUTER(SIMPLE(AB))');
Expand All @@ -223,7 +247,7 @@ export function main() {
directives: [outerComponent, manualViewportDirective]
})]
});
compile(rootEl, 'main').then( (pv) => {
compileRoot(rootEl, 'main').then( (pv) => {
var viewRefs = renderer.createView(pv.render);
var vcRef = new ViewContainerRef(viewRefs[1], 1);
var vcProtoViewRef = pv.elementBinders[0].nestedProtoView
Expand Down Expand Up @@ -251,7 +275,7 @@ export function main() {
directives: [conditionalContentComponent]
})]
});
compile(rootEl, 'main').then( (pv) => {
compileRoot(rootEl, 'main').then( (pv) => {
var viewRefs = renderer.createView(pv.render);
var vcRef = new ViewContainerRef(viewRefs[2], 0);
var vcProtoViewRef = pv.elementBinders[0].nestedProtoView
Expand Down Expand Up @@ -302,6 +326,12 @@ var simple = new DirectiveMetadata({
type: DirectiveMetadata.COMPONENT_TYPE
});

var dynamicComponent = new DirectiveMetadata({
selector: 'dynamic',
id: 'dynamic',
type: DirectiveMetadata.COMPONENT_TYPE
});

var multipleContentTagsComponent = new DirectiveMetadata({
selector: 'multiple-content-tags',
id: 'multiple-content-tags',
Expand Down
76 changes: 76 additions & 0 deletions modules/angular2/test/render/dom/view/view_spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
import {describe, ddescribe, it, iit, xit, xdescribe, expect, beforeEach, el} from 'angular2/test_lib';

import {ListWrapper} from 'angular2/src/facade/collection';

import {RenderView} from 'angular2/src/render/dom/view/view';
import {ShadowDomStrategy} from 'angular2/src/render/dom/shadow_dom/shadow_dom_strategy';
import {LightDom} from 'angular2/src/render/dom/shadow_dom/light_dom';

export function main() {

function createView() {
var proto = null;
var rootNodes = [el('<div></div>')];
var boundTextNodes = [];
var boundElements = [el('<div></div>')];
var viewContainers = [];
var contentTags = [];
return new RenderView(proto, rootNodes,
boundTextNodes, boundElements, viewContainers, contentTags);
}

function createShadowDomStrategy(log) {
return new FakeShadowDomStrategy(log);
}

describe('RenderView', () => {
var log, strategy;

beforeEach( () => {
log = [];
strategy = createShadowDomStrategy(log);
});

describe('setComponentView', () => {

it('should redistribute when a component is added to a hydrated view', () => {
var hostView = createView();
var childView = createView();
hostView.hydrate(null);
hostView.setComponentView(strategy, 0, childView);
expect(log[0]).toEqual(['redistribute']);
});

it('should not redistribute when a component is added to a dehydrated view', () => {
var hostView = createView();
var childView = createView();
hostView.setComponentView(strategy, 0, childView);
expect(log).toEqual([]);
});

});

});
}

class FakeShadowDomStrategy extends ShadowDomStrategy {
log;
constructor(log) {
super();
this.log = log;
}
constructLightDom(lightDomView:RenderView, shadowDomView:RenderView, element): LightDom {
return new FakeLightDom(this.log, lightDomView, shadowDomView, element);
}
}

class FakeLightDom extends LightDom {
log;
constructor(log, lightDomView:RenderView, shadowDomView:RenderView, element) {
super(lightDomView, shadowDomView, element);
this.log = log;
}
redistribute() {
ListWrapper.push(this.log, ['redistribute']);
}
}
X Tutup