react-native-debugger
react-native-debugger copied to clipboard
[Experiment] Add xstate-devtools
This PR is integration for xstate-devtools
browser extension (https://github.com/statecharts/xstate-viz/issues/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.
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)
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!
@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.
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.
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 is there a way you could open up the Inspector front end code?
Yep, I'm currently working on this!