Make query parsing/stringifying configurable (#107)

dist/ko-component-router.js

@@ -1320,9 +1320,9 @@ return /******/ (function(modules) { // webpackBootstrap
 	    value: function updateFromString(str, pathname) {
 	      if (pathname) {
 	        var guid = (0, _utils.normalizePath)(this.ctx.config.depth + pathname);
-	        (0, _utils.merge)(qsParams, _defineProperty({}, guid, _qs2.default.parse(str)[guid]), false);
+	        (0, _utils.merge)(qsParams, _defineProperty({}, guid, this.parse(str)[guid]), false);
 	      } else {
-	        (0, _utils.merge)(qsParams, _qs2.default.parse(str), false);
+	        (0, _utils.merge)(qsParams, this.parse(str), false);
 	      }
 	      trigger(!trigger());
 	    }
@@ -1357,7 +1357,19 @@ return /******/ (function(modules) { // webpackBootstrap
 	  }, {
 	    key: 'getFullQueryString',
 	    value: function getFullQueryString(query, pathname) {
-	      return _qs2.default.stringify(this.getNonDefaultParams(query, pathname));
+	      return this.stringify(this.getNonDefaultParams(query, pathname));
+	    }
+	  }, {
+	    key: 'parse',
+	    value: function parse(str) {
+	      var parser = this.ctx.config.queryParser || _qs2.default.parse;
+	      return parser(str);
+	    }
+	  }, {
+	    key: 'stringify',
+	    value: function stringify(query) {
+	      var stringifier = this.ctx.config.queryStringifier || _qs2.default.stringify;
+	      return stringifier(query);
 	    }
 	  }]);
 

example/app.js

@@ -89,6 +89,8 @@ ko.components.register('app', {
                   <li><a data-bind="path: '/config#hashbang'">hashbang</a></li>
                   <li><a data-bind="path: '/config#persistQuery'">persistQuery</a></li>
                   <li><a data-bind="path: '/config#persistState'">persistState</a></li>
+                  <li><a data-bind="path: '/config#queryStringifier'">queryStringifier</a></li>
+                  <li><a data-bind="path: '/config#queryParser'">queryParser</a></li>
                   <li><a data-bind="path: '/config#inTransition'">inTransition</a></li>
                   <li><a data-bind="path: '/config#outTransition'"">outTransition</a></li>
                 </ul>

example/views/config.js

@@ -154,6 +154,31 @@ ${escape(`<!--[if lte IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/
         </p>
       </section>
 
+      <section>
+        <h2 id="queryStringifier">
+          queryStringifier
+          <small class="text-muted">(query) => urlEncodedQuery</small>
+        </h2>
+        <p>
+          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>
+          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>
+      </section>
+
+      <section>
+        <h2 id="queryParser">
+          queryParser
+          <small class="text-muted">(urlEncodedQuery) => query</small>
+        </h2>
+        <p>
+          inverse of queryStringifier
+        </p>
+      </section>
+
       <section>
         <h2 id="inTransition">
           inTransition

lib/query.js

@@ -195,9 +195,9 @@ var Query = function () {
     value: function updateFromString(str, pathname) {
       if (pathname) {
         var guid = (0, _utils.normalizePath)(this.ctx.config.depth + pathname);
-        (0, _utils.merge)(qsParams, _defineProperty({}, guid, _qs2.default.parse(str)[guid]), false);
+        (0, _utils.merge)(qsParams, _defineProperty({}, guid, this.parse(str)[guid]), false);
       } else {
-        (0, _utils.merge)(qsParams, _qs2.default.parse(str), false);
+        (0, _utils.merge)(qsParams, this.parse(str), false);
       }
       trigger(!trigger());
     }
@@ -232,7 +232,19 @@ var Query = function () {
   }, {
     key: 'getFullQueryString',
     value: function getFullQueryString(query, pathname) {
-      return _qs2.default.stringify(this.getNonDefaultParams(query, pathname));
+      return this.stringify(this.getNonDefaultParams(query, pathname));
+    }
+  }, {
+    key: 'parse',
+    value: function parse(str) {
+      var parser = this.ctx.config.queryParser || _qs2.default.parse;
+      return parser(str);
+    }
+  }, {
+    key: 'stringify',
+    value: function stringify(query) {
+      var stringifier = this.ctx.config.queryStringifier || _qs2.default.stringify;
+      return stringifier(query);
     }
   }]);
 

src/query.js

@@ -152,9 +152,9 @@ class Query {
   updateFromString(str, pathname) {
     if (pathname) {
       const guid = normalizePath(this.ctx.config.depth + pathname)
-      merge(qsParams, { [guid]: qs.parse(str)[guid] }, false)
+      merge(qsParams, { [guid]: this.parse(str)[guid] }, false)
     } else {
-      merge(qsParams, qs.parse(str), false)
+      merge(qsParams, this.parse(str), false)
     }
     trigger(!trigger())
   }
@@ -187,7 +187,17 @@ class Query {
   }
 
   getFullQueryString(query, pathname) {
-    return qs.stringify(this.getNonDefaultParams(query, pathname))
+    return this.stringify(this.getNonDefaultParams(query, pathname))
+  }
+
+  parse(str) {
+    const parser = this.ctx.config.queryParser || qs.parse
+    return parser(str)
+  }
+
+  stringify(query) {
+    const stringifier = this.ctx.config.queryStringifier || qs.stringify
+    return stringifier(query)
   }
 }