export to xstate format

Suggestion to produce xstate js output, would be really useful and provide wider audience for use with most popular js library for state charts/ state machines.

Ideally, would be available as an option in the exporter list in the ui side menu.

Example format, this includes its guard and action (onEntry, onExit) features, but even a more limited/simplistic output of the events and actions would be beneficial:

var stateMachine = new xstate.Machine({
  initial: "not_green",
  states: {
    not_green: {
      on: {
        change:  {
          green: {
            cond: (text) => text.length > 0
          }
        }
      }
    },
    green: {
      onEntry: "startHttpRequest",
      onExit: "cancelHttpRequest",
      on: {
        results: "not_green",
        change:  {
          not_green: {
            cond: (text) => text.length == 0
          }
        }
      }
    }
  }
});

Website: https://xstate.js.org/docs/

Notice they have there on visualiser, but your tool and syntax/lang is much easier to use for mocking up.

[sverweij]

(I’ve published a polished version to live yesterday)

[sverweij]

@davidkpiano couldn’t sleep very well last night so I wrote an scxml parser (see PR above). Which means that scxml output should be enough to get it visualized.

Available on http://sverweij.gitlab.io/state-machine-cat/ and on npm behind the beta tag; state-machine-cat@beta - hope to publish at the start of next week (some edge & corner cases need to be covered + some refactoring from late-night code to something a bit better).

(That said - a direct mapping to and from xstate might still be useful …)