export to xstate format

[chrisjallen]

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]

hi @chrisjallen thanks for this suggestion - it's been an item on the backlog for some time as a nice to have feature, but as I don't use xstate and there was no demand (up till now :-) ) it has just stayed there.

That said ...

• In the xstate documentation I read it 'Adheres to the SCXML specification' (third sentence in the link you provided). I haven't dug into xstate deeply, but in theory this'd mean xstate and state-machine-cat are interoperable - at least on some level - already (smcat can emit SCXML). Is this something that can be used?

The item is up in the backlog now, but I'm not sure I'll be able to pick it up in a timely fashion. A PR is welcome though. If xstate is SCXML compliant the scjson renderer should provide a good basis.

[chrisjallen]

Thanks @sverweij Ill try taking a look at doing this myself, will send back a pr.

[davidkpiano]

@sverweij I am working on an @xstate/scxml package that will translate XState machine configurations to SCXML (and vice-versa). Would this be enough to get it visualized?

[sverweij]

• smcat => scxml => XState machine configuration would then work out of the box 🤞 (this will make @chrisjallen very happy, I gather :-) )
• for XState configuration => scxml => smcat (& visualize it) smcat would need to grow scxml as an input format. This is doable in a reasonable amount of time, though - at least for the scxml core constructs...

[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 ...)

[sverweij]

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

[chrisjallen]

Ah this is great news! Thanks @sverweij, I had a go and got a simple version exporting xstate working, with some typescript definitions to boot... is there any value sharing this code so you can export to xstate config directly? I guess the only problem then is dependency and updating any interface changes.

@davidkpiano, just been looking at xstate release code, does 'scxmlToMachine' have the ability to export out just the config structure rather than parsing it into a Machine object (similar to the export you get from sketch.systems) ? Was hoping to only have the config 'state' object so I can copy|paste this config into a project.

[sverweij]

@chrisjallen - there's definitely value in that, and a PR is still welcome, because likely something will get lost in translation smcat ⇄ SCXML ⇄ xstate - because of limitations in SCXML that don't exist in either xstate and/ or in state-machine-cat.

[chrisjallen]

Hey @sverweij almost have that pr ready, sorry to pollute this issue but how best to submit pr? No access to push a branch, do I fork?

[sverweij]

yep that's how it works; fork, make changes, create a PR. When I made my first PR on another repo I found GitHub's creating-a-pull-request-from-a-fork to be helpful.