[Experiment] Add xstate-devtools

[jhen0409]

This PR is integration for xstate-devtools browser extension (statecharts/xstate-viz#30). Implemented in a simple way like #298.

The XState core is used __REDUX_DEVTOOLS_EXTENSION__.connect, so it have simple logging feature with redux-devtools. The xstate-devtools wrapped the method and provided machine argument.

For RNDebugger, I added useXStateViz devTools option, allows users to choose simple logging on redux-devtools or the visualizer of xstate-devtools.

import { useMachine } from '@xstate/react'

const [current, send] = useMachine(machine, {
  devTools: { useXStateViz: true },
})

I think the final goal will be integrate xstate-viz into redux-devtools-core, it can be made more features that redux-devtools-extension has.

[Nohac]

Any updates on this? Is there any thing I can help out with to get this PR merged?

---

Edit: I tested this out by checking out this branch as well as rebasing master. It kind of works, but I'm not getting a graph, it only shows the current state. I suspect it's somewhat broken because the xstate devtool extension is a bit out of date. This is what it looks like for me:

The version of xstate I use in my app is 4.9.1 while the devtools extension uses 4.6.7.

I'm also getting this error message in the console:

[178031:0430/121540.671083:ERROR:CONSOLE(1)] "TypeError: Cannot read property 'type' of null", source: chrome-extension://xstate-devtools/devtools/build/static/js/main.492902d9.chunk.js (1)

[jhen0409]

It's now on the official repo, it may have changed a lot.

I still using the old version for a while. I'm welcome to any help to upgrade that!

[Nohac]

@jhen0409 Hey, sorry for the late reply.
I worked on this for quite some time a while ago, but couldn't figure it out. It looks like the way devtools and redux connects have changed a lot from xstate-devtools to the new, and it doesn't help that I don't really know what I'm doing.

It would be great if @davidkpiano and @amitnovick could give us some pointers.

I do see this tool as a "must have" when working with xstate and react native, so it would be awesome if we could get this implemented soon.

[davidkpiano]

I am reworking the dev tools (first working on an embeddable visualizer) so it might be a few more weeks until dev tools are released.

However, there is the (undocumented) @xstate/viz package that contains React components for rendering machine visualizations:

import { MachineViz } from '@xstate/viz';

// ...
<MachineViz machine={someMachine} state={someState} />

Here is an example of that working: https://codesandbox.io/s/xstate-minute-timer-with-viz-g1cje

Let me know if that helps for now.

[cpetzel]

It seems a lot has changed since this work was initiated. We have a new Inspector tool for web via the @xstate/inspect package, which is so much more powerful than the original visualizer.

I would love to attempt to get this new inspector working with React Native, and integrated into RNDebugger, but I can't seem to find the inspector front end code...

@davidkpiano is there a way you could open up the Inspector front end code?

Thanks again for this amazing tool!

[davidkpiano]

@davidkpiano is there a way you could open up the Inspector front end code?

Yep, I'm currently working on this!