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.