feat: add preload/build analysis tooling and richer devtools instrumentation#93
Merged
gioboa merged 6 commits intoQwikDev:mainfrom Mar 31, 2026
Merged
feat: add preload/build analysis tooling and richer devtools instrumentation#93gioboa merged 6 commits intoQwikDev:mainfrom
gioboa merged 6 commits intoQwikDev:mainfrom
Conversation
- Introduced ComponentCard for displaying individual component performance metrics. - Added HookDetailsPanel to show detailed hook performance data. - Created PerformanceOverview to summarize overall performance metrics. - Implemented StatCard for displaying individual statistics in a card format. - Added utility function formatMs for formatting milliseconds into human-readable strings. - Enhanced RenderTree with new components for better state and code visualization. - Introduced filtering capabilities for hooks in the RenderTree. - Created utility functions for determining code language and filtering hook trees. - Refactored existing components to improve code organization and readability.
- Added `computePreloadViewModel` function to aggregate preload data. - Introduced `PreloadViewModel`, `PreloadRowVm`, and related types for structured data representation. - Implemented filtering functions for preload rows based on status and phase. - Created utility functions for summarizing hrefs and calculating average durations. - Added tests for `findBestQrlRequestMatch` to ensure correct matching logic for QRL requests. - Established a new preload runtime in `preloads.ts` to manage preload entries and their states. - Integrated performance resource timing to enhance preload tracking.
🦋 Changeset detectedLatest commit: 5ccb7c3 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
Collaborator
Author
|
…iframe functionality - Removed redundant entry from .gitignore. - Updated package version to 0.2.8 in package.json. - Refactored Inspect component to correctly load iframe source based on app root. - Improved iframe theme styles for better visibility and user experience.
commit: |
There was a problem hiding this comment.
Pull request overview
This PR is a large DevTools refactor that reorganizes the UI into smaller modules, adds new DevTools features (Preloads + Build Analysis + Inspect), and extends the plugin/RPC + shared kit types/runtime needed to support those features.
Changes:
- Refactors DevTools UI entrypoint/state/rpc wiring and restructures major feature pages into smaller components/utilities.
- Adds Preloads tracking (runtime collector + UI + SSR injection helpers) and a Build Analysis viewer that can trigger/report a visualizer build.
- Refactors shared kit RPC/type infrastructure (new RPC core helper, new types/constants/globals) and updates plugin parsing/instrumentation utilities.
Reviewed changes
Copilot reviewed 65 out of 75 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| pnpm-lock.yaml | Adds lock entries for new dependencies (visualizer + transitive deps). |
| packages/ui/tsconfig.json | Enables forceConsistentCasingInFileNames. |
| packages/ui/src/types/state.ts | Re-exports DevTools state/tab types from new location. |
| packages/ui/src/runtime/preloads.ts | Adds browser runtime to record/pre-correlate preloads and emit update events. |
| packages/ui/src/runtime/preloads.test.ts | Unit tests for QRL/preload matching heuristics. |
| packages/ui/src/root.tsx | Updates DevTools import path. |
| packages/ui/src/index.ts | Updates DevTools export path. |
| packages/ui/src/features/RenderTree/utils/getValueColorClass.ts | Extracts value color logic into a utility. |
| packages/ui/src/features/RenderTree/utils/getCodeLanguage.ts | Extracts language inference utility. |
| packages/ui/src/features/RenderTree/utils/filterHookTree.ts | Extracts hook tree filtering utility. |
| packages/ui/src/features/RenderTree/types.ts | Adds CodeModule type. |
| packages/ui/src/features/RenderTree/RenderTree.tsx | Refactors RenderTree feature into smaller components/utilities. |
| packages/ui/src/features/RenderTree/components/StateTreeNodeLabel.tsx | Extracted node label renderer component. |
| packages/ui/src/features/RenderTree/components/RenderTreeTabs.tsx | Extracted tabs component. |
| packages/ui/src/features/RenderTree/components/HookFiltersCard.tsx | Extracted hook filters UI component. |
| packages/ui/src/features/RenderTree/components/HighlightedCodeList.tsx | Extracted highlighted code list component. |
| packages/ui/src/features/Preloads/Preloads.tsx | Adds Preloads feature UI with filtering + table display. |
| packages/ui/src/features/Preloads/computePreloadViewModel.ts | Adds view-model computation + filtering for preloads UI. |
| packages/ui/src/features/Preloads/computePreloadViewModel.test.ts | Unit tests for preloads view-model logic. |
| packages/ui/src/features/Performance/utils/formatMs.ts | Extracts ms formatting utility. |
| packages/ui/src/features/Performance/Performance.tsx | Refactors Performance feature to extracted subcomponents. |
| packages/ui/src/features/Performance/components/StatCard.tsx | Extracted stat card component. |
| packages/ui/src/features/Performance/components/PerformanceOverview.tsx | Extracted performance overview component. |
| packages/ui/src/features/Performance/components/HookDetailsPanel.tsx | Extracted hook details panel component. |
| packages/ui/src/features/Performance/components/ComponentCard.tsx | Extracted component list card component. |
| packages/ui/src/features/Overview/Overview.tsx | Updates navigation target for a card click. |
| packages/ui/src/features/Inspect/Inspect.tsx | Adds Inspect feature embedding inspector iframe with theme sync. |
| packages/ui/src/features/Inspect/iframe-theme.ts | Adds iframe theme sync + style injection logic. |
| packages/ui/src/features/Inspect/constant.ts | Adds inspector URL constant. |
| packages/ui/src/features/CodeBreak/StateParser.tsx | Adds state parser UI using internal Qwik helpers + Shiki. |
| packages/ui/src/features/CodeBreak/HtmlParser.tsx | Adds HTML parser UI using internal Qwik helpers + Shiki. |
| packages/ui/src/features/CodeBreak/CodeBreak.tsx | Renames/export refactor and minor UI cleanup. |
| packages/ui/src/features/BuildAnalysis/BuildAnalysis.tsx | Adds Build Analysis UI that embeds report + triggers build via RPC. |
| packages/ui/src/devtools/tabs.tsx | Centralizes tab definitions/icons. |
| packages/ui/src/devtools/state.ts | Introduces new DevTools state model (bounds/fullscreen/etc.). |
| packages/ui/src/devtools/rpc.ts | Extracts RPC connection + data loading logic. |
| packages/ui/src/devtools/QwikDevtools.tsx | New main DevTools component wiring state + runtime + data load. |
| packages/ui/src/devtools/DevtoolsSidebar.tsx | Extracts sidebar rendering from tab config. |
| packages/ui/src/devtools/DevtoolsContent.tsx | Centralizes tab content switching and titles. |
| packages/ui/src/devtools.tsx | Re-exports the new DevTools entry component. |
| packages/ui/src/components/ThemeToggle/themeToggle.css | Adds missing theme toggle CSS. |
| packages/ui/src/components/ThemeToggle/QwikThemeToggle.tsx | Fixes CSS import path/typo. |
| packages/ui/src/components/Icons/Icons.tsx | Adds icons used by new tabs/panel controls. |
| packages/ui/src/components/DevtoolsPanel/DevtoolsPanel.tsx | Major panel refactor: drag/resize + fullscreen + header controls. |
| packages/ui/src/components/DevtoolsButton/DevtoolsButton.tsx | Minor import cleanup. |
| packages/plugin/src/virtualmodules/virtualModules.ts | Formatting cleanup. |
| packages/plugin/src/rpc/index.ts | Registers build analysis RPC functions. |
| packages/plugin/src/plugin/statistics/ssrPerfMiddleware.ts | Adds SSR HTML response injection for perf + preload snapshots. |
| packages/plugin/src/plugin/statistics/ssrPerfMiddleware.test.ts | Unit tests for SSR middleware helpers. |
| packages/plugin/src/plugin/statistics/sourceTransforms.ts | Extracts statistics source transforms into a helper module. |
| packages/plugin/src/plugin/statistics/constants.ts | Adds constants/logging for statistics helpers. |
| packages/plugin/src/plugin/statistics.ts | Refactors plugin to use extracted middleware/transforms. |
| packages/plugin/src/plugin/index.ts | Adds build-analysis plugins to the plugin list. |
| packages/plugin/src/parse/types.ts | Refactors edit task types (introduces SourceEdit). |
| packages/plugin/src/parse/traverse.ts | Formatting/refactor + moves component-body logic out. |
| packages/plugin/src/parse/sourceEdits.ts | Adds shared edit-application helper. |
| packages/plugin/src/parse/parse.ts | Updates parse wiring to use moved component body helper. |
| packages/plugin/src/parse/initInjector.ts | Uses applySourceEdits and moved ComponentBodyRange type. |
| packages/plugin/src/parse/hookTracker.ts | Uses applySourceEdits and refactors hook extraction helpers. |
| packages/plugin/src/parse/componentBodies.ts | New helper to find component body ranges. |
| packages/plugin/src/build-analysis/index.ts | Implements build analysis report generation + serving + RPC hooks. |
| packages/plugin/package.json | Adds rollup-plugin-visualizer dependency. |
| packages/playgrounds/vite.config.mts | Adds router service-worker to Rollup externals. |
| packages/kit/src/types.ts | Adds new RPC types/methods (build analysis, module lookup, etc.). |
| packages/kit/src/server.ts | Uses shared serialized RPC helper. |
| packages/kit/src/rpc-core.ts | New shared birpc+SuperJSON wiring. |
| packages/kit/src/globals.ts | Adds globals/types for preload tracking + SSR snapshot storage. |
| packages/kit/src/global-store.ts | Adds helper for global accessor wiring. |
| packages/kit/src/context.ts | Refactors context storage to use global accessors. |
| packages/kit/src/constants.ts | Refactors hook lists + adds preloads update event constant. |
| packages/kit/src/client.ts | Uses shared serialized RPC helper. |
| .gitignore | Updates ignore patterns. |
| .changeset/huge-clubs-rest.md | Adds a changeset entry (currently describing only a subset of changes). |
| .agent/skills/qwik/SKILL.md | Adds Qwik core development workflow “skill” documentation. |
| .agent/skills/qwik/AGENTS.md | Adds detailed Qwik core development guide. |
Files not reviewed (1)
- pnpm-lock.yaml: Language not supported
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
…ormance tracking - Introduced new `Preloads` and `Build Analysis` panels in DevTools for improved insights. - Added runtime instrumentation for SSR/CSR performance and preload tracking. - Expanded plugin capabilities to generate build-analysis reports and enforce security around RPC calls. - Updated SSR performance middleware to normalize accept headers for better request handling.
…ormance tracking - Introduced new `Preloads` and `Build Analysis` panels in DevTools for improved insights. - Added runtime instrumentation for SSR/CSR performance and preload tracking. - Expanded plugin capabilities to generate build-analysis reports and enforce security around RPC calls. - Updated SSR performance middleware to normalize accept headers for better request handling.
gioboa
changed the title
gioboa
reviewed
Mar 31, 2026
Member
gioboa
left a comment
gioboa
left a comment
There was a problem hiding this comment.
@JerryWu1234 Thanks for the amazing refactor 👏
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What is it?
Description
Checklist
pnpm change