SolidJS Devtools '/production' export #9564
Conversation
|
View your CI Pipeline Execution ↗ for commit ab610c4
☁️ Nx Cloud last updated this comment at |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #9564 +/- ##
==========================================
- Coverage 45.14% 8.51% -36.64%
==========================================
Files 208 4 -204
Lines 8316 47 -8269
Branches 1878 11 -1867
==========================================
- Hits 3754 4 -3750
+ Misses 4115 35 -4080
+ Partials 447 8 -439 🚀 New features to boost your workflow:
|
that’s not true, we have documentation on how to lazy load devtools in production: https://tanstack.com/query/v5/docs/framework/react/devtools#devtools-in-production |
|
Ahh, I came from the SolidJS side which doesn't have a similar feature and assumed it was unimplemented. Sorry! Will update this PR to implement the |
WalkthroughExports in packages/solid-query-devtools/package.json were restructured into nested "." and "./production" entries with updated build paths and an explicit "./package.json". A new src/production.tsx adds SSR-safe client-only dynamic wrappers for devtools components and re-exports a type. tsup.config.ts now builds two entries: index.tsx and production.tsx. Changes
Sequence Diagram(s)sequenceDiagram
participant Consumer
participant Resolver as Package Exports Resolver
participant Runtime as App Runtime (SSR/Client)
participant ClientOnly as ClientOnly Loader
participant Devtools as Devtools Modules
Consumer->>Resolver: import "solid-query-devtools" or "solid-query-devtools/production"
Resolver-->>Consumer: resolve to build/index/* or build/production/*
Consumer->>Runtime: render <SolidQueryDevtools/>
Runtime->>ClientOnly: call client-only wrapper
ClientOnly->>Devtools: dynamic import('./devtools' or './devtoolsPanel')
Devtools-->>ClientOnly: return loaded component
ClientOnly-->>Runtime: mount component on client
Runtime-->>Consumer: devtools UI rendered
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Poem
Tip 🔌 Remote MCP (Model Context Protocol) integration is now available!Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats. ✨ Finishing Touches🧪 Generate unit tests
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
packages/solid-query-devtools/src/index.tsx (2)
12-13: Expose the optional fallback prop in the public type (nice-to-have)clientOnly supports a fallback prop at runtime, but the exported type is typeof SolidQueryDevtoolsCompPanel (which doesn’t include fallback). Consider reflecting fallback in the type to improve DX.
You can adjust the typing like this (adds one import outside this hunk):
+import type { Component, JSX } from 'solid-js' +import type { DevtoolsPanelOptions } from './devtoolsPanel'Then change the export to:
-export const SolidQueryDevtoolsPanel: typeof SolidQueryDevtoolsCompPanel = - clientOnly(() => import('./devtoolsPanel')) +export const SolidQueryDevtoolsPanel: Component< + DevtoolsPanelOptions & { fallback?: JSX.Element } +> = clientOnly(() => import('./devtoolsPanel'))Alternatively, keep current typing but document that a fallback prop is accepted at runtime.
12-13: Plan the Solid “/production” entrypoint for parity with React docsGiven the discussion, please confirm a /production export for Solid mirrors React’s pattern (docs link in PR comments). If that’s part of this effort, ensure package.json exports and docs are updated accordingly so consumers have a documented path to include the panel in production.
Happy to draft the exports map and doc snippet for Solid’s /production entrypoint if you want.
packages/react-query-devtools/src/index.ts (1)
13-14: Call out potential behavior change for consumers rendering the Panel unconditionallyPreviously, ReactQueryDevtoolsPanel would no-op in production; now it will render. If any consumers relied on the old behavior, this is a visible change. Consider a changelog note and confirm the intended semver impact. Also ensure the docs clearly show how to include the Panel in production (and how to keep it out if desired).
I can propose a short changelog entry and doc update to the “Devtools in production” section covering the Panel specifically.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (2)
packages/react-query-devtools/src/index.ts(1 hunks)packages/solid-query-devtools/src/index.tsx(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
packages/solid-query-devtools/src/index.tsx (2)
packages/solid-query-devtools/src/devtoolsPanel.tsx (1)
SolidQueryDevtoolsPanel(43-85)packages/solid-query-devtools/src/clientOnly.tsx (1)
clientOnly(17-43)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: Test
- GitHub Check: Preview
🔇 Additional comments (2)
packages/solid-query-devtools/src/index.tsx (1)
12-13: Un-gating SolidQueryDevtoolsPanel via clientOnly is SSR-safe and matches the PR goalAlways using clientOnly(() => import('./devtoolsPanel')) removes the dev-only guard while keeping SSR safety (server returns fallback). This lets consumers opt-in to include the panel in production, as intended.
packages/react-query-devtools/src/index.ts (1)
13-14: Directly exposing ReactQueryDevtoolsPanel is straightforward and aligns with the opt-in production usageRemoving the NODE_ENV guard for the Panel export enables intentional inclusion in production builds while keeping ReactQueryDevtools itself gated. This matches the intent of the PR.
oscartbeaumont
force-pushed
the
devtools-in-prod
branch
from
896ef1b to
d089b91
Compare
|
I will fix up the CodeRabbit comments and test failure in the morning! |
There was a problem hiding this comment.
Actionable comments posted: 2
🔭 Outside diff range comments (1)
packages/solid-query-devtools/tsup.config.ts (1)
23-25: Refactor tsup outDir to match nested export pathsThe override
tsup_option.outDir = 'build'flattens both entry outputs intobuild/, which conflicts with yourpackage.jsonexports (./build/index/...vs./build/production/...) and risks overwriting files. Update the config so each entry emits into its own subfolder:• File:
packages/solid-query-devtools/tsup.config.ts
• Lines: 23–25Apply this diff:
- tsup_options.forEach((tsup_option) => { - tsup_option.outDir = 'build' - }) + tsup_options.forEach((tsup_option, i) => { + const entry = preset_options.entries?.[i]?.entry + if (typeof entry === 'string') { + // derive "index" or "production" from "src/<name>.tsx" + const base = entry.split('/').pop()?.replace(/\.(t|j)sx?$/, '') + if (base) tsup_option.outDir = `build/${base}` + } + })This aligns outputs with your export map:
exports["."].*→./build/index/...exports["./production"].*→./build/production/...
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (3)
packages/solid-query-devtools/package.json(1 hunks)packages/solid-query-devtools/src/production.tsx(1 hunks)packages/solid-query-devtools/tsup.config.ts(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
packages/solid-query-devtools/src/production.tsx (1)
packages/solid-query-devtools/src/clientOnly.tsx (1)
clientOnly(17-43)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: Preview
- GitHub Check: Test
🔇 Additional comments (4)
packages/solid-query-devtools/tsup.config.ts (1)
5-14: Good call adding a second entry for production wrappersAdding
src/production.tsxas its own entry aligns with the new./productionexport block and enables distinct build outputs. Keepingdev_entry: truefor both entries is consistent with thedevelopmentsub-exports.packages/solid-query-devtools/src/production.tsx (1)
12-12: Re-export of DevtoolsPanelOptions is correctKeeping the type re-export here ensures parity with the main entry and helps consumers avoid deep imports.
packages/solid-query-devtools/package.json (2)
40-58: Exports restructure for “.” looks consistent with multi-entry outputThe nested
build/index/...targets match the intent to separate artifacts by entry. This aligns with addingsrc/index.tsxas its own entry.
78-78: Explicit./package.jsonexport is a good additionThis improves compatibility with tooling that reads package metadata via the exports map.
oscartbeaumont
changed the title
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
packages/solid-query-devtools/package.json (3)
38-38: Consider removing empty "browser" fieldIf you’re not relying on browser field mappings, the empty object can be dropped to reduce noise.
40-58: Add CJS types mapping for the root export (“.”) in solid-query-devtoolsTo match other packages’ CJS exports and improve DX, the root
requirebranch should surface its declaration file rather than being a bare string.packages/solid-query-devtools/package.json
• Replace the rootrequireentry underexports["."]with an object that includes bothtypesanddefault.Suggested diff:
"exports": { ".": { "@tanstack/custom-condition": "./src/index.tsx", "solid": { "development": "./build/index/dev.jsx", "import": "./build/index/index.jsx" }, "development": { "import": { "types": "./build/index/index.d.ts", "default": "./build/index/dev.js" }, "require": "./build/index/dev.cjs" }, "import": { "types": "./build/index/index.d.ts", "default": "./build/index/index.js" }, - "require": "./build/index/index.cjs" + "require": { + "types": "./build/index/index.d.cts", + "default": "./build/index/index.cjs" + } }, /* …production deep exports… */
78-86: Consider adding symmetric deep-export for the non-production buildThe package currently exposes
./build/production/index.js(with its types) for deep-imports, but there’s no matching entry for the main build at./build/index/index.js. If you need consumers to deep-import the non-production bundle, you can add:"exports": { …, "./build/production/index.js": { "import": { "types": "./build/production/index.d.ts", "default": "./build/production/index.js" }, "require": { "types": "./build/production/index.d.cts", "default": "./build/production/index.cjs" } }, + "./build/index/index.js": { + "import": { + "types": "./build/index/index.d.ts", + "default": "./build/index/index.js" + }, + "require": { + "types": "./build/index/index.d.cts", + "default": "./build/index/index.cjs" + } + }, "./package.json": "./package.json" }• If your build doesn’t emit
index.d.cts, remove or adjust therequire.typesentry accordingly.
• This is optional—skip it if you don’t intend to support direct deep-imports of the non-production bundle.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (2)
packages/solid-query-devtools/package.json(1 hunks)packages/solid-query-devtools/tsup.config.ts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- packages/solid-query-devtools/tsup.config.ts
🧰 Additional context used
🧠 Learnings (2)
📓 Common learnings
Learnt from: oscartbeaumont
PR: TanStack/query#9564
File: packages/solid-query-devtools/src/production.tsx:2-3
Timestamp: 2025-08-19T03:18:18.282Z
Learning: In the solid-query-devtools package, the codebase uses a pattern of type-only default imports combined with typeof for component type annotations (e.g., `import type SolidQueryDevtoolsComp from './devtools'` followed by `typeof SolidQueryDevtoolsComp`). This pattern is consistently used across index.tsx and production.tsx files, and the maintainers prefer consistency over changing this approach.
📚 Learning: 2025-08-19T03:18:18.282Z
Learnt from: oscartbeaumont
PR: TanStack/query#9564
File: packages/solid-query-devtools/src/production.tsx:2-3
Timestamp: 2025-08-19T03:18:18.282Z
Learning: In the solid-query-devtools package, the codebase uses a pattern of type-only default imports combined with typeof for component type annotations (e.g., `import type SolidQueryDevtoolsComp from './devtools'` followed by `typeof SolidQueryDevtoolsComp`). This pattern is consistently used across index.tsx and production.tsx files, and the maintainers prefer consistency over changing this approach.
Applied to files:
packages/solid-query-devtools/package.json
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: Test
- GitHub Check: Preview
🔇 Additional comments (4)
packages/solid-query-devtools/package.json (4)
35-37: Top-level main/module/types realigned to nested build outputs — LGTMThese now correctly point to ./build/index/index.* and align with the nested “.” export. Good catch to prevent resolution mismatches.
59-77: New “./production” export mirrors React package and looks coherent — LGTMThe conditional layout, Solid runtime targets (dev.jsx/index.jsx), and types/default mapping are consistent and SSR-safe in conjunction with the new production entry build.
88-88: Explicit “./package.json” export — LGTMGood addition for tooling compatibility.
90-94: Publishing src alongside build aligns with custom-condition source mapping — LGTMIncluding "src" (excluding tests) fits the pattern where bundlers may pick source via the custom condition.
|
This should be updated and ready to go but could be worth getting a review from anyone with better experience on |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
packages/solid-query-devtools/.attw.json (1)
1-3: Document the rationale for ignoringno-resolution
- This
.attw.jsonconfiguration is consistent with other devtools packages (react-query-devtools, vue-query-devtools, angular-query-devtools), all of which ignoreno-resolution.- The
filesfield inpackages/solid-query-devtools/package.json(["build","src","!src/__tests__"]) does not include.attw.json, so this rule won’t be published.- Blanket ignores can mask genuine resolution errors. Since Attw doesn’t support per-rule scoping of
ignoreRules, please add a comment here (or in the package README/PR description) explaining whyno-resolutionmust be ignored in this package.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (1)
packages/solid-query-devtools/.attw.json(1 hunks)
🧰 Additional context used
🧠 Learnings (1)
📓 Common learnings
Learnt from: oscartbeaumont
PR: TanStack/query#9564
File: packages/solid-query-devtools/src/production.tsx:2-3
Timestamp: 2025-08-19T03:18:18.282Z
Learning: In the solid-query-devtools package, the codebase uses a pattern of type-only default imports combined with typeof for component type annotations (e.g., `import type SolidQueryDevtoolsComp from './devtools'` followed by `typeof SolidQueryDevtoolsComp`). This pattern is consistently used across index.tsx and production.tsx files, and the maintainers prefer consistency over changing this approach.
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: Preview
- GitHub Check: Test
🔇 Additional comments (1)
packages/solid-query-devtools/.attw.json (1)
1-3: Minimal attw config looks fine.Valid JSON and the targeted ignore is straightforward. If this unblocks CI noise from conditional exports/type resolution, LGTM.
| @@ -0,0 +1,3 @@ | |||
| { | |||
There was a problem hiding this comment.
This was copied from react-query-devtools
Align the SolidJS Query Devtools package with the React one by including the '/production' export which allows bundling TanStack Query Devtools in production builds.
Summary by CodeRabbit
New Features
Chores