Skip to content
This repository has been archived by the owner on Feb 25, 2024. It is now read-only.

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

Open
lennartzellmer opened this issue May 24, 2023 · 4 comments
Open
Labels
bug Something isn't working

Comments

@lennartzellmer
Copy link

lennartzellmer commented May 24, 2023

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

@lennartzellmer lennartzellmer added the bug Something isn't working label May 24, 2023
@pckilgore
Copy link

pckilgore commented Jun 27, 2023

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

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

@davidkpiano
Copy link
Member

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

@davidkpiano davidkpiano transferred this issue from statelyai/xstate Jul 15, 2023
@lennartzellmer
Copy link
Author

@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
Copy link

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.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

3 participants