fix(48657): allow JSXElement names to be IdentifierNames (microsoft#48661)

a-tarasyuk · web-flow · commit 73c93eec5cd6 · 2022-04-13T12:32:10.000-07:00
diff --git a/src/compiler/utilities.ts b/src/compiler/utilities.ts
@@ -3112,7 +3112,10 @@ namespace ts {
                 return (parent as BindingElement | ImportSpecifier).propertyName === node;
             case SyntaxKind.ExportSpecifier:
             case SyntaxKind.JsxAttribute:
-                // Any name in an export specifier or JSX Attribute
+            case SyntaxKind.JsxSelfClosingElement:
+            case SyntaxKind.JsxOpeningElement:
+            case SyntaxKind.JsxClosingElement:
+                // Any name in an export specifier or JSX Attribute or Jsx Element
                 return true;
         }
         return false;
diff --git a/tests/baselines/reference/jsxElementsAsIdentifierNames.js b/tests/baselines/reference/jsxElementsAsIdentifierNames.js
@@ -0,0 +1,25 @@
+//// [a.tsx]
+declare const React: any;
+declare module JSX {
+    interface IntrinsicElements {
+        ["package"]: any;
+    }
+}
+
+function A() {
+    return <package />
+}
+
+function B() {
+    return <package></package>
+}
+
+
+//// [a.js]
+"use strict";
+function A() {
+    return React.createElement("package", null);
+}
+function B() {
+    return React.createElement("package", null);
+}
diff --git a/tests/baselines/reference/jsxElementsAsIdentifierNames.symbols b/tests/baselines/reference/jsxElementsAsIdentifierNames.symbols
@@ -0,0 +1,31 @@
+=== tests/cases/compiler/a.tsx ===
+declare const React: any;
+>React : Symbol(React, Decl(a.tsx, 0, 13))
+
+declare module JSX {
+>JSX : Symbol(JSX, Decl(a.tsx, 0, 25))
+
+    interface IntrinsicElements {
+>IntrinsicElements : Symbol(IntrinsicElements, Decl(a.tsx, 1, 20))
+
+        ["package"]: any;
+>["package"] : Symbol(IntrinsicElements["package"], Decl(a.tsx, 2, 33))
+>"package" : Symbol(IntrinsicElements["package"], Decl(a.tsx, 2, 33))
+    }
+}
+
+function A() {
+>A : Symbol(A, Decl(a.tsx, 5, 1))
+
+    return <package />
+>package : Symbol(JSX.IntrinsicElements["package"], Decl(a.tsx, 2, 33))
+}
+
+function B() {
+>B : Symbol(B, Decl(a.tsx, 9, 1))
+
+    return <package></package>
+>package : Symbol(JSX.IntrinsicElements["package"], Decl(a.tsx, 2, 33))
+>package : Symbol(JSX.IntrinsicElements["package"], Decl(a.tsx, 2, 33))
+}
+
diff --git a/tests/baselines/reference/jsxElementsAsIdentifierNames.types b/tests/baselines/reference/jsxElementsAsIdentifierNames.types
@@ -0,0 +1,29 @@
+=== tests/cases/compiler/a.tsx ===
+declare const React: any;
+>React : any
+
+declare module JSX {
+    interface IntrinsicElements {
+        ["package"]: any;
+>["package"] : any
+>"package" : "package"
+    }
+}
+
+function A() {
+>A : () => any
+
+    return <package />
+><package /> : error
+>package : any
+}
+
+function B() {
+>B : () => any
+
+    return <package></package>
+><package></package> : error
+>package : any
+>package : any
+}
+
diff --git a/tests/baselines/reference/jsxParsingError4(strict=true).errors.txt b/tests/baselines/reference/jsxParsingError4(strict=true).errors.txt
diff --git a/tests/baselines/reference/jsxParsingError4(strict=true).types b/tests/baselines/reference/jsxParsingError4(strict=true).types
@@ -10,22 +10,22 @@ declare namespace JSX {
 }
 
 const a = (
->a : any
->(  <public-foo></public-foo>) : any
+>a : error
+>(  <public-foo></public-foo>) : error
 
   <public-foo></public-foo>
-><public-foo></public-foo> : any
+><public-foo></public-foo> : error
 >public-foo : any
 >public-foo : any
 
 );
 
 const b = (
->b : any
->(  <public></public>) : any
+>b : error
+>(  <public></public>) : error
 
   <public></public>
-><public></public> : any
+><public></public> : error
 >public : any
 >public : any
 
diff --git a/tests/cases/compiler/jsxElementsAsIdentifierNames.tsx b/tests/cases/compiler/jsxElementsAsIdentifierNames.tsx
@@ -0,0 +1,18 @@
+// @strict: true
+// @jsx: react
+// @filename: a.tsx
+
+declare const React: any;
+declare module JSX {
+    interface IntrinsicElements {
+        ["package"]: any;
+    }
+}
+
+function A() {
+    return <package />
+}
+
+function B() {
+    return <package></package>
+}
