Xstate: Sketch.systems 😍

[elijah-schow]

Sketch.systems is an amazing tool. I'm working on a complicated workflow for a new project, and this tool has be really helpful for iteratively defining and refining my application's behavior. The tool helps me not only document the happy path, but also errors and edge cases. It's even faster than drawing diagrams by hand!

It has a ton of potential, and paired with xvis, I can't wait to see where these tools go in the future.

p.s. It would be cool if xviz was incorporated into Sketch.systems. I can copy-and-paste from one to the other, which gets me halfway there, but immediate visual feedback would be heavenly.

p.p.s. Where would I report bugs in xviz and Sketch.systems? Most of the time they work correctly together, but I've encountered a few issues.

[davidkpiano]

I'm talking to Kevin Lynaugh (who made sketch.systems) next week, so I'll ask him about it! Also, I'm currently working on an even more advanced visualization and editing tool - basically the successor to xviz (more details on that soon).

[elijah-schow]

Kevin Lynaugh (who made sketch.systems)

That explains a few things. For a second, I thought you had made it. Major kudos to Kevin.

[...] basically the successor to xviz (more details on that soon).

Exciting! I can't wait.

[good-idea]

I have a Sketch.Systems-related question --- When defining a machine using their interface, you can nest states as a way to share functionality. A good example is this tutorial:

You may notice that we’re repeating a lot of events across different states. One way to fix this is by making the Text Entry and Results states children of the active state. This is more logical: the search bar is active when it’s in any of these states.

When I tried this using xstate (via react-automata), it doesn't work the same way.

I would translate this:

Search Bar*

  Inactive*
    focused -> Active

  Active
    canceled -> Inactive
    typed -> Text Entry

    Empty*

    Text Entry
      submitted -> Results

    Results

to this:

{
  "initial": "searchBar",
  "states": {
    "SEARCHBAR": {
      "initial": "INACTIVE",
      "states": {
        "INACTIVE": {
          "on": {
            "focused": "ACTIVE"
          }
        },
        "ACTIVE": {
          "on": {
            "canceled": "INACTIVE",
            "typed": "TEXT_ENTRY"
          },
          "initial": "EMPTY",
          "states": {
            "EMPTY": {},
            "TEXT_ENTRY": {
              "on": {
                "submitted": "RESULTS"
              }
            },
            "RESULTS": {}
          }
        }
      }
    }
  }  
}

But, the latter isn't valid (Or, at the very least, it breaks the visualizer).

With xstate, nesting states results in hierarchical machine: the pedestrian 'walk / don't walk' machine cannot change the color of the light.

Is there any way to 'group' states in the same manner as Sketch.systems without nesting them into separate machines? It would be very handy to be able to apply common transitions or actions to all states within a group.

[maxbaluev]

@davidkpiano any updates?

[good-idea]

@maxbaluev Sketch.systems now exports to xstate JSON! It's a little hidden in the 'export to clipboard' button:

[davidkpiano]

Closing this - seems to be answered.