@solidjs/start 2.0.0-alpha.2 → 2.0.0-beta.0

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";
@@ -32,6 +32,8 @@ export function analyzeModule(src: string) {
   );
 }
 
+type RouterEvent = CustomEvent<{ route: string; type: "update" | "remove" | "add" }>;
+
 export class BaseFileSystemRouter extends EventTarget {
   routes: Route[];
 
@@ -98,8 +100,11 @@ export class BaseFileSystemRouter extends EventTarget {
   update = undefined;
 
   _addRoute(route: Route) {
-    this.routes = this.routes.filter(r => r.path !== route.path);
+    const idx = this.routes.findIndex(r => r.path === route.path);
+    if (idx >= 0) this.routes.splice(idx, 1);
     this.routes.push(route);
+
+    return idx >= 0;
   }
 
   async addRoute(src: string) {
@@ -109,7 +114,7 @@ export class BaseFileSystemRouter extends EventTarget {
         const route = this.toRoute(src);
         if (route) {
           this._addRoute(route);
-          this.reload(route.path);
+          this.reload(route.path, "add");
         }
       } catch (e) {
         console.error(e);
@@ -117,25 +122,27 @@ export class BaseFileSystemRouter extends EventTarget {
     }
   }
 
-  reload(route: string) {
+  reload(route: string, type: "update" | "remove" | "add") {
     this.dispatchEvent(
-      new Event("reload", {
-        // @ts-ignore
+      new CustomEvent("reload", {
         detail: {
           route,
+          type,
         },
       }),
     );
   }
 
-  async updateRoute(src: string) {
-    src = normalizePath(src);
+  async updateRoute(src_: string) {
+    const src = normalizePath(src_);
     if (this.isRoute(src)) {
       try {
         const route = this.toRoute(src);
         if (route) {
-          this._addRoute(route);
-          this.reload(route.path);
+          const updated = this._addRoute(route);
+          this.reload(route.path, updated ? "update" : "add");
+        } else {
+          this.removeRoute(src_);
         }
       } catch (e) {
         console.error(e);
@@ -151,11 +158,20 @@ export class BaseFileSystemRouter extends EventTarget {
       if (path === undefined) {
         return;
       }
-      this.routes = this.routes.filter(r => r.path !== path);
-      this.dispatchEvent(new Event("reload", {}));
+
+      const idx = this.routes.findIndex(r => r.path === path);
+      if (idx === -1) return;
+
+      this.routes.splice(idx, 1);
+      this.reload(path, "remove");
     }
   }
 
+  on(type: string, cb: (evt: RouterEvent) => void) {
+    this.addEventListener(type, cb as any);
+    return () => this.removeEventListener(type, cb as any);
+  }
+
   buildRoutesPromise?: Promise<any[]>;
 
   async getRoutes() {

package/src/config/fs-routes/tree-shake.ts

@@ -6,7 +6,7 @@ import type * as Babel from "@babel/core";
 import type { NodePath, PluginObj, PluginPass } from "@babel/core";
 import type { Binding } from "@babel/traverse";
 import { basename } from "pathe";
-import type { Plugin, ResolvedConfig, ViteDevServer } from "vite";
+import type { Plugin } from "vite";
 
 type State = Omit<PluginPass, "opts"> & {
   opts: { pick: string[] };
@@ -280,10 +280,6 @@ function treeShakeTransform({ types: t }: typeof Babel): PluginObj<State> {
 }
 
 export function treeShake(): Plugin {
-  let config: ResolvedConfig;
-  const cache: Record<string, any> = {};
-  let server: ViteDevServer;
-
   async function transform(id: string, code: string) {
     const [path, queryString] = id.split("?");
     const query = new URLSearchParams(queryString);
@@ -308,46 +304,6 @@ export function treeShake(): Plugin {
   return {
     name: "tree-shake",
     enforce: "pre",
-    configResolved(resolvedConfig) {
-      config = resolvedConfig;
-    },
-    configureServer(s) {
-      server = s;
-    },
-    async handleHotUpdate(ctx) {
-      if (cache[ctx.file]) {
-        const mods = [];
-        const newCode = await ctx.read();
-        for (const [id, code] of Object.entries(cache[ctx.file])) {
-          const transformed = await transform(id, newCode);
-          if (!transformed) continue;
-
-          const { code: transformedCode } = transformed;
-
-          if (transformedCode !== code) {
-            const mod = server.moduleGraph.getModuleById(id);
-            if (mod) mods.push(mod);
-          }
-
-          cache[ctx.file] ??= {};
-          cache[ctx.file][id] = transformedCode;
-          // server.moduleGraph.setModuleSource(id, code);
-        }
-
-        return mods;
-      }
-      // 	const mods = [];
-      // 	[...server.moduleGraph.urlToModuleMap.entries()].forEach(([url, m]) => {
-      // 		if (m.file === ctx.file && m.id.includes("pick=")) {
-      // 			if (!m.id.includes("pick=loader")) {
-      // 				mods.push(m);
-      // 			}
-      // 		}
-      // 	});
-      // 	return mods;
-      // 	// this.router.updateRoute(ctx.path);
-      // }
-    },
     async transform(code, id) {
       const [path, queryString] = id.split("?");
       if (!path) return;
@@ -358,9 +314,6 @@ export function treeShake(): Plugin {
         const transformed = await transform(id, code);
         if (!transformed?.code) return;
 
-        cache[path] ??= {};
-        cache[path][id] = transformed.code;
-
         return {
           code: transformed.code,
           map: transformed.map,

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) =>
@@ -51,6 +63,18 @@ export function solidStart(options?: SolidStartOptions): Array<PluginOption> {
     server: `${start.appRoot}/entry-server${entryExtension}`,
   };
   return [
+    // TODO (Alexis): check if the comment below is still relevant
+    //
+    // Must be placed after fsRoutes, as treeShake will remove the
+    // server fn exports added in by this plugin
+    serverFunctionsPlugin({
+      manifest: VIRTUAL_MODULES.serverFnManifest,
+      runtime: {
+        server: '@solidjs/start/fns/server',
+        client: '@solidjs/start/fns/client',
+      },
+      filter: options?.serverFunctions?.filter,
+    }),
     {
       name: "solid-start:config",
       enforce: "pre",
@@ -80,6 +104,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 +156,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 +168,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,42 +201,7 @@ export function solidStart(options?: SolidStartOptions): Array<PluginOption> {
       },
     }),
     lazy(),
-    // 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}')`,
-      },
-    }),
+    envPlugin(options?.env),
     {
       name: "solid-start:virtual-modules",
       async resolveId(id) {
@@ -221,8 +224,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";
 
@@ -90,6 +90,7 @@ const lazy = (): PluginOption => {
       // The transformed files either import "lazy" or css files
       // Therefore we skip, if the src doesn't have any import
       if (src.indexOf("import") === -1) return;
+      if (id.includes("entry-server")) return;
 
       const plugins: PluginItem[] = [];
 

package/src/config/manifest.ts

@@ -1,4 +1,7 @@
-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 { fileURLToPath } from "node:url";
 
 import { findStylesInModuleGraph } from "../server/collect-styles.ts";
 import { VIRTUAL_MODULES } from "./constants.ts";
@@ -18,12 +21,16 @@ export function manifest(start: SolidStartOptions): PluginOption {
         return `\0${VIRTUAL_MODULES.clientViteManifest}`;
       if (id === VIRTUAL_MODULES.getClientManifest)
         return this.resolve(
-          new URL("../server/manifest/client-manifest", import.meta.url).pathname,
+          fileURLToPath(new URL("../server/manifest/client-manifest", import.meta.url)),
         );
       if (id === VIRTUAL_MODULES.getManifest) {
         return this.environment.config.consumer === "client"
-          ? this.resolve(new URL("../server/manifest/client-manifest", import.meta.url).pathname)
-          : this.resolve(new URL("../server/manifest/ssr-manifest", import.meta.url).pathname);
+          ? this.resolve(
+              fileURLToPath(new URL("../server/manifest/client-manifest", import.meta.url)),
+            )
+          : this.resolve(
+              fileURLToPath(new URL("../server/manifest/ssr-manifest", import.meta.url)),
+            );
       }
       if (id === VIRTUAL_MODULES.middleware) {
         if (start.middleware) return await this.resolve(start.middleware);
@@ -40,9 +47,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 +85,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;
+}