https://github.com/rlaffers/xstate-ninja

Devtool for XState state machines
https://github.com/rlaffers/xstate-ninja

devtools-extension fsm hacktoberfest javascript state-machines statecharts xstate

Last synced: about 1 month ago
JSON representation

Devtool for XState state machines

• Host: GitHub
• URL: https://github.com/rlaffers/xstate-ninja
• Owner: rlaffers
• License: isc
• Created: 2022-05-29T14:10:59.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2023-10-21T18:45:48.000Z (about 1 year ago)
• Last Synced: 2024-10-28T06:30:44.170Z (about 2 months ago)
• Topics: devtools-extension, fsm, hacktoberfest, javascript, state-machines, statecharts, xstate
• Language: TypeScript
• Homepage:
• Size: 1.81 MB
• Stars: 69
• Watchers: 3
• Forks: 2
• Open Issues: 14
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome_xstate - XState Ninja - a powerful devtool for inspecting multiple XState state machines at the same time (Awesome XState / Tools)

README

        


  
XState Ninja

  

  
A dedicated devtool for XState state machines.

  
    

    

      

    

 

    

    

  

  




## Screenshots



  



## Quick Start

1. Install the browser extension from the [Chrome Web Store](https://chrome.google.com/webstore/detail/xstate-ninja/cogeldipmkjdfjgjkghlmhehejpmcfif) or [Firefox Add-ons](https://addons.mozilla.org/en-US/firefox/addon/xstate-ninja/).

2. Install the xstate-ninja package in your project:

```bash

npm install --save xstate-ninja xstate

```

3. Interpret your state machine with the provided **interpret** function:

```javascript

import { interpret } from 'xstate-ninja'

const actor = interpret(machine, { devTools: true })

```

For React integration, check the [@xstate-ninja/react](https://github.com/rlaffers/xstate-ninja/tree/master/packages/xstate-ninja-react) library.

For Vue integration, check the [@xstate-ninja/vue](https://github.com/rlaffers/xstate-ninja/tree/master/packages/xstate-ninja-vue) library.

## How it works

The **interpret** function is just a thin wrapper around the [core interpreter](https://xstate.js.org/docs/guides/interpretation.html#interpreter) provided by the XState library. It accepts the same argument as the XState's `interpret` function. It observes your state machines and sends updates to the XState Ninja browser extension.

## Configuration

To change default settings, import the XState Ninja instance in your project's index file:

```javascript

// in your index.ts

import { configure, LogLevels } from 'xstate-ninja'

configure({

  enabled: process.env.NODE_ENV !== 'production',

  logLevel: LogLevels.debug,

})

```

XState Ninja is a singleton, so wherever you change these settings, they will be applied throughout your application.

### `enabled`

**Type: boolean**

**Default: `true`**

Turns XState Ninja on or off. By default, tracking is always on. You may want to disable tracking in the production mode to improve performance.

### `logLevel`

**Type: LogLevels enum**

**Default: `LogLevels.error`**

Controls how much stuff is logged into console by XState Ninja.

## Upgrading from v1 → v2

If you were using the default export to configure XState Ninja, replace it with the `configure` function:

```javascript

// ❌ DEPRECATED xstate-ninja v1

import XStateNinja from 'xstate-ninja'

XStateNinja({ enabled: false })

// ✅ xstate-ninja v2

import { configure } from 'xstate-ninja'

configure({ enabled: false })

```

## Attribution

[Ninja icons created by Good Ware - Flaticon](https://www.flaticon.com/free-icons/ninja)