Simple way to convert JSX to DOM

1

Sorry for the amateur question, but what is the simplest way to convert JSX to DOM elements? In TypeScript I am used to use a package named “JSX-dom”, which is configured in the package.json and doesn’t require in-file configuration. I have tried to use the new JSX preserve mode to convert JSX later in babel, but it requires to import a ReactDOM for some reason. I think, that I don’t need a ReactDOM at all. Is there any simple ready-to-use solution? Thanks.

1 Like
2

I guess it should run in the browser?

Theoretically you could use many js libraries, which creates dom.

React, solid, voby, xote, hyperscript,… Even jsx-dom should work.

If you are lucky, you can find some bindings for these libraries.

I would say, the easiest way for beginners would be react, since there are official bindings from the rescript developers:

If it should be more lightweight, you can have a look at the jsx docs of rescript to create your own bindings for any other library or build your own lib.
Converters for jsx are fun to implement in rescript.

Take a look at xote for example:

Cheers

1 Like
3

Thanks for your answer, but why ReScript still needs me to import ReactDOM when I set JSX preserve option to true? I think, it should just skip the JSX translation at all. Maybe there is some way or option to avoid importing ReactDOM? It would be ok for me if it just generate pure JS files with JSX
Yes, I would like to use it in browser

4

Ah, I haven’t used the preserve mode before. Now I got it.
If you don’t use e.g. react in preserve mode, the compiler throws an error. Probably a bug? Don’t know.

I have a workaround for you. It is the most minimal working example I could build in a few minutes.
If you need components etc. you have to mock some more stuff I think.

rescript.json

"jsx": {
  "version": 4,
  "module": "JSX",
  "preserve": true
}

JSX.res

type element = Jsx.element

module Elements = {
  external jsx: (string, JsxDOM.domProps) => element = "jsx"
  external jsxs: (string, JsxDOM.domProps) => element = "jsx"

  external someElement: element => option<element> = "%identity"
}

Now this code:

Console.log(<div>{Jsx.string("hello world")}</div>)

Will be compiled to this one:

console.log(<div>
  {"hello world"}
</div>);
3 Likes
5

Much thanks! Will use this example as a starting point!