Merge 32ddc8f into 1e99694

docs/router.md

@@ -167,6 +167,111 @@ Middleware function for your nextjs server setup.
 
 
 
+#### Router.pushRoute(name[, params, query]) 
+
+Push State helper for navigating to a route.
+**note:** This doesn't work serverside.
+
+
+
+
+##### Parameters
+
+| Name | Type | Description |  |
+| ---- | ---- | ----------- | -------- |
+| name | `string`  | The route name. |   |
+| params | `Object`  | The route parameters. | *Optional* |
+| query | `Object`  | The route query parameters. | *Optional* |
+
+
+
+
+##### Examples
+
+```javascript
+router.add('/post/:slug','blog-post').as('blog-post');
+router.pushRoute('blog-post', {slug:'post-slug'}, {order:'1'});
+// resolves to /post/post-slug?order=1
+```
+
+
+##### Returns
+
+
+- `Void`
+
+
+
+#### Router.replaceRoute(name[, params, query]) 
+
+Replace State helper for navigating to a route.
+**note:** This doesn't work serverside.
+
+
+
+
+##### Parameters
+
+| Name | Type | Description |  |
+| ---- | ---- | ----------- | -------- |
+| name | `string`  | The route name. |   |
+| params | `Object`  | The route parameters. | *Optional* |
+| query | `Object`  | The route query parameters. | *Optional* |
+
+
+
+
+##### Examples
+
+```javascript
+router.add('/post/:slug','blog-post').as('blog-post');
+router.replaceRoute('blog-post', {slug:'post-slug'}, {order:'1'});
+// resolves to /post/post-slug?order=1
+```
+
+
+##### Returns
+
+
+- `Void`
+
+
+
+#### Router.prefetchRoute(name[, params, query]) 
+
+Prefetch a route
+**note:** This doesn't work serverside.
+
+
+
+
+##### Parameters
+
+| Name | Type | Description |  |
+| ---- | ---- | ----------- | -------- |
+| name | `string`  | The route name. |   |
+| params | `Object`  | The route parameters. | *Optional* |
+| query | `Object`  | The route query parameters. | *Optional* |
+
+
+
+
+##### Examples
+
+```javascript
+router.add('/post/:slug','blog-post').as('blog-post');
+router.prefetchRoute('blog-post', {slug:'post-slug'}, {order:'1'});
+// prefetches the data for /post/post-slug?order=1
+```
+
+
+##### Returns
+
+
+- `Void`
+
+
+
 #### Router._initialize()  *private method*
 
 Initialize the client url location data
@@ -216,6 +321,33 @@ Validates that nested groups are not created.
 
 
 
+##### Returns
+
+
+- `Void`
+
+
+
+#### Router._browserHistoryApply(method, name, params, query) 
+
+Helper function for browser history methods.
+Used by [router.pushRoute](https://github.com/samueljoos/next-avenues/blob/master/docs/router.md#pushroutenameparamsquery) [router.replaceRoute](https://github.com/samueljoos/next-avenues/blob/master/docs/router.md#replaceroutenameparamsquery) [router.prefetchRoute](https://github.com/samueljoos/next-avenues/blob/master/docs/router.md#prefetchroutenameparamsquery)
+
+
+
+
+##### Parameters
+
+| Name | Type | Description |  |
+| ---- | ---- | ----------- | -------- |
+| method | `string`  | Should be one of push, replace or prefetch. |   |
+| name | `string`  | The route name. |   |
+| params | `Object`  | The route Params. |   |
+| query | `Object`  | The route query. |   |
+
+
+
+
 ##### Returns
 
 

src/Router.js

@@ -29,6 +29,7 @@ import NextRouter from 'next/router';
 class Router {
     constructor() {
         this.getRequestHandler = this.getRequestHandler.bind(this);
+        this.NextRouter = NextRouter;
         this._initialize();
     }
 
@@ -200,6 +201,61 @@ class Router {
         };
     }
 
+    /**
+     * @description
+     * Push State helper for navigating to a route.
+     * **note:** This doesn't work serverside.
+     *
+     * @param {string} name The route name.
+     * @param {Object} [params] The route parameters.
+     * @param {Object} [query] The route query parameters.
+     *
+     * @example
+     * router.add('/post/:slug','blog-post').as('blog-post');
+     * router.pushRoute('blog-post', {slug:'post-slug'}, {order:'1'});
+     * // resolves to /post/post-slug?order=1
+     */
+    pushRoute(name, params, query) {
+        this._browserHistoryApply('push', name, params, query);
+    }
+
+
+    /**
+     * @description
+     * Replace State helper for navigating to a route.
+     * **note:** This doesn't work serverside.
+     *
+     * @param {string} name The route name.
+     * @param {Object} [params] The route parameters.
+     * @param {Object} [query] The route query parameters.
+     *
+     * @example
+     * router.add('/post/:slug','blog-post').as('blog-post');
+     * router.replaceRoute('blog-post', {slug:'post-slug'}, {order:'1'});
+     * // resolves to /post/post-slug?order=1
+     */
+    replaceRoute(name, params, query) {
+        this._browserHistoryApply('replace', name, params, query);
+    }
+
+    /**
+     * @description
+     * Prefetch a route
+     * **note:** This doesn't work serverside.
+     *
+     * @param {string} name The route name.
+     * @param {Object} [params] The route parameters.
+     * @param {Object} [query] The route query parameters.
+     *
+     * @example
+     * router.add('/post/:slug','blog-post').as('blog-post');
+     * router.prefetchRoute('blog-post', {slug:'post-slug'}, {order:'1'});
+     * // prefetches the data for /post/post-slug?order=1
+     */
+    prefetchRoute(name, params, query) {
+        this._browserHistoryApply('prefetch', name, params, query);
+    }
+
     //////
     // Private functions
     //////
@@ -219,7 +275,7 @@ class Router {
             this.port = document.location.port;
             this.domain = document.location.host.split(':')[0];
             this.protocol = document.location.protocol.split(':')[0];
-            NextRouter.events.on('routeChangeStart', (url) => {
+            this.NextRouter.events.on('routeChangeStart', (url) => {
                 this.path = url;
             });
         }
@@ -260,6 +316,26 @@ class Router {
             );
         }
     }
+
+    /**
+     * @description
+     * Helper function for browser history methods.
+     * Used by [router.pushRoute](https://github.com/samueljoos/next-avenues/blob/master/docs/router.md#pushroutenameparamsquery) [router.replaceRoute](https://github.com/samueljoos/next-avenues/blob/master/docs/router.md#replaceroutenameparamsquery) [router.prefetchRoute](https://github.com/samueljoos/next-avenues/blob/master/docs/router.md#prefetchroutenameparamsquery)
+     *
+     * @param {string} method Should be one of push, replace or prefetch.
+     * @param {string} name The route name.
+     * @param {Object} params The route Params.
+     * @param {Object} query The route query.
+     */
+    _browserHistoryApply(method, name, params, query) {
+        if (typeof window === 'undefined') {
+            throw errorMessage('Pushing routes is only available in the client', 'router.push');
+        }
+
+        const route = RouteStore.find(name, this.domain);
+        const nextLinkProps = route.getNextLinkProps(params, { domain: this.domain, protocol: this.protocol, query });
+        this.NextRouter[method](nextLinkProps.href, nextLinkProps.as);
+    }
 }
 
 export default new Router();

tests/Router.test.js

@@ -224,10 +224,33 @@ describe('Request handler', () => {
         return { app, req: { url, headers: { host: router.domain }}, res: {}};
     };
 
-    test('find route and call render', () => {
+    it('find route and call render', () => {
         const { app, req, res } = setup('/');
         const route = router.add('/', 'index');
         router.getRequestHandler(app)(req, res);
         expect(app.render).toBeCalledWith(req, res, '/' + route.page, {});
     });
 });
+
+describe('Browser history methods', () => {
+    const setup = (method) => {
+        router.NextRouter = {
+            push: jest.fn(),
+            replace: jest.fn(),
+            prefetch: jest.fn()
+        };
+        router[`${method}Route`]('group-prefix-first', {}, { a: 'a' });
+        expect(router.NextRouter[method]).toHaveBeenCalledWith('/group-prefix-first', '/group-prefix/first?a=a');
+    };
+    it('pushRoute', () => {
+        setup('push');
+    });
+
+    it('replaceRoute', () => {
+        setup('replace');
+    });
+
+    it('prefetchRoute', () => {
+        setup('prefetch');
+    });
+});