choo-async-route

index.js

var html = require('bel')
var log = require('nanologger')('async-route')

function defaultLoading () {
  return html`<div>Loading ...</div>`
}

module.exports = function asyncRoute (opts) {
  var load = opts.load
  var loading = opts.loading || defaultLoading
  var promise
  var cache

  function onload (route) {
    cache = route
  }

  return function (state, emit) {
    if (cache) {
      return cache(state, emit)
    }

    var route = state.route

    if (!promise) {
      log.info('loading', route)
      promise = Promise.resolve(load())
        .then(onload)
        .then(function () {
          log.info('loaded', route)
          emit('render')
        })
    } else {
      log.debug('still loading', route)
    }

    return loading(state, emit)
  }
}

package.json

{
  "name": "choo-async-route",
  "description": "dynamically load choo routes on use",
  "version": "0.0.0",
  "license": "MIT",
  "dependencies": {
    "bel": "^5.1.1",
    "nanologger": "^1.3.1"
  }
}