README.md
August 25, 2018 ยท View on GitHub
nanochoo
ยฝ๐๐๐๐๐
choo but half the size
A
2kb framework for creating sturdy frontend applications on a diet
with npm
> npm install nanochoo
with
<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#24292E"><</span><span style="color:#22863A">script</span><span style="color:#6F42C1"> src</span><span style="color:#24292E">=</span><span style="color:#032F62">'//unpkg.com/nanochoo/dist/bundle.min.js'</span><span style="color:#24292E">></</span><span style="color:#22863A">script</span><span style="color:#24292E">></span></span> <span class="line"></span></code>Major and minor version numbers equate to choo's: choo@^7.0 == nanochoo@^7.0. Patch
numbers don't!
Key differences
choo/htmlremoved - use nanohtml (npm install nanohtml) directly- Removed router:
choo()no longer takes anoptsargumentchoo.route(location, handler)replaced bychoo.view(handler)pushState,popState,replaceState,navigateevents removed- nanorouter, nanohref, scroll-to-anchor, nanolocation no longer dependencies
- document-ready no longer a dependency
choo.toStringnot exported in the browser
See choo for documentation - just ignore
routing-related things, use choo.view over choo.route, and you'll be fine.
Example
var html = require('nanohtml')
var choo = require('nanochoo')
var app = choo()
app.use(countStore)
app.view(mainView) // !!!
app.mount('body')
function mainView (state, emit) {
return html`
<body>
<h1>count is ${state.count}</h1>
<button onclick=${onclick}>Increment</button>
</body>
`
function onclick () {
emit('increment', 1)
}
}
function countStore (state, emitter) {
state.count = 0
emitter.on('increment', function (count) {
state.count += count
emitter.emit('render')
})
}