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 can be found below.

plugin-react-refresh

This plugin adds support for React Refresh for Jotai atoms. This makes sure that state isn't reset, when developing using React Refresh.

Usage

With a babel configuration file:

{
  "plugins": ["jotai/babel/plugin-react-refresh"]
}

Examples can be found below.

preset

Jotai ships with a babel containing the plugins created for Jotai.

Usage

With a babel configuration file:

{
  "presets": ["jotai/babel/preset"]
}

Examples

Next.js

Parcel