Auto-include types for the jsx import source in the new jsx transforms

src/compiler/checker.ts

@@ -25132,14 +25132,42 @@ namespace ts {
             return links.resolvedSymbol;
         }
 
+        function getJsxNamespaceContainerForImplicitImport(location: Node | undefined): Symbol | undefined {
+            const file = location && getSourceFileOfNode(location);
+            const links = file && getNodeLinks(file);
+            if (links && links.jsxImplicitImportContainer === false) {
+                return undefined;
+            }
+            if (links && links.jsxImplicitImportContainer) {
+                return links.jsxImplicitImportContainer;
+            }
+            const runtimeImportSpecifier = getJSXRuntimeImport(getJSXImplicitImportBase(compilerOptions, file), compilerOptions);
+            if (!runtimeImportSpecifier) {
+                return undefined;
+            }
+            const isClassic = getEmitModuleResolutionKind(compilerOptions) === ModuleResolutionKind.Classic;
+            const errorMessage = isClassic
+                                    ? Diagnostics.Cannot_find_module_0_Did_you_mean_to_set_the_moduleResolution_option_to_node_or_to_add_aliases_to_the_paths_option
+                                    : Diagnostics.Cannot_find_module_0_or_its_corresponding_type_declarations;
+            const mod = resolveExternalModule(location!, runtimeImportSpecifier, errorMessage, location!);
+            const result = mod && mod !== unknownSymbol ? getMergedSymbol(resolveSymbol(mod)) : undefined;
+            if (links) {
+                links.jsxImplicitImportContainer = result || false;
+            }
+            return result;
+        }
+
         function getJsxNamespaceAt(location: Node | undefined): Symbol {
             const links = location && getNodeLinks(location);
             if (links && links.jsxNamespace) {
                 return links.jsxNamespace;
             }
             if (!links || links.jsxNamespace !== false) {
                 const namespaceName = getJsxNamespace(location);
-                const resolvedNamespace = resolveName(location, namespaceName, SymbolFlags.Namespace, /*diagnosticMessage*/ undefined, namespaceName, /*isUse*/ false);
+                let resolvedNamespace = resolveName(location, namespaceName, SymbolFlags.Namespace, /*diagnosticMessage*/ undefined, namespaceName, /*isUse*/ false);
+                if (!resolvedNamespace || resolvedNamespace === unknownSymbol) {
+                    resolvedNamespace = getJsxNamespaceContainerForImplicitImport(location);
+                }
                 if (resolvedNamespace) {
                     const candidate = resolveSymbol(getSymbol(getExportsOfSymbol(resolveSymbol(resolvedNamespace)), JsxNames.JSX, SymbolFlags.Namespace));
                     if (candidate && candidate !== unknownSymbol) {
@@ -25148,9 +25176,9 @@ namespace ts {
                         }
                         return candidate;
                     }
-                    if (links) {
-                        links.jsxNamespace = false;
-                    }
+                }
+                if (links) {
+                    links.jsxNamespace = false;
                 }
             }
             // JSX global fallback

src/compiler/moduleNameResolver.ts

@@ -402,8 +402,10 @@ namespace ts {
      */
     export function getAutomaticTypeDirectiveNames(options: CompilerOptions, host: ModuleResolutionHost): string[] {
         // Use explicit type list from tsconfig.json
+        // jsxImportSource, if present and in use, creates implicit imports
+        const implicitImport = getJSXRuntimeImport(getJSXImplicitImportBase(options), options);
         if (options.types) {
-            return options.types;
+            return [...options.types, ...(implicitImport ? [implicitImport] : [])];
         }
 
         // Walk the primary type lookup locations
@@ -434,6 +436,9 @@ namespace ts {
                 }
             }
         }
+        if (implicitImport) {
+            result.push(implicitImport);
+        }
         return result;
     }
 

src/compiler/program.ts

@@ -1494,7 +1494,7 @@ namespace ts {
             }
             // try to verify results of module resolution
             for (const { oldFile: oldSourceFile, newFile: newSourceFile } of modifiedSourceFiles) {
-                const moduleNames = getModuleNames(newSourceFile);
+                const moduleNames = getModuleNames(newSourceFile, options);
                 const resolutions = resolveModuleNamesReusingOldState(moduleNames, newSourceFile);
                 // ensure that module resolution results are still correct
                 const resolutionsChanged = hasChangesInResolutions(moduleNames, resolutions, oldSourceFile.resolvedModules, moduleResolutionIsEqualTo);
@@ -2840,11 +2840,16 @@ namespace ts {
                 if (resolvedTypeReferenceDirective.isExternalLibraryImport) currentNodeModulesDepth--;
             }
             else {
-                fileProcessingDiagnostics.add(createRefFileDiagnostic(
-                    refFile,
-                    Diagnostics.Cannot_find_type_definition_file_for_0,
-                    typeReferenceDirective
-                ));
+                // Don't issue an error when auto-inclusion lookup fails for the jsxImportSource (at this point)
+                // It may be provided by an ambient module in the compilation, instead.
+                // A usage of a JSX tag later should report that the module couldn't be resolved if it is not supplied.
+                if (refFile || typeReferenceDirective !== getJSXRuntimeImport(getJSXImplicitImportBase(options), options)) {
+                    fileProcessingDiagnostics.add(createRefFileDiagnostic(
+                        refFile,
+                        Diagnostics.Cannot_find_type_definition_file_for_0,
+                        typeReferenceDirective
+                    ));
+                }
             }
 
             if (saveResolution) {
@@ -2891,9 +2896,9 @@ namespace ts {
 
         function processImportedModules(file: SourceFile) {
             collectExternalModuleReferences(file);
-            if (file.imports.length || file.moduleAugmentations.length) {
+            if (file.imports.length || file.moduleAugmentations.length || getJSXImplicitImportBase(options, file)) {
                 // Because global augmentation doesn't have string literal name, we can check for global augmentation as such.
-                const moduleNames = getModuleNames(file);
+                const moduleNames = getModuleNames(file, options);
                 const resolutions = resolveModuleNamesReusingOldState(moduleNames, file);
                 Debug.assert(resolutions.length === moduleNames.length);
                 for (let i = 0; i < moduleNames.length; i++) {
@@ -3882,14 +3887,19 @@ namespace ts {
         }
     }
 
-    function getModuleNames({ imports, moduleAugmentations }: SourceFile): string[] {
+    function getModuleNames(file: SourceFile, options: CompilerOptions): string[] {
+        const { imports, moduleAugmentations } = file;
         const res = imports.map(i => i.text);
         for (const aug of moduleAugmentations) {
             if (aug.kind === SyntaxKind.StringLiteral) {
                 res.push(aug.text);
             }
             // Do nothing if it's an Identifier; we don't need to do module resolution for `declare global`.
         }
+        const jsxRuntimeImport = getJSXRuntimeImport(getJSXImplicitImportBase(options, file), options);
+        if (jsxRuntimeImport) {
+            res.push(jsxRuntimeImport);
+        }
         return res;
     }
 }

src/compiler/transformers/jsx.ts

@@ -42,7 +42,7 @@ namespace ts {
         function getImplicitImportForName(name: string) {
             const importSource = name === "createElement"
                 ? currentFileState.importSpecifier!
-                : `${currentFileState.importSpecifier}/${compilerOptions.jsx === JsxEmit.ReactJSXDev ? "jsx-dev-runtime" : "jsx-runtime"}`;
+                : getJSXRuntimeImport(currentFileState.importSpecifier, compilerOptions)!;
             const existing = currentFileState.utilizedImplicitRuntimeImports?.get(importSource)?.get(name);
             if (existing) {
                 return existing.name;

src/compiler/types.ts

@@ -4843,6 +4843,7 @@ namespace ts {
         resolvedJSDocType?: Type;           // Resolved type of a JSDoc type reference
         switchTypes?: Type[];               // Cached array of switch case expression types
         jsxNamespace?: Symbol | false;      // Resolved jsx namespace symbol for this node
+        jsxImplicitImportContainer?: Symbol | false; // Resolved module symbol the implicit jsx import of this file should refer to
         contextFreeType?: Type;             // Cached context-free type used by the first pass of inference; used when a function's return is partially contextually sensitive
         deferredNodes?: ESMap<NodeId, Node>; // Set of nodes whose checking has been deferred
         capturedBlockScopeBindings?: Symbol[]; // Block-scoped bindings captured beneath this part of an IterationStatement

src/compiler/utilities.ts

@@ -6009,8 +6009,8 @@ namespace ts {
         return jsx === JsxEmit.React || jsx === JsxEmit.ReactJSX || jsx === JsxEmit.ReactJSXDev;
     }
 
-    export function getJSXImplicitImportBase(compilerOptions: CompilerOptions, file: SourceFile): string | undefined {
-        const jsxImportSourcePragmas = file.pragmas.get("jsximportsource");
+    export function getJSXImplicitImportBase(compilerOptions: CompilerOptions, file?: SourceFile): string | undefined {
+        const jsxImportSourcePragmas = file?.pragmas.get("jsximportsource");
         const jsxImportSourcePragma = isArray(jsxImportSourcePragmas) ? jsxImportSourcePragmas[0] : jsxImportSourcePragmas;
         return compilerOptions.jsx === JsxEmit.ReactJSX ||
             compilerOptions.jsx === JsxEmit.ReactJSXDev ||
@@ -6020,6 +6020,10 @@ namespace ts {
                 undefined;
     }
 
+    export function getJSXRuntimeImport(base: string | undefined, options: CompilerOptions) {
+        return base ? `${base}/${options.jsx === JsxEmit.ReactJSXDev ? "jsx-dev-runtime" : "jsx-runtime"}` : undefined;
+    }
+
     export function hasZeroOrOneAsteriskCharacter(str: string): boolean {
         let seenAsterisk = false;
         for (let i = 0; i < str.length; i++) {

tests/baselines/reference/jsxJsxsCjsTransformCustomImport(jsx=react-jsx).errors.txt

@@ -0,0 +1,14 @@
+tests/cases/conformance/jsx/jsxs/jsxJsxsCjsTransformCustomImport.tsx(2,11): error TS2307: Cannot find module 'preact/jsx-runtime' or its corresponding type declarations.
+
+
+==== tests/cases/conformance/jsx/jsxs/jsxJsxsCjsTransformCustomImport.tsx (1 errors) ====
+    /// <reference path="/.lib/react16.d.ts" />
+    const a = <>
+              ~~
+!!! error TS2307: Cannot find module 'preact/jsx-runtime' or its corresponding type declarations.
+      <p></p>
+      text
+      <div className="foo"></div>
+    </>
+
+    export {};

tests/baselines/reference/jsxJsxsCjsTransformCustomImport(jsx=react-jsxdev).errors.txt

@@ -0,0 +1,14 @@
+tests/cases/conformance/jsx/jsxs/jsxJsxsCjsTransformCustomImport.tsx(2,11): error TS2307: Cannot find module 'preact/jsx-dev-runtime' or its corresponding type declarations.
+
+
+==== tests/cases/conformance/jsx/jsxs/jsxJsxsCjsTransformCustomImport.tsx (1 errors) ====
+    /// <reference path="/.lib/react16.d.ts" />
+    const a = <>
+              ~~
+!!! error TS2307: Cannot find module 'preact/jsx-dev-runtime' or its corresponding type declarations.
+      <p></p>
+      text
+      <div className="foo"></div>
+    </>
+
+    export {};

tests/baselines/reference/jsxJsxsCjsTransformCustomImportPragma(jsx=react-jsx).errors.txt

@@ -0,0 +1,26 @@
+tests/cases/conformance/jsx/jsxs/preact.tsx(3,11): error TS2307: Cannot find module 'preact/jsx-runtime' or its corresponding type declarations.
+
+
+==== tests/cases/conformance/jsx/jsxs/react.tsx (0 errors) ====
+    /// <reference path="/.lib/react16.d.ts" />
+    /* @jsxImportSource react */
+    import "./preact";
+    const a = <>
+      <p></p>
+      text
+      <div className="foo"></div>
+    </>
+
+    export {};
+==== tests/cases/conformance/jsx/jsxs/preact.tsx (1 errors) ====
+    /// <reference path="/.lib/react16.d.ts" />
+    /* @jsxImportSource preact */
+    const a = <>
+              ~~
+!!! error TS2307: Cannot find module 'preact/jsx-runtime' or its corresponding type declarations.
+      <p></p>
+      text
+      <div className="foo"></div>
+    </>
+
+    export {};

tests/baselines/reference/jsxJsxsCjsTransformCustomImportPragma(jsx=react-jsxdev).errors.txt

@@ -0,0 +1,26 @@
+tests/cases/conformance/jsx/jsxs/preact.tsx(3,11): error TS2307: Cannot find module 'preact/jsx-dev-runtime' or its corresponding type declarations.
+
+
+==== tests/cases/conformance/jsx/jsxs/react.tsx (0 errors) ====
+    /// <reference path="/.lib/react16.d.ts" />
+    /* @jsxImportSource react */
+    import "./preact";
+    const a = <>
+      <p></p>
+      text
+      <div className="foo"></div>
+    </>
+
+    export {};
+==== tests/cases/conformance/jsx/jsxs/preact.tsx (1 errors) ====
+    /// <reference path="/.lib/react16.d.ts" />
+    /* @jsxImportSource preact */
+    const a = <>
+              ~~
+!!! error TS2307: Cannot find module 'preact/jsx-dev-runtime' or its corresponding type declarations.
+      <p></p>
+      text
+      <div className="foo"></div>
+    </>
+
+    export {};

tests/baselines/reference/jsxJsxsCjsTransformKeyPropCustomImport(jsx=react-jsx).errors.txt

@@ -0,0 +1,13 @@
+tests/cases/conformance/jsx/jsxs/jsxJsxsCjsTransformKeyPropCustomImport.tsx(3,11): error TS2307: Cannot find module 'preact/jsx-runtime' or its corresponding type declarations.
+
+
+==== tests/cases/conformance/jsx/jsxs/jsxJsxsCjsTransformKeyPropCustomImport.tsx (1 errors) ====
+    /// <reference path="/.lib/react16.d.ts" />
+    const props = { answer: 42 }
+    const a = <div key="foo" {...props}>text</div>;
+              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+!!! error TS2307: Cannot find module 'preact/jsx-runtime' or its corresponding type declarations.
+    const b = <div {...props} key="bar">text</div>;
+
+    export {};
+

tests/baselines/reference/jsxJsxsCjsTransformKeyPropCustomImport(jsx=react-jsxdev).errors.txt

@@ -0,0 +1,13 @@
+tests/cases/conformance/jsx/jsxs/jsxJsxsCjsTransformKeyPropCustomImport.tsx(3,11): error TS2307: Cannot find module 'preact/jsx-dev-runtime' or its corresponding type declarations.
+
+
+==== tests/cases/conformance/jsx/jsxs/jsxJsxsCjsTransformKeyPropCustomImport.tsx (1 errors) ====
+    /// <reference path="/.lib/react16.d.ts" />
+    const props = { answer: 42 }
+    const a = <div key="foo" {...props}>text</div>;
+              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+!!! error TS2307: Cannot find module 'preact/jsx-dev-runtime' or its corresponding type declarations.
+    const b = <div {...props} key="bar">text</div>;
+
+    export {};
+

tests/baselines/reference/jsxJsxsCjsTransformKeyPropCustomImportPragma(jsx=react-jsx).errors.txt

@@ -0,0 +1,24 @@
+tests/cases/conformance/jsx/jsxs/preact.tsx(4,11): error TS2307: Cannot find module 'preact/jsx-runtime' or its corresponding type declarations.
+
+
+==== tests/cases/conformance/jsx/jsxs/react.tsx (0 errors) ====
+    /// <reference path="/.lib/react16.d.ts" />
+    /* @jsxImportSource react */
+    import "./preact";
+    const props2 = { answer: 42 }
+    const a2 = <div key="foo" {...props2}>text</div>;
+    const b2 = <div {...props2} key="bar">text</div>;
+
+    export {};
+
+==== tests/cases/conformance/jsx/jsxs/preact.tsx (1 errors) ====
+    /// <reference path="/.lib/react16.d.ts" />
+    /* @jsxImportSource preact */
+    const props = { answer: 42 }
+    const a = <div key="foo" {...props}>text</div>;
+              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+!!! error TS2307: Cannot find module 'preact/jsx-runtime' or its corresponding type declarations.
+    const b = <div {...props} key="bar">text</div>;
+
+    export {};
+

tests/baselines/reference/jsxJsxsCjsTransformKeyPropCustomImportPragma(jsx=react-jsxdev).errors.txt

@@ -0,0 +1,24 @@
+tests/cases/conformance/jsx/jsxs/preact.tsx(4,11): error TS2307: Cannot find module 'preact/jsx-dev-runtime' or its corresponding type declarations.
+
+
+==== tests/cases/conformance/jsx/jsxs/react.tsx (0 errors) ====
+    /// <reference path="/.lib/react16.d.ts" />
+    /* @jsxImportSource react */
+    import "./preact";
+    const props2 = { answer: 42 }
+    const a2 = <div key="foo" {...props2}>text</div>;
+    const b2 = <div {...props2} key="bar">text</div>;
+
+    export {};
+
+==== tests/cases/conformance/jsx/jsxs/preact.tsx (1 errors) ====
+    /// <reference path="/.lib/react16.d.ts" />
+    /* @jsxImportSource preact */
+    const props = { answer: 42 }
+    const a = <div key="foo" {...props}>text</div>;
+              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+!!! error TS2307: Cannot find module 'preact/jsx-dev-runtime' or its corresponding type declarations.
+    const b = <div {...props} key="bar">text</div>;
+
+    export {};
+