From 3434d681a496a362feb4ac3b50da58febba50e01 Mon Sep 17 00:00:00 2001 From: Tim Wisniewski Date: Thu, 14 Jul 2016 06:26:16 -0400 Subject: [PATCH 01/19] Update args in examples/vanilla to 3.0 (#170) --- examples/vanilla/index.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) 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

From dd88941d774aea03ffc061cb75a93cc5a7d8cbcc Mon Sep 17 00:00:00 2001 From: Lucas Cherkewski Date: Thu, 14 Jul 2016 15:10:08 -0400 Subject: [PATCH 02/19] Use properly formatted assert() statement for send() on server --- index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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') } } } From f38dba53607e115cc6d2efa74f21050950d7df10 Mon Sep 17 00:00:00 2001 From: Yoshua Wuyts Date: Wed, 6 Jul 2016 11:00:37 +0200 Subject: [PATCH 03/19] 3.0.1 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 85adacf..8035b1d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "choo", - "version": "3.0.0", + "version": "3.0.1", "description": "A 5kb framework for creating sturdy frontend applications", "main": "index.js", "scripts": { From b22c0d46816f1402a938827c4c4befc05c40da0f Mon Sep 17 00:00:00 2001 From: Yoshua Wuyts Date: Wed, 6 Jul 2016 12:57:14 +0200 Subject: [PATCH 04/19] docs: emojify demos --- README.md | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index 75b5fb1..f5e1b1f 100644 --- a/README.md +++ b/README.md @@ -98,14 +98,16 @@ - __very cute:__ choo choo! ## Demos -- [Input example](examples/title/) - ([requirebin](http://requirebin.com/?gist=e589473373b3100a6ace29f7bbee3186)) -- [HTTP effects example](https://fork-fang.hyperdev.space/) - ([hyperdev](https://hyperdev.com/#!/project/fork-fang)) -- [Mailbox routing example](examples/mailbox/) - (@examples directory) -- [TodoMVC](http://shuheikagawa.com/todomvc-choo/) - ([github](https://github.com/shuhei/todomvc-choo)) +- :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/)) +- :mailbox: [Mailbox routing](examples/mailbox/) +- :ok_hand: [TodoMVC](http://shuheikagawa.com/todomvc-choo/) + ([repo](https://github.com/shuhei/todomvc-choo)) +- :fire: [Choo-firebase](https://github.com/mw222rs/choo-firebase) +- :seedling: [Grow](https://grow.static.land/) + ([repo](https://github.com/sethvincent/grow)) _note: If you've built something cool using `choo` or are using it in production, we'd love to hear from you!_ From 34709686598189ac30efca9148a5f1143e0b2938 Mon Sep 17 00:00:00 2001 From: Yoshua Wuyts Date: Wed, 6 Jul 2016 14:56:18 +0200 Subject: [PATCH 05/19] docs: fix subs signature --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index f5e1b1f..272cdae 100644 --- a/README.md +++ b/README.md @@ -397,7 +397,7 @@ arguments: Triggered by `actions`, can call `actions`. Signature of `(data, state, send, done)` - __subscriptions:__ asynchronous read-only operations that don't modify state - directly. Can call `actions`. Signature of `(state, send, done)`. + directly. Can call `actions`. Signature of `(send, done)`. #### send(actionName, data?) Send a new action to the models with optional data attached. Namespaced models From fc38d534b6a46eff22ddf1d827f9ab988efd5237 Mon Sep 17 00:00:00 2001 From: Yoshua Wuyts Date: Wed, 6 Jul 2016 17:56:21 +0200 Subject: [PATCH 06/19] docs: add awesome-choo --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index 272cdae..836cf6b 100644 --- a/README.md +++ b/README.md @@ -624,6 +624,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 From dbe41b9793830f5982d1ca3dfc62eee0142b3d20 Mon Sep 17 00:00:00 2001 From: Brad Simantel Date: Wed, 6 Jul 2016 14:35:46 -0700 Subject: [PATCH 07/19] Add pathname-match dependency to mailbox example The pathname-match module is being required in the pathname element, but wasn't actually included as a dependency. --- examples/mailbox/package.json | 1 + 1 file changed, 1 insertion(+) 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": { From ed5ba541371857ff79a33689b8c6e4706ffe4374 Mon Sep 17 00:00:00 2001 From: traducer Date: Thu, 7 Jul 2016 09:46:14 +0000 Subject: [PATCH 08/19] updated readme example for subscriptions, sending data from inside a model expects exactly 3 arguments --- README.md | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 836cf6b..ced5ebd 100644 --- a/README.md +++ b/README.md @@ -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: { @@ -399,11 +403,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 From f5f4d7493bccbdb536bb70997e78325fb6747a70 Mon Sep 17 00:00:00 2001 From: Tim Wisniewski Date: Fri, 8 Jul 2016 06:13:39 -0400 Subject: [PATCH 09/19] Correct model namespace example (#143) --- README.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index ced5ebd..c97fc80 100644 --- a/README.md +++ b/README.md @@ -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) => ({ todos: state.items.concat(data.payload) }) } }) ``` From 08c15b5f5e25c3647d98c4c6fab5aff58dea99f4 Mon Sep 17 00:00:00 2001 From: Yoshua Wuyts Date: Fri, 8 Jul 2016 12:19:15 +0200 Subject: [PATCH 10/19] onAction: prefix views with view --- index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.js b/index.js index 5c140f6..f87b02d 100644 --- a/index.js +++ b/index.js @@ -117,7 +117,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 }) From 7c05b858de7ffb930e4a9b8b101e1c4c33cc31fc Mon Sep 17 00:00:00 2001 From: Yoshua Wuyts Date: Fri, 8 Jul 2016 13:46:23 +0200 Subject: [PATCH 11/19] 3.0.2 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 8035b1d..aaef47a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "choo", - "version": "3.0.1", + "version": "3.0.2", "description": "A 5kb framework for creating sturdy frontend applications", "main": "index.js", "scripts": { From 17959b810569270c6ed033b96a6e164064c5629f Mon Sep 17 00:00:00 2001 From: Juan Soto Date: Sat, 9 Jul 2016 13:55:49 -0400 Subject: [PATCH 12/19] Add async-counter example --- examples/async-counter/client.js | 41 +++++++++++++++++++++++++++++ examples/async-counter/package.json | 15 +++++++++++ 2 files changed, 56 insertions(+) create mode 100644 examples/async-counter/client.js create mode 100644 examples/async-counter/package.json diff --git a/examples/async-counter/client.js b/examples/async-counter/client.js new file mode 100644 index 0000000..b5cd831 --- /dev/null +++ b/examples/async-counter/client.js @@ -0,0 +1,41 @@ +const choo = require('../../') +const html = require('../../html') + +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) => { + return html` +
+

Async counter

+

Clicked ${state.counter} times!

+ + + + +
+ ` +} + +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..ce019b3 --- /dev/null +++ b/examples/async-counter/package.json @@ -0,0 +1,15 @@ +{ + "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" + } +} From 9fb124cf1cfc7671a3ae81c09d9013d1e21ee10e Mon Sep 17 00:00:00 2001 From: Juan Soto Date: Sat, 9 Jul 2016 14:03:09 -0400 Subject: [PATCH 13/19] Pluralize "times" correctly --- .gitignore | 9 +-- CHANGELOG.md | 11 ++++ README.md | 29 ++++++---- examples/async-counter/client.js | 5 +- examples/async-counter/package.json | 3 +- examples/vanilla/index.html | 42 ++++++++++++++ index.js | 11 +++- package.json | 33 ++++++++--- scripts/build | 68 +++++++++++++++++++++++ scripts/{test-size => instrument} | 45 +++++++++++---- scripts/test | 85 +++++++++++++++++++++++++++++ tests/browser/hooks.js | 2 +- 12 files changed, 305 insertions(+), 38 deletions(-) create mode 100644 examples/vanilla/index.html create mode 100755 scripts/build rename scripts/{test-size => instrument} (56%) create mode 100755 scripts/test 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/CHANGELOG.md b/CHANGELOG.md index 60c7349..f6cf156 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,14 @@ +## `3.1.0` +And another patch down. This time around it's mostly maintenance and a bit of +perf: +- The addition of the [nanoraf](https://github.com/yoshuawuyts/nanoraf) + dependency prevents bursts of DOM updates thrashing application performance, + quite possibly making choo amongst the fastest frameworks out there. +- We now ship standalone `UMD` bundles on each release, available through + [https://npmcdn.com/choo](https://npmcdn.com/choo). The goal of this is to + support sites like codepen and the like; __this should not be used for + production__. + ## `3.0.0` Woooh, happy third birthday `choo` - _thanks dad_. You're all grown up now; look at how far you've come in the last month. You've grown... tinier? But yet diff --git a/README.md b/README.md index c97fc80..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 @@ -246,7 +246,7 @@ app.model({ namespace: 'todos', state: { items: [] }, reducers: { - add: (data, state) => ({ todos: state.items.concat(data.payload) }) + add: (data, state) => ({ items: state.items.concat(data.payload) }) } }) ``` @@ -361,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 diff --git a/examples/async-counter/client.js b/examples/async-counter/client.js index b5cd831..f7f7354 100644 --- a/examples/async-counter/client.js +++ b/examples/async-counter/client.js @@ -1,5 +1,6 @@ const choo = require('../../') const html = require('../../html') +const plur = require('plur') const app = choo() app.model({ @@ -21,10 +22,12 @@ app.model({ }) const mainView = (state, prev, send) => { + const count = state.counter; + return html`

    Async counter

    -

    Clicked ${state.counter} times!

    +

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

    diff --git a/examples/async-counter/package.json b/examples/async-counter/package.json index ce019b3..a923e54 100644 --- a/examples/async-counter/package.json +++ b/examples/async-counter/package.json @@ -10,6 +10,7 @@ "author": "Juan Soto ", "license": "ISC", "dependencies": { - "budo": "^8.3.0" + "budo": "^8.3.0", + "plur": "^2.1.2" } } diff --git a/examples/vanilla/index.html b/examples/vanilla/index.html new file mode 100644 index 0000000..e98fdef --- /dev/null +++ b/examples/vanilla/index.html @@ -0,0 +1,42 @@ + + + Vanilla example + + + + + + diff --git a/index.js b/index.js index f87b02d..1bd34d4 100644 --- a/index.js +++ b/index.js @@ -6,6 +6,7 @@ const href = require('sheet-router/href') const hash = require('sheet-router/hash') const hashMatch = require('hash-match') const barracks = require('barracks') +const nanoraf = require('nanoraf') const assert = require('assert') const xtend = require('xtend') const yo = require('yo-yo') @@ -22,6 +23,7 @@ function choo (opts) { var _defaultRoute = null var _rootNode = null var _routes = null + var _frame = null start.toString = toString start.router = router @@ -85,8 +87,13 @@ function choo (opts) { opts.onStateChange(data, state, prev, name, createSend) } - const newTree = _router(state.location.pathname, state, prev) - _rootNode = yo.update(_rootNode, newTree) + if (!_frame) { + _frame = nanoraf(function (state, prev) { + const newTree = _router(state.location.pathname, state, prev) + _rootNode = yo.update(_rootNode, newTree) + }) + } + _frame(state, prev) } // register all routes on the router diff --git a/package.json b/package.json index aaef47a..6299a47 100644 --- a/package.json +++ b/package.json @@ -1,17 +1,20 @@ { "name": "choo", - "version": "3.0.2", + "version": "3.1.1", "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,12 +25,19 @@ "composable", "tiny" ], + "files": [ + "index.js", + "http.js", + "html.js", + "dist/" + ], "license": "MIT", "dependencies": { "barracks": "^8.0.0", "document-ready": "~1.0.2", "global": "^4.3.0", "hash-match": "^1.0.2", + "nanoraf": "^2.0.0", "sheet-router": "^3.1.0", "xhr": "^2.2.0", "xtend": "^4.0.1", @@ -40,12 +50,16 @@ "browserify-istanbul": "^2.0.0", "bundle-collapser": "^1.2.1", "dependency-check": "^2.5.1", + "disc": "^1.3.2", + "envify": "^3.4.1", "es2020": "^1.0.1", "geval": "~2.1.1", + "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", "proxyquire-universal": "~1.0.8", "proxyquireify": "~3.2.0", @@ -56,6 +70,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..8853679 --- /dev/null +++ b/scripts/build @@ -0,0 +1,68 @@ +#!/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" +} + +# use zopfli for better compression if available +gzip () { + zopfli -h 2>/dev/null + if [ $? -eq 0 ]; then + zopfli "$1" -i1000 -c + else + gzip -c "$1" + fi +} + +build_dev () { + mkdir -p dist/ + NODE_ENV=development "$browserify" index.js \ + --standalone=choo \ + -t envify \ + -g yo-yoify \ + -g es2020 \ + > dist/choo.js +} + +build_min () { + mkdir -p dist/ + NODE_ENV=production "$browserify" index.js \ + --standalone=choo \ + -t envify \ + -g unassertify \ + -g yo-yoify \ + -g es2020 \ + -g uglifyify \ + -t envify \ + -p bundle-collapser/plugin \ + | uglifyjs \ + | "$uglify" \ + > dist/choo.min.js +} + +build_gz () { + build_min + gzip dist/choo.min.js > dist/choo.min.js.gz + cp dist/choo.min.js.gz dist/choo.gz +} + +# 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 "$@" ;; + g|gzip) shift; build_gz "$@" ;; + *) shift; build_min "$@" ;; +esac diff --git a/scripts/test-size b/scripts/instrument similarity index 56% rename from scripts/test-size rename to scripts/instrument index 009daf9..ced46c4 100755 --- a/scripts/test-size +++ b/scripts/instrument @@ -1,5 +1,13 @@ #!/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 @@ -10,45 +18,60 @@ script/test-size USAGE } +# use zopfli for better compression if available +gzip () { + zopfli -h 2>/dev/null + if [ $? -eq 0 ]; then + zopfli "$1" -i1000 -c | wc -c + else + "$gzip_size" < "$1" + fi +} + gzip_size () { - browserify index.js \ + mkdir -p tmp/ + "$browserify" index.js \ -g unassertify \ -g yo-yoify \ -g es2020 \ -g uglifyify \ -p bundle-collapser/plugin \ - | uglifyjs \ - | gzip-size \ - | pretty-bytes + | "$uglify" \ + > tmp/bundle.min.js + + 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 \ - | uglifyjs \ + | "$uglify" \ | 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 \ - | uglifyjs \ - | discify --open + | "$uglify" \ + | "$discify" --open } # set CLI flags 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) { From 92ec2be55ec0a96e0127c60081bf7d8e4c3b73d5 Mon Sep 17 00:00:00 2001 From: Tim Wisniewski Date: Sun, 17 Jul 2016 18:57:54 -0400 Subject: [PATCH 14/19] Swap links for HTTP demo (#174) --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 0bea209..3804256 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)) From 5652a4a6dc0c3eb74f82d7df3c5bb0d4ef4f6f96 Mon Sep 17 00:00:00 2001 From: Yoshua Wuyts Date: Mon, 18 Jul 2016 12:58:41 +0200 Subject: [PATCH 15/19] deps: bump and prune --- package.json | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/package.json b/package.json index 6299a47..3929477 100644 --- a/package.json +++ b/package.json @@ -37,7 +37,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 +57,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", From 28298a6ba1622e5403c1bf9349be71a6d3f79924 Mon Sep 17 00:00:00 2001 From: Yoshua Wuyts Date: Mon, 18 Jul 2016 13:36:29 +0200 Subject: [PATCH 16/19] 3.1.2 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 3929477..8fd147e 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": { From e897bf1545558f168c8bb33219b7a4d28671b625 Mon Sep 17 00:00:00 2001 From: timwis Date: Mon, 18 Jul 2016 13:09:07 -0400 Subject: [PATCH 17/19] build and test scripts use binaries on path --- scripts/build | 10 ++-------- scripts/test | 32 +++++++++++--------------------- 2 files changed, 13 insertions(+), 29 deletions(-) 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/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 } From 10d35aaa09f9041962e0296c0917afa1c80dbb05 Mon Sep 17 00:00:00 2001 From: timwis Date: Tue, 19 Jul 2016 21:40:14 -0400 Subject: [PATCH 18/19] instrument script uses binaries on path, add npm scripts for instrument --- package.json | 5 ++++- scripts/instrument | 28 ++++++++++------------------ 2 files changed, 14 insertions(+), 19 deletions(-) diff --git a/package.json b/package.json index 8fd147e..7e38caf 100644 --- a/package.json +++ b/package.json @@ -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": [ 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 From f1cd8b8277e3e7a9b8ac80878668813e627b04d5 Mon Sep 17 00:00:00 2001 From: Todd Kennedy Date: Wed, 20 Jul 2016 18:30:19 -0700 Subject: [PATCH 19/19] DOC: Add effects example (#186) Add an example to the effects section to show how an effect might have to do multiple async tasks and to call `done` only when complete. --- README.md | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/README.md b/README.md index 3804256..230873b 100644 --- a/README.md +++ b/README.md @@ -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