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

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

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 (8) hide show

package/README.md +39 -8
package/dist/cjs/index.cjs +131 -133
package/dist/cjs/index.cjs.map +1 -1
package/dist/esm/index.mjs +130 -132
package/dist/esm/index.mjs.map +1 -1
package/dist/types/src/devtools/index.d.ts +0 -2
package/dist/types/src/environment.d.ts +2 -1
package/package.json +10 -7

package/README.md CHANGED Viewed

@@ -27,13 +27,13 @@ Join [solid discord](https://discord.com/invite/solidjs) and check the [troubles
 ## Requirements
-This module is 100% ESM compatible and requires NodeJS `14.18.0` or later.
+This module is 100% ESM compatible and requires Node.js `^20.19.0 || >=22.12.0`.
-You can check your current version of NodeJS by typing `node -v` in your terminal. If your version is below that one version I'd encourage you to either do an update globally or use a NodeJS version management tool such as [Volta](https://volta.sh/) or [nvm](https://github.com/nvm-sh/nvm).
+You can check your current Node.js version by running `node -v`. Use a version
+manager such as [Volta](https://volta.sh/) or [nvm](https://github.com/nvm-sh/nvm)
+to update it.
-Supported Vite versions: **Vite 6, 7 and 8**. Support for Vite 3–5 was
-dropped; if you are on an older Vite, stay on an earlier release of this
-plugin (2.x) or upgrade Vite.
+Supported Vite versions: **Vite 8 and 9**.
 ## Quickstart
@@ -190,8 +190,26 @@ pnpm add -D @solidjs/start-devtools@next
 ```
 Start mode detects the package automatically. Set `start: { devtools: true }`
-to require it or `start: { devtools: false }` to disable it. The package is an
-optional peer and the toolbar is not included in production builds.
+to require it or `start: { devtools: false }` to disable automatic integration.
+The package is an optional peer and the toolbar is not included in production
+builds.
+Generated entries wrap the app automatically. With custom server and client
+entries, place the development boundary around the app in the shared document
+or root:
+```tsx
+import { DevToolbar } from "@solidjs/start-devtools";
+<body>
+  <DevToolbar>
+    <App />
+  </DevToolbar>
+</body>;
+```
+The package becomes a children-only passthrough in production, so no toolbar
+code is included in either production bundle.
 ```tsx
 // src/App.tsx — the entire app: a plain content component
@@ -212,7 +230,7 @@ With `ssr: true` — **SSR start mode**:
   classic `vite build` + `vite build --ssr` two-step, work too.)
 - **Build ordering**: server builds read the client manifest, so with `ssr`
   enabled the plugin also orders builder-mode (environments API) app builds
-  client-first via a `buildApp` hook (Vite 7.1+). That covers composed
+  client-first via a `buildApp` hook. That covers composed
   setups whose own orchestrator builds server environments before the
   client — e.g. @cloudflare/vite-plugin — with no hand-written ordering
   plugin; setups without another orchestrator keep Vite's stock
@@ -636,6 +654,19 @@ production handler alike), and edits to the module hot-invalidate the
 handler in dev. Config calls merge per key, so it composes with the
 plugin's own runtime configuration.
+Server-function requests are same-origin protected by `@solidjs/web`. To
+allow another trusted origin, configure it in the same server-only module:
+```ts
+import { configureServerFunctionsServer } from '@solidjs/web/server-functions/server';
+configureServerFunctionsServer({
+  csrf: { origin: ['https://app.example.com'] },
+});
+```
+Set `csrf: false` only when another trusted layer protects the endpoint.
 Meta-frameworks that need to control plugin ordering and dispatch requests
 through their own server should use the standalone `serverFunctions()`
 export instead, which never installs the dev middleware. See

package/dist/cjs/index.cjs CHANGED Viewed

@@ -528,18 +528,18 @@ function boundaryModules() {
       // import graph — no directive transforms have run, so it walks
       // straight through 'use server' modules into genuinely server-only
       // code. That graph is legal once transforms split it, so the guard
-      // must not fire on the scan pass (`options.scan`, the flag Vite's
-      // scanner sets on plugin-container resolves in v6/7 and the rolldown
-      // scanner in v8). Still claim the specifier: resolving to the empty
+      // must not fire on the scan pass (`options.scan`, set by Rolldown's
+      // dependency scanner). Still claim the specifier: resolving to the empty
       // virtual module keeps the scanner from chasing `server-only` /
       // `client-only` as missing bare dependencies, which would abort the
       // scan all the same. Real dev/build module graphs resolve without
       // the flag and stay fully guarded.
       const scan = !!options?.scan;
+      const server = this.environment.config.consumer === 'server';
       if (id === 'server-only') {
-        if (!options?.ssr && !scan) this.error(`[@solidjs/vite-plugin] Attempt to import 'server-only' in a client module: ${importer}. ` + `Code that uses this module must run only on the server — make sure it is only ` + `imported by server code (e.g. a server entry, a "use server" module, or code ` + `reached exclusively from them).`);
+        if (!server && !scan) this.error(`[@solidjs/vite-plugin] Attempt to import 'server-only' in a client module: ${importer}. ` + `Code that uses this module must run only on the server — make sure it is only ` + `imported by server code (e.g. a server entry, a "use server" module, or code ` + `reached exclusively from them).`);
       } else if (id === 'client-only') {
-        if (options?.ssr && !scan) this.error(`[@solidjs/vite-plugin] Attempt to import 'client-only' in a server module: ${importer}. ` + `Code that uses this module must run only in the browser — make sure it is only ` + `imported by client code (e.g. behind a client-only lazy boundary).`);
+        if (server && !scan) this.error(`[@solidjs/vite-plugin] Attempt to import 'client-only' in a server module: ${importer}. ` + `Code that uses this module must run only in the browser — make sure it is only ` + `imported by client code (e.g. behind a client-only lazy boundary).`);
       } else {
         return null;
       }
@@ -842,8 +842,6 @@ function invalidateModule(moduleGraph, path) {
   }
 }
 function invalidateModules(server, result, manifest) {
-  // `environments` requires Vite 6+; older versions just miss the eager
-  // manifest invalidation (the debounced reload still converges).
   if (server?.environments && result.invalidPreload) {
     invalidateModule(server.environments.client.moduleGraph, manifest);
     invalidateModule(server.environments.ssr.moduleGraph, manifest);
@@ -1036,7 +1034,7 @@ function serverFunctions(options = {}, internal = {}) {
       apply: 'serve',
       configureServer(server) {
         const ssrEnvironment = server.environments.ssr;
-        if (internal.externalDevServer || ssrEnvironment && !isRunnableEnvironment(ssrEnvironment)) {
+        if (internal.externalDevServer || !isRunnableEnvironment(ssrEnvironment)) {
           return;
         }
         server.middlewares.use((req, res, next) => {
@@ -1059,7 +1057,7 @@ function serverFunctions(options = {}, internal = {}) {
             const functionId = (typeof headerId === 'string' ? headerId.split('#')[0] : undefined) || url.searchParams.get('id');
             if (functionId) {
               const entry = moduleForFunctionId(functionId);
-              if (entry) await server.ssrLoadModule(moduleDevUrl(entry));
+              if (entry) await ssrEnvironment.runner.import(moduleDevUrl(entry));
             }
             // Dispatch through a module evaluated in the SSR environment so
             // the handler shares the registry instance with the app modules.
@@ -1067,7 +1065,7 @@ function serverFunctions(options = {}, internal = {}) {
             // in, and dispatch goes through `handleRequest` instead — one
             // middleware chain and one stub-backed request event front the
             // endpoint exactly as they front page SSR.
-            const handler = await server.ssrLoadModule(internal.ssrHandler ?? HANDLER_ID$1);
+            const handler = await ssrEnvironment.runner.import(internal.ssrHandler ?? HANDLER_ID$1);
             // Both dispatch shapes carry the raw Node request on the event
             // (the `options.event` seam), matching the SSR dev middleware
             // and what a production Node entry passes.
@@ -1079,7 +1077,6 @@ function serverFunctions(options = {}, internal = {}) {
             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);
             next(error);
           });
         });
@@ -1203,13 +1200,9 @@ function serverFunctions(options = {}, internal = {}) {
 }
 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');
+  return [`import { mountDevToolbar } from '${DEVTOOLS_PACKAGE}';`, `mountDevToolbar();`].join('\n');
 }
 // Start-mode serving for plain Vite apps: `solid({ start: {...} })` (or the
@@ -1226,7 +1219,7 @@ function devtoolsMountModuleCode() {
 //   Both paths inject the Vite client, dev style patch, and entry CSS as
 //   `<style data-vite-dev-id>` tags before the body can paint.
 // - Prod: the plugin configures a full-app build (client + server bundles
-//   via the Vite 6+ environments/builder API — a single `vite build` builds
+//   via the Vite environments/builder API — a single `vite build` builds
 //   both) whose server entry is `virtual:solid-ssr-handler`: an
 //   adapter-agnostic named `handleRequest(Request) => Promise<Response>` plus
 //   a default Fetchable `{ fetch(request) }` export. Both scope each request
@@ -1408,10 +1401,9 @@ function startServe(options, internal = {}) {
   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;
+  let devtoolsEnabled = false;
+  let devtoolsResolutions = {};
+  let devtoolsIds = {};
   // `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;
@@ -1428,31 +1420,36 @@ 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;
+  async function resolveDevtools(resolve, importer, consumer) {
+    if (!devtoolsEnabled) return false;
     // 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, node_url.fileURLToPath((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('index.cjs', document.baseURI).href))))))?.id ?? null)();
-    devtoolsId = await devtoolsResolution;
-    devtools = devtoolsId !== null;
-    if (!devtools && options.devtools === true) {
+    // resolved id is kept so imports from generated modules can use it.
+    devtoolsResolutions[consumer] ??= (async () => {
+      // Resolving from the plugin's own file never yields null when the
+      // package is absent: it is declared an optional peer dependency, so
+      // Vite answers with its `__vite-optional-peer-dep:` stub (an empty
+      // module). Treat that stub as "not installed".
+      const realId = resolved => resolved && !resolved.id.startsWith('__vite-optional-peer-dep:') ? resolved.id : null;
+      return realId(await resolve(DEVTOOLS_PACKAGE, importer)) ?? realId(await resolve(DEVTOOLS_PACKAGE, node_url.fileURLToPath((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('index.cjs', document.baseURI).href)))));
+    })();
+    const id = await devtoolsResolutions[consumer];
+    devtoolsIds[consumer] = id;
+    if (!id && 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;
+    return id !== null;
   }
   /**
-   * Cheap root-walk probe mirroring how the optimizer resolves bare
+   * Cheap walk-up 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
+   * this directory? 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.
+   * at scan time.
    */
-  function devtoolsReachableFromRoot(dir) {
+  function devtoolsReachableFrom(dir) {
     for (let current = dir;;) {
       if (fs.existsSync(path.join(current, 'node_modules', DEVTOOLS_PACKAGE, 'package.json'))) {
         return true;
@@ -1463,6 +1460,26 @@ function startServe(options, internal = {}) {
     }
   }
+  /**
+   * The `optimizeDeps.include` spec that pre-bundles the toolbar graph, or
+   * null when it cannot be resolved at all. Pre-bundling it is not just a
+   * warm-start nicety: the toolbar hangs off virtual modules the scanner
+   * never crawls, so without an include the optimizer only discovers it on
+   * first request. That re-optimize can pair chunks from different passes
+   * whose shared minified exports disagree, taking down the whole client
+   * entry graph. The spec must therefore cover every install shape
+   * resolveDevtools accepts: bare when the app installs the package, and
+   * Vite's nested-include form (`plugin > dep`) when it is only a dependency
+   * of this plugin (pnpm-isolated installs).
+   */
+  function devtoolsIncludeSpec(rootDir) {
+    if (devtoolsReachableFrom(rootDir)) return DEVTOOLS_PACKAGE;
+    if (devtoolsReachableFrom(path.dirname(node_url.fileURLToPath((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('index.cjs', document.baseURI).href)))))) {
+      return `@solidjs/vite-plugin > ${DEVTOOLS_PACKAGE}`;
+    }
+    return null;
+  }
   /** Import specifier for generated code: absolute for files, id for virtuals. */
   function entryServerSpec() {
     const {
@@ -1516,7 +1533,7 @@ function startServe(options, internal = {}) {
     const content = wrapper ? `<${wrapper}><${root} /></${wrapper}>` : `<${root} />`;
     return isBuild && errorBoundary ? [`  <DefaultErrorBoundary>`, `    <Document>`, `      <DefaultErrorBoundary>`, `        ${content}`, `      </DefaultErrorBoundary>`, `    </Document>`, `  </DefaultErrorBoundary>`] : [`  <Document>`, `    ${content}`, `  </Document>`];
   }
-  function generatedEntryServerCode() {
+  function generatedEntryServerCode(toolbar) {
     if (clientMode) {
       // The client-mode shell: the document without the app. Rendered per
       // request in dev (any HTML GET gets it — history-fallback semantics)
@@ -1528,7 +1545,7 @@ function startServe(options, internal = {}) {
       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)};`, ...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 ? [
+    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)};`, ...(toolbar ? [`import { DevToolbar } from ${JSON.stringify(DEVTOOLS_PACKAGE)};`] : []), ...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
@@ -1542,7 +1559,7 @@ 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(() => (`, ...documentTree('Root'), `  ), ${streamOptions});`, `}`] : [`export function render(request, context) {`, `  return renderToStream(() => (`, ...documentTree('App'), `  ), ${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', toolbar ? 'DevToolbar' : undefined), `  ), ${streamOptions});`, `}`] : [`export function render(request, context) {`, `  return renderToStream(() => (`, ...documentTree('App', toolbar ? 'DevToolbar' : undefined), `  ), ${streamOptions});`, `}`])].join('\n');
   }
   function generatedEntryClientCode(toolbar) {
     const {
@@ -1554,9 +1571,9 @@ 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';`, ...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 { render } from '@solidjs/web';`, ...errorBoundaryImport(), ...(toolbar ? [`import { DevToolbar } from ${JSON.stringify(DEVTOOLS_PACKAGE)};`] : []), `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';`, ...(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 ? [
+    return [`import { hydrate } from '@solidjs/web';`, ...(toolbar ? [`import { DevToolbar } from ${JSON.stringify(DEVTOOLS_PACKAGE)};`] : []), ...(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().
@@ -1737,9 +1754,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;
+      devtoolsEnabled = env.command === 'serve' && !env.isPreview && options.devtools !== false;
+      devtoolsResolutions = {};
+      devtoolsIds = {};
       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
@@ -1830,7 +1847,7 @@ function startServe(options, internal = {}) {
             }
           },
           // Presence of `builder` makes a plain `vite build` build the
-          // whole app (all environments: client then ssr) on Vite 6+.
+          // whole app (all environments: client then ssr).
           // A classic `vite build --ssr` invocation must stay a
           // single-environment build, so it doesn't get the flag.
           ...(env.isSsrBuild ? {} : {
@@ -1860,23 +1877,32 @@ function startServe(options, internal = {}) {
           optimizeDeps: {
             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']
-            } : {})
+            // graph is injected behind modules the scanner never crawls,
+            // so pre-bundle it and the server-functions runtime up front.
+            ...(() => {
+              const spec = devtoolsEnabled ? devtoolsIncludeSpec(root) : null;
+              return spec ? {
+                include: [spec, '@solidjs/web/server-functions']
+              } : {};
+            })()
           }
         })
       };
     },
+    configEnvironment(name, config) {
+      if (name !== 'ssr') return;
+      config.resolve ??= {};
+      const noExternal = config.resolve.noExternal;
+      if (noExternal !== true) {
+        config.resolve.noExternal = [...(Array.isArray(noExternal) ? noExternal : noExternal ? [noExternal] : []), DEVTOOLS_PACKAGE];
+      }
+    },
     configResolved(config) {
       root = config.root;
       base = config.base;
       isBuild = config.command === 'build';
     },
-    resolveId(source, importer) {
+    resolveId(source, importer, opts) {
       if (source === HANDLER_ID) {
         return {
           id: HANDLER_ID,
@@ -1895,18 +1921,16 @@ function startServe(options, internal = {}) {
           moduleSideEffects: source === ENTRY_CLIENT_ID
         };
       }
-      if (devtools && (source === DEVTOOLS_ID || source === DEVTOOLS_MOUNT_ID)) {
+      if (devtoolsEnabled && 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)) {
+      // Generated modules have no directory for bare-package resolution.
+      // Reuse the app-relative id captured during detection.
+      const devtoolsId = devtoolsIds[getEnvironmentConsumer(this.environment, opts)];
+      if (devtoolsId && source === DEVTOOLS_PACKAGE && (importer === ENTRY_SERVER_ID || importer === ENTRY_CLIENT_ID || importer === DEVTOOLS_MOUNT_ID)) {
         return {
           id: devtoolsId
         };
@@ -1928,37 +1952,40 @@ function startServe(options, internal = {}) {
         }
         return devStylesModuleCode(this.environment, file => this.addWatchFile(file));
       }
-      if (id === ENTRY_SERVER_ID) return generatedEntryServerCode();
+      if (id === ENTRY_SERVER_ID) {
+        const toolbar = clientMode ? false : await resolveDevtools((source, importer) => this.resolve(source, importer, {
+          skipSelf: true
+        }), requireEntries().app, 'server');
+        return generatedEntryServerCode(toolbar);
+      }
       if (id === ENTRY_CLIENT_ID) {
         const toolbar = await resolveDevtools((source, importer) => this.resolve(source, importer, {
           skipSelf: true
-        }), requireEntries().app);
+        }), requireEntries().app, 'client');
         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) {
+      if (id === DEVTOOLS_MOUNT_ID) {
+        let enabled = false;
+        if (devtoolsEnabled && consumer === 'client') {
           const {
             app,
             entryClient
           } = requireEntries();
-          await resolveDevtools((source, importer) => this.resolve(source, importer, {
+          enabled = await resolveDevtools((source, importer) => this.resolve(source, importer, {
             skipSelf: true
-          }), app ?? path.resolve(root, entryClient));
+          }), app ?? path.resolve(root, entryClient), 'client');
         }
-        if (isBuild || !devtools || consumer !== 'client') {
+        if (!enabled) {
           this.error(`${id} is only available to the development client.`);
         }
-        return id === DEVTOOLS_ID ? devtoolsModuleCode() : devtoolsMountModuleCode();
+        return devtoolsMountModuleCode();
       }
       return null;
     },
     async transform(code, id, opts) {
-      if (isBuild || devtools === false) return null;
+      if (isBuild || !devtoolsEnabled) return null;
       const current = requireEntries();
       if (current.generated || getEnvironmentConsumer(this.environment, opts) !== 'client') {
         return null;
@@ -1970,7 +1997,7 @@ function startServe(options, internal = {}) {
       }
       const toolbar = await resolveDevtools((source, importer) => this.resolve(source, importer, {
         skipSelf: true
-      }), id);
+      }), id, 'client');
       if (!toolbar) return null;
       return {
         code: `import ${JSON.stringify(DEVTOOLS_MOUNT_ID)};\n${code}`,
@@ -2034,7 +2061,7 @@ function startServe(options, internal = {}) {
       // that gets the streamed SSR render.
       return () => {
         const ssrEnvironment = server.environments.ssr;
-        if (externalServer || ssrEnvironment && !isRunnableEnvironment(ssrEnvironment)) {
+        if (externalServer || !isRunnableEnvironment(ssrEnvironment)) {
           return;
         }
         server.middlewares.use((req, res, next) => {
@@ -2051,7 +2078,7 @@ function startServe(options, internal = {}) {
           (async () => {
             // 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 handler = await ssrEnvironment.runner.import(HANDLER_ID);
             const styles = pageRequest ? await collectDevStyles(server, styleRoots(), styleFilter) : [];
             const devHead = styles.map(renderDevStyleTag).join('');
             // Post middlewares run after Vite's base middleware stripped
@@ -2076,7 +2103,6 @@ function startServe(options, internal = {}) {
             if (response.headers.has(DEV_FALLTHROUGH_HEADER)) return next();
             await sendWebResponse(res, response);
           })().catch(error => {
-            if (error instanceof Error) server.ssrFixStacktrace(error);
             // Vite's error middleware renders the overlay-enabled 500 page.
             next(error);
           });
@@ -2166,7 +2192,7 @@ function startServe(options, internal = {}) {
 // https://github.com/pyyupsk/vite-env), the design-correct prior art. The
 // implementation is fresh against this plugin's machinery: Standard Schema
 // is the only contract (no zod dependency or zod-specific paths), the
-// schema file loads through Vite's own `runnerImport`/`loadConfigFromFile`
+// schema file loads through Vite's own `runnerImport`
 // (no jiti), server-graph protection keys off the environment *consumer*
 // rather than environment-name lists, and the types are inferred from the
 // user's schema instead of introspected per-library.
@@ -2225,37 +2251,18 @@ function formatValidationError(issues, envFile, mode) {
   return `[@solidjs/vite-plugin] env validation failed (${issues.length} issue${issues.length === 1 ? '' : 's'}) — schema: ${envFile}, mode: ${mode}\n\n` + lines.join('\n') + `\n\nSet the variables in your environment or .env files, or adjust the schema.`;
 }
-/**
- * Loads the schema module at config time through Vite itself: `runnerImport`
- * (Vite 6.1+) evaluates TypeScript in-process with project resolution;
- * older Vite 6 falls back to `loadConfigFromFile`, the exact machinery that
- * loads vite.config.ts.
- */
+/** Loads the schema module through Vite with project resolution. */
 async function importSchemaModule(envFileAbs, root, mode) {
-  const vite = await import('vite');
-  if (typeof vite.runnerImport === 'function') {
-    const {
-      module,
-      dependencies
-    } = await vite.runnerImport(envFileAbs, {
-      root,
-      mode
-    });
-    return {
-      exported: module?.default,
-      dependencies: (dependencies || []).map(dep => path.resolve(root, dep)).filter(dep => fs.existsSync(dep))
-    };
-  }
-  const result = await vite.loadConfigFromFile({
-    command: 'serve',
+  const {
+    module,
+    dependencies
+  } = await vite.runnerImport(envFileAbs, {
+    root,
     mode
-  }, envFileAbs, root);
-  if (!result) {
-    throw new Error(`[@solidjs/vite-plugin] failed to load env schema from ${envFileAbs}`);
-  }
+  });
   return {
-    exported: result.config,
-    dependencies: (result.dependencies || []).map(dep => path.resolve(root, dep)).filter(dep => fs.existsSync(dep))
+    exported: module?.default,
+    dependencies: dependencies.map(dep => path.resolve(root, dep)).filter(dep => fs.existsSync(dep))
   };
 }
 function assertSchemaShape(exported, envFile, envPrefixes) {
@@ -2739,8 +2746,6 @@ const LAZY_PLACEHOLDER_PREFIX = '__SOLID_LAZY_MODULE__:';
  * solid-refresh#85 — is no longer used at all).
  */
 const REFRESH_RUNTIME_SOURCE = 'solid-js/refresh';
-const viteVersionMajor = +vite.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;
@@ -2928,12 +2933,22 @@ function getSolidOptions(options, isSsr, dev, isTestMode = false) {
       hydratable: false
     };
   }
+  // Server components (serverFunctions.components) turn on the SSR-side
+  // behavior-claims transform: ref/on* positions on intrinsic elements
+  // compile to guarded `_bnd` claim holes instead of dropping. SSR-only
+  // by construction (the dom generate ignores the flag), and apps without
+  // the flag compile byte-for-byte as before.
+  const serverComponents = typeof options.serverFunctions === 'object' && !!options.serverFunctions.components;
   return {
     moduleName: '@solidjs/web',
     builtIns: SOLID_BUILT_INS,
     contextToCustomElements: true,
     wrapConditionals: true,
     ...solidOptions,
+    ...(serverComponents && solidOptions.generate === 'ssr' ? {
+      serverComponents: true
+    } : {}),
     dev,
     ...(options.solid || {})
   };
@@ -3231,44 +3246,28 @@ function solidPlugin(options = {}) {
           // server-components runtime installs its response policy there).
           ...(command === 'serve' && serverComponents ? ['@solidjs/web/frames', '@solidjs/web/server-functions'] : []), ...solidPkgsConfig.optimizeDeps.include],
           exclude: solidPkgsConfig.optimizeDeps.exclude,
-          // Vite 8+ uses Rolldown for dependency scanning. Rolldown defaults to
-          // React's automatic JSX runtime for .tsx files, injecting a
-          // react/jsx-dev-runtime import that fails to resolve and aborts the
-          // scan. 'preserve' is no fix: the scanner re-parses the transformed
-          // output as plain JS, so any preserved JSX is a hard parse error
-          // (issue #262). The classic runtime is the only scan-safe lowering:
-          // it emits bare `React.createElement` calls without injecting any
-          // import, and the scan output is never executed — it only exists so
-          // rolldown can walk the import graph.
-          ...(isVite8 ? {
-            rolldownOptions: {
-              transform: {
-                jsx: {
-                  runtime: 'classic'
-                }
+          // Keep Solid TSX from injecting React's automatic runtime during scanning.
+          rolldownOptions: {
+            transform: {
+              jsx: {
+                runtime: 'classic'
               }
             }
-          } : {})
+          }
         },
         ...(Object.keys(test).length ? {
           test
         } : {})
       };
     },
-    // @ts-ignore This hook only works in Vite 6
-    async configEnvironment(name, config, opts) {
+    configEnvironment(name, config, opts) {
       config.resolve ??= {};
       // Emulate Vite default fallback for `resolve.conditions` if not set
       if (config.resolve.conditions == null) {
-        // @ts-ignore These exports only exist in Vite 6
-        const {
-          defaultClientConditions,
-          defaultServerConditions
-        } = await import('vite');
         if (config.consumer === 'client' || name === 'client' || opts.isSsrTargetWebworker) {
-          config.resolve.conditions = [...defaultClientConditions];
+          config.resolve.conditions = [...vite.defaultClientConditions];
         } else {
-          config.resolve.conditions = [...defaultServerConditions];
+          config.resolve.conditions = [...vite.defaultServerConditions];
         }
       }
       config.resolve.conditions = ['solid', ...(replaceDev ? ['development'] : []),
@@ -3599,8 +3598,7 @@ function solidPlugin(options = {}) {
   // would bake a manifest-less fallback into the server bundle. Every user
   // of such a setup had to hand-write this ordering plugin; absorb it.
   //
-  // Semantics (Vite 7.1+; Vite 6 has no plugin `buildApp` hook and ignores
-  // these, keeping its build-everything default):
+  // Semantics:
   // - The first hook builds the client environment first, but only where
   //   the ordering matters: a client build that emits a manifest and
   //   actually has an input. It runs at *normal* order, deliberately not