From 303b1687184f71025940e157373fd87aca579931 Mon Sep 17 00:00:00 2001 From: yyh Date: Mon, 29 Dec 2025 15:51:26 +0800 Subject: [PATCH 1/5] refactor(web): organize devtools components --- web/app/components/devtools/index.ts | 2 ++ web/app/components/{ => devtools}/react-scan.tsx | 0 .../components/{devtools.tsx => devtools/tanstack-devtools.tsx} | 0 web/app/layout.tsx | 2 +- 4 files changed, 3 insertions(+), 1 deletion(-) create mode 100644 web/app/components/devtools/index.ts rename web/app/components/{ => devtools}/react-scan.tsx (100%) rename web/app/components/{devtools.tsx => devtools/tanstack-devtools.tsx} (100%) diff --git a/web/app/components/devtools/index.ts b/web/app/components/devtools/index.ts new file mode 100644 index 0000000000..54c8aa8111 --- /dev/null +++ b/web/app/components/devtools/index.ts @@ -0,0 +1,2 @@ +export { ReactScan } from './react-scan' +export { TanStackDevtoolsWrapper } from './tanstack-devtools' diff --git a/web/app/components/react-scan.tsx b/web/app/components/devtools/react-scan.tsx similarity index 100% rename from web/app/components/react-scan.tsx rename to web/app/components/devtools/react-scan.tsx diff --git a/web/app/components/devtools.tsx b/web/app/components/devtools/tanstack-devtools.tsx similarity index 100% rename from web/app/components/devtools.tsx rename to web/app/components/devtools/tanstack-devtools.tsx diff --git a/web/app/layout.tsx b/web/app/layout.tsx index c182f12dc9..f04b2fe39a 100644 --- a/web/app/layout.tsx +++ b/web/app/layout.tsx @@ -8,8 +8,8 @@ import { getLocaleOnServer } from '@/i18n-config/server' import { DatasetAttr } from '@/types/feature' import { cn } from '@/utils/classnames' import BrowserInitializer from './components/browser-initializer' +import { ReactScan } from './components/devtools' import I18nServer from './components/i18n-server' -import { ReactScan } from './components/react-scan' import SentryInitializer from './components/sentry-initializer' import RoutePrefixHandle from './routePrefixHandle' import './styles/globals.css' From 39ef88b50f2c140b5d9cf12649b564ce4e1d9dd1 Mon Sep 17 00:00:00 2001 From: yyh Date: Mon, 29 Dec 2025 15:54:20 +0800 Subject: [PATCH 2/5] refactor(web): add React Scan loader --- web/app/components/devtools/index.ts | 1 + .../components/devtools/react-scan-loader.tsx | 23 +++++++++++++++++++ web/app/layout.tsx | 4 ++-- 3 files changed, 26 insertions(+), 2 deletions(-) create mode 100644 web/app/components/devtools/react-scan-loader.tsx diff --git a/web/app/components/devtools/index.ts b/web/app/components/devtools/index.ts index 54c8aa8111..029218598b 100644 --- a/web/app/components/devtools/index.ts +++ b/web/app/components/devtools/index.ts @@ -1,2 +1,3 @@ export { ReactScan } from './react-scan' +export { default as ReactScanLoader } from './react-scan-loader' export { TanStackDevtoolsWrapper } from './tanstack-devtools' diff --git a/web/app/components/devtools/react-scan-loader.tsx b/web/app/components/devtools/react-scan-loader.tsx new file mode 100644 index 0000000000..abd8160245 --- /dev/null +++ b/web/app/components/devtools/react-scan-loader.tsx @@ -0,0 +1,23 @@ +'use client' + +import { lazy, Suspense } from 'react' +import { IS_DEV } from '@/config' + +const ReactScan = lazy(() => + import('./react-scan').then(module => ({ + default: module.ReactScan, + })), +) + +const ReactScanLoader = () => { + if (!IS_DEV) + return null + + return ( + + + + ) +} + +export default ReactScanLoader diff --git a/web/app/layout.tsx b/web/app/layout.tsx index f04b2fe39a..c4306556f3 100644 --- a/web/app/layout.tsx +++ b/web/app/layout.tsx @@ -8,7 +8,7 @@ import { getLocaleOnServer } from '@/i18n-config/server' import { DatasetAttr } from '@/types/feature' import { cn } from '@/utils/classnames' import BrowserInitializer from './components/browser-initializer' -import { ReactScan } from './components/devtools' +import { ReactScanLoader } from './components/devtools' import I18nServer from './components/i18n-server' import SentryInitializer from './components/sentry-initializer' import RoutePrefixHandle from './routePrefixHandle' @@ -90,7 +90,7 @@ const LocaleLayout = async ({ className="color-scheme h-full select-auto" {...datasetMap} > - + Date: Mon, 29 Dec 2025 15:57:06 +0800 Subject: [PATCH 3/5] refactor(web): organize devtools per tool --- web/app/components/devtools/index.ts | 4 ++-- web/app/components/devtools/react-scan/index.ts | 2 ++ .../{react-scan-loader.tsx => react-scan/loader.tsx} | 6 ++---- .../devtools/{react-scan.tsx => react-scan/scan.tsx} | 0 .../{tanstack-devtools.tsx => tanstack/devtools.tsx} | 0 web/app/components/devtools/tanstack/index.ts | 1 + web/context/query-client.tsx | 2 +- 7 files changed, 8 insertions(+), 7 deletions(-) create mode 100644 web/app/components/devtools/react-scan/index.ts rename web/app/components/devtools/{react-scan-loader.tsx => react-scan/loader.tsx} (71%) rename web/app/components/devtools/{react-scan.tsx => react-scan/scan.tsx} (100%) rename web/app/components/devtools/{tanstack-devtools.tsx => tanstack/devtools.tsx} (100%) create mode 100644 web/app/components/devtools/tanstack/index.ts diff --git a/web/app/components/devtools/index.ts b/web/app/components/devtools/index.ts index 029218598b..2964b277c5 100644 --- a/web/app/components/devtools/index.ts +++ b/web/app/components/devtools/index.ts @@ -1,3 +1,3 @@ export { ReactScan } from './react-scan' -export { default as ReactScanLoader } from './react-scan-loader' -export { TanStackDevtoolsWrapper } from './tanstack-devtools' +export { ReactScanLoader } from './react-scan' +export { TanStackDevtoolsWrapper } from './tanstack' diff --git a/web/app/components/devtools/react-scan/index.ts b/web/app/components/devtools/react-scan/index.ts new file mode 100644 index 0000000000..3a328c075f --- /dev/null +++ b/web/app/components/devtools/react-scan/index.ts @@ -0,0 +1,2 @@ +export { ReactScanLoader } from './loader' +export { ReactScan } from './scan' diff --git a/web/app/components/devtools/react-scan-loader.tsx b/web/app/components/devtools/react-scan/loader.tsx similarity index 71% rename from web/app/components/devtools/react-scan-loader.tsx rename to web/app/components/devtools/react-scan/loader.tsx index abd8160245..ee702216f7 100644 --- a/web/app/components/devtools/react-scan-loader.tsx +++ b/web/app/components/devtools/react-scan/loader.tsx @@ -4,12 +4,12 @@ import { lazy, Suspense } from 'react' import { IS_DEV } from '@/config' const ReactScan = lazy(() => - import('./react-scan').then(module => ({ + import('./scan').then(module => ({ default: module.ReactScan, })), ) -const ReactScanLoader = () => { +export const ReactScanLoader = () => { if (!IS_DEV) return null @@ -19,5 +19,3 @@ const ReactScanLoader = () => { ) } - -export default ReactScanLoader diff --git a/web/app/components/devtools/react-scan.tsx b/web/app/components/devtools/react-scan/scan.tsx similarity index 100% rename from web/app/components/devtools/react-scan.tsx rename to web/app/components/devtools/react-scan/scan.tsx diff --git a/web/app/components/devtools/tanstack-devtools.tsx b/web/app/components/devtools/tanstack/devtools.tsx similarity index 100% rename from web/app/components/devtools/tanstack-devtools.tsx rename to web/app/components/devtools/tanstack/devtools.tsx diff --git a/web/app/components/devtools/tanstack/index.ts b/web/app/components/devtools/tanstack/index.ts new file mode 100644 index 0000000000..bad4aa8708 --- /dev/null +++ b/web/app/components/devtools/tanstack/index.ts @@ -0,0 +1 @@ +export { TanStackDevtoolsWrapper } from './devtools' diff --git a/web/context/query-client.tsx b/web/context/query-client.tsx index 8882048a63..e360cbed38 100644 --- a/web/context/query-client.tsx +++ b/web/context/query-client.tsx @@ -6,7 +6,7 @@ import { lazy, Suspense } from 'react' import { IS_DEV } from '@/config' const TanStackDevtoolsWrapper = lazy(() => - import('@/app/components/devtools').then(module => ({ + import('@/app/components/devtools/tanstack').then(module => ({ default: module.TanStackDevtoolsWrapper, })), ) From bb5a654f8d400a9779cf75d384743baab31ae7e8 Mon Sep 17 00:00:00 2001 From: yyh Date: Mon, 29 Dec 2025 16:09:17 +0800 Subject: [PATCH 4/5] refactor(web): use standardized Loader pattern for TanStack devtools --- web/app/components/devtools/index.ts | 5 ++--- web/app/components/devtools/tanstack/index.ts | 1 + .../components/devtools/tanstack/loader.tsx | 21 +++++++++++++++++++ web/context/query-client.tsx | 15 ++----------- 4 files changed, 26 insertions(+), 16 deletions(-) create mode 100644 web/app/components/devtools/tanstack/loader.tsx diff --git a/web/app/components/devtools/index.ts b/web/app/components/devtools/index.ts index 2964b277c5..016ef4d168 100644 --- a/web/app/components/devtools/index.ts +++ b/web/app/components/devtools/index.ts @@ -1,3 +1,2 @@ -export { ReactScan } from './react-scan' -export { ReactScanLoader } from './react-scan' -export { TanStackDevtoolsWrapper } from './tanstack' +export * from './react-scan' +export * from './tanstack' diff --git a/web/app/components/devtools/tanstack/index.ts b/web/app/components/devtools/tanstack/index.ts index bad4aa8708..b73550d5c7 100644 --- a/web/app/components/devtools/tanstack/index.ts +++ b/web/app/components/devtools/tanstack/index.ts @@ -1 +1,2 @@ export { TanStackDevtoolsWrapper } from './devtools' +export { TanStackDevtoolsLoader } from './loader' diff --git a/web/app/components/devtools/tanstack/loader.tsx b/web/app/components/devtools/tanstack/loader.tsx new file mode 100644 index 0000000000..673ea0da90 --- /dev/null +++ b/web/app/components/devtools/tanstack/loader.tsx @@ -0,0 +1,21 @@ +'use client' + +import { lazy, Suspense } from 'react' +import { IS_DEV } from '@/config' + +const TanStackDevtoolsWrapper = lazy(() => + import('./devtools').then(module => ({ + default: module.TanStackDevtoolsWrapper, + })), +) + +export const TanStackDevtoolsLoader = () => { + if (!IS_DEV) + return null + + return ( + + + + ) +} diff --git a/web/context/query-client.tsx b/web/context/query-client.tsx index e360cbed38..45c7f4d612 100644 --- a/web/context/query-client.tsx +++ b/web/context/query-client.tsx @@ -2,14 +2,7 @@ import type { FC, PropsWithChildren } from 'react' import { QueryClient, QueryClientProvider } from '@tanstack/react-query' -import { lazy, Suspense } from 'react' -import { IS_DEV } from '@/config' - -const TanStackDevtoolsWrapper = lazy(() => - import('@/app/components/devtools/tanstack').then(module => ({ - default: module.TanStackDevtoolsWrapper, - })), -) +import { TanStackDevtoolsLoader } from '@/app/components/devtools' const STALE_TIME = 1000 * 60 * 30 // 30 minutes @@ -26,11 +19,7 @@ export const TanstackQueryInitializer: FC = (props) => { return ( {children} - {IS_DEV && ( - - - - )} + ) } From b9cfef854ae96b43b8a5a470f015322532146754 Mon Sep 17 00:00:00 2001 From: yyh Date: Mon, 29 Dec 2025 16:16:35 +0800 Subject: [PATCH 5/5] refactor: remove devtools barrel files and update direct import paths for devtool loaders --- web/app/components/devtools/index.ts | 2 -- web/app/components/devtools/react-scan/index.ts | 2 -- web/app/components/devtools/tanstack/index.ts | 2 -- web/app/layout.tsx | 2 +- web/context/query-client.tsx | 2 +- 5 files changed, 2 insertions(+), 8 deletions(-) delete mode 100644 web/app/components/devtools/index.ts delete mode 100644 web/app/components/devtools/react-scan/index.ts delete mode 100644 web/app/components/devtools/tanstack/index.ts diff --git a/web/app/components/devtools/index.ts b/web/app/components/devtools/index.ts deleted file mode 100644 index 016ef4d168..0000000000 --- a/web/app/components/devtools/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './react-scan' -export * from './tanstack' diff --git a/web/app/components/devtools/react-scan/index.ts b/web/app/components/devtools/react-scan/index.ts deleted file mode 100644 index 3a328c075f..0000000000 --- a/web/app/components/devtools/react-scan/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { ReactScanLoader } from './loader' -export { ReactScan } from './scan' diff --git a/web/app/components/devtools/tanstack/index.ts b/web/app/components/devtools/tanstack/index.ts deleted file mode 100644 index b73550d5c7..0000000000 --- a/web/app/components/devtools/tanstack/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { TanStackDevtoolsWrapper } from './devtools' -export { TanStackDevtoolsLoader } from './loader' diff --git a/web/app/layout.tsx b/web/app/layout.tsx index c4306556f3..fa1f7d48b5 100644 --- a/web/app/layout.tsx +++ b/web/app/layout.tsx @@ -8,7 +8,7 @@ import { getLocaleOnServer } from '@/i18n-config/server' import { DatasetAttr } from '@/types/feature' import { cn } from '@/utils/classnames' import BrowserInitializer from './components/browser-initializer' -import { ReactScanLoader } from './components/devtools' +import { ReactScanLoader } from './components/devtools/react-scan/loader' import I18nServer from './components/i18n-server' import SentryInitializer from './components/sentry-initializer' import RoutePrefixHandle from './routePrefixHandle' diff --git a/web/context/query-client.tsx b/web/context/query-client.tsx index 45c7f4d612..9562686f6f 100644 --- a/web/context/query-client.tsx +++ b/web/context/query-client.tsx @@ -2,7 +2,7 @@ import type { FC, PropsWithChildren } from 'react' import { QueryClient, QueryClientProvider } from '@tanstack/react-query' -import { TanStackDevtoolsLoader } from '@/app/components/devtools' +import { TanStackDevtoolsLoader } from '@/app/components/devtools/tanstack/loader' const STALE_TIME = 1000 * 60 * 30 // 30 minutes