search

statecharts / xstate-viz

MIT License
315 stars 63 forks source link

Browser DevTools? #30

Open malcolm-kee opened 5 years ago

malcolm-kee commented 5 years ago

First of all, thanks for creating this site, it makes xstate so much enjoyable to use 😄

I was thinking of browser devtools (something like redux devtools) version of this, and planning to dive in to figure out how to do that.

Are you aware of any such effort or is it already implemented by someone?

davidkpiano commented 5 years ago

I'd like to start this effort soon!

amitnovick commented 5 years ago

Really happy to see that more people are interested in this! let's make it happen.

coodoo commented 5 years ago

Out of curiosity, how does this gonna work in the end as you would provision?

amitnovick commented 5 years ago

Out of curiosity, how does this gonna work in the end as you would provision?

Not OP, but I'm also interested in developing this, and personally my first target is UI development.

I'm thinking to re-use this devTools machine config option for instrumenting any browser extension available that we deem to be compatible (we can just hard-code the compatible ones, just like Redux DevTools is currently hard-coded).

In terms of the implementation, the XState interpreter currently checks for existence of window.__REDUX_DEVTOOLS_EXTENSION__ value and if that value exists, it connect's to the Redux DevTools interface defined on it.

I'll have to dive in a bit more sometime in order to get a more comprehensive look though.

coodoo commented 5 years ago

Thanks @amitnovick for the elaboration.

So you imagine while the program is running, you get to see the inner states of the statechart in the devtools, which probably also come with a nice visualization by the side?

amitnovick commented 5 years ago

Thanks @amitnovick for the elaboration.

So you imagine while the program is running, you get to see the inner states of the statechart in the devtools, which probably also come with a nice visualization by the side?

Yep, that functionality comes out of the box with XState-Viz.

amitnovick commented 5 years ago

This is coming very soon!

Here's 🎞️ sneak peek video showcasing the capabilities of the current proof of concept that I had "fun" developing during the past week (developing Chrome extensions is horrible, but this time worth it?)

amitnovick commented 5 years ago

I'm adding a list selection UI for letting users choose which service to visualize among all currently running ones (rather than just assuming there's just one running service like it does now).

In my mind that's a necessary feature that all of us who have used the Redux DevTools extension come to expect.

Edit:

Actually after re-thinking this, I think this feature can wait. My first priority is making sure that the app actually works as intended. Having a single running service displayed is fine in many common cases.

amitnovick commented 5 years ago

STATUS: Now available!. note: will only work with the latest XState version: npm install xstate@next

Roadmap

1) [X] Upload my (only slightly modified) fork of XState to a repo and publish it on npm for early adopters to try out and report bugs. 2) [X] Upload my XState DevTools extension to a new repo and making the extension available to Chrome users. 3) [X] Merge the fork into the main XState repo (if it's good quality 👌) 4) [X] Publish the XState DevTools extension on the Chrome Web Store (the process usually takes several working days until the extension is approved)

Feature Requests:

amitnovick commented 5 years ago

😅 Hope you'll like to hear some update on this:

Here's a short test I did to see that the UI is being updated correctly when a service is stopped 🎞️ Twitter video (because GitHub doesn't support videos)

amitnovick commented 5 years ago

Made some progress on it, and wanted to share the state of the latest snapshot:

Very useful at this point! next thing I'm going to add is the "Events" tab to the side-panel 🌟

2019-10-07_22-52-49

amitnovick commented 5 years ago

Today's progress:

Really happy with it at this point! almost at feature-parity with the existing Redux DevTools alternative: the only feature not present is the diff of state of every event that has been processed.

2019-10-09_23-05-31

adam-cyclones commented 5 years ago

@amitnovick, is there anywhere I can get hold of a code? I'm happy to use it in this 'state' pun intended. Looking good.

amitnovick commented 5 years ago

@amitnovick, is there anywhere I can get hold of a code? I'm happy to use it in this 'state' pun intended. Looking good.

Glad to see more people are excited about this as I am! 😀

The code's on my repo here.

By the way, I haven't really announced it yet, but I actually published the extension in the past few days and it is now available on the Chrome Web Store 🎉 (should probably be announced together with the rest of the changes for xstate@4.7.0 @davidkpiano).

Use the latest xstate@next version in your app to get it to work, since it relies on a recent PR.

Quick Demonstration

If you wanna play around with it as easily as possible, I would suggest:

  1. Install the XState DevTools Chrome extension
  2. Open up this Calculator CodeSandbox here which already uses xstate@next
  3. Make sure to click Open in New Window [1]
  4. Open up the DevTools and pick the XState DevTools panel
  5. Let me know how it goes! 👍

[1] - CodeSandbox seems to be doing something strange that glitches it, will look into this later