try to load typescript for specifier with extensions.

[mshima]

Closes privatenumber/tsx#344.

[jraoult]

Hey @mshima, I was trying to use your patch to address a downstream issue: privatenumber/tsx#112.

From my quick hacking, you can add support for .tsx (mapped from .js) by simply adding it to your mappedExtensions object:

const mappedExtensions = {
	'.js': ['.ts', '.tsx'],
	'.cjs': ['.cts'],
	'.mjs': ['.mts'],
} as const;

Looking forward to seeing your PR merged 😀.

[karlhorky]

Right, and as also mentioned in privatenumber/tsx#112, in addition to .tsx source files, also would be good to add support for .jsx import paths:

// Should resolve to a.tsx, a.ts, etc 
import a from './a.jsx'

[mshima]

@jraoult from the issue description, you will need to patch cjs-loader instead, so esbuild-kit/cjs-loader#23 may be relevant but I don't think it fixes the issue.
You will probably need to patch the resolveTsPath too and related mapper.
resolveTsPath will need to return an array so a core-utils breaking change.

tsx command is the same of node --require=@esbuild-kit/cjs-loader --loader=@esbuild-kit/esm-loader.

You can test using the git branch:

npm install mshima/cjs-loader#allowjs
npm install mshima/esm-loader#allowjs

There is already a mapped extension at https://github.com/esbuild-kit/core-utils/blob/a756b7b599cb92ac720c559bee8451f63b1643a1/src/resolve-ts-path.ts#L3-L7.
The PR should be change by exposing it to don't duplicate.

[karlhorky]

Just taking this part out of my comment above, to make it visible to anyone here:

See this Replit with tsc: https://replit.com/@karlhorky/TypeScript-tsc-extension-resolution-js-jsx-cjs-mjs#index.ts

All of these extensions work:

[karlhorky]

I also made a Replit with [email protected] on its own (no tsx or tsc) to test the resolution of all extensions (using --bundle mode), and it seems that they are all respected:

https://replit.com/@karlhorky/esbuild-extension-resolution-js-jsx-cjs-mjs#index.ts

[mshima]

@privatenumber would be really nice to have this feature.
We are having trouble to import a ts (commonjs) file from a mjs file. mjs files requires the extension, which breaks esm-loader.

[datner]

If I understand correctly, following down the line, merging this PR will allow in turn vite to correctly resolve the following:

// ComponentA.tsx
export const ComponentA = () => <div />

// ComponentB.tsx
import { ComponentA } from './ComponentA.js'

export const ComponentB = () => <ComponentA />

Right? Either way, how can we move this PR forward? I'm willing to help