space-router 0.9.4 → 1.0.0

package/src/match.ts

@@ -0,0 +1,88 @@
+import type { Qs } from './qs.ts'
+
+export interface MatchedRoute {
+  pattern: string
+  url: string
+  pathname: string
+  params: Record<string, string>
+  query: Record<string, string>
+  search: string
+  hash: string
+}
+
+interface RouteEntry {
+  pattern: string
+}
+
+export function match(routes: RouteEntry[], url: string | undefined, qs: Qs): MatchedRoute | undefined {
+  if (!url) return
+  for (let i = 0; i < routes.length; i++) {
+    const m = matchOne(routes[i].pattern, url, qs)
+    if (m) return m
+  }
+}
+
+export function matchOne(pattern: string, url: string, qs?: Qs): MatchedRoute | undefined {
+  if (!pattern) return
+
+  const re = /(?:\?([^#]*))?(#.*)?$/
+  const originalUrl = url
+  const originalPattern = pattern
+  const c = url.match(re)
+  const params: Record<string, string> = {}
+  let query: Record<string, string> = {}
+  let search = ''
+  let hash = ''
+
+  if (c && c[1]) {
+    search = '?' + c[1]
+    query = qs ? qs.parse(c[1]) : {}
+  }
+
+  if (c && c[2]) {
+    hash = c[2]
+  }
+
+  if (pattern !== '*') {
+    const urlSegs = segmentize(url.replace(re, ''))
+    const patSegs = segmentize(pattern)
+    const max = Math.max(urlSegs.length, patSegs.length)
+    for (let i = 0; i < max; i++) {
+      const ps = patSegs[i]
+      if (ps && ps.charAt(0) === ':') {
+        const param = ps.replace(/(^:|[+*?]+$)/g, '')
+        const flags = ps.match(/[+*?]+$/)?.[0] ?? ''
+        const plus = flags.indexOf('+') > -1
+        const star = flags.indexOf('*') > -1
+        const val = urlSegs[i] || ''
+        if (!val && !star && (flags.indexOf('?') < 0 || plus)) return
+
+        params[param] = decodeURIComponent(val)
+        if (plus || star) {
+          params[param] = urlSegs.slice(i).map(decodeURIComponent).join('/')
+          break
+        }
+      } else if (ps !== urlSegs[i]) {
+        return
+      }
+    }
+  }
+
+  return {
+    pattern: originalPattern,
+    url: originalUrl,
+    pathname: originalUrl.replace(re, ''),
+    params,
+    query,
+    search,
+    hash,
+  }
+}
+
+function segmentize(url: string): string[] {
+  return strip(url).split('/')
+}
+
+function strip(url: string): string {
+  return url.replace(/(^\/+|\/+$)/g, '')
+}

package/src/qs.ts

@@ -0,0 +1,33 @@
+export interface Qs {
+  parse(queryString: string): Record<string, string>
+  stringify(query: Record<string, unknown>): string
+}
+
+export const qs: Qs = {
+  parse(queryString) {
+    return queryString.split('&').reduce<Record<string, string>>((acc, pair) => {
+      if (!pair) return acc
+      const i = pair.indexOf('=')
+      const key = decode(i < 0 ? pair : pair.slice(0, i))
+      const val = i < 0 ? '' : decode(pair.slice(i + 1))
+      acc[key] = val
+      return acc
+    }, {})
+  },
+
+  stringify(query) {
+    return Object.keys(query)
+      .reduce<string[]>((acc, key) => {
+        const value = query[key]
+        if (value !== undefined) {
+          acc.push(encodeURIComponent(key) + '=' + encodeURIComponent(value as string | number | boolean))
+        }
+        return acc
+      }, [])
+      .join('&')
+  },
+}
+
+function decode(s: string): string {
+  return decodeURIComponent(s.replace(/\+/g, ' '))
+}

package/src/router.ts

@@ -0,0 +1,197 @@
+import { match as findMatch, type MatchedRoute } from './match.ts'
+import { createHistory, type Mode } from './history.ts'
+import { qs as defaultQs, type Qs } from './qs.ts'
+
+export interface RouterOptions {
+  mode?: Mode
+  qs?: Qs
+  sync?: boolean
+}
+
+export interface Route<Data = Record<string, unknown>> extends MatchedRoute {
+  data: Data[]
+}
+
+export interface NavigateTarget {
+  url?: string
+  pathname?: string
+  params?: Record<string, string | number>
+  query?: Record<string, unknown> | null
+  hash?: string | null
+  replace?: boolean
+  merge?: boolean
+}
+
+export type To = string | NavigateTarget
+
+export type Redirect<Data = Record<string, unknown>> = To | ((route: Route<Data>) => To)
+
+export type RouteDefinition<Data = Record<string, unknown>> = Data & {
+  path?: string
+  redirect?: Redirect<Data>
+  routes?: RouteDefinition<Data>[]
+}
+
+export interface Router<Data = Record<string, unknown>> {
+  listen(routes: RouteDefinition<Data>[], onChange?: (route: Route<Data>) => void): () => void
+  navigate(to: To, curr?: Route<Data>): void
+  href(to: To, curr?: Route<Data>): string
+  match(url: string): Route<Data> | undefined
+  getUrl(): string
+}
+
+interface FlatRoute {
+  pattern: string
+  data: Array<Record<string, unknown>>
+}
+
+const PARAM_RE = /:([A-Za-z0-9_]+)([+*?])?/g
+const MAX_REDIRECTS = 10
+
+export function createRouter<Data = Record<string, unknown>>(options: RouterOptions = {}): Router<Data> {
+  const mode = options.mode || 'history'
+  const qs = options.qs || defaultQs
+  const sync = options.sync || false
+  const history = createHistory({ mode, sync })
+
+  let routes: FlatRoute[] = []
+
+  const router: Router<Data> = {
+    listen(routeMap, cb) {
+      routes = flatten(routeMap as RouteDefinition[])
+      let redirects = 0
+      return history.listen((url) => {
+        const route = router.match(url)
+        if (!route) {
+          redirects = 0
+          return
+        }
+        for (const r of route.data as Array<{ redirect?: Redirect<Data> }>) {
+          if (r.redirect) {
+            if (++redirects > MAX_REDIRECTS) {
+              redirects = 0
+              throw new Error('space-router: too many redirects')
+            }
+            const target = typeof r.redirect === 'function' ? r.redirect(route) : r.redirect
+            return router.navigate({ url: router.href(target), replace: true })
+          }
+        }
+        redirects = 0
+        if (cb) cb(route)
+      })
+    },
+
+    navigate(to, curr) {
+      const target: NavigateTarget = typeof to === 'string' ? { url: to } : to
+      const url = router.href(target, curr)
+      if (target.replace) {
+        history.replace(url)
+      } else {
+        history.push(url)
+      }
+    },
+
+    href(to, curr) {
+      // already a url
+      if (typeof to === 'string') {
+        return to
+      }
+
+      // align with navigate API
+      if (to.url) {
+        return to.url
+      }
+
+      let target: NavigateTarget = to
+      if (target.merge) {
+        const c = curr || router.match(router.getUrl())
+        target = merge(c, target)
+      }
+
+      let url = target.pathname || '/'
+
+      if (target.params) {
+        const params = target.params
+        url = url.replace(PARAM_RE, (m, name: string, flag: string | undefined) => {
+          const v = params[name]
+          if (v == null) return m
+          if (flag === '+' || flag === '*') {
+            return String(v).split('/').map(encodeURIComponent).join('/')
+          }
+          return encodeURIComponent(String(v))
+        })
+      }
+
+      if (target.query && Object.keys(target.query).length) {
+        const query = qs.stringify(target.query)
+        if (query) {
+          url = url + '?' + query
+        }
+      }
+
+      if (target.hash) {
+        const prefix = target.hash.startsWith('#') ? '' : '#'
+        url = url + prefix + target.hash
+      }
+
+      return url
+    },
+
+    match(url) {
+      const route = findMatch(routes, url, qs)
+      if (route) {
+        return { ...route, data: data(routes, route) } as Route<Data>
+      }
+      return undefined
+    },
+
+    getUrl() {
+      return history.getUrl()
+    },
+  }
+
+  return router
+}
+
+export function flatten(routeMap: RouteDefinition[]): FlatRoute[] {
+  const routes: FlatRoute[] = []
+  const parentData: Array<Record<string, unknown>> = []
+  function addLevel(level: RouteDefinition[]) {
+    level.forEach((route) => {
+      const {
+        path = '',
+        routes: children,
+        ...routeData
+      } = route as RouteDefinition & {
+        path?: string
+        routes?: RouteDefinition[]
+      }
+      routes.push({ pattern: path, data: parentData.concat([routeData]) })
+      if (children) {
+        parentData.push(routeData)
+        addLevel(children)
+        parentData.pop()
+      }
+    })
+  }
+  addLevel(routeMap)
+  return routes
+}
+
+function data(routes: FlatRoute[], matchingRoute: { pattern: string }) {
+  for (let i = 0; i < routes.length; i++) {
+    if (routes[i].pattern === matchingRoute.pattern) {
+      return routes[i].data
+    }
+  }
+  return []
+}
+
+export function merge(curr: Partial<Route> | NavigateTarget | undefined, to: NavigateTarget): NavigateTarget {
+  const c = (curr || {}) as Partial<Route> & NavigateTarget
+  const pathname = to.pathname || c.pattern || c.pathname
+  const params = Object.assign({}, c.params, to.params)
+  const query = to.query === null ? null : Object.assign({}, c.query, to.query)
+  const hash = to.hash === null ? null : to.hash || c.hash || ''
+  return { pathname, params, query, hash }
+}

package/.prettierignore

@@ -1,5 +0,0 @@
-coverage
-dist
-docs/static
-docs/assets
-docs/public

package/.prettierrc

@@ -1,6 +0,0 @@
-{
-  "semi": false,
-  "singleQuote": true,
-  "jsxSingleQuote": true,
-  "printWidth": 120
-}

package/.swc-cjs

@@ -1,11 +0,0 @@
-{
-  "module": {
-    "type": "commonjs"
-  },
-  "env": {
-    "targets": [
-      "last 2 versions",
-      "IE >= 9"
-    ]
-  }
-}

package/.swc-esm

@@ -1 +0,0 @@
-{}

package/CHANGELOG.md

@@ -1,64 +0,0 @@
-## 0.9.4
-
-- Upgrade all depedencies.
-
-## 0.9.3
-
-- Upgrade all depedencies.
-
-## 0.9.2
-
-- Upgrade all depedencies.
-
-## 0.9.1
-
-- Revert to commonjs (remove `type: "module"`) to keep support for cjs in node and esm in browsers.
-
-## 0.9.0
-
-- Upgrade all dependencies.
-- Switch from babel to swc for dist compilation.
-
-## 0.8.5
-
-- fix redirects - the history was not ready by the time initial transition was kicked off by redirecting
-- remove the possibility to pass the current route via the `merge` option directly, instead set `merge: true` (truthy value works now), and instead optionally pass the current route as the second argument to `navigate(to, curr)` or `href(to, curr)`, this is a breaking change, but also an undocumented API as it it's still being refined and is used for correctly merging urls during async navigations.
-
-## 0.8.4
-
-- fix the `navigate(url: string)` implementation where `"".replace` was being tested instead of `to.replace`
-
-## 0.8.3
-
-- re-introduce `navigate(url: string)` since it's nice and convenient
-
-## 0.8.2
-
-- refer to `setImmediate` via `global.setImmediate` to fix a webpack compilation error
-
-## 0.8.1
-
-- allow passing current route as `merge` value to opt out of using current url and using an externally passed in route, useful in async context where reading current URL might not be safe
-
-## 0.8.0
-
-A rewrite of space-router. It's better now!
-
-- less methods (only `listen`, `navigate`, `match`, `href` and `getUrl`)
-- simpler function signatures and simpler listen callback - you just get the route, not route+data
-- improved route config format with objects (`path`, `redirect`, `routes`) instead of arrays
-- redirects feature
-- new docs at [https://kidkarolis.github.io/space-router/](https://kidkarolis.github.io/space-router/)
-
-All in all - it's a new API, but it's spiritually very much the same and is the best version of Space Router yet!
-
-## 0.7.0
-
-- **Improvement** - Add `replace(url, options)` in addition to `push`, because it matches the DOM API closer and the names are semantically meaningful.
-- **Improvement** - Add `set(options)`, which unlike `push/replace`, can be used to only update specific bits of the url, e.g. `set({ query: { a: 1 } })` would add a=1 into the query string in addition to what's already there. Set `query` or `hash` to `null` to clear them.
-- **Improvement** - Add `match(url)`, which matches the provided url against the route config and returns `{ route, data }`, useful in Server Side Rendering.
-- **Breaking change** - remove `route.path` in favor of the new `route.href`.
-
-## 0.6.0
-
-- **Improvement** - Add `route.href` in favor of `route.path`, which was too close to `route.pathname` and therefore confusing.

package/dist/cjs/history.js

@@ -1,96 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "createHistory", {
-    enumerable: true,
-    get: function() {
-        return createHistory;
-    }
-});
-function createHistory(options) {
-    var sync = options.sync;
-    var mode = options.mode;
-    var raf;
-    var onPop;
-    var memory = [];
-    var off;
-    var destroyed = false;
-    if (typeof window === 'undefined') {
-        mode = 'memory';
-        raf = sync ? function(cb) {
-            return cb();
-        } : global.setImmediate;
-    } else {
-        raf = sync ? function(cb) {
-            return cb();
-        } : requestAnimationFrame;
-        if (mode === 'history' && !history.pushState) {
-            mode = 'hash';
-        }
-    }
-    function listen(onChange) {
-        onPop = function() {
-            return onChange(getUrl());
-        };
-        if (mode !== 'memory') {
-            off = on(window, mode === 'history' ? 'popstate' : 'hashchange', onPop);
-            raf(onPop);
-        }
-        return function() {
-            destroyed = true;
-            off && off();
-        };
-    }
-    return {
-        listen: listen,
-        getUrl: getUrl,
-        push: function push(url) {
-            go(url);
-        },
-        replace: function replace(url) {
-            go(url, true);
-        }
-    };
-    function go(url, replace) {
-        if (destroyed) return;
-        url = url.replace(/^\/?#?\/?/, '/').replace(/\/$/, '') || '/';
-        if (mode === 'history') {
-            history[replace ? 'replaceState' : 'pushState']({}, '', url);
-            raf(onPop);
-        } else if (mode === 'hash') {
-            location[replace ? 'replace' : 'assign']('#' + url);
-        } else if (mode === 'memory') {
-            replace ? memory[memory.length - 1] = url : memory.push(url);
-            raf(onPop);
-        }
-    }
-    function getUrl() {
-        if (mode === 'memory') {
-            return memory[memory.length - 1];
-        }
-        var hash = getHash();
-        if (mode === 'hash') {
-            return hash === '' ? '/' : hash;
-        }
-        if (mode === 'history') {
-            var url = location.pathname + location.search;
-            if (hash !== '') {
-                url += '#' + hash;
-            }
-            return url;
-        }
-    }
-    // Gets the true hash value. Cannot use location.hash directly due to bug
-    // in Firefox where location.hash will always be decoded.
-    function getHash() {
-        var match = location.href.match(/#(.*)$/);
-        return match ? match[1].replace('#', '') : '';
-    }
-}
-function on(el, type, fn) {
-    el.addEventListener(type, fn, false);
-    return function off() {
-        el.removeEventListener(type, fn, false);
-    };
-}

package/dist/cjs/index.js

@@ -1,27 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: Object.getOwnPropertyDescriptor(all, name).get
-    });
-}
-_export(exports, {
-    get createHistory () {
-        return _history.createHistory;
-    },
-    get createRouter () {
-        return _router.createRouter;
-    },
-    get merge () {
-        return _router.merge;
-    },
-    get qs () {
-        return _qs.qs;
-    }
-});
-var _router = require("./router");
-var _history = require("./history");
-var _qs = require("./qs");

package/dist/cjs/match.js

@@ -1,94 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: Object.getOwnPropertyDescriptor(all, name).get
-    });
-}
-_export(exports, {
-    get match () {
-        return match;
-    },
-    get matchOne () {
-        return matchOne;
-    }
-});
-function match(routes, url, qs) {
-    if (!url) {
-        return;
-    }
-    for(var i = 0; i < routes.length; i++){
-        var m = matchOne(routes[i].pattern, url, qs);
-        if (m) {
-            return m;
-        }
-    }
-}
-function matchOne(pattern, url, qs) {
-    if (!pattern) {
-        return false;
-    }
-    var re = /(?:\?([^#]*))?(#.*)?$/;
-    var originalUrl = url;
-    var originalPattern = pattern;
-    var c = url.match(re);
-    var params = {};
-    var query = {};
-    var search = '';
-    var hash = '';
-    var ret;
-    if (c && c[1]) {
-        search = '?' + c[1];
-        query = qs.parse(c[1]);
-    }
-    if (c && c[2]) {
-        hash = c[2] || '';
-    }
-    if (pattern !== '*') {
-        url = segmentize(url.replace(re, ''));
-        pattern = segmentize(pattern || '');
-        var max = Math.max(url.length, pattern.length);
-        for(var i = 0; i < max; i++){
-            if (pattern[i] && pattern[i].charAt(0) === ':') {
-                var param = pattern[i].replace(/(^:|[+*?]+$)/g, '');
-                var flags = (pattern[i].match(/[+*?]+$/) || {})[0] || '';
-                var plus = flags.indexOf('+') > -1;
-                var star = flags.indexOf('*') > -1;
-                var val = url[i] || '';
-                if (!val && !star && (flags.indexOf('?') < 0 || plus)) {
-                    ret = false;
-                    break;
-                }
-                params[param] = decodeURIComponent(val);
-                if (plus || star) {
-                    params[param] = url.slice(i).map(decodeURIComponent).join('/');
-                    break;
-                }
-            } else if (pattern[i] !== url[i]) {
-                ret = false;
-                break;
-            }
-        }
-        if (ret === false) {
-            return false;
-        }
-    }
-    return {
-        pattern: originalPattern,
-        url: originalUrl,
-        pathname: originalUrl.replace(re, ''),
-        params: params,
-        query: query,
-        search: search,
-        hash: hash
-    };
-}
-function segmentize(url) {
-    return strip(url).split('/');
-}
-function strip(url) {
-    return url.replace(/(^\/+|\/+$)/g, '');
-}

package/dist/cjs/qs.js

@@ -1,27 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "qs", {
-    enumerable: true,
-    get: function() {
-        return qs;
-    }
-});
-var qs = {
-    parse: function parse(queryString) {
-        return queryString.split('&').reduce(function(acc, pair) {
-            var parts = pair.split('=');
-            acc[parts[0]] = decodeURIComponent(parts[1]);
-            return acc;
-        }, {});
-    },
-    stringify: function stringify(query) {
-        return Object.keys(query).reduce(function(acc, key) {
-            if (query[key] !== undefined) {
-                acc.push(key + '=' + encodeURIComponent(query[key]));
-            }
-            return acc;
-        }, []).join('&');
-    }
-};