Rembrandt

Simple functional UI framework written in Reasonml.

Getting started

open Rembrandt.Elements;

type model = int;
type action =
  | Add
  | Sub
  | Twice;

let update =
    (model: model, action: action): (model, Command.command('action)) =>
  switch (action) {
  | Add => (model + 1, Command.null)
  | Sub => (model - 1, Command.null)
  | Twice => (model + 1, Command.action(Add))
  };

Rembrandt.run(
  ~model=42,
  ~update,
  ~view=
    (model, dispatch) =>
      <div>
        <div key="1" id="count"> {string_of_int(model) |> text} </div>
        <button key="2" id="plus" onClick={_ => Add |> dispatch}>
          {text("+")}
        </button>
        <button key="3" id="minus" onClick={_ => Sub |> dispatch}>
          {text("-")}
        </button>
        <button key="4" id="double" onClick={_ => Twice |> dispatch}>
          {text("twice +")}
        </button>
      </div>,
  (),
);

API

model

Initial store value.

update

Function for modify model. It takes current model and dispatched action. It returns 2 element tuple with new model and command.

command

Way to run side effects in asynchronously. Command.null wouldn't run anything, Command.action will dispatch action asynchronously, Command.run will run passed function with dispatch as argument.

view

On every state change result on function will be render on rootNode. Argument dispatch should be call with proper action on DOM event callback.

rootId (optional)

String for find rootNode via document.getElementById default is "app".

initAction (optional)

Action to dispatch after first render. Default is Command.null.

middlewares (optional)

List of functions to apply on each state update. Each takes oldModel, newModel and action as arguments. See Rembrandt.MiddleWares.logger in examples/Form.re. Default is [].