VS Code extension not updaing the code
JRebella opened this issue · comments
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 is caused by the extension looking for the reference code comment /** @xstate-layout...
in the wrong place and not finding it. I think this is the case because moving this comment to a specific place fixes the issue
Reproducing the issue
- Make a new
.ts
file - Create a new machine using the
xsm
code snippet (manually typingcreateMachine
should do the trick too) - Save the file once to allow typegen to run
- Open the machine using the
Open Visual Editor
button above the machineconst
- Make any changes using the editor
For me when doing this, changes in the editor aren't reflected in the code
Workaround
When you first open the editor, the extension will create this /** @xstate-layout...
comment below the const nameOfMachine
declaration line and right inside the machine model object parameter:
Cut this line and place it right above the machine declaration like this (make sure not to leave an empty line between the comment and the machine variable declaration):
Now open the editor using the Open Visual Editor
and the code should now react to changes in the editor
Which version of the extension are you using?
Which version of the extension are you using?
Should be the latest "XState VSCode" v1.13.0
, before finding the workaround I tried uninstalling and reinstalling the extension. I also have "xstate-visualizer" v1.0.4
installed
not great that for machines that don't have layout the default from the editor is to put it inside the createMachine({
call
not great that for machines that don't have layout the default from the editor is to put it inside the createMachine({ call
Could you tell me more about what is not great about it? Do you have problems with code syncing like the OP? Or do you face other issues?
@JRebella I can't repro this problem using the provided repro steps. Would you be open to scheduling a call with me so we could debug your issue together?
Could you tell me more about what is not great about it? Do you have problems with code syncing like the OP? Or do you face other issues?
yes I do, editing anything about the machine shows
Request applyMachineEdits failed with message: Cannot read properties of null (reading 'start')
when layout string is inside the machine
I have the same issues (using v1.14.1
) and investigated this a bit. The workaround of moving the //** @xstate-layout ... */
didn't work for me reliably. @Andarist, I saw the Discord thread from yesterday and think your intuition that tabs are the problem is correct. Any tabs mess up the behavior of the extension.
I played around rendering white space via settings.json
:
"editor.renderWhitespace": "all",
Here a description of what happens after I use the code configuration in the screenshot below (I did reset the configuration to the screenshot for both tests):
- Clicking on
initialState
state and then the [+] --> still creates the code for the new transition. - Double-clicking
initialState
and renaming --> changes code accordingly
Here a description of what happens after I use the code configuration in the screenshot below (I did reset the configuration to the screenshot for both tests):
- Clicking on
initialState
state and then the [+] --> still creates the code for the new transition. - Double-clicking
initialState
and renaming --> no code change
Here a description of what happens after I use the code configuration in the screenshot below (I did reset the configuration to the screenshot for both tests):
- Clicking on
initialState
state and then the [+] --> no code change - Double-clicking
initialState
and renaming --> no code change
Using spaces for all indentations or no indentation at all makes the extension work. From there on, the extension creates spaces for indentation and continues working.
So, if you are using prettier, you might want to adjust your prettier or VS Code formatting settings until the extension is fixed:
- Using prettier with
"useTabs": true
reproduces the issue. "useTabs": false
is a workaround. Or deactivate prettier and configure VS Code to use spaces
Interestingly, I have prettier configured withuseTabs: false
and VSCode to use spaces and not tabs
Same issue here, extension version 1.14.3
I use Prettier too and once I switched the useTabs setting to false, it started working again.
Setting the prettier config with "useTabs: false"
is work for me