Babel

plugin-debug-label

Jotai is based on object references and not keys (like Recoil). This means there's no identifier for atoms. To identify atoms, it's possible to add a debugLabel to an atom, which can be found in React devtools.

However, this can quickly become cumbersome to add a debugLabel to every atom.

This babel plugin adds a debugLabel to every atom, based on its identifer.

The plugin transforms this code:

export const countAtom = atom(0);

Into:

export const countAtom = atom(0);
countAtom.debugLabel = "countAtom";

Default exports are also handled, based on the file naming:

// countAtom.ts
export default atom(0);

Which transform into:

// countAtom.ts
const countAtom = atom(0);
countAtom.debugLabel = "countAtom";
export default countAtom;

Usage

With a babel configuration file:

{
  "plugins": ["jotai/babel/plugin-debug-label"]
}

Examples

Next.js

Parcel