SWC
⚠️ Note: These plugins are experimental. Feedback is welcome in the Github repo. Please file issues in the separate repo instead of jotai
repo.
@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:
npm install --save-dev @swc-jotai/react-refresh
You can add the plugin to .swcrc
:
{"jsc": {"experimental": {"plugins": [["@swc-jotai/react-refresh", {}]]}}}
You can use the plugin with the experimental SWC plugins feature in Next.js.
module.exports = {experimental: {swcPlugins: [['@swc-jotai/react-refresh', {}]],},}
Examples can be found below.
@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:
export const countAtom = atom(0)
Into:
export const countAtom = atom(0)countAtom.debugLabel = 'countAtom'
Default exports are also handled, based on the file naming:
// countAtom.tsexport default atom(0)
Which transform into:
// countAtom.tsconst countAtom = atom(0)countAtom.debugLabel = 'countAtom'export default countAtom
Usage
Install it with:
npm install --save-dev @swc-jotai/debug-label
You can add the plugin to .swcrc
:
{"jsc": {"experimental": {"plugins": [["@swc-jotai/debug-label", {}]]}}}
Or you can use the plugin with the experimental SWC plugins feature in Next.js.
module.exports = {experimental: {swcPlugins: [['@swc-jotai/debug-label', {}]],},}
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:
module.exports = {experimental: {swcPlugins: [['@swc-jotai/debug-label', { atomNames: ['customAtom'] }],['@swc-jotai/react-refresh', { atomNames: ['customAtom'] }],],},}