Skip to content

Commit

Permalink
fix(ShadowDomStrategy): always inline import rules
Browse files Browse the repository at this point in the history 
fixes #1694
  • Loading branch information
@vicb @yjbanov
vicb authored and yjbanov committed Jun 20, 2015
1 parent d575915 commit 1c4d233
Show file tree
Hide file tree
Showing 9 changed files with 149 additions and 43 deletions.
6 changes: 3 additions & 3 deletions modules/angular2/src/core/application.ts
View file
Expand Up @@ -108,9 +108,9 @@ function _injectorBindings(appComponentType): List<Type | Binding | List<any>> {
},
[NgZone]),
bind(ShadowDomStrategy)
.toFactory((styleUrlResolver, doc) =>
new EmulatedUnscopedShadowDomStrategy(styleUrlResolver, doc.head),
[StyleUrlResolver, DOCUMENT_TOKEN]),
.toFactory((styleInliner, styleUrlResolver, doc) => new EmulatedUnscopedShadowDomStrategy(
styleInliner, styleUrlResolver, doc.head),
[StyleInliner, StyleUrlResolver, DOCUMENT_TOKEN]),
DomRenderer,
DefaultDomCompiler,
bind(Renderer).toAlias(DomRenderer),
Expand Down
24 changes: 14 additions & 10 deletions modules/angular2/src/render/dom/shadow_dom/emulated_scoped_shadow_dom_strategy.ts
View file
Expand Up @@ -27,8 +27,11 @@ import {
* - see `ShadowCss` for more information and limitations.
*/
export class EmulatedScopedShadowDomStrategy extends EmulatedUnscopedShadowDomStrategy {
constructor(public styleInliner: StyleInliner, styleUrlResolver: StyleUrlResolver, styleHost) {
super(styleUrlResolver, styleHost);
styleInliner: StyleInliner;

constructor(styleInliner: StyleInliner, styleUrlResolver: StyleUrlResolver, styleHost) {
super(styleInliner, styleUrlResolver, styleHost);
this.styleInliner = styleInliner;
}

processStyleElement(hostComponentId: string, templateUrl: string, styleEl): Promise<any> {
Expand All @@ -37,20 +40,21 @@ export class EmulatedScopedShadowDomStrategy extends EmulatedUnscopedShadowDomSt
cssText = this.styleUrlResolver.resolveUrls(cssText, templateUrl);
var inlinedCss = this.styleInliner.inlineImports(cssText, templateUrl);

var ret = null;
if (isPromise(inlinedCss)) {
DOM.setText(styleEl, '');
return (<Promise<string>>inlinedCss)
.then((css) => {
css = shimCssForComponent(css, hostComponentId);
DOM.setText(styleEl, css);
this._moveToStyleHost(styleEl);
});
ret = (<Promise<string>>inlinedCss)
.then((css) => {
css = shimCssForComponent(css, hostComponentId);
DOM.setText(styleEl, css);
});
} else {
var css = shimCssForComponent(<string>inlinedCss, hostComponentId);
DOM.setText(styleEl, css);
this._moveToStyleHost(styleEl);
return null;
}

this._moveToStyleHost(styleEl);
return ret;
}

_moveToStyleHost(styleEl) {
Expand Down
21 changes: 17 additions & 4 deletions modules/angular2/src/render/dom/shadow_dom/emulated_unscoped_shadow_dom_strategy.ts
View file
@@ -1,3 +1,4 @@
import {isPromise} from 'angular2/src/facade/lang';
import {Promise} from 'angular2/src/facade/async';

import {DOM} from 'angular2/src/dom/dom_adapter';
Expand All @@ -7,6 +8,7 @@ import * as viewModule from '../view/view';
import {LightDom} from './light_dom';
import {ShadowDomStrategy} from './shadow_dom_strategy';
import {StyleUrlResolver} from './style_url_resolver';
import {StyleInliner} from 'angular2/src/render/dom/shadow_dom/style_inliner';
import {insertSharedStyleText} from './util';

/**
Expand All @@ -19,7 +21,10 @@ import {insertSharedStyleText} from './util';
* - you can **not** use shadow DOM specific selectors in the styles
*/
export class EmulatedUnscopedShadowDomStrategy extends ShadowDomStrategy {
constructor(public styleUrlResolver: StyleUrlResolver, public styleHost) { super(); }
constructor(public styleInliner: StyleInliner, public styleUrlResolver: StyleUrlResolver,
public styleHost) {
super();
}

hasNativeContentElement(): boolean { return false; }

Expand All @@ -31,11 +36,19 @@ export class EmulatedUnscopedShadowDomStrategy extends ShadowDomStrategy {

processStyleElement(hostComponentId: string, templateUrl: string, styleEl): Promise<any> {
var cssText = DOM.getText(styleEl);

cssText = this.styleUrlResolver.resolveUrls(cssText, templateUrl);
DOM.setText(styleEl, cssText);
DOM.remove(styleEl);
var inlinedCss = this.styleInliner.inlineImports(cssText, templateUrl);

var ret = null;
if (isPromise(inlinedCss)) {
DOM.setText(styleEl, '');
ret = (<Promise<string>>inlinedCss).then(css => { DOM.setText(styleEl, css); });
} else {
DOM.setText(styleEl, <string>inlinedCss);
}

insertSharedStyleText(cssText, this.styleHost, styleEl);
return null;
return ret;
}
}
17 changes: 14 additions & 3 deletions modules/angular2/src/render/dom/shadow_dom/native_shadow_dom_strategy.ts
View file
@@ -1,10 +1,12 @@
import {isPromise} from 'angular2/src/facade/lang';
import {Promise} from 'angular2/src/facade/async';
import {Injectable} from 'angular2/di';

import {DOM} from 'angular2/src/dom/dom_adapter';

import {StyleUrlResolver} from './style_url_resolver';
import {ShadowDomStrategy} from './shadow_dom_strategy';
import {StyleInliner} from 'angular2/src/render/dom/shadow_dom/style_inliner';

/**
* This strategies uses the native Shadow DOM support.
Expand All @@ -14,14 +16,23 @@ import {ShadowDomStrategy} from './shadow_dom_strategy';
*/
@Injectable()
export class NativeShadowDomStrategy extends ShadowDomStrategy {
constructor(public styleUrlResolver: StyleUrlResolver) { super(); }
constructor(public styleInliner: StyleInliner, public styleUrlResolver: StyleUrlResolver) {
super();
}

prepareShadowRoot(el) { return DOM.createShadowRoot(el); }

processStyleElement(hostComponentId: string, templateUrl: string, styleEl): Promise<any> {
var cssText = DOM.getText(styleEl);

cssText = this.styleUrlResolver.resolveUrls(cssText, templateUrl);
DOM.setText(styleEl, cssText);
return null;
var inlinedCss = this.styleInliner.inlineImports(cssText, templateUrl);

if (isPromise(inlinedCss)) {
return (<Promise<string>>inlinedCss).then(css => { DOM.setText(styleEl, css); });
} else {
DOM.setText(styleEl, <string>inlinedCss);
return null;
}
}
}
6 changes: 3 additions & 3 deletions modules/angular2/src/test_lib/test_injector.ts
View file
Expand Up @@ -85,9 +85,9 @@ function _getAppBindings() {
bind(DOCUMENT_TOKEN)
.toValue(appDoc),
bind(ShadowDomStrategy)
.toFactory((styleUrlResolver, doc) =>
new EmulatedUnscopedShadowDomStrategy(styleUrlResolver, doc.head),
[StyleUrlResolver, DOCUMENT_TOKEN]),
.toFactory((styleInliner, styleUrlResolver, doc) => new EmulatedUnscopedShadowDomStrategy(
styleInliner, styleUrlResolver, doc.head),
[StyleInliner, StyleUrlResolver, DOCUMENT_TOKEN]),
DomRenderer,
DefaultDomCompiler,
bind(Renderer).toAlias(DomRenderer),
Expand Down
51 changes: 44 additions & 7 deletions modules/angular2/test/render/dom/shadow_dom/emulated_unscoped_shadow_dom_strategy_spec.ts
View file
Expand Up @@ -23,18 +23,26 @@ import {
} from 'angular2/src/render/dom/shadow_dom/util';
import {UrlResolver} from 'angular2/src/services/url_resolver';
import {StyleUrlResolver} from 'angular2/src/render/dom/shadow_dom/style_url_resolver';
import {StyleInliner} from 'angular2/src/render/dom/shadow_dom/style_inliner';

import {isBlank} from 'angular2/src/facade/lang';
import {PromiseWrapper, Promise} from 'angular2/src/facade/async';

import {XHR} from 'angular2/src/render/xhr';

export function main() {
var strategy;

describe('EmulatedUnscopedShadowDomStrategy', () => {
var styleHost;
var xhr, styleHost;

beforeEach(() => {
var urlResolver = new UrlResolver();
var styleUrlResolver = new StyleUrlResolver(urlResolver);
xhr = new FakeXHR();
var styleInliner = new StyleInliner(xhr, styleUrlResolver, urlResolver);
styleHost = el('<div></div>');
strategy = new EmulatedUnscopedShadowDomStrategy(styleUrlResolver, styleHost);
strategy = new EmulatedUnscopedShadowDomStrategy(styleInliner, styleUrlResolver, styleHost);
resetShadowDomCache();
});

Expand All @@ -49,11 +57,20 @@ export function main() {
expect(styleElement).toHaveText(".foo {background-image: url('http://base/img.jpg');}");
});

it('should not inline import rules', () => {
var styleElement = el('<style>@import "other.css";</style>');
strategy.processStyleElement('someComponent', 'http://base', styleElement);
expect(styleElement).toHaveText("@import 'http://base/other.css';");
});
it('should inline @import rules', inject([AsyncTestCompleter], (async) => {
xhr.reply('http://base/one.css', '.one {}');

var styleElement = el('<style>@import "one.css";</style>');
var stylePromise =
strategy.processStyleElement('someComponent', 'http://base', styleElement);
expect(stylePromise).toBePromise();
expect(styleElement).toHaveText('');

stylePromise.then((_) => {
expect(styleElement).toHaveText('.one {}\n');
async.done();
});
}));

it('should move the style element to the style host', () => {
var compileElement = el('<div><style>.one {}</style></div>');
Expand All @@ -79,3 +96,23 @@ export function main() {

});
}

class FakeXHR extends XHR {
_responses: Map<string, string>;

constructor() {
super();
this._responses = MapWrapper.create();
}

get(url: string): Promise<string> {
var response = MapWrapper.get(this._responses, url);
if (isBlank(response)) {
return PromiseWrapper.reject('xhr error', null);
}

return PromiseWrapper.resolve(response);
}

reply(url: string, response: string) { MapWrapper.set(this._responses, url, response); }
}
51 changes: 45 additions & 6 deletions modules/angular2/test/render/dom/shadow_dom/native_shadow_dom_strategy_spec.ts
View file
Expand Up @@ -17,17 +17,27 @@ import {
} from 'angular2/src/render/dom/shadow_dom/native_shadow_dom_strategy';
import {UrlResolver} from 'angular2/src/services/url_resolver';
import {StyleUrlResolver} from 'angular2/src/render/dom/shadow_dom/style_url_resolver';
import {StyleInliner} from 'angular2/src/render/dom/shadow_dom/style_inliner';

import {XHR} from 'angular2/src/render/xhr';

import {isBlank} from 'angular2/src/facade/lang';
import {PromiseWrapper, Promise} from 'angular2/src/facade/async';
import {Map, MapWrapper} from 'angular2/src/facade/collection';

import {DOM} from 'angular2/src/dom/dom_adapter';

export function main() {
var strategy;

describe('NativeShadowDomStrategy', () => {
var xhr;
beforeEach(() => {
var urlResolver = new UrlResolver();
var styleUrlResolver = new StyleUrlResolver(urlResolver);
strategy = new NativeShadowDomStrategy(styleUrlResolver);
xhr = new FakeXHR();
var styleInliner = new StyleInliner(xhr, styleUrlResolver, urlResolver);
strategy = new NativeShadowDomStrategy(styleInliner, styleUrlResolver);
});

if (DOM.supportsNativeShadowDOM()) {
Expand All @@ -44,10 +54,39 @@ export function main() {
.toHaveText(".foo {" + "background-image: url('http://base/img.jpg');" + "}");
});

it('should not inline import rules', () => {
var styleElement = el('<style>@import "other.css";</style>');
strategy.processStyleElement('someComponent', 'http://base', styleElement);
expect(styleElement).toHaveText("@import 'http://base/other.css';");
});
it('should inline @import rules', inject([AsyncTestCompleter], (async) => {
xhr.reply('http://base/one.css', '.one {}');

var styleElement = el('<style>@import "one.css";</style>');
var stylePromise =
strategy.processStyleElement('someComponent', 'http://base', styleElement);
expect(stylePromise).toBePromise();

stylePromise.then((_) => {
expect(styleElement).toHaveText('.one {}\n');
async.done();
});
}));

});
}

class FakeXHR extends XHR {
_responses: Map<string, string>;

constructor() {
super();
this._responses = MapWrapper.create();
}

get(url: string): Promise<string> {
var response = MapWrapper.get(this._responses, url);
if (isBlank(response)) {
return PromiseWrapper.reject('xhr error', null);
}

return PromiseWrapper.resolve(response);
}

reply(url: string, response: string) { MapWrapper.set(this._responses, url, response); }
}
12 changes: 6 additions & 6 deletions modules/angular2/test/render/dom/shadow_dom_emulation_integration_spec.ts
View file
Expand Up @@ -43,17 +43,17 @@ export function main() {
.toFactory((styleInliner, styleUrlResolver) => new EmulatedScopedShadowDomStrategy(
styleInliner, styleUrlResolver, styleHost),
[StyleInliner, StyleUrlResolver]),
"unscoped": bind(ShadowDomStrategy)
.toFactory((styleUrlResolver) => new EmulatedUnscopedShadowDomStrategy(
styleUrlResolver, styleHost),
[StyleUrlResolver])
"unscoped": bind(ShadowDomStrategy).toFactory(
(styleInliner, styleUrlResolver) => new EmulatedUnscopedShadowDomStrategy(
styleInliner, styleUrlResolver, null), [StyleInliner, StyleUrlResolver])
};
if (DOM.supportsNativeShadowDOM()) {
StringMapWrapper.set(
strategies, "native",
bind(ShadowDomStrategy)
.toFactory((styleUrlResolver) => new NativeShadowDomStrategy(styleUrlResolver),
[StyleUrlResolver]));
.toFactory((styleInliner, styleUrlResolver) =>
new NativeShadowDomStrategy(styleInliner, styleUrlResolver),
[StyleInliner, StyleUrlResolver]));
}
beforeEach(() => { styleHost = el('<div></div>'); });

Expand Down
4 changes: 3 additions & 1 deletion modules/benchmarks/src/compiler/compiler_benchmark.ts
View file
Expand Up @@ -17,6 +17,7 @@ import {TemplateLoader} from 'angular2/src/render/dom/compiler/template_loader';
import {TemplateResolver} from 'angular2/src/core/compiler/template_resolver';
import {UrlResolver} from 'angular2/src/services/url_resolver';
import {StyleUrlResolver} from 'angular2/src/render/dom/shadow_dom/style_url_resolver';
import {StyleInliner} from 'angular2/src/render/dom/shadow_dom/style_inliner';
import {ComponentUrlMapper} from 'angular2/src/core/compiler/component_url_mapper';

import {reflector} from 'angular2/src/reflection/reflection';
Expand All @@ -37,7 +38,8 @@ export function main() {
count, [BenchmarkComponentNoBindings, BenchmarkComponentWithBindings]);
var urlResolver = new UrlResolver();
var styleUrlResolver = new StyleUrlResolver(urlResolver);
var shadowDomStrategy = new NativeShadowDomStrategy(styleUrlResolver);
var styleInliner = new StyleInliner(null, styleUrlResolver, urlResolver);
var shadowDomStrategy = new NativeShadowDomStrategy(styleInliner, styleUrlResolver);
var renderCompiler = new rc.DefaultDomCompiler(new Parser(new Lexer()), shadowDomStrategy,
new TemplateLoader(null, urlResolver));
var compiler =
Expand Down

0 comments on commit 1c4d233

Please sign in to comment.