refactor(compiler): cleanup and preparation for integration
- Rename `DirectiveMetadata` into `CompileDirectiveMetadata`, merge with `NormalizedDirectiveMetadata` and remove `ChangeDetectionMetadata` - Store change detector factories not as array but directly at the `CompiledTemplate` or the embedded template to make instantiation easier later on - Already analyze variable values and map them to `Directive.exportAs` - Keep the directive sort order as specified in the `@View()` annotation - Allow to clear the runtime cache in `StyleCompiler` and `TemplateCompiler` - Ignore `script` elements to match the semantics of the current compiler - Make all components dynamically loadable and remove the previously introduced property `@Component#dynamicLoadable` for now until we find a better option to configure this - Don’t allow to specify bindings in `@View#directives` and `@View#pipes` as this was never supported by the transformer (see below for the breaking change) BREAKING CHANGE: - don't support DI bindings in `@View#directives` and `@View@pipes` any more in preparation of integrating the new compiler. Use `@Directive#bindings` to reexport directives under a different token instead. Part of #3605 Closes #4314
This commit is contained in:
Tobias Bosch
parent
eb7839e0ec
commit
cc0c30484f
@ -14,7 +14,7 @@ import {
|
||||
ASTWithSource
|
||||
} from 'angular2/src/core/change_detection/change_detection';
|
||||
|
||||
import {NormalizedDirectiveMetadata, TypeMetadata} from './directive_metadata';
|
||||
import {CompileDirectiveMetadata, CompileTypeMetadata} from './directive_metadata';
|
||||
import {
|
||||
TemplateAst,
|
||||
ElementAst,
|
||||
@ -32,9 +32,10 @@ import {
|
||||
AttrAst,
|
||||
TextAst
|
||||
} from './template_ast';
|
||||
import {LifecycleHooks} from 'angular2/src/core/compiler/interfaces';
|
||||
|
||||
export function createChangeDetectorDefinitions(
|
||||
componentType: TypeMetadata, componentStrategy: ChangeDetectionStrategy,
|
||||
componentType: CompileTypeMetadata, componentStrategy: ChangeDetectionStrategy,
|
||||
genConfig: ChangeDetectorGenConfig, parsedTemplate: TemplateAst[]): ChangeDetectorDefinition[] {
|
||||
var pvVisitors = [];
|
||||
var visitor = new ProtoViewVisitor(null, pvVisitors, componentStrategy);
|
||||
@ -59,7 +60,9 @@ class ProtoViewVisitor implements TemplateAstVisitor {
|
||||
|
||||
visitEmbeddedTemplate(ast: EmbeddedTemplateAst, context: any): any {
|
||||
this.boundElementCount++;
|
||||
templateVisitAll(this, ast.directives);
|
||||
for (var i = 0; i < ast.directives.length; i++) {
|
||||
ast.directives[i].visit(this, i);
|
||||
}
|
||||
|
||||
var childVisitor =
|
||||
new ProtoViewVisitor(this, this.allVisitors, ChangeDetectionStrategy.Default);
|
||||
@ -76,7 +79,7 @@ class ProtoViewVisitor implements TemplateAstVisitor {
|
||||
}
|
||||
templateVisitAll(this, ast.properties, null);
|
||||
templateVisitAll(this, ast.events);
|
||||
templateVisitAll(this, ast.vars);
|
||||
templateVisitAll(this, ast.exportAsVars);
|
||||
for (var i = 0; i < ast.directives.length; i++) {
|
||||
ast.directives[i].visit(this, i);
|
||||
}
|
||||
@ -94,8 +97,8 @@ class ProtoViewVisitor implements TemplateAstVisitor {
|
||||
visitEvent(ast: BoundEventAst, directiveRecord: DirectiveRecord): any {
|
||||
var bindingRecord =
|
||||
isPresent(directiveRecord) ?
|
||||
BindingRecord.createForHostEvent(ast.handler, ast.name, directiveRecord) :
|
||||
BindingRecord.createForEvent(ast.handler, ast.name, this.boundElementCount - 1);
|
||||
BindingRecord.createForHostEvent(ast.handler, ast.fullName, directiveRecord) :
|
||||
BindingRecord.createForEvent(ast.handler, ast.fullName, this.boundElementCount - 1);
|
||||
this.eventRecords.push(bindingRecord);
|
||||
return null;
|
||||
}
|
||||
@ -138,17 +141,20 @@ class ProtoViewVisitor implements TemplateAstVisitor {
|
||||
visitDirective(ast: DirectiveAst, directiveIndexAsNumber: number): any {
|
||||
var directiveIndex = new DirectiveIndex(this.boundElementCount - 1, directiveIndexAsNumber);
|
||||
var directiveMetadata = ast.directive;
|
||||
var changeDetectionMeta = directiveMetadata.changeDetection;
|
||||
var directiveRecord = new DirectiveRecord({
|
||||
directiveIndex: directiveIndex,
|
||||
callAfterContentInit: changeDetectionMeta.callAfterContentInit,
|
||||
callAfterContentChecked: changeDetectionMeta.callAfterContentChecked,
|
||||
callAfterViewInit: changeDetectionMeta.callAfterViewInit,
|
||||
callAfterViewChecked: changeDetectionMeta.callAfterViewChecked,
|
||||
callOnChanges: changeDetectionMeta.callOnChanges,
|
||||
callDoCheck: changeDetectionMeta.callDoCheck,
|
||||
callOnInit: changeDetectionMeta.callOnInit,
|
||||
changeDetection: changeDetectionMeta.changeDetection
|
||||
callAfterContentInit:
|
||||
directiveMetadata.lifecycleHooks.indexOf(LifecycleHooks.AfterContentInit) !== -1,
|
||||
callAfterContentChecked:
|
||||
directiveMetadata.lifecycleHooks.indexOf(LifecycleHooks.AfterContentChecked) !== -1,
|
||||
callAfterViewInit:
|
||||
directiveMetadata.lifecycleHooks.indexOf(LifecycleHooks.AfterViewInit) !== -1,
|
||||
callAfterViewChecked:
|
||||
directiveMetadata.lifecycleHooks.indexOf(LifecycleHooks.AfterViewChecked) !== -1,
|
||||
callOnChanges: directiveMetadata.lifecycleHooks.indexOf(LifecycleHooks.OnChanges) !== -1,
|
||||
callDoCheck: directiveMetadata.lifecycleHooks.indexOf(LifecycleHooks.DoCheck) !== -1,
|
||||
callOnInit: directiveMetadata.lifecycleHooks.indexOf(LifecycleHooks.OnInit) !== -1,
|
||||
changeDetection: directiveMetadata.changeDetection
|
||||
});
|
||||
this.directiveRecords.push(directiveRecord);
|
||||
|
||||
@ -165,6 +171,7 @@ class ProtoViewVisitor implements TemplateAstVisitor {
|
||||
}
|
||||
templateVisitAll(this, ast.hostProperties, directiveRecord);
|
||||
templateVisitAll(this, ast.hostEvents, directiveRecord);
|
||||
templateVisitAll(this, ast.exportAsVars);
|
||||
return null;
|
||||
}
|
||||
visitDirectiveProperty(ast: BoundDirectivePropertyAst, directiveRecord: DirectiveRecord): any {
|
||||
@ -178,7 +185,7 @@ class ProtoViewVisitor implements TemplateAstVisitor {
|
||||
}
|
||||
|
||||
|
||||
function createChangeDefinitions(pvVisitors: ProtoViewVisitor[], componentType: TypeMetadata,
|
||||
function createChangeDefinitions(pvVisitors: ProtoViewVisitor[], componentType: CompileTypeMetadata,
|
||||
genConfig: ChangeDetectorGenConfig): ChangeDetectorDefinition[] {
|
||||
var pvVariableNames = _collectNestedProtoViewsVariableNames(pvVisitors);
|
||||
return pvVisitors.map(pvVisitor => {
|
||||
@ -202,6 +209,7 @@ function _collectNestedProtoViewsVariableNames(pvVisitors: ProtoViewVisitor[]):
|
||||
}
|
||||
|
||||
|
||||
function _protoViewId(hostComponentType: TypeMetadata, pvIndex: number, viewType: string): string {
|
||||
function _protoViewId(hostComponentType: CompileTypeMetadata, pvIndex: number, viewType: string):
|
||||
string {
|
||||
return `${hostComponentType.name}_${viewType}_${pvIndex}`;
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import {TypeMetadata} from './directive_metadata';
|
||||
import {SourceExpression, moduleRef} from './source_module';
|
||||
import {CompileTypeMetadata} from './directive_metadata';
|
||||
import {SourceExpressions, moduleRef} from './source_module';
|
||||
import {
|
||||
ChangeDetectorJITGenerator
|
||||
} from 'angular2/src/core/change_detection/change_detection_jit_generator';
|
||||
@ -32,7 +32,7 @@ var PREGEN_PROTO_CHANGE_DETECTOR_MODULE =
|
||||
export class ChangeDetectionCompiler {
|
||||
constructor(private _genConfig: ChangeDetectorGenConfig) {}
|
||||
|
||||
compileComponentRuntime(componentType: TypeMetadata, strategy: ChangeDetectionStrategy,
|
||||
compileComponentRuntime(componentType: CompileTypeMetadata, strategy: ChangeDetectionStrategy,
|
||||
parsedTemplate: TemplateAst[]): Function[] {
|
||||
var changeDetectorDefinitions =
|
||||
createChangeDetectorDefinitions(componentType, strategy, this._genConfig, parsedTemplate);
|
||||
@ -51,8 +51,8 @@ export class ChangeDetectionCompiler {
|
||||
}
|
||||
}
|
||||
|
||||
compileComponentCodeGen(componentType: TypeMetadata, strategy: ChangeDetectionStrategy,
|
||||
parsedTemplate: TemplateAst[]): SourceExpression {
|
||||
compileComponentCodeGen(componentType: CompileTypeMetadata, strategy: ChangeDetectionStrategy,
|
||||
parsedTemplate: TemplateAst[]): SourceExpressions {
|
||||
var changeDetectorDefinitions =
|
||||
createChangeDetectorDefinitions(componentType, strategy, this._genConfig, parsedTemplate);
|
||||
var factories = [];
|
||||
@ -75,7 +75,6 @@ export class ChangeDetectionCompiler {
|
||||
return codegen.generateSource();
|
||||
}
|
||||
});
|
||||
var expression = `[ ${factories.join(',')} ]`;
|
||||
return new SourceExpression(sourceParts, expression);
|
||||
return new SourceExpressions(sourceParts, factories);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import {isPresent, Type} from 'angular2/src/core/facade/lang';
|
||||
import {isPresent, isBlank, Type, isString} from 'angular2/src/core/facade/lang';
|
||||
import {SetWrapper, StringMapWrapper, ListWrapper} from 'angular2/src/core/facade/collection';
|
||||
import {
|
||||
TemplateCmd,
|
||||
text,
|
||||
@ -25,8 +26,8 @@ import {
|
||||
BoundDirectivePropertyAst,
|
||||
templateVisitAll
|
||||
} from './template_ast';
|
||||
import {TypeMetadata, NormalizedDirectiveMetadata} from './directive_metadata';
|
||||
import {SourceExpression, moduleRef} from './source_module';
|
||||
import {CompileTypeMetadata, CompileDirectiveMetadata} from './directive_metadata';
|
||||
import {SourceExpressions, SourceExpression, moduleRef} from './source_module';
|
||||
|
||||
import {ViewEncapsulation} from 'angular2/src/core/render/api';
|
||||
import {shimHostAttribute, shimContentAttribute} from './style_compiler';
|
||||
@ -34,21 +35,25 @@ 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';
|
||||
|
||||
@Injectable()
|
||||
export class CommandCompiler {
|
||||
compileComponentRuntime(component: NormalizedDirectiveMetadata, template: TemplateAst[],
|
||||
compileComponentRuntime(component: CompileDirectiveMetadata, template: TemplateAst[],
|
||||
changeDetectorFactories: Function[],
|
||||
componentTemplateFactory: Function): TemplateCmd[] {
|
||||
var visitor =
|
||||
new CommandBuilderVisitor(new RuntimeCommandFactory(componentTemplateFactory), component);
|
||||
var visitor = new CommandBuilderVisitor(
|
||||
new RuntimeCommandFactory(componentTemplateFactory, changeDetectorFactories), component, 0);
|
||||
templateVisitAll(visitor, template);
|
||||
return visitor.result;
|
||||
}
|
||||
|
||||
compileComponentCodeGen(component: NormalizedDirectiveMetadata, template: TemplateAst[],
|
||||
compileComponentCodeGen(component: CompileDirectiveMetadata, template: TemplateAst[],
|
||||
changeDetectorFactoryExpressions: string[],
|
||||
componentTemplateFactory: Function): SourceExpression {
|
||||
var visitor =
|
||||
new CommandBuilderVisitor(new CodegenCommandFactory(componentTemplateFactory), component);
|
||||
var visitor = new CommandBuilderVisitor(
|
||||
new CodegenCommandFactory(componentTemplateFactory, changeDetectorFactoryExpressions),
|
||||
component, 0);
|
||||
templateVisitAll(visitor, template);
|
||||
var source = `[${visitor.result.join(',')}]`;
|
||||
return new SourceExpression([], source);
|
||||
@ -58,22 +63,23 @@ export class CommandCompiler {
|
||||
interface CommandFactory<R> {
|
||||
createText(value: string, isBound: boolean, ngContentIndex: number): R;
|
||||
createNgContent(ngContentIndex: number): R;
|
||||
createBeginElement(name: string, attrNameAndValues: string[], eventNames: string[],
|
||||
variableNameAndValues: string[], directives: NormalizedDirectiveMetadata[],
|
||||
createBeginElement(name: string, attrNameAndValues: string[], eventTargetAndNames: string[],
|
||||
variableNameAndValues: string[], directives: CompileDirectiveMetadata[],
|
||||
isBound: boolean, ngContentIndex: number): R;
|
||||
createEndElement(): R;
|
||||
createBeginComponent(name: string, attrNameAndValues: string[], eventNames: string[],
|
||||
variableNameAndValues: string[], directives: NormalizedDirectiveMetadata[],
|
||||
createBeginComponent(name: string, attrNameAndValues: string[], eventTargetAndNames: string[],
|
||||
variableNameAndValues: string[], directives: CompileDirectiveMetadata[],
|
||||
nativeShadow: boolean, ngContentIndex: number): R;
|
||||
createEndComponent(): R;
|
||||
createEmbeddedTemplate(attrNameAndValues: string[], variableNameAndValues: string[],
|
||||
directives: NormalizedDirectiveMetadata[], isMerged: boolean,
|
||||
ngContentIndex: number, children: R[]): R;
|
||||
createEmbeddedTemplate(embeddedTemplateIndex: number, attrNameAndValues: string[],
|
||||
variableNameAndValues: string[], directives: CompileDirectiveMetadata[],
|
||||
isMerged: boolean, ngContentIndex: number, children: R[]): R;
|
||||
}
|
||||
|
||||
class RuntimeCommandFactory implements CommandFactory<TemplateCmd> {
|
||||
constructor(public componentTemplateFactory: Function) {}
|
||||
private _mapDirectives(directives: NormalizedDirectiveMetadata[]): Type[] {
|
||||
constructor(public componentTemplateFactory: Function,
|
||||
public changeDetectorFactories: Function[]) {}
|
||||
private _mapDirectives(directives: CompileDirectiveMetadata[]): Type[] {
|
||||
return directives.map(directive => directive.type.runtime);
|
||||
}
|
||||
|
||||
@ -81,35 +87,46 @@ class RuntimeCommandFactory implements CommandFactory<TemplateCmd> {
|
||||
return text(value, isBound, ngContentIndex);
|
||||
}
|
||||
createNgContent(ngContentIndex: number): TemplateCmd { return ngContent(ngContentIndex); }
|
||||
createBeginElement(name: string, attrNameAndValues: string[], eventNames: string[],
|
||||
variableNameAndValues: string[], directives: NormalizedDirectiveMetadata[],
|
||||
createBeginElement(name: string, attrNameAndValues: string[], eventTargetAndNames: string[],
|
||||
variableNameAndValues: string[], directives: CompileDirectiveMetadata[],
|
||||
isBound: boolean, ngContentIndex: number): TemplateCmd {
|
||||
return beginElement(name, attrNameAndValues, eventNames, variableNameAndValues,
|
||||
return beginElement(name, attrNameAndValues, eventTargetAndNames, variableNameAndValues,
|
||||
this._mapDirectives(directives), isBound, ngContentIndex);
|
||||
}
|
||||
createEndElement(): TemplateCmd { return endElement(); }
|
||||
createBeginComponent(name: string, attrNameAndValues: string[], eventNames: string[],
|
||||
variableNameAndValues: string[], directives: NormalizedDirectiveMetadata[],
|
||||
createBeginComponent(name: string, attrNameAndValues: string[], eventTargetAndNames: string[],
|
||||
variableNameAndValues: string[], directives: CompileDirectiveMetadata[],
|
||||
nativeShadow: boolean, ngContentIndex: number): TemplateCmd {
|
||||
return beginComponent(name, attrNameAndValues, eventNames, variableNameAndValues,
|
||||
return beginComponent(name, attrNameAndValues, eventTargetAndNames, variableNameAndValues,
|
||||
this._mapDirectives(directives), nativeShadow, ngContentIndex,
|
||||
this.componentTemplateFactory(directives[0]));
|
||||
}
|
||||
createEndComponent(): TemplateCmd { return endComponent(); }
|
||||
createEmbeddedTemplate(attrNameAndValues: string[], variableNameAndValues: string[],
|
||||
directives: NormalizedDirectiveMetadata[], isMerged: boolean,
|
||||
ngContentIndex: number, children: TemplateCmd[]): TemplateCmd {
|
||||
createEmbeddedTemplate(embeddedTemplateIndex: number, attrNameAndValues: string[],
|
||||
variableNameAndValues: string[], directives: CompileDirectiveMetadata[],
|
||||
isMerged: boolean, ngContentIndex: number,
|
||||
children: TemplateCmd[]): TemplateCmd {
|
||||
return embeddedTemplate(attrNameAndValues, variableNameAndValues,
|
||||
this._mapDirectives(directives), isMerged, ngContentIndex, children);
|
||||
this._mapDirectives(directives), isMerged, ngContentIndex,
|
||||
this.changeDetectorFactories[embeddedTemplateIndex], children);
|
||||
}
|
||||
}
|
||||
|
||||
function escapeStringArray(data: string[]): string {
|
||||
return `[${data.map( value => escapeSingleQuoteString(value)).join(',')}]`;
|
||||
function escapePrimitiveArray(data: any[]): string {
|
||||
return `[${data.map( (value) => {
|
||||
if (isString(value)) {
|
||||
return escapeSingleQuoteString(value);
|
||||
} else if (isBlank(value)) {
|
||||
return 'null';
|
||||
} else {
|
||||
return value;
|
||||
}
|
||||
}).join(',')}]`;
|
||||
}
|
||||
|
||||
class CodegenCommandFactory implements CommandFactory<string> {
|
||||
constructor(public componentTemplateFactory: Function) {}
|
||||
constructor(public componentTemplateFactory: Function,
|
||||
public changeDetectorFactoryExpressions: string[]) {}
|
||||
|
||||
createText(value: string, isBound: boolean, ngContentIndex: number): string {
|
||||
return `${TEMPLATE_COMMANDS_MODULE_REF}text(${escapeSingleQuoteString(value)}, ${isBound}, ${ngContentIndex})`;
|
||||
@ -117,26 +134,27 @@ class CodegenCommandFactory implements CommandFactory<string> {
|
||||
createNgContent(ngContentIndex: number): string {
|
||||
return `${TEMPLATE_COMMANDS_MODULE_REF}ngContent(${ngContentIndex})`;
|
||||
}
|
||||
createBeginElement(name: string, attrNameAndValues: string[], eventNames: string[],
|
||||
variableNameAndValues: string[], directives: NormalizedDirectiveMetadata[],
|
||||
createBeginElement(name: string, attrNameAndValues: string[], eventTargetAndNames: string[],
|
||||
variableNameAndValues: string[], directives: CompileDirectiveMetadata[],
|
||||
isBound: boolean, ngContentIndex: number): string {
|
||||
return `${TEMPLATE_COMMANDS_MODULE_REF}beginElement(${escapeSingleQuoteString(name)}, ${escapeStringArray(attrNameAndValues)}, ${escapeStringArray(eventNames)}, ${escapeStringArray(variableNameAndValues)}, [${_escapeDirectives(directives).join(',')}], ${isBound}, ${ngContentIndex})`;
|
||||
return `${TEMPLATE_COMMANDS_MODULE_REF}beginElement(${escapeSingleQuoteString(name)}, ${escapePrimitiveArray(attrNameAndValues)}, ${escapePrimitiveArray(eventTargetAndNames)}, ${escapePrimitiveArray(variableNameAndValues)}, [${_escapeDirectives(directives).join(',')}], ${isBound}, ${ngContentIndex})`;
|
||||
}
|
||||
createEndElement(): string { return `${TEMPLATE_COMMANDS_MODULE_REF}endElement()`; }
|
||||
createBeginComponent(name: string, attrNameAndValues: string[], eventNames: string[],
|
||||
variableNameAndValues: string[], directives: NormalizedDirectiveMetadata[],
|
||||
createBeginComponent(name: string, attrNameAndValues: string[], eventTargetAndNames: string[],
|
||||
variableNameAndValues: string[], directives: CompileDirectiveMetadata[],
|
||||
nativeShadow: boolean, ngContentIndex: number): string {
|
||||
return `${TEMPLATE_COMMANDS_MODULE_REF}beginComponent(${escapeSingleQuoteString(name)}, ${escapeStringArray(attrNameAndValues)}, ${escapeStringArray(eventNames)}, ${escapeStringArray(variableNameAndValues)}, [${_escapeDirectives(directives).join(',')}], ${nativeShadow}, ${ngContentIndex}, ${this.componentTemplateFactory(directives[0])})`;
|
||||
return `${TEMPLATE_COMMANDS_MODULE_REF}beginComponent(${escapeSingleQuoteString(name)}, ${escapePrimitiveArray(attrNameAndValues)}, ${escapePrimitiveArray(eventTargetAndNames)}, ${escapePrimitiveArray(variableNameAndValues)}, [${_escapeDirectives(directives).join(',')}], ${nativeShadow}, ${ngContentIndex}, ${this.componentTemplateFactory(directives[0])})`;
|
||||
}
|
||||
createEndComponent(): string { return `${TEMPLATE_COMMANDS_MODULE_REF}endComponent()`; }
|
||||
createEmbeddedTemplate(attrNameAndValues: string[], variableNameAndValues: string[],
|
||||
directives: NormalizedDirectiveMetadata[], isMerged: boolean,
|
||||
ngContentIndex: number, children: string[]): string {
|
||||
return `${TEMPLATE_COMMANDS_MODULE_REF}embeddedTemplate(${escapeStringArray(attrNameAndValues)}, ${escapeStringArray(variableNameAndValues)}, [${_escapeDirectives(directives).join(',')}], ${isMerged}, ${ngContentIndex}, [${children.join(',')}])`;
|
||||
createEmbeddedTemplate(embeddedTemplateIndex: number, attrNameAndValues: string[],
|
||||
variableNameAndValues: string[], directives: CompileDirectiveMetadata[],
|
||||
isMerged: boolean, ngContentIndex: number, children: string[]): string {
|
||||
return `${TEMPLATE_COMMANDS_MODULE_REF}embeddedTemplate(${escapePrimitiveArray(attrNameAndValues)}, ${escapePrimitiveArray(variableNameAndValues)}, ` +
|
||||
`[${_escapeDirectives(directives).join(',')}], ${isMerged}, ${ngContentIndex}, ${this.changeDetectorFactoryExpressions[embeddedTemplateIndex]}, [${children.join(',')}])`;
|
||||
}
|
||||
}
|
||||
|
||||
function _escapeDirectives(directives: NormalizedDirectiveMetadata[]): string[] {
|
||||
function _escapeDirectives(directives: CompileDirectiveMetadata[]): string[] {
|
||||
return directives.map(directiveType =>
|
||||
`${moduleRef(directiveType.type.moduleId)}${directiveType.type.name}`);
|
||||
}
|
||||
@ -150,10 +168,11 @@ function visitAndReturnContext(visitor: TemplateAstVisitor, asts: TemplateAst[],
|
||||
class CommandBuilderVisitor<R> implements TemplateAstVisitor {
|
||||
result: R[] = [];
|
||||
transitiveNgContentCount: number = 0;
|
||||
constructor(public commandFactory: CommandFactory<R>,
|
||||
public component: NormalizedDirectiveMetadata) {}
|
||||
constructor(public commandFactory: CommandFactory<R>, public component: CompileDirectiveMetadata,
|
||||
public embeddedTemplateIndex: number) {}
|
||||
|
||||
private _readAttrNameAndValues(localComponent: NormalizedDirectiveMetadata,
|
||||
private _readAttrNameAndValues(localComponent: CompileDirectiveMetadata,
|
||||
directives: CompileDirectiveMetadata[],
|
||||
attrAsts: TemplateAst[]): string[] {
|
||||
var attrNameAndValues: string[] = visitAndReturnContext(this, attrAsts, []);
|
||||
if (isPresent(localComponent) &&
|
||||
@ -165,7 +184,13 @@ class CommandBuilderVisitor<R> implements TemplateAstVisitor {
|
||||
attrNameAndValues.push(shimContentAttribute(this.component.type.id));
|
||||
attrNameAndValues.push('');
|
||||
}
|
||||
return attrNameAndValues;
|
||||
directives.forEach(directiveMeta => {
|
||||
StringMapWrapper.forEach(directiveMeta.hostAttributes, (value, name) => {
|
||||
attrNameAndValues.push(name);
|
||||
attrNameAndValues.push(value);
|
||||
});
|
||||
});
|
||||
return removeKeyValueArrayDuplicates(attrNameAndValues);
|
||||
}
|
||||
|
||||
visitNgContent(ast: NgContentAst, context: any): any {
|
||||
@ -174,43 +199,61 @@ class CommandBuilderVisitor<R> implements TemplateAstVisitor {
|
||||
return null;
|
||||
}
|
||||
visitEmbeddedTemplate(ast: EmbeddedTemplateAst, context: any): any {
|
||||
var childVisitor = new CommandBuilderVisitor(this.commandFactory, this.component);
|
||||
this.embeddedTemplateIndex++;
|
||||
var childVisitor =
|
||||
new CommandBuilderVisitor(this.commandFactory, this.component, this.embeddedTemplateIndex);
|
||||
templateVisitAll(childVisitor, ast.children);
|
||||
var isMerged = childVisitor.transitiveNgContentCount > 0;
|
||||
this.transitiveNgContentCount += childVisitor.transitiveNgContentCount;
|
||||
var directivesAndEventNames = visitAndReturnContext(this, ast.directives, [[], []]);
|
||||
var variableNameAndValues = [];
|
||||
ast.vars.forEach((varAst) => {
|
||||
variableNameAndValues.push(varAst.name);
|
||||
variableNameAndValues.push(varAst.value);
|
||||
});
|
||||
var directives = [];
|
||||
ListWrapper.forEachWithIndex(ast.directives, (directiveAst: DirectiveAst, index: number) => {
|
||||
directiveAst.visit(this, new DirectiveContext(index, [], [], directives));
|
||||
});
|
||||
this.result.push(this.commandFactory.createEmbeddedTemplate(
|
||||
this._readAttrNameAndValues(null, ast.attrs), visitAndReturnContext(this, ast.vars, []),
|
||||
directivesAndEventNames[0], isMerged, ast.ngContentIndex, childVisitor.result));
|
||||
this.embeddedTemplateIndex, this._readAttrNameAndValues(null, directives, ast.attrs),
|
||||
variableNameAndValues, directives, isMerged, ast.ngContentIndex, childVisitor.result));
|
||||
this.transitiveNgContentCount += childVisitor.transitiveNgContentCount;
|
||||
this.embeddedTemplateIndex = childVisitor.embeddedTemplateIndex;
|
||||
return null;
|
||||
}
|
||||
visitElement(ast: ElementAst, context: any): any {
|
||||
var component = ast.getComponent();
|
||||
var eventNames = visitAndReturnContext(this, ast.events, []);
|
||||
var eventTargetAndNames = visitAndReturnContext(this, ast.events, []);
|
||||
var variableNameAndValues = [];
|
||||
if (isBlank(component)) {
|
||||
ast.exportAsVars.forEach((varAst) => {
|
||||
variableNameAndValues.push(varAst.name);
|
||||
variableNameAndValues.push(IMPLICIT_VAR);
|
||||
});
|
||||
}
|
||||
var directives = [];
|
||||
visitAndReturnContext(this, ast.directives, [directives, eventNames]);
|
||||
var attrNameAndValues = this._readAttrNameAndValues(component, ast.attrs);
|
||||
var vars = visitAndReturnContext(this, ast.vars, []);
|
||||
ListWrapper.forEachWithIndex(ast.directives, (directiveAst: DirectiveAst, index: number) => {
|
||||
directiveAst.visit(this, new DirectiveContext(index, eventTargetAndNames,
|
||||
variableNameAndValues, directives));
|
||||
});
|
||||
eventTargetAndNames = removeKeyValueArrayDuplicates(eventTargetAndNames);
|
||||
|
||||
var attrNameAndValues = this._readAttrNameAndValues(component, directives, ast.attrs);
|
||||
if (isPresent(component)) {
|
||||
this.result.push(this.commandFactory.createBeginComponent(
|
||||
ast.name, attrNameAndValues, eventNames, vars, directives,
|
||||
ast.name, attrNameAndValues, eventTargetAndNames, variableNameAndValues, directives,
|
||||
component.template.encapsulation === ViewEncapsulation.Native, ast.ngContentIndex));
|
||||
templateVisitAll(this, ast.children);
|
||||
this.result.push(this.commandFactory.createEndComponent());
|
||||
} else {
|
||||
this.result.push(this.commandFactory.createBeginElement(ast.name, attrNameAndValues,
|
||||
eventNames, vars, directives,
|
||||
ast.isBound(), ast.ngContentIndex));
|
||||
this.result.push(this.commandFactory.createBeginElement(
|
||||
ast.name, attrNameAndValues, eventTargetAndNames, variableNameAndValues, directives,
|
||||
ast.isBound(), ast.ngContentIndex));
|
||||
templateVisitAll(this, ast.children);
|
||||
this.result.push(this.commandFactory.createEndElement());
|
||||
}
|
||||
return null;
|
||||
}
|
||||
visitVariable(ast: VariableAst, variableNameAndValues: string[]): any {
|
||||
variableNameAndValues.push(ast.name);
|
||||
variableNameAndValues.push(ast.value);
|
||||
return null;
|
||||
}
|
||||
visitVariable(ast: VariableAst, ctx: any): any { return null; }
|
||||
visitAttr(ast: AttrAst, attrNameAndValues: string[]): any {
|
||||
attrNameAndValues.push(ast.name);
|
||||
attrNameAndValues.push(ast.value);
|
||||
@ -224,15 +267,42 @@ class CommandBuilderVisitor<R> implements TemplateAstVisitor {
|
||||
this.result.push(this.commandFactory.createText(ast.value, false, ast.ngContentIndex));
|
||||
return null;
|
||||
}
|
||||
visitDirective(ast: DirectiveAst, directivesAndEventNames: any[][]): any {
|
||||
directivesAndEventNames[0].push(ast.directive);
|
||||
templateVisitAll(this, ast.hostEvents, directivesAndEventNames[1]);
|
||||
visitDirective(ast: DirectiveAst, ctx: DirectiveContext): any {
|
||||
ctx.targetDirectives.push(ast.directive);
|
||||
templateVisitAll(this, ast.hostEvents, ctx.eventTargetAndNames);
|
||||
ast.exportAsVars.forEach(varAst => {
|
||||
ctx.targetVariableNameAndValues.push(varAst.name);
|
||||
ctx.targetVariableNameAndValues.push(ctx.index);
|
||||
});
|
||||
return null;
|
||||
}
|
||||
visitEvent(ast: BoundEventAst, eventNames: string[]): any {
|
||||
eventNames.push(ast.getFullName());
|
||||
visitEvent(ast: BoundEventAst, eventTargetAndNames: string[]): any {
|
||||
eventTargetAndNames.push(ast.target);
|
||||
eventTargetAndNames.push(ast.name);
|
||||
return null;
|
||||
}
|
||||
visitDirectiveProperty(ast: BoundDirectivePropertyAst, context: any): any { return null; }
|
||||
visitElementProperty(ast: BoundElementPropertyAst, context: any): any { return null; }
|
||||
}
|
||||
|
||||
function removeKeyValueArrayDuplicates(keyValueArray: string[]): string[] {
|
||||
var knownPairs = new Set();
|
||||
var resultKeyValueArray = [];
|
||||
for (var i = 0; i < keyValueArray.length; i += 2) {
|
||||
var key = keyValueArray[i];
|
||||
var value = keyValueArray[i + 1];
|
||||
var pairId = `${key}:${value}`;
|
||||
if (!SetWrapper.has(knownPairs, pairId)) {
|
||||
resultKeyValueArray.push(key);
|
||||
resultKeyValueArray.push(value);
|
||||
knownPairs.add(pairId);
|
||||
}
|
||||
}
|
||||
return resultKeyValueArray;
|
||||
}
|
||||
|
||||
class DirectiveContext {
|
||||
constructor(public index: number, public eventTargetAndNames: string[],
|
||||
public targetVariableNameAndValues: any[],
|
||||
public targetDirectives: CompileDirectiveMetadata[]) {}
|
||||
}
|
||||
@ -1,9 +1,7 @@
|
||||
export {TemplateCompiler} from './template_compiler';
|
||||
export {
|
||||
DirectiveMetadata,
|
||||
TypeMetadata,
|
||||
TemplateMetadata,
|
||||
ChangeDetectionMetadata,
|
||||
INormalizedDirectiveMetadata
|
||||
CompileDirectiveMetadata,
|
||||
CompileTypeMetadata,
|
||||
CompileTemplateMetadata
|
||||
} from './directive_metadata';
|
||||
export {SourceModule, SourceWithImports} from './source_module';
|
||||
|
||||
@ -1,12 +1,27 @@
|
||||
import {isPresent, normalizeBool, serializeEnum, Type} from 'angular2/src/core/facade/lang';
|
||||
import {
|
||||
isPresent,
|
||||
isBlank,
|
||||
normalizeBool,
|
||||
serializeEnum,
|
||||
Type,
|
||||
RegExpWrapper,
|
||||
StringWrapper
|
||||
} from 'angular2/src/core/facade/lang';
|
||||
import {StringMapWrapper} from 'angular2/src/core/facade/collection';
|
||||
import {
|
||||
ChangeDetectionStrategy,
|
||||
changeDetectionStrategyFromJson
|
||||
CHANGE_DECTION_STRATEGY_VALUES
|
||||
} from 'angular2/src/core/change_detection/change_detection';
|
||||
import {ViewEncapsulation, viewEncapsulationFromJson} from 'angular2/src/core/render/api';
|
||||
import {ViewEncapsulation, VIEW_ENCAPSULATION_VALUES} from 'angular2/src/core/render/api';
|
||||
import {CssSelector} from 'angular2/src/core/render/dom/compiler/selector';
|
||||
import {splitAtColon} from './util';
|
||||
import {LifecycleHooks, LIFECYCLE_HOOKS_VALUES} from 'angular2/src/core/compiler/interfaces';
|
||||
|
||||
export class TypeMetadata {
|
||||
// group 1: "property" from "[property]"
|
||||
// group 2: "event" from "(event)"
|
||||
var HOST_REG_EXP = /^(?:(?:\[([^\]]+)\])|(?:\(([^\)]+)\)))$/g;
|
||||
|
||||
export class CompileTypeMetadata {
|
||||
id: number;
|
||||
runtime: Type;
|
||||
name: string;
|
||||
@ -19,8 +34,9 @@ export class TypeMetadata {
|
||||
this.moduleId = moduleId;
|
||||
}
|
||||
|
||||
static fromJson(data: StringMap<string, any>): TypeMetadata {
|
||||
return new TypeMetadata({id: data['id'], name: data['name'], moduleId: data['moduleId']});
|
||||
static fromJson(data: StringMap<string, any>): CompileTypeMetadata {
|
||||
return new CompileTypeMetadata(
|
||||
{id: data['id'], name: data['name'], moduleId: data['moduleId']});
|
||||
}
|
||||
|
||||
toJson(): StringMap<string, any> {
|
||||
@ -33,169 +49,39 @@ export class TypeMetadata {
|
||||
}
|
||||
}
|
||||
|
||||
export class ChangeDetectionMetadata {
|
||||
changeDetection: ChangeDetectionStrategy;
|
||||
properties: string[];
|
||||
events: string[];
|
||||
hostListeners: StringMap<string, string>;
|
||||
hostProperties: StringMap<string, string>;
|
||||
callAfterContentInit: boolean;
|
||||
callAfterContentChecked: boolean;
|
||||
callAfterViewInit: boolean;
|
||||
callAfterViewChecked: boolean;
|
||||
callOnChanges: boolean;
|
||||
callDoCheck: boolean;
|
||||
callOnInit: boolean;
|
||||
constructor({changeDetection, properties, events, hostListeners, hostProperties,
|
||||
callAfterContentInit, callAfterContentChecked, callAfterViewInit,
|
||||
callAfterViewChecked, callOnChanges, callDoCheck, callOnInit}: {
|
||||
changeDetection?: ChangeDetectionStrategy,
|
||||
properties?: string[],
|
||||
events?: string[],
|
||||
hostListeners?: StringMap<string, string>,
|
||||
hostProperties?: StringMap<string, string>,
|
||||
callAfterContentInit?: boolean,
|
||||
callAfterContentChecked?: boolean,
|
||||
callAfterViewInit?: boolean,
|
||||
callAfterViewChecked?: boolean,
|
||||
callOnChanges?: boolean,
|
||||
callDoCheck?: boolean,
|
||||
callOnInit?: boolean
|
||||
} = {}) {
|
||||
this.changeDetection = changeDetection;
|
||||
this.properties = isPresent(properties) ? properties : [];
|
||||
this.events = isPresent(events) ? events : [];
|
||||
this.hostListeners = isPresent(hostListeners) ? hostListeners : {};
|
||||
this.hostProperties = isPresent(hostProperties) ? hostProperties : {};
|
||||
this.callAfterContentInit = normalizeBool(callAfterContentInit);
|
||||
this.callAfterContentChecked = normalizeBool(callAfterContentChecked);
|
||||
this.callAfterViewInit = normalizeBool(callAfterViewInit);
|
||||
this.callAfterViewChecked = normalizeBool(callAfterViewChecked);
|
||||
this.callOnChanges = normalizeBool(callOnChanges);
|
||||
this.callDoCheck = normalizeBool(callDoCheck);
|
||||
this.callOnInit = normalizeBool(callOnInit);
|
||||
}
|
||||
|
||||
static fromJson(data: StringMap<string, any>): ChangeDetectionMetadata {
|
||||
return new ChangeDetectionMetadata({
|
||||
changeDetection: isPresent(data['changeDetection']) ?
|
||||
changeDetectionStrategyFromJson(data['changeDetection']) :
|
||||
data['changeDetection'],
|
||||
properties: data['properties'],
|
||||
events: data['events'],
|
||||
hostListeners: data['hostListeners'],
|
||||
hostProperties: data['hostProperties'],
|
||||
callAfterContentInit: data['callAfterContentInit'],
|
||||
callAfterContentChecked: data['callAfterContentChecked'],
|
||||
callAfterViewInit: data['callAfterViewInit'],
|
||||
callAfterViewChecked: data['callAfterViewChecked'],
|
||||
callOnChanges: data['callOnChanges'],
|
||||
callDoCheck: data['callDoCheck'],
|
||||
callOnInit: data['callOnInit']
|
||||
});
|
||||
}
|
||||
|
||||
toJson(): StringMap<string, any> {
|
||||
return {
|
||||
'changeDetection': isPresent(this.changeDetection) ? serializeEnum(this.changeDetection) :
|
||||
this.changeDetection,
|
||||
'properties': this.properties,
|
||||
'events': this.events,
|
||||
'hostListeners': this.hostListeners,
|
||||
'hostProperties': this.hostProperties,
|
||||
'callAfterContentInit': this.callAfterContentInit,
|
||||
'callAfterContentChecked': this.callAfterContentChecked,
|
||||
'callAfterViewInit': this.callAfterViewInit,
|
||||
'callAfterViewChecked': this.callAfterViewChecked,
|
||||
'callOnChanges': this.callOnChanges,
|
||||
'callDoCheck': this.callDoCheck,
|
||||
'callOnInit': this.callOnInit
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
export class TemplateMetadata {
|
||||
export class CompileTemplateMetadata {
|
||||
encapsulation: ViewEncapsulation;
|
||||
template: string;
|
||||
templateUrl: string;
|
||||
styles: string[];
|
||||
styleUrls: string[];
|
||||
hostAttributes: StringMap<string, string>;
|
||||
constructor({encapsulation, template, templateUrl, styles, styleUrls, hostAttributes}: {
|
||||
ngContentSelectors: string[];
|
||||
constructor({encapsulation, template, templateUrl, styles, styleUrls, ngContentSelectors}: {
|
||||
encapsulation?: ViewEncapsulation,
|
||||
template?: string,
|
||||
templateUrl?: string,
|
||||
styles?: string[],
|
||||
styleUrls?: string[],
|
||||
hostAttributes?: StringMap<string, string>
|
||||
ngContentSelectors?: string[]
|
||||
} = {}) {
|
||||
this.encapsulation = isPresent(encapsulation) ? encapsulation : ViewEncapsulation.None;
|
||||
this.encapsulation = encapsulation;
|
||||
this.template = template;
|
||||
this.templateUrl = templateUrl;
|
||||
this.styles = isPresent(styles) ? styles : [];
|
||||
this.styleUrls = isPresent(styleUrls) ? styleUrls : [];
|
||||
this.hostAttributes = isPresent(hostAttributes) ? hostAttributes : {};
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export class DirectiveMetadata {
|
||||
type: TypeMetadata;
|
||||
isComponent: boolean;
|
||||
dynamicLoadable: boolean;
|
||||
selector: string;
|
||||
changeDetection: ChangeDetectionMetadata;
|
||||
template: TemplateMetadata;
|
||||
constructor({type, isComponent, dynamicLoadable, selector, changeDetection, template}: {
|
||||
type?: TypeMetadata,
|
||||
isComponent?: boolean,
|
||||
dynamicLoadable?: boolean,
|
||||
selector?: string,
|
||||
changeDetection?: ChangeDetectionMetadata,
|
||||
template?: TemplateMetadata
|
||||
} = {}) {
|
||||
this.type = type;
|
||||
this.isComponent = normalizeBool(isComponent);
|
||||
this.dynamicLoadable = normalizeBool(dynamicLoadable);
|
||||
this.selector = selector;
|
||||
this.changeDetection = changeDetection;
|
||||
this.template = template;
|
||||
}
|
||||
}
|
||||
|
||||
export class NormalizedTemplateMetadata {
|
||||
encapsulation: ViewEncapsulation;
|
||||
template: string;
|
||||
styles: string[];
|
||||
styleAbsUrls: string[];
|
||||
ngContentSelectors: string[];
|
||||
hostAttributes: StringMap<string, string>;
|
||||
constructor({encapsulation, template, styles, styleAbsUrls, ngContentSelectors, hostAttributes}: {
|
||||
encapsulation?: ViewEncapsulation,
|
||||
template?: string,
|
||||
styles?: string[],
|
||||
styleAbsUrls?: string[],
|
||||
ngContentSelectors?: string[],
|
||||
hostAttributes?: StringMap<string, string>
|
||||
} = {}) {
|
||||
this.encapsulation = encapsulation;
|
||||
this.template = template;
|
||||
this.styles = styles;
|
||||
this.styleAbsUrls = styleAbsUrls;
|
||||
this.ngContentSelectors = ngContentSelectors;
|
||||
this.hostAttributes = hostAttributes;
|
||||
this.ngContentSelectors = isPresent(ngContentSelectors) ? ngContentSelectors : [];
|
||||
}
|
||||
|
||||
static fromJson(data: StringMap<string, any>): NormalizedTemplateMetadata {
|
||||
return new NormalizedTemplateMetadata({
|
||||
static fromJson(data: StringMap<string, any>): CompileTemplateMetadata {
|
||||
return new CompileTemplateMetadata({
|
||||
encapsulation: isPresent(data['encapsulation']) ?
|
||||
viewEncapsulationFromJson(data['encapsulation']) :
|
||||
VIEW_ENCAPSULATION_VALUES[data['encapsulation']] :
|
||||
data['encapsulation'],
|
||||
template: data['template'],
|
||||
templateUrl: data['templateUrl'],
|
||||
styles: data['styles'],
|
||||
styleAbsUrls: data['styleAbsUrls'],
|
||||
ngContentSelectors: data['ngContentSelectors'],
|
||||
hostAttributes: data['hostAttributes']
|
||||
styleUrls: data['styleUrls'],
|
||||
ngContentSelectors: data['ngContentSelectors']
|
||||
});
|
||||
}
|
||||
|
||||
@ -204,52 +90,142 @@ export class NormalizedTemplateMetadata {
|
||||
'encapsulation':
|
||||
isPresent(this.encapsulation) ? serializeEnum(this.encapsulation) : this.encapsulation,
|
||||
'template': this.template,
|
||||
'templateUrl': this.templateUrl,
|
||||
'styles': this.styles,
|
||||
'styleAbsUrls': this.styleAbsUrls,
|
||||
'ngContentSelectors': this.ngContentSelectors,
|
||||
'hostAttributes': this.hostAttributes
|
||||
'styleUrls': this.styleUrls,
|
||||
'ngContentSelectors': this.ngContentSelectors
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
export interface INormalizedDirectiveMetadata {}
|
||||
|
||||
export class NormalizedDirectiveMetadata implements INormalizedDirectiveMetadata {
|
||||
type: TypeMetadata;
|
||||
isComponent: boolean;
|
||||
dynamicLoadable: boolean;
|
||||
selector: string;
|
||||
changeDetection: ChangeDetectionMetadata;
|
||||
template: NormalizedTemplateMetadata;
|
||||
constructor({type, isComponent, dynamicLoadable, selector, changeDetection, template}: {
|
||||
id?: number,
|
||||
type?: TypeMetadata,
|
||||
export class CompileDirectiveMetadata {
|
||||
static create({type, isComponent, dynamicLoadable, selector, exportAs, changeDetection,
|
||||
properties, events, host, lifecycleHooks, template}: {
|
||||
type?: CompileTypeMetadata,
|
||||
isComponent?: boolean,
|
||||
dynamicLoadable?: boolean,
|
||||
selector?: string,
|
||||
changeDetection?: ChangeDetectionMetadata,
|
||||
template?: NormalizedTemplateMetadata
|
||||
exportAs?: string,
|
||||
changeDetection?: ChangeDetectionStrategy,
|
||||
properties?: string[],
|
||||
events?: string[],
|
||||
host?: StringMap<string, string>,
|
||||
lifecycleHooks?: LifecycleHooks[],
|
||||
template?: CompileTemplateMetadata
|
||||
} = {}): CompileDirectiveMetadata {
|
||||
var hostListeners = {};
|
||||
var hostProperties = {};
|
||||
var hostAttributes = {};
|
||||
if (isPresent(host)) {
|
||||
StringMapWrapper.forEach(host, (value: string, key: string) => {
|
||||
var matches = RegExpWrapper.firstMatch(HOST_REG_EXP, key);
|
||||
if (isBlank(matches)) {
|
||||
hostAttributes[key] = value;
|
||||
} else if (isPresent(matches[1])) {
|
||||
hostProperties[matches[1]] = value;
|
||||
} else if (isPresent(matches[2])) {
|
||||
hostListeners[matches[2]] = value;
|
||||
}
|
||||
});
|
||||
}
|
||||
var propsMap = {};
|
||||
if (isPresent(properties)) {
|
||||
properties.forEach((bindConfig: string) => {
|
||||
// canonical syntax: `dirProp: elProp`
|
||||
// if there is no `:`, use dirProp = elProp
|
||||
var parts = splitAtColon(bindConfig, [bindConfig, bindConfig]);
|
||||
propsMap[parts[0]] = parts[1];
|
||||
});
|
||||
}
|
||||
var eventsMap = {};
|
||||
if (isPresent(events)) {
|
||||
events.forEach((bindConfig: string) => {
|
||||
// canonical syntax: `dirProp: elProp`
|
||||
// if there is no `:`, use dirProp = elProp
|
||||
var parts = splitAtColon(bindConfig, [bindConfig, bindConfig]);
|
||||
eventsMap[parts[0]] = parts[1];
|
||||
});
|
||||
}
|
||||
|
||||
return new CompileDirectiveMetadata({
|
||||
type: type,
|
||||
isComponent: normalizeBool(isComponent),
|
||||
dynamicLoadable: normalizeBool(dynamicLoadable),
|
||||
selector: selector,
|
||||
exportAs: exportAs,
|
||||
changeDetection: changeDetection,
|
||||
properties: propsMap,
|
||||
events: eventsMap,
|
||||
hostListeners: hostListeners,
|
||||
hostProperties: hostProperties,
|
||||
hostAttributes: hostAttributes,
|
||||
lifecycleHooks: isPresent(lifecycleHooks) ? lifecycleHooks : [], template: template
|
||||
});
|
||||
}
|
||||
|
||||
type: CompileTypeMetadata;
|
||||
isComponent: boolean;
|
||||
dynamicLoadable: boolean;
|
||||
selector: string;
|
||||
exportAs: string;
|
||||
changeDetection: ChangeDetectionStrategy;
|
||||
properties: StringMap<string, string>;
|
||||
events: StringMap<string, string>;
|
||||
hostListeners: StringMap<string, string>;
|
||||
hostProperties: StringMap<string, string>;
|
||||
hostAttributes: StringMap<string, string>;
|
||||
lifecycleHooks: LifecycleHooks[];
|
||||
template: CompileTemplateMetadata;
|
||||
constructor({type, isComponent, dynamicLoadable, selector, exportAs, changeDetection, properties,
|
||||
events, hostListeners, hostProperties, hostAttributes, lifecycleHooks, template}: {
|
||||
type?: CompileTypeMetadata,
|
||||
isComponent?: boolean,
|
||||
dynamicLoadable?: boolean,
|
||||
selector?: string,
|
||||
exportAs?: string,
|
||||
changeDetection?: ChangeDetectionStrategy,
|
||||
properties?: StringMap<string, string>,
|
||||
events?: StringMap<string, string>,
|
||||
hostListeners?: StringMap<string, string>,
|
||||
hostProperties?: StringMap<string, string>,
|
||||
hostAttributes?: StringMap<string, string>,
|
||||
lifecycleHooks?: LifecycleHooks[],
|
||||
template?: CompileTemplateMetadata
|
||||
} = {}) {
|
||||
this.type = type;
|
||||
this.isComponent = normalizeBool(isComponent);
|
||||
this.dynamicLoadable = normalizeBool(dynamicLoadable);
|
||||
this.isComponent = isComponent;
|
||||
this.dynamicLoadable = dynamicLoadable;
|
||||
this.selector = selector;
|
||||
this.exportAs = exportAs;
|
||||
this.changeDetection = changeDetection;
|
||||
this.properties = properties;
|
||||
this.events = events;
|
||||
this.hostListeners = hostListeners;
|
||||
this.hostProperties = hostProperties;
|
||||
this.hostAttributes = hostAttributes;
|
||||
this.lifecycleHooks = lifecycleHooks;
|
||||
this.template = template;
|
||||
}
|
||||
|
||||
static fromJson(data: StringMap<string, any>): NormalizedDirectiveMetadata {
|
||||
return new NormalizedDirectiveMetadata({
|
||||
static fromJson(data: StringMap<string, any>): CompileDirectiveMetadata {
|
||||
return new CompileDirectiveMetadata({
|
||||
isComponent: data['isComponent'],
|
||||
dynamicLoadable: data['dynamicLoadable'],
|
||||
selector: data['selector'],
|
||||
type: isPresent(data['type']) ? TypeMetadata.fromJson(data['type']) : data['type'],
|
||||
exportAs: data['exportAs'],
|
||||
type: isPresent(data['type']) ? CompileTypeMetadata.fromJson(data['type']) : data['type'],
|
||||
changeDetection: isPresent(data['changeDetection']) ?
|
||||
ChangeDetectionMetadata.fromJson(data['changeDetection']) :
|
||||
CHANGE_DECTION_STRATEGY_VALUES[data['changeDetection']] :
|
||||
data['changeDetection'],
|
||||
template:
|
||||
isPresent(data['template']) ? NormalizedTemplateMetadata.fromJson(data['template']) :
|
||||
data['template']
|
||||
properties: data['properties'],
|
||||
events: data['events'],
|
||||
hostListeners: data['hostListeners'],
|
||||
hostProperties: data['hostProperties'],
|
||||
hostAttributes: data['hostAttributes'],
|
||||
lifecycleHooks:
|
||||
(<any[]>data['lifecycleHooks']).map(hookValue => LIFECYCLE_HOOKS_VALUES[hookValue]),
|
||||
template: isPresent(data['template']) ? CompileTemplateMetadata.fromJson(data['template']) :
|
||||
data['template']
|
||||
});
|
||||
}
|
||||
|
||||
@ -258,45 +234,38 @@ export class NormalizedDirectiveMetadata implements INormalizedDirectiveMetadata
|
||||
'isComponent': this.isComponent,
|
||||
'dynamicLoadable': this.dynamicLoadable,
|
||||
'selector': this.selector,
|
||||
'exportAs': this.exportAs,
|
||||
'type': isPresent(this.type) ? this.type.toJson() : this.type,
|
||||
'changeDetection':
|
||||
isPresent(this.changeDetection) ? this.changeDetection.toJson() : this.changeDetection,
|
||||
'changeDetection': isPresent(this.changeDetection) ? serializeEnum(this.changeDetection) :
|
||||
this.changeDetection,
|
||||
'properties': this.properties,
|
||||
'events': this.events,
|
||||
'hostListeners': this.hostListeners,
|
||||
'hostProperties': this.hostProperties,
|
||||
'hostAttributes': this.hostAttributes,
|
||||
'lifecycleHooks': this.lifecycleHooks.map(hook => serializeEnum(hook)),
|
||||
'template': isPresent(this.template) ? this.template.toJson() : this.template
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
export function createHostComponentMeta(componentType: TypeMetadata, componentSelector: string):
|
||||
NormalizedDirectiveMetadata {
|
||||
export function createHostComponentMeta(componentType: CompileTypeMetadata,
|
||||
componentSelector: string): CompileDirectiveMetadata {
|
||||
var template = CssSelector.parse(componentSelector)[0].getMatchingElementTemplate();
|
||||
return new NormalizedDirectiveMetadata({
|
||||
type: new TypeMetadata({
|
||||
return CompileDirectiveMetadata.create({
|
||||
type: new CompileTypeMetadata({
|
||||
runtime: Object,
|
||||
id: (componentType.id * -1) - 1,
|
||||
name: `Host${componentType.name}`,
|
||||
moduleId: componentType.moduleId
|
||||
}),
|
||||
template: new NormalizedTemplateMetadata({
|
||||
template: template,
|
||||
styles: [],
|
||||
styleAbsUrls: [],
|
||||
hostAttributes: {},
|
||||
ngContentSelectors: []
|
||||
}),
|
||||
changeDetection: new ChangeDetectionMetadata({
|
||||
changeDetection: ChangeDetectionStrategy.Default,
|
||||
properties: [],
|
||||
events: [],
|
||||
hostListeners: {},
|
||||
hostProperties: {},
|
||||
callAfterContentInit: false,
|
||||
callAfterContentChecked: false,
|
||||
callAfterViewInit: false,
|
||||
callAfterViewChecked: false,
|
||||
callOnChanges: false,
|
||||
callDoCheck: false,
|
||||
callOnInit: false
|
||||
}),
|
||||
template: new CompileTemplateMetadata(
|
||||
{template: template, templateUrl: '', styles: [], styleUrls: [], ngContentSelectors: []}),
|
||||
changeDetection: ChangeDetectionStrategy.Default,
|
||||
properties: [],
|
||||
events: [],
|
||||
host: {},
|
||||
lifecycleHooks: [],
|
||||
isComponent: true,
|
||||
dynamicLoadable: false,
|
||||
selector: '*'
|
||||
|
||||
@ -8,14 +8,14 @@ import {
|
||||
RegExpWrapper
|
||||
} from 'angular2/src/core/facade/lang';
|
||||
import {BaseException} from 'angular2/src/core/facade/exceptions';
|
||||
import {MapWrapper, StringMapWrapper} from 'angular2/src/core/facade/collection';
|
||||
import {MapWrapper, StringMapWrapper, ListWrapper} from 'angular2/src/core/facade/collection';
|
||||
import * as cpl from './directive_metadata';
|
||||
import * as dirAnn from 'angular2/src/core/metadata/directives';
|
||||
import {DirectiveResolver} from 'angular2/src/core/compiler/directive_resolver';
|
||||
import {ViewResolver} from 'angular2/src/core/compiler/view_resolver';
|
||||
import {ViewMetadata} from 'angular2/src/core/metadata/view';
|
||||
import {hasLifecycleHook} from 'angular2/src/core/compiler/directive_lifecycle_reflector';
|
||||
import {LifecycleHooks} from 'angular2/src/core/compiler/interfaces';
|
||||
import {LifecycleHooks, LIFECYCLE_HOOKS_VALUES} from 'angular2/src/core/compiler/interfaces';
|
||||
import {reflector} from 'angular2/src/core/reflection/reflection';
|
||||
import {Injectable} from 'angular2/src/core/di';
|
||||
|
||||
@ -26,81 +26,55 @@ var HOST_REG_EXP = /^(?:(?:\[([^\]]+)\])|(?:\(([^\)]+)\)))$/g;
|
||||
@Injectable()
|
||||
export class RuntimeMetadataResolver {
|
||||
private _directiveCounter = 0;
|
||||
private _cache: Map<Type, cpl.DirectiveMetadata> = new Map();
|
||||
private _cache: Map<Type, cpl.CompileDirectiveMetadata> = new Map();
|
||||
|
||||
constructor(private _directiveResolver: DirectiveResolver, private _viewResolver: ViewResolver) {}
|
||||
|
||||
getMetadata(directiveType: Type): cpl.DirectiveMetadata {
|
||||
getMetadata(directiveType: Type): cpl.CompileDirectiveMetadata {
|
||||
var meta = this._cache.get(directiveType);
|
||||
if (isBlank(meta)) {
|
||||
var directiveAnnotation = this._directiveResolver.resolve(directiveType);
|
||||
var moduleId = calcModuleId(directiveType, directiveAnnotation);
|
||||
var templateMeta = null;
|
||||
var hostListeners = {};
|
||||
var hostProperties = {};
|
||||
var hostAttributes = {};
|
||||
var changeDetectionStrategy = null;
|
||||
var dynamicLoadable: boolean = false;
|
||||
|
||||
if (isPresent(directiveAnnotation.host)) {
|
||||
StringMapWrapper.forEach(directiveAnnotation.host, (value: string, key: string) => {
|
||||
var matches = RegExpWrapper.firstMatch(HOST_REG_EXP, key);
|
||||
if (isBlank(matches)) {
|
||||
hostAttributes[key] = value;
|
||||
} else if (isPresent(matches[1])) {
|
||||
hostProperties[matches[1]] = value;
|
||||
} else if (isPresent(matches[2])) {
|
||||
hostListeners[matches[2]] = value;
|
||||
}
|
||||
});
|
||||
}
|
||||
if (directiveAnnotation instanceof dirAnn.ComponentMetadata) {
|
||||
var compAnnotation = <dirAnn.ComponentMetadata>directiveAnnotation;
|
||||
var viewAnnotation = this._viewResolver.resolve(directiveType);
|
||||
templateMeta = new cpl.TemplateMetadata({
|
||||
templateMeta = new cpl.CompileTemplateMetadata({
|
||||
encapsulation: viewAnnotation.encapsulation,
|
||||
template: viewAnnotation.template,
|
||||
templateUrl: viewAnnotation.templateUrl,
|
||||
styles: viewAnnotation.styles,
|
||||
styleUrls: viewAnnotation.styleUrls,
|
||||
hostAttributes: hostAttributes
|
||||
styleUrls: viewAnnotation.styleUrls
|
||||
});
|
||||
changeDetectionStrategy = compAnnotation.changeDetection;
|
||||
dynamicLoadable = compAnnotation.dynamicLoadable;
|
||||
}
|
||||
meta = new cpl.DirectiveMetadata({
|
||||
meta = cpl.CompileDirectiveMetadata.create({
|
||||
selector: directiveAnnotation.selector,
|
||||
exportAs: directiveAnnotation.exportAs,
|
||||
isComponent: isPresent(templateMeta),
|
||||
dynamicLoadable: dynamicLoadable,
|
||||
type: new cpl.TypeMetadata({
|
||||
dynamicLoadable: true,
|
||||
type: new cpl.CompileTypeMetadata({
|
||||
id: this._directiveCounter++,
|
||||
name: stringify(directiveType),
|
||||
moduleId: moduleId,
|
||||
runtime: directiveType
|
||||
}),
|
||||
template: templateMeta,
|
||||
changeDetection: new cpl.ChangeDetectionMetadata({
|
||||
changeDetection: changeDetectionStrategy,
|
||||
properties: directiveAnnotation.properties,
|
||||
events: directiveAnnotation.events,
|
||||
hostListeners: hostListeners,
|
||||
hostProperties: hostProperties,
|
||||
callAfterContentInit: hasLifecycleHook(LifecycleHooks.AfterContentInit, directiveType),
|
||||
callAfterContentChecked:
|
||||
hasLifecycleHook(LifecycleHooks.AfterContentChecked, directiveType),
|
||||
callAfterViewInit: hasLifecycleHook(LifecycleHooks.AfterViewInit, directiveType),
|
||||
callAfterViewChecked: hasLifecycleHook(LifecycleHooks.AfterViewChecked, directiveType),
|
||||
callOnChanges: hasLifecycleHook(LifecycleHooks.OnChanges, directiveType),
|
||||
callDoCheck: hasLifecycleHook(LifecycleHooks.DoCheck, directiveType),
|
||||
callOnInit: hasLifecycleHook(LifecycleHooks.OnInit, directiveType),
|
||||
})
|
||||
changeDetection: changeDetectionStrategy,
|
||||
properties: directiveAnnotation.properties,
|
||||
events: directiveAnnotation.events,
|
||||
host: directiveAnnotation.host,
|
||||
lifecycleHooks: ListWrapper.filter(LIFECYCLE_HOOKS_VALUES,
|
||||
hook => hasLifecycleHook(hook, directiveType))
|
||||
});
|
||||
this._cache.set(directiveType, meta);
|
||||
}
|
||||
return meta;
|
||||
}
|
||||
|
||||
getViewDirectivesMetadata(component: Type): cpl.DirectiveMetadata[] {
|
||||
getViewDirectivesMetadata(component: Type): cpl.CompileDirectiveMetadata[] {
|
||||
var view = this._viewResolver.resolve(component);
|
||||
var directives = flattenDirectives(view);
|
||||
for (var i = 0; i < directives.length; i++) {
|
||||
@ -113,8 +87,9 @@ export class RuntimeMetadataResolver {
|
||||
}
|
||||
}
|
||||
|
||||
function removeDuplicatedDirectives(directives: cpl.DirectiveMetadata[]): cpl.DirectiveMetadata[] {
|
||||
var directivesMap: Map<number, cpl.DirectiveMetadata> = new Map();
|
||||
function removeDuplicatedDirectives(directives: cpl.CompileDirectiveMetadata[]):
|
||||
cpl.CompileDirectiveMetadata[] {
|
||||
var directivesMap: Map<number, cpl.CompileDirectiveMetadata> = new Map();
|
||||
directives.forEach((dirMeta) => { directivesMap.set(dirMeta.type.id, dirMeta); });
|
||||
return MapWrapper.values(directivesMap);
|
||||
}
|
||||
|
||||
@ -35,6 +35,10 @@ export class SourceExpression {
|
||||
constructor(public declarations: string[], public expression: string) {}
|
||||
}
|
||||
|
||||
export class SourceExpressions {
|
||||
constructor(public declarations: string[], public expressions: string[]) {}
|
||||
}
|
||||
|
||||
export class SourceWithImports {
|
||||
constructor(public source: string, public imports: string[][]) {}
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import {TypeMetadata, NormalizedDirectiveMetadata} from './directive_metadata';
|
||||
import {CompileTypeMetadata, CompileDirectiveMetadata} 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,16 +29,16 @@ export class StyleCompiler {
|
||||
|
||||
constructor(private _xhr: XHR, private _urlResolver: UrlResolver) {}
|
||||
|
||||
compileComponentRuntime(component: NormalizedDirectiveMetadata): Promise<string[]> {
|
||||
compileComponentRuntime(component: CompileDirectiveMetadata): Promise<string[]> {
|
||||
var styles = component.template.styles;
|
||||
var styleAbsUrls = component.template.styleAbsUrls;
|
||||
var styleAbsUrls = component.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}`)));
|
||||
}
|
||||
|
||||
compileComponentCodeGen(component: NormalizedDirectiveMetadata): SourceExpression {
|
||||
compileComponentCodeGen(component: CompileDirectiveMetadata): SourceExpression {
|
||||
var shim = component.template.encapsulation === ViewEncapsulation.Emulated;
|
||||
var suffix;
|
||||
if (shim) {
|
||||
@ -48,7 +48,7 @@ export class StyleCompiler {
|
||||
} else {
|
||||
suffix = '';
|
||||
}
|
||||
return this._styleCodeGen(component.template.styles, component.template.styleAbsUrls, shim,
|
||||
return this._styleCodeGen(component.template.styles, component.template.styleUrls, shim,
|
||||
suffix);
|
||||
}
|
||||
|
||||
@ -62,6 +62,8 @@ export class StyleCompiler {
|
||||
];
|
||||
}
|
||||
|
||||
clearCache() { this._styleCache.clear(); }
|
||||
|
||||
private _loadStyles(plainStyles: string[], absUrls: string[],
|
||||
encapsulate: boolean): Promise<string[]> {
|
||||
var promises = absUrls.map((absUrl) => {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import {AST} from 'angular2/src/core/change_detection/change_detection';
|
||||
import {isPresent} from 'angular2/src/core/facade/lang';
|
||||
import {NormalizedDirectiveMetadata} from './directive_metadata';
|
||||
import {CompileDirectiveMetadata} from './directive_metadata';
|
||||
|
||||
export interface TemplateAst {
|
||||
sourceInfo: string;
|
||||
@ -38,7 +38,7 @@ export class BoundEventAst implements TemplateAst {
|
||||
visit(visitor: TemplateAstVisitor, context: any): any {
|
||||
return visitor.visitEvent(this, context);
|
||||
}
|
||||
getFullName(): string {
|
||||
get fullName() {
|
||||
if (isPresent(this.target)) {
|
||||
return `${this.target}:${this.name}`;
|
||||
} else {
|
||||
@ -57,7 +57,7 @@ export class VariableAst implements TemplateAst {
|
||||
export class ElementAst implements TemplateAst {
|
||||
constructor(public name: string, public attrs: AttrAst[],
|
||||
public properties: BoundElementPropertyAst[], public events: BoundEventAst[],
|
||||
public vars: VariableAst[], public directives: DirectiveAst[],
|
||||
public exportAsVars: VariableAst[], public directives: DirectiveAst[],
|
||||
public children: TemplateAst[], public ngContentIndex: number,
|
||||
public sourceInfo: string) {}
|
||||
visit(visitor: TemplateAstVisitor, context: any): any {
|
||||
@ -65,11 +65,11 @@ export class ElementAst implements TemplateAst {
|
||||
}
|
||||
|
||||
isBound(): boolean {
|
||||
return (this.properties.length > 0 || this.events.length > 0 || this.vars.length > 0 ||
|
||||
return (this.properties.length > 0 || this.events.length > 0 || this.exportAsVars.length > 0 ||
|
||||
this.directives.length > 0);
|
||||
}
|
||||
|
||||
getComponent(): NormalizedDirectiveMetadata {
|
||||
getComponent(): CompileDirectiveMetadata {
|
||||
return this.directives.length > 0 && this.directives[0].directive.isComponent ?
|
||||
this.directives[0].directive :
|
||||
null;
|
||||
@ -94,10 +94,10 @@ export class BoundDirectivePropertyAst implements TemplateAst {
|
||||
}
|
||||
|
||||
export class DirectiveAst implements TemplateAst {
|
||||
constructor(public directive: NormalizedDirectiveMetadata,
|
||||
constructor(public directive: CompileDirectiveMetadata,
|
||||
public properties: BoundDirectivePropertyAst[],
|
||||
public hostProperties: BoundElementPropertyAst[], public hostEvents: BoundEventAst[],
|
||||
public sourceInfo: string) {}
|
||||
public exportAsVars: VariableAst[], public sourceInfo: string) {}
|
||||
visit(visitor: TemplateAstVisitor, context: any): any {
|
||||
return visitor.visitDirective(this, context);
|
||||
}
|
||||
|
||||
@ -1,16 +1,12 @@
|
||||
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';
|
||||
import {
|
||||
createHostComponentMeta,
|
||||
DirectiveMetadata,
|
||||
INormalizedDirectiveMetadata,
|
||||
NormalizedDirectiveMetadata,
|
||||
TypeMetadata,
|
||||
ChangeDetectionMetadata,
|
||||
NormalizedTemplateMetadata
|
||||
CompileDirectiveMetadata,
|
||||
CompileTypeMetadata,
|
||||
CompileTemplateMetadata
|
||||
} from './directive_metadata';
|
||||
import {TemplateAst} from './template_ast';
|
||||
import {Injectable} from 'angular2/src/core/di';
|
||||
@ -36,7 +32,8 @@ export class TemplateCompiler {
|
||||
private _commandCompiler: CommandCompiler,
|
||||
private _cdCompiler: ChangeDetectionCompiler) {}
|
||||
|
||||
normalizeDirectiveMetadata(directive: DirectiveMetadata): Promise<INormalizedDirectiveMetadata> {
|
||||
normalizeDirectiveMetadata(directive:
|
||||
CompileDirectiveMetadata): Promise<CompileDirectiveMetadata> {
|
||||
var normalizedTemplatePromise;
|
||||
if (directive.isComponent) {
|
||||
normalizedTemplatePromise =
|
||||
@ -45,49 +42,58 @@ export class TemplateCompiler {
|
||||
normalizedTemplatePromise = PromiseWrapper.resolve(null);
|
||||
}
|
||||
return normalizedTemplatePromise.then(
|
||||
(normalizedTemplate) => new NormalizedDirectiveMetadata({
|
||||
selector: directive.selector,
|
||||
dynamicLoadable: directive.dynamicLoadable,
|
||||
isComponent: directive.isComponent,
|
||||
(normalizedTemplate) => new CompileDirectiveMetadata({
|
||||
type: directive.type,
|
||||
changeDetection: directive.changeDetection, template: normalizedTemplate
|
||||
isComponent: directive.isComponent,
|
||||
dynamicLoadable: directive.dynamicLoadable,
|
||||
selector: directive.selector,
|
||||
exportAs: directive.exportAs,
|
||||
changeDetection: directive.changeDetection,
|
||||
properties: directive.properties,
|
||||
events: directive.events,
|
||||
hostListeners: directive.hostListeners,
|
||||
hostProperties: directive.hostProperties,
|
||||
hostAttributes: directive.hostAttributes,
|
||||
lifecycleHooks: directive.lifecycleHooks, template: normalizedTemplate
|
||||
}));
|
||||
}
|
||||
|
||||
serializeDirectiveMetadata(metadata: INormalizedDirectiveMetadata): string {
|
||||
return Json.stringify((<NormalizedDirectiveMetadata>metadata).toJson());
|
||||
serializeDirectiveMetadata(metadata: CompileDirectiveMetadata): string {
|
||||
return Json.stringify(metadata.toJson());
|
||||
}
|
||||
|
||||
deserializeDirectiveMetadata(data: string): INormalizedDirectiveMetadata {
|
||||
return NormalizedDirectiveMetadata.fromJson(Json.parse(data));
|
||||
deserializeDirectiveMetadata(data: string): CompileDirectiveMetadata {
|
||||
return CompileDirectiveMetadata.fromJson(Json.parse(data));
|
||||
}
|
||||
|
||||
compileHostComponentRuntime(type: Type): Promise<CompiledTemplate> {
|
||||
var compMeta: DirectiveMetadata = this._runtimeMetadataResolver.getMetadata(type);
|
||||
if (isBlank(compMeta) || !compMeta.isComponent || !compMeta.dynamicLoadable) {
|
||||
throw new BaseException(
|
||||
`Could not compile '${stringify(type)}' because it is not dynamically loadable.`);
|
||||
}
|
||||
var hostMeta: NormalizedDirectiveMetadata =
|
||||
var compMeta: CompileDirectiveMetadata = this._runtimeMetadataResolver.getMetadata(type);
|
||||
var hostMeta: CompileDirectiveMetadata =
|
||||
createHostComponentMeta(compMeta.type, compMeta.selector);
|
||||
this._compileComponentRuntime(hostMeta, [compMeta], new Set());
|
||||
return this._compiledTemplateDone.get(hostMeta.type.id);
|
||||
}
|
||||
|
||||
private _compileComponentRuntime(compMeta: NormalizedDirectiveMetadata,
|
||||
viewDirectives: DirectiveMetadata[],
|
||||
clearCache() {
|
||||
this._styleCompiler.clearCache();
|
||||
this._compiledTemplateCache.clear();
|
||||
this._compiledTemplateDone.clear();
|
||||
}
|
||||
|
||||
private _compileComponentRuntime(compMeta: CompileDirectiveMetadata,
|
||||
viewDirectives: CompileDirectiveMetadata[],
|
||||
compilingComponentIds: Set<number>): CompiledTemplate {
|
||||
var compiledTemplate = this._compiledTemplateCache.get(compMeta.type.id);
|
||||
var done = this._compiledTemplateDone.get(compMeta.type.id);
|
||||
if (isBlank(compiledTemplate)) {
|
||||
var styles;
|
||||
var changeDetectorFactories;
|
||||
var changeDetectorFactory;
|
||||
var commands;
|
||||
compiledTemplate =
|
||||
new CompiledTemplate(compMeta.type.id, () => [changeDetectorFactories, commands, styles]);
|
||||
new CompiledTemplate(compMeta.type.id, () => [changeDetectorFactory, commands, styles]);
|
||||
this._compiledTemplateCache.set(compMeta.type.id, compiledTemplate);
|
||||
compilingComponentIds.add(compMeta.type.id);
|
||||
done = PromiseWrapper.all([this._styleCompiler.compileComponentRuntime(compMeta)].concat(
|
||||
done = PromiseWrapper.all([<any>this._styleCompiler.compileComponentRuntime(compMeta)].concat(
|
||||
viewDirectives.map(
|
||||
dirMeta => this.normalizeDirectiveMetadata(dirMeta))))
|
||||
.then((stylesAndNormalizedViewDirMetas: any[]) => {
|
||||
@ -96,10 +102,12 @@ export class TemplateCompiler {
|
||||
var parsedTemplate = this._templateParser.parse(
|
||||
compMeta.template.template, normalizedViewDirMetas, compMeta.type.name);
|
||||
|
||||
changeDetectorFactories = this._cdCompiler.compileComponentRuntime(
|
||||
compMeta.type, compMeta.changeDetection.changeDetection, parsedTemplate);
|
||||
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);
|
||||
})
|
||||
@ -112,12 +120,14 @@ export class TemplateCompiler {
|
||||
return compiledTemplate;
|
||||
}
|
||||
|
||||
private _compileCommandsRuntime(compMeta: NormalizedDirectiveMetadata,
|
||||
parsedTemplate: TemplateAst[], compilingComponentIds: Set<number>,
|
||||
private _compileCommandsRuntime(compMeta: CompileDirectiveMetadata, parsedTemplate: TemplateAst[],
|
||||
changeDetectorFactories: Function[],
|
||||
compilingComponentIds: Set<number>,
|
||||
childPromises: Promise<any>[]): TemplateCmd[] {
|
||||
return this._commandCompiler.compileComponentRuntime(
|
||||
compMeta, parsedTemplate, (childComponentDir: NormalizedDirectiveMetadata) => {
|
||||
var childViewDirectives: DirectiveMetadata[] =
|
||||
compMeta, parsedTemplate, changeDetectorFactories,
|
||||
(childComponentDir: CompileDirectiveMetadata) => {
|
||||
var childViewDirectives: CompileDirectiveMetadata[] =
|
||||
this._runtimeMetadataResolver.getViewDirectivesMetadata(
|
||||
childComponentDir.type.runtime);
|
||||
var childIsRecursive = SetWrapper.has(compilingComponentIds, childComponentDir.type.id);
|
||||
@ -135,12 +145,12 @@ export class TemplateCompiler {
|
||||
components: NormalizedComponentWithViewDirectives[]): SourceModule {
|
||||
var declarations = [];
|
||||
var templateArguments = [];
|
||||
var componentMetas: NormalizedDirectiveMetadata[] = [];
|
||||
var componentMetas: CompileDirectiveMetadata[] = [];
|
||||
components.forEach(componentWithDirs => {
|
||||
var compMeta = <NormalizedDirectiveMetadata>componentWithDirs.component;
|
||||
var compMeta = <CompileDirectiveMetadata>componentWithDirs.component;
|
||||
componentMetas.push(compMeta);
|
||||
this._processTemplateCodeGen(compMeta,
|
||||
<NormalizedDirectiveMetadata[]>componentWithDirs.directives,
|
||||
<CompileDirectiveMetadata[]>componentWithDirs.directives,
|
||||
declarations, templateArguments);
|
||||
if (compMeta.dynamicLoadable) {
|
||||
var hostMeta = createHostComponentMeta(compMeta.type, compMeta.selector);
|
||||
@ -148,7 +158,7 @@ export class TemplateCompiler {
|
||||
this._processTemplateCodeGen(hostMeta, [compMeta], declarations, templateArguments);
|
||||
}
|
||||
});
|
||||
ListWrapper.forEachWithIndex(componentMetas, (compMeta: NormalizedDirectiveMetadata,
|
||||
ListWrapper.forEachWithIndex(componentMetas, (compMeta: CompileDirectiveMetadata,
|
||||
index: number) => {
|
||||
var templateDataFn = codeGenValueFn([], `[${templateArguments[index].join(',')}]`);
|
||||
declarations.push(
|
||||
@ -161,32 +171,33 @@ export class TemplateCompiler {
|
||||
return this._styleCompiler.compileStylesheetCodeGen(moduleId, cssText);
|
||||
}
|
||||
|
||||
private _processTemplateCodeGen(compMeta: NormalizedDirectiveMetadata,
|
||||
directives: NormalizedDirectiveMetadata[],
|
||||
private _processTemplateCodeGen(compMeta: CompileDirectiveMetadata,
|
||||
directives: CompileDirectiveMetadata[],
|
||||
targetDeclarations: string[], targetTemplateArguments: any[][]) {
|
||||
var styleExpr = this._styleCompiler.compileComponentCodeGen(compMeta);
|
||||
var parsedTemplate =
|
||||
this._templateParser.parse(compMeta.template.template, directives, compMeta.type.name);
|
||||
var changeDetectorsExpr = this._cdCompiler.compileComponentCodeGen(
|
||||
compMeta.type, compMeta.changeDetection.changeDetection, parsedTemplate);
|
||||
var changeDetectorsExprs = this._cdCompiler.compileComponentCodeGen(
|
||||
compMeta.type, compMeta.changeDetection, parsedTemplate);
|
||||
var commandsExpr = this._commandCompiler.compileComponentCodeGen(
|
||||
compMeta, parsedTemplate, codeGenComponentTemplateFactory);
|
||||
compMeta, parsedTemplate, changeDetectorsExprs.expressions,
|
||||
codeGenComponentTemplateFactory);
|
||||
|
||||
addAll(styleExpr.declarations, targetDeclarations);
|
||||
addAll(changeDetectorsExpr.declarations, targetDeclarations);
|
||||
addAll(changeDetectorsExprs.declarations, targetDeclarations);
|
||||
addAll(commandsExpr.declarations, targetDeclarations);
|
||||
|
||||
targetTemplateArguments.push(
|
||||
[changeDetectorsExpr.expression, commandsExpr.expression, styleExpr.expression]);
|
||||
[changeDetectorsExprs.expressions[0], commandsExpr.expression, styleExpr.expression]);
|
||||
}
|
||||
}
|
||||
|
||||
export class NormalizedComponentWithViewDirectives {
|
||||
constructor(public component: INormalizedDirectiveMetadata,
|
||||
public directives: INormalizedDirectiveMetadata[]) {}
|
||||
constructor(public component: CompileDirectiveMetadata,
|
||||
public directives: CompileDirectiveMetadata[]) {}
|
||||
}
|
||||
|
||||
function templateVariableName(type: TypeMetadata): string {
|
||||
function templateVariableName(type: CompileTypeMetadata): string {
|
||||
return `${type.name}Template`;
|
||||
}
|
||||
|
||||
@ -200,6 +211,6 @@ function addAll(source: any[], target: any[]) {
|
||||
}
|
||||
}
|
||||
|
||||
function codeGenComponentTemplateFactory(nestedCompType: NormalizedDirectiveMetadata): string {
|
||||
function codeGenComponentTemplateFactory(nestedCompType: CompileDirectiveMetadata): string {
|
||||
return `${moduleRef(templateModuleName(nestedCompType.type.moduleId))}${templateVariableName(nestedCompType.type)}`;
|
||||
}
|
||||
|
||||
@ -1,8 +1,7 @@
|
||||
import {
|
||||
TypeMetadata,
|
||||
TemplateMetadata,
|
||||
NormalizedDirectiveMetadata,
|
||||
NormalizedTemplateMetadata
|
||||
CompileTypeMetadata,
|
||||
CompileDirectiveMetadata,
|
||||
CompileTemplateMetadata
|
||||
} from './directive_metadata';
|
||||
import {isPresent, isBlank} from 'angular2/src/core/facade/lang';
|
||||
import {Promise, PromiseWrapper} from 'angular2/src/core/facade/async';
|
||||
@ -11,6 +10,7 @@ import {XHR} from 'angular2/src/core/render/xhr';
|
||||
import {UrlResolver} from 'angular2/src/core/services/url_resolver';
|
||||
import {resolveStyleUrls} from './style_url_resolver';
|
||||
import {Injectable} from 'angular2/src/core/di';
|
||||
import {ViewEncapsulation} from 'angular2/src/core/render/api';
|
||||
|
||||
import {
|
||||
HtmlAstVisitor,
|
||||
@ -22,21 +22,15 @@ import {
|
||||
} from './html_ast';
|
||||
import {HtmlParser} from './html_parser';
|
||||
|
||||
const NG_CONTENT_SELECT_ATTR = 'select';
|
||||
const NG_CONTENT_ELEMENT = 'ng-content';
|
||||
const LINK_ELEMENT = 'link';
|
||||
const LINK_STYLE_REL_ATTR = 'rel';
|
||||
const LINK_STYLE_HREF_ATTR = 'href';
|
||||
const LINK_STYLE_REL_VALUE = 'stylesheet';
|
||||
const STYLE_ELEMENT = 'style';
|
||||
import {preparseElement, PreparsedElement, PreparsedElementType} from './template_preparser';
|
||||
|
||||
@Injectable()
|
||||
export class TemplateNormalizer {
|
||||
constructor(private _xhr: XHR, private _urlResolver: UrlResolver,
|
||||
private _domParser: HtmlParser) {}
|
||||
|
||||
normalizeTemplate(directiveType: TypeMetadata,
|
||||
template: TemplateMetadata): Promise<NormalizedTemplateMetadata> {
|
||||
normalizeTemplate(directiveType: CompileTypeMetadata,
|
||||
template: CompileTemplateMetadata): Promise<CompileTemplateMetadata> {
|
||||
if (isPresent(template.template)) {
|
||||
return PromiseWrapper.resolve(this.normalizeLoadedTemplate(
|
||||
directiveType, template, template.template, directiveType.moduleId));
|
||||
@ -48,11 +42,11 @@ export class TemplateNormalizer {
|
||||
}
|
||||
}
|
||||
|
||||
normalizeLoadedTemplate(directiveType: TypeMetadata, templateMeta: TemplateMetadata,
|
||||
template: string, templateAbsUrl: string): NormalizedTemplateMetadata {
|
||||
normalizeLoadedTemplate(directiveType: CompileTypeMetadata, templateMeta: CompileTemplateMetadata,
|
||||
template: string, templateAbsUrl: string): CompileTemplateMetadata {
|
||||
var domNodes = this._domParser.parse(template, directiveType.name);
|
||||
var visitor = new TemplatePreparseVisitor();
|
||||
var remainingNodes = htmlVisitAll(visitor, domNodes);
|
||||
htmlVisitAll(visitor, domNodes);
|
||||
var allStyles = templateMeta.styles.concat(visitor.styles);
|
||||
|
||||
var allStyleAbsUrls =
|
||||
@ -65,11 +59,17 @@ export class TemplateNormalizer {
|
||||
styleWithImports.styleUrls.forEach(styleUrl => allStyleAbsUrls.push(styleUrl));
|
||||
return styleWithImports.style;
|
||||
});
|
||||
return new NormalizedTemplateMetadata({
|
||||
encapsulation: templateMeta.encapsulation,
|
||||
template: this._domParser.unparse(remainingNodes),
|
||||
var encapsulation = templateMeta.encapsulation;
|
||||
if (encapsulation === ViewEncapsulation.Emulated && allResolvedStyles.length === 0 &&
|
||||
allStyleAbsUrls.length === 0) {
|
||||
encapsulation = ViewEncapsulation.None;
|
||||
}
|
||||
return new CompileTemplateMetadata({
|
||||
encapsulation: encapsulation,
|
||||
template: template,
|
||||
templateUrl: templateAbsUrl,
|
||||
styles: allResolvedStyles,
|
||||
styleAbsUrls: allStyleAbsUrls,
|
||||
styleUrls: allStyleAbsUrls,
|
||||
ngContentSelectors: visitor.ngContentSelectors
|
||||
});
|
||||
}
|
||||
@ -80,50 +80,30 @@ class TemplatePreparseVisitor implements HtmlAstVisitor {
|
||||
styles: string[] = [];
|
||||
styleUrls: string[] = [];
|
||||
|
||||
visitElement(ast: HtmlElementAst, context: any): HtmlElementAst {
|
||||
var selectAttr = null;
|
||||
var hrefAttr = null;
|
||||
var relAttr = null;
|
||||
ast.attrs.forEach(attr => {
|
||||
if (attr.name == NG_CONTENT_SELECT_ATTR) {
|
||||
selectAttr = attr.value;
|
||||
} else if (attr.name == LINK_STYLE_HREF_ATTR) {
|
||||
hrefAttr = attr.value;
|
||||
} else if (attr.name == LINK_STYLE_REL_ATTR) {
|
||||
relAttr = attr.value;
|
||||
}
|
||||
});
|
||||
var nodeName = ast.name;
|
||||
var keepElement = true;
|
||||
if (nodeName == NG_CONTENT_ELEMENT) {
|
||||
this.ngContentSelectors.push(normalizeNgContentSelect(selectAttr));
|
||||
} else if (nodeName == STYLE_ELEMENT) {
|
||||
keepElement = false;
|
||||
var textContent = '';
|
||||
ast.children.forEach(child => {
|
||||
if (child instanceof HtmlTextAst) {
|
||||
textContent += (<HtmlTextAst>child).value;
|
||||
}
|
||||
});
|
||||
this.styles.push(textContent);
|
||||
} else if (nodeName == LINK_ELEMENT && relAttr == LINK_STYLE_REL_VALUE) {
|
||||
keepElement = false;
|
||||
this.styleUrls.push(hrefAttr);
|
||||
visitElement(ast: HtmlElementAst, context: any): any {
|
||||
var preparsedElement = preparseElement(ast);
|
||||
switch (preparsedElement.type) {
|
||||
case PreparsedElementType.NG_CONTENT:
|
||||
this.ngContentSelectors.push(preparsedElement.selectAttr);
|
||||
break;
|
||||
case PreparsedElementType.STYLE:
|
||||
var textContent = '';
|
||||
ast.children.forEach(child => {
|
||||
if (child instanceof HtmlTextAst) {
|
||||
textContent += (<HtmlTextAst>child).value;
|
||||
}
|
||||
});
|
||||
this.styles.push(textContent);
|
||||
break;
|
||||
case PreparsedElementType.STYLESHEET:
|
||||
this.styleUrls.push(preparsedElement.hrefAttr);
|
||||
break;
|
||||
}
|
||||
if (keepElement) {
|
||||
return new HtmlElementAst(ast.name, ast.attrs, htmlVisitAll(this, ast.children),
|
||||
ast.sourceInfo);
|
||||
} else {
|
||||
return null;
|
||||
if (preparsedElement.type !== PreparsedElementType.NON_BINDABLE) {
|
||||
htmlVisitAll(this, ast.children);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
visitAttr(ast: HtmlAttrAst, context: any): HtmlAttrAst { return ast; }
|
||||
visitText(ast: HtmlTextAst, context: any): HtmlTextAst { return ast; }
|
||||
visitAttr(ast: HtmlAttrAst, context: any): any { return null; }
|
||||
visitText(ast: HtmlTextAst, context: any): any { return null; }
|
||||
}
|
||||
|
||||
function normalizeNgContentSelect(selectAttr: string): string {
|
||||
if (isBlank(selectAttr) || selectAttr.length === 0) {
|
||||
return '*';
|
||||
}
|
||||
return selectAttr;
|
||||
}
|
||||
@ -1,4 +1,9 @@
|
||||
import {MapWrapper, ListWrapper, StringMapWrapper} from 'angular2/src/core/facade/collection';
|
||||
import {
|
||||
MapWrapper,
|
||||
ListWrapper,
|
||||
StringMapWrapper,
|
||||
SetWrapper
|
||||
} from 'angular2/src/core/facade/collection';
|
||||
import {
|
||||
RegExpWrapper,
|
||||
isPresent,
|
||||
@ -12,7 +17,7 @@ import {Injectable} from 'angular2/src/core/di';
|
||||
import {BaseException} from 'angular2/src/core/facade/exceptions';
|
||||
import {Parser, AST, ASTWithSource} from 'angular2/src/core/change_detection/change_detection';
|
||||
import {TemplateBinding} from 'angular2/src/core/change_detection/parser/ast';
|
||||
import {NormalizedDirectiveMetadata} from './directive_metadata';
|
||||
import {CompileDirectiveMetadata} from './directive_metadata';
|
||||
import {HtmlParser} from './html_parser';
|
||||
|
||||
import {
|
||||
@ -33,6 +38,7 @@ import {
|
||||
import {CssSelector, SelectorMatcher} from 'angular2/src/core/render/dom/compiler/selector';
|
||||
|
||||
import {ElementSchemaRegistry} from 'angular2/src/core/render/dom/schema/element_schema_registry';
|
||||
import {preparseElement, PreparsedElement, PreparsedElementType} from './template_preparser';
|
||||
|
||||
import {
|
||||
HtmlAstVisitor,
|
||||
@ -43,7 +49,7 @@ import {
|
||||
htmlVisitAll
|
||||
} from './html_ast';
|
||||
|
||||
import {dashCaseToCamelCase, camelCaseToDashCase} from './util';
|
||||
import {dashCaseToCamelCase, camelCaseToDashCase, splitAtColon} from './util';
|
||||
|
||||
// Group 1 = "bind-"
|
||||
// Group 2 = "var-" or "#"
|
||||
@ -56,12 +62,10 @@ import {dashCaseToCamelCase, camelCaseToDashCase} from './util';
|
||||
var BIND_NAME_REGEXP =
|
||||
/^(?:(?:(?:(bind-)|(var-|#)|(on-)|(bindon-))(.+))|\[\(([^\)]+)\)\]|\[([^\]]+)\]|\(([^\)]+)\))$/g;
|
||||
|
||||
const NG_CONTENT_ELEMENT = 'ng-content';
|
||||
const TEMPLATE_ELEMENT = 'template';
|
||||
const TEMPLATE_ATTR = 'template';
|
||||
const TEMPLATE_ATTR_PREFIX = '*';
|
||||
const CLASS_ATTR = 'class';
|
||||
const IMPLICIT_VAR_NAME = '$implicit';
|
||||
|
||||
var PROPERTY_PARTS_SEPARATOR = new RegExp('\\.');
|
||||
const ATTRIBUTE_PREFIX = 'attr';
|
||||
@ -75,7 +79,7 @@ export class TemplateParser {
|
||||
constructor(private _exprParser: Parser, private _schemaRegistry: ElementSchemaRegistry,
|
||||
private _htmlParser: HtmlParser) {}
|
||||
|
||||
parse(template: string, directives: NormalizedDirectiveMetadata[],
|
||||
parse(template: string, directives: CompileDirectiveMetadata[],
|
||||
sourceInfo: string): TemplateAst[] {
|
||||
var parseVisitor = new TemplateParseVisitor(directives, this._exprParser, this._schemaRegistry);
|
||||
var result =
|
||||
@ -91,13 +95,16 @@ export class TemplateParser {
|
||||
class TemplateParseVisitor implements HtmlAstVisitor {
|
||||
selectorMatcher: SelectorMatcher;
|
||||
errors: string[] = [];
|
||||
constructor(directives: NormalizedDirectiveMetadata[], private _exprParser: Parser,
|
||||
directivesIndexByTypeId: Map<number, number> = new Map();
|
||||
constructor(directives: CompileDirectiveMetadata[], private _exprParser: Parser,
|
||||
private _schemaRegistry: ElementSchemaRegistry) {
|
||||
this.selectorMatcher = new SelectorMatcher();
|
||||
directives.forEach(directive => {
|
||||
var selector = CssSelector.parse(directive.selector);
|
||||
this.selectorMatcher.addSelectables(selector, directive);
|
||||
});
|
||||
ListWrapper.forEachWithIndex(directives,
|
||||
(directive: CompileDirectiveMetadata, index: number) => {
|
||||
var selector = CssSelector.parse(directive.selector);
|
||||
this.selectorMatcher.addSelectables(selector, directive);
|
||||
this.directivesIndexByTypeId.set(directive.type.id, index);
|
||||
});
|
||||
}
|
||||
|
||||
private _reportError(message: string) { this.errors.push(message); }
|
||||
@ -154,6 +161,17 @@ class TemplateParseVisitor implements HtmlAstVisitor {
|
||||
|
||||
visitElement(element: HtmlElementAst, component: Component): any {
|
||||
var nodeName = element.name;
|
||||
var preparsedElement = preparseElement(element);
|
||||
if (preparsedElement.type === PreparsedElementType.SCRIPT ||
|
||||
preparsedElement.type === PreparsedElementType.STYLE ||
|
||||
preparsedElement.type === PreparsedElementType.STYLESHEET ||
|
||||
preparsedElement.type === PreparsedElementType.NON_BINDABLE) {
|
||||
// Skipping <script> for security reasons
|
||||
// Skipping <style> and stylesheets as we already processed them
|
||||
// in the StyleCompiler
|
||||
return null;
|
||||
}
|
||||
|
||||
var matchableAttrs: string[][] = [];
|
||||
var elementOrDirectiveProps: BoundElementOrDirectiveProperty[] = [];
|
||||
var vars: VariableAst[] = [];
|
||||
@ -177,34 +195,37 @@ class TemplateParseVisitor implements HtmlAstVisitor {
|
||||
hasInlineTemplates = true;
|
||||
}
|
||||
});
|
||||
var isTemplateElement = nodeName == TEMPLATE_ELEMENT;
|
||||
var elementCssSelector = this._createElementCssSelector(nodeName, matchableAttrs);
|
||||
var directives = this._createDirectiveAsts(
|
||||
element.name, this._parseDirectives(this.selectorMatcher, elementCssSelector),
|
||||
elementOrDirectiveProps, element.sourceInfo);
|
||||
elementOrDirectiveProps, isTemplateElement ? [] : vars, element.sourceInfo);
|
||||
var elementProps: BoundElementPropertyAst[] =
|
||||
this._createElementPropertyAsts(element.name, elementOrDirectiveProps, directives);
|
||||
var children = htmlVisitAll(this, element.children, Component.create(directives));
|
||||
var elementNgContentIndex =
|
||||
hasInlineTemplates ? null : component.findNgContentIndex(elementCssSelector);
|
||||
var parsedElement;
|
||||
if (nodeName == NG_CONTENT_ELEMENT) {
|
||||
if (preparsedElement.type === PreparsedElementType.NG_CONTENT) {
|
||||
parsedElement = new NgContentAst(elementNgContentIndex, element.sourceInfo);
|
||||
} else if (nodeName == TEMPLATE_ELEMENT) {
|
||||
} else if (isTemplateElement) {
|
||||
this._assertNoComponentsNorElementBindingsOnTemplate(directives, elementProps, events,
|
||||
element.sourceInfo);
|
||||
parsedElement = new EmbeddedTemplateAst(attrs, vars, directives, children,
|
||||
elementNgContentIndex, element.sourceInfo);
|
||||
} else {
|
||||
this._assertOnlyOneComponent(directives, element.sourceInfo);
|
||||
parsedElement = new ElementAst(nodeName, attrs, elementProps, events, vars, directives,
|
||||
children, elementNgContentIndex, element.sourceInfo);
|
||||
var elementExportAsVars = ListWrapper.filter(vars, varAst => varAst.value.length === 0);
|
||||
parsedElement =
|
||||
new ElementAst(nodeName, attrs, elementProps, events, elementExportAsVars, directives,
|
||||
children, elementNgContentIndex, element.sourceInfo);
|
||||
}
|
||||
if (hasInlineTemplates) {
|
||||
var templateCssSelector =
|
||||
this._createElementCssSelector(TEMPLATE_ELEMENT, templateMatchableAttrs);
|
||||
var templateDirectives = this._createDirectiveAsts(
|
||||
element.name, this._parseDirectives(this.selectorMatcher, templateCssSelector),
|
||||
templateElementOrDirectiveProps, element.sourceInfo);
|
||||
templateElementOrDirectiveProps, [], element.sourceInfo);
|
||||
var templateElementProps: BoundElementPropertyAst[] = this._createElementPropertyAsts(
|
||||
element.name, templateElementOrDirectiveProps, templateDirectives);
|
||||
this._assertNoComponentsNorElementBindingsOnTemplate(templateDirectives, templateElementProps,
|
||||
@ -263,8 +284,8 @@ class TemplateParseVisitor implements HtmlAstVisitor {
|
||||
} else if (isPresent(
|
||||
bindParts[2])) { // match: var-name / var-name="iden" / #name / #name="iden"
|
||||
var identifier = bindParts[5];
|
||||
var value = attrValue.length === 0 ? IMPLICIT_VAR_NAME : attrValue;
|
||||
this._parseVariable(identifier, value, attr.sourceInfo, targetMatchableAttrs, targetVars);
|
||||
this._parseVariable(identifier, attrValue, attr.sourceInfo, targetMatchableAttrs,
|
||||
targetVars);
|
||||
|
||||
} else if (isPresent(bindParts[3])) { // match: on-event
|
||||
this._parseEvent(bindParts[5], attrValue, attr.sourceInfo, targetMatchableAttrs,
|
||||
@ -377,7 +398,7 @@ class TemplateParseVisitor implements HtmlAstVisitor {
|
||||
}
|
||||
|
||||
private _parseDirectives(selectorMatcher: SelectorMatcher,
|
||||
elementCssSelector: CssSelector): NormalizedDirectiveMetadata[] {
|
||||
elementCssSelector: CssSelector): CompileDirectiveMetadata[] {
|
||||
var directives = [];
|
||||
selectorMatcher.match(elementCssSelector,
|
||||
(selector, directive) => { directives.push(directive); });
|
||||
@ -385,7 +406,7 @@ class TemplateParseVisitor implements HtmlAstVisitor {
|
||||
// as selectorMatcher uses Maps inside.
|
||||
// Also need to make components the first directive in the array
|
||||
ListWrapper.sort(directives,
|
||||
(dir1: NormalizedDirectiveMetadata, dir2: NormalizedDirectiveMetadata) => {
|
||||
(dir1: CompileDirectiveMetadata, dir2: CompileDirectiveMetadata) => {
|
||||
var dir1Comp = dir1.isComponent;
|
||||
var dir2Comp = dir2.isComponent;
|
||||
if (dir1Comp && !dir2Comp) {
|
||||
@ -393,29 +414,44 @@ class TemplateParseVisitor implements HtmlAstVisitor {
|
||||
} else if (!dir1Comp && dir2Comp) {
|
||||
return 1;
|
||||
} else {
|
||||
return StringWrapper.compare(dir1.type.name, dir2.type.name);
|
||||
return this.directivesIndexByTypeId.get(dir1.type.id) -
|
||||
this.directivesIndexByTypeId.get(dir2.type.id);
|
||||
}
|
||||
});
|
||||
return directives;
|
||||
}
|
||||
|
||||
private _createDirectiveAsts(elementName: string, directives: NormalizedDirectiveMetadata[],
|
||||
private _createDirectiveAsts(elementName: string, directives: CompileDirectiveMetadata[],
|
||||
props: BoundElementOrDirectiveProperty[],
|
||||
possibleExportAsVars: VariableAst[],
|
||||
sourceInfo: string): DirectiveAst[] {
|
||||
return directives.map((directive: NormalizedDirectiveMetadata) => {
|
||||
var matchedVariables: Set<string> = new Set();
|
||||
var directiveAsts = directives.map((directive: CompileDirectiveMetadata) => {
|
||||
var hostProperties: BoundElementPropertyAst[] = [];
|
||||
var hostEvents: BoundEventAst[] = [];
|
||||
var directiveProperties: BoundDirectivePropertyAst[] = [];
|
||||
var changeDetection = directive.changeDetection;
|
||||
if (isPresent(changeDetection)) {
|
||||
this._createDirectiveHostPropertyAsts(elementName, changeDetection.hostProperties,
|
||||
sourceInfo, hostProperties);
|
||||
this._createDirectiveHostEventAsts(changeDetection.hostListeners, sourceInfo, hostEvents);
|
||||
this._createDirectivePropertyAsts(changeDetection.properties, props, directiveProperties);
|
||||
}
|
||||
this._createDirectiveHostPropertyAsts(elementName, directive.hostProperties, sourceInfo,
|
||||
hostProperties);
|
||||
this._createDirectiveHostEventAsts(directive.hostListeners, sourceInfo, hostEvents);
|
||||
this._createDirectivePropertyAsts(directive.properties, props, directiveProperties);
|
||||
var exportAsVars = [];
|
||||
possibleExportAsVars.forEach((varAst) => {
|
||||
if ((varAst.value.length === 0 && directive.isComponent) ||
|
||||
(directive.exportAs == varAst.value)) {
|
||||
exportAsVars.push(varAst);
|
||||
matchedVariables.add(varAst.name);
|
||||
}
|
||||
});
|
||||
return new DirectiveAst(directive, directiveProperties, hostProperties, hostEvents,
|
||||
sourceInfo);
|
||||
exportAsVars, sourceInfo);
|
||||
});
|
||||
possibleExportAsVars.forEach((varAst) => {
|
||||
if (varAst.value.length > 0 && !SetWrapper.has(matchedVariables, varAst.name)) {
|
||||
this._reportError(
|
||||
`There is no directive with "exportAs" set to "${varAst.value}" at ${varAst.sourceInfo}`);
|
||||
}
|
||||
});
|
||||
return directiveAsts;
|
||||
}
|
||||
|
||||
private _createDirectiveHostPropertyAsts(elementName: string,
|
||||
@ -439,7 +475,7 @@ class TemplateParseVisitor implements HtmlAstVisitor {
|
||||
}
|
||||
}
|
||||
|
||||
private _createDirectivePropertyAsts(directiveProperties: string[],
|
||||
private _createDirectivePropertyAsts(directiveProperties: StringMap<string, string>,
|
||||
boundProps: BoundElementOrDirectiveProperty[],
|
||||
targetBoundDirectiveProps: BoundDirectivePropertyAst[]) {
|
||||
if (isPresent(directiveProperties)) {
|
||||
@ -447,12 +483,8 @@ class TemplateParseVisitor implements HtmlAstVisitor {
|
||||
boundProps.forEach(boundProp =>
|
||||
boundPropsByName.set(dashCaseToCamelCase(boundProp.name), boundProp));
|
||||
|
||||
directiveProperties.forEach((bindConfig: string) => {
|
||||
// canonical syntax: `dirProp: elProp`
|
||||
// if there is no `:`, use dirProp = elProp
|
||||
var parts = splitAtColon(bindConfig, [bindConfig, bindConfig]);
|
||||
var dirProp = parts[0];
|
||||
var elProp = dashCaseToCamelCase(parts[1]);
|
||||
StringMapWrapper.forEach(directiveProperties, (elProp: string, dirProp: string) => {
|
||||
elProp = dashCaseToCamelCase(elProp);
|
||||
var boundProp = boundPropsByName.get(elProp);
|
||||
|
||||
// Bindings are optional, so this binding only needs to be set up if an expression is given.
|
||||
@ -566,15 +598,6 @@ export function splitClasses(classAttrValue: string): string[] {
|
||||
return StringWrapper.split(classAttrValue.trim(), /\s+/g);
|
||||
}
|
||||
|
||||
export function splitAtColon(input: string, defaultValues: string[]): string[] {
|
||||
var parts = StringWrapper.split(input.trim(), /\s*:\s*/g);
|
||||
if (parts.length > 1) {
|
||||
return parts;
|
||||
} else {
|
||||
return defaultValues;
|
||||
}
|
||||
}
|
||||
|
||||
class Component {
|
||||
static create(directives: DirectiveAst[]): Component {
|
||||
if (directives.length === 0 || !directives[0].directive.isComponent) {
|
||||
|
||||
67
modules/angular2/src/compiler/template_preparser.ts
Normal file
67
modules/angular2/src/compiler/template_preparser.ts
Normal file
@ -0,0 +1,67 @@
|
||||
import {HtmlElementAst} from './html_ast';
|
||||
import {isBlank, isPresent} from 'angular2/src/core/facade/lang';
|
||||
|
||||
const NG_CONTENT_SELECT_ATTR = 'select';
|
||||
const NG_CONTENT_ELEMENT = 'ng-content';
|
||||
const LINK_ELEMENT = 'link';
|
||||
const LINK_STYLE_REL_ATTR = 'rel';
|
||||
const LINK_STYLE_HREF_ATTR = 'href';
|
||||
const LINK_STYLE_REL_VALUE = 'stylesheet';
|
||||
const STYLE_ELEMENT = 'style';
|
||||
const SCRIPT_ELEMENT = 'script';
|
||||
const NG_NON_BINDABLE_ATTR = 'ng-non-bindable';
|
||||
|
||||
export function preparseElement(ast: HtmlElementAst): PreparsedElement {
|
||||
var selectAttr = null;
|
||||
var hrefAttr = null;
|
||||
var relAttr = null;
|
||||
var nonBindable = false;
|
||||
ast.attrs.forEach(attr => {
|
||||
if (attr.name == NG_CONTENT_SELECT_ATTR) {
|
||||
selectAttr = attr.value;
|
||||
} else if (attr.name == LINK_STYLE_HREF_ATTR) {
|
||||
hrefAttr = attr.value;
|
||||
} else if (attr.name == LINK_STYLE_REL_ATTR) {
|
||||
relAttr = attr.value;
|
||||
} else if (attr.name == NG_NON_BINDABLE_ATTR) {
|
||||
nonBindable = true;
|
||||
}
|
||||
});
|
||||
selectAttr = normalizeNgContentSelect(selectAttr);
|
||||
var nodeName = ast.name;
|
||||
var type = PreparsedElementType.OTHER;
|
||||
if (nonBindable) {
|
||||
type = PreparsedElementType.NON_BINDABLE;
|
||||
} else if (nodeName == NG_CONTENT_ELEMENT) {
|
||||
type = PreparsedElementType.NG_CONTENT;
|
||||
} else if (nodeName == STYLE_ELEMENT) {
|
||||
type = PreparsedElementType.STYLE;
|
||||
} else if (nodeName == SCRIPT_ELEMENT) {
|
||||
type = PreparsedElementType.SCRIPT;
|
||||
} else if (nodeName == LINK_ELEMENT && relAttr == LINK_STYLE_REL_VALUE) {
|
||||
type = PreparsedElementType.STYLESHEET;
|
||||
}
|
||||
return new PreparsedElement(type, selectAttr, hrefAttr);
|
||||
}
|
||||
|
||||
export enum PreparsedElementType {
|
||||
NG_CONTENT,
|
||||
STYLE,
|
||||
STYLESHEET,
|
||||
SCRIPT,
|
||||
NON_BINDABLE,
|
||||
OTHER
|
||||
}
|
||||
|
||||
export class PreparsedElement {
|
||||
constructor(public type: PreparsedElementType, public selectAttr: string,
|
||||
public hrefAttr: string) {}
|
||||
}
|
||||
|
||||
|
||||
function normalizeNgContentSelect(selectAttr: string): string {
|
||||
if (isBlank(selectAttr) || selectAttr.length === 0) {
|
||||
return '*';
|
||||
}
|
||||
return selectAttr;
|
||||
}
|
||||
@ -72,3 +72,13 @@ export function codeGenValueFn(params: string[], value: string): string {
|
||||
return `function(${params.join(',')}) { return ${value}; }`;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export function splitAtColon(input: string, defaultValues: string[]): string[] {
|
||||
var parts = StringWrapper.split(input.trim(), /\s*:\s*/g);
|
||||
if (parts.length > 1) {
|
||||
return parts;
|
||||
} else {
|
||||
return defaultValues;
|
||||
}
|
||||
}
|
||||
|
||||
@ -42,7 +42,7 @@ export {
|
||||
DebugContext,
|
||||
ChangeDetectorGenConfig
|
||||
} from './interfaces';
|
||||
export {ChangeDetectionStrategy, changeDetectionStrategyFromJson} from './constants';
|
||||
export {ChangeDetectionStrategy, CHANGE_DECTION_STRATEGY_VALUES} from './constants';
|
||||
export {DynamicProtoChangeDetector} from './proto_change_detector';
|
||||
export {BindingRecord, BindingTarget} from './binding_record';
|
||||
export {DirectiveIndex, DirectiveRecord} from './directive_record';
|
||||
|
||||
@ -1,11 +1,4 @@
|
||||
import {
|
||||
StringWrapper,
|
||||
normalizeBool,
|
||||
isBlank,
|
||||
serializeEnum,
|
||||
deserializeEnum
|
||||
} from 'angular2/src/core/facade/lang';
|
||||
import {MapWrapper} from 'angular2/src/core/facade/collection';
|
||||
import {StringWrapper, normalizeBool, isBlank} from 'angular2/src/core/facade/lang';
|
||||
|
||||
export enum ChangeDetectionStrategy {
|
||||
/**
|
||||
@ -48,19 +41,15 @@ export enum ChangeDetectionStrategy {
|
||||
OnPushObserve
|
||||
}
|
||||
|
||||
var strategyMap: Map<number, ChangeDetectionStrategy> = MapWrapper.createFromPairs([
|
||||
[0, ChangeDetectionStrategy.CheckOnce],
|
||||
[1, ChangeDetectionStrategy.Checked],
|
||||
[2, ChangeDetectionStrategy.CheckAlways],
|
||||
[3, ChangeDetectionStrategy.Detached],
|
||||
[4, ChangeDetectionStrategy.OnPush],
|
||||
[5, ChangeDetectionStrategy.Default],
|
||||
[6, ChangeDetectionStrategy.OnPushObserve]
|
||||
]);
|
||||
|
||||
export function changeDetectionStrategyFromJson(value: number): ChangeDetectionStrategy {
|
||||
return deserializeEnum(value, strategyMap);
|
||||
}
|
||||
export var CHANGE_DECTION_STRATEGY_VALUES = [
|
||||
ChangeDetectionStrategy.CheckOnce,
|
||||
ChangeDetectionStrategy.Checked,
|
||||
ChangeDetectionStrategy.CheckAlways,
|
||||
ChangeDetectionStrategy.Detached,
|
||||
ChangeDetectionStrategy.OnPush,
|
||||
ChangeDetectionStrategy.Default,
|
||||
ChangeDetectionStrategy.OnPushObserve
|
||||
];
|
||||
|
||||
export function isDefaultChangeDetectionStrategy(changeDetectionStrategy: ChangeDetectionStrategy):
|
||||
boolean {
|
||||
|
||||
@ -117,7 +117,6 @@ export class DirectiveResolver {
|
||||
properties: mergedProperties,
|
||||
events: mergedEvents,
|
||||
host: mergedHost,
|
||||
dynamicLoadable: dm.dynamicLoadable,
|
||||
bindings: dm.bindings,
|
||||
exportAs: dm.exportAs,
|
||||
moduleId: dm.moduleId,
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import {StringMap} from 'angular2/src/core/facade/collection';
|
||||
import {StringMap, MapWrapper} from 'angular2/src/core/facade/collection';
|
||||
|
||||
export enum LifecycleHooks {
|
||||
OnInit,
|
||||
@ -11,6 +11,17 @@ export enum LifecycleHooks {
|
||||
AfterViewChecked
|
||||
}
|
||||
|
||||
export var LIFECYCLE_HOOKS_VALUES = [
|
||||
LifecycleHooks.OnInit,
|
||||
LifecycleHooks.OnDestroy,
|
||||
LifecycleHooks.DoCheck,
|
||||
LifecycleHooks.OnChanges,
|
||||
LifecycleHooks.AfterContentInit,
|
||||
LifecycleHooks.AfterContentChecked,
|
||||
LifecycleHooks.AfterViewInit,
|
||||
LifecycleHooks.AfterViewChecked
|
||||
];
|
||||
|
||||
/**
|
||||
* Lifecycle hooks are guaranteed to be called in the following order:
|
||||
* - `OnChanges` (if any bindings have changed),
|
||||
|
||||
@ -10,7 +10,7 @@ import {
|
||||
} from 'angular2/src/core/render/render';
|
||||
|
||||
export class CompiledTemplate {
|
||||
private _changeDetectorFactories: Function[] = null;
|
||||
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!
|
||||
@ -19,15 +19,15 @@ export class CompiledTemplate {
|
||||
private _init() {
|
||||
if (isBlank(this._commands)) {
|
||||
var params = this._paramGetter();
|
||||
this._changeDetectorFactories = params[0];
|
||||
this._changeDetectorFactory = params[0];
|
||||
this._commands = params[1];
|
||||
this._styles = params[2];
|
||||
}
|
||||
}
|
||||
|
||||
get changeDetectorFactories(): Function[] {
|
||||
get changeDetectorFactory(): Function {
|
||||
this._init();
|
||||
return this._changeDetectorFactories;
|
||||
return this._changeDetectorFactory;
|
||||
}
|
||||
|
||||
get styles(): string[] {
|
||||
@ -69,26 +69,28 @@ export function ngContent(ngContentIndex: number): NgContentCmd {
|
||||
}
|
||||
|
||||
export interface IBeginElementCmd extends TemplateCmd, RenderBeginElementCmd {
|
||||
variableNameAndValues: string[];
|
||||
eventNames: string[];
|
||||
variableNameAndValues: Array<string | number>;
|
||||
eventTargetAndNames: string[];
|
||||
directives: Type[];
|
||||
visit(visitor: CommandVisitor, context: any): any;
|
||||
}
|
||||
|
||||
export class BeginElementCmd implements TemplateCmd, IBeginElementCmd, RenderBeginElementCmd {
|
||||
constructor(public name: string, public attrNameAndValues: string[], public eventNames: string[],
|
||||
public variableNameAndValues: string[], public directives: Type[],
|
||||
constructor(public name: string, public attrNameAndValues: string[],
|
||||
public eventTargetAndNames: string[],
|
||||
public variableNameAndValues: Array<string | number>, public directives: Type[],
|
||||
public isBound: boolean, public ngContentIndex: number) {}
|
||||
visit(visitor: CommandVisitor, context: any): any {
|
||||
return visitor.visitBeginElement(this, context);
|
||||
}
|
||||
}
|
||||
|
||||
export function beginElement(name: string, attrNameAndValues: string[], eventNames: string[],
|
||||
variableNameAndValues: string[], directives: Type[], isBound: boolean,
|
||||
ngContentIndex: number): BeginElementCmd {
|
||||
return new BeginElementCmd(name, attrNameAndValues, eventNames, variableNameAndValues, directives,
|
||||
isBound, ngContentIndex);
|
||||
export function beginElement(name: string, attrNameAndValues: string[],
|
||||
eventTargetAndNames: string[],
|
||||
variableNameAndValues: Array<string | number>, directives: Type[],
|
||||
isBound: boolean, ngContentIndex: number): BeginElementCmd {
|
||||
return new BeginElementCmd(name, attrNameAndValues, eventTargetAndNames, variableNameAndValues,
|
||||
directives, isBound, ngContentIndex);
|
||||
}
|
||||
|
||||
export class EndElementCmd implements TemplateCmd {
|
||||
@ -103,8 +105,9 @@ export class BeginComponentCmd implements TemplateCmd, IBeginElementCmd, RenderB
|
||||
isBound: boolean = true;
|
||||
templateId: number;
|
||||
component: Type;
|
||||
constructor(public name: string, public attrNameAndValues: string[], public eventNames: string[],
|
||||
public variableNameAndValues: string[], public directives: Type[],
|
||||
constructor(public name: string, public attrNameAndValues: string[],
|
||||
public eventTargetAndNames: string[],
|
||||
public variableNameAndValues: Array<string | number>, public directives: Type[],
|
||||
public nativeShadow: boolean, public ngContentIndex: number,
|
||||
public template: CompiledTemplate) {
|
||||
this.component = directives[0];
|
||||
@ -115,11 +118,11 @@ export class BeginComponentCmd implements TemplateCmd, IBeginElementCmd, RenderB
|
||||
}
|
||||
}
|
||||
|
||||
export function beginComponent(name: string, attrNameAnsValues: string[], eventNames: string[],
|
||||
variableNameAndValues: string[], directives: Type[],
|
||||
nativeShadow: boolean, ngContentIndex: number,
|
||||
template: CompiledTemplate): BeginComponentCmd {
|
||||
return new BeginComponentCmd(name, attrNameAnsValues, eventNames, variableNameAndValues,
|
||||
export function beginComponent(
|
||||
name: string, attrNameAnsValues: string[], eventTargetAndNames: string[],
|
||||
variableNameAndValues: Array<string | number>, directives: Type[], nativeShadow: boolean,
|
||||
ngContentIndex: number, template: CompiledTemplate): BeginComponentCmd {
|
||||
return new BeginComponentCmd(name, attrNameAnsValues, eventTargetAndNames, variableNameAndValues,
|
||||
directives, nativeShadow, ngContentIndex, template);
|
||||
}
|
||||
|
||||
@ -135,10 +138,10 @@ export class EmbeddedTemplateCmd implements TemplateCmd, IBeginElementCmd,
|
||||
RenderEmbeddedTemplateCmd {
|
||||
isBound: boolean = true;
|
||||
name: string = null;
|
||||
eventNames: string[] = EMPTY_ARR;
|
||||
eventTargetAndNames: string[] = EMPTY_ARR;
|
||||
constructor(public attrNameAndValues: string[], public variableNameAndValues: string[],
|
||||
public directives: Type[], public isMerged: boolean, public ngContentIndex: number,
|
||||
public children: TemplateCmd[]) {}
|
||||
public changeDetectorFactory: Function, public children: TemplateCmd[]) {}
|
||||
visit(visitor: CommandVisitor, context: any): any {
|
||||
return visitor.visitEmbeddedTemplate(this, context);
|
||||
}
|
||||
@ -146,20 +149,13 @@ export class EmbeddedTemplateCmd implements TemplateCmd, IBeginElementCmd,
|
||||
|
||||
export function embeddedTemplate(attrNameAndValues: string[], variableNameAndValues: string[],
|
||||
directives: Type[], isMerged: boolean, ngContentIndex: number,
|
||||
children: TemplateCmd[]): EmbeddedTemplateCmd {
|
||||
changeDetectorFactory: Function, children: TemplateCmd[]):
|
||||
EmbeddedTemplateCmd {
|
||||
return new EmbeddedTemplateCmd(attrNameAndValues, variableNameAndValues, directives, isMerged,
|
||||
ngContentIndex, children);
|
||||
ngContentIndex, changeDetectorFactory, children);
|
||||
}
|
||||
|
||||
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 interface CommandVisitor extends RenderCommandVisitor {}
|
||||
|
||||
export function visitAllCommands(visitor: CommandVisitor, cmds: TemplateCmd[],
|
||||
context: any = null) {
|
||||
|
||||
@ -36,7 +36,7 @@ class Directive extends DirectiveMetadata {
|
||||
*/
|
||||
class Component extends ComponentMetadata {
|
||||
const Component({String selector, List<String> properties,
|
||||
List<String> events, Map<String, String> host, bool dynamicLoadable,
|
||||
List<String> events, Map<String, String> host,
|
||||
List bindings, String exportAs, String moduleId,
|
||||
Map<String, dynamic> queries,
|
||||
bool compileChildren, List viewBindings, ChangeDetectionStrategy changeDetection})
|
||||
@ -45,7 +45,6 @@ class Component extends ComponentMetadata {
|
||||
properties: properties,
|
||||
events: events,
|
||||
host: host,
|
||||
dynamicLoadable: dynamicLoadable,
|
||||
bindings: bindings,
|
||||
exportAs: exportAs,
|
||||
moduleId: moduleId,
|
||||
|
||||
@ -76,8 +76,8 @@ export interface ComponentDecorator extends TypeDecorator {
|
||||
View(obj: {
|
||||
templateUrl?: string,
|
||||
template?: string,
|
||||
directives?: Array<Type | any | any[]>,
|
||||
pipes?: Array<Type | any | any[]>,
|
||||
directives?: Array<Type | any[]>,
|
||||
pipes?: Array<Type | any[]>,
|
||||
renderer?: string,
|
||||
styles?: string[],
|
||||
styleUrls?: string[],
|
||||
@ -96,8 +96,8 @@ export interface ViewDecorator extends TypeDecorator {
|
||||
View(obj: {
|
||||
templateUrl?: string,
|
||||
template?: string,
|
||||
directives?: Array<Type | any | any[]>,
|
||||
pipes?: Array<Type | any | any[]>,
|
||||
directives?: Array<Type | any[]>,
|
||||
pipes?: Array<Type | any[]>,
|
||||
renderer?: string,
|
||||
styles?: string[],
|
||||
styleUrls?: string[],
|
||||
@ -218,7 +218,6 @@ export interface ComponentFactory {
|
||||
properties?: string[],
|
||||
events?: string[],
|
||||
host?: StringMap<string, string>,
|
||||
dynamicLoadable?: boolean,
|
||||
bindings?: any[],
|
||||
exportAs?: string,
|
||||
moduleId?: string,
|
||||
@ -232,7 +231,6 @@ export interface ComponentFactory {
|
||||
properties?: string[],
|
||||
events?: string[],
|
||||
host?: StringMap<string, string>,
|
||||
dynamicLoadable?: boolean,
|
||||
bindings?: any[],
|
||||
exportAs?: string,
|
||||
moduleId?: string,
|
||||
@ -290,7 +288,8 @@ export interface ViewFactory {
|
||||
(obj: {
|
||||
templateUrl?: string,
|
||||
template?: string,
|
||||
directives?: Array<Type | any | any[]>,
|
||||
directives?: Array<Type | any[]>,
|
||||
pipes?: Array<Type | any[]>,
|
||||
encapsulation?: ViewEncapsulation,
|
||||
styles?: string[],
|
||||
styleUrls?: string[],
|
||||
@ -298,7 +297,8 @@ export interface ViewFactory {
|
||||
new (obj: {
|
||||
templateUrl?: string,
|
||||
template?: string,
|
||||
directives?: Array<Type | any | any[]>,
|
||||
directives?: Array<Type | any[]>,
|
||||
pipes?: Array<Type | any[]>,
|
||||
encapsulation?: ViewEncapsulation,
|
||||
styles?: string[],
|
||||
styleUrls?: string[],
|
||||
|
||||
@ -826,27 +826,6 @@ export class DirectiveMetadata extends InjectableMetadata {
|
||||
*/
|
||||
@CONST()
|
||||
export class ComponentMetadata extends DirectiveMetadata {
|
||||
/**
|
||||
* Declare that this component can be programatically loaded.
|
||||
* Every component that is used in bootstrap, routing, ... has to be
|
||||
* annotated with this.
|
||||
*
|
||||
* ## Example
|
||||
*
|
||||
* ```
|
||||
* @Component({
|
||||
* selector: 'root',
|
||||
* dynamicLoadable: true
|
||||
* })
|
||||
* @View({
|
||||
* template: 'hello world!'
|
||||
* })
|
||||
* class RootComponent {
|
||||
* }
|
||||
* ```
|
||||
*/
|
||||
dynamicLoadable: boolean;
|
||||
|
||||
/**
|
||||
* Defines the used change detection strategy.
|
||||
*
|
||||
@ -900,22 +879,21 @@ export class ComponentMetadata extends DirectiveMetadata {
|
||||
*/
|
||||
viewBindings: any[];
|
||||
|
||||
constructor({selector, properties, events, host, dynamicLoadable, exportAs, moduleId, bindings,
|
||||
queries, viewBindings, changeDetection = ChangeDetectionStrategy.Default,
|
||||
compileChildren = true}: {
|
||||
selector?: string,
|
||||
properties?: string[],
|
||||
events?: string[],
|
||||
host?: StringMap<string, string>,
|
||||
dynamicLoadable?: boolean,
|
||||
bindings?: any[],
|
||||
exportAs?: string,
|
||||
moduleId?: string,
|
||||
compileChildren?: boolean,
|
||||
viewBindings?: any[],
|
||||
queries?: StringMap<string, any>,
|
||||
changeDetection?: ChangeDetectionStrategy,
|
||||
} = {}) {
|
||||
constructor({selector, properties, events, host, exportAs, moduleId, bindings, viewBindings,
|
||||
changeDetection = ChangeDetectionStrategy.Default, queries, compileChildren = true}:
|
||||
{
|
||||
selector?: string,
|
||||
properties?: string[],
|
||||
events?: string[],
|
||||
host?: StringMap<string, string>,
|
||||
bindings?: any[],
|
||||
exportAs?: string,
|
||||
moduleId?: string,
|
||||
compileChildren?: boolean,
|
||||
viewBindings?: any[],
|
||||
queries?: StringMap<string, any>,
|
||||
changeDetection?: ChangeDetectionStrategy,
|
||||
} = {}) {
|
||||
super({
|
||||
selector: selector,
|
||||
properties: properties,
|
||||
@ -930,7 +908,6 @@ export class ComponentMetadata extends DirectiveMetadata {
|
||||
|
||||
this.changeDetection = changeDetection;
|
||||
this.viewBindings = viewBindings;
|
||||
this.dynamicLoadable = dynamicLoadable;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -82,12 +82,9 @@ export class ViewMetadata {
|
||||
* }
|
||||
* ```
|
||||
*/
|
||||
// TODO(tbosch): use Type | Binding | any[] when Dart supports union types,
|
||||
// as otherwise we would need to import Binding type and Dart would warn
|
||||
// for an unused import.
|
||||
directives: Array<Type | any | any[]>;
|
||||
directives: Array<Type | any[]>;
|
||||
|
||||
pipes: Array<Type | any | any[]>;
|
||||
pipes: Array<Type | any[]>;
|
||||
|
||||
/**
|
||||
* Specify how the template and the styles should be encapsulated.
|
||||
@ -100,8 +97,8 @@ export class ViewMetadata {
|
||||
constructor({templateUrl, template, directives, pipes, encapsulation, styles, styleUrls}: {
|
||||
templateUrl?: string,
|
||||
template?: string,
|
||||
directives?: Array<Type | any | any[]>,
|
||||
pipes?: Array<Type | any | any[]>,
|
||||
directives?: Array<Type | any[]>,
|
||||
pipes?: Array<Type | any[]>,
|
||||
encapsulation?: ViewEncapsulation,
|
||||
styles?: string[],
|
||||
styleUrls?: string[],
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import {isPresent, isBlank, RegExpWrapper, deserializeEnum} from 'angular2/src/core/facade/lang';
|
||||
import {isPresent, isBlank, RegExpWrapper} from 'angular2/src/core/facade/lang';
|
||||
import {Promise} from 'angular2/src/core/facade/async';
|
||||
import {Map, MapWrapper, StringMap, StringMapWrapper} from 'angular2/src/core/facade/collection';
|
||||
import {
|
||||
@ -309,11 +309,8 @@ export enum ViewEncapsulation {
|
||||
None
|
||||
}
|
||||
|
||||
var encapsulationMap: Map<number, ViewEncapsulation> = MapWrapper.createFromPairs(
|
||||
[[0, ViewEncapsulation.Emulated], [1, ViewEncapsulation.Native], [2, ViewEncapsulation.None]]);
|
||||
export function viewEncapsulationFromJson(value: number): ViewEncapsulation {
|
||||
return deserializeEnum(value, encapsulationMap);
|
||||
}
|
||||
export var VIEW_ENCAPSULATION_VALUES =
|
||||
[ViewEncapsulation.Emulated, ViewEncapsulation.Native, ViewEncapsulation.None];
|
||||
|
||||
export class ViewDefinition {
|
||||
componentId: string;
|
||||
@ -409,7 +406,7 @@ export interface RenderNgContentCmd extends RenderBeginCmd { ngContentIndex: num
|
||||
export interface RenderBeginElementCmd extends RenderBeginCmd {
|
||||
name: string;
|
||||
attrNameAndValues: string[];
|
||||
eventNames: string[];
|
||||
eventTargetAndNames: string[];
|
||||
}
|
||||
|
||||
export interface RenderBeginComponentCmd extends RenderBeginElementCmd {
|
||||
@ -422,15 +419,14 @@ export interface RenderEmbeddedTemplateCmd extends RenderBeginElementCmd {
|
||||
children: RenderTemplateCmd[];
|
||||
}
|
||||
|
||||
// TODO(tbosch): change ts2dart to allow to use `CMD` as type in these methods!
|
||||
export interface RenderCommandVisitor {
|
||||
visitText /*<CMD extends RenderTextCmd>*/ (cmd: any, context: any): any;
|
||||
visitNgContent /*<CMD extends RenderNgContentCmd>*/ (cmd: any, context: any): any;
|
||||
visitBeginElement /*<CMD extends RenderBeginElementCmd>*/ (cmd: any, context: any): any;
|
||||
visitText(cmd: any, context: any): any;
|
||||
visitNgContent(cmd: any, context: any): any;
|
||||
visitBeginElement(cmd: any, context: any): any;
|
||||
visitEndElement(context: any): any;
|
||||
visitBeginComponent /*<CMD extends RenderBeginComponentCmd>*/ (cmd: any, context: any): any;
|
||||
visitBeginComponent(cmd: any, context: any): any;
|
||||
visitEndComponent(context: any): any;
|
||||
visitEmbeddedTemplate /*<CMD extends RenderEmbeddedTemplateCmd>*/ (cmd: any, context: any): any;
|
||||
visitEmbeddedTemplate(cmd: any, context: any): any;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -29,7 +29,6 @@ export class MockDirectiveResolver extends DirectiveResolver {
|
||||
properties: dm.properties,
|
||||
events: dm.events,
|
||||
host: dm.host,
|
||||
dynamicLoadable: dm.dynamicLoadable,
|
||||
bindings: bindings,
|
||||
exportAs: dm.exportAs,
|
||||
moduleId: dm.moduleId,
|
||||
|
||||
@ -14,9 +14,8 @@ import {
|
||||
} from 'angular2/test_lib';
|
||||
import {MapWrapper} from 'angular2/src/core/facade/collection';
|
||||
import {
|
||||
NormalizedDirectiveMetadata,
|
||||
TypeMetadata,
|
||||
ChangeDetectionMetadata
|
||||
CompileDirectiveMetadata,
|
||||
CompileTypeMetadata
|
||||
} from 'angular2/src/compiler/directive_metadata';
|
||||
import {TemplateParser} from 'angular2/src/compiler/template_parser';
|
||||
import {
|
||||
@ -60,10 +59,10 @@ export function main() {
|
||||
pipes = new TestPipes();
|
||||
}));
|
||||
|
||||
function createChangeDetector(template: string, directives: NormalizedDirectiveMetadata[],
|
||||
function createChangeDetector(template: string, directives: CompileDirectiveMetadata[],
|
||||
protoViewIndex: number = 0): ChangeDetector {
|
||||
var protoChangeDetectors =
|
||||
createChangeDetectorDefinitions(new TypeMetadata({name: 'SomeComp'}),
|
||||
createChangeDetectorDefinitions(new CompileTypeMetadata({name: 'SomeComp'}),
|
||||
ChangeDetectionStrategy.Default,
|
||||
new ChangeDetectorGenConfig(true, true, false, false),
|
||||
parser.parse(template, directives, 'TestComp'))
|
||||
@ -97,6 +96,14 @@ export function main() {
|
||||
expect(context.eventLog).toEqual(['click']);
|
||||
});
|
||||
|
||||
it('should handle events with targets', () => {
|
||||
var changeDetector = createChangeDetector('<div (window:click)="onEvent($event)">', [], 0);
|
||||
|
||||
eventLocals.set('$event', 'click');
|
||||
changeDetector.handleEvent('window:click', 0, eventLocals);
|
||||
expect(context.eventLog).toEqual(['click']);
|
||||
});
|
||||
|
||||
it('should watch variables', () => {
|
||||
var changeDetector = createChangeDetector('<div #some-var [el-prop]="someVar">', [], 0);
|
||||
|
||||
@ -106,10 +113,10 @@ export function main() {
|
||||
});
|
||||
|
||||
it('should write directive properties', () => {
|
||||
var dirMeta = new NormalizedDirectiveMetadata({
|
||||
type: new TypeMetadata({name: 'SomeDir'}),
|
||||
selector: 'div',
|
||||
changeDetection: new ChangeDetectionMetadata({properties: ['dirProp']})
|
||||
var dirMeta = CompileDirectiveMetadata.create({
|
||||
type: new CompileTypeMetadata({name: 'SomeDir'}),
|
||||
selector: '[dir-prop]',
|
||||
properties: ['dirProp']
|
||||
});
|
||||
|
||||
var changeDetector = createChangeDetector('<div [dir-prop]="someProp">', [dirMeta], 0);
|
||||
@ -119,11 +126,25 @@ export function main() {
|
||||
expect(directive.dirProp).toEqual('someValue');
|
||||
});
|
||||
|
||||
it('should write template directive properties', () => {
|
||||
var dirMeta = CompileDirectiveMetadata.create({
|
||||
type: new CompileTypeMetadata({name: 'SomeDir'}),
|
||||
selector: '[dir-prop]',
|
||||
properties: ['dirProp']
|
||||
});
|
||||
|
||||
var changeDetector = createChangeDetector('<template [dir-prop]="someProp">', [dirMeta], 0);
|
||||
|
||||
context.someProp = 'someValue';
|
||||
changeDetector.detectChanges();
|
||||
expect(directive.dirProp).toEqual('someValue');
|
||||
});
|
||||
|
||||
it('should watch directive host properties', () => {
|
||||
var dirMeta = new NormalizedDirectiveMetadata({
|
||||
type: new TypeMetadata({name: 'SomeDir'}),
|
||||
var dirMeta = CompileDirectiveMetadata.create({
|
||||
type: new CompileTypeMetadata({name: 'SomeDir'}),
|
||||
selector: 'div',
|
||||
changeDetection: new ChangeDetectionMetadata({hostProperties: {'elProp': 'dirProp'}})
|
||||
host: {'[elProp]': 'dirProp'}
|
||||
});
|
||||
|
||||
var changeDetector = createChangeDetector('<div>', [dirMeta], 0);
|
||||
@ -134,11 +155,10 @@ export function main() {
|
||||
});
|
||||
|
||||
it('should handle directive events', () => {
|
||||
var dirMeta = new NormalizedDirectiveMetadata({
|
||||
type: new TypeMetadata({name: 'SomeDir'}),
|
||||
var dirMeta = CompileDirectiveMetadata.create({
|
||||
type: new CompileTypeMetadata({name: 'SomeDir'}),
|
||||
selector: 'div',
|
||||
changeDetection:
|
||||
new ChangeDetectionMetadata({hostListeners: {'click': 'onEvent($event)'}})
|
||||
host: {'(click)': 'onEvent($event)'}
|
||||
});
|
||||
|
||||
var changeDetector = createChangeDetector('<div>', [dirMeta], 0);
|
||||
|
||||
@ -21,11 +21,15 @@ import {Promise} from 'angular2/src/core/facade/async';
|
||||
import {ChangeDetectionCompiler} from 'angular2/src/compiler/change_detector_compiler';
|
||||
|
||||
import {
|
||||
NormalizedDirectiveMetadata,
|
||||
TypeMetadata,
|
||||
ChangeDetectionMetadata
|
||||
CompileDirectiveMetadata,
|
||||
CompileTypeMetadata
|
||||
} from 'angular2/src/compiler/directive_metadata';
|
||||
import {SourceModule, SourceExpression, moduleRef} from 'angular2/src/compiler/source_module';
|
||||
import {
|
||||
SourceModule,
|
||||
SourceExpression,
|
||||
SourceExpressions,
|
||||
moduleRef
|
||||
} from 'angular2/src/compiler/source_module';
|
||||
|
||||
import {TemplateParser} from 'angular2/src/compiler/template_parser';
|
||||
|
||||
@ -63,8 +67,8 @@ export function main() {
|
||||
|
||||
describe('compileComponentRuntime', () => {
|
||||
function detectChanges(compiler: ChangeDetectionCompiler, template: string,
|
||||
directives: NormalizedDirectiveMetadata[] = CONST_EXPR([])): string[] {
|
||||
var type = new TypeMetadata({name: 'SomeComp'});
|
||||
directives: CompileDirectiveMetadata[] = CONST_EXPR([])): string[] {
|
||||
var type = new CompileTypeMetadata({name: 'SomeComp'});
|
||||
var parsedTemplate = parser.parse(template, directives, 'TestComp');
|
||||
var factories =
|
||||
compiler.compileComponentRuntime(type, ChangeDetectionStrategy.Default, parsedTemplate);
|
||||
@ -99,13 +103,13 @@ export function main() {
|
||||
|
||||
describe('compileComponentCodeGen', () => {
|
||||
function detectChanges(compiler: ChangeDetectionCompiler, template: string,
|
||||
directives: NormalizedDirectiveMetadata[] = CONST_EXPR([])):
|
||||
directives: CompileDirectiveMetadata[] = CONST_EXPR([])):
|
||||
Promise<string[]> {
|
||||
var type = new TypeMetadata({name: 'SomeComp'});
|
||||
var type = new CompileTypeMetadata({name: 'SomeComp'});
|
||||
var parsedTemplate = parser.parse(template, directives, 'TestComp');
|
||||
var sourceExpression =
|
||||
var sourceExpressions =
|
||||
compiler.compileComponentCodeGen(type, ChangeDetectionStrategy.Default, parsedTemplate);
|
||||
var testableModule = createTestableModule(sourceExpression, 0).getSourceWithImports();
|
||||
var testableModule = createTestableModule(sourceExpressions, 0).getSourceWithImports();
|
||||
return evalModule(testableModule.source, testableModule.imports, null);
|
||||
}
|
||||
|
||||
@ -122,9 +126,10 @@ export function main() {
|
||||
});
|
||||
}
|
||||
|
||||
function createTestableModule(source: SourceExpression, changeDetectorIndex: number): SourceModule {
|
||||
function createTestableModule(source: SourceExpressions, changeDetectorIndex: number):
|
||||
SourceModule {
|
||||
var resultExpression =
|
||||
`${THIS_MODULE_REF}testChangeDetector((${source.expression})[${changeDetectorIndex}])`;
|
||||
`${THIS_MODULE_REF}testChangeDetector(([${source.expressions.join(',')}])[${changeDetectorIndex}])`;
|
||||
var testableSource = `${source.declarations.join('\n')}
|
||||
${codeGenExportVariable('run')}${codeGenValueFn(['_'], resultExpression)};`;
|
||||
return new SourceModule(null, testableSource);
|
||||
|
||||
@ -29,9 +29,9 @@ import {
|
||||
} from 'angular2/src/core/compiler/template_commands';
|
||||
import {CommandCompiler} from 'angular2/src/compiler/command_compiler';
|
||||
import {
|
||||
NormalizedDirectiveMetadata,
|
||||
TypeMetadata,
|
||||
NormalizedTemplateMetadata
|
||||
CompileDirectiveMetadata,
|
||||
CompileTypeMetadata,
|
||||
CompileTemplateMetadata
|
||||
} from 'angular2/src/compiler/directive_metadata';
|
||||
import {SourceModule, SourceExpression, moduleRef} from 'angular2/src/compiler/source_module';
|
||||
import {ViewEncapsulation} from 'angular2/src/core/render/api';
|
||||
@ -61,12 +61,12 @@ export class RootComp {}
|
||||
export class SomeDir {}
|
||||
export class AComp {}
|
||||
|
||||
var RootCompTypeMeta =
|
||||
new TypeMetadata({id: 1, name: 'RootComp', runtime: RootComp, moduleId: THIS_MODULE_NAME});
|
||||
var RootCompTypeMeta = new CompileTypeMetadata(
|
||||
{id: 1, name: 'RootComp', runtime: RootComp, moduleId: THIS_MODULE_NAME});
|
||||
var SomeDirTypeMeta =
|
||||
new TypeMetadata({id: 2, name: 'SomeDir', runtime: SomeDir, moduleId: THIS_MODULE_NAME});
|
||||
new CompileTypeMetadata({id: 2, name: 'SomeDir', runtime: SomeDir, moduleId: THIS_MODULE_NAME});
|
||||
var ACompTypeMeta =
|
||||
new TypeMetadata({id: 3, name: 'AComp', runtime: AComp, moduleId: THIS_MODULE_NAME});
|
||||
new CompileTypeMetadata({id: 3, name: 'AComp', runtime: AComp, moduleId: THIS_MODULE_NAME});
|
||||
|
||||
var NESTED_COMPONENT = new CompiledTemplate(45, () => []);
|
||||
|
||||
@ -84,12 +84,12 @@ export function main() {
|
||||
}));
|
||||
|
||||
function createComp({type, selector, template, encapsulation, ngContentSelectors}: {
|
||||
type?: TypeMetadata,
|
||||
type?: CompileTypeMetadata,
|
||||
selector?: string,
|
||||
template?: string,
|
||||
encapsulation?: ViewEncapsulation,
|
||||
ngContentSelectors?: string[]
|
||||
}): NormalizedDirectiveMetadata {
|
||||
}): CompileDirectiveMetadata {
|
||||
if (isBlank(encapsulation)) {
|
||||
encapsulation = ViewEncapsulation.None;
|
||||
}
|
||||
@ -102,11 +102,11 @@ export function main() {
|
||||
if (isBlank(template)) {
|
||||
template = '';
|
||||
}
|
||||
return new NormalizedDirectiveMetadata({
|
||||
return CompileDirectiveMetadata.create({
|
||||
selector: selector,
|
||||
isComponent: true,
|
||||
type: type,
|
||||
template: new NormalizedTemplateMetadata({
|
||||
template: new CompileTemplateMetadata({
|
||||
template: template,
|
||||
ngContentSelectors: ngContentSelectors,
|
||||
encapsulation: encapsulation
|
||||
@ -114,8 +114,10 @@ export function main() {
|
||||
});
|
||||
}
|
||||
|
||||
function createDirective(type: TypeMetadata, selector: string): NormalizedDirectiveMetadata {
|
||||
return new NormalizedDirectiveMetadata({selector: selector, isComponent: false, type: type});
|
||||
function createDirective(type: CompileTypeMetadata, selector: string, exportAs: string = null):
|
||||
CompileDirectiveMetadata {
|
||||
return CompileDirectiveMetadata.create(
|
||||
{selector: selector, exportAs: exportAs, isComponent: false, type: type});
|
||||
}
|
||||
|
||||
|
||||
@ -159,18 +161,47 @@ export function main() {
|
||||
it('should create bound element commands', inject([AsyncTestCompleter], (async) => {
|
||||
var rootComp = createComp({
|
||||
type: RootCompTypeMeta,
|
||||
template: '<div a="b" #some-var="someValue" (click)="someHandler">'
|
||||
template: '<div a="b" #some-var (click)="someHandler" (window:scroll)="scrollTo()">'
|
||||
});
|
||||
var dir = createDirective(SomeDirTypeMeta, '[a]');
|
||||
run(rootComp, [dir])
|
||||
run(rootComp, [])
|
||||
.then((data) => {
|
||||
expect(data).toEqual([
|
||||
[
|
||||
BEGIN_ELEMENT,
|
||||
'div',
|
||||
['a', 'b'],
|
||||
['click'],
|
||||
['someVar', 'someValue'],
|
||||
[null, 'click', 'window', 'scroll'],
|
||||
['someVar', '%implicit'],
|
||||
[],
|
||||
true,
|
||||
null
|
||||
],
|
||||
[END_ELEMENT]
|
||||
]);
|
||||
async.done();
|
||||
});
|
||||
}));
|
||||
|
||||
it('should create element commands with directives',
|
||||
inject([AsyncTestCompleter], (async) => {
|
||||
var rootComp =
|
||||
createComp({type: RootCompTypeMeta, template: '<div a #some-var="someExport">'});
|
||||
var dir = CompileDirectiveMetadata.create({
|
||||
selector: '[a]',
|
||||
exportAs: 'someExport',
|
||||
isComponent: false,
|
||||
type: SomeDirTypeMeta,
|
||||
host: {'(click)': 'doIt()', '(window:scroll)': 'doIt()', 'role': 'button'}
|
||||
});
|
||||
run(rootComp, [dir])
|
||||
.then((data) => {
|
||||
expect(data).toEqual([
|
||||
[
|
||||
BEGIN_ELEMENT,
|
||||
'div',
|
||||
['a', '', 'role', 'button'],
|
||||
[null, 'click', 'window', 'scroll'],
|
||||
['someVar', 0],
|
||||
['SomeDirType'],
|
||||
true,
|
||||
null
|
||||
@ -214,10 +245,8 @@ export function main() {
|
||||
describe('components', () => {
|
||||
|
||||
it('should create component commands', inject([AsyncTestCompleter], (async) => {
|
||||
var rootComp = createComp({
|
||||
type: RootCompTypeMeta,
|
||||
template: '<a a="b" #some-var="someValue" (click)="someHandler">'
|
||||
});
|
||||
var rootComp = createComp(
|
||||
{type: RootCompTypeMeta, template: '<a a="b" #some-var (click)="someHandler">'});
|
||||
var comp = createComp({type: ACompTypeMeta, selector: 'a'});
|
||||
run(rootComp, [comp])
|
||||
.then((data) => {
|
||||
@ -226,8 +255,8 @@ export function main() {
|
||||
BEGIN_COMPONENT,
|
||||
'a',
|
||||
['a', 'b'],
|
||||
['click'],
|
||||
['someVar', 'someValue'],
|
||||
[null, 'click'],
|
||||
['someVar', 0],
|
||||
['ACompType'],
|
||||
false,
|
||||
null,
|
||||
@ -305,7 +334,7 @@ export function main() {
|
||||
template: '<template a="b" #some-var="someValue"></template>'
|
||||
});
|
||||
var dir = createDirective(SomeDirTypeMeta, '[a]');
|
||||
run(rootComp, [dir])
|
||||
run(rootComp, [dir], 1)
|
||||
.then((data) => {
|
||||
expect(data).toEqual([
|
||||
[
|
||||
@ -315,6 +344,7 @@ export function main() {
|
||||
['SomeDirType'],
|
||||
false,
|
||||
null,
|
||||
'cd1',
|
||||
[]
|
||||
]
|
||||
]);
|
||||
@ -325,10 +355,20 @@ export function main() {
|
||||
it('should created nested nodes', inject([AsyncTestCompleter], (async) => {
|
||||
var rootComp =
|
||||
createComp({type: RootCompTypeMeta, template: '<template>t</template>'});
|
||||
run(rootComp, [])
|
||||
run(rootComp, [], 1)
|
||||
.then((data) => {
|
||||
expect(data).toEqual(
|
||||
[[EMBEDDED_TEMPLATE, [], [], [], false, null, [[TEXT, 't', false, null]]]]);
|
||||
expect(data).toEqual([
|
||||
[
|
||||
EMBEDDED_TEMPLATE,
|
||||
[],
|
||||
[],
|
||||
[],
|
||||
false,
|
||||
null,
|
||||
'cd1',
|
||||
[[TEXT, 't', false, null]]
|
||||
]
|
||||
]);
|
||||
async.done();
|
||||
});
|
||||
}));
|
||||
@ -339,10 +379,10 @@ export function main() {
|
||||
type: RootCompTypeMeta,
|
||||
template: '<template><ng-content></ng-content></template>'
|
||||
});
|
||||
run(rootComp, [])
|
||||
run(rootComp, [], 1)
|
||||
.then((data) => {
|
||||
expect(data).toEqual(
|
||||
[[EMBEDDED_TEMPLATE, [], [], [], true, null, [[NG_CONTENT, null]]]]);
|
||||
[[EMBEDDED_TEMPLATE, [], [], [], true, null, 'cd1', [[NG_CONTENT, null]]]]);
|
||||
async.done();
|
||||
});
|
||||
}));
|
||||
@ -364,17 +404,21 @@ export function main() {
|
||||
|
||||
describe('compileComponentRuntime', () => {
|
||||
beforeEach(() => {
|
||||
componentTemplateFactory = (directive: NormalizedDirectiveMetadata) => {
|
||||
componentTemplateFactory = (directive: CompileDirectiveMetadata) => {
|
||||
return new CompiledTemplate(directive.type.id, () => []);
|
||||
};
|
||||
});
|
||||
|
||||
function run(component: NormalizedDirectiveMetadata,
|
||||
directives: NormalizedDirectiveMetadata[]): Promise<any[][]> {
|
||||
function run(component: CompileDirectiveMetadata, directives: CompileDirectiveMetadata[],
|
||||
embeddedTemplateCount: number = 0): Promise<any[][]> {
|
||||
var changeDetectorFactories = [];
|
||||
for (var i = 0; i < embeddedTemplateCount + 1; i++) {
|
||||
(function(i) { changeDetectorFactories.push((_) => `cd${i}`); })(i);
|
||||
}
|
||||
var parsedTemplate =
|
||||
parser.parse(component.template.template, directives, component.type.name);
|
||||
var commands = commandCompiler.compileComponentRuntime(component, parsedTemplate,
|
||||
componentTemplateFactory);
|
||||
var commands = commandCompiler.compileComponentRuntime(
|
||||
component, parsedTemplate, changeDetectorFactories, componentTemplateFactory);
|
||||
return PromiseWrapper.resolve(humanize(commands));
|
||||
}
|
||||
|
||||
@ -384,17 +428,21 @@ export function main() {
|
||||
|
||||
describe('compileComponentCodeGen', () => {
|
||||
beforeEach(() => {
|
||||
componentTemplateFactory = (directive: NormalizedDirectiveMetadata) => {
|
||||
componentTemplateFactory = (directive: CompileDirectiveMetadata) => {
|
||||
return `new ${TEMPLATE_COMMANDS_MODULE_REF}CompiledTemplate(${directive.type.id}, ${codeGenValueFn([], '{}')})`;
|
||||
};
|
||||
});
|
||||
|
||||
function run(component: NormalizedDirectiveMetadata,
|
||||
directives: NormalizedDirectiveMetadata[]): Promise<any[][]> {
|
||||
function run(component: CompileDirectiveMetadata, directives: CompileDirectiveMetadata[],
|
||||
embeddedTemplateCount: number = 0): Promise<any[][]> {
|
||||
var changeDetectorFactoryExpressions = [];
|
||||
for (var i = 0; i < embeddedTemplateCount + 1; i++) {
|
||||
changeDetectorFactoryExpressions.push(codeGenValueFn(['_'], `'cd${i}'`));
|
||||
}
|
||||
var parsedTemplate =
|
||||
parser.parse(component.template.template, directives, component.type.name);
|
||||
var sourceModule = commandCompiler.compileComponentCodeGen(component, parsedTemplate,
|
||||
componentTemplateFactory);
|
||||
var sourceModule = commandCompiler.compileComponentCodeGen(
|
||||
component, parsedTemplate, changeDetectorFactoryExpressions, componentTemplateFactory);
|
||||
var testableModule = createTestableModule(sourceModule).getSourceWithImports();
|
||||
return evalModule(testableModule.source, testableModule.imports, null);
|
||||
}
|
||||
@ -432,7 +480,7 @@ class CommandHumanizer implements CommandVisitor {
|
||||
BEGIN_ELEMENT,
|
||||
cmd.name,
|
||||
cmd.attrNameAndValues,
|
||||
cmd.eventNames,
|
||||
cmd.eventTargetAndNames,
|
||||
cmd.variableNameAndValues,
|
||||
cmd.directives.map(checkAndStringifyType),
|
||||
cmd.isBound,
|
||||
@ -449,12 +497,11 @@ class CommandHumanizer implements CommandVisitor {
|
||||
BEGIN_COMPONENT,
|
||||
cmd.name,
|
||||
cmd.attrNameAndValues,
|
||||
cmd.eventNames,
|
||||
cmd.eventTargetAndNames,
|
||||
cmd.variableNameAndValues,
|
||||
cmd.directives.map(checkAndStringifyType),
|
||||
cmd.nativeShadow,
|
||||
cmd.ngContentIndex,
|
||||
// TODO humanizeTemplate(cmd.template)
|
||||
cmd.template.id
|
||||
]);
|
||||
return null;
|
||||
@ -471,6 +518,7 @@ class CommandHumanizer implements CommandVisitor {
|
||||
cmd.directives.map(checkAndStringifyType),
|
||||
cmd.isMerged,
|
||||
cmd.ngContentIndex,
|
||||
cmd.changeDetectorFactory(null),
|
||||
humanize(cmd.children)
|
||||
]);
|
||||
return null;
|
||||
|
||||
@ -13,98 +13,76 @@ import {
|
||||
} from 'angular2/test_lib';
|
||||
|
||||
import {
|
||||
NormalizedDirectiveMetadata,
|
||||
TypeMetadata,
|
||||
NormalizedTemplateMetadata,
|
||||
ChangeDetectionMetadata
|
||||
CompileDirectiveMetadata,
|
||||
CompileTypeMetadata,
|
||||
CompileTemplateMetadata
|
||||
} from 'angular2/src/compiler/directive_metadata';
|
||||
import {ViewEncapsulation} from 'angular2/src/core/render/api';
|
||||
import {ChangeDetectionStrategy} from 'angular2/src/core/change_detection';
|
||||
import {LifecycleHooks} from 'angular2/src/core/compiler/interfaces';
|
||||
|
||||
export function main() {
|
||||
describe('DirectiveMetadata', () => {
|
||||
var fullTypeMeta: TypeMetadata;
|
||||
var fullTemplateMeta: NormalizedTemplateMetadata;
|
||||
var fullChangeDetectionMeta: ChangeDetectionMetadata;
|
||||
var fullDirectiveMeta: NormalizedDirectiveMetadata;
|
||||
var fullTypeMeta: CompileTypeMetadata;
|
||||
var fullTemplateMeta: CompileTemplateMetadata;
|
||||
var fullDirectiveMeta: CompileDirectiveMetadata;
|
||||
|
||||
beforeEach(() => {
|
||||
fullTypeMeta = new TypeMetadata({id: 23, name: 'SomeType', moduleId: 'someUrl'});
|
||||
fullTemplateMeta = new NormalizedTemplateMetadata({
|
||||
fullTypeMeta = new CompileTypeMetadata({id: 23, name: 'SomeType', moduleId: 'someUrl'});
|
||||
fullTemplateMeta = new CompileTemplateMetadata({
|
||||
encapsulation: ViewEncapsulation.Emulated,
|
||||
template: '<a></a>',
|
||||
templateUrl: 'someTemplateUrl',
|
||||
styles: ['someStyle'],
|
||||
styleAbsUrls: ['someStyleUrl'],
|
||||
hostAttributes: {'attr1': 'attrValue2'},
|
||||
styleUrls: ['someStyleUrl'],
|
||||
ngContentSelectors: ['*']
|
||||
});
|
||||
fullChangeDetectionMeta = new ChangeDetectionMetadata({
|
||||
changeDetection: ChangeDetectionStrategy.Default,
|
||||
properties: ['someProp'],
|
||||
events: ['someEvent'],
|
||||
hostListeners: {'event1': 'handler1'},
|
||||
hostProperties: {'prop1': 'expr1'},
|
||||
callAfterContentInit: true,
|
||||
callAfterContentChecked: true,
|
||||
callAfterViewInit: true,
|
||||
callAfterViewChecked: true,
|
||||
callOnChanges: true,
|
||||
callDoCheck: true,
|
||||
callOnInit: true
|
||||
});
|
||||
fullDirectiveMeta = new NormalizedDirectiveMetadata({
|
||||
fullDirectiveMeta = CompileDirectiveMetadata.create({
|
||||
selector: 'someSelector',
|
||||
isComponent: true,
|
||||
dynamicLoadable: true,
|
||||
type: fullTypeMeta, template: fullTemplateMeta,
|
||||
changeDetection: fullChangeDetectionMeta,
|
||||
changeDetection: ChangeDetectionStrategy.Default,
|
||||
properties: ['someProp'],
|
||||
events: ['someEvent'],
|
||||
host: {'(event1)': 'handler1', '[prop1]': 'expr1', 'attr1': 'attrValue2'},
|
||||
lifecycleHooks: [LifecycleHooks.OnChanges]
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
describe('DirectiveMetadata', () => {
|
||||
it('should serialize with full data', () => {
|
||||
expect(NormalizedDirectiveMetadata.fromJson(fullDirectiveMeta.toJson()))
|
||||
expect(CompileDirectiveMetadata.fromJson(fullDirectiveMeta.toJson()))
|
||||
.toEqual(fullDirectiveMeta);
|
||||
});
|
||||
|
||||
it('should serialize with no data', () => {
|
||||
var empty = new NormalizedDirectiveMetadata();
|
||||
expect(NormalizedDirectiveMetadata.fromJson(empty.toJson())).toEqual(empty);
|
||||
var empty = CompileDirectiveMetadata.create();
|
||||
expect(CompileDirectiveMetadata.fromJson(empty.toJson())).toEqual(empty);
|
||||
});
|
||||
});
|
||||
|
||||
describe('TypeMetadata', () => {
|
||||
it('should serialize with full data',
|
||||
() => { expect(TypeMetadata.fromJson(fullTypeMeta.toJson())).toEqual(fullTypeMeta); });
|
||||
it('should serialize with full data', () => {
|
||||
expect(CompileTypeMetadata.fromJson(fullTypeMeta.toJson())).toEqual(fullTypeMeta);
|
||||
});
|
||||
|
||||
it('should serialize with no data', () => {
|
||||
var empty = new TypeMetadata();
|
||||
expect(TypeMetadata.fromJson(empty.toJson())).toEqual(empty);
|
||||
var empty = new CompileTypeMetadata();
|
||||
expect(CompileTypeMetadata.fromJson(empty.toJson())).toEqual(empty);
|
||||
});
|
||||
});
|
||||
|
||||
describe('TemplateMetadata', () => {
|
||||
it('should serialize with full data', () => {
|
||||
expect(NormalizedTemplateMetadata.fromJson(fullTemplateMeta.toJson()))
|
||||
expect(CompileTemplateMetadata.fromJson(fullTemplateMeta.toJson()))
|
||||
.toEqual(fullTemplateMeta);
|
||||
});
|
||||
|
||||
it('should serialize with no data', () => {
|
||||
var empty = new NormalizedTemplateMetadata();
|
||||
expect(NormalizedTemplateMetadata.fromJson(empty.toJson())).toEqual(empty);
|
||||
});
|
||||
});
|
||||
|
||||
describe('ChangeDetectionMetadata', () => {
|
||||
it('should serialize with full data', () => {
|
||||
expect(ChangeDetectionMetadata.fromJson(fullChangeDetectionMeta.toJson()))
|
||||
.toEqual(fullChangeDetectionMeta);
|
||||
});
|
||||
|
||||
it('should serialize with no data', () => {
|
||||
var empty = new ChangeDetectionMetadata();
|
||||
expect(ChangeDetectionMetadata.fromJson(empty.toJson())).toEqual(empty);
|
||||
var empty = new CompileTemplateMetadata();
|
||||
expect(CompileTemplateMetadata.fromJson(empty.toJson())).toEqual(empty);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@ -80,22 +80,6 @@ export function main() {
|
||||
]);
|
||||
});
|
||||
});
|
||||
|
||||
describe('ng-non-bindable', () => {
|
||||
it('should ignore text nodes and elements inside of elements with ng-non-bindable', () => {
|
||||
expect(humanizeDom(
|
||||
parser.parse('<div ng-non-bindable>hello<span></span></div>', 'TestComp')))
|
||||
.toEqual([
|
||||
[HtmlElementAst, 'div', 'TestComp > div:nth-child(0)'],
|
||||
[
|
||||
HtmlAttrAst,
|
||||
'ng-non-bindable',
|
||||
'',
|
||||
'TestComp > div:nth-child(0)[ng-non-bindable=]'
|
||||
]
|
||||
]);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('unparse', () => {
|
||||
|
||||
@ -15,6 +15,7 @@ import {
|
||||
|
||||
import {stringify} from 'angular2/src/core/facade/lang';
|
||||
import {RuntimeMetadataResolver} from 'angular2/src/compiler/runtime_metadata';
|
||||
import {LifecycleHooks, LIFECYCLE_HOOKS_VALUES} from 'angular2/src/core/compiler/interfaces';
|
||||
import {
|
||||
Component,
|
||||
View,
|
||||
@ -43,27 +44,20 @@ export function main() {
|
||||
inject([RuntimeMetadataResolver], (resolver: RuntimeMetadataResolver) => {
|
||||
var meta = resolver.getMetadata(ComponentWithEverything);
|
||||
expect(meta.selector).toEqual('someSelector');
|
||||
expect(meta.exportAs).toEqual('someExportAs');
|
||||
expect(meta.isComponent).toBe(true);
|
||||
expect(meta.dynamicLoadable).toBe(true);
|
||||
expect(meta.type.runtime).toBe(ComponentWithEverything);
|
||||
expect(meta.type.name).toEqual(stringify(ComponentWithEverything));
|
||||
expect(meta.type.moduleId).toEqual('someModuleId');
|
||||
expect(meta.changeDetection.callAfterContentChecked).toBe(true);
|
||||
expect(meta.changeDetection.callAfterContentInit).toBe(true);
|
||||
expect(meta.changeDetection.callAfterViewChecked).toBe(true);
|
||||
expect(meta.changeDetection.callAfterViewInit).toBe(true);
|
||||
expect(meta.changeDetection.callDoCheck).toBe(true);
|
||||
expect(meta.changeDetection.callOnChanges).toBe(true);
|
||||
expect(meta.changeDetection.callOnInit).toBe(true);
|
||||
expect(meta.changeDetection.changeDetection).toBe(ChangeDetectionStrategy.CheckAlways);
|
||||
expect(meta.changeDetection.properties).toEqual(['someProp']);
|
||||
expect(meta.changeDetection.events).toEqual(['someEvent']);
|
||||
expect(meta.changeDetection.hostListeners)
|
||||
.toEqual({'someHostListener': 'someHostListenerExpr'});
|
||||
expect(meta.changeDetection.hostProperties)
|
||||
.toEqual({'someHostProp': 'someHostPropExpr'});
|
||||
expect(meta.lifecycleHooks).toEqual(LIFECYCLE_HOOKS_VALUES);
|
||||
expect(meta.changeDetection).toBe(ChangeDetectionStrategy.CheckAlways);
|
||||
expect(meta.properties).toEqual({'someProp': 'someProp'});
|
||||
expect(meta.events).toEqual({'someEvent': 'someEvent'});
|
||||
expect(meta.hostListeners).toEqual({'someHostListener': 'someHostListenerExpr'});
|
||||
expect(meta.hostProperties).toEqual({'someHostProp': 'someHostPropExpr'});
|
||||
expect(meta.hostAttributes).toEqual({'someHostAttr': 'someHostAttrValue'});
|
||||
expect(meta.template.encapsulation).toBe(ViewEncapsulation.Emulated);
|
||||
expect(meta.template.hostAttributes).toEqual({'someHostAttr': 'someHostAttrValue'});
|
||||
expect(meta.template.styles).toEqual(['someStyle']);
|
||||
expect(meta.template.styleUrls).toEqual(['someStyleUrl']);
|
||||
expect(meta.template.template).toEqual('someTemplate');
|
||||
@ -105,7 +99,7 @@ class DirectiveWithoutModuleId {
|
||||
'(someHostListener)': 'someHostListenerExpr',
|
||||
'someHostAttr': 'someHostAttrValue'
|
||||
},
|
||||
dynamicLoadable: true,
|
||||
exportAs: 'someExportAs',
|
||||
moduleId: 'someModuleId',
|
||||
changeDetection: ChangeDetectionStrategy.CheckAlways
|
||||
})
|
||||
|
||||
@ -17,14 +17,14 @@ import {SpyXHR} from '../core/spies';
|
||||
import {XHR} from 'angular2/src/core/render/xhr';
|
||||
import {BaseException, WrappedException} from 'angular2/src/core/facade/exceptions';
|
||||
|
||||
import {CONST_EXPR, isPresent, StringWrapper} from 'angular2/src/core/facade/lang';
|
||||
import {CONST_EXPR, isPresent, isBlank, StringWrapper} from 'angular2/src/core/facade/lang';
|
||||
import {PromiseWrapper, Promise} from 'angular2/src/core/facade/async';
|
||||
import {evalModule} from './eval_module';
|
||||
import {StyleCompiler} from 'angular2/src/compiler/style_compiler';
|
||||
import {
|
||||
NormalizedDirectiveMetadata,
|
||||
NormalizedTemplateMetadata,
|
||||
TypeMetadata
|
||||
CompileDirectiveMetadata,
|
||||
CompileTemplateMetadata,
|
||||
CompileTypeMetadata
|
||||
} from 'angular2/src/compiler/directive_metadata';
|
||||
import {SourceExpression, SourceModule} from 'angular2/src/compiler/source_module';
|
||||
import {ViewEncapsulation} from 'angular2/src/core/render/api';
|
||||
@ -52,152 +52,249 @@ export function main() {
|
||||
beforeEach(inject([StyleCompiler], (_compiler) => { compiler = _compiler; }));
|
||||
|
||||
function comp(styles: string[], styleAbsUrls: string[], encapsulation: ViewEncapsulation):
|
||||
NormalizedDirectiveMetadata {
|
||||
return new NormalizedDirectiveMetadata({
|
||||
type: new TypeMetadata({id: 23, moduleId: 'someUrl'}),
|
||||
template: new NormalizedTemplateMetadata(
|
||||
{styles: styles, styleAbsUrls: styleAbsUrls, encapsulation: encapsulation})
|
||||
CompileDirectiveMetadata {
|
||||
return CompileDirectiveMetadata.create({
|
||||
type: new CompileTypeMetadata({id: 23, moduleId: 'someUrl'}),
|
||||
template: new CompileTemplateMetadata(
|
||||
{styles: styles, styleUrls: styleAbsUrls, encapsulation: encapsulation})
|
||||
});
|
||||
}
|
||||
|
||||
describe('compileComponentRuntime', () => {
|
||||
function runTest(styles: string[], styleAbsUrls: string[], encapsulation: ViewEncapsulation,
|
||||
expectedStyles: string[]) {
|
||||
return inject([AsyncTestCompleter], (async) => {
|
||||
// Note: Can't use MockXHR as the xhr is called recursively,
|
||||
// so we can't trigger flush.
|
||||
xhr.spy('get').andCallFake((url) => {
|
||||
var response;
|
||||
if (url == IMPORT_ABS_MODULE_NAME) {
|
||||
response = 'span {color: blue}';
|
||||
} else if (url == IMPORT_ABS_MODULE_NAME_WITH_IMPORT) {
|
||||
response = `a {color: green}@import ${IMPORT_REL_MODULE_NAME};`;
|
||||
} else {
|
||||
throw new BaseException(`Unexpected url ${url}`);
|
||||
}
|
||||
return PromiseWrapper.resolve(response);
|
||||
});
|
||||
compiler.compileComponentRuntime(comp(styles, styleAbsUrls, encapsulation))
|
||||
.then((value) => {
|
||||
compareStyles(value, expectedStyles);
|
||||
async.done();
|
||||
});
|
||||
var xhrUrlResults;
|
||||
var xhrCount;
|
||||
|
||||
beforeEach(() => {
|
||||
xhrCount = 0;
|
||||
xhrUrlResults = {};
|
||||
xhrUrlResults[IMPORT_ABS_MODULE_NAME] = 'span {color: blue}';
|
||||
xhrUrlResults[IMPORT_ABS_MODULE_NAME_WITH_IMPORT] =
|
||||
`a {color: green}@import ${IMPORT_REL_MODULE_NAME};`;
|
||||
});
|
||||
|
||||
function compile(styles: string[], styleAbsUrls: string[], encapsulation: ViewEncapsulation):
|
||||
Promise<string[]> {
|
||||
// Note: Can't use MockXHR as the xhr is called recursively,
|
||||
// so we can't trigger flush.
|
||||
xhr.spy('get').andCallFake((url) => {
|
||||
var response = xhrUrlResults[url];
|
||||
xhrCount++;
|
||||
if (isBlank(response)) {
|
||||
throw new BaseException(`Unexpected url ${url}`);
|
||||
}
|
||||
return PromiseWrapper.resolve(response);
|
||||
});
|
||||
return compiler.compileComponentRuntime(comp(styles, styleAbsUrls, encapsulation));
|
||||
}
|
||||
|
||||
describe('no shim', () => {
|
||||
var encapsulation = ViewEncapsulation.None;
|
||||
|
||||
it('should compile plain css rules',
|
||||
runTest(['div {color: red}', 'span {color: blue}'], [], encapsulation,
|
||||
['div {color: red}', 'span {color: blue}']));
|
||||
it('should compile plain css rules', inject([AsyncTestCompleter], (async) => {
|
||||
compile(['div {color: red}', 'span {color: blue}'], [], encapsulation)
|
||||
.then(styles => {
|
||||
expect(styles).toEqual(['div {color: red}', 'span {color: blue}']);
|
||||
async.done();
|
||||
});
|
||||
}));
|
||||
|
||||
it('should allow to import rules',
|
||||
runTest(['div {color: red}'], [IMPORT_ABS_MODULE_NAME], encapsulation,
|
||||
['div {color: red}', 'span {color: blue}']));
|
||||
it('should allow to import rules', inject([AsyncTestCompleter], (async) => {
|
||||
compile(['div {color: red}'], [IMPORT_ABS_MODULE_NAME], encapsulation)
|
||||
.then(styles => {
|
||||
expect(styles).toEqual(['div {color: red}', 'span {color: blue}']);
|
||||
async.done();
|
||||
});
|
||||
}));
|
||||
|
||||
it('should allow to import rules transitively',
|
||||
runTest(['div {color: red}'], [IMPORT_ABS_MODULE_NAME_WITH_IMPORT], encapsulation,
|
||||
['div {color: red}', 'a {color: green}', 'span {color: blue}']));
|
||||
it('should allow to import rules transitively', inject([AsyncTestCompleter], (async) => {
|
||||
compile(['div {color: red}'], [IMPORT_ABS_MODULE_NAME_WITH_IMPORT], encapsulation)
|
||||
.then(styles => {
|
||||
expect(styles)
|
||||
.toEqual(['div {color: red}', 'a {color: green}', 'span {color: blue}']);
|
||||
async.done();
|
||||
});
|
||||
}));
|
||||
});
|
||||
|
||||
describe('with shim', () => {
|
||||
var encapsulation = ViewEncapsulation.Emulated;
|
||||
|
||||
it('should compile plain css rules',
|
||||
runTest(
|
||||
['div {\ncolor: red;\n}', 'span {\ncolor: blue;\n}'], [], encapsulation,
|
||||
['div[_ngcontent-23] {\ncolor: red;\n}', 'span[_ngcontent-23] {\ncolor: blue;\n}']));
|
||||
it('should compile plain css rules', inject([AsyncTestCompleter], (async) => {
|
||||
compile(['div {\ncolor: red;\n}', 'span {\ncolor: blue;\n}'], [], encapsulation)
|
||||
.then(styles => {
|
||||
expect(styles).toEqual([
|
||||
'div[_ngcontent-23] {\ncolor: red;\n}',
|
||||
'span[_ngcontent-23] {\ncolor: blue;\n}'
|
||||
]);
|
||||
async.done();
|
||||
});
|
||||
}));
|
||||
|
||||
it('should allow to import rules',
|
||||
runTest(
|
||||
['div {\ncolor: red;\n}'], [IMPORT_ABS_MODULE_NAME], encapsulation,
|
||||
['div[_ngcontent-23] {\ncolor: red;\n}', 'span[_ngcontent-23] {\ncolor: blue;\n}']));
|
||||
it('should allow to import rules', inject([AsyncTestCompleter], (async) => {
|
||||
compile(['div {\ncolor: red;\n}'], [IMPORT_ABS_MODULE_NAME], encapsulation)
|
||||
.then(styles => {
|
||||
expect(styles).toEqual([
|
||||
'div[_ngcontent-23] {\ncolor: red;\n}',
|
||||
'span[_ngcontent-23] {\ncolor: blue;\n}'
|
||||
]);
|
||||
async.done();
|
||||
});
|
||||
}));
|
||||
|
||||
it('should allow to import rules transitively',
|
||||
runTest(['div {\ncolor: red;\n}'], [IMPORT_ABS_MODULE_NAME_WITH_IMPORT], encapsulation, [
|
||||
'div[_ngcontent-23] {\ncolor: red;\n}',
|
||||
'a[_ngcontent-23] {\ncolor: green;\n}',
|
||||
'span[_ngcontent-23] {\ncolor: blue;\n}'
|
||||
]));
|
||||
it('should allow to import rules transitively', inject([AsyncTestCompleter], (async) => {
|
||||
compile(['div {\ncolor: red;\n}'], [IMPORT_ABS_MODULE_NAME_WITH_IMPORT], encapsulation)
|
||||
.then(styles => {
|
||||
expect(styles).toEqual([
|
||||
'div[_ngcontent-23] {\ncolor: red;\n}',
|
||||
'a[_ngcontent-23] {\ncolor: green;\n}',
|
||||
'span[_ngcontent-23] {\ncolor: blue;\n}'
|
||||
]);
|
||||
async.done();
|
||||
});
|
||||
}));
|
||||
});
|
||||
|
||||
it('should cache stylesheets for parallel requests', inject([AsyncTestCompleter], (async) => {
|
||||
PromiseWrapper.all([
|
||||
compile([], [IMPORT_ABS_MODULE_NAME], ViewEncapsulation.None),
|
||||
compile([], [IMPORT_ABS_MODULE_NAME], ViewEncapsulation.None)
|
||||
])
|
||||
.then((styleArrays) => {
|
||||
expect(styleArrays[0]).toEqual(['span {color: blue}']);
|
||||
expect(styleArrays[1]).toEqual(['span {color: blue}']);
|
||||
expect(xhrCount).toBe(1);
|
||||
async.done();
|
||||
});
|
||||
}));
|
||||
|
||||
it('should cache stylesheets for serial requests', inject([AsyncTestCompleter], (async) => {
|
||||
compile([], [IMPORT_ABS_MODULE_NAME], ViewEncapsulation.None)
|
||||
.then((styles0) => {
|
||||
xhrUrlResults[IMPORT_ABS_MODULE_NAME] = 'span {color: black}';
|
||||
return compile([], [IMPORT_ABS_MODULE_NAME], ViewEncapsulation.None)
|
||||
.then((styles1) => {
|
||||
expect(styles0).toEqual(['span {color: blue}']);
|
||||
expect(styles1).toEqual(['span {color: blue}']);
|
||||
expect(xhrCount).toBe(1);
|
||||
async.done();
|
||||
});
|
||||
});
|
||||
}));
|
||||
|
||||
it('should allow to clear the cache', inject([AsyncTestCompleter], (async) => {
|
||||
compile([], [IMPORT_ABS_MODULE_NAME], ViewEncapsulation.None)
|
||||
.then((_) => {
|
||||
compiler.clearCache();
|
||||
xhrUrlResults[IMPORT_ABS_MODULE_NAME] = 'span {color: black}';
|
||||
return compile([], [IMPORT_ABS_MODULE_NAME], ViewEncapsulation.None);
|
||||
})
|
||||
.then((styles) => {
|
||||
expect(xhrCount).toBe(2);
|
||||
expect(styles).toEqual(['span {color: black}']);
|
||||
async.done();
|
||||
});
|
||||
}));
|
||||
});
|
||||
|
||||
describe('compileComponentCodeGen', () => {
|
||||
function runTest(styles: string[], styleAbsUrls: string[], encapsulation: ViewEncapsulation,
|
||||
expectedStyles: string[]) {
|
||||
return inject([AsyncTestCompleter], (async) => {
|
||||
var sourceExpression =
|
||||
compiler.compileComponentCodeGen(comp(styles, styleAbsUrls, encapsulation));
|
||||
var sourceWithImports = testableExpression(sourceExpression).getSourceWithImports();
|
||||
evalModule(sourceWithImports.source, sourceWithImports.imports, null)
|
||||
.then((value) => {
|
||||
compareStyles(value, expectedStyles);
|
||||
async.done();
|
||||
});
|
||||
});
|
||||
}
|
||||
function compile(styles: string[], styleAbsUrls: string[], encapsulation: ViewEncapsulation):
|
||||
Promise<string[]> {
|
||||
var sourceExpression =
|
||||
compiler.compileComponentCodeGen(comp(styles, styleAbsUrls, encapsulation));
|
||||
var sourceWithImports = testableExpression(sourceExpression).getSourceWithImports();
|
||||
return evalModule(sourceWithImports.source, sourceWithImports.imports, null);
|
||||
};
|
||||
|
||||
describe('no shim', () => {
|
||||
var encapsulation = ViewEncapsulation.None;
|
||||
|
||||
it('should compile plain css ruless',
|
||||
runTest(['div {color: red}', 'span {color: blue}'], [], encapsulation,
|
||||
['div {color: red}', 'span {color: blue}']));
|
||||
it('should compile plain css ruless', inject([AsyncTestCompleter], (async) => {
|
||||
compile(['div {color: red}', 'span {color: blue}'], [], encapsulation)
|
||||
.then(styles => {
|
||||
expect(styles).toEqual(['div {color: red}', 'span {color: blue}']);
|
||||
async.done();
|
||||
});
|
||||
}));
|
||||
|
||||
it('should compile css rules with newlines and quotes',
|
||||
runTest(['div\n{"color": \'red\'}'], [], encapsulation, ['div\n{"color": \'red\'}']));
|
||||
inject([AsyncTestCompleter], (async) => {
|
||||
compile(['div\n{"color": \'red\'}'], [], encapsulation)
|
||||
.then(styles => {
|
||||
expect(styles).toEqual(['div\n{"color": \'red\'}']);
|
||||
async.done();
|
||||
});
|
||||
}));
|
||||
|
||||
it('should allow to import rules',
|
||||
runTest(['div {color: red}'], [IMPORT_ABS_MODULE_NAME], encapsulation,
|
||||
['div {color: red}', 'span {color: blue}']),
|
||||
1000);
|
||||
it('should allow to import rules', inject([AsyncTestCompleter], (async) => {
|
||||
compile(['div {color: red}'], [IMPORT_ABS_MODULE_NAME], encapsulation)
|
||||
.then(styles => {
|
||||
expect(styles).toEqual(['div {color: red}', 'span {color: blue}']);
|
||||
async.done();
|
||||
});
|
||||
}));
|
||||
});
|
||||
|
||||
describe('with shim', () => {
|
||||
var encapsulation = ViewEncapsulation.Emulated;
|
||||
|
||||
it('should compile plain css ruless',
|
||||
runTest(
|
||||
['div {\ncolor: red;\n}', 'span {\ncolor: blue;\n}'], [], encapsulation,
|
||||
['div[_ngcontent-23] {\ncolor: red;\n}', 'span[_ngcontent-23] {\ncolor: blue;\n}']));
|
||||
it('should compile plain css ruless', inject([AsyncTestCompleter], (async) => {
|
||||
compile(['div {\ncolor: red;\n}', 'span {\ncolor: blue;\n}'], [], encapsulation)
|
||||
.then(styles => {
|
||||
expect(styles).toEqual([
|
||||
'div[_ngcontent-23] {\ncolor: red;\n}',
|
||||
'span[_ngcontent-23] {\ncolor: blue;\n}'
|
||||
]);
|
||||
async.done();
|
||||
});
|
||||
}));
|
||||
|
||||
it('should allow to import rules',
|
||||
runTest(
|
||||
['div {color: red}'], [IMPORT_ABS_MODULE_NAME], encapsulation,
|
||||
['div[_ngcontent-23] {\ncolor: red;\n}', 'span[_ngcontent-23] {\ncolor: blue;\n}']),
|
||||
1000);
|
||||
it('should allow to import rules', inject([AsyncTestCompleter], (async) => {
|
||||
compile(['div {color: red}'], [IMPORT_ABS_MODULE_NAME], encapsulation)
|
||||
.then(styles => {
|
||||
expect(styles).toEqual([
|
||||
'div[_ngcontent-23] {\ncolor: red;\n}',
|
||||
'span[_ngcontent-23] {\ncolor: blue;\n}'
|
||||
]);
|
||||
async.done();
|
||||
});
|
||||
}));
|
||||
});
|
||||
});
|
||||
|
||||
describe('compileStylesheetCodeGen', () => {
|
||||
function runTest(style: string, expectedStyles: string[], expectedShimStyles: string[]) {
|
||||
return inject([AsyncTestCompleter], (async) => {
|
||||
var sourceModules = compiler.compileStylesheetCodeGen(MODULE_NAME, style);
|
||||
PromiseWrapper.all(sourceModules.map(sourceModule => {
|
||||
var sourceWithImports =
|
||||
testableModule(sourceModule).getSourceWithImports();
|
||||
return evalModule(sourceWithImports.source, sourceWithImports.imports,
|
||||
null);
|
||||
}))
|
||||
.then((values) => {
|
||||
compareStyles(values[0], expectedStyles);
|
||||
compareStyles(values[1], expectedShimStyles);
|
||||
|
||||
async.done();
|
||||
});
|
||||
});
|
||||
function compile(style: string): Promise<string[]> {
|
||||
var sourceModules = compiler.compileStylesheetCodeGen(MODULE_NAME, style);
|
||||
return PromiseWrapper.all(sourceModules.map(sourceModule => {
|
||||
var sourceWithImports = testableModule(sourceModule).getSourceWithImports();
|
||||
return evalModule(sourceWithImports.source, sourceWithImports.imports, null);
|
||||
}));
|
||||
}
|
||||
|
||||
it('should compile plain css rules', runTest('div {color: red;}', ['div {color: red;}'],
|
||||
['div[_ngcontent-%COMP%] {\ncolor: red;\n}']));
|
||||
it('should compile plain css rules', inject([AsyncTestCompleter], (async) => {
|
||||
compile('div {color: red;}')
|
||||
.then(stylesAndShimStyles => {
|
||||
expect(stylesAndShimStyles)
|
||||
.toEqual(
|
||||
[['div {color: red;}'], ['div[_ngcontent-%COMP%] {\ncolor: red;\n}']]);
|
||||
async.done();
|
||||
});
|
||||
}));
|
||||
|
||||
it('should allow to import rules with relative paths',
|
||||
runTest(`div {color: red}@import ${IMPORT_REL_MODULE_NAME};`,
|
||||
['div {color: red}', 'span {color: blue}'], [
|
||||
'div[_ngcontent-%COMP%] {\ncolor: red;\n}',
|
||||
'span[_ngcontent-%COMP%] {\ncolor: blue;\n}'
|
||||
]));
|
||||
inject([AsyncTestCompleter], (async) => {
|
||||
compile(`div {color: red}@import ${IMPORT_REL_MODULE_NAME};`)
|
||||
.then(stylesAndShimStyles => {
|
||||
expect(stylesAndShimStyles)
|
||||
.toEqual([
|
||||
['div {color: red}', 'span {color: blue}'],
|
||||
[
|
||||
'div[_ngcontent-%COMP%] {\ncolor: red;\n}',
|
||||
'span[_ngcontent-%COMP%] {\ncolor: blue;\n}'
|
||||
]
|
||||
]);
|
||||
async.done();
|
||||
});
|
||||
}));
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
@ -21,11 +21,7 @@ import {
|
||||
TemplateCompiler,
|
||||
NormalizedComponentWithViewDirectives
|
||||
} from 'angular2/src/compiler/template_compiler';
|
||||
import {
|
||||
DirectiveMetadata,
|
||||
NormalizedDirectiveMetadata,
|
||||
INormalizedDirectiveMetadata
|
||||
} from 'angular2/src/compiler/directive_metadata';
|
||||
import {CompileDirectiveMetadata} from 'angular2/src/compiler/directive_metadata';
|
||||
import {evalModule} from './eval_module';
|
||||
import {SourceModule, moduleRef} from 'angular2/src/compiler/source_module';
|
||||
import {XHR} from 'angular2/src/core/render/xhr';
|
||||
@ -104,6 +100,18 @@ export function main() {
|
||||
async.done();
|
||||
});
|
||||
}));
|
||||
|
||||
it('should pass the right change detector to embedded templates',
|
||||
inject([AsyncTestCompleter], (async) => {
|
||||
compile([CompWithEmbeddedTemplate])
|
||||
.then((humanizedTemplate) => {
|
||||
expect(humanizedTemplate['commands'][1]['commands'][0]).toEqual('<template>');
|
||||
expect(humanizedTemplate['commands'][1]['commands'][1]['cd'])
|
||||
.toEqual(['elementProperty(href)=someCtxValue']);
|
||||
|
||||
async.done();
|
||||
});
|
||||
}));
|
||||
}
|
||||
|
||||
describe('compileHostComponentRuntime', () => {
|
||||
@ -113,28 +121,53 @@ export function main() {
|
||||
|
||||
runTests(compile);
|
||||
|
||||
it('should cache components', inject([AsyncTestCompleter, XHR], (async, xhr: MockXHR) => {
|
||||
// we expect only one request!
|
||||
xhr.expect('angular2/test/compiler/compUrl.html', '');
|
||||
PromiseWrapper.all([
|
||||
compiler.compileHostComponentRuntime(CompWithTemplateUrl),
|
||||
compiler.compileHostComponentRuntime(CompWithTemplateUrl)
|
||||
])
|
||||
it('should cache components for parallel requests',
|
||||
inject([AsyncTestCompleter, XHR], (async, xhr: MockXHR) => {
|
||||
xhr.expect('angular2/test/compiler/compUrl.html', 'a');
|
||||
PromiseWrapper.all([compile([CompWithTemplateUrl]), compile([CompWithTemplateUrl])])
|
||||
.then((humanizedTemplates) => {
|
||||
expect(humanizedTemplates[0]).toEqual(humanizedTemplates[1]);
|
||||
expect(humanizedTemplates[0]['commands'][1]['commands']).toEqual(['#text(a)']);
|
||||
expect(humanizedTemplates[1]['commands'][1]['commands']).toEqual(['#text(a)']);
|
||||
|
||||
async.done();
|
||||
});
|
||||
xhr.flush();
|
||||
}));
|
||||
|
||||
it('should only allow dynamic loadable components', () => {
|
||||
expect(() => compiler.compileHostComponentRuntime(PlainDirective))
|
||||
.toThrowError(
|
||||
`Could not compile '${stringify(PlainDirective)}' because it is not dynamically loadable.`);
|
||||
expect(() => compiler.compileHostComponentRuntime(CompWithoutHost))
|
||||
.toThrowError(
|
||||
`Could not compile '${stringify(CompWithoutHost)}' because it is not dynamically loadable.`);
|
||||
});
|
||||
it('should cache components for sequential requests',
|
||||
inject([AsyncTestCompleter, XHR], (async, xhr: MockXHR) => {
|
||||
xhr.expect('angular2/test/compiler/compUrl.html', 'a');
|
||||
compile([CompWithTemplateUrl])
|
||||
.then((humanizedTemplate0) => {
|
||||
return compile([CompWithTemplateUrl])
|
||||
.then((humanizedTemplate1) => {
|
||||
expect(humanizedTemplate0['commands'][1]['commands'])
|
||||
.toEqual(['#text(a)']);
|
||||
expect(humanizedTemplate1['commands'][1]['commands'])
|
||||
.toEqual(['#text(a)']);
|
||||
async.done();
|
||||
});
|
||||
});
|
||||
xhr.flush();
|
||||
}));
|
||||
|
||||
it('should allow to clear the cache',
|
||||
inject([AsyncTestCompleter, XHR], (async, xhr: MockXHR) => {
|
||||
xhr.expect('angular2/test/compiler/compUrl.html', 'a');
|
||||
compile([CompWithTemplateUrl])
|
||||
.then((humanizedTemplate) => {
|
||||
compiler.clearCache();
|
||||
xhr.expect('angular2/test/compiler/compUrl.html', 'b');
|
||||
var result = compile([CompWithTemplateUrl]);
|
||||
xhr.flush();
|
||||
return result;
|
||||
})
|
||||
.then((humanizedTemplate) => {
|
||||
expect(humanizedTemplate['commands'][1]['commands']).toEqual(['#text(b)']);
|
||||
async.done();
|
||||
});
|
||||
xhr.flush();
|
||||
}));
|
||||
|
||||
});
|
||||
|
||||
@ -145,7 +178,7 @@ export function main() {
|
||||
runtimeMetadataResolver.getViewDirectivesMetadata(component));
|
||||
return PromiseWrapper.all(compAndViewDirMetas.map(
|
||||
meta => compiler.normalizeDirectiveMetadata(meta)))
|
||||
.then((normalizedCompAndViewDirMetas: NormalizedDirectiveMetadata[]) =>
|
||||
.then((normalizedCompAndViewDirMetas: CompileDirectiveMetadata[]) =>
|
||||
new NormalizedComponentWithViewDirectives(
|
||||
normalizedCompAndViewDirMetas[0],
|
||||
normalizedCompAndViewDirMetas.slice(1)));
|
||||
@ -173,15 +206,15 @@ export function main() {
|
||||
it('should serialize and deserialize', inject([AsyncTestCompleter], (async) => {
|
||||
compiler.normalizeDirectiveMetadata(
|
||||
runtimeMetadataResolver.getMetadata(CompWithBindingsAndStyles))
|
||||
.then((meta: NormalizedDirectiveMetadata) => {
|
||||
.then((meta: CompileDirectiveMetadata) => {
|
||||
var json = compiler.serializeDirectiveMetadata(meta);
|
||||
expect(isString(json)).toBe(true);
|
||||
// Note: serializing will clear our the runtime type!
|
||||
var clonedMeta =
|
||||
<NormalizedDirectiveMetadata>compiler.deserializeDirectiveMetadata(json);
|
||||
var clonedMeta = compiler.deserializeDirectiveMetadata(json);
|
||||
expect(meta.changeDetection).toEqual(clonedMeta.changeDetection);
|
||||
expect(meta.template).toEqual(clonedMeta.template);
|
||||
expect(meta.selector).toEqual(clonedMeta.selector);
|
||||
expect(meta.exportAs).toEqual(clonedMeta.exportAs);
|
||||
expect(meta.type.name).toEqual(clonedMeta.type.name);
|
||||
async.done();
|
||||
});
|
||||
@ -194,7 +227,7 @@ export function main() {
|
||||
xhr.expect('angular2/test/compiler/compUrl.html', 'loadedTemplate');
|
||||
compiler.normalizeDirectiveMetadata(
|
||||
runtimeMetadataResolver.getMetadata(CompWithTemplateUrl))
|
||||
.then((meta: NormalizedDirectiveMetadata) => {
|
||||
.then((meta: CompileDirectiveMetadata) => {
|
||||
expect(meta.template.template).toEqual('loadedTemplate');
|
||||
async.done();
|
||||
});
|
||||
@ -203,15 +236,21 @@ export function main() {
|
||||
|
||||
it('should copy all the other fields', inject([AsyncTestCompleter], (async) => {
|
||||
var meta = runtimeMetadataResolver.getMetadata(CompWithBindingsAndStyles);
|
||||
compiler.normalizeDirectiveMetadata(meta)
|
||||
.then((normMeta: NormalizedDirectiveMetadata) => {
|
||||
expect(normMeta.selector).toEqual(meta.selector);
|
||||
expect(normMeta.dynamicLoadable).toEqual(meta.dynamicLoadable);
|
||||
expect(normMeta.isComponent).toEqual(meta.isComponent);
|
||||
expect(normMeta.type).toEqual(meta.type);
|
||||
expect(normMeta.changeDetection).toEqual(meta.changeDetection);
|
||||
async.done();
|
||||
});
|
||||
compiler.normalizeDirectiveMetadata(meta).then((normMeta: CompileDirectiveMetadata) => {
|
||||
expect(normMeta.type).toEqual(meta.type);
|
||||
expect(normMeta.isComponent).toEqual(meta.isComponent);
|
||||
expect(normMeta.dynamicLoadable).toEqual(meta.dynamicLoadable);
|
||||
expect(normMeta.selector).toEqual(meta.selector);
|
||||
expect(normMeta.exportAs).toEqual(meta.exportAs);
|
||||
expect(normMeta.changeDetection).toEqual(meta.changeDetection);
|
||||
expect(normMeta.properties).toEqual(meta.properties);
|
||||
expect(normMeta.events).toEqual(meta.events);
|
||||
expect(normMeta.hostListeners).toEqual(meta.hostListeners);
|
||||
expect(normMeta.hostProperties).toEqual(meta.hostProperties);
|
||||
expect(normMeta.hostAttributes).toEqual(meta.hostAttributes);
|
||||
expect(normMeta.lifecycleHooks).toEqual(meta.lifecycleHooks);
|
||||
async.done();
|
||||
});
|
||||
}));
|
||||
});
|
||||
|
||||
@ -233,24 +272,30 @@ export function main() {
|
||||
|
||||
@Component({
|
||||
selector: 'comp-a',
|
||||
dynamicLoadable: true,
|
||||
host: {'[title]': 'someProp'},
|
||||
moduleId: THIS_MODULE
|
||||
moduleId: THIS_MODULE,
|
||||
exportAs: 'someExportAs'
|
||||
})
|
||||
@View({template: '<a [href]="someProp"></a>', styles: ['div {color: red}']})
|
||||
class CompWithBindingsAndStyles {
|
||||
}
|
||||
|
||||
@Component({selector: 'tree', dynamicLoadable: true, moduleId: THIS_MODULE})
|
||||
@Component({selector: 'tree', moduleId: THIS_MODULE})
|
||||
@View({template: '<tree></tree>', directives: [TreeComp]})
|
||||
class TreeComp {
|
||||
}
|
||||
|
||||
@Component({selector: 'comp-url', dynamicLoadable: true, moduleId: THIS_MODULE})
|
||||
@Component({selector: 'comp-url', moduleId: THIS_MODULE})
|
||||
@View({templateUrl: 'compUrl.html'})
|
||||
class CompWithTemplateUrl {
|
||||
}
|
||||
|
||||
@Component({selector: 'comp-tpl', moduleId: THIS_MODULE})
|
||||
@View({template: '<template><a [href]="someProp"></a></template>'})
|
||||
class CompWithEmbeddedTemplate {
|
||||
}
|
||||
|
||||
|
||||
@Directive({selector: 'plain', moduleId: THIS_MODULE})
|
||||
class PlainDirective {
|
||||
}
|
||||
@ -260,9 +305,8 @@ class PlainDirective {
|
||||
class CompWithoutHost {
|
||||
}
|
||||
|
||||
function testableTemplateModule(sourceModule: SourceModule, comp: INormalizedDirectiveMetadata):
|
||||
function testableTemplateModule(sourceModule: SourceModule, normComp: CompileDirectiveMetadata):
|
||||
SourceModule {
|
||||
var normComp = <NormalizedDirectiveMetadata>comp;
|
||||
var resultExpression = `${THIS_MODULE_REF}humanizeTemplate(Host${normComp.type.name}Template)`;
|
||||
var testableSource = `${sourceModule.sourceWithModuleRefs}
|
||||
${codeGenExportVariable('run')}${codeGenValueFn(['_'], resultExpression)};`;
|
||||
@ -290,7 +334,7 @@ export function humanizeTemplate(template: CompiledTemplate,
|
||||
result = {
|
||||
'styles': template.styles,
|
||||
'commands': commands,
|
||||
'cd': testChangeDetector(template.changeDetectorFactories[0])
|
||||
'cd': testChangeDetector(template.changeDetectorFactory)
|
||||
};
|
||||
humanizedTemplates.set(template.id, result);
|
||||
visitAllCommands(new CommandHumanizer(commands, humanizedTemplates), template.commands);
|
||||
@ -316,7 +360,10 @@ function testChangeDetector(changeDetectorFactory: Function): string[] {
|
||||
class CommandHumanizer implements CommandVisitor {
|
||||
constructor(private result: any[],
|
||||
private humanizedTemplates: Map<number, StringMap<string, any>>) {}
|
||||
visitText(cmd: TextCmd, context: any): any { return null; }
|
||||
visitText(cmd: TextCmd, context: any): any {
|
||||
this.result.push(`#text(${cmd.value})`);
|
||||
return null;
|
||||
}
|
||||
visitNgContent(cmd: NgContentCmd, context: any): any { return null; }
|
||||
visitBeginElement(cmd: BeginElementCmd, context: any): any {
|
||||
this.result.push(`<${cmd.name}>`);
|
||||
@ -332,5 +379,10 @@ class CommandHumanizer implements CommandVisitor {
|
||||
return null;
|
||||
}
|
||||
visitEndComponent(context: any): any { return this.visitEndElement(context); }
|
||||
visitEmbeddedTemplate(cmd: EmbeddedTemplateCmd, context: any): any { return null; }
|
||||
visitEmbeddedTemplate(cmd: EmbeddedTemplateCmd, context: any): any {
|
||||
this.result.push(`<template>`);
|
||||
this.result.push({'cd': testChangeDetector(cmd.changeDetectorFactory)});
|
||||
this.result.push(`</template>`);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
@ -14,9 +14,8 @@ import {
|
||||
} from 'angular2/test_lib';
|
||||
|
||||
import {
|
||||
TypeMetadata,
|
||||
NormalizedTemplateMetadata,
|
||||
TemplateMetadata
|
||||
CompileTypeMetadata,
|
||||
CompileTemplateMetadata
|
||||
} from 'angular2/src/compiler/directive_metadata';
|
||||
import {ViewEncapsulation} from 'angular2/src/core/render/api';
|
||||
|
||||
@ -27,27 +26,29 @@ import {TEST_BINDINGS} from './test_bindings';
|
||||
|
||||
export function main() {
|
||||
describe('TemplateNormalizer', () => {
|
||||
var dirType: TypeMetadata;
|
||||
var dirType: CompileTypeMetadata;
|
||||
|
||||
beforeEachBindings(() => TEST_BINDINGS);
|
||||
|
||||
beforeEach(
|
||||
() => { dirType = new TypeMetadata({moduleId: 'some/module/id', name: 'SomeComp'}); });
|
||||
beforeEach(() => {
|
||||
dirType = new CompileTypeMetadata({moduleId: 'some/module/id', name: 'SomeComp'});
|
||||
});
|
||||
|
||||
describe('loadTemplate', () => {
|
||||
describe('inline template', () => {
|
||||
it('should store the template',
|
||||
inject([AsyncTestCompleter, TemplateNormalizer],
|
||||
(async, normalizer: TemplateNormalizer) => {
|
||||
normalizer.normalizeTemplate(dirType, new TemplateMetadata({
|
||||
normalizer.normalizeTemplate(dirType, new CompileTemplateMetadata({
|
||||
encapsulation: null,
|
||||
template: 'a',
|
||||
templateUrl: null,
|
||||
styles: [],
|
||||
styleUrls: ['test.css']
|
||||
}))
|
||||
.then((template: NormalizedTemplateMetadata) => {
|
||||
.then((template: CompileTemplateMetadata) => {
|
||||
expect(template.template).toEqual('a');
|
||||
expect(template.templateUrl).toEqual('some/module/id');
|
||||
async.done();
|
||||
});
|
||||
}));
|
||||
@ -55,15 +56,15 @@ export function main() {
|
||||
it('should resolve styles on the annotation against the moduleId',
|
||||
inject([AsyncTestCompleter, TemplateNormalizer],
|
||||
(async, normalizer: TemplateNormalizer) => {
|
||||
normalizer.normalizeTemplate(dirType, new TemplateMetadata({
|
||||
normalizer.normalizeTemplate(dirType, new CompileTemplateMetadata({
|
||||
encapsulation: null,
|
||||
template: '',
|
||||
templateUrl: null,
|
||||
styles: [],
|
||||
styleUrls: ['test.css']
|
||||
}))
|
||||
.then((template: NormalizedTemplateMetadata) => {
|
||||
expect(template.styleAbsUrls).toEqual(['some/module/test.css']);
|
||||
.then((template: CompileTemplateMetadata) => {
|
||||
expect(template.styleUrls).toEqual(['some/module/test.css']);
|
||||
async.done();
|
||||
});
|
||||
}));
|
||||
@ -71,15 +72,15 @@ export function main() {
|
||||
it('should resolve styles in the template against the moduleId',
|
||||
inject([AsyncTestCompleter, TemplateNormalizer],
|
||||
(async, normalizer: TemplateNormalizer) => {
|
||||
normalizer.normalizeTemplate(dirType, new TemplateMetadata({
|
||||
normalizer.normalizeTemplate(dirType, new CompileTemplateMetadata({
|
||||
encapsulation: null,
|
||||
template: '<style>@import test.css</style>',
|
||||
templateUrl: null,
|
||||
styles: [],
|
||||
styleUrls: []
|
||||
}))
|
||||
.then((template: NormalizedTemplateMetadata) => {
|
||||
expect(template.styleAbsUrls).toEqual(['some/module/test.css']);
|
||||
.then((template: CompileTemplateMetadata) => {
|
||||
expect(template.styleUrls).toEqual(['some/module/test.css']);
|
||||
async.done();
|
||||
});
|
||||
}));
|
||||
@ -91,15 +92,16 @@ export function main() {
|
||||
inject([AsyncTestCompleter, TemplateNormalizer, XHR],
|
||||
(async, normalizer: TemplateNormalizer, xhr: MockXHR) => {
|
||||
xhr.expect('some/module/sometplurl', 'a');
|
||||
normalizer.normalizeTemplate(dirType, new TemplateMetadata({
|
||||
normalizer.normalizeTemplate(dirType, new CompileTemplateMetadata({
|
||||
encapsulation: null,
|
||||
template: null,
|
||||
templateUrl: 'sometplurl',
|
||||
styles: [],
|
||||
styleUrls: ['test.css']
|
||||
}))
|
||||
.then((template: NormalizedTemplateMetadata) => {
|
||||
.then((template: CompileTemplateMetadata) => {
|
||||
expect(template.template).toEqual('a');
|
||||
expect(template.templateUrl).toEqual('some/module/sometplurl');
|
||||
async.done();
|
||||
});
|
||||
xhr.flush();
|
||||
@ -109,15 +111,15 @@ export function main() {
|
||||
inject([AsyncTestCompleter, TemplateNormalizer, XHR],
|
||||
(async, normalizer: TemplateNormalizer, xhr: MockXHR) => {
|
||||
xhr.expect('some/module/tpl/sometplurl', '');
|
||||
normalizer.normalizeTemplate(dirType, new TemplateMetadata({
|
||||
normalizer.normalizeTemplate(dirType, new CompileTemplateMetadata({
|
||||
encapsulation: null,
|
||||
template: null,
|
||||
templateUrl: 'tpl/sometplurl',
|
||||
styles: [],
|
||||
styleUrls: ['test.css']
|
||||
}))
|
||||
.then((template: NormalizedTemplateMetadata) => {
|
||||
expect(template.styleAbsUrls).toEqual(['some/module/test.css']);
|
||||
.then((template: CompileTemplateMetadata) => {
|
||||
expect(template.styleUrls).toEqual(['some/module/test.css']);
|
||||
async.done();
|
||||
});
|
||||
xhr.flush();
|
||||
@ -127,15 +129,15 @@ export function main() {
|
||||
inject([AsyncTestCompleter, TemplateNormalizer, XHR],
|
||||
(async, normalizer: TemplateNormalizer, xhr: MockXHR) => {
|
||||
xhr.expect('some/module/tpl/sometplurl', '<style>@import test.css</style>');
|
||||
normalizer.normalizeTemplate(dirType, new TemplateMetadata({
|
||||
normalizer.normalizeTemplate(dirType, new CompileTemplateMetadata({
|
||||
encapsulation: null,
|
||||
template: null,
|
||||
templateUrl: 'tpl/sometplurl',
|
||||
styles: [],
|
||||
styleUrls: []
|
||||
}))
|
||||
.then((template: NormalizedTemplateMetadata) => {
|
||||
expect(template.styleAbsUrls).toEqual(['some/module/tpl/test.css']);
|
||||
.then((template: CompileTemplateMetadata) => {
|
||||
expect(template.styleUrls).toEqual(['some/module/tpl/test.css']);
|
||||
async.done();
|
||||
});
|
||||
xhr.flush();
|
||||
@ -151,8 +153,8 @@ export function main() {
|
||||
|
||||
var viewEncapsulation = ViewEncapsulation.Native;
|
||||
var template = normalizer.normalizeLoadedTemplate(
|
||||
dirType,
|
||||
new TemplateMetadata({encapsulation: viewEncapsulation, styles: [], styleUrls: []}),
|
||||
dirType, new CompileTemplateMetadata(
|
||||
{encapsulation: viewEncapsulation, styles: [], styleUrls: []}),
|
||||
'', 'some/module/');
|
||||
expect(template.encapsulation).toBe(viewEncapsulation);
|
||||
}));
|
||||
@ -160,88 +162,90 @@ export function main() {
|
||||
it('should keep the template as html',
|
||||
inject([TemplateNormalizer], (normalizer: TemplateNormalizer) => {
|
||||
var template = normalizer.normalizeLoadedTemplate(
|
||||
dirType, new TemplateMetadata({encapsulation: null, styles: [], styleUrls: []}), 'a',
|
||||
dirType,
|
||||
new CompileTemplateMetadata({encapsulation: null, styles: [], styleUrls: []}), 'a',
|
||||
'some/module/');
|
||||
expect(template.template).toEqual('a')
|
||||
}));
|
||||
|
||||
it('should collect and keep ngContent',
|
||||
it('should collect ngContent',
|
||||
inject([TemplateNormalizer], (normalizer: TemplateNormalizer) => {
|
||||
var template = normalizer.normalizeLoadedTemplate(
|
||||
dirType, new TemplateMetadata({encapsulation: null, styles: [], styleUrls: []}),
|
||||
dirType,
|
||||
new CompileTemplateMetadata({encapsulation: null, styles: [], styleUrls: []}),
|
||||
'<ng-content select="a"></ng-content>', 'some/module/');
|
||||
expect(template.ngContentSelectors).toEqual(['a']);
|
||||
expect(template.template).toEqual('<ng-content select="a"></ng-content>');
|
||||
}));
|
||||
|
||||
it('should normalize ngContent wildcard selector',
|
||||
inject([TemplateNormalizer], (normalizer: TemplateNormalizer) => {
|
||||
var template = normalizer.normalizeLoadedTemplate(
|
||||
dirType, new TemplateMetadata({encapsulation: null, styles: [], styleUrls: []}),
|
||||
dirType,
|
||||
new CompileTemplateMetadata({encapsulation: null, styles: [], styleUrls: []}),
|
||||
'<ng-content></ng-content><ng-content select></ng-content><ng-content select="*"></ng-content>',
|
||||
'some/module/');
|
||||
expect(template.ngContentSelectors).toEqual(['*', '*', '*']);
|
||||
}));
|
||||
|
||||
it('should collect and remove top level styles in the template',
|
||||
it('should collect top level styles in the template',
|
||||
inject([TemplateNormalizer], (normalizer: TemplateNormalizer) => {
|
||||
var template = normalizer.normalizeLoadedTemplate(
|
||||
dirType, new TemplateMetadata({encapsulation: null, styles: [], styleUrls: []}),
|
||||
dirType,
|
||||
new CompileTemplateMetadata({encapsulation: null, styles: [], styleUrls: []}),
|
||||
'<style>a</style>', 'some/module/');
|
||||
expect(template.styles).toEqual(['a']);
|
||||
expect(template.template).toEqual('');
|
||||
}));
|
||||
|
||||
it('should collect and remove styles inside in elements',
|
||||
it('should collect styles inside in elements',
|
||||
inject([TemplateNormalizer], (normalizer: TemplateNormalizer) => {
|
||||
var template = normalizer.normalizeLoadedTemplate(
|
||||
dirType, new TemplateMetadata({encapsulation: null, styles: [], styleUrls: []}),
|
||||
dirType,
|
||||
new CompileTemplateMetadata({encapsulation: null, styles: [], styleUrls: []}),
|
||||
'<div><style>a</style></div>', 'some/module/');
|
||||
expect(template.styles).toEqual(['a']);
|
||||
expect(template.template).toEqual('<div></div>');
|
||||
}));
|
||||
|
||||
it('should collect and remove styleUrls in the template',
|
||||
it('should collect styleUrls in the template',
|
||||
inject([TemplateNormalizer], (normalizer: TemplateNormalizer) => {
|
||||
var template = normalizer.normalizeLoadedTemplate(
|
||||
dirType, new TemplateMetadata({encapsulation: null, styles: [], styleUrls: []}),
|
||||
dirType,
|
||||
new CompileTemplateMetadata({encapsulation: null, styles: [], styleUrls: []}),
|
||||
'<link rel="stylesheet" href="aUrl">', 'some/module/');
|
||||
expect(template.styleAbsUrls).toEqual(['some/module/aUrl']);
|
||||
expect(template.template).toEqual('');
|
||||
expect(template.styleUrls).toEqual(['some/module/aUrl']);
|
||||
}));
|
||||
|
||||
it('should collect and remove styleUrls in elements',
|
||||
it('should collect styleUrls in elements',
|
||||
inject([TemplateNormalizer], (normalizer: TemplateNormalizer) => {
|
||||
var template = normalizer.normalizeLoadedTemplate(
|
||||
dirType, new TemplateMetadata({encapsulation: null, styles: [], styleUrls: []}),
|
||||
dirType,
|
||||
new CompileTemplateMetadata({encapsulation: null, styles: [], styleUrls: []}),
|
||||
'<div><link rel="stylesheet" href="aUrl"></div>', 'some/module/');
|
||||
expect(template.styleAbsUrls).toEqual(['some/module/aUrl']);
|
||||
expect(template.template).toEqual('<div></div>');
|
||||
expect(template.styleUrls).toEqual(['some/module/aUrl']);
|
||||
}));
|
||||
|
||||
it('should keep link elements with non stylesheet rel attribute',
|
||||
it('should ignore link elements with non stylesheet rel attribute',
|
||||
inject([TemplateNormalizer], (normalizer: TemplateNormalizer) => {
|
||||
var template = normalizer.normalizeLoadedTemplate(
|
||||
dirType, new TemplateMetadata({encapsulation: null, styles: [], styleUrls: []}),
|
||||
dirType,
|
||||
new CompileTemplateMetadata({encapsulation: null, styles: [], styleUrls: []}),
|
||||
'<link href="b" rel="a"></link>', 'some/module/');
|
||||
expect(template.styleAbsUrls).toEqual([]);
|
||||
expect(template.template).toEqual('<link href="b" rel="a"></link>');
|
||||
expect(template.styleUrls).toEqual([]);
|
||||
}));
|
||||
|
||||
it('should extract @import style urls into styleAbsUrl',
|
||||
inject([TemplateNormalizer], (normalizer: TemplateNormalizer) => {
|
||||
var template = normalizer.normalizeLoadedTemplate(
|
||||
dirType, new TemplateMetadata(
|
||||
dirType, new CompileTemplateMetadata(
|
||||
{encapsulation: null, styles: ['@import "test.css";'], styleUrls: []}),
|
||||
'', 'some/module/id');
|
||||
expect(template.styles).toEqual(['']);
|
||||
expect(template.styleAbsUrls).toEqual(['some/module/test.css']);
|
||||
expect(template.styleUrls).toEqual(['some/module/test.css']);
|
||||
}));
|
||||
|
||||
it('should resolve relative urls in inline styles',
|
||||
inject([TemplateNormalizer], (normalizer: TemplateNormalizer) => {
|
||||
var template = normalizer.normalizeLoadedTemplate(
|
||||
dirType, new TemplateMetadata({
|
||||
dirType, new CompileTemplateMetadata({
|
||||
encapsulation: null,
|
||||
styles: ['.foo{background-image: url(\'double.jpg\');'],
|
||||
styleUrls: []
|
||||
@ -254,15 +258,32 @@ export function main() {
|
||||
it('should resolve relative style urls in styleUrls',
|
||||
inject([TemplateNormalizer], (normalizer: TemplateNormalizer) => {
|
||||
var template = normalizer.normalizeLoadedTemplate(
|
||||
dirType,
|
||||
new TemplateMetadata({encapsulation: null, styles: [], styleUrls: ['test.css']}), '',
|
||||
'some/module/id');
|
||||
dirType, new CompileTemplateMetadata(
|
||||
{encapsulation: null, styles: [], styleUrls: ['test.css']}),
|
||||
'', 'some/module/id');
|
||||
expect(template.styles).toEqual([]);
|
||||
expect(template.styleAbsUrls).toEqual(['some/module/test.css']);
|
||||
expect(template.styleUrls).toEqual(['some/module/test.css']);
|
||||
}));
|
||||
|
||||
it('should normalize ViewEncapsulation.Emulated to ViewEncapsulation.None if there are no stlyes nor stylesheets',
|
||||
inject([TemplateNormalizer], (normalizer: TemplateNormalizer) => {
|
||||
var template = normalizer.normalizeLoadedTemplate(
|
||||
dirType, new CompileTemplateMetadata(
|
||||
{encapsulation: ViewEncapsulation.Emulated, styles: [], styleUrls: []}),
|
||||
'', 'some/module/id');
|
||||
expect(template.encapsulation).toEqual(ViewEncapsulation.None);
|
||||
}));
|
||||
|
||||
it('should ignore elements with ng-non-bindable attribute and their children',
|
||||
inject([TemplateNormalizer], (normalizer: TemplateNormalizer) => {
|
||||
var template = normalizer.normalizeLoadedTemplate(
|
||||
dirType,
|
||||
new CompileTemplateMetadata({encapsulation: null, styles: [], styleUrls: []}),
|
||||
'<div ng-non-bindable><ng-content select="a"></ng-content></div><ng-content ng-non-bindable select="b"></ng-content>',
|
||||
'some/module/');
|
||||
expect(template.ngContentSelectors).toEqual([]);
|
||||
}));
|
||||
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
@ -16,10 +16,9 @@ import {TEST_BINDINGS} from './test_bindings';
|
||||
import {isPresent} from 'angular2/src/core/facade/lang';
|
||||
import {TemplateParser, splitClasses} from 'angular2/src/compiler/template_parser';
|
||||
import {
|
||||
NormalizedDirectiveMetadata,
|
||||
TypeMetadata,
|
||||
ChangeDetectionMetadata,
|
||||
NormalizedTemplateMetadata
|
||||
CompileDirectiveMetadata,
|
||||
CompileTypeMetadata,
|
||||
CompileTemplateMetadata
|
||||
} from 'angular2/src/compiler/directive_metadata';
|
||||
import {
|
||||
templateVisitAll,
|
||||
@ -59,14 +58,14 @@ export function main() {
|
||||
|
||||
beforeEach(inject([TemplateParser], (_parser) => {
|
||||
parser = _parser;
|
||||
ngIf = new NormalizedDirectiveMetadata({
|
||||
ngIf = CompileDirectiveMetadata.create({
|
||||
selector: '[ng-if]',
|
||||
type: new TypeMetadata({name: 'NgIf'}),
|
||||
changeDetection: new ChangeDetectionMetadata({properties: ['ngIf']})
|
||||
type: new CompileTypeMetadata({name: 'NgIf'}),
|
||||
properties: ['ngIf']
|
||||
});
|
||||
}));
|
||||
|
||||
function parse(template: string, directives: NormalizedDirectiveMetadata[]): TemplateAst[] {
|
||||
function parse(template: string, directives: CompileDirectiveMetadata[]): TemplateAst[] {
|
||||
return parser.parse(template, directives, 'TestComp');
|
||||
}
|
||||
|
||||
@ -319,68 +318,39 @@ export function main() {
|
||||
|
||||
});
|
||||
|
||||
describe('variables', () => {
|
||||
|
||||
it('should parse variables via #... and not report them as attributes', () => {
|
||||
expect(humanizeTemplateAsts(parse('<div #a="b">', [])))
|
||||
.toEqual([
|
||||
[ElementAst, 'div', 'TestComp > div:nth-child(0)'],
|
||||
[VariableAst, 'a', 'b', 'TestComp > div:nth-child(0)[#a=b]']
|
||||
]);
|
||||
});
|
||||
|
||||
it('should parse variables via var-... and not report them as attributes', () => {
|
||||
expect(humanizeTemplateAsts(parse('<div var-a="b">', [])))
|
||||
.toEqual([
|
||||
[ElementAst, 'div', 'TestComp > div:nth-child(0)'],
|
||||
[VariableAst, 'a', 'b', 'TestComp > div:nth-child(0)[var-a=b]']
|
||||
]);
|
||||
});
|
||||
|
||||
it('should camel case variables', () => {
|
||||
expect(humanizeTemplateAsts(parse('<div var-some-a="b">', [])))
|
||||
.toEqual([
|
||||
[ElementAst, 'div', 'TestComp > div:nth-child(0)'],
|
||||
[VariableAst, 'someA', 'b', 'TestComp > div:nth-child(0)[var-some-a=b]']
|
||||
]);
|
||||
});
|
||||
|
||||
it('should use $implicit as variable name if none was specified', () => {
|
||||
expect(humanizeTemplateAsts(parse('<div var-a>', [])))
|
||||
.toEqual([
|
||||
[ElementAst, 'div', 'TestComp > div:nth-child(0)'],
|
||||
[VariableAst, 'a', '$implicit', 'TestComp > div:nth-child(0)[var-a=]']
|
||||
]);
|
||||
});
|
||||
});
|
||||
|
||||
describe('directives', () => {
|
||||
it('should locate directives ordered by name and components first', () => {
|
||||
var dirA = new NormalizedDirectiveMetadata(
|
||||
{selector: '[a=b]', type: new TypeMetadata({name: 'DirA'})});
|
||||
var dirB = new NormalizedDirectiveMetadata(
|
||||
{selector: '[a]', type: new TypeMetadata({name: 'DirB'})});
|
||||
var comp = new NormalizedDirectiveMetadata({
|
||||
selector: 'div',
|
||||
isComponent: true,
|
||||
type: new TypeMetadata({name: 'ZComp'}),
|
||||
template: new NormalizedTemplateMetadata({ngContentSelectors: []})
|
||||
});
|
||||
expect(humanizeTemplateAsts(parse('<div a="b">', [dirB, dirA, comp])))
|
||||
.toEqual([
|
||||
[ElementAst, 'div', 'TestComp > div:nth-child(0)'],
|
||||
[AttrAst, 'a', 'b', 'TestComp > div:nth-child(0)[a=b]'],
|
||||
[DirectiveAst, comp, 'TestComp > div:nth-child(0)'],
|
||||
[DirectiveAst, dirA, 'TestComp > div:nth-child(0)'],
|
||||
[DirectiveAst, dirB, 'TestComp > div:nth-child(0)']
|
||||
]);
|
||||
});
|
||||
it('should locate directives components first and ordered by the directives array in the View',
|
||||
() => {
|
||||
var dirA = CompileDirectiveMetadata.create(
|
||||
{selector: '[a]', type: new CompileTypeMetadata({name: 'DirA', id: 3})});
|
||||
var dirB = CompileDirectiveMetadata.create(
|
||||
{selector: '[b]', type: new CompileTypeMetadata({name: 'DirB', id: 2})});
|
||||
var dirC = CompileDirectiveMetadata.create(
|
||||
{selector: '[c]', type: new CompileTypeMetadata({name: 'DirC', id: 1})});
|
||||
var comp = CompileDirectiveMetadata.create({
|
||||
selector: 'div',
|
||||
isComponent: true,
|
||||
type: new CompileTypeMetadata({name: 'ZComp'}),
|
||||
template: new CompileTemplateMetadata({ngContentSelectors: []})
|
||||
});
|
||||
expect(humanizeTemplateAsts(parse('<div a c b>', [dirA, dirB, dirC, comp])))
|
||||
.toEqual([
|
||||
[ElementAst, 'div', 'TestComp > div:nth-child(0)'],
|
||||
[AttrAst, 'a', '', 'TestComp > div:nth-child(0)[a=]'],
|
||||
[AttrAst, 'b', '', 'TestComp > div:nth-child(0)[b=]'],
|
||||
[AttrAst, 'c', '', 'TestComp > div:nth-child(0)[c=]'],
|
||||
[DirectiveAst, comp, 'TestComp > div:nth-child(0)'],
|
||||
[DirectiveAst, dirA, 'TestComp > div:nth-child(0)'],
|
||||
[DirectiveAst, dirB, 'TestComp > div:nth-child(0)'],
|
||||
[DirectiveAst, dirC, 'TestComp > div:nth-child(0)']
|
||||
]);
|
||||
});
|
||||
|
||||
it('should locate directives in property bindings', () => {
|
||||
var dirA = new NormalizedDirectiveMetadata(
|
||||
{selector: '[a=b]', type: new TypeMetadata({name: 'DirA'})});
|
||||
var dirB = new NormalizedDirectiveMetadata(
|
||||
{selector: '[b]', type: new TypeMetadata({name: 'DirB'})});
|
||||
var dirA = CompileDirectiveMetadata.create(
|
||||
{selector: '[a=b]', type: new CompileTypeMetadata({name: 'DirA'})});
|
||||
var dirB = CompileDirectiveMetadata.create(
|
||||
{selector: '[b]', type: new CompileTypeMetadata({name: 'DirB'})});
|
||||
expect(humanizeTemplateAsts(parse('<div [a]="b">', [dirA, dirB])))
|
||||
.toEqual([
|
||||
[ElementAst, 'div', 'TestComp > div:nth-child(0)'],
|
||||
@ -397,23 +367,23 @@ export function main() {
|
||||
});
|
||||
|
||||
it('should locate directives in variable bindings', () => {
|
||||
var dirA = new NormalizedDirectiveMetadata(
|
||||
{selector: '[a=b]', type: new TypeMetadata({name: 'DirA'})});
|
||||
var dirB = new NormalizedDirectiveMetadata(
|
||||
{selector: '[b]', type: new TypeMetadata({name: 'DirB'})});
|
||||
var dirA = CompileDirectiveMetadata.create(
|
||||
{selector: '[a=b]', exportAs: 'b', type: new CompileTypeMetadata({name: 'DirA'})});
|
||||
var dirB = CompileDirectiveMetadata.create(
|
||||
{selector: '[b]', type: new CompileTypeMetadata({name: 'DirB'})});
|
||||
expect(humanizeTemplateAsts(parse('<div #a="b">', [dirA, dirB])))
|
||||
.toEqual([
|
||||
[ElementAst, 'div', 'TestComp > div:nth-child(0)'],
|
||||
[VariableAst, 'a', 'b', 'TestComp > div:nth-child(0)[#a=b]'],
|
||||
[DirectiveAst, dirA, 'TestComp > div:nth-child(0)']
|
||||
[DirectiveAst, dirA, 'TestComp > div:nth-child(0)'],
|
||||
[VariableAst, 'a', 'b', 'TestComp > div:nth-child(0)[#a=b]']
|
||||
]);
|
||||
});
|
||||
|
||||
it('should parse directive host properties', () => {
|
||||
var dirA = new NormalizedDirectiveMetadata({
|
||||
var dirA = CompileDirectiveMetadata.create({
|
||||
selector: 'div',
|
||||
type: new TypeMetadata({name: 'DirA'}),
|
||||
changeDetection: new ChangeDetectionMetadata({hostProperties: {'a': 'expr'}})
|
||||
type: new CompileTypeMetadata({name: 'DirA'}),
|
||||
host: {'[a]': 'expr'}
|
||||
});
|
||||
expect(humanizeTemplateAsts(parse('<div></div>', [dirA])))
|
||||
.toEqual([
|
||||
@ -431,10 +401,10 @@ export function main() {
|
||||
});
|
||||
|
||||
it('should parse directive host listeners', () => {
|
||||
var dirA = new NormalizedDirectiveMetadata({
|
||||
var dirA = CompileDirectiveMetadata.create({
|
||||
selector: 'div',
|
||||
type: new TypeMetadata({name: 'DirA'}),
|
||||
changeDetection: new ChangeDetectionMetadata({hostListeners: {'a': 'expr'}})
|
||||
type: new CompileTypeMetadata({name: 'DirA'}),
|
||||
host: {'(a)': 'expr'}
|
||||
});
|
||||
expect(humanizeTemplateAsts(parse('<div></div>', [dirA])))
|
||||
.toEqual([
|
||||
@ -445,10 +415,10 @@ export function main() {
|
||||
});
|
||||
|
||||
it('should parse directive properties', () => {
|
||||
var dirA = new NormalizedDirectiveMetadata({
|
||||
var dirA = CompileDirectiveMetadata.create({
|
||||
selector: 'div',
|
||||
type: new TypeMetadata({name: 'DirA'}),
|
||||
changeDetection: new ChangeDetectionMetadata({properties: ['aProp']})
|
||||
type: new CompileTypeMetadata({name: 'DirA'}),
|
||||
properties: ['aProp']
|
||||
});
|
||||
expect(humanizeTemplateAsts(parse('<div [a-prop]="expr"></div>', [dirA])))
|
||||
.toEqual([
|
||||
@ -464,10 +434,10 @@ export function main() {
|
||||
});
|
||||
|
||||
it('should parse renamed directive properties', () => {
|
||||
var dirA = new NormalizedDirectiveMetadata({
|
||||
var dirA = CompileDirectiveMetadata.create({
|
||||
selector: 'div',
|
||||
type: new TypeMetadata({name: 'DirA'}),
|
||||
changeDetection: new ChangeDetectionMetadata({properties: ['b:a']})
|
||||
type: new CompileTypeMetadata({name: 'DirA'}),
|
||||
properties: ['b:a']
|
||||
});
|
||||
expect(humanizeTemplateAsts(parse('<div [a]="expr"></div>', [dirA])))
|
||||
.toEqual([
|
||||
@ -478,11 +448,8 @@ export function main() {
|
||||
});
|
||||
|
||||
it('should parse literal directive properties', () => {
|
||||
var dirA = new NormalizedDirectiveMetadata({
|
||||
selector: 'div',
|
||||
type: new TypeMetadata({name: 'DirA'}),
|
||||
changeDetection: new ChangeDetectionMetadata({properties: ['a']})
|
||||
});
|
||||
var dirA = CompileDirectiveMetadata.create(
|
||||
{selector: 'div', type: new CompileTypeMetadata({name: 'DirA'}), properties: ['a']});
|
||||
expect(humanizeTemplateAsts(parse('<div a="literal"></div>', [dirA])))
|
||||
.toEqual([
|
||||
[ElementAst, 'div', 'TestComp > div:nth-child(0)'],
|
||||
@ -498,11 +465,8 @@ export function main() {
|
||||
});
|
||||
|
||||
it('should support optional directive properties', () => {
|
||||
var dirA = new NormalizedDirectiveMetadata({
|
||||
selector: 'div',
|
||||
type: new TypeMetadata({name: 'DirA'}),
|
||||
changeDetection: new ChangeDetectionMetadata({properties: ['a']})
|
||||
});
|
||||
var dirA = CompileDirectiveMetadata.create(
|
||||
{selector: 'div', type: new CompileTypeMetadata({name: 'DirA'}), properties: ['a']});
|
||||
expect(humanizeTemplateAsts(parse('<div></div>', [dirA])))
|
||||
.toEqual([
|
||||
[ElementAst, 'div', 'TestComp > div:nth-child(0)'],
|
||||
@ -512,6 +476,83 @@ export function main() {
|
||||
|
||||
});
|
||||
|
||||
describe('variables', () => {
|
||||
|
||||
it('should parse variables via #... and not report them as attributes', () => {
|
||||
expect(humanizeTemplateAsts(parse('<div #a>', [])))
|
||||
.toEqual([
|
||||
[ElementAst, 'div', 'TestComp > div:nth-child(0)'],
|
||||
[VariableAst, 'a', '', 'TestComp > div:nth-child(0)[#a=]']
|
||||
]);
|
||||
});
|
||||
|
||||
it('should parse variables via var-... and not report them as attributes', () => {
|
||||
expect(humanizeTemplateAsts(parse('<div var-a>', [])))
|
||||
.toEqual([
|
||||
[ElementAst, 'div', 'TestComp > div:nth-child(0)'],
|
||||
[VariableAst, 'a', '', 'TestComp > div:nth-child(0)[var-a=]']
|
||||
]);
|
||||
});
|
||||
|
||||
it('should camel case variables', () => {
|
||||
expect(humanizeTemplateAsts(parse('<div var-some-a>', [])))
|
||||
.toEqual([
|
||||
[ElementAst, 'div', 'TestComp > div:nth-child(0)'],
|
||||
[VariableAst, 'someA', '', 'TestComp > div:nth-child(0)[var-some-a=]']
|
||||
]);
|
||||
});
|
||||
|
||||
it('should assign variables with empty value to element', () => {
|
||||
expect(humanizeTemplateAsts(parse('<div #a></div>', [])))
|
||||
.toEqual([
|
||||
[ElementAst, 'div', 'TestComp > div:nth-child(0)'],
|
||||
[VariableAst, 'a', '', 'TestComp > div:nth-child(0)[#a=]']
|
||||
]);
|
||||
});
|
||||
|
||||
it('should assign variables to directives via exportAs', () => {
|
||||
var dirA = CompileDirectiveMetadata.create(
|
||||
{selector: '[a]', type: new CompileTypeMetadata({name: 'DirA'}), exportAs: 'dirA'});
|
||||
expect(humanizeTemplateAsts(parse('<div #a="dirA"></div>', [dirA])))
|
||||
.toEqual([
|
||||
[ElementAst, 'div', 'TestComp > div:nth-child(0)'],
|
||||
[DirectiveAst, dirA, 'TestComp > div:nth-child(0)'],
|
||||
[VariableAst, 'a', 'dirA', 'TestComp > div:nth-child(0)[#a=dirA]']
|
||||
]);
|
||||
});
|
||||
|
||||
it('should report variables with values that dont match a directive as errors', () => {
|
||||
expect(() => parse('<div #a="dirA"></div>', [])).toThrowError(`Template parse errors:
|
||||
There is no directive with "exportAs" set to "dirA" at TestComp > div:nth-child(0)[#a=dirA]`);
|
||||
});
|
||||
|
||||
it('should allow variables with values that dont match a directive on embedded template elements',
|
||||
() => {
|
||||
expect(humanizeTemplateAsts(parse('<template #a="b"></template>', [])))
|
||||
.toEqual([
|
||||
[EmbeddedTemplateAst, 'TestComp > template:nth-child(0)'],
|
||||
[VariableAst, 'a', 'b', 'TestComp > template:nth-child(0)[#a=b]']
|
||||
]);
|
||||
});
|
||||
|
||||
it('should assign variables with empty value to components', () => {
|
||||
var dirA = CompileDirectiveMetadata.create({
|
||||
selector: '[a]',
|
||||
isComponent: true,
|
||||
type: new CompileTypeMetadata({name: 'DirA'}),
|
||||
exportAs: 'dirA', template: new CompileTemplateMetadata({ngContentSelectors: []})
|
||||
});
|
||||
expect(humanizeTemplateAsts(parse('<div #a></div>', [dirA])))
|
||||
.toEqual([
|
||||
[ElementAst, 'div', 'TestComp > div:nth-child(0)'],
|
||||
[VariableAst, 'a', '', 'TestComp > div:nth-child(0)[#a=]'],
|
||||
[DirectiveAst, dirA, 'TestComp > div:nth-child(0)'],
|
||||
[VariableAst, 'a', '', 'TestComp > div:nth-child(0)[#a=]']
|
||||
]);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
describe('explicit templates', () => {
|
||||
it('should create embedded templates for <template> elements', () => {
|
||||
expect(humanizeTemplateAsts(parse('<template></template>', [])))
|
||||
@ -563,13 +604,13 @@ export function main() {
|
||||
|
||||
describe('directives', () => {
|
||||
it('should locate directives in property bindings', () => {
|
||||
var dirA = new NormalizedDirectiveMetadata({
|
||||
var dirA = CompileDirectiveMetadata.create({
|
||||
selector: '[a=b]',
|
||||
type: new TypeMetadata({name: 'DirA'}),
|
||||
changeDetection: new ChangeDetectionMetadata({properties: ['a']})
|
||||
type: new CompileTypeMetadata({name: 'DirA'}),
|
||||
properties: ['a']
|
||||
});
|
||||
var dirB = new NormalizedDirectiveMetadata(
|
||||
{selector: '[b]', type: new TypeMetadata({name: 'DirB'})});
|
||||
var dirB = CompileDirectiveMetadata.create(
|
||||
{selector: '[b]', type: new CompileTypeMetadata({name: 'DirB'})});
|
||||
expect(humanizeTemplateAsts(parse('<div template="a b" b>', [dirA, dirB])))
|
||||
.toEqual([
|
||||
[EmbeddedTemplateAst, 'TestComp > div:nth-child(0)'],
|
||||
@ -587,10 +628,10 @@ export function main() {
|
||||
});
|
||||
|
||||
it('should locate directives in variable bindings', () => {
|
||||
var dirA = new NormalizedDirectiveMetadata(
|
||||
{selector: '[a=b]', type: new TypeMetadata({name: 'DirA'})});
|
||||
var dirB = new NormalizedDirectiveMetadata(
|
||||
{selector: '[b]', type: new TypeMetadata({name: 'DirB'})});
|
||||
var dirA = CompileDirectiveMetadata.create(
|
||||
{selector: '[a=b]', type: new CompileTypeMetadata({name: 'DirA'})});
|
||||
var dirB = CompileDirectiveMetadata.create(
|
||||
{selector: '[b]', type: new CompileTypeMetadata({name: 'DirB'})});
|
||||
expect(humanizeTemplateAsts(parse('<div template="#a=b" b>', [dirA, dirB])))
|
||||
.toEqual([
|
||||
[EmbeddedTemplateAst, 'TestComp > div:nth-child(0)'],
|
||||
@ -624,12 +665,12 @@ export function main() {
|
||||
|
||||
describe('content projection', () => {
|
||||
function createComp(selector: string, ngContentSelectors: string[]):
|
||||
NormalizedDirectiveMetadata {
|
||||
return new NormalizedDirectiveMetadata({
|
||||
CompileDirectiveMetadata {
|
||||
return CompileDirectiveMetadata.create({
|
||||
selector: selector,
|
||||
isComponent: true,
|
||||
type: new TypeMetadata({name: 'SomeComp'}),
|
||||
template: new NormalizedTemplateMetadata({ngContentSelectors: ngContentSelectors})
|
||||
type: new CompileTypeMetadata({name: 'SomeComp'}),
|
||||
template: new CompileTemplateMetadata({ngContentSelectors: ngContentSelectors})
|
||||
})
|
||||
}
|
||||
|
||||
@ -725,38 +766,38 @@ Parser Error: Unexpected token 'b' at column 3 in [a b] in TestComp > div:nth-ch
|
||||
|
||||
it('should not throw on invalid property names if the property is used by a directive',
|
||||
() => {
|
||||
var dirA = new NormalizedDirectiveMetadata({
|
||||
var dirA = CompileDirectiveMetadata.create({
|
||||
selector: 'div',
|
||||
type: new TypeMetadata({name: 'DirA'}),
|
||||
changeDetection: new ChangeDetectionMetadata({properties: ['invalidProp']})
|
||||
type: new CompileTypeMetadata({name: 'DirA'}),
|
||||
properties: ['invalidProp']
|
||||
});
|
||||
expect(() => parse('<div [invalid-prop]></div>', [dirA])).not.toThrow();
|
||||
});
|
||||
|
||||
it('should not allow more than 1 component per element', () => {
|
||||
var dirA = new NormalizedDirectiveMetadata({
|
||||
var dirA = CompileDirectiveMetadata.create({
|
||||
selector: 'div',
|
||||
isComponent: true,
|
||||
type: new TypeMetadata({name: 'DirA'}),
|
||||
template: new NormalizedTemplateMetadata({ngContentSelectors: []})
|
||||
type: new CompileTypeMetadata({name: 'DirA'}),
|
||||
template: new CompileTemplateMetadata({ngContentSelectors: []})
|
||||
});
|
||||
var dirB = new NormalizedDirectiveMetadata({
|
||||
var dirB = CompileDirectiveMetadata.create({
|
||||
selector: 'div',
|
||||
isComponent: true,
|
||||
type: new TypeMetadata({name: 'DirB'}),
|
||||
template: new NormalizedTemplateMetadata({ngContentSelectors: []})
|
||||
type: new CompileTypeMetadata({name: 'DirB'}),
|
||||
template: new CompileTemplateMetadata({ngContentSelectors: []})
|
||||
});
|
||||
expect(() => parse('<div>', [dirB, dirA])).toThrowError(`Template parse errors:
|
||||
More than one component: DirA,DirB in TestComp > div:nth-child(0)`);
|
||||
More than one component: DirB,DirA in TestComp > div:nth-child(0)`);
|
||||
});
|
||||
|
||||
it('should not allow components or element nor event bindings on explicit embedded templates',
|
||||
() => {
|
||||
var dirA = new NormalizedDirectiveMetadata({
|
||||
var dirA = CompileDirectiveMetadata.create({
|
||||
selector: '[a]',
|
||||
isComponent: true,
|
||||
type: new TypeMetadata({name: 'DirA'}),
|
||||
template: new NormalizedTemplateMetadata({ngContentSelectors: []})
|
||||
type: new CompileTypeMetadata({name: 'DirA'}),
|
||||
template: new CompileTemplateMetadata({ngContentSelectors: []})
|
||||
});
|
||||
expect(() => parse('<template [a]="b" (e)="f"></template>', [dirA]))
|
||||
.toThrowError(`Template parse errors:
|
||||
@ -766,17 +807,45 @@ Event binding e on an embedded template in TestComp > template:nth-child(0)[(e)=
|
||||
});
|
||||
|
||||
it('should not allow components or element bindings on inline embedded templates', () => {
|
||||
var dirA = new NormalizedDirectiveMetadata({
|
||||
var dirA = CompileDirectiveMetadata.create({
|
||||
selector: '[a]',
|
||||
isComponent: true,
|
||||
type: new TypeMetadata({name: 'DirA'}),
|
||||
template: new NormalizedTemplateMetadata({ngContentSelectors: []})
|
||||
type: new CompileTypeMetadata({name: 'DirA'}),
|
||||
template: new CompileTemplateMetadata({ngContentSelectors: []})
|
||||
});
|
||||
expect(() => parse('<div *a="b">', [dirA])).toThrowError(`Template parse errors:
|
||||
Components on an embedded template: DirA in TestComp > div:nth-child(0)
|
||||
Property binding a not used by any directive on an embedded template in TestComp > div:nth-child(0)[*a=b]`);
|
||||
});
|
||||
});
|
||||
|
||||
describe('ignore elements', () => {
|
||||
it('should ignore <script> elements but include them for source info', () => {
|
||||
expect(humanizeTemplateAsts(parse('<script></script>a', [])))
|
||||
.toEqual([[TextAst, 'a', 'TestComp > #text(a):nth-child(1)']]);
|
||||
|
||||
});
|
||||
|
||||
it('should ignore <style> elements but include them for source info', () => {
|
||||
expect(humanizeTemplateAsts(parse('<style></style>a', [])))
|
||||
.toEqual([[TextAst, 'a', 'TestComp > #text(a):nth-child(1)']]);
|
||||
|
||||
});
|
||||
|
||||
it('should ignore <link rel="stylesheet"> elements but include them for source info', () => {
|
||||
expect(humanizeTemplateAsts(parse('<link rel="stylesheet"></link>a', [])))
|
||||
.toEqual([[TextAst, 'a', 'TestComp > #text(a):nth-child(1)']]);
|
||||
|
||||
});
|
||||
|
||||
it('should ignore elements with ng-non-bindable, including their children, but include them for source info',
|
||||
() => {
|
||||
expect(humanizeTemplateAsts(parse('<div ng-non-bindable>b</div>a', [])))
|
||||
.toEqual([[TextAst, 'a', 'TestComp > #text(a):nth-child(1)']]);
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
@ -805,7 +874,7 @@ class TemplateHumanizer implements TemplateAstVisitor {
|
||||
templateVisitAll(this, ast.attrs);
|
||||
templateVisitAll(this, ast.properties);
|
||||
templateVisitAll(this, ast.events);
|
||||
templateVisitAll(this, ast.vars);
|
||||
templateVisitAll(this, ast.exportAsVars);
|
||||
templateVisitAll(this, ast.directives);
|
||||
templateVisitAll(this, ast.children);
|
||||
return null;
|
||||
@ -852,6 +921,7 @@ class TemplateHumanizer implements TemplateAstVisitor {
|
||||
templateVisitAll(this, ast.properties);
|
||||
templateVisitAll(this, ast.hostProperties);
|
||||
templateVisitAll(this, ast.hostEvents);
|
||||
templateVisitAll(this, ast.exportAsVars);
|
||||
return null;
|
||||
}
|
||||
visitDirectiveProperty(ast: BoundDirectivePropertyAst, context: any): any {
|
||||
|
||||
@ -397,23 +397,6 @@ export function main() {
|
||||
});
|
||||
}));
|
||||
|
||||
it('should use the last directive binding per directive',
|
||||
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
|
||||
tcb.overrideView(MyComp, new ViewMetadata({
|
||||
template: '<p no-duplicate></p>',
|
||||
directives: [
|
||||
bind(DuplicateDir)
|
||||
.toClass(DuplicateDir),
|
||||
bind(DuplicateDir).toClass(OtherDuplicateDir)
|
||||
]
|
||||
}))
|
||||
.createAsync(MyComp)
|
||||
.then((rootTC) => {
|
||||
expect(rootTC.debugElement.nativeElement).toHaveText('othernoduplicate');
|
||||
async.done();
|
||||
});
|
||||
}));
|
||||
|
||||
it('should support directives where a selector matches property binding',
|
||||
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
|
||||
tcb.overrideView(MyComp, new ViewMetadata(
|
||||
@ -436,27 +419,11 @@ export function main() {
|
||||
});
|
||||
}));
|
||||
|
||||
it('should allow specifying directives as bindings',
|
||||
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
|
||||
tcb.overrideView(MyComp, new ViewMetadata({
|
||||
template: '<child-cmp></child-cmp>',
|
||||
directives: [bind(ChildComp).toClass(ChildComp)]
|
||||
}))
|
||||
|
||||
.createAsync(MyComp)
|
||||
.then((rootTC) => {
|
||||
rootTC.detectChanges();
|
||||
|
||||
expect(rootTC.debugElement.nativeElement).toHaveText('hello');
|
||||
async.done();
|
||||
});
|
||||
}));
|
||||
|
||||
it('should read directives metadata from their binding token',
|
||||
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
|
||||
tcb.overrideView(MyComp, new ViewMetadata({
|
||||
template: '<div public-api><div needs-public-api></div></div>',
|
||||
directives: [bind(PublicApi).toClass(PrivateImpl), NeedsPublicApi]
|
||||
directives: [PrivateImpl, NeedsPublicApi]
|
||||
}))
|
||||
|
||||
.createAsync(MyComp)
|
||||
@ -2043,12 +2010,14 @@ class NeedsAttribute {
|
||||
}
|
||||
}
|
||||
|
||||
@Directive({selector: '[public-api]'})
|
||||
@Injectable()
|
||||
class PublicApi {
|
||||
}
|
||||
|
||||
@Directive({selector: '[private-impl]'})
|
||||
@Directive({
|
||||
selector: '[public-api]',
|
||||
bindings: [new Binding(PublicApi, {toAlias: PrivateImpl, deps: []})]
|
||||
})
|
||||
@Injectable()
|
||||
class PrivateImpl extends PublicApi {
|
||||
}
|
||||
|
||||
@ -42,11 +42,7 @@ export function main() {
|
||||
@Component({selector: 'app', viewBindings: [forwardRef(() => Frame)]})
|
||||
@View({
|
||||
template: `<door><lock></lock></door>`,
|
||||
directives: [
|
||||
bind(forwardRef(() => Door))
|
||||
.toClass(forwardRef(() => Door)),
|
||||
bind(forwardRef(() => Lock)).toClass(forwardRef(() => Lock))
|
||||
]
|
||||
directives: [forwardRef(() => Door), forwardRef(() => Lock)]
|
||||
})
|
||||
class App {
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user