@solidjs/start 1.2.0 → 2.0.0-alpha.0

package/src/config/fs-router.ts

@@ -0,0 +1,177 @@
+import type { ExportSpecifier } from "es-module-lexer";
+import {
+	analyzeModule,
+	BaseFileSystemRouter,
+	cleanPath,
+	type FileSystemRouterConfig,
+} from "./fs-routes/router.ts";
+
+export class SolidStartClientFileRouter extends BaseFileSystemRouter {
+	toPath(src: string) {
+		const routePath = cleanPath(src, this.config)
+			// remove the initial slash
+			.slice(1)
+			.replace(/index$/, "")
+			.replace(/\[([^/]+)\]/g, (_, m) => {
+				if (m.length > 3 && m.startsWith("...")) {
+					return `*${m.slice(3)}`;
+				}
+				if (m.length > 2 && m.startsWith("[") && m.endsWith("]")) {
+					return `:${m.slice(1, -1)}?`;
+				}
+				return `:${m}`;
+			});
+
+		return routePath?.length > 0 ? `/${routePath}` : "/";
+	}
+
+	toRoute(src: string) {
+		const path = this.toPath(src);
+
+		if (src.endsWith(".md") || src.endsWith(".mdx")) {
+			return {
+				page: true,
+				$component: {
+					src: src,
+					pick: ["$css"],
+				},
+				$$route: undefined,
+				path,
+				// filePath: src
+			};
+		}
+
+		const [_, exports] = analyzeModule(src);
+		const hasDefault = !!exports.find((e) => e.n === "default");
+		const hasRouteConfig = !!exports.find((e) => e.n === "route");
+		if (hasDefault) {
+			return {
+				page: true,
+				$component: {
+					src: src,
+					pick: [
+						...exports
+							.filter((e) => e.n === e.ln && e.n !== "route")
+							.map((e) => e.n),
+						"default",
+						"$css",
+					],
+				},
+				$$route: hasRouteConfig
+					? {
+							src: src,
+							pick: ["route"],
+						}
+					: undefined,
+				path,
+				// filePath: src
+			};
+		}
+	}
+}
+
+const HTTP_METHODS = [
+	"HEAD",
+	"GET",
+	"POST",
+	"PUT",
+	"DELETE",
+	"PATCH",
+	"OPTIONS",
+];
+function createHTTPHandlers(src: string, exports: readonly ExportSpecifier[]) {
+	const handlers: Record<string, any> = {};
+	for (const exp of exports) {
+		if (HTTP_METHODS.includes(exp.n)) {
+			handlers[`$${exp.n}`] = {
+				src: src,
+				pick: [exp.n],
+			};
+			if (exp.n === "GET" && !exports.find((exp) => exp.n === "HEAD")) {
+				handlers.$HEAD = {
+					src: src,
+					pick: [exp.n],
+				};
+			}
+		}
+	}
+
+	return handlers;
+}
+
+export class SolidStartServerFileRouter extends BaseFileSystemRouter {
+	declare config: FileSystemRouterConfig & { dataOnly?: boolean };
+
+	constructor(config: FileSystemRouterConfig & { dataOnly?: boolean }) {
+		super(config);
+	}
+
+	toPath(src: string) {
+		const routePath = cleanPath(src, this.config)
+			// remove the initial slash
+			.slice(1)
+			.replace(/index$/, "")
+			.replace(/\[([^/]+)\]/g, (_, m) => {
+				if (m.length > 3 && m.startsWith("...")) {
+					return `*${m.slice(3)}`;
+				}
+				if (m.length > 2 && m.startsWith("[") && m.endsWith("]")) {
+					return `:${m.slice(1, -1)}?`;
+				}
+				return `:${m}`;
+			});
+
+		return routePath?.length > 0 ? `/${routePath}` : "/";
+	}
+
+	toRoute(src: string) {
+		const path = this.toPath(src);
+		if (src.endsWith(".md") || src.endsWith(".mdx")) {
+			return {
+				page: true,
+				$component: {
+					src: src,
+					pick: ["$css"],
+				},
+				$$route: undefined,
+				path,
+			};
+		}
+
+		const [_, exports] = analyzeModule(src);
+		const hasRouteConfig = exports.find((e) => e.n === "route");
+		const hasDefault = !!exports.find((e) => e.n === "default");
+		const hasAPIRoutes = !!exports.find((exp) => HTTP_METHODS.includes(exp.n));
+		if (hasDefault || hasAPIRoutes) {
+			return {
+				page: hasDefault,
+				$component:
+					!this.config.dataOnly && hasDefault
+						? {
+								src: src,
+								pick: [
+									...exports
+										.filter(
+											(e) =>
+												e.n === e.ln &&
+												e.n !== "route" &&
+												!HTTP_METHODS.includes(e.n),
+										)
+										.map((e) => e.n),
+									"default",
+									"$css",
+								],
+							}
+						: undefined,
+				$$route: hasRouteConfig
+					? {
+							src: src,
+							pick: ["route"],
+						}
+					: undefined,
+				...createHTTPHandlers(src, exports),
+				path,
+			};
+		}
+	}
+}

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

@@ -0,0 +1,81 @@
+import type {
+	EnvironmentModuleNode,
+	FSWatcher,
+	ModuleGraph,
+	ModuleNode,
+	PluginOption,
+	ViteDevServer,
+} from "vite";
+import { moduleId } from "./index.ts";
+import type { BaseFileSystemRouter } from "./router.ts";
+
+interface CompiledRouter {
+	removeRoute(path: string): void;
+	addRoute(path: string): void;
+	updateRoute(path: string): void;
+	addEventListener(event: "reload", handler: () => void): void;
+	removeEventListener(event: "reload", handler: () => void): void;
+}
+
+function setupWatcher(watcher: FSWatcher, routes: CompiledRouter): void {
+	watcher.on("unlink", (path) => routes.removeRoute(path));
+	watcher.on("add", (path) => routes.addRoute(path));
+	watcher.on("change", (path) => routes.updateRoute(path));
+}
+
+function createRoutesReloader(
+	server: ViteDevServer,
+	routes: CompiledRouter,
+	environment: "client" | "ssr",
+): () => void {
+	routes.addEventListener("reload", handleRoutesReload);
+	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);
+			}
+		}
+
+		if (!server.hot) {
+			server.ws.send({ type: "full-reload" });
+		}
+	}
+}
+
+export const fileSystemWatcher = (
+	routers: Record<"client" | "ssr", BaseFileSystemRouter>,
+): PluginOption => {
+	const plugin: PluginOption = {
+		name: "fs-watcher",
+		async configureServer(server: ViteDevServer) {
+			Object.keys(routers).forEach((environment) => {
+				const router = (globalThis as any).ROUTERS[environment];
+				setupWatcher(server.watcher, router);
+				createRoutesReloader(
+					server,
+					router,
+					environment as keyof typeof routers,
+				);
+			});
+		},
+	};
+	return plugin;
+};

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

@@ -0,0 +1,138 @@
+import { relative } from "node:path";
+import { type PluginOption } from "vite";
+
+import { fileSystemWatcher } from "./fs-watcher.ts";
+import type { BaseFileSystemRouter } from "./router.ts";
+import { treeShake } from "./tree-shake.ts";
+
+export const moduleId = "solid-start:routes";
+
+export interface FsRoutesArgs {
+	routers: Record<"client" | "ssr", BaseFileSystemRouter>;
+}
+
+export function fsRoutes({ routers }: FsRoutesArgs): Array<PluginOption> {
+	(globalThis as any).ROUTERS = routers;
+
+	return [
+		{
+			name: "solid-start-fs-routes",
+			enforce: "pre",
+			resolveId(id) {
+				if (id === moduleId) return id;
+			},
+			async load(id) {
+				const root = this.environment.config.root;
+				const isBuild = this.environment.mode === "build";
+
+				if (id !== moduleId) return;
+				const js = jsCode();
+
+				const router = (globalThis as any).ROUTERS[this.environment.name];
+
+				const routes = await router.getRoutes();
+
+				let routesCode = JSON.stringify(routes ?? [], (k, v) => {
+					if (v === undefined) return undefined;
+
+					if (k.startsWith("$$")) {
+						const buildId = `${v.src}?${v.pick.map((p: any) => `pick=${p}`).join("&")}`;
+
+						/**
+						 * @type {{ [key: string]: string }}
+						 */
+						const refs: Record<string, string> = {};
+						for (var pick of v.pick) {
+							refs[pick] = js.addNamedImport(pick, buildId);
+						}
+						return {
+							require: `_$() => ({ ${Object.entries(refs)
+								.map(([pick, namedImport]) => `'${pick}': ${namedImport}`)
+								.join(", ")} })$_`,
+							// src: isBuild ? relative(root, buildId) : buildId
+						};
+					} else if (k.startsWith("$")) {
+						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}')$_`
+						};
+					}
+					return v;
+				});
+
+				routesCode = routesCode.replaceAll('"_$(', "(").replaceAll(')$_"', ")");
+
+				const code = `
+${js.getImportStatements()}
+export default ${routesCode}`;
+				return code;
+			},
+		},
+		treeShake(),
+		fileSystemWatcher(routers),
+	];
+}
+
+function jsCode() {
+	const imports = new Map();
+	let vars = 0;
+
+	function addImport(p: any) {
+		let id = imports.get(p);
+		if (!id) {
+			id = {};
+			imports.set(p, id);
+		}
+
+		const d = "routeData" + vars++;
+		id["default"] = d;
+		return d;
+	}
+
+	function addNamedImport(name: string | number, p: any) {
+		let id = imports.get(p);
+		if (!id) {
+			id = {};
+			imports.set(p, id);
+		}
+
+		const d = "routeData" + vars++;
+		id[name] = d;
+		return d;
+	}
+
+	const getNamedExport = (p: any) => {
+		const id = imports.get(p);
+
+		delete id["default"];
+
+		return Object.keys(id).length > 0
+			? `{ ${Object.keys(id)
+					.map((k) => `${k} as ${id[k]}`)
+					.join(", ")} }`
+			: "";
+	};
+
+	const getImportStatements = () => {
+		return `${[...imports.keys()]
+			.map(
+				(i) =>
+					`import ${
+						imports.get(i).default
+							? `${imports.get(i).default}${Object.keys(imports.get(i)).length > 1 ? ", " : ""}`
+							: ""
+					} ${getNamedExport(i)} from '${i}';`,
+			)
+			.join("\n")}`;
+	};
+
+	return {
+		addImport,
+		addNamedImport,
+		getImportStatements,
+	};
+}

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

@@ -0,0 +1,169 @@
+import { init } from "es-module-lexer";
+import { parse } from "es-module-lexer";
+import esbuild from "esbuild";
+import fg from "fast-glob";
+import fs from "fs";
+import micromatch from "micromatch";
+import { posix } from "path";
+import { pathToRegexp } from "path-to-regexp";
+
+import { normalize } from "node:path";
+
+export { pathToRegexp };
+
+export const glob = (path: string) => fg.sync(path, { absolute: true });
+
+export type FileSystemRouterConfig = { dir: string; extensions: string[] };
+type Route = { path: string } & Record<string, any>;
+
+export function cleanPath(src: string, config: FileSystemRouterConfig) {
+  return src
+    .slice(config.dir.length)
+    .replace(new RegExp(`\.(${(config.extensions ?? []).join("|")})$`), "");
+}
+
+export function analyzeModule(src: string) {
+  return parse(
+    esbuild.transformSync(fs.readFileSync(src, "utf-8"), {
+      jsx: "transform",
+      format: "esm",
+      loader: "tsx"
+    }).code,
+    src
+  );
+}
+
+export class BaseFileSystemRouter extends EventTarget {
+  routes: Route[];
+
+  config: FileSystemRouterConfig;
+
+  /**
+   *
+   * @param {} config
+   */
+  constructor(config: FileSystemRouterConfig) {
+    super();
+    this.routes = [];
+    this.config = config;
+  }
+
+  glob() {
+    return (
+      posix.join(fg.convertPathToPattern(this.config.dir), "**/*") +
+      `.{${this.config.extensions.join(",")}}`
+    );
+  }
+
+  async buildRoutes(): Promise<any[]> {
+    await init;
+    for (var src of glob(this.glob())) {
+      await this.addRoute(src);
+    }
+
+    return this.routes;
+  }
+
+  isRoute(src: string) {
+    return Boolean(micromatch(src as any, this.glob())?.length);
+  }
+
+  toPath(src: string) {
+    throw new Error("Not implemented");
+  }
+
+  toRoute(src: string): Route | undefined {
+    let path = this.toPath(src);
+
+    if (path === undefined) return;
+
+    const [_, exports] = analyzeModule(src);
+
+    if (!exports.find(e => e.n === "default")) {
+      console.warn("No default export", src);
+    }
+
+    return {
+      $component: {
+        src: src,
+        pick: ["default", "$css"]
+      },
+      path
+      // filePath: src
+    };
+  }
+
+  /**
+   * To be attached by vite plugin to the vite dev server
+   */
+  update = undefined;
+
+  _addRoute(route: Route) {
+    this.routes = this.routes.filter(r => r.path !== route.path);
+    this.routes.push(route);
+  }
+
+  async addRoute(src: string) {
+    src = normalize(src);
+    if (this.isRoute(src)) {
+      try {
+        const route = this.toRoute(src);
+        if (route) {
+          this._addRoute(route);
+          this.reload(route.path);
+        }
+      } catch (e) {
+        console.error(e);
+      }
+    }
+  }
+
+  reload(route: string) {
+    this.dispatchEvent(
+      new Event("reload", {
+        // @ts-ignore
+        detail: {
+          route
+        }
+      })
+    );
+  }
+
+  async updateRoute(src: string) {
+    src = normalize(src);
+    if (this.isRoute(src)) {
+      try {
+        const route = this.toRoute(src);
+        if (route) {
+          this._addRoute(route);
+          this.reload(route.path);
+        }
+      } catch (e) {
+        console.error(e);
+      }
+      // this.update?.();
+    }
+  }
+
+  removeRoute(src: string) {
+    src = normalize(src);
+    if (this.isRoute(src)) {
+      const path = this.toPath(src);
+      if (path === undefined) {
+        return;
+      }
+      this.routes = this.routes.filter(r => r.path !== path);
+      this.dispatchEvent(new Event("reload", {}));
+    }
+  }
+
+  buildRoutesPromise?: Promise<any[]>;
+
+  async getRoutes() {
+    if (!this.buildRoutesPromise) {
+      this.buildRoutesPromise = this.buildRoutes();
+    }
+    await this.buildRoutesPromise;
+    return this.routes;
+  }
+}