Pluralize "times" correctly
This commit is contained in:
Juan Soto
+5
-4
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -43,11 +43,6 @@
|
||||
<img src="https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square"
|
||||
alt="Standard" />
|
||||
</a>
|
||||
<!-- IRC -->
|
||||
<a href="https://webchat.freenode.net/?channels=choo">
|
||||
<img src="https://img.shields.io/badge/irc-freenode-blue.svg?style=flat-square"
|
||||
alt="IRC - Freenode" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div align="center">
|
||||
@@ -55,12 +50,16 @@
|
||||
<a href="https://github.com/yoshuawuyts/choo-handbook">
|
||||
Handbook
|
||||
</a>
|
||||
<span>|</span>
|
||||
Packages
|
||||
<span>|</span>
|
||||
<span> | </span>
|
||||
Packages
|
||||
<span> | </span>
|
||||
<a href="https://github.com/yoshuawuyts/choo/blob/master/.github/CONTRIBUTING.md">
|
||||
Contributing
|
||||
</a>
|
||||
<span> | </span>
|
||||
<a href="https://webchat.freenode.net/?channels=choo">
|
||||
Chat
|
||||
</a>
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
@@ -80,6 +79,7 @@
|
||||
<li><a href="#example">Example</a></li>
|
||||
<li><a href="#philosophy">Philosophy</a></li>
|
||||
<li><a href="#concepts">Concepts</a></li>
|
||||
<li><a href="#badges">Badges</a></li>
|
||||
<li><a href="#api">API</a></li>
|
||||
<li><a href="#faq">FAQ</a></li>
|
||||
<li><a href="#installation">Installation</a></li>
|
||||
@@ -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:
|
||||
|
||||
|
||||
[](https://github.com/yoshuawuyts/choo)
|
||||
```md
|
||||
[](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
|
||||
|
||||
@@ -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`
|
||||
<main class="app">
|
||||
<h1>Async counter</h1>
|
||||
<p>Clicked ${state.counter} times!</p>
|
||||
<p>Clicked ${count} ${plur('time', count)}!</p>
|
||||
<button onclick=${() => send('increment')}>Increment</button>
|
||||
<button onclick=${() => send('decrement')}>Decrement</button>
|
||||
<button onclick=${() => send('incrementAsync')}>Increment async</button>
|
||||
|
||||
@@ -10,6 +10,7 @@
|
||||
"author": "Juan Soto <juan@juansoto.me>",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"budo": "^8.3.0"
|
||||
"budo": "^8.3.0",
|
||||
"plur": "^2.1.2"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,42 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Vanilla example</title>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../../dist/choo.min.js"></script>
|
||||
<script>
|
||||
const app = choo()
|
||||
|
||||
app.model({
|
||||
namespace: 'counter',
|
||||
state: {
|
||||
count: 0
|
||||
},
|
||||
reducers: {
|
||||
increment: (data, state) => ({count: state.count + 1}),
|
||||
decrement: (data, state) => ({count: state.count - 1})
|
||||
}
|
||||
})
|
||||
|
||||
const mainView = (state, prev, send) => {
|
||||
return html`
|
||||
<main class="app">
|
||||
<h1>Counter example</h1>
|
||||
<div>
|
||||
Count: ${state.counter.count}
|
||||
<button onclick=${(e) => send('counter:increment')}>+</button>
|
||||
<button onclick=${(e) => send('counter:decrement')}>-</button>
|
||||
</div>
|
||||
</main>
|
||||
`
|
||||
}
|
||||
|
||||
app.router((route) => [
|
||||
route('/', mainView)
|
||||
])
|
||||
|
||||
const tree = app.start()
|
||||
document.body.appendChild(tree)
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -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
|
||||
|
||||
+25
-8
@@ -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"
|
||||
}
|
||||
|
||||
Executable
+68
@@ -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 <argument>\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
|
||||
@@ -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"
|
||||
|
||||
Executable
+85
@@ -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
|
||||
@@ -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) {
|
||||
|
||||
Reference in New Issue
Block a user