Visualizer does not render delay arrays

[mdpratt]

Machines that define an array for the after attribute do not correctly rendering the node.

Code: https://stately.ai/viz/29788792-45db-4927-9d66-590e9ecbbf65

const example = createMachine({
  states: {
    idle: {
      after: [
        {
          delay: 1000,
          target: 'pending',
        },
      ],
    },
    pending: {},
  },
});

Expected:

Actual:

[mdpratt]

It looks like after arrays are generally not being handled correctly. Defining a guard (eg. after: [{ delay: settings.paginationDelay ?? 100, target: 'pending', cond: 'isPaginationAutomatic' }] will cause the the TypeGen to fail with the following error messages:

Typescript will fail:

Object literal may only specify known properties, and 'isPaginationAutomatic' does not exist in type 'MachineOptionsGuards<{ ...snip...}>

XState VSCode extension will warn:

isPaginationAutomatic is never used in the machine definition

If the same guard is used in an on handler for a state, then the warnings go away.

[mattpocock]

Duplicate of #44

[mdpratt]

Is the visualization and typegen related to the same flaw? If not, I'd recommend reopening this issue.

[mattpocock]

Yes, it is - it's a parsing issue