@solidjs/start 2.0.0-alpha.2 → 2.0.0-alpha.3

package/src/config/fs-routes/fs-watcher.ts

@@ -1,11 +1,10 @@
 import type {
   EnvironmentModuleNode,
   FSWatcher,
-  ModuleGraph,
-  ModuleNode,
   PluginOption,
   ViteDevServer,
 } from "vite";
+import { VITE_ENVIRONMENTS } from "../constants.ts";
 import { moduleId } from "./index.ts";
 import type { BaseFileSystemRouter } from "./router.ts";
 
@@ -32,30 +31,24 @@ function createRoutesReloader(
   return () => routes.removeEventListener("reload", handleRoutesReload);
 
   function handleRoutesReload(): void {
-    if (environment === "ssr") {
-      // Handle server environment HMR reload
-      const serverEnv = server.environments.server;
-      if (serverEnv && serverEnv.moduleGraph) {
-        const mod: EnvironmentModuleNode | undefined =
-          serverEnv.moduleGraph.getModuleById(moduleId);
-        if (mod) {
-          const seen = new Set<EnvironmentModuleNode>();
-          serverEnv.moduleGraph.invalidateModule(mod, seen);
-        }
-      }
-    } else {
-      // Handle client environment HMR reload
-      const { moduleGraph }: { moduleGraph: ModuleGraph } = server;
-      const mod: ModuleNode | undefined = moduleGraph.getModuleById(moduleId);
-      if (mod) {
-        const seen = new Set<ModuleNode>();
-        moduleGraph.invalidateModule(mod, seen);
-        server.reloadModule(mod);
-      }
+    const envName =
+      environment === "ssr" ? VITE_ENVIRONMENTS.server : VITE_ENVIRONMENTS.client;
+    const devEnv = server.environments[envName];
+    if (!devEnv?.moduleGraph) return;
+
+    const mod: EnvironmentModuleNode | undefined =
+      devEnv.moduleGraph.getModuleById(moduleId);
+    if (mod) {
+      const seen = new Set<EnvironmentModuleNode>();
+      devEnv.moduleGraph.invalidateModule(mod, seen);
     }
 
-    if (!server.hot) {
-      server.ws.send({ type: "full-reload" });
+    if (environment !== "ssr") {
+      if (mod) {
+        devEnv.reloadModule(mod);
+      } else if (devEnv.hot) {
+        devEnv.hot.send({ type: "full-reload" });
+      }
     }
   }
 }

package/src/config/fs-routes/index.ts

@@ -55,8 +55,8 @@ export function fsRoutes({ routers }: FsRoutesArgs): Array<PluginOption> {
             const buildId = `${v.src}?${v.pick.map((p: any) => `pick=${p}`).join("&")}`;
             return {
               src: relative(root, buildId),
-              build: isBuild ? `_$() => import(/* @vite-ignore */ '${buildId}')$_` : undefined,
-              import: `_$() => import(/* @vite-ignore */ '${buildId}')$_`,
+              build: isBuild ? `_$() => import('${buildId}')$_` : undefined,
+              import: `_$() => import('${buildId}')$_`,
             };
           }
           return v;

package/src/config/fs-routes/router.ts

@@ -1,9 +1,9 @@
 import { init, parse } from "es-module-lexer";
 import esbuild from "esbuild";
 import fg from "fast-glob";
-import fs from "fs";
+import fs from "node:fs";
 import micromatch from "micromatch";
-import { posix } from "path";
+import { posix } from "node:path";
 import { pathToRegexp } from "path-to-regexp";
 
 import { normalizePath } from "vite";

package/src/config/index.ts

@@ -1,13 +1,12 @@
-import { TanStackServerFnPlugin } from "@tanstack/server-functions-plugin";
 import { defu } from "defu";
 import { globSync } from "node:fs";
 import { extname, isAbsolute, join } from "node:path";
-import { fileURLToPath } from "node:url";
-import { normalizePath, type PluginOption } from "vite";
+import type { PluginOption } from "vite";
 import solid, { type Options as SolidOptions } from "vite-plugin-solid";
-
+import { type ServerFunctionsOptions, serverFunctionsPlugin } from "../directives/index.ts";
 import { DEFAULT_EXTENSIONS, VIRTUAL_MODULES, VITE_ENVIRONMENTS } from "./constants.ts";
 import { devServer } from "./dev-server.ts";
+import { envPlugin, type EnvPluginOptions } from "./env.ts";
 import { SolidStartClientFileRouter, SolidStartServerFileRouter } from "./fs-router.ts";
 import { fsRoutes } from "./fs-routes/index.ts";
 import type { BaseFileSystemRouter } from "./fs-routes/router.ts";
@@ -21,6 +20,19 @@ export interface SolidStartOptions {
   routeDir?: string;
   extensions?: string[];
   middleware?: string;
+  serialization?: {
+    /**
+     * The serialization mode to use for server functions/actions.
+     * The "js" mode uses a custom binary format that is more efficient than JSON, but requires a custom deserializer (with `eval()`) on the client.
+     * A strong CSP should block `eval()` executions, which would prevent the "js" mode from working.
+     * The "json" mode uses JSON for serialization, which is less efficient but can be deserialized with `JSON.parse` on the client.
+     *
+     * @default "json"
+     */
+    mode?: "js" | "json";
+  };
+  env?: EnvPluginOptions;
+  serverFunctions?: Pick<ServerFunctionsOptions, "filter">;
 }
 
 const absolute = (path: string, root: string) =>
@@ -80,6 +92,16 @@ export function solidStart(options?: SolidStartOptions): Array<PluginOption> {
         return {
           appType: "custom",
           build: { assetsDir: "_build/assets" },
+          optimizeDeps: {
+            // Suppress TS errors from Vite 7 types when configuring Vite 8's Rolldown
+            ...({
+              rolldownOptions: {
+                transform: {
+                  jsx: "react",
+                },
+              },
+            } as any),
+          },
           environments: {
             [VITE_ENVIRONMENTS.client]: {
               consumer: "client",
@@ -122,6 +144,9 @@ export function solidStart(options?: SolidStartOptions): Array<PluginOption> {
                   }
                 : {}),
             },
+            // Depending on the package manager and dependency structure Vite externalizes @solidjs/start
+            // This makes sure that @solidjs/start goes through the Vite build process
+            noExternal: ["@solidjs/start"],
           },
           define: {
             "import.meta.env.MANIFEST": `globalThis.MANIFEST`,
@@ -131,6 +156,7 @@ export function solidStart(options?: SolidStartOptions): Array<PluginOption> {
             "import.meta.env.START_APP_ENTRY": JSON.stringify(appEntryPath),
             "import.meta.env.START_CLIENT_ENTRY": JSON.stringify(handlers.client),
             "import.meta.env.START_DEV_OVERLAY": JSON.stringify(start.devOverlay),
+            "import.meta.env.SEROVAL_MODE": JSON.stringify(start.serialization?.mode || "json"),
           },
           builder: {
             sharedPlugins: true,
@@ -163,41 +189,16 @@ export function solidStart(options?: SolidStartOptions): Array<PluginOption> {
       },
     }),
     lazy(),
+    envPlugin(options?.env),
     // Must be placed after fsRoutes, as treeShake will remove the
     // server fn exports added in by this plugin
-    TanStackServerFnPlugin({
-      // This is the ID that will be available to look up and import
-      // our server function manifest and resolve its module
-      manifestVirtualImportId: VIRTUAL_MODULES.serverFnManifest,
-      directive: "use server",
-      callers: [
-        {
-          envConsumer: "client",
-          envName: VITE_ENVIRONMENTS.client,
-          getRuntimeCode: () =>
-            `import { createServerReference } from "${normalizePath(
-              fileURLToPath(new URL("../server/server-runtime", import.meta.url))
-            )}"`,
-          replacer: opts => `createServerReference('${opts.functionId}')`,
-        },
-        {
-          envConsumer: "server",
-          envName: VITE_ENVIRONMENTS.server,
-          getRuntimeCode: () =>
-            `import { createServerReference } from '${normalizePath(
-              fileURLToPath(new URL("../server/server-fns-runtime", import.meta.url))
-            )}'`,
-          replacer: opts => `createServerReference(${opts.fn}, '${opts.functionId}')`,
-        },
-      ],
-      provider: {
-        envName: VITE_ENVIRONMENTS.server,
-        getRuntimeCode: () =>
-          `import { createServerReference } from '${normalizePath(
-            fileURLToPath(new URL("../server/server-fns-runtime", import.meta.url))
-          )}'`,
-        replacer: opts => `createServerReference(${opts.fn}, '${opts.functionId}')`,
+    serverFunctionsPlugin({
+      manifest: VIRTUAL_MODULES.serverFnManifest,
+      runtime: {
+        server: '@solidjs/start/fns/server',
+        client: '@solidjs/start/fns/client',
       },
+      filter: options?.serverFunctions?.filter,
     }),
     {
       name: "solid-start:virtual-modules",
@@ -221,8 +222,9 @@ export function solidStart(options?: SolidStartOptions): Array<PluginOption> {
     {
       name: "solid-start:capture-client-bundle",
       enforce: "post",
-      generateBundle(_options, bundle) {
+      generateBundle(options, bundle) {
         globalThis.START_CLIENT_BUNDLE = bundle;
+        (globalThis as any).START_CLIENT_OUT_DIR = options.dir;
       },
     },
     devServer(),

package/src/config/lazy.ts

@@ -1,8 +1,8 @@
 import type { PluginItem } from "@babel/core";
 import babel from "@babel/core";
 import * as t from "@babel/types";
-import { sep as osSep } from "path";
-import { basename, relative, sep } from "path/posix";
+import { sep as osSep } from "node:path";
+import { basename, relative, sep } from "node:path/posix";
 import type { PluginOption } from "vite";
 import { VITE_ENVIRONMENTS } from "./constants.ts";
 

package/src/config/manifest.ts

@@ -1,4 +1,6 @@
-import { type PluginOption, type ViteDevServer } from "vite";
+import fs from "node:fs";
+import path from "node:path";
+import { type PluginOption, type ViteDevServer, version as viteVersion } from "vite";
 
 import { findStylesInModuleGraph } from "../server/collect-styles.ts";
 import { VIRTUAL_MODULES } from "./constants.ts";
@@ -40,9 +42,37 @@ export function manifest(start: SolidStartOptions): PluginOption {
             v => "isEntry" in v && v.isEntry,
           );
           if (!entry) throw new Error("No client entry found");
-          clientViteManifest = JSON.parse(
-            (globalThis.START_CLIENT_BUNDLE[".vite/manifest.json"] as any).source,
-          );
+          let rawManifest: string | undefined;
+
+          const viteMajor = parseInt(viteVersion.split('.')[0]!, 10);
+
+          const manifestKey = Object.keys(globalThis.START_CLIENT_BUNDLE).find(k => k.endsWith("manifest.json"));
+          if (manifestKey && viteMajor < 8) {
+            const manifestAsset = globalThis.START_CLIENT_BUNDLE[manifestKey] as any;
+            rawManifest = manifestAsset.source as string;
+          } else {
+             try {
+               const appRoot = (start as any).appRoot || "./src";
+               let outDir = ".solid-start/client";
+               if (devServer?.environments?.client?.config?.build?.outDir) {
+                 outDir = devServer.environments.client.config.build.outDir;
+               } else if (this.environment?.config?.build?.outDir && this.environment?.config?.consumer === "client") {
+                 outDir = this.environment.config.build.outDir;
+               } else if ((globalThis as any).START_CLIENT_OUT_DIR) {
+                 outDir = (globalThis as any).START_CLIENT_OUT_DIR;
+               }
+               const manifestPath = path.resolve(appRoot, "..", outDir, ".vite/manifest.json");
+               rawManifest = fs.readFileSync(manifestPath, "utf-8");
+             } catch (e) {
+               throw new Error(`Manifest asset not found in bundle and could not be read from disk. Keys: ${Object.keys(globalThis.START_CLIENT_BUNDLE).join(", ")}. Error: ${e}`);
+             }
+          }
+
+          if (!rawManifest) {
+            throw new Error("Failed to extract or read raw manifest.");
+          }
+
+          clientViteManifest = JSON.parse(rawManifest);
         }
         return `export const clientViteManifest = ${JSON.stringify(clientViteManifest)};`;
       } else if (id === `\0${VIRTUAL_MODULES.middleware}`) return "export default {};";
@@ -50,11 +80,11 @@ export function manifest(start: SolidStartOptions): PluginOption {
         if (this.environment.mode !== "dev")
           throw new Error("@manifest queries are only allowed in dev");
 
-        const [path, query] = id.split("?");
+        const [urlPath, query] = id.split("?");
         const target = id.split("/")[2]!;
         const params = new URLSearchParams(query);
-        if (!path || !query) return;
-        if (path.endsWith("assets")) {
+        if (!urlPath || !query) return;
+        if (urlPath.endsWith("assets")) {
           const id = params.get("id");
           if (!id) {
             throw new Error("Missing id to get assets.");

package/src/config/vite-utils.ts

@@ -1,4 +1,4 @@
-import { DevEnvironment, Rollup } from "vite";
+import type { DevEnvironment, Rollup } from "vite";
 import fs from "node:fs";
 import path from "node:path";
 

package/src/directives/bubble-function-declaration.ts

@@ -0,0 +1,33 @@
+import type * as babel from "@babel/core";
+import * as t from "@babel/types";
+
+export function bubbleFunctionDeclaration(path: babel.NodePath<t.FunctionDeclaration>): void {
+  const decl = path.node;
+  // Check if declaration is FunctionDeclaration
+  if (decl.id) {
+    const block = (path.findParent(current => current.isBlockStatement()) ||
+      path.scope.getProgramParent().path) as babel.NodePath<t.BlockStatement>;
+
+    if (path.parentPath.isExportNamedDeclaration()) {
+      path.parentPath.replaceWith(
+        t.exportNamedDeclaration(undefined, [t.exportSpecifier(decl.id, decl.id)]),
+      );
+    } else if (path.parentPath.isExportDefaultDeclaration()) {
+      path.replaceWith(decl.id);
+    } else {
+      path.remove();
+    }
+
+    const [tmp] = block.unshiftContainer(
+      "body",
+      t.variableDeclaration("const", [
+        t.variableDeclarator(
+          decl.id,
+          t.functionExpression(decl.id, decl.params, decl.body, decl.generator, decl.async),
+        ),
+      ]),
+    );
+    block.scope.registerDeclaration(tmp);
+    tmp.skip();
+  }
+}

package/src/directives/compile.ts

@@ -0,0 +1,54 @@
+import * as babel from "@babel/core";
+import path from "node:path";
+import { directivesPlugin, type StateContext } from "./plugin.ts";
+import xxHash32 from "./xxhash32.ts";
+
+export interface CompileResult {
+  valid: boolean;
+  code: string;
+  map: babel.BabelFileResult["map"];
+}
+
+export type CompileOptions = Omit<StateContext, "count" | "hash" | "imports" | "valid">;
+
+export async function compile(
+  id: string,
+  code: string,
+  options: CompileOptions,
+): Promise<CompileResult> {
+  const context: StateContext = {
+    ...options,
+    valid: false,
+    hash: xxHash32(id).toString(16),
+    count: 0,
+    imports: new Map(),
+  };
+  const pluginOption = [directivesPlugin, context];
+  const plugins: NonNullable<NonNullable<babel.TransformOptions["parserOpts"]>["plugins"]> = [
+    "jsx",
+  ];
+  if (/\.[mc]?tsx?$/i.test(id)) {
+    plugins.push("typescript");
+  }
+  const result = await babel.transformAsync(code, {
+    plugins: [pluginOption],
+    parserOpts: {
+      plugins,
+    },
+    filename: path.basename(id),
+    ast: false,
+    sourceMaps: true,
+    configFile: false,
+    babelrc: false,
+    sourceFileName: id,
+  });
+
+  if (result) {
+    return {
+      valid: context.valid,
+      code: result.code || "",
+      map: result.map,
+    };
+  }
+  throw new Error("invariant");
+}

package/src/directives/generate-unique-name.ts

@@ -0,0 +1,22 @@
+import type * as babel from "@babel/core";
+import * as t from "@babel/types";
+
+export function generateUniqueName(path: babel.NodePath, name: string): t.Identifier {
+  let uid: string;
+  let i = 1;
+  do {
+    uid = name + "_" + i;
+    i++;
+  } while (
+    path.scope.hasLabel(uid) ||
+    path.scope.hasBinding(uid) ||
+    path.scope.hasGlobal(uid) ||
+    path.scope.hasReference(uid)
+  );
+
+  const program = path.scope.getProgramParent();
+  program.references[uid] = true;
+  program.uids[uid] = true;
+
+  return t.identifier(uid);
+}

package/src/directives/get-descriptive-name.ts

@@ -0,0 +1,39 @@
+import type { NodePath } from "@babel/core";
+
+export function getDescriptiveName(path: NodePath, defaultName: string): string {
+  let current: NodePath | null = path;
+  while (current) {
+    switch (current.node.type) {
+      case "FunctionDeclaration":
+      case "FunctionExpression": {
+        if (current.node.id) {
+          return current.node.id.name;
+        }
+        break;
+      }
+      case "VariableDeclarator": {
+        if (current.node.id.type === "Identifier") {
+          return current.node.id.name;
+        }
+        break;
+      }
+      case "ClassPrivateMethod":
+      case "ClassMethod":
+      case "ObjectMethod": {
+        switch (current.node.key.type) {
+          case "Identifier":
+            return current.node.key.name;
+          case "PrivateName":
+            return current.node.key.id.name;
+          default:
+            break;
+        }
+        break;
+      }
+      default:
+        break;
+    }
+    current = current.parentPath;
+  }
+  return defaultName;
+}

package/src/directives/get-import-identifier.ts

@@ -0,0 +1,34 @@
+import type * as babel from "@babel/core";
+import * as t from "@babel/types";
+import { generateUniqueName } from "./generate-unique-name.ts";
+import type { ImportDefinition } from "./types.ts";
+
+export function getImportIdentifier(
+  imports: Map<string, t.Identifier>,
+  path: babel.NodePath,
+  registration: ImportDefinition,
+): t.Identifier {
+  const name = registration.kind === "named" ? registration.name : "default";
+  const target = `${registration.source}[${name}]`;
+  const current = imports.get(target);
+  if (current) {
+    return current;
+  }
+  const programParent = path.scope.getProgramParent();
+  const uid = generateUniqueName(programParent.path, name);
+  programParent.registerDeclaration(
+    (programParent.path as babel.NodePath<t.Program>).unshiftContainer(
+      "body",
+      t.importDeclaration(
+        [
+          registration.kind === "named"
+            ? t.importSpecifier(uid, t.identifier(registration.name))
+            : t.importDefaultSpecifier(uid),
+        ],
+        t.stringLiteral(registration.source),
+      ),
+    )[0],
+  );
+  imports.set(target, uid);
+  return uid;
+}

package/src/directives/get-root-statement-path.ts

@@ -0,0 +1,14 @@
+import type * as babel from "@babel/core";
+import * as t from "@babel/types";
+
+export function getRootStatementPath(path: babel.NodePath): babel.NodePath {
+  let current = path.parentPath;
+  while (current) {
+    const next = current.parentPath;
+    if (next && t.isProgram(next.node)) {
+      return current;
+    }
+    current = next;
+  }
+  return path;
+}