Router extensions

example.js

import { Route, RouterEvents } from './router-exts'

const TrackScreen = html`
<section class="track-screen'
  onenter=${() => console.log('enter track screen')}
  onleave=${() => console.log('leave track screen')}
></section>
`

const HomeScreen = html`
<section class="track-screen'
  onenter=${() => console.log('enter home screen')}
  onleave=${() => console.log('leave home screen')}
></section>
`

app({
  view: [
    Route('/track', TrackScreen),
    Route('*', HomeScreen)
  ],
  mixins: [RouterEvents]
})

router-exts.js

const routes = {}

let prevLocation = null

const process = (eventName, location, emit) => {
  emit(`route:${eventName}`, location)

  const root = routes[location.match]
  const handler = root && root.data[`on${eventName}`]
  if (handler) {
    handler(location)
  }
}

export const RouterEvents = (app) => ({
  events: {
    route: (state, actions, location, emit) => {
      if (prevLocation) {
        process('leave', prevLocation, emit)
      }
      process('enter', location, emit)
      prevLocation = location
    }
  }
})

export const Route = (match, component) => {
  const hoc = (state, actions) => {
    const root = component(state, actions)
    routes[match] = root
    return root
  }

  return [match, hoc]
}