feat: add query string -> params

mikaelkaron · Jul 8, 2019 · c9d87b8 · c9d87b8
1 parent bf1a347
commit c9d87b8
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 4 deletions.
diff --git a/packages/stencil-xstate-router/package-lock.json b/packages/stencil-xstate-router/package-lock.json
diff --git a/packages/stencil-xstate-router/package.json b/packages/stencil-xstate-router/package.json
@@ -31,6 +31,7 @@
     "xstate": "^4.6.4"
   },
   "dependencies": {
+    "query-string": "^6.8.1",
     "route-recognizer": "^0.3.4"
   }
 }
diff --git a/packages/stencil-xstate-router/src/components.d.ts b/packages/stencil-xstate-router/src/components.d.ts
@@ -90,6 +90,10 @@ export namespace Components {
     * If useHash set to true then the router uses an old routing approach with hash in the URL. Fall back to this mode if there is no History API supported.
     */
     'useHash'?: boolean;
+    /**
+    * Parse query string for params
+    */
+    'useQs'?: boolean;
   }
 }
 
@@ -185,6 +189,10 @@ declare namespace LocalJSX {
     * If useHash set to true then the router uses an old routing approach with hash in the URL. Fall back to this mode if there is no History API supported.
     */
     'useHash'?: boolean;
+    /**
+    * Parse query string for params
+    */
+    'useQs'?: boolean;
   }
 
   interface IntrinsicElements {

diff --git a/packages/stencil-xstate-router/src/components/xstate-router-navigo/readme.md b/packages/stencil-xstate-router/src/components/xstate-router-navigo/readme.md
@@ -18,6 +18,7 @@
 | `routes`               | --         | Routes to register                                                                                                                                     | `{ [x: string]: string; }`                                                                                                                                                                                                                                                       | `undefined` |
 | `stateRenderer`        | --         | State renderer                                                                                                                                         | `(component: Element \| Element[], state: State<any, EventObject>, send: (event: SingleOrArray<OmniEvent<EventObject>>, payload?: Record<string, any> & { type?: undefined; }) => State<any, EventObject>, service: Interpreter<any, any, EventObject>) => Element \| Element[]` | `undefined` |
 | `useHash`              | `use-hash` | If useHash set to true then the router uses an old routing approach with hash in the URL. Fall back to this mode if there is no History API supported. | `boolean`                                                                                                                                                                                                                                                                        | `false`     |
+| `useQs`                | `use-qs`   | Parse query string for params                                                                                                                          | `boolean`                                                                                                                                                                                                                                                                        | `true`      |
 
 
 ## Dependencies

diff --git a/packages/stencil-xstate-router/src/components/xstate-router-navigo/xstate-router-navigo.tsx b/packages/stencil-xstate-router/src/components/xstate-router-navigo/xstate-router-navigo.tsx
@@ -1,19 +1,20 @@
 import {
-  h,
   Component,
   ComponentInterface,
+  h,
   Listen,
   Prop,
   State
 } from '@stencil/core';
 import Navigo from 'navigo';
+import { parse } from 'query-string';
+import RouteRecognizer from 'route-recognizer';
 import { EventObject, StateMachine } from 'xstate';
 import {
   ComponentRenderer,
   RouterInterpreterOptions,
   StateRenderer
 } from '../xstate-router/types';
-import RouteRecognizer from 'route-recognizer';
 
 const composedPath = (target: Element) => {
   const path = [];
@@ -69,6 +70,11 @@ export class XstateRouterNavigo implements ComponentInterface {
    */
   @Prop() root?: string;
 
+  /**
+   * Parse query string for params
+   */
+  @Prop() useQs?: boolean = true;
+
   /**
    * If useHash set to true then the router uses an old routing approach with hash in the URL.
    * Fall back to this mode if there is no History API supported.
@@ -139,7 +145,8 @@ export class XstateRouterNavigo implements ComponentInterface {
             routes.reduce(
               (acc, { path, handler }) => ({
                 ...acc,
-                [path]: handler
+                [path]: (params: Record<string, any>, query: string) =>
+                  handler({ ...params, ...(this.useQs && parse(query)) })
               }),
               {}
             )