XState DevTools integration: passing the machine config for visualization

[amitnovick]

Temporary fix for #709 that has the quality of:

• adding zero new lines of code
• makes the extension browser adoptable by all XState users without having to use the latest version.

[abhi18av]

Hey guys, I see that it's been merged so is the read ahead clear for the xstate-devtools ?

[amitnovick]

Hey guys, I see that it's been merged so is the read ahead clear for the xstate-devtools ?

Yep, it's time to give it a good try! 😉

The following are available:

• state machine visualization updating in real-time
• context inspection
• event log

The only thing a little missing is removing services that have been stopped from the list selection, which will need adding some lines to XState:

// interpreter.ts
stop() {
  // ...
  if (this.devTools) {
    this.devTools.unsubscribe();
  }
  // ...
}

It would pretty easy to add this as PR but I think @davidkpiano wants to keep things lean for now.

Unfortunately for Redux DevTools users, the extension doesn't expose a method for removing an item from the store list. I used the unsubscribe method here (which doesn't actually do anything) since it's available on the exposed interface. Alternatively, it could also be implemented with the send method:

this.devTools.send({ type: '@@STOP' }, {});

but I like this approach less because it requires special treatment of a "keyword" event type @@STOP.

[abhi18av]

Cool, thanks :)

[davidkpiano]

@amitnovick You can also do this manually:

someService.onStop(() => {
  yourDevTools.unsubscribe();
});

[amitnovick]

Well yea, it's true that this is technically possible to implement from outside XState, and it might be useful as an end-goal to have any "external tools" hook themselves up in some standardized API e.g. Redux Middleware interface

But currently, users just need to enable the devTools key and expect that it should take care of itself. It's a bit too low-level for end-users to be digging into the service.devTools interface like this:

  service.onStop(() => {
    service.devTools.unsubscribe();
  });

For instance, users of @xstate/react would have to wrap that up in a React.useEffect(() => { ... }, []) first, and that's 5 loc of boilerplate they would have to add to each and every component that starts a service.

I liked this suggestion though, and it made me come up with this approach: #709 (comment)