@solidjs/vite-plugin 3.0.0-next.29 → 3.0.0-next.31

package/dist/esm/index.mjs

@@ -6,8 +6,8 @@ import { mergeAndConcat } from 'merge-anything';
 import { createRequire } from 'module';
 import path from 'path';
 import { Readable } from 'node:stream';
-import { createFilter, loadEnv, version } from 'vite';
-import { pathToFileURL } from 'node:url';
+import { createFilter, normalizePath, loadEnv, version } from 'vite';
+import { pathToFileURL, fileURLToPath } from 'node:url';
 import { crawlFrameworkPkgs } from 'vitefu';
 
 // Node <-> web-standard request/response bridging shared by the plugin's dev
@@ -21,24 +21,54 @@ import { crawlFrameworkPkgs } from 'vitefu';
  * different URL than the one node saw — the dev middlewares use it to
  * restore the configured Vite `base` that the dev/preview base middleware
  * stripped, so the handler always sees production-shaped URLs.
+ *
+ * Handles plain HTTP/1 *and* the HTTP/2 compat API: Vite's dev server uses
+ * `http2.createSecureServer({ allowHTTP1: true })` whenever `server.https`
+ * is set without a proxy, so under https the middlewares receive
+ * `Http2ServerRequest`s. The h2/protocol/abort techniques here are
+ * reimplemented from srvx's Node adapter (github.com/h3js/srvx,
+ * src/adapters/_node) — reference, not copied code.
  */
-function webRequestFromNode(req, urlPath) {
-  const url = new URL(urlPath ?? req.url ?? '/', `http://${req.headers.host || 'localhost'}`);
+function webRequestFromNode(req, urlPath, res) {
+  // TLS sockets (https and h2) expose `encrypted`; a Request whose url says
+  // http: on a TLS connection breaks secure-cookie logic, absolute
+  // redirects, and origin checks in application code.
+  const protocol = req.socket?.encrypted ? 'https' : 'http';
+  // HTTP/2 has no Host header — the authority travels in the `:authority`
+  // pseudo-header instead.
+  const host = req.headers.host ?? req.headers[':authority'] ?? 'localhost';
+  const url = new URL(urlPath ?? req.url ?? '/', `${protocol}://${host}`);
   const headers = new Headers();
   for (const [key, value] of Object.entries(req.headers)) {
     if (value === undefined) continue;
+    // HTTP/2 pseudo-headers (:method, :path, :authority, :scheme) are not
+    // legal field names — Headers#append throws a TypeError on them.
+    if (key[0] === ':') continue;
     if (Array.isArray(value)) {
       for (const item of value) headers.append(key, item);
     } else {
       headers.append(key, value);
     }
   }
+  // Surface client disconnects as the request's AbortSignal so handlers can
+  // cancel work (streamed SSR renders, in-flight fetches). The response's
+  // 'close' fires on normal completion too; `writableEnded` distinguishes a
+  // finished response from a client that went away.
+  let signal;
+  if (res) {
+    const controller = new AbortController();
+    res.once('close', () => {
+      if (!res.writableEnded) controller.abort();
+    });
+    signal = controller.signal;
+  }
   const method = req.method || 'GET';
   const body = method === 'GET' || method === 'HEAD' ? undefined : Readable.toWeb(req);
   return new Request(url, {
     method,
     headers,
     body,
+    signal,
     // undici requires half-duplex for streamed request bodies.
     ...(body ? {
       duplex: 'half'
@@ -53,7 +83,11 @@ async function sendWebResponse(res, response) {
     if (key !== 'set-cookie') res.setHeader(key, value);
   });
   if (cookies && cookies.length) res.setHeader('set-cookie', cookies);
-  if (!response.body) {
+  // HEAD gets the head only — and the body must be *cancelled*, not pumped:
+  // node discards HEAD body writes, so streaming a long (or endless) body
+  // into the void just burns the render. (Technique from srvx.)
+  if (!response.body || res.req?.method === 'HEAD') {
+    response.body?.cancel().catch(() => {});
     res.end();
     return;
   }
@@ -119,6 +153,7 @@ function joinBase(base, pathname) {
  * dynamically imported modules register their own styles when they render.
  */
 
+const defaultStyleFilter = id => !id.includes('node_modules');
 // The resolver is created plugin-side (it closes over the dev server) but is
 // called from the SSR module runner, which only shares `globalThis` with the
 // plugin when it runs in-process (the default). The primary channel is a
@@ -262,13 +297,15 @@ async function getModuleNode(env, file, importer) {
     return;
   }
 }
-async function collectModuleDeps(env, file, deps, crawled, onFile, importer) {
+async function collectModuleDeps(env, file, deps, crawled, filter, onFile, importer) {
   crawled.add(file);
   const node = await getModuleNode(env, file, importer);
   if (!node?.id || deps.has(node)) return;
   deps.add(node);
-  if (node.file && !node.id.includes('node_modules')) onFile?.(node.file);
-  if (cssFileRegExp.test(node.url.split('?')[0]) || node.id.includes('node_modules')) return;
+  const isCss = cssFileRegExp.test(node.url.split('?')[0]);
+  if (!isCss && node.file && !node.id.startsWith('\0') && !filter(node.file)) return;
+  if (node.file) onFile?.(node.file);
+  if (isCss) return;
   if (!node.transformResult) {
     await env.transformRequest(node.url).catch(() => {});
   }
@@ -279,7 +316,7 @@ async function collectModuleDeps(env, file, deps, crawled, onFile, importer) {
   // from dynamicDeps — dynamic imports load their own styles when rendered.
   for (const dep of directDeps) {
     if (crawled.has(dep)) continue;
-    await collectModuleDeps(env, dep, deps, crawled, onFile, node.id);
+    await collectModuleDeps(env, dep, deps, crawled, filter, onFile, node.id);
   }
 }
 function injectQuery(url, query) {
@@ -287,11 +324,11 @@ function injectQuery(url, query) {
 }
 
 /** Discovers ambient CSS in an entry graph without choosing how it is transported. */
-async function collectDevStyleSources(env, files, onFile) {
+async function collectDevStyleSources(env, files, onFile, filter = defaultStyleFilter) {
   const deps = new Set();
   const crawled = new Set();
   for (const file of files) {
-    await collectModuleDeps(env, file, deps, crawled, onFile);
+    await collectModuleDeps(env, file, deps, crawled, filter, onFile);
   }
   const css = [];
   const seen = new Set();
@@ -318,11 +355,11 @@ async function collectDevStyleSources(env, files, onFile) {
  * CSS into `<head>` so server-painted content is styled from the first byte
  * (no FOUC while waiting for Vite's client-side style injection).
  */
-async function collectDevStyles(server, files) {
+async function collectDevStyles(server, files, filter = defaultStyleFilter) {
   const ssrEnv = server.environments?.ssr;
   const clientEnv = server.environments?.client;
   if (!ssrEnv || !clientEnv) return [];
-  const sources = await collectDevStyleSources(ssrEnv, files.map(file => path.resolve(server.config.root, file)));
+  const sources = await collectDevStyleSources(ssrEnv, files.map(file => path.resolve(server.config.root, file)), undefined, filter);
   const css = [];
   for (const source of sources) {
     // `?direct` yields the compiled stylesheet text (what Vite serves for
@@ -378,7 +415,7 @@ function devModuleUrl(root, base, key) {
   // drive letter on Windows: /@fs/C:/…).
   return joinBase(base, '/@fs/' + absolute.replace(/^\//, '') + query);
 }
-function createDevAssetResolver(server) {
+function createDevAssetResolver(server, filter = defaultStyleFilter) {
   // Server-side lazy() re-requests a module's assets on every retry of a
   // suspended render pass (retries re-create the component). The build
   // manifest answers those repeats synchronously and the pass converges; an
@@ -412,7 +449,7 @@ function createDevAssetResolver(server) {
         // The module's dev URL doubles as its client entry: modulepreload
         // hint and hydration module-map value.
         const js = [devModuleUrl(root, base, key)];
-        const css = await collectDevStyles(server, [key]);
+        const css = await collectDevStyles(server, [key], filter);
         return {
           js,
           css
@@ -505,6 +542,11 @@ function boundaryModules() {
 function isRunnableEnvironment(environment) {
   return !!environment && typeof environment === 'object' && 'runner' in environment;
 }
+function getEnvironmentConsumer(environment, options) {
+  const consumer = environment?.config?.consumer;
+  if (consumer === 'client' || consumer === 'server') return consumer;
+  return options?.ssr ? 'server' : 'client';
+}
 
 // The `"use server"` directive compiler. This wraps the native
 // `transformDirectives` pass from @dom-expressions/compiler (Rust/Oxc); the
@@ -941,12 +983,12 @@ function serverFunctions(options = {}, internal = {}) {
     const relative = path.relative(root, entry).split(path.sep).join('/');
     return relative.startsWith('..') ? '/@fs/' + entry : '/' + relative;
   }
-  const turnkeyPlugins = [{
+  const startPlugins = [{
     name: 'solid:server-functions/handler',
     enforce: 'pre',
     resolveId(source, _importer, opts) {
       if (source === HANDLER_ID$1) {
-        if (!opts?.ssr) {
+        if (getEnvironmentConsumer(this.environment, opts) !== 'server') {
           this.error(`${HANDLER_ID$1} is server-only; import it from your server entry (SSR build).`);
         }
         return {
@@ -957,7 +999,7 @@ function serverFunctions(options = {}, internal = {}) {
       return null;
     },
     load(id, opts) {
-      if (id === HANDLER_ID$1 && opts?.ssr) {
+      if (id === HANDLER_ID$1 && getEnvironmentConsumer(this.environment, opts) === 'server') {
         const externalDev = this.environment.mode === 'dev' && (internal.externalDevServer || !isRunnableEnvironment(this.environment));
         return handlerModuleCode(isBuild || externalDev);
       }
@@ -965,7 +1007,7 @@ function serverFunctions(options = {}, internal = {}) {
     }
   }];
   if (installDevMiddleware) {
-    turnkeyPlugins.push({
+    startPlugins.push({
       name: 'solid:server-functions/dev-middleware',
       apply: 'serve',
       configureServer(server) {
@@ -1010,7 +1052,7 @@ function serverFunctions(options = {}, internal = {}) {
                 nativeEvent: req
               }
             };
-            const response = internal.ssrHandler ? await handler.handleRequest(webRequestFromNode(req, dispatchUrl), dispatchOptions) : await handler.handleServerFunctionRequest(webRequestFromNode(req, dispatchUrl), dispatchOptions);
+            const response = internal.ssrHandler ? await handler.handleRequest(webRequestFromNode(req, dispatchUrl, res), dispatchOptions) : await handler.handleServerFunctionRequest(webRequestFromNode(req, dispatchUrl, res), dispatchOptions);
             await sendWebResponse(res, response);
           })().catch(error => {
             if (error instanceof Error) server.ssrFixStacktrace(error);
@@ -1077,7 +1119,7 @@ function serverFunctions(options = {}, internal = {}) {
       return null;
     },
     async load(id, opts) {
-      const mode = opts?.ssr ? 'server' : 'client';
+      const mode = getEnvironmentConsumer(this.environment, opts);
       if (id === manifestId) {
         if (isBuild && mode === 'server') {
           // Merge the client build's persisted discoveries at load time,
@@ -1100,7 +1142,7 @@ function serverFunctions(options = {}, internal = {}) {
     name: 'solid:server-functions/compiler',
     enforce: 'pre',
     async transform(code, fileId, opts) {
-      const mode = opts?.ssr ? 'server' : 'client';
+      const mode = getEnvironmentConsumer(this.environment, opts);
       const [id] = fileId.split('?');
       if (!filter(id)) {
         return null;
@@ -1133,7 +1175,17 @@ function serverFunctions(options = {}, internal = {}) {
       }
       return null;
     }
-  }, ...turnkeyPlugins];
+  }, ...startPlugins];
+}
+
+const DEVTOOLS_PACKAGE = '@solidjs/start-devtools';
+const DEVTOOLS_ID = 'virtual:solid-devtools';
+const DEVTOOLS_MOUNT_ID = 'virtual:solid-devtools/mount';
+function devtoolsModuleCode() {
+  return [`import * as serverFunctions from '@solidjs/web/server-functions';`, `import { DevToolbar, pushServerFunctionCall } from '${DEVTOOLS_PACKAGE}';`, `const observe = Reflect.get(serverFunctions, 'observeServerFunctionCalls');`, `if (typeof observe === 'function') observe(pushServerFunctionCall);`, `export { DevToolbar };`].join('\n');
+}
+function devtoolsMountModuleCode() {
+  return [`import ${JSON.stringify(DEVTOOLS_ID)};`, `import { mountDevToolbar } from '${DEVTOOLS_PACKAGE}';`, `mountDevToolbar();`].join('\n');
 }
 
 // Start-mode serving for plain Vite apps: `solid({ start: {...} })` (or the
@@ -1218,6 +1270,7 @@ const RESOLVED_DEV_STYLES_ID = '\0' + DEV_STYLES_ID;
 const ENTRY_SERVER_ID = 'virtual:solid-ssr-entry-server.tsx';
 const ENTRY_CLIENT_ID = 'virtual:solid-ssr-entry-client.tsx';
 const DOCUMENT_ID = 'virtual:solid-ssr-document.tsx';
+const ERROR_BOUNDARY_ID = 'virtual:solid-ssr-error-boundary.tsx';
 const MANIFEST_ID = 'virtual:solid-manifest';
 const SERVER_FUNCTION_HANDLER_ID = 'virtual:solid-server-function-handler';
 const STORAGE_SOURCE = '@solidjs/web/storage';
@@ -1329,6 +1382,12 @@ function startServe(options, internal = {}) {
   // the server-function handler module either way). Everything is gated
   // codegen: with the option off, none of these imports exist anywhere.
   const serverComponents = !!internal.serverComponents;
+  const errorBoundary = options.errorBoundary !== false;
+  const styleFilter = internal.styleFilter;
+  let devtools = false;
+  let devtoolsResolution;
+  /** Resolved module id of `@solidjs/start-devtools` once detection succeeds. */
+  let devtoolsId = null;
   // `external` is server-mode-only (documented no-op in client mode, so a
   // host-integrated config survives the `ssr` boolean flip untouched).
   const externalServer = !clientMode && !!options.external;
@@ -1345,6 +1404,40 @@ function startServe(options, internal = {}) {
     if (!entries) throw new Error('[@solidjs/vite-plugin] SSR entries not resolved yet');
     return entries;
   }
+  async function resolveDevtools(resolve, importer) {
+    if (devtools !== undefined) return devtools;
+    // Detect from the app graph first (the documented install location), then
+    // from the plugin's own file: in pnpm-isolated apps a copy that is only a
+    // dependency of the plugin is not reachable from the app's importers. The
+    // resolved id is kept so the virtual modules' imports of the package can
+    // be delegated to it (see resolveId).
+    devtoolsResolution ??= (async () => ((await resolve(DEVTOOLS_PACKAGE, importer)) ?? (await resolve(DEVTOOLS_PACKAGE, fileURLToPath(import.meta.url))))?.id ?? null)();
+    devtoolsId = await devtoolsResolution;
+    devtools = devtoolsId !== null;
+    if (!devtools && options.devtools === true) {
+      throw new Error('[@solidjs/vite-plugin] start.devtools requires @solidjs/start-devtools. ' + 'Install it as a development dependency or set start.devtools to false.');
+    }
+    return devtools;
+  }
+
+  /**
+   * Cheap root-walk probe mirroring how the optimizer resolves bare
+   * `optimizeDeps.include` entries: is @solidjs/start-devtools reachable from
+   * the Vite root? Detection proper (resolveDevtools) runs later with a real
+   * importer; this only decides whether the toolbar graph can be pre-bundled
+   * at scan time — it hangs off virtual modules the scanner never sees, so
+   * first-request discovery would force a re-optimize + full page reload.
+   */
+  function devtoolsReachableFromRoot(dir) {
+    for (let current = dir;;) {
+      if (existsSync(path.join(current, 'node_modules', DEVTOOLS_PACKAGE, 'package.json'))) {
+        return true;
+      }
+      const parent = path.dirname(current);
+      if (parent === current) return false;
+      current = parent;
+    }
+  }
 
   /** Import specifier for generated code: absolute for files, id for virtuals. */
   function entryServerSpec() {
@@ -1384,7 +1477,7 @@ function startServe(options, internal = {}) {
     return generated ? [app, ...(document ? [document] : [])] : [path.resolve(root, entryServer)];
   }
   async function devStylesModuleCode(environment, watchFile) {
-    const styles = await collectDevStyleSources(environment, styleRoots(), watchFile);
+    const styles = await collectDevStyleSources(environment, styleRoots(), watchFile, styleFilter);
     if (!styles.length) return `export default '';`;
     const imports = styles.map((style, index) => {
       const specifier = style.url.includes('?') ? `${style.url}&inline` : `${style.url}?inline`;
@@ -1392,19 +1485,26 @@ function startServe(options, internal = {}) {
     });
     return [...imports, `const ids = ${JSON.stringify(styles.map(style => style.id))};`, `const css = [${styles.map((_, index) => `css${index}`).join(', ')}];`, `const escapeAttr = value => value.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;');`, `export default css.map((content, index) => {`, `  const id = escapeAttr(ids[index]);`, `  return '<style data-asset="' + id + '" data-vite-dev-id="' + id + '">' +`, `    content.replace(/<\\/(style)/gi, '<\\\\/$1') + '</style>';`, `}).join('');`].join('\n');
   }
+  function errorBoundaryImport() {
+    return isBuild && errorBoundary ? [`import { DefaultErrorBoundary } from ${JSON.stringify(ERROR_BOUNDARY_ID)};`] : [];
+  }
+  function documentTree(root, wrapper) {
+    const content = wrapper ? `<${wrapper}><${root} /></${wrapper}>` : `<${root} />`;
+    return isBuild && errorBoundary ? [`  <DefaultErrorBoundary>`, `    <Document>`, `      <DefaultErrorBoundary>`, `        ${content}`, `      </DefaultErrorBoundary>`, `    </Document>`, `  </DefaultErrorBoundary>`] : [`  <Document>`, `    ${content}`, `  </Document>`];
+  }
   function generatedEntryServerCode() {
     if (clientMode) {
       // The client-mode shell: the document without the app. Rendered per
       // request in dev (any HTML GET gets it — history-fallback semantics)
       // and once at build time into dist/client/index.html. The client
       // entry script is injected by the handler, exactly like SSR mode.
-      return [`import { renderToStream } from '@solidjs/web';`, `import manifest from ${JSON.stringify(MANIFEST_ID)};`, `import Document from ${JSON.stringify(documentSpec())};`, ``, `export function render(request, context) {`, `  return renderToStream(() => <Document />, { manifest });`, `}`].join('\n');
+      return [`import { renderToStream } from '@solidjs/web';`, `import manifest from ${JSON.stringify(MANIFEST_ID)};`, `import Document from ${JSON.stringify(documentSpec())};`, ...errorBoundaryImport(), ``, `export function render(request, context) {`, `  return renderToStream(() => (`, ...(isBuild && errorBoundary ? [`  <DefaultErrorBoundary>`, `    <Document />`, `  </DefaultErrorBoundary>`] : [`  <Document />`]), `  ), { manifest });`, `}`].join('\n');
     }
     const {
       app
     } = requireEntries();
     const streamOptions = `{ manifest${serverComponents ? ', plugins: [ServerComponentPlugin]' : ''} }`;
-    return [`import { renderToStream${setupPath ? ', getRequestEvent' : ''} } from '@solidjs/web';`, ...(serverComponents ? [`import { configureServerFunctionsServer } from '@solidjs/web/server-functions';`, `import { frameTransformDirectResult, ServerComponentPlugin } from '@solidjs/web/frames';`] : []), `import manifest from ${JSON.stringify(MANIFEST_ID)};`, `import Document from ${JSON.stringify(documentSpec())};`, `import App from ${JSON.stringify(app)};`, ...(setupPath ? [`import setup from ${JSON.stringify(setupPath)};`] : []), ``, ...(setupPath ? [`if (typeof setup !== 'function') {`, `  throw new Error('[@solidjs/vite-plugin] start.setup must default-export a function ' +`, `    '((event, App) => Component | void | Promise<...>): ' + ${JSON.stringify(options.setup)});`, `}`, ``] : []), ...(serverComponents ? [
+    return [`import { renderToStream${setupPath ? ', getRequestEvent' : ''} } from '@solidjs/web';`, ...(serverComponents ? [`import { configureServerFunctionsServer } from '@solidjs/web/server-functions';`, `import { frameTransformDirectResult, ServerComponentPlugin } from '@solidjs/web/frames';`] : []), `import manifest from ${JSON.stringify(MANIFEST_ID)};`, `import Document from ${JSON.stringify(documentSpec())};`, `import App from ${JSON.stringify(app)};`, ...errorBoundaryImport(), ...(setupPath ? [`import setup from ${JSON.stringify(setupPath)};`] : []), ``, ...(setupPath ? [`if (typeof setup !== 'function') {`, `  throw new Error('[@solidjs/vite-plugin] start.setup must default-export a function ' +`, `    '((event, App) => Component | void | Promise<...>): ' + ${JSON.stringify(options.setup)});`, `}`, ``] : []), ...(serverComponents ? [
     // Direct (in-process) server-function calls made during document
     // SSR must resolve to inline-renderable components; the endpoint
     // response transform is installed separately by the
@@ -1418,9 +1518,9 @@ function startServe(options, internal = {}) {
     // the *complete* render) and buffers the stream — so it crosses
     // boxed under a private key the generated handler unboxes
     // (both modules are ours).
-    `export function render(request, context) {`, `  const prepared = setup(getRequestEvent(), App);`, `  if (prepared && typeof prepared.then === 'function') {`, `    return prepared.then((component) => ({ ${STREAM_BOX}: renderApp(component || App) }));`, `  }`, `  return renderApp(prepared || App);`, `}`, ``, `function renderApp(Root) {`, `  return renderToStream(() => (`, `    <Document>`, `      <Root />`, `    </Document>`, `  ), ${streamOptions});`, `}`] : [`export function render(request, context) {`, `  return renderToStream(() => (`, `    <Document>`, `      <App />`, `    </Document>`, `  ), ${streamOptions});`, `}`])].join('\n');
+    `export function render(request, context) {`, `  const prepared = setup(getRequestEvent(), App);`, `  if (prepared && typeof prepared.then === 'function') {`, `    return prepared.then((component) => ({ ${STREAM_BOX}: renderApp(component || App) }));`, `  }`, `  return renderApp(prepared || App);`, `}`, ``, `function renderApp(Root) {`, `  return renderToStream(() => (`, ...documentTree('Root'), `  ), ${streamOptions});`, `}`] : [`export function render(request, context) {`, `  return renderToStream(() => (`, ...documentTree('App'), `  ), ${streamOptions});`, `}`])].join('\n');
   }
-  function generatedEntryClientCode() {
+  function generatedEntryClientCode(toolbar) {
     const {
       app
     } = requireEntries();
@@ -1430,13 +1530,13 @@ function startServe(options, internal = {}) {
       // app cannot claim server DOM anyway. The entry script is injected
       // without `async` (plain module = deferred), so document.body is
       // complete when this runs.
-      return [`import { render } from '@solidjs/web';`, `import App from ${JSON.stringify(app)};`, ``, `render(() => <App />, document.body);`].join('\n');
+      return [`import { render } from '@solidjs/web';`, ...errorBoundaryImport(), ...(toolbar ? [`import { DevToolbar } from ${JSON.stringify(DEVTOOLS_ID)};`] : []), `import App from ${JSON.stringify(app)};`, ``, `render(() => ${isBuild && errorBoundary ? '<DefaultErrorBoundary><App /></DefaultErrorBoundary>' : toolbar ? '<DevToolbar><App /></DevToolbar>' : '<App />'}, document.body);`].join('\n');
     }
-    return [`import { hydrate } from '@solidjs/web';`, ...(serverComponents ? [`import { installServerComponents } from '@solidjs/web/frames';`] : []), `import Document from ${JSON.stringify(documentSpec())};`, `import App from ${JSON.stringify(app)};`, ``, ...(serverComponents ? [
+    return [`import { hydrate } from '@solidjs/web';`, ...(toolbar ? [`import { DevToolbar } from ${JSON.stringify(DEVTOOLS_ID)};`] : []), ...(serverComponents ? [`import { installServerComponents } from '@solidjs/web/frames';`] : []), ...errorBoundaryImport(), `import Document from ${JSON.stringify(documentSpec())};`, `import App from ${JSON.stringify(app)};`, ``, ...(serverComponents ? [
     // Installs the t=0 document-adoption registry and the transport
     // policy (component responses morph their boundary instead of
     // decoding as data). Must run before hydrate().
-    `installServerComponents();`, ``] : []), `hydrate(() => (`, `  <Document>`, `    <App />`, `  </Document>`, `), document);`].join('\n');
+    `installServerComponents();`, ``] : []), `hydrate(() => (`, ...documentTree('App', toolbar ? 'DevToolbar' : undefined), `), document);`].join('\n');
   }
 
   // Built-in document shell: minimal, hydration-ready. The client entry
@@ -1447,6 +1547,7 @@ function startServe(options, internal = {}) {
   // HydrationScript is covered too: the handler strips the event-capture
   // script from the client-mode shell.)
   const documentShellCode = [...(clientMode ? [] : [`import { HydrationScript } from '@solidjs/web';`, ``]), `export default function Document(props) {`, `  return (`, `    <html lang="en">`, `      <head>`, `        <meta charset="utf-8" />`, `        <meta name="viewport" content="width=device-width, initial-scale=1.0" />`, ...(clientMode ? [] : [`        <HydrationScript />`]), `      </head>`, `      <body>{props.children}</body>`, `    </html>`, `  );`, `}`].join('\n');
+  const errorBoundaryCode = [`import { Errored } from 'solid-js';`, `import { httpStatus, isServer } from '@solidjs/web';`, ``, `function ErrorFallback(props) {`, `  console.error(props.error());`, `  httpStatus(500);`, `  return (`, `    <span style="font-size:1.5em;text-align:center;position:fixed;left:0;bottom:55%;width:100%">`, `      {isServer ? '500 | Internal Server Error' : 'Error | Uncaught Client Exception'}`, `    </span>`, `  );`, `}`, ``, `export function DefaultErrorBoundary(props) {`, `  return (`, `    <Errored fallback={(error) => <ErrorFallback error={error} />}>`, `      {props.children}`, `    </Errored>`, `  );`, `}`].join('\n');
 
   // The handler module: dev and prod share the render/response plumbing;
   // they differ in how the client entry URL is known (baked dev URL vs a
@@ -1498,7 +1599,7 @@ function startServe(options, internal = {}) {
     // head-open splice actively broke hydration — a script ahead of the
     // authored <head> elements claims as the first walked child and drifts
     // every positional claim after it.
-    lines.push(``, `function createHtmlChunkTransform(clientEntry, extraHead) {`, `  let first = true;`, `  let injected = false;`, `  return (chunk) => {`);
+    lines.push(``, `function escapeAttribute(value) {`, `  return value.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;');`, `}`, ``, `function createHtmlChunkTransform(clientEntry, extraHead, nonce) {`, `  const nonceAttr = nonce ? ' nonce="' + escapeAttribute(nonce) + '"' : '';`, `  let first = true;`, `  let injected = false;`, `  return (chunk) => {`);
     if (!generated) {
       // Authored entries reference the client entry by its dev path (the
       // `<script src="/src/entry-client.tsx">` convention); rewrite it to
@@ -1528,7 +1629,7 @@ function startServe(options, internal = {}) {
       // scripts default to deferred execution, which is exactly right for a
       // fresh render-into-body mount (hydration, by contrast, wants to
       // start as early as possible).
-      headParts.push(`(clientEntry ? '<script type="module" src="' + clientEntry + '"${clientMode ? '' : ' async'}></' + 'script>' : '')`);
+      headParts.push(`(clientEntry ? '<script type="module"' + nonceAttr + ' src="' + clientEntry + '"${clientMode ? '' : ' async'}></' + 'script>' : '')`);
     }
     if (headParts.length) {
       lines.push(`      chunk = chunk.replace('</head>', ${headParts.join(' + ')} + '</head>');`);
@@ -1582,7 +1683,7 @@ function startServe(options, internal = {}) {
     // The runtime's response-head lifecycle: commit at shell flush,
     // pre-flush Location as a real redirect, post-flush Location as the
     // script fallback; the transform injects the doctype/head pieces.
-    `  return createSSRResponse(result, event, {`, `    responseInit: options.responseInit,`, `    nonce: options.nonce,`, `    transformChunk: createHtmlChunkTransform(clientEntry, options.devHead),`, `  });`, `}`, ``, `export async function handleRequest(request, options = {}) {`,
+    `  return createSSRResponse(result, event, {`, `    responseInit: options.responseInit,`, `    nonce: options.nonce,`, `    transformChunk: createHtmlChunkTransform(clientEntry, options.devHead, options.nonce),`, `  });`, `}`, ``, `export async function handleRequest(request, options = {}) {`,
     // `options.event` is the public wrapper->event extension seam: extra
     // fields (conventionally `nativeEvent`, the platform's raw request
     // object) spread over the event's defaults at creation, so hosts and
@@ -1612,6 +1713,9 @@ function startServe(options, internal = {}) {
     enforce: 'pre',
     config(userConfig, env) {
       root = path.resolve(userConfig.root || process.cwd());
+      devtools = env.command === 'serve' && !env.isPreview && options.devtools !== false ? undefined : false;
+      devtoolsResolution = undefined;
+      devtoolsId = null;
       entries = resolveEntries(root, options, clientMode);
       middlewarePath = options.middleware ? path.resolve(root, normalizeUserPath(root, options.middleware, 'middleware')) : null;
       // Server-mode only, like `entryServer`/`external` (a documented
@@ -1730,7 +1834,15 @@ function startServe(options, internal = {}) {
             }
           } : {}),
           optimizeDeps: {
-            entries: scanEntries
+            entries: scanEntries,
+            // Like the refresh runtime in the main plugin: the toolbar
+            // graph is injected behind virtual modules the scanner never
+            // crawls, so pre-bundle it (and the server-functions runtime
+            // the virtual module pulls in) up front — first-request
+            // discovery would re-optimize and full-reload the page.
+            ...(devtools === undefined && devtoolsReachableFromRoot(root) ? {
+              include: [DEVTOOLS_PACKAGE, '@solidjs/web/server-functions']
+            } : {})
           }
         })
       };
@@ -1740,7 +1852,7 @@ function startServe(options, internal = {}) {
       base = config.base;
       isBuild = config.command === 'build';
     },
-    resolveId(source) {
+    resolveId(source, importer) {
       if (source === HANDLER_ID) {
         return {
           id: HANDLER_ID,
@@ -1753,33 +1865,94 @@ function startServe(options, internal = {}) {
           moduleSideEffects: true
         };
       }
-      if (source === ENTRY_SERVER_ID || source === ENTRY_CLIENT_ID || source === DOCUMENT_ID) {
+      if (source === ENTRY_SERVER_ID || source === ENTRY_CLIENT_ID || source === DOCUMENT_ID || source === ERROR_BOUNDARY_ID) {
         return {
           id: source,
           moduleSideEffects: source === ENTRY_CLIENT_ID
         };
       }
+      if (devtools && (source === DEVTOOLS_ID || source === DEVTOOLS_MOUNT_ID)) {
+        return {
+          id: source,
+          moduleSideEffects: true
+        };
+      }
+      // The virtual devtools modules import the package by its bare name,
+      // but a virtual importer gives Vite no directory to walk, so the
+      // specifier would only resolve from the Vite root — which fails in
+      // pnpm-isolated apps where the package is not a root-level install.
+      // Delegate to the resolution captured at detection time instead.
+      if (devtoolsId && source === DEVTOOLS_PACKAGE && (importer === DEVTOOLS_ID || importer === DEVTOOLS_MOUNT_ID)) {
+        return {
+          id: devtoolsId
+        };
+      }
       return null;
     },
     async load(id, opts) {
+      const consumer = getEnvironmentConsumer(this.environment, opts);
       if (id === HANDLER_ID) {
-        if (!opts?.ssr) {
+        if (consumer !== 'server') {
           this.error(`${HANDLER_ID} is server-only; import it from server code (SSR build).`);
         }
         const externalDev = !isBuild && this.environment.mode === 'dev' && (externalServer || !isRunnableEnvironment(this.environment));
         return handlerModuleCode(externalDev);
       }
       if (id === RESOLVED_DEV_STYLES_ID) {
-        if (!opts?.ssr || this.environment.mode !== 'dev') {
+        if (consumer !== 'server' || this.environment.mode !== 'dev') {
           this.error(`${DEV_STYLES_ID} is only available to the development server handler.`);
         }
         return devStylesModuleCode(this.environment, file => this.addWatchFile(file));
       }
       if (id === ENTRY_SERVER_ID) return generatedEntryServerCode();
-      if (id === ENTRY_CLIENT_ID) return generatedEntryClientCode();
+      if (id === ENTRY_CLIENT_ID) {
+        const toolbar = await resolveDevtools((source, importer) => this.resolve(source, importer, {
+          skipSelf: true
+        }), requireEntries().app);
+        return generatedEntryClientCode(toolbar);
+      }
       if (id === DOCUMENT_ID) return documentShellCode;
+      if (id === ERROR_BOUNDARY_ID) return errorBoundaryCode;
+      if (id === DEVTOOLS_ID || id === DEVTOOLS_MOUNT_ID) {
+        // A cold direct request (stale tab reload) can reach the virtual
+        // module before the entry has triggered detection — run it here so
+        // first-touch order doesn't matter.
+        if (!isBuild && consumer === 'client' && devtools === undefined) {
+          const {
+            app,
+            entryClient
+          } = requireEntries();
+          await resolveDevtools((source, importer) => this.resolve(source, importer, {
+            skipSelf: true
+          }), app ?? path.resolve(root, entryClient));
+        }
+        if (isBuild || !devtools || consumer !== 'client') {
+          this.error(`${id} is only available to the development client.`);
+        }
+        return id === DEVTOOLS_ID ? devtoolsModuleCode() : devtoolsMountModuleCode();
+      }
       return null;
     },
+    async transform(code, id, opts) {
+      if (isBuild || devtools === false) return null;
+      const current = requireEntries();
+      if (current.generated || getEnvironmentConsumer(this.environment, opts) !== 'client') {
+        return null;
+      }
+      // Module ids are always forward-slashed; normalize the path.resolve
+      // side too so the comparison holds on Windows.
+      if (normalizePath(id.split('?')[0]) !== normalizePath(path.resolve(root, current.entryClient))) {
+        return null;
+      }
+      const toolbar = await resolveDevtools((source, importer) => this.resolve(source, importer, {
+        skipSelf: true
+      }), id);
+      if (!toolbar) return null;
+      return {
+        code: `import ${JSON.stringify(DEVTOOLS_MOUNT_ID)};\n${code}`,
+        map: null
+      };
+    },
     configurePreviewServer(server) {
       // `vite build && vite preview` runs the production artifact as-is:
       // Vite's preview statics serve dist/client (see the config hook) and
@@ -1804,7 +1977,7 @@ function startServe(options, internal = {}) {
             // server-function endpoint) and hands the URL to application
             // code, so restore the base — the deployed production handler
             // receives base-prefixed URLs and preview must match it.
-            const response = await handler.handleRequest(webRequestFromNode(req, joinBase(base, req.url || '/')),
+            const response = await handler.handleRequest(webRequestFromNode(req, joinBase(base, req.url || '/'), res),
             // Same event extension the dev middleware and a production
             // Node entry pass: the raw Node request as `nativeEvent`.
             {
@@ -1855,13 +2028,13 @@ function startServe(options, internal = {}) {
             // Loaded through the SSR environment so the app, the request
             // event storage, and the handler share one module registry.
             const handler = await server.ssrLoadModule(HANDLER_ID);
-            const styles = pageRequest ? await collectDevStyles(server, styleRoots()) : [];
+            const styles = pageRequest ? await collectDevStyles(server, styleRoots(), styleFilter) : [];
             const devHead = styles.map(renderDevStyleTag).join('');
             // Post middlewares run after Vite's base middleware stripped
             // the configured `base` from req.url; restore it so the app
             // sees the same URLs in dev as in production (where the
             // deployed handler receives base-prefixed requests).
-            const response = await handler.handleRequest(webRequestFromNode(req, joinBase(base, req.url || '/')), {
+            const response = await handler.handleRequest(webRequestFromNode(req, joinBase(base, req.url || '/'), res), {
               devHead,
               pageRequest,
               // The raw Node request on the event, matching what a
@@ -2544,6 +2717,7 @@ const LAZY_PLACEHOLDER_PREFIX = '__SOLID_LAZY_MODULE__:';
 const REFRESH_RUNTIME_SOURCE = 'solid-js/refresh';
 const viteVersionMajor = +version.split('.')[0];
 const isVite8 = viteVersionMajor >= 8;
+const DEFAULT_STYLE_EXCLUDE = /node_modules/;
 const VIRTUAL_MANIFEST_ID = 'virtual:solid-manifest';
 const RESOLVED_VIRTUAL_MANIFEST_ID = '\0' + VIRTUAL_MANIFEST_ID;
 
@@ -2798,10 +2972,30 @@ function solidPlugin(options = {}) {
   // `start: true` is sugar for the empty options bag — one start mode,
   // two spellings — so normalize here and let everything downstream see a
   // single shape (`false` behaves exactly like omission).
-  const turnkey = options.start === true ? {} : options.start || null;
+  const startOptions = options.start === true ? {} : options.start || null;
+  const styleFilterOptions = startOptions?.css?.filter;
+  // The CSS crawl walks the module graph from the app's own entries, so a
+  // plain createFilter allowlist can't express the option's purpose (opting
+  // node_modules graphs in): a bare `include` would reject the app sources
+  // the crawl has to traverse to ever reach the included package. Instead
+  // `include` rescues files on top of the baseline (everything except
+  // `exclude`, which defaults to node_modules), while a file matching both
+  // patterns stays excluded — createFilter's own conflict rule.
+  const createStyleFilter = resolve => {
+    const opts = resolve === undefined ? undefined : {
+      resolve
+    };
+    const base = createFilter(undefined, styleFilterOptions?.exclude ?? DEFAULT_STYLE_EXCLUDE, opts);
+    const include = styleFilterOptions?.include;
+    const hasInclude = include != null && (!Array.isArray(include) || include.length > 0);
+    const included = hasInclude ? createFilter(include, styleFilterOptions?.exclude, opts) : null;
+    return id => base(id) || (included ? included(id) : false);
+  };
+  let styleFilter = createStyleFilter();
+  const filterDevStyles = id => styleFilter(id);
   // `start.external` only means something when a server side exists to hand
   // over (SSR start mode); in client mode it is a documented no-op.
-  const externalDevServer = !!options.ssr && !!turnkey?.external;
+  const externalDevServer = !!options.ssr && !!startOptions?.external;
   let needHmr = false;
   let replaceDev = false;
   // The live dev server, kept so the dev manifest module can bake the bridge
@@ -3079,6 +3273,7 @@ function solidPlugin(options = {}) {
       filter = createFilter(options.include, options.exclude, {
         resolve: projectRoot
       });
+      styleFilter = createStyleFilter(projectRoot);
       if (serverComponents && !(options.start && options.ssr)) {
         config.logger.warn('[@solidjs/vite-plugin] serverFunctions.components is set without SSR start mode (the `start` ' + 'option with `ssr: true`), so the plugin only installs the endpoint response transform ' + '(server functions returning components stream correctly). The document wiring — render ' + 'plugin, bootstrap script, and the client-side installServerComponents() call — is ' + "emitted by SSR start mode's generated entries; without it, server components only mount " + 'from post-boot streams and your client code must call installServerComponents() itself.');
       }
@@ -3092,7 +3287,7 @@ function solidPlugin(options = {}) {
       // that don't share globals with this process, through the HTTP bridge
       // endpoint the middleware serves.
       if (options.ssr || options.start) {
-        registerDevAssetResolver(server.config.root, createDevAssetResolver(server));
+        registerDevAssetResolver(server.config.root, createDevAssetResolver(server, filterDevStyles));
         installDevManifestBridge(server);
       }
       if (!needHmr) return;
@@ -3208,7 +3403,7 @@ function solidPlugin(options = {}) {
       }
     },
     async transform(source, id, transformOptions) {
-      const isSsr = transformOptions && transformOptions.ssr;
+      const isSsr = getEnvironmentConsumer(this.environment, transformOptions) === 'server';
       const currentFileExtension = getExtension(id);
       const extensionsToWatch = options.extensions || [];
       const allExtensions = extensionsToWatch.map(extension =>
@@ -3348,7 +3543,7 @@ function solidPlugin(options = {}) {
     // With start mode on (either variant), the dev middleware dispatches
     // the endpoint through the SSR handler so user middleware and the
     // stub-backed request event front it exactly like page SSR.
-    ...(turnkey ? {
+    ...(startOptions ? {
       ssrHandler: SSR_HANDLER_ID
     } : {})
   }), mainPlugin] : [boundaryModules(), mainPlugin];
@@ -3356,15 +3551,16 @@ function solidPlugin(options = {}) {
   // The `start` option opts into start-mode serving on top of the transforms;
   // the `ssr` boolean picks the mode (a bare `ssr: true` keeps the
   // historical transform-only behavior).
-  if (turnkey) {
+  if (startOptions) {
     plugins.push(
     // Typed env (`start.env`) rides both start modes: config-time
     // validation, the virtual:env/{server,client} modules, generated
     // types, and the client-bundle leak scan.
-    ...startEnv(turnkey.env), ...startServe(turnkey, {
+    ...startEnv(startOptions.env), ...startServe(startOptions, {
       serverFunctions: !!options.serverFunctions,
       serverComponents,
-      ssr: !!options.ssr
+      ssr: !!options.ssr,
+      styleFilter: filterDevStyles
     }));
   }