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

feat(Compiler): case sensitive html parser

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

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

@ -6,7 +6,6 @@ import {
CONST_EXPR,
serializeEnum
} from 'angular2/src/facade/lang';
import {BaseException} from 'angular2/src/facade/exceptions';
import {ParseLocation, ParseError, ParseSourceFile, ParseSourceSpan} from './parse_util';
import {getHtmlTagDefinition, HtmlTagContentType, NAMED_ENTITIES} from './html_tags';
@ -50,12 +49,14 @@ export function tokenizeHtml(sourceContent: string, sourceUrl: string): HtmlToke
const $EOF = 0;
const $TAB = 9;
const $LF = 10;
const $FF = 12;
const $CR = 13;
const $SPACE = 32;
const $BANG = 33;
const $DQ = 34;
const $HASH = 35;
const $$ = 36;
const $AMPERSAND = 38;
const $SQ = 39;
@ -76,7 +77,9 @@ const $Z = 90;
const $LBRACKET = 91;
const $RBRACKET = 93;
const $a = 97;
const $f = 102;
const $z = 122;
const $x = 120;
const $NBSP = 160;
@ -86,7 +89,7 @@ function unexpectedCharacterErrorMsg(charCode: number): string {
}
function unknownEntityErrorMsg(entitySrc: string): string {
return `Unknown entity "${entitySrc}"`;
return `Unknown entity "${entitySrc}" - use the "&#<decimal>;" or "&#x<hex>;" syntax`;
}
class ControlFlowError {
@ -249,16 +252,7 @@ class _HtmlTokenizer {
private _readChar(decodeEntities: boolean): string {
if (decodeEntities && this.peek === $AMPERSAND) {
var start = this._getLocation();
this._attemptUntilChar($SEMICOLON);
this._advance();
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);
}
return this._decodeEntity();
} else {
var index = this.index;
this._advance();
@ -266,6 +260,42 @@ class _HtmlTokenizer {
}
}
private _decodeEntity(): string {
var start = this._getLocation();
this._advance();
if (this._attemptChar($HASH)) {
let isHex = this._attemptChar($x);
let numberStart = this._getLocation().offset;
this._attemptUntilFn(isDigitEntityEnd);
if (this.peek != $SEMICOLON) {
throw this._createError(unexpectedCharacterErrorMsg(this.peek), this._getLocation());
}
this._advance();
let strNum = this.input.substring(numberStart, this.index - 1);
try {
let charCode = NumberWrapper.parseInt(strNum, isHex ? 16 : 10);
return StringWrapper.fromCharCode(charCode);
} catch (e) {
let entity = this.input.substring(start.offset + 1, this.index - 1);
throw this._createError(unknownEntityErrorMsg(entity), start);
}
} else {
let startPosition = this._savePosition();
this._attemptUntilFn(isNamedEntityEnd);
if (this.peek != $SEMICOLON) {
this._restorePosition(startPosition);
return '&';
}
this._advance();
let name = this.input.substring(start.offset + 1, this.index - 1);
let char = NAMED_ENTITIES[name];
if (isBlank(char)) {
throw this._createError(unknownEntityErrorMsg(name), start);
}
return char;
}
}
private _consumeRawText(decodeEntities: boolean, firstCharOfEnd: number,
attemptEndRest: Function): HtmlToken {
var tagCloseStart;
@ -428,6 +458,15 @@ class _HtmlTokenizer {
}
this._endToken([parts.join('')]);
}
private _savePosition(): number[] { return [this.peek, this.index, this.column, this.line]; }
private _restorePosition(position: number[]): void {
this.peek = position[0];
this.index = position[1];
this.column = position[2];
this.line = position[3];
}
}
function isNotWhitespace(code: number): boolean {
@ -440,39 +479,29 @@ function isWhitespace(code: number): boolean {
function isNameEnd(code: number): boolean {
return isWhitespace(code) || code === $GT || code === $SLASH || code === $SQ || code === $DQ ||
code === $EQ
code === $EQ;
}
function isPrefixEnd(code: number): boolean {
return (code < $a || $z < code) && (code < $A || $Z < code) && (code < $0 || code > $9);
}
function isDigitEntityEnd(code: number): boolean {
return code == $SEMICOLON || code == $EOF || !isAsciiHexDigit(code);
}
function isNamedEntityEnd(code: number): boolean {
return code == $SEMICOLON || code == $EOF || !isAsciiLetter(code);
}
function isTextEnd(code: number): boolean {
return code === $LT || code === $EOF;
}
function decodeEntity(entity: string): string {
var i = 0;
var isNumber = entity.length > i && entity[i] == '#';
if (isNumber) i++;
var isHex = entity.length > i && entity[i] == 'x';
if (isHex) i++;
var value = entity.substring(i);
var result = null;
if (isNumber) {
var charCode;
try {
charCode = NumberWrapper.parseInt(value, isHex ? 16 : 10);
} catch (e) {
return null;
}
result = StringWrapper.fromCharCode(charCode);
} else {
result = NAMED_ENTITIES[value];
}
if (isPresent(result)) {
return result;
} else {
return null;
}
function isAsciiLetter(code: number): boolean {
return code >= $a && code <= $z;
}
function isAsciiHexDigit(code: number): boolean {
return code >= $a && code <= $f || code >= $0 && code <= $9;
}

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

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

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

@ -1,7 +1,61 @@
import {isPresent, isBlank, normalizeBool, CONST_EXPR} from 'angular2/src/facade/lang';
// TODO: fill this!
export const NAMED_ENTITIES: {[key: string]: string} = <any>CONST_EXPR({'amp': '&'});
// see http://www.w3.org/TR/html51/syntax.html#named-character-references
// 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 {
RAW_TEXT,
@ -11,54 +65,77 @@ export enum HtmlTagContentType {
export class HtmlTagDefinition {
private closedByChildren: {[key: string]: boolean} = {};
public closedByParent: boolean;
public closedByParent: boolean = false;
public requiredParent: string;
public implicitNamespacePrefix: string;
public contentType: HtmlTagContentType;
constructor({closedByChildren, requiredParent, implicitNamespacePrefix, contentType}: {
closedByChildren?: string[],
constructor({closedByChildren, requiredParent, implicitNamespacePrefix, contentType,
closedByParent}: {
closedByChildren?: string,
closedByParent?: boolean,
requiredParent?: string,
implicitNamespacePrefix?: string,
contentType?: HtmlTagContentType
} = {}) {
if (isPresent(closedByChildren)) {
closedByChildren.forEach(tagName => this.closedByChildren[tagName] = true);
if (isPresent(closedByChildren) && closedByChildren.length > 0) {
closedByChildren.split(',').forEach(tagName => this.closedByChildren[tagName.trim()] = true);
}
this.closedByParent = isPresent(closedByChildren) && closedByChildren.length > 0;
this.closedByParent = normalizeBool(closedByParent);
this.requiredParent = requiredParent;
this.implicitNamespacePrefix = implicitNamespacePrefix;
this.contentType = isPresent(contentType) ? contentType : HtmlTagContentType.PARSABLE_DATA;
}
requireExtraParent(currentParent: string) {
requireExtraParent(currentParent: string): boolean {
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['*']) ||
normalizeBool(this.closedByChildren[name.toLowerCase()]);
}
}
// TODO: Fill this table using
// https://github.com/greim/html-tokenizer/blob/master/parser.js
// and http://www.w3.org/TR/html51/syntax.html#optional-tags
// see http://www.w3.org/TR/html51/syntax.html#optional-tags
// This implementation does not fully conform to the HTML5 spec.
var TAG_DEFINITIONS: {[key: string]: HtmlTagDefinition} = {
'link': new HtmlTagDefinition({closedByChildren: ['*']}),
'ng-content': new HtmlTagDefinition({closedByChildren: ['*']}),
'img': new HtmlTagDefinition({closedByChildren: ['*']}),
'input': new HtmlTagDefinition({closedByChildren: ['*']}),
'p': new HtmlTagDefinition({closedByChildren: ['p']}),
'tr': new HtmlTagDefinition({closedByChildren: ['tr'], requiredParent: 'tbody'}),
'col': new HtmlTagDefinition({closedByChildren: ['col'], requiredParent: 'colgroup'}),
'link': new HtmlTagDefinition({closedByChildren: '*', closedByParent: true}),
'ng-content': new HtmlTagDefinition({closedByChildren: '*', closedByParent: true}),
'img': new HtmlTagDefinition({closedByChildren: '*', closedByParent: true}),
'input': new HtmlTagDefinition({closedByChildren: '*', closedByParent: true}),
'hr': new HtmlTagDefinition({closedByChildren: '*', closedByParent: true}),
'br': new HtmlTagDefinition({closedByChildren: '*', closedByParent: true}),
'wbr': new HtmlTagDefinition({closedByChildren: '*', closedByParent: true}),
'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',
closedByParent: true
}),
'thead': new HtmlTagDefinition({closedByChildren: 'tbody,tfoot'}),
'tbody': new HtmlTagDefinition({closedByChildren: 'tbody,tfoot', closedByParent: true}),
'tfoot': new HtmlTagDefinition({closedByChildren: 'tbody', closedByParent: true}),
'tr': new HtmlTagDefinition(
{closedByChildren: 'tr', requiredParent: 'tbody', closedByParent: true}),
'td': new HtmlTagDefinition({closedByChildren: 'td,th', closedByParent: true}),
'th': new HtmlTagDefinition({closedByChildren: 'td,th', closedByParent: true}),
'col': new HtmlTagDefinition({closedByChildren: 'col', requiredParent: 'colgroup'}),
'svg': new HtmlTagDefinition({implicitNamespacePrefix: 'svg'}),
'math': new HtmlTagDefinition({implicitNamespacePrefix: 'math'}),
'li': new HtmlTagDefinition({closedByChildren: 'li', closedByParent: true}),
'dt': new HtmlTagDefinition({closedByChildren: 'dt,dd'}),
'dd': new HtmlTagDefinition({closedByChildren: 'dt,dd', closedByParent: true}),
'rb': new HtmlTagDefinition({closedByChildren: 'rb,rt,rtc,rp', closedByParent: true}),
'rt': new HtmlTagDefinition({closedByChildren: 'rb,rt,rtc,rp', closedByParent: true}),
'rtc': new HtmlTagDefinition({closedByChildren: 'rb,rtc,rp', closedByParent: true}),
'rp': new HtmlTagDefinition({closedByChildren: 'rb,rt,rtc,rp', closedByParent: true}),
'optgroup': new HtmlTagDefinition({closedByChildren: 'optgroup', closedByParent: true}),
'option': new HtmlTagDefinition({closedByChildren: 'option,optgroup', closedByParent: true}),
'style': new HtmlTagDefinition({contentType: HtmlTagContentType.RAW_TEXT}),
'script': new HtmlTagDefinition({contentType: HtmlTagContentType.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();

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

@ -1,10 +1,8 @@
import {Math} from 'angular2/src/facade/math';
export class ParseLocation {
constructor(public file: ParseSourceFile, public offset: number, public line: 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 {
@ -16,9 +14,40 @@ export abstract class ParseError {
toString(): string {
var source = this.location.file.content;
var ctxStart = Math.max(this.location.offset - 10, 0);
var ctxEnd = Math.min(this.location.offset + 10, source.length);
return `${this.msg} (${source.substring(ctxStart, ctxEnd)}): ${this.location}`;
var ctxStart = this.location.offset;
if (ctxStart > source.length - 1) {
ctxStart = source.length - 1;
}
var ctxEnd = ctxStart;
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;
}
}
}
let context = source.substring(ctxStart, this.location.offset) + '[ERROR ->]' +
source.substring(this.location.offset, ctxEnd + 1);
return `${this.msg} ("${context}"): ${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 8 = identifier inside ()
var BIND_NAME_REGEXP =
/^(?:(?:(?:(bind-)|(var-|#)|(on-)|(bindon-))(.+))|\[\(([^\)]+)\)\]|\[([^\]]+)\]|\(([^\)]+)\))$/g;
/^(?:(?:(?:(bind-)|(var-|#)|(on-)|(bindon-))(.+))|\[\(([^\)]+)\)\]|\[([^\]]+)\]|\(([^\)]+)\))$/ig;
const TEMPLATE_ELEMENT = '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 directives = this._createDirectiveAsts(
element.name, this._parseDirectives(this.selectorMatcher, elementCssSelector),
@ -266,7 +266,7 @@ class TemplateParseVisitor implements HtmlAstVisitor {
targetProps: BoundElementOrDirectiveProperty[],
targetVars: VariableAst[]): boolean {
var templateBindingsSource = null;
if (attr.name == TEMPLATE_ATTR) {
if (attr.name.toLowerCase() == TEMPLATE_ATTR) {
templateBindingsSource = attr.value;
} else if (attr.name.startsWith(TEMPLATE_ATTR_PREFIX)) {
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 {
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,
@ -542,21 +542,25 @@ class TemplateParseVisitor implements HtmlAstVisitor {
`Can't bind to '${boundPropertyName}' since it isn't a known native property`,
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 {
this._reportError(`Invalid property name ${name}`, sourceSpan);
bindingType = null;
let lcPrefix = parts[0].toLowerCase();
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);
}

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

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

124
modules/angular2/src/platform/dom/dom_renderer.ts
View File

@ -41,98 +41,11 @@ import {
import {camelCaseToDashCase} from './util';
import {ViewEncapsulation} from 'angular2/src/core/metadata';
// TODO move it once DomAdapter is moved
import {DOM} from 'angular2/src/core/dom/dom_adapter';
// TODO(tbosch): solve SVG properly once https://github.com/angular/angular/issues/4417 is done
const XLINK_NAMESPACE = 'http://www.w3.org/1999/xlink';
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});
const NAMESPACE_URIS =
CONST_EXPR({'xlink': 'http://www.w3.org/1999/xlink', 'svg': 'http://www.w3.org/2000/svg'});
export abstract class DomRenderer extends Renderer implements NodeFactory<Node> {
abstract registerComponentTemplate(template: RenderComponentTemplate);
@ -374,24 +287,31 @@ export class DomRenderer_ extends DomRenderer {
wtfLeave(s);
}
createElement(name: string, attrNameAndValues: string[]): Node {
var isSvg = SVG_ELEMENT_NAMES[name] == true;
var el = isSvg ? DOM.createElementNS(SVG_NAMESPACE, name) : DOM.createElement(name);
this._setAttributes(el, attrNameAndValues, isSvg);
var nsAndName = splitNamespace(name);
var el = isPresent(nsAndName[0]) ?
DOM.createElementNS(NAMESPACE_URIS[nsAndName[0]], nsAndName[1]) :
DOM.createElement(nsAndName[1]);
this._setAttributes(el, attrNameAndValues);
return el;
}
mergeElement(existing: Node, attrNameAndValues: string[]) {
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) {
var attrNs;
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 attrNs = isSvg ? SVG_ATTR_NAMESPACES[attrName] : null;
if (isPresent(attrNs)) {
DOM.setAttributeNS(node, XLINK_NAMESPACE, attrName, attrValue);
DOM.setAttributeNS(node, attrNs, attrName, attrValue);
} else {
DOM.setAttribute(node, attrName, attrValue);
DOM.setAttribute(node, nsAndName[1], attrValue);
}
}
}
@ -442,3 +362,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]];
}