fix(37456): omit type arguments from JsxSelfClosingElement, JsxOpeningElement nodes (#37739)

Author: a-tarasyuk

src/compiler/binder.ts

@@ -3542,6 +3542,10 @@ namespace ts {
             case SyntaxKind.ElementAccessExpression:
                 return computeElementAccess(<ElementAccessExpression>node, subtreeFlags);
 
+            case SyntaxKind.JsxSelfClosingElement:
+            case SyntaxKind.JsxOpeningElement:
+                return computeJsxOpeningLikeElement(<JsxOpeningLikeElement>node, subtreeFlags);
+
             default:
                 return computeOther(node, kind, subtreeFlags);
         }
@@ -3591,6 +3595,15 @@ namespace ts {
         return transformFlags & ~TransformFlags.ArrayLiteralOrCallOrNewExcludes;
     }
 
+    function computeJsxOpeningLikeElement(node: JsxOpeningLikeElement, subtreeFlags: TransformFlags) {
+        let transformFlags = subtreeFlags | TransformFlags.AssertJsx;
+        if (node.typeArguments) {
+            transformFlags |= TransformFlags.AssertTypeScript;
+        }
+        node.transformFlags = transformFlags | TransformFlags.HasComputedFlags;
+        return transformFlags & ~TransformFlags.NodeExcludes;
+    }
+
     function computeBinaryExpression(node: BinaryExpression, subtreeFlags: TransformFlags) {
         let transformFlags = subtreeFlags;
         const operatorTokenKind = node.operatorToken.kind;
@@ -4124,8 +4137,6 @@ namespace ts {
                 break;
 
             case SyntaxKind.JsxElement:
-            case SyntaxKind.JsxSelfClosingElement:
-            case SyntaxKind.JsxOpeningElement:
             case SyntaxKind.JsxText:
             case SyntaxKind.JsxClosingElement:
             case SyntaxKind.JsxFragment:

src/compiler/transformers/ts.ts

@@ -540,6 +540,12 @@ namespace ts {
                     // TypeScript namespace or external module import.
                     return visitImportEqualsDeclaration(<ImportEqualsDeclaration>node);
 
+                case SyntaxKind.JsxSelfClosingElement:
+                    return visitJsxSelfClosingElement(<JsxSelfClosingElement>node);
+
+                case SyntaxKind.JsxOpeningElement:
+                    return visitJsxJsxOpeningElement(<JsxOpeningElement>node);
+
                 default:
                     // node contains some other TypeScript syntax
                     return visitEachChild(node, visitor, context);
@@ -2271,6 +2277,22 @@ namespace ts {
                 visitNode(node.template, visitor, isExpression));
         }
 
+        function visitJsxSelfClosingElement(node: JsxSelfClosingElement) {
+            return updateJsxSelfClosingElement(
+                node,
+                visitNode(node.tagName, visitor, isJsxTagNameExpression),
+                /*typeArguments*/ undefined,
+                visitNode(node.attributes, visitor, isJsxAttributes));
+        }
+
+        function visitJsxJsxOpeningElement(node: JsxOpeningElement) {
+            return updateJsxOpeningElement(
+                node,
+                visitNode(node.tagName, visitor, isJsxTagNameExpression),
+                /*typeArguments*/ undefined,
+                visitNode(node.attributes, visitor, isJsxAttributes));
+        }
+
         /**
          * Determines whether to emit an enum declaration.
          *

tests/baselines/reference/tsxTypeArgumentsJsxPreserveOutput.js

@@ -0,0 +1,42 @@
+//// [foo.tsx]
+import React = require('react');
+
+type TypeProps = { foo?: boolean; };
+interface InterfaceProps { foo?: boolean; }
+
+function Foo<T>() {
+    return null;
+}
+
+<>
+    <Foo<unknown> />
+    <Foo<string> />
+    <Foo<boolean> />
+    <Foo<object> />
+    <Foo<null> />
+    <Foo<any> />
+    <Foo<never> />
+    <Foo<undefined> />
+    <Foo<TypeProps> />
+    <Foo<InterfaceProps> />
+</>
+
+//// [foo.jsx]
+"use strict";
+exports.__esModule = true;
+var React = require("react");
+function Foo() {
+    return null;
+}
+<>
+    <Foo />
+    <Foo />
+    <Foo />
+    <Foo />
+    <Foo />
+    <Foo />
+    <Foo />
+    <Foo />
+    <Foo />
+    <Foo />
+</>;

tests/baselines/reference/tsxTypeArgumentsJsxPreserveOutput.symbols

@@ -0,0 +1,53 @@
+=== tests/cases/conformance/jsx/foo.tsx ===
+import React = require('react');
+>React : Symbol(React, Decl(foo.tsx, 0, 0))
+
+type TypeProps = { foo?: boolean; };
+>TypeProps : Symbol(TypeProps, Decl(foo.tsx, 0, 32))
+>foo : Symbol(foo, Decl(foo.tsx, 2, 18))
+
+interface InterfaceProps { foo?: boolean; }
+>InterfaceProps : Symbol(InterfaceProps, Decl(foo.tsx, 2, 36))
+>foo : Symbol(InterfaceProps.foo, Decl(foo.tsx, 3, 26))
+
+function Foo<T>() {
+>Foo : Symbol(Foo, Decl(foo.tsx, 3, 43))
+>T : Symbol(T, Decl(foo.tsx, 5, 13))
+
+    return null;
+}
+
+<>
+    <Foo<unknown> />
+>Foo : Symbol(Foo, Decl(foo.tsx, 3, 43))
+
+    <Foo<string> />
+>Foo : Symbol(Foo, Decl(foo.tsx, 3, 43))
+
+    <Foo<boolean> />
+>Foo : Symbol(Foo, Decl(foo.tsx, 3, 43))
+
+    <Foo<object> />
+>Foo : Symbol(Foo, Decl(foo.tsx, 3, 43))
+
+    <Foo<null> />
+>Foo : Symbol(Foo, Decl(foo.tsx, 3, 43))
+
+    <Foo<any> />
+>Foo : Symbol(Foo, Decl(foo.tsx, 3, 43))
+
+    <Foo<never> />
+>Foo : Symbol(Foo, Decl(foo.tsx, 3, 43))
+
+    <Foo<undefined> />
+>Foo : Symbol(Foo, Decl(foo.tsx, 3, 43))
+
+    <Foo<TypeProps> />
+>Foo : Symbol(Foo, Decl(foo.tsx, 3, 43))
+>TypeProps : Symbol(TypeProps, Decl(foo.tsx, 0, 32))
+
+    <Foo<InterfaceProps> />
+>Foo : Symbol(Foo, Decl(foo.tsx, 3, 43))
+>InterfaceProps : Symbol(InterfaceProps, Decl(foo.tsx, 2, 36))
+
+</>

tests/baselines/reference/tsxTypeArgumentsJsxPreserveOutput.types

@@ -0,0 +1,63 @@
+=== tests/cases/conformance/jsx/foo.tsx ===
+import React = require('react');
+>React : typeof React
+
+type TypeProps = { foo?: boolean; };
+>TypeProps : TypeProps
+>foo : boolean
+
+interface InterfaceProps { foo?: boolean; }
+>foo : boolean
+
+function Foo<T>() {
+>Foo : <T>() => any
+
+    return null;
+>null : null
+}
+
+<>
+><>    <Foo<unknown> />    <Foo<string> />    <Foo<boolean> />    <Foo<object> />    <Foo<null> />    <Foo<any> />    <Foo<never> />    <Foo<undefined> />    <Foo<TypeProps> />    <Foo<InterfaceProps> /></> : JSX.Element
+
+    <Foo<unknown> />
+><Foo<unknown> /> : JSX.Element
+>Foo : <T>() => any
+
+    <Foo<string> />
+><Foo<string> /> : JSX.Element
+>Foo : <T>() => any
+
+    <Foo<boolean> />
+><Foo<boolean> /> : JSX.Element
+>Foo : <T>() => any
+
+    <Foo<object> />
+><Foo<object> /> : JSX.Element
+>Foo : <T>() => any
+
+    <Foo<null> />
+><Foo<null> /> : JSX.Element
+>Foo : <T>() => any
+>null : null
+
+    <Foo<any> />
+><Foo<any> /> : JSX.Element
+>Foo : <T>() => any
+
+    <Foo<never> />
+><Foo<never> /> : JSX.Element
+>Foo : <T>() => any
+
+    <Foo<undefined> />
+><Foo<undefined> /> : JSX.Element
+>Foo : <T>() => any
+
+    <Foo<TypeProps> />
+><Foo<TypeProps> /> : JSX.Element
+>Foo : <T>() => any
+
+    <Foo<InterfaceProps> />
+><Foo<InterfaceProps> /> : JSX.Element
+>Foo : <T>() => any
+
+</>

tests/cases/conformance/jsx/tsxTypeArgumentsJsxPreserveOutput.tsx

@@ -0,0 +1,27 @@
+// @filename: foo.tsx
+// @jsx: preserve
+// @noLib: true
+// @skipLibCheck: true
+// @libFiles: react.d.ts,lib.d.ts
+
+import React = require('react');
+
+type TypeProps = { foo?: boolean; };
+interface InterfaceProps { foo?: boolean; }
+
+function Foo<T>() {
+    return null;
+}
+
+<>
+    <Foo<unknown> />
+    <Foo<string> />
+    <Foo<boolean> />
+    <Foo<object> />
+    <Foo<null> />
+    <Foo<any> />
+    <Foo<never> />
+    <Foo<undefined> />
+    <Foo<TypeProps> />
+    <Foo<InterfaceProps> />
+</>