langgenius/dify
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-07-21 20:15:31 -04:00
Code Issues 775 Packages Projects Releases 10 Wiki Activity

[PR #30318] refactor(web): organize devtools components #32772

New Issue
Closed
opened 2026-02-21 20:52:03 -05:00 by yindo · 0 comments
yindo commented 2026-02-21 20:52:03 -05:00
Owner
Copy Link
Copy Source

Original Pull Request: https://github.com/langgenius/dify/pull/30318

State: closed
Merged: Yes

Summary

This PR refactors the devtools organization in the web module, standardizing the folder structure and implementing a consistent loading pattern across all tools.

Key Changes

  • Standardized Devtools Organization: Organized devtools into dedicated sub-folders (react-scan, tanstack) with encapsulated logic.
  • Implemented "Loader" Pattern:
    • Introduced Loader components (e.g., ReactScanLoader, TanStackDevtoolsLoader) that handle environment checks (IS_DEV), lazy loading (lazy), and Suspense wrapping.
    • This keeps the implementation files focused and ensures heavy devtools libraries are only loaded in development mode.
  • Cleaned up Global Contexts: Simplified web/context/query-client.tsx and web/app/layout.tsx by offloading devtools initialization and lazy loading logic to the respective loader components.
  • Improved Barrel Exports: Simplified web/app/components/devtools/index.ts using clean exports, making the module easier to consume.

Rationale

  • Better Encapsulation: Tool-specific configurations (like React Scan hacks) and dependencies are now isolated within their folders.
  • Optimized Bundle Size: Standardized lazy loading ensures devtools are split into separate chunks and not included in the main production bundle.
  • Maintainability: Consistent folder structure across all devtools makes the codebase more predictable and easier to extend.
**Original Pull Request:** https://github.com/langgenius/dify/pull/30318 **State:** closed **Merged:** Yes --- ### Summary This PR refactors the devtools organization in the `web` module, standardizing the folder structure and implementing a consistent loading pattern across all tools. ### Key Changes - **Standardized Devtools Organization**: Organized devtools into dedicated sub-folders (`react-scan`, `tanstack`) with encapsulated logic. - **Implemented "Loader" Pattern**: - Introduced `Loader` components (e.g., `ReactScanLoader`, `TanStackDevtoolsLoader`) that handle environment checks (`IS_DEV`), lazy loading (`lazy`), and `Suspense` wrapping. - This keeps the implementation files focused and ensures heavy devtools libraries are only loaded in development mode. - **Cleaned up Global Contexts**: Simplified `web/context/query-client.tsx` and `web/app/layout.tsx` by offloading devtools initialization and lazy loading logic to the respective loader components. - **Improved Barrel Exports**: Simplified `web/app/components/devtools/index.ts` using clean exports, making the module easier to consume. ### Rationale - **Better Encapsulation**: Tool-specific configurations (like React Scan hacks) and dependencies are now isolated within their folders. - **Optimized Bundle Size**: Standardized lazy loading ensures devtools are split into separate chunks and not included in the main production bundle. - **Maintainability**: Consistent folder structure across all devtools makes the codebase more predictable and easier to extend.
yindo added the pull-request label 2026-02-21 20:52:03 -05:00
yindo closed this issue 2026-02-21 20:52:03 -05:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
Knowledge Pipeline
Proposal
WIP
cloud
dependencies
feat:webapp
good first issue
outdated
performance
pull-request
Mirrored from GitHub Pull Request
 python:uv
refactor
size:L
stale
status: accepting prs
status: blocked
status: in discussion
stt & tts
vulnerablity
web
wont-fix
🌊 feat:workflow
🌚 invalid
🐞 bug
👻 feat:rag
💪 enhancement
📚 documentation
🔨 feat:tools
🙋‍♂️ question
🙏 help wanted
🤔 cant-reproduce
🤖 feat:agent
No Label pull-request
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
yindo
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: langgenius/dify#32772
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?