Specifying the event payload using an inline form

[bemayr]

As suggested by @mattpocock in #15 (comment) I opened this discussion to talk about ways on how we could specify the payload for events where eventPayloads is not sufficient.

For context @hmaurer already mentioned https://github.com/rjsf-team/react-jsonschema-form because of JSON Schema support in *[email protected] *. @mattpocock also has some "designs fizzing around in his head" #15 (comment).

I just stumbled upon David's comment statelyai/xstate#2068 (reply in thread) regarding the idea of supporting this in @xstate/inspect in the future. It will look like:

createMachine({
  // ...
  schema: {
    events: {
      CHANGE: { properties: { value: { type: 'string' } } }
    }
  }, 
  // ...
});

I think it would be really beneficiary to adhere to this spec, because of easy interoperability with @xstate/inspect.

[bemayr]

I started experimenting a little bit in this regard with the current result looking like:

Now the event payload is visible to the user inside the parenthesis. As it can be seen in the image above, if those parameters are provided via mdx, then they are rendered and clicking on the event sends it to the machine. Unspecified parameters are represented by ? and the next step would be to render the inline form in this case.

Have you got any thoughts on this? @mattpocock @hmaurer

---

edit: linked vercel from PR #30