SWC

⚠️ 注意：这些插件处于实验阶段。欢迎在 Github 仓库 提供反馈。请在单独的仓库中提交问题，而不是在 jotai 仓库中。

@swc-jotai/react-refresh

此插件为 Jotai atoms 添加了对 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', {}]],
  },
}

下面可以找到示例。

@swc-jotai/debug-label

Jotai 是基于对象引用而不是键（如 Recoil）。这意味着 atoms 没有标识符。要识别 atoms，可以向 atom 添加一个 debugLabel，这可以在 React devtools 中找到。

然而，向每个 atom 添加 debugLabel 很快就会变得繁琐。

这个 SWC 插件会根据其标识符向每个 atom 添加一个 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', {}]],
  },
}

下面可以找到示例。

自定义 atom 名称

你可以为你的自定义 atoms 启用插件。你可以像下面这样将它们提供给插件：

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

示例

Next.js