cxa/ppx_bsx

OCaml JSX for ReasonReact

ppx_bsx

OCaml JSX for ReasonReact.

Install

ppx_bsx depends on ppx_lib, which means that ppx_bsx doesn't support bs-platform 5.x, so first step is configuring your project to "bs-platform": "^6.0.1".

Install ppx_bsx with opam or esy, and add ppx_bsx executable to bs-config.json:

{
  "ppx-flags": [
    "./_opam/bin/ppx_bsx",
    "./node_modules/bs-platform/lib/bsppx.exe -bs-jsx 3"
  ]
}

Replace ./_opam/bin/ppx_bsx to actual ppx_bsx installed path.

Example: https://github.com/cxa/ppx_bsx_example.

Basic Usage

This is how it feel:

[%bsx "
<Container>
  <h1>Nice example</h1>
  <nav className="(styles "sidebar")">
    This is sidebar
  </nav>
  <div className="(styles "content")">
    "(React.string {j|这是主内容|j})"
  </div>
</Container>
"]

Simple Rules

• Break [%bsx ""] into

  [%bsx "
  
  "]

  and ignore the first and last quotation marks.
• When you need OCaml expression, wrap it with double quotation marks, otherwise
• For string literal value, just use single quotation marks
• For single text node, you don't need to wrap it to ReasonReact.string, (surprisedly) <span>Hello, World</span> is accepted
• Single text {|你好|} (but not expr {|你好|}) will be transformed to {j|你好|j} automatically

ppx_bsx's Issues

Children spead

What's the correct way to translate Reason's children spread (<div>...children</div>) to Ocaml?

Example doesn't work ("src/React.cmi" is not a compiled interface for this version of OCaml)

When running the example by following instructions in the readme, I get this error on doing npm run dev:

> [email protected] dev /Users/roddy/ppx_bsx_example
> concurrently 'bsb -make-world -w' 'webpack-dev-server --env=dev'

[0] ninja: warning: bad deps log signature or version; starting over
[0] [1/37] Building src/React.mlast
[0] [2/37] Building src/ReactEvent.mlast
[0] [3/37] Building src/ReactEvent.mliast
[0] [4/37] Building src/React.d
[0] [5/37] Building src/ReactEvent.d
[0] [6/37] Building src/ReasonReact.mliast
[0] [7/37] Building src/React.cmj
[0]
[0]   We've found a bug for you!
[0]   /Users/roddy/ppx_bsx_example/node_modules/reason-react/src/React.re
[0]
[0]   src/React.cmi
[0] is not a compiled interface for this version of OCaml.
[0] It seems to be for an older version of OCaml.
[0]
[0] [8/37] Building src/ReactEvent.cmi
[0] [9/37] Building src/ReasonReact.mlast
[0] [10/37] Building src/ReactEventRe.mliast
[0] [11/37] Building src/ReactEventRe.mlast
[0] [12/37] Building src/ReactDOMRe.mlast
[0] Failure: /Users/roddy/ppx_bsx_example/node_modules/bs-platform/lib/ninja.exe
[0]  Location: /Users/roddy/ppx_bsx_example/node_modules/reason-react/lib/bs

and then subsequent errors because React can't be loaded.

OMP 1.6.0 allows the PPX to support all BuckleScript versions

See https://reasonml.chat/t/2210 for a full explanation.

Error compiling reason files

Avoid to process reason files

File "/Users/mrkaspa/code/my-react-app/src/demo.re", line 8, characters 5-89:
Error: Unbound value div
ninja: build stopped: subcommand failed.
>>>> Finish compiling