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

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, normalize } from "node:path";
-import { fileURLToPath } from "node:url";
-import { type PluginOption } from "vite";
+import { extname, isAbsolute, join } from "node:path";
+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,13 +144,19 @@ 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`,
             "import.meta.env.START_SSR": JSON.stringify(start.ssr),
-            "import.meta.env.START_APP_ENTRY": `"${appEntryPath}"`,
-            "import.meta.env.START_CLIENT_ENTRY": `"${handlers.client}"`,
+            // Use JSON.stringify so backslashes on Windows are escaped and
+            // esbuild receives a valid JS string literal for the define value
+            "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,
@@ -161,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 "${normalize(
-              fileURLToPath(new URL("../server/server-runtime", import.meta.url)),
-            )}"`,
-          replacer: opts => `createServerReference('${opts.functionId}')`,
-        },
-        {
-          envConsumer: "server",
-          envName: VITE_ENVIRONMENTS.server,
-          getRuntimeCode: () =>
-            `import { createServerReference } from '${normalize(
-              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 '${normalize(
-            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",
@@ -219,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";
 
@@ -48,13 +48,43 @@ const fileEndingRegex = /(ts|js)x(\?.*)?$/;
 
 const lazy = (): PluginOption => {
   const cwd = process.cwd().replaceAll(osSep, sep);
+
+  /**
+   * Maps module ids to their client-specific shared chunk names.
+   * Modules in shared chunks need to find their assets via the chunk name, instead of their module id.
+   *
+   * Vite includes assets of such modules in the manifest via the chunk name:
+   * https://github.com/vitejs/vite/blob/4be37a8389c67873880f826b01fe40137e1c29a7/packages/vite/src/node/plugins/manifest.ts#L179
+   * https://github.com/vitejs/vite/blob/4be37a8389c67873880f826b01fe40137e1c29a7/packages/vite/src/node/plugins/manifest.ts#L319
+   *
+   * Rollup occassionally creates shared chunks automatically,
+   * but they can also be manually created by the user via:
+   * https://rollupjs.org/configuration-options/#output-manualchunks
+   *
+   * More infos on Rollup's logic:
+   * https://github.com/rollup/rollup/issues/3772#issuecomment-689955168
+   */
+  const sharedChunkNames: Record<string, string> = {};
+
   return {
     name: "solid-lazy-css",
     enforce: "pre",
-    applyToEnvironment(env) {
-      return env.name === VITE_ENVIRONMENTS.server;
+    generateBundle(_, bundle) {
+      if (this.environment.name !== VITE_ENVIRONMENTS.client) return;
+
+      for (const chunk of Object.values(bundle)) {
+        if (chunk.type !== "chunk" || !chunk.isDynamicEntry || chunk.facadeModuleId) continue;
+
+        // Has to follow Vites implementation:
+        // https://github.com/vitejs/vite/blob/4be37a8389c67873880f826b01fe40137e1c29a7/packages/vite/src/node/plugins/manifest.ts#L179
+        const chunkName = `_${basename(chunk.fileName)}`;
+        for (const id of chunk.moduleIds) {
+          sharedChunkNames[id] = chunkName;
+        }
+      }
     },
     async transform(src, id) {
+      if (this.environment.name !== VITE_ENVIRONMENTS.server) return;
       if (!id.match(fileEndingRegex)) return;
 
       // The transformed files either import "lazy" or css files
@@ -66,7 +96,8 @@ const lazy = (): PluginOption => {
       const hasDefaultExport = src.indexOf("export default") !== -1;
       if (hasDefaultExport) {
         const localId = relative(cwd, id);
-        plugins.push(idTransform(localId));
+        const chunkName = sharedChunkNames[id];
+        plugins.push(idTransform(chunkName ?? localId));
       }
 
       const hasLazy = src.indexOf("lazy(") !== -1;

package/src/config/manifest.ts

@@ -1,8 +1,11 @@
-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";
 import { type SolidStartOptions } from "./index.ts";
+import { wrapId } from "./vite-utils.ts";
 
 export function manifest(start: SolidStartOptions): PluginOption {
   let devServer: ViteDevServer = undefined!;
@@ -39,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 {};";
@@ -49,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.");
@@ -69,10 +100,10 @@ export function manifest(start: SolidStartOptions): PluginOption {
 						tag: "style",
 						attrs: {
 							type: "text/css",
-							"data-vite-dev-id": "${key}",
+							"data-vite-dev-id": "${wrapId(key)}",
 							"data-vite-ref": "0",
 						},
-						children: () => import("${value}?inline").then(mod => mod.default),
+						children: () => import("${wrapId(value)}?inline").then(mod => mod.default),
 					}`,
           );
 

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";
 
@@ -12,6 +12,7 @@ export const FS_PREFIX = `/@fs/`;
 export const VALID_ID_PREFIX = `/@id/`;
 
 export const NULL_BYTE_PLACEHOLDER = `__x00__`;
+const NULL_BYTE_REGEX = /^\0/;
 
 export function normalizeResolvedIdToUrl(
   environment: DevEnvironment,
@@ -52,10 +53,13 @@ export function normalizeResolvedIdToUrl(
   return url;
 }
 
+/**
+ * Inspired by:
+ * https://github.com/withastro/astro/blob/fddde5fad81007795eb263c7fd0cea096b8e2cba/packages/astro/src/core/util.ts#L115
+ * https://github.com/vitejs/vite/blob/130e7181a55c524383c63bbfb1749d0ff7185cad/packages/vite/src/shared/utils.ts#L11
+ */
 export function wrapId(id: string): string {
-  return id.startsWith(VALID_ID_PREFIX)
-    ? id
-    : VALID_ID_PREFIX + id.replace("\0", NULL_BYTE_PLACEHOLDER);
+  return id.replace(NULL_BYTE_REGEX, `${VALID_ID_PREFIX}${NULL_BYTE_PLACEHOLDER}`);
 }
 
 export function unwrapId(id: string): string {

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;
+}