refactor(Compiler): inline styles before compiling the template

Author: vicb

modules/angular2/src/core/application.ts

@@ -25,6 +25,8 @@ import {
 } from 'angular2/change_detection';
 import {ExceptionHandler} from './exception_handler';
 import {TemplateLoader} from 'angular2/src/render/dom/compiler/template_loader';
+import {StyleUrlResolver} from 'angular2/src/render/dom/compiler/style_url_resolver';
+import {StyleInliner} from 'angular2/src/render/dom/compiler/style_inliner';
 import {TemplateResolver} from './compiler/template_resolver';
 import {DirectiveResolver} from './compiler/directive_resolver';
 import {List, ListWrapper} from 'angular2/src/facade/collection';
@@ -42,8 +44,6 @@ import {KeyEventsPlugin} from 'angular2/src/render/dom/events/key_events';
 import {HammerGesturesPlugin} from 'angular2/src/render/dom/events/hammer_gestures';
 import {ComponentUrlMapper} from 'angular2/src/core/compiler/component_url_mapper';
 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 {AppRootUrl} from 'angular2/src/services/app_root_url';
 import {
  ComponentRef,
@@ -105,9 +105,7 @@ function _injectorBindings(appComponentType): List<Type | Binding | List<any>> {
  },
  [NgZone]),
  bind(ShadowDomStrategy)
- .toFactory((styleInliner, styleUrlResolver, doc) => new EmulatedUnscopedShadowDomStrategy(
- styleInliner, styleUrlResolver, doc.head),
- [StyleInliner, StyleUrlResolver, DOCUMENT_TOKEN]),
+ .toFactory((doc) => new EmulatedUnscopedShadowDomStrategy(doc.head), [DOCUMENT_TOKEN]),
  DomRenderer,
  DefaultDomCompiler,
  bind(Renderer).toAlias(DomRenderer),

modules/angular2/src/core/compiler/template_resolver.ts

@@ -22,7 +22,7 @@ export class TemplateResolver {
  return view;
  }
 
- _resolve(component: Type) {
+ _resolve(component: Type): View {
  var annotations = reflector.annotations(component);
  for (var i = 0; i < annotations.length; i++) {
  var annotation = annotations[i];

modules/angular2/src/dom/html_adapter.dart

@@ -67,10 +67,10 @@ class Html5LibDomAdapter implements DomAdapter {
  throw 'not implemented';
  }
  querySelector(el, String selector) {
- throw 'not implemented';
+ return el.querySelector(selector);
  }
  List querySelectorAll(el, String selector) {
- throw 'not implemented';
+ return el.querySelectorAll(selector);
  }
  on(el, evt, listener) {
  throw 'not implemented';
@@ -94,7 +94,7 @@ class Html5LibDomAdapter implements DomAdapter {
  return el.innerHtml;
  }
  getOuterHTML(el) {
- throw 'not implemented';
+ return el.outerHtml;
  }
  String nodeName(node) {
  switch (node.nodeType) {
@@ -130,12 +130,12 @@ class Html5LibDomAdapter implements DomAdapter {
  }
 
  parentElement(el) {
- throw 'not implemented';
+ return el.parent;
  }
  List childNodes(el) => el.nodes;
  List childNodesAsList(el) => el.nodes;
  clearNodes(el) {
- throw 'not implemented';
+ el.nodes.forEach((e) => e.remove());
  }
  appendChild(el, node) => el.append(node.remove());
  removeChild(el, node) {
@@ -153,7 +153,7 @@ class Html5LibDomAdapter implements DomAdapter {
  throw 'not implemented';
  }
  setInnerHTML(el, value) {
- throw 'not implemented';
+ el.innerHtml = value;
  }
  getText(el) {
  return el.text;

modules/angular2/src/render/api.ts

@@ -303,7 +303,7 @@ export class RenderCompiler {
  * we don't need to serialize all possible components over the wire,
  * but only the needed ones based on previous calls.
  */
- compile(template: ViewDefinition): Promise<ProtoViewDto> { return null; }
+ compile(view: ViewDefinition): Promise<ProtoViewDto> { return null; }
 }
 
 export interface RenderElementRef {

modules/angular2/src/render/dom/compiler/compile_step_factory.ts

@@ -1,6 +1,4 @@
 import {List} from 'angular2/src/facade/collection';
-import {Promise} from 'angular2/src/facade/async';
-
 import {Parser} from 'angular2/change_detection';
 import {ViewDefinition} from '../../api';
 import {CompileStep} from './compile_step';
@@ -12,21 +10,19 @@ import {ShadowDomCompileStep} from '../shadow_dom/shadow_dom_compile_step';
 import {ShadowDomStrategy} from '../shadow_dom/shadow_dom_strategy';
 
 export class CompileStepFactory {
- createSteps(template: ViewDefinition, subTaskPromises: List<Promise<any>>): List<CompileStep> {
- return null;
- }
+ createSteps(template: ViewDefinition): List<CompileStep> { return null; }
 }
 
 export class DefaultStepFactory extends CompileStepFactory {
  constructor(public _parser: Parser, public _shadowDomStrategy: ShadowDomStrategy) { super(); }
 
- createSteps(template: ViewDefinition, subTaskPromises: List<Promise<any>>) {
+ createSteps(template: ViewDefinition): List<CompileStep> {
  return [
  new ViewSplitter(this._parser),
  new PropertyBindingParser(this._parser),
  new DirectiveParser(this._parser, template.directives),
  new TextInterpolationParser(this._parser),
- new ShadowDomCompileStep(this._shadowDomStrategy, template, subTaskPromises)
+ new ShadowDomCompileStep(this._shadowDomStrategy, template)
  ];
  }
 }

modules/angular2/src/render/dom/compiler/compiler.ts

@@ -28,12 +28,11 @@ export class DomCompiler extends RenderCompiler {
  super();
  }
 
- compile(template: ViewDefinition): Promise<ProtoViewDto> {
- var tplPromise = this._templateLoader.load(template);
+ compile(view: ViewDefinition): Promise<ProtoViewDto> {
+ var tplPromise = this._templateLoader.load(view);
  return PromiseWrapper.then(
- tplPromise, (el) => this._compileTemplate(template, el, ViewType.COMPONENT), (e) => {
- throw new BaseException(
- `Failed to load the template for "${template.componentId}" : ${e}`);
+ tplPromise, (el) => this._compileTemplate(view, el, ViewType.COMPONENT), (e) => {
+ throw new BaseException(`Failed to load the template for "${view.componentId}" : ${e}`);
  });
  }
 
@@ -51,17 +50,10 @@ export class DomCompiler extends RenderCompiler {
 
  _compileTemplate(viewDef: ViewDefinition, tplElement,
  protoViewType: ViewType): Promise<ProtoViewDto> {
- var subTaskPromises = [];
- var pipeline = new CompilePipeline(this._stepFactory.createSteps(viewDef, subTaskPromises));
+ var pipeline = new CompilePipeline(this._stepFactory.createSteps(viewDef));
  var compileElements = pipeline.process(tplElement, protoViewType, viewDef.componentId);
 
- var protoView = compileElements[0].inheritedProtoView.build();
-
- if (subTaskPromises.length > 0) {
- return PromiseWrapper.all(subTaskPromises).then((_) => protoView);
- } else {
- return PromiseWrapper.resolve(protoView);
- }
+ return PromiseWrapper.resolve(compileElements[0].inheritedProtoView.build());
  }
 }
 

modules/angular2/src/render/dom/shadow_dom/style_inliner.ts renamed to modules/angular2/src/render/dom/compiler/style_inliner.ts

@@ -1,13 +1,15 @@
 import {Injectable} from 'angular2/di';
-import {isBlank, isPresent, BaseException, stringify} from 'angular2/src/facade/lang';
-import {Map, MapWrapper, ListWrapper} from 'angular2/src/facade/collection';
+import {isBlank, isPresent, BaseException, stringify, isPromise} from 'angular2/src/facade/lang';
+import {Map, MapWrapper, ListWrapper, List} from 'angular2/src/facade/collection';
 import {PromiseWrapper, Promise} from 'angular2/src/facade/async';
 import {DOM} from 'angular2/src/dom/dom_adapter';
 
 import {XHR} from 'angular2/src/render/xhr';
 
 import {ViewDefinition} from '../../api';
-import {UrlResolver} from 'angular2/src/services/url_resolver';
+
+import {StyleInliner} from './style_inliner';
+import {StyleUrlResolver} from './style_url_resolver';
 
 /**
  * Strategy to load component templates.
@@ -17,37 +19,36 @@ import {UrlResolver} from 'angular2/src/services/url_resolver';
 export class TemplateLoader {
  _cache: Map<string, Promise<string>> = new Map();
 
- constructor(private _xhr: XHR, urlResolver: UrlResolver) {}
+ constructor(private _xhr: XHR, private _styleInliner: StyleInliner,
+ private _styleUrlResolver: StyleUrlResolver) {}
 
  load(view: ViewDefinition): Promise</*element*/ any> {
- let html;
- let fetchedStyles;
+ let tplElAndStyles: List<string | Promise<string>> = [this._loadHtml(view)];
 
- // Load the HTML
- if (isPresent(view.template)) {
- html = PromiseWrapper.resolve(view.template);
- } else if (isPresent(view.templateAbsUrl)) {
- html = this._loadText(view.templateAbsUrl);
- } else {
- throw new BaseException('View should have either the templateUrl or template property set');
+ if (isPresent(view.styles)) {
+ view.styles.forEach((cssText: string) => {
+ let textOrPromise = this._resolveAndInlineCssText(cssText, view.templateAbsUrl);
+ tplElAndStyles.push(textOrPromise);
+ });
  }
 
- // Load the styles
- if (isPresent(view.styleAbsUrls) && view.styleAbsUrls.length > 0) {
- fetchedStyles = ListWrapper.map(view.styleAbsUrls, url => this._loadText(url));
- } else {
- fetchedStyles = [];
+ if (isPresent(view.styleAbsUrls)) {
+ view.styleAbsUrls.forEach(url => {
+ let promise = this._loadText(url).then(
+ cssText => this._resolveAndInlineCssText(cssText, view.templateAbsUrl));
+ tplElAndStyles.push(promise);
+ });
  }
 
- // Inline the styles and return a template element
- return PromiseWrapper.all(ListWrapper.concat([html], fetchedStyles))
+ // Inline the styles from the @View annotation and return a template element
+ return PromiseWrapper.all(tplElAndStyles)
  .then((res: List<string>) => {
- let html = res[0];
- let fetchedStyles = ListWrapper.slice(res, 1);
+ let tplEl = res[0];
+ let cssTexts = ListWrapper.slice(res, 1);
 
- html = _createStyleTags(view.styles) + _createStyleTags(fetchedStyles) + html;
+ _insertCssTexts(DOM.content(tplEl), cssTexts);
 
- return DOM.createTemplate(html);
+ return tplEl;
  });
  }
 
@@ -67,10 +68,74 @@ export class TemplateLoader {
 
  return response;
  }
+
+ // Load the html and inline any style tags
+ private _loadHtml(view: ViewDefinition): Promise<any /* element */> {
+ let html;
+
+ // Load the HTML
+ if (isPresent(view.template)) {
+ html = PromiseWrapper.resolve(view.template);
+ } else if (isPresent(view.templateAbsUrl)) {
+ html = this._loadText(view.templateAbsUrl);
+ } else {
+ throw new BaseException('View should have either the templateUrl or template property set');
+ }
+
+ // Inline the style tags from the html
+ return html.then(html => {
+ var tplEl = DOM.createTemplate(html);
+ let styleEls = DOM.querySelectorAll(DOM.content(tplEl), 'STYLE');
+
+ let promises: List<Promise<string>> = [];
+ for (let i = 0; i < styleEls.length; i++) {
+ let promise = this._resolveAndInlineElement(styleEls[i], view.templateAbsUrl);
+ if (isPromise(promise)) {
+ promises.push(promise);
+ }
+ }
+
+ return promises.length > 0 ? PromiseWrapper.all(promises).then(_ => tplEl) : tplEl;
+ });
+ }
+
+ /**
+ * Inlines a style element.
+ *
+ * @param styleEl The style element
+ * @param baseUrl The base url
+ * @returns {Promise<any>} null when no @import rule exist in the css or a Promise
+ * @private
+ */
+ private _resolveAndInlineElement(styleEl, baseUrl: string): Promise<any> {
+ let textOrPromise = this._resolveAndInlineCssText(DOM.getText(styleEl), baseUrl);
+
+ if (isPromise(textOrPromise)) {
+ return (<Promise<string>>textOrPromise).then(css => { DOM.setText(styleEl, css); });
+ } else {
+ DOM.setText(styleEl, <string>textOrPromise);
+ return null;
+ }
+ }
+
+ private _resolveAndInlineCssText(cssText: string, baseUrl: string): string | Promise<string> {
+ cssText = this._styleUrlResolver.resolveUrls(cssText, baseUrl);
+ return this._styleInliner.inlineImports(cssText, baseUrl);
+ }
 }
 
-function _createStyleTags(styles?: List<string>): string {
- return isBlank(styles) ?
- '' :
- ListWrapper.map(styles, css => `<style type='text/css'>${css}</style>`).join('');
+function _insertCssTexts(element, cssTexts: List<string>): void {
+ if (cssTexts.length == 0) return;
+
+ let insertBefore = DOM.firstChild(element);
+
+ for (let i = cssTexts.length - 1; i >= 0; i--) {
+ let styleEl = DOM.createStyleElement(cssTexts[i]);
+ if (isPresent(insertBefore)) {
+ DOM.insertBefore(insertBefore, styleEl);
+ } else {
+ DOM.appendChild(element, styleEl);
+ }
+ insertBefore = styleEl;
+ }
 }

modules/angular2/src/render/dom/shadow_dom/style_url_resolver.ts renamed to modules/angular2/src/render/dom/compiler/style_url_resolver.ts

@@ -1,10 +1,7 @@
-import {isBlank, isPresent, isPromise} from 'angular2/src/facade/lang';
-import {PromiseWrapper, Promise} from 'angular2/src/facade/async';
+import {isBlank, isPresent} from 'angular2/src/facade/lang';
 
 import {DOM} from 'angular2/src/dom/dom_adapter';
 
-import {StyleInliner} from 'angular2/src/render/dom/shadow_dom/style_inliner';
-import {StyleUrlResolver} from 'angular2/src/render/dom/shadow_dom/style_url_resolver';
 import {EmulatedUnscopedShadowDomStrategy} from './emulated_unscoped_shadow_dom_strategy';
 import {
  getContentAttribute,
@@ -27,39 +24,21 @@ import {
  * - see `ShadowCss` for more information and limitations.
  */
 export class EmulatedScopedShadowDomStrategy extends EmulatedUnscopedShadowDomStrategy {
- constructor(styleInliner: StyleInliner, styleUrlResolver: StyleUrlResolver, styleHost) {
- super(styleInliner, styleUrlResolver, styleHost);
- }
-
- processStyleElement(hostComponentId: string, templateUrl: string, styleEl): Promise<any> {
- var cssText = DOM.getText(styleEl);
-
- cssText = this.styleUrlResolver.resolveUrls(cssText, templateUrl);
- var inlinedCss = this.styleInliner.inlineImports(cssText, templateUrl);
-
- var ret = null;
- if (isPromise(inlinedCss)) {
- DOM.setText(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);
- }
+ constructor(styleHost) { super(styleHost); }
 
+ processStyleElement(hostComponentId: string, templateUrl: string, styleEl): void {
+ let cssText = DOM.getText(styleEl);
+ cssText = shimCssForComponent(cssText, hostComponentId);
+ DOM.setText(styleEl, cssText);
  this._moveToStyleHost(styleEl);
- return ret;
  }
 
- _moveToStyleHost(styleEl) {
+ _moveToStyleHost(styleEl): void {
  DOM.remove(styleEl);
  insertStyleElement(this.styleHost, styleEl);
  }
 
- processElement(hostComponentId: string, elementComponentId: string, element) {
+ processElement(hostComponentId: string, elementComponentId: string, element): void {
  // Shim the element as a child of the compiled component
  if (isPresent(hostComponentId)) {
  var contentAttribute = getContentAttribute(getComponentId(hostComponentId));