#3235 f666f5823 Thanks @mattpocock! - @xstate/inspect will now target https://stately.ai/viz by default. You can target the old inspector by setting the config options like so:

inspect({
  url: `https://statecharts.io/inspect`
});

#3198 09e2130df Thanks @Andarist! - Fixed an issue that prevented some states from being sent correctly to the inspector when serializable values hold references to objects throwing on toJSON property access (like obj.toJSON). This property is accessed by the native algorithm before the value gets passed to the custom serializer. Because of a bug we couldn't correctly serialize such values even when a custom serializer was implemented that was meant to replace it in a custom way from within its parent's level.

#3199 f3d63147d Thanks @Andarist! - Fixed an issue that caused sending the same event multiple times to the inspector for restarted services.

#3076 34f3d9be7 Thanks @SimeonC! - Fixed an issue with "maximum call stack size exceeded" errors being thrown when registering a machine with a very deep object in its context despite using a serializer capable of replacing such an object.

#3144 e08030faf Thanks @lecepin! - Added UMD build for this package that is available in the dist directory in the published package.

#3144 e08030faf Thanks @lecepin! - Added proper peerDependency on XState. It was incorrectly omitted from the package.json of this package.

#2640 c73dfd655 Thanks @davidkpiano! - A serializer can now be specified as an option for inspect(...) in the .serialize property. It should be a replacer function:

// ...

inspect({
  // ...
  serialize: (key, value) => {
    if (value instanceof Map) {
      return 'map';
    }

    return value;
  }
});

// ...

// Will be inspected as:
// {
//   type: 'EVENT_WITH_MAP',
//   map: 'map'
// }
someService.send({
  type: 'EVENT_WITH_MAP',
  map: new Map()
});

#2894 8435c5b84 Thanks @Andarist! - The package has been upgraded to be compatible with [email protected]. The WS server created server-side has to be of a compatible version now.

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.