Simple site to automate HTML => @rescript/react conversion

https://htmltorescript.netlify.app

Just sharing here in case it’s useful, but I’ve updated the htmltoreason site to work for rescript now, and gave it a new url to match its purpose.

It’s pretty crucial to my workflow - copy/pasting e.g. Tailwind Component examples, and having everything possible converted into the appropriate Rescript syntax is just :man_cook:

Figure others may want it as well!

I’d still like to hook up the flow JS parser to be able to do jeason-style conversion as well, but that’s a project for another day.

Also, thanks to @mrmurphy for the original version of this app!

7 Likes

Cool!! Would it be possible to extend it to output cloneElement calls for props that are not supported by ReScriptReact?

Yeah, it’s a fairly basic tool - if you have an example of what the html input would be, and the expected rescript-react output, I’ll see if I can work it in!

Hi Sean, thank you. I’m thinking e.g.

<div>
  <div class="test" id="bla" data-id="bla">Hello</div>
</div>

Converts to:

<div>
  {React.cloneElement(<div className="test" id="bla">{React.string("Hello")}</div>, {"data-id": "bla"})}
</div>

So in addition to what it’s already doing, it checks if any of the attributes used are not supported by the ReScriptReact DOM bindings and separates those attributes into a React.cloneElement call that wraps the base element.

This is the officially recommended approach for now at least: https://rescript-lang.org/docs/react/latest/elements-and-jsx#cloning-elements

2 Likes

Oh, I had been wondering about that - right now it just turns them into e.g. dataId="bla". Automatically doing the clone element is a great idea! I’ll take a stab at it some time this week.

2 Likes

In case you aren’t already using it, tailwind ui now has an option to download a component’s source in jsx format.

And I wanted to link here that @jasim also has a very similar tool: