Support for the JSX transform under a new name `reason-react-ppx`

September 13, 2023

Today, we're releasing ReasonReact 0.12! The most important changes are renaming the JSX transform PPX from reactjs-jsx-ppx to reason-react-ppx, along with many other improvements:

  • reason-react-ppx now emits the React 17 JSX transform.
  • Prop locations have been greatly improved, resulting in much better editor integration.
  • Check the full changes below for more details around other fixes and small breaking changes.

Locations from domProps in action (Thanks @jchavarri)

download

new JSX transform (Thanks @anmonteiro)

Screenshot 2023-09-13 at 16 11 17

What's changing?

Track reactjs-jsx-ppx in the same repository as reason-react, and rename it to reason-react-ppx, a more suitable name with a few improvements:

  • Use the new JSX transform from React 17
  • Fix code-generation locations for JSX and props
  • Fix to allow using React.memoCustomCompareProps
  • Fix Type of optional prop not checked correctly in JSX
  • The ppx will be synced with reason-react (and tested together)

Take a look at reasonml/reason-react/releases/tag/0.12.0 for a full listing of all the changes.

Updating to latest

ReasonReact works best with Melange. Get started here.

Next:

  • Update the package definitions with opam update

  • Install the latest versions with opam install reason-react reason-react-ppx (or upgrade opam upgrade reason-react & install opam install reason-react-ppx)

  • In your dune file, add reason-react to libraries and reason-react-ppx to preprocess:

      (libraries reason-react)
  (preprocess (pps reason-react-ppx))

  • Remove any usage of ReactDOM.props

  • Bump React.js version to v17/v18 to use the new JSX transformation

  • We added depexts in opam for react and react-dom to ensure you have the correct versions installed from npm. depexts is the mechanism by opam to ensure the correct versions of external dependencies are present in your system. Learn more here on the Melange documentation page about bindings and package management:

      depexts: [
    ["react"] {npm-version = "^16.0.0 || ^17.0.0"}
    ["react-dom"] {npm-version = "^16.0.0 || ^17.0.0"}
  ]

Future plans

  • OCaml 5.1 + Melange v2
  • Reason 3.10 support
  • React 18 bindings
  • Continue improving the state of the ppx (locations, avoid raising, etc..)
  • Deprecate some legacy modules: ReasonReact and ReactDOMRe
  • Work on interface files

Feel free to reach out if you have any feedback or want to get involved. You can open an issue in this repository, or join the ReasonML Discord and contact me (@davesnx) directly.

Recent Posts