Skip to content

feat: add a Vite plugin that mounts the toolbar - #32

Open
lxsmnsyc wants to merge 1 commit into
mainfrom
feat/vite-plugin
Open

lxsmnsyc wants to merge 1 commit into
mainfrom
feat/vite-plugin

Conversation

@lxsmnsyc

Copy link
Copy Markdown
Member

Adds @solidjs/start-devtools/vite, a Vite plugin that mounts the toolbar during vite dev, so an app served from an index.html needs no <DevToolbar> in its JSX. It is the first step toward devtools features that need the dev server, such as forwarding server-side diagnostics or an endpoint for agents.

import solid from '@solidjs/vite-plugin';
import devtools from '@solidjs/start-devtools/vite';

export default defineConfig({ plugins: [solid(), devtools()] });

How it relates to @solidjs/vite-plugin

Start mode of @solidjs/vite-plugin already mounts the toolbar (src/devtools/index.ts and the generated entries in src/ssr/index.ts on its next branch). Its plain mode mounts nothing. This plugin only covers the plain mode:

  • It adds its script through transformIndexHtml. Start mode serves no index.html, so the hook never runs there and the two plugins do not overlap.
  • mountDevToolbar() returns the same dispose on a second call and skips the mount when a toolbar is already in the page, so an app that also renders DevToolbar keeps one toolbar.

Whether devtools should take over the Start mode mount too is open for discussion. The server entry wraps the app in DevToolbar so a server render error sets the 500 status, which a script tag cannot do.

Changes

  • src/vite.ts: the plugin. It applies to the dev server only, so builds, vite preview and Vitest are left alone. It resolves the package from the app root, and pre-bundles it so the first page load does not optimize it again and reload. mount: false turns the mount off.
  • The package exports ./vite, built for Node into dist/vite.js with its types. vite is an optional peer dependency.
  • tests/fixture-vite is an app that renders no toolbar itself and uses the plugin. Playwright serves it beside the existing fixture.
  • README section and changeset.

Testing

  • New e2e tests check that the toolbar mounts on its own host beside the app, that the app keeps working, and that a production build carries neither the mount script nor the toolbar.
  • pnpm test, pnpm typecheck, pnpm format:check, pnpm build, pnpm check and the full e2e suite pass locally. pnpm install --frozen-lockfile still passes.

🤖 Generated with Claude Code

- `@solidjs/start-devtools/vite` exports a Vite plugin. In an app served from an index.html, it adds a script that mounts the toolbar during `vite dev`, so the app needs no JSX for it.
- It applies to the dev server only. Builds, `vite preview` and Vitest are left alone.
- It pre-bundles the package, so the first page load does not optimize it again and reload.
- Start mode of `@solidjs/vite-plugin` serves no index.html and mounts the toolbar through its own entries, so the plugin adds nothing there.
- `mount: false` keeps the plugin without the mount.
- A second fixture renders no toolbar itself and uses the plugin. Its e2e tests check the mount and that a production build carries no toolbar.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
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