@solidjs/start 1.2.1 → 2.0.0-alpha.1

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

@@ -0,0 +1,77 @@
+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,136 @@
+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;
+  }
+}