Simple functional UI framework written in Reasonml.
Branch: develop
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode
__tests__
cli
cypress
examples
seed
src
.gitignore
.travis.yml
LICENSE
README.md
bsconfig.json
cypress.json
logo.svg
package-lock.json
package-scripts.js
package.json

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

Create seed project

npx bs-rembrandt init

Build production files

npx bs-rembrandt build

Run dev server

npx bs-rembrandt start:bs

And in other terminal

npx bs-rembrandt start:js

Run unit tests

npx bs-rembrandt test

Display all available commands in CLI

npx bs-rembrandt help

Example app

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