npm - @solidjs/vite-plugin - Versions diffs - 3.0.0-next.30 → 3.0.0-next.31 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/README.md +53 -4
package/dist/cjs/index.cjs +205 -43
package/dist/cjs/index.cjs.map +1 -1
package/dist/esm/index.mjs +207 -45
package/dist/esm/index.mjs.map +1 -1
package/dist/types/src/dev-manifest.d.ts +4 -3
package/dist/types/src/devtools/index.d.ts +5 -0
package/dist/types/src/environment.d.ts +3 -0
package/dist/types/src/ssr/index.d.ts +42 -1
package/package.json +8 -3

package/dist/esm/index.mjs CHANGED Viewed

@@ -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
@@ -153,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
@@ -296,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(() => {});
   }
@@ -313,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) {
@@ -321,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();
@@ -352,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
@@ -412,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
@@ -446,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
@@ -539,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
@@ -975,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 {
@@ -991,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);
       }
@@ -999,7 +1007,7 @@ function serverFunctions(options = {}, internal = {}) {
     }
   }];
   if (installDevMiddleware) {
-    turnkeyPlugins.push({
+    startPlugins.push({
       name: 'solid:server-functions/dev-middleware',
       apply: 'serve',
       configureServer(server) {
@@ -1111,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,
@@ -1134,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;
@@ -1167,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
@@ -1252,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';
@@ -1363,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;
@@ -1379,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() {
@@ -1418,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`;
@@ -1426,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
@@ -1452,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();
@@ -1464,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
@@ -1481,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
@@ -1532,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
@@ -1562,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>');`);
@@ -1616,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
@@ -1646,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
@@ -1764,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']
+            } : {})
           }
         })
       };
@@ -1774,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,
@@ -1787,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
@@ -1889,7 +2028,7 @@ 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
@@ -2578,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;
@@ -2832,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
@@ -3113,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.');
       }
@@ -3126,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;
@@ -3242,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 =>
@@ -3382,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];
@@ -3390,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
     }));
   }