Type Alias TStatebotChart

A description of all the states in a machine, plus all of the permitted transitions between them.

This is defined using a string or an array of strings, but Template Literals are much more convenient.

An arrow -> configures a permitted transition between two states:

from-state -> to-state
Copy

It's the only operator needed to build any chart:

let promiseLikeChart = `
  pending -> resolved
  pending -> rejected
  resolved -> done
  rejected -> done
`
Copy

The "OR" operator | can help us remove some redundancy from the above example:

let promiseLikeChart = `
  pending -> resolved | rejected
  resolved | rejected -> done
`
Copy

In both charts, pending can transition to resolved or rejected, and resolved or rejected can both transition to done.

We can streamline this even further:

let promiseLikeChart = `
  pending -> (resolved | rejected) -> done
`
Copy

Again, this is exactly equivalent to the previous two examples.

Notice in this one that we have parentheses ( ) surrounding resolved and rejected. They are actually completely ignored by the parser, and you can use them as you please to help make your charts more readable.

A chart works exactly the same without them:

let promiseLikeChart = `
  pending -> resolved | rejected -> done
`
Copy

Charts can also be split across multiple-lines:

let promiseLikeChart = `
  pending ->
  resolved |
  rejected ->
  done
`
Copy

Notice that all white-space is ignored on either side of the -> and |.

// Comments of this kind are allowed, too:

let promiseLikeChart = `
  pending -> // Where do we go from here?
    (resolved | rejected) -> // Ah, yes

  // And now we're all finished
  done
`
Copy

Finally, here's a more full example:

let dragDropChart = `
  idle ->
    drag-detect ->
      (dragging | clicked)

  // Just a click, bail-out!
  clicked -> idle

  // Drag detected!
  dragging ->
    drag-wait -> dragged -> drag-wait

  // Drag finished...
  (drag-wait | dragged) ->
    (drag-done | drag-cancel) ->
      idle
`
Copy