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

feat(Compiler): case sensitive html parser

Browse Source 
close #4417
Closes #5264
This commit is contained in:
Victor Berchet
2015-11-10 15:56:25 -08:00
parent adb87562bb
commit 36a423fac8
13 changed files with 834 additions and 381 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
modules/angular2/test/compiler/html_lexer_spec.ts
View File

@ -1,8 +1,22 @@
import {ddescribe, describe, it, iit, xit, expect, beforeEach, afterEach} from '../../test_lib';
import {BaseException} from '../../src/facade/exceptions';
import {
ddescribe,
describe,
it,
iit,
xit,
expect,
beforeEach,
afterEach
} from 'angular2/testing_internal';
import {BaseException} from 'angular2/src/facade/exceptions';
import {tokenizeHtml, HtmlToken, HtmlTokenType} from '../../src/compiler/html_lexer';
import {ParseSourceSpan, ParseLocation} from '../../src/compiler/parse_util';
import {
tokenizeHtml,
HtmlToken,
HtmlTokenType,
HtmlTokenError
} from 'angular2/src/compiler/html_lexer';
import {ParseSourceSpan, ParseLocation, ParseSourceFile} from 'angular2/src/compiler/parse_util';
export function main() {
describe('HtmlLexer', () => {
@ -253,11 +267,35 @@ export function main() {
});
it('should parse attributes with entities in values', () => {
expect(tokenizeAndHumanizeParts('<t a="&#65;">'))
expect(tokenizeAndHumanizeParts('<t a="&#65;&#x41;">'))
.toEqual([
[HtmlTokenType.TAG_OPEN_START, null, 't'],
[HtmlTokenType.ATTR_NAME, null, 'a'],
[HtmlTokenType.ATTR_VALUE, 'A'],
[HtmlTokenType.ATTR_VALUE, 'AA'],
[HtmlTokenType.TAG_OPEN_END],
[HtmlTokenType.EOF]
]);
});
it('should not decode entities without trailing ";"', () => {
expect(tokenizeAndHumanizeParts('<t a="&amp" b="c&&d">'))
.toEqual([
[HtmlTokenType.TAG_OPEN_START, null, 't'],
[HtmlTokenType.ATTR_NAME, null, 'a'],
[HtmlTokenType.ATTR_VALUE, '&amp'],
[HtmlTokenType.ATTR_NAME, null, 'b'],
[HtmlTokenType.ATTR_VALUE, 'c&&d'],
[HtmlTokenType.TAG_OPEN_END],
[HtmlTokenType.EOF]
]);
});
it('should parse attributes with "&" in values', () => {
expect(tokenizeAndHumanizeParts('<t a="b && c &">'))
.toEqual([
[HtmlTokenType.TAG_OPEN_START, null, 't'],
[HtmlTokenType.ATTR_NAME, null, 'a'],
[HtmlTokenType.ATTR_VALUE, 'b && c &'],
[HtmlTokenType.TAG_OPEN_END],
[HtmlTokenType.EOF]
]);
@ -343,13 +381,22 @@ export function main() {
.toEqual([[HtmlTokenType.TEXT, 'a&amp;b'], [HtmlTokenType.EOF, '']]);
});
it('should report unknown named entities >', () => {
it('should report malformed/unknown entities', () => {
expect(tokenizeAndHumanizeErrors('&tbo;'))
.toEqual([[HtmlTokenType.TEXT, 'Unknown entity "tbo"', '0:0']]);
.toEqual([
[
HtmlTokenType.TEXT,
'Unknown entity "tbo" - use the "&#<decimal>;" or "&#x<hex>;" syntax',
'0:0'
]
]);
expect(tokenizeAndHumanizeErrors('&#asdf;'))
.toEqual([[HtmlTokenType.TEXT, 'Unknown entity "#asdf"', '0:0']]);
.toEqual([[HtmlTokenType.TEXT, 'Unexpected character "s"', '0:3']]);
expect(tokenizeAndHumanizeErrors('&#xasdf;'))
.toEqual([[HtmlTokenType.TEXT, 'Unknown entity "#xasdf"', '0:0']]);
.toEqual([[HtmlTokenType.TEXT, 'Unexpected character "s"', '0:4']]);
expect(tokenizeAndHumanizeErrors('&#xABC'))
.toEqual([[HtmlTokenType.TEXT, 'Unexpected character "EOF"', '0:6']]);
});
});
@ -364,6 +411,11 @@ export function main() {
.toEqual([[HtmlTokenType.TEXT, 'a&b'], [HtmlTokenType.EOF]]);
});
it('should parse text starting with "&"', () => {
expect(tokenizeAndHumanizeParts('a && b &'))
.toEqual([[HtmlTokenType.TEXT, 'a && b &'], [HtmlTokenType.EOF]]);
});
it('should store the locations', () => {
expect(tokenizeAndHumanizeSourceSpans('a'))
.toEqual([[HtmlTokenType.TEXT, 'a'], [HtmlTokenType.EOF, '']]);
@ -486,6 +538,17 @@ export function main() {
});
describe('errors', () => {
it('should include 2 lines of context in message', () => {
let src = "111\n222\n333\nE\n444\n555\n666\n";
let file = new ParseSourceFile(src, 'file://');
let location = new ParseLocation(file, 12, 123, 456);
let error = new HtmlTokenError('**ERROR**', null, location);
expect(error.toString())
.toEqual(`**ERROR** ("\n222\n333\n[ERROR ->]E\n444\n555\n"): file://@123:456`);
});
});
});
}

192
modules/angular2/test/compiler/html_parser_spec.ts
View File

@ -9,8 +9,8 @@ import {
afterEach
} from 'angular2/testing_internal';
import {HtmlParser, HtmlParseTreeResult} from 'angular2/src/compiler/html_parser';
import {HtmlTokenType} from 'angular2/src/compiler/html_lexer';
import {HtmlParser, HtmlParseTreeResult, HtmlTreeError} from 'angular2/src/compiler/html_parser';
import {
HtmlAst,
HtmlAstVisitor,
@ -19,17 +19,15 @@ import {
HtmlTextAst,
htmlVisitAll
} from 'angular2/src/compiler/html_ast';
import {ParseError, ParseLocation, ParseSourceSpan} from 'angular2/src/compiler/parse_util';
import {BaseException} from 'angular2/src/facade/exceptions';
export function main() {
describe('HtmlParser', () => {
var parser: HtmlParser;
beforeEach(() => { parser = new HtmlParser(); });
// TODO: add more test cases
// TODO: separate tests for source spans from tests for tree parsing
// TODO: find a better way to assert the tree structure!
// -> maybe with arrays and object hashes!!
describe('parse', () => {
describe('text nodes', () => {
it('should parse root level text nodes', () => {
@ -38,37 +36,101 @@ export function main() {
it('should parse text nodes inside regular elements', () => {
expect(humanizeDom(parser.parse('<div>a</div>', 'TestComp')))
.toEqual([[HtmlElementAst, 'div'], [HtmlTextAst, 'a']]);
.toEqual([[HtmlElementAst, 'div', 0], [HtmlTextAst, 'a']]);
});
it('should parse text nodes inside template elements', () => {
expect(humanizeDom(parser.parse('<template>a</template>', 'TestComp')))
.toEqual([[HtmlElementAst, 'template'], [HtmlTextAst, 'a']]);
.toEqual([[HtmlElementAst, 'template', 0], [HtmlTextAst, 'a']]);
});
it('should parse CDATA', () => {
expect(humanizeDom(parser.parse('<![CDATA[text]]>', 'TestComp')))
.toEqual([[HtmlTextAst, 'text']]);
});
});
describe('elements', () => {
it('should parse root level elements', () => {
expect(humanizeDom(parser.parse('<div></div>', 'TestComp')))
.toEqual([[HtmlElementAst, 'div']]);
.toEqual([[HtmlElementAst, 'div', 0]]);
});
it('should parse elements inside of regular elements', () => {
expect(humanizeDom(parser.parse('<div><span></span></div>', 'TestComp')))
.toEqual([[HtmlElementAst, 'div'], [HtmlElementAst, 'span']]);
.toEqual([[HtmlElementAst, 'div', 0], [HtmlElementAst, 'span', 1]]);
});
it('should parse elements inside of template elements', () => {
expect(humanizeDom(parser.parse('<template><span></span></template>', 'TestComp')))
.toEqual([[HtmlElementAst, 'template'], [HtmlElementAst, 'span']]);
.toEqual([[HtmlElementAst, 'template', 0], [HtmlElementAst, 'span', 1]]);
});
it('should support void elements', () => {
expect(humanizeDom(parser.parse('<link rel="author license" href="/about">', 'TestComp')))
.toEqual([
[HtmlElementAst, 'link', 0],
[HtmlAttrAst, 'rel', 'author license'],
[HtmlAttrAst, 'href', '/about'],
]);
});
it('should support optional end tags', () => {
expect(humanizeDom(parser.parse('<div><p>1<p>2</div>', 'TestComp')))
.toEqual([
[HtmlElementAst, 'div', 0],
[HtmlElementAst, 'p', 1],
[HtmlTextAst, '1'],
[HtmlElementAst, 'p', 1],
[HtmlTextAst, '2'],
]);
});
it('should support nested elements', () => {
expect(humanizeDom(parser.parse('<ul><li><ul><li></li></ul></li></ul>', 'TestComp')))
.toEqual([
[HtmlElementAst, 'ul', 0],
[HtmlElementAst, 'li', 1],
[HtmlElementAst, 'ul', 2],
[HtmlElementAst, 'li', 3],
]);
});
it('should add the requiredParent', () => {
expect(humanizeDom(parser.parse('<table><tr></tr></table>', 'TestComp')))
.toEqual([
[HtmlElementAst, 'table', 0],
[HtmlElementAst, 'tbody', 1],
[HtmlElementAst, 'tr', 2],
]);
});
it('should support explicit mamespace', () => {
expect(humanizeDom(parser.parse('<myns:div></myns:div>', 'TestComp')))
.toEqual([[HtmlElementAst, '@myns:div', 0]]);
});
it('should support implicit mamespace', () => {
expect(humanizeDom(parser.parse('<svg></svg>', 'TestComp')))
.toEqual([[HtmlElementAst, '@svg:svg', 0]]);
});
it('should propagate the namespace', () => {
expect(humanizeDom(parser.parse('<myns:div><p></p></myns:div>', 'TestComp')))
.toEqual([[HtmlElementAst, '@myns:div', 0], [HtmlElementAst, '@myns:p', 1]]);
});
it('should match closing tags case insensitive', () => {
expect(humanizeDom(parser.parse('<DiV><P></p></dIv>', 'TestComp')))
.toEqual([[HtmlElementAst, 'DiV', 0], [HtmlElementAst, 'P', 1]]);
});
});
describe('attributes', () => {
it('should parse attributes on regular elements', () => {
it('should parse attributes on regular elements case sensitive', () => {
expect(humanizeDom(parser.parse('<div kEy="v" key2=v2></div>', 'TestComp')))
.toEqual([
[HtmlElementAst, 'div'],
[HtmlElementAst, 'div', 0],
[HtmlAttrAst, 'kEy', 'v'],
[HtmlAttrAst, 'key2', 'v2'],
]);
@ -76,51 +138,135 @@ export function main() {
it('should parse attributes without values', () => {
expect(humanizeDom(parser.parse('<div k></div>', 'TestComp')))
.toEqual([[HtmlElementAst, 'div'], [HtmlAttrAst, 'k', '']]);
.toEqual([[HtmlElementAst, 'div', 0], [HtmlAttrAst, 'k', '']]);
});
it('should parse attributes on svg elements case sensitive', () => {
expect(humanizeDom(parser.parse('<svg viewBox="0"></svg>', 'TestComp')))
.toEqual([[HtmlElementAst, '@svg:svg'], [HtmlAttrAst, 'viewBox', '0']]);
.toEqual([[HtmlElementAst, '@svg:svg', 0], [HtmlAttrAst, 'viewBox', '0']]);
});
it('should parse attributes on template elements', () => {
expect(humanizeDom(parser.parse('<template k="v"></template>', 'TestComp')))
.toEqual([[HtmlElementAst, 'template'], [HtmlAttrAst, 'k', 'v']]);
.toEqual([[HtmlElementAst, 'template', 0], [HtmlAttrAst, 'k', 'v']]);
});
it('should support mamespace', () => {
expect(humanizeDom(parser.parse('<use xlink:href="Port" />', 'TestComp')))
.toEqual([[HtmlElementAst, 'use', 0], [HtmlAttrAst, '@xlink:href', 'Port']]);
});
});
describe('comments', () => {
it('should ignore comments', () => {
expect(humanizeDom(parser.parse('<!-- comment --><div></div>', 'TestComp')))
.toEqual([[HtmlElementAst, 'div', 0]]);
});
});
describe('source spans', () => {
it('should store the location', () => {
expect(humanizeDomSourceSpans(parser.parse(
'<div [prop]="v1" (e)="do()" attr="v2" noValue>\na\n</div>', 'TestComp')))
.toEqual([
[HtmlElementAst, 'div', 0, '<div [prop]="v1" (e)="do()" attr="v2" noValue>'],
[HtmlAttrAst, '[prop]', 'v1', '[prop]="v1"'],
[HtmlAttrAst, '(e)', 'do()', '(e)="do()"'],
[HtmlAttrAst, 'attr', 'v2', 'attr="v2"'],
[HtmlAttrAst, 'noValue', '', 'noValue'],
[HtmlTextAst, '\na\n', '\na\n'],
]);
});
});
describe('errors', () => {
it('should report unexpected closing tags', () => {
let errors = parser.parse('<div></p></div>', 'TestComp').errors;
expect(errors.length).toEqual(1);
expect(humanizeErrors(errors)).toEqual([['p', 'Unexpected closing tag "p"', '0:5']]);
});
it('should also report lexer errors', () => {
let errors = parser.parse('<!-err--><div></p></div>', 'TestComp').errors;
expect(errors.length).toEqual(2);
expect(humanizeErrors(errors))
.toEqual([
[HtmlTokenType.COMMENT_START, 'Unexpected character "e"', '0:3'],
['p', 'Unexpected closing tag "p"', '0:14']
]);
});
});
});
});
}
function humanizeDom(parseResult: HtmlParseTreeResult): any[] {
// TODO: humanize errors as well!
if (parseResult.errors.length > 0) {
throw parseResult.errors;
var errorString = parseResult.errors.join('\n');
throw new BaseException(`Unexpected parse errors:\n${errorString}`);
}
var humanizer = new Humanizer();
var humanizer = new Humanizer(false);
htmlVisitAll(humanizer, parseResult.rootNodes);
return humanizer.result;
}
function humanizeDomSourceSpans(parseResult: HtmlParseTreeResult): any[] {
if (parseResult.errors.length > 0) {
var errorString = parseResult.errors.join('\n');
throw new BaseException(`Unexpected parse errors:\n${errorString}`);
}
var humanizer = new Humanizer(true);
htmlVisitAll(humanizer, parseResult.rootNodes);
return humanizer.result;
}
function humanizeLineColumn(location: ParseLocation): string {
return `${location.line}:${location.col}`;
}
function humanizeErrors(errors: ParseError[]): any[] {
return errors.map(error => {
if (error instanceof HtmlTreeError) {
// Parser errors
return [<any>error.elementName, error.msg, humanizeLineColumn(error.location)];
}
// Tokenizer errors
return [(<any>error).tokenType, error.msg, humanizeLineColumn(error.location)];
});
}
class Humanizer implements HtmlAstVisitor {
result: any[] = [];
elDepth: number = 0;
constructor(private includeSourceSpan: boolean){};
visitElement(ast: HtmlElementAst, context: any): any {
this.result.push([HtmlElementAst, ast.name]);
var res = this._appendContext(ast, [HtmlElementAst, ast.name, this.elDepth++]);
this.result.push(res);
htmlVisitAll(this, ast.attrs);
htmlVisitAll(this, ast.children);
this.elDepth--;
return null;
}
visitAttr(ast: HtmlAttrAst, context: any): any {
this.result.push([HtmlAttrAst, ast.name, ast.value]);
var res = this._appendContext(ast, [HtmlAttrAst, ast.name, ast.value]);
this.result.push(res);
return null;
}
visitText(ast: HtmlTextAst, context: any): any {
this.result.push([HtmlTextAst, ast.value]);
var res = this._appendContext(ast, [HtmlTextAst, ast.value]);
this.result.push(res);
return null;
}
private _appendContext(ast: HtmlAst, input: any[]): any[] {
if (!this.includeSourceSpan) return input;
input.push(ast.sourceSpan.toString());
return input;
}
}

374
modules/angular2/test/compiler/template_parser_spec.ts
View File

@ -45,9 +45,6 @@ import {Unparser} from '../core/change_detection/parser/unparser';
var expressionUnparser = new Unparser();
// TODO(tbosch): add tests for checking that we
// keep the correct sourceSpans!
export function main() {
describe('TemplateParser', () => {
beforeEachProviders(() => [
@ -76,27 +73,35 @@ export function main() {
describe('nodes without bindings', () => {
it('should parse text nodes',
() => { expect(humanizeTemplateAsts(parse('a', []))).toEqual([[TextAst, 'a']]); });
() => { expect(humanizeTplAst(parse('a', []))).toEqual([[TextAst, 'a']]); });
it('should parse elements with attributes', () => {
expect(humanizeTemplateAsts(parse('<div a=b>', [])))
expect(humanizeTplAst(parse('<div a=b>', [])))
.toEqual([[ElementAst, 'div'], [AttrAst, 'a', 'b']]);
});
});
it('should parse ngContent', () => {
var parsed = parse('<ng-content select="a">', []);
expect(humanizeTemplateAsts(parsed)).toEqual([[NgContentAst]]);
expect(humanizeTplAst(parsed)).toEqual([[NgContentAst]]);
});
it('should parse bound text nodes', () => {
expect(humanizeTemplateAsts(parse('{{a}}', []))).toEqual([[BoundTextAst, '{{ a }}']]);
expect(humanizeTplAst(parse('{{a}}', []))).toEqual([[BoundTextAst, '{{ a }}']]);
});
describe('bound properties', () => {
it('should parse mixed case bound properties', () => {
expect(humanizeTplAst(parse('<div [someProp]="v">', [])))
.toEqual([
[ElementAst, 'div'],
[BoundElementPropertyAst, PropertyBindingType.Property, 'someProp', 'v', null]
]);
});
it('should parse and camel case bound properties', () => {
expect(humanizeTemplateAsts(parse('<div [some-prop]="v">', [])))
expect(humanizeTplAst(parse('<div [some-prop]="v">', [])))
.toEqual([
[ElementAst, 'div'],
[BoundElementPropertyAst, PropertyBindingType.Property, 'someProp', 'v', null]
@ -104,31 +109,71 @@ export function main() {
});
it('should normalize property names via the element schema', () => {
expect(humanizeTemplateAsts(parse('<div [mapped-attr]="v">', [])))
expect(humanizeTplAst(parse('<div [mapped-attr]="v">', [])))
.toEqual([
[ElementAst, 'div'],
[BoundElementPropertyAst, PropertyBindingType.Property, 'mappedProp', 'v', null]
]);
});
it('should parse and camel case bound attributes', () => {
expect(humanizeTemplateAsts(parse('<div [attr.some-attr]="v">', [])))
it('should parse mixed case bound attributes', () => {
expect(humanizeTplAst(parse('<div [attr.someAttr]="v">', [])))
.toEqual([
[ElementAst, 'div'],
[BoundElementPropertyAst, PropertyBindingType.Attribute, 'someAttr', 'v', null]
]);
});
it('should parse and camel case bound attributes', () => {
expect(humanizeTplAst(parse('<div [attr.some-attr]="v">', [])))
.toEqual([
[ElementAst, 'div'],
[BoundElementPropertyAst, PropertyBindingType.Attribute, 'someAttr', 'v', null]
]);
expect(humanizeTplAst(parse('<div [ATTR.some-attr]="v">', [])))
.toEqual([
[ElementAst, 'div'],
[BoundElementPropertyAst, PropertyBindingType.Attribute, 'someAttr', 'v', null]
]);
});
it('should parse and dash case bound classes', () => {
expect(humanizeTemplateAsts(parse('<div [class.some-class]="v">', [])))
expect(humanizeTplAst(parse('<div [class.some-class]="v">', [])))
.toEqual([
[ElementAst, 'div'],
[BoundElementPropertyAst, PropertyBindingType.Class, 'some-class', 'v', null]
]);
expect(humanizeTplAst(parse('<div [CLASS.some-class]="v">', [])))
.toEqual([
[ElementAst, 'div'],
[BoundElementPropertyAst, PropertyBindingType.Class, 'some-class', 'v', null]
]);
});
it('should parse mixed case bound classes', () => {
expect(humanizeTplAst(parse('<div [class.someClass]="v">', [])))
.toEqual([
[ElementAst, 'div'],
[BoundElementPropertyAst, PropertyBindingType.Class, 'someClass', 'v', null]
]);
});
it('should parse and camel case bound styles', () => {
expect(humanizeTemplateAsts(parse('<div [style.some-style]="v">', [])))
expect(humanizeTplAst(parse('<div [style.some-style]="v">', [])))
.toEqual([
[ElementAst, 'div'],
[BoundElementPropertyAst, PropertyBindingType.Style, 'someStyle', 'v', null]
]);
expect(humanizeTplAst(parse('<div [STYLE.some-style]="v">', [])))
.toEqual([
[ElementAst, 'div'],
[BoundElementPropertyAst, PropertyBindingType.Style, 'someStyle', 'v', null]
]);
});
it('should parse and mixed case bound styles', () => {
expect(humanizeTplAst(parse('<div [style.someStyle]="v">', [])))
.toEqual([
[ElementAst, 'div'],
[BoundElementPropertyAst, PropertyBindingType.Style, 'someStyle', 'v', null]
@ -136,7 +181,7 @@ export function main() {
});
it('should parse bound properties via [...] and not report them as attributes', () => {
expect(humanizeTemplateAsts(parse('<div [prop]="v">', [])))
expect(humanizeTplAst(parse('<div [prop]="v">', [])))
.toEqual([
[ElementAst, 'div'],
[BoundElementPropertyAst, PropertyBindingType.Property, 'prop', 'v', null]
@ -144,7 +189,12 @@ export function main() {
});
it('should parse bound properties via bind- and not report them as attributes', () => {
expect(humanizeTemplateAsts(parse('<div bind-prop="v">', [])))
expect(humanizeTplAst(parse('<div bind-prop="v">', [])))
.toEqual([
[ElementAst, 'div'],
[BoundElementPropertyAst, PropertyBindingType.Property, 'prop', 'v', null]
]);
expect(humanizeTplAst(parse('<div BIND-prop="v">', [])))
.toEqual([
[ElementAst, 'div'],
[BoundElementPropertyAst, PropertyBindingType.Property, 'prop', 'v', null]
@ -152,7 +202,7 @@ export function main() {
});
it('should parse bound properties via {{...}} and not report them as attributes', () => {
expect(humanizeTemplateAsts(parse('<div prop="{{v}}">', [])))
expect(humanizeTplAst(parse('<div prop="{{v}}">', [])))
.toEqual([
[ElementAst, 'div'],
[BoundElementPropertyAst, PropertyBindingType.Property, 'prop', '{{ v }}', null]
@ -164,22 +214,29 @@ export function main() {
describe('events', () => {
it('should parse bound events with a target', () => {
expect(humanizeTemplateAsts(parse('<div (window:event)="v">', [])))
expect(humanizeTplAst(parse('<div (window:event)="v">', [])))
.toEqual([[ElementAst, 'div'], [BoundEventAst, 'event', 'window', 'v']]);
});
it('should parse bound events via (...) and not report them as attributes', () => {
expect(humanizeTemplateAsts(parse('<div (event)="v">', [])))
expect(humanizeTplAst(parse('<div (event)="v">', [])))
.toEqual([[ElementAst, 'div'], [BoundEventAst, 'event', null, 'v']]);
});
it('should camel case event names', () => {
expect(humanizeTemplateAsts(parse('<div (some-event)="v">', [])))
it('should parse and camel case event names', () => {
expect(humanizeTplAst(parse('<div (some-event)="v">', [])))
.toEqual([[ElementAst, 'div'], [BoundEventAst, 'someEvent', null, 'v']]);
});
it('should parse mixed case event names', () => {
expect(humanizeTplAst(parse('<div (someEvent)="v">', [])))
.toEqual([[ElementAst, 'div'], [BoundEventAst, 'someEvent', null, 'v']]);
});
it('should parse bound events via on- and not report them as attributes', () => {
expect(humanizeTemplateAsts(parse('<div on-event="v">', [])))
expect(humanizeTplAst(parse('<div on-event="v">', [])))
.toEqual([[ElementAst, 'div'], [BoundEventAst, 'event', null, 'v']]);
expect(humanizeTplAst(parse('<div ON-event="v">', [])))
.toEqual([[ElementAst, 'div'], [BoundEventAst, 'event', null, 'v']]);
});
@ -190,7 +247,7 @@ export function main() {
outputs: ['e'],
type: new CompileTypeMetadata({name: 'DirA'})
});
expect(humanizeTemplateAsts(parse('<template (e)="f"></template>', [dirA])))
expect(humanizeTplAst(parse('<template (e)="f"></template>', [dirA])))
.toEqual([
[EmbeddedTemplateAst],
[BoundEventAst, 'e', null, 'f'],
@ -202,7 +259,7 @@ export function main() {
describe('bindon', () => {
it('should parse bound events and properties via [(...)] and not report them as attributes',
() => {
expect(humanizeTemplateAsts(parse('<div [(prop)]="v">', [])))
expect(humanizeTplAst(parse('<div [(prop)]="v">', [])))
.toEqual([
[ElementAst, 'div'],
[BoundElementPropertyAst, PropertyBindingType.Property, 'prop', 'v', null],
@ -212,7 +269,13 @@ export function main() {
it('should parse bound events and properties via bindon- and not report them as attributes',
() => {
expect(humanizeTemplateAsts(parse('<div bindon-prop="v">', [])))
expect(humanizeTplAst(parse('<div bindon-prop="v">', [])))
.toEqual([
[ElementAst, 'div'],
[BoundElementPropertyAst, PropertyBindingType.Property, 'prop', 'v', null],
[BoundEventAst, 'propChange', null, 'v = $event']
]);
expect(humanizeTplAst(parse('<div BINDON-prop="v">', [])))
.toEqual([
[ElementAst, 'div'],
[BoundElementPropertyAst, PropertyBindingType.Property, 'prop', 'v', null],
@ -237,7 +300,7 @@ export function main() {
type: new CompileTypeMetadata({name: 'ZComp'}),
template: new CompileTemplateMetadata({ngContentSelectors: []})
});
expect(humanizeTemplateAsts(parse('<div a c b>', [dirA, dirB, dirC, comp])))
expect(humanizeTplAst(parse('<div a c b>', [dirA, dirB, dirC, comp])))
.toEqual([
[ElementAst, 'div'],
[AttrAst, 'a', ''],
@ -255,7 +318,7 @@ export function main() {
{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])))
expect(humanizeTplAst(parse('<div [a]="b">', [dirA, dirB])))
.toEqual([
[ElementAst, 'div'],
[BoundElementPropertyAst, PropertyBindingType.Property, 'a', 'b', null],
@ -269,7 +332,7 @@ export function main() {
type: new CompileTypeMetadata({name: 'DirA'}),
host: {'[a]': 'expr'}
});
expect(humanizeTemplateAsts(parse('<div></div>', [dirA])))
expect(humanizeTplAst(parse('<div></div>', [dirA])))
.toEqual([
[ElementAst, 'div'],
[DirectiveAst, dirA],
@ -283,7 +346,7 @@ export function main() {
type: new CompileTypeMetadata({name: 'DirA'}),
host: {'(a)': 'expr'}
});
expect(humanizeTemplateAsts(parse('<div></div>', [dirA])))
expect(humanizeTplAst(parse('<div></div>', [dirA])))
.toEqual(
[[ElementAst, 'div'], [DirectiveAst, dirA], [BoundEventAst, 'a', null, 'expr']]);
});
@ -291,7 +354,7 @@ export function main() {
it('should parse directive properties', () => {
var dirA = CompileDirectiveMetadata.create(
{selector: 'div', type: new CompileTypeMetadata({name: 'DirA'}), inputs: ['aProp']});
expect(humanizeTemplateAsts(parse('<div [a-prop]="expr"></div>', [dirA])))
expect(humanizeTplAst(parse('<div [a-prop]="expr"></div>', [dirA])))
.toEqual([
[ElementAst, 'div'],
[DirectiveAst, dirA],
@ -302,7 +365,7 @@ export function main() {
it('should parse renamed directive properties', () => {
var dirA = CompileDirectiveMetadata.create(
{selector: 'div', type: new CompileTypeMetadata({name: 'DirA'}), inputs: ['b:a']});
expect(humanizeTemplateAsts(parse('<div [a]="expr"></div>', [dirA])))
expect(humanizeTplAst(parse('<div [a]="expr"></div>', [dirA])))
.toEqual([
[ElementAst, 'div'],
[DirectiveAst, dirA],
@ -313,7 +376,7 @@ export function main() {
it('should parse literal directive properties', () => {
var dirA = CompileDirectiveMetadata.create(
{selector: 'div', type: new CompileTypeMetadata({name: 'DirA'}), inputs: ['a']});
expect(humanizeTemplateAsts(parse('<div a="literal"></div>', [dirA])))
expect(humanizeTplAst(parse('<div a="literal"></div>', [dirA])))
.toEqual([
[ElementAst, 'div'],
[AttrAst, 'a', 'literal'],
@ -325,7 +388,7 @@ export function main() {
it('should favor explicit bound properties over literal properties', () => {
var dirA = CompileDirectiveMetadata.create(
{selector: 'div', type: new CompileTypeMetadata({name: 'DirA'}), inputs: ['a']});
expect(humanizeTemplateAsts(parse('<div a="literal" [a]="\'literal2\'"></div>', [dirA])))
expect(humanizeTplAst(parse('<div a="literal" [a]="\'literal2\'"></div>', [dirA])))
.toEqual([
[ElementAst, 'div'],
[AttrAst, 'a', 'literal'],
@ -337,7 +400,7 @@ export function main() {
it('should support optional directive properties', () => {
var dirA = CompileDirectiveMetadata.create(
{selector: 'div', type: new CompileTypeMetadata({name: 'DirA'}), inputs: ['a']});
expect(humanizeTemplateAsts(parse('<div></div>', [dirA])))
expect(humanizeTplAst(parse('<div></div>', [dirA])))
.toEqual([[ElementAst, 'div'], [DirectiveAst, dirA]]);
});
@ -346,29 +409,31 @@ export function main() {
describe('variables', () => {
it('should parse variables via #... and not report them as attributes', () => {
expect(humanizeTemplateAsts(parse('<div #a>', [])))
expect(humanizeTplAst(parse('<div #a>', [])))
.toEqual([[ElementAst, 'div'], [VariableAst, 'a', '']]);
});
it('should parse variables via var-... and not report them as attributes', () => {
expect(humanizeTemplateAsts(parse('<div var-a>', [])))
expect(humanizeTplAst(parse('<div var-a>', [])))
.toEqual([[ElementAst, 'div'], [VariableAst, 'a', '']]);
expect(humanizeTplAst(parse('<div VAR-a>', [])))
.toEqual([[ElementAst, 'div'], [VariableAst, 'a', '']]);
});
it('should camel case variables', () => {
expect(humanizeTemplateAsts(parse('<div var-some-a>', [])))
expect(humanizeTplAst(parse('<div var-some-a>', [])))
.toEqual([[ElementAst, 'div'], [VariableAst, 'someA', '']]);
});
it('should assign variables with empty value to the element', () => {
expect(humanizeTemplateAsts(parse('<div #a></div>', [])))
expect(humanizeTplAst(parse('<div #a></div>', [])))
.toEqual([[ElementAst, 'div'], [VariableAst, '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 #a="dirA"></div>', [dirA])))
expect(humanizeTplAst(parse('<div a #a="dirA"></div>', [dirA])))
.toEqual([
[ElementAst, 'div'],
[AttrAst, 'a', ''],
@ -379,12 +444,12 @@ export function main() {
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" (<div #a="dirA">): TestComp@0:5`);
There is no directive with "exportAs" set to "dirA" ("<div [ERROR ->]#a="dirA"></div>"): TestComp@0:5`);
});
it('should allow variables with values that dont match a directive on embedded template elements',
() => {
expect(humanizeTemplateAsts(parse('<template #a="b"></template>', [])))
expect(humanizeTplAst(parse('<template #a="b"></template>', [])))
.toEqual([[EmbeddedTemplateAst], [VariableAst, 'a', 'b']]);
});
@ -396,7 +461,7 @@ There is no directive with "exportAs" set to "dirA" (<div #a="dirA">): TestComp@
exportAs: 'dirA',
template: new CompileTemplateMetadata({ngContentSelectors: []})
});
expect(humanizeTemplateAsts(parse('<div a #a></div>', [dirA])))
expect(humanizeTplAst(parse('<div a #a></div>', [dirA])))
.toEqual([
[ElementAst, 'div'],
[AttrAst, 'a', ''],
@ -410,19 +475,23 @@ There is no directive with "exportAs" set to "dirA" (<div #a="dirA">): TestComp@
describe('explicit templates', () => {
it('should create embedded templates for <template> elements', () => {
expect(humanizeTemplateAsts(parse('<template></template>', [])))
expect(humanizeTplAst(parse('<template></template>', [])))
.toEqual([[EmbeddedTemplateAst]]);
expect(humanizeTplAst(parse('<TEMPLATE></TEMPLATE>', [])))
.toEqual([[EmbeddedTemplateAst]]);
});
});
describe('inline templates', () => {
it('should wrap the element into an EmbeddedTemplateAST', () => {
expect(humanizeTemplateAsts(parse('<div template>', [])))
expect(humanizeTplAst(parse('<div template>', [])))
.toEqual([[EmbeddedTemplateAst], [ElementAst, 'div']]);
expect(humanizeTplAst(parse('<div TEMPLATE>', [])))
.toEqual([[EmbeddedTemplateAst], [ElementAst, 'div']]);
});
it('should parse bound properties', () => {
expect(humanizeTemplateAsts(parse('<div template="ngIf test">', [ngIf])))
expect(humanizeTplAst(parse('<div template="ngIf test">', [ngIf])))
.toEqual([
[EmbeddedTemplateAst],
[DirectiveAst, ngIf],
@ -432,12 +501,12 @@ There is no directive with "exportAs" set to "dirA" (<div #a="dirA">): TestComp@
});
it('should parse variables via #...', () => {
expect(humanizeTemplateAsts(parse('<div template="ngIf #a=b">', [])))
expect(humanizeTplAst(parse('<div template="ngIf #a=b">', [])))
.toEqual([[EmbeddedTemplateAst], [VariableAst, 'a', 'b'], [ElementAst, 'div']]);
});
it('should parse variables via var ...', () => {
expect(humanizeTemplateAsts(parse('<div template="ngIf var a=b">', [])))
expect(humanizeTplAst(parse('<div template="ngIf var a=b">', [])))
.toEqual([[EmbeddedTemplateAst], [VariableAst, 'a', 'b'], [ElementAst, 'div']]);
});
@ -447,7 +516,7 @@ There is no directive with "exportAs" set to "dirA" (<div #a="dirA">): TestComp@
{selector: '[a=b]', type: new CompileTypeMetadata({name: 'DirA'}), inputs: ['a']});
var dirB = CompileDirectiveMetadata.create(
{selector: '[b]', type: new CompileTypeMetadata({name: 'DirB'})});
expect(humanizeTemplateAsts(parse('<div template="a b" b>', [dirA, dirB])))
expect(humanizeTplAst(parse('<div template="a b" b>', [dirA, dirB])))
.toEqual([
[EmbeddedTemplateAst],
[DirectiveAst, dirA],
@ -463,7 +532,7 @@ There is no directive with "exportAs" set to "dirA" (<div #a="dirA">): TestComp@
{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])))
expect(humanizeTplAst(parse('<div template="#a=b" b>', [dirA, dirB])))
.toEqual([
[EmbeddedTemplateAst],
[VariableAst, 'a', 'b'],
@ -477,7 +546,7 @@ There is no directive with "exportAs" set to "dirA" (<div #a="dirA">): TestComp@
});
it('should work with *... and use the attribute name as property binding name', () => {
expect(humanizeTemplateAsts(parse('<div *ng-if="test">', [ngIf])))
expect(humanizeTplAst(parse('<div *ng-if="test">', [ngIf])))
.toEqual([
[EmbeddedTemplateAst],
[DirectiveAst, ngIf],
@ -487,7 +556,7 @@ There is no directive with "exportAs" set to "dirA" (<div #a="dirA">): TestComp@
});
it('should work with *... and empty value', () => {
expect(humanizeTemplateAsts(parse('<div *ng-if>', [ngIf])))
expect(humanizeTplAst(parse('<div *ng-if>', [ngIf])))
.toEqual([
[EmbeddedTemplateAst],
[DirectiveAst, ngIf],
@ -602,12 +671,12 @@ There is no directive with "exportAs" set to "dirA" (<div #a="dirA">): TestComp@
describe('error cases', () => {
it('should report invalid property names', () => {
expect(() => parse('<div [invalid-prop]></div>', [])).toThrowError(`Template parse errors:
Can't bind to 'invalidProp' since it isn't a known native property (<div [invalid-prop]>): TestComp@0:5`);
Can't bind to 'invalidProp' since it isn't a known native property ("<div [ERROR ->][invalid-prop]></div>"): TestComp@0:5`);
});
it('should report errors in expressions', () => {
expect(() => parse('<div [prop]="a b"></div>', [])).toThrowErrorWith(`Template parse errors:
Parser Error: Unexpected token 'b' at column 3 in [a b] in TestComp@0:5 in [prop]="a b": TestComp@0:5`);
Parser Error: Unexpected token 'b' at column 3 in [a b] in TestComp@0:5 ("<div [ERROR ->][prop]="a b"></div>"): TestComp@0:5`);
});
it('should not throw on invalid property names if the property is used by a directive',
@ -634,7 +703,7 @@ Parser Error: Unexpected token 'b' at column 3 in [a b] in TestComp@0:5 in [prop
template: new CompileTemplateMetadata({ngContentSelectors: []})
});
expect(() => parse('<div/>', [dirB, dirA])).toThrowError(`Template parse errors:
More than one component: DirB,DirA in <div/>: TestComp@0:0`);
More than one component: DirB,DirA ("[ERROR ->]<div/>"): TestComp@0:0`);
});
it('should not allow components or element bindings nor dom events on explicit embedded templates',
@ -647,9 +716,9 @@ More than one component: DirB,DirA in <div/>: TestComp@0:0`);
});
expect(() => parse('<template [a]="b" (e)="f"></template>', [dirA]))
.toThrowError(`Template parse errors:
Event binding e not emitted by any directive on an embedded template in TestComp > template:nth-child(0)
Components on an embedded template: DirA in TestComp > template:nth-child(0)
Property binding a not used by any directive on an embedded template in TestComp > template:nth-child(0)[[a]=b]`);
Event binding e not emitted by any directive on an embedded template ("<template [a]="b" [ERROR ->](e)="f"></template>"): TestComp@0:18
Components on an embedded template: DirA ("[ERROR ->]<template [a]="b" (e)="f"></template>"): TestComp@0:0
Property binding a not used by any directive on an embedded template ("[ERROR ->]<template [a]="b" (e)="f"></template>"): TestComp@0:0`);
});
it('should not allow components or element bindings on inline embedded templates', () => {
@ -660,48 +729,51 @@ Property binding a not used by any directive on an embedded template in TestComp
template: new CompileTemplateMetadata({ngContentSelectors: []})
});
expect(() => parse('<div *a="b"></div>', [dirA])).toThrowError(`Template parse errors:
Components on an embedded template: DirA in <div *a="b">: TestComp@0:0
Property binding a not used by any directive on an embedded template in <div *a="b">: TestComp@0:0`);
Components on an embedded template: DirA ("[ERROR ->]<div *a="b"></div>"): TestComp@0:0
Property binding a not used by any directive on an embedded template ("[ERROR ->]<div *a="b"></div>"): TestComp@0:0`);
});
});
describe('ignore elements', () => {
it('should ignore <script> elements', () => {
expect(humanizeTemplateAsts(parse('<script></script>a', []))).toEqual([[TextAst, 'a']]);
expect(humanizeTplAst(parse('<script></script>a', []))).toEqual([[TextAst, 'a']]);
});
it('should ignore <style> elements', () => {
expect(humanizeTemplateAsts(parse('<style></style>a', []))).toEqual([[TextAst, 'a']]);
expect(humanizeTplAst(parse('<style></style>a', []))).toEqual([[TextAst, 'a']]);
});
describe('<link rel="stylesheet">', () => {
it('should keep <link rel="stylesheet"> elements if they have an absolute non package: url',
() => {
expect(humanizeTemplateAsts(
parse('<link rel="stylesheet" href="http://someurl"></link>a', [])))
expect(
humanizeTplAst(parse('<link rel="stylesheet" href="http://someurl"></link>a', [])))
.toEqual([
[ElementAst, 'link'],
[AttrAst, 'href', 'http://someurl'],
[AttrAst, 'rel', 'stylesheet'],
[AttrAst, 'href', 'http://someurl'],
[TextAst, 'a']
]);
});
it('should keep <link rel="stylesheet"> elements if they have no uri', () => {
expect(humanizeTemplateAsts(parse('<link rel="stylesheet"></link>a', [])))
expect(humanizeTplAst(parse('<link rel="stylesheet"></link>a', [])))
.toEqual([[ElementAst, 'link'], [AttrAst, 'rel', 'stylesheet'], [TextAst, 'a']]);
expect(humanizeTplAst(parse('<link REL="stylesheet"></link>a', [])))
.toEqual([[ElementAst, 'link'], [AttrAst, 'REL', 'stylesheet'], [TextAst, 'a']]);
});
it('should ignore <link rel="stylesheet"> elements if they have a relative uri', () => {
expect(
humanizeTemplateAsts(parse('<link rel="stylesheet" href="./other.css"></link>a', [])))
expect(humanizeTplAst(parse('<link rel="stylesheet" href="./other.css"></link>a', [])))
.toEqual([[TextAst, 'a']]);
expect(humanizeTplAst(parse('<link rel="stylesheet" HREF="./other.css"></link>a', [])))
.toEqual([[TextAst, 'a']]);
});
it('should ignore <link rel="stylesheet"> elements if they have a package: uri', () => {
expect(humanizeTemplateAsts(
expect(humanizeTplAst(
parse('<link rel="stylesheet" href="package:somePackage"></link>a', [])))
.toEqual([[TextAst, 'a']]);
});
@ -709,12 +781,14 @@ Property binding a not used by any directive on an embedded template in <div *a=
});
it('should ignore bindings on children of elements with ng-non-bindable', () => {
expect(humanizeTemplateAsts(parse('<div ng-non-bindable>{{b}}</div>', [])))
expect(humanizeTplAst(parse('<div ng-non-bindable>{{b}}</div>', [])))
.toEqual([[ElementAst, 'div'], [AttrAst, 'ng-non-bindable', ''], [TextAst, '{{b}}']]);
expect(humanizeTplAst(parse('<div NG-NON-BINDABLE>{{b}}</div>', [])))
.toEqual([[ElementAst, 'div'], [AttrAst, 'NG-NON-BINDABLE', ''], [TextAst, '{{b}}']]);
});
it('should keep nested children of elements with ng-non-bindable', () => {
expect(humanizeTemplateAsts(parse('<div ng-non-bindable><span>{{b}}</span></div>', [])))
expect(humanizeTplAst(parse('<div ng-non-bindable><span>{{b}}</span></div>', [])))
.toEqual([
[ElementAst, 'div'],
[AttrAst, 'ng-non-bindable', ''],
@ -724,26 +798,26 @@ Property binding a not used by any directive on an embedded template in <div *a=
});
it('should ignore <script> elements inside of elements with ng-non-bindable', () => {
expect(humanizeTemplateAsts(parse('<div ng-non-bindable><script></script>a</div>', [])))
expect(humanizeTplAst(parse('<div ng-non-bindable><script></script>a</div>', [])))
.toEqual([[ElementAst, 'div'], [AttrAst, 'ng-non-bindable', ''], [TextAst, 'a']]);
});
it('should ignore <style> elements inside of elements with ng-non-bindable', () => {
expect(humanizeTemplateAsts(parse('<div ng-non-bindable><style></style>a</div>', [])))
expect(humanizeTplAst(parse('<div ng-non-bindable><style></style>a</div>', [])))
.toEqual([[ElementAst, 'div'], [AttrAst, 'ng-non-bindable', ''], [TextAst, 'a']]);
});
it('should ignore <link rel="stylesheet"> elements inside of elements with ng-non-bindable',
() => {
expect(humanizeTemplateAsts(
expect(humanizeTplAst(
parse('<div ng-non-bindable><link rel="stylesheet"></link>a</div>', [])))
.toEqual([[ElementAst, 'div'], [AttrAst, 'ng-non-bindable', ''], [TextAst, 'a']]);
});
it('should convert <ng-content> elements into regular elements inside of elements with ng-non-bindable',
() => {
expect(humanizeTemplateAsts(
parse('<div ng-non-bindable><ng-content></ng-content>a</div>', [])))
expect(
humanizeTplAst(parse('<div ng-non-bindable><ng-content></ng-content>a</div>', [])))
.toEqual([
[ElementAst, 'div'],
[AttrAst, 'ng-non-bindable', ''],
@ -753,23 +827,130 @@ Property binding a not used by any directive on an embedded template in <div *a=
});
});
describe('source spans', () => {
it('should support ng-content', () => {
var parsed = parse('<ng-content select="a">', []);
expect(humanizeTplAstSourceSpans(parsed))
.toEqual([[NgContentAst, '<ng-content select="a">']]);
});
it('should support embedded template', () => {
expect(humanizeTplAstSourceSpans(parse('<template></template>', [])))
.toEqual([[EmbeddedTemplateAst, '<template>']]);
});
it('should support element and attributes', () => {
expect(humanizeTplAstSourceSpans(parse('<div key=value>', [])))
.toEqual(
[[ElementAst, 'div', '<div key=value>'], [AttrAst, 'key', 'value', 'key=value']]);
});
it('should support variables', () => {
var dirA = CompileDirectiveMetadata.create(
{selector: '[a]', type: new CompileTypeMetadata({name: 'DirA'}), exportAs: 'dirA'});
expect(humanizeTplAstSourceSpans(parse('<div a #a="dirA"></div>', [dirA])))
.toEqual([
[ElementAst, 'div', '<div a #a="dirA">'],
[AttrAst, 'a', '', 'a'],
[DirectiveAst, dirA, '<div a #a="dirA">'],
[VariableAst, 'a', 'dirA', '#a="dirA"']
]);
});
it('should support event', () => {
expect(humanizeTplAstSourceSpans(parse('<div (window:event)="v">', [])))
.toEqual([
[ElementAst, 'div', '<div (window:event)="v">'],
[BoundEventAst, 'event', 'window', 'v', '(window:event)="v"']
]);
});
it('should support element property', () => {
expect(humanizeTplAstSourceSpans(parse('<div [someProp]="v">', [])))
.toEqual([
[ElementAst, 'div', '<div [someProp]="v">'],
[
BoundElementPropertyAst,
PropertyBindingType.Property,
'someProp',
'v',
null,
'[someProp]="v"'
]
]);
});
it('should support bound text', () => {
expect(humanizeTplAstSourceSpans(parse('{{a}}', [])))
.toEqual([[BoundTextAst, '{{ a }}', '{{a}}']]);
});
it('should support text nodes', () => {
expect(humanizeTplAstSourceSpans(parse('a', []))).toEqual([[TextAst, 'a', 'a']]);
});
it('should support directive', () => {
var dirA = CompileDirectiveMetadata.create(
{selector: '[a]', type: new CompileTypeMetadata({name: 'DirA'})});
var comp = CompileDirectiveMetadata.create({
selector: 'div',
isComponent: true,
type: new CompileTypeMetadata({name: 'ZComp'}),
template: new CompileTemplateMetadata({ngContentSelectors: []})
});
expect(humanizeTplAstSourceSpans(parse('<div a>', [dirA, comp])))
.toEqual([
[ElementAst, 'div', '<div a>'],
[AttrAst, 'a', '', 'a'],
[DirectiveAst, comp, '<div a>'],
[DirectiveAst, dirA, '<div a>'],
]);
});
it('should support directive property', () => {
var dirA = CompileDirectiveMetadata.create(
{selector: 'div', type: new CompileTypeMetadata({name: 'DirA'}), inputs: ['aProp']});
expect(humanizeTplAstSourceSpans(parse('<div [a-prop]="foo | bar"></div>', [dirA])))
.toEqual([
[ElementAst, 'div', '<div [a-prop]="foo | bar">'],
[DirectiveAst, dirA, '<div [a-prop]="foo | bar">'],
[BoundDirectivePropertyAst, 'aProp', '(foo | bar)', '[a-prop]="foo | bar"']
]);
});
});
});
}
export function humanizeTemplateAsts(templateAsts: TemplateAst[]): any[] {
var humanizer = new TemplateHumanizer();
function humanizeTplAst(templateAsts: TemplateAst[]): any[] {
var humanizer = new TemplateHumanizer(false);
templateVisitAll(humanizer, templateAsts);
return humanizer.result;
}
function humanizeTplAstSourceSpans(templateAsts: TemplateAst[]): any[] {
var humanizer = new TemplateHumanizer(true);
templateVisitAll(humanizer, templateAsts);
return humanizer.result;
}
class TemplateHumanizer implements TemplateAstVisitor {
result: any[] = [];
constructor(private includeSourceSpan: boolean){};
visitNgContent(ast: NgContentAst, context: any): any {
this.result.push([NgContentAst]);
var res = [NgContentAst];
this.result.push(this._appendContext(ast, res));
return null;
}
visitEmbeddedTemplate(ast: EmbeddedTemplateAst, context: any): any {
this.result.push([EmbeddedTemplateAst]);
var res = [EmbeddedTemplateAst];
this.result.push(this._appendContext(ast, res));
templateVisitAll(this, ast.attrs);
templateVisitAll(this, ast.outputs);
templateVisitAll(this, ast.vars);
@ -778,7 +959,8 @@ class TemplateHumanizer implements TemplateAstVisitor {
return null;
}
visitElement(ast: ElementAst, context: any): any {
this.result.push([ElementAst, ast.name]);
var res = [ElementAst, ast.name];
this.result.push(this._appendContext(ast, res));
templateVisitAll(this, ast.attrs);
templateVisitAll(this, ast.inputs);
templateVisitAll(this, ast.outputs);
@ -788,38 +970,44 @@ class TemplateHumanizer implements TemplateAstVisitor {
return null;
}
visitVariable(ast: VariableAst, context: any): any {
this.result.push([VariableAst, ast.name, ast.value]);
var res = [VariableAst, ast.name, ast.value];
this.result.push(this._appendContext(ast, res));
return null;
}
visitEvent(ast: BoundEventAst, context: any): any {
this.result.push(
[BoundEventAst, ast.name, ast.target, expressionUnparser.unparse(ast.handler)]);
var res = [BoundEventAst, ast.name, ast.target, expressionUnparser.unparse(ast.handler)];
this.result.push(this._appendContext(ast, res));
return null;
}
visitElementProperty(ast: BoundElementPropertyAst, context: any): any {
this.result.push([
var res = [
BoundElementPropertyAst,
ast.type,
ast.name,
expressionUnparser.unparse(ast.value),
ast.unit
]);
];
this.result.push(this._appendContext(ast, res));
return null;
}
visitAttr(ast: AttrAst, context: any): any {
this.result.push([AttrAst, ast.name, ast.value]);
var res = [AttrAst, ast.name, ast.value];
this.result.push(this._appendContext(ast, res));
return null;
}
visitBoundText(ast: BoundTextAst, context: any): any {
this.result.push([BoundTextAst, expressionUnparser.unparse(ast.value)]);
var res = [BoundTextAst, expressionUnparser.unparse(ast.value)];
this.result.push(this._appendContext(ast, res));
return null;
}
visitText(ast: TextAst, context: any): any {
this.result.push([TextAst, ast.value]);
var res = [TextAst, ast.value];
this.result.push(this._appendContext(ast, res));
return null;
}
visitDirective(ast: DirectiveAst, context: any): any {
this.result.push([DirectiveAst, ast.directive]);
var res = [DirectiveAst, ast.directive];
this.result.push(this._appendContext(ast, res));
templateVisitAll(this, ast.inputs);
templateVisitAll(this, ast.hostProperties);
templateVisitAll(this, ast.hostEvents);
@ -827,10 +1015,16 @@ class TemplateHumanizer implements TemplateAstVisitor {
return null;
}
visitDirectiveProperty(ast: BoundDirectivePropertyAst, context: any): any {
this.result.push(
[BoundDirectivePropertyAst, ast.directiveName, expressionUnparser.unparse(ast.value)]);
var res = [BoundDirectivePropertyAst, ast.directiveName, expressionUnparser.unparse(ast.value)];
this.result.push(this._appendContext(ast, res));
return null;
}
private _appendContext(ast: TemplateAst, input: any[]): any[] {
if (!this.includeSourceSpan) return input;
input.push(ast.sourceSpan.toString());
return input;
}
}
function sourceInfo(ast: TemplateAst): string {