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/client/request.js

@@ -2,7 +2,7 @@ import * as Kefir from 'kefir'
 import * as L from 'kefir.partial.lenses'
 import * as R from 'ramda'
 
-import paramsI from '../shared/search-params'
+import {paramsI} from '../shared/search-params'
 
 export const withParams = /*#__PURE__*/ R.curry(
   (base, params) => `${base}${L.getInverse(paramsI, params)}`

src/client/scroll.js

@@ -1,9 +1,10 @@
 import smoothScroll from 'smoothscroll'
 
-const scroll = (target, ...args) => {
-  if (typeof target === 'string') target = document.querySelector(target)
+export const scroll =
+  typeof window === 'undefined'
+    ? () => {}
+    : (target, ...args) => {
+        if (typeof target === 'string') target = document.querySelector(target)
 
-  target !== undefined && target !== null && smoothScroll(target, ...args)
-}
-
-export default (typeof window === 'undefined' ? () => {} : scroll)
+        target !== undefined && target !== null && smoothScroll(target, ...args)
+      }

src/public/app.js

@@ -1,3 +1,4 @@
+import * as L from 'partial.lenses'
 import * as React from 'karet'
 import * as ReactDOM from 'react-dom/server'
 import * as U from 'karet.util'
@@ -25,14 +26,16 @@ export const router = express.Router()
 
 router.use(contactsApp.router)
 
-router.get(Object.keys(routes), ({path, url, headers: {host}}, res) => {
+const patterns = L.collect(L.flat('pattern'), routes)
+
+router.get(patterns, ({path, url, headers: {host}}, res) => {
   const location = {
     path,
     search: url.slice(path.length),
     hash: ''
   }
   const state = U.atom(State.initial)
-  const context = State.context(location, host, state)
+  const context = State.context(location, host, state, routes)
 
   // XXX Inject state here.
 

src/public/client.js

@@ -16,6 +16,8 @@ import {Page} from './components/page'
 import * as Meta from './meta'
 import * as State from './state'
 
+import {routes} from './routes'
+
 //
 
 const state = MaybeSessionStored({
@@ -27,7 +29,7 @@ const state = MaybeSessionStored({
 
 //
 
-const context = State.context(location, window.location.host, state)
+const context = State.context(location, window.location.host, state, routes)
 
 //
 

src/public/components/_.less

@@ -1,3 +1,4 @@
 @import './header.less';
+@import './link.less';
 @import './pretty-stringify';
 @import './restricted-input';

src/public/components/header.js

@@ -1,18 +1,23 @@
+import * as L from 'partial.lenses'
 import * as React from 'karet'
+import * as U from 'karet.util'
 
 import {Link} from './link'
 
-export const Header = () => (
+export const Header = U.withContext((_, {routes}) => (
   <div className="header">
     <div className="content">
       <div className="links">
-        <Link href="/">Main</Link>
-        <Link href="/another-page">Another page</Link>
-        <Link href="/examples/keep/calmm/and/curry/on/?hello=world">
-          Examples
-        </Link>
-        <Link href="/contacts">Contacts</Link>
+        {L.collectAs(
+          ({name, href, pattern}, i) => (
+            <Link key={i} href={href || pattern}>
+              {name}
+            </Link>
+          ),
+          L.flat(L.when(L.get('name'))),
+          routes
+        )}
       </div>
     </div>
   </div>
-)
+))

src/public/components/link.js

@@ -1,52 +1,78 @@
+import * as L from 'kefir.partial.lenses'
 import * as R from 'kefir.ramda'
 import * as React from 'karet'
 import * as U from 'karet.util'
 
-import scroll from '../../client/scroll'
+import {disassemble} from '../../shared/routing'
+import {parse} from '../../shared/search-params'
 
-const special = U.actions(U.preventDefault, U.stopPropagation)
-
-let onsite
+import {scroll} from '../../client/scroll'
 
 const isExt = R.test(/^https?:\/\//)
 
+const dropHash = U.lift(href => /^([^#]*)/.exec(href)[1])
+
+const hrefParse = U.lift(href =>
+  /^((\/[^?#]*)([?][^#]*)?)?([#].*)?$/.exec(href)
+)
+
+const hrefLocation = R.pipe(
+  hrefParse,
+  L.get(
+    L.ifElse(
+      Array.isArray,
+      L.pick({
+        path: [2, L.valueOr('/')],
+        params: [3, parse],
+        hash: [4, L.valueOr('')]
+      }),
+      []
+    )
+  )
+)
+
 export const Link = U.withContext(
   (
     {href, onClick: outerOnClick, onThere, mount, className, ...props},
-    {location}
+    {location, locationPrime, routes, route}
   ) => {
-    const onClick = U.liftRec(href => e => {
-      const internal = /^((\/[^?#]*)([?][^#]*)?)?([#].*)?$/.exec(href)
+    const onClick = U.lift(href => e => {
+      const internal = hrefParse(href)
 
       if (internal) {
         if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) return
+        e.preventDefault()
 
         const [, , path = '', search = '', hash = ''] = internal
 
+        location.set({path, search, hash})
+
         if (!path && !search) {
-          if (!hash && onsite) {
-            special(e)
-            window.history.back()
-          } else {
-            window.setTimeout(() => scroll(hash, 200, onThere), 10)
-          }
+          window.setTimeout(() => scroll(hash, 200, onThere), 10)
         } else {
-          special(e)
-          location.set({path, search, hash})
-
           if (!hash) scroll(0, 1, onThere)
           else window.setTimeout(() => scroll(hash, onThere), 100)
         }
       }
-      onsite = 1
     })
 
+    const thisRoute = L.get('route', disassemble(routes, dropHash(href)))
+    const sameRoute = R.equals(thisRoute, route)
+
+    const thisLocation = hrefLocation(href)
+    const sameLocation = R.equals(thisLocation, locationPrime)
+
     return (
       <a
         href={href}
         ref={mount}
         onClick={U.actions(outerOnClick, onClick(href))}
-        className={U.cns(className, U.when(isExt(href), 'ext-link'))}
+        className={U.cns(
+          className,
+          U.when(isExt(href), 'ext-link'),
+          U.when(sameRoute, 'same-route'),
+          U.when(sameLocation, 'same-location')
+        )}
         {...props}
       />
     )

src/public/components/link.less

@@ -0,0 +1,3 @@
+.same-location {
+  text-decoration: none;
+}

src/public/components/page.js

@@ -2,14 +2,12 @@ import * as React from 'karet'
 
 import {NotFound} from '../pages/not-found'
 
-import {routes} from '../routes'
-
 import {Header} from './header'
 import {Router} from './router'
 
 export const Page = () => (
   <div>
     <Header />
-    <Router {...{routes, NotFound}} />
+    <Router {...{NotFound}} />
   </div>
 )

src/public/components/router.js

@@ -1,35 +1,25 @@
-import * as L from 'kefir.partial.lenses'
-import * as R from 'kefir.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)
+export const Router = U.withContext(
+  ({NotFound}, {resolved, matches, params, path}) => {
+    const notFound = {route: {Component: NotFound}, match: {}}
 
-const sortStaticFirst = R.sortBy(({keys}) => (keys.length === 1 ? 0 : 1))
+    let last, args, rendered
 
-const prepareRoutes = R.o(sortStaticFirst, expandRoutes)
+    const render = U.lift(resolved => {
+      const {route, match} = resolved || notFound
+      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
+    })
 
-const router = U.liftRec((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)} />
+    return <React.Fragment>{render(resolved)}</React.Fragment>
   }
-  return <NotFound />
-})
-
-export const Router = U.withContext(({routes, NotFound}, {path}) => (
-  <React.Fragment>
-    {router(prepareRoutes(routes), NotFound, path)}
-  </React.Fragment>
-))
+)

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

@@ -1,36 +1,36 @@
-import * as L from 'kefir.partial.lenses'
-import * as R from 'kefir.ramda'
+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 = R.pipe(x => R.match(/(^\/[^/]+\/?).*/, x)[1])
-
-const subPathGetter = pagePathRoot =>
-  R.pipe(R.replace(pagePathRoot, ''), decodeURIComponent)
-
-const subPathSetter = pagePathRoot =>
-  R.pipe(
-    R.map(R.when(x => x !== '/', encodeURIComponent)),
-    R.join(''),
-    R.concat(pagePathRoot),
-    R.replace(pagePathRoot + '/', pagePathRoot)
-  )
-
-const subPathL = pagePathRoot =>
-  L.iso(subPathGetter(pagePathRoot), subPathSetter(pagePathRoot))
-
-const decodeProps = R.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

@@ -44,6 +44,8 @@ export const QuerystringParams = ({params, path, copy = U.atom()}) => {
   const href = newPathString(path, copied)
   return (
     <div>
+      <h2>Querystring params</h2>
+      <PrettyStringify value={params} />
       <table>
         <thead>
           <tr>
@@ -62,7 +64,6 @@ export const QuerystringParams = ({params, path, copy = U.atom()}) => {
         </tbody>
       </table>
       Navigate to: <Link href={href}>{href}</Link>
-      <PrettyStringify value={params} />
     </div>
   )
 }