xstate-tools icon indicating copy to clipboard operation
xstate-tools copied to clipboard

Bug: Cannot use VSCode visual editor. Visual changes are not saving

Open cpetzel opened this issue 2 years ago • 11 comments

When using the VSCode visual editor, changes are not applying to the source file.

image

I've tried disabling and uninstalling the plugin, with no luck.

Here is the stack trace error in the console output...

2023-03-05 10:01:33.619 [error] Error: Request applyMachineEdits failed with message: Unexpected token (12:151)
    at handleResponse (/Users/craig/.vscode/extensions/statelyai.stately-vscode-1.13.0/dist/index.js:329558:40)
    at processMessageQueue (/Users/craig/.vscode/extensions/statelyai.stately-vscode-1.13.0/dist/index.js:329395:13)
    at Immediate.<anonymous> (/Users/craig/.vscode/extensions/statelyai.stately-vscode-1.13.0/dist/index.js:329381:11)
    at processImmediate (node:internal/timers:466:21)

Version: 1.76.0 (Universal)
Commit: 92da9481c0904c6adfe372c12da3b7748d74bdcb
Date: 2023-03-01T10:23:45.993Z (4 days ago)
Electron: 19.1.11
Chromium: 102.0.5005.196
Node.js: 16.14.2
V8: 10.2.154.26-electron.0
OS: Darwin arm64 22.3.0
Sandboxed: Yes

cpetzel avatar Mar 05 '23 18:03 cpetzel

Reproduction steps...

  1. Create a new file machine.ts
  2. Enter the following
import { createMachine } from "xstate";

createMachine({})
  1. Click "Open Visual Editor"
  2. Make visual edits to the machine. observe the only text changes in the source file, is the @xstate-layout meta information...

createMachine({
/** @xstate-layout N4IgpgJg5mDOIC5gF8A0IB2B7CdGgAoBbAQwGMALASwzAEp8QAHLWKgFyqw0YA9EAjACZ0AT0FDkU5EA */})


If I enter any information into the machine config JSON, then it works properly... This issue only seems to occur if the config json is empty. Example: Starting with this typescript and then opening the visual editor, all works fine

createMachine({
    /** @xstate-layout N4IgpgJg5mDOIC5gF8A0IB2B7CdGgAoBbAQwGMALASwzAEp8QAHLWKgFyqw0YA9EAjACZ0AT0FDkU5EA */
    id: 'test'
})

cpetzel avatar Mar 06 '23 03:03 cpetzel

I am getting a similar error/problem.

Any edit i do in the Visual editor is not applied to the state machine file. I tried with new empty machines and also machine copied from the web visualizer. To mee it seems that it has some thing to do with de layout string that is added to the file.

https://xstate.js.org/viz/

Things i tried.

  • Restart vscode
  • reinstall xstate extension

I am running on a m2 mac mini

Screenshot 2023-03-11 at 11 51 18

2023-03-11 11:46:04.408 [error] Request applyMachineEdits failed with message: Unexpected token (3:178): Error: Request applyMachineEdits failed with message: Unexpected token (3:178) at handleResponse (/Users/gareth/.vscode/extensions/statelyai.stately-vscode-1.13.0/dist/index.js:329557:40) at processMessageQueue (/Users/gareth/.vscode/extensions/statelyai.stately-vscode-1.13.0/dist/index.js:329395:13) at Immediate. (/Users/gareth/.vscode/extensions/statelyai.stately-vscode-1.13.0/dist/index.js:329381:11) at processImmediate (node:internal/timers:466:21)

2023-03-11 11:44:35.756 [error] Request applyMachineEdits failed with message: Changing transition path requires the transitionPath ([on, Event 1, 0]) to exist on the source state ([]): Error: Request applyMachineEdits failed with message: Changing transition path requires the transitionPath ([on, Event 1, 0]) to exist on the source state ([]) at handleResponse (/Users/gareth/.vscode/extensions/statelyai.stately-vscode-1.13.0/dist/index.js:329557:40) at processMessageQueue (/Users/gareth/.vscode/extensions/statelyai.stately-vscode-1.13.0/dist/index.js:329395:13) at Immediate. (/Users/gareth/.vscode/extensions/statelyai.stately-vscode-1.13.0/dist/index.js:329381:11) at processImmediate (node:internal/timers:466:21)

garethloot avatar Mar 11 '23 10:03 garethloot

The extension does not change the machine-file anymore in any project, except the first one that I used it in. Now I get the following errors:

2023-04-20 12:16:16.172 [info] ExtensionService#_doActivateExtension statelyai.stately-vscode, startup: false, activationEvent: 'onLanguage:typescript'
2023-04-20 12:16:31.375 [error] Error: Request applyMachineEdits failed with message: Unexpected token (4:211)
	at handleResponse (/Users/philipschonholzer/.vscode/extensions/statelyai.stately-vscode-1.14.1/dist/index.js:231834:40)
	at processMessageQueue (/Users/philipschonholzer/.vscode/extensions/statelyai.stately-vscode-1.14.1/dist/index.js:231672:13)
	at Immediate.<anonymous> (/Users/philipschonholzer/.vscode/extensions/statelyai.stately-vscode-1.14.1/dist/index.js:231658:11)
	at process.processImmediate (node:internal/timers:466:21)
2023-04-20 12:16:33.653 [error] Error: Request applyMachineEdits failed with message: Could not find state
	at handleResponse (/Users/philipschonholzer/.vscode/extensions/statelyai.stately-vscode-1.14.1/dist/index.js:231834:40)
	at processMessageQueue (/Users/philipschonholzer/.vscode/extensions/statelyai.stately-vscode-1.14.1/dist/index.js:231672:13)
	at Immediate.<anonymous> (/Users/philipschonholzer/.vscode/extensions/statelyai.stately-vscode-1.14.1/dist/index.js:231658:11)
	at process.processImmediate (node:internal/timers:466:21)
2023-04-20 12:21:07.914 [error] Error: Request applyMachineEdits failed with message: Unterminated comment. (4:7)
	at handleResponse (/Users/philipschonholzer/.vscode/extensions/statelyai.stately-vscode-1.14.1/dist/index.js:231834:40)
	at processMessageQueue (/Users/philipschonholzer/.vscode/extensions/statelyai.stately-vscode-1.14.1/dist/index.js:231672:13)
	at Immediate.<anonymous> (/Users/philipschonholzer/.vscode/extensions/statelyai.stately-vscode-1.14.1/dist/index.js:231658:11)
	at process.processImmediate (node:internal/timers:466:21)
2023-04-20 12:21:19.592 [error] Error: Request applyMachineEdits failed with message: Unterminated comment. (4:7)
	at handleResponse (/Users/philipschonholzer/.vscode/extensions/statelyai.stately-vscode-1.14.1/dist/index.js:231834:40)
	at processMessageQueue (/Users/philipschonholzer/.vscode/extensions/statelyai.stately-vscode-1.14.1/dist/index.js:231672:13)
	at Immediate.<anonymous> (/Users/philipschonholzer/.vscode/extensions/statelyai.stately-vscode-1.14.1/dist/index.js:231658:11)
	at process.processImmediate (node:internal/timers:466:21)
2023-04-20 12:21:21.844 [error] Error: Request applyMachineEdits failed with message: Could not find state
	at handleResponse (/Users/philipschonholzer/.vscode/extensions/statelyai.stately-vscode-1.14.1/dist/index.js:231834:40)
	at processMessageQueue (/Users/philipschonholzer/.vscode/extensions/statelyai.stately-vscode-1.14.1/dist/index.js:231672:13)
	at Immediate.<anonymous> (/Users/philipschonholzer/.vscode/extensions/statelyai.stately-vscode-1.14.1/dist/index.js:231658:11)
	at process.processImmediate (node:internal/timers:466:21)

philschonholzer avatar Apr 20 '23 10:04 philschonholzer

Are you using a tab-based indentation in the affected files by any chance?

Andarist avatar Apr 20 '23 10:04 Andarist

Are you using a tab-based indentation in the affected files by any chance?

Yes, it's the tabs!

philschonholzer avatar Apr 20 '23 10:04 philschonholzer

Yes tabs as well and going to spaces fixes the problem

garethloot avatar Apr 20 '23 18:04 garethloot

Same problem here (also with a brand new machine). Converting the machine file to spaces didn't fix the problem in my case (it was already spaces actually).

Installing the 1.10.0 old version (as suggested here https://github.com/statelyai/xstate-tools/issues/269#issuecomment-1343403121) solves the saving problem but breaks my current maching layout (maybe i'm using recent feature), so it's not a feasable solution.

Here is one of the errors i'm getting: 2023-08-09 10:16:44.851 [error] Error: Request applyMachineEdits failed with message: Unexpected token (16:6836) at handleResponse (c:\Users\m2cosentino.vscode\extensions\statelyai.stately-vscode-1.14.3\dist\index.js:76950:40)

VS Code: 1.81.0 XState VSCode Extension: v1.14.3 Node.js: v18.16.0

cosentino-lutech avatar Aug 09 '23 08:08 cosentino-lutech

Same problem here (also with a brand new machine). Converting the machine file to spaces didn't fix the problem in my case (it was already spaces actually).

Installing the 1.10.0 old version (as suggested here #269 (comment)) solves the saving problem but breaks my current maching layout (maybe i'm using recent feature), so it's not a feasable solution.

Here is one of the errors i'm getting: 2023-08-09 10:16:44.851 [error] Error: Request applyMachineEdits failed with message: Unexpected token (16:6836) at handleResponse (c:\Users\m2cosentino.vscode\extensions\statelyai.stately-vscode-1.14.3\dist\index.js:76950:40)

VS Code: 1.81.0 XState VSCode Extension: v1.14.3 Node.js: v18.16.0

Can you share a screenshot of what the code is and what you see in the editor?

davidkpiano avatar Aug 09 '23 09:08 davidkpiano

Can you share a screenshot of what the code is and what you see in the editor?

Sure, here you go:

2023-08-09 12_07_54-src_syncMachineTest ts - xstate - Visual Studio Code

Am I doing something wrong? Thanks

cosentino-lutech avatar Aug 09 '23 10:08 cosentino-lutech

For me I was able to find a solution found in this other bug report it seems that prettier is breaking the 2 way communication https://github.com/statelyai/xstate-tools/issues/293

Adding machine files to .prettierignore fixed the two way communication for me instantly

ContrerasA avatar Aug 16 '23 00:08 ContrerasA

Unfortunately the .prettierignore solution didn't work for me. I even tryed to disable all other extensions (Prettier and other) and to reinstall XState extension but the problem persists.

Version: 1.81.1 (user setup) Commit: 6c3e3dba23e8fadc360aed75ce363ba185c49794 Date: 2023-08-09T22:22:42.175Z Electron: 22.3.18 ElectronBuildId: 22689846 Chromium: 108.0.5359.215 Node.js: 16.17.1 V8: 10.8.168.25-electron.0 OS: Windows_NT x64 10.0.22621

cosentino-lutech avatar Aug 21 '23 09:08 cosentino-lutech