unstated-debug

Debug your Unstated containers with ease

Install

$ npm install unstated-debug

Setup

Before

// AppContainer.js
import {Container} from 'unstated';

class AppContainer extends Container {
    // …
}

After

// Container.js
import {Container} from 'unstated';
import unstatedDebug from 'unstated-debug';

export default unstatedDebug()(Container);

// AppContainer.js
import Container from './Container';

class AppContainer extends Container {
    // …
}

This will make all your containers debuggable.

You can also make only individual containers debuggable:

// AppContainer.js
import {Container} from 'unstated';
import unstatedDebug from 'unstated-debug';

const makeDebuggable = unstatedDebug();

class AppContainer extends makeDebuggable(Container) {
    // …
}

Usage

When enabled, it exposes a global object UNSTATED which you can use in DevTools to explore the containers and their state.

The object contains the following properties:

• isEnabled - Same as the below option, but you can change it after init.
• logStateChanges - Same as the below option, but you can change it after init.
• containers - Your containers.
• states - The state objects of your containers.
• logState() - Logs the current state of your containers.

API

unstatedDebug([options])

options

Type: Object

isEnabled

Type: boolean
Default: true

Toggle debugging.

For example, if you use this in an Electron app, you could pass it is.development to ensure debugging is disabled in production.

logStateChanges

Type: boolean
Default: true

Logs a diff for each state change to the containers. This gives you a live insight into state changes in your app.

License

MIT © Sindre Sorhus