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