Skip to content

feat: add Start development toolbar and server function inspector - #314

Merged
ryansolid merged 4 commits into
solidjs:nextfrom
birkskyum:dev-toolbar-inspector
Aug 19, 2026
Merged

feat: add Start development toolbar and server function inspector#314
ryansolid merged 4 commits into
solidjs:nextfrom
birkskyum:dev-toolbar-inspector

Conversation

@birkskyum

@birkskyum birkskyum commented Aug 19, 2026

Copy link
Copy Markdown
Member

Waiting for:

Summary

  • add the Start development toolbar, runtime error overlay, and server function inspector
  • keep the browser UI in @solidjs/start-devtools
  • keep Vite-specific injection and lifecycle wiring in this plugin
  • support generated and authored client entries
  • detect the optional devtools package automatically
  • support start.devtools: true to require it and false to disable it
  • keep the toolbar out of production builds

Package split

The toolbar UI and browser runtime live in solidjs/solid-start-devtools and will be published as @solidjs/start-devtools.

This PR is the Start-mode adapter. It provides the development-only virtual modules, injects the toolbar into generated or authored client entries, and connects the server-function observer.

The devtools package is an optional peer dependency. Start projects can install it as a development dependency, while other users of the Vite plugin do not receive its UI dependencies. When the package is absent the toolbar stays off. Explicitly setting start.devtools: true reports a clear setup error if it is missing.

The development dependency and lockfile are prepared for @solidjs/start-devtools@1.0.0-next.0. CI installation will remain blocked until that version is published.

Context

This ports the toolbar work from the SolidStart v2 migration and follows the inspector implementation from solid-start#2049.

Server function call data depends on dom-expressions#570 and a subsequent Solid package refresh. The runtime error viewer works independently.

Testing

  • plugin build and type declarations
  • package checks, 100/100
  • automatic mounting when the optional package is installed
  • no injection when the package is absent
  • clear error when start.devtools: true is used without the package
  • no devtools code in the production output
  • existing Start client, production, and middleware suites

@changeset-bot

changeset-bot Bot commented Aug 19, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 8a3ae45

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 Aug 19, 2026

Copy link
Copy Markdown

Open in StackBlitz

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

commit: 8a3ae45

@birkskyum
birkskyum marked this pull request as draft August 19, 2026 19:18
@birkskyum
birkskyum marked this pull request as ready for review August 19, 2026 19:27
@birkskyum
birkskyum force-pushed the dev-toolbar-inspector branch from d0b54ed to fdeef38 Compare August 19, 2026 19:44
@birkskyum
birkskyum marked this pull request as draft August 19, 2026 19:46
@birkskyum
birkskyum marked this pull request as ready for review August 19, 2026 21:19
@birkskyum
birkskyum force-pushed the dev-toolbar-inspector branch from b15abbb to 10f9685 Compare August 19, 2026 21:21
- Virtual devtools modules no longer rely on bare-specifier resolution
  from the Vite root: detection captures the package's resolved id (app
  graph first, plugin's own location as fallback) and resolveId
  delegates the virtual modules' imports of @solidjs/start-devtools to
  that resolution, so pnpm-isolated installs work without a root hoist
  (repro: workspace app whose only copy is the plugin's materialized
  optional peer in .pnpm — before: dev 500s, after: toolbar works).
- load() runs detection itself on a cold first touch of the virtual
  modules so request order doesn't matter.
- The toolbar graph is pre-bundled at scan time when the package is
  root-reachable (include @solidjs/start-devtools +
  @solidjs/web/server-functions), mirroring the refresh-runtime
  precedent — first-request discovery re-optimized and full-reloaded
  the page mid-session.
- The authored-entry transform normalizes both sides of its module-id
  comparison with Vite's normalizePath (Windows backslash fix).
- pnpm-workspace.yaml gains the minimumReleaseAgeExclude entry for
  @solidjs/start-devtools@1.0.0-next.0 (published today; pnpm's policy
  rejects <24h-old packages).
- Changeset reworded to document the option name and semantics.
- start-ssr e2e (+8): dev asserts the generated entry wraps in
  DevToolbar, the observer wiring, and the mounted toolbar in the DOM;
  a SSR_DEVTOOLS=0 sub-run asserts the opt-out; prod asserts
  grep-clean client/server bundles and a toolbar-free DOM.

Co-authored-by: Cursor <cursoragent@cursor.com>
@ryansolid

Copy link
Copy Markdown
Member

Landing this with post-review fixes applied on top (8a3ae45), verified against the now-published @solidjs/start-devtools@1.0.0-next.0:

  • Bare-import resolution (blocker): the virtual devtools modules imported @solidjs/start-devtools by bare name, which Vite could only resolve from the app root — broken for pnpm-isolated installs where the only copy is the plugin's materialized optional peer in .pnpm. Detection now captures the package's resolved id (app graph first, plugin's own location as a fallback) and resolveId delegates the virtual modules' imports to that exact resolution. Repro'd both ways with packed tarballs: a workspace app with the transitive-only copy 500s on the PR head ("start.devtools requires @solidjs/start-devtools" despite it being installed) and works after the fix, with the import visibly delegated via /@fs/.
  • Cold first touch: load() for the virtual modules now runs detection itself, so a direct request before the entry has loaded doesn't error.
  • No mid-session reload: the toolbar graph hangs off virtual modules the dep scanner never crawls, so its first-request discovery re-optimized deps and full-reloaded the page. When the package is root-reachable it (plus @solidjs/web/server-functions) is pre-bundled at scan time, mirroring the refresh-runtime precedent.
  • Windows: the authored-entry transform compares module ids against path.resolve output — both sides now go through Vite's normalizePath.
  • Lockfile: the committed integrity hash matches the real published tarball (verified by a fresh registry install). pnpm-workspace.yaml gains the minimumReleaseAgeExclude entry the fresh publish needs.
  • e2e: start-ssr grows 8 devtools assertions — dev asserts the generated-entry DevToolbar wrap, the observer wiring, and the mounted toolbar in the live DOM (hydration stays clean); an SSR_DEVTOOLS=0 sub-run asserts the opt-out; prod asserts grep-clean client/server bundles and a toolbar-free DOM.
  • Changeset reworded to name the option (start.devtools) and its semantics.

Full local gate green: start-ssr 357/357 + http-bridge 10/10, start-client 46/46 (incl. this PR's toolbar/error-viewer checks), css-matrix 82/82 + bridge 19/19, build + tsc + package-check clean.

Thanks @birkskyum — the toolbar itself worked great in testing; hydration is clean with the DevToolbar wrap and the server-function inspector picks up live calls.

@ryansolid
ryansolid merged commit 8459560 into solidjs:next Aug 19, 2026
6 checks passed
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.

2 participants