feat: Pass event.params to RENDER/NAVIGATE by default

mikaelkaron · Oct 17, 2019 · 4394083 · 4394083
1 parent 17e1799
commit 4394083
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 14 deletions.
diff --git a/packages/demo/package-lock.json b/packages/demo/package-lock.json
diff --git a/packages/demo/src/components/xstate-router-test/xstate-router-test.tsx b/packages/demo/src/components/xstate-router-test/xstate-router-test.tsx
@@ -38,11 +38,7 @@ export class XStateRouterTest {
               initial: 'overview',
               states: {
                 overview: {},
-                details: {
-                  entry: assign({
-                    params: (ctx, event) => event.params || ctx.params
-                  })
-                }
+                details: {}
               },
               meta: {
                 component: 'is-test'

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
@@ -3,16 +3,17 @@ import {
   EventObject,
   interpret,
   Interpreter,
+  OmniEventObject,
   StateMachine,
-  TransitionDefinition,
   StateNode,
-  OmniEventObject
+  TransitionDefinition
 } from 'xstate';
 import {
   ComponentRenderer,
   NavigationHandler,
   Route,
   RouteHandler,
+  RouterEvent,
   RouterInterpreterOptions,
   StateRenderer
 } from './types';
@@ -138,22 +139,27 @@ export class XstateRouter implements ComponentInterface {
     this.service = service
       // add transition handler that triggers RENDER on state transition
       .onTransition(state => {
+        const {
+          changed,
+          meta,
+          context: { params: stateParams },
+          event
+        } = state;
+        const { params: eventParams } = event as RouterEvent;
         // return fast if state has not changed and is not the initial state
-        if (!state.changed && state !== initialState) {
+        if (!changed && state !== initialState) {
           return;
         }
         // default merge to true if not passed in options
         const { merge = true } = this.options || {};
         // optionally merge state.meta before descruction
-        const { component, params, slot } = merge
-          ? mergeMeta(state.meta)
-          : state.meta;
+        const { component, params, slot } = merge ? mergeMeta(meta) : meta;
         // if there's a component we RENDER
         if (component) {
           send('RENDER', {
             component,
             slot,
-            params: { ...params, ...state.context.params }
+            params: { ...params, ...stateParams, ...eventParams }
           });
         }
         // get url by reducing state path and matching route
@@ -164,7 +170,7 @@ export class XstateRouter implements ComponentInterface {
         if (path) {
           send('NAVIGATE', {
             path,
-            params: { ...params, ...state.context.params }
+            params: { ...params, ...stateParams, ...eventParams }
           });
         }
       })