Skip to content

Commit

Permalink
feat: simplify and remove ROUTE event
Browse files Browse the repository at this point in the history 
BREAKING CHANGE: We've removed the legacy way of routing, get with it.
  • Loading branch information
@mikaelkaron
mikaelkaron committed Jul 4, 2019
1 parent 5f3186a commit 6a06daf
Show file tree
Hide file tree
Showing 11 changed files with 144 additions and 275 deletions.
25 changes: 11 additions & 14 deletions packages/demo/package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

5 changes: 3 additions & 2 deletions packages/demo/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,12 @@
"test.watch": "stencil test --spec --e2e --watchAll"
},
"dependencies": {
"navigo": "^7.1.2",
"stencil-xstate-router": "file:../stencil-xstate-router",
"xstate": "^4.6.3"
"xstate": "^4.6.4"
},
"devDependencies": {
"@stencil/core": "1.1.3"
"@stencil/core": "1.1.4"
},
"license": "MIT"
}
6 changes: 3 additions & 3 deletions packages/demo/src/components/is-anonymous/is-anonymous.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,8 @@ export class IsAnonymous implements ComponentInterface {

render() {
return [
<button onClick={() => this.send('LOGIN')}>login</button>,
<button onClick={() => this.send('ROUTE', {"path":"/tests","url":"/tests","isExact":true,"params":{}})}>route</button>,
];
<button onClick={() => this.send('LOGIN')}>login</button>,
<button onClick={() => this.send('TEST')}>route</button>
];
}
}
65 changes: 21 additions & 44 deletions packages/demo/src/components/xstate-router-test/xstate-router-test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,13 +47,6 @@ export class XStateRouterTest {
})
}
},
on: {
DETAILS: {
target: '.details',
internal: false,
cond: (_ctx, event) => event.params && event.params.testId
}
},
meta: {
component: 'is-test'
}
Expand All @@ -67,12 +60,7 @@ export class XStateRouterTest {
'': {
target: 'anonymous',
cond: 'isAnon'
},
HOME: {
target: '.home'
},
ACCOUNT: '.account',
TEST: '.test'
}
},
meta: {
component: 'is-authenticated'
Expand All @@ -89,36 +77,14 @@ export class XStateRouterTest {
target: 'anonymous'
},
WOOT: 'authenticated.woot',
ROUTE: [
{
target: 'authenticated.home',
cond: {
type: 'route',
path: '/'
}
},
{
target: 'authenticated.account',
cond: {
type: 'route',
path: '/account'
}
},
{
target: 'authenticated.test',
cond: {
type: 'route',
path: '/tests'
}
},
{
target: 'authenticated.test.details',
cond: {
type: 'route',
path: '/tests/:testId'
}
}
]
HOME: 'authenticated.home',
ACCOUNT: 'authenticated.account',
TEST: 'authenticated.test',
DETAILS: {
target: 'authenticated.test.details',
internal: false,
cond: (_ctx, event) => event.params && event.params.testId
}
}
},
{
Expand All @@ -130,6 +96,17 @@ export class XStateRouterTest {
);

render() {
return <xstate-router-navigo machine={this.machine} routes={{ROUTE: '', WOOT: '/woot'}} />;
return (
<xstate-router-navigo
machine={this.machine}
routes={{
WOOT: '/woot',
HOME: '/',
ACCOUNT: '/account',
TEST: '/tests',
DETAILS: '/tests/:testId'
}}
/>
);
}
}
25 changes: 8 additions & 17 deletions packages/stencil-xstate-router/package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 3 additions & 3 deletions packages/stencil-xstate-router/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,15 +20,15 @@
"test.watch": "stencil test --spec --e2e --watchAll"
},
"devDependencies": {
"@stencil/core": "^1.1.3",
"@stencil/core": "^1.1.4",
"@types/navigo": "^7.0.1",
"navigo": "^7.1.2",
"xstate": "^4.6.3"
"xstate": "^4.6.4"
},
"license": "MIT",
"peerDependencies": {
"navigo": "^7.1.2",
"xstate": "^4.6.3"
"xstate": "^4.6.4"
},
"dependencies": {
"route-recognizer": "^0.3.4"
Expand Down
4 changes: 2 additions & 2 deletions packages/stencil-xstate-router/src/components.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ export namespace Components {
/**
* State renderer
*/
'stateRenderer'?: StateRenderer<any, any, RouteEvent>;
'stateRenderer'?: StateRenderer<any, any, EventObject>;
}
interface XstateRouterNavigo {
/**
Expand Down Expand Up @@ -147,7 +147,7 @@ declare namespace LocalJSX {
/**
* State renderer
*/
'stateRenderer'?: StateRenderer<any, any, RouteEvent>;
'stateRenderer'?: StateRenderer<any, any, EventObject>;
}
interface XstateRouterNavigo extends JSXBase.HTMLAttributes<HTMLXstateRouterNavigoElement> {
/**
Expand Down
18 changes: 9 additions & 9 deletions packages/stencil-xstate-router/src/components/xstate-router/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,15 @@

## Properties

| Property | Attribute | Description | Type | Default |
| ---------------------- | --------- | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------- |
| `componentRenderer` | -- | Component renderer | `(component: string, props?: ComponentProps<any, any, EventObject>) => Element \| Element[]` | `renderComponent` |
| `machine` _(required)_ | -- | An XState machine | `StateMachine<any, any, EventObject>` | `undefined` |
| `navigate` | -- | Callback for url changes | `(path: string, params?: Record<string, any>) => void` | `() => {}` |
| `options` | -- | Interpreter options | `RouterInterpreterOptions` | `undefined` |
| `route` | -- | Callback for route subscriptions | `(routes: Route[]) => VoidFunction` | `() => () => {}` |
| `routes` | -- | Routes to register | `{ [x: string]: string; }` | `{ ROUTE: '' }` |
| `stateRenderer` | -- | State renderer | `(component: Element \| Element[], current: State<any, RouteEvent>, send: (event: SingleOrArray<OmniEvent<RouteEvent>>, payload?: Record<string, any> & { type?: undefined; }) => State<any, RouteEvent>, service: Interpreter<any, any, RouteEvent>) => Element \| Element[]` | `undefined` |
| Property | Attribute | Description | Type | Default |
| ---------------------- | --------- | -------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- |
| `componentRenderer` | -- | Component renderer | `(component: string, props?: ComponentProps<any, any, EventObject>) => Element \| Element[]` | `renderComponent` |
| `machine` _(required)_ | -- | An XState machine | `StateMachine<any, any, EventObject>` | `undefined` |
| `navigate` | -- | Callback for url changes | `(path: string, params?: Record<string, any>) => void` | `() => {}` |
| `options` | -- | Interpreter options | `RouterInterpreterOptions` | `undefined` |
| `route` | -- | Callback for route subscriptions | `(routes: Route[]) => VoidFunction` | `() => () => {}` |
| `routes` | -- | Routes to register | `{ [x: string]: string; }` | `{}` |
| `stateRenderer` | -- | State renderer | `(component: Element \| Element[], state: State<any, EventObject>, send: (event: SingleOrArray<OmniEvent<EventObject>>, payload?: Record<string, any> & { type?: undefined; }) => State<any, EventObject>, service: Interpreter<any, any, EventObject>) => Element \| Element[]` | `undefined` |


## Dependencies
Expand Down
61 changes: 8 additions & 53 deletions packages/stencil-xstate-router/src/components/xstate-router/types.ts
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,10 @@
import {
ActionObject,
EventObject,
GuardPredicate,
Interpreter,
InterpreterOptions,
OmniEventObject,
State as RouterState,
StateMachine,
StateMeta,
StateSchema,
TransitionConfig
} from 'xstate';

export { RouterState };
Expand Down Expand Up @@ -49,7 +44,8 @@ export type ComponentRenderer<
props?: ComponentProps<TContext, TSchema, TEvent>
) => Element[] | Element;

export type RenderEvent = EventObject & {
export type RenderEvent = {
type: 'RENDER',
/**
* Component to render
*/
Expand All @@ -64,27 +60,19 @@ export type RenderEvent = EventObject & {
params?: Record<string, any>;
};

export type RouteEvent = EventObject & {
export interface RouteEvent extends EventObject {
/**
* Path routed to
*/
path?: string;
path: string;
/**
* Route parameters
*/
params?: Record<string, string>;
params?: Record<string, any>;
};

export type NavigationEvent = EventObject & {
/**
* Path routed to
*/
path?: string;

/**
* Route params
*/
params?: Record<string, any>
export type NavigationEvent = RouteEvent & {
type: 'NAVIGATE'
};

export interface RouterProps<
Expand Down Expand Up @@ -117,44 +105,11 @@ export interface ComponentProps<
* Current service
*/
service: Interpreter<TContext, TSchema, TEvent>;
[key: string]: any;
};

export interface RouteGuardPredicate<TContext, TEvent extends RouteEvent>
extends GuardPredicate<TContext, TEvent> {
predicate: RouteConditionPredicate<TContext, OmniEventObject<TEvent>>;
path: string;
}

export type RouteGuard<TContext, TEvent extends RouteEvent> =
| RouteGuardPredicate<TContext, TEvent>
| (Record<string, any> & {
type: string;
path: string;
});

export interface RouteGuardMeta<TContext, TEvent extends RouteEvent>
extends StateMeta<TContext, TEvent> {
cond: RouteGuard<TContext, TEvent>;
}

export type RouteConditionPredicate<TContext, TEvent extends RouteEvent> = (
context: TContext,
event: TEvent,
meta: RouteGuardMeta<TContext, TEvent>
) => boolean;

export interface RouteTransitionDefinition<TContext, TEvent extends RouteEvent>
extends TransitionConfig<TContext, TEvent> {
target: string[] | undefined;
actions: Array<ActionObject<TContext, TEvent>>;
cond?: RouteGuard<TContext, TEvent>;
event: string;
}

/**
* Router interpreter options
*/
export interface RouterInterpreterOptions extends Partial<InterpreterOptions> {
export interface RouterInterpreterOptions extends InterpreterOptions {
merge?: boolean;
}
Loading

0 comments on commit 6a06daf

Please sign in to comment.