[ppx] Support custom jsx pragmas/functions

[Ersin Akinci]

Hi there! I'm brand new to Reason and ReasonReact, and I'm evaluating how our team might use Reason in our project. Everything looks great, thank you for all of your hard work on making Reason accessible to people in the React world.

We've hit one major stumbling block, however. Our project uses Theme UI for CSS-in-JS styling, which works like this:

1. Each styled component gets a special sx prop that contains a style object. E.g., <div sx={{ margin: '4px' }} />.
2. Each .jsx/.tsx file that has sx props in it is marked with a special JSX pragma at the top (e.g., /** @jsx jsx */), which tells Babel to convert React.createElement(...) calls into jsx(...) calls. jsx is a function like React.createElement that also knows how to handle the sx prop. It's imported from Theme UI like so: import { jsx } from 'theme-ui'.

The problem is that, as far as I can tell, [@reason.component] only supports converting JSX into React.createElement calls. There's also the issue that sx isn't a supported prop, but I think we can work around it with the data-* prop workaround (although I'm not 100% certain this will work).

So is there a way to support using alternatives to React.createElement?

(Note that I marked this issue with [ppx] because I was told in the Discord channel that it's the ppx that's responsible for this behavior. Let me know if that's inaccurate or if I should change my ticket's title.)

[Ricky Vetter]

Hey @earksiinni - I think a custom pragma is a good eventual idea but the compilation of the ppx today is in flux (moving from createElement to jsx and to individual props), so I don't think this is ready to happen right now. I see in the linked issue that you're exploring some other solutions and have more context - I'll respond there with some thoughts on the different strategies for getting the kind of behavior your want.

[Ricky Vetter]

After commenting on the compiler issue and thinking about this more, it actually doesn't make sense to centralize a pragma for the PPX. The React PPX is always the very last one to run due to how it's implemented so a different PPX just has only convert the statements it wants to deal with and then the React PPX will convert everything that falls through. I think that creates a nice decentralization where folks can experiment with whatever they'd like and it doesn't add any overhead/resources for folks using the base library.

Closing this for now since I don't think it's a thing we actually want as part of the core React PPX.