Support .jsx and .tsx by default?

[tessro]

Describe the feature

Would you be open to adding .jsx and .tsx extensions to the default set? Currently, in React projects, Jiti throws "Cannot find module" errors when parsing files that import JSX/TSX. TypeScript typically loads these automatically, so it's a cryptic issue that is likely to trip people up. (I spent over an hour tracking it down.) Since Jiti is used as middleware in other tools (in my case, by GraphQL Code Generator), this error is typically not something a user is prepared to debug, since they may not even realize Jiti is used under the hood.

JSX/TSX are typically supported automatically by TypeScript itself so this feels like a safe change, if you're open to it! 🤞🏼

Addendum: For .tsx specifically, I believe isTypescript would also need to be updated for this to work. That feels extremely safe since .tsx files are always TypeScript.

Additional information

• Would you be willing to help implement this feature?

[pi0]

I am open to supporting tsx. Do you mind to open a PR with change + a test fixture for usage? (how are we going to provide a default h function?)

[tessro]

Sure, I will take a look at this. I'm not sure what you mean by h function, is this an additional functionality beyond the default import?

[pi0]

Render function. When JSX is transformed, a render function is expected.

[reichhartd]

@paulrosania Did you found a workaround until the feature is implemented?

[tessro]

Unfortunately no, I have not had time to look into this further. For now I'm using this patch (via patch-package) which adds .tsx support. It's brittle but it gets the job done.

https://gist.github.com/paulrosania/4c21f6592e241e49d34f1fdc6586ef96

[reichhartd]

@pi0 I would like to create a pull request. However, h functions are new to me. Can you give me an example of an h function from the repo? In addition, a start point in the code would be very helpful.

[pi0]

h and Fragment are global constructs that a transpiled JSX code depends on.

For example this:

export const Test = () => <div>42</div>;

It needs to be transpiled to this:

export const Test = () => h("div", null, "42");

And jiti should support an option to specific what global h is (it can be React.createElement or Vue.h for example)

[yuusheng]

I would like to solve this!