refactor(template loading): add support for base URLs, css rewriting
fixes #654
This commit is contained in:
@ -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);
|
||||
|
47
modules/angular2/src/core/compiler/pipeline/resolve_css.js
vendored
Normal file
47
modules/angular2/src/core/compiler/pipeline/resolve_css.js
vendored
Normal 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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
Reference in New Issue
Block a user