From 712d60e467d58e22b5e6fbb73b0fe0de22654433 Mon Sep 17 00:00:00 2001 From: Peter Johan Salomonsen Date: Sat, 24 Jun 2017 21:09:38 +0200 Subject: [PATCH] fix(platform-browser): insert APP_ID in styles, contentAttr and hostAttr (#17745) PR Close #17745 --- modules/benchmarks/src/tree/ng2_next/tree.ts | 2 +- .../test/bundling/todo_r2/todo_e2e_spec.ts | 3 ++- packages/core/test/render3/component_spec.ts | 6 +++--- .../core/test/render3/imported_renderer2.ts | 2 +- packages/core/test/render3/providers_spec.ts | 2 +- packages/platform-browser/src/browser.ts | 2 +- .../platform-browser/src/dom/dom_renderer.ts | 18 ++++++++++-------- 7 files changed, 19 insertions(+), 16 deletions(-) diff --git a/modules/benchmarks/src/tree/ng2_next/tree.ts b/modules/benchmarks/src/tree/ng2_next/tree.ts index ebd8c05e6a..44eb24b87a 100644 --- a/modules/benchmarks/src/tree/ng2_next/tree.ts +++ b/modules/benchmarks/src/tree/ng2_next/tree.ts @@ -94,7 +94,7 @@ export class AppModule implements Injector, NgModuleRef { constructor() { initServicesIfNeeded(); this.sanitizer = new DomSanitizerImpl(document); - this.renderer2 = new DomRendererFactory2(null, null); + this.renderer2 = new DomRendererFactory2(null, null, null); trustedEmptyColor = this.sanitizer.bypassSecurityTrustStyle(''); trustedGreyColor = this.sanitizer.bypassSecurityTrustStyle('grey'); this.componentFactory = diff --git a/packages/core/test/bundling/todo_r2/todo_e2e_spec.ts b/packages/core/test/bundling/todo_r2/todo_e2e_spec.ts index 45133a50da..1037bec8f2 100644 --- a/packages/core/test/bundling/todo_r2/todo_e2e_spec.ts +++ b/packages/core/test/bundling/todo_r2/todo_e2e_spec.ts @@ -27,7 +27,8 @@ describe('functional test for todo', () => { const toDoAppComponent = (window as any).toDoAppComponent; await whenRendered(toDoAppComponent); - const styleContent = findStyleTextForSelector('.todo-list\\\[_ngcontent-\\\w+\\\]'); + const styleContent = + findStyleTextForSelector('.todo-list\\\[_ngcontent-[a-z]+-\\\w+\\\]'); expect(styleContent).toMatch(/font-weight:\s*bold;/); expect(styleContent).toMatch(/color:\s*#d9d9d9;/); })); diff --git a/packages/core/test/render3/component_spec.ts b/packages/core/test/render3/component_spec.ts index 10babaf15e..bac46be59a 100644 --- a/packages/core/test/render3/component_spec.ts +++ b/packages/core/test/render3/component_spec.ts @@ -348,14 +348,14 @@ describe('encapsulation', () => { renderComponent(WrapperComponent, {rendererFactory: getRendererFactory2(document)}); expect(containerEl.outerHTML) .toMatch( - /
foobar<\/span><\/leaf><\/encapsulated><\/div>/); + /
foobar<\/span><\/leaf><\/encapsulated><\/div>/); }); it('should encapsulate host', () => { renderComponent(EncapsulatedComponent, {rendererFactory: getRendererFactory2(document)}); expect(containerEl.outerHTML) .toMatch( - /
foobar<\/span><\/leaf><\/div>/); + /
foobar<\/span><\/leaf><\/div>/); }); it('should encapsulate host and children with different attributes', () => { @@ -401,7 +401,7 @@ describe('encapsulation', () => { renderComponent(WrapperComponentWith, {rendererFactory: getRendererFactory2(document)}); expect(containerEl.outerHTML) .toMatch( - /
bar<\/span><\/leaf><\/div>/); + /
bar<\/span><\/leaf><\/div>/); }); }); diff --git a/packages/core/test/render3/imported_renderer2.ts b/packages/core/test/render3/imported_renderer2.ts index a822cecbd3..f6638d0e28 100644 --- a/packages/core/test/render3/imported_renderer2.ts +++ b/packages/core/test/render3/imported_renderer2.ts @@ -35,7 +35,7 @@ export function getRendererFactory2(document: any): RendererFactory2 { const fakeNgZone: NgZone = new NoopNgZone(); const eventManager = new EventManager([new SimpleDomEventsPlugin(document)], fakeNgZone); const rendererFactory = - new ɵDomRendererFactory2(eventManager, new ɵDomSharedStylesHost(document)); + new ɵDomRendererFactory2(eventManager, new ɵDomSharedStylesHost(document), 'dummyappid'); const origCreateRenderer = rendererFactory.createRenderer; rendererFactory.createRenderer = function() { const renderer = origCreateRenderer.apply(this, arguments); diff --git a/packages/core/test/render3/providers_spec.ts b/packages/core/test/render3/providers_spec.ts index 3dbd6372d5..021b7a18db 100644 --- a/packages/core/test/render3/providers_spec.ts +++ b/packages/core/test/render3/providers_spec.ts @@ -1123,7 +1123,7 @@ describe('providers', () => { fixture.update(); expect(fixture.html) .toMatch( - /foo<\/host-cmp>From module injector<\/embedded-cmp>/); + /foo<\/host-cmp>From module injector<\/embedded-cmp>/); }); it('should cross the root view boundary to the parent of the host, thanks to the default root view injector', diff --git a/packages/platform-browser/src/browser.ts b/packages/platform-browser/src/browser.ts index 6dca490236..22a246afed 100644 --- a/packages/platform-browser/src/browser.ts +++ b/packages/platform-browser/src/browser.ts @@ -80,7 +80,7 @@ export const BROWSER_MODULE_PROVIDERS: StaticProvider[] = [ { provide: DomRendererFactory2, useClass: DomRendererFactory2, - deps: [EventManager, DomSharedStylesHost] + deps: [EventManager, DomSharedStylesHost, APP_ID] }, {provide: RendererFactory2, useExisting: DomRendererFactory2}, {provide: SharedStylesHost, useExisting: DomSharedStylesHost}, diff --git a/packages/platform-browser/src/dom/dom_renderer.ts b/packages/platform-browser/src/dom/dom_renderer.ts index 719ddce74e..16be147431 100644 --- a/packages/platform-browser/src/dom/dom_renderer.ts +++ b/packages/platform-browser/src/dom/dom_renderer.ts @@ -6,7 +6,7 @@ * found in the LICENSE file at https://angular.io/license */ -import {Injectable, Renderer2, RendererFactory2, RendererStyleFlags2, RendererType2, ViewEncapsulation} from '@angular/core'; +import {APP_ID, Inject, Injectable, Renderer2, RendererFactory2, RendererStyleFlags2, RendererType2, ViewEncapsulation} from '@angular/core'; import {EventManager} from './events/event_manager'; import {DomSharedStylesHost} from './shared_styles_host'; @@ -63,7 +63,9 @@ export class DomRendererFactory2 implements RendererFactory2 { private rendererByCompId = new Map(); private defaultRenderer: Renderer2; - constructor(private eventManager: EventManager, private sharedStylesHost: DomSharedStylesHost) { + constructor( + private eventManager: EventManager, private sharedStylesHost: DomSharedStylesHost, + @Inject(APP_ID) private appId: string) { this.defaultRenderer = new DefaultDomRenderer2(eventManager); } @@ -75,8 +77,8 @@ export class DomRendererFactory2 implements RendererFactory2 { case ViewEncapsulation.Emulated: { let renderer = this.rendererByCompId.get(type.id); if (!renderer) { - renderer = - new EmulatedEncapsulationDomRenderer2(this.eventManager, this.sharedStylesHost, type); + renderer = new EmulatedEncapsulationDomRenderer2( + this.eventManager, this.sharedStylesHost, type, this.appId); this.rendererByCompId.set(type.id, renderer); } (renderer).applyToHost(element); @@ -243,13 +245,13 @@ class EmulatedEncapsulationDomRenderer2 extends DefaultDomRenderer2 { constructor( eventManager: EventManager, sharedStylesHost: DomSharedStylesHost, - private component: RendererType2) { + private component: RendererType2, appId: string) { super(eventManager); - const styles = flattenStyles(component.id, component.styles, []); + const styles = flattenStyles(appId + '-' + component.id, component.styles, []); sharedStylesHost.addStyles(styles); - this.contentAttr = shimContentAttribute(component.id); - this.hostAttr = shimHostAttribute(component.id); + this.contentAttr = shimContentAttribute(appId + '-' + component.id); + this.hostAttr = shimHostAttribute(appId + '-' + component.id); } applyToHost(element: any) { super.setAttribute(element, this.hostAttr, ''); }