add fswatcher

Author: brenelz

packages/start/src/config/fs-routes/fs-watcher.ts

@@ -0,0 +1,59 @@
+import type { FSWatcher, ModuleGraph, ModuleNode, PluginOption, ViteDevServer } from "vite";
+import { moduleId } from "./index.js";
+
+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): () => void {
+  routes.addEventListener("reload", handleRoutesReload);
+  return () => routes.removeEventListener("reload", handleRoutesReload);
+
+  function handleRoutesReload(): void {
+    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.config.server.hmr) {
+      server.ws.send({ type: "full-reload" });
+    }
+  }
+}
+
+export const fileSystemWatcher = (): PluginOption => {
+  let close: (() => void) | undefined;
+
+  const plugin: PluginOption = {
+    name: "fs-watcher",
+    apply: "serve",
+    async configureServer(server: ViteDevServer) {
+      const router = (globalThis as any).ROUTERS["server"](server.config);
+      (globalThis as any).ROUTERS["server"] = router;
+
+      const routerClient = (globalThis as any).ROUTERS["client"](server.config);
+      (globalThis as any).ROUTERS["client"] = routerClient;
+
+      if (router) {
+        setupWatcher(server.watcher, router);
+        close = createRoutesReloader(server, router);
+      }
+    },
+    closeBundle() {
+      close?.();
+    }
+  };
+  return plugin;
+};

packages/start/src/config/fs-routes/index.ts

@@ -1,5 +1,6 @@
 import { relative } from "node:path";
 import type { PluginOption, ResolvedConfig } from "vite";
+import { fileSystemWatcher } from "./fs-watcher.js";
 import { manifest } from "./manifest.js";
 import type { BaseFileSystemRouter } from "./router.js";
 import { treeShake } from "./tree-shake.js";
@@ -13,11 +14,8 @@ export interface FsRoutesArgs {
   handlers: Record<"client" | "server", string>;
 }
 
-export function fsRoutes({
-  routers,
-  handlers
-}: FsRoutesArgs): Array<PluginOption> {
-  (globalThis as any).ROUTERS = {};
+export function fsRoutes({ routers, handlers }: FsRoutesArgs): Array<PluginOption> {
+  (globalThis as any).ROUTERS = routers;
 
   return [
     manifest(handlers),
@@ -34,11 +32,7 @@ export function fsRoutes({
         if (id !== moduleId) return;
         const js = jsCode();
 
-        const router = routers[this.environment.name as keyof typeof routers](
-          this.environment.config
-        );
-
-        (globalThis as any).ROUTERS[this.environment.name] = router;
+        const router = (globalThis as any).ROUTERS[this.environment.name];
 
         const routes = await router.getRoutes();
 
@@ -79,18 +73,20 @@ export function fsRoutes({
 
         const code = `
 ${js.getImportStatements()}
-${this.environment.name === "server"
-            ? ""
-            : `
+${
+  this.environment.name === "server"
+    ? ""
+    : `
 function clientManifestImport(id) {
   return import(/* @vite-ignore */ globalThis.MANIFEST.inputs[id].output.path)
 }`
-          }
+}
 export default ${routesCode}`;
         return code;
       }
     },
-    treeShake()
+    treeShake(),
+    fileSystemWatcher()
   ];
 }
 
@@ -129,18 +125,19 @@ function jsCode() {
 
     return Object.keys(id).length > 0
       ? `{ ${Object.keys(id)
-        .map(k => `${k} as ${id[k]}`)
-        .join(", ")} }`
+          .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 ? ", " : ""}`
-            : ""
+          `import ${
+            imports.get(i).default
+              ? `${imports.get(i).default}${Object.keys(imports.get(i)).length > 1 ? ", " : ""}`
+              : ""
           } ${getNamedExport(i)} from '${i}';`
       )
       .join("\n")}`;