damiensedgwick / vscode-xstate-visualizer

Visualize your state machines from within vscode with the XState Visualizer.

This extension is no longer under development.

vscode xstate visualizer

Easily view and build state machines with the XState Visualizer from within vscode.

Features

Currently displays the XState Visualizer within a webview for vscode. State machines are interactive so that you can build / test your state machine from within vscode.

Requirements

Install the extension from the Marketplace.

Usage

Press cmd + shift + p to open up your command pallet and start typing xstate or visualiser and the extension will be presented as XState: Open Visualiser. Select this option to open the visualiser within vscode.

Install the extension from the Marketplace.

Known Issues

Copy / Pasta and other keyboard shortcuts do not currently work. You can however right click + copy and right click + paste

Logging in does not work from within VSCODE at the minute meaning you cannot access stored machines.

Release Notes

All release notes can be found here: Change Log

vscode-xstate-visualizer's Issues

Webview is blank

React app is now building and loading into the webview and although it can be seen working here: https://www.loom.com/share/97310992439244a5b9e16a3118da55b4

It is now just returning a blank screen 🤔

Needs investigating further.

Cannot find and import local build of React app.

Even though I am building and outputting all JS files to the out directory, I am unable to import the local react app file for use from within a vscode webview.

const reactAppPathOnDisk = vscode.Uri.file(
    path.join(extensionPath, "app.js") // This path is the problem I think??
);

const reactAppUri = reactAppPathOnDisk.with({ scheme: "vscode-resource" });

reactAppUri is then passed through to the html document script tag like so

<script src="${reactAppUri}"></script>

From looking online, once this path is configured correct it should work however I am failing to get it working correctly. Whilst the webview does open, I hit this error:

Error: Unable to resolve non-existing file '/Users/damienk.sedgwick/Development/vscode-xstate-visualizer/app/app.js'

That last error stays no matter the path variations I try, I suspect this is the reason for it also returning a 404 but it could be unrelated.

Excited to use this extension

been using xstate for a while saw this extension.. And I am excited on this extension will turn out. Glad to see this right here.
Best of luck team

Cannot currently copy / paste within the visualizer

There are work arounds for this like broadcasting events. Check here for solution: microsoft/vscode#65452

Command is not found

Currently in development the commands work as expected however in production, the command isn't found and an error is thrown.

• Investigate the error being thrown.
• Write tests for checking commands are there and it is possible to activate them.

How to use the extension

Hi!

Sorry for a stupid question perhaps, but I don't get how to use the extension? How do I get the webview?

Thanks in advance!

Nav links do not work within the webview.

Visualizer refreshes when returning from another tab.

I noticed that if you navigate to a different tab within vscode, the visualizer does not persist when you return to it.