docs: document it all
This commit is contained in:
@@ -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
|
||||||
|
|||||||
Reference in New Issue
Block a user