refactor(template loading): add support for base URLs, css rewriting

fixes #654
This commit is contained in:
Victor Berchet
2015-02-24 16:05:45 +01:00
parent 26872f60e6
commit 929fc65493
42 changed files with 1147 additions and 634 deletions

View File

@ -9,11 +9,10 @@ import {ElementBindingMarker} from './element_binding_marker';
import {ProtoViewBuilder} from './proto_view_builder';
import {ProtoElementInjectorBuilder} from './proto_element_injector_builder';
import {ElementBinderBuilder} from './element_binder_builder';
import {ShimShadowCss} from './shim_shadow_css';
import {ResolveCss} from './resolve_css';
import {ShimShadowDom} from './shim_shadow_dom';
import {DirectiveMetadata} from 'angular2/src/core/compiler/directive_metadata';
import {ShadowDomStrategy, EmulatedShadowDomStrategy} from 'angular2/src/core/compiler/shadow_dom_strategy';
import {DOM} from 'angular2/src/facade/dom';
/**
* Default steps used for compiling a template.
@ -25,24 +24,20 @@ export function createDefaultSteps(
parser:Parser,
compiledComponent: DirectiveMetadata,
directives: List<DirectiveMetadata>,
shadowDomStrategy: ShadowDomStrategy) {
shadowDomStrategy: ShadowDomStrategy,
templateUrl: string) {
var steps = [new ViewSplitter(parser)];
if (shadowDomStrategy instanceof EmulatedShadowDomStrategy) {
var step = new ShimShadowCss(compiledComponent, shadowDomStrategy, DOM.defaultDoc().head);
ListWrapper.push(steps, step);
}
steps = ListWrapper.concat(steps,[
var steps = [
new ViewSplitter(parser),
new ResolveCss(compiledComponent, shadowDomStrategy, templateUrl),
new PropertyBindingParser(parser),
new DirectiveParser(directives),
new TextInterpolationParser(parser),
new ElementBindingMarker(),
new ProtoViewBuilder(changeDetection, shadowDomStrategy),
new ProtoElementInjectorBuilder(),
new ElementBinderBuilder(parser)
]);
new ElementBinderBuilder(parser),
]
if (shadowDomStrategy instanceof EmulatedShadowDomStrategy) {
var step = new ShimShadowDom(compiledComponent, shadowDomStrategy);

View File

@ -0,0 +1,47 @@
import {CompileStep} from './compile_step';
import {CompileElement} from './compile_element';
import {CompileControl} from './compile_control';
import {DirectiveMetadata} from 'angular2/src/core/compiler/directive_metadata';
import {ShadowDomStrategy} from 'angular2/src/core/compiler/shadow_dom_strategy';
import {DOM} from 'angular2/src/facade/dom';
import {Type} from 'angular2/src/facade/lang';
import {PromiseWrapper} from 'angular2/src/facade/async';
import {ListWrapper} from 'angular2/src/facade/collection';
export class ResolveCss extends CompileStep {
_strategy: ShadowDomStrategy;
_component: Type;
_templateUrl: string;
constructor(cmpMetadata: DirectiveMetadata, strategy: ShadowDomStrategy, templateUrl: string) {
super();
this._strategy = strategy;
this._component = cmpMetadata.type;
this._templateUrl = templateUrl;
}
process(parent:CompileElement, current:CompileElement, control:CompileControl) {
// May be remove the styles
if (DOM.tagName(current.element) == 'STYLE') {
current.ignoreBindings = true;
var styleEl = current.element;
var css = DOM.getText(styleEl);
css = this._strategy.transformStyleText(css, this._templateUrl, this._component);
if (PromiseWrapper.isPromise(css)) {
ListWrapper.push(parent.inheritedProtoView.stylePromises, css);
DOM.setText(styleEl, '');
css.then((css) => {
DOM.setText(styleEl, css);
})
} else {
DOM.setText(styleEl, css);
}
this._strategy.handleStyleElement(styleEl);
}
}
}

View File

@ -1,55 +0,0 @@
import {CompileStep} from './compile_step';
import {CompileElement} from './compile_element';
import {CompileControl} from './compile_control';
import {DirectiveMetadata} from 'angular2/src/core/compiler/directive_metadata';
import {ShadowDomStrategy} from 'angular2/src/core/compiler/shadow_dom_strategy';
import {DOM, Element, StyleElement} from 'angular2/src/facade/dom';
import {isPresent, isBlank, Type} from 'angular2/src/facade/lang';
export class ShimShadowCss extends CompileStep {
_strategy: ShadowDomStrategy;
_styleHost: Element;
_lastInsertedStyle: Element;
_component: Type;
constructor(cmpMetadata: DirectiveMetadata, strategy: ShadowDomStrategy, styleHost: Element) {
super();
this._strategy = strategy;
this._component = cmpMetadata.type;
this._styleHost = styleHost;
this._lastInsertedStyle = null;
}
process(parent:CompileElement, current:CompileElement, control:CompileControl) {
// May be remove the styles
if (DOM.tagName(current.element) == 'STYLE') {
current.ignoreBindings = true;
if (this._strategy.extractStyles()) {
var styleEl = current.element;
DOM.remove(styleEl);
var css = DOM.getText(styleEl);
var shimComponent = this._strategy.getShimComponent(this._component);
css = shimComponent.shimCssText(css);
DOM.setText(styleEl, css);
this._insertStyle(this._styleHost, styleEl);
}
}
}
_insertStyle(host: Element, style: StyleElement) {
if (isBlank(this._lastInsertedStyle)) {
var firstChild = DOM.firstChild(host);
if (isPresent(firstChild)) {
DOM.insertBefore(firstChild, style);
} else {
DOM.appendChild(host, style);
}
} else {
DOM.insertAfter(this._lastInsertedStyle, style);
}
this._lastInsertedStyle = style;
}
}

View File

@ -2,21 +2,19 @@ import {CompileStep} from './compile_step';
import {CompileElement} from './compile_element';
import {CompileControl} from './compile_control';
import {isPresent} from 'angular2/src/facade/lang';
import {isPresent, Type} from 'angular2/src/facade/lang';
import {DirectiveMetadata} from 'angular2/src/core/compiler/directive_metadata';
import {ShadowDomStrategy} from 'angular2/src/core/compiler/shadow_dom_strategy';
import {ShimComponent} from 'angular2/src/core/compiler/shadow_dom_emulation/shim_component';
export class ShimShadowDom extends CompileStep {
_strategy: ShadowDomStrategy;
_shimComponent: ShimComponent;
_component: Type;
constructor(cmpMetadata: DirectiveMetadata, strategy: ShadowDomStrategy) {
super();
this._strategy = strategy;
this._shimComponent = strategy.getShimComponent(cmpMetadata.type);
this._component = cmpMetadata.type;
}
process(parent:CompileElement, current:CompileElement, control:CompileControl) {
@ -25,13 +23,12 @@ export class ShimShadowDom extends CompileStep {
}
// Shim the element as a child of the compiled component
this._shimComponent.shimContentElement(current.element);
this._strategy.shimContentElement(this._component, current.element);
// If the current element is also a component, shim it as a host
var host = current.componentDirective;
if (isPresent(host)) {
var shimComponent = this._strategy.getShimComponent(host.type);
shimComponent.shimHostElement(current.element);
this._strategy.shimHostElement(host.type, current.element);
}
}
}