Hyperapp#V2 Router API Update

- Path-to-regexp usage (with cached paths)
- Router context passing
- Redirect as subscription
- Location 'back' and 'go' methods
- Browser history as subscription

Author: sergey-shpak

package.json

@@ -50,6 +50,7 @@
     "babel-preset-env": "^1.6.1",
     "hyperapp": "^2.0.0",
     "jest": "^22.4.3",
+    "path-to-regexp": "^2.4.0",
     "prettier": "^1.11.1",
     "rollup": "^0.57.1",
     "uglify-js": "^3.3.16",

src/Link.js

@@ -1,27 +1,25 @@
 import { h } from 'hyperapp'
-import { location } from './location'
+import { location } from './index'
 
-function onClick(state, link, e){
-  if(
+const onClick = (state, link, e) => {
+  const { pathname } = state.location
+  if(!(
     e.defaultPrevented ||
     e.button !== 0 ||
     e.altKey ||
     e.metaKey ||
     e.ctrlKey ||
     e.shiftKey ||
-    e.target.getAttribute("target") === "_blank" ||
-    link.href === state.location.pathname
-  ){
-    return state
-  } else {
+    e.target.getAttribute('target') === '_blank'
+  )){
     e.preventDefault()
-    return location(state, link.href)
-  }
+    return link.to !== pathname
+      ? [location, link.to] : state
+  } else return state
 }
 
-export function Link(props, childrens){
+export const Link = (props, children) => {
   props.onClick = props.onClick || [ onClick, props ]
   props.href = props.to
-  delete props.to
-  return h('a', props, childrens)
-}
+  return h('a', props, children)
+}

src/Redirect.js

@@ -0,0 +1,12 @@
+import { location, Route } from './index'
+
+const fake = () => () => {}
+export const Redirect = (props) => {
+  const { from, to } = props
+  const render = typeof to === 'function' ? to : () => to
+  const match = Route({...props, path: from, render })
+  return { effect: match ? (props, dispatch) => {
+    dispatch([location, match])
+    return () => {}
+  } : fake }
+}

src/Route.js

@@ -1,23 +1,34 @@
-import { Switch } from './Switch'
-import { parseRoute } from './parseRoute'
+import pathToRegexp from 'path-to-regexp'
 
-export function Route(props, childrens){
-  var location = props.location
-  var path = props.path || ''
-  var render = props.render || Switch
-  var match = parseRoute(path, location.pathname, {
-    exact: !props.parent
+const cache = {}
+const compile = (path, { exact: end, strict }, keys = []) => {
+  const id = `${path}/${end}/${strict}`
+  return cache[id] ? cache[id] : (cache[id] = {
+    regexp: pathToRegexp(path, keys, { end, strict }), keys
   })
-  return (match && render(
-    function(){
-      var args = Array.prototype.slice.call(arguments, 0)
-      args[0] = Object.assign({}, args[0], {
-        location: location,
-        path: path + args[0].path || '',
-      })
-      return Route.apply(this, args)
-    },
-    Object.assign({}, props, { match: match, location: location } ),
-    childrens)
-  )
+}
+
+export const Route = (context, child) => {
+  const {
+    path = '',
+    exact = false,
+    strict = false,
+    render = () => child,
+    location = window.location
+  } = context
+
+  const compiled = compile(path, { exact, strict })
+  const match = compiled.regexp.exec(location.pathname)
+  const [ url, ...values ] = match || []
+  return match ? render({ route: {
+    params: compiled.keys.reduce((params, key, index) =>
+      Object.assign(params, {[ key.name ]: values[index]}), {}),
+    context,
+    path,
+    url
+  }}, (props, ...args) => Route.call(this, {
+    ...context, ...props,
+    render: props.render || undefined,
+    path: path + (props.path || ''),
+  }, ...args)) : null
 }

src/Switch.js

@@ -1,5 +1,25 @@
-export function history(location){
-  if(location && window.location.pathname !== location.pathname){
-    window.history.pushState(location, '', location.pathname)
-  }
+import { location } from './index'
+
+const effect = (_, dispatch) => {
+  const handleLocationChange = () =>
+    dispatch([ location, window.location.pathname ])
+  addEventListener('popstate', handleLocationChange)
+
+  return ['pushState', 'replaceState'].reduce((next, key) => {
+    const fn = history[key]
+    history[key] = (data, tittle, url) => {
+      !data.ignore && dispatch([location, url])
+      return fn.call(history, data, tittle, url)
+    }
+    return () => {
+      history[key] = fn
+      next()
+    }
+  }, () => removeEventListener("popstate", handleLocationChange))
+}
+
+export default location => {
+  if(location && window.location.pathname !== location.pathname)
+    history.pushState({ location, ignore: true }, '', location.pathname)
+  return { effect }
 }

src/history.js

@@ -1,5 +1,5 @@
 export { location } from './location'
-export { history } from './history'
-export { Switch } from './Switch'
+export { default as history } from './history'
+export { Redirect } from './Redirect'
 export { Route } from './Route'
 export { Link } from './Link'

src/index.js

@@ -1,10 +1,19 @@
-export function location(state, path){
-  return Object.assign({}, state, {
-    location: {
-      pathname: path || window.location.pathname,
-      previous: state && state.location
-        ? state.location.pathname
-        : window.location.pathname
-    }
-  })
+export const location = (state, path) => ({
+  ...state,
+  location: {
+    pathname: path,
+    previous: state && state.location ? state.location : null
+  }
+})
+
+location.back = (state, n = 1) => ({
+  ...state,
+  location: new Array(n).fill(n).reduce(location =>
+    location.previous || location, state.location)
+})
+
+location.go = url => (state, event) => {
+  event.preventDefault()
+  event.stopPropagation()
+  return [location, url]
 }