Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Machines with parametric send don't work #26

Open
smarko82 opened this issue Nov 30, 2021 · 13 comments
Open

Machines with parametric send don't work #26

smarko82 opened this issue Nov 30, 2021 · 13 comments

Comments

@smarko82
Copy link

The following machine does not render anything in the visualizer...

export const loadingFSMSchema = createMachine({
  initial: 'idle',
  states: {
    idle: {
      entry: [actions.log((context) => '--- [loadingFSM] --- idle '), send((context) => 'aa')],
      after: {
        4000: {
          target: 'finalState',
          // actions: send('LOADING_COMPLETED'),
        },
      },
    },

    finalState: {
      entry: [actions.log('--- [loading FSM] --- finalState '), send('LOADING_COMPLETED')],
      type: 'final',
    },
  },
  on: {
    '*': {
      actions: actions.log('ahahahhdsjkl'),
    },
  },
});

Same machine does render if I don't use parametric send send((context) => ...):

export const loadingFSMSchema = createMachine({
  initial: 'idle',
  states: {
    idle: {
      entry: [actions.log((context) => '--- [loadingFSM] --- idle '), send('aa')],
      after: {
        4000: {
          target: 'finalState',
          // actions: send('LOADING_COMPLETED'),
        },
      },
    },

    finalState: {
      entry: [actions.log('--- [loading FSM] --- finalState '), send('LOADING_COMPLETED')],
      type: 'final',
    },
  },
  on: {
    '*': {
      actions: actions.log('ahahahhdsjkl'),
    },
  },
});
@mattpocock
Copy link
Contributor

@smarko82 What do you mean by 'does not render anything'?

@smarko82
Copy link
Author

smarko82 commented Dec 1, 2021

Here it's XState tool working with send("pippo") as entry action of idle state.

Screenshot 2021-12-01 at 12 42 57


Here it's XState tool not working (doesn't render anyithing) with send((context) => context.pippo) as entry action of idle state. It doesn't work also if I add context: { pippo: "foo" } as param to object passed to createMachine function.

Screenshot 2021-12-01 at 12 44 10

@mogarick
Copy link

mogarick commented Dec 8, 2021

I can add that when using entry:log("something") nothing gets rendered.
It only happens for the entry that belongs to the initial state. So in the @smarko82 example, if I use

idle:{
  entry:log("something")
}

nothing renders. But if I change the code to:

idle:{
  entry:{ actions: log("something")}
}

it renders correctly.

@mogarick
Copy link

mogarick commented Dec 8, 2021

One more thing, using

entry:{ actions: log("something")}

causes a blank screen on the stately.ia visualizer page:
Application error: a client-side exception has occurred (see the browser console for more information).

but if we use:

idle:{
  entry:log("something")
}

it works correctly. so we are in a mutually excluding workaround scenario.

And there's is another problem with the website visualizer: once your code provoques an error there is no way to fix it and the page enters in an error loop where you need to be fast enough to select all the code and delete it before the render triggers. That's because the visualizer tries to render the code as soon as it loads the page.
A better way would be to let the user decide when to render the visualization so if an error occurs there is no error loop problem.

@mattpocock
Copy link
Contributor

@mogarick Could you double-check it with this site? It will let you know if there's a parse error our side:

https://xstate-parser-example-site.vercel.app/

@mogarick
Copy link

mogarick commented Dec 8, 2021

ok. give me a minute then...

@mogarick
Copy link

mogarick commented Dec 8, 2021

entry:log("something)
image
entry:{actions:log("something")}
image

this last one shows "anonymous" for the entry, and with such value in the visualizer it throws the a client-side... error.

in the case of the vs-code extension, the no render scenario occurs when using the entry:log("something) and it works with the entry:{actions:log("something")}

@mattpocock
Copy link
Contributor

Worth noting that entry: { actions: [] } is incorrect syntax. Missed that in the comments above.

@mogarick
Copy link

mogarick commented Dec 8, 2021

Got it.

I can confirm using entry:log("Entered signIn NavState) or entry: [log("Entered signIn NavState")], works on the website visualizer.

But then the problem is on the vs-code extension visualizer.

Using entry: {actions:log("Entered signIn NavState")}, renders but entry:log("Entered signIn NavState) doesn't. Neither entry: [log("Entered signIn NavState")],.

@mogarick
Copy link

mogarick commented Dec 9, 2021

Hi @mattpocock,
About the error that occurs in the vs-code visualizer, should I open a new issue for better tracking purposes or leave this issue as the master one for that?

Thank you in advance.

@mattpocock
Copy link
Contributor

Keep this here, I'll figure it out later. It's likely an issue with the viz as opposed to the vscode extension

@mogarick
Copy link

Hi @mattpocock,

Any news about this? :)

@mattpocock
Copy link
Contributor

Apologies, doing more feature work than bug work at the moment ahead of a big release in early Feb. Will look to tackle some bugs then.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants