diff --git a/.gitignore b/.gitignore index 7582006..03944d1 100644 --- a/.gitignore +++ b/.gitignore @@ -1,10 +1,11 @@ node_modules/ coverage/ -coverage.json +dist/ tmp/ -npm-debug.log* -.DS_Store .sauce-credentials.json -*.swp sauce_connect.log +npm-debug.log* +coverage.json +.DS_Store +*.swp .zuulrc diff --git a/README.md b/README.md index 272cdae..0bea209 100644 --- a/README.md +++ b/README.md @@ -43,11 +43,6 @@ Standard - - - IRC - Freenode -
@@ -55,12 +50,16 @@ Handbook - | - Packages - | + | + Packages + | Contributing + | + + Chat +
@@ -80,6 +79,7 @@
  • Example
  • Philosophy
  • Concepts
    • +
  • Badges
  • API
  • FAQ
  • Installation
    • @@ -148,7 +148,7 @@ To run it, save it as `client.js` and run with [budo][budo] and [es2020][es2020]. These tools are convenient but any [browserify][browserify] based tool should do: ```sh -$ budo 'client.js' -p 8080 --open -- -t es2020 +$ budo client.js -p 8080 --open -- -t es2020 ``` And to save the output to files so it can be deployed, open a new terminal and @@ -236,17 +236,17 @@ namespaced or not. Namespacing means that only state within the model can be accessed. Models can still trigger actions on other models, though it's recommended to keep that to a minimum. -So say we have a `myTodos` namespace, an `add` reducer and a `todos` model. +So say we have a `todos` namespace, an `add` reducer and a `todos` model. Outside the model they're called by `send('todos:add')` and -`state.todos.todos`. Inside the namespaced model they're called by -`send('todos:add')` and `state.todos`. An example namespaced model: +`state.todos.items`. Inside the namespaced model they're called by +`send('todos:add')` and `state.items`. An example namespaced model: ```js const app = choo() app.model({ - namespace: 'myTodos', - state: { todos: [] }, + namespace: 'todos', + state: { items: [] }, reducers: { - add: (data, state) => ({ todos: state.todos.concat(data.payload) }) + add: (data, state) => ({ items: state.items.concat(data.payload) }) } }) ``` @@ -302,7 +302,11 @@ app.model({ namespace: 'app', subscriptions: [ (send, done) => { - setInterval(() => send('app:print', { payload: 'dog?' }), 1000) + setInterval(() => { + send('app:print', { payload: 'dog?', myOtherValue: 1000 }, (err) => { + if (err) return done(err) + }) + }, 1000) } ], effects: { @@ -357,6 +361,15 @@ const view = (state, prev, send) => { ``` In this example, when the `Add` button is clicked, the view will dispatch an `add` action that the model’s `add` reducer will receive. [As seen above](#models), the reducer will add an item to the state’s `todos` array. The state change will cause this view to be run again with the new state, and the resulting DOM tree will be used to [efficiently patch the DOM](#does-choo-use-a-virtual-dom). +## Badges +Using `choo` in a project? Show off which version you've used using a badge: + + +[![built with choo v3](https://img.shields.io/badge/built%20with%20choo-v3-ffc3e4.svg?style=flat-square)](https://github.com/yoshuawuyts/choo) +```md +[![built with choo v3](https://img.shields.io/badge/built%20with%20choo-v3-ffc3e4.svg?style=flat-square)](https://github.com/yoshuawuyts/choo) +``` + ## API This section provides documentation on how each function in `choo` works. It's intended to be a technical reference. If you're interested in learning choo for @@ -399,11 +412,13 @@ arguments: - __subscriptions:__ asynchronous read-only operations that don't modify state directly. Can call `actions`. Signature of `(send, done)`. -#### send(actionName, data?) +#### send(actionName, data?[,callback]) Send a new action to the models with optional data attached. Namespaced models can be accessed by prefixing the name with the namespace separated with a `:`, e.g. `namespace:name`. +When sending data from inside a `model` it expects exactly three arguments: the name of the action you're calling, the data you want to send, and finally a callback to handle errors through the global `onError()` hook. So if you want to send two values, you'd have to either send an array or object containing them. + #### done(err?, res?) When an `effect` or `subscription` is done executing, or encounters an error, it should call the final `done(err, res)` callback. If an `effect` was called @@ -624,6 +639,8 @@ $ npm install choo ## See Also - [choo-handbook](https://github.com/yoshuawuyts/choo-handbook) - the little `choo` guide +- [awesome-choo](https://github.com/YerkoPalma/awesome-choo) - Awesome things + related with choo framework - [budo](https://github.com/mattdesl/budo) - quick prototyping tool for `browserify` - [stack.gl](http://stack.gl/) - open software ecosystem for WebGL diff --git a/examples/mailbox/package.json b/examples/mailbox/package.json index 9a1e58b..c14dfc1 100644 --- a/examples/mailbox/package.json +++ b/examples/mailbox/package.json @@ -11,6 +11,7 @@ "dependencies": { "css-wipe": "^4.2.1", "dateformat": "^1.0.12", + "pathname-match": "^1.1.3", "tachyons": "^4.0.0-beta.33" }, "devDependencies": { diff --git a/examples/vanilla/index.html b/examples/vanilla/index.html new file mode 100644 index 0000000..cd93a66 --- /dev/null +++ b/examples/vanilla/index.html @@ -0,0 +1,42 @@ + + + Vanilla example + + + + + + diff --git a/index.js b/index.js index bb7974d..1bd34d4 100644 --- a/index.js +++ b/index.js @@ -124,7 +124,7 @@ function choo (opts) { } function wrap (child, route) { - const send = createSend(route, true) + const send = createSend('view: ' + route, true) return function chooWrap (params, state) { const nwPrev = prev const nwState = prev = xtend(state, { params: params }) diff --git a/package.json b/package.json index 85abb3b..212e161 100644 --- a/package.json +++ b/package.json @@ -1,17 +1,20 @@ { "name": "choo", - "version": "3.0.1", + "version": "3.0.2", "description": "A 5kb framework for creating sturdy frontend applications", "main": "index.js", "scripts": { - "deps": "dependency-check . && dependency-check . --extra --no-dev -i xhr", - "test:electron": "browserify tests/**/*.js -t es2020 -p proxyquire-universal | tape-run", - "test:cov": "browserify tests/**/*.js -t es2020 -p proxyquire-universal -p tape-istanbul/plugin | tape-run | tape-istanbul && istanbul report", - "test:server": "standard && npm run deps && NODE_ENV=test node tests/server/*", - "test:browser": "standard && npm run deps && NODE_ENV=test zuul tests/browser/*", - "test:browser:local": "standard && npm run deps && NODE_ENV=test zuul --local 8080 -- tests/browser/*", + "deps": "./scripts/test deps", + "test:electron": "./scripts/test electron", + "test:cov": "./scripts/test cov", + "test:server": "./scripts/test server", + "test:browser": "./scripts/test browser", + "test:browser-local": "./scripts/test browser-local", "preversion": "if [ ! -z $SKIP_TEST ]; then npm run test:browser; fi", - "test": "npm run test:electron" + "test": "npm run test:electron", + "build:dev": "./scripts/build dev", + "build:min": "./scripts/build min", + "prepublish": "npm run build:dev && npm run build:min" }, "repository": "yoshuawuyts/choo", "keywords": [ @@ -22,6 +25,11 @@ "composable", "tiny" ], + "files": [ + "index.js", + "http.js", + "dist" + ], "license": "MIT", "dependencies": { "barracks": "^8.0.0", @@ -41,6 +49,7 @@ "browserify-istanbul": "^2.0.0", "bundle-collapser": "^1.2.1", "dependency-check": "^2.5.1", + "envify": "^3.4.1", "es2020": "^1.0.1", "geval": "~2.1.1", "insert-css": "^0.2.0", @@ -57,6 +66,9 @@ "tape": "^4.5.1", "tape-istanbul": "~1.0.2", "tape-run": "~2.1.4", + "uglifyify": "^3.0.2", + "uglifyjs": "^2.4.10", + "unassertify": "^2.0.3", "yo-yoify": "^3.1.0", "zuul": "toddself/zuul" } diff --git a/scripts/build b/scripts/build new file mode 100755 index 0000000..c99a807 --- /dev/null +++ b/scripts/build @@ -0,0 +1,44 @@ +#!/bin/sh + +dirname=$(dirname "$(readlink -f "$0")") + +browserify="$dirname/../node_modules/.bin/browserify" +uglify="$dirname/../node_modules/.bin/uglifyjs" + +usage () { + printf "Usage: build-umd \n" +} + +build_dev () { + mkdir -p dist/ + NODE_ENV=development "$browserify" index.js \ + --standalone=choo \ + -t envify \ + > dist/choo.js +} + +build_min () { + mkdir -p dist/ + NODE_ENV=production "$browserify" index.js \ + --standalone=choo \ + -t envify \ + -g unassertify \ + -g uglifyify \ + | "$uglify" \ + > dist/choo.min.js +} + +# parse CLI flags +while true; do + case "$1" in + -h|--help) usage && exit 1 ;; + -- ) shift; break ;; + * ) break ;; + esac +done + +case "$1" in + d|dev) shift; build_dev "$@" ;; + m|min) shift; build_min "$@" ;; + *) shift; build_min "$@" ;; +esac diff --git a/scripts/test-size b/scripts/instrument similarity index 97% rename from scripts/test-size rename to scripts/instrument index 009daf9..123c132 100755 --- a/scripts/test-size +++ b/scripts/instrument @@ -48,7 +48,9 @@ run_discify () { getopt -T > /dev/null if [ "$?" -eq 4 ]; then args="$(getopt --long help discify minified --options hmdg -- "$*")" -else args="$(getopt h "$*")"; fi +else + args="$(getopt h "$*")"; +fi [ ! $? -eq 0 ] && { usage && exit 2; } eval set -- "$args" diff --git a/scripts/test b/scripts/test new file mode 100755 index 0000000..08ddca3 --- /dev/null +++ b/scripts/test @@ -0,0 +1,85 @@ +#!/bin/sh + +# setting exit because we're linting and need to exit on failure +set -e + +dirname=$(dirname "$(readlink -f "$0")") + +dependency_check="$dirname/../node_modules/.bin/dependency-check" +tape_istanbul="$dirname/../node_modules/.bin/tape-istanbul" +browserify="$dirname/../node_modules/.bin/browserify" +standard="$dirname/../node_modules/.bin/standard" +tape_run="$dirname/../node_modules/.bin/tape-run" +istanbul="$dirname/../node_modules/.bin/istanbul" +zuul="$dirname/../node_modules/.bin/zuul" + +usage () { + printf "Usage: test\n" +} + +lint () { + "$standard" +} + +test_electron () { + check_deps + lint + "$browserify" tests/**/*.js \ + -t es2020 \ + -p proxyquire-universal \ + | "$tape_run" +} + +test_cov () { + check_deps + lint + "$browserify" tests/**/*.js \ + -t es2020 \ + -p proxyquire-universal \ + -p tape-istanbul/plugin \ + | "$tape_run" \ + | "$tape_istanbul" \ + && "$istanbul" report +} + +test_server () { + lint + standard + check_deps + NODE_ENV=test node tests/server/* +} + +test_browser () { + NODE_ENV=test "$zuul" tests/browser/* +} + +test_browser_local () { + lint + check_deps + NODE_ENV=test "$zuul" --local 8080 -- tests/browser/* +} + +check_deps () { + "$dependency_check" . --entry 'index.js' + "$dependency_check" . --entry 'index.js' --extra --no-dev \ + -i xhr +} + +# set CLI flags +# parse CLI flags +while true; do + case "$1" in + -h|--help) usage && exit 1 ;; + -- ) shift; break ;; + * ) break ;; + esac +done + +case "$1" in + e|electron) shift; test_electron "$@" && exit ;; + b|browser) shift; test_browser "$@" && exit ;; + l|browser-local) shift; test_browser_local "$@" && exit ;; + s|server) shift; test_server "$@" && exit ;; + c|cov) shift; test_cov "$@" && exit ;; + d|deps) shift; check_deps "$@" && exit ;; +esac diff --git a/tests/browser/hooks.js b/tests/browser/hooks.js index b38caea..e26c961 100644 --- a/tests/browser/hooks.js +++ b/tests/browser/hooks.js @@ -15,7 +15,7 @@ test('hooks', function (t) { t.deepEqual(action, {foo: 'bar'}, 'onAction: action data') t.equal(state.clicks, 0, 'onAction: current state: 0 clicks') t.equal(name, 'click', 'onAction: action name') - t.equal(caller, '/', 'onAction: caller name') + t.equal(caller, 'view: /', 'onAction: caller name') t.equal(typeof createSend, 'function', 'onAction: createSend fn') }, onStateChange: function (action, state, prev, createSend) {