Experimental bindings to Choo + Preact

#1

In other words -=> choop. It’s highly experimental, but works.

Choop is a choo API/architecture with performant preact renderer.

For now I only implemented it the ol’ hyperscript way inspired by Giraffe/Suave view engine. Feel free if you know how to figure out the JSX-compatible part, I myself have no idea.

Example:

open Choop;
open Choop.Html;
open Choop.Html.Attributes;

type state = {
  mutable count: int
};

let app = App.make();

App.use(app, (state, emitter) => {
  state.count = 0;
  Emitter.on(emitter, "increment", count => {
    state.count = state.count + count;
    Emitter.emit(emitter, "render", ());
  });
});

App.route(app, "/", ({count}, emit) => {
  let onclick = () => emit(. "increment", 1);
  
  main([_class("main-content")],
    [
      h1(
         [_class("main-content__header")],
         [text({j| Count is $count |j})]
      ),
      button([_onclick(onclick)], [text("Click me")]),
      div([_dangerouslySetInnerHTML("<div>I am dangerous!</div>")], [])
    ]
  )
});

App.mount(app, "body");

Ah yes, if you’re interested in it - I need your help :slight_smile:

TODO:

  • Integrate Preact’s Component API
  • Make JSX compatible
  • Decent build pipeline w/ Unit test coverage
  • Release cycle and NPM beta package