⚠️ 참고: 이 플러그인은 실험적입니다. 피드백은 Github 저장소에서 환영합니다. jotai 저장소 대신 별도의 저장소에 이슈를 등록해 주세요.

@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', {}]],
  },
}

아래에서 예제를 확인할 수 있습니다.

@swc-jotai/debug-label

Jotai는 Recoil과 달리 키가 아닌 객체 참조를 기반으로 동작합니다. 이는 아톰을 식별할 수 있는 식별자가 없다는 것을 의미합니다. 아톰을 식별하기 위해 debugLabel을 아톰에 추가할 수 있으며, 이는 React 개발자 도구에서 확인할 수 있습니다.

하지만 모든 아톰에 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

Usage_b6zv2kJa3c9PSCuh9hxPu6

다음 명령어로 설치할 수 있습니다:

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', {}]],
  },
}

아래에서 예제를 확인할 수 있습니다.

커스텀 아톰 이름

여러분은 커스텀 아톰을 위한 플러그인을 활성화할 수 있습니다. 아래와 같이 플러그인에 커스텀 아톰을 제공할 수 있습니다:

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

Examples

Next.js