Skip to content

feat: connect the devtools toolbar to the dev server - #530

Open
lxsmnsyc wants to merge 1 commit into
nextfrom
feat/devtools-dev-server
Open

lxsmnsyc wants to merge 1 commit into
nextfrom
feat/devtools-dev-server

Conversation

@lxsmnsyc

@lxsmnsyc lxsmnsyc commented Nov 4, 2026

Copy link
Copy Markdown
Member

The devtools toolbar runs in the page. It cannot see errors in the server process, where the Vite root is, or which packages are installed. This adds the dev server side of a channel that sends it those. The toolbar side is solidjs/solid-start-devtools#48.

Start mode only, during vite dev, and only when the app uses @solidjs/start-devtools. Builds, vite preview and Vitest are left alone.

What the toolbar gets

  • Server errors. Every failure the server runtime reports through configureServerErrors: a render, a server function, a request. The toolbar lists them in its Health view.
  • Versions of solid-js, @solidjs/web, @solidjs/vite-plugin and vite, read from the app root.
  • Open in editor. GET /__solid/devtools/open-in-editor?file=src/App.tsx:12:5 resolves the location against the Vite root and hands the absolute path to Vite's own /__open-in-editor. Leading folders are dropped until the file exists, so examples/app/src/App.tsx still opens when the root is examples/app. A missing file answers 404. The toolbar used to send one request per sub-path because it did not know the root.

How

  • The generated client entry, and the mount module that authored entries import, call connectDevServer(import.meta.hot). The toolbar is pre-bundled and has no import.meta.hot of its own. The call uses a namespace import and a typeof check, so a devtools release without connectDevServer keeps working.
  • The toolbar sends solid:devtools:hello with performance.timeOrigin. The plugin answers solid:devtools:info with the versions and the errors it kept since then (up to 50). This is how the error of the render that served the page gets there, since that render happens before the page can connect. Later errors go out as solid:devtools:server-error.
  • configureServerErrors keeps one hook on globalThis, so registering a second one would replace the app's. The plugin turns the slot's hook into an accessor instead. The app's call sets the app hook, and the runtime reads a hook that reports the failure and then calls the app's. The accessor is put back when the dev server closes.

Changes

  • src/devtools/server.ts: the solid:devtools/server plugin, the error accessor, version lookup and location resolving.
  • src/devtools/protocol.ts: the event names, the endpoint and the payload types. They are copies of @solidjs/start-devtools/protocol until a devtools release ships it. Then the constants take that entry's types, as src/diagnostics does with @solidjs/diagnostics/protocol.
  • src/devtools/index.ts: devtoolsConnectCode(), used by the mount module.
  • src/ssr/index.ts: the generated client entry connects, and the start plugins include solid:devtools/server unless start.devtools is false.
  • README paragraph and changeset.

Testing

  • src/devtools/server.test.ts runs the accessor against the real @solidjs/web server runtime. A failure reaches both the listener and the app's hook. With no app hook a failed request is still printed. The app's hook is restored on stop. It also covers location resolving, version lookup, package detection and the generated connect code.
  • End to end: a Start app (ssr: true, start: { devtools: true }) served with this build and the devtools branch of #48. Its component throws during the server render. The page got the info with the error and the versions, Health showed Server render: server render boom, and the endpoint answered 404 for a missing file. I did not call the endpoint with a file that exists, since that launches the editor.
  • vitest run (138 tests), tsc --noEmit, pnpm build, pnpm check and pnpm test pass locally.

Risk

  • The accessor depends on @solidjs/web keeping the hook under Symbol.for("solid-js/server/errors") and reading slot.hook on each report. A listener API in @solidjs/web would replace it.
  • With no app hook, the runtime prints some failures itself. Because a hook is now always set, the plugin prints the ones with handling: "failed". I have not checked whether the runtime prints other kinds without a hook, so some console output may be lost while devtools is installed.
  • A server environment in a worker or another process does not share globalThis, so its errors are not heard.

Not done

  • Handler locations for the toolbar's Activity view. They need a new kind in the compiler's sourceNames.
  • A source endpoint for stack frames the browser cannot fetch over /@fs/.
  • An HTTP endpoint for agents that returns the toolbar's session report.
  • Self-review only. A fresh review is still to do before this leaves draft.

🤖 Generated with Claude Code

The toolbar runs in the page and cannot see the server process or the
disk. In dev serve, when the app uses @solidjs/start-devtools:

- errors the server runtime reports through configureServerErrors are
  sent to the toolbar over the HMR channel, and the app's own hook is
  still called
- the toolbar's hello gets the installed versions and the errors kept
  since the page started loading
- /__solid/devtools/open-in-editor resolves a location against the Vite
  root and hands it to Vite's /__open-in-editor

The generated client entry and the mount module call connectDevServer
with import.meta.hot when the devtools release exports it.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@changeset-bot

changeset-bot Bot commented Nov 4, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: d28ecb5

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@solidjs/vite-plugin Minor

Not sure what this means? Click here to learn what changesets are.

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

@pkg-pr-new

pkg-pr-new Bot commented Nov 4, 2026

Copy link
Copy Markdown

Open in StackBlitz

npm i https://pkg.pr.new/@solidjs/vite-plugin@530

commit: d28ecb5

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