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.tsexport default atom(0);
其中转化为:
// countAtom.tsconst 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"] }],],},};