Repository: TypeScript
Issue: Allow `.js` file generated from `.tsx` file to be runnable in browser with less configuration
Labels: Suggestion,Awaiting More Feedback

### 🔍 Search Terms

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

### ✅ Viability Checklist

- [X] This wouldn't be a breaking change in existing TypeScript/JavaScript code
- [X] This wouldn't change the runtime behavior of existing JavaScript code
- [X] This could be implemented without emitting different JS based on the types of the expressions
- [X] This isn't a runtime feature (e.g. library functionality, non-ECMAScript syntax with JavaScript output, new syntax sugar for JS, etc.)
- [X] This isn't a request to add a new utility type: https://github.com/microsoft/TypeScript/wiki/No-New-Utility-Types
- [X] 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:

```json
{
  "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:

```js
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`:
```js
import { jsxDEV as _jsxDEV, Fragment as _Fragment } from "./myCustomJSX/jsx-dev-runtime.js";
```

`/subfolder/Bar.js`:
```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:
   ```html
   <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.