feat: functional component for xstate-router-navigo

packages/stencil-xstate-router/src/components/xstate-router-navigo/index.tsx

@@ -0,0 +1,38 @@
+import { EventObject, StateMachine, StateSchema } from 'xstate';
+import {
+  ComponentRenderer,
+  RouteEvent,
+  RouterInterpreterOptions,
+  StateRenderer
+} from '../xstate-router/types';
+
+export type RouterNavigoProps<
+  TContext,
+  TSchema extends StateSchema,
+  TEvent extends EventObject
+> = {
+  machine: StateMachine<TContext, TSchema, TEvent>;
+  options?: RouterInterpreterOptions;
+  stateRenderer?: StateRenderer<any, any, RouteEvent>;
+  componentRenderer?: ComponentRenderer<any, any, EventObject>;
+  capture?: boolean;
+  root?: string;
+  useHash?: boolean;
+  hash?: string;
+};
+
+/**
+ * Functional component wrapper around XstateRouterNavigo
+ * @param props Component props
+ * @param children Component children
+ */
+export const RouterNavigo: <
+  TContext,
+  TSchema extends StateSchema,
+  TEvent extends EventObject
+>(
+  props: RouterNavigoProps<TContext, TSchema, TEvent>,
+  children?: JSX.Element[]
+) => JSX.Element = (props, children) => (
+  <xstate-router-navigo {...props}>{children}</xstate-router-navigo>
+);

packages/stencil-xstate-router/src/components/xstate-router/index.tsx

@@ -1,12 +1,8 @@
 import { EventObject, StateSchema } from 'xstate';
-import {
-  ComponentRenderer,
-  RouteConditionPredicate,
-  RouteEvent,
-  RouterProps
-} from './types';
+import { RouterProps } from './types';
 
 export * from './types';
+export * from './utils';
 
 /**
  * Functional component wrapper for XstateRouter
@@ -20,56 +16,8 @@ export const Router: <
 >(
   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>
+) => JSX.Element = (props, children) => (
+  <xstate-router {...props}>{children}</xstate-router>
 );
 
-/**
- * Merges meta objects
- * @param source XState.State meta object
- * @param target Target object
- */
-export const mergeMeta: <T extends Record<string, any>>(
-  source: T,
-  target?: T | {}
-) => T = (source, target = {}) =>
-  Object.keys(source).reduce(
-    (result, key) => Object.assign(result, source[key]),
-    target
-  );
-
-/**
- * Renders a component
- * @param Component Component tag
- * @param props Component props
- */
-export const renderComponent: ComponentRenderer<any, any, EventObject> = (
-  Component,
-  props
-) => <Component {...props} />;
-
-/**
- * Guards a route
- * @param context Context
- * @param event Event
- * @param meta Meta
- */
-export const routeGuard: RouteConditionPredicate<any, RouteEvent> = (
-  _,
-  event,
-  { cond }
-) => event.path === cond.path;
-
 export default Router;

packages/stencil-xstate-router/src/components/xstate-router/utils.tsx

@@ -0,0 +1,42 @@
+import { EventObject } from 'xstate';
+import {
+  ComponentRenderer,
+  RouteConditionPredicate,
+  RouteEvent
+} from './types';
+
+/**
+ * Merges meta objects
+ * @param source XState.State meta object
+ * @param target Target object
+ */
+export const mergeMeta: <T extends Record<string, any>>(
+  source: T,
+  target?: T | {}
+) => T = (source, target = {}) =>
+  Object.keys(source).reduce(
+    (result, key) => Object.assign(result, source[key]),
+    target
+  );
+
+/**
+ * Renders a component
+ * @param Component Component tag
+ * @param props Component props
+ */
+export const renderComponent: ComponentRenderer<any, any, EventObject> = (
+  Component,
+  props
+) => <Component {...props} />;
+
+/**
+ * Guards a route
+ * @param context Context
+ * @param event Event
+ * @param meta Meta
+ */
+export const routeGuard: RouteConditionPredicate<any, RouteEvent> = (
+  _,
+  event,
+  { cond }
+) => event.path === cond.path;

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 '.';
+import { mergeMeta, renderComponent, routeGuard } from './utils';
 import {
   ComponentRenderer,
   NavigationEvent,