fix(devtools): restore plugin marketplace and harden event bus connection by AlemTuzlak · Pull Request #466 · TanStack/devtools

AlemTuzlak · 2026-06-19T12:02:46Z

Problem

Opening the devtools and clicking the marketplace ("Add More") showed an empty panel with "No additional plugins available. You have all compatible devtools installed and registered!", even when installable plugins exist.

Root cause

The marketplace's plugin list is populated by a single mounted → package-json-read round-trip over the event bus. That round-trip could be lost in two ways:

Silent event drop while connecting. ClientEventBus.emitToServer only sent over the WebSocket when readyState === OPEN. The EventClient considers itself "connected" after a synchronous handshake with the ClientEventBus, but the bus's WebSocket to the server can still be in CONNECTING. Any event emitted in that window (including the marketplace's mounted) was dropped with no queue and no retry, so package-json-read never came back and currentPackageJson stayed null → empty marketplace.
One-shot request. The marketplace emitted mounted exactly once in onMount, so a missed response was never recovered.

(The basic React example had also lost its eventBusConfig={{ connectToServerBus: true }} in #419, so it never connected to the server bus at all.)

Changes

@tanstack/devtools-event-bus — ClientEventBus now buffers events emitted while the WebSocket is CONNECTING and flushes them in order once it opens (cleared on close/stop). No early event is silently dropped. Added unit tests covering queue-while-connecting, flush-on-open, send-when-open, and drop-on-close-before-open.
@tanstack/devtools — the marketplace re-requests package.json every time it opens and retries (≤10 × 400ms) until the data arrives, then stops. Re-opening always re-fetches the plugin list.
@tanstack/devtools — added TanStack AI Devtools (@tanstack/react-ai-devtools, plugin id tanstack-ai) to the marketplace registry.
example — examples/react/basic reconnects to the server bus via connectToServerBus: true.

Testing

@tanstack/devtools-event-bus unit tests pass (56 incl. 3 new).
Verified end-to-end in the browser (React basic example): marketplace populates with all cards (Query, Router, Form, Pacer, Accessibility, AI, Prefetch Heatmap, Inertia), re-fetches on every open, exactly one mounted emit per open, retry loop dormant once data arrives, 0 console errors.

Release

Includes a changeset patch-bumping all publishable packages.

Summary by CodeRabbit

New Features
- Added TanStack AI devtools plugin to the marketplace.
Bug Fixes
- Fixed marketplace UI messaging when no plugins are available.
- Improved plugin data loading reliability with automatic retry logic.
- Enhanced event delivery during marketplace startup for more reliable initialization.
Tests
- Added comprehensive test coverage for event handling scenarios.

…tion The plugin marketplace rendered empty ("No additional plugins available") because the `mounted` -> `package-json-read` round-trip could be lost: - ClientEventBus.emitToServer silently dropped events emitted while the WebSocket was still connecting. They are now buffered and flushed once the socket opens. - The marketplace re-requests package.json on every open and retries until it arrives, so re-opening always re-fetches the plugin list. - The basic React example reconnects to the server bus (connectToServerBus). - Added TanStack AI Devtools to the plugin marketplace registry.

coderabbitai · 2026-06-19T12:03:01Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: a2897c70-c995-40cb-a3d7-f6ed75837a0d

📥 Commits

Reviewing files that changed from the base of the PR and between 8afe61b and 6c19402.

📒 Files selected for processing (6)

.changeset/marketplace-plugin-list.md
examples/react/basic/src/setup.tsx
packages/devtools/src/tabs/plugin-marketplace.tsx
packages/devtools/src/tabs/plugin-registry.ts
packages/event-bus/src/client/client.ts
packages/event-bus/tests/client.test.ts

📝 Walkthrough

Walkthrough

Adds WebSocket connecting-state event buffering to the client event bus so events emitted during CONNECTING are queued and flushed on open. The plugin marketplace now retries package.json requests with a polling loop. A new @tanstack/react-ai-devtools entry is added to the plugin registry, and a patch changeset documents all fixes.

Changes

Marketplace Reliability Fixes

Layer / File(s)	Summary
Event bus: WebSocket connecting-state queue `packages/event-bus/src/client/client.ts`, `packages/event-bus/tests/client.test.ts`	`#pendingServerEvents` queue is added to the client; `emitToServer` enqueues when `CONNECTING`, `flushPendingServerEvents()` drains on `onopen`, and `onclose`/`stop()` clear the queue. New tests cover queuing+flush, immediate send when open, and drop-on-close scenarios.
Marketplace: package.json retry polling `packages/devtools/src/tabs/plugin-marketplace.tsx`	Single `mounted` emit replaced with `requestPackageJson()` helper and a `setInterval` retry loop (10 attempts, 400 ms), stopping once `currentPackageJson()` is populated; interval cleared in cleanup.
TanStack AI plugin entry, example wiring, and changeset `packages/devtools/src/tabs/plugin-registry.ts`, `examples/react/basic/src/setup.tsx`, `.changeset/marketplace-plugin-list.md`	`@tanstack/react-ai-devtools` added to `PLUGIN_REGISTRY` with full metadata and `isNew: true`. Basic example sets `connectToServerBus: true`. Changeset records patch bumps and release notes for all fixes.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐇 Hop hop, the socket was slow to wake,
So events were queued — no message would break!
The marketplace knocks, retries with care,
Ten gentle taps till the data is there.
AI devtools joins the registry bright,
A bunny-approved patch landed just right! ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ 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%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately summarizes the main changes: fixing the plugin marketplace functionality and improving event bus connection reliability through queueing.
Description check	✅ Passed	The description comprehensively covers the problem statement, root causes, detailed changes across all affected packages, and testing verification, fully addressing the template requirements.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

Create stacked PR
Commit on current branch

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch fix/marketplace-empty-and-event-bus

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.}

nx-cloud · 2026-06-19T12:04:07Z

View your CI Pipeline Execution ↗ for commit 6c19402

Command	Status	Duration	Result
`nx affected --targets=test:eslint,test:sherif,t...`	✅ Succeeded	2m 37s	View ↗
`nx run-many --targets=build --exclude=examples/**`	✅ Succeeded	41s	View ↗

☁️ Nx Cloud last updated this comment at 2026-06-19 12:06:01 UTC

pkg-pr-new · 2026-06-19T12:04:26Z

More templates

@tanstack/angular-devtools

npm i https://pkg.pr.new/@tanstack/angular-devtools@466

@tanstack/devtools

npm i https://pkg.pr.new/@tanstack/devtools@466

@tanstack/devtools-a11y

npm i https://pkg.pr.new/@tanstack/devtools-a11y@466

@tanstack/devtools-client

npm i https://pkg.pr.new/@tanstack/devtools-client@466

@tanstack/devtools-ui

npm i https://pkg.pr.new/@tanstack/devtools-ui@466

@tanstack/devtools-utils

npm i https://pkg.pr.new/@tanstack/devtools-utils@466

@tanstack/devtools-vite

npm i https://pkg.pr.new/@tanstack/devtools-vite@466

@tanstack/devtools-event-bus

npm i https://pkg.pr.new/@tanstack/devtools-event-bus@466

@tanstack/devtools-event-client

npm i https://pkg.pr.new/@tanstack/devtools-event-client@466

@tanstack/preact-devtools

npm i https://pkg.pr.new/@tanstack/preact-devtools@466

@tanstack/react-devtools

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

@tanstack/solid-devtools

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

@tanstack/vue-devtools

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

commit: 6c19402

AlemTuzlak merged commit 73983a7 into main Jun 19, 2026
10 checks passed

AlemTuzlak deleted the fix/marketplace-empty-and-event-bus branch June 19, 2026 12:15

github-actions Bot mentioned this pull request Jun 19, 2026

ci: Version Packages #465

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix(devtools): restore plugin marketplace and harden event bus connection#466

fix(devtools): restore plugin marketplace and harden event bus connection#466
AlemTuzlak merged 1 commit into
mainfrom
fix/marketplace-empty-and-event-bus

AlemTuzlak commented Jun 19, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented Jun 19, 2026 •

edited

Loading

Walkthrough

Changes

Estimated code review effort

Poem

❌ Failed checks (1 warning)

Uh oh!

nx-cloud Bot commented Jun 19, 2026 •

edited

Loading

Uh oh!

pkg-pr-new Bot commented Jun 19, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

AlemTuzlak commented Jun 19, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Problem

Root cause

Changes

Testing

Release

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented Jun 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Poem

❌ Failed checks (1 warning)

Uh oh!

nx-cloud Bot commented Jun 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

pkg-pr-new Bot commented Jun 19, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

AlemTuzlak commented Jun 19, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Jun 19, 2026 •

edited

Loading

nx-cloud Bot commented Jun 19, 2026 •

edited

Loading