Custom JSX transform

[nandorojo]

I've been playing with a custom jsxImportSource which turns <div> into <html.div> on native. It's been incredible to use honestly.

It also makes porting React web code incredibly straight forward. LLMs are really good at producing React DOM code, so this is doubly effective.

Out of curiosity: could offering a JSX transform directly within React Strict DOM ever make sense?

A few general use-cases:

1. SVG components / icons. Currently you have to convert icons to react-native-svg with capital letters to get them working in React Native, and it's pretty annoying. With the JSX transform I implemented, I just use <svg> directly and it works.
2. Using Tailwind / shadcn styles on native with minimal changes
3. Letting Claude/Cursor output React DOM code and it just works for the most part

As native inches toward a stricter version of web APIs, I'm loving the idea of using lowercase <div> directly where it makes sense. Curious to hear what the RSD contributors think of this, or if it should just stay in user land. Happy to collaborate on it or submit a PR as well.

[necolas]

It might make sense at some distant point in the future.

There are many I reasons we chose not rely on a jsx transform.

1. Have static types for components.
2. Remove deprecated / legacy React DOM props.
3. Have a custom style prop.
4. Require importing of modules (no magic imports).
5. Interop between existing and migrated code.

Having div mean one thing in one file, and another thing in another file, is a recipe for confusion and bugs. It's easy to port div to html.div in the places you need to. The hard part is porting styles if they're not authored using stylex. So a custom jsx transform wouldn't have provided us with any real benefits.

[nandorojo]

Makes sense. I definitely agree that it makes sense for it to have its own import from RSD. But from a DX perspective, it could be an interesting layer on top.

Apps could also override the typical React TypeScript types in a single line to make <div use the RSD types if they wanted to.

All-in-all, I don’t think it should be the default approach for RSD. But it makes for a really enjoyable DX.

As for the magic, I get this concern, although it could also be on a per-file basis with the JSX pragma comment up to make it slightly less magical.