JotaiJotai

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

SWC

⚠️ 注意:这些插件是实验性的。 欢迎在 Github 存储库 中提供反馈。 请在单独的 repo 而不是 jotai repo 中提交问题。

@swc-jotai/debug-label

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

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

这个 SWC 插件根据每个原子的标识符向每个原子添加一个 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;

使用

安装它:

npm install --save-dev @swc-jotai/debug-label

您可以将插件添加到 .swcrc 中:

{
"jsc": {
"experimental": {
"plugins": [["@swc-jotai/debug-label", {}]]
}
}
}

或者您可以在 Next.js 中使用带有实验性 SWC 插件功能 的插件。

module.exports = {
experimental: {
swcPlugins: [["@swc-jotai/debug-label", {}]],
},
};

可以在下面找到示例。

@swc-jotai/react-refresh

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

示例

安装它:

npm install --save-dev @swc-jotai/react-refresh

您可以将插件添加到 .swcrc 中:

{
"jsc": {
"experimental": {
"plugins": [["@swc-jotai/react-refresh", {}]]
}
}
}

您可以在 Next.js 中使用具有实验性 SWC 插件功能 的插件。

module.exports = {
experimental: {
swcPlugins: [["@swc-jotai/react-refresh", {}]],
},
};

可以在下面找到示例。

自定义原子名称

您可以为自定义原子启用插件。 您可以将它们提供给如下插件:

module.exports = {
experimental: {
swcPlugins: [
["@swc-jotai/debug-label", { atomNames: ["customAtom"] }],
["@swc-jotai/react-refresh", { atomNames: ["customAtom"] }],
],
},
};

示例

Next.js