feat: functional component wrapper for xstate-route

mikaelkaron · Jun 18, 2019 · a699f4a · a699f4a
1 parent 35c4dc2
commit a699f4a
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 10 deletions.
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
@@ -18,7 +18,7 @@ import {
   tag: 'xstate-router-navigo',
   shadow: false
 })
-export class XStateRouterNavigo implements ComponentInterface {
+export class XstateRouterNavigo implements ComponentInterface {
   @State() router: Navigo;
 
   /**

diff --git a/...er/src/components/xstate-router/utils.tsx → ...er/src/components/xstate-router/index.tsx b/...er/src/components/xstate-router/utils.tsx → ...er/src/components/xstate-router/index.tsx
@@ -1,10 +1,41 @@
-import { EventObject } from 'xstate';
+import { EventObject, StateSchema } from 'xstate';
 import {
   ComponentRenderer,
   RouteConditionPredicate,
-  RouteEvent
+  RouteEvent,
+  RouterProps
 } from './types';
 
+export * from './types';
+
+/**
+ * Functional component wrapper for XstateRouter
+ * @param props Component props
+ * @param children Component children
+ */
+export const Router: <
+  TContext,
+  TSchema extends StateSchema,
+  TEvent extends EventObject
+>(
+  props: RouterProps<TContext, TSchema, TEvent>,
+  children?: JSX.Element[]
+) => JSX.Element = (
+  { machine, options, route, navigate, stateRenderer, componentRenderer },
+  children
+) => (
+  <xstate-router
+    machine={machine}
+    options={options}
+    route={route}
+    navigate={navigate}
+    stateRenderer={stateRenderer}
+    componentRenderer={componentRenderer}
+  >
+    {children}
+  </xstate-router>
+);
+
 /**
  * Merges meta objects
  * @param source XState.State meta object
@@ -27,7 +58,7 @@ export const mergeMeta: <T extends Record<string, any>>(
 export const renderComponent: ComponentRenderer<any, any, EventObject> = (
   Component,
   props
-) => ({ tagName: Component, ...props });
+) => <Component {...props} />;
 
 /**
  * Guards a route
@@ -40,3 +71,5 @@ export const routeGuard: RouteConditionPredicate<any, RouteEvent> = (
   event,
   { cond }
 ) => event.path === cond.path;
+
+export default Router;
diff --git a/packages/stencil-xstate-router/src/components/xstate-router/types.ts b/packages/stencil-xstate-router/src/components/xstate-router/types.ts
@@ -3,12 +3,13 @@ import {
   EventObject,
   GuardPredicate,
   Interpreter,
+  InterpreterOptions,
   OmniEventObject,
   State as RouterState,
+  StateMachine,
   StateMeta,
   StateSchema,
-  TransitionConfig,
-  InterpreterOptions,
+  TransitionConfig
 } from 'xstate';
 
 export { RouterState };
@@ -83,6 +84,19 @@ export type NavigationEvent = EventObject & {
   url?: string;
 };
 
+export type RouterProps<
+  TContext,
+  TSchema extends StateSchema,
+  TEvent extends EventObject
+> = {
+  machine: StateMachine<TContext, TSchema, TEvent>;
+  options?: RouterInterpreterOptions;
+  stateRenderer?: StateRenderer<any, any, RouteEvent>;
+  componentRenderer?: ComponentRenderer<any, any, EventObject>;
+  route?: RouteHandler<any, any, RouteEvent>;
+  navigate?: NavigationHandler;
+};
+
 export type ComponentProps<
   TContext,
   TSchema extends StateSchema,

diff --git a/packages/stencil-xstate-router/src/components/xstate-router/xstate-router.tsx b/packages/stencil-xstate-router/src/components/xstate-router/xstate-router.tsx
@@ -1,6 +1,6 @@
 import { Component, ComponentInterface, Prop, State } from '@stencil/core';
 import { EventObject, interpret, Interpreter, StateMachine } from 'xstate';
-import { mergeMeta, renderComponent, routeGuard } from './utils';
+import { mergeMeta, renderComponent, routeGuard } from '.';
 import {
   ComponentRenderer,
   NavigationEvent,
@@ -17,7 +17,7 @@ import {
   tag: 'xstate-router',
   shadow: false
 })
-export class XStateRouter implements ComponentInterface {
+export class XstateRouter implements ComponentInterface {
   @State() private subscriptions: Set<VoidFunction> = new Set();
   @State() private service: Interpreter<any, any, EventObject>;
   @State() private rendered: {

diff --git a/packages/stencil-xstate-router/src/index.ts b/packages/stencil-xstate-router/src/index.ts
@@ -1,4 +1,3 @@
 export { Components } from './components';
 
-export * from './components/xstate-router/utils';
-export * from './components/xstate-router/types';
+export * from './components/xstate-router';