Allow `.js` file generated from `.tsx` file to be runnable in browser with less configuration

🔍 Search Terms

• jsx-dev-runtime.js
• jsx-runtime.js

✅ Viability Checklist

• This wouldn't be a breaking change in existing TypeScript/JavaScript code
• This wouldn't change the runtime behavior of existing JavaScript code
• This could be implemented without emitting different JS based on the types of the expressions
• This isn't a runtime feature (e.g. library functionality, non-ECMAScript syntax with JavaScript output, new syntax sugar for JS, etc.)
• This isn't a request to add a new utility type: https://github.com/microsoft/TypeScript/wiki/No-New-Utility-Types
• This feature would agree with the rest of our Design Goals: https://github.com/Microsoft/TypeScript/wiki/TypeScript-Design-Goals

⭐ Suggestion

The .js file generated from .tsx file should have file extension in the injected import statement.
Also, if the value of jsxImportSource is relative (for e.g. ./myCustomJSX instead of myCustomJSX), the import statement should have correct relative path to JSX runtime files.

📃 Motivating Example

Suppose, a web project has following files and folders:

• /tsconfig.json
• /myCustomJSX/jsx-dev-runtime.ts
• /Foo.tsx
• /subfolder/Bar.tsx
• /index.html

And, tsconfig.json looks like:

{
  "compilerOptions": {
    "jsx": "react-jsxdev",
    "jsxImportSource": "./myCustomJSX",
  }
}

After running npx tsc, all generated .js files (/Foo.js, /subfolder/Bar.js) have following code at the top:

import { jsxDEV as _jsxDEV, Fragment as _Fragment } from "./myCustomJSX/jsx-dev-runtime";

There are three problems with this:

1. The .js extension is missing in the import statement.
2. The path of the module is not accurate for /subfolder/Bar.js
3. Also, tsc shows following error for /subfolder/Bar.tsx:

   subfolder/Bar.tsx:13:3 - error TS2307: Cannot find module './myCustomJSX/jsx-dev-runtime' or its corresponding type declarations.
   

Expected behavior:

/Foo.js:

import { jsxDEV as _jsxDEV, Fragment as _Fragment } from "./myCustomJSX/jsx-dev-runtime.js";

/subfolder/Bar.js:

import { jsxDEV as _jsxDEV, Fragment as _Fragment } from "../myCustomJSX/jsx-dev-runtime.js";

💻 Use Cases

1. What do you want to use this for?
   I want to use this for web project that utilizes JSX syntax and uses only TypeScript as build tool.

2. What shortcomings exist with current approaches?
   The current approach requires too much extra steps when using the generated .js file in web project without additional build steps, especially when using relative path in jsxImportSource.

3. What workarounds are you using in the meantime?
   I am providing following in importmap in /index.html file:

   <script type="importmap">
   {
     "imports": {
       "./myCustomJSX/jsx-dev-runtime": "./myCustomJSX/jsx-dev-runtime.js"
       "./subfolder/myCustomJSX/jsx-dev-runtime": "./myCustomJSX/jsx-dev-runtime.js"
     }
   }
   </script>
   

   However, the importmap can grow when there are .tsx files in many depths in file system.
   If this issue is solved, there won't be any need for importmap when using relative path in jsxImportSource. However, for bare module path, 1 entry in importmap is still required.

Riproduci il problema con il tsconfig.json mostrato e la struttura composta da Foo.tsx, subfolder/Bar.tsx e myCustomJSX/jsx-dev-runtime.ts. Inizia dall’emissione degli import JSX e dal comportamento di risoluzione dei moduli di tsc, quindi verifica che gli import generati includano l’estensione .js e i percorsi relativi corretti per entrambi i file di output.