Developer tools for states and actions inspecting

Installation

npm install @reatom/devtools

Note that this package is published with ESM bundle only.

Usage

You typical setup would look like that.

import { createCtx, connectLogger } from '@reatom/framework'
import { connectDevtools } from '@reatom/devtools'

const ctx = createCtx()

if (import.meta.env.DEV) {
  connectLogger(ctx)
  connectDevtools(ctx)
}

// ...

connectDevtools has an optional second argument where you can specify how to process an atoms names.

type Options = {
  separator?: string | RegExp | ((name: string) => Array<string>) // default is /\.|#/
  privatePrefix?: string // default is '_'
}