-
-
Notifications
You must be signed in to change notification settings - Fork 1.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[@xstate/inspect] Add receivers for window and websockets #1770
Conversation
🦋 Changeset detectedLatest commit: 63ba888 The changes in this PR will be included in the next version bump. This PR includes changesets to release 4 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
@@ -0,0 +1,49 @@ | |||
import * as WebSocket from 'ws'; | |||
import { createMachine, interpret, send } from 'xstate'; | |||
import { toSCXMLEvent } from 'xstate/src/utils'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
import { toSCXMLEvent } from 'xstate/src/utils'; | |
import { toSCXMLEvent } from 'xstate/lib/utils'; |
although - we don't actually usually surface this to people - why a manual conversion is needed here? 🤔
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
That's just for this example. Currently, events from spawned callback actors are not converted to SCXML events. This probably needs to be fixed in v5.
Co-authored-by: Mateusz Burzyński <mateuszburzynski@gmail.com>
Co-authored-by: Mateusz Burzyński <mateuszburzynski@gmail.com>
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It's missing a changeset and some basic docs for receivers but other than that - LGTM
This PR is a substantial refactoring of
@xstate/inspect
to make it 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 serverHere's how it works:
Application code
Inspector code
The events you will receive are
ParsedReceiverEvent
types:Given these events, you can visualize the service machines and their states and events however you'd like.
Have fun, and happy holidays! 🎁