Make query parsing/stringifying depth agnostic

example/app.js

@@ -1,5 +1,6 @@
 import history from 'html5-history-api'
 import promise from 'es6-promise'
+import juri from 'juri'
 import raf from 'raf'
 if (history.emulate) {
   history.redirect('!/', '')
@@ -28,6 +29,9 @@ class App {
     this.inTransition = inTransition
     this.outTransition = outTransition
 
+    this.queryParser = juri().decodeQString
+    this.queryStringifier = juri().encodeQString
+
     this.routes = {
       '/': 'getting-started',
       '/config': 'config',
@@ -137,7 +141,9 @@ ko.components.register('app', {
             base: base,
             hashbang: hashbang,
             inTransition: inTransition,
-            outTransition: outTransition">
+            outTransition: outTransition,
+            queryParser: queryParser,
+            queryStringifier: queryStringifier">
           </ko-component-router>
         </div>
       </div>

example/views/config.js

@@ -163,10 +163,19 @@ ${escape(`<!--[if lte IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/
           function that recieves a JS object as the first parameter and returns
           a url-safe encoded querystring. Defaults to <a href="https://www.npmjs.com/package/qs">qs.parse</a>.
         </p>
+        <p>
+          note, this option can only be defined at the top-level router
+        </p>
         <p>
           may be used to implement an alternative query encoding, such as
           <a href="https://github.com/Sage/jsurl">jsurl</a> or <a href="https://github.com/scrollback/juri">juri</a>.
         </p>
+        <p>
+          <em>
+            this demo uses juri, check the source and see it in action on the
+            <a data-bind="path: '/nested-routing/foo'">nested routing</a> page.
+          </em>
+        </p>
       </section>
 
       <section>

lib/query.js

@@ -12,10 +12,6 @@ var _knockout = require('knockout');
 
 var _knockout2 = _interopRequireDefault(_knockout);
 
-var _qs = require('qs');
-
-var _qs2 = _interopRequireDefault(_qs);
-
 var _utils = require('./utils');
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -237,13 +233,13 @@ var Query = function () {
   }, {
     key: 'parse',
     value: function parse(str) {
-      var parser = this.ctx.config.queryParser || _qs2.default.parse;
+      var parser = _knockout2.default.router.config.queryParser;
       return parser(str);
     }
   }, {
     key: 'stringify',
     value: function stringify(query) {
-      var stringifier = this.ctx.config.queryStringifier || _qs2.default.stringify;
+      var stringifier = _knockout2.default.router.config.queryStringifier;
       return stringifier(query);
     }
   }]);

lib/router.js

@@ -10,6 +10,10 @@ var _knockout = require('knockout');
 
 var _knockout2 = _interopRequireDefault(_knockout);
 
+var _qs = require('qs');
+
+var _qs2 = _interopRequireDefault(_qs);
+
 var _context = require('./context');
 
 var _context2 = _interopRequireDefault(_context);
@@ -41,6 +45,10 @@ var Router = function () {
     var persistState = _ref$persistState === undefined ? false : _ref$persistState;
     var _ref$persistQuery = _ref.persistQuery;
     var persistQuery = _ref$persistQuery === undefined ? false : _ref$persistQuery;
+    var _ref$queryParser = _ref.queryParser;
+    var queryParser = _ref$queryParser === undefined ? _qs2.default.parse : _ref$queryParser;
+    var _ref$queryStringifier = _ref.queryStringifier;
+    var queryStringifier = _ref$queryStringifier === undefined ? _qs2.default.stringify : _ref$queryStringifier;
 
     _classCallCheck(this, Router);
 
@@ -56,7 +64,9 @@ var Router = function () {
       inTransition: inTransition,
       outTransition: outTransition,
       persistState: persistState,
-      persistQuery: persistQuery
+      persistQuery: persistQuery,
+      queryParser: queryParser,
+      queryStringifier: queryStringifier
     };
 
     this.ctx = new _context2.default(bindingCtx, this.config);

package.json

@@ -70,6 +70,7 @@
     "html5-history-api": "^4.2.5",
     "isparta-loader": "^2.0.0",
     "jquery": "^3.0.0",
+    "juri": "^1.0.3",
     "karma": "^1.1.0",
     "karma-coverage": "^1.0.0",
     "karma-firefox-launcher": "^1.0.0",

src/query.js

@@ -1,5 +1,4 @@
 import ko from 'knockout'
-import qs from 'qs'
 import { clone, deepEquals, identity, isUndefined, mapKeys, merge, normalizePath } from './utils'
 
 const qsParams = {}
@@ -191,12 +190,12 @@ class Query {
   }
 
   parse(str) {
-    const parser = this.ctx.config.queryParser || qs.parse
+    const parser = ko.router.config.queryParser
     return parser(str)
   }
 
   stringify(query) {
-    const stringifier = this.ctx.config.queryStringifier || qs.stringify
+    const stringifier = ko.router.config.queryStringifier
     return stringifier(query)
   }
 }

src/router.js

@@ -1,4 +1,5 @@
 import ko from 'knockout'
+import qs from 'qs'
 import Context from './context'
 import Route from './route'
 import { isUndefined, normalizePath } from './utils'
@@ -15,7 +16,9 @@ class Router {
     inTransition = noop,
     outTransition = noop,
     persistState = false,
-    persistQuery = false
+    persistQuery = false,
+    queryParser = qs.parse,
+    queryStringifier = qs.stringify
   }) {
     for (const route in routes) {
       routes[route] = new Route(route, routes[route])
@@ -29,7 +32,9 @@ class Router {
       inTransition,
       outTransition,
       persistState,
-      persistQuery
+      persistQuery,
+      queryParser,
+      queryStringifier
     }
 
     this.ctx = new Context(bindingCtx, this.config)