space-router 0.8.4 → 0.8.5

package/CHANGELOG.md

@@ -1,3 +1,8 @@
+## 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`

package/dist/cjs/history.js

@@ -3,10 +3,11 @@
 exports.__esModule = true;
 exports.createHistory = createHistory;
 
-function createHistory(onChange, options) {
+function createHistory(options) {
   var sync = options.sync;
   var mode = options.mode;
   var raf;
+  var onPop;
   var memory = [];
   var off;
   var destroyed = false;
@@ -26,29 +27,30 @@ function createHistory(onChange, options) {
     }
   }
 
-  if (mode !== 'memory') {
-    off = on(window, mode === 'history' ? 'popstate' : 'hashchange', onPop);
-  }
+  function listen(onChange) {
+    onPop = function onPop() {
+      return onChange(getUrl());
+    };
 
-  function onPop() {
-    onChange(getUrl());
-  }
+    if (mode !== 'memory') {
+      off = on(window, mode === 'history' ? 'popstate' : 'hashchange', onPop);
+      raf(onPop);
+    }
 
-  if (mode !== 'memory') {
-    onChange(getUrl());
+    return function () {
+      destroyed = true;
+      off && off();
+    };
   }
 
   return {
+    listen: listen,
     getUrl: getUrl,
     push: function push(url) {
       go(url);
     },
     replace: function replace(url) {
       go(url, true);
-    },
-    destroy: function destroy() {
-      destroyed = true;
-      off && off();
     }
   };
 

package/dist/cjs/router.js

@@ -40,29 +40,27 @@ function createRouter(options) {
       }
 
       routes = flatten(routeMap);
-
-      var onHistoryChange = function onHistoryChange(url) {
-        return transition(router, url, cb);
-      };
-
-      history = (0, _history.createHistory)(onHistoryChange, {
+      history = (0, _history.createHistory)({
         mode: mode,
         sync: sync
       });
+      var dispose = history.listen(function (url) {
+        return transition(router, url, cb);
+      });
       return function () {
-        history.destroy();
+        dispose();
         history = null;
         routes = [];
       };
     },
-    navigate: function navigate(to) {
+    navigate: function navigate(to, curr) {
       if (typeof to === 'string') {
         to = {
           url: to
         };
       }
 
-      var url = router.href(to);
+      var url = router.href(to, curr);
 
       if (to.replace) {
         history.replace(url);
@@ -70,7 +68,7 @@ function createRouter(options) {
         history.push(url);
       }
     },
-    href: function href(to) {
+    href: function href(to, curr) {
       // already a url
       if (typeof to === 'string') {
         return to;
@@ -82,7 +80,7 @@ function createRouter(options) {
       }
 
       if (to.merge) {
-        var curr = to.merge === true ? router.match(router.getUrl()) : to.merge;
+        curr = curr || router.match(router.getUrl());
         to = merge(curr, to);
       }
 
@@ -195,7 +193,7 @@ function merge(curr, to) {
     curr = {};
   }
 
-  var pathname = to.pathname || curr.pattern;
+  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 || '';

package/dist/esm/history.js

@@ -1,7 +1,8 @@
-export function createHistory(onChange, options) {
+export function createHistory(options) {
   const sync = options.sync;
   let mode = options.mode;
   let raf;
+  let onPop;
   const memory = [];
   let off;
   let destroyed = false;
@@ -17,19 +18,22 @@ export function createHistory(onChange, options) {
     }
   }
 
-  if (mode !== 'memory') {
-    off = on(window, mode === 'history' ? 'popstate' : 'hashchange', onPop);
-  }
+  function listen(onChange) {
+    onPop = () => onChange(getUrl());
 
-  function onPop() {
-    onChange(getUrl());
-  }
+    if (mode !== 'memory') {
+      off = on(window, mode === 'history' ? 'popstate' : 'hashchange', onPop);
+      raf(onPop);
+    }
 
-  if (mode !== 'memory') {
-    onChange(getUrl());
+    return () => {
+      destroyed = true;
+      off && off();
+    };
   }
 
   return {
+    listen,
     getUrl,
 
     push(url) {
@@ -38,11 +42,6 @@ export function createHistory(onChange, options) {
 
     replace(url) {
       go(url, true);
-    },
-
-    destroy() {
-      destroyed = true;
-      off && off();
     }
 
   };

package/dist/esm/router.js

@@ -14,28 +14,26 @@ export function createRouter(options = {}) {
       }
 
       routes = flatten(routeMap);
-
-      const onHistoryChange = url => transition(router, url, cb);
-
-      history = createHistory(onHistoryChange, {
+      history = createHistory({
         mode,
         sync
       });
+      const dispose = history.listen(url => transition(router, url, cb));
       return () => {
-        history.destroy();
+        dispose();
         history = null;
         routes = [];
       };
     },
 
-    navigate(to) {
+    navigate(to, curr) {
       if (typeof to === 'string') {
         to = {
           url: to
         };
       }
 
-      const url = router.href(to);
+      const url = router.href(to, curr);
 
       if (to.replace) {
         history.replace(url);
@@ -44,7 +42,7 @@ export function createRouter(options = {}) {
       }
     },
 
-    href(to) {
+    href(to, curr) {
       // already a url
       if (typeof to === 'string') {
         return to;
@@ -56,7 +54,7 @@ export function createRouter(options = {}) {
       }
 
       if (to.merge) {
-        const curr = to.merge === true ? router.match(router.getUrl()) : to.merge;
+        curr = curr || router.match(router.getUrl());
         to = merge(curr, to);
       }
 
@@ -164,7 +162,7 @@ function data(routes, matchingRoute) {
 }
 
 export function merge(curr = {}, to) {
-  const pathname = to.pathname || curr.pattern;
+  const pathname = to.pathname || curr.pattern || curr.pathname;
   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 || '';

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`
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "space-router",
   "description": "All the routing essentials.",
-  "version": "0.8.4",
+  "version": "0.8.5",
   "main": "dist/cjs",
   "module": "dist/esm",
   "license": "ICS",
@@ -32,16 +32,16 @@
     "release:docs": "hugo -s docs && gh-pages -d docs/public"
   },
   "devDependencies": {
-    "@babel/cli": "^7.16.0",
-    "@babel/preset-env": "^7.16.0",
+    "@babel/cli": "^7.17.6",
+    "@babel/preset-env": "^7.16.11",
     "ava": "^3.15.0",
     "esm": "^3.2.25",
     "execa": "^5.1.1",
     "gh-pages": "^3.2.3",
-    "healthier": "^4.0.0",
-    "np": "^7.5.0",
+    "healthier": "^5.0.1",
+    "np": "^7.6.1",
     "nyc": "^15.1.0",
-    "prettier": "^2.4.1"
+    "prettier": "^2.6.2"
   },
   "healthier": {
     "global": [

package/src/history.js

@@ -1,7 +1,8 @@
-export function createHistory(onChange, options) {
+export function createHistory(options) {
   const sync = options.sync
   let mode = options.mode
   let raf
+  let onPop
 
   const memory = []
   let off
@@ -17,19 +18,22 @@ export function createHistory(onChange, options) {
     }
   }
 
-  if (mode !== 'memory') {
-    off = on(window, mode === 'history' ? 'popstate' : 'hashchange', onPop)
-  }
+  function listen(onChange) {
+    onPop = () => onChange(getUrl())
 
-  function onPop() {
-    onChange(getUrl())
-  }
+    if (mode !== 'memory') {
+      off = on(window, mode === 'history' ? 'popstate' : 'hashchange', onPop)
+      raf(onPop)
+    }
 
-  if (mode !== 'memory') {
-    onChange(getUrl())
+    return () => {
+      destroyed = true
+      off && off()
+    }
   }
 
   return {
+    listen,
     getUrl,
     push(url) {
       go(url)
@@ -37,10 +41,6 @@ export function createHistory(onChange, options) {
     replace(url) {
       go(url, true)
     },
-    destroy() {
-      destroyed = true
-      off && off()
-    },
   }
 
   function go(url, replace) {

package/src/router.js

@@ -16,21 +16,21 @@ export function createRouter(options = {}) {
       }
 
       routes = flatten(routeMap)
-      const onHistoryChange = (url) => transition(router, url, cb)
-      history = createHistory(onHistoryChange, { mode, sync })
+      history = createHistory({ mode, sync })
+      const dispose = history.listen((url) => transition(router, url, cb))
 
       return () => {
-        history.destroy()
+        dispose()
         history = null
         routes = []
       }
     },
 
-    navigate(to) {
+    navigate(to, curr) {
       if (typeof to === 'string') {
         to = { url: to }
       }
-      const url = router.href(to)
+      const url = router.href(to, curr)
       if (to.replace) {
         history.replace(url)
       } else {
@@ -38,7 +38,7 @@ export function createRouter(options = {}) {
       }
     },
 
-    href(to) {
+    href(to, curr) {
       // already a url
       if (typeof to === 'string') {
         return to
@@ -50,7 +50,7 @@ export function createRouter(options = {}) {
       }
 
       if (to.merge) {
-        const curr = to.merge === true ? router.match(router.getUrl()) : to.merge
+        curr = curr || router.match(router.getUrl())
         to = merge(curr, to)
       }
 
@@ -139,7 +139,7 @@ function data(routes, matchingRoute) {
 }
 
 export function merge(curr = {}, to) {
-  const pathname = to.pathname || curr.pattern
+  const pathname = to.pathname || curr.pattern || curr.pathname
   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 || ''

package/test/router.test.js

@@ -20,6 +20,7 @@ test('createRouter, listen, navigate and dispose', (t) => {
   router.navigate({ query: { a: 11, b: 22 }, merge: true })
   router.navigate({ query: { b: undefined, c: 'bla' }, hash: 'test', merge: true })
   router.navigate({ params: { id: 3 }, merge: true })
+  router.navigate({ query: { curr: 'test' }, merge: true }, { pathname: '/user/curr' })
 
   t.deepEqual(
     [
@@ -35,6 +36,7 @@ test('createRouter, listen, navigate and dispose', (t) => {
       'user=2?a=11&b=22',
       'user=2?a=11&c=bla#test',
       'user=3?a=11&c=bla#test',
+      'user=curr?curr=test',
     ],
     calls
   )
@@ -42,7 +44,7 @@ test('createRouter, listen, navigate and dispose', (t) => {
   dispose()
 })
 
-test('.href(options)', (t) => {
+test('.href(to)', (t) => {
   const { router, dispose } = createTestRouter()
 
   t.deepEqual('/user/7/friends?a=1&b=2', router.href({ pathname: '/user/7/friends', query: { a: 1, b: 2 } }))