space-router 0.8.4 → 0.9.0

package/dist/esm/match.js

@@ -1,90 +1,76 @@
 export function match(routes, url, qs) {
-  if (!url) {
-    return;
-  }
-
-  for (let i = 0; i < routes.length; i++) {
-    const m = matchOne(routes[i].pattern, url, qs);
-
-    if (m) {
-      return m;
+    if (!url) {
+        return;
+    }
+    for(var i = 0; i < routes.length; i++){
+        var m = matchOne(routes[i].pattern, url, qs);
+        if (m) {
+            return m;
+        }
     }
-  }
 }
 export function matchOne(pattern, url, qs) {
-  if (!pattern) {
-    return false;
-  }
-
-  const re = /(?:\?([^#]*))?(#.*)?$/;
-  const originalUrl = url;
-  const originalPattern = pattern;
-  const c = url.match(re);
-  const params = {};
-  let query = {};
-  let search = '';
-  let hash = '';
-  let 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 || '');
-    const max = Math.max(url.length, pattern.length);
-
-    for (let i = 0; i < max; i++) {
-      if (pattern[i] && pattern[i].charAt(0) === ':') {
-        const param = pattern[i].replace(/(^:|[+*?]+$)/g, '');
-        const flags = (pattern[i].match(/[+*?]+$/) || {})[0] || '';
-        const plus = flags.indexOf('+') > -1;
-        const star = flags.indexOf('*') > -1;
-        const val = url[i] || '';
-
-        if (!val && !star && (flags.indexOf('?') < 0 || plus)) {
-          ret = false;
-          break;
+    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;
+            }
         }
-
-        params[param] = decodeURIComponent(val);
-
-        if (plus || star) {
-          params[param] = url.slice(i).map(decodeURIComponent).join('/');
-          break;
+        if (ret === false) {
+            return false;
         }
-      } else if (pattern[i] !== url[i]) {
-        ret = false;
-        break;
-      }
-    }
-
-    if (ret === false) {
-      return false;
     }
-  }
-
-  return {
-    pattern: originalPattern,
-    url: originalUrl,
-    pathname: originalUrl.replace(re, ''),
-    params,
-    query,
-    search,
-    hash
-  };
+    return {
+        pattern: originalPattern,
+        url: originalUrl,
+        pathname: originalUrl.replace(re, ""),
+        params: params,
+        query: query,
+        search: search,
+        hash: hash
+    };
 }
-
 function segmentize(url) {
-  return strip(url).split('/');
+    return strip(url).split("/");
 }
-
 function strip(url) {
-  return url.replace(/(^\/+|\/+$)/g, '');
-}
+    return url.replace(/(^\/+|\/+$)/g, "");
+}

package/dist/esm/qs.js

@@ -1,20 +1,17 @@
-export const qs = {
-  parse(queryString) {
-    return queryString.split('&').reduce((acc, pair) => {
-      const parts = pair.split('=');
-      acc[parts[0]] = decodeURIComponent(parts[1]);
-      return acc;
-    }, {});
-  },
-
-  stringify(query) {
-    return Object.keys(query).reduce((acc, key) => {
-      if (query[key] !== undefined) {
-        acc.push(key + '=' + encodeURIComponent(query[key]));
-      }
-
-      return acc;
-    }, []).join('&');
-  }
-
-};
+export 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("&");
+    }
+};

package/dist/esm/router.js

@@ -1,177 +1,249 @@
-import { match as findMatch } from './match';
-import { createHistory } from './history';
-import { qs as defaultQs } from './qs';
-export function createRouter(options = {}) {
-  let history = null;
-  let routes = [];
-  const mode = options.mode || 'history';
-  const qs = options.qs || defaultQs;
-  const sync = options.sync || false;
-  const router = {
-    listen(routeMap, cb) {
-      if (history) {
-        throw new Error('Already listening');
-      }
-
-      routes = flatten(routeMap);
-
-      const onHistoryChange = url => transition(router, url, cb);
-
-      history = createHistory(onHistoryChange, {
-        mode,
-        sync
-      });
-      return () => {
-        history.destroy();
-        history = null;
-        routes = [];
-      };
-    },
-
-    navigate(to) {
-      if (typeof to === 'string') {
-        to = {
-          url: to
-        };
-      }
-
-      const url = router.href(to);
-
-      if (to.replace) {
-        history.replace(url);
-      } else {
-        history.push(url);
-      }
-    },
-
-    href(to) {
-      // already a url
-      if (typeof to === 'string') {
-        return to;
-      } // align with navigate API
-
-
-      if (to.url) {
-        return to.url;
-      }
-
-      if (to.merge) {
-        const curr = to.merge === true ? router.match(router.getUrl()) : to.merge;
-        to = merge(curr, to);
-      }
-
-      let url = to.pathname || '/';
-
-      if (to.params) {
-        Object.keys(to.params).forEach(param => {
-          url = url.replace(':' + param, to.params[param]);
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
         });
-      }
-
-      if (to.query && Object.keys(to.query).length) {
-        const query = qs.stringify(to.query);
-
-        if (query) {
-          url = url + '?' + query;
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+function _object_without_properties(source, excluded) {
+    if (source == null) return {};
+    var target = _object_without_properties_loose(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceSymbolKeys.length; i++){
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
         }
-      }
-
-      if (to.hash) {
-        const prefix = to.hash.startsWith('#') ? '' : '#';
-        url = url + prefix + to.hash;
-      }
-
-      return url;
-    },
-
-    match(url) {
-      const route = findMatch(routes, url, qs);
-
-      if (route) {
-        return { ...route,
-          data: data(routes, route)
-        };
-      }
-    },
-
-    getUrl() {
-      return history.getUrl();
     }
-
-  };
-  return router;
+    return target;
+}
+function _object_without_properties_loose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
+import { match as findMatch } from "./match.js";
+import { createHistory } from "./history.js";
+import { qs as defaultQs } from "./qs.js";
+export function createRouter() {
+    var options = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    var history = null;
+    var routes = [];
+    var mode = options.mode || "history";
+    var qs = options.qs || defaultQs;
+    var sync = options.sync || false;
+    var router = {
+        listen: function listen(routeMap, cb) {
+            if (history) {
+                throw new Error("Already listening");
+            }
+            routes = flatten(routeMap);
+            history = createHistory({
+                mode: mode,
+                sync: sync
+            });
+            var dispose = history.listen(function(url) {
+                return transition(router, url, cb);
+            });
+            return function() {
+                dispose();
+                history = null;
+                routes = [];
+            };
+        },
+        navigate: function navigate(to, curr) {
+            if (typeof to === "string") {
+                to = {
+                    url: to
+                };
+            }
+            var url = router.href(to, curr);
+            if (to.replace) {
+                history.replace(url);
+            } else {
+                history.push(url);
+            }
+        },
+        href: function href(to, curr) {
+            // already a url
+            if (typeof to === "string") {
+                return to;
+            }
+            // align with navigate API
+            if (to.url) {
+                return to.url;
+            }
+            if (to.merge) {
+                curr = curr || router.match(router.getUrl());
+                to = merge(curr, to);
+            }
+            var url = to.pathname || "/";
+            if (to.params) {
+                Object.keys(to.params).forEach(function(param) {
+                    url = url.replace(":" + param, to.params[param]);
+                });
+            }
+            if (to.query && Object.keys(to.query).length) {
+                var query = qs.stringify(to.query);
+                if (query) {
+                    url = url + "?" + query;
+                }
+            }
+            if (to.hash) {
+                var prefix = to.hash.startsWith("#") ? "" : "#";
+                url = url + prefix + to.hash;
+            }
+            return url;
+        },
+        match: function match(url) {
+            var route = findMatch(routes, url, qs);
+            if (route) {
+                return _object_spread_props(_object_spread({}, route), {
+                    data: data(routes, route)
+                });
+            }
+        },
+        getUrl: function getUrl() {
+            return history.getUrl();
+        }
+    };
+    return router;
 }
 export function flatten(routeMap) {
-  const routes = [];
-  const parentData = [];
-
-  function addLevel(level) {
-    level.forEach(route => {
-      const {
-        path = '',
-        routes: children,
-        ...routeData
-      } = route;
-      routes.push({
-        pattern: path,
-        data: parentData.concat([routeData])
-      });
-
-      if (children) {
-        parentData.push(routeData);
-        addLevel(children);
-        parentData.pop();
-      }
-    });
-  }
-
-  addLevel(routeMap);
-  return routes;
+    var routes = [];
+    var parentData = [];
+    function addLevel(level) {
+        level.forEach(function(route) {
+            var _route_path = route.path, path = _route_path === void 0 ? "" : _route_path, children = route.routes, routeData = _object_without_properties(route, [
+                "path",
+                "routes"
+            ]);
+            routes.push({
+                pattern: path,
+                data: parentData.concat([
+                    routeData
+                ])
+            });
+            if (children) {
+                parentData.push(routeData);
+                addLevel(children);
+                parentData.pop();
+            }
+        });
+    }
+    addLevel(routeMap);
+    return routes;
 }
-
 function transition(router, url, onNavigated) {
-  const route = router.match(url);
-
-  if (route) {
-    for (const r of route.data) {
-      if (r.redirect) {
-        const url = redirectUrl(router, r.redirect, route);
-        return router.navigate({
-          url,
-          replace: true
-        });
-      }
+    var route = router.match(url);
+    if (route) {
+        var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
+        try {
+            for(var _iterator = route.data[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
+                var r = _step.value;
+                if (r.redirect) {
+                    var _$url = redirectUrl(router, r.redirect, route);
+                    return router.navigate({
+                        url: _$url,
+                        replace: true
+                    });
+                }
+            }
+        } catch (err) {
+            _didIteratorError = true;
+            _iteratorError = err;
+        } finally{
+            try {
+                if (!_iteratorNormalCompletion && _iterator.return != null) {
+                    _iterator.return();
+                }
+            } finally{
+                if (_didIteratorError) {
+                    throw _iteratorError;
+                }
+            }
+        }
+        onNavigated && onNavigated(route);
     }
-
-    onNavigated && onNavigated(route);
-  }
 }
-
 function redirectUrl(router, redirect, matchingRoute) {
-  if (typeof redirect === 'function') {
-    redirect = redirect(matchingRoute);
-  }
-
-  return router.href(redirect);
+    if (typeof redirect === "function") {
+        redirect = redirect(matchingRoute);
+    }
+    return router.href(redirect);
 }
-
 function data(routes, matchingRoute) {
-  for (let i = 0; i < routes.length; i++) {
-    if (routes[i].pattern === matchingRoute.pattern) {
-      return routes[i].data;
+    for(var i = 0; i < routes.length; i++){
+        if (routes[i].pattern === matchingRoute.pattern) {
+            return routes[i].data;
+        }
     }
-  }
 }
-
-export function merge(curr = {}, to) {
-  const pathname = to.pathname || curr.pattern;
-  const params = Object.assign({}, curr.params, to.params);
-  const query = to.query === null ? null : Object.assign({}, curr.query, to.query);
-  const hash = to.hash === null ? null : to.hash || curr.hash || '';
-  return {
-    pathname,
-    params,
-    query,
-    hash
-  };
-}
+export function merge() {
+    var curr = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {}, to = arguments.length > 1 ? arguments[1] : void 0;
+    var pathname = to.pathname || curr.pattern || curr.pathname;
+    var params = Object.assign({}, curr.params, to.params);
+    var query = to.query === null ? null : Object.assign({}, curr.query, to.query);
+    var hash = to.hash === null ? null : to.hash || curr.hash || "";
+    return {
+        pathname: pathname,
+        params: params,
+        query: query,
+        hash: hash
+    };
+}

package/docs/content/_index.md

@@ -107,9 +107,18 @@ Note, calling listen will immediately call `onChange` based on the current url w
   - `redirect` can be a string or a function that redirects upon entering that route
   - `routes` is a nested object of nested route definitions
   - `...metadata` all other other keys can be chosen by you
-- `onChange` is called with `(route)`
-  - `route` is an object of shape `{ pattern, href, pathname, params, query, search, hash }`
-  - `data` is an array of datas associated with this route
+- `onChange` is called with the `route` object
+
+`route` is an object of shape `{ url, pathname, params, query, search, hash, pattern, data }`:
+
+- `url` full relative url string including query string and hash if any
+- `pathname` the pathname portion of the target url, which can include named segments
+- `params` params extracted from the named pathname segments
+- `query` query object that was parsed with `qs.parse`
+- `search` full unparsed query string
+- `hash` hash fragment
+- `pattern` the matched route pattern as defined in the route config
+- `data` an array of nested matched route objects with any metadata found in the route config
 
 Listen returns a `dispose` function that stops listening to url changes.
 
@@ -117,9 +126,17 @@ Listen returns a `dispose` function that stops listening to url changes.
 
 ```js
 router.navigate(to)
+
+// examples
+router.navigate('/shows')
+router.navigate({ url: '/show/1' })
+router.navigate({ url: '/show/2', replace: true })
+router.navigate({ pathname: '/shows', query: { 'most-recent': 1 } })
+router.navigate({ query: { 'top-rated': 1 }, merge: true })
+router.navigate({ query: { 'top-rated': undefined }, merge: true })
 ```
 
-Navigate to a url. Navigating will update the browser's location bar, depending no the mode the router is in and will call the router listener callback with the newly matched route.
+Navigate to a url. Navigating will update the browser's location bar (unless in `memory` mode) and will call the router listener callback with the newly matched route.
 
 - `to` - a `string` url or an `object` with the following properties
   - `url` a relative url string or a route pattern
@@ -140,19 +157,26 @@ Note, be careful when using `merge` as this reads the location's current url whi
 const route = router.match(url)
 ```
 
-Match the url string against the routes and return the matching route object. Useful in server side rendering to translate the request url to a matching route.
+Match the url string against the routes and return the matching route object.
 
 ### `href`
 
 ```js
 const url = router.href(to)
+
+// examples
+router.href('/shows')
+router.href({ url: '/show/1' })
+router.href({ pathname: '/shows', query: { 'most-recent': 1 } })
+router.href({ query: { 'top-rated': 1 }, merge: true })
+router.href({ query: { 'top-rated': undefined }, merge: true })
 ```
 
 Create a relative url string to use in `<a href>` attribute.
 
 - `to` object of shape `{ pathname, params, query, hash }`. The `params` will be interpolated into the pathname if the pathname contains any parametrised segments. The `query` is an object that will be passed through `qs.stringify`.
 
-Note: `to` can also be a string, in which case href simply returns the input. This is to align the function signature with that of `navigate` so the two can be used interchangeably.
+Note: `to` can be a string, in which case `href` simply returns the input. Similarly, the to can contain `{ url }` key in which case `href` returns that url. This is to align the function signature with that of `navigate` so the two can be used interchangeably.
 
 ### `getUrl`