Jotai

React 原始而灵活的状态管理

Babel

这个插件为 Jotai atoms 添加了对 React Refresh 的支持。这确保在使用 React Refresh 开发时，状态不会被重置。

使用 babel 配置文件：

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

你也可以向插件提供你的 atom 名称：

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

下面可以找到示例。

Jotai 是基于对象引用而不是键（如 Recoil）。这意味着 atoms 没有标识符。为了识别 atoms，可以向 atom 添加一个 debugLabel，这可以在 React devtools 中找到。

然而，向每个 atom 添加 debugLabel 可能会很快变得繁琐。

这个 babel 插件会根据其标识符向每个 atom 添加一个 debugLabel。

插件会将这段代码：

export const countAtom = atom(0)

转换为：

export const countAtom = atom(0)
countAtom.debugLabel = 'countAtom'

默认的导出也会被处理，基于文件命名：

// countAtom.ts
export default atom(0)

会被转换为：

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

使用 babel 配置文件：

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

你也可以向插件提供你的 atom 名称：

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

下面可以找到示例。

Jotai 附带了一个包含为 Jotai 创建的插件的 babel。

使用 babel 配置文件：

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

你也可以向预设提供你的 atom 名称：

{
  "presets": [["jotai/babel/preset", { "customAtomNames": ["customAtom"] }]]
}