feat: make params expansion configurable

mikaelkaron · Oct 17, 2019 · 45f0c98 · 45f0c98
1 parent 01eb762
commit 45f0c98
Show file tree

Hide file tree

Showing 10 changed files with 79 additions and 53 deletions.
diff --git a/packages/demo/package-lock.json b/packages/demo/package-lock.json
diff --git a/packages/demo/package.json b/packages/demo/package.json
@@ -12,10 +12,10 @@
   "dependencies": {
     "navigo": "^7.1.2",
     "stencil-xstate-router": "file:../stencil-xstate-router",
-    "xstate": "^4.6.4"
+    "xstate": "^4.6.7"
   },
   "devDependencies": {
-    "@stencil/core": "1.1.5"
+    "@stencil/core": "1.7.2"
   },
   "license": "MIT"
 }
diff --git a/packages/demo/src/components.d.ts b/packages/demo/src/components.d.ts
@@ -1,3 +1,4 @@
+/* eslint-disable */
 /* tslint:disable */
 /**
  * This is an autogenerated file created by the Stencil compiler.
@@ -37,25 +38,25 @@ declare global {
 
 
   interface HTMLIsAnonymousElement extends Components.IsAnonymous, HTMLStencilElement {}
-  var HTMLIsAnonymousElement: {
+  const HTMLIsAnonymousElement: {
     prototype: HTMLIsAnonymousElement;
     new (): HTMLIsAnonymousElement;
   };
 
   interface HTMLIsAuthenticatedElement extends Components.IsAuthenticated, HTMLStencilElement {}
-  var HTMLIsAuthenticatedElement: {
+  const HTMLIsAuthenticatedElement: {
     prototype: HTMLIsAuthenticatedElement;
     new (): HTMLIsAuthenticatedElement;
   };
 
   interface HTMLIsTestElement extends Components.IsTest, HTMLStencilElement {}
-  var HTMLIsTestElement: {
+  const HTMLIsTestElement: {
     prototype: HTMLIsTestElement;
     new (): HTMLIsTestElement;
   };
 
   interface HTMLXstateRouterTestElement extends Components.XstateRouterTest, HTMLStencilElement {}
-  var HTMLXstateRouterTestElement: {
+  const HTMLXstateRouterTestElement: {
     prototype: HTMLXstateRouterTestElement;
     new (): HTMLXstateRouterTestElement;
   };
@@ -68,20 +69,20 @@ declare global {
 }
 
 declare namespace LocalJSX {
-  interface IsAnonymous extends JSXBase.HTMLAttributes<HTMLIsAnonymousElement> {
+  interface IsAnonymous {
     'send': Send<DemoContext, DemoSchema, DemoEvent>;
     'state': RouterState<DemoContext, DemoEvent>;
   }
-  interface IsAuthenticated extends JSXBase.HTMLAttributes<HTMLIsAuthenticatedElement> {
+  interface IsAuthenticated {
     'send': Send<DemoContext, DemoSchema, DemoEvent>;
     'state': RouterState<DemoContext, DemoEvent>;
   }
-  interface IsTest extends JSXBase.HTMLAttributes<HTMLIsTestElement> {
+  interface IsTest {
     'send': Send<DemoContext, DemoSchema, DemoEvent>;
     'state': RouterState<DemoContext, DemoEvent>;
     'testId'?: string;
   }
-  interface XstateRouterTest extends JSXBase.HTMLAttributes<HTMLXstateRouterTestElement> {}
+  interface XstateRouterTest {}
 
   interface IntrinsicElements {
     'is-anonymous': IsAnonymous;
@@ -96,7 +97,12 @@ export { LocalJSX as JSX };
 
 declare module "@stencil/core" {
   export namespace JSX {
-    interface IntrinsicElements extends LocalJSX.IntrinsicElements {}
+    interface IntrinsicElements {
+      'is-anonymous': LocalJSX.IsAnonymous & JSXBase.HTMLAttributes<HTMLIsAnonymousElement>;
+      'is-authenticated': LocalJSX.IsAuthenticated & JSXBase.HTMLAttributes<HTMLIsAuthenticatedElement>;
+      'is-test': LocalJSX.IsTest & JSXBase.HTMLAttributes<HTMLIsTestElement>;
+      'xstate-router-test': LocalJSX.XstateRouterTest & JSXBase.HTMLAttributes<HTMLXstateRouterTestElement>;
+    }
   }
 }
 

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
@@ -20,18 +20,18 @@
     "test.watch": "stencil test --spec --e2e --watchAll"
   },
   "devDependencies": {
-    "@stencil/core": "^1.1.5",
+    "@stencil/core": "^1.7.2",
     "@types/navigo": "^7.0.1",
     "navigo": "^7.1.2",
-    "xstate": "^4.6.4"
+    "xstate": "^4.6.7"
   },
   "license": "MIT",
   "peerDependencies": {
     "navigo": "^7.1.2",
-    "xstate": "^4.6.4"
+    "xstate": "^4.6.7"
   },
   "dependencies": {
-    "query-string": "^6.8.1",
+    "query-string": "^6.8.3",
     "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
@@ -1,3 +1,4 @@
+/* eslint-disable */
 /* tslint:disable */
 /**
  * This is an autogenerated file created by the Stencil compiler.
@@ -101,13 +102,13 @@ declare global {
 
 
   interface HTMLXstateRouterElement extends Components.XstateRouter, HTMLStencilElement {}
-  var HTMLXstateRouterElement: {
+  const HTMLXstateRouterElement: {
     prototype: HTMLXstateRouterElement;
     new (): HTMLXstateRouterElement;
   };
 
   interface HTMLXstateRouterNavigoElement extends Components.XstateRouterNavigo, HTMLStencilElement {}
-  var HTMLXstateRouterNavigoElement: {
+  const HTMLXstateRouterNavigoElement: {
     prototype: HTMLXstateRouterNavigoElement;
     new (): HTMLXstateRouterNavigoElement;
   };
@@ -118,7 +119,7 @@ declare global {
 }
 
 declare namespace LocalJSX {
-  interface XstateRouter extends JSXBase.HTMLAttributes<HTMLXstateRouterElement> {
+  interface XstateRouter {
     /**
     * Component renderer
     */
@@ -152,7 +153,7 @@ declare namespace LocalJSX {
     */
     'stateRenderer'?: StateRenderer<any, any, EventObject>;
   }
-  interface XstateRouterNavigo extends JSXBase.HTMLAttributes<HTMLXstateRouterNavigoElement> {
+  interface XstateRouterNavigo {
     /**
     * Capture clicks from child elements and convert to routes
     */
@@ -206,7 +207,10 @@ export { LocalJSX as JSX };
 
 declare module "@stencil/core" {
   export namespace JSX {
-    interface IntrinsicElements extends LocalJSX.IntrinsicElements {}
+    interface IntrinsicElements {
+      'xstate-router': LocalJSX.XstateRouter & JSXBase.HTMLAttributes<HTMLXstateRouterElement>;
+      'xstate-router-navigo': LocalJSX.XstateRouterNavigo & JSXBase.HTMLAttributes<HTMLXstateRouterNavigoElement>;
+    }
   }
 }
 

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
@@ -25,7 +25,7 @@
 
 ### Depends on
 
-- [xstate-router](..\xstate-router)
+- [xstate-router](../xstate-router)
 
 ### Graph
 ```mermaid

diff --git a/packages/stencil-xstate-router/src/components/xstate-router/readme.md b/packages/stencil-xstate-router/src/components/xstate-router/readme.md
@@ -22,7 +22,7 @@
 
 ### Used by
 
- - [xstate-router-navigo](..\xstate-router-navigo)
+ - [xstate-router-navigo](../xstate-router-navigo)
 
 ### Graph
 ```mermaid

diff --git a/packages/stencil-xstate-router/src/components/xstate-router/types.ts b/packages/stencil-xstate-router/src/components/xstate-router/types.ts
@@ -95,6 +95,8 @@ export interface ComponentProps<
 /**
  * Router interpreter options
  */
-export interface RouterInterpreterOptions extends InterpreterOptions {
+export interface RouterInterpreterOptions extends Partial<InterpreterOptions> {
   merge?: boolean;
+  useStateParams?: boolean;
+  useEventParams?: boolean;
 }
diff --git a/packages/stencil-xstate-router/src/components/xstate-router/xstate-router.ts b/packages/stencil-xstate-router/src/components/xstate-router/xstate-router.ts
@@ -151,15 +151,29 @@ export class XstateRouter implements ComponentInterface {
           return;
         }
         // default merge to true if not passed in options
-        const { merge = true } = this.options || {};
+        const {
+          options: {
+            merge = true,
+            useEventParams = true,
+            useStateParams = true
+          } = {}
+        } = this;
         // optionally merge state.meta before descruction
-        const { component, params, slot } = merge ? mergeMeta(meta) : meta;
+        const { component, params: metaParams, slot } = merge
+          ? mergeMeta(meta)
+          : meta;
+        // create params
+        const params = {
+          ...metaParams,
+          ...(useStateParams && stateParams),
+          ...(useEventParams && eventParams)
+        };
         // if there's a component we RENDER
         if (component) {
           send('RENDER', {
             component,
             slot,
-            params: { ...params, ...stateParams, ...eventParams }
+            params
           });
         }
         // get url by reducing state path and matching route
@@ -170,7 +184,7 @@ export class XstateRouter implements ComponentInterface {
         if (path) {
           send('NAVIGATE', {
             path,
-            params: { ...params, ...stateParams, ...eventParams }
+            params
           });
         }
       })