Version Packages

[github-actions]

This PR was opened by the Changesets release GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to master, this PR will be updated.

Releases

@xstate/inspect@0.4.0

Minor Changes

• 63ba888e #1770 Thanks @davidkpiano! - 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

  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.

xstate@4.15.3

Patch Changes

• 63ba888e #1770 Thanks @davidkpiano! - 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.