docs(swc): Add docs for SWC plugins (pmndrs#1517)

* Add docs for SWC plugins

* fix prettier

docs/api/swc.mdx

@@ -0,0 +1,133 @@
+---
+title: SWC
+description: This doc describes SWC plugins for Jotai.
+nav: 2.05
+---
+
+⚠️ Note: These plugins are experimental. Feedback is welcome in the [Github repo](https://github.com/pmndrs/swc-jotai).
+
+## @swc-jotai/debug-label
+
+Jotai is based on object references and not keys (like Recoil). This means there's no identifier for atoms. To identify atoms, it's possible to add a `debugLabel` to an atom, which can be found in React devtools.
+
+However, this can quickly become cumbersome to add a `debugLabel` to every atom.
+
+This `SWC` plugin adds a `debugLabel` to every atom, based on its identifier.
+
+The plugin transforms this code:
+
+```js
+export const countAtom = atom(0)
+```
+
+Into:
+
+```js
+export const countAtom = atom(0)
+countAtom.debugLabel = 'countAtom'
+```
+
+Default exports are also handled, based on the file naming:
+
+```js
+// countAtom.ts
+export default atom(0)
+```
+
+Which transform into:
+
+```js
+// countAtom.ts
+const countAtom = atom(0)
+countAtom.debugLabel = 'countAtom'
+export default countAtom
+```
+
+### Usage
+
+Install it with:
+
+```sh
+npm install --save-dev @swc-jotai/debug-label
+```
+
+You can add the plugin to `.swcrc`:
+
+```json
+{
+  "jsc": {
+    "experimental": {
+      "plugins": [["@swc-jotai/debug-label", {}]]
+    }
+  }
+}
+```
+
+Or you can use the plugin with the [experimental SWC plugins feature](https://nextjs.org/docs/advanced-features/compiler#swc-plugins-experimental) in Next.js.
+
+```js
+module.exports = {
+  experimental: {
+    swcPlugins: [['@swc-jotai/debug-label', {}]],
+  },
+}
+```
+
+Examples can be found below.
+
+## @swc-jotai/react-refresh
+
+This plugin adds support for React Refresh for Jotai atoms. This makes sure that state isn't reset, when developing using React Refresh.
+
+### Usage
+
+Install it with:
+
+```sh
+npm install --save-dev @swc-jotai/react-refresh
+```
+
+You can add the plugin to `.swcrc`:
+
+```json
+{
+  "jsc": {
+    "experimental": {
+      "plugins": [["@swc-jotai/react-refresh", {}]]
+    }
+  }
+}
+```
+
+You can use the plugin with the [experimental SWC plugins feature](https://nextjs.org/docs/advanced-features/compiler#swc-plugins-experimental) in Next.js.
+
+```js
+module.exports = {
+  experimental: {
+    swcPlugins: [['@swc-jotai/react-refresh', {}]],
+  },
+}
+```
+
+Examples can be found below.
+
+## Custom atom names
+
+You can enable the plugins for your custom atoms. You can supply them to the plugins like below:
+
+```js
+module.exports = {
+  experimental: {
+    swcPlugins: [
+      ['@swc-jotai/debug-label', { atomNames: ['customAtom'] }],
+      ['@swc-jotai/react-refresh', { atomNames: ['customAtom'] }],
+    ],
+  },
+}
+```
+
+## Examples
+
+### Next.js
+
+<CodeSandbox id="ygiuzm" />

docs/guides/debugging.mdx

@@ -20,7 +20,7 @@ if (process.env.NODE_ENV !== 'production') {
 }
 ```
 
-> Jotai provides a babel plugin that adds a debugLabel automatically to every atom, which makes things easier for us. for more info check out [jotai/babel](https://github.com/pmndrs/jotai/blob/main/docs/api/babel.mdx#plugin-debug-label)
+Jotai provides both a Babel and a SWC plugin, that adds a debugLabel automatically to every atom, which makes things easier for us. For more info, check out [jotai/babel](https://github.com/pmndrs/jotai/blob/main/docs/api/babel.mdx#plugin-debug-label) and [@swc-jotai/debug-label](https://github.com/pmndrs/jotai/blob/main/docs/api/swc.mdx)
 
 ## Using React Dev Tools
 

docs/guides/nextjs.mdx

@@ -48,6 +48,10 @@ const postData = atom((get) => {
 
 Because of the nature of SSR, your app can have more instances existing in JS memory in the same time. You need to wrap your app inside a `Provider` (view more details [in the Core section](../api/core.mdx)) so that each instance has its own state and will not interfere with previous values from a default store (provider-less mode).
 
+## SWC plugins
+
+Jotai provides SWC plugins for better DX while developing with Next.js. [Find more info in the SWC section.](../api/swc.mdx)
+
 ## Examples
 
 ### Clock

docs/introduction.mdx

@@ -32,7 +32,7 @@ These guides can help with common use cases such as async behavior, TypeScript,
 
 ## API
 
-Jotai has a very minimal API, exposing only a few exports from the main `jotai` bundle. Each is explained in more detail in the Core doc. Jotai also has a nice devtool for debugging and a few helpful Babel plugins.
+Jotai has a very minimal API, exposing only a few exports from the main `jotai` bundle. Each is explained in more detail in the Core doc. Jotai also has a nice devtool for debugging and a few helpful Babel and SWC plugins.
 
 <TOC section="api" />
 

readme.md

@@ -193,6 +193,7 @@ yarn add jotai react
   - [Utils](./docs/api/utils.mdx)
   - [Devtools](./docs/api/devtools.mdx)
   - [Babel](./docs/api/babel.mdx)
+  - [SWC](./docs/api/swc.mdx)
 - Integrations
   - [Immer](./docs/integrations/immer.mdx)
   - [Optics](./docs/integrations/optics.mdx)