Bs-preact: An opinionated Preact v10 binding for (OCaml | ReasonML) + BuckleScript with compile time enforcement of the "Rules of Hooks"


#1

Hi! I just released this project I’ve been working on for more than a month: https://github.com/utkarshkukreti/bs-preact. (Live demos of examples with syntax highlighted source code here.)

This is the Hello World program:

let main = Preact.h1 [] [ Preact.string "Hello, world!" ]

let () =
  match Preact.find "main" with
  | Some element -> Preact.render main element
  | None -> Js.Console.error "<main> not found!"

This is how a useReducer powered Counter component looks like:

module Counter = struct
  type action =
    | Increment
    | Decrement

  let reducer state = function
    | Increment -> state + 1
    | Decrement -> state - 1

  let make =
   fun [@preact.component "Counter"] initial ->
    let[@hook] count, dispatch = P.useReducer reducer initial in
    P.div
      []
      [ P.button [ P.onClick (fun _ -> dispatch Decrement) ] [ P.string "-" ]
      ; P.string " "
      ; P.int count
      ; P.string " "
      ; P.button [ P.onClick (fun _ -> dispatch Increment) ] [ P.string "+" ]
      ]
end

With the microbundle bundler, the code above compiles to just 4kb (!) of gzipped js. Preact itself is 3kb, so that’s 1kb for the bs-preact runtime and the component above.

A starter project is available with instructions on how to get started: https://github.com/utkarshkukreti/bs-preact-starter.

More examples here. Live demos of examples with syntax highlighted source code here.


#2

Hi. Awesome project!
Why did you choice Preact instead of vanilla React?
Many people wants writing React in pure OCaml without JSX and Elm-like “markup” very good syntax for this purpose (like in your project).