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