-
-
Notifications
You must be signed in to change notification settings - Fork 1.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
e28babe
commit 63ba888
Showing
3 changed files
with
151 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
--- | ||
'xstate': patch | ||
--- | ||
|
||
Instead of referencing `window` directly, XState now internally calls a `getGlobal()` function that will resolve to the proper `globalThis` value in all environments. This affects the dev tools code only. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,62 @@ | ||
--- | ||
'@xstate/inspect': minor | ||
--- | ||
|
||
It is now easier for developers to create their own XState inspectors, and even inspect services offline. | ||
|
||
A **receiver** is an actor that receives inspector events from a source, such as `"service.register"`, `"service.state"`, `"service.event"`, etc. This update includes two receivers: | ||
|
||
- `createWindowReceiver` - listens to inspector events from a parent window (for both popup and iframe scenarios) | ||
- 🚧 `createWebSocketReceiver` (experimental) - listens to inspector events from a WebSocket server | ||
|
||
Here's how it works: | ||
|
||
**Application (browser) code** | ||
|
||
```js | ||
import { inspect } from '@xstate/inspect'; | ||
|
||
inspect(/* options */); | ||
|
||
// ... | ||
|
||
interpret(someMachine, { devTools: true }).start(); | ||
``` | ||
|
||
**Inspector code** | ||
|
||
```js | ||
import { createWindowReceiver } from '@xstate/inspect'; | ||
|
||
const windowReceiver = createWindowReceiver(/* options? */); | ||
|
||
windowReceiver.subscribe((event) => { | ||
// here, you will receive events like: | ||
// { type: "service.register", machine: ..., state: ..., sessionId: ... } | ||
console.log(event); | ||
}); | ||
``` | ||
|
||
The events you will receive are `ParsedReceiverEvent` types: | ||
|
||
```ts | ||
export type ParsedReceiverEvent = | ||
| { | ||
type: 'service.register'; | ||
machine: StateMachine<any, any, any>; | ||
state: State<any, any>; | ||
id: string; | ||
sessionId: string; | ||
parent?: string; | ||
source?: string; | ||
} | ||
| { type: 'service.stop'; sessionId: string } | ||
| { | ||
type: 'service.state'; | ||
state: State<any, any>; | ||
sessionId: string; | ||
} | ||
| { type: 'service.event'; event: SCXML.Event<any>; sessionId: string }; | ||
``` | ||
|
||
Given these events, you can visualize the service machines and their states and events however you'd like. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters