https://github.com/cxa/ppx_bsx

OCaml JSX for ReasonReact
https://github.com/cxa/ppx_bsx

jsx ocaml ppx react reason-react

Last synced: about 1 month ago
JSON representation

OCaml JSX for ReasonReact

• Host: GitHub
• URL: https://github.com/cxa/ppx_bsx
• Owner: cxa
• License: mit
• Archived: true
• Created: 2017-07-30T18:52:43.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2019-05-31T17:48:29.000Z (over 5 years ago)
• Last Synced: 2024-09-20T02:33:34.257Z (about 2 months ago)
• Topics: jsx, ocaml, ppx, react, reason-react
• Language: OCaml
• Homepage:
• Size: 300 KB
• Stars: 70
• Watchers: 5
• Forks: 4
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-list - ppx_bsx

README

        
# 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`:

```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:

```ocaml

[%bsx "

  
Nice example

  

    This is sidebar

  

  


    "(React.string {j|这是主内容|j})"

  


"]

```

### Simple Rules

- Break `[%bsx ""]` into

  ```ocaml

  [%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) `Hello, World` is accepted

- Single text `{|你好|}` (but not `expr {|你好|}`) will be transformed to `{j|你好|j}` automatically