From 830a3577c7de49f06fc0c02123556c316239f024 Mon Sep 17 00:00:00 2001
From: Max Dobler <dobler@synyx.de>
Date: Thu, 4 Jul 2019 22:39:40 +0200
Subject: [PATCH 1/4] Add getting started to readme

---
 README.md | 57 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 57 insertions(+)

diff --git a/README.md b/README.md
index 16ad720..41c5b6a 100644
--- a/README.md
+++ b/README.md
@@ -10,9 +10,66 @@ Flyps is just flyps.
 **Woha, what's this. This is the new home for the Flyps project. We're just
 starting out, but make sure to come by again for an update.**
 
+# Getting started
+
+You can install flyps via npm:
+
+`npm i flyps`
+
+### Create a signal
+
+`Signals` are the core principle of flyps.
+
+```
+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);
+  }
+);
+```
+
+For more complex views we suggest to add the [flyps-dom-snabbdom] extension, which adds support for [snabbdom] rendering.
+
+### 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

From 73fc6212e5ba5ca2f906517ca4b43dfd4a602e35 Mon Sep 17 00:00:00 2001
From: Max Dobler <dobler@synyx.de>
Date: Thu, 4 Jul 2019 22:45:31 +0200
Subject: [PATCH 2/4] Fix link

---
 README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 41c5b6a..9142499 100644
--- a/README.md
+++ b/README.md
@@ -18,7 +18,7 @@ You can install flyps via npm:
 
 ### Create a signal
 
-`Signals` are the core principle of flyps.
+`Signals` are the core principle of flyps and are used everywhere.
 
 ```
 import { signal } from "flyps";
@@ -60,7 +60,7 @@ For more complex views we suggest to add the [flyps-dom-snabbdom] extension, whi
 
 ### More Examples
 
-More examples can be found on our [flyps homepage].
+More examples can be found on our flyps [homepage].
 
 
 

From 3bdccc4c97e110d9228a0910779879a089cc8610 Mon Sep 17 00:00:00 2001
From: Max Dobler <dobler@synyx.de>
Date: Thu, 4 Jul 2019 22:55:09 +0200
Subject: [PATCH 3/4] Enhance getting started

---
 README.md | 30 ++++++++++++++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/README.md b/README.md
index 9142499..1f128f8 100644
--- a/README.md
+++ b/README.md
@@ -58,6 +58,36 @@ mount(document.querySelector("#my-view"),
 
 For more complex views we suggest to add the [flyps-dom-snabbdom] extension, which adds support for [snabbdom] rendering.
 
+### 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` is updated or replaced 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].

From d140c594b7e9491ea4172f8ef004307e8dfb8f9d Mon Sep 17 00:00:00 2001
From: Max Dobler <dobler@synyx.de>
Date: Thu, 4 Jul 2019 22:57:06 +0200
Subject: [PATCH 4/4] Edit docs

---
 README.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 1f128f8..fa90796 100644
--- a/README.md
+++ b/README.md
@@ -56,10 +56,10 @@ mount(document.querySelector("#my-view"),
 );
 ```
 
-For more complex views we suggest to add the [flyps-dom-snabbdom] extension, which adds support for [snabbdom] rendering.
-
 ### 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`
 
 ```
@@ -82,7 +82,7 @@ mount(document.querySelector("#my-view"),
 );
 ```
 
-Whenever the `signal` is updated or replaced the view will be re-rendered with the new data.
+Whenever the `signal` changes the view will be re-rendered with the new data.
 
 ```
 data.reset("Hello User!");