JotaiJotai

状態
原始和灵活的 React 状态管理

Babel

plugin-debug-label

Jotai 基于对象引用而不是 key（如 Recoil）。 这意味着原子没有标识符。 要识别原子，可以将 debugLabel 添加到原子，这可以在 React devtools 中找到。

但是，如果要为每个原子添加一个 debugLabel，这很快就会变得很麻烦。

这个 babel 插件根据其标识符向每个原子添加一个 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"]
}

您还可以将原子名称提供给插件：

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

可以在下面找到示例。

plugin-react-refresh

这个插件增加了对 Jotai 原子的 React Refresh 的支持。 这确保在使用 React Refresh 开发时不会重置状态。

使用

babel 配置文件:

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

您还可以将原子名称提供给插件：

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

可以在下面找到示例。

preset

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

使用

使用 babel 配置文件：

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

您还可以将原子名称提供给 presets：

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

示例

Next.js

Parcel

GitHubnpm