Simple functional UI framework written in Reasonml.
Clone or download
Permalink
Failed to load latest commit information.
.vscode Initial commit Sep 9, 2018
__tests__ install new elements Oct 4, 2018
cypress update ci scripts Sep 23, 2018
examples Initial commit Sep 12, 2018
src install new elements Oct 4, 2018
.gitignore Initial commit Sep 9, 2018
.travis.yml fix typo Sep 23, 2018
LICENSE Initial commit Sep 9, 2018
README.md add travis badge Sep 23, 2018
bsconfig.json add some units Oct 1, 2018
cypress.json Initial commit Sep 9, 2018
logo.svg Initial commit Sep 9, 2018
package-lock.json update ci scripts Sep 23, 2018
package-scripts.js add some units Oct 1, 2018
package.json release 1.1.0 Oct 8, 2018

README.md

Rembrandt

Build Status License: MIT npm version

alt text

Simple functional UI framework written in Reasonml.

Getting started

npm install bs-rembrandt --save

Add bs-rembrandt to bs-dependencies in bsconfig.json

To start empty reasonml project bsb -init my-new-project -theme basic-reason (required bs-platform)

Example

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 id="count"> {string_of_int(model) |> text} </div>
        <button id="plus" onClick={_ => Add |> dispatch}>
          {text("+")}
        </button>
        <button id="minus" onClick={_ => Sub |> dispatch}>
          {text("-")}
        </button>
        <button 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 [].