Clicking open visual editor or moving the state chart changes the machine code

[gkiely]

Current behavior:

• Clicking "open visual editor" changes the machine json
• Moving the position of the elements in state chart changes the machine json
• With the visual editor open, removing the id and pressing save changes the machine json

Expected

• Clicking open visual editor does not change machine json
• Changing the position of elements (without modifying the machine) does not change machine json
• Error message shown for missing id or incorrect format, with an option to quick fix. Quick fix only fixes single issue, does not reformat entire machine.

Current workaround:

• Make visual changes to state chart, copy the @xstate-layout comment, revert changes and paste the comment

[gkiely]

Example (before):

After:

After moving:

[gkiely]

Example code:

const isValidInput = (s: string) => true; // Stubbed for example
const doMath = (s: string) => ''; // Stubbed for example

export default createMachine<{
  input: string;
  result: string;
}>({
  context: { input: '', result: '' },
  id: 'calculator',
  initial: 'idle',
  states: {
    idle: {
      on: {
        CLEAR: 'cleared',
        CALCULATE: {
          cond: (context, event) => isValidInput(context.input + event.input),
          target: 'calculated',
        },
        INPUT: {
          cond: (context, event) => isValidInput(context.input + event.input),
          target: 'inputting',
        },
      },
    },
    inputting: {
      entry: assign({
        input: (context, event) => context.input + event.input,
      }),
      always: 'idle',
    },
    cleared: {
      entry: assign({
        result: () => '',
      }),
      always: 'idle',
    },
    calculated: {
      entry: assign({
        result: (context) => doMath(context.input),
      }),
      always: 'idle',
    },
  },
});

[davidkpiano]

We have an internal RFC that is potentially related to this (cc. @mattpocock), so we are looking into how we can improve the experience here 👍

[gkiely]

Looks like this has been resolved @davidkpiano.

The only remaining issue is that It doesn't respect the original spacing, but this is a minor issue as prettier fixes it on save. Example: https://www.loom.com/share/5ba533545d32493cba9f7a0333f9e52a

Thanks for the work on this.

[Andarist]

The spacing issue should also be improved by https://github.com/statelyai/xstate-tools/pull/226