fix: align prop names

BREAKING CHANGE: current -> state
mikaelkaron · Jul 1, 2019 · e34dc02 · e34dc02
1 parent fcf1a4b
commit e34dc02
Show file tree

Hide file tree

Showing 9 changed files with 40 additions and 40 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
@@ -10,9 +10,11 @@
     "test.watch": "stencil test --spec --e2e --watchAll"
   },
   "dependencies": {
-    "@stencil/core": "1.1.3",
     "stencil-xstate-router": "file:../stencil-xstate-router",
     "xstate": "^4.6.3"
   },
+  "devDependencies": {
+    "@stencil/core": "1.1.3"
+  },
   "license": "MIT"
 }
diff --git a/packages/demo/src/components.d.ts b/packages/demo/src/components.d.ts
@@ -7,24 +7,22 @@
 
 import { HTMLStencilElement, JSXBase } from '@stencil/core/internal';
 import {
+  RouterState,
   Send,
 } from 'stencil-xstate-router/dist/types';
-import {
-  State,
-} from 'xstate';
 
 export namespace Components {
   interface IsAnonymous {
-    'current': State<any, any>;
     'send': Send<any, any, any>;
+    'state': RouterState<any, any>;
   }
   interface IsAuthenticated {
-    'current': State<any, any>;
     'send': Send<any, any, any>;
+    'state': RouterState<any, any>;
   }
   interface IsTest {
-    'current': State<any, any>;
     'send': Send<any, any, any>;
+    'state': RouterState<any, any>;
     'testId': string;
   }
   interface XstateRouterTest {}
@@ -66,16 +64,16 @@ declare global {
 
 declare namespace LocalJSX {
   interface IsAnonymous extends JSXBase.HTMLAttributes<HTMLIsAnonymousElement> {
-    'current': State<any, any>;
     'send': Send<any, any, any>;
+    'state': RouterState<any, any>;
   }
   interface IsAuthenticated extends JSXBase.HTMLAttributes<HTMLIsAuthenticatedElement> {
-    'current': State<any, any>;
     'send': Send<any, any, any>;
+    'state': RouterState<any, any>;
   }
   interface IsTest extends JSXBase.HTMLAttributes<HTMLIsTestElement> {
-    'current': State<any, any>;
     'send': Send<any, any, any>;
+    'state': RouterState<any, any>;
     '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,15 +1,14 @@
-import { h, Component, Prop } from '@stencil/core';
-import { State} from 'xstate';
-import { Send } from 'stencil-xstate-router/dist/types';
+import { h, Component, Prop, ComponentInterface } from '@stencil/core';
+import { Send, RouterState } from 'stencil-xstate-router/dist/types';
 
 @Component({
   tag: 'is-anonymous',
   shadow: true
 })
-export class IsAnonymous {
+export class IsAnonymous implements ComponentInterface {
   @Prop() send!: Send<any, any, any>;
 
-  @Prop() current!: State<any, any>;
+  @Prop() state!: RouterState<any, any>;
 
   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,6 +1,5 @@
 import { h, Component, Prop, ComponentInterface } from '@stencil/core';
-import { State} from 'xstate';
-import { Send } from 'stencil-xstate-router/dist/types';
+import { Send, RouterState } from 'stencil-xstate-router/dist/types';
 
 @Component({
   tag: 'is-authenticated',
@@ -9,19 +8,19 @@ import { Send } from 'stencil-xstate-router/dist/types';
 export class IsAuthenticated implements ComponentInterface {
   @Prop() send!: Send<any, any, any>;
 
-  @Prop() current!: State<any, any>;
+  @Prop() state!: RouterState<any, any>;
 
   componentWillLoad() {
-    console.log(`will load: ${JSON.stringify(this.current.value)}`);
+    console.log(`will load: ${JSON.stringify(this.state.value)}`);
   }
 
   componentDidUnload() {
-    console.log(`did unload: ${JSON.stringify(this.current.value)}`)
+    console.log(`did unload: ${JSON.stringify(this.state.value)}`)
   }
 
   render() {
     return [
-      JSON.stringify(this.current.value),
+      JSON.stringify(this.state.value),
       <button onClick={() => this.send('HOME')}>home</button>,
       <button onClick={() => this.send('ACCOUNT')}>account</button>,
       <button onClick={() => this.send('TEST')}>test</button>,

diff --git a/packages/demo/src/components/is-test/is-test.tsx b/packages/demo/src/components/is-test/is-test.tsx
@@ -1,6 +1,5 @@
 import { h, Component, Prop } from '@stencil/core';
-import { State } from 'xstate';
-import { Send } from 'stencil-xstate-router/dist/types';
+import { Send, RouterState } from 'stencil-xstate-router/dist/types';
 
 @Component({
   tag: 'is-test',
@@ -9,15 +8,15 @@ import { Send } from 'stencil-xstate-router/dist/types';
 export class IsTest {
   @Prop() send!: Send<any, any, any>;
 
-  @Prop() current!: State<any, any>;
+  @Prop() state!: RouterState<any, any>;
 
   @Prop() testId: string;
 
   render() {
     return [
       `test ${this.testId}`,
-      JSON.stringify(this.current.value),
-      JSON.stringify(this.current.context),
+      JSON.stringify(this.state.value),
+      JSON.stringify(this.state.context),
       <button onClick={() => this.send('HOME')}>home</button>,
       <button onClick={() => this.send('ACCOUNT')}>account</button>,
       <button onClick={() => this.send('TEST')}>overview</button>,

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
@@ -7,11 +7,11 @@ import {
   StateRenderer
 } from '../xstate-router/types';
 
-export type RouterNavigoProps<
+export interface RouterNavigoProps<
   TContext,
   TSchema extends StateSchema,
   TEvent extends EventObject
-> = {
+> {
   machine: StateMachine<TContext, TSchema, TEvent>;
   options?: RouterInterpreterOptions;
   stateRenderer?: StateRenderer<any, any, RouteEvent>;

diff --git a/packages/stencil-xstate-router/src/components/xstate-router/types.ts b/packages/stencil-xstate-router/src/components/xstate-router/types.ts
@@ -35,7 +35,7 @@ export type StateRenderer<
   TEvent extends EventObject
 > = (
   component: Element[] | Element,
-  current: RouterState<TContext, TEvent>,
+  state: RouterState<TContext, TEvent>,
   send: Send<TContext, TSchema, TEvent>,
   service: Interpreter<TContext, TSchema, TEvent>
 ) => Element[] | Element;
@@ -87,11 +87,11 @@ export type NavigationEvent = EventObject & {
   params?: Record<string, any>
 };
 
-export type RouterProps<
+export interface RouterProps<
   TContext,
   TSchema extends StateSchema,
   TEvent extends EventObject
-> = {
+> {
   machine: StateMachine<TContext, TSchema, TEvent>;
   options?: RouterInterpreterOptions;
   stateRenderer?: StateRenderer<any, any, RouteEvent>;
@@ -100,15 +100,15 @@ export type RouterProps<
   navigate?: NavigationHandler;
 };
 
-export type ComponentProps<
+export interface ComponentProps<
   TContext,
   TSchema extends StateSchema,
   TEvent extends EventObject
-> = {
+> {
   /**
    * Current state
    */
-  current: RouterState<TContext, TEvent>;
+  state: RouterState<TContext, TEvent>;
   /**
    * Sends events to the service
    */
@@ -117,7 +117,8 @@ export type ComponentProps<
    * Current service
    */
   service: Interpreter<TContext, TSchema, TEvent>;
-} & Record<string, any>;
+  [key: string]: any;
+};
 
 export interface RouteGuardPredicate<TContext, TEvent extends RouteEvent>
   extends GuardPredicate<TContext, TEvent> {

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
@@ -208,10 +208,10 @@ export class XstateRouter implements ComponentInterface {
     }
 
     const { service } = this;
-    const { state: current, send } = service;
+    const { state, send } = service;
     const { component, params, slot } = this.rendered;
     const props = {
-      current,
+      state,
       send,
       service,
       slot,
@@ -222,7 +222,7 @@ export class XstateRouter implements ComponentInterface {
       ? // if there's a stateRenderer render component and pass
         this.stateRenderer(
           this.componentRenderer(component, props),
-          current,
+          state,
           send,
           service
         )