Skip to content

refactor(web): organize devtools components #8

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
tomerqodo wants to merge 6 commits into
base: codex_full_base_refactorweb_organize_devtools_components_pr8
Choose a base branch
from
Open

refactor(web): organize devtools components #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
071093d
refactor(web): organize devtools components
lyzno1 Dec 29, 2025
7ce498d
refactor(web): add React Scan loader
lyzno1 Dec 29, 2025
281b063
refactor(web): organize devtools per tool
lyzno1 Dec 29, 2025
24968c0
refactor(web): use standardized Loader pattern for TanStack devtools
lyzno1 Dec 29, 2025
61057da
refactor: remove devtools barrel files and update direct import paths…
lyzno1 Dec 29, 2025
8edc4cf
update pr
tomerqodo Jan 25, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 24 additions & 0 deletions web/app/components/devtools/react-scan/loader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
'use client'

import { lazy, Suspense } from 'react'
import { IS_DEV } from '@/config'

const ReactScan = lazy(() =>
import('./scan').then(module => ({
default: module.ReactScan,
})).catch((error) => {
console.error('Failed to load React Scan devtools:', error)
Comment on lines +9 to +10

@chatgpt-codex-connector chatgpt-codex-connector Bot Jan 25, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Avoid console.error to satisfy no-console rule

This introduces a console.error in a production component, which violates the repo’s frontend “no console statements” rule (see top-level AGENTS.md). ESLint’s no-console warning is enforced in this codebase, so keeping console.error here will cause lint failures in CI or local checks; consider using the app’s logging mechanism or silently returning null for devtools load failures.

Useful? React with 👍 / 👎.

return { default: () => null }
}),
)

export const ReactScanLoader = () => {
if (!IS_DEV)
return null

return (
<Suspense fallback={<div className="text-xs text-gray-500">Loading devtools...</div>}>
<ReactScan />
</Suspense>
)
}
0 web/app/components/react-scan.tsx → ...p/components/devtools/react-scan/scan.tsx
View file
Open in desktop
File renamed without changes.
0 web/app/components/devtools.tsx → ...components/devtools/tanstack/devtools.tsx
View file
Open in desktop
File renamed without changes.
23 changes: 23 additions & 0 deletions web/app/components/devtools/tanstack/loader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
'use client'

import { lazy, Suspense } from 'react'
import { IS_DEV } from '@/config'

const TanStackDevtoolsWrapper = lazy(() =>
import('./devtools').then(module => ({
default: module.TanStackDevtoolsWrapper,
})).catch(() => {
return { default: () => null }
}),
)

export const TanStackDevtoolsLoader = () => {
if (!IS_DEV)
return null

return (
<Suspense fallback={null}>
<TanStackDevtoolsWrapper />
</Suspense>
)
}
4 changes: 2 additions & 2 deletions web/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 { ReactScanLoader } from './components/devtools/react-scan/loader'
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'
Expand Down Expand Up @@ -90,7 +90,7 @@ const LocaleLayout = async ({
className="color-scheme h-full select-auto"
{...datasetMap}
>
<ReactScan />
<ReactScanLoader />
<ThemeProvider
attribute="data-theme"
defaultTheme="system"
Expand Down
15 changes: 2 additions & 13 deletions web/context/query-client.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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').then(module => ({
default: module.TanStackDevtoolsWrapper,
})),
)
import { TanStackDevtoolsLoader } from '@/app/components/devtools/tanstack/loader'

const STALE_TIME = 1000 * 60 * 30 // 30 minutes

Expand All @@ -25,12 +18,8 @@ export const TanstackQueryInitializer: FC<PropsWithChildren> = (props) => {
const { children } = props
return (
<QueryClientProvider client={client}>
<TanStackDevtoolsLoader />
{children}
{IS_DEV && (
<Suspense fallback={null}>
<TanStackDevtoolsWrapper />
</Suspense>
)}
</QueryClientProvider>
)
}