Skip to content
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

Merged
merged 10 commits into from
Dec 29, 2020

Conversation

davidkpiano
Copy link
Member

@davidkpiano davidkpiano commented Dec 23, 2020

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 server

Here's how it works:

Application code

import { inspect } from '@xstate/inspect';

inspect(/* options */);

// ...

interpret(someMachine, { devTools: true }).start();

Inspector code

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:

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.

Have fun, and happy holidays! 🎁

@changeset-bot
Copy link

changeset-bot bot commented Dec 23, 2020

🦋 Changeset detected

Latest commit: 63ba888

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages
Name Type
xstate Patch
@xstate/inspect Minor

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

packages/core/src/devTools.ts Outdated Show resolved Hide resolved
packages/xstate-inspect/src/utils.ts Outdated Show resolved Hide resolved
packages/xstate-inspect/src/utils.ts Show resolved Hide resolved
@@ -0,0 +1,49 @@
import * as WebSocket from 'ws';
import { createMachine, interpret, send } from 'xstate';
import { toSCXMLEvent } from 'xstate/src/utils';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
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? 🤔

Copy link
Member Author

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.

packages/xstate-inspect/examples/server.ts Outdated Show resolved Hide resolved
packages/xstate-inspect/rollup.config.js Show resolved Hide resolved
davidkpiano and others added 5 commits December 24, 2020 07:54
Co-authored-by: Mateusz Burzyński <mateuszburzynski@gmail.com>
Co-authored-by: Mateusz Burzyński <mateuszburzynski@gmail.com>
Copy link
Member

@Andarist Andarist left a 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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants