https://github.com/ozanmakes/ppx-tea-jsx

Reason JSX syntax for BuckleScript-TEA
https://github.com/ozanmakes/ppx-tea-jsx

Last synced: 3 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 (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-12-13T13:53:14.000Z (7 months ago)
• Last Synced: 2024-04-14T09:06:16.157Z (3 months ago)
• Language: OCaml
• Size: 8.79 KB
• Stars: 51
• Watchers: 4
• Forks: 2
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Lists

• awesome-ppx-reasonml - ppx-tea-jsx - Reason JSX syntax for bucklescript-tea (PPXs)

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 " 

    

  
;

};

```