README
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 [].