mongez-atom-devtools

name

mongez-atom-devtools

description

How to enable Redux DevTools integration for `@mongez/atom` — setup, options, time-travel, and filtering high-frequency atoms. TRIGGER when: code imports or calls `enableAtomDevtools`, uses `EnableDevtoolsOptions`, or passes `name` / `ignore` / `scanInterval` options for DevTools; user asks "how do I debug atoms with Redux DevTools", "how do I time-travel atom state", or "how do I skip noisy atoms in the DevTools timeline"; `import { enableAtomDevtools } from "@mongez/atom"`. SKIP: defining atoms (use `mongez-atom-atoms` / `mongez-atom-defining-atoms`); production-only / non-debug code paths; logging atom values to console without the Redux extension; React-renderer profiling (DevTools handles state, React Profiler handles renders).

Devtools

enableAtomDevtools() pipes every atom update into the Redux DevTools browser extension. Opt-in, browser-only, tree-shaken when not imported.

Usage

import { enableAtomDevtools } from "@mongez/atom";

if (process.env.NODE_ENV !== "production") {
  enableAtomDevtools({ name: "MyApp" });
}

Options

type EnableDevtoolsOptions = {
  name?: string;                            // label shown in DevTools UI
  ignore?: Array<RegExp | string>;          // skip atoms whose key matches
  scanInterval?: number;                    // ms between scans for newly-registered atoms; default 1000
};

The returned function tears down all subscriptions and disconnects the extension. Call it on hot-reload or test teardown if needed.

What you get

• Initial snapshot. Every atom registered at call time is init-ed into the timeline.
• Update timeline. Every atom.update, change, merge produces an entry typed as ${atomKey}/update with the new value as payload.
• Reset / destroy entries. Lifecycle events show up as ${atomKey}/reset and ${atomKey}/destroy.
• Time-travel. Jumping back in the DevTools timeline restores every atom's value via silentUpdate + a synthetic update event so React subscribers re-render.

Ignoring high-frequency atoms

enableAtomDevtools({
  ignore: [
    /^mouse\./,        // every mouse atom
    /^scroll\./,
    "perf.heartbeat",  // exact string match
  ],
});

Catching late-registered atoms

Apps that lazy-load routes register atoms after enableAtomDevtools fires. A polling scan picks them up — defaults to 1s. Tune via scanInterval if you want faster discovery or less wakeup.