fix: typescript fixes

mikaelkaron · Jul 4, 2019 · 88b2b58 · 88b2b58
1 parent 007c0f0
commit 88b2b58
Show file tree

Hide file tree

Showing 10 changed files with 89 additions and 52 deletions.
diff --git a/packages/demo/src/components.d.ts b/packages/demo/src/components.d.ts
@@ -10,19 +10,24 @@ import {
   RouterState,
   Send,
 } from 'stencil-xstate-router/dist/types';
+import {
+  DemoContext,
+  DemoEvent,
+  DemoSchema,
+} from './components/types';
 
 export namespace Components {
   interface IsAnonymous {
-    'send': Send<any, any, any>;
-    'state': RouterState<any, any>;
+    'send': Send<DemoContext, DemoSchema, DemoEvent>;
+    'state': RouterState<DemoContext, DemoEvent>;
   }
   interface IsAuthenticated {
-    'send': Send<any, any, any>;
-    'state': RouterState<any, any>;
+    'send': Send<DemoContext, DemoSchema, DemoEvent>;
+    'state': RouterState<DemoContext, DemoEvent>;
   }
   interface IsTest {
-    'send': Send<any, any, any>;
-    'state': RouterState<any, any>;
+    'send': Send<DemoContext, DemoSchema, DemoEvent>;
+    'state': RouterState<DemoContext, DemoEvent>;
     'testId': string;
   }
   interface XstateRouterTest {}
@@ -64,16 +69,16 @@ declare global {
 
 declare namespace LocalJSX {
   interface IsAnonymous extends JSXBase.HTMLAttributes<HTMLIsAnonymousElement> {
-    'send': Send<any, any, any>;
-    'state': RouterState<any, any>;
+    'send': Send<DemoContext, DemoSchema, DemoEvent>;
+    'state': RouterState<DemoContext, DemoEvent>;
   }
   interface IsAuthenticated extends JSXBase.HTMLAttributes<HTMLIsAuthenticatedElement> {
-    'send': Send<any, any, any>;
-    'state': RouterState<any, any>;
+    'send': Send<DemoContext, DemoSchema, DemoEvent>;
+    'state': RouterState<DemoContext, DemoEvent>;
   }
   interface IsTest extends JSXBase.HTMLAttributes<HTMLIsTestElement> {
-    'send': Send<any, any, any>;
-    'state': RouterState<any, any>;
+    'send': Send<DemoContext, DemoSchema, DemoEvent>;
+    'state': RouterState<DemoContext, DemoEvent>;
     'testId'?: string;
   }
   interface XstateRouterTest extends JSXBase.HTMLAttributes<HTMLXstateRouterTestElement> {}

diff --git a/packages/demo/src/components/is-anonymous/is-anonymous.tsx b/packages/demo/src/components/is-anonymous/is-anonymous.tsx
@@ -1,14 +1,15 @@
 import { h, Component, Prop, ComponentInterface } from '@stencil/core';
 import { Send, RouterState } from 'stencil-xstate-router/dist/types';
+import { DemoContext, DemoSchema, DemoEvent } from '../types';
 
 @Component({
   tag: 'is-anonymous',
   shadow: true
 })
 export class IsAnonymous implements ComponentInterface {
-  @Prop() send!: Send<any, any, any>;
+  @Prop() send!: Send<DemoContext, DemoSchema, DemoEvent>;
 
-  @Prop() state!: RouterState<any, any>;
+  @Prop() state!: RouterState<DemoContext, DemoEvent>;
 
   render() {
     return [

diff --git a/packages/demo/src/components/is-authenticated/is-authenticated.tsx b/packages/demo/src/components/is-authenticated/is-authenticated.tsx
@@ -1,14 +1,15 @@
 import { h, Component, Prop, ComponentInterface } from '@stencil/core';
 import { Send, RouterState } from 'stencil-xstate-router/dist/types';
+import { DemoContext, DemoSchema, DemoEvent } from '../types';
 
 @Component({
   tag: 'is-authenticated',
   shadow: true
 })
 export class IsAuthenticated implements ComponentInterface {
-  @Prop() send!: Send<any, any, any>;
+  @Prop() send!: Send<DemoContext, DemoSchema, DemoEvent>;
 
-  @Prop() state!: RouterState<any, any>;
+  @Prop() state!: RouterState<DemoContext, DemoEvent>;
 
   componentWillLoad() {
     console.log(`will load: ${JSON.stringify(this.state.value)}`);

diff --git a/packages/demo/src/components/is-test/is-test.tsx b/packages/demo/src/components/is-test/is-test.tsx
@@ -1,14 +1,15 @@
 import { h, Component, Prop } from '@stencil/core';
 import { Send, RouterState } from 'stencil-xstate-router/dist/types';
+import { DemoContext, DemoSchema, DemoEvent } from '../types';
 
 @Component({
   tag: 'is-test',
   shadow: true
 })
 export class IsTest {
-  @Prop() send!: Send<any, any, any>;
+  @Prop() send!: Send<DemoContext, DemoSchema, DemoEvent>;
 
-  @Prop() state!: RouterState<any, any>;
+  @Prop() state!: RouterState<DemoContext, DemoEvent>;
 
   @Prop() testId: string;
 

diff --git a/packages/demo/src/components/types.ts b/packages/demo/src/components/types.ts
@@ -0,0 +1,35 @@
+import { StateSchema } from "xstate";
+
+export type DemoContext = {
+  authenticated?: boolean;
+  params?: { [key: string]: string };
+};
+
+export interface DemoSchema extends StateSchema {
+  states: {
+    anonymous: {};
+    authenticated: {
+      states: {
+        home: {};
+        woot: {};
+        account: {};
+        test: {
+          states: {
+            overview: {};
+            details: {};
+          };
+        };
+        current: {};
+      };
+    };
+  };
+}
+
+export type DemoEvent = { params?: Record<string, any> } & (
+  | { type: 'LOGIN' }
+  | { type: 'LOGOUT' }
+  | { type: 'HOME' }
+  | { type: 'ACCOUNT' }
+  | { type: 'TEST' }
+  | { type: 'DETAILS' }
+  | { type: 'WOOT' });
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
@@ -1,18 +1,15 @@
 import { h, Component, State } from '@stencil/core';
 import { Machine, assign } from 'xstate';
 import 'stencil-xstate-router';
+import { DemoContext, DemoEvent, DemoSchema } from '../types';
 
-type Context = {
-  authenticated?: boolean;
-  params?: { [key: string]: string };
-};
 
 @Component({
   tag: 'xstate-router-test',
   shadow: false
 })
 export class XStateRouterTest {
-  @State() machine = Machine<Context>(
+  @State() machine = Machine<DemoContext, DemoSchema, DemoEvent>(
     {
       id: 'app',
       initial: 'anonymous',

diff --git a/packages/stencil-xstate-router/src/components/xstate-router-navigo/index.tsx b/packages/stencil-xstate-router/src/components/xstate-router-navigo/index.tsx
@@ -2,7 +2,6 @@ import { h } from '@stencil/core';
 import { EventObject, StateMachine, StateSchema } from 'xstate';
 import {
   ComponentRenderer,
-  RouteEvent,
   RouterInterpreterOptions,
   StateRenderer
 } from '../xstate-router/types';
@@ -14,10 +13,11 @@ export interface RouterNavigoProps<
 > {
   machine: StateMachine<TContext, TSchema, TEvent>;
   options?: RouterInterpreterOptions;
-  stateRenderer?: StateRenderer<any, any, RouteEvent>;
-  componentRenderer?: ComponentRenderer<any, any, EventObject>;
+  stateRenderer?: StateRenderer<TContext, TSchema, TEvent>;
+  componentRenderer?: ComponentRenderer<TContext, TSchema, TEvent>;
   capture?: boolean;
   root?: string;
+  routes?: Record<string, string>;
   useHash?: boolean;
   hash?: string;
 };

diff --git a/packages/stencil-xstate-router/src/components/xstate-router/types.ts b/packages/stencil-xstate-router/src/components/xstate-router/types.ts
@@ -4,7 +4,7 @@ import {
   InterpreterOptions,
   State as RouterState,
   StateMachine,
-  StateSchema,
+  StateSchema
 } from 'xstate';
 
 export { RouterState };
@@ -15,7 +15,10 @@ export type Send<
   TEvent extends EventObject
 > = Interpreter<TContext, TSchema, TEvent>['send'];
 
-export type NavigationHandler = (path: string, params?: Record<string, any>) => void;
+export type NavigationHandler = (
+  path: string,
+  params?: Record<string, any>
+) => void;
 
 export type RouteHandler = (routes: Route[]) => VoidFunction;
 
@@ -44,8 +47,15 @@ export type ComponentRenderer<
   props?: ComponentProps<TContext, TSchema, TEvent>
 ) => Element[] | Element;
 
-export type RenderEvent = {
-  type: 'RENDER',
+export interface RouterEvent extends EventObject {
+  /**
+   * Parameters
+   */
+  params?: Record<string, any>;
+}
+
+export type RenderEvent = RouterEvent & {
+  type: 'RENDER';
   /**
    * Component to render
    */
@@ -54,25 +64,14 @@ export type RenderEvent = {
    * Component slot
    */
   slot?: string;
-  /**
-   * Component params
-   */
-  params?: Record<string, any>;
 };
 
-export interface RouteEvent extends EventObject {
+export type NavigationEvent = RouterEvent & {
+  type: 'NAVIGATE';
   /**
    * Path routed to
    */
   path: string;
-  /**
-   * Route parameters
-   */
-  params?: Record<string, any>;
-};
-
-export type NavigationEvent = RouteEvent & {
-  type: 'NAVIGATE'
 };
 
 export interface RouterProps<
@@ -82,11 +81,12 @@ export interface RouterProps<
 > {
   machine: StateMachine<TContext, TSchema, TEvent>;
   options?: RouterInterpreterOptions;
-  stateRenderer?: StateRenderer<any, any, RouteEvent>;
-  componentRenderer?: ComponentRenderer<any, any, EventObject>;
+  stateRenderer?: StateRenderer<TContext, TSchema, TEvent>;
+  componentRenderer?: ComponentRenderer<TContext, TSchema, TEvent>;
   route?: RouteHandler;
+  routes?: Record<string, string>;
   navigate?: NavigationHandler;
-};
+}
 
 export interface ComponentProps<
   TContext,
@@ -105,7 +105,7 @@ export interface ComponentProps<
    * Current service
    */
   service: Interpreter<TContext, TSchema, TEvent>;
-};
+}
 
 /**
  * Router interpreter options

diff --git a/packages/stencil-xstate-router/src/index.ts b/packages/stencil-xstate-router/src/index.ts
@@ -1,3 +1,4 @@
 export { Components } from './components';
 
 export * from './components/xstate-router';
+export * from './components/xstate-router-navigo'
diff --git a/packages/stencil-xstate-router/stencil.config.ts b/packages/stencil-xstate-router/stencil.config.ts
@@ -7,11 +7,7 @@ export const config: Config = {
       type: 'dist',
     },
     {
-      'type': 'docs-readme'
-    },
-    {
-      type: 'www',
-      serviceWorker: null // disable service workers,
+      type: 'docs-readme'
     }
   ]
 };