✨ Add lazy-loaded Jotai DevTools component

Author: romantech

.husky/pre-commit

@@ -1,4 +1 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
 pnpx lint-staged

eslint.config.js

@@ -4,14 +4,14 @@ import tseslint from 'typescript-eslint';
 import reactPlugin from 'eslint-plugin-react';
 import reactHooksPlugin from 'eslint-plugin-react-hooks';
 import reactRefreshPlugin from 'eslint-plugin-react-refresh';
-import importPlugin from 'eslint-plugin-import';
+import importPlugin from 'eslint-plugin-import-x';
 import tanstackQueryPlugin from '@tanstack/eslint-plugin-query';
 import prettierRecommended from 'eslint-plugin-prettier/recommended';
 import { fixupConfigRules } from '@eslint/compat';
 
 export default tseslint.config(
   // 1. ignores
-  { ignores: ['dist/', 'build/', 'dev-dist', 'eslint.config.js'] },
+  { ignores: ['dist/', 'build/', 'dev-dist/', 'eslint.config.js'] },
   // 2. 기본 + TS 추천 설정
   js.configs.recommended,
   tseslint.configs.recommended,
@@ -36,7 +36,7 @@ export default tseslint.config(
     },
     settings: {
       react: { version: 'detect' },
-      'import/resolver': { typescript: true, node: true },
+      'import-x/resolver': { typescript: true, node: true },
     },
     plugins: {
       'react-hooks': reactHooksPlugin,
@@ -78,8 +78,8 @@ export default tseslint.config(
       ],
 
       /** import 정렬 관련 설정 */
-      'import/no-unresolved': 'error',
-      'import/order': [
+      'import-x/no-unresolved': 'error',
+      'import-x/order': [
         'warn',
         {
           // 그룹 순서 지정

package.json

@@ -75,7 +75,7 @@
     "eslint": "^10.0.2",
     "eslint-config-prettier": "^10.1.8",
     "eslint-import-resolver-typescript": "^4.4.4",
-    "eslint-plugin-import": "^2.32.0",
+    "eslint-plugin-import-x": "^4.16.1",
     "eslint-plugin-prettier": "^5.5.5",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.0.1",

pnpm-lock.yaml

@@ -0,0 +1 @@
+export * from './jotai-devtools';

src/base/components/dev/index.ts

@@ -0,0 +1,19 @@
+import { lazy, Suspense } from 'react';
+
+import { DevToolsProps } from 'jotai-devtools';
+
+const LazyDevTools = lazy(() =>
+  Promise.all([
+    import('jotai-devtools'),
+    import('jotai-devtools/styles.css'),
+  ]).then(([m]) => ({ default: m.DevTools })),
+);
+
+export function JotaiDevTools(props: DevToolsProps) {
+  if (!import.meta.env.DEV) return null;
+  return (
+    <Suspense fallback={null}>
+      <LazyDevTools {...props} />
+    </Suspense>
+  );
+}

src/base/components/dev/jotai-devtools.tsx

@@ -1,3 +1,4 @@
 export * from './ui';
 export * from './modal';
 export * from './layout';
+export * from './dev';

src/base/components/index.ts

@@ -3,7 +3,7 @@ import { useEffect, useState } from 'react';
 import { useColorMode } from '@chakra-ui/react';
 import { type ISourceOptions } from '@tsparticles/engine';
 import { loadLinksPreset } from '@tsparticles/preset-links';
-// eslint-disable-next-line import/no-named-as-default
+// eslint-disable-next-line import-x/no-named-as-default
 import Particles, {
   initParticlesEngine,
   type IParticlesProps,

src/base/components/ui/link-particles.tsx

@@ -1,17 +1,14 @@
 import { Provider } from 'jotai';
-import { DevTools } from 'jotai-devtools';
 import { Outlet } from 'react-router-dom';
 
-import { Layout } from '@/base';
+import { JotaiDevTools, Layout } from '@/base';
 import { analysisStore } from '@/features/syntax-editor';
 
-if (import.meta.env.DEV) void import('jotai-devtools/styles.css');
-
 export default function SyntaxEditorRoot() {
   return (
     <Layout>
       <Provider store={analysisStore}>
-        <DevTools theme="dark" />
+        <JotaiDevTools store={analysisStore} theme="dark" />
         <Outlet />
       </Provider>
     </Layout>