Choo: Possibility to use choo without routing/router

[graforlock]

Expected behavior

When working in a hybrid, microservice routing environment, I should just mount the specific route (e.g. after code split) without using the any (or pushstate) router. Express is now a source of truth for router.

Actual behavior

When working in a hybrid, microservice routing environment, I need to double up for express router instead letting express hit the route with name-of-route.js script. Express isn't now a source of truth for router.

I could not find answer to that in any documentation bit so far, hence the question. Is it possible? It is because we have a higher level routing solution routing the site to many different places, places using different technologies that only share the theme, and are microservices essentially.

[yoshuawuyts]

Heya! I tried answering this on IRC a lil bit back, but you popped out before I could finish writing my reply. Anyway, here is!

maciejsitko> hey, is there a possibility not to use router? we have code splitting in the company and all routing is done by express anyway (it just hits different budnles per route)
14:47 <maciejsitko> pushstate router kind of gets in the way this way
14:47 ⇐ maciejsitko quit (1fdd04a2@gateway/web/freenode/ip.31.221.4.162) Client Quit
14:48 <yoshuawuyts> maciejsitko: not really unfortunately; most of choo's glue is centered around the router. If your build process requires a custom routing it might be best to roll your own choo

[graforlock]

Yeah, I kind of lost it somewhere and didn't see the answer. It'd be a nice have as it'd be a much more flexible (& agnostic like React for that matter) and truly micro.

[brechtcs]

If you're looking for something more like React, maybe it's yo-yo that you're after?

[bcomnes]

@graforlock you can also use nested nanocomponents and a top level controller class to achieve something similar.

[graforlock]

Im not really looking for something like React, I like the choo API, I just think it would be a bit more flexible without being baked in / tightly coupled with pushstate router, or any kind of router for that matter - especially as the only possible choice. Just mounting it to the DOM opens possibilities & freedom for people adopting choo gradually/progressively, for instance. And also many many more options that don't just include a typical SPA use case, but any rich UI implementations. Thoughts?

@bcomnes I will look into it, thanks.

[jonjaques]

Can't you just do something like this?

const app = Choo({history: false})
module.exports = app

app.route(window.location.href, mainView)
if (global.document) {
  app.mount(...)
}

function mainView(state, emit) {
  switch(state.cond) {
    case 'a': return html``
    case ...
  }
}

That way it won't listen for or try to pushState on links, just a full page reload. If you want to switch views, just do so via state. If it's 4kb minified, seems like the 1-2 kb you would save by decoupling the router isn't the most pressing concern.

[graforlock]

Seems to be close, in isomorphic apps there is then a need to provide the feature check (like isSSR) for window context, in case of window missing. An then req.originalUrl needs to fall through.

[jonjaques]

Awesome! Updated my example by exporting the app and then check for global.document. I believe there is an internal property inside choo that already checks, but this worked for me in a commonjs (webpack) environment.

An alternative would be to bundle that up the same way for both and then have a separate bootstrapping script for the dom.

[graforlock]

Two separate bundles is the only reasonable solution at this point. Its "hackish" anyway, but works.

[graforlock]

@bcomnes @jonjaques If anyone's interested, a wrapper to allow just that:

https://github.com/graforlock/choo-detached