Support JSX fragments with jsxFragFactory compiler option and @jsxFrag pragma

src/compiler/checker.ts

@@ -22400,10 +22400,14 @@ namespace ts {
         function checkJsxFragment(node: JsxFragment): Type {
             checkJsxOpeningLikeElementOrOpeningFragment(node.openingFragment);
 
-            if (compilerOptions.jsx === JsxEmit.React && (compilerOptions.jsxFactory || getSourceFileOfNode(node).pragmas.has("jsx"))) {
+            // by default, jsx: react will emit with React.createElement and React.Fragment
+            // if a custom jsxFactory is used, ensure jsxFragFactory or jsxFrag pragma is defined too
+            const nodeSourceFile = getSourceFileOfNode(node);
+            if (compilerOptions.jsx === JsxEmit.React && (compilerOptions.jsxFactory || nodeSourceFile.pragmas.has("jsx"))
+                && !compilerOptions.jsxFragFactory && !nodeSourceFile.pragmas.has("jsxFrag")) {
                 error(node, compilerOptions.jsxFactory
-                    ? Diagnostics.JSX_fragment_is_not_supported_when_using_jsxFactory
-                    : Diagnostics.JSX_fragment_is_not_supported_when_using_an_inline_JSX_factory_pragma);
+                    ? Diagnostics.JSX_fragment_needs_corresponding_jsxFragFactory_compiler_option_when_using_jsxFactory_compiler_option
+                    : Diagnostics.JSX_fragment_needs_corresponding_jsxFrag_prama_when_using_jsx_pragma);
             }
 
             checkJsxChildren(node);
@@ -34951,6 +34955,26 @@ namespace ts {
                     return !!(symbol && getCheckFlags(symbol) & CheckFlags.Late);
                 },
                 getJsxFactoryEntity: location => location ? (getJsxNamespace(location), (getSourceFileOfNode(location).localJsxFactory || _jsxFactoryEntity)) : _jsxFactoryEntity,
+                getJsxFragFactoryEntity: (location): EntityName | undefined => {
+                    if (location) {
+                        const file = getSourceFileOfNode(location);
+                        if (file) {
+                            if (file.localJsxFragFactory) {
+                                return file.localJsxFragFactory;
+                            }
+                            const jsxFragPragmas = file.pragmas.get("jsxFrag");
+                            const jsxFragPragma = Array.isArray(jsxFragPragmas) ? jsxFragPragmas[0] : jsxFragPragmas;
+                            if (jsxFragPragma) {
+                                file.localJsxFragFactory = parseIsolatedEntityName(jsxFragPragma.arguments.factory, languageVersion);
+                                return file.localJsxFragFactory;
+                            }
+                        }
+                    }
+
+                    if (compilerOptions.jsxFragFactory) {
+                        return parseIsolatedEntityName(compilerOptions.jsxFragFactory, languageVersion);
+                    }
+                },
                 getAllAccessorDeclarations(accessor: AccessorDeclaration): AllAccessorDeclarations {
                     accessor = getParseTreeNode(accessor, isGetOrSetAccessorDeclaration)!; // TODO: GH#18217
                     const otherKind = accessor.kind === SyntaxKind.SetAccessor ? SyntaxKind.GetAccessor : SyntaxKind.SetAccessor;

src/compiler/commandLineParser.ts

@@ -759,13 +759,18 @@ namespace ts {
             category: Diagnostics.Advanced_Options,
             description: Diagnostics.Specify_the_JSX_factory_function_to_use_when_targeting_react_JSX_emit_e_g_React_createElement_or_h
         },
+        {
+            name: "jsxFragFactory",
+            type: "string",
+            category: Diagnostics.Advanced_Options,
+            description: Diagnostics.Specify_the_JSX_fragment_factory_function_to_use_when_targeting_react_JSX_emit_with_jsxFactory_compiler_option_specified_e_g_Preact_Fragment
+        },
         {
             name: "resolveJsonModule",
             type: "boolean",
             category: Diagnostics.Advanced_Options,
             description: Diagnostics.Include_modules_imported_with_json_extension
         },
-
         {
             name: "out",
             type: "string",

src/compiler/diagnosticMessages.json

@@ -4847,11 +4847,11 @@
         "category": "Error",
         "code": 17015
     },
-    "JSX fragment is not supported when using --jsxFactory": {
+    "JSX fragment needs corresponding `jsxFragFactory` compiler option when using `jsxFactory` compiler option.": {
         "category": "Error",
         "code": 17016
     },
-    "JSX fragment is not supported when using an inline JSX factory pragma": {
+    "JSX fragment needs corresponding @jsxFrag prama when using @jsx pragma.": {
         "category": "Error",
         "code": 17017
     },
@@ -5505,5 +5505,13 @@
     "An optional chain cannot contain private identifiers.": {
         "category": "Error",
         "code": 18030
+    },
+    "Invalid value for 'jsxFragFactory'. '{0}' is not a valid identifier or qualified-name.": {
+        "category": "Error",
+        "code": 18031
+    },
+    "Specify the JSX fragment factory function to use when targeting 'react' JSX emit with `jsxFactory` compiler option specified, e.g. 'Preact.Fragment'.": {
+        "category": "Message",
+        "code": 18032
     }
 }

src/compiler/emitter.ts

@@ -656,6 +656,7 @@ namespace ts {
         getTypeReferenceDirectivesForSymbol: notImplemented,
         isLiteralConstDeclaration: notImplemented,
         getJsxFactoryEntity: notImplemented,
+        getJsxFragFactoryEntity: notImplemented,
         getAllAccessorDeclarations: notImplemented,
         getSymbolOfExternalModuleSpecifier: notImplemented,
         isBindingCapturedByNode: notImplemented,

src/compiler/factory.ts

@@ -135,6 +135,15 @@ namespace ts {
             );
     }
 
+    function createJsxFragFactoryExpression(jsxFragFactoryEntity: EntityName | undefined, reactNamespace: string, parent: JsxOpeningLikeElement | JsxOpeningFragment): Expression {
+        return jsxFragFactoryEntity ?
+            createJsxFactoryExpressionFromEntityName(jsxFragFactoryEntity, parent) :
+            createPropertyAccess(
+                createReactNamespace(reactNamespace, parent),
+                "Fragment"
+            );
+    }
+
     export function createExpressionForJsxElement(jsxFactoryEntity: EntityName | undefined, reactNamespace: string, tagName: Expression, props: Expression, children: readonly Expression[], parentElement: JsxOpeningLikeElement, location: TextRange): LeftHandSideExpression {
         const argumentsList = [tagName];
         if (props) {
@@ -167,14 +176,9 @@ namespace ts {
         );
     }
 
-    export function createExpressionForJsxFragment(jsxFactoryEntity: EntityName | undefined, reactNamespace: string, children: readonly Expression[], parentElement: JsxOpeningFragment, location: TextRange): LeftHandSideExpression {
-        const tagName = createPropertyAccess(
-            createReactNamespace(reactNamespace, parentElement),
-            "Fragment"
-        );
-
-        const argumentsList = [<Expression>tagName];
-        argumentsList.push(createNull());
+    export function createExpressionForJsxFragment(jsxFactoryEntity: EntityName | undefined, jsxFragFactoryEntity: EntityName | undefined, reactNamespace: string, children: readonly Expression[], parentElement: JsxOpeningFragment, location: TextRange): LeftHandSideExpression {
+        const tagName = createJsxFragFactoryExpression(jsxFragFactoryEntity, reactNamespace, parentElement);
+        const argumentsList = [<Expression>tagName, createNull()];
 
         if (children && children.length > 0) {
             if (children.length > 1) {

src/compiler/program.ts

@@ -3165,6 +3165,16 @@ namespace ts {
                     createOptionValueDiagnostic("jsxFactory", Diagnostics.Invalid_value_for_jsxFactory_0_is_not_a_valid_identifier_or_qualified_name, options.jsxFactory);
                 }
             }
+
+            if (options.jsxFragFactory) {
+                if (!options.jsxFactory) {
+                    createDiagnosticForOptionName(Diagnostics.Option_0_cannot_be_specified_without_specifying_option_1, "jsxFragFactory", "jsxFactory");
+                }
+                if (!parseIsolatedEntityName(options.jsxFragFactory, languageVersion)) {
+                    createOptionValueDiagnostic("jsxFragFactory", Diagnostics.Invalid_value_for_jsxFactory_0_is_not_a_valid_identifier_or_qualified_name, options.jsxFragFactory);
+                }
+            }
+
             else if (options.reactNamespace && !isIdentifierText(options.reactNamespace, languageVersion)) {
                 createOptionValueDiagnostic("reactNamespace", Diagnostics.Invalid_value_for_reactNamespace_0_is_not_a_valid_identifier, options.reactNamespace);
             }

src/compiler/transformers/jsx.ts

@@ -136,6 +136,7 @@ namespace ts {
         function visitJsxOpeningFragment(node: JsxOpeningFragment, children: readonly JsxChild[], isChild: boolean, location: TextRange) {
             const element = createExpressionForJsxFragment(
                 context.getEmitResolver().getJsxFactoryEntity(currentSourceFile),
+                context.getEmitResolver().getJsxFragFactoryEntity(currentSourceFile),
                 compilerOptions.reactNamespace!, // TODO: GH#18217
                 mapDefined(children, transformJsxChildToExpression),
                 node,

src/compiler/types.ts

@@ -2980,6 +2980,7 @@ namespace ts {
         /* @internal */ pragmas: ReadonlyPragmaMap;
         /* @internal */ localJsxNamespace?: __String;
         /* @internal */ localJsxFactory?: EntityName;
+        /* @internal */ localJsxFragFactory?: EntityName;
 
         /*@internal*/ exportedModulesFromDeclarationEmit?: ExportedModulesFromDeclarationEmit;
     }
@@ -3927,6 +3928,7 @@ namespace ts {
         getTypeReferenceDirectivesForSymbol(symbol: Symbol, meaning?: SymbolFlags): string[] | undefined;
         isLiteralConstDeclaration(node: VariableDeclaration | PropertyDeclaration | PropertySignature | ParameterDeclaration): boolean;
         getJsxFactoryEntity(location?: Node): EntityName | undefined;
+        getJsxFragFactoryEntity(location?: Node): EntityName | undefined;
         getAllAccessorDeclarations(declaration: AccessorDeclaration): AllAccessorDeclarations;
         getSymbolOfExternalModuleSpecifier(node: StringLiteralLike): Symbol | undefined;
         isBindingCapturedByNode(node: Node, decl: VariableDeclaration | BindingElement): boolean;
@@ -5088,6 +5090,7 @@ namespace ts {
         /* @internal */ pretty?: boolean;
         reactNamespace?: string;
         jsxFactory?: string;
+        jsxFragFactory?: string;
         composite?: boolean;
         incremental?: boolean;
         tsBuildInfoFile?: string;
@@ -6520,6 +6523,10 @@ namespace ts {
             args: [{ name: "factory" }],
             kind: PragmaKindFlags.MultiLine
         },
+        "jsxFrag": {
+            args: [{ name: "factory" }],
+            kind: PragmaKindFlags.MultiLine
+        },
     } as const;
 
     /* @internal */

src/testRunner/unittests/services/transpile.ts

@@ -363,6 +363,10 @@ var x = 0;`, {
             options: { compilerOptions: { jsxFactory: "createElement" }, fileName: "input.js", reportDiagnostics: true }
         });
 
+        transpilesCorrectly("Supports setting 'jsxFragFactory'", "x;", {
+            options: { compilerOptions: { jsxFragFactory: "x.frag" }, fileName: "input.js", reportDiagnostics: true }
+        });
+
         transpilesCorrectly("Supports setting 'removeComments'", "x;", {
             options: { compilerOptions: { removeComments: true }, fileName: "input.js", reportDiagnostics: true }
         });

tests/baselines/reference/api/tsserverlibrary.d.ts

@@ -2688,6 +2688,7 @@ declare namespace ts {
         project?: string;
         reactNamespace?: string;
         jsxFactory?: string;
+        jsxFragFactory?: string;
         composite?: boolean;
         incremental?: boolean;
         tsBuildInfoFile?: string;

tests/baselines/reference/api/typescript.d.ts

@@ -2688,6 +2688,7 @@ declare namespace ts {
         project?: string;
         reactNamespace?: string;
         jsxFactory?: string;
+        jsxFragFactory?: string;
         composite?: boolean;
         incremental?: boolean;
         tsBuildInfoFile?: string;

tests/baselines/reference/inlineJsxFactoryWithFragmentIsError.errors.txt

@@ -1,5 +1,5 @@
-tests/cases/conformance/jsx/inline/index.tsx(3,1): error TS17017: JSX fragment is not supported when using an inline JSX factory pragma
-tests/cases/conformance/jsx/inline/reacty.tsx(3,1): error TS17017: JSX fragment is not supported when using an inline JSX factory pragma
+tests/cases/conformance/jsx/inline/index.tsx(3,1): error TS17017: JSX fragment needs corresponding @jsxFrag prama when using @jsx pragma.
+tests/cases/conformance/jsx/inline/reacty.tsx(3,1): error TS17017: JSX fragment needs corresponding @jsxFrag prama when using @jsx pragma.
 
 
 ==== tests/cases/conformance/jsx/inline/renderer.d.ts (0 errors) ====
@@ -17,10 +17,10 @@ tests/cases/conformance/jsx/inline/reacty.tsx(3,1): error TS17017: JSX fragment
     import * as React from "./renderer";
     <><h></h></>
     ~~~~~~~~~~~~
-!!! error TS17017: JSX fragment is not supported when using an inline JSX factory pragma
+!!! error TS17017: JSX fragment needs corresponding @jsxFrag prama when using @jsx pragma.
 ==== tests/cases/conformance/jsx/inline/index.tsx (1 errors) ====
     /** @jsx dom */
     import { dom } from "./renderer";
     <><h></h></>
     ~~~~~~~~~~~~
-!!! error TS17017: JSX fragment is not supported when using an inline JSX factory pragma
+!!! error TS17017: JSX fragment needs corresponding @jsxFrag prama when using @jsx pragma.

tests/baselines/reference/jsxFactoryAndFragment.errors.txt

@@ -1,16 +1,16 @@
-tests/cases/compiler/jsxFactoryAndFragment.tsx(3,1): error TS17016: JSX fragment is not supported when using --jsxFactory
-tests/cases/compiler/jsxFactoryAndFragment.tsx(4,1): error TS17016: JSX fragment is not supported when using --jsxFactory
-tests/cases/compiler/jsxFactoryAndFragment.tsx(4,17): error TS17016: JSX fragment is not supported when using --jsxFactory
+tests/cases/compiler/jsxFactoryAndFragment.tsx(3,1): error TS17016: JSX fragment needs corresponding `jsxFragFactory` compiler option when using `jsxFactory` compiler option.
+tests/cases/compiler/jsxFactoryAndFragment.tsx(4,1): error TS17016: JSX fragment needs corresponding `jsxFragFactory` compiler option when using `jsxFactory` compiler option.
+tests/cases/compiler/jsxFactoryAndFragment.tsx(4,17): error TS17016: JSX fragment needs corresponding `jsxFragFactory` compiler option when using `jsxFactory` compiler option.
 
 
 ==== tests/cases/compiler/jsxFactoryAndFragment.tsx (3 errors) ====
     declare var h: any;
 
     <></>;
     ~~~~~
-!!! error TS17016: JSX fragment is not supported when using --jsxFactory
+!!! error TS17016: JSX fragment needs corresponding `jsxFragFactory` compiler option when using `jsxFactory` compiler option.
     <><span>1</span><><span>2.1</span><span>2.2</span></></>;
     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-!!! error TS17016: JSX fragment is not supported when using --jsxFactory
+!!! error TS17016: JSX fragment needs corresponding `jsxFragFactory` compiler option when using `jsxFactory` compiler option.
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-!!! error TS17016: JSX fragment is not supported when using --jsxFactory
+!!! error TS17016: JSX fragment needs corresponding `jsxFragFactory` compiler option when using `jsxFactory` compiler option.

tests/baselines/reference/showConfig/Shows tsconfig for single option/jsxFragFactory/tsconfig.json

@@ -0,0 +1,5 @@
+{
+    "compilerOptions": {
+        "jsxFragFactory": "someString"
+    }
+}

tests/baselines/reference/transpile/Supports setting jsxFragFactory.errors.txt

@@ -0,0 +1,6 @@
+error TS5052: Option 'jsxFragFactory' cannot be specified without specifying option 'jsxFactory'.
+
+
+!!! error TS5052: Option 'jsxFragFactory' cannot be specified without specifying option 'jsxFactory'.
+==== input.js (0 errors) ====
+    x;

tests/baselines/reference/transpile/Supports setting jsxFragFactory.oldTranspile.errors.txt

@@ -0,0 +1,6 @@
+error TS5052: Option 'jsxFragFactory' cannot be specified without specifying option 'jsxFactory'.
+
+
+!!! error TS5052: Option 'jsxFragFactory' cannot be specified without specifying option 'jsxFactory'.
+==== input.js (0 errors) ====
+    x;