JS JSX -> ReScript JSX converter?

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

Like this? HTML to Rescript JSX script

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.

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

@jasim are you using Abstract Syntax Trees or another technique?

@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).

1 Like