angular · vicb · Dec 7, 2015 · Dec 6, 2015 · Dec 6, 2015 · Dec 5, 2015
diff --git a/modules/angular2/src/compiler/html_lexer.ts b/modules/angular2/src/compiler/html_lexer.ts
@@ -6,6 +6,7 @@ import {
   CONST_EXPR,
   serializeEnum
 } from 'angular2/src/facade/lang';
+import {ListWrapper} from 'angular2/src/facade/collection';
 import {ParseLocation, ParseError, ParseSourceFile, ParseSourceSpan} from './parse_util';
 import {getHtmlTagDefinition, HtmlTagContentType, NAMED_ENTITIES} from './html_tags';
 
@@ -161,7 +162,7 @@ class _HtmlTokenizer {
     }
     this._beginToken(HtmlTokenType.EOF);
     this._endToken([]);
-    return new HtmlTokenizeResult(this.tokens, this.errors);
+    return new HtmlTokenizeResult(mergeTextTokens(this.tokens), this.errors);
   }
 
   private _getLocation(): ParseLocation {
@@ -374,21 +375,39 @@ class _HtmlTokenizer {
   }
 
   private _consumeTagOpen(start: ParseLocation) {
-    this._attemptUntilFn(isNotWhitespace);
-    var nameStart = this.index;
-    this._consumeTagOpenStart(start);
-    var lowercaseTagName = this.inputLowercase.substring(nameStart, this.index);
-    this._attemptUntilFn(isNotWhitespace);
-    while (this.peek !== $SLASH && this.peek !== $GT) {
-      this._consumeAttributeName();
+    let savedPos = this._savePosition();
+    let lowercaseTagName;
+    try {
+      if (!isAsciiLetter(this.peek)) {
+        throw this._createError(unexpectedCharacterErrorMsg(this.peek), this._getLocation());
+      }
+      var nameStart = this.index;
+      this._consumeTagOpenStart(start);
+      lowercaseTagName = this.inputLowercase.substring(nameStart, this.index);
       this._attemptUntilFn(isNotWhitespace);
-      if (this._attemptChar($EQ)) {
+      while (this.peek !== $SLASH && this.peek !== $GT) {
+        this._consumeAttributeName();
+        this._attemptUntilFn(isNotWhitespace);
+        if (this._attemptChar($EQ)) {
+          this._attemptUntilFn(isNotWhitespace);
+          this._consumeAttributeValue();
+        }
         this._attemptUntilFn(isNotWhitespace);
-        this._consumeAttributeValue();
       }
-      this._attemptUntilFn(isNotWhitespace);
+      this._consumeTagOpenEnd();
+    } catch (e) {
+      if (e instanceof ControlFlowError) {
+        // When the start tag is invalid, assume we want a "<"
+        this._restorePosition(savedPos);
+        // Back to back text tokens are merged at the end
+        this._beginToken(HtmlTokenType.TEXT, start);
+        this._endToken(['<']);
+        return;
+      }
+
+      throw e;
     }
-    this._consumeTagOpenEnd();
+
     var contentTokenType = getHtmlTagDefinition(lowercaseTagName).contentType;
     if (contentTokenType === HtmlTagContentType.RAW_TEXT) {
       this._consumeRawTextWithTagClose(lowercaseTagName, false);
@@ -470,13 +489,20 @@ class _HtmlTokenizer {
     this._endToken([this._processCarriageReturns(parts.join(''))]);
   }
 
-  private _savePosition(): number[] { return [this.peek, this.index, this.column, this.line]; }
+  private _savePosition(): number[] {
+    return [this.peek, this.index, this.column, this.line, this.tokens.length];
+  }
 
   private _restorePosition(position: number[]): void {
     this.peek = position[0];
     this.index = position[1];
     this.column = position[2];
     this.line = position[3];
+    let nbTokens = position[4];
+    if (nbTokens < this.tokens.length) {
+      // remove any extra tokens
+      this.tokens = ListWrapper.slice(this.tokens, 0, nbTokens);
+    }
   }
 }
 
@@ -516,3 +542,21 @@ function isAsciiLetter(code: number): boolean {
 function isAsciiHexDigit(code: number): boolean {
   return code >= $a && code <= $f || code >= $0 && code <= $9;
 }
+
+function mergeTextTokens(srcTokens: HtmlToken[]): HtmlToken[] {
+  let dstTokens = [];
+  let lastDstToken: HtmlToken;
+  for (let i = 0; i < srcTokens.length; i++) {
+    let token = srcTokens[i];
+    if (isPresent(lastDstToken) && lastDstToken.type == HtmlTokenType.TEXT &&
+        token.type == HtmlTokenType.TEXT) {
+      lastDstToken.parts[0] += token.parts[0];
+      lastDstToken.sourceSpan.end = token.sourceSpan.end;
+    } else {
+      lastDstToken = token;
+      dstTokens.push(lastDstToken);
+    }
+  }
+
+  return dstTokens;
+}
diff --git a/modules/angular2/src/compiler/html_parser.ts b/modules/angular2/src/compiler/html_parser.ts
@@ -106,7 +106,18 @@ class TreeBuilder {
   }
 
   private _consumeText(token: HtmlToken) {
-    this._addToParent(new HtmlTextAst(token.parts[0], token.sourceSpan));
+    let text = token.parts[0];
+    if (text.length > 0 && text[0] == '\n') {
+      let parent = this._getParentElement();
+      if (isPresent(parent) && parent.children.length == 0 &&
+          getHtmlTagDefinition(parent.name).ignoreFirstLf) {
+        text = text.substring(1);
+      }
+    }
+
+    if (text.length > 0) {
+      this._addToParent(new HtmlTextAst(text, token.sourceSpan));
+    }
   }
 
   private _closeVoidElement(): void {

diff --git a/modules/angular2/src/compiler/html_tags.ts b/modules/angular2/src/compiler/html_tags.ts
@@ -279,15 +279,17 @@ export class HtmlTagDefinition {
   public implicitNamespacePrefix: string;
   public contentType: HtmlTagContentType;
   public isVoid: boolean;
+  public ignoreFirstLf: boolean;
 
   constructor({closedByChildren, requiredParents, implicitNamespacePrefix, contentType,
-               closedByParent, isVoid}: {
+               closedByParent, isVoid, ignoreFirstLf}: {
     closedByChildren?: string[],
     closedByParent?: boolean,
     requiredParents?: string[],
     implicitNamespacePrefix?: string,
     contentType?: HtmlTagContentType,
-    isVoid?: boolean
+    isVoid?: boolean,
+    ignoreFirstLf?: boolean
   } = {}) {
     if (isPresent(closedByChildren) && closedByChildren.length > 0) {
       closedByChildren.forEach(tagName => this.closedByChildren[tagName] = true);
@@ -301,11 +303,20 @@ export class HtmlTagDefinition {
     }
     this.implicitNamespacePrefix = implicitNamespacePrefix;
     this.contentType = isPresent(contentType) ? contentType : HtmlTagContentType.PARSABLE_DATA;
+    this.ignoreFirstLf = normalizeBool(ignoreFirstLf);
   }
 
   requireExtraParent(currentParent: string): boolean {
-    return isPresent(this.requiredParents) &&
-           (isBlank(currentParent) || this.requiredParents[currentParent.toLowerCase()] != true);
+    if (isBlank(this.requiredParents)) {
+      return false;
+    }
+
+    if (isBlank(currentParent)) {
+      return true;
+    }
+
+    let lcParent = currentParent.toLowerCase();
+    return this.requiredParents[lcParent] != true && lcParent != 'template';
   }
 
   isClosedByChild(name: string): boolean {
@@ -380,10 +391,13 @@ var TAG_DEFINITIONS: {[key: string]: HtmlTagDefinition} = {
   '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}),
+  'pre': new HtmlTagDefinition({ignoreFirstLf: true}),
+  'listing': new HtmlTagDefinition({ignoreFirstLf: 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, ignoreFirstLf: true}),
 };
 
 var DEFAULT_TAG_DEFINITION = new HtmlTagDefinition();

diff --git a/modules/angular2/test/compiler/html_lexer_spec.ts b/modules/angular2/test/compiler/html_lexer_spec.ts
@@ -174,8 +174,8 @@ export function main() {
             ]);
       });
 
-      it('should allow whitespace', () => {
-        expect(tokenizeAndHumanizeParts('< test >'))
+      it('should allow whitespace after the tag name', () => {
+        expect(tokenizeAndHumanizeParts('<test >'))
             .toEqual([
               [HtmlTokenType.TAG_OPEN_START, null, 'test'],
               [HtmlTokenType.TAG_OPEN_END],
@@ -192,15 +192,6 @@ export function main() {
             ]);
       });
 
-      it('should report missing name after <', () => {
-        expect(tokenizeAndHumanizeErrors('<'))
-            .toEqual([[HtmlTokenType.TAG_OPEN_START, 'Unexpected character "EOF"', '0:1']]);
-      });
-
-      it('should report missing >', () => {
-        expect(tokenizeAndHumanizeErrors('<name'))
-            .toEqual([[HtmlTokenType.TAG_OPEN_START, 'Unexpected character "EOF"', '0:5']]);
-      });
     });
 
     describe('attributes', () => {
@@ -335,20 +326,6 @@ export function main() {
             ]);
       });
 
-      it('should report missing value after =', () => {
-        expect(tokenizeAndHumanizeErrors('<name a='))
-            .toEqual([[HtmlTokenType.ATTR_VALUE, 'Unexpected character "EOF"', '0:8']]);
-      });
-
-      it('should report missing end quote for \'', () => {
-        expect(tokenizeAndHumanizeErrors('<name a=\''))
-            .toEqual([[HtmlTokenType.ATTR_VALUE, 'Unexpected character "EOF"', '0:9']]);
-      });
-
-      it('should report missing end quote for "', () => {
-        expect(tokenizeAndHumanizeErrors('<name a="'))
-            .toEqual([[HtmlTokenType.ATTR_VALUE, 'Unexpected character "EOF"', '0:9']]);
-      });
     });
 
     describe('closing tags', () => {
@@ -448,6 +425,39 @@ export function main() {
         expect(tokenizeAndHumanizeSourceSpans('a'))
             .toEqual([[HtmlTokenType.TEXT, 'a'], [HtmlTokenType.EOF, '']]);
       });
+
+      it('should allow "<" in text nodes', () => {
+        expect(tokenizeAndHumanizeParts('{{ a < b ? c : d }}'))
+            .toEqual([[HtmlTokenType.TEXT, '{{ a < b ? c : d }}'], [HtmlTokenType.EOF]]);
+
+        expect(tokenizeAndHumanizeSourceSpans('<p>a<b</p>'))
+            .toEqual([
+              [HtmlTokenType.TAG_OPEN_START, '<p'],
+              [HtmlTokenType.TAG_OPEN_END, '>'],
+              [HtmlTokenType.TEXT, 'a<b'],
+              [HtmlTokenType.TAG_CLOSE, '</p>'],
+              [HtmlTokenType.EOF, ''],
+            ]);
+
+        expect(tokenizeAndHumanizeParts('< a>'))
+            .toEqual([[HtmlTokenType.TEXT, '< a>'], [HtmlTokenType.EOF]]);
+      });
+
+      // TODO(vicb): make the lexer aware of Angular expressions
+      // see https://github.com/angular/angular/issues/5679
+      it('should parse valid start tag in interpolation', () => {
+        expect(tokenizeAndHumanizeParts('{{ a <b && c > d }}'))
+            .toEqual([
+              [HtmlTokenType.TEXT, '{{ a '],
+              [HtmlTokenType.TAG_OPEN_START, null, 'b'],
+              [HtmlTokenType.ATTR_NAME, null, '&&'],
+              [HtmlTokenType.ATTR_NAME, null, 'c'],
+              [HtmlTokenType.TAG_OPEN_END],
+              [HtmlTokenType.TEXT, ' d }}'],
+              [HtmlTokenType.EOF]
+            ]);
+      });
+
     });
 
     describe('raw text', () => {

diff --git a/modules/angular2/test/compiler/html_parser_spec.ts b/modules/angular2/test/compiler/html_parser_spec.ts
@@ -141,6 +141,14 @@ export function main() {
               ]);
         });
 
+        it('should not add the requiredParent when the parent is a template', () => {
+          expect(humanizeDom(parser.parse('<template><tr></tr></template>', 'TestComp')))
+              .toEqual([
+                [HtmlElementAst, 'template', 0],
+                [HtmlElementAst, 'tr', 1],
+              ]);
+        });
+
         it('should support explicit mamespace', () => {
           expect(humanizeDom(parser.parse('<myns:div></myns:div>', 'TestComp')))
               .toEqual([[HtmlElementAst, '@myns:div', 0]]);
@@ -170,6 +178,22 @@ export function main() {
           expect(humanizeDom(parser.parse('<math />', 'TestComp')))
               .toEqual([[HtmlElementAst, '@math:math', 0]]);
         });
+
+        it('should ignore LF immediately after textarea, pre and listing', () => {
+          expect(humanizeDom(parser.parse(
+                     '<p>\n</p><textarea>\n</textarea><pre>\n\n</pre><listing>\n\n</listing>',
+                     'TestComp')))
+              .toEqual([
+                [HtmlElementAst, 'p', 0],
+                [HtmlTextAst, '\n', 1],
+                [HtmlElementAst, 'textarea', 0],
+                [HtmlElementAst, 'pre', 0],
+                [HtmlTextAst, '\n', 1],
+                [HtmlElementAst, 'listing', 0],
+                [HtmlTextAst, '\n', 1],
+              ]);
+        });
+
       });
 
       describe('attributes', () => {