@bemedev/app-solidjs

TanStack Start Visual Tester

Nested Traffic Machine Tester

Testing nested state values, tags, and reactive transitions via useService

{
  "type": "parallel",
  "states": {
    "speed": {
      "initial": "normal",
      "states": {
        "normal": {
          "tags": "normal",
          "on": {
            "ACCELERATE": {
              "actions": "accelerate",
              "target": "/speed/fast"
            }
          }
        },
        "fast": {
          "tags": "fast",
          "on": {
            "SLOW_DOWN": {
              "actions": "decelerate",
              "target": "/speed/normal"
            }
          }
        }
      }
    },
    "flow": {
      "initial": "red",
      "states": {
        "red": {
          "tags": [
            "stop_light"
          ],
          "on": {
            "NEXT": "/flow/green"
          },
          "after": {
            "WAITER_RED": "/flow/green"
          }
        },
        "yellow": {
          "tags": [
            "caution_light"
          ],
          "on": {
            "NEXT": "/flow/red"
          },
          "after": {
            "WAITER_YELLOW": "/flow/red"
          },
          "exit": [
            "count"
          ]
        },
        "green": {
          "tags": [
            "go_light"
          ],
          "on": {
            "NEXT": "/flow/yellow"
          },
          "after": {
            "WAITER_GREEN": "/flow/yellow"
          }
        }
      }
    }
  }
}
Active Tags
#normal#stop_light

Current value

{
  "speed": "normal",
  "flow": "red"
}

Full State Representation

{
  "status": "working",
  "context": {
    "cycles": 0
  },
  "event": {
    "type": "machine$$init",
    "payload": {}
  },
  "value": {
    "speed": "normal",
    "flow": "red"
  },
  "tags": [
    "normal",
    "stop_light"
  ]
}