Skip to content

refactor(web): organize devtools components #93

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: greptile_combined_20260121_qodo_grep_cursor_copilot_1_base_refactorweb_organize_devtools_components_pr449
Choose a base branch
from
Open

refactor(web): organize devtools components #93

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
89a03da
refactor(web): organize devtools components
lyzno1 Dec 29, 2025
36d7c32
refactor(web): add React Scan loader
lyzno1 Dec 29, 2025
52682a6
refactor(web): organize devtools per tool
lyzno1 Dec 29, 2025
0bea127
refactor(web): use standardized Loader pattern for TanStack devtools
lyzno1 Dec 29, 2025
8d4d8d4
refactor: remove devtools barrel files and update direct import paths…
lyzno1 Dec 29, 2025
e3f76cb
update pr
tomerqodo Jan 21, 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)
Copy link

@greptile-apps greptile-apps bot Jan 21, 2026

Choose a reason for hiding this comment

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

style: Remove console.error statement per project rules (Rule 25: Frontend Code Must Not Use console Statements)

Suggested change
console.error('Failed to load React Scan devtools:', error)
})).catch(() => {

Context Used: Context from dashboard - CLAUDE.md (source)

Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!

Prompt To Fix With AI 
This is a comment left during a code review.
Path: web/app/components/devtools/react-scan/loader.tsx
Line: 10:10

Comment:
**style:** Remove `console.error` statement per project rules (Rule 25: Frontend Code Must Not Use console Statements)

```suggestion
  })).catch(() => {
```

**Context Used:** Context from `dashboard` - CLAUDE.md ([source](https://app.greptile.com/review/custom-context?memory=a5f96311-5bd1-49f2-9828-2ee0c089c012))

<sub>Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!</sub>

How can I resolve this? If you propose a fix, please make it concise.

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>
)
}