diff --git a/README.md b/README.md index 0bea209..230873b 100644 --- a/README.md +++ b/README.md @@ -100,8 +100,8 @@ ## Demos - :truck: [Input example](http://requirebin.com/?gist=e589473373b3100a6ace29f7bbee3186) ([repo](examples/title/)) -- :water_buffalo: [HTTP effects example](https://hyperdev.com/#!/project/fork-fang) - ([repo](https://fork-fang.hyperdev.space/)) +- :water_buffalo: [HTTP effects example](https://fork-fang.hyperdev.space/) + ([repo](https://hyperdev.com/#!/project/fork-fang)) - :mailbox: [Mailbox routing](examples/mailbox/) - :ok_hand: [TodoMVC](http://shuheikagawa.com/todomvc-choo/) ([repo](https://github.com/shuhei/todomvc-choo)) @@ -283,6 +283,27 @@ Examples of effects include: performing (server requests), calling multiple `reducers`, persisting state to [localstorage][localstorage]. +```js +const http = require('choo/http') +const choo = require('choo') +const app = choo() +app.model({ + namespace: 'todos', + state: { items: [] }, + effects: { + addAndSave: (data, state, send, done) => { + http.post('/todo', {body: data.payload, json: true}, (err, res, body) => { + data.payload.id = body.id + send('todos:add', data, done) + }) + } + }, + reducers: { + add: (data, state) => ({ items: state.items.concat(data.payload) }) + } +}) +``` + When an `effect` is done executing, it should call the `done(err, res)` callback. This callback used to communicate when an `effect` is done, handle possible errors and send values back to the caller. You'll probably notice when diff --git a/examples/async-counter/client.js b/examples/async-counter/client.js new file mode 100644 index 0000000..f7f7354 --- /dev/null +++ b/examples/async-counter/client.js @@ -0,0 +1,44 @@ +const choo = require('../../') +const html = require('../../html') +const plur = require('plur') + +const app = choo() +app.model({ + state: { + counter: 0 + }, + reducers: { + increment: (data, state) => ({ counter: state.counter + 1 }), + decrement: (data, state) => ({ counter: state.counter - 1 }) + }, + effects: { + incrementAsync: function (data, state, send, done) { + setTimeout(() => send('increment', done), 1000) + }, + decrementAsync: function (data, state, send, done) { + setTimeout(() => send('decrement', done), 1000) + } + } +}) + +const mainView = (state, prev, send) => { + const count = state.counter; + + return html` +
+

Async counter

+

Clicked ${count} ${plur('time', count)}!

+ + + + +
+ ` +} + +app.router((route) => [ + route('/', mainView) +]) + +const tree = app.start() +document.body.appendChild(tree) diff --git a/examples/async-counter/package.json b/examples/async-counter/package.json new file mode 100644 index 0000000..a923e54 --- /dev/null +++ b/examples/async-counter/package.json @@ -0,0 +1,16 @@ +{ + "name": "cancellable-counter", + "version": "1.0.0", + "description": "", + "main": "client.js", + "scripts": { + "start": "budo client.js -p 8080" + }, + "keywords": [], + "author": "Juan Soto ", + "license": "ISC", + "dependencies": { + "budo": "^8.3.0", + "plur": "^2.1.2" + } +} diff --git a/examples/vanilla/index.html b/examples/vanilla/index.html index cd93a66..e98fdef 100644 --- a/examples/vanilla/index.html +++ b/examples/vanilla/index.html @@ -13,13 +13,13 @@ count: 0 }, reducers: { - increment: (action, state) => ({count: state.count + 1}), - decrement: (action, state) => ({count: state.count - 1}) + increment: (data, state) => ({count: state.count + 1}), + decrement: (data, state) => ({count: state.count - 1}) } }) - const mainView = (params, state, send) => { - return choo.view` + const mainView = (state, prev, send) => { + return html`

Counter example

diff --git a/index.js b/index.js index 1bd34d4..a047d75 100644 --- a/index.js +++ b/index.js @@ -47,7 +47,7 @@ function choo (opts) { function createSend () { return function send () { - assert.fail('choo: send() cannot be called from Node') + assert.ok(false, 'choo: send() cannot be called from Node') } } } diff --git a/package.json b/package.json index 6299a47..7e38caf 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "choo", - "version": "3.1.1", + "version": "3.1.2", "description": "A 5kb framework for creating sturdy frontend applications", "main": "index.js", "scripts": { @@ -14,7 +14,10 @@ "test": "npm run test:electron", "build:dev": "./scripts/build dev", "build:min": "./scripts/build min", - "prepublish": "npm run build:dev && npm run build:min" + "prepublish": "npm run build:dev && npm run build:min", + "instrument:discify": "./scripts/instrument discify", + "instrument:minified": "./scripts/instrument minified", + "instrument:gzip": "./scripts/instrument gzip" }, "repository": "yoshuawuyts/choo", "keywords": [ @@ -37,7 +40,7 @@ "document-ready": "~1.0.2", "global": "^4.3.0", "hash-match": "^1.0.2", - "nanoraf": "^2.0.0", + "nanoraf": "^2.1.1", "sheet-router": "^3.1.0", "xhr": "^2.2.0", "xtend": "^4.0.1", @@ -57,7 +60,6 @@ "gzip-size-cli": "^1.0.0", "insert-css": "^0.2.0", "istanbul": "^0.4.4", - "karma-sauce-launcher": "^1.0.0", "min-document": "~2.18.0", "pretty-bytes-cli": "^1.0.0", "proxyquire": "~1.7.10", diff --git a/scripts/build b/scripts/build index 8853679..57fb9c1 100755 --- a/scripts/build +++ b/scripts/build @@ -1,10 +1,5 @@ #!/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" } @@ -21,7 +16,7 @@ gzip () { build_dev () { mkdir -p dist/ - NODE_ENV=development "$browserify" index.js \ + NODE_ENV=development browserify index.js \ --standalone=choo \ -t envify \ -g yo-yoify \ @@ -31,7 +26,7 @@ build_dev () { build_min () { mkdir -p dist/ - NODE_ENV=production "$browserify" index.js \ + NODE_ENV=production browserify index.js \ --standalone=choo \ -t envify \ -g unassertify \ @@ -41,7 +36,6 @@ build_min () { -t envify \ -p bundle-collapser/plugin \ | uglifyjs \ - | "$uglify" \ > dist/choo.min.js } diff --git a/scripts/instrument b/scripts/instrument index ced46c4..eb077f8 100755 --- a/scripts/instrument +++ b/scripts/instrument @@ -1,13 +1,5 @@ #!/bin/sh -dirname=$(dirname "$(readlink -f "$0")") - -browserify="$dirname/../node_modules/.bin/browserify" -uglify="$dirname/../node_modules/.bin/uglifyjs" -pretty_bytes="$dirname/../node_modules/.bin/pretty-bytes" -gzip_size="$dirname/../node_modules/.bin/gzip-size" -discify="$dirname/../node_modules/.bin/discify" - usage () { cat << USAGE script/test-size @@ -24,45 +16,45 @@ gzip () { if [ $? -eq 0 ]; then zopfli "$1" -i1000 -c | wc -c else - "$gzip_size" < "$1" + gzip-size < "$1" fi } gzip_size () { mkdir -p tmp/ - "$browserify" index.js \ + browserify index.js \ -g unassertify \ -g yo-yoify \ -g es2020 \ -g uglifyify \ -p bundle-collapser/plugin \ - | "$uglify" \ + | uglifyjs \ > tmp/bundle.min.js - gzip tmp/bundle.min.js | "$pretty_bytes" + gzip tmp/bundle.min.js | pretty-bytes rm -rf tmp/ } min_size () { - "$browserify" index.js \ + browserify index.js \ -g unassertify \ -g yo-yoify \ -g es2020 \ -g uglifyify \ -p bundle-collapser/plugin \ - | "$uglify" \ + | uglifyjs \ | wc -c \ - | "$pretty_bytes" + | pretty-bytes } run_discify () { - "$browserify" index.js --full-paths \ + browserify index.js --full-paths \ -g unassertify \ -g yo-yoify \ -g es2020 \ -g uglifyify \ - | "$uglify" \ - | "$discify" --open + | uglifyjs \ + | discify --open } # set CLI flags diff --git a/scripts/test b/scripts/test index 08ddca3..e004fd1 100755 --- a/scripts/test +++ b/scripts/test @@ -3,43 +3,33 @@ # 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" + standard } test_electron () { check_deps lint - "$browserify" tests/**/*.js \ + browserify tests/**/*.js \ -t es2020 \ -p proxyquire-universal \ - | "$tape_run" + | tape-run } test_cov () { check_deps lint - "$browserify" tests/**/*.js \ + browserify tests/**/*.js \ -t es2020 \ -p proxyquire-universal \ -p tape-istanbul/plugin \ - | "$tape_run" \ - | "$tape_istanbul" \ - && "$istanbul" report + | tape-run \ + | tape-istanbul \ + && istanbul report } test_server () { @@ -50,18 +40,18 @@ test_server () { } test_browser () { - NODE_ENV=test "$zuul" tests/browser/* + NODE_ENV=test zuul tests/browser/* } test_browser_local () { lint check_deps - NODE_ENV=test "$zuul" --local 8080 -- tests/browser/* + NODE_ENV=test zuul --local 8080 -- tests/browser/* } check_deps () { - "$dependency_check" . --entry 'index.js' - "$dependency_check" . --entry 'index.js' --extra --no-dev \ + dependency-check . --entry 'index.js' + dependency-check . --entry 'index.js' --extra --no-dev \ -i xhr }