Merge pull request microsoft#3751 from RyanCavanaugh/fix3678

Properly parse keyword-like identifiers in JSX

Author: RyanCavanaugh

src/compiler/parser.ts

@@ -1246,6 +1246,11 @@ namespace ts {
             return isIdentifier();
         }
 
+        function nextTokenIsIdentifierOrKeyword() {
+            nextToken();
+            return isIdentifierOrKeyword();
+        }
+
         function isHeritageClauseExtendsOrImplementsKeyword(): boolean {
             if (token === SyntaxKind.ImplementsKeyword ||
                 token === SyntaxKind.ExtendsKeyword) {
@@ -3172,7 +3177,7 @@ namespace ts {
                     if (sourceFile.languageVariant !== LanguageVariant.JSX) {
                         return parseTypeAssertion();
                     }
-                    if(lookAhead(nextTokenIsIdentifier)) {
+                    if(lookAhead(nextTokenIsIdentifierOrKeyword)) {
                         return parseJsxElementOrSelfClosingElement();
                     }
                     // Fall through
@@ -3390,7 +3395,7 @@ namespace ts {
 
         function parseJsxElementName(): EntityName {
             scanJsxIdentifier();
-            let elementName: EntityName = parseIdentifier();
+            let elementName: EntityName = parseIdentifierName();
             while (parseOptional(SyntaxKind.DotToken)) {
                 scanJsxIdentifier();
                 let node = <QualifiedName>createNode(SyntaxKind.QualifiedName, elementName.pos);

tests/baselines/reference/tsxAttributeResolution1.errors.txt

@@ -1,17 +1,19 @@
-tests/cases/conformance/jsx/tsxAttributeResolution1.tsx(22,8): error TS2322: Type 'string' is not assignable to type 'number'.
-tests/cases/conformance/jsx/tsxAttributeResolution1.tsx(23,8): error TS2339: Property 'y' does not exist on type 'Attribs1'.
+tests/cases/conformance/jsx/tsxAttributeResolution1.tsx(23,8): error TS2322: Type 'string' is not assignable to type 'number'.
 tests/cases/conformance/jsx/tsxAttributeResolution1.tsx(24,8): error TS2339: Property 'y' does not exist on type 'Attribs1'.
-tests/cases/conformance/jsx/tsxAttributeResolution1.tsx(25,8): error TS2322: Type 'string' is not assignable to type 'number'.
+tests/cases/conformance/jsx/tsxAttributeResolution1.tsx(25,8): error TS2339: Property 'y' does not exist on type 'Attribs1'.
+tests/cases/conformance/jsx/tsxAttributeResolution1.tsx(26,8): error TS2322: Type 'string' is not assignable to type 'number'.
+tests/cases/conformance/jsx/tsxAttributeResolution1.tsx(27,8): error TS2339: Property 'var' does not exist on type 'Attribs1'.
 tests/cases/conformance/jsx/tsxAttributeResolution1.tsx(29,1): error TS2324: Property 'reqd' is missing in type '{ reqd: string; }'.
 tests/cases/conformance/jsx/tsxAttributeResolution1.tsx(30,8): error TS2322: Type 'number' is not assignable to type 'string'.
 
 
-==== tests/cases/conformance/jsx/tsxAttributeResolution1.tsx (6 errors) ====
+==== tests/cases/conformance/jsx/tsxAttributeResolution1.tsx (7 errors) ====
     declare module JSX {
     	interface Element { }
     	interface IntrinsicElements {
     		test1: Attribs1;
     		test2: { reqd: string };
+    		var: { var: string };
     	}
     }
     interface Attribs1 {
@@ -40,8 +42,9 @@ tests/cases/conformance/jsx/tsxAttributeResolution1.tsx(30,8): error TS2322: Typ
     <test1 x="32" />; // Error, "32" is not number
            ~~~~~~
 !!! error TS2322: Type 'string' is not assignable to type 'number'.
-    // TODO attribute 'var' should be parseable
-    // <test1 var="10" />; // Error, no 'var' property
+    <test1 var="10" />; // Error, no 'var' property
+           ~~~
+!!! error TS2339: Property 'var' does not exist on type 'Attribs1'.
 
     <test2 />; // Error, missing reqd
     ~~~~~~~~~
@@ -50,4 +53,6 @@ tests/cases/conformance/jsx/tsxAttributeResolution1.tsx(30,8): error TS2322: Typ
            ~~~~~~~~~
 !!! error TS2322: Type 'number' is not assignable to type 'string'.
 
+    // Should be OK
+    <var var='var' />;
 

tests/baselines/reference/tsxAttributeResolution1.js

@@ -4,6 +4,7 @@ declare module JSX {
 	interface IntrinsicElements {
 		test1: Attribs1;
 		test2: { reqd: string };
+		var: { var: string };
 	}
 }
 interface Attribs1 {
@@ -24,12 +25,13 @@ interface Attribs1 {
 <test1 y={0} />; // Error, no property "y"
 <test1 y="foo" />; // Error, no property "y"
 <test1 x="32" />; // Error, "32" is not number
-// TODO attribute 'var' should be parseable
-// <test1 var="10" />; // Error, no 'var' property
+<test1 var="10" />; // Error, no 'var' property
 
 <test2 />; // Error, missing reqd
 <test2 reqd={10} />; // Error, reqd is not string
 
+// Should be OK
+<var var='var' />;
 
 
 //// [tsxAttributeResolution1.jsx]
@@ -44,7 +46,8 @@ interface Attribs1 {
 <test1 y={0}/>; // Error, no property "y"
 <test1 y="foo"/>; // Error, no property "y"
 <test1 x="32"/>; // Error, "32" is not number
-// TODO attribute 'var' should be parseable
-// <test1 var="10" />; // Error, no 'var' property
+<test1 var="10"/>; // Error, no 'var' property
 <test2 />; // Error, missing reqd
 <test2 reqd={10}/>; // Error, reqd is not string
+// Should be OK
+<var var='var'/>;

tests/cases/conformance/jsx/tsxAttributeResolution1.tsx

@@ -5,6 +5,7 @@ declare module JSX {
 	interface IntrinsicElements {
 		test1: Attribs1;
 		test2: { reqd: string };
+		var: { var: string };
 	}
 }
 interface Attribs1 {
@@ -25,9 +26,10 @@ interface Attribs1 {
 <test1 y={0} />; // Error, no property "y"
 <test1 y="foo" />; // Error, no property "y"
 <test1 x="32" />; // Error, "32" is not number
-// TODO attribute 'var' should be parseable
-// <test1 var="10" />; // Error, no 'var' property
+<test1 var="10" />; // Error, no 'var' property
 
 <test2 />; // Error, missing reqd
 <test2 reqd={10} />; // Error, reqd is not string
 
+// Should be OK
+<var var='var' />;