Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

export to xstate format #59

Open
chrisjallen opened this issue Jul 17, 2019 · 10 comments
Open

export to xstate format #59

chrisjallen opened this issue Jul 17, 2019 · 10 comments

Comments

@chrisjallen
Copy link

chrisjallen commented Jul 17, 2019

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.

@chrisjallen chrisjallen changed the title export to xstate export to xstate format Jul 17, 2019
@sverweij
Copy link
Owner

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
Copy link
Author

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

@davidkpiano
Copy link

@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
Copy link
Owner

  • 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
Copy link
Owner

sverweij commented Jul 27, 2019

@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
Copy link
Owner

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

@chrisjallen
Copy link
Author

chrisjallen commented Jul 29, 2019

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
Copy link
Owner

@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
Copy link
Author

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
Copy link
Owner

sverweij commented Aug 2, 2019

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants