Allowing definition to be a JSON

kachkaev commented 5 years ago

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 commented 5 years ago

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

danguilherme commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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...

statecharts / xstate-viz

Allowing definition to be a JSON #2