iSharkFly-Docs
/
angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(Compiler): case sensitive html parser 

close #4417

Closes #5264
This commit is contained in:
Victor Berchet 2015-11-10 15:56:25 -08:00
parent 86aeb8be0a
commit a8edc1eb58
13 changed files with 737 additions and 344 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
modules/angular2/src/compiler/html_lexer.ts
View File

@ -6,7 +6,6 @@ import {
CONST_EXPR, CONST_EXPR,
serializeEnum serializeEnum
} from 'angular2/src/facade/lang'; } from 'angular2/src/facade/lang';
import {BaseException} from 'angular2/src/facade/exceptions';
import {ParseLocation, ParseError, ParseSourceFile, ParseSourceSpan} from './parse_util'; import {ParseLocation, ParseError, ParseSourceFile, ParseSourceSpan} from './parse_util';
import {getHtmlTagDefinition, HtmlTagContentType, NAMED_ENTITIES} from './html_tags'; import {getHtmlTagDefinition, HtmlTagContentType, NAMED_ENTITIES} from './html_tags';
@ -50,6 +49,7 @@ export function tokenizeHtml(sourceContent: string, sourceUrl: string): HtmlToke
const $EOF = 0; const $EOF = 0;
const $TAB = 9; const $TAB = 9;
const $LF = 10; const $LF = 10;
const $FF = 12;
const $CR = 13; const $CR = 13;
const $SPACE = 32; const $SPACE = 32;
@ -247,17 +247,22 @@ class _HtmlTokenizer {
} }
} }
private _readChar(decodeEntities: boolean): string { private _readChar(decodeEntities: boolean, extraNotCharRef: number = null): string {
if (decodeEntities && this.peek === $AMPERSAND) { if (decodeEntities && this.peek === $AMPERSAND) {
var start = this._getLocation(); var start = this._getLocation();
this._attemptUntilChar($SEMICOLON);
this._advance(); this._advance();
var entitySrc = this.input.substring(start.offset + 1, this.index - 1); if (isCharRefStart(this.peek, extraNotCharRef)) {
var decodedEntity = decodeEntity(entitySrc); this._attemptUntilChar($SEMICOLON);
if (isPresent(decodedEntity)) { this._advance();
return decodedEntity; var entitySrc = this.input.substring(start.offset + 1, this.index - 1);
var decodedEntity = decodeEntity(entitySrc);
if (isPresent(decodedEntity)) {
return decodedEntity;
} else {
throw this._createError(unknownEntityErrorMsg(entitySrc), start);
}
} else { } else {
throw this._createError(unknownEntityErrorMsg(entitySrc), start); return '&';
} }
} else { } else {
var index = this.index; var index = this.index;
@ -389,7 +394,7 @@ class _HtmlTokenizer {
this._advance(); this._advance();
var parts = []; var parts = [];
while (this.peek !== quoteChar) { while (this.peek !== quoteChar) {
parts.push(this._readChar(true)); parts.push(this._readChar(true, quoteChar));
} }
value = parts.join(''); value = parts.join('');
this._advance(); this._advance();
@ -440,7 +445,13 @@ function isWhitespace(code: number): boolean {
function isNameEnd(code: number): boolean { function isNameEnd(code: number): boolean {
return isWhitespace(code) || code === $GT || code === $SLASH || code === $SQ || code === $DQ || return isWhitespace(code) || code === $GT || code === $SLASH || code === $SQ || code === $DQ ||
code === $EQ code === $EQ;
}
// http://www.w3.org/TR/html5/syntax.html#consume-a-character-reference
function isCharRefStart(code: number, extraNotCharRef: number): boolean {
return code != $TAB && code != $LF && code != $FF && code != $SPACE && code != $LT &&
code != $AMPERSAND && code != $EOF && code !== extraNotCharRef;
} }
function isPrefixEnd(code: number): boolean { function isPrefixEnd(code: number): boolean {

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

@ -9,34 +9,22 @@ import {
serializeEnum, serializeEnum,
CONST_EXPR CONST_EXPR
} from 'angular2/src/facade/lang'; } from 'angular2/src/facade/lang';
import {DOM} from 'angular2/src/core/dom/dom_adapter';
import {ListWrapper} from 'angular2/src/facade/collection'; import {ListWrapper} from 'angular2/src/facade/collection';
import {HtmlAst, HtmlAttrAst, HtmlTextAst, HtmlElementAst} from './html_ast'; import {HtmlAst, HtmlAttrAst, HtmlTextAst, HtmlElementAst} from './html_ast';
import {escapeDoubleQuoteString} from './util';
import {Injectable} from 'angular2/src/core/di'; import {Injectable} from 'angular2/src/core/di';
import {HtmlToken, HtmlTokenType, tokenizeHtml} from './html_lexer'; import {HtmlToken, HtmlTokenType, tokenizeHtml} from './html_lexer';
import {ParseError, ParseLocation, ParseSourceSpan} from './parse_util'; import {ParseError, ParseLocation, ParseSourceSpan} from './parse_util';
import {HtmlTagDefinition, getHtmlTagDefinition} from './html_tags'; import {HtmlTagDefinition, getHtmlTagDefinition} from './html_tags';
// TODO: remove this, just provide a plain error message!
export enum HtmlTreeErrorType {
UnexpectedClosingTag
}
const HTML_ERROR_TYPE_MSGS = CONST_EXPR(['Unexpected closing tag']);
export class HtmlTreeError extends ParseError { export class HtmlTreeError extends ParseError {
static create(type: HtmlTreeErrorType, elementName: string, static create(elementName: string, location: ParseLocation, msg: string): HtmlTreeError {
location: ParseLocation): HtmlTreeError { return new HtmlTreeError(elementName, location, msg);
return new HtmlTreeError(type, HTML_ERROR_TYPE_MSGS[serializeEnum(type)], elementName,
location);
} }
constructor(public type: HtmlTreeErrorType, msg: string, public elementName: string, constructor(public elementName: string, location: ParseLocation, msg: string) {
location: ParseLocation) {
super(location, msg); super(location, msg);
} }
} }
@ -55,11 +43,8 @@ export class HtmlParser {
} }
} }
var NS_PREFIX_RE = /^@[^:]+/g;
class TreeBuilder { class TreeBuilder {
private index: number = -1; private index: number = -1;
private length: number;
private peek: HtmlToken; private peek: HtmlToken;
private rootNodes: HtmlAst[] = []; private rootNodes: HtmlAst[] = [];
@ -129,7 +114,7 @@ class TreeBuilder {
while (this.peek.type === HtmlTokenType.ATTR_NAME) { while (this.peek.type === HtmlTokenType.ATTR_NAME) {
attrs.push(this._consumeAttr(this._advance())); attrs.push(this._consumeAttr(this._advance()));
} }
var fullName = elementName(prefix, name, this._getParentElement()); var fullName = getElementFullName(prefix, name, this._getParentElement());
var voidElement = false; var voidElement = false;
// Note: There could have been a tokenizer error // Note: There could have been a tokenizer error
// so that we don't get a token for the end tag... // so that we don't get a token for the end tag...
@ -150,15 +135,13 @@ class TreeBuilder {
} }
private _pushElement(el: HtmlElementAst) { private _pushElement(el: HtmlElementAst) {
var stackIndex = this.elementStack.length - 1; for (var stackIndex = this.elementStack.length - 1; stackIndex >= 0; stackIndex--) {
while (stackIndex >= 0) {
var parentEl = this.elementStack[stackIndex]; var parentEl = this.elementStack[stackIndex];
if (!getHtmlTagDefinition(parentEl.name).isClosedByChild(el.name)) { if (getHtmlTagDefinition(parentEl.name).isClosedByChild(el.name)) {
ListWrapper.splice(this.elementStack, stackIndex, this.elementStack.length - stackIndex);
break; break;
} }
stackIndex--;
} }
this.elementStack.splice(stackIndex, this.elementStack.length - 1 - stackIndex);
var tagDef = getHtmlTagDefinition(el.name); var tagDef = getHtmlTagDefinition(el.name);
var parentEl = this._getParentElement(); var parentEl = this._getParentElement();
@ -175,35 +158,29 @@ class TreeBuilder {
private _consumeEndTag(endTagToken: HtmlToken) { private _consumeEndTag(endTagToken: HtmlToken) {
var fullName = var fullName =
elementName(endTagToken.parts[0], endTagToken.parts[1], this._getParentElement()); getElementFullName(endTagToken.parts[0], endTagToken.parts[1], this._getParentElement());
if (!this._popElement(fullName)) { if (!this._popElement(fullName)) {
this.errors.push(HtmlTreeError.create(HtmlTreeErrorType.UnexpectedClosingTag, fullName, this.errors.push(HtmlTreeError.create(fullName, endTagToken.sourceSpan.start,
endTagToken.sourceSpan.start)); `Unexpected closing tag "${endTagToken.parts[1]}"`));
} }
} }
private _popElement(fullName: string): boolean { private _popElement(fullName: string): boolean {
var stackIndex = this.elementStack.length - 1; for (let stackIndex = this.elementStack.length - 1; stackIndex >= 0; stackIndex--) {
var hasError = false;
while (stackIndex >= 0) {
var el = this.elementStack[stackIndex]; var el = this.elementStack[stackIndex];
if (el.name == fullName) { if (el.name.toLowerCase() == fullName.toLowerCase()) {
break; ListWrapper.splice(this.elementStack, stackIndex, this.elementStack.length - stackIndex);
return true;
} }
if (!getHtmlTagDefinition(el.name).closedByParent) { if (!getHtmlTagDefinition(el.name).closedByParent) {
hasError = true; return false;
break;
} }
stackIndex--;
} }
if (!hasError) { return false;
this.elementStack.splice(stackIndex, this.elementStack.length - stackIndex);
}
return !hasError;
} }
private _consumeAttr(attrName: HtmlToken): HtmlAttrAst { private _consumeAttr(attrName: HtmlToken): HtmlAttrAst {
var fullName = elementName(attrName.parts[0], attrName.parts[1], null); var fullName = mergeNsAndName(attrName.parts[0], attrName.parts[1]);
var end = attrName.sourceSpan.end; var end = attrName.sourceSpan.end;
var value = ''; var value = '';
if (this.peek.type === HtmlTokenType.ATTR_VALUE) { if (this.peek.type === HtmlTokenType.ATTR_VALUE) {
@ -228,20 +205,24 @@ class TreeBuilder {
} }
} }
function elementName(prefix: string, localName: string, parentElement: HtmlElementAst) { function mergeNsAndName(prefix: string, localName: string): string {
return isPresent(prefix) ? `@${prefix}:${localName}` : localName;
}
function getElementFullName(prefix: string, localName: string,
parentElement: HtmlElementAst): string {
if (isBlank(prefix)) { if (isBlank(prefix)) {
prefix = getHtmlTagDefinition(localName).implicitNamespacePrefix; prefix = getHtmlTagDefinition(localName).implicitNamespacePrefix;
if (isBlank(prefix) && isPresent(parentElement)) {
prefix = namespacePrefix(parentElement.name);
}
} }
if (isBlank(prefix) && isPresent(parentElement)) {
prefix = namespacePrefix(parentElement.name); return mergeNsAndName(prefix, localName);
}
if (isPresent(prefix)) {
return `@${prefix}:${localName}`;
} else {
return localName;
}
} }
var NS_PREFIX_RE = /^@([^:]+)/g;
function namespacePrefix(elementName: string): string { function namespacePrefix(elementName: string): string {
var match = RegExpWrapper.firstMatch(NS_PREFIX_RE, elementName); var match = RegExpWrapper.firstMatch(NS_PREFIX_RE, elementName);
return isBlank(match) ? null : match[1]; return isBlank(match) ? null : match[1];

114
modules/angular2/src/compiler/html_tags.ts
View File

@ -1,7 +1,61 @@
import {isPresent, isBlank, normalizeBool, CONST_EXPR} from 'angular2/src/facade/lang'; import {isPresent, isBlank, normalizeBool, CONST_EXPR} from 'angular2/src/facade/lang';
// TODO: fill this! // see http://www.w3.org/TR/html51/syntax.html#named-character-references
export const NAMED_ENTITIES: {[key: string]: string} = <any>CONST_EXPR({'amp': '&'}); // see https://html.spec.whatwg.org/multipage/entities.json
// This list is not exhaustive to keep the compiler footprint low.
// The `&#123;` / `&#x1ab;` syntax should be used when the named character reference does not exist.
export const NAMED_ENTITIES = CONST_EXPR({
'lt': '<',
'gt': '>',
'nbsp': '\u00A0',
'amp': '&',
'Aacute': '\u00C1',
'Acirc': '\u00C2',
'Agrave': '\u00C0',
'Atilde': '\u00C3',
'Auml': '\u00C4',
'Ccedil': '\u00C7',
'Eacute': '\u00C9',
'Ecirc': '\u00CA',
'Egrave': '\u00C8',
'Euml': '\u00CB',
'Iacute': '\u00CD',
'Icirc': '\u00CE',
'Igrave': '\u00CC',
'Iuml': '\u00CF',
'Oacute': '\u00D3',
'Ocirc': '\u00D4',
'Ograve': '\u00D2',
'Otilde': '\u00D5',
'Ouml': '\u00D6',
'Uacute': '\u00DA',
'Ucirc': '\u00DB',
'Ugrave': '\u00D9',
'Uuml': '\u00DC',
'aacute': '\u00E1',
'acirc': '\u00E2',
'agrave': '\u00E0',
'atilde': '\u00E3',
'auml': '\u00E4',
'ccedil': '\u00E7',
'eacute': '\u00E9',
'ecirc': '\u00EA',
'egrave': '\u00E8',
'euml': '\u00EB',
'iacute': '\u00ED',
'icirc': '\u00EE',
'igrave': '\u00EC',
'iuml': '\u00EF',
'oacute': '\u00F3',
'ocirc': '\u00F4',
'ograve': '\u00F2',
'otilde': '\u00F5',
'ouml': '\u00F6',
'uacute': '\u00FA',
'ucirc': '\u00FB',
'ugrave': '\u00F9',
'uuml': '\u00FC',
});
export enum HtmlTagContentType { export enum HtmlTagContentType {
RAW_TEXT, RAW_TEXT,
@ -11,54 +65,72 @@ export enum HtmlTagContentType {
export class HtmlTagDefinition { export class HtmlTagDefinition {
private closedByChildren: {[key: string]: boolean} = {}; private closedByChildren: {[key: string]: boolean} = {};
public closedByParent: boolean; public closedByParent: boolean = false;
public requiredParent: string; public requiredParent: string;
public implicitNamespacePrefix: string; public implicitNamespacePrefix: string;
public contentType: HtmlTagContentType; public contentType: HtmlTagContentType;
constructor({closedByChildren, requiredParent, implicitNamespacePrefix, contentType}: { constructor({closedByChildren, requiredParent, implicitNamespacePrefix, contentType}: {
closedByChildren?: string[], closedByChildren?: string,
requiredParent?: string, requiredParent?: string,
implicitNamespacePrefix?: string, implicitNamespacePrefix?: string,
contentType?: HtmlTagContentType contentType?: HtmlTagContentType
} = {}) { } = {}) {
if (isPresent(closedByChildren)) { if (isPresent(closedByChildren) && closedByChildren.length > 0) {
closedByChildren.forEach(tagName => this.closedByChildren[tagName] = true); closedByChildren.split(',').forEach(tagName => this.closedByChildren[tagName.trim()] = true);
this.closedByParent = true;
} }
this.closedByParent = isPresent(closedByChildren) && closedByChildren.length > 0;
this.requiredParent = requiredParent; this.requiredParent = requiredParent;
this.implicitNamespacePrefix = implicitNamespacePrefix; this.implicitNamespacePrefix = implicitNamespacePrefix;
this.contentType = isPresent(contentType) ? contentType : HtmlTagContentType.PARSABLE_DATA; this.contentType = isPresent(contentType) ? contentType : HtmlTagContentType.PARSABLE_DATA;
} }
requireExtraParent(currentParent: string) { requireExtraParent(currentParent: string): boolean {
return isPresent(this.requiredParent) && return isPresent(this.requiredParent) &&
(isBlank(currentParent) || this.requiredParent != currentParent.toLocaleLowerCase()); (isBlank(currentParent) || this.requiredParent != currentParent.toLowerCase());
} }
isClosedByChild(name: string) { isClosedByChild(name: string): boolean {
return normalizeBool(this.closedByChildren['*']) || return normalizeBool(this.closedByChildren['*']) ||
normalizeBool(this.closedByChildren[name.toLowerCase()]); normalizeBool(this.closedByChildren[name.toLowerCase()]);
} }
} }
// TODO: Fill this table using // see http://www.w3.org/TR/html51/syntax.html#optional-tags
// https://github.com/greim/html-tokenizer/blob/master/parser.js // This implementation does not fully conform to the HTML5 spec.
// and http://www.w3.org/TR/html51/syntax.html#optional-tags
var TAG_DEFINITIONS: {[key: string]: HtmlTagDefinition} = { var TAG_DEFINITIONS: {[key: string]: HtmlTagDefinition} = {
'link': new HtmlTagDefinition({closedByChildren: ['*']}), 'link': new HtmlTagDefinition({closedByChildren: '*'}),
'ng-content': new HtmlTagDefinition({closedByChildren: ['*']}), 'ng-content': new HtmlTagDefinition({closedByChildren: '*'}),
'img': new HtmlTagDefinition({closedByChildren: ['*']}), 'img': new HtmlTagDefinition({closedByChildren: '*'}),
'input': new HtmlTagDefinition({closedByChildren: ['*']}), 'input': new HtmlTagDefinition({closedByChildren: '*'}),
'p': new HtmlTagDefinition({closedByChildren: ['p']}), 'hr': new HtmlTagDefinition({closedByChildren: '*'}),
'tr': new HtmlTagDefinition({closedByChildren: ['tr'], requiredParent: 'tbody'}), 'br': new HtmlTagDefinition({closedByChildren: '*'}),
'col': new HtmlTagDefinition({closedByChildren: ['col'], requiredParent: 'colgroup'}), 'wbr': new HtmlTagDefinition({closedByChildren: '*'}),
'p': new HtmlTagDefinition({
closedByChildren:
'address,article,aside,blockquote,div,dl,fieldset,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,hr,main,nav,ol,p,pre,section,table,ul'
}),
'thead': new HtmlTagDefinition({closedByChildren: 'tbody,tfoot'}),
'tbody': new HtmlTagDefinition({closedByChildren: 'tbody,tfoot'}),
'tfoot': new HtmlTagDefinition({closedByChildren: 'tbody'}),
'tr': new HtmlTagDefinition({closedByChildren: 'tr', requiredParent: 'tbody'}),
'td': new HtmlTagDefinition({closedByChildren: 'td,th'}),
'th': new HtmlTagDefinition({closedByChildren: 'td,th'}),
'col': new HtmlTagDefinition({closedByChildren: 'col', requiredParent: 'colgroup'}),
'svg': new HtmlTagDefinition({implicitNamespacePrefix: 'svg'}), 'svg': new HtmlTagDefinition({implicitNamespacePrefix: 'svg'}),
'math': new HtmlTagDefinition({implicitNamespacePrefix: 'math'}), 'math': new HtmlTagDefinition({implicitNamespacePrefix: 'math'}),
'li': new HtmlTagDefinition({closedByChildren: 'li'}),
'dt': new HtmlTagDefinition({closedByChildren: 'dt,dd'}),
'dd': new HtmlTagDefinition({closedByChildren: 'dt,dd'}),
'rb': new HtmlTagDefinition({closedByChildren: 'rb,rt,rtc,rp'}),
'rt': new HtmlTagDefinition({closedByChildren: 'rb,rt,rtc,rp'}),
'rtc': new HtmlTagDefinition({closedByChildren: 'rb,rtc,rp'}),
'rp': new HtmlTagDefinition({closedByChildren: 'rb,rt,rtc,rp'}),
'optgroup': new HtmlTagDefinition({closedByChildren: 'optgroup'}),
'style': new HtmlTagDefinition({contentType: HtmlTagContentType.RAW_TEXT}), 'style': new HtmlTagDefinition({contentType: HtmlTagContentType.RAW_TEXT}),
'script': new HtmlTagDefinition({contentType: HtmlTagContentType.RAW_TEXT}), 'script': new HtmlTagDefinition({contentType: HtmlTagContentType.RAW_TEXT}),
'title': new HtmlTagDefinition({contentType: HtmlTagContentType.ESCAPABLE_RAW_TEXT}), 'title': new HtmlTagDefinition({contentType: HtmlTagContentType.ESCAPABLE_RAW_TEXT}),
'textarea': new HtmlTagDefinition({contentType: HtmlTagContentType.ESCAPABLE_RAW_TEXT}) 'textarea': new HtmlTagDefinition({contentType: HtmlTagContentType.ESCAPABLE_RAW_TEXT}),
}; };
var DEFAULT_TAG_DEFINITION = new HtmlTagDefinition(); var DEFAULT_TAG_DEFINITION = new HtmlTagDefinition();

34
modules/angular2/src/compiler/parse_util.ts
View File

@ -1,10 +1,8 @@
import {Math} from 'angular2/src/facade/math';
export class ParseLocation { export class ParseLocation {
constructor(public file: ParseSourceFile, public offset: number, public line: number, constructor(public file: ParseSourceFile, public offset: number, public line: number,
public col: number) {} public col: number) {}
toString() { return `${this.file.url}@${this.line}:${this.col}`; } toString(): string { return `${this.file.url}@${this.line}:${this.col}`; }
} }
export class ParseSourceFile { export class ParseSourceFile {
@ -16,9 +14,33 @@ export abstract class ParseError {
toString(): string { toString(): string {
var source = this.location.file.content; var source = this.location.file.content;
var ctxStart = Math.max(this.location.offset - 10, 0); var ctxStart = this.location.offset;
var ctxEnd = Math.min(this.location.offset + 10, source.length); var ctxEnd = this.location.offset;
return `${this.msg} (${source.substring(ctxStart, ctxEnd)}): ${this.location}`; var ctxLen = 0;
var ctxLines = 0;
while (ctxLen < 100 && ctxStart > 0) {
ctxStart--;
ctxLen++;
if (source[ctxStart] == "\n") {
if (++ctxLines == 3) {
break;
}
}
}
ctxLen = 0;
ctxLines = 0;
while (ctxLen < 100 && ctxEnd < source.length - 1) {
ctxEnd++;
ctxLen++;
if (source[ctxEnd] == "\n") {
if (++ctxLines == 3) {
break;
}
}
}
return `${this.msg} ("${source.substring(ctxStart, ctxEnd + 1)}"): ${this.location}`;
} }
} }

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

@ -64,7 +64,7 @@ import {dashCaseToCamelCase, camelCaseToDashCase, splitAtColon} from './util';
// Group 7 = idenitifer inside [] // Group 7 = idenitifer inside []
// Group 8 = identifier inside () // Group 8 = identifier inside ()
var BIND_NAME_REGEXP = var BIND_NAME_REGEXP =
/^(?:(?:(?:(bind-)|(var-|#)|(on-)|(bindon-))(.+))|\[\(([^\)]+)\)\]|\[([^\]]+)\]|\(([^\)]+)\))$/g; /^(?:(?:(?:(bind-)|(var-|#)|(on-)|(bindon-))(.+))|\[\(([^\)]+)\)\]|\[([^\]]+)\]|\(([^\)]+)\))$/ig;
const TEMPLATE_ELEMENT = 'template'; const TEMPLATE_ELEMENT = 'template';
const TEMPLATE_ATTR = 'template'; const TEMPLATE_ATTR = 'template';
@ -218,7 +218,7 @@ class TemplateParseVisitor implements HtmlAstVisitor {
} }
}); });
var isTemplateElement = nodeName == TEMPLATE_ELEMENT; var isTemplateElement = nodeName.toLowerCase() == TEMPLATE_ELEMENT;
var elementCssSelector = createElementCssSelector(nodeName, matchableAttrs); var elementCssSelector = createElementCssSelector(nodeName, matchableAttrs);
var directives = this._createDirectiveAsts( var directives = this._createDirectiveAsts(
element.name, this._parseDirectives(this.selectorMatcher, elementCssSelector), element.name, this._parseDirectives(this.selectorMatcher, elementCssSelector),
@ -266,7 +266,7 @@ class TemplateParseVisitor implements HtmlAstVisitor {
targetProps: BoundElementOrDirectiveProperty[], targetProps: BoundElementOrDirectiveProperty[],
targetVars: VariableAst[]): boolean { targetVars: VariableAst[]): boolean {
var templateBindingsSource = null; var templateBindingsSource = null;
if (attr.name == TEMPLATE_ATTR) { if (attr.name.toLowerCase() == TEMPLATE_ATTR) {
templateBindingsSource = attr.value; templateBindingsSource = attr.value;
} else if (attr.name.startsWith(TEMPLATE_ATTR_PREFIX)) { } else if (attr.name.startsWith(TEMPLATE_ATTR_PREFIX)) {
var key = attr.name.substring(TEMPLATE_ATTR_PREFIX.length); // remove the star var key = attr.name.substring(TEMPLATE_ATTR_PREFIX.length); // remove the star
@ -347,7 +347,7 @@ class TemplateParseVisitor implements HtmlAstVisitor {
} }
private _normalizeAttributeName(attrName: string): string { private _normalizeAttributeName(attrName: string): string {
return attrName.startsWith('data-') ? attrName.substring(5) : attrName; return attrName.toLowerCase().startsWith('data-') ? attrName.substring(5) : attrName;
} }
private _parseVariable(identifier: string, value: string, sourceSpan: ParseSourceSpan, private _parseVariable(identifier: string, value: string, sourceSpan: ParseSourceSpan,
@ -542,21 +542,25 @@ class TemplateParseVisitor implements HtmlAstVisitor {
`Can't bind to '${boundPropertyName}' since it isn't a known native property`, `Can't bind to '${boundPropertyName}' since it isn't a known native property`,
sourceSpan); sourceSpan);
} }
} else if (parts[0] == ATTRIBUTE_PREFIX) {
boundPropertyName = dashCaseToCamelCase(parts[1]);
bindingType = PropertyBindingType.Attribute;
} else if (parts[0] == CLASS_PREFIX) {
// keep original case!
boundPropertyName = parts[1];
bindingType = PropertyBindingType.Class;
} else if (parts[0] == STYLE_PREFIX) {
unit = parts.length > 2 ? parts[2] : null;
boundPropertyName = dashCaseToCamelCase(parts[1]);
bindingType = PropertyBindingType.Style;
} else { } else {
this._reportError(`Invalid property name ${name}`, sourceSpan); let lcPrefix = parts[0].toLowerCase();
bindingType = null; if (lcPrefix == ATTRIBUTE_PREFIX) {
boundPropertyName = dashCaseToCamelCase(parts[1]);
bindingType = PropertyBindingType.Attribute;
} else if (lcPrefix == CLASS_PREFIX) {
// keep original case!
boundPropertyName = parts[1];
bindingType = PropertyBindingType.Class;
} else if (lcPrefix == STYLE_PREFIX) {
unit = parts.length > 2 ? parts[2] : null;
boundPropertyName = dashCaseToCamelCase(parts[1]);
bindingType = PropertyBindingType.Style;
} else {
this._reportError(`Invalid property name ${name}`, sourceSpan);
bindingType = null;
}
} }
return new BoundElementPropertyAst(boundPropertyName, bindingType, ast, unit, sourceSpan); return new BoundElementPropertyAst(boundPropertyName, bindingType, ast, unit, sourceSpan);
} }

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

@ -17,18 +17,19 @@ export function preparseElement(ast: HtmlElementAst): PreparsedElement {
var relAttr = null; var relAttr = null;
var nonBindable = false; var nonBindable = false;
ast.attrs.forEach(attr => { ast.attrs.forEach(attr => {
if (attr.name == NG_CONTENT_SELECT_ATTR) { let attrName = attr.name.toLowerCase();
if (attrName == NG_CONTENT_SELECT_ATTR) {
selectAttr = attr.value; selectAttr = attr.value;
} else if (attr.name == LINK_STYLE_HREF_ATTR) { } else if (attrName == LINK_STYLE_HREF_ATTR) {
hrefAttr = attr.value; hrefAttr = attr.value;
} else if (attr.name == LINK_STYLE_REL_ATTR) { } else if (attrName == LINK_STYLE_REL_ATTR) {
relAttr = attr.value; relAttr = attr.value;
} else if (attr.name == NG_NON_BINDABLE_ATTR) { } else if (attrName == NG_NON_BINDABLE_ATTR) {
nonBindable = true; nonBindable = true;
} }
}); });
selectAttr = normalizeNgContentSelect(selectAttr); selectAttr = normalizeNgContentSelect(selectAttr);
var nodeName = ast.name; var nodeName = ast.name.toLowerCase();
var type = PreparsedElementType.OTHER; var type = PreparsedElementType.OTHER;
if (nodeName == NG_CONTENT_ELEMENT) { if (nodeName == NG_CONTENT_ELEMENT) {
type = PreparsedElementType.NG_CONTENT; type = PreparsedElementType.NG_CONTENT;

123
modules/angular2/src/core/render/dom/dom_renderer.ts
View File

@ -35,94 +35,8 @@ import {DefaultRenderView, DefaultRenderFragmentRef, DefaultProtoViewRef} from '
import {camelCaseToDashCase} from './util'; import {camelCaseToDashCase} from './util';
import {ViewEncapsulation} from 'angular2/src/core/metadata'; import {ViewEncapsulation} from 'angular2/src/core/metadata';
// TODO(tbosch): solve SVG properly once https://github.com/angular/angular/issues/4417 is done const NAMESPACE_URIS =
const XLINK_NAMESPACE = 'http://www.w3.org/1999/xlink'; CONST_EXPR({'xlink': 'http://www.w3.org/1999/xlink', 'svg': 'http://www.w3.org/2000/svg'});
const SVG_NAMESPACE = 'http://www.w3.org/2000/svg';
const SVG_ELEMENT_NAMES = CONST_EXPR({
'altGlyph': true,
'altGlyphDef': true,
'altGlyphItem': true,
'animate': true,
'animateColor': true,
'animateMotion': true,
'animateTransform': true,
'circle': true,
'clipPath': true,
'color-profile': true,
'cursor': true,
'defs': true,
'desc': true,
'ellipse': true,
'feBlend': true,
'feColorMatrix': true,
'feComponentTransfer': true,
'feComposite': true,
'feConvolveMatrix': true,
'feDiffuseLighting': true,
'feDisplacementMap': true,
'feDistantLight': true,
'feFlood': true,
'feFuncA': true,
'feFuncB': true,
'feFuncG': true,
'feFuncR': true,
'feGaussianBlur': true,
'feImage': true,
'feMerge': true,
'feMergeNode': true,
'feMorphology': true,
'feOffset': true,
'fePointLight': true,
'feSpecularLighting': true,
'feSpotLight': true,
'feTile': true,
'feTurbulence': true,
'filter': true,
'font': true,
'font-face': true,
'font-face-format': true,
'font-face-name': true,
'font-face-src': true,
'font-face-uri': true,
'foreignObject': true,
'g': true,
// TODO(tbosch): this needs to be disabled
// because of an internal project.
// We will fix SVG soon, so this will go away...
// 'glyph': true,
'glyphRef': true,
'hkern': true,
'image': true,
'line': true,
'linearGradient': true,
'marker': true,
'mask': true,
'metadata': true,
'missing-glyph': true,
'mpath': true,
'path': true,
'pattern': true,
'polygon': true,
'polyline': true,
'radialGradient': true,
'rect': true,
'set': true,
'stop': true,
'style': true,
'svg': true,
'switch': true,
'symbol': true,
'text': true,
'textPath': true,
'title': true,
'tref': true,
'tspan': true,
'use': true,
'view': true,
'vkern': true
});
const SVG_ATTR_NAMESPACES = CONST_EXPR({'href': XLINK_NAMESPACE, 'xlink:href': XLINK_NAMESPACE});
export abstract class DomRenderer extends Renderer implements NodeFactory<Node> { export abstract class DomRenderer extends Renderer implements NodeFactory<Node> {
abstract registerComponentTemplate(template: RenderComponentTemplate); abstract registerComponentTemplate(template: RenderComponentTemplate);
@ -364,24 +278,31 @@ export class DomRenderer_ extends DomRenderer {
wtfLeave(s); wtfLeave(s);
} }
createElement(name: string, attrNameAndValues: string[]): Node { createElement(name: string, attrNameAndValues: string[]): Node {
var isSvg = SVG_ELEMENT_NAMES[name] == true; var nsAndName = splitNamespace(name);
var el = isSvg ? DOM.createElementNS(SVG_NAMESPACE, name) : DOM.createElement(name); var el = isPresent(nsAndName[0]) ?
this._setAttributes(el, attrNameAndValues, isSvg); DOM.createElementNS(NAMESPACE_URIS[nsAndName[0]], nsAndName[1]) :
DOM.createElement(nsAndName[1]);
this._setAttributes(el, attrNameAndValues);
return el; return el;
} }
mergeElement(existing: Node, attrNameAndValues: string[]) { mergeElement(existing: Node, attrNameAndValues: string[]) {
DOM.clearNodes(existing); DOM.clearNodes(existing);
this._setAttributes(existing, attrNameAndValues, false); this._setAttributes(existing, attrNameAndValues);
} }
private _setAttributes(node: Node, attrNameAndValues: string[], isSvg: boolean) { private _setAttributes(node: Node, attrNameAndValues: string[]) {
for (var attrIdx = 0; attrIdx < attrNameAndValues.length; attrIdx += 2) { for (var attrIdx = 0; attrIdx < attrNameAndValues.length; attrIdx += 2) {
var attrNs;
var attrName = attrNameAndValues[attrIdx]; var attrName = attrNameAndValues[attrIdx];
var nsAndName = splitNamespace(attrName);
if (isPresent(nsAndName[0])) {
attrName = nsAndName[0] + ':' + nsAndName[1];
attrNs = NAMESPACE_URIS[nsAndName[0]];
}
var attrValue = attrNameAndValues[attrIdx + 1]; var attrValue = attrNameAndValues[attrIdx + 1];
var attrNs = isSvg ? SVG_ATTR_NAMESPACES[attrName] : null;
if (isPresent(attrNs)) { if (isPresent(attrNs)) {
DOM.setAttributeNS(node, XLINK_NAMESPACE, attrName, attrValue); DOM.setAttributeNS(node, attrNs, attrName, attrValue);
} else { } else {
DOM.setAttribute(node, attrName, attrValue); DOM.setAttribute(node, nsAndName[1], attrValue);
} }
} }
} }
@ -432,3 +353,13 @@ function decoratePreventDefault(eventHandler: Function): Function {
} }
}; };
} }
var NS_PREFIX_RE = /^@([^:]+):(.+)/g;
function splitNamespace(name: string): string[] {
if (name[0] != '@') {
return [null, name];
}
let match = RegExpWrapper.firstMatch(NS_PREFIX_RE, name);
return [match[1], match[2]];
}

49
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 {
import {BaseException} from '../../src/facade/exceptions'; 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 {
import {ParseSourceSpan, ParseLocation} from '../../src/compiler/parse_util'; tokenizeHtml,
HtmlToken,
HtmlTokenType,
HtmlTokenError
} from 'angular2/src/compiler/html_lexer';
import {ParseSourceSpan, ParseLocation, ParseSourceFile} from 'angular2/src/compiler/parse_util';
export function main() { export function main() {
describe('HtmlLexer', () => { describe('HtmlLexer', () => {
@ -263,6 +277,17 @@ export function main() {
]); ]);
}); });
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]
]);
});
it('should store the locations', () => { it('should store the locations', () => {
expect(tokenizeAndHumanizeSourceSpans('<t a=b>')) expect(tokenizeAndHumanizeSourceSpans('<t a=b>'))
.toEqual([ .toEqual([
@ -364,6 +389,11 @@ export function main() {
.toEqual([[HtmlTokenType.TEXT, 'a&b'], [HtmlTokenType.EOF]]); .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', () => { it('should store the locations', () => {
expect(tokenizeAndHumanizeSourceSpans('a')) expect(tokenizeAndHumanizeSourceSpans('a'))
.toEqual([[HtmlTokenType.TEXT, 'a'], [HtmlTokenType.EOF, '']]); .toEqual([[HtmlTokenType.TEXT, 'a'], [HtmlTokenType.EOF, '']]);
@ -486,6 +516,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\nE\n444\n555\n"): file://@123:456`);
});
});
}); });
} }

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

@ -9,8 +9,8 @@ import {
afterEach afterEach
} from 'angular2/testing_internal'; } from 'angular2/testing_internal';
import {HtmlTokenType} from 'angular2/src/compiler/html_lexer';
import {HtmlParser, HtmlParseTreeResult} from 'angular2/src/compiler/html_parser'; import {HtmlParser, HtmlParseTreeResult, HtmlTreeError} from 'angular2/src/compiler/html_parser';
import { import {
HtmlAst, HtmlAst,
HtmlAstVisitor, HtmlAstVisitor,
@ -19,17 +19,15 @@ import {
HtmlTextAst, HtmlTextAst,
htmlVisitAll htmlVisitAll
} from 'angular2/src/compiler/html_ast'; } 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() { export function main() {
describe('HtmlParser', () => { describe('HtmlParser', () => {
var parser: HtmlParser; var parser: HtmlParser;
beforeEach(() => { parser = new 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('parse', () => {
describe('text nodes', () => { describe('text nodes', () => {
it('should parse root level text nodes', () => { it('should parse root level text nodes', () => {
@ -38,37 +36,91 @@ export function main() {
it('should parse text nodes inside regular elements', () => { it('should parse text nodes inside regular elements', () => {
expect(humanizeDom(parser.parse('<div>a</div>', 'TestComp'))) 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', () => { it('should parse text nodes inside template elements', () => {
expect(humanizeDom(parser.parse('<template>a</template>', 'TestComp'))) 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', () => { describe('elements', () => {
it('should parse root level elements', () => { it('should parse root level elements', () => {
expect(humanizeDom(parser.parse('<div></div>', 'TestComp'))) expect(humanizeDom(parser.parse('<div></div>', 'TestComp')))
.toEqual([[HtmlElementAst, 'div']]); .toEqual([[HtmlElementAst, 'div', 0]]);
}); });
it('should parse elements inside of regular elements', () => { it('should parse elements inside of regular elements', () => {
expect(humanizeDom(parser.parse('<div><span></span></div>', 'TestComp'))) 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', () => { it('should parse elements inside of template elements', () => {
expect(humanizeDom(parser.parse('<template><span></span></template>', 'TestComp'))) 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 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', () => { 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'))) expect(humanizeDom(parser.parse('<div kEy="v" key2=v2></div>', 'TestComp')))
.toEqual([ .toEqual([
[HtmlElementAst, 'div'], [HtmlElementAst, 'div', 0],
[HtmlAttrAst, 'kEy', 'v'], [HtmlAttrAst, 'kEy', 'v'],
[HtmlAttrAst, 'key2', 'v2'], [HtmlAttrAst, 'key2', 'v2'],
]); ]);
@ -76,51 +128,135 @@ export function main() {
it('should parse attributes without values', () => { it('should parse attributes without values', () => {
expect(humanizeDom(parser.parse('<div k></div>', 'TestComp'))) 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', () => { it('should parse attributes on svg elements case sensitive', () => {
expect(humanizeDom(parser.parse('<svg viewBox="0"></svg>', 'TestComp'))) 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', () => { it('should parse attributes on template elements', () => {
expect(humanizeDom(parser.parse('<template k="v"></template>', 'TestComp'))) 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[] { function humanizeDom(parseResult: HtmlParseTreeResult): any[] {
// TODO: humanize errors as well!
if (parseResult.errors.length > 0) { 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); htmlVisitAll(humanizer, parseResult.rootNodes);
return humanizer.result; 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 { class Humanizer implements HtmlAstVisitor {
result: any[] = []; result: any[] = [];
elDepth: number = 0;
constructor(private includeSourceSpan: boolean){};
visitElement(ast: HtmlElementAst, context: any): any { 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.attrs);
htmlVisitAll(this, ast.children); htmlVisitAll(this, ast.children);
this.elDepth--;
return null; return null;
} }
visitAttr(ast: HtmlAttrAst, context: any): any { 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; return null;
} }
visitText(ast: HtmlTextAst, context: any): any { 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; 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(); var expressionUnparser = new Unparser();
// TODO(tbosch): add tests for checking that we
// keep the correct sourceSpans!
export function main() { export function main() {
describe('TemplateParser', () => { describe('TemplateParser', () => {
beforeEachProviders(() => [ beforeEachProviders(() => [
@ -76,27 +73,35 @@ export function main() {
describe('nodes without bindings', () => { describe('nodes without bindings', () => {
it('should parse text nodes', 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', () => { it('should parse elements with attributes', () => {
expect(humanizeTemplateAsts(parse('<div a=b>', []))) expect(humanizeTplAst(parse('<div a=b>', [])))
.toEqual([[ElementAst, 'div'], [AttrAst, 'a', 'b']]); .toEqual([[ElementAst, 'div'], [AttrAst, 'a', 'b']]);
}); });
}); });
it('should parse ngContent', () => { it('should parse ngContent', () => {
var parsed = parse('<ng-content select="a">', []); var parsed = parse('<ng-content select="a">', []);
expect(humanizeTemplateAsts(parsed)).toEqual([[NgContentAst]]); expect(humanizeTplAst(parsed)).toEqual([[NgContentAst]]);
}); });
it('should parse bound text nodes', () => { it('should parse bound text nodes', () => {
expect(humanizeTemplateAsts(parse('{{a}}', []))).toEqual([[BoundTextAst, '{{ a }}']]); expect(humanizeTplAst(parse('{{a}}', []))).toEqual([[BoundTextAst, '{{ a }}']]);
}); });
describe('bound properties', () => { 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', () => { it('should parse and camel case bound properties', () => {
expect(humanizeTemplateAsts(parse('<div [some-prop]="v">', []))) expect(humanizeTplAst(parse('<div [some-prop]="v">', [])))
.toEqual([ .toEqual([
[ElementAst, 'div'], [ElementAst, 'div'],
[BoundElementPropertyAst, PropertyBindingType.Property, 'someProp', 'v', null] [BoundElementPropertyAst, PropertyBindingType.Property, 'someProp', 'v', null]
@ -104,31 +109,71 @@ export function main() {
}); });
it('should normalize property names via the element schema', () => { it('should normalize property names via the element schema', () => {
expect(humanizeTemplateAsts(parse('<div [mapped-attr]="v">', []))) expect(humanizeTplAst(parse('<div [mapped-attr]="v">', [])))
.toEqual([ .toEqual([
[ElementAst, 'div'], [ElementAst, 'div'],
[BoundElementPropertyAst, PropertyBindingType.Property, 'mappedProp', 'v', null] [BoundElementPropertyAst, PropertyBindingType.Property, 'mappedProp', 'v', null]
]); ]);
}); });
it('should parse and camel case bound attributes', () => { it('should parse mixed case bound attributes', () => {
expect(humanizeTemplateAsts(parse('<div [attr.some-attr]="v">', []))) expect(humanizeTplAst(parse('<div [attr.someAttr]="v">', [])))
.toEqual([ .toEqual([
[ElementAst, 'div'], [ElementAst, 'div'],
[BoundElementPropertyAst, PropertyBindingType.Attribute, 'someAttr', 'v', null] [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', () => { 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([ .toEqual([
[ElementAst, 'div'], [ElementAst, 'div'],
[BoundElementPropertyAst, PropertyBindingType.Class, 'some-class', 'v', null] [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', () => { 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([ .toEqual([
[ElementAst, 'div'], [ElementAst, 'div'],
[BoundElementPropertyAst, PropertyBindingType.Style, 'someStyle', 'v', null] [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', () => { 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([ .toEqual([
[ElementAst, 'div'], [ElementAst, 'div'],
[BoundElementPropertyAst, PropertyBindingType.Property, 'prop', 'v', null] [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', () => { 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([ .toEqual([
[ElementAst, 'div'], [ElementAst, 'div'],
[BoundElementPropertyAst, PropertyBindingType.Property, 'prop', 'v', null] [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', () => { 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([ .toEqual([
[ElementAst, 'div'], [ElementAst, 'div'],
[BoundElementPropertyAst, PropertyBindingType.Property, 'prop', '{{ v }}', null] [BoundElementPropertyAst, PropertyBindingType.Property, 'prop', '{{ v }}', null]
@ -164,22 +214,29 @@ export function main() {
describe('events', () => { describe('events', () => {
it('should parse bound events with a target', () => { 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']]); .toEqual([[ElementAst, 'div'], [BoundEventAst, 'event', 'window', 'v']]);
}); });
it('should parse bound events via (...) and not report them as attributes', () => { 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']]); .toEqual([[ElementAst, 'div'], [BoundEventAst, 'event', null, 'v']]);
}); });
it('should camel case event names', () => { it('should parse and camel case event names', () => {
expect(humanizeTemplateAsts(parse('<div (some-event)="v">', []))) 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']]); .toEqual([[ElementAst, 'div'], [BoundEventAst, 'someEvent', null, 'v']]);
}); });
it('should parse bound events via on- and not report them as attributes', () => { 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']]); .toEqual([[ElementAst, 'div'], [BoundEventAst, 'event', null, 'v']]);
}); });
@ -190,7 +247,7 @@ export function main() {
outputs: ['e'], outputs: ['e'],
type: new CompileTypeMetadata({name: 'DirA'}) type: new CompileTypeMetadata({name: 'DirA'})
}); });
expect(humanizeTemplateAsts(parse('<template (e)="f"></template>', [dirA]))) expect(humanizeTplAst(parse('<template (e)="f"></template>', [dirA])))
.toEqual([ .toEqual([
[EmbeddedTemplateAst], [EmbeddedTemplateAst],
[BoundEventAst, 'e', null, 'f'], [BoundEventAst, 'e', null, 'f'],
@ -202,7 +259,7 @@ export function main() {
describe('bindon', () => { describe('bindon', () => {
it('should parse bound events and properties via [(...)] and not report them as attributes', 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([ .toEqual([
[ElementAst, 'div'], [ElementAst, 'div'],
[BoundElementPropertyAst, PropertyBindingType.Property, 'prop', 'v', null], [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', 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([ .toEqual([
[ElementAst, 'div'], [ElementAst, 'div'],
[BoundElementPropertyAst, PropertyBindingType.Property, 'prop', 'v', null], [BoundElementPropertyAst, PropertyBindingType.Property, 'prop', 'v', null],
@ -237,7 +300,7 @@ export function main() {
type: new CompileTypeMetadata({name: 'ZComp'}), type: new CompileTypeMetadata({name: 'ZComp'}),
template: new CompileTemplateMetadata({ngContentSelectors: []}) 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([ .toEqual([
[ElementAst, 'div'], [ElementAst, 'div'],
[AttrAst, 'a', ''], [AttrAst, 'a', ''],
@ -255,7 +318,7 @@ export function main() {
{selector: '[a=b]', type: new CompileTypeMetadata({name: 'DirA'})}); {selector: '[a=b]', type: new CompileTypeMetadata({name: 'DirA'})});
var dirB = CompileDirectiveMetadata.create( var dirB = CompileDirectiveMetadata.create(
{selector: '[b]', type: new CompileTypeMetadata({name: 'DirB'})}); {selector: '[b]', type: new CompileTypeMetadata({name: 'DirB'})});
expect(humanizeTemplateAsts(parse('<div [a]="b">', [dirA, dirB]))) expect(humanizeTplAst(parse('<div [a]="b">', [dirA, dirB])))
.toEqual([ .toEqual([
[ElementAst, 'div'], [ElementAst, 'div'],
[BoundElementPropertyAst, PropertyBindingType.Property, 'a', 'b', null], [BoundElementPropertyAst, PropertyBindingType.Property, 'a', 'b', null],
@ -269,7 +332,7 @@ export function main() {
type: new CompileTypeMetadata({name: 'DirA'}), type: new CompileTypeMetadata({name: 'DirA'}),
host: {'[a]': 'expr'} host: {'[a]': 'expr'}
}); });
expect(humanizeTemplateAsts(parse('<div></div>', [dirA]))) expect(humanizeTplAst(parse('<div></div>', [dirA])))
.toEqual([ .toEqual([
[ElementAst, 'div'], [ElementAst, 'div'],
[DirectiveAst, dirA], [DirectiveAst, dirA],
@ -283,7 +346,7 @@ export function main() {
type: new CompileTypeMetadata({name: 'DirA'}), type: new CompileTypeMetadata({name: 'DirA'}),
host: {'(a)': 'expr'} host: {'(a)': 'expr'}
}); });
expect(humanizeTemplateAsts(parse('<div></div>', [dirA]))) expect(humanizeTplAst(parse('<div></div>', [dirA])))
.toEqual( .toEqual(
[[ElementAst, 'div'], [DirectiveAst, dirA], [BoundEventAst, 'a', null, 'expr']]); [[ElementAst, 'div'], [DirectiveAst, dirA], [BoundEventAst, 'a', null, 'expr']]);
}); });
@ -291,7 +354,7 @@ export function main() {
it('should parse directive properties', () => { it('should parse directive properties', () => {
var dirA = CompileDirectiveMetadata.create( var dirA = CompileDirectiveMetadata.create(
{selector: 'div', type: new CompileTypeMetadata({name: 'DirA'}), inputs: ['aProp']}); {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([ .toEqual([
[ElementAst, 'div'], [ElementAst, 'div'],
[DirectiveAst, dirA], [DirectiveAst, dirA],
@ -302,7 +365,7 @@ export function main() {
it('should parse renamed directive properties', () => { it('should parse renamed directive properties', () => {
var dirA = CompileDirectiveMetadata.create( var dirA = CompileDirectiveMetadata.create(
{selector: 'div', type: new CompileTypeMetadata({name: 'DirA'}), inputs: ['b:a']}); {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([ .toEqual([
[ElementAst, 'div'], [ElementAst, 'div'],
[DirectiveAst, dirA], [DirectiveAst, dirA],
@ -313,7 +376,7 @@ export function main() {
it('should parse literal directive properties', () => { it('should parse literal directive properties', () => {
var dirA = CompileDirectiveMetadata.create( var dirA = CompileDirectiveMetadata.create(
{selector: 'div', type: new CompileTypeMetadata({name: 'DirA'}), inputs: ['a']}); {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([ .toEqual([
[ElementAst, 'div'], [ElementAst, 'div'],
[AttrAst, 'a', 'literal'], [AttrAst, 'a', 'literal'],
@ -325,7 +388,7 @@ export function main() {
it('should favor explicit bound properties over literal properties', () => { it('should favor explicit bound properties over literal properties', () => {
var dirA = CompileDirectiveMetadata.create( var dirA = CompileDirectiveMetadata.create(
{selector: 'div', type: new CompileTypeMetadata({name: 'DirA'}), inputs: ['a']}); {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([ .toEqual([
[ElementAst, 'div'], [ElementAst, 'div'],
[AttrAst, 'a', 'literal'], [AttrAst, 'a', 'literal'],
@ -337,7 +400,7 @@ export function main() {
it('should support optional directive properties', () => { it('should support optional directive properties', () => {
var dirA = CompileDirectiveMetadata.create( var dirA = CompileDirectiveMetadata.create(
{selector: 'div', type: new CompileTypeMetadata({name: 'DirA'}), inputs: ['a']}); {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]]); .toEqual([[ElementAst, 'div'], [DirectiveAst, dirA]]);
}); });
@ -346,29 +409,31 @@ export function main() {
describe('variables', () => { describe('variables', () => {
it('should parse variables via #... and not report them as attributes', () => { 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', '']]); .toEqual([[ElementAst, 'div'], [VariableAst, 'a', '']]);
}); });
it('should parse variables via var-... and not report them as attributes', () => { 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', '']]); .toEqual([[ElementAst, 'div'], [VariableAst, 'a', '']]);
}); });
it('should camel case variables', () => { it('should camel case variables', () => {
expect(humanizeTemplateAsts(parse('<div var-some-a>', []))) expect(humanizeTplAst(parse('<div var-some-a>', [])))
.toEqual([[ElementAst, 'div'], [VariableAst, 'someA', '']]); .toEqual([[ElementAst, 'div'], [VariableAst, 'someA', '']]);
}); });
it('should assign variables with empty value to the element', () => { 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', '']]); .toEqual([[ElementAst, 'div'], [VariableAst, 'a', '']]);
}); });
it('should assign variables to directives via exportAs', () => { it('should assign variables to directives via exportAs', () => {
var dirA = CompileDirectiveMetadata.create( var dirA = CompileDirectiveMetadata.create(
{selector: '[a]', type: new CompileTypeMetadata({name: 'DirA'}), exportAs: 'dirA'}); {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([ .toEqual([
[ElementAst, 'div'], [ElementAst, 'div'],
[AttrAst, 'a', ''], [AttrAst, 'a', ''],
@ -379,12 +444,12 @@ export function main() {
it('should report variables with values that dont match a directive as errors', () => { it('should report variables with values that dont match a directive as errors', () => {
expect(() => parse('<div #a="dirA"></div>', [])).toThrowError(`Template parse 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 #a="dirA"></div>"): TestComp@0:5`);
}); });
it('should allow variables with values that dont match a directive on embedded template elements', 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']]); .toEqual([[EmbeddedTemplateAst], [VariableAst, 'a', 'b']]);
}); });
@ -396,7 +461,7 @@ There is no directive with "exportAs" set to "dirA" (<div #a="dirA">): TestComp@
exportAs: 'dirA', exportAs: 'dirA',
template: new CompileTemplateMetadata({ngContentSelectors: []}) template: new CompileTemplateMetadata({ngContentSelectors: []})
}); });
expect(humanizeTemplateAsts(parse('<div a #a></div>', [dirA]))) expect(humanizeTplAst(parse('<div a #a></div>', [dirA])))
.toEqual([ .toEqual([
[ElementAst, 'div'], [ElementAst, 'div'],
[AttrAst, 'a', ''], [AttrAst, 'a', ''],
@ -410,19 +475,23 @@ There is no directive with "exportAs" set to "dirA" (<div #a="dirA">): TestComp@
describe('explicit templates', () => { describe('explicit templates', () => {
it('should create embedded templates for <template> elements', () => { 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]]); .toEqual([[EmbeddedTemplateAst]]);
}); });
}); });
describe('inline templates', () => { describe('inline templates', () => {
it('should wrap the element into an EmbeddedTemplateAST', () => { 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']]); .toEqual([[EmbeddedTemplateAst], [ElementAst, 'div']]);
}); });
it('should parse bound properties', () => { it('should parse bound properties', () => {
expect(humanizeTemplateAsts(parse('<div template="ngIf test">', [ngIf]))) expect(humanizeTplAst(parse('<div template="ngIf test">', [ngIf])))
.toEqual([ .toEqual([
[EmbeddedTemplateAst], [EmbeddedTemplateAst],
[DirectiveAst, ngIf], [DirectiveAst, ngIf],
@ -432,12 +501,12 @@ There is no directive with "exportAs" set to "dirA" (<div #a="dirA">): TestComp@
}); });
it('should parse variables via #...', () => { 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']]); .toEqual([[EmbeddedTemplateAst], [VariableAst, 'a', 'b'], [ElementAst, 'div']]);
}); });
it('should parse variables via var ...', () => { 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']]); .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']}); {selector: '[a=b]', type: new CompileTypeMetadata({name: 'DirA'}), inputs: ['a']});
var dirB = CompileDirectiveMetadata.create( var dirB = CompileDirectiveMetadata.create(
{selector: '[b]', type: new CompileTypeMetadata({name: 'DirB'})}); {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([ .toEqual([
[EmbeddedTemplateAst], [EmbeddedTemplateAst],
[DirectiveAst, dirA], [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'})}); {selector: '[a=b]', type: new CompileTypeMetadata({name: 'DirA'})});
var dirB = CompileDirectiveMetadata.create( var dirB = CompileDirectiveMetadata.create(
{selector: '[b]', type: new CompileTypeMetadata({name: 'DirB'})}); {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([ .toEqual([
[EmbeddedTemplateAst], [EmbeddedTemplateAst],
[VariableAst, 'a', 'b'], [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', () => { 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([ .toEqual([
[EmbeddedTemplateAst], [EmbeddedTemplateAst],
[DirectiveAst, ngIf], [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', () => { it('should work with *... and empty value', () => {
expect(humanizeTemplateAsts(parse('<div *ng-if>', [ngIf]))) expect(humanizeTplAst(parse('<div *ng-if>', [ngIf])))
.toEqual([ .toEqual([
[EmbeddedTemplateAst], [EmbeddedTemplateAst],
[DirectiveAst, ngIf], [DirectiveAst, ngIf],
@ -602,12 +671,12 @@ There is no directive with "exportAs" set to "dirA" (<div #a="dirA">): TestComp@
describe('error cases', () => { describe('error cases', () => {
it('should report invalid property names', () => { it('should report invalid property names', () => {
expect(() => parse('<div [invalid-prop]></div>', [])).toThrowError(`Template parse errors: 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 [invalid-prop]></div>"): TestComp@0:5`);
}); });
it('should report errors in expressions', () => { it('should report errors in expressions', () => {
expect(() => parse('<div [prop]="a b"></div>', [])).toThrowErrorWith(`Template parse errors: 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 [prop]="a b"></div>"): TestComp@0:5`);
}); });
it('should not throw on invalid property names if the property is used by a directive', 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: []}) template: new CompileTemplateMetadata({ngContentSelectors: []})
}); });
expect(() => parse('<div/>', [dirB, dirA])).toThrowError(`Template parse errors: 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 ("<div/>"): TestComp@0:0`);
}); });
it('should not allow components or element bindings nor dom events on explicit embedded templates', 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])) expect(() => parse('<template [a]="b" (e)="f"></template>', [dirA]))
.toThrowError(`Template parse errors: .toThrowError(`Template parse errors:
Event binding e not emitted by any directive on an embedded template in TestComp > template:nth-child(0) Event binding e not emitted by any directive on an embedded template ("<template [a]="b" (e)="f"></template>"): TestComp@0:18
Components on an embedded template: DirA in TestComp > template:nth-child(0) Components on an embedded template: DirA ("<template [a]="b" (e)="f"></template>"): TestComp@0:0
Property binding a not used by any directive on an embedded template in TestComp > template:nth-child(0)[[a]=b]`); Property binding a not used by any directive on an embedded template ("<template [a]="b" (e)="f"></template>"): TestComp@0:0`);
}); });
it('should not allow components or element bindings on inline embedded templates', () => { 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: []}) template: new CompileTemplateMetadata({ngContentSelectors: []})
}); });
expect(() => parse('<div *a="b"></div>', [dirA])).toThrowError(`Template parse errors: expect(() => parse('<div *a="b"></div>', [dirA])).toThrowError(`Template parse errors:
Components on an embedded template: DirA in <div *a="b">: TestComp@0:0 Components on an embedded template: DirA ("<div *a="b"></div>"): TestComp@0:0
Property binding a not used by any directive on an embedded template in <div *a="b">: TestComp@0:0`); Property binding a not used by any directive on an embedded template ("<div *a="b"></div>"): TestComp@0:0`);
}); });
}); });
describe('ignore elements', () => { describe('ignore elements', () => {
it('should ignore <script> 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', () => { 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">', () => { describe('<link rel="stylesheet">', () => {
it('should keep <link rel="stylesheet"> elements if they have an absolute non package: url', it('should keep <link rel="stylesheet"> elements if they have an absolute non package: url',
() => { () => {
expect(humanizeTemplateAsts( expect(
parse('<link rel="stylesheet" href="http://someurl"></link>a', []))) humanizeTplAst(parse('<link rel="stylesheet" href="http://someurl"></link>a', [])))
.toEqual([ .toEqual([
[ElementAst, 'link'], [ElementAst, 'link'],
[AttrAst, 'href', 'http://someurl'],
[AttrAst, 'rel', 'stylesheet'], [AttrAst, 'rel', 'stylesheet'],
[AttrAst, 'href', 'http://someurl'],
[TextAst, 'a'] [TextAst, 'a']
]); ]);
}); });
it('should keep <link rel="stylesheet"> elements if they have no uri', () => { 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']]); .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', () => { it('should ignore <link rel="stylesheet"> elements if they have a relative uri', () => {
expect( expect(humanizeTplAst(parse('<link rel="stylesheet" href="./other.css"></link>a', [])))
humanizeTemplateAsts(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']]); .toEqual([[TextAst, 'a']]);
}); });
it('should ignore <link rel="stylesheet"> elements if they have a package: uri', () => { 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', []))) parse('<link rel="stylesheet" href="package:somePackage"></link>a', [])))
.toEqual([[TextAst, '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', () => { 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}}']]); .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', () => { 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([ .toEqual([
[ElementAst, 'div'], [ElementAst, 'div'],
[AttrAst, 'ng-non-bindable', ''], [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', () => { 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']]); .toEqual([[ElementAst, 'div'], [AttrAst, 'ng-non-bindable', ''], [TextAst, 'a']]);
}); });
it('should ignore <style> elements inside of elements with ng-non-bindable', () => { 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']]); .toEqual([[ElementAst, 'div'], [AttrAst, 'ng-non-bindable', ''], [TextAst, 'a']]);
}); });
it('should ignore <link rel="stylesheet"> elements inside of elements with ng-non-bindable', 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>', []))) parse('<div ng-non-bindable><link rel="stylesheet"></link>a</div>', [])))
.toEqual([[ElementAst, 'div'], [AttrAst, 'ng-non-bindable', ''], [TextAst, 'a']]); .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', it('should convert <ng-content> elements into regular elements inside of elements with ng-non-bindable',
() => { () => {
expect(humanizeTemplateAsts( expect(
parse('<div ng-non-bindable><ng-content></ng-content>a</div>', []))) humanizeTplAst(parse('<div ng-non-bindable><ng-content></ng-content>a</div>', [])))
.toEqual([ .toEqual([
[ElementAst, 'div'], [ElementAst, 'div'],
[AttrAst, 'ng-non-bindable', ''], [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[] { function humanizeTplAst(templateAsts: TemplateAst[]): any[] {
var humanizer = new TemplateHumanizer(); var humanizer = new TemplateHumanizer(false);
templateVisitAll(humanizer, templateAsts);
return humanizer.result;
}
function humanizeTplAstSourceSpans(templateAsts: TemplateAst[]): any[] {
var humanizer = new TemplateHumanizer(true);
templateVisitAll(humanizer, templateAsts); templateVisitAll(humanizer, templateAsts);
return humanizer.result; return humanizer.result;
} }
class TemplateHumanizer implements TemplateAstVisitor { class TemplateHumanizer implements TemplateAstVisitor {
result: any[] = []; result: any[] = [];
constructor(private includeSourceSpan: boolean){};
visitNgContent(ast: NgContentAst, context: any): any { visitNgContent(ast: NgContentAst, context: any): any {
this.result.push([NgContentAst]); var res = [NgContentAst];
this.result.push(this._appendContext(ast, res));
return null; return null;
} }
visitEmbeddedTemplate(ast: EmbeddedTemplateAst, context: any): any { 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.attrs);
templateVisitAll(this, ast.outputs); templateVisitAll(this, ast.outputs);
templateVisitAll(this, ast.vars); templateVisitAll(this, ast.vars);
@ -778,7 +959,8 @@ class TemplateHumanizer implements TemplateAstVisitor {
return null; return null;
} }
visitElement(ast: ElementAst, context: any): any { 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.attrs);
templateVisitAll(this, ast.inputs); templateVisitAll(this, ast.inputs);
templateVisitAll(this, ast.outputs); templateVisitAll(this, ast.outputs);
@ -788,38 +970,44 @@ class TemplateHumanizer implements TemplateAstVisitor {
return null; return null;
} }
visitVariable(ast: VariableAst, context: any): any { 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; return null;
} }
visitEvent(ast: BoundEventAst, context: any): any { visitEvent(ast: BoundEventAst, context: any): any {
this.result.push( var res = [BoundEventAst, ast.name, ast.target, expressionUnparser.unparse(ast.handler)];
[BoundEventAst, ast.name, ast.target, expressionUnparser.unparse(ast.handler)]); this.result.push(this._appendContext(ast, res));
return null; return null;
} }
visitElementProperty(ast: BoundElementPropertyAst, context: any): any { visitElementProperty(ast: BoundElementPropertyAst, context: any): any {
this.result.push([ var res = [
BoundElementPropertyAst, BoundElementPropertyAst,
ast.type, ast.type,
ast.name, ast.name,
expressionUnparser.unparse(ast.value), expressionUnparser.unparse(ast.value),
ast.unit ast.unit
]); ];
this.result.push(this._appendContext(ast, res));
return null; return null;
} }
visitAttr(ast: AttrAst, context: any): any { 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; return null;
} }
visitBoundText(ast: BoundTextAst, context: any): any { 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; return null;
} }
visitText(ast: TextAst, context: any): any { 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; return null;
} }
visitDirective(ast: DirectiveAst, context: any): any { 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.inputs);
templateVisitAll(this, ast.hostProperties); templateVisitAll(this, ast.hostProperties);
templateVisitAll(this, ast.hostEvents); templateVisitAll(this, ast.hostEvents);
@ -827,10 +1015,16 @@ class TemplateHumanizer implements TemplateAstVisitor {
return null; return null;
} }
visitDirectiveProperty(ast: BoundDirectivePropertyAst, context: any): any { visitDirectiveProperty(ast: BoundDirectivePropertyAst, context: any): any {
this.result.push( var res = [BoundDirectivePropertyAst, ast.directiveName, expressionUnparser.unparse(ast.value)];
[BoundDirectivePropertyAst, ast.directiveName, expressionUnparser.unparse(ast.value)]); this.result.push(this._appendContext(ast, res));
return null; 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 { function sourceInfo(ast: TemplateAst): string {

40
modules/angular2/test/core/linker/integration_spec.ts
View File

@ -9,7 +9,7 @@ import {
expect, expect,
iit, iit,
inject, inject,
beforeEachBindings, beforeEachProviders,
it, it,
xit, xit,
containsRegexp, containsRegexp,
@ -99,7 +99,7 @@ const ANCHOR_ELEMENT = CONST_EXPR(new OpaqueToken('AnchorElement'));
export function main() { export function main() {
describe('integration tests', function() { describe('integration tests', function() {
beforeEachBindings(() => [provide(ANCHOR_ELEMENT, {useValue: el('<div></div>')})]); beforeEachProviders(() => [provide(ANCHOR_ELEMENT, {useValue: el('<div></div>')})]);
describe('react to record changes', function() { describe('react to record changes', function() {
it('should consume text node changes', it('should consume text node changes',
@ -536,21 +536,21 @@ export function main() {
})})); })}));
it('should assign a directive to a var-', it('should assign a directive to a var-',
inject([TestComponentBuilder, AsyncTestCompleter], inject(
(tcb: TestComponentBuilder, async) => { [TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
tcb.overrideView(MyComp, new ViewMetadata({ tcb.overrideView(MyComp, new ViewMetadata({
template: '<p><div export-dir #localdir="dir"></div></p>', template: '<div><div export-dir #localdir="dir"></div></div>',
directives: [ExportDir] directives: [ExportDir]
})) }))
.createAsync(MyComp) .createAsync(MyComp)
.then((fixture) => { .then((fixture) => {
expect(fixture.debugElement.componentViewChildren[0].getLocal('localdir')) expect(fixture.debugElement.componentViewChildren[0].getLocal('localdir'))
.toBeAnInstanceOf(ExportDir); .toBeAnInstanceOf(ExportDir);
async.done(); async.done();
}); });
})); }));
it('should make the assigned component accessible in property bindings', it('should make the assigned component accessible in property bindings',
inject( inject(
@ -616,9 +616,9 @@ export function main() {
it('should assign the element instance to a user-defined variable', it('should assign the element instance to a user-defined variable',
inject([TestComponentBuilder, AsyncTestCompleter], inject([TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async) => { (tcb: TestComponentBuilder, async) => {
tcb.overrideView(MyComp, tcb.overrideView(MyComp, new ViewMetadata({
new ViewMetadata( template: '<div><div var-alice><i>Hello</i></div></div>'
{template: '<p><div var-alice><i>Hello</i></div></p>'})) }))
.createAsync(MyComp) .createAsync(MyComp)
.then((fixture) => { .then((fixture) => {
@ -1514,7 +1514,7 @@ export function main() {
PromiseWrapper.catchError(tcb.createAsync(MyComp), (e) => { PromiseWrapper.catchError(tcb.createAsync(MyComp), (e) => {
expect(e.message).toEqual( expect(e.message).toEqual(
`Template parse errors:\nCan't bind to 'unknown' since it isn't a known native property in MyComp > div:nth-child(0)[unknown={{ctxProp}}]`); `Template parse errors:\nCan't bind to 'unknown' since it isn't a known native property ("<div unknown="{{ctxProp}}"></div>"): MyComp@0:5`);
async.done(); async.done();
return null; return null;
}); });
@ -1572,7 +1572,7 @@ export function main() {
}); });
describe('logging property updates', () => { describe('logging property updates', () => {
beforeEachBindings(() => [ beforeEachProviders(() => [
provide(ChangeDetectorGenConfig, provide(ChangeDetectorGenConfig,
{useValue: new ChangeDetectorGenConfig(true, true, false)}) {useValue: new ChangeDetectorGenConfig(true, true, false)})
]); ]);

2
modules/angular2/test/core/linker/projection_integration_spec.ts
View File

@ -569,7 +569,7 @@ class Empty {
@Component({selector: 'multiple-content-tags'}) @Component({selector: 'multiple-content-tags'})
@View({ @View({
template: '(<ng-content select=".left"></ng-content>, <ng-content></ng-content>)', template: '(<ng-content SELECT=".left"></ng-content>, <ng-content></ng-content>)',
directives: [] directives: []
}) })
class MultipleContentTagsComponent { class MultipleContentTagsComponent {

2
modules/playground/src/zippy_component/zippy.html
View File

@ -1,6 +1,6 @@
<div class="zippy"> <div class="zippy">
<div (click)="toggle()" class="zippy__title"> <div (click)="toggle()" class="zippy__title">
{{ visible ? '&blacktriangledown;' : '&blacktriangleright;' }} {{title}} {{ visible ? '&#x25BE;' : '&#x25B8;' }} {{title}}
</div> </div>
<div [hidden]="!visible" class="zippy__content"> <div [hidden]="!visible" class="zippy__content">
<ng-content></ng-content> <ng-content></ng-content>