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

Fork of choo. Built with โค๏ธŽ by Yoshua Wuyts and contributors

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">&#x3C;</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">>&#x3C;/</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/html removed - use nanohtml (npm install nanohtml) directly
  • Removed router:
    • choo() no longer takes an opts argument
    • choo.route(location, handler) replaced by choo.view(handler)
    • pushState, popState, replaceState, navigate events removed
    • nanorouter, nanohref, scroll-to-anchor, nanolocation no longer dependencies
  • document-ready no longer a dependency
  • choo.toString not 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')
  })
}

License

MIT. See choo