diff --git a/README.md b/README.md index 6983752..3b3cade 100644 --- a/README.md +++ b/README.md @@ -13,9 +13,96 @@ build modular applications that are [composable], [functional reactive] and [functional reactive]: https://en.wikipedia.org/wiki/functional_reactive_programming [pure]: https://en.wikipedia.org/wiki/Functional_programming#Pure_functions +# 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"), + () => "

Hello World!

", + (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]. + + + [npm-badge]: https://img.shields.io/npm/v/flyps.svg [npm-url]: https://www.npmjs.com/package/flyps [build-badge]: https://travis-ci.org/Contargo/flyps.svg?branch=master [build-url]: https://travis-ci.org/Contargo/flyps [coverage-badge]: https://coveralls.io/repos/github/Contargo/flyps/badge.svg?branch=master [coverage-url]: https://coveralls.io/github/Contargo/flyps?branch=master +[homepage]: https://contargo.github.io/flyps/ +[flyps-dom-snabbdom]: https://github.com/Contargo/flyps-dom-snabbdom/ +[snabbdom]: https://github.com/snabbdom/snabbdom