Xstate: Add typescript support in visualizer

[gewoonwoutje]

Feature request

As mentioned in Issue 122, support for typescript in the visualizer would be great during development

Potential implementation:

Before showing the state machine, add a tsc step to compile the visualization. Flow could be one of the following:

• Add a toggle button on top of the visualizer that toggles between typescript and javascript.
• Configure typescript to allow javascript without strict checking, so that javascript and typescript are both supported.

[davidkpiano]

It has to be run-time. Do you know of any run-time TSC compilers? Or possibly a tool that strips out types?

[gewoonwoutje]

I don't know of any directly, but it has to exist somewhere.
A quick googling gave me:
https://stackoverflow.com/questions/14283737/typescript-web-based-ide/52991184#52991184

Also, typescript had it in their playground for quite a long time:
https://www.typescriptlang.org/play/

[gewoonwoutje]

That monaco editor looks great. It would be awesome if you could pull that in somehow!

[kolohelios]

I added TypeScript support to a visualizer I was working on (based on David's work) and unfortunately had to abandon it because of work demands. There isn't much required to get the runtime transpilation working (using the typescript module itself).

This approach doesn't require the user to do anything (that is to say, no toggle between languages) as it just means the compiler doesn't do anything.

https://github.com/kolohelios/xstate-cartographer/blob/6a173463c23a1db3b98e35c2df16c1e8ee875b31/src/lib/utils/toMachine/index.ts

[alizbazar]

Tejas Kumar presented at React Finland how to use Monaco editor from VSCode to use Typescript in the browser textarea view.

@TejasQ
Slides: https://slides.react-finland.fi/2019/tejas-kumar.pdf
Twitter: https://twitter.com/TejasKumar_

[TejasQ]

What's up, my friends?! I am down to help with this in any way I can.

[RainerAtSpirit]

Inspired by your talk I was looking into this one as well. I ran into some challenges as https://github.com/statecharts/xstate-viz is using rollup as bundler, while most examples I found in the wild are using webpack with a plugin to create the workers.
So the editor is working, but intellisense and highlighting is not.

[TejasQ]

Do you have a PR I can reference?

[RainerAtSpirit]

@TejasQ See https://github.com/RainerAtSpirit/xstate-viz/tree/react-monaco-editor. You need to symlink by running sudo npm link in root and npm link @statecharts/xstate-viz in public.
While viewing your presentation at React Finland I was thinking that we could use something similar for the documentation by adding a show visualizer and an edit code button to the documentation e.g. at https://xstate.js.org/docs/guides/typescript.html#using-typescript.

[RainerAtSpirit]

@davidkpiano @TejasQ Here's a different approach that uses codesandbox for code editing and a slightly modified local version of StateChart https://codesandbox.io/s/j4yjjyr85.
By convention the exported machine from machine.ts should be exported as export const myMachine

[abierbaum]

@RainerAtSpirit any chance to get this integrated. I love the visualization tool but I also love typescript safety. would be great if we could use both. :smile:

[RainerAtSpirit]

@abierbaum I doubt that this can be easily integrated. CodeSandbox has to run though a lot of hurdles to enable TypeScript support. I don't think that this should become the visualizer's responsibility.
But you never know @davidkpiano is full of surprises.

[gunn4r]

Is this just dead? How are people using the visualizer with all your machines / code written in typescript? Seems like it would make the visualizer impossible to realistically use since you'd have to go through and strip all your types out? Just wondering what the workflow looks like that yall are using in this case.

[davidkpiano]

How are people using the visualizer with all your machines / code written in typescript?

Like this: https://codesandbox.io/s/xstate-ts-viz-template-qzdvv 😉

Docs here: https://xstate.js.org/docs/packages/xstate-inspect/

[gunn4r]

@davidkpiano Tight! Thanks for sharing!