README

Signal.js

Signal.js provides ELM-style FRP for Javascript. It is heavily inspired by (an earlier version of) ELM and Purescript Signal and Pux.

Upgrading

A changelog is kept in RELEASES.md, which lists the major changes.

Getting Started

Install the latest version of Signal (npm install @fpjs/signal) and import it.

import {App} from "@fpjs/signal";
const {start, noEffects, Eff} = App;

// Return a new state and possibly effects based on the event.
const update = (event) => (state) => {
    return noEffects (state);
};

// Render the state. New events can be emitted using input.
const view = Eff(({state, input}) => ...);

const config = {
  initState: InitialState,
  foldp: update,
  render: view,
  inputs: [],
};
const app = start (config);

Lenses

Using lenses from @fpjs/overture allows for cleaner use of transitions. The following example shows incrementing a counter.

import {over, Record} from "@fpjs/overture/control/lens";
import {App} from "@fpjs/signal";
const {transition, noEffects} = App;

const _ = Record;

const initialState = { counter: 0 };

const Increment = () => ({type: "Increment"});

const update = (event) => {
    switch (event.type) {
    case "Increment":
        return transition(
            over (_.counter) ((n) => n + 1)
        );
    default:
        return noEffects;
    }
};

Events as actions

Instead of using an object data structure, events can also be represented as functions. This is somewhat similar to Mobx Actions.

import {apply} from "@fpjs/overture/base";

const Increment = () => transition(over (_.counter) ((n) => n + 1));

const update = apply;

Examples

The examples folder contains usage examples for different contexts.

counter.js : command line counter built with Nodejs commitfmt : browser example built with React cube : webgl example built with Three.js

Counter.js

To run the counter.js example, you have to transpile the source files for Nodejs. Run the build:all target to build the library and counter.js example. Then you can run the counter using node.

> npm run build:all
> node ./build/examples/counter.js

Commitfmt

This example shows Signal for managing the state of a React web app. To run it, use the webpack-dev-server and then navigate your browser to localhost:9000.

> pushd examples/commitfmt
> npm install
> npx webpack-dev-server
^C
> popd

Cube

This examples shows Signal for managing state and FPS of a WebGL app. To run it, use the webpack-dev-server and then navigate your browser to localhost:9000. You can use the arrows on your keyboard to rotate the cube.

> pushd examples/cube
> npm install
> npx webpack-dev-server
^C
> popd

License

This software is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/.

Usage no npm install needed!