expo-xstate-inspect

Inspect your V5 xstate machines using expo dev tooling (Note, this only works with XState V5 machines)

See the Demo App for reference implementation

Add the package to your dependencies

1$ npm install expo-xstate-inspect

Usage

There are two ways to use this plugin. You can either construct your own inspector using our hook, or you can use our Context Provider which will make the inspector available to your entire app. Only a single instance can be alive at a given time, so pick the use case that works best for you.

Create Inspector Manually

1import { useXStateInspectorDevTool } from 'expo-xstate-inspect';
2
3const Component = () => {
4  const inspector = useXStateInspectorDevTool();
5  const [state, send] = useMachine(machine, {
6    inspect: inspector?.inspect,
7  });
8}
9

Use Provided Inspector from Context

First, create a Provider that will internally create the inspector.

1import { XStateInspectorDevToolProvider } from 'expo-xstate-inspect';
2
3const App = () => (
4    <XStateInspectorDevToolProvider>
5      {/* rest of app */}
6    </XStateInspectorDevToolProvider>
7);

Then in a component where you have a machine, grab the inspector using this hook.

1import { useProvidedXstateInspectorDevTool } from 'expo-xstate-inspect';
2
3 const inspector = useProvidedXstateInspectorDevTool();
4  const [state, send] = useMachine(audioMachine, {
5    inspect: inspector?.inspect,
6  });

This uses the already created inspector in the Context. It is null for production builds.

Troubleshooting

Compilation issue - Cannot find EventTarget

The error looks like this...

ERROR  
  PartySocket requires a global 'EventTarget' class to be available!
  You can polyfill this global by adding this to your code before any partysocket imports: 
  
  import 'partysocket/event-target-polyfill';

Instead of using this polyfill, we can install 'event-target-shim' and then polyfill it.

import { EventTarget, Event } from 'event-target-shim';
global.EventTarget = EventTarget;
global.Event = Event;