beginner’s help

[slate ledge]

I am completely new to this and I wanna lay out my approach here and see if this is what I’m looking for.

Imagine prototyping features for an application where you are not concerned with the graphic design, just trying to make clear and precise the exact sequence of actions - this can include what the user does, and also what the program itself has to do behind the scenes. Ideally, you break it all down into tiny pieces - and it can even help you realize how to write your code.

It seems like Xstate is good for this. But I’m on mobile and the editor seems more desktop-friendly. But I can use the node package in Replit.

It seems like the JSON syntax means the visual editor is a way more smooth way to use the library. Typing out the JSON would be a lot.

Does anyone recommend any other libraries, which can render as static diagrams, perhaps, exported as images? Or can xstate.js do that? Thank you

[slate ledge]

I just made this, it’s pretty good: {
"id": "Cognosys",
"initial": "Main application window is being shown",
"states": {
"Main application window is being shown": {
"initial": "New user",
"states": {
"New user": {},
"Returning user": {
"on": {
"User enters new title": {
"target": "New state 1"
},
"User enters new message body": {
"target": "Body filled"
}
}
},
"New state 1": {},
"Body filled": {
"on": {
"User enters title": {
"target": "Body and title filled"
}
}
},
"Body and title filled": {
"on": {
"User selects mode Search": {
"target": "Search mode selected"
}
}
},
"Search mode selected": {
"on": {
"User presses run agent": {
"target": "Cognosys begins running"
}
}
},
"Cognosys begins running": {}
}
}
}
}

How do I state a bunch of simultaneous actions the user could do? Like consider there are 5 actions the user could do. They could do all of them but in any order. How to represent that?

[warm flame]

@slate ledge I don't fully understand what application you're talking about. May you explain it in different terms?

re: simultaneous actions. If the actions are independent of each other, then you can represent them as parallel states.

Here's a rough sketch of parallel states representing states of parts of your application, with a parallel state representing its operation (stop or run).

The Run transition is guarded with the runnable condition function.

Condition functions can accept as an argument and then provide the condMeta object, which contains the current state. You can use that to then validate whether the other parallel states are satisfactory.

guards: {
  runnable: (context, event, condMeta) => {
    return condMeta.state.matches({
      'Title': 'Complete',
      'Body': 'Complete',
      'Search mode': 'Selected'
    })
  }
}

See https://stately.ai/docs/xstate/states/parallel-states#matching-parallel-states