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/commandLineParser.ts

@@ -382,6 +382,7 @@ namespace ts {
  type: jsxOptionMap,
  affectsSourceFile: true,
  affectsEmit: true,
+ affectsModuleResolution: true,
  paramType: Diagnostics.KIND,
  showInSimplifiedHelpView: true,
  category: Diagnostics.Basic_Options,
@@ -802,6 +803,9 @@ namespace ts {
  {
  name: "jsxImportSource",
  type: "string",
+ affectsSemanticDiagnostics: true,
+ affectsEmit: true,
+ affectsModuleResolution: true,
  category: Diagnostics.Advanced_Options,
  description: Diagnostics.Specify_the_module_specifier_to_be_used_to_import_the_jsx_and_jsxs_factory_functions_from_eg_react
  },

src/compiler/program.ts

@@ -2201,6 +2201,15 @@ namespace ts {
  : b.kind === SyntaxKind.StringLiteral && a.text === b.text;
  }
 
+ function createSyntheticImport(text: string, file: SourceFile) {
+ const externalHelpersModuleReference = factory.createStringLiteral(text);
+ const importDecl = factory.createImportDeclaration(/*decorators*/ undefined, /*modifiers*/ undefined, /*importClause*/ undefined, externalHelpersModuleReference);
+ addEmitFlags(importDecl, EmitFlags.NeverApplyImportHelper);
+ setParent(externalHelpersModuleReference, importDecl);
+ setParent(importDecl, file);
+ return externalHelpersModuleReference;
+ }
+
  function collectExternalModuleReferences(file: SourceFile): void {
  if (file.imports) {
  return;
@@ -2216,16 +2225,17 @@ namespace ts {
 
  // If we are importing helpers, we need to add a synthetic reference to resolve the
  // helpers library.
- if (options.importHelpers
- && (options.isolatedModules || isExternalModuleFile)
+ if ((options.isolatedModules || isExternalModuleFile)
  && !file.isDeclarationFile) {
- // synthesize 'import "tslib"' declaration
- const externalHelpersModuleReference = factory.createStringLiteral(externalHelpersModuleNameText);
- const importDecl = factory.createImportDeclaration(/*decorators*/ undefined, /*modifiers*/ undefined, /*importClause*/ undefined, externalHelpersModuleReference);
- addEmitFlags(importDecl, EmitFlags.NeverApplyImportHelper);
- setParent(externalHelpersModuleReference, importDecl);
- setParent(importDecl, file);
- imports = [externalHelpersModuleReference];
+ if (options.importHelpers) {
+ // synthesize 'import "tslib"' declaration
+ imports = [createSyntheticImport(externalHelpersModuleNameText, file)];
+ }
+ const jsxImport = getJSXRuntimeImport(getJSXImplicitImportBase(options, file), options);
+ if (jsxImport) {
+ // synthesize `import "base/jsx-runtime"` declaration
+ (imports ||= []).push(createSyntheticImport(jsxImport, file));
+ }
  }
 
  for (const node of file.statements) {

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++) {

src/testRunner/unittests/tscWatch/incremental.ts

@@ -276,5 +276,33 @@ export interface A {
  ],
  modifyFs: host => host.deleteFile(`${project}/globals.d.ts`)
  });
+
+ const jsxImportSourceOptions = { module: "commonjs", jsx: "react-jsx", incremental: true, jsxImportSource: "react" };
+ const jsxLibraryContent = `export namespace JSX {
+ interface Element {}
+ interface IntrinsicElements {
+ div: {
+ propA?: boolean;
+ };
+ }
+}
+export function jsx(...args: any[]): void;
+export function jsxs(...args: any[]): void;
+export const Fragment: unique symbol;
+`;
+
+ verifyIncrementalWatchEmit({
+ subScenario: "jsxImportSource option changed",
+ files: () => [
+ { path: libFile.path, content: libContent },
+ { path: `${project}/node_modules/react/jsx-runtime/index.d.ts`, content: jsxLibraryContent },
+ { path: `${project}/node_modules/react/package.json`, content: JSON.stringify({ name: "react", version: "0.0.1" }) },
+ { path: `${project}/node_modules/preact/jsx-runtime/index.d.ts`, content: jsxLibraryContent.replace("propA", "propB") },
+ { path: `${project}/node_modules/preact/package.json`, content: JSON.stringify({ name: "preact", version: "0.0.1" }) },
+ { path: `${project}/index.tsx`, content: `export const App = () => <div propA={true}></div>;` },
+ { path: configFile.path, content: JSON.stringify({ compilerOptions: jsxImportSourceOptions }) }
+ ],
+ modifyFs: host => host.writeFile(configFile.path, JSON.stringify({ compilerOptions: { ...jsxImportSourceOptions, jsxImportSource: "preact" } }))
+ });
  });
 }

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 {};
+