docs: document it all

This commit is contained in:
Yoshua Wuyts
2016-05-11 15:26:27 +07:00
parent 1fdb63c3c2
commit e82941af97
+55 -6
View File
@@ -22,7 +22,9 @@ const choo = require('choo')
const app = choo() const app = choo()
app.model('title', { app.model('title', {
state: { title: 'my-demo-app' }, state: {
title: 'my-demo-app'
},
reducers: { reducers: {
'update': (action, state) => ({ title: action.payload }) 'update': (action, state) => ({ title: action.payload })
}, },
@@ -51,13 +53,45 @@ document.body.appendChild(tree)
``` ```
## Concepts ## Concepts
- __state:__ - __state:__ a single object that contains all application state, should only
- __reducers:__ ever be modified by `reducers`
- __effects:__ - __reducers:__ syncronous functions that modify `state`
- __subscriptions:__ - __effects:__ asyncronous functions that perform IO. Effects should call
`send()` when done
- __subscriptions:__ streams of data that can either be written to or read from
## API ## API
### choo ### app = choo()
Create a new `choo` app
### app.model(name?, obj)
Create a new model. Models modify data and perform IO. Obj takes the following
arguments:
- __state:__ object. Key value store of initial values
- __reducers:__ object. Syncronous functions that modify state. Each function
has a signature of `(action, state)`
- __effects:__ object. Asyncronous functions that perform IO. Each function has
a signature of `(action, state, send)` where `send` is a reference to
`app.send()`
If a `name` string is passed as a first argument, `reducers` and `signatures`
will be prefixed by the name. So if name is "user" and a reducer called
"update" is registered, it would be accessed as `'user:update'` in `send()`.
### choo.view\`html\`
Tagged template string HTML builder. See
[`yo-yo`](https://github.com/maxogden/yo-yo) for full documentation. Views
should be passed to `app.router()`
### app.router(params, state, send)
Creates a new router. See
[`sheet-router`](https://github.com/yoshuawuyts/sheet-router) for full
documentation. Registered views have a signature of `(params, state, send)`,
where `params` is URI partials.
### tree = app.start()
Start the application. Returns a DOM element that can be mounted using
`document.body.appendChild()`.
## Packages used ## Packages used
- __views:__ [`yo-yo`](https://github.com/maxogden/yo-yo) - __views:__ [`yo-yo`](https://github.com/maxogden/yo-yo)
@@ -65,6 +99,21 @@ document.body.appendChild(tree)
[`xtend`](https://github.com/raynos/xtend) [`xtend`](https://github.com/raynos/xtend)
- __routes:__ [`sheet-router`](https://github.com/yoshuawuyts/sheet-router) - __routes:__ [`sheet-router`](https://github.com/yoshuawuyts/sheet-router)
## Optimizing
To bring down file size, consider running the following `browserify`
transforms:
- [unassertify](https://github.com/twada/unassertify) - remove `assert()`
statements which reduces file size. Use as a `--global` transform
- [varify](https://github.com/thlorenz/varify) - replace `const` with `var`
statements. Use as a `--global` transform
- [uglifyify](https://github.com/hughsk/uglifyify) - minify your code using
UglifyJS2. Use as a `--global` transform
## Packages that work well together
- [xhr](https://github.com/Raynos/xhr) - small XHR wrapper
- [tachyons](https://github.com/tachyons-css/tachyons) - functional CSS for
humans
## Installation ## Installation
```sh ```sh
$ npm install choo $ npm install choo