1. Introduction

One of the benefits of state machines is that they can visualize state, reducing the cost of understanding and communicating with each other.

At present, the visualization tools provided by XState have done a good job, but they are too heavy to use and slow to visit China. Here, I optimized the original basis and added some new functions to develop the Viz-Lite version.

2. Viz-Lite

Viz-lite visual tool address

The main functions are as follows:

  • Write or paste the XState state machine code directly in the area on the right and visualize it on the right.
  • State machine execution can be performed by clicking on the left visual area.
  • You can view event history in the event panel on the right, and manually customize event sending.
  • Can be achieved by@xstate/inspectEstablish a real-time connection with the state machine in the page and visually view the details of the current page state machine.
  • You can export the visualized state graph.
  • Can cut light/dark colors.

And so on.

3. Inspect low-level implementation

Viz-lite can establish a data connection with the state graph in the page in real time, relying on @xstate/inspect, and establishing a strict dependency relationship between the page, inspect and Viz-Lite.

I’ve sketched out the relationship between the three, as shown in the sequence diagram below:

sequenceDiagram participant Viz participant Inspect participant Interpreter Note over Viz,Inspect: Inspect and Viz tool Inspect->>Inspect: global injection __xstate__ Inspect->>Viz: Open the Viz Viz - > > Viz: Inspect createWindowReceiver Viz () - > > Inspect: send (' xstate. Inspecting) Note over Interpreter, Inspect: Open the state machine service and register with Inspect Interpreter->>Interpreter: __REDUX_DEVTOOLS_EXTENSION__ Alt has __xState__ Interpreter->>Inspect: registerService(this) Inspect->>Inspect:send('service.registe') Viz->>Inspect:send('service.registe') Inspect->>Viz:send('service.registe', {sessionId}) Note over Viz,Interpreter: end

Similar to the HTTP three-way handshake.

Establishing a connection in Viz-Lite relies primarily on the createWindowReceiver method of @xstate/inspect.

Viz-lite sends an event to the page state machine. You can use the send method in the createWindowReceiver return value. The type in the message body must be xstate.event.

Changes to the state machine on a page can be subscribed by the SUBSCRIBE method in the return value of createWindowReceiver, including service.state and service.event. Listen on service.stop to confirm the disconnection.

4. Access debugging methods

Install @ xstate/inspect:

npm i -S @xstate/inspect
Copy the code

As you can also see from the sequence diagram above, inspect must execute before interpret() or it will not connect:

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

inspect({
  url: 'https://apis.leping.fun/viz? inspect'.iframe: false
});
Copy the code
  • urlTo specify the address of Viz-Litehttps://apis.leping.fun/viz?inspect.
  • iframeSpecifies where to mount Viz-Lite. You can specify a DOM directly or set it tofalse, the browser will open a new page.

Note: In debug mode, you must add? To the viz-Lite address. Inspect. If you want to turn off the right panel by default you can add? Inspect&panel = false.

Then specify the devTools flag bit when creating the state machine service:

import { interpret } from 'xstate';

const service = interpret(someMachine, { devTools: true });
Copy the code

You can visit this address to see the effect:

Github code address

5. Shortcut keys

  • + / -orCMD + scroll up/down: zoom.
  • CMD + EnterVisualize the current code.
  • Write left please: Pan view. At the same time hold down theShift, increase translation take poison.
  • Shift + 1: fit to the window size.

6. Cooperate with Redux DevTools

As you can see from the sequence diagram, when devTools: true is enabled, __REDUX_DEVTOOLS_EXTENSION__ is checked. If so, you can also view the event information in Redux devTools, as shown below:

⭐ original address