cargdev/angular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(compiler): various cleanups

Browse Source 
- use `$implicit` variable value correctly
- handle `ng-non-bindable` correctly
- add some more assertions to `TemplateCompiler`
- make `CompiledTemplate` const
- fix default value for `@Directive.moduleId`
- add new compiler to application bindings

BREAKING CHANGE:
- `Compiler.compileInHost` and all methods of `DynamicComponentLoader` don’t take `Binding` any more, only `Type`s. This is in preparation for the new compiler which does not support this.

Part of #3605

Closes #4346
This commit is contained in:
Tobias Bosch
2015-09-18 10:33:23 -07:00
parent bffa2cb59b
commit 7470ad1bd1
29 changed files with 493 additions and 285 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
modules/angular2/src/compiler/command_compiler.ts
View File

@ -35,7 +35,8 @@ import {escapeSingleQuoteString} from './util';
import {Injectable} from 'angular2/src/core/di';
export var TEMPLATE_COMMANDS_MODULE_REF = moduleRef('angular2/src/core/compiler/template_commands');
const IMPLICIT_VAR = '%implicit';
const IMPLICIT_TEMPLATE_VAR = '\$implicit';
@Injectable()
export class CommandCompiler {
@ -207,7 +208,7 @@ class CommandBuilderVisitor<R> implements TemplateAstVisitor {
var variableNameAndValues = [];
ast.vars.forEach((varAst) => {
variableNameAndValues.push(varAst.name);
variableNameAndValues.push(varAst.value);
variableNameAndValues.push(varAst.value.length > 0 ? varAst.value : IMPLICIT_TEMPLATE_VAR);
});
var directives = [];
ListWrapper.forEachWithIndex(ast.directives, (directiveAst: DirectiveAst, index: number) => {
@ -227,7 +228,7 @@ class CommandBuilderVisitor<R> implements TemplateAstVisitor {
if (isBlank(component)) {
ast.exportAsVars.forEach((varAst) => {
variableNameAndValues.push(varAst.name);
variableNameAndValues.push(IMPLICIT_VAR);
variableNameAndValues.push(null);
});
}
var directives = [];

28
modules/angular2/src/compiler/compiler.ts
View File

@ -5,3 +5,31 @@ export {
CompileTemplateMetadata
} from './directive_metadata';
export {SourceModule, SourceWithImports} from './source_module';
import {assertionsEnabled, Type} from 'angular2/src/core/facade/lang';
import {bind, Binding} from 'angular2/src/core/di';
import {TemplateParser} from 'angular2/src/compiler/template_parser';
import {HtmlParser} from 'angular2/src/compiler/html_parser';
import {TemplateNormalizer} from 'angular2/src/compiler/template_normalizer';
import {RuntimeMetadataResolver} from 'angular2/src/compiler/runtime_metadata';
import {ChangeDetectionCompiler} from 'angular2/src/compiler/change_detector_compiler';
import {StyleCompiler} from 'angular2/src/compiler/style_compiler';
import {CommandCompiler} from 'angular2/src/compiler/command_compiler';
import {TemplateCompiler} from 'angular2/src/compiler/template_compiler';
import {ChangeDetectorGenConfig} from 'angular2/src/core/change_detection/change_detection';
export function compilerBindings(): Array<Type | Binding | any[]> {
return [
HtmlParser,
TemplateParser,
TemplateNormalizer,
RuntimeMetadataResolver,
StyleCompiler,
CommandCompiler,
ChangeDetectionCompiler,
bind(ChangeDetectorGenConfig)
.toValue(
new ChangeDetectorGenConfig(assertionsEnabled(), assertionsEnabled(), false, true)),
TemplateCompiler,
];
}

17
modules/angular2/src/compiler/html_parser.ts
View File

@ -57,12 +57,7 @@ function parseElement(element: Element, indexInParent: number, parentSourceInfo:
var sourceInfo = `${parentSourceInfo} > ${nodeName}:nth-child(${indexInParent})`;
var attrs = parseAttrs(element, sourceInfo);
var childNodes;
if (ignoreChildren(attrs)) {
childNodes = [];
} else {
childNodes = parseChildNodes(element, sourceInfo);
}
var childNodes = parseChildNodes(element, sourceInfo);
return new HtmlElementAst(nodeName, attrs, childNodes, sourceInfo);
}
@ -100,16 +95,6 @@ function parseChildNodes(element: Element, parentSourceInfo: string): HtmlAst[]
return result;
}
function ignoreChildren(attrs: HtmlAttrAst[]): boolean {
for (var i = 0; i < attrs.length; i++) {
var a = attrs[i];
if (a.name == NG_NON_BINDABLE) {
return true;
}
}
return false;
}
class UnparseVisitor implements HtmlAstVisitor {
visitElement(ast: HtmlElementAst, parts: string[]): any {
parts.push(`<${ast.name}`);

25
modules/angular2/src/compiler/style_compiler.ts
View File

@ -1,4 +1,4 @@
import {CompileTypeMetadata, CompileDirectiveMetadata} from './directive_metadata';
import {CompileTypeMetadata, CompileTemplateMetadata} from './directive_metadata';
import {SourceModule, SourceExpression, moduleRef} from './source_module';
import {ViewEncapsulation} from 'angular2/src/core/render/api';
import {XHR} from 'angular2/src/core/render/xhr';
@ -29,27 +29,28 @@ export class StyleCompiler {
constructor(private _xhr: XHR, private _urlResolver: UrlResolver) {}
compileComponentRuntime(component: CompileDirectiveMetadata): Promise<string[]> {
var styles = component.template.styles;
var styleAbsUrls = component.template.styleUrls;
compileComponentRuntime(type: CompileTypeMetadata,
template: CompileTemplateMetadata): Promise<string[]> {
var styles = template.styles;
var styleAbsUrls = template.styleUrls;
return this._loadStyles(styles, styleAbsUrls,
component.template.encapsulation === ViewEncapsulation.Emulated)
.then(styles => styles.map(style => StringWrapper.replaceAll(style, COMPONENT_REGEX,
`${component.type.id}`)));
template.encapsulation === ViewEncapsulation.Emulated)
.then(styles => styles.map(
style => StringWrapper.replaceAll(style, COMPONENT_REGEX, `${type.id}`)));
}
compileComponentCodeGen(component: CompileDirectiveMetadata): SourceExpression {
var shim = component.template.encapsulation === ViewEncapsulation.Emulated;
compileComponentCodeGen(type: CompileTypeMetadata,
template: CompileTemplateMetadata): SourceExpression {
var shim = template.encapsulation === ViewEncapsulation.Emulated;
var suffix;
if (shim) {
var componentId = `${ component.type.id}`;
var componentId = `${ type.id}`;
suffix =
codeGenMapArray(['style'], `style${codeGenReplaceAll(COMPONENT_VARIABLE, componentId)}`);
} else {
suffix = '';
}
return this._styleCodeGen(component.template.styles, component.template.styleUrls, shim,
suffix);
return this._styleCodeGen(template.styles, template.styleUrls, shim, suffix);
}
compileStylesheetCodeGen(moduleId: string, cssText: string): SourceModule[] {

64
modules/angular2/src/compiler/template_compiler.ts
View File

@ -1,4 +1,5 @@
import {Type, Json, isBlank, stringify} from 'angular2/src/core/facade/lang';
import {BaseException} from 'angular2/src/core/facade/exceptions';
import {ListWrapper, SetWrapper} from 'angular2/src/core/facade/collection';
import {PromiseWrapper, Promise} from 'angular2/src/core/facade/async';
import {CompiledTemplate, TemplateCmd} from 'angular2/src/core/compiler/template_commands';
@ -58,18 +59,12 @@ export class TemplateCompiler {
}));
}
serializeDirectiveMetadata(metadata: CompileDirectiveMetadata): string {
return Json.stringify(metadata.toJson());
}
deserializeDirectiveMetadata(data: string): CompileDirectiveMetadata {
return CompileDirectiveMetadata.fromJson(Json.parse(data));
}
compileHostComponentRuntime(type: Type): Promise<CompiledTemplate> {
var compMeta: CompileDirectiveMetadata = this._runtimeMetadataResolver.getMetadata(type);
assertComponent(compMeta);
var hostMeta: CompileDirectiveMetadata =
createHostComponentMeta(compMeta.type, compMeta.selector);
this._compileComponentRuntime(hostMeta, [compMeta], new Set());
return this._compiledTemplateDone.get(hostMeta.type.id);
}
@ -93,28 +88,30 @@ export class TemplateCompiler {
new CompiledTemplate(compMeta.type.id, () => [changeDetectorFactory, commands, styles]);
this._compiledTemplateCache.set(compMeta.type.id, compiledTemplate);
compilingComponentIds.add(compMeta.type.id);
done = PromiseWrapper.all([<any>this._styleCompiler.compileComponentRuntime(compMeta)].concat(
viewDirectives.map(
dirMeta => this.normalizeDirectiveMetadata(dirMeta))))
.then((stylesAndNormalizedViewDirMetas: any[]) => {
var childPromises = [];
var normalizedViewDirMetas = stylesAndNormalizedViewDirMetas.slice(1);
var parsedTemplate = this._templateParser.parse(
compMeta.template.template, normalizedViewDirMetas, compMeta.type.name);
done =
PromiseWrapper
.all([
<any>this._styleCompiler.compileComponentRuntime(compMeta.type, compMeta.template)
].concat(viewDirectives.map(dirMeta => this.normalizeDirectiveMetadata(dirMeta))))
.then((stylesAndNormalizedViewDirMetas: any[]) => {
var childPromises = [];
var normalizedViewDirMetas = stylesAndNormalizedViewDirMetas.slice(1);
var parsedTemplate = this._templateParser.parse(
compMeta.template.template, normalizedViewDirMetas, compMeta.type.name);
var changeDetectorFactories = this._cdCompiler.compileComponentRuntime(
compMeta.type, compMeta.changeDetection, parsedTemplate);
changeDetectorFactory = changeDetectorFactories[0];
styles = stylesAndNormalizedViewDirMetas[0];
commands = this._compileCommandsRuntime(compMeta, parsedTemplate,
changeDetectorFactories,
compilingComponentIds, childPromises);
return PromiseWrapper.all(childPromises);
})
.then((_) => {
SetWrapper.delete(compilingComponentIds, compMeta.type.id);
return compiledTemplate;
});
var changeDetectorFactories = this._cdCompiler.compileComponentRuntime(
compMeta.type, compMeta.changeDetection, parsedTemplate);
changeDetectorFactory = changeDetectorFactories[0];
styles = stylesAndNormalizedViewDirMetas[0];
commands =
this._compileCommandsRuntime(compMeta, parsedTemplate, changeDetectorFactories,
compilingComponentIds, childPromises);
return PromiseWrapper.all(childPromises);
})
.then((_) => {
SetWrapper.delete(compilingComponentIds, compMeta.type.id);
return compiledTemplate;
});
this._compiledTemplateDone.set(compMeta.type.id, done);
}
return compiledTemplate;
@ -148,6 +145,7 @@ export class TemplateCompiler {
var componentMetas: CompileDirectiveMetadata[] = [];
components.forEach(componentWithDirs => {
var compMeta = <CompileDirectiveMetadata>componentWithDirs.component;
assertComponent(compMeta);
componentMetas.push(compMeta);
this._processTemplateCodeGen(compMeta,
<CompileDirectiveMetadata[]>componentWithDirs.directives,
@ -174,7 +172,7 @@ export class TemplateCompiler {
private _processTemplateCodeGen(compMeta: CompileDirectiveMetadata,
directives: CompileDirectiveMetadata[],
targetDeclarations: string[], targetTemplateArguments: any[][]) {
var styleExpr = this._styleCompiler.compileComponentCodeGen(compMeta);
var styleExpr = this._styleCompiler.compileComponentCodeGen(compMeta.type, compMeta.template);
var parsedTemplate =
this._templateParser.parse(compMeta.template.template, directives, compMeta.type.name);
var changeDetectorsExprs = this._cdCompiler.compileComponentCodeGen(
@ -197,6 +195,12 @@ export class NormalizedComponentWithViewDirectives {
public directives: CompileDirectiveMetadata[]) {}
}
function assertComponent(meta: CompileDirectiveMetadata) {
if (!meta.isComponent) {
throw new BaseException(`Could not compile '${meta.type.name}' because it is not a component.`);
}
}
function templateVariableName(type: CompileTypeMetadata): string {
return `${type.name}Template`;
}

18
modules/angular2/src/compiler/template_normalizer.ts
View File

@ -4,6 +4,7 @@ import {
CompileTemplateMetadata
} from './directive_metadata';
import {isPresent, isBlank} from 'angular2/src/core/facade/lang';
import {BaseException} from 'angular2/src/core/facade/exceptions';
import {Promise, PromiseWrapper} from 'angular2/src/core/facade/async';
import {XHR} from 'angular2/src/core/render/xhr';
@ -34,11 +35,13 @@ export class TemplateNormalizer {
if (isPresent(template.template)) {
return PromiseWrapper.resolve(this.normalizeLoadedTemplate(
directiveType, template, template.template, directiveType.moduleId));
} else {
} else if (isPresent(template.templateUrl)) {
var sourceAbsUrl = this._urlResolver.resolve(directiveType.moduleId, template.templateUrl);
return this._xhr.get(sourceAbsUrl)
.then(templateContent => this.normalizeLoadedTemplate(directiveType, template,
templateContent, sourceAbsUrl));
} else {
throw new BaseException(`No template specified for component ${directiveType.name}`);
}
}
@ -79,12 +82,15 @@ class TemplatePreparseVisitor implements HtmlAstVisitor {
ngContentSelectors: string[] = [];
styles: string[] = [];
styleUrls: string[] = [];
ngNonBindableStackCount: number = 0;
visitElement(ast: HtmlElementAst, context: any): any {
var preparsedElement = preparseElement(ast);
switch (preparsedElement.type) {
case PreparsedElementType.NG_CONTENT:
this.ngContentSelectors.push(preparsedElement.selectAttr);
if (this.ngNonBindableStackCount === 0) {
this.ngContentSelectors.push(preparsedElement.selectAttr);
}
break;
case PreparsedElementType.STYLE:
var textContent = '';
@ -99,8 +105,12 @@ class TemplatePreparseVisitor implements HtmlAstVisitor {
this.styleUrls.push(preparsedElement.hrefAttr);
break;
}
if (preparsedElement.type !== PreparsedElementType.NON_BINDABLE) {
htmlVisitAll(this, ast.children);
if (preparsedElement.nonBindable) {
this.ngNonBindableStackCount++;
}
htmlVisitAll(this, ast.children);
if (preparsedElement.nonBindable) {
this.ngNonBindableStackCount--;
}
return null;
}

82
modules/angular2/src/compiler/template_parser.ts
View File

@ -164,8 +164,7 @@ class TemplateParseVisitor implements HtmlAstVisitor {
var preparsedElement = preparseElement(element);
if (preparsedElement.type === PreparsedElementType.SCRIPT ||
preparsedElement.type === PreparsedElementType.STYLE ||
preparsedElement.type === PreparsedElementType.STYLESHEET ||
preparsedElement.type === PreparsedElementType.NON_BINDABLE) {
preparsedElement.type === PreparsedElementType.STYLESHEET) {
// Skipping <script> for security reasons
// Skipping <style> and stylesheets as we already processed them
// in the StyleCompiler
@ -196,13 +195,14 @@ class TemplateParseVisitor implements HtmlAstVisitor {
}
});
var isTemplateElement = nodeName == TEMPLATE_ELEMENT;
var elementCssSelector = this._createElementCssSelector(nodeName, matchableAttrs);
var elementCssSelector = createElementCssSelector(nodeName, matchableAttrs);
var directives = this._createDirectiveAsts(
element.name, this._parseDirectives(this.selectorMatcher, elementCssSelector),
elementOrDirectiveProps, isTemplateElement ? [] : vars, element.sourceInfo);
var elementProps: BoundElementPropertyAst[] =
this._createElementPropertyAsts(element.name, elementOrDirectiveProps, directives);
var children = htmlVisitAll(this, element.children, Component.create(directives));
var children = htmlVisitAll(preparsedElement.nonBindable ? NON_BINDABLE_VISITOR : this,
element.children, Component.create(directives));
var elementNgContentIndex =
hasInlineTemplates ? null : component.findNgContentIndex(elementCssSelector);
var parsedElement;
@ -221,8 +221,7 @@ class TemplateParseVisitor implements HtmlAstVisitor {
children, elementNgContentIndex, element.sourceInfo);
}
if (hasInlineTemplates) {
var templateCssSelector =
this._createElementCssSelector(TEMPLATE_ELEMENT, templateMatchableAttrs);
var templateCssSelector = createElementCssSelector(TEMPLATE_ELEMENT, templateMatchableAttrs);
var templateDirectives = this._createDirectiveAsts(
element.name, this._parseDirectives(this.selectorMatcher, templateCssSelector),
templateElementOrDirectiveProps, [], element.sourceInfo);
@ -381,22 +380,6 @@ class TemplateParseVisitor implements HtmlAstVisitor {
sourceInfo));
}
private _createElementCssSelector(elementName: string, matchableAttrs: string[][]): CssSelector {
var cssSelector = new CssSelector();
cssSelector.setElement(elementName);
for (var i = 0; i < matchableAttrs.length; i++) {
var attrName = matchableAttrs[i][0].toLowerCase();
var attrValue = matchableAttrs[i][1];
cssSelector.addAttribute(attrName, attrValue);
if (attrName == CLASS_ATTR) {
var classes = splitClasses(attrValue);
classes.forEach(className => cssSelector.addClassName(className));
}
}
return cssSelector;
}
private _parseDirectives(selectorMatcher: SelectorMatcher,
elementCssSelector: CssSelector): CompileDirectiveMetadata[] {
var directives = [];
@ -480,8 +463,14 @@ class TemplateParseVisitor implements HtmlAstVisitor {
targetBoundDirectiveProps: BoundDirectivePropertyAst[]) {
if (isPresent(directiveProperties)) {
var boundPropsByName: Map<string, BoundElementOrDirectiveProperty> = new Map();
boundProps.forEach(boundProp =>
boundPropsByName.set(dashCaseToCamelCase(boundProp.name), boundProp));
boundProps.forEach(boundProp => {
var key = dashCaseToCamelCase(boundProp.name);
var prevValue = boundPropsByName.get(boundProp.name);
if (isBlank(prevValue) || prevValue.isLiteral) {
// give [a]="b" a higher precedence thatn a="b" on the same element
boundPropsByName.set(key, boundProp);
}
});
StringMapWrapper.forEach(directiveProperties, (elProp: string, dirProp: string) => {
elProp = dashCaseToCamelCase(elProp);
@ -585,6 +574,34 @@ class TemplateParseVisitor implements HtmlAstVisitor {
}
}
class NonBindableVisitor implements HtmlAstVisitor {
visitElement(ast: HtmlElementAst, component: Component): ElementAst {
var preparsedElement = preparseElement(ast);
if (preparsedElement.type === PreparsedElementType.SCRIPT ||
preparsedElement.type === PreparsedElementType.STYLE ||
preparsedElement.type === PreparsedElementType.STYLESHEET) {
// Skipping <script> for security reasons
// Skipping <style> and stylesheets as we already processed them
// in the StyleCompiler
return null;
}
var attrNameAndValues = ast.attrs.map(attrAst => [attrAst.name, attrAst.value]);
var selector = createElementCssSelector(ast.name, attrNameAndValues);
var ngContentIndex = component.findNgContentIndex(selector);
var children = htmlVisitAll(this, ast.children, EMPTY_COMPONENT);
return new ElementAst(ast.name, htmlVisitAll(this, ast.attrs), [], [], [], [], children,
ngContentIndex, ast.sourceInfo);
}
visitAttr(ast: HtmlAttrAst, context: any): AttrAst {
return new AttrAst(ast.name, ast.value, ast.sourceInfo);
}
visitText(ast: HtmlTextAst, component: Component): TextAst {
var ngContentIndex = component.findNgContentIndex(TEXT_CSS_SELECTOR);
return new TextAst(ast.value, ngContentIndex, ast.sourceInfo);
}
}
class BoundElementOrDirectiveProperty {
constructor(public name: string, public expression: AST, public isLiteral: boolean,
public sourceInfo: string) {}
@ -631,4 +648,21 @@ class Component {
}
}
function createElementCssSelector(elementName: string, matchableAttrs: string[][]): CssSelector {
var cssSelector = new CssSelector();
cssSelector.setElement(elementName);
for (var i = 0; i < matchableAttrs.length; i++) {
var attrName = matchableAttrs[i][0].toLowerCase();
var attrValue = matchableAttrs[i][1];
cssSelector.addAttribute(attrName, attrValue);
if (attrName == CLASS_ATTR) {
var classes = splitClasses(attrValue);
classes.forEach(className => cssSelector.addClassName(className));
}
}
return cssSelector;
}
var EMPTY_COMPONENT = new Component(new SelectorMatcher(), null);
var NON_BINDABLE_VISITOR = new NonBindableVisitor();

11
modules/angular2/src/compiler/template_preparser.ts
View File

@ -30,9 +30,7 @@ export function preparseElement(ast: HtmlElementAst): PreparsedElement {
selectAttr = normalizeNgContentSelect(selectAttr);
var nodeName = ast.name;
var type = PreparsedElementType.OTHER;
if (nonBindable) {
type = PreparsedElementType.NON_BINDABLE;
} else if (nodeName == NG_CONTENT_ELEMENT) {
if (nodeName == NG_CONTENT_ELEMENT) {
type = PreparsedElementType.NG_CONTENT;
} else if (nodeName == STYLE_ELEMENT) {
type = PreparsedElementType.STYLE;
@ -41,7 +39,7 @@ export function preparseElement(ast: HtmlElementAst): PreparsedElement {
} else if (nodeName == LINK_ELEMENT && relAttr == LINK_STYLE_REL_VALUE) {
type = PreparsedElementType.STYLESHEET;
}
return new PreparsedElement(type, selectAttr, hrefAttr);
return new PreparsedElement(type, selectAttr, hrefAttr, nonBindable);
}
export enum PreparsedElementType {
@ -49,13 +47,12 @@ export enum PreparsedElementType {
STYLE,
STYLESHEET,
SCRIPT,
NON_BINDABLE,
OTHER
}
export class PreparsedElement {
constructor(public type: PreparsedElementType, public selectAttr: string,
public hrefAttr: string) {}
constructor(public type: PreparsedElementType, public selectAttr: string, public hrefAttr: string,
public nonBindable: boolean) {}
}

8
modules/angular2/src/compiler/util.ts
View File

@ -2,8 +2,8 @@ import {StringWrapper, isBlank, isJsObject} from 'angular2/src/core/facade/lang'
var CAMEL_CASE_REGEXP = /([A-Z])/g;
var DASH_CASE_REGEXP = /-([a-z])/g;
var SINGLE_QUOTE_ESCAPE_STRING_RE = /'|\\|\n/g;
var DOUBLE_QUOTE_ESCAPE_STRING_RE = /"|\\|\n/g;
var SINGLE_QUOTE_ESCAPE_STRING_RE = /'|\\|\n|\$/g;
var DOUBLE_QUOTE_ESCAPE_STRING_RE = /"|\\|\n|\$/g;
export var IS_DART = !isJsObject({});
@ -33,7 +33,9 @@ export function escapeDoubleQuoteString(input: string): string {
function escapeString(input: string, re: RegExp): string {
return StringWrapper.replaceAllMapped(input, re, (match) => {
if (match[0] == '\n') {
if (match[0] == '$') {
return IS_DART ? '\\$' : '$';
} else if (match[0] == '\n') {
return '\\n';
} else {
return `\\${match[0]}`;

3
modules/angular2/src/core/application_ref.ts
View File

@ -43,7 +43,7 @@ import {PipeResolver} from './compiler/pipe_resolver';
import {StyleUrlResolver} from 'angular2/src/core/render/dom/compiler/style_url_resolver';
import {UrlResolver} from 'angular2/src/core/services/url_resolver';
import {ComponentUrlMapper} from 'angular2/src/core/compiler/component_url_mapper';
import {compilerBindings} from 'angular2/src/compiler/compiler';
/**
* Constructs the set of bindings meant for use at the platform level.
@ -95,6 +95,7 @@ export function applicationCommonBindings(): Array<Type | Binding | any[]> {
bestChangeDetection = new JitChangeDetection();
}
return [
compilerBindings(),
ProtoViewFactory,
AppViewPool,
bind(APP_VIEW_POOL_CAPACITY).toValue(10000),

6
modules/angular2/src/core/compiler/compiler.ts
View File

@ -129,9 +129,7 @@ export class Compiler {
// Create a hostView as if the compiler encountered <hostcmp></hostcmp>.
// Used for bootstrapping.
compileInHost(componentTypeOrBinding: Type | Binding): Promise<ProtoViewRef> {
var componentType = isType(componentTypeOrBinding) ? componentTypeOrBinding :
(<Binding>componentTypeOrBinding).token;
compileInHost(componentType: Type): Promise<ProtoViewRef> {
var r = wtfStartTimeRange('Compiler#compile()', stringify(componentType));
var hostAppProtoView = this._compilerCache.getHost(componentType);
@ -139,7 +137,7 @@ export class Compiler {
if (isPresent(hostAppProtoView)) {
hostPvPromise = PromiseWrapper.resolve(hostAppProtoView);
} else {
var componentBinding: DirectiveBinding = this._bindDirective(componentTypeOrBinding);
var componentBinding: DirectiveBinding = this._bindDirective(componentType);
Compiler._assertTypeIsComponent(componentBinding);
var directiveMetadata = componentBinding.metadata;

72
modules/angular2/src/core/compiler/dynamic_component_loader.ts
View File

@ -6,10 +6,6 @@ import {AppViewManager} from 'angular2/src/core/compiler/view_manager';
import {ElementRef} from './element_ref';
import {ViewRef, HostViewRef} from './view_ref';
function _asType(typeOrBinding: Type | Binding): Type {
return isType(typeOrBinding) ? typeOrBinding : (<Binding>typeOrBinding).token;
}
/**
* Angular's reference to a component instance.
*
@ -69,7 +65,7 @@ export class DynamicComponentLoader {
* Loads a root component that is placed at the first element that matches the component's
* selector.
*
* - `typeOrBinding` `Type` \ {@link Binding} - representing the component to load.
* - `typeOrBinding` `Type` - representing the component to load.
* - `overrideSelector` (optional) selector to load the component at (or use
* `@Component.selector`) The selector can be anywhere (i.e. outside the current component.)
* - `injector` {@link Injector} - optional injector to use for the component.
@ -120,24 +116,22 @@ export class DynamicComponentLoader {
* </my-app>
* ```
*/
loadAsRoot(typeOrBinding: Type | Binding, overrideSelector: string, injector: Injector,
loadAsRoot(type: Type, overrideSelector: string, injector: Injector,
onDispose?: () => void): Promise<ComponentRef> {
return this._compiler.compileInHost(typeOrBinding)
.then(hostProtoViewRef => {
var hostViewRef =
this._viewManager.createRootHostView(hostProtoViewRef, overrideSelector, injector);
var newLocation = this._viewManager.getHostElement(hostViewRef);
var component = this._viewManager.getComponent(newLocation);
return this._compiler.compileInHost(type).then(hostProtoViewRef => {
var hostViewRef =
this._viewManager.createRootHostView(hostProtoViewRef, overrideSelector, injector);
var newLocation = this._viewManager.getHostElement(hostViewRef);
var component = this._viewManager.getComponent(newLocation);
var dispose = () => {
this._viewManager.destroyRootHostView(hostViewRef);
if (isPresent(onDispose)) {
onDispose();
}
};
return new ComponentRef(newLocation, component, _asType(typeOrBinding), injector,
dispose);
});
var dispose = () => {
this._viewManager.destroyRootHostView(hostViewRef);
if (isPresent(onDispose)) {
onDispose();
}
};
return new ComponentRef(newLocation, component, type, injector, dispose);
});
}
/**
@ -187,11 +181,10 @@ export class DynamicComponentLoader {
* </my-app>
* ```
*/
loadIntoLocation(typeOrBinding: Type | Binding, hostLocation: ElementRef, anchorName: string,
loadIntoLocation(type: Type, hostLocation: ElementRef, anchorName: string,
bindings: ResolvedBinding[] = null): Promise<ComponentRef> {
return this.loadNextToLocation(
typeOrBinding, this._viewManager.getNamedElementInComponentView(hostLocation, anchorName),
bindings);
type, this._viewManager.getNamedElementInComponentView(hostLocation, anchorName), bindings);
}
/**
@ -235,23 +228,22 @@ export class DynamicComponentLoader {
* <child-component>Child</child-component>
* ```
*/
loadNextToLocation(typeOrBinding: Type | Binding, location: ElementRef,
loadNextToLocation(type: Type, location: ElementRef,
bindings: ResolvedBinding[] = null): Promise<ComponentRef> {
return this._compiler.compileInHost(typeOrBinding)
.then(hostProtoViewRef => {
var viewContainer = this._viewManager.getViewContainer(location);
var hostViewRef =
viewContainer.createHostView(hostProtoViewRef, viewContainer.length, bindings);
var newLocation = this._viewManager.getHostElement(hostViewRef);
var component = this._viewManager.getComponent(newLocation);
return this._compiler.compileInHost(type).then(hostProtoViewRef => {
var viewContainer = this._viewManager.getViewContainer(location);
var hostViewRef =
viewContainer.createHostView(hostProtoViewRef, viewContainer.length, bindings);
var newLocation = this._viewManager.getHostElement(hostViewRef);
var component = this._viewManager.getComponent(newLocation);
var dispose = () => {
var index = viewContainer.indexOf(<ViewRef>hostViewRef);
if (index !== -1) {
viewContainer.remove(index);
}
};
return new ComponentRef(newLocation, component, _asType(typeOrBinding), null, dispose);
});
var dispose = () => {
var index = viewContainer.indexOf(<ViewRef>hostViewRef);
if (index !== -1) {
viewContainer.remove(index);
}
};
return new ComponentRef(newLocation, component, type, null, dispose);
});
}
}

75
modules/angular2/src/core/compiler/template_commands.ts
View File

@ -1,4 +1,4 @@
import {Type, CONST_EXPR, isPresent, isBlank} from 'angular2/src/core/facade/lang';
import {Type, CONST_EXPR, CONST, isPresent, isBlank} from 'angular2/src/core/facade/lang';
import {
RenderTemplateCmd,
RenderCommandVisitor,
@ -9,47 +9,32 @@ import {
RenderEmbeddedTemplateCmd
} from 'angular2/src/core/render/render';
/**
* A compiled template. This is const as we are storing it as annotation
* for the compiled component type.
*/
@CONST()
export class CompiledTemplate {
private _changeDetectorFactory: Function = null;
private _styles: string[] = null;
private _commands: TemplateCmd[] = null;
// Note: paramGetter is a function so that we can have cycles between templates!
constructor(public id: number, private _paramGetter: Function) {}
private _init() {
if (isBlank(this._commands)) {
var params = this._paramGetter();
this._changeDetectorFactory = params[0];
this._commands = params[1];
this._styles = params[2];
}
}
get changeDetectorFactory(): Function {
this._init();
return this._changeDetectorFactory;
}
get styles(): string[] {
this._init();
return this._styles;
}
get commands(): TemplateCmd[] {
this._init();
return this._commands;
}
// paramGetter returns a tuple with:
// - ChangeDetector factory function
// - TemplateCmd[]
// - styles
constructor(public id: number,
public dataGetter: /*()=>[Function, TemplateCmd[], string[]]*/ Function) {}
}
const EMPTY_ARR = CONST_EXPR([]);
export interface TemplateCmd extends RenderTemplateCmd {
visit(visitor: CommandVisitor, context: any): any;
visit(visitor: RenderCommandVisitor, context: any): any;
}
export class TextCmd implements TemplateCmd, RenderTextCmd {
constructor(public value: string, public isBound: boolean, public ngContentIndex: number) {}
visit(visitor: CommandVisitor, context: any): any { return visitor.visitText(this, context); }
visit(visitor: RenderCommandVisitor, context: any): any {
return visitor.visitText(this, context);
}
}
export function text(value: string, isBound: boolean, ngContentIndex: number): TextCmd {
@ -59,7 +44,7 @@ export function text(value: string, isBound: boolean, ngContentIndex: number): T
export class NgContentCmd implements TemplateCmd, RenderNgContentCmd {
isBound: boolean = false;
constructor(public ngContentIndex: number) {}
visit(visitor: CommandVisitor, context: any): any {
visit(visitor: RenderCommandVisitor, context: any): any {
return visitor.visitNgContent(this, context);
}
}
@ -72,7 +57,7 @@ export interface IBeginElementCmd extends TemplateCmd, RenderBeginElementCmd {
variableNameAndValues: Array<string | number>;
eventTargetAndNames: string[];
directives: Type[];
visit(visitor: CommandVisitor, context: any): any;
visit(visitor: RenderCommandVisitor, context: any): any;
}
export class BeginElementCmd implements TemplateCmd, IBeginElementCmd, RenderBeginElementCmd {
@ -80,7 +65,7 @@ export class BeginElementCmd implements TemplateCmd, IBeginElementCmd, RenderBeg
public eventTargetAndNames: string[],
public variableNameAndValues: Array<string | number>, public directives: Type[],
public isBound: boolean, public ngContentIndex: number) {}
visit(visitor: CommandVisitor, context: any): any {
visit(visitor: RenderCommandVisitor, context: any): any {
return visitor.visitBeginElement(this, context);
}
}
@ -94,7 +79,9 @@ export function beginElement(name: string, attrNameAndValues: string[],
}
export class EndElementCmd implements TemplateCmd {
visit(visitor: CommandVisitor, context: any): any { return visitor.visitEndElement(context); }
visit(visitor: RenderCommandVisitor, context: any): any {
return visitor.visitEndElement(context);
}
}
export function endElement(): TemplateCmd {
@ -113,7 +100,7 @@ export class BeginComponentCmd implements TemplateCmd, IBeginElementCmd, RenderB
this.component = directives[0];
this.templateId = template.id;
}
visit(visitor: CommandVisitor, context: any): any {
visit(visitor: RenderCommandVisitor, context: any): any {
return visitor.visitBeginComponent(this, context);
}
}
@ -127,7 +114,9 @@ export function beginComponent(
}
export class EndComponentCmd implements TemplateCmd {
visit(visitor: CommandVisitor, context: any): any { return visitor.visitEndComponent(context); }
visit(visitor: RenderCommandVisitor, context: any): any {
return visitor.visitEndComponent(context);
}
}
export function endComponent(): TemplateCmd {
@ -142,7 +131,7 @@ export class EmbeddedTemplateCmd implements TemplateCmd, IBeginElementCmd,
constructor(public attrNameAndValues: string[], public variableNameAndValues: string[],
public directives: Type[], public isMerged: boolean, public ngContentIndex: number,
public changeDetectorFactory: Function, public children: TemplateCmd[]) {}
visit(visitor: CommandVisitor, context: any): any {
visit(visitor: RenderCommandVisitor, context: any): any {
return visitor.visitEmbeddedTemplate(this, context);
}
}
@ -155,7 +144,15 @@ export function embeddedTemplate(attrNameAndValues: string[], variableNameAndVal
ngContentIndex, changeDetectorFactory, children);
}
export interface CommandVisitor extends RenderCommandVisitor {}
export interface CommandVisitor extends RenderCommandVisitor {
visitText(cmd: TextCmd, context: any): any;
visitNgContent(cmd: NgContentCmd, context: any): any;
visitBeginElement(cmd: BeginElementCmd, context: any): any;
visitEndElement(context: any): any;
visitBeginComponent(cmd: BeginComponentCmd, context: any): any;
visitEndComponent(context: any): any;
visitEmbeddedTemplate(cmd: EmbeddedTemplateCmd, context: any): any;
}
export function visitAllCommands(visitor: CommandVisitor, cmds: TemplateCmd[],
context: any = null) {

2
modules/angular2/src/core/reflection/reflection.dart
View File

@ -45,7 +45,7 @@ class NoReflectionCapabilities implements PlatformReflectionCapabilities {
String importUri(Type type) => './';
String moduleId(Type type) => null;
String moduleId(Type type) => './';
}
final Reflector reflector = new Reflector(new NoReflectionCapabilities());

5
modules/angular2/src/core/reflection/reflection_capabilities.dart
View File

@ -324,6 +324,9 @@ class ReflectionCapabilities implements PlatformReflectionCapabilities {
}
String moduleId(Type type) {
return '${MirrorSystem.getName((reflectClass(type).owner as LibraryMirror).qualifiedName).replaceAll(DOT_REGEX, "/")}';
var rootUri = currentMirrorSystem().isolate.rootLibrary.uri;
var moduleUri = (reflectClass(type).owner as LibraryMirror).uri;
var relativeUri = new Uri(pathSegments:moduleUri.pathSegments.sublist(rootUri.pathSegments.length-1)).toString();
return relativeUri.substring(0, relativeUri.lastIndexOf('.'));
}
}

2
modules/angular2/src/core/reflection/reflection_capabilities.ts
View File

@ -169,5 +169,5 @@ export class ReflectionCapabilities implements PlatformReflectionCapabilities {
// There is not a concept of import uri in Js, but this is useful in developing Dart applications.
importUri(type: Type): string { return './'; }
moduleId(type: Type): string { return null; }
moduleId(type: Type): string { return './'; }
}

12
modules/angular2/src/core/render/api.ts
View File

@ -401,7 +401,7 @@ export interface RenderBeginCmd extends RenderTemplateCmd {
export interface RenderTextCmd extends RenderBeginCmd { value: string; }
export interface RenderNgContentCmd extends RenderBeginCmd { ngContentIndex: number; }
export interface RenderNgContentCmd { ngContentIndex: number; }
export interface RenderBeginElementCmd extends RenderBeginCmd {
name: string;
@ -420,13 +420,13 @@ export interface RenderEmbeddedTemplateCmd extends RenderBeginElementCmd {
}
export interface RenderCommandVisitor {
visitText(cmd: any, context: any): any;
visitNgContent(cmd: any, context: any): any;
visitBeginElement(cmd: any, context: any): any;
visitText(cmd: RenderTextCmd, context: any): any;
visitNgContent(cmd: RenderNgContentCmd, context: any): any;
visitBeginElement(cmd: RenderBeginElementCmd, context: any): any;
visitEndElement(context: any): any;
visitBeginComponent(cmd: any, context: any): any;
visitBeginComponent(cmd: RenderBeginComponentCmd, context: any): any;
visitEndComponent(context: any): any;
visitEmbeddedTemplate(cmd: any, context: any): any;
visitEmbeddedTemplate(cmd: RenderEmbeddedTemplateCmd, context: any): any;
}

5
modules/angular2/src/test_lib/test_injector.ts
View File

@ -74,6 +74,7 @@ import {
} from 'angular2/src/core/render/dom/schema/dom_element_schema_registry';
import {Serializer} from "angular2/src/web_workers/shared/serializer";
import {Log} from './utils';
import {compilerBindings} from 'angular2/src/compiler/compiler';
/**
* Returns the root injector bindings.
@ -107,8 +108,8 @@ function _getAppBindings() {
}
return [
bind(DOCUMENT)
.toValue(appDoc),
compilerBindings(),
bind(DOCUMENT).toValue(appDoc),
DomRenderer,
bind(Renderer).toAlias(DomRenderer),
bind(APP_ID).toValue('a'),