Usage of Visualizer in other places #67
Description
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.