statelyai / xstate-viz

Visualizer for XState machines
https://stately.ai/viz
MIT License
433 stars 102 forks source link

Bug: [xstate/inspect] Send event dialogue does not send any events #413

Open lennartzellmer opened 1 year ago

lennartzellmer commented 1 year ago

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.

Bildschirm­foto 2023-05-25 um 00 04 14

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

pckilgore commented 1 year ago

It would be really nice if this worked, since it would allow significantly more rapid prototyping.

(it works fine with ?mode=viz, btw).

davidkpiano commented 1 year ago

We're working on updating the inspector to support XState v5, but I'll see if a quick fix can be made for this.

lennartzellmer commented 11 months ago

@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?

pckilgore commented 11 months ago
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.