@solidjs/vite-plugin 3.0.0-next.32 → 3.0.0-next.34

package/dist/esm/index.mjs

@@ -1,6 +1,6 @@
 import * as babel from '@babel/core';
 import remapping from '@ampproject/remapping';
-import solid from 'babel-preset-solid';
+import solid from '@solidjs/babel-plugin';
 import { existsSync, readFileSync, mkdirSync, writeFileSync, rmSync } from 'fs';
 import { mergeAndConcat } from 'merge-anything';
 import { createRequire } from 'module';
@@ -477,6 +477,27 @@ function createDevAssetResolver(server, filter = defaultStyleFilter) {
   };
 }
 
+/**
+ * Cross-instance-safe stand-in for vite's `isRunnableDevEnvironment`.
+ *
+ * Vite's helper is an `instanceof RunnableDevEnvironment` check against the
+ * class of whichever `vite` module the CALLER imported. When this plugin is
+ * consumed through a workspace/`link:` install, its own `vite` import can
+ * resolve to a different physical copy than the one running the dev server —
+ * and then the `instanceof` is false for every environment, silently standing
+ * the SSR/dev middlewares down. The `runner` accessor is the type's defining
+ * member (`RunnableDevEnvironment` is exactly "a DevEnvironment with a
+ * runner"), so presence-check it instead of trusting class identity.
+ */
+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';
+}
+
 const VIRTUAL_ID = '\0@solidjs/vite-plugin:boundary-modules';
 
 /**
@@ -511,7 +532,7 @@ function boundaryModules() {
       // 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';
+      const server = getEnvironmentConsumer(this.environment, options) === 'server';
       if (id === 'server-only') {
         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') {
@@ -528,31 +549,206 @@ function boundaryModules() {
 }
 
 /**
- * Cross-instance-safe stand-in for vite's `isRunnableDevEnvironment`.
+ * Agent diagnostics surface (`diagnostics: true`, dev serve only).
  *
- * Vite's helper is an `instanceof RunnableDevEnvironment` check against the
- * class of whichever `vite` module the CALLER imported. When this plugin is
- * consumed through a workspace/`link:` install, its own `vite` import can
- * resolve to a different physical copy than the one running the dev server —
- * and then the `instanceof` is false for every environment, silently standing
- * the SSR/dev middlewares down. The `runner` accessor is the type's defining
- * member (`RunnableDevEnvironment` is exactly "a DevEnvironment with a
- * runner"), so presence-check it instead of trusting class identity.
+ * Three pieces:
+ * - an injected client module (virtual, imported by index.html or the
+ *   start-mode client entry) that installs the in-page bridge from the
+ *   app's own `@solidjs/diagnostics` and answers requests over Vite's
+ *   WebSocket custom events;
+ * - a collector that forwards requests to the page and correlates
+ *   responses by id;
+ * - an HTTP endpoint (`/__solid/diagnostics`) fronting that round-trip so
+ *   any out-of-process consumer (agent, MCP tool, curl) can drive capture
+ *   sessions without holding a WebSocket.
+ *
+ * `@solidjs/diagnostics` is deliberately a type-only dependency of this
+ * plugin: the runtime bridge always comes from the app's own installed
+ * copy, so plugin releases and diagnostics releases stay uncoupled. The
+ * wire constants are re-declared here with types imported from the
+ * package, so drift fails the plugin's own compile.
  */
-function isRunnableEnvironment(environment) {
-  return !!environment && typeof environment === 'object' && 'runner' in environment;
+const DIAGNOSTICS_ENDPOINT = '/__solid/diagnostics';
+const REQUEST_EVENT = 'solid:diagnostics:request';
+const RESPONSE_EVENT = 'solid:diagnostics:response';
+const DIAGNOSTICS_PACKAGE = '@solidjs/diagnostics';
+const DIAGNOSTICS_CLIENT_ID = 'virtual:solid-diagnostics/client';
+const METHODS = ['begin', 'end', 'active', 'whyDidRun', 'costs'];
+
+/** How long the endpoint waits for a page to answer before failing the call. */
+const RESPONSE_TIMEOUT_MS = 10_000;
+function diagnosticsClientModuleCode() {
+  // Runtime imports resolve to the APP's diagnostics package (see the
+  // resolveId assist below) — the page speaks its own package's protocol.
+  return [`import { installDiagnosticsBridge } from '${DIAGNOSTICS_PACKAGE}/browser';`, `import {`, `  DIAGNOSTICS_REQUEST_EVENT,`, `  DIAGNOSTICS_RESPONSE_EVENT,`, `} from '${DIAGNOSTICS_PACKAGE}/protocol';`, ``, `const bridge = installDiagnosticsBridge();`, ``, `async function dispatch(request) {`, `  switch (request.method) {`, `    case 'begin': bridge.begin(request.params); return true;`, `    case 'end': return bridge.end();`, `    case 'active': return bridge.active();`, `    case 'whyDidRun': return bridge.whyDidRun(request.params.name);`, `    case 'costs': return bridge.costs();`, `    default: throw new Error('Unknown diagnostics method: ' + request.method);`, `  }`, `}`, ``, `if (import.meta.hot) {`, `  import.meta.hot.on(DIAGNOSTICS_REQUEST_EVENT, async (request) => {`, `    let response;`, `    try {`, `      response = { id: request.id, result: await dispatch(request) };`, `    } catch (error) {`, `      response = {`, `        id: request.id,`, `        error: error instanceof Error ? error.message : String(error),`, `      };`, `    }`, `    import.meta.hot.send(DIAGNOSTICS_RESPONSE_EVENT, response);`, `  });`, `}`].join('\n');
 }
-function getEnvironmentConsumer(environment, options) {
-  const consumer = environment?.config?.consumer;
-  if (consumer === 'client' || consumer === 'server') return consumer;
-  return options?.ssr ? 'server' : 'client';
+function sendJson(res, status, body) {
+  res.statusCode = status;
+  res.setHeader('Content-Type', 'application/json');
+  res.end(JSON.stringify(body));
+}
+function readJsonBody(req) {
+  return new Promise((resolve, reject) => {
+    const chunks = [];
+    req.on('data', chunk => chunks.push(chunk));
+    req.on('end', () => {
+      const text = Buffer.concat(chunks).toString('utf8');
+      if (!text) return resolve({});
+      try {
+        resolve(JSON.parse(text));
+      } catch {
+        reject(new Error('Request body is not valid JSON'));
+      }
+    });
+    req.on('error', reject);
+  });
+}
+function solidDiagnostics() {
+  let root = process.cwd();
+  let base = '/';
+  return {
+    name: 'solid:diagnostics',
+    // Dev-serve only: the channels this fronts exist in dev builds only.
+    apply(_config, env) {
+      return env.command === 'serve' && !env.isPreview;
+    },
+    configResolved(config) {
+      root = config.root;
+      base = config.base;
+    },
+    async resolveId(source, importer) {
+      if (source === DIAGNOSTICS_CLIENT_ID) {
+        return {
+          id: DIAGNOSTICS_CLIENT_ID,
+          moduleSideEffects: true
+        };
+      }
+      // The virtual module has no directory to resolve bare imports from;
+      // resolve the app's diagnostics package from the project root.
+      if (importer === DIAGNOSTICS_CLIENT_ID && source.startsWith(DIAGNOSTICS_PACKAGE)) {
+        const resolved = await this.resolve(source, path.resolve(root, 'index.html'), {
+          skipSelf: true
+        });
+        if (!resolved || resolved.id.startsWith('__vite-optional-peer-dep:')) {
+          this.error(`[@solidjs/vite-plugin] the diagnostics option requires ${DIAGNOSTICS_PACKAGE} ` + 'installed in the app (it provides the in-page bridge). Install it as a ' + 'development dependency or remove `diagnostics: true`.');
+        }
+        return resolved;
+      }
+      return null;
+    },
+    load(id) {
+      if (id === DIAGNOSTICS_CLIENT_ID) return diagnosticsClientModuleCode();
+      return null;
+    },
+    // Plain (index.html) apps get the client module injected here;
+    // start-mode apps import it from the generated client entry instead.
+    transformIndexHtml() {
+      return [{
+        tag: 'script',
+        attrs: {
+          type: 'module',
+          src: joinBase(base, '/@id/' + DIAGNOSTICS_CLIENT_ID)
+        },
+        injectTo: 'head'
+      }];
+    },
+    configureServer(server) {
+      const pending = new Map();
+      let nextId = 1;
+      server.ws.on(RESPONSE_EVENT, data => {
+        const entry = pending.get(data?.id);
+        if (!entry) return;
+        pending.delete(data.id);
+        clearTimeout(entry.timer);
+        entry.resolve(data);
+      });
+      server.middlewares.use(DIAGNOSTICS_ENDPOINT, async (req, res) => {
+        // The middleware mounts on the exact path; anything deeper is 404.
+        if (req.url && req.url !== '/' && req.url !== '') {
+          sendJson(res, 404, {
+            error: `Unknown diagnostics path ${req.url}`
+          });
+          return;
+        }
+        if (req.method === 'GET') {
+          sendJson(res, 200, {
+            ok: true,
+            methods: METHODS,
+            clients: server.ws.clients.size
+          });
+          return;
+        }
+        if (req.method !== 'POST') {
+          sendJson(res, 405, {
+            error: 'Use GET for status or POST { method, params }'
+          });
+          return;
+        }
+        let body;
+        try {
+          body = await readJsonBody(req);
+        } catch (error) {
+          sendJson(res, 400, {
+            error: error.message
+          });
+          return;
+        }
+        if (!body.method || !METHODS.includes(body.method)) {
+          sendJson(res, 400, {
+            error: `Unknown method ${JSON.stringify(body.method)}; expected one of: ${METHODS.join(', ')}`
+          });
+          return;
+        }
+        if (server.ws.clients.size === 0) {
+          sendJson(res, 503, {
+            error: 'No connected page. Open the app in a browser (dev server) so the ' + 'diagnostics bridge can answer.'
+          });
+          return;
+        }
+        const id = nextId++;
+        // Broadcast; with several open tabs the first responder wins. Good
+        // enough for the agent loop (one page under test); revisit with
+        // client targeting if multi-page capture ever matters.
+        const response = await new Promise(resolve => {
+          const timer = setTimeout(() => {
+            pending.delete(id);
+            resolve({
+              timeout: `No page answered within ${RESPONSE_TIMEOUT_MS}ms. The connected page ` + 'may predate `diagnostics: true` — reload it.'
+            });
+          }, RESPONSE_TIMEOUT_MS);
+          pending.set(id, {
+            resolve,
+            timer
+          });
+          server.ws.send(REQUEST_EVENT, {
+            id,
+            method: body.method,
+            params: body.params
+          });
+        });
+        if ('timeout' in response) {
+          sendJson(res, 504, {
+            error: response.timeout
+          });
+        } else if (response.error !== undefined) {
+          sendJson(res, 400, {
+            error: response.error
+          });
+        } else {
+          sendJson(res, 200, {
+            result: response.result
+          });
+        }
+      });
+    }
+  };
 }
 
 // The `"use server"` directive compiler. This wraps the native
-// `transformDirectives` pass from @dom-expressions/compiler (Rust/Oxc); the
+// `transformDirectives` pass from @solidjs/compiler (Rust/Oxc); the
 // original Babel implementation (hoisted from solid-start) lived in this
 // directory through vite-plugin-solid@c052963e and remains the frozen
-// reference for the native pass's fixture suite in dom-expressions.
+// reference for the native pass's fixture suite.
 
 let compilerPromise;
 
@@ -561,11 +757,11 @@ let compilerPromise;
 // compiler's opt-in loader in index.ts).
 async function loadCompiler() {
   try {
-    return await (compilerPromise ??= import('@dom-expressions/compiler'));
+    return await (compilerPromise ??= import('@solidjs/compiler'));
   } catch (error) {
     compilerPromise = undefined;
     const reason = error instanceof Error ? `\n\nCause: ${error.message}` : '';
-    throw new Error('@solidjs/vite-plugin: failed to load @dom-expressions/compiler (the "use server" ' + 'transform). Your platform should get a prebuilt native binary or the ' + '@dom-expressions/compiler-wasm32-wasi fallback — check that optional ' + 'dependencies were installed.' + reason);
+    throw new Error('@solidjs/vite-plugin: failed to load @solidjs/compiler (the "use server" ' + 'transform). Your platform should get a prebuilt native binary or the ' + '@solidjs/compiler-wasm32-wasi fallback — check that optional ' + 'dependencies were installed.' + reason);
   }
 }
 
@@ -1377,6 +1573,7 @@ function startServe(options, internal = {}) {
   const serverComponents = !!internal.serverComponents;
   const errorBoundary = options.errorBoundary !== false;
   const styleFilter = internal.styleFilter;
+  const diagnostics = !!internal.diagnostics;
   let devtoolsEnabled = false;
   let devtoolsResolutions = {};
   let devtoolsIds = {};
@@ -1541,15 +1738,18 @@ function startServe(options, internal = {}) {
     const {
       app
     } = requireEntries();
+    // Dev-only: the diagnostics bridge fronts dev-mode channels, so builds
+    // never see this import (mirrors the plugin's own serve-only `apply`).
+    const diagnosticsImport = diagnostics && !isBuild ? [`import ${JSON.stringify(DIAGNOSTICS_CLIENT_ID)};`] : [];
     if (clientMode) {
       // render(), not hydrate(): the shell's body is empty, the app mounts
       // fresh. Client code compiles non-hydratable in client mode, so the
       // 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_PACKAGE)};`] : []), `import App from ${JSON.stringify(app)};`, ``, `render(() => ${isBuild && errorBoundary ? '<DefaultErrorBoundary><App /></DefaultErrorBoundary>' : toolbar ? '<DevToolbar><App /></DevToolbar>' : '<App />'}, document.body);`].join('\n');
+      return [...diagnosticsImport, `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_PACKAGE)};`] : []), ...(serverComponents ? [`import { installServerComponents } from '@solidjs/web/frames';`] : []), ...errorBoundaryImport(), `import Document from ${JSON.stringify(documentSpec())};`, `import App from ${JSON.stringify(app)};`, ``, ...(serverComponents ? [
+    return [...diagnosticsImport, `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().
@@ -1961,7 +2161,7 @@ function startServe(options, internal = {}) {
       return null;
     },
     async transform(code, id, opts) {
-      if (isBuild || !devtoolsEnabled) return null;
+      if (isBuild || !devtoolsEnabled && !diagnostics) return null;
       const current = requireEntries();
       if (current.generated || getEnvironmentConsumer(this.environment, opts) !== 'client') {
         return null;
@@ -1971,12 +2171,17 @@ function startServe(options, internal = {}) {
       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, 'client');
-      if (!toolbar) return null;
+      const injected = [];
+      if (diagnostics) injected.push(`import ${JSON.stringify(DIAGNOSTICS_CLIENT_ID)};`);
+      if (devtoolsEnabled) {
+        const toolbar = await resolveDevtools((source, importer) => this.resolve(source, importer, {
+          skipSelf: true
+        }), id, 'client');
+        if (toolbar) injected.push(`import ${JSON.stringify(DEVTOOLS_MOUNT_ID)};`);
+      }
+      if (injected.length === 0) return null;
       return {
-        code: `import ${JSON.stringify(DEVTOOLS_MOUNT_ID)};\n${code}`,
+        code: `${injected.join('\n')}\n${code}`,
         map: null
       };
     },
@@ -2710,7 +2915,7 @@ const require$1 = createRequire(import.meta.url);
  * second string-literal argument of the form
  * `"__SOLID_LAZY_MODULE__:" + spec`, which `resolveLazyModuleUrls` swaps for
  * the project-relative resolved module path. The prefix and shape are FROZEN
- * — the emitting side lives in @dom-expressions/compiler and must match.
+ * — the emitting side lives in @solidjs/compiler and must match.
  */
 const LAZY_PLACEHOLDER_PREFIX = '__SOLID_LAZY_MODULE__:';
 
@@ -2828,18 +3033,17 @@ async function fetchAssets(key) {
 }
 export default (registry && registry[${JSON.stringify(root)}]) ||
   (bridgeUrl ? createBridgeResolver() : { resolve: jsOnly, resolveSync: jsOnly });`;
-const SOLID_BUILT_INS = ['For', 'Show', 'Switch', 'Match', 'Loading', 'Reveal', 'Portal', 'Repeat', 'Dynamic', 'Errored'];
 
 /** Possible options for the extensions property */
 
 let nativeCompilerPromise;
 async function loadNativeCompiler() {
   try {
-    return await (nativeCompilerPromise ??= import('@dom-expressions/compiler'));
+    return await (nativeCompilerPromise ??= import('@solidjs/compiler'));
   } catch (error) {
     nativeCompilerPromise = undefined;
     const reason = error instanceof Error ? `\n\nCause: ${error.message}` : '';
-    throw new Error('@solidjs/vite-plugin: failed to load @dom-expressions/compiler, which is required ' + 'in every mode (it drives the lazy, refresh, and server-function transforms; ' + 'compiler: "babel" only switches the JSX transform). Your platform should get ' + 'a prebuilt native binary or the @dom-expressions/compiler-wasm32-wasi fallback ' + '— check that optional dependencies were installed.' + reason);
+    throw new Error('@solidjs/vite-plugin: failed to load @solidjs/compiler, which is required ' + 'in every mode (it drives the lazy, refresh, and server-function transforms; ' + 'compiler: "babel" only switches the JSX transform). Your platform should get ' + 'a prebuilt native binary or the @solidjs/compiler-wasm32-wasi fallback ' + '— check that optional dependencies were installed.' + reason);
   }
 }
 
@@ -2909,12 +3113,23 @@ 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;
+
+  // Solid-specific defaults (moduleName "@solidjs/web", the control-flow
+  // builtIns, contextToCustomElements, wrapConditionals) are baked into both
+  // backends — @solidjs/compiler and @solidjs/babel-plugin — so only the
+  // posture this plugin actually decides is passed.
   return {
-    moduleName: '@solidjs/web',
-    builtIns: SOLID_BUILT_INS,
-    contextToCustomElements: true,
-    wrapConditionals: true,
     ...solidOptions,
+    ...(serverComponents && solidOptions.generate === 'ssr' ? {
+      serverComponents: true
+    } : {}),
     dev,
     ...(options.solid || {})
   };
@@ -3504,10 +3719,13 @@ function solidPlugin(options = {}) {
       }
 
       // Babel JSX backend: one babel.transformAsync hosting the user's
-      // options plus babel-preset-solid.
+      // options plus @solidjs/babel-plugin. Appended to `plugins` (was the
+      // sole preset pre-rename): user plugins still run before it, user
+      // presets still run after — babel runs plugins before presets and
+      // presets in reverse order, so the pass order is unchanged.
       const babelOptions = mergeAndConcat(babelUserOptions, {
         ...babelBaseOptions,
-        presets: [[solid, solidOptions]]
+        plugins: [[solid, solidOptions]]
       });
       const result = await babel.transformAsync(code, babelOptions);
       if (!result) {
@@ -3549,10 +3767,17 @@ function solidPlugin(options = {}) {
       serverFunctions: !!options.serverFunctions,
       serverComponents,
       ssr: !!options.ssr,
-      styleFilter: filterDevStyles
+      styleFilter: filterDevStyles,
+      diagnostics: !!options.diagnostics
     }));
   }
 
+  // Agent diagnostics endpoint + injected bridge (dev serve only — the
+  // plugin no-ops itself for builds and preview via `apply`).
+  if (options.diagnostics) {
+    plugins.push(solidDiagnostics());
+  }
+
   // Builder-mode (environments API) client-before-server build ordering.
   // Server builds read the client manifest — `virtual:solid-manifest` bakes
   // dist/client/.vite/manifest.json in, and the persisted server-function