Choo

:steam_locomotive::train::train::train::train::train:

Fun functional programming

A 4kb framework for creating sturdy frontend applications

alt="API stability" />

alt="NPM version" />

alt="Build Status" />

alt="Test Coverage" />

alt="Download" />

alt="Standard" />

Website

|

Handbook

|

Ecosystem

|

Contributing

|

Reddit

|

Chat

_{The little framework that could. Built with ❤︎ by
Yoshua Wuyts and

contributors}

- Features
- Example
- Philosophy
- Events
- State
- Routing
- Server Rendering
- Components
- Optimizations
- FAQ
- API
- Installation
- See Also
- Support

Features

- __minimal size:__ weighing 4kb, Choo is a tiny little framework
- __event based:__ our performant event system makes writing apps easy
- __small api:__ with only 6 methods there's not much to learn
- __minimal tooling:__ built for the cutting edge browserify compiler
- __isomorphic:__ renders seamlessly in both Node and browsers
- __very cute:__ choo choo!

Example

js
var html = require('choo/html')
var devtools = require('choo-devtools')
var choo = require('choo')
var app = choo()
app.use(devtools())
app.use(countStore)
app.route('/', mainView)
app.mount('body')

function mainView (state, emit) { return html

count is ${state.count}


  function onclick () {
    emit('increment', 1)
  }
}

function countStore (state, emitter) { state.count = 0 emitter.on('increment', function (count) { state.count += count emitter.emit('render') }) }`Want to see more examples? Check out the [Choo handbook][handbook].

`Philosophy`


We believe programming should be fun and light, not stern and stressful. It's
cool to be cute; using serious words without explaining them doesn't make for
better results - if anything it scares people off. We don't want to be scary,
we want to be nice and fun, and then _casually_ be the best choice around.
_Real casually._
We believe frameworks should be disposable, and components recyclable. We don't
want a web where walled gardens jealously compete with one another. By making
the DOM the lowest common denominator, switching from one framework to another
becomes frictionless. Choo is modest in its design; we don't believe it will
be top of the class forever, so we've made it as easy to toss out as it is to
pick up.
We don't believe that bigger is better. Big APIs, large complexities, long
files - we see them as omens of impending userland complexity. We want everyone
on a team, no matter the size, to fully understand how an application is laid
out. And once an application is built, we want it to be small, performant and
easy to reason about. All of which makes for easy to debug code, better results
and super smiley faces.
Events

At the core of Choo is an event emitter, which is used for both application
logic but also to interface with the framework itself. The package we use for
this is nanobus.

You can access the emitter through app.use(state, emitter, app), app.route(route,
view(state, emit)) or app.emitter. Routes only have access to theemitter.emitmethod to encourage people to separate business logic from render logic.

The purpose of the emitter is two-fold: it allows wiring up application code together, and splitting it off nicely - but it also allows communicating with the Choo framework itself. All events can be read as constants fromstate.events. Choo ships with the following events built in:

`$3`


Choo emits this when the DOM is ready. Similar to the DOM's

'DOMContentLoaded'

 event, except it will be emitted even if the listener is
added _after_ the DOM became ready. Uses
document-ready under the hood.
$3

This event should be emitted to re-render the DOM. A common pattern is to
update the

state object, and then emit the 'render'

 event straight after.
Note that

'render' will only have an effect once the DOMContentLoaded

 event
has been fired.
$3

Choo emits this event whenever routes change. This is triggered by either

'pushState', 'replaceState' or 'popState'

.
$3

This event should be emitted to navigate to a new route. The new route is added
to the browser's history stack, and will emit

'navigate' and 'render'

.
Similar to
history.pushState.
$3

This event should be emitted to navigate to a new route. The new route replaces
the current entry in the browser's history stack, and will emit

'navigate'

and

'render'

. Similar to
history.replaceState.
$3

This event is emitted when the user hits the 'back' button in their browser.
The new route will be a previous entry in the browser's history stack, and
immediately afterward the

'navigate' and 'render'

events will be emitted.
Similar to history.popState. (Note
that

emit('popState')

 will _not_ cause a popState action - use

history.go(-1) for that - this is different from the behaviour of pushState

and

replaceState

!)
$3

This event should be emitted whenever the

document.title

 needs to be updated.
It will set both

document.title and state.title

.  This value can be used
when server rendering to accurately include a

<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> tag in the header.<br />This is derived from the<br /><a href="https://developer.mozilla.org/en-US/docs/Web/Events/DOMTitleChanged" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">DOMTitleChanged event</a>.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">State</h2><br />Choo comes with a shared state object. This object can be mutated freely, and<br />is passed into the view functions whenever </code>'render'<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> is emitted. The state<br />object comes with a few properties set.</p><p class="my-3">When initializing the application, </code>window.initialState<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> is used to provision<br />the initial state. This is especially useful when combined with server<br />rendering. See <a href="#server-rendering" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">server rendering</a> for more details.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3><br />A mapping of Choo's built in events. It's recommended to extend this object<br />with your application's events. By defining your event names once and setting<br />them on </code>state.events<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, it reduces the chance of typos, generally autocompletes<br />better, makes refactoring easier and compresses better.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3><br />The current params taken from the route. E.g. </code>/foo/:bar<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> becomes available as<br /></code>state.params.bar<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> If a wildcard route is used (</code>/foo/*<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">) it's available as<br /></code>state.params.wildcard<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3><br />An object containing the current queryString. </code>/foo?bin=baz<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> becomes </code>{ bin:<br />'baz' }<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3><br />An object containing the current href. </code>/foo?bin=baz<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> becomes </code>/foo<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3><br />The current name of the route used in the router (e.g. </code>/foo/:bar<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">).</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3><br />The current page title. Can be set using the </code>DOMTitleChange<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> event.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3><br />An object _recommended_ to use for local component state.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3><br />Generic class cache. Will lookup Component instance by id and create one if not<br />found. Useful for working with stateful <a href="#components" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">components</a>.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Routing</h2><br />Choo is an application level framework. This means that it takes care of<br />everything related to routing and pathnames for you.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3><br />Params can be registered by prepending the route name with </code>:routename<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, e.g.<br /></code>/foo/:bar/:baz<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. The value of the param will be saved on </code>state.params<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> (e.g.<br /></code>state.params.bar<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">). Wildcard routes can be registered with </code><em><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, e.g. </code>/foo/</em><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.<br />The value of the wildcard will be saved under </code>state.params.wildcard<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3><br />Sometimes a route doesn't match, and you want to display a page to handle it.<br />You can do this by declaring </code>app.route('*', handler)<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> to handle all routes<br />that didn't match anything else.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3><br />Querystrings (e.g. </code>?foo=bar<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">) are ignored when matching routes. An object<br />containing the key-value mappings exists as </code>state.query<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3><br />By default, hashes are ignored when routing. When enabling hash routing<br />(</code>choo({ hash: true })<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">) hashes will be treated as part of the url, converting<br /></code>/foo#bar<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> to </code>/foo/bar<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. This is useful if the application is not mounted at<br />the website root. Unless hash routing is enabled, if a hash is found we check if<br />there's an anchor on the same page, and will scroll the element into view. Using<br />both hashes in URLs and anchor links on the page is generally not recommended.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3><br />By default all clicks on </code><a><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> tags are handled by the router through the<br /><a href="https://github.com/choojs/nanohref" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">nanohref</a> module. This can be<br />disabled application-wide by passing </code>{ href: false }<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> to the application<br />constructor. The event is not handled under the following conditions:<br />- the click event had </code>.preventDefault()<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> called on it<br />- the link has a </code>target="_blank"<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> attribute with </code>rel="noopener noreferrer"<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />- a modifier key is enabled (e.g. </code>ctrl<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>alt<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>shift<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> or </code>meta<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">)<br />- the link's href starts with protocol handler such as </code>mailto:<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> or </code>dat:<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />- the link points to a different host<br />- the link has a </code>download<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> attribute</p><p class="my-3">:warn: Note that we only handle </code>target=_blank<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> if they also have<br /></code>rel="noopener noreferrer"<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> on them. This is needed to <a href="https://mathiasbynens.github.io/rel-noopener/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">properly sandbox web<br />pages</a>.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3><br />To navigate routes you can emit </code>'pushState'<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>'popState'<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> or<br /></code>'replaceState'<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. See <a href="#events" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">#events</a> for more details about these events.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Server Rendering</h2><br />Choo was built with Node in mind. To render on the server call<br /></code>.toString(route, [state])<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> on your </code>choo<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> instance.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js<br />var html = require('choo/html')<br />var choo = require('choo')</p><p class="my-3">var app = choo()<br />app.route('/', function (state, emit) {<br /> return html</code><div>Hello ${state.name}</div><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />})</p><p class="my-3">var state = { name: 'Node' }<br />var string = app.toString('/', state)</p><p class="my-3">console.log(string)<br />// => '<div>Hello Node</div>'<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">When starting an application in the browser, it's recommended to provide the<br />same </code>state<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> object available as </code>window.initialState<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. When the application is<br />started, it'll be used to initialize the application state. The process of<br />server rendering, and providing an initial state on the client to create the<br />exact same document is also known as "rehydration".</p><p class="my-3">For security purposes, after </code>window.initialState<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> is used it is deleted from<br />the </code>window<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> object.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">html<br /><html><br /> <head><br /> <script>window.initialState = { initial: 'state' }</script><br /> </head><br /> <body><br /> </body><br /></html><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Components</h2><br />From time to time there will arise a need to have an element in an application<br />hold a self-contained state or to not rerender when the application does. This<br />is common when using 3rd party libraries to e.g. display an interactive map or a<br />graph and you rely on this 3rd party library to handle modifications to the DOM.<br />Components come baked in to Choo for these kinds of situations. See<br />[nanocomponent][nanocomponent] for documentation on the component class.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript<br />// map.js<br />var html = require('choo/html')<br />var mapboxgl = require('mapbox-gl')<br />var Component = require('choo/component')</p><p class="my-3">module.exports = class Map extends Component {<br /> constructor (id, state, emit) {<br /> super(id)<br /> this.local = state.components[id] = {}<br /> }</p><p class="my-3"> load (element) {<br /> this.map = new mapboxgl.Map({<br /> container: element,<br /> center: this.local.center<br /> })<br /> }</p><p class="my-3"> update (center) {<br /> if (center.join() !== this.local.center.join()) {<br /> this.map.setCenter(center)<br /> }<br /> return false<br /> }</p><p class="my-3"> createElement (center) {<br /> this.local.center = center<br /> return html</code><div></div><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br /> }<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript<br />// index.js<br />var choo = require('choo')<br />var html = require('choo/html')<br />var Map = require('./map.js')</p><p class="my-3">var app = choo()<br />app.route('/', mainView)<br />app.mount('body')</p><p class="my-3">function mainView (state, emit) {<br /> return html</code><br /> <body><br /> <button onclick=${onclick}>Where am i?</button><br /> ${state.cache(Map, 'my-map').render(state.center)}<br /> </body><br /> <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"> function onclick () {<br /> emit('locate')<br /> }<br />}</p><p class="my-3">app.use(function (state, emitter) {<br /> state.center = [18.0704503, 59.3244897]<br /> emitter.on('locate', function () {<br /> window.navigator.geolocation.getCurrentPosition(function (position) {<br /> state.center = [position.coords.longitude, position.coords.latitude]<br /> emitter.emit('render')<br /> })<br /> })<br />})<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3><br />When working with stateful components, one will need to keep track of component<br />instances – </code>state.cache<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> does just that. The component cache is a function<br />which takes a component class and a unique id (</code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">) as its first two<br />arguments. Any following arguments will be forwarded to the component constructor<br />together with </code>state<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> and </code>emit<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.</p><p class="my-3">The default class cache is an LRU cache (using [nanolru][nanolru]), meaning it<br />will only hold on to a fixed amount of class instances (</code>100<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> by default) before<br />starting to evict the least-recently-used instances. This behavior can be<br />overriden with <a href="#app--chooopts" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">options</a>.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Optimizations</h2><br />Choo is reasonably fast out of the box. But sometimes you might hit a scenario<br />where a particular part of the UI slows down the application, and you want to<br />speed it up. Here are some optimizations that are possible.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3><br />Sometimes we want to tell the algorithm to not evaluate certain nodes (and its<br />children). This can be because we're sure they haven't changed, or perhaps<br />because another piece of code is managing that part of the DOM tree. To achieve<br />this </code>nanomorph<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> evaluates the </code>.isSameNode()<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> method on nodes to determine if<br />they should be updated or not.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js<br />var el = html</code><div>node</div><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">// tell nanomorph to not compare the DOM tree if they're both divs<br />el.isSameNode = function (target) {<br /> return (target && target.nodeName && target.nodeName === 'DIV')<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3><br />It's common to work with lists of elements on the DOM. Adding, removing or<br />reordering elements in a list can be rather expensive. To optimize this you can<br />add an </code>id<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> attribute to a DOM node. When reordering nodes it will compare<br />nodes with the same ID against each other, resulting in far fewer re-renders.<br />This is especially potent when coupled with DOM node caching.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js<br />var el = html</code><br /> <section><br /> <div id="first">hello</div><br /> <div id="second">world</div><br /> </section><br /><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3><br />We use the </code>require('assert')<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> module from Node core to provide helpful error<br />messages in development. In production you probably want to strip this using<br />[unassertify][unassertify].</p><p class="my-3">To convert inlined HTML to valid DOM nodes we use </code>require('nanohtml')<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. This has<br />overhead during runtime, so for production environments we should unwrap this<br />using the [nanohtml transform][nanohtml].</p><p class="my-3">Setting up browserify transforms can sometimes be a bit of hassle; to make this<br />more convenient we recommend using [bankai build][bankai] to build your assets for production.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">FAQ</h2><br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3><br />Because I thought it sounded cute. All these programs talk about being<br />_"performant"_, _"rigid"_, _"robust"_ - I like programming to be light, fun and<br />non-scary. Choo embraces that.</p><p class="my-3">Also imagine telling some business people you chose to rewrite something<br />critical for serious bizcorp using a train themed framework.<br />:steam_locomotive::train::train::train:</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3><br />It's called "Choo", though we're fine if you call it "Choo-choo" or<br />"Chugga-chugga-choo-choo" too. The only time "choo.js" is tolerated is if /<br />when you shimmy like you're a locomotive.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3><br />Choo uses [nanomorph][nanomorph], which diffs real DOM nodes instead of<br />virtual nodes. It turns out that [browsers are actually ridiculously good at<br />dealing with DOM nodes][morphdom-bench], and it has the added benefit of<br />working with _any_ library that produces valid DOM nodes. So to put a long<br />answer short: we're using something even better.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3><br />Template strings aren't supported in all browsers, and parsing them creates<br />significant overhead. To optimize we recommend running </code>browserify<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> with<br />[nanohtml][nanohtml] as a global transform or using [bankai][bankai] directly.<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">sh<br />$ browserify -g nanohtml<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3><br />Sure.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">API</h2><br />This section provides documentation on how each function in Choo works. It's<br />intended to be a technical reference. If you're interested in learning choo for<br />the first time, consider reading through the [handbook][handbook] first<br />:sparkles:</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3><br />Initialize a new </code>choo<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> instance. </code>opts<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> can also contain the following values:<br />- __opts.history:__ default: </code>true<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. Listen for url changes through the<br /> history API.<br />- __opts.href:__ default: </code>true<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. Handle all relative </code><a<br /> href="<location>"></a><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> clicks and call </code>emit('render')<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />- __opts.cache:__ default: </code>undefined<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. Override default class cache used by<br /> </code>state.cache<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. Can be a a </code>number<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> (maximum number of instances in cache,<br /> default </code>100<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">) or an </code>object<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> with a [nanolru][nanolru]-compatible API.<br />- __opts.hash:__ default: </code>false<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. Treat hashes in URLs as part of the pathname,<br /> transforming </code>/foo#bar<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> to </code>/foo/bar<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. This is useful if the application is<br /> not mounted at the website root.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3><br />Call a function and pass it a </code>state<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>emitter<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> and </code>app<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. </code>emitter<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> is an instance<br />of <a href="https://github.com/choojs/nanobus/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">nanobus</a>. You can listen to<br />messages by calling </code>emitter.on()<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> and emit messages by calling<br /></code>emitter.emit()<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. </code>app<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> is the same Choo instance. Callbacks passed to </code>app.use()<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> are commonly referred to as<br /></code>'stores'<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.</p><p class="my-3">If the callback has a </code>.storeName<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> property on it, it will be used to identify<br />the callback during tracing.</p><p class="my-3">See <a href="#events" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">#events</a> for an overview of all events.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3><br />Register a route on the router. The handler function is passed </code>app.state<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />and </code>app.emitter.emit<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> as arguments. Uses [nanorouter][nanorouter] under the<br />hood.</p><p class="my-3">See <a href="#routing" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">#routing</a> for an overview of how to use routing efficiently.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3><br />Start the application and mount it on the given </code>querySelector<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">,<br />the given selector can be a String or a DOM element.</p><p class="my-3">In the browser, this will _replace_ the selector provided with the tree returned from </code>app.start()<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.<br />If you want to add the app as a child to an element, use </code>app.start()<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> to obtain the tree and manually append it.</p><p class="my-3">On the server, this will save the </code>selector<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> on the app instance.<br />When doing server side rendering, you can then check the </code>app.selector<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> property to see where the render result should be inserted.</p><p class="my-3">Returns </code>this<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, so you can easily export the application for server side rendering:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js<br />module.exports = app.mount('body')<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3><br />Start the application. Returns a tree of DOM nodes that can be mounted using<br /></code>document.body.appendChild()<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3><br />Render the application to a string. Useful for rendering on the server.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3><br />Create DOM nodes from template string literals. Exposes<br /><a href="https://github.com/choojs/nanohtml" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">nanohtml</a>. Can be optimized using<br />[nanohtml][nanohtml].</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3><br />Exposes <a href="https://github.com/shama/nanohtml#unescaping" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">nanohtml/raw</a> helper for rendering raw HTML content.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Installation</h2><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">sh<br />$ npm install choo<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">See Also</h2><br />- <a href="https://github.com/choojs/bankai" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">bankai</a> - streaming asset compiler<br />- <a href="http://stack.gl/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">stack.gl</a> - open software ecosystem for WebGL<br />- <a href="https://github.com/maxogden/yo-yo" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">yo-yo</a> - tiny library for modular UI<br />- <a href="https://github.com/tachyons-css/tachyons" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">tachyons</a> - functional CSS for<br /> humans<br />- <a href="https://github.com/stackcss/sheetify" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">sheetify</a> - modular CSS bundler for<br /> </code>browserify`</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Support</h2><br />Creating a quality framework takes a lot of time. Unlike others frameworks,<br />Choo is completely independently funded. We fight for our users. This does mean<br />however that we also have to spend time working contracts to pay the bills.<br />This is where you can help: by chipping in you can ensure more time is spent<br />improving Choo rather than dealing with distractions.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3><br />Become a sponsor and help ensure the development of independent quality<br />software. You can help us keep the lights on, bellies full and work days sharp<br />and focused on improving the state of the web. <a href="https://opencollective.com/choo#sponsor" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Become a<br />sponsor</a></p><p class="my-3"><a href="https://opencollective.com/choo/sponsor/0/website" target="_blank"><img src="https://opencollective.com/choo/sponsor/0/avatar.svg"></a><br /><a href="https://opencollective.com/choo/sponsor/1/website" target="_blank"><img src="https://opencollective.com/choo/sponsor/1/avatar.svg"></a><br /><a href="https://opencollective.com/choo/sponsor/2/website" target="_blank"><img src="https://opencollective.com/choo/sponsor/2/avatar.svg"></a><br /><a href="https://opencollective.com/choo/sponsor/3/website" target="_blank"><img src="https://opencollective.com/choo/sponsor/3/avatar.svg"></a><br /><a href="https://opencollective.com/choo/sponsor/4/website" target="_blank"><img src="https://opencollective.com/choo/sponsor/4/avatar.svg"></a><br /><a href="https://opencollective.com/choo/sponsor/5/website" target="_blank"><img src="https://opencollective.com/choo/sponsor/5/avatar.svg"></a><br /><a href="https://opencollective.com/choo/sponsor/6/website" target="_blank"><img src="https://opencollective.com/choo/sponsor/6/avatar.svg"></a><br /><a href="https://opencollective.com/choo/sponsor/7/website" target="_blank"><img src="https://opencollective.com/choo/sponsor/7/avatar.svg"></a><br /><a href="https://opencollective.com/choo/sponsor/8/website" target="_blank"><img src="https://opencollective.com/choo/sponsor/8/avatar.svg"></a><br /><a href="https://opencollective.com/choo/sponsor/9/website" target="_blank"><img src="https://opencollective.com/choo/sponsor/9/avatar.svg"></a><br /><a href="https://opencollective.com/choo/sponsor/10/website" target="_blank"><img src="https://opencollective.com/choo/sponsor/10/avatar.svg"></a><br /><a href="https://opencollective.com/choo/sponsor/11/website" target="_blank"><img src="https://opencollective.com/choo/sponsor/11/avatar.svg"></a><br /><a href="https://opencollective.com/choo/sponsor/12/website" target="_blank"><img src="https://opencollective.com/choo/sponsor/12/avatar.svg"></a><br /><a href="https://opencollective.com/choo/sponsor/13/website" target="_blank"><img src="https://opencollective.com/choo/sponsor/13/avatar.svg"></a><br /><a href="https://opencollective.com/choo/sponsor/14/website" target="_blank"><img src="https://opencollective.com/choo/sponsor/14/avatar.svg"></a><br /><a href="https://opencollective.com/choo/sponsor/15/website" target="_blank"><img src="https://opencollective.com/choo/sponsor/15/avatar.svg"></a><br /><a href="https://opencollective.com/choo/sponsor/16/website" target="_blank"><img src="https://opencollective.com/choo/sponsor/16/avatar.svg"></a><br /><a href="https://opencollective.com/choo/sponsor/17/website" target="_blank"><img src="https://opencollective.com/choo/sponsor/17/avatar.svg"></a><br /><a href="https://opencollective.com/choo/sponsor/18/website" target="_blank"><img src="https://opencollective.com/choo/sponsor/18/avatar.svg"></a><br /><a href="https://opencollective.com/choo/sponsor/19/website" target="_blank"><img src="https://opencollective.com/choo/sponsor/19/avatar.svg"></a><br /><a href="https://opencollective.com/choo/sponsor/20/website" target="_blank"><img src="https://opencollective.com/choo/sponsor/20/avatar.svg"></a><br /><a href="https://opencollective.com/choo/sponsor/21/website" target="_blank"><img src="https://opencollective.com/choo/sponsor/21/avatar.svg"></a><br /><a href="https://opencollective.com/choo/sponsor/22/website" target="_blank"><img src="https://opencollective.com/choo/sponsor/22/avatar.svg"></a><br /><a href="https://opencollective.com/choo/sponsor/23/website" target="_blank"><img src="https://opencollective.com/choo/sponsor/23/avatar.svg"></a><br /><a href="https://opencollective.com/choo/sponsor/24/website" target="_blank"><img src="https://opencollective.com/choo/sponsor/24/avatar.svg"></a><br /><a href="https://opencollective.com/choo/sponsor/25/website" target="_blank"><img src="https://opencollective.com/choo/sponsor/25/avatar.svg"></a><br /><a href="https://opencollective.com/choo/sponsor/26/website" target="_blank"><img src="https://opencollective.com/choo/sponsor/26/avatar.svg"></a><br /><a href="https://opencollective.com/choo/sponsor/27/website" target="_blank"><img src="https://opencollective.com/choo/sponsor/27/avatar.svg"></a><br /><a href="https://opencollective.com/choo/sponsor/28/website" target="_blank"><img src="https://opencollective.com/choo/sponsor/28/avatar.svg"></a><br /><a href="https://opencollective.com/choo/sponsor/29/website" target="_blank"><img src="https://opencollective.com/choo/sponsor/29/avatar.svg"></a></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3><br />Become a backer, and buy us a coffee (or perhaps lunch?) every month or so.<br /><a href="https://opencollective.com/choo#backer" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Become a backer</a></p><p class="my-3"><a href="https://opencollective.com/choo/backer/0/website" target="_blank"><img src="https://opencollective.com/choo/backer/0/avatar.svg"></a><br /><a href="https://opencollective.com/choo/backer/1/website" target="_blank"><img src="https://opencollective.com/choo/backer/1/avatar.svg"></a><br /><a href="https://opencollective.com/choo/backer/2/website" target="_blank"><img src="https://opencollective.com/choo/backer/2/avatar.svg"></a><br /><a href="https://opencollective.com/choo/backer/3/website" target="_blank"><img src="https://opencollective.com/choo/backer/3/avatar.svg"></a><br /><a href="https://opencollective.com/choo/backer/4/website" target="_blank"><img src="https://opencollective.com/choo/backer/4/avatar.svg"></a><br /><a href="https://opencollective.com/choo/backer/5/website" target="_blank"><img src="https://opencollective.com/choo/backer/5/avatar.svg"></a><br /><a href="https://opencollective.com/choo/backer/6/website" target="_blank"><img src="https://opencollective.com/choo/backer/6/avatar.svg"></a><br /><a href="https://opencollective.com/choo/backer/7/website" target="_blank"><img src="https://opencollective.com/choo/backer/7/avatar.svg"></a><br /><a href="https://opencollective.com/choo/backer/8/website" target="_blank"><img src="https://opencollective.com/choo/backer/8/avatar.svg"></a><br /><a href="https://opencollective.com/choo/backer/9/website" target="_blank"><img src="https://opencollective.com/choo/backer/9/avatar.svg"></a><br /><a href="https://opencollective.com/choo/backer/10/website" target="_blank"><img src="https://opencollective.com/choo/backer/10/avatar.svg"></a><br /><a href="https://opencollective.com/choo/backer/11/website" target="_blank"><img src="https://opencollective.com/choo/backer/11/avatar.svg"></a><br /><a href="https://opencollective.com/choo/backer/12/website" target="_blank"><img src="https://opencollective.com/choo/backer/12/avatar.svg"></a><br /><a href="https://opencollective.com/choo/backer/13/website" target="_blank"><img src="https://opencollective.com/choo/backer/13/avatar.svg"></a><br /><a href="https://opencollective.com/choo/backer/14/website" target="_blank"><img src="https://opencollective.com/choo/backer/14/avatar.svg"></a><br /><a href="https://opencollective.com/choo/backer/15/website" target="_blank"><img src="https://opencollective.com/choo/backer/15/avatar.svg"></a><br /><a href="https://opencollective.com/choo/backer/16/website" target="_blank"><img src="https://opencollective.com/choo/backer/16/avatar.svg"></a><br /><a href="https://opencollective.com/choo/backer/17/website" target="_blank"><img src="https://opencollective.com/choo/backer/17/avatar.svg"></a><br /><a href="https://opencollective.com/choo/backer/18/website" target="_blank"><img src="https://opencollective.com/choo/backer/18/avatar.svg"></a><br /><a href="https://opencollective.com/choo/backer/19/website" target="_blank"><img src="https://opencollective.com/choo/backer/19/avatar.svg"></a><br /><a href="https://opencollective.com/choo/backer/20/website" target="_blank"><img src="https://opencollective.com/choo/backer/20/avatar.svg"></a><br /><a href="https://opencollective.com/choo/backer/21/website" target="_blank"><img src="https://opencollective.com/choo/backer/21/avatar.svg"></a><br /><a href="https://opencollective.com/choo/backer/22/website" target="_blank"><img src="https://opencollective.com/choo/backer/22/avatar.svg"></a><br /><a href="https://opencollective.com/choo/backer/23/website" target="_blank"><img src="https://opencollective.com/choo/backer/23/avatar.svg"></a><br /><a href="https://opencollective.com/choo/backer/24/website" target="_blank"><img src="https://opencollective.com/choo/backer/24/avatar.svg"></a><br /><a href="https://opencollective.com/choo/backer/25/website" target="_blank"><img src="https://opencollective.com/choo/backer/25/avatar.svg"></a><br /><a href="https://opencollective.com/choo/backer/26/website" target="_blank"><img src="https://opencollective.com/choo/backer/26/avatar.svg"></a><br /><a href="https://opencollective.com/choo/backer/27/website" target="_blank"><img src="https://opencollective.com/choo/backer/27/avatar.svg"></a><br /><a href="https://opencollective.com/choo/backer/28/website" target="_blank"><img src="https://opencollective.com/choo/backer/28/avatar.svg"></a><br /><a href="https://opencollective.com/choo/backer/29/website" target="_blank"><img src="https://opencollective.com/choo/backer/29/avatar.svg"></a></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">License</h2><br /><a href="https://tldrlegal.com/license/mit-license" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">MIT</a></p><p class="my-3">[nanocomponent]: https://github.com/choojs/nanocomponent<br />[nanolru]: https://github.com/s3ththompson/nanolru<br />[bankai]: https://github.com/choojs/bankai<br />[nanohtml]: https://github.com/choojs/nanohtml<br />[browserify]: https://github.com/substack/node-browserify<br />[budo]: https://github.com/mattdesl/budo<br />[es2020]: https://github.com/yoshuawuyts/es2020<br />[handbook]: https://github.com/yoshuawuyts/choo-handbook<br />[hyperx]: https://github.com/substack/hyperx<br />[morphdom-bench]: https://github.com/patrick-steele-idem/morphdom#benchmarks<br />[nanomorph]: https://github.com/choojs/nanomorph<br />[nanorouter]: https://github.com/choojs/nanorouter<br />[yo-yo]: https://github.com/maxogden/yo-yo<br />[unassertify]: https://github.com/unassert-js/unassertify<br />[window-performance]: https://developer.mozilla.org/en-US/docs/Web/API/Performance<br /></p></div><div class="flex justify-center absolute inset-x-0 bottom-0 bg-gradient-to-t from-background via-background to-transparent pb-4 pt-16"><button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down mr-1 h-4 w-4"><path d="m6 9 6 6 6-6"></path></svg>Show more</button></div></div></div><template id="P:4"></template><template id="P:5"></template></div></div><div class="space-y-8"><div class="flex flex-col gap-6 lg:flex-row lg:gap-8"><div class="flex-1 space-y-4"><div data-slot="skeleton" class="bg-accent animate-pulse rounded-md h-10 w-64"></div><div data-slot="skeleton" class="bg-accent animate-pulse rounded-md h-6 w-full max-w-xl"></div><div class="flex gap-2"><div data-slot="skeleton" class="bg-accent animate-pulse rounded-md h-6 w-16"></div><div data-slot="skeleton" class="bg-accent animate-pulse rounded-md h-6 w-20"></div><div data-slot="skeleton" class="bg-accent animate-pulse rounded-md h-6 w-14"></div></div></div><div class="w-full lg:w-80"><div data-slot="skeleton" class="bg-accent animate-pulse rounded-md h-32 w-full"></div></div></div><div class="space-y-4"><div data-slot="skeleton" class="bg-accent animate-pulse rounded-md h-10 w-64"></div><div data-slot="skeleton" class="bg-accent animate-pulse rounded-md h-64 w-full"></div></div></div></main></div><script>requestAnimationFrame(function(){$RT=performance.now()});</script><script src="/_next/static/chunks/9b9784636e791b20.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd" id="_R_" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0])</script><script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n2:I[39756,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"default\"]\n3:I[37457,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"default\"]\n4:I[49786,[\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d23d08e0b5d1d215.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/ae55acb14c32e044.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"Header\"]\n5:I[22016,[\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d23d08e0b5d1d215.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/ae55acb14c32e044.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"\"]\nc:I[68027,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"default\"]\nd:I[2355,[\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"Analytics\"]\nf:I[97367,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"OutletBoundary\"]\n10:\"$Sreact.suspense\"\n12:I[97367,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"ViewportBoundary\"]\n14:I[97367,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"MetadataBoundary\"]\n:HL[\"/_next/static/chunks/60ba853f5ed1b16b.css?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"style\"]\n:HL[\"/_next/static/chunks/9c76f6dd8b5c38e2.css?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"style\"]\n:HL[\"/_next/static/media/68d403cf9f2c68c5-s.p.f9f15f61.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/797e433ab948586e-s.p.dbea232f.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/caa3a2e1cccd8315-s.p.853070df.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n"])</script><script>self.__next_f.push([1,"0:{\"P\":null,\"b\":\"x_DymHuNhDTJUp7Mmr_Ru\",\"c\":[\"\",\"package\",\"choo\"],\"q\":\"\",\"i\":false,\"f\":[[[\"\",{\"children\":[\"package\",{\"children\":[[\"name\",\"choo\",\"c\"],{\"children\":[\"__PAGE__\",{}]}]}]},\"$undefined\",\"$undefined\",true],[[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/60ba853f5ed1b16b.css?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/9c76f6dd8b5c38e2.css?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"font-sans antialiased\",\"children\":[[\"$\",\"$L2\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L3\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"div\",null,{\"className\":\"min-h-screen bg-background\",\"children\":[[\"$\",\"$L4\",null,{}],[\"$\",\"main\",null,{\"className\":\"mx-auto flex max-w-md flex-col items-center justify-center px-4 py-24 text-center\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-package mb-6 h-16 w-16 text-muted-foreground\",\"children\":[[\"$\",\"path\",\"1a0edw\",{\"d\":\"M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z\"}],[\"$\",\"path\",\"d0xqtd\",{\"d\":\"M12 22V12\"}],[\"$\",\"path\",\"yx3hmr\",{\"d\":\"m3.3 7 7.703 4.734a2 2 0 0 0 1.994 0L20.7 7\"}],[\"$\",\"path\",\"1c824w\",{\"d\":\"m7.5 4.27 9 5.15\"}],\"$undefined\"]}],[\"$\",\"h1\",null,{\"className\":\"mb-2 text-3xl font-bold\",\"children\":\"404\"}],[\"$\",\"h2\",null,{\"className\":\"mb-4 text-xl text-muted-foreground\",\"children\":\"Page not found\"}],[\"$\",\"p\",null,{\"className\":\"mb-8 text-muted-foreground\",\"children\":\"The page you're looking for doesn't exist or has been moved.\"}],[\"$\",\"div\",null,{\"className\":\"flex gap-3\",\"children\":[[\"$\",\"$L5\",null,{\"href\":\"/\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-house mr-1.5 h-4 w-4\",\"children\":[[\"$\",\"path\",\"5wwlr5\",{\"d\":\"M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8\"}],[\"$\",\"path\",\"1d0kgt\",{\"d\":\"M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"}],\"$undefined\"]}],\"Go home\"],\"data-slot\":\"button\",\"className\":\"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [\u0026_svg]:pointer-events-none [\u0026_svg:not([class*='size-'])]:size-4 shrink-0 [\u0026_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive bg-primary text-primary-foreground hover:bg-primary/90 h-9 px-4 py-2 has-[\u003esvg]:px-3\",\"ref\":null}],[\"$\",\"$L5\",null,{\"href\":\"/search\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-search mr-1.5 h-4 w-4\",\"children\":[[\"$\",\"circle\",\"4ej97u\",{\"cx\":\"11\",\"cy\":\"11\",\"r\":\"8\"}],[\"$\",\"path\",\"1qie3q\",{\"d\":\"m21 21-4.3-4.3\"}],\"$undefined\"]}],\"Search packages\"],\"data-slot\":\"button\",\"className\":\"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [\u0026_svg]:pointer-events-none [\u0026_svg:not([class*='size-'])]:size-4 shrink-0 [\u0026_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-9 px-4 py-2 has-[\u003esvg]:px-3\",\"ref\":null}]]}]]}]]}],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}],\"$L6\"]}]}]]}],{\"children\":[\"$L7\",{\"children\":[\"$L8\",{\"children\":[\"$L9\",{},null,false,false]},[\"$La\",[],[]],false,false]},null,false,false]},null,false,false],\"$Lb\",false]],\"m\":\"$undefined\",\"G\":[\"$c\",[]],\"S\":false}\n"])</script><script>self.__next_f.push([1,"6:[\"$\",\"$Ld\",null,{}]\n7:[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L2\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L3\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}]\n8:[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L2\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L3\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}]\n9:[\"$\",\"$1\",\"c\",{\"children\":[\"$Le\",[[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/d23d08e0b5d1d215.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/chunks/ae55acb14c32e044.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"$Lf\",null,{\"children\":[\"$\",\"$10\",null,{\"name\":\"Next.MetadataOutlet\",\"children\":\"$@11\"}]}]]}]\na:null\nb:[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$L12\",null,{\"children\":\"$L13\"}],[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$L14\",null,{\"children\":[\"$\",\"$10\",null,{\"name\":\"Next.Metadata\",\"children\":\"$L15\"}]}]}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]]}]\n"])</script><script>self.__next_f.push([1,"e:[\"$\",\"div\",null,{\"className\":\"min-h-screen bg-background\",\"children\":[[\"$\",\"$L4\",null,{}],[\"$\",\"main\",null,{\"className\":\"mx-auto max-w-6xl px-4 py-8\",\"children\":[\"$\",\"$10\",null,{\"fallback\":[\"$\",\"div\",null,{\"className\":\"space-y-8\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-6 lg:flex-row lg:gap-8\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex-1 space-y-4\",\"children\":[[\"$\",\"div\",null,{\"data-slot\":\"skeleton\",\"className\":\"bg-accent animate-pulse rounded-md h-10 w-64\"}],[\"$\",\"div\",null,{\"data-slot\":\"skeleton\",\"className\":\"bg-accent animate-pulse rounded-md h-6 w-full max-w-xl\"}],[\"$\",\"div\",null,{\"className\":\"flex gap-2\",\"children\":[[\"$\",\"div\",null,{\"data-slot\":\"skeleton\",\"className\":\"bg-accent animate-pulse rounded-md h-6 w-16\"}],[\"$\",\"div\",null,{\"data-slot\":\"skeleton\",\"className\":\"bg-accent animate-pulse rounded-md h-6 w-20\"}],[\"$\",\"div\",null,{\"data-slot\":\"skeleton\",\"className\":\"bg-accent animate-pulse rounded-md h-6 w-14\"}]]}]]}],[\"$\",\"div\",null,{\"className\":\"w-full lg:w-80\",\"children\":[\"$\",\"div\",null,{\"data-slot\":\"skeleton\",\"className\":\"bg-accent animate-pulse rounded-md h-32 w-full\"}]}]]}],[\"$\",\"div\",null,{\"className\":\"space-y-4\",\"children\":[[\"$\",\"div\",null,{\"data-slot\":\"skeleton\",\"className\":\"bg-accent animate-pulse rounded-md h-10 w-64\"}],[\"$\",\"div\",null,{\"data-slot\":\"skeleton\",\"className\":\"bg-accent animate-pulse rounded-md h-64 w-full\"}]]}]]}],\"children\":\"$L16\"}]}]]}]\n"])</script><script>self.__next_f.push([1,"13:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\n"])</script><script>self.__next_f.push([1,"17:I[27201,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"IconMark\"]\n11:null\n15:[[\"$\",\"title\",\"0\",{\"children\":\"choo - npm explorer\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"A 4kb framework for creating sturdy frontend applications\"}],[\"$\",\"link\",\"2\",{\"rel\":\"icon\",\"href\":\"/icon-light-32x32.png\",\"media\":\"(prefers-color-scheme: light)\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/icon-dark-32x32.png\",\"media\":\"(prefers-color-scheme: dark)\"}],[\"$\",\"link\",\"4\",{\"rel\":\"icon\",\"href\":\"/icon.svg\",\"type\":\"image/svg+xml\"}],[\"$\",\"link\",\"5\",{\"rel\":\"apple-touch-icon\",\"href\":\"/apple-icon.png\"}],[\"$\",\"$L17\",\"6\",{}]]\n"])</script><title>choo - npm explorer

choo

v7.1.0

A 4kb framework for creating sturdy frontend applications

client frontend framework minimal composable tiny

0/weekUpdated 2 years agoMITUnpacked: 179.2 KB

Published by mreinstein

npm install choo

Repository Homepage npm

Choo

:steam_locomotive::train::train::train::train::train:

Fun functional programming

A 4kb framework for creating sturdy frontend applications

alt="API stability" />

alt="NPM version" />

alt="Build Status" />

alt="Test Coverage" />

alt="Download" />

alt="Standard" />

Website

|

Handbook

|

Ecosystem

|

Contributing

|

Reddit

|

Chat

_{The little framework that could. Built with ❤︎ by
Yoshua Wuyts and

contributors}

- Features
- Example
- Philosophy
- Events
- State
- Routing
- Server Rendering
- Components
- Optimizations
- FAQ
- API
- Installation
- See Also
- Support

Features

Example

js
var html = require('choo/html')
var devtools = require('choo-devtools')
var choo = require('choo')
var app = choo()
app.use(devtools())
app.use(countStore)
app.route('/', mainView)
app.mount('body')

function mainView (state, emit) { return html

count is ${state.count}


  function onclick () {
    emit('increment', 1)
  }
}

`Philosophy`


We believe programming should be fun and light, not stern and stressful. It's
cool to be cute; using serious words without explaining them doesn't make for
better results - if anything it scares people off. We don't want to be scary,
we want to be nice and fun, and then _casually_ be the best choice around.
_Real casually._
We believe frameworks should be disposable, and components recyclable. We don't
want a web where walled gardens jealously compete with one another. By making
the DOM the lowest common denominator, switching from one framework to another
becomes frictionless. Choo is modest in its design; we don't believe it will
be top of the class forever, so we've made it as easy to toss out as it is to
pick up.
We don't believe that bigger is better. Big APIs, large complexities, long
files - we see them as omens of impending userland complexity. We want everyone
on a team, no matter the size, to fully understand how an application is laid
out. And once an application is built, we want it to be small, performant and
easy to reason about. All of which makes for easy to debug code, better results
and super smiley faces.
Events

At the core of Choo is an event emitter, which is used for both application
logic but also to interface with the framework itself. The package we use for
this is nanobus.

`$3`


Choo emits this when the DOM is ready. Similar to the DOM's

'DOMContentLoaded'

 event, except it will be emitted even if the listener is
added _after_ the DOM became ready. Uses
document-ready under the hood.
$3

This event should be emitted to re-render the DOM. A common pattern is to
update the

state object, and then emit the 'render'

 event straight after.
Note that

'render' will only have an effect once the DOMContentLoaded

 event
has been fired.
$3

Choo emits this event whenever routes change. This is triggered by either

'pushState', 'replaceState' or 'popState'

.
$3

This event should be emitted to navigate to a new route. The new route is added
to the browser's history stack, and will emit

'navigate' and 'render'

.
Similar to
history.pushState.
$3

This event should be emitted to navigate to a new route. The new route replaces
the current entry in the browser's history stack, and will emit

'navigate'

and

'render'

. Similar to
history.replaceState.
$3

This event is emitted when the user hits the 'back' button in their browser.
The new route will be a previous entry in the browser's history stack, and
immediately afterward the

'navigate' and 'render'

events will be emitted.
Similar to history.popState. (Note
that

emit('popState')

 will _not_ cause a popState action - use

history.go(-1) for that - this is different from the behaviour of pushState

and

replaceState

!)
$3

This event should be emitted whenever the

document.title

 needs to be updated.
It will set both

document.title and state.title

.  This value can be used
when server rendering to accurately include a

<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> tag in the header.<br />This is derived from the<br /><a href="https://developer.mozilla.org/en-US/docs/Web/Events/DOMTitleChanged" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">DOMTitleChanged event</a>.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">State</h2><br />Choo comes with a shared state object. This object can be mutated freely, and<br />is passed into the view functions whenever </code>'render'<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> is emitted. The state<br />object comes with a few properties set.</p><p class="my-3">When initializing the application, </code>window.initialState<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> is used to provision<br />the initial state. This is especially useful when combined with server<br />rendering. See <a href="#server-rendering" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">server rendering</a> for more details.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3><br />A mapping of Choo's built in events. It's recommended to extend this object<br />with your application's events. By defining your event names once and setting<br />them on </code>state.events<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, it reduces the chance of typos, generally autocompletes<br />better, makes refactoring easier and compresses better.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3><br />The current params taken from the route. E.g. </code>/foo/:bar<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> becomes available as<br /></code>state.params.bar<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> If a wildcard route is used (</code>/foo/*<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">) it's available as<br /></code>state.params.wildcard<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3><br />An object containing the current queryString. </code>/foo?bin=baz<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> becomes </code>{ bin:<br />'baz' }<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3><br />An object containing the current href. </code>/foo?bin=baz<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> becomes </code>/foo<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3><br />The current name of the route used in the router (e.g. </code>/foo/:bar<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">).</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3><br />The current page title. Can be set using the </code>DOMTitleChange<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> event.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3><br />An object _recommended_ to use for local component state.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3><br />Generic class cache. Will lookup Component instance by id and create one if not<br />found. Useful for working with stateful <a href="#components" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">components</a>.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Routing</h2><br />Choo is an application level framework. This means that it takes care of<br />everything related to routing and pathnames for you.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3><br />Params can be registered by prepending the route name with </code>:routename<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, e.g.<br /></code>/foo/:bar/:baz<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. The value of the param will be saved on </code>state.params<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> (e.g.<br /></code>state.params.bar<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">). Wildcard routes can be registered with </code><em><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, e.g. </code>/foo/</em><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.<br />The value of the wildcard will be saved under </code>state.params.wildcard<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3><br />Sometimes a route doesn't match, and you want to display a page to handle it.<br />You can do this by declaring </code>app.route('*', handler)<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> to handle all routes<br />that didn't match anything else.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3><br />Querystrings (e.g. </code>?foo=bar<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">) are ignored when matching routes. An object<br />containing the key-value mappings exists as </code>state.query<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3><br />By default, hashes are ignored when routing. When enabling hash routing<br />(</code>choo({ hash: true })<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">) hashes will be treated as part of the url, converting<br /></code>/foo#bar<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> to </code>/foo/bar<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. This is useful if the application is not mounted at<br />the website root. Unless hash routing is enabled, if a hash is found we check if<br />there's an anchor on the same page, and will scroll the element into view. Using<br />both hashes in URLs and anchor links on the page is generally not recommended.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3><br />By default all clicks on </code><a><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> tags are handled by the router through the<br /><a href="https://github.com/choojs/nanohref" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">nanohref</a> module. This can be<br />disabled application-wide by passing </code>{ href: false }<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> to the application<br />constructor. The event is not handled under the following conditions:<br />- the click event had </code>.preventDefault()<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> called on it<br />- the link has a </code>target="_blank"<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> attribute with </code>rel="noopener noreferrer"<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />- a modifier key is enabled (e.g. </code>ctrl<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>alt<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>shift<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> or </code>meta<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">)<br />- the link's href starts with protocol handler such as </code>mailto:<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> or </code>dat:<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />- the link points to a different host<br />- the link has a </code>download<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> attribute</p><p class="my-3">:warn: Note that we only handle </code>target=_blank<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> if they also have<br /></code>rel="noopener noreferrer"<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> on them. This is needed to <a href="https://mathiasbynens.github.io/rel-noopener/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">properly sandbox web<br />pages</a>.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3><br />To navigate routes you can emit </code>'pushState'<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>'popState'<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> or<br /></code>'replaceState'<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. See <a href="#events" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">#events</a> for more details about these events.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Server Rendering</h2><br />Choo was built with Node in mind. To render on the server call<br /></code>.toString(route, [state])<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> on your </code>choo<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> instance.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js<br />var html = require('choo/html')<br />var choo = require('choo')</p><p class="my-3">var app = choo()<br />app.route('/', function (state, emit) {<br /> return html</code><div>Hello ${state.name}</div><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />})</p><p class="my-3">var state = { name: 'Node' }<br />var string = app.toString('/', state)</p><p class="my-3">console.log(string)<br />// => '<div>Hello Node</div>'<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">When starting an application in the browser, it's recommended to provide the<br />same </code>state<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> object available as </code>window.initialState<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. When the application is<br />started, it'll be used to initialize the application state. The process of<br />server rendering, and providing an initial state on the client to create the<br />exact same document is also known as "rehydration".</p><p class="my-3">For security purposes, after </code>window.initialState<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> is used it is deleted from<br />the </code>window<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> object.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">html<br /><html><br /> <head><br /> <script>window.initialState = { initial: 'state' }</script><br /> </head><br /> <body><br /> </body><br /></html><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Components</h2><br />From time to time there will arise a need to have an element in an application<br />hold a self-contained state or to not rerender when the application does. This<br />is common when using 3rd party libraries to e.g. display an interactive map or a<br />graph and you rely on this 3rd party library to handle modifications to the DOM.<br />Components come baked in to Choo for these kinds of situations. See<br />[nanocomponent][nanocomponent] for documentation on the component class.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript<br />// map.js<br />var html = require('choo/html')<br />var mapboxgl = require('mapbox-gl')<br />var Component = require('choo/component')</p><p class="my-3">module.exports = class Map extends Component {<br /> constructor (id, state, emit) {<br /> super(id)<br /> this.local = state.components[id] = {}<br /> }</p><p class="my-3"> load (element) {<br /> this.map = new mapboxgl.Map({<br /> container: element,<br /> center: this.local.center<br /> })<br /> }</p><p class="my-3"> update (center) {<br /> if (center.join() !== this.local.center.join()) {<br /> this.map.setCenter(center)<br /> }<br /> return false<br /> }</p><p class="my-3"> createElement (center) {<br /> this.local.center = center<br /> return html</code><div></div><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br /> }<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript<br />// index.js<br />var choo = require('choo')<br />var html = require('choo/html')<br />var Map = require('./map.js')</p><p class="my-3">var app = choo()<br />app.route('/', mainView)<br />app.mount('body')</p><p class="my-3">function mainView (state, emit) {<br /> return html</code><br /> <body><br /> <button onclick=${onclick}>Where am i?</button><br /> ${state.cache(Map, 'my-map').render(state.center)}<br /> </body><br /> <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"> function onclick () {<br /> emit('locate')<br /> }<br />}</p><p class="my-3">app.use(function (state, emitter) {<br /> state.center = [18.0704503, 59.3244897]<br /> emitter.on('locate', function () {<br /> window.navigator.geolocation.getCurrentPosition(function (position) {<br /> state.center = [position.coords.longitude, position.coords.latitude]<br /> emitter.emit('render')<br /> })<br /> })<br />})<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3><br />When working with stateful components, one will need to keep track of component<br />instances – </code>state.cache<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> does just that. The component cache is a function<br />which takes a component class and a unique id (</code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">) as its first two<br />arguments. Any following arguments will be forwarded to the component constructor<br />together with </code>state<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> and </code>emit<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.</p><p class="my-3">The default class cache is an LRU cache (using [nanolru][nanolru]), meaning it<br />will only hold on to a fixed amount of class instances (</code>100<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> by default) before<br />starting to evict the least-recently-used instances. This behavior can be<br />overriden with <a href="#app--chooopts" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">options</a>.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Optimizations</h2><br />Choo is reasonably fast out of the box. But sometimes you might hit a scenario<br />where a particular part of the UI slows down the application, and you want to<br />speed it up. Here are some optimizations that are possible.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3><br />Sometimes we want to tell the algorithm to not evaluate certain nodes (and its<br />children). This can be because we're sure they haven't changed, or perhaps<br />because another piece of code is managing that part of the DOM tree. To achieve<br />this </code>nanomorph<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> evaluates the </code>.isSameNode()<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> method on nodes to determine if<br />they should be updated or not.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js<br />var el = html</code><div>node</div><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">// tell nanomorph to not compare the DOM tree if they're both divs<br />el.isSameNode = function (target) {<br /> return (target && target.nodeName && target.nodeName === 'DIV')<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3><br />It's common to work with lists of elements on the DOM. Adding, removing or<br />reordering elements in a list can be rather expensive. To optimize this you can<br />add an </code>id<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> attribute to a DOM node. When reordering nodes it will compare<br />nodes with the same ID against each other, resulting in far fewer re-renders.<br />This is especially potent when coupled with DOM node caching.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js<br />var el = html</code><br /> <section><br /> <div id="first">hello</div><br /> <div id="second">world</div><br /> </section><br /><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3><br />We use the </code>require('assert')<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> module from Node core to provide helpful error<br />messages in development. In production you probably want to strip this using<br />[unassertify][unassertify].</p><p class="my-3">To convert inlined HTML to valid DOM nodes we use </code>require('nanohtml')<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. This has<br />overhead during runtime, so for production environments we should unwrap this<br />using the [nanohtml transform][nanohtml].</p><p class="my-3">Setting up browserify transforms can sometimes be a bit of hassle; to make this<br />more convenient we recommend using [bankai build][bankai] to build your assets for production.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">FAQ</h2><br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3><br />Because I thought it sounded cute. All these programs talk about being<br />_"performant"_, _"rigid"_, _"robust"_ - I like programming to be light, fun and<br />non-scary. Choo embraces that.</p><p class="my-3">Also imagine telling some business people you chose to rewrite something<br />critical for serious bizcorp using a train themed framework.<br />:steam_locomotive::train::train::train:</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3><br />It's called "Choo", though we're fine if you call it "Choo-choo" or<br />"Chugga-chugga-choo-choo" too. The only time "choo.js" is tolerated is if /<br />when you shimmy like you're a locomotive.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3><br />Choo uses [nanomorph][nanomorph], which diffs real DOM nodes instead of<br />virtual nodes. It turns out that [browsers are actually ridiculously good at<br />dealing with DOM nodes][morphdom-bench], and it has the added benefit of<br />working with _any_ library that produces valid DOM nodes. So to put a long<br />answer short: we're using something even better.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3><br />Template strings aren't supported in all browsers, and parsing them creates<br />significant overhead. To optimize we recommend running </code>browserify<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> with<br />[nanohtml][nanohtml] as a global transform or using [bankai][bankai] directly.<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">sh<br />$ browserify -g nanohtml<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3><br />Sure.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">API</h2><br />This section provides documentation on how each function in Choo works. It's<br />intended to be a technical reference. If you're interested in learning choo for<br />the first time, consider reading through the [handbook][handbook] first<br />:sparkles:</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3><br />Initialize a new </code>choo<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> instance. </code>opts<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> can also contain the following values:<br />- __opts.history:__ default: </code>true<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. Listen for url changes through the<br /> history API.<br />- __opts.href:__ default: </code>true<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. Handle all relative </code><a<br /> href="<location>"></a><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> clicks and call </code>emit('render')<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />- __opts.cache:__ default: </code>undefined<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. Override default class cache used by<br /> </code>state.cache<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. Can be a a </code>number<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> (maximum number of instances in cache,<br /> default </code>100<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">) or an </code>object<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> with a [nanolru][nanolru]-compatible API.<br />- __opts.hash:__ default: </code>false<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. Treat hashes in URLs as part of the pathname,<br /> transforming </code>/foo#bar<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> to </code>/foo/bar<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. This is useful if the application is<br /> not mounted at the website root.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3><br />Call a function and pass it a </code>state<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>emitter<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> and </code>app<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. </code>emitter<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> is an instance<br />of <a href="https://github.com/choojs/nanobus/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">nanobus</a>. You can listen to<br />messages by calling </code>emitter.on()<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> and emit messages by calling<br /></code>emitter.emit()<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. </code>app<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> is the same Choo instance. Callbacks passed to </code>app.use()<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> are commonly referred to as<br /></code>'stores'<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.</p><p class="my-3">If the callback has a </code>.storeName<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> property on it, it will be used to identify<br />the callback during tracing.</p><p class="my-3">See <a href="#events" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">#events</a> for an overview of all events.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3><br />Register a route on the router. The handler function is passed </code>app.state<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />and </code>app.emitter.emit<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> as arguments. Uses [nanorouter][nanorouter] under the<br />hood.</p><p class="my-3">See <a href="#routing" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">#routing</a> for an overview of how to use routing efficiently.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3><br />Start the application and mount it on the given </code>querySelector<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">,<br />the given selector can be a String or a DOM element.</p><p class="my-3">In the browser, this will _replace_ the selector provided with the tree returned from </code>app.start()<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.<br />If you want to add the app as a child to an element, use </code>app.start()<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> to obtain the tree and manually append it.</p><p class="my-3">On the server, this will save the </code>selector<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> on the app instance.<br />When doing server side rendering, you can then check the </code>app.selector<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> property to see where the render result should be inserted.</p><p class="my-3">Returns </code>this<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, so you can easily export the application for server side rendering:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js<br />module.exports = app.mount('body')<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3><br />Start the application. Returns a tree of DOM nodes that can be mounted using<br /></code>document.body.appendChild()<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3><br />Render the application to a string. Useful for rendering on the server.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3><br />Create DOM nodes from template string literals. Exposes<br /><a href="https://github.com/choojs/nanohtml" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">nanohtml</a>. Can be optimized using<br />[nanohtml][nanohtml].</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3><br />Exposes <a href="https://github.com/shama/nanohtml#unescaping" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">nanohtml/raw</a> helper for rendering raw HTML content.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Installation</h2><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">sh<br />$ npm install choo<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">See Also</h2><br />- <a href="https://github.com/choojs/bankai" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">bankai</a> - streaming asset compiler<br />- <a href="http://stack.gl/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">stack.gl</a> - open software ecosystem for WebGL<br />- <a href="https://github.com/maxogden/yo-yo" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">yo-yo</a> - tiny library for modular UI<br />- <a href="https://github.com/tachyons-css/tachyons" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">tachyons</a> - functional CSS for<br /> humans<br />- <a href="https://github.com/stackcss/sheetify" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">sheetify</a> - modular CSS bundler for<br /> </code>browserify`</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Support</h2><br />Creating a quality framework takes a lot of time. Unlike others frameworks,<br />Choo is completely independently funded. We fight for our users. This does mean<br />however that we also have to spend time working contracts to pay the bills.<br />This is where you can help: by chipping in you can ensure more time is spent<br />improving Choo rather than dealing with distractions.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3><br />Become a sponsor and help ensure the development of independent quality<br />software. You can help us keep the lights on, bellies full and work days sharp<br />and focused on improving the state of the web. <a href="https://opencollective.com/choo#sponsor" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Become a<br />sponsor</a></p><p class="my-3"><a href="https://opencollective.com/choo/sponsor/0/website" target="_blank"><img src="https://opencollective.com/choo/sponsor/0/avatar.svg"></a><br /><a href="https://opencollective.com/choo/sponsor/1/website" target="_blank"><img src="https://opencollective.com/choo/sponsor/1/avatar.svg"></a><br /><a href="https://opencollective.com/choo/sponsor/2/website" target="_blank"><img src="https://opencollective.com/choo/sponsor/2/avatar.svg"></a><br /><a href="https://opencollective.com/choo/sponsor/3/website" target="_blank"><img src="https://opencollective.com/choo/sponsor/3/avatar.svg"></a><br /><a href="https://opencollective.com/choo/sponsor/4/website" target="_blank"><img src="https://opencollective.com/choo/sponsor/4/avatar.svg"></a><br /><a href="https://opencollective.com/choo/sponsor/5/website" target="_blank"><img src="https://opencollective.com/choo/sponsor/5/avatar.svg"></a><br /><a href="https://opencollective.com/choo/sponsor/6/website" target="_blank"><img src="https://opencollective.com/choo/sponsor/6/avatar.svg"></a><br /><a href="https://opencollective.com/choo/sponsor/7/website" target="_blank"><img src="https://opencollective.com/choo/sponsor/7/avatar.svg"></a><br /><a href="https://opencollective.com/choo/sponsor/8/website" target="_blank"><img src="https://opencollective.com/choo/sponsor/8/avatar.svg"></a><br /><a href="https://opencollective.com/choo/sponsor/9/website" target="_blank"><img src="https://opencollective.com/choo/sponsor/9/avatar.svg"></a><br /><a href="https://opencollective.com/choo/sponsor/10/website" target="_blank"><img src="https://opencollective.com/choo/sponsor/10/avatar.svg"></a><br /><a href="https://opencollective.com/choo/sponsor/11/website" target="_blank"><img src="https://opencollective.com/choo/sponsor/11/avatar.svg"></a><br /><a href="https://opencollective.com/choo/sponsor/12/website" target="_blank"><img src="https://opencollective.com/choo/sponsor/12/avatar.svg"></a><br /><a href="https://opencollective.com/choo/sponsor/13/website" target="_blank"><img src="https://opencollective.com/choo/sponsor/13/avatar.svg"></a><br /><a href="https://opencollective.com/choo/sponsor/14/website" target="_blank"><img src="https://opencollective.com/choo/sponsor/14/avatar.svg"></a><br /><a href="https://opencollective.com/choo/sponsor/15/website" target="_blank"><img src="https://opencollective.com/choo/sponsor/15/avatar.svg"></a><br /><a href="https://opencollective.com/choo/sponsor/16/website" target="_blank"><img src="https://opencollective.com/choo/sponsor/16/avatar.svg"></a><br /><a href="https://opencollective.com/choo/sponsor/17/website" target="_blank"><img src="https://opencollective.com/choo/sponsor/17/avatar.svg"></a><br /><a href="https://opencollective.com/choo/sponsor/18/website" target="_blank"><img src="https://opencollective.com/choo/sponsor/18/avatar.svg"></a><br /><a href="https://opencollective.com/choo/sponsor/19/website" target="_blank"><img src="https://opencollective.com/choo/sponsor/19/avatar.svg"></a><br /><a href="https://opencollective.com/choo/sponsor/20/website" target="_blank"><img src="https://opencollective.com/choo/sponsor/20/avatar.svg"></a><br /><a href="https://opencollective.com/choo/sponsor/21/website" target="_blank"><img src="https://opencollective.com/choo/sponsor/21/avatar.svg"></a><br /><a href="https://opencollective.com/choo/sponsor/22/website" target="_blank"><img src="https://opencollective.com/choo/sponsor/22/avatar.svg"></a><br /><a href="https://opencollective.com/choo/sponsor/23/website" target="_blank"><img src="https://opencollective.com/choo/sponsor/23/avatar.svg"></a><br /><a href="https://opencollective.com/choo/sponsor/24/website" target="_blank"><img src="https://opencollective.com/choo/sponsor/24/avatar.svg"></a><br /><a href="https://opencollective.com/choo/sponsor/25/website" target="_blank"><img src="https://opencollective.com/choo/sponsor/25/avatar.svg"></a><br /><a href="https://opencollective.com/choo/sponsor/26/website" target="_blank"><img src="https://opencollective.com/choo/sponsor/26/avatar.svg"></a><br /><a href="https://opencollective.com/choo/sponsor/27/website" target="_blank"><img src="https://opencollective.com/choo/sponsor/27/avatar.svg"></a><br /><a href="https://opencollective.com/choo/sponsor/28/website" target="_blank"><img src="https://opencollective.com/choo/sponsor/28/avatar.svg"></a><br /><a href="https://opencollective.com/choo/sponsor/29/website" target="_blank"><img src="https://opencollective.com/choo/sponsor/29/avatar.svg"></a></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3><br />Become a backer, and buy us a coffee (or perhaps lunch?) every month or so.<br /><a href="https://opencollective.com/choo#backer" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Become a backer</a></p><p class="my-3"><a href="https://opencollective.com/choo/backer/0/website" target="_blank"><img src="https://opencollective.com/choo/backer/0/avatar.svg"></a><br /><a href="https://opencollective.com/choo/backer/1/website" target="_blank"><img src="https://opencollective.com/choo/backer/1/avatar.svg"></a><br /><a href="https://opencollective.com/choo/backer/2/website" target="_blank"><img src="https://opencollective.com/choo/backer/2/avatar.svg"></a><br /><a href="https://opencollective.com/choo/backer/3/website" target="_blank"><img src="https://opencollective.com/choo/backer/3/avatar.svg"></a><br /><a href="https://opencollective.com/choo/backer/4/website" target="_blank"><img src="https://opencollective.com/choo/backer/4/avatar.svg"></a><br /><a href="https://opencollective.com/choo/backer/5/website" target="_blank"><img src="https://opencollective.com/choo/backer/5/avatar.svg"></a><br /><a href="https://opencollective.com/choo/backer/6/website" target="_blank"><img src="https://opencollective.com/choo/backer/6/avatar.svg"></a><br /><a href="https://opencollective.com/choo/backer/7/website" target="_blank"><img src="https://opencollective.com/choo/backer/7/avatar.svg"></a><br /><a href="https://opencollective.com/choo/backer/8/website" target="_blank"><img src="https://opencollective.com/choo/backer/8/avatar.svg"></a><br /><a href="https://opencollective.com/choo/backer/9/website" target="_blank"><img src="https://opencollective.com/choo/backer/9/avatar.svg"></a><br /><a href="https://opencollective.com/choo/backer/10/website" target="_blank"><img src="https://opencollective.com/choo/backer/10/avatar.svg"></a><br /><a href="https://opencollective.com/choo/backer/11/website" target="_blank"><img src="https://opencollective.com/choo/backer/11/avatar.svg"></a><br /><a href="https://opencollective.com/choo/backer/12/website" target="_blank"><img src="https://opencollective.com/choo/backer/12/avatar.svg"></a><br /><a href="https://opencollective.com/choo/backer/13/website" target="_blank"><img src="https://opencollective.com/choo/backer/13/avatar.svg"></a><br /><a href="https://opencollective.com/choo/backer/14/website" target="_blank"><img src="https://opencollective.com/choo/backer/14/avatar.svg"></a><br /><a href="https://opencollective.com/choo/backer/15/website" target="_blank"><img src="https://opencollective.com/choo/backer/15/avatar.svg"></a><br /><a href="https://opencollective.com/choo/backer/16/website" target="_blank"><img src="https://opencollective.com/choo/backer/16/avatar.svg"></a><br /><a href="https://opencollective.com/choo/backer/17/website" target="_blank"><img src="https://opencollective.com/choo/backer/17/avatar.svg"></a><br /><a href="https://opencollective.com/choo/backer/18/website" target="_blank"><img src="https://opencollective.com/choo/backer/18/avatar.svg"></a><br /><a href="https://opencollective.com/choo/backer/19/website" target="_blank"><img src="https://opencollective.com/choo/backer/19/avatar.svg"></a><br /><a href="https://opencollective.com/choo/backer/20/website" target="_blank"><img src="https://opencollective.com/choo/backer/20/avatar.svg"></a><br /><a href="https://opencollective.com/choo/backer/21/website" target="_blank"><img src="https://opencollective.com/choo/backer/21/avatar.svg"></a><br /><a href="https://opencollective.com/choo/backer/22/website" target="_blank"><img src="https://opencollective.com/choo/backer/22/avatar.svg"></a><br /><a href="https://opencollective.com/choo/backer/23/website" target="_blank"><img src="https://opencollective.com/choo/backer/23/avatar.svg"></a><br /><a href="https://opencollective.com/choo/backer/24/website" target="_blank"><img src="https://opencollective.com/choo/backer/24/avatar.svg"></a><br /><a href="https://opencollective.com/choo/backer/25/website" target="_blank"><img src="https://opencollective.com/choo/backer/25/avatar.svg"></a><br /><a href="https://opencollective.com/choo/backer/26/website" target="_blank"><img src="https://opencollective.com/choo/backer/26/avatar.svg"></a><br /><a href="https://opencollective.com/choo/backer/27/website" target="_blank"><img src="https://opencollective.com/choo/backer/27/avatar.svg"></a><br /><a href="https://opencollective.com/choo/backer/28/website" target="_blank"><img src="https://opencollective.com/choo/backer/28/avatar.svg"></a><br /><a href="https://opencollective.com/choo/backer/29/website" target="_blank"><img src="https://opencollective.com/choo/backer/29/avatar.svg"></a></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">License</h2><br /><a href="https://tldrlegal.com/license/mit-license" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">MIT</a></p><p class="my-3">[nanocomponent]: https://github.com/choojs/nanocomponent<br />[nanolru]: https://github.com/s3ththompson/nanolru<br />[bankai]: https://github.com/choojs/bankai<br />[nanohtml]: https://github.com/choojs/nanohtml<br />[browserify]: https://github.com/substack/node-browserify<br />[budo]: https://github.com/mattdesl/budo<br />[es2020]: https://github.com/yoshuawuyts/es2020<br />[handbook]: https://github.com/yoshuawuyts/choo-handbook<br />[hyperx]: https://github.com/substack/hyperx<br />[morphdom-bench]: https://github.com/patrick-steele-idem/morphdom#benchmarks<br />[nanomorph]: https://github.com/choojs/nanomorph<br />[nanorouter]: https://github.com/choojs/nanorouter<br />[yo-yo]: https://github.com/maxogden/yo-yo<br />[unassertify]: https://github.com/unassert-js/unassertify<br />[window-performance]: https://developer.mozilla.org/en-US/docs/Web/API/Performance<br /></p></div><div class="flex justify-center absolute inset-x-0 bottom-0 bg-gradient-to-t from-background via-background to-transparent pb-4 pt-16"><button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down mr-1 h-4 w-4"><path d="m6 9 6 6 6-6"></path></svg>Show more</button></div></div></div><template id="P:4"></template><template id="P:5"></template></div></div></div><script>self.__next_f.push([1,"28:[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}]\n29:[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^4.4.0\"}]\n2a:[\"$\",\"$L5\",\"nanocomponent\",{\"href\":\"/package/nanocomponent\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"nanocomponent\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^6.5.0\"}]]}]\n2b:[\"$\",\"$L5\",\"nanohref\",{\"href\":\"/package/nanohref\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"nanohref\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^3.0.0\"}]]}]\n2c:[\"$\",\"$L5\",\"nanohtml\",{\"href\":\"/package/nanohtml\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"nanohtml\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^1.1.0\"}]]}]\n2d:[\"$\",\"$L5\",\"nanolru\",{\"href\":\"/package/nanolru\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"nanolru\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^1.0.0\"}]]}]\n2e:[\"$\",\"$L5\",\"nanomorph\",{\"href\":\"/package/nanomorph\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 trans"])</script><script>self.__next_f.push([1,"ition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"nanomorph\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^5.1.2\"}]]}]\n2f:[\"$\",\"$L5\",\"nanoquery\",{\"href\":\"/package/nanoquery\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"nanoquery\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^1.1.0\"}]]}]\n30:[\"$\",\"$L5\",\"nanoraf\",{\"href\":\"/package/nanoraf\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"nanoraf\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^3.0.0\"}]]}]\n31:[\"$\",\"$L5\",\"nanorouter\",{\"href\":\"/package/nanorouter\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"nanorouter\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^4.0.0\"}]]}]\n32:[\"$\",\"$L5\",\"nanotiming\",{\"href\":\"/package/nanotiming\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"nanotiming\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^7.0.0\"}]]}]\n33:[\"$\",\"$L5\",\"scroll-to-anchor\",{\"href\":\"/package/scroll-to-anchor\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\""])</script><script>self.__next_f.push([1,"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"scroll-to-anchor\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^1.0.0\"}]]}]\n"])</script><script>self.__next_f.push([1,"34:[\"$\",\"div\",null,{\"data-slot\":\"card\",\"className\":\"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border shadow-sm py-4 lg:col-span-2\",\"children\":[[\"$\",\"div\",null,{\"data-slot\":\"card-header\",\"className\":\"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6 pb-2\",\"children\":[\"$\",\"div\",null,{\"data-slot\":\"card-title\",\"className\":\"font-semibold flex items-center gap-2 text-base\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-wrench h-4 w-4\",\"children\":[[\"$\",\"path\",\"cbrjhi\",{\"d\":\"M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z\"}],\"$undefined\"]}],\"Dev Dependencies\",[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"className\":\"inline-flex items-center justify-center rounded-md border px-2 py-0.5 font-medium w-fit whitespace-nowrap shrink-0 [\u0026\u003esvg]:size-3 gap-1 [\u0026\u003esvg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden border-transparent bg-secondary text-secondary-foreground [a\u0026]:hover:bg-secondary/90 ml-auto text-xs\",\"children\":13}]]}]}],[\"$\",\"div\",null,{\"data-slot\":\"card-content\",\"className\":\"px-6\",\"children\":[\"$\",\"div\",null,{\"className\":\"grid gap-1 sm:grid-cols-2 lg:grid-cols-3\",\"children\":[[\"$\",\"$L5\",\"@tap-format/spec\",{\"href\":\"/package/%40tap-format%2Fspec\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@tap-format/spec\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^0.2.0\"}]]}],[\"$\",\"$L5\",\"browserify\",{\"href\":\"/package/browserify\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"browserify\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^16.2.2\"}]]}],[\"$\",\"$L5\",\"bundle-collapser\",{\"href\":\"/package/bundle-collapser\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[\"$L36\",\"$undefined\"]}],\"bundle-collapser\"]}],\"$L37\"]}],\"$L38\",\"$L39\",\"$L3a\",\"$L3b\",\"$L3c\",\"$L3d\",\"$L3e\",\"$L3f\",\"$L40\",\"$L41\"]}]}]]}]\n"])</script><script>self.__next_f.push([1,"36:[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}]\n37:[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^1.2.1\"}]\n38:[\"$\",\"$L5\",\"dependency-check\",{\"href\":\"/package/dependency-check\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"dependency-check\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^3.1.0\"}]]}]\n39:[\"$\",\"$L5\",\"disc\",{\"href\":\"/package/disc\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"disc\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^1.3.3\"}]]}]\n3a:[\"$\",\"$L5\",\"hyperscript\",{\"href\":\"/package/hyperscript\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"hyperscript\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^2.0.2\"}]]}]\n3b:[\"$\",\"$L5\",\"pretty-bytes-cli\",{\"href\":\"/package/pretty-bytes-cli\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"pretty-bytes-cli\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^2.0.0\"}]]}]\n3c:[\"$\",\"$L5\",\"spok\",{\"href\":\"/package/spok\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-for"])</script><script>self.__next_f.push([1,"eground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"spok\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^0.9.1\"}]]}]\n3d:[\"$\",\"$L5\",\"standard\",{\"href\":\"/package/standard\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"standard\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^11.0.1\"}]]}]\n3e:[\"$\",\"$L5\",\"tape\",{\"href\":\"/package/tape\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"tape\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^4.6.3\"}]]}]\n3f:[\"$\",\"$L5\",\"tape-run\",{\"href\":\"/package/tape-run\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"tape-run\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^6.0.0\"}]]}]\n40:[\"$\",\"$L5\",\"tinyify\",{\"href\":\"/package/tinyify\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"tinyify\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^2.2.0\"}]]}]\n41:[\"$\",\"$L5\",\"tsd\",{\"href\":\"/package/tsd\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-"])</script><script>self.__next_f.push([1,"chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"tsd\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^0.11.0\"}]]}]\n"])</script><div hidden id="S:3"><div class="rounded-lg border p-3"><h4 class="mb-2 text-sm font-medium">Dist Tags</h4><div class="space-y-1"><div class="flex justify-between text-sm"><span class="text-muted-foreground">latest</span><a class="font-mono text-xs hover:underline" href="/package/choo/v/7.1.0">7.1.0</a></div><div class="flex justify-between text-sm"><span class="text-muted-foreground">next</span><a class="font-mono text-xs hover:underline" href="/package/choo/v/7.0.0-0">7.0.0-0</a></div></div></div></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:3","P:3")</script><div hidden id="S:4"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-dependencies" hidden="" id="radix-_R_aav5ubrb_-content-dependencies" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS("S:4","P:4")</script><div hidden id="S:5"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-versions" hidden="" id="radix-_R_aav5ubrb_-content-versions" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS("S:5","P:5")</script><script>$RC("B:1","S:1")</script></body></html>

choo

Choo

Website

|

Handbook

|

Ecosystem

|

Contributing

|

Reddit

|

Chat

Table of Contents

Features

Example

count is ${state.count}

`Philosophy`

Events

`$3`

$3

$3

$3

$3

$3

$3

choo

Choo

Website

|

Handbook

|

Ecosystem

|

Contributing

|

Reddit

|

Chat

Table of Contents

Features

Example

count is ${state.count}

`Philosophy`

Events

`$3`

$3

$3

$3

$3

$3

$3

choo

Choo

Website | Handbook | Ecosystem | Contributing | Reddit | Chat

Table of Contents

Features

Example

count is ${state.count}

Philosophy

Events

$3

$3

$3

$3

$3

$3

$3

choo

Choo

Website | Handbook | Ecosystem | Contributing | Reddit | Chat

Table of Contents

Features

Example

count is ${state.count}

Philosophy

Events

$3

$3

$3

$3

$3

$3

$3

Website

|

Handbook

|

Ecosystem

|

Contributing

|

Reddit

|

Chat

`Philosophy`

`$3`

Website

|

Handbook

|

Ecosystem

|

Contributing

|

Reddit

|

Chat

`Philosophy`

`$3`