Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ozanmakes/ppx-tea-jsx
Reason JSX syntax for BuckleScript-TEA
https://github.com/ozanmakes/ppx-tea-jsx
Last synced: about 2 months ago
JSON representation
Reason JSX syntax for BuckleScript-TEA
- Host: GitHub
- URL: https://github.com/ozanmakes/ppx-tea-jsx
- Owner: ozanmakes
- License: mit
- Created: 2018-11-15T21:47:33.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-12-13T13:53:14.000Z (9 months ago)
- Last Synced: 2024-05-18T19:12:09.225Z (4 months ago)
- Language: OCaml
- Size: 8.79 KB
- Stars: 51
- Watchers: 4
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ppx-tea-jsx [![Version 0.6.0][npm-img]][npm]
[npm-img]: https://img.shields.io/npm/v/ppx-tea-jsx.svg
[npm]: https://www.npmjs.com/package/ppx-tea-jsx[Reason](https://reasonml.github.io) JSX syntax support for
[BuckleScript-TEA](https://github.com/OvermindDL1/bucklescript-tea) library.## Installation
1. Install via npm or Yarn:
```sh
yarn add --dev ppx-tea-jsx
```2. Add the PPX to your `bsconfig.json`:
```json
{
"ppx-flags": ["ppx-tea-jsx/ppx"]
}
```## Usage
You can pass JSX expressions to any function that expects `Vdom.t`.
### HTML elements
```reason
let view = _model =>
;
``````reason
"Sorry, your browser doesn't support embedded videos."```
#### Literals
```reason
"Addition: " 5 '+' 25.5
```#### Punning
```reason
let id = "fifty";
let className = None;let _ =
;
```#### Children spread
```reason
let buttons_list_fn = () => [, , ];let buttons_fragment = <> >;
let view = _model =>
;
...{buttons_list_fn()}
...buttons_fragment
```#### Events
You can trigger messages:
```reason
```
And return `option(msg)` from callbacks:
```reason
{
e##preventDefault();
Some(Reset);
}
}
/>
``````reason
Set(int_of_string(value))} />
``````reason
let view = model => {
let onChangeOpt = value =>
try (value->int_of_string->Set->Some) {
| _ => None
};
;
};
```### Modules (Capitalized Tag)
` "Hi" ` is mapped to `Foo.view(~bar="baz", [text("Hi")])`.
```reason
type person = {
name: string,
age: option(int),
};module OnlyChild = {
let view = children =>children;
};module Person = {
let view = (~className=?, ~name, ~age=?, children) => {
open Tea.Html;
let age =
age
->Belt.Option.mapWithDefault(noNode, x =>
" (" x->string_of_int->text ")"
);
...children {text(name)} age;
};
};let view = model => {
let img =
;
;
...img
"Hi "
};
```