Events which caused an actor to be spawned should be marked with an icon.

If an event did not change current finite state (only actions are executed, or the transition was internal) a new state frame might not be needed.
Make sure we visualize entry/exit events correctly even if the finite state did not change.

Visualize guards on event frames.

Provide links for jumping into code from the actions and actors panel.

Hi!

I just found this great looking tool and I'd love to use it with React Native. However, my attempts so far have failed with:

TypeError: Cannot read property 'useMachine' of undefined

Would we expect the library to work with React Native?

Hello,

This extension seems really good for debuging xstate, is there any eta about the @xstate-ninja/vue package ?
I notice it on npm but he has no code

Thanks

It should be possible to set up custom event watchers (with sounds).

Thanks for this great tool!

I'm developing a React app using webpack-dev-server. The first time I start the server, Ninja works as expected. However, if I reload the page, I get the 'No state machines were found on the current page' screen, and I need to restart the dev server to get Ninja working again.

Redux dev tools pick up the transitions regardless.

Hello,

I have a machine where I store a rest client inside the context but it's seems to have circular structure and this crash the xstate-ninja and then the machine;

Uncaught (in promise) TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'Client'
    |     property 'admins' -> object with constructor 'AdminService'
    --- property 'client' closes the circle
    at JSON.stringify (<anonymous>)
    at new H (xstate-ninja.js:181:36)
    at xstate-ninja.js:398:17
    at Interpreter2.update (interpreter.js:452:9)
    at interpreter.js:106:15
    at Scheduler2.process (scheduler.js:65:7)
    at Scheduler2.schedule (scheduler.js:44:10)
    at Interpreter2.send (interpreter.js:100:23)
    at _a2.id.id (interpreter.js:1135:15)
H @ xstate-ninja.js:181
(anonyme) @ xstate-ninja.js:398
Interpreter2.update @ interpreter.js:452
(anonyme) @ interpreter.js:106
Scheduler2.process @ scheduler.js:65
Scheduler2.schedule @ scheduler.js:44
Interpreter2.send @ interpreter.js:100
_a2.id.id @ interpreter.js:1135

Machine used ;

import { assign, createMachine } from 'xstate'
import PocketBase from 'pocketbase'
import { produce } from 'immer'

export interface StoreContext {
  pocketBaseUrl: string
  pocketBase?: PocketBase
}

export const storeMachine = createMachine({
  id: 'store',

  predictableActionArguments: true,
  tsTypes: {} as import('./store.typegen').Typegen0,

  schema: {
    context: {} as StoreContext,
    events: {} as {
      type: 'Add gateway'
    },
    services: {} as {
      connectToPocketBase: {
        data: PocketBase
      }
    },
  },

  context: {
    pocketBaseUrl: import.meta.env.VITE_POCKETBASE_URL,
  },

  states: {
    init: {
      after: {
        500: 'connecting',
      },
    },

    connecting: {
      invoke: {
        src: 'connectToPocketBase',
        onDone: {
          target: 'online',
          actions: 'usePocketBase',
        },
        onError: 'offline',
      },
    },

    online: {},
    offline: {},
  },

  initial: 'init',
},
{
  actions: {
    usePocketBase: assign({
      pocketBase: (context, event) => produce(context.pocketBase, (draft) => {
        draft = event.data
      }),
    }),
  },
  services: {
    connectToPocketBase: async (context) => {
      const client = new PocketBase(context.pocketBaseUrl)
      const health = await client.health.check()
      if (health.code === 200)
        return client
      else
        throw new Error('Could not connect to PocketBase')
    },
  },
})

With XStateNinja registred I am stuck in the connecting state and without I get to the online state

Just putting:

• import { interpret } from 'xstate-ninja'

Into a page triggers this.

    at C:\GitHub\solidstart-08\node_modules\xstate-ninja\dist\xstate-ninja.umd.cjs:1:4193
    at C:\GitHub\solidstart-08\node_modules\xstate-ninja\dist\xstate-ninja.umd.cjs:1:60
    at Object.<anonymous> (C:\GitHub\solidstart-08\node_modules\xstate-ninja\dist\xstate-ninja.umd.cjs:1:233)
    at Module._compile (node:internal/modules/cjs/loader:1126:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1180:10)
    at Module.load (node:internal/modules/cjs/loader:1004:32)
    at Function.Module._load (node:internal/modules/cjs/loader:839:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:170:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:193:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:533:24)
    at async nodeImport (file:///C:/GitHub/solidstart-08/node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:53137:21)
    at async eval (/src/routes/xstate.tsx:24:31)
    at async instantiateModule (file:///C:/GitHub/solidstart-08/node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:53058:9```

Love the look of this, but I can't try it out in our production app because I'm getting this crash on one of our primary machines. Believe the error is coming from here

The child it's crashing on is a spawned callback. Let me know if you need any more info to repro.

Hey!

Recently migrated away from xstate@4 to xstate@5. Due to a breaking change in xstate5 we now need to use useActorRef instead of useInterpret. This creates an actor for a given machine logic. Does xstate-ninja/react offer a similar hook? Based on TypeScript inference there isn't. So I wonder if there is support for xstate5 in xstate-ninja/react?

For using XState Ninja with React Native + Expo
Docs: https://docs.expo.dev/debugging/devtools-plugins/
Examples: https://github.com/expo/dev-plugins

When trying to use xstate-ninja in a react/nextjs app, I am getting the following error:

event - compiled client and server successfully in 275 ms (522 modules)
error - ReferenceError: CustomEvent is not defined
    at file:///home/user/app/node_modules/xstate-ninja/dist/xstate-ninja.js:139:17
    at ModuleJob.run (node:internal/modules/esm/module_job:193:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:533:24)
    at async importModuleDynamicallyWrapper (node:internal/vm/module:438:15) {
  page: '/p/[rulesId]'
}

Hello,

I have a beavior that I don't understand, the extention tell that my machine is not a state machine but why ? But after changing it back it's now a state machine.

On initial loading :

Then I select the invocation
It's not an machine so the message is ok

Then I select back the machine
Now the context and stuff is displayed

Add an interface for dispatching arbitrary events to arbitrary actors.

Display createdAt timestamp in the EventPanel.

Detect what version of xstate-ninja is used on the page and display compatibility warnings in the extension.

Transition actions should be displayed on event frames only.
Entry/exit actions should be displayed on state nodes only. Mark their type.

Connect source and target location of events.

working on a typescript project with vscode and vite, I got this vscode error :

Could not find a declaration file for module 'xstate-ninja'. '/project/node_modules/xstate-ninja/dist/xstate-ninja.js' implicitly has an 'any' type.
  There are types at '/project/node_modules/xstate-ninja/dist/index.d.ts', but this result could not be resolved when respecting package.json "exports". The 'xstate-ninja' library may need to update its package.json or typings.ts(7016)

what should I do to fixed this issue? or this library may need to update the package.json?

Here's I found similar issue on SO https://stackoverflow.com/a/76212193

Assign actions are currently not reported by xstate. This may be solvable with the new Inspect API in v5.