X Tutup
Skip to content

feat(ViewEncapsulation): introduce the EmulatedLegacy value. #7014

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
vicb wants to merge 1 commit into from
Closed

feat(ViewEncapsulation): introduce the EmulatedLegacy value. #7014

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
11 changes: 8 additions & 3 deletions modules/angular2/src/compiler/style_compiler.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,12 +29,12 @@ export class StyleCompiler {
compileComponentRuntime(template: CompileTemplateMetadata): Promise<Array<string | any[]>> {
var styles = template.styles;
var styleAbsUrls = template.styleUrls;
return this._loadStyles(styles, styleAbsUrls,
template.encapsulation === ViewEncapsulation.Emulated);
var shim = this._shouldShim(template.encapsulation);
return this._loadStyles(styles, styleAbsUrls, shim);
}

compileComponentCodeGen(template: CompileTemplateMetadata): SourceExpression {
var shim = template.encapsulation === ViewEncapsulation.Emulated;
var shim = this._shouldShim(template.encapsulation);
return this._styleCodeGen(template.styles, template.styleUrls, shim);
}

Expand Down Expand Up @@ -100,6 +100,11 @@ export class StyleCompiler {
return shim ? this._shadowCss.shimCssText(style, CONTENT_ATTR, HOST_ATTR) : style;
}

private _shouldShim(encapsulation: ViewEncapsulation): boolean {
return encapsulation === ViewEncapsulation.Emulated ||
encapsulation === ViewEncapsulation.EmulatedLegacy;
}

private _createModuleUrl(stylesheetUrl: string, shim: boolean): string {
return shim ? `${stylesheetUrl}.shim${MODULE_SUFFIX}` : `${stylesheetUrl}${MODULE_SUFFIX}`;
}
Expand Down
5 changes: 3 additions & 2 deletions modules/angular2/src/compiler/template_normalizer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,8 +71,9 @@ export class TemplateNormalizer {
});

var encapsulation = templateMeta.encapsulation;
if (encapsulation === ViewEncapsulation.Emulated && allResolvedStyles.length === 0 &&
allStyleAbsUrls.length === 0) {
if ((encapsulation === ViewEncapsulation.Emulated ||
encapsulation === ViewEncapsulation.EmulatedLegacy) &&
allResolvedStyles.length === 0 && allStyleAbsUrls.length === 0) {
encapsulation = ViewEncapsulation.None;
}
return new CompileTemplateMetadata({
Expand Down
16 changes: 13 additions & 3 deletions modules/angular2/src/core/metadata/view.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,13 @@ export enum ViewEncapsulation {
* This is the default option.
*/
Emulated,
/**
* Similar to Emulated but the selectors after `:host` and `:host-context` are not scoped to the
* component. That is `:host .foo` can select nodes of child components.
*
* @deprecated
*/
EmulatedLegacy,
/**
* Use the native encapsulation mechanism of the renderer.
*
Expand All @@ -28,9 +35,12 @@ export enum ViewEncapsulation {
None
}

export var VIEW_ENCAPSULATION_VALUES =
[ViewEncapsulation.Emulated, ViewEncapsulation.Native, ViewEncapsulation.None];

export var VIEW_ENCAPSULATION_VALUES = [
ViewEncapsulation.Emulated,
ViewEncapsulation.EmulatedLegacy,
ViewEncapsulation.Native,
ViewEncapsulation.None
];

/**
* Metadata properties available for configuring Views.
Expand Down
8 changes: 5 additions & 3 deletions modules/angular2/src/platform/dom/dom_renderer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,10 +64,12 @@ export class DomRenderer implements Renderer {

constructor(private _rootRenderer: DomRootRenderer, private componentProto: RenderComponentType) {
this._styles = _flattenStyles(componentProto.id, componentProto.styles, []);
if (componentProto.encapsulation !== ViewEncapsulation.Native) {
var encapsulation = componentProto.encapsulation;
if (encapsulation !== ViewEncapsulation.Native) {
this._rootRenderer.sharedStylesHost.addStyles(this._styles);
}
if (this.componentProto.encapsulation === ViewEncapsulation.Emulated) {
if (encapsulation === ViewEncapsulation.Emulated ||
encapsulation === ViewEncapsulation.EmulatedLegacy) {
this._contentAttr = _shimContentAttribute(componentProto.id);
this._hostAttr = _shimHostAttribute(componentProto.id);
} else {
Expand Down Expand Up @@ -332,4 +334,4 @@ function splitNamespace(name: string): string[] {
}
let match = RegExpWrapper.firstMatch(NS_PREFIX_RE, name);
return [match[1], match[2]];
}
}
120 changes: 61 additions & 59 deletions modules/angular2/test/compiler/style_compiler_spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,44 +122,46 @@ export function main() {
});

describe('with shim', () => {
var encapsulation = ViewEncapsulation.Emulated;

it('should compile plain css rules', inject([AsyncTestCompleter], (async) => {
compile(['div {\ncolor: red;\n}', 'span {\ncolor: blue;\n}'], [], encapsulation)
.then(styles => {
compareStyles(styles, [
'div[_ngcontent-%COMP%] {\ncolor: red;\n}',
'span[_ngcontent-%COMP%] {\ncolor: blue;\n}'
]);
async.done();
});
}));
[ViewEncapsulation.Emulated, ViewEncapsulation.EmulatedLegacy].forEach((encapsulation) => {
it('should compile plain css rules', inject([AsyncTestCompleter], (async) => {
compile(['div {\ncolor: red;\n}', 'span {\ncolor: blue;\n}'], [], encapsulation)
.then(styles => {
compareStyles(styles, [
'div[_ngcontent-%COMP%] {\ncolor: red;\n}',
'span[_ngcontent-%COMP%] {\ncolor: blue;\n}'
]);
async.done();
});
}));

it('should allow to import rules', inject([AsyncTestCompleter], (async) => {
compile(['div {\ncolor: red;\n}'], [IMPORT_ABS_STYLESHEET_URL], encapsulation)
.then(styles => {
compareStyles(styles, [
'div[_ngcontent-%COMP%] {\ncolor: red;\n}',
['span[_ngcontent-%COMP%] {color: blue}']
]);
async.done();
});
}));

it('should allow to import rules transitively', inject([AsyncTestCompleter], (async) => {
compile(['div {\ncolor: red;\n}'], [IMPORT_ABS_STYLESHEET_URL_WITH_IMPORT],
encapsulation)
.then(styles => {
compareStyles(styles, [
'div[_ngcontent-%COMP%] {\ncolor: red;\n}',
[
'a[_ngcontent-%COMP%] {color: green}',
['span[_ngcontent-%COMP%] {color: blue}']
]
]);
async.done();
});
}));

it('should allow to import rules', inject([AsyncTestCompleter], (async) => {
compile(['div {\ncolor: red;\n}'], [IMPORT_ABS_STYLESHEET_URL], encapsulation)
.then(styles => {
compareStyles(styles, [
'div[_ngcontent-%COMP%] {\ncolor: red;\n}',
['span[_ngcontent-%COMP%] {color: blue}']
]);
async.done();
});
}));
});

it('should allow to import rules transitively', inject([AsyncTestCompleter], (async) => {
compile(['div {\ncolor: red;\n}'], [IMPORT_ABS_STYLESHEET_URL_WITH_IMPORT],
encapsulation)
.then(styles => {
compareStyles(styles, [
'div[_ngcontent-%COMP%] {\ncolor: red;\n}',
[
'a[_ngcontent-%COMP%] {color: green}',
['span[_ngcontent-%COMP%] {color: blue}']
]
]);
async.done();
});
}));
});

it('should cache stylesheets for parallel requests', inject([AsyncTestCompleter], (async) => {
Expand Down Expand Up @@ -243,29 +245,29 @@ export function main() {
});

describe('with shim', () => {
var encapsulation = ViewEncapsulation.Emulated;

it('should compile plain css ruless', inject([AsyncTestCompleter], (async) => {
compile(['div {\ncolor: red;\n}', 'span {\ncolor: blue;\n}'], [], encapsulation)
.then(styles => {
compareStyles(styles, [
'div[_ngcontent-%COMP%] {\ncolor: red;\n}',
'span[_ngcontent-%COMP%] {\ncolor: blue;\n}'
]);
async.done();
});
}));

it('should allow to import rules', inject([AsyncTestCompleter], (async) => {
compile(['div {color: red}'], [IMPORT_ABS_STYLESHEET_URL], encapsulation)
.then(styles => {
compareStyles(styles, [
'div[_ngcontent-%COMP%] {color: red}',
['span[_ngcontent-%COMP%] {\ncolor: blue;\n}']
]);
async.done();
});
}), 1000);
[ViewEncapsulation.Emulated, ViewEncapsulation.EmulatedLegacy].forEach((encapsulation) => {
it('should compile plain css ruless', inject([AsyncTestCompleter], (async) => {
compile(['div {\ncolor: red;\n}', 'span {\ncolor: blue;\n}'], [], encapsulation)
.then(styles => {
compareStyles(styles, [
'div[_ngcontent-%COMP%] {\ncolor: red;\n}',
'span[_ngcontent-%COMP%] {\ncolor: blue;\n}'
]);
async.done();
});
}));

it('should allow to import rules', inject([AsyncTestCompleter], (async) => {
compile(['div {color: red}'], [IMPORT_ABS_STYLESHEET_URL], encapsulation)
.then(styles => {
compareStyles(styles, [
'div[_ngcontent-%COMP%] {color: red}',
['span[_ngcontent-%COMP%] {\ncolor: blue;\n}']
]);
async.done();
});
}), 1000);
});
});
});

Expand Down
12 changes: 11 additions & 1 deletion modules/angular2/test/compiler/template_normalizer_spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -161,7 +161,7 @@ export function main() {
});

describe('normalizeLoadedTemplate', () => {
it('should store the viewEncapsulationin the result',
it('should store the viewEncapsulation in the result',
inject([TemplateNormalizer], (normalizer: TemplateNormalizer) => {

var viewEncapsulation = ViewEncapsulation.Native;
Expand Down Expand Up @@ -305,6 +305,16 @@ export function main() {
expect(template.encapsulation).toEqual(ViewEncapsulation.None);
}));

it('should normalize ViewEncapsulation.EmulatedLegacy to ViewEncapsulation.None if there are no styles nor stylesheets',
inject([TemplateNormalizer], (normalizer: TemplateNormalizer) => {
var template = normalizer.normalizeLoadedTemplate(
dirType,
new CompileTemplateMetadata(
{encapsulation: ViewEncapsulation.EmulatedLegacy, styles: [], styleUrls: []}),
'', 'package:some/module/id');
expect(template.encapsulation).toEqual(ViewEncapsulation.None);
}));

it('should ignore ng-content in elements with ngNonBindable',
inject([TemplateNormalizer], (normalizer: TemplateNormalizer) => {
var template = normalizer.normalizeLoadedTemplate(
Expand Down
1 change: 1 addition & 0 deletions modules/angular2/test/public_api_spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1350,6 +1350,7 @@ var NG_CORE = [
*/
'ViewContainerRef.length',
'ViewEncapsulation#Emulated',
'ViewEncapsulation#EmulatedLegacy',
'ViewEncapsulation#Native',
'ViewEncapsulation#None',
'ViewEncapsulation#values',
Expand Down
1 change: 1 addition & 0 deletions tools/public_api_guard/public_api_spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -468,6 +468,7 @@ const CORE = [
'ViewDecorator.View(obj:{templateUrl?:string, template?:string, directives?:Array<Type|any[]>, pipes?:Array<Type|any[]>, renderer?:string, styles?:string[], styleUrls?:string[]}):ViewDecorator',
'ViewEncapsulation',
'ViewEncapsulation.Emulated',
'ViewEncapsulation.EmulatedLegacy',
'ViewEncapsulation.Native',
'ViewEncapsulation.None',
'ViewFactory',
Expand Down
X Tutup