xstate-viz
xstate-viz copied to clipboard
Bug: [xstate/inspect] Send event dialogue does not send any events
Description
When using XState Inspect and Vue the "send event" button on the events tab does not send any event to my machine.
When I click the corresponding event button in the visualized machine on the left the transition works. The issue is that I want to attach a payload to the event. This is only possible by manually crafting the event using the "Send event" dialogue. If I click send, the event is neither sent with nor without a payload though.
It also works when you are pasting the machine directly into the visualizer without xstate inspect.
Expected result
Given I am using the xstate inspector interface when I specify an event on the "send event" dialogue and I click send then I want my selected machine to receive the specified event
Actual result
Given I am using the xstate inspector interface when I click send on the "send event" dialogue then the event is not send
Reproduction
https://codesandbox.io/s/distracted-lalande-x4nj69?file=/src/main.js:126-131
Additional context
Not sure if that makes a difference but I am using vue as a framework. Browser: Latest chrome
It would be really nice if this worked, since it would allow significantly more rapid prototyping.
(it works fine with ?mode=viz
, btw).
We're working on updating the inspector to support XState v5, but I'll see if a quick fix can be made for this.
@pckilgore I tried to append ?mode=viz
to my inspector URL but it also does not work.
Can you elaborate how you were able to fix it by appending ?mode=viz
?
export function Inspector() {
const frameRef = React.useRef<HTMLIFrameElement>(null);
React.useEffect(() => {
if (frameRef.current) {
const inspector = inspect({
url: 'https://statecharts.io/inspect?mode=viz',
iframe: frameRef.current,
});
return () => inspector?.disconnect();
}
}, []);
return <iframe ref={frameRef} />;
}
Here's the code I had used, not sure how it behaves today. Note I'm not on 5.x.