Skip to content

feat: support remote-hosted iframe docks with local RPC connection#294

Merged
antfu merged 3 commits into
mainfrom
antfu/remote-dock
Apr 21, 2026
Merged

feat: support remote-hosted iframe docks with local RPC connection#294
antfu merged 3 commits into
mainfrom
antfu/remote-dock

Conversation

@antfu

@antfu antfu commented Apr 21, 2026

Copy link
Copy Markdown
Member

Description

Adds a second path for building custom DevTools UIs: plugin authors can point an iframe dock at a hosted website instead of bundling a SPA dist with their plugin. The core allocates a session-only, origin-locked auth token per dock registration and injects a connection descriptor (WS URL + token) into the iframe URL — as a fragment by default, or optionally as a query param. The hosted page connects back with the new one-liner connectRemoteDevTools() from @vitejs/devtools-kit/client, which reuses the existing DevToolsRpcClient.

The new RemoteConnectionInfo type extends ConnectionMeta, so a parsed descriptor drops straight into getDevToolsRpcClient({ connectionMeta }) with no shape translation. Tokens live in memory only, are bound to the dock URL's origin by default (opt-out via originLock: false), and are revoked on force re-registration. The WS handshake check in ws.ts runs before the persisted trust store so revoked remote tokens can't accidentally match stale entries. Full docs live at docs/kit/remote-client.md with a mermaid flow, the transport/origin-lock tradeoffs, and the trust model.

Linked Issues

Additional context

  • 20 new tests cover parser round-trips (fragment/query/precedence/error paths), URL enrichment, when-clause defaulting to hide in build mode, force-register revocation, and origin-locked trust logic.
  • Address bar in ViewIframe.vue strips the descriptor so the auth token isn't visible or copyable.
  • Worth a focused review: the wsEndpoint timing dance in ws.ts + host-docks.tsregister() runs before the WS port is allocated, so enrichment happens lazily in values() and createWsServer re-emits dock:entry:updated for remote docks once the endpoint is known.

🤖 Generated with Claude Code

Plugin authors can now set `remote: true` on an iframe dock to point at
a hosted website instead of bundling a SPA dist. The core injects a
session-only auth token and WS URL into the iframe URL (as a fragment
by default, or optionally as a query param), and the hosted page
connects back via the new `connectRemoteDevTools()` helper in
`@vitejs/devtools-kit/client`. Tokens are origin-locked by default and
revoked on dock re-registration.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@pkg-pr-new

pkg-pr-new Bot commented Apr 21, 2026

Copy link
Copy Markdown

Open in StackBlitz

@vitejs/devtools

npm i https://pkg.pr.new/@vitejs/devtools@294

@vitejs/devtools-kit

npm i https://pkg.pr.new/@vitejs/devtools-kit@294

@vitejs/devtools-rolldown

npm i https://pkg.pr.new/@vitejs/devtools-rolldown@294

@vitejs/devtools-rpc

npm i https://pkg.pr.new/@vitejs/devtools-rpc@294

@vitejs/devtools-self-inspect

npm i https://pkg.pr.new/@vitejs/devtools-self-inspect@294

commit: b46f554

antfu and others added 2 commits April 21, 2026 16:19
…round

- `docs/kit/remote-demo.md`: live page that uses `connectRemoteDevTools()`
  to open a WS back to the local dev server when opened through a remote
  dock, and renders a friendly standalone message otherwise. Subscribes
  to the built-in `devtoolskit:internal:docks` shared state to display
  a live dock registry.
- Playground registers a `remote: true` iframe dock pointing at that
  page (configurable via `DEVTOOLS_REMOTE_DEMO_URL`).
- Pin the docs dev server to port 5174 so it doesn't collide with the
  playground on 5173 when both are running for dogfooding.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Point the playground's remote dock at https://devtools.vite.dev/kit/remote-demo
so the demo works out of the box without running the docs dev server.
Local dev still overrides via DEVTOOLS_REMOTE_DEMO_URL.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@antfu antfu merged commit e17a12a into main Apr 21, 2026
9 checks passed
@antfu antfu deleted the antfu/remote-dock branch April 21, 2026 07:40
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant