Trying to edit machine in vs code visual editor, but it doesn't updates code. | Stately | Page 1

cunning grotto Mar 3, 2023, 9:16 AM

#

I open visual editor in vs code, add some state, but code stays same. I recreated project several times with vite and reload vs code and extension several times, but no result. Do i miss something? I believe that while ago it was working right after i install extension

P.S. If i change actual code visual editor reacts and update its visual representation

prisma meteor Mar 3, 2023, 1:23 PM

#

Is it possible for you to share a short recording of your problem (or some screenshots with explanations)?

I'm not sure I fully understand it 🤔

cunning grotto Mar 3, 2023, 2:51 PM

#

Sure, code just don't reacts to changes in visual editor. But visual editor reacts to changes in code, not sure if it is extension bug, or i miss something 🙂

prisma meteor Mar 3, 2023, 3:42 PM

#

cunning grotto Sure, code just don't reacts to changes in visual editor. But visual editor reac...

Thank you, I think I see what's happening now

#

It looks like the extension breaks with the minimal create machine you're using const machine = createMachine({}); - I can verify that doesn't work on my machine either

#

If you add an id it should work:

const machine = createMachine({
  id: 'smallest possible machine',
});

#

But also we have the a cool snippet included with the extension you can try for creating machines. Try typing xsm and hitting tab, that should give you some boilerplate to get started

#

But thank you very much for this, we'll try to fix it in an upcoming version

cunning grotto Mar 3, 2023, 3:54 PM

#

prisma meteor But thank you very much for this, we'll try to fix it in an upcoming version

Thanks a lot for answering

ashen quiver Mar 16, 2023, 7:46 PM

#

hey @prisma meteor I stumbled upon this issue as well after working on a new machine in my codebase

#

other machines I had already built seem to edit fine

#

but I can't get a new machine to work, even using the xsm boilerplate code

#

its really odd, I managed to open the editor, edit the name of the inital state fine

#

but after trying to add a new state using the editor, the code stopped updating

#

im not sure if I broke something since the editor worked flawlessly when building other machines in the past (just a week ago)

prisma meteor Mar 16, 2023, 8:16 PM

#

Sorry to hear that. Can you reproduce the error across VS Code restarts?

#

If you can I'd love to see a little recording, if possible, of what's going wrong

ashen quiver Mar 16, 2023, 8:18 PM

#

yeah, sadly restarting VS code didn't help

#

give me a min I'll try to make a small reproduceable example

#

apparently now its not working at all

#

code changes make the editor react but not the other way around

#

#

let me know if the quality is too bad 😆

#

doesn't work either using your "smallest machine" snippet

#

but magically for older machine files it works perfectly

#

I can edit them using the editor and the code reflects the changes

#

I think it might have something to do with the /** @xstate-layout comment

#

I just tried copying an old machine's code into a new file

#

if I keep the same /** @xstate-layout comment from the old code, the editor works fine and it only edits the new file
if I delete the comment, it regenerates when starting the editor but it doesnt work

prisma meteor Mar 16, 2023, 8:32 PM

#

Is this all happening inside the same project? Both old and new machines in the same project?

ashen quiver Mar 16, 2023, 8:32 PM

#

yes same project

prisma meteor Mar 16, 2023, 8:33 PM

#

is it a public repo, by any chance, so we can have a look?

ashen quiver Mar 16, 2023, 8:34 PM

#

ok I think I found the issue

#

the problem is the position of the /** @xstate-layout comment

#

when making a new machine and opening the inspector, it places the comment inside the first object parameter of createMachine like this and it doesn't work:

#

now, if I put the createMachine in a new line and place the /** @xstate-layout comment between the nameofMachine = and createMachine like so:

#

it now works

#

I can write a GH issue with a little better explanation if that helps

prisma meteor Mar 16, 2023, 8:41 PM

#

Thank you for the feedback. I'm going to use a life-line and call a friend - @wraith lodge do you have any idea of why this is happening?

ashen quiver Mar 16, 2023, 8:53 PM

#

Here's the GH issue with a better explanation of the workaround and reproduction steps: https://github.com/statelyai/xstate-tools/issues/316

GitHub

VS Code extension not updaing the code · Issue #316 · statelyai/xst...

When creating a brand new file and a brand new machine using the xsm code snippet, then opening the machine with the editor, changes made in the editor are not reflected in the code I believe this ...

wraith lodge Mar 28, 2023, 10:46 AM

#

@ashen quiver thanks for the issue - I will look into this, not sure why it doesn't work for you with the comment inside the object

ashen quiver Mar 28, 2023, 1:59 PM

#

Awesome

#

Yeah its pretty odd, at first I though it was simply looking for the comment in another place but then I briefly looked at the extension's code and it seems to be expecting the comment to be inside the object as well. Not sure why it isnt finding it in my case

austere seal Apr 20, 2023, 12:44 PM

#

I have the same issue, except the workaround doesn't help.

Extension version v1.14.1
VS Code version 1.77.3
Windows

The video is attached. The extension reports the following uncaught error:
Request applyMachineEdits failed with message: Unexpected token, expected "," (11:6)

It's my first time using xstate, so I don't have any old code to try this on.

Thanks!

ashen quiver Apr 25, 2023, 6:19 PM

#

@wraith lodge I just now see your comment on the issue I opened, if you still need help debugging let me know and we can hop on a call

#

Please ping me here or dm me on discord, I don't keep up with github notifications that much

ashen quiver Apr 25, 2023, 7:10 PM

#

austere seal I have the same issue, except the workaround doesn't help. Extension version v1...

Thats really odd, I've had some rare cases where I was editing a working machine and the extension decided to add a new @xstate-layout comment just like in your video, but only rarely and deleting the new line fixed it

Have you tried opening the editor, closing it, moving the line to the correct place, closing the file, reopening the file and opening the editor?

austere seal Apr 25, 2023, 8:54 PM

#

Hey @ashen quiver ! Tried just now - didn't help

ashen quiver Apr 25, 2023, 9:01 PM

#

Dang, the extension still creates a secondary line?

wraith lodge Apr 26, 2023, 10:39 AM

#

@ashen quiver @austere seal are any of you using, by any chance, a tab-based indentation?

ashen quiver Apr 26, 2023, 3:35 PM

#

I'm using spaces: 2

untold stone Apr 27, 2023, 10:54 AM

#

@wraith lodge I think you are right about tabs being the issue. I wrote a comment on the GitHub thread investigating this: https://github.com/statelyai/xstate-tools/issues/316#issuecomment-1525464452

GitHub

VS Code extension not updaing the code · Issue #316 · statelyai/xst...

When creating a brand new file and a brand new machine using the xsm code snippet, then opening the machine with the editor, changes made in the editor are not reflected in the code I believe this ...

#Trying to edit machine in vs code visual editor, but it doesn't updates code.