query SolidJS Devtools '/production' export

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
- Added a production entry enabling SSR-safe, on-demand (client-only) loading of devtools components.
- Exposed a typed options export for the devtools panel to improve TypeScript support.
Chores
- Restructured package exports into default and production namespaces and added package.json as an explicit export.
- Updated build entries and published file list to include both default and production artifacts.
- Added local tooling config to ignore a specific lint rule.

Aug 14 '25 04:08 oscartbeaumont

View your CI Pipeline Execution ↗ for commit e4b2672fc0181edc4f050a877477684d8e08e283

Command	Status	Duration	Result
`nx affected --targets=test:sherif,test:knip,tes...`	✅ Succeeded	1m 33s	View ↗
`nx run-many --target=build --exclude=examples/*...`	✅ Succeeded	8s	View ↗

☁️ Nx Cloud last updated this comment at 2025-11-07 02:33:04 UTC

Aug 14 '25 04:08 nx-cloud[bot]

More templates

@tanstack/angular-query-experimental

npm i https://pkg.pr.new/@tanstack/angular-query-experimental@9564

@tanstack/eslint-plugin-query

npm i https://pkg.pr.new/@tanstack/eslint-plugin-query@9564

@tanstack/query-async-storage-persister

npm i https://pkg.pr.new/@tanstack/query-async-storage-persister@9564

@tanstack/query-broadcast-client-experimental

npm i https://pkg.pr.new/@tanstack/query-broadcast-client-experimental@9564

@tanstack/query-core

npm i https://pkg.pr.new/@tanstack/query-core@9564

@tanstack/query-devtools

npm i https://pkg.pr.new/@tanstack/query-devtools@9564

@tanstack/query-persist-client-core

npm i https://pkg.pr.new/@tanstack/query-persist-client-core@9564

@tanstack/query-sync-storage-persister

npm i https://pkg.pr.new/@tanstack/query-sync-storage-persister@9564

@tanstack/react-query

npm i https://pkg.pr.new/@tanstack/react-query@9564

@tanstack/react-query-devtools

npm i https://pkg.pr.new/@tanstack/react-query-devtools@9564

@tanstack/react-query-next-experimental

npm i https://pkg.pr.new/@tanstack/react-query-next-experimental@9564

@tanstack/react-query-persist-client

npm i https://pkg.pr.new/@tanstack/react-query-persist-client@9564

@tanstack/solid-query

npm i https://pkg.pr.new/@tanstack/solid-query@9564

@tanstack/solid-query-devtools

npm i https://pkg.pr.new/@tanstack/solid-query-devtools@9564

@tanstack/solid-query-persist-client

npm i https://pkg.pr.new/@tanstack/solid-query-persist-client@9564

@tanstack/svelte-query

npm i https://pkg.pr.new/@tanstack/svelte-query@9564

@tanstack/svelte-query-devtools

npm i https://pkg.pr.new/@tanstack/svelte-query-devtools@9564

@tanstack/svelte-query-persist-client

npm i https://pkg.pr.new/@tanstack/svelte-query-persist-client@9564

@tanstack/vue-query

npm i https://pkg.pr.new/@tanstack/vue-query@9564

@tanstack/vue-query-devtools

npm i https://pkg.pr.new/@tanstack/vue-query-devtools@9564

commit: e4b2672

Aug 14 '25 04:08 pkg-pr-new[bot]

Codecov Report

:x: Patch coverage is 0% with 3 lines in your changes missing coverage. Please review. :white_check_mark: Project coverage is 59.09%. Comparing base (7783a7a) to head (e4b2672).

Additional details and impacted files

@@             Coverage Diff             @@
##             main    #9564       +/-   ##
===========================================
+ Coverage   45.76%   59.09%   +13.32%     
===========================================
  Files         200        5      -195     
  Lines        8410       66     -8344     
  Branches     1930       19     -1911     
===========================================
- Hits         3849       39     -3810     
+ Misses       4113       22     -4091     
+ Partials      448        5      -443

Components	Coverage Δ
@tanstack/angular-query-experimental	`∅ <ø> (∅)`
@tanstack/eslint-plugin-query	`∅ <ø> (∅)`
@tanstack/query-async-storage-persister	`∅ <ø> (∅)`
@tanstack/query-broadcast-client-experimental	`∅ <ø> (∅)`
@tanstack/query-codemods	`∅ <ø> (∅)`
@tanstack/query-core	`∅ <ø> (∅)`
@tanstack/query-devtools	`∅ <ø> (∅)`
@tanstack/query-persist-client-core	`∅ <ø> (∅)`
@tanstack/query-sync-storage-persister	`∅ <ø> (∅)`
@tanstack/query-test-utils	`∅ <ø> (∅)`
@tanstack/react-query	`∅ <ø> (∅)`
@tanstack/react-query-devtools	`∅ <ø> (∅)`
@tanstack/react-query-next-experimental	`∅ <ø> (∅)`
@tanstack/react-query-persist-client	`∅ <ø> (∅)`
@tanstack/solid-query	`∅ <ø> (∅)`
@tanstack/solid-query-devtools	`59.09% <0.00%> (-2.82%)`	:arrow_down:
@tanstack/solid-query-persist-client	`∅ <ø> (∅)`
@tanstack/svelte-query	`∅ <ø> (∅)`
@tanstack/svelte-query-devtools	`∅ <ø> (∅)`
@tanstack/svelte-query-persist-client	`∅ <ø> (∅)`
@tanstack/vue-query	`∅ <ø> (∅)`
@tanstack/vue-query-devtools	`∅ <ø> (∅)`

:rocket: New features to boost your workflow:

:snowflake: Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
:package: JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Aug 14 '25 04:08 codecov[bot]

but if that is desired there is currently no way for the developer to override it.

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

Aug 14 '25 08:08 TkDodo

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 /production export similar to what React does instead.

Aug 14 '25 11:08 oscartbeaumont

Walkthrough

Exports 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 and production.

Changes

Cohort / File(s)	Summary
Exports restructuring `packages/solid-query-devtools/package.json`	Replaced flat top-level exports with a nested `"."` export and a `"./production"` export; updated `main`/`module`/`types` to `./build/index/index.*`; moved import/require mappings under nested exports (some sources switched to `.tsx`); added `"./package.json"` export; expanded `files` to include `src` and exclude `src/__tests__`.
New production entry module `packages/solid-query-devtools/src/production.tsx`	Added SSR-safe client-only wrappers that dynamically import `./devtools` and `./devtoolsPanel`; exports `SolidQueryDevtools`, `SolidQueryDevtoolsPanel`, and re-exports `DevtoolsPanelOptions` type.
Build config updates `packages/solid-query-devtools/tsup.config.ts`	Changed `preset_options.entries` from a single entry to an array including a `production` entry (`src/production.tsx`); preserves cjs output, `drop_console`, and outDir `build`.
Tooling config `packages/solid-query-devtools/.attw.json`	Added `.attw.json` with `{ "ignoreRules": ["no-resolution"] }` to configure the tool to ignore the `no-resolution` rule.

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/>
  alt SSR
    Runtime-->>Consumer: skip client-only component
  end
  Runtime->>ClientOnly: invoke client-only wrapper
  ClientOnly->>Devtools: dynamic import('./devtools' or './devtoolsPanel')
  Devtools-->>ClientOnly: loaded component/module
  ClientOnly-->>Runtime: mount component on client
  Runtime-->>Consumer: devtools UI rendered

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Poem

A rabbit nudges exports through the night,
Two doors now open — dev and production bright.
Dynamic hops bring panels when the sun is high,
Types tucked gently, builds whir as they fly.
Tiny paws cheer — the package springs to light. 🐇✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The title "SolidJS Devtools '/production' export" succinctly and accurately summarizes the primary change in the PR — adding a '/production' export for the SolidJS Devtools package — and aligns with the PR objectives and modified files (package.json exports and new production entry). It is specific, relevant, and understandable to reviewers scanning the repo history.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

✨ Finishing touches

🧪 Generate unit tests

[ ] Create PR with unit tests
[ ] Post copyable unit tests in a comment

[!TIP]
👮 Agentic pre-merge checks are now available in preview!

Pro plan users can now enable pre-merge checks in their settings to enforce checklists before merging PRs.

Built-in checks – Quickly apply ready-made checks to enforce title conventions, require pull request descriptions that follow templates, validate linked issues for compliance, and more.

Custom agentic checks – Define your own rules using CodeRabbit’s advanced agentic capabilities to enforce organization-specific policies and workflows. For example, you can instruct CodeRabbit’s agent to verify that API documentation is updated whenever API schema files are modified in a PR. Note: Upto 5 custom checks are currently allowed during the preview period. Pricing for this feature will be announced in a few weeks.

Please see the documentation for more information.

Example:
reviews:
  pre_merge_checks:
    custom_checks:
      - name: "Undocumented Breaking Changes"
        mode: "warning"
        instructions: |
          Pass/fail criteria: All breaking changes to public APIs, CLI flags, environment variables, configuration keys, database schemas, or HTTP/GraphQL endpoints must be documented in the "Breaking Change" section of the PR description and in CHANGELOG.md. Exclude purely internal or private changes (e.g., code not exported from package entry points or explicitly marked as internal).
Please share your feedback with us on this Discord post.

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

Aug 18 '25 17:08 coderabbitai[bot]

I will fix up the CodeRabbit comments and test failure in the morning!

Aug 18 '25 18:08 oscartbeaumont

This should be updated and ready to go but could be worth getting a review from anyone with better experience on package.json exports as i'm far from an expert on them.

Aug 19 '25 03:08 oscartbeaumont

⚠️ No Changeset found

Latest commit: e4b2672fc0181edc4f050a877477684d8e08e283

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

Nov 07 '25 02:11 changeset-bot[bot]