Merge branch '0.9.0'

README.md

@@ -20,7 +20,7 @@ HyperApp is a JavaScript library for building frontend applications.
 
 ## Hello World
 
-[CodePen](https://codepen.io/jbucaran/pen/Qdwpxy) · [Examples](https://hyperapp.glitch.me)
+[CodePen](https://codepen.io/hyperapp/pen/Qdwpxy?editors=0010) · [Examples](https://hyperapp.glitch.me)
 
 ```jsx
 app({

docs/applications.md

@@ -8,9 +8,9 @@ app({
 })
 ```
 
-The app function renders the given view and appends it to <samp>[document.body](https://developer.mozilla.org/en-US/docs/Web/API/Document/body)</samp>.
+The <samp>app</samp> function renders the given view and appends it to <samp>[document.body](https://developer.mozilla.org/en-US/docs/Web/API/Document/body)</samp>.
 
-To mount the application on a different element, use the <samp>[root](/docs/api.md#root)</samp> property.
+To mount the application on a different element, use the [root](/docs/api.md#root) property.
 
 ```jsx
 app({
@@ -21,7 +21,7 @@ app({
 
 ## View and State
 
-The <samp>[view](/docs/api.md#view)</samp> is a function of the state. It is called every time the state is modified to reconstruct the application's [virtual node](/docs/virtual-nodes.md) tree which is used to update the DOM.
+The [view](/docs/api.md#view) is a function of the state. It is called every time the state is modified to reconstruct the application's [virtual node](/docs/virtual-nodes.md) tree which is used to update the DOM.
 
 ```jsx
 app({
@@ -30,7 +30,7 @@ app({
 })
 ```
 
-Use the <samp>[state](/docs/api.md#state)</samp> to describe your application's data model.
+Use the [state](/docs/api.md#state) to describe your application's data model.
 
 ```jsx
 app({
@@ -44,7 +44,7 @@ app({
 
 ## Actions
 
-Use <samp>[actions](/docs/api.md#actions)</samp> to update the state.
+Use [actions](/docs/api.md#actions) to update the state.
 
 ```jsx
 app({
@@ -110,7 +110,7 @@ app({
 })
 ```
 
-An action may return a <samp>[Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)</samp>. This enables you to use [async functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function).
+An action may return a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise). This enables you to use [async functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function).
 
 ```jsx
 const delay = seconds =>
@@ -157,7 +157,7 @@ app({
 
 ## Events
 
-Use <samp>[events](/docs/api.md#events)</samp> to get notified when your application is completely loaded, before a view is rendered, etc.
+Use [events](/docs/api.md#events) to get notified when your application is completely loaded, before a view is rendered, etc.
 
 ```jsx
 app({
@@ -197,7 +197,7 @@ For a practical example see the implementation of the [Router](https://github.co
 
 ### Custom Events
 
-To create custom events, use the <samp>[emit](/docs/api.md#emit)</samp> function which is passed as the last argument to actions and events.
+To create custom events, use the <samp>[emit](/docs/api.md#emit)</samp> function which is passed as the last argument to actions/events.
 
 ```jsx
 app({
@@ -217,7 +217,7 @@ app({
 
 ## Plugins
 
-Use <samp>[plugins](/docs/api.md#events)</samp> to share bits of functionality across your application.
+Use [plugins](/docs/api.md#events) to share bits of functionality across your application.
 
 ```jsx
 const Logger = () => ({

docs/countdown-timer.md

@@ -2,7 +2,7 @@
 
 In this section we'll walk through a countdown timer example and use <samp>[events.loaded](/docs/api.md#events-loaded)</samp> to register global events.
 
-[View Online](https://codepen.io/hyperapp/pen/xdRjrL?editors=0010)
+[View Online](https://codepen.io/hyperapp/pen/evOZLv?editors=0010)
 
 ```jsx
 const pad = n => (n < 10 ? "0" + n : n)
@@ -51,7 +51,7 @@ app({
 })
 ```
 
-In this application, the state stores two properties: <samp>count</samp>, a number to track the seconds elapsed; and <samp>paused</samp>, a boolean to check if the clock is running or not.
+Tthe state consists of <samp>count</samp>, a number to track the seconds elapsed; and <samp>paused</samp>, a boolean to check if the clock is running or not.
 
 ```jsx
 state: {

docs/counter.md

@@ -2,7 +2,7 @@
 
 In this section we'll walk through a simple counter example.
 
-[View Online](https://codepen.io/hyperapp/pen/GmjLYb?editors=0010)
+[View Online](https://codepen.io/hyperapp/pen/zNxZLP?editors=0010)
 
 ```jsx
 app({

docs/getting-started.md

@@ -9,10 +9,10 @@ The easiest way to get started with HyperApp is to grab the minified library fro
 You can use a specific version too.
 
 ```html
-<script src="https://unpkg.com/hyperapp@0.8.1"></script>
+<script src="https://unpkg.com/hyperapp@0.9.0"></script>
 ```
 
-Or try it on [CodePen](http://codepen.io/jbucaran/pen/Qdwpxy?editors=0010).
+Or try it on [CodePen](https://codepen.io/hyperapp/pen/Qdwpxy?editors=0010).
 
 ## Hello World
 
@@ -36,7 +36,7 @@ Create an <samp>index.html</samp> file, paste the code below and open it in your
 
 ## How does it work?
 
-The <samp>[h](/docs/api.md#h)</samp> function returns an object that represents a DOM element. This object is called a [virtual node](/docs/virtual-node.md).
+The <samp>[h](/docs/api.md#h)</samp> function returns an object that represents a DOM element. This object is known as a [virtual node](/docs/virtual-node.md).
 
 ```js
 {
@@ -50,7 +50,7 @@ The <samp>[app](/docs/api.md#app)</samp> function renders the view and mounts it
 
 ## Hyperx/JSX
 
-You may prefer [Hyperx](/docs/hyperx.md)/[JSX](/docs/jsx.md) to describe your views and compile them to <samp>h</samp> function calls using a [Build Pipeline](#build-pipeline).
+You may prefer [Hyperx](/docs/hyperx.md)/[JSX](/docs/jsx.md) to describe your views and compile them to <samp>h</samp> function calls using a [build pipeline](#build-pipeline).
 
 If you are already using Hyperx, you may skip the compilation step at the expense of slightly inferior performance.
 

docs/gif-search.md

@@ -1,6 +1,6 @@
 # Gif Search
 
-In this section we'll learn how to implement a gif search using the [Giphy API](https://api.giphy.com/) and update the state asynchronously.
+In this section we'll implement a gif search using the [Giphy API](https://api.giphy.com/) and learn how to update the state asynchronously.
 
 [View Online](https://codepen.io/hyperapp/pen/LybmLe?editors=0010)
 
@@ -52,7 +52,7 @@ app({
 })
 ```
 
-The state stores a string of the gif URL and a boolean to know when the browser is fetching a new gif.
+The state has a string for the gif URL and a boolean to know when the browser is fetching a new gif.
 
 ```jsx
 state: {
@@ -83,7 +83,7 @@ if (state.isFetching || text === "") {
 
 Inside <samp>actions.search</samp> we use the <samp>[fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)</samp> API to request a gif URL from Giphy.
 
-When <samp>fetch</samp> is done, we receive the payload with the gif information inside a <samp>[Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)</samp>.
+When <samp>fetch</samp> is done, we receive the payload with the gif information inside a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise).
 
 ```jsx
 fetch(
@@ -96,5 +96,5 @@ fetch(
   })
 ```
 
-We then toggle <samp>isFetching</samp> to indicate we're available to request a new URL and update the state using <samp>actions.setUrl</samp>.
+Finally, we toggle <samp>isFetching</samp> to indicate we're available to request a new URL and update the state using <samp>actions.setUrl</samp>.
 

docs/lifecycle-events.md

@@ -24,7 +24,7 @@ Called before the element is removed from the DOM.
 
 ## Examples
 
-Integration with [CodeMirror](https://codemirror.net/).
+This example shows how to create a [custom tag](/docs/custom-tags.md) to wrap [CodeMirror](https://codemirror.net/).
 
 <a name="cb1"><a/>[View Online](https://hyperapp-code-mirror.glitch.me)
 
@@ -34,7 +34,8 @@ const editor = CodeMirror(node)
 
 const Editor = props => {
   const setOptions = props =>
-    Object.keys(props).forEach(key => editor.setOption(key, props[key]))
+    Object.keys(props).forEach(key =>
+      editor.setOption(key, props[key]))
 
   return (
     <div
@@ -47,3 +48,4 @@ const Editor = props => {
   )
 }
 ```
+

docs/router.md

@@ -25,7 +25,7 @@ When the page loads or the browser fires a <samp>[popstate](https://developer.mo
 |-------------------------|-----------------------------------|
 | <samp>*</samp>          | Match if no other route matches.
 | <samp>/</samp>          | /
-| <samp>/:foo</samp>      | Match using the regular expression <samp>[A-Za-z0-9]+</samp>. The params are stored in <samp>[state.router.params](#router-params)</samp>.
+| <samp>/:foo</samp>      | Match using the regular expression <samp>[A-Za-z0-9]+</samp>.</br>The params are stored in <samp>[state.router.params](#router-params)</samp>.
 
 
 To navigate to a different route use <samp>[actions.router.go](#actions-go)</samp>.