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) {