Usage of Visualizer in other places

[ZempTime]

Description I'm trying to use <StateChart> to render out various machines in our system, so business folks and devs can peek their heads in and see what's going on.

What I'm running into is:

whch appears to be referencing this: https://github.com/statecharts/xstate-viz/blob/master/src/StateChartVisualization.tsx#L3

Afaik, xstate/lib/graph has been moved into @xstate/graph.

Additional context I'm mounting it all inside a web component and then rendering this inside there (following altered to omit nonessential info so I can share publicly):

import { StateChart } from "@statecharts/xstate-viz";

const Visualizer: React.FC<any> = ({machine}) => {
  const onSave = (e) => {
    console.log(e)
  }
  return (
    <StateChart machine={machine} onSave={onSave}/>
  )
}

import React from "react";
import ReactDOM from "react-dom";
import Visualizer from "../components/visualizer";
import machine from "project/src/machine";

export default class PageProjectVisualizer extends HTMLElement {
  connectedCallback() {
    const mountPoint = document.createElement("span");
    this.attachShadow({ mode: "open" }).appendChild(mountPoint);

    ReactDOM.render(<Visualizer machine={machine} />, mountPoint);
  }
}
customElements.define("page-project-visualizer", PageProjectVisualizer);

Is this package intended to be used in this way? Is there another way of accomplishing this?

I'd be happy to help get this building and exporting esm's if you're open to it. This would go a long way towards xstate usage/adoption inside my company.

[davidkpiano]

There will be a ready-made component in the XState repository itself for this.

If you want to play around with it now, it's @xstate/viz 🕵️

It's not ready for release but if you're eager, you can look around and try to make it work locally!

[bwalsh]

Tried starting @xstate/viz example. Use npm link, etc. No luck. No errors during build or start, but rendered blank page. @davidkpiano ^

[davidkpiano]

@bwalsh

It's not ready for release but if you're eager, you can look around and try to make it work locally!

It's up to you right now to figure out how to make it work. Or you can wait until it's publicly released.

[hediet]

I think this visualization would be an awesome addition for the debug visualizer extension for VS Code.

Sadly, the xstate visualizer is broken currently, otherwise I could easily integrate it!

[davidkpiano]

@hediet Check out the Keyframers stream at 5 PM today. I'll be releasing the works-anywhere visualizer soon.

[martinklepsch]

It seems that https://statecharts.io/ has examples of using a visualizer.