From e34dc025be30d57b5ece6c5bb103a37fe17bce3c Mon Sep 17 00:00:00 2001 From: Mikael Karon Date: Mon, 1 Jul 2019 23:54:12 +0200 Subject: [PATCH] fix: align prop names BREAKING CHANGE: current -> state --- packages/demo/package-lock.json | 6 ++++-- packages/demo/package.json | 4 +++- packages/demo/src/components.d.ts | 16 +++++++--------- .../src/components/is-anonymous/is-anonymous.tsx | 9 ++++----- .../is-authenticated/is-authenticated.tsx | 11 +++++------ packages/demo/src/components/is-test/is-test.tsx | 9 ++++----- .../components/xstate-router-navigo/index.tsx | 4 ++-- .../src/components/xstate-router/types.ts | 15 ++++++++------- .../components/xstate-router/xstate-router.ts | 6 +++--- 9 files changed, 40 insertions(+), 40 deletions(-) diff --git a/packages/demo/package-lock.json b/packages/demo/package-lock.json index 83cc850..f63772b 100644 --- a/packages/demo/package-lock.json +++ b/packages/demo/package-lock.json @@ -1,6 +1,6 @@ { "name": "stencil-xstate-demo", - "version": "3.0.0", + "version": "3.0.1", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -8,6 +8,7 @@ "version": "1.1.3", "resolved": "https://registry.npmjs.org/@stencil/core/-/core-1.1.3.tgz", "integrity": "sha512-Pb8PfSvM/aK9h4G6ApYRcx315S+8+I27H5Qk/NSKx0M9/yAD1ureYhE7sMcupu/3mKMQmA7SLOa21aBTKISP4Q==", + "dev": true, "requires": { "typescript": "3.5.2" } @@ -26,7 +27,8 @@ "typescript": { "version": "3.5.2", "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.5.2.tgz", - "integrity": "sha512-7KxJovlYhTX5RaRbUdkAXN1KUZ8PwWlTzQdHV6xNqvuFOs7+WBo10TQUqT19Q/Jz2hk5v9TQDIhyLhhJY4p5AA==" + "integrity": "sha512-7KxJovlYhTX5RaRbUdkAXN1KUZ8PwWlTzQdHV6xNqvuFOs7+WBo10TQUqT19Q/Jz2hk5v9TQDIhyLhhJY4p5AA==", + "dev": true }, "xstate": { "version": "4.6.3", diff --git a/packages/demo/package.json b/packages/demo/package.json index 254c347..66c8ce9 100644 --- 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 index 1db7025..aa81753 100644 --- 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; 'send': Send; + 'state': RouterState; } interface IsAuthenticated { - 'current': State; 'send': Send; + 'state': RouterState; } interface IsTest { - 'current': State; 'send': Send; + 'state': RouterState; 'testId': string; } interface XstateRouterTest {} @@ -66,16 +64,16 @@ declare global { declare namespace LocalJSX { interface IsAnonymous extends JSXBase.HTMLAttributes { - 'current': State; 'send': Send; + 'state': RouterState; } interface IsAuthenticated extends JSXBase.HTMLAttributes { - 'current': State; 'send': Send; + 'state': RouterState; } interface IsTest extends JSXBase.HTMLAttributes { - 'current': State; 'send': Send; + 'state': RouterState; 'testId'?: string; } interface XstateRouterTest extends JSXBase.HTMLAttributes {} diff --git a/packages/demo/src/components/is-anonymous/is-anonymous.tsx b/packages/demo/src/components/is-anonymous/is-anonymous.tsx index 1d90c5d..b964652 100644 --- 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; - @Prop() current!: State; + @Prop() state!: RouterState; render() { return [ diff --git a/packages/demo/src/components/is-authenticated/is-authenticated.tsx b/packages/demo/src/components/is-authenticated/is-authenticated.tsx index 430f2d1..dffc1eb 100644 --- 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; - @Prop() current!: State; + @Prop() state!: RouterState; 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), , , , diff --git a/packages/demo/src/components/is-test/is-test.tsx b/packages/demo/src/components/is-test/is-test.tsx index 1873fd3..1b762bc 100644 --- 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; - @Prop() current!: State; + @Prop() state!: RouterState; @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), , , , 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 index 8866883..214fdf7 100644 --- 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; options?: RouterInterpreterOptions; stateRenderer?: StateRenderer; diff --git a/packages/stencil-xstate-router/src/components/xstate-router/types.ts b/packages/stencil-xstate-router/src/components/xstate-router/types.ts index b3ee44b..80f54b1 100644 --- 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, + state: RouterState, send: Send, service: Interpreter ) => Element[] | Element; @@ -87,11 +87,11 @@ export type NavigationEvent = EventObject & { params?: Record }; -export type RouterProps< +export interface RouterProps< TContext, TSchema extends StateSchema, TEvent extends EventObject -> = { +> { machine: StateMachine; options?: RouterInterpreterOptions; stateRenderer?: StateRenderer; @@ -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; + state: RouterState; /** * Sends events to the service */ @@ -117,7 +117,8 @@ export type ComponentProps< * Current service */ service: Interpreter; -} & Record; + [key: string]: any; +}; export interface RouteGuardPredicate extends GuardPredicate { 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 index e1c5767..40c4825 100644 --- 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 )