Handle style labels and reserved keywords for attributes/labels, convert to posthtml

[sgrove]

• Always provide safe attribute names (no SYNTAX ERROR screams on paste)
• Find canonical capitalization of attribute names
• Do appropriate type coercion for ReasonReact
• Decode entities in text nodes
• Convert style to ReactDOMRe.style

I tested this against a few html files and a bunch of SVGs, and it always produces valid Reason syntax for all of my cases, along with valid types for any known DOM attribute.

Future ideas

Show how to handle custom data-* in DOM elements

One other thing we could do is when we see any data-whatever attributes is automatically wrap it in @yawaramin solution to reasonml/reason-react#230 :

module WithDataAttributes = {
  [@react.component]
  let make = (~id: string, ~children) =>
    ReasonReact.cloneElement(children, 
   // We could fill this in automatically
    ~props={"data-test-id": id}, [||]);
};

<WithDataAttributes id="foo"> <button /> </WithDataAttributes>

It's not a great solution given its tradeoffs, but we could at least automate away questions about how to do it. I had to spend some time yesterday looking up how to do this for another project, would have been very cool to just paste it into html-to-reason and get this out

Convert JS + JSX

A bigger project, but using a reboot of https://github.com/chenglou/jeason, we could parse existing JS/JSX into an AST, and walk it emitting equivalent Reason structures. There's a lot of time where I want to convert some JS rather than paste it in bs.raw for several reasons (largely I'm concerned about the type safety and correctness of the implementation and want to not worry about it later), but pasting a big section of JS and then editing it by hand until it saves without a major syntax error is really tedious.

For this to work, we'd first try to parse the input with the HTML parser, and if that failed, then we would parse with the Jeason-reboot parser, and then output based on that AST (using Flow's parser/AST).

CLI version

I can imagine this would also be useful to have as a tool for vscode, emacs, or just the terminal to be able to convert things locally. There's no real big blocker here if we split up the packages a bit.

Extract style tags to CSS ppx

@davesnx has a very cool styling project that we could have a toggle for, to extract <style> tags into a top-level stanza to save on some of the grunt work of extracting styles

Detect errors and report them in GitHub issues

If we catch an exception thrown in the conversion process, we can ask the user if it's ok to submit their example as a test case on GitHub. I can use OneGraph's persisted queries so they don't even have to log in - it'll be a one-click thing, and we'll have a PR with a failing test automatically submitted.

[mrmurphy]

Thanks so much for the work @sgrove! And neat ideas for the future. Merging this now and getting it deployed!