Improved router

WIP: The idea is to make it so that parameters are transmitted as atoms and the
component function is only called when the route changes.  If only parameters
change, then the changes are propagated via the observables as usual.

Author: polytypic

src/public/components/router.js

@@ -1,33 +1,64 @@
+import * as I from 'infestines'
 import * as L from 'partial.lenses'
-import * as R from 'ramda'
 import * as React from 'karet'
 import * as U from 'karet.util'
-import toRegex from 'path-to-regexp'
-
-const expandRoutes = L.collectAs((Component, route) => {
-  const params = []
-  const regex = toRegex(route, params)
-  return {
-    route,
-    regex,
-    keys: ['path'].concat(params.map(L.get('name'))),
-    Component
-  }
-}, L.values)
-
-const sortStaticFirst = R.sortBy(({keys}) => (keys.length === 1 ? 0 : 1))
+import p2re from 'path-to-regexp'
 
-const prepareRoutes = R.o(sortStaticFirst, expandRoutes)
+export const prepare = L.collectAs((target, pattern) => {
+  const {Component, ...props} = I.isFunction(target)
+    ? {Component: target}
+    : target
+  const formals = []
+  const regexp = p2re(pattern, formals)
+  return {...props, pattern, regexp, formals, Component}
+}, L.values)
 
-const router = U.lift((routes, NotFound, path) => {
-  for (let i = 0; i < routes.length; ++i) {
-    const {Component, keys, regex} = routes[i]
-    const match = regex.exec(path)
-    if (match) return <Component {...R.zipObj(keys, match)} />
+export const disassemble = I.curry((routes, path) => {
+  for (let i = 0, n = routes.length; i < n; ++i) {
+    const route = routes[i]
+    const matches = route.regexp.exec(path)
+    if (null !== matches) {
+      const match = {}
+      const {formals} = route
+      for (let i = 0, n = formals.length; i < n; ++i) {
+        // XXX Handle optional and repeat parameters?
+        const {name} = formals[i]
+        const value = matches[i + 1]
+        match[name] = undefined === value ? value : decodeURIComponent(value)
+      }
+      return {route, match}
+    }
   }
-  return <NotFound />
 })
 
-export const Router = U.withContext(({routes, NotFound}, {path}) =>
-  U.fromKefir(router(prepareRoutes(routes), NotFound, path))
-)
+const assemble = ({route: {pattern}, match}) => p2re.compile(pattern)(match)
+
+const routerIso = (unpreparedRoutes, NotFound) =>
+  L.iso(
+    L.get([
+      disassemble(prepare(unpreparedRoutes)),
+      L.valueOr({route: {Component: NotFound}, match: {}})
+    ]),
+    assemble
+  )
+
+export const Router = U.withContext(({routes, NotFound}, {params, path}) => {
+  const resolved = U.view(routerIso(routes, NotFound), path)
+  const matches = U.view('match', resolved)
+
+  let last, args, rendered
+
+  const render = U.lift(({route, match}) => {
+    if (route !== last) {
+      last = route
+      for (const k in args) args[k]._onDeactivation()
+      args = {}
+      for (const k in match) args[k] = U.view(k, matches)
+      const {Component} = route
+      rendered = <Component {...{params, path}} {...args} />
+    }
+    return rendered
+  })
+
+  return U.fromKefir(render(resolved))
+})

src/public/pages/examples/page.js

@@ -1,19 +1,12 @@
 import * as React from 'karet'
-import * as U from 'karet.util'
 
 import {PathParams} from './path-params'
 import {QuerystringParams} from './querystring-params'
 
-export const Examples = U.withContext((props, {params, path}) => (
+export const Examples = ({path, params, ...props}) => (
   <div>
     <h1>Examples</h1>
-    <div>
-      Routing / Path Params:
-      <PathParams path={path} props={props} />
-    </div>
-    <div>
-      Querystring Params:
-      <QuerystringParams path={path} params={params} />
-    </div>
+    <PathParams {...{path, props}} />
+    <QuerystringParams {...{path, params}} />
   </div>
-))
+)

src/public/pages/examples/path-params.js

@@ -2,35 +2,35 @@ import * as L from 'partial.lenses'
 import * as React from 'karet'
 import * as U from 'karet.util'
 
-import {PathInput} from '../../components/restricted-input'
-import {PrettyStringify} from '../../components/pretty-stringify'
+import {TextInput} from '../../components/text-input'
 
-const getPagePathRoot = U.pipe(x => U.match(/(^\/[^/]+\/?).*/, x)[1])
-
-const subPathGetter = pagePathRoot =>
-  U.pipe(U.replace(pagePathRoot, ''), decodeURIComponent)
-
-const subPathSetter = pagePathRoot =>
-  U.pipe(
-    U.map(U.when(x => x !== '/', encodeURIComponent)),
-    U.join(''),
-    U.concat(pagePathRoot),
-    U.replace(pagePathRoot + '/', pagePathRoot)
-  )
-
-const subPathL = U.lift(pagePathRoot =>
-  L.iso(subPathGetter(pagePathRoot), subPathSetter(pagePathRoot))
-)
-
-const decodeProps = U.mapObjIndexed(decodeURIComponent)
-
-export const PathParams = ({props, path}) => (
+export const PathParams = ({path, props}) => (
   <div>
-    <PathInput
-      type="text"
-      label="Path"
-      value={U.view(subPathL(getPagePathRoot(path)), path)}
-    />
-    <PrettyStringify value={decodeProps(props)} />
+    <h2>Path params</h2>
+    <pre className="pretty-stringify">{path}</pre>
+    <table>
+      <thead>
+        <tr>
+          <td>Key</td>
+          <td>Value</td>
+        </tr>
+      </thead>
+      <tbody>
+        {L.collectAs(
+          (value, key) => (
+            <tr key={key}>
+              <td>
+                <code>{key}</code>
+              </td>
+              <td>
+                <TextInput value={U.view(L.defaults(''), value)} />
+              </td>
+            </tr>
+          ),
+          L.values,
+          props
+        )}
+      </tbody>
+    </table>
   </div>
 )

src/public/pages/examples/querystring-params.js

@@ -45,6 +45,8 @@ export const QuerystringParams = ({params, path, copy = U.atom()}) => {
   )
   return (
     <div>
+      <h2>Querystring params</h2>
+      <PrettyStringify value={params} />
       <table>
         <thead>
           <tr>
@@ -66,7 +68,6 @@ export const QuerystringParams = ({params, path, copy = U.atom()}) => {
       {U.scope((href = newPathString(path, copied)) => (
         <Link href={href}>{href}</Link>
       ))}
-      <PrettyStringify value={params} />
     </div>
   )
 }

src/public/routes.js

@@ -5,7 +5,7 @@ import {Main} from './pages/main'
 export const routes = {
   '/': Main,
   '/another-page': Main,
-  '/examples/:pathParam1?/:pathParam2?/:pathParam3?/:splat*': Examples,
+  '/examples/:pathParam1/:pathParam2/:pathParam3?/:splat*': Examples,
   '/contacts': Contacts.Browse,
   '/contacts/new': Contacts.New,
   '/contacts/:id': Contacts.Edit