Integrate @xstate/inspect-Tooling

[bemayr]

Idea

It should be possible to visualize Machines using @xstate/inspect.

Research

• of course David thought of Visualizer Integration: https://xstate.js.org/docs/packages/xstate-inspect/#implementing
  • more implementation details for the protocol can be found at: https://github.com/statelyai/xstate/blob/main/packages/xstate-inspect/src/browser.ts
• there is also experimental support for the Visualizer from node.js (same as we need), due to https://github.com/statelyai/xstate/pull/1770
  • as documented by @thomasaull, https://statecharts.io/inspect supports connecting to a websocket connection directly via https://statecharts.io/inspect?server=localhost:8888
• a Visual Studio Integration can be achieved by utilizing Microsoft Edge WebView2 as done by @madskristensen in his Markdown Editor Plugin

[bemayr]

Debugging the Inspector Connection

After struggling with the format of the JSON Data that needs to be sent to the inspector I did some inspection via patching iframe.postMessage and window.onmessage and received the following JSON results:

Inspector Outputs ➡️

xstate.register

{
  "type":"xstate.inspecting"
}

xstate.event

{
  "type":"xstate.event",
  "event":"{\"name\":\"TOGGLE\",\"data\":{\"type\":\"TOGGLE\"},\"$$type\":\"scxml\",\"type\":\"external\",\"origin\":\"x:7\"}"
}

Inspector Inputs ⬅️

service.register

{
  "type": "service.register",
  "machine": "{\"id\":\"machine\",\"key\":\"machine\",\"context\":{\"count\":0},\"type\":\"compound\",\"initial\":\"inactive\",\"history\":false,\"states\":{\"inactive\":{\"id\":\"machine.inactive\",\"key\":\"inactive\",\"type\":\"atomic\",\"history\":false,\"states\":{},\"on\":{\"TOGGLE\":[{\"target\":[\"#machine.active\"],\"event\":\"TOGGLE\",\"actions\":[],\"source\":\"#machine.inactive\",\"internal\":false,\"eventType\":\"TOGGLE\"}]},\"transitions\":[{\"target\":[\"#machine.active\"],\"event\":\"TOGGLE\",\"actions\":[],\"source\":\"#machine.inactive\",\"internal\":false,\"eventType\":\"TOGGLE\"}],\"entry\":[],\"exit\":[],\"activities\":[],\"order\":1,\"invoke\":[]},\"active\":{\"id\":\"machine.active\",\"key\":\"active\",\"type\":\"atomic\",\"history\":false,\"states\":{},\"on\":{\"TOGGLE\":[{\"target\":[\"#machine.inactive\"],\"event\":\"TOGGLE\",\"actions\":[],\"source\":\"#machine.active\",\"internal\":false,\"eventType\":\"TOGGLE\"}]},\"transitions\":[{\"target\":[\"#machine.inactive\"],\"event\":\"TOGGLE\",\"actions\":[],\"source\":\"#machine.active\",\"internal\":false,\"eventType\":\"TOGGLE\"}],\"entry\":[],\"exit\":[],\"activities\":[],\"order\":2,\"invoke\":[]}},\"on\":{},\"transitions\":[],\"entry\":[],\"exit\":[],\"activities\":[],\"order\":-1,\"invoke\":[]}",
  "state": "{\"actions\":[],\"activities\":{},\"meta\":{},\"events\":[],\"value\":\"inactive\",\"context\":{\"count\":0},\"_event\":{\"name\":\"TOGGLE\",\"data\":{\"type\":\"TOGGLE\"},\"$$type\":\"scxml\",\"type\":\"external\"},\"_sessionid\":\"x:7\",\"event\":{\"type\":\"TOGGLE\"},\"historyValue\":{\"current\":\"inactive\",\"states\":{}},\"history\":{\"actions\":[],\"activities\":{},\"meta\":{},\"events\":[],\"value\":\"active\",\"context\":{\"count\":0},\"_event\":{\"name\":\"TOGGLE\",\"data\":{\"type\":\"TOGGLE\"},\"$$type\":\"scxml\",\"type\":\"external\"},\"_sessionid\":\"x:7\",\"event\":{\"type\":\"TOGGLE\"},\"historyValue\":{\"current\":\"active\",\"states\":{}},\"children\":{},\"done\":false,\"changed\":true},\"children\":{},\"done\":false,\"changed\":true}",
  "sessionId": "x:7"
}

service.event

{
  "type": "service.event",
  "event": "{\"name\":\"TOGGLE\",\"data\":{\"type\":\"TOGGLE\"},\"$$type\":\"scxml\",\"type\":\"external\",\"origin\":\"x:9\"}",
  "sessionId": "x:7"
}

service.state

{
  "type": "service.state",
  "state": "{\"actions\":[],\"activities\":{},\"meta\":{},\"events\":[],\"value\":\"inactive\",\"context\":{\"count\":0},\"_event\":{\"name\":\"TOGGLE\",\"data\":{\"type\":\"TOGGLE\"},\"$$type\":\"scxml\",\"type\":\"external\",\"origin\":\"x:9\"},\"_sessionid\":\"x:9\",\"event\":{\"type\":\"TOGGLE\"},\"historyValue\":{\"current\":\"inactive\",\"states\":{}},\"history\":{\"actions\":[],\"activities\":{},\"meta\":{},\"events\":[],\"value\":\"active\",\"context\":{\"count\":0},\"_event\":{\"name\":\"TOGGLE\",\"data\":{\"type\":\"TOGGLE\"},\"$$type\":\"scxml\",\"type\":\"external\",\"origin\":\"x:9\"},\"_sessionid\":\"x:9\",\"event\":{\"type\":\"TOGGLE\"},\"historyValue\":{\"current\":\"active\",\"states\":{}},\"children\":{},\"done\":false,\"changed\":true},\"children\":{},\"done\":false,\"changed\":true}",
  "sessionId": "x:7"
}