Allowing definition to be a JSON

[kachkaev]

I've been playing with state charts and have found the online vizualizer quite useful. Thank you for working on it @davidkpiano 🙌!

One minor improvement idea that came to my mind is about copy-pasting state machines to the definition tab. At the moment, the <AceEdit> component only accepts a function and does not understand a JSON. This means that when I want to visualize my app's statechart.json file, I have to be careful about what parts of the text I need to select and replace. This process takes some time and is error-prone (I'm an imperfect human).

It'd be cool if both functions and JSONs were accepted as an input, which would speed-up copy-pasting. The solution would be to add a condition before this line – not a big deal:

https://github.com/statecharts/xstate-viz/blob/dece1c3a33efdd32e5897fbbb2b15444b0d1353c/src/StateChart.tsx#L103-L105

A rough sketch:

const machineFunctionBody = machine.trim()[0] === '{'
  ? `const lightMachine = Machine(${machine});`
  : machine;
const createMachine = new Function("Machine", "interpret", "XState", machineFunctionBody);

What do you think?

[davidkpiano]

Yep, this is in the works. I'm working on redoing the visualizer to accept (and output) JSON.

[danguilherme]

Is it feasible to also add a query string that accepts the machine definition, just like in the older version? (https://musing-rosalind-2ce8e7.netlify.com/?machine=uri_encoded_machine_json)

[davidkpiano]

I'd say it's feasible. The worry would be that the encoded JS would be executable, which can get nasty... I'll have to research sandboxing approaches, or translate it to JSON first.

[danguilherme]

In this case you would only accept a JSON definition, so if it's not parseable by JSON.parse(window.decodeURIComponent(definitionString)), it can be ignored.

But in the end it's just a nice to have...