v6.x.x / v7.0.0 - wish list / roadmap

I want to gather a bit of sentiment for what people might be missing / what you feel might improve. The same as in v6, it’d be nice if all that was needed to update the major was npm install --save choo@7, and that’s it.

So far my wish list is:

• Figure out how to make routes render async, so we can apply route-based code splitting when needed. Not necessarily breaking, but it might just turn out that we need to rewrite the router (again, sigh - haha).
• Remove the unique labels from the tracing API measures, there’s no need for them when using a PerformanceObserver like in choo-log.
• Replace xtend with Object.assign() - https://polyfill.io provides a fallback for browsers that don’t support it, so for most people this will be a strict improvement.
• choo/component, using nanocomponent - Ideally it’d be nice if we could formalize tracing / an event system with this too. That way we keep blazing ahead in terms of debugging.
• Reading out from a global state (e.g. window.initialState) to provide out of the box “rehydration” of state that was passed on the server.

It’s still early, but I’d be interested in hearing input from people on what you find tricky, which things you love, and which things you struggle with! Thanks! ✨

[yoshuawuyts]

@chrisdwheatley nice one! - yeah was thinking we move to https://github.com/emilbayes/nanoassert using the package.json browser field. We’ve done that for a few modules already, and it seems to work real well 😁

[brechtcs]

I think we it’s possible to rewrite the render handling in such a way that it can support both sync and async routes without changing the syntax. This is loosely based on the way Gulp deals with the fact that tasks can both be sync and async. (I’ve removed some nanotiming calls for clarity.)

  this.emitter.prependListener(self._events.RENDER, nanoraf(function () {
    self.state.href = self._createLocation()
    var res = self.router(self.state.href)

    if (res instanceof HTMLElement) {
        var newTree = res
        nanomorph(self._tree, newTree)
    } else if (res && res.then typeof === 'function') {
        res.then(function (newTree) {
            assert(newTree instanceof HTMLElement, '...')
            nanomorph(self._tree, newTree)
        })
    }
}))

This way the current sync routes operate in the same way as they do now, plus you can also pass in a route handler which returns a promise (or just an async function, since they’re based on promises under the hood).

It might be possible to support callbacks too, as a third argument for route handlers, i.e. (state, emitter, done). If we added the required support to nanorouter, that would change the above to:

  this.emitter.prependListener(self._events.RENDER, nanoraf(function () {
    self.state.href = self._createLocation()
    var res = self.router(self.state.href, function (err, newTree) {
         if (err) return //not exactly sure how to handle this yet, feedback welcome :p
         assert(newTree instanceof HTMLElement, '...')
         nanomorph(self._tree, newTree)
    })

    if (res instanceof HTMLElement) {
        var newTree = res
        nanomorph(self._tree, newTree)
    } else if (res && res.then typeof === 'function') {
        res.then(function (newTree) {     
            assert(newTree instanceof HTMLElement, '...')
            nanomorph(self._tree, newTree)
        })
    } else {
        //do nothing, should be handled by the callback above
        //maybe some kind of assertion could be here added to be sure
    }
}))