Flyps

Flyps is a light-weight library with powerful tools, which help developers build modular applications that are composable, functional reactive and pure.

Getting started

You can install flyps via npm:

npm i flyps

Create a signal

Signals are the core principle of flyps and are used everywhere.

import { signal } from "flyps";

const counter = signal(1);

Change the value of a signal

A signal can be updated via a function (signal::update) or replaced with a new value (signal::reset).

const counter = signal(0);           // value = 0
counter.update(value => value + 1);  // value = 1
counter.reset(0);                    // value = 0

Render view

Views can be rendered with the mount function.

import { mount } from "flyps";

mount(document.querySelector("#my-view"),
  () => "<h1>Hello World!</h1>",
  (prev, next) => {
    let el = htmlToElement(next);
    prev.parentNode.replaceChild(el, prev);
    return el;
  },
  prev => {
    return prev.parentNode.removeChild(el);
  }
);

Snabbdom rendering

For more complex views we suggest to add the flyps-dom-snabbdom extension, which adds support for snabbdom rendering.

First install the extension: npm i flyps-dom-snabbdom

import { mount, h } from "flyps-dom-snabbdom";

mount(document.querySelector("#my-view"),
  () => h("h1", "Hello World!")
);

Render value from signal

import { signal } from "flyps";
import { mount, h } from "flyps-dom-snabbdom";

const data = signal("Hello World!");

mount(document.querySelector("#my-view"),
  () => h("h1", data.value())
);

Whenever the signal changes the view will be re-rendered with the new data.

data.reset("Hello User!");

More Examples

More examples can be found on our flyps homepage.