refactor: export devtools options type #5435

lachieh · 2025-10-10T17:30:45Z

When working with the TanStack Router Devtools, I was getting errors because the DevtoolsOptions type wasn't being exported from the main package. This isn't a problem when using the devtools directly from imports, but it does cause issues when trying to use the options to integrate tightly with my application.

Exported variable 'AppDevOptions' has or is using name 'DevtoolsOptions' from external module "/tmp/app/node_modules/@tanstack/react-router-devtools/dist/esm/TanStackRouterDevtools" but cannot be named. (ts4023)

In this instance, AppDevOptions is the type from my application.

I tried inferring the type, as well as creating a new type from the arguments, but it gives the same error:

import {TanStackRouterDevtools} from '@tanstack/react-router-devtools'

type DevtoolsOptions = Parameters<TanStackRouterDevtools>[0]

Note

Despite what CodeRabbit says, these aren't actually breaking changes since the types were never exported in the first place. This is a minor change at best.

Summary by CodeRabbit

Breaking Changes
- Public option type names were renamed — update imports and prop types accordingly.
- Several devtools classes/components are now exported differently — adjust import syntax.
New Features
- New exported option interfaces and expanded public exports for core and panel devtools, offering richer typing and more configurable options for consumers.

coderabbitai · 2025-10-10T17:30:57Z

Walkthrough

Export names and public option interfaces were renamed and made explicit across packages: internal DevtoolsOptions variants were replaced with exported TanStackRouterDevtools*Options interfaces and several classes/components were changed to be exported directly. No runtime behavior or control-flow changes.

Changes

Cohort / File(s)	Summary of Changes
React devtools options & component `packages/react-router-devtools/src/TanStackRouterDevtools.tsx`	Replaced local `DevtoolsOptions` with exported `TanStackRouterDevtoolsOptions`; updated `TanStackRouterDevtools` signature to accept `TanStackRouterDevtoolsOptions`.
React devtools panel `packages/react-router-devtools/src/TanStackRouterDevtoolsPanel.tsx`	Renamed `DevtoolsPanelOptions` → `TanStackRouterDevtoolsPanelOptions`; updated `TanStackRouterDevtoolsPanel` typing to use the new interface.
Solid devtools options & component `packages/solid-router-devtools/src/TanStackRouterDevtools.tsx`	Introduced and exported `TanStackRouterDevtoolsOptions`; updated `TanStackRouterDevtools` component signature to use the new exported options interface.
Solid devtools panel `packages/solid-router-devtools/src/TanStackRouterDevtoolsPanel.tsx`	Renamed `DevtoolsPanelOptions` → `TanStackRouterDevtoolsPanelOptions`; updated component typing accordingly.
Core: devtools core options & class `packages/router-devtools-core/src/TanStackRouterDevtoolsCore.tsx`	Added and exported `TanStackRouterDevtoolsCoreOptions` interface; changed `TanStackRouterDevtoolsCore` declaration to be exported and updated constructor & `setOptions` signatures to use the new options type.
Core: panel core export & options `packages/router-devtools-core/src/TanStackRouterDevtoolsPanelCore.tsx`	Exported `TanStackRouterDevtoolsPanelCoreOptions` and changed `TanStackRouterDevtoolsPanelCore` to be exported via its declaration; removed separate end-of-file export.

Sequence Diagram(s)

(omitted — changes are API/export surface renames only; no runtime/control-flow changes to diagram)

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Suggested reviewers

birkskyum

Poem

I hop through code with whiskers bright,
Names unfurling in morning light.
Options step out, proud and bold,
Exports shown, no secrets hold.
I twitch my nose — the change looks right 🥕🐇

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run `@coderabbitai generate docstrings` to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The title succinctly captures the primary change of exporting the devtools options type and employs a standard conventional commit prefix. It directly relates to the interface export modifications across the devtools packages without including extraneous details. The brevity and clarity allow reviewers to understand the main refactor intent at a glance.

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

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

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

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

lachieh · 2025-10-10T17:44:18Z

@coderabbitai generate docstrings

coderabbitai · 2025-10-10T17:44:45Z

✅ Actions performed

Docstrings generation started.

@lachieh

Docstrings generation was requested by @lachieh. * #5435 (comment) The following files were modified: * `packages/react-router-devtools/src/TanStackRouterDevtools.tsx`

coderabbitai · 2025-10-10T17:45:12Z

Note

Generated docstrings for this pull request at #5437

coderabbitai

Actionable comments posted: 1

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 00c70dc and 7816bc0.

📒 Files selected for processing (3)

packages/react-router-devtools/src/TanStackRouterDevtools.tsx (3 hunks)
packages/router-devtools-core/src/TanStackRouterDevtoolsCore.tsx (4 hunks)
packages/router-devtools-core/src/TanStackRouterDevtoolsPanelCore.tsx (1 hunks)

🚧 Files skipped from review as they are similar to previous changes (2)

packages/router-devtools-core/src/TanStackRouterDevtoolsPanelCore.tsx
packages/router-devtools-core/src/TanStackRouterDevtoolsCore.tsx

🧰 Additional context used

📓 Path-based instructions (2)

**/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

Use TypeScript in strict mode with extensive type safety across the codebase

Files:

packages/react-router-devtools/src/TanStackRouterDevtools.tsx

packages/{router-devtools,*-router-devtools}/**

📄 CodeRabbit inference engine (AGENTS.md)

Keep router devtools packages in packages/router-devtools/ and packages/*-router-devtools/

Files:

packages/react-router-devtools/src/TanStackRouterDevtools.tsx

🔇 Additional comments (2)

packages/react-router-devtools/src/TanStackRouterDevtools.tsx (2)

8-44: LGTM! Interface rename aligns with PR objectives.

The interface rename from DevtoolsOptions to TanStackRouterDevtoolsOptions successfully addresses the TS4023 error and follows TanStack naming conventions. The JSDoc comments are clear and comprehensive.

46-126: LGTM! Function implementation is correct.

The function signature correctly uses the renamed TanStackRouterDevtoolsOptions type. The implementation properly manages the devtools lifecycle through React hooks and maintains type safety throughout.

packages/react-router-devtools/src/TanStackRouterDevtools.tsx

nx-cloud · 2025-10-13T20:02:16Z

View your CI Pipeline Execution ↗ for commit 637c75d

Command	Status	Duration	Result
`nx affected --targets=test:eslint,test:unit,tes...`	✅ Succeeded	4m 30s	View ↗
`nx run-many --target=build --exclude=examples/*...`	✅ Succeeded	15s	View ↗

☁️ Nx Cloud last updated this comment at 2025-10-14 03:52:28 UTC

packages/react-router-devtools/src/TanStackRouterDevtools.tsx

coderabbitai

Actionable comments posted: 0

🧹 Nitpick comments (1)

packages/solid-router-devtools/src/TanStackRouterDevtools.tsx (1)
34-34: Consider using a more specific type instead of any.

The any type reduces type safety. Consider using JSX.ElementType or a union of valid container element types for better type checking.

Apply this diff to improve type safety:
-  containerElement?: string | any
+  containerElement?: JSX.ElementType
Note: This suggestion assumes Solid's JSX types support JSX.ElementType. If not, consider defining a custom type that captures valid container elements.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 2d5f2f5 and 637c75d.

📒 Files selected for processing (6)

packages/react-router-devtools/src/TanStackRouterDevtools.tsx (2 hunks)
packages/react-router-devtools/src/TanStackRouterDevtoolsPanel.tsx (2 hunks)
packages/router-devtools-core/src/TanStackRouterDevtoolsCore.tsx (4 hunks)
packages/router-devtools-core/src/TanStackRouterDevtoolsPanelCore.tsx (2 hunks)
packages/solid-router-devtools/src/TanStackRouterDevtools.tsx (2 hunks)
packages/solid-router-devtools/src/TanStackRouterDevtoolsPanel.tsx (2 hunks)

🚧 Files skipped from review as they are similar to previous changes (5)

packages/react-router-devtools/src/TanStackRouterDevtoolsPanel.tsx
packages/router-devtools-core/src/TanStackRouterDevtoolsPanelCore.tsx
packages/solid-router-devtools/src/TanStackRouterDevtoolsPanel.tsx
packages/router-devtools-core/src/TanStackRouterDevtoolsCore.tsx
packages/react-router-devtools/src/TanStackRouterDevtools.tsx

🧰 Additional context used

📓 Path-based instructions (2)

**/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

Use TypeScript in strict mode with extensive type safety across the codebase

Files:

packages/solid-router-devtools/src/TanStackRouterDevtools.tsx

packages/{router-devtools,*-router-devtools}/**

📄 CodeRabbit inference engine (AGENTS.md)

Keep router devtools packages in packages/router-devtools/ and packages/*-router-devtools/

Files:

packages/solid-router-devtools/src/TanStackRouterDevtools.tsx

🧬 Code graph analysis (1)

packages/solid-router-devtools/src/TanStackRouterDevtools.tsx (1)

packages/react-router-devtools/src/TanStackRouterDevtools.tsx (2)

TanStackRouterDevtoolsOptions (8-44)

TanStackRouterDevtools (46-126)

🔇 Additional comments (2)

packages/solid-router-devtools/src/TanStackRouterDevtools.tsx (2)

7-43: LGTM! Interface export fulfills PR objective.

The exported TanStackRouterDevtoolsOptions interface is well-documented and correctly addresses the TypeScript error mentioned in the PR description (ts4023). This allows downstream consumers to reference the type without importing from the devtools package directly.

45-47: LGTM! Component signature correctly updated.

The component signature properly uses the exported TanStackRouterDevtoolsOptions interface, maintaining consistency with the React devtools package while using Solid-specific component types.

pkg-pr-new · 2025-10-14T03:48:45Z

More templates

@tanstack/arktype-adapter

npm i https://pkg.pr.new/TanStack/router/@tanstack/arktype-adapter@5435

@tanstack/directive-functions-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/directive-functions-plugin@5435

@tanstack/eslint-plugin-router

npm i https://pkg.pr.new/TanStack/router/@tanstack/eslint-plugin-router@5435

@tanstack/history

npm i https://pkg.pr.new/TanStack/router/@tanstack/history@5435

@tanstack/nitro-v2-vite-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/nitro-v2-vite-plugin@5435

@tanstack/react-router

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-router@5435

@tanstack/react-router-devtools

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-router-devtools@5435

@tanstack/react-router-ssr-query

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-router-ssr-query@5435

@tanstack/react-start

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start@5435

@tanstack/react-start-client

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start-client@5435

@tanstack/react-start-server

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start-server@5435

@tanstack/router-cli

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-cli@5435

@tanstack/router-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-core@5435

@tanstack/router-devtools

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-devtools@5435

@tanstack/router-devtools-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-devtools-core@5435

@tanstack/router-generator

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-generator@5435

@tanstack/router-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-plugin@5435

@tanstack/router-ssr-query-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-ssr-query-core@5435

@tanstack/router-utils

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-utils@5435

@tanstack/router-vite-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-vite-plugin@5435

@tanstack/server-functions-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/server-functions-plugin@5435

@tanstack/solid-router

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-router@5435

@tanstack/solid-router-devtools

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-router-devtools@5435

@tanstack/solid-start

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start@5435

@tanstack/solid-start-client

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start-client@5435

@tanstack/solid-start-server

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start-server@5435

@tanstack/start-client-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-client-core@5435

@tanstack/start-plugin-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-plugin-core@5435

@tanstack/start-server-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-server-core@5435

@tanstack/start-static-server-functions

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-static-server-functions@5435

@tanstack/start-storage-context

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-storage-context@5435

@tanstack/valibot-adapter

npm i https://pkg.pr.new/TanStack/router/@tanstack/valibot-adapter@5435

@tanstack/virtual-file-routes

npm i https://pkg.pr.new/TanStack/router/@tanstack/virtual-file-routes@5435

@tanstack/zod-adapter

npm i https://pkg.pr.new/TanStack/router/@tanstack/zod-adapter@5435

commit: 637c75d

SeanCassiere · 2025-10-14T03:57:34Z

LGTM, merging!

Thank you @lachieh!

github-actions bot added package: router-devtools-core package: react-router-devtools labels Oct 10, 2025

lachieh changed the title ~~fix: export DevtoolsOptions type per other tanstack tools~~ feat: rename and export TanStackRouterDevtoolsOptions type Oct 10, 2025

coderabbitai bot added a commit that referenced this pull request Oct 10, 2025

📝 Add docstrings to main

ceba33a

Docstrings generation was requested by @lachieh. * #5435 (comment) The following files were modified: * `packages/react-router-devtools/src/TanStackRouterDevtools.tsx`

coderabbitai bot mentioned this pull request Oct 10, 2025

📝 Add docstrings to main #5437

Closed

lachieh force-pushed the main branch from 00c70dc to 7816bc0 Compare October 10, 2025 17:50

coderabbitai bot reviewed Oct 10, 2025

View reviewed changes

packages/react-router-devtools/src/TanStackRouterDevtools.tsx Outdated Show resolved Hide resolved

lachieh force-pushed the main branch from 7816bc0 to f4863d3 Compare October 10, 2025 17:55

SeanCassiere requested changes Oct 13, 2025

View reviewed changes

packages/react-router-devtools/src/TanStackRouterDevtools.tsx Outdated Show resolved Hide resolved

SeanCassiere changed the title ~~feat: rename and export TanStackRouterDevtoolsOptions type~~ refactor: export devtools options type Oct 13, 2025

lachieh force-pushed the main branch from f4863d3 to 2d5f2f5 Compare October 14, 2025 01:15

github-actions bot added the package: solid-router-devtools label Oct 14, 2025

lachieh requested a review from SeanCassiere October 14, 2025 01:16

fix: export DevtoolsOptions type per other tanstack tools

637c75d

lachieh force-pushed the main branch from 2d5f2f5 to 637c75d Compare October 14, 2025 03:34

coderabbitai bot reviewed Oct 14, 2025

View reviewed changes

SeanCassiere approved these changes Oct 14, 2025

View reviewed changes

SeanCassiere merged commit 82f711b into TanStack:main Oct 14, 2025
6 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

refactor: export devtools options type #5435

refactor: export devtools options type #5435

lachieh commented Oct 10, 2025 •

edited by coderabbitai bot

Loading

Uh oh!

coderabbitai bot commented Oct 10, 2025 •

edited

Loading

Uh oh!

lachieh commented Oct 10, 2025

Uh oh!

coderabbitai bot commented Oct 10, 2025

Uh oh!

coderabbitai bot commented Oct 10, 2025

Uh oh!

coderabbitai bot left a comment

Uh oh!

Uh oh!

nx-cloud bot commented Oct 13, 2025 •

edited

Loading

Uh oh!

Uh oh!

coderabbitai bot left a comment

Uh oh!

pkg-pr-new bot commented Oct 14, 2025

Uh oh!

SeanCassiere commented Oct 14, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

refactor: export devtools options type #5435

refactor: export devtools options type #5435

Conversation

lachieh commented Oct 10, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

coderabbitai bot commented Oct 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Sequence Diagram(s)

Estimated code review effort

Suggested reviewers

Poem

Pre-merge checks and finishing touches

Uh oh!

lachieh commented Oct 10, 2025

Uh oh!

coderabbitai bot commented Oct 10, 2025

Uh oh!

coderabbitai bot commented Oct 10, 2025

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

nx-cloud bot commented Oct 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

pkg-pr-new bot commented Oct 14, 2025

Uh oh!

SeanCassiere commented Oct 14, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

lachieh commented Oct 10, 2025 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Oct 10, 2025 •

edited

Loading

nx-cloud bot commented Oct 13, 2025 •

edited

Loading