const dynamicComponentMiddleware: SimpleMiddleware = async (ctx: Context) => {
  // You *really* want to have some hardcoded prefix OR use the much more complicated require.context
  // otherwise webpack will include a manifest that contains EVERY file in the project which bloats the
  // bundle significantly
  //
  // For example, using import(someVariable) means webpack has to assume that "someVariable" can be ANYTHING.
  // By including the './components' directory prefix, we can at least limit the manifist to only contain files
  // in that directory.
  //
  // Using require.context will result in the best bundle size, but your project must follow strict conventions.
  // In our case, we use it to register any file matching `./components/*/index.ts` and it looks something like...
  //
  // const context = require.context('./', true, /\.\/[^/_]+\/index\.ts$/)
  // context.keys().forEach((c) => {
  //   const name = c.match(/\.\/([^/_]+)\/index\.ts$/)[1]
  //   ko.components.register(name, { ...context(c) })
  // })
  const componentName = ctx.params.component
  const componentDir = ctx.params.location
  const componentConfig = await import(`./components/${componentDir}/${componentName}`)

  // register the component if this is the first time it's being hit
  if (!ko.components.isRegistered(componentName)) {
    ko.components.register(componentName, componentConfig)
  }

  // tell the router which component to use
  ctx.route.component = componentName
}

Router.use(dynamicComponentMiddleware)