Similar to the HTML to ReScript JSX converter, has anybody implemented a JS JSX -> ReScript JSX converter? That is, something that converts all the strings into React.string calls, etc.
2 Likes
Similar, but from JSX instead of from HTML. This comes up in related scenario. The author of that tool is copying tailwind components that are exported as html. Recently, tailwind added export as react component, so that’s why I asked for this.
1 Like
I think we could add it in the Playground
By adding a “JS” Button next to RE | RES and by toggling between each other you convert them like currently does between RE and RES.
1 Like
At the moment the code is tightly tied to HTML and doesn’t have any clean boundaries to add another format. But the use-case sounds great, let me see if I can tinker with and will let you know.
I took a quick look and JSX to ReScript doesn’t look viable for me. HTML has a predictable structure and so it is easy to parse. But JSX snippets commonly have expressions inside them (array.map and so on), and could have further JSX expressions nested inside. JSX-HTML attributes can also be expressions, and their styles can come in many forms. Even applying heuristics I don’t think we can get a satisfying result.
I think for now the best bet would be to use the rendered HTML and convert that into ReScript.
1 Like
@jorge AST.
For HTML, I’m using the node-html-parser package (html-to-rescript-jsx/converter.js at master · protoship/html-to-rescript-jsx · GitHub).
And for CSS, the css package is working well (html-to-rescript-jsx/convertInlineCSS.js at master · protoship/html-to-rescript-jsx · GitHub).
2 Likes
I’m interested in reviving this idea. I’m working on a prototype to convert vanilla JSX to ReScript JSX.
Would anyone know some edge case where a transformation is required?
Like type needs to become type_,
JSX text needs to become React.string("..").
What else is there?
Punning comes to mind. As in <SomeComp someProp /> in JS means <SomeComp someProp=true /> in ReScript, and the reverse would mean <SomeComp someProp=someProp /> in JS.
That’s awesome! First 2 things that came to my mind: browser extension to transform all JSX examples on websites to ReScript, and a CLI tool to convert files.
Hmm, it uses web assembly so I’m not quite sure if that would work.
Converting entire files would not be that useful as it merely tweaks JSX stuff right now.
2 Likes
I have so many questions after looking at the github. From what I can tell you are using oxc to parse the JSX and then transforming the output to ReScript. Couldn’t that be done without webassembles? Just grab some internal JSX from the markup, transfom it, and update the dom?
I can imagine looking at the docs for a library and being able to copy and paste ReScript jsx, something like flowbite: Tailwind CSS Select - Flowbite
what you have made is awesome and will become one of my most used bookmarks for sure, so no sweat on making more work, I just got very excited lol.
1 Like
Yes, the oxc component is their Rust code compiled to WebAssembly. It could potentially be replaced with a pure JavaScript parser, which may open more opportunities. Your line of thinking is on the right track!