feat: add vite-plugin-route-builder for dynamic route generation

Innei · Innei · commit 1d83313872f3 · 2025-06-20T01:41:53.000+08:00
- Introduced a new plugin to generate React Router routes from a file system-based structure, enhancing routing capabilities similar to Next.js.
- Updated various configurations and components to integrate the new plugin, including automatic route generation during build time.
- Refactored existing router implementations to utilize generated routes, improving maintainability and performance.

Signed-off-by: Innei &lt;i@innei.in&gt;
Signed-off-by: Innei &lt;tukon479@gmail.com&gt;
diff --git a/.gitignore b/.gitignore
@@ -21,4 +21,6 @@ vite.config.*.mjs
 
 apps/desktop/src/renderer/dev-dist
 tsconfig.tsbuildinfo
-buildServer.json
+buildServer.json
+
+generated-routes.ts
diff --git a/apps/desktop/configs/vite.electron-render.config.ts b/apps/desktop/configs/vite.electron-render.config.ts
@@ -1,26 +1,55 @@
 import { dirname, resolve } from "node:path"
 import { fileURLToPath } from "node:url"
 
+import { tsImport } from "tsx/esm/api"
 import type { UserConfig } from "vite"
 
+import { cleanupUnnecessaryFilesPlugin } from "../plugins/vite/cleanup"
 import { createPlatformSpecificImportPlugin } from "../plugins/vite/specific-import"
 import { viteRenderBaseConfig } from "./vite.render.config"
 
+const routeBuilderPluginV2 = await tsImport(
+  "@follow/vite-plugin-route-builder",
+  import.meta.url,
+).then((m) => m.default)
+
 const root = resolve(fileURLToPath(dirname(import.meta.url)), "..")
 
+const VITE_ROOT = resolve(root, "layer/renderer")
 export default {
   ...viteRenderBaseConfig,
 
-  plugins: [...viteRenderBaseConfig.plugins, createPlatformSpecificImportPlugin("electron")],
+  plugins: [
+    ...viteRenderBaseConfig.plugins,
+    createPlatformSpecificImportPlugin("electron"),
+    routeBuilderPluginV2({
+      pagePattern: `${resolve(VITE_ROOT, "./src/pages")}/**/*.tsx`,
+      outputPath: `${resolve(VITE_ROOT, "./src/generated-routes.ts")}`,
+      enableInDev: true,
+    }),
+    cleanupUnnecessaryFilesPlugin([
+      "og-image.png",
+      "icon-512x512.png",
+      "opengraph-image.png",
+      "favicon.ico",
+      "icon-192x192.png",
+      "favicon-dev.ico",
+      "apple-touch-icon-180x180.png",
+      "maskable-icon-512x512.png",
+      "pwa-64x64.png",
+      "pwa-192x192.png",
+      "pwa-512x512.png",
+    ]),
+  ],
 
-  root: resolve(root, "layer/renderer"),
+  root: VITE_ROOT,
   build: {
     outDir: resolve(root, "dist/renderer"),
     sourcemap: !!process.env.CI,
     target: "esnext",
     rollupOptions: {
       input: {
-        main: resolve(root, "layer/renderer/index.html"),
+        main: resolve(VITE_ROOT, "index.html"),
       },
     },
     minify: true,
diff --git a/apps/desktop/electron.vite.config.ts b/apps/desktop/electron.vite.config.ts
@@ -3,9 +3,7 @@ import { resolve } from "node:path"
 import { defineConfig } from "electron-vite"
 
 import { getGitHash } from "../../scripts/lib"
-import { viteRenderBaseConfig } from "./configs/vite.render.config"
-import { cleanupUnnecessaryFilesPlugin } from "./plugins/vite/cleanup"
-import { createPlatformSpecificImportPlugin } from "./plugins/vite/specific-import"
+import rendererConfig from "./configs/vite.electron-render.config"
 
 export default defineConfig({
   main: {
@@ -42,43 +40,5 @@ export default defineConfig({
       },
     },
   },
-  renderer: {
-    ...viteRenderBaseConfig,
-
-    root: "layer/renderer",
-    build: {
-      outDir: "dist/renderer",
-      sourcemap: !!process.env.CI,
-      target: "esnext",
-      rollupOptions: {
-        input: {
-          main: resolve("./layer/renderer/index.html"),
-        },
-      },
-      minify: true,
-    },
-
-    plugins: [
-      ...viteRenderBaseConfig.plugins,
-      createPlatformSpecificImportPlugin("electron"),
-      cleanupUnnecessaryFilesPlugin([
-        "og-image.png",
-        "icon-512x512.png",
-        "opengraph-image.png",
-        "favicon.ico",
-        "icon-192x192.png",
-        "favicon-dev.ico",
-        "apple-touch-icon-180x180.png",
-        "maskable-icon-512x512.png",
-        "pwa-64x64.png",
-        "pwa-192x192.png",
-        "pwa-512x512.png",
-      ]),
-    ],
-
-    define: {
-      ...viteRenderBaseConfig.define,
-      ELECTRON: "true",
-    },
-  },
+  renderer: rendererConfig,
 })
diff --git a/apps/desktop/layer/renderer/src/router.tsx b/apps/desktop/layer/renderer/src/router.tsx
@@ -1,14 +1,11 @@
 import { IN_ELECTRON } from "@follow/shared/constants"
-import { buildGlobRoutes } from "@follow/utils/route-builder"
 import { wrapCreateBrowserRouterV7 } from "@sentry/react"
 import { createBrowserRouter, createHashRouter } from "react-router"
 
 import { Component as App } from "./App"
 import { ErrorElement } from "./components/common/ErrorElement"
 import { NotFound } from "./components/common/NotFound"
-
-const globTree = import.meta.glob("./pages/**/*.tsx")
-const tree = buildGlobRoutes(globTree)
+import { routes as tree } from "./generated-routes"
 
 let routerCreator =
   IN_ELECTRON || globalThis["__DEBUG_PROXY__"] ? createHashRouter : createBrowserRouter
diff --git a/apps/desktop/layer/renderer/src/router.web.tsx b/apps/desktop/layer/renderer/src/router.web.tsx
@@ -1,13 +1,10 @@
 import { IN_ELECTRON } from "@follow/shared/constants"
-import { buildGlobRoutes } from "@follow/utils/route-builder"
 import { wrapCreateBrowserRouterV7 } from "@sentry/react"
 import { createBrowserRouter, createHashRouter } from "react-router"
 
 import { ErrorElement } from "./components/common/ErrorElement"
 import { NotFound } from "./components/common/NotFound"
-
-const globTree = import.meta.glob("./pages/**/*.tsx")
-const tree = buildGlobRoutes(globTree)
+import { routes as tree } from "./generated-routes"
 
 let routerCreator =
   IN_ELECTRON || globalThis["__DEBUG_PROXY__"] ? createHashRouter : createBrowserRouter
diff --git a/apps/desktop/package.json b/apps/desktop/package.json
@@ -56,6 +56,7 @@
     "@follow/models": "workspace:*",
     "@follow/shared": "workspace:*",
     "@follow/utils": "workspace:*",
+    "@follow/vite-plugin-route-builder": "workspace:*",
     "@pengx17/electron-forge-maker-appimage": "1.2.1",
     "@sentry/vite-plugin": "3.5.0",
     "@types/html-minifier-terser": "7.0.2",
@@ -85,7 +86,6 @@
     "tailwindcss-content-visibility": "1.0.2",
     "tailwindcss-multi": "0.4.6",
     "tar": "7.4.3",
-    "tsup": "8.5.0",
     "unplugin-ast": "0.15.0",
     "utf-8-validate": "6.0.5",
     "vite-bundle-analyzer": "0.22.0",
diff --git a/apps/desktop/plugins/vite/locales-json.ts b/apps/desktop/plugins/vite/locales-json.ts
@@ -2,23 +2,20 @@ import path from "node:path"
 import { fileURLToPath } from "node:url"
 
 import { set } from "es-toolkit/compat"
-import type { Plugin } from "vite"
+import type { Logger, Plugin } from "vite"
 
 const __dirname = fileURLToPath(new URL(".", import.meta.url))
 const localesDir = path.resolve(__dirname, "../../../../locales")
 
 export function localesJsonPlugin(): Plugin {
-  let isBuild = false
+  let logger: Logger
   return {
     name: "locales-json-transform",
     enforce: "pre",
     configResolved(config) {
-      isBuild = config.command === "build"
+      logger = config.logger
     },
     async transform(code, id) {
-      if (isBuild) {
-        return null
-      }
       if (!id.includes(localesDir) || !id.endsWith(".json")) {
         return null
       }
@@ -31,7 +28,7 @@ export function localesJsonPlugin(): Plugin {
         set(obj, accessorKey, (content as any)[accessorKey])
       }
 
-      console.info("[locales-json-transform] Transformed:", id)
+      logger.info(`[locales-json-transform] Transformed: ${id}`)
       return {
         code: JSON.stringify(obj),
         map: null,
diff --git a/apps/desktop/vite.config.ts b/apps/desktop/vite.config.ts
@@ -7,6 +7,7 @@ import legacy from "@vitejs/plugin-legacy"
 import { minify as htmlMinify } from "html-minifier-terser"
 import { cyan, dim, green } from "kolorist"
 import { parseHTML } from "linkedom"
+import { tsImport } from "tsx/esm/api"
 import type { PluginOption, ResolvedConfig, ViteDevServer } from "vite"
 import { defineConfig, loadEnv } from "vite"
 import { analyzer } from "vite-bundle-analyzer"
@@ -20,9 +21,14 @@ import { localesPlugin } from "./plugins/vite/locales"
 import manifestPlugin from "./plugins/vite/manifest"
 import { createPlatformSpecificImportPlugin } from "./plugins/vite/specific-import"
 
+const routeBuilderPluginV2 = await tsImport(
+  "@follow/vite-plugin-route-builder",
+  import.meta.url,
+).then((m) => m.default)
+
 const __dirname = fileURLToPath(new URL(".", import.meta.url))
 const isCI = process.env.CI === "true" || process.env.CI === "1"
-const ROOT = "./layer/renderer"
+const ROOT = resolve(__dirname, "./layer/renderer")
 
 const devPrint = (): PluginOption => ({
   name: "dev-print",
@@ -138,6 +144,11 @@ export default ({ mode }) => {
     plugins: [
       ...((viteRenderBaseConfig.plugins ?? []) as any),
 
+      routeBuilderPluginV2({
+        pagePattern: `${resolve(ROOT, "./src/pages")}/**/*.tsx`,
+        outputPath: `${resolve(ROOT, "./src/generated-routes.ts")}`,
+        enableInDev: true,
+      }),
       localesPlugin(),
       isWebBuild &&
         VitePWA({
diff --git a/apps/ssr/client/router.tsx b/apps/ssr/client/router.tsx
@@ -1,11 +1,8 @@
-import { buildGlobRoutes } from "@follow/utils/route-builder"
 import { wrapCreateBrowserRouterV7 } from "@sentry/react"
 import { createBrowserRouter, createHashRouter } from "react-router"
 
 import { NotFound } from "./components/common/404"
-
-const globTree = import.meta.glob("./pages/**/*.tsx")
-const tree = buildGlobRoutes(globTree)
+import tree from "./generated-routes"
 
 declare global {
   interface Window {
diff --git a/apps/ssr/package.json b/apps/ssr/package.json
@@ -51,6 +51,7 @@
     "@follow/shared": "workspace:*",
     "@follow/types": "workspace:*",
     "@follow/utils": "workspace:*",
+    "@follow/vite-plugin-route-builder": "workspace:*",
     "@types/html-minifier-terser": "7.0.2",
     "chokidar": "4.0.3",
     "code-inspector-plugin": "0.20.11",
diff --git a/apps/ssr/vite.config.mts b/apps/ssr/vite.config.mts
@@ -2,11 +2,17 @@ import { resolve } from "node:path"
 
 import react from "@vitejs/plugin-react"
 import { codeInspectorPlugin } from "code-inspector-plugin"
+import { tsImport } from "tsx/esm/api"
 import { defineConfig } from "vite"
 
 import { viteRenderBaseConfig } from "../desktop/configs/vite.render.config"
 import { astPlugin } from "../desktop/plugins/vite/ast"
 
+const routeBuilderPluginV2 = await tsImport(
+  "@follow/vite-plugin-route-builder",
+  import.meta.url,
+).then((m) => m.default)
+
 export default defineConfig({
   resolve: {
     alias: {
@@ -29,6 +35,11 @@ export default defineConfig({
     },
   },
   plugins: [
+    routeBuilderPluginV2({
+      pagePattern: `${resolve(__dirname, "./client/pages")}/**/*.tsx`,
+      outputPath: `${resolve(__dirname, "./client/generated-routes.ts")}`,
+      enableInDev: true,
+    }),
     react(),
     astPlugin,
     codeInspectorPlugin({
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "@follow/monorepo",
   "type": "module",
   "private": true,
-  "packageManager": "pnpm@10.10.0+sha512.d615db246fe70f25dcfea6d8d73dee782ce23e2245e3c4f6f888249fb568149318637dca73c2c5c8ef2a4ca0d5657fb9567188bfab47f566d1ee6ce987815c39",
+  "packageManager": "pnpm@10.12.1+sha512.f0dda8580f0ee9481c5c79a1d927b9164f2c478e90992ad268bbb2465a736984391d6333d2c327913578b2804af33474ca554ba29c04a8b13060a717675ae3ac",
   "description": "Follow everything in one place",
   "author": "Folo Team",
   "license": "GPL-3.0-only",
diff --git a/packages/vite-plugin-route-builder/package.json b/packages/vite-plugin-route-builder/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "@follow/vite-plugin-route-builder",
+  "type": "module",
+  "version": "0.0.1",
+  "exports": {
+    ".": "./src/index.ts"
+  },
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "files": [
+    "src"
+  ],
+  "scripts": {
+    "build": "tsdown"
+  },
+  "devDependencies": {
+    "@types/node": "22.15.23",
+    "es-toolkit": "1.38.0",
+    "fast-glob": "3.3.3",
+    "react-router": "7.6.1",
+    "tsdown": "0.12.8",
+    "typescript": "catalog:",
+    "vite": "6.3.5"
+  },
+  "publishConfig": {
+    "access": "public",
+    "main": "dist/index.js",
+    "types": "dist/index.d.ts"
+  }
+}
diff --git a/packages/vite-plugin-route-builder/readme.md b/packages/vite-plugin-route-builder/readme.md
diff --git a/packages/vite-plugin-route-builder/src/index.ts b/packages/vite-plugin-route-builder/src/index.ts
diff --git a/packages/vite-plugin-route-builder/src/utils/route-builder.test.ts b/packages/vite-plugin-route-builder/src/utils/route-builder.test.ts
diff --git a/packages/vite-plugin-route-builder/src/utils/route-builder.ts b/packages/vite-plugin-route-builder/src/utils/route-builder.ts
diff --git a/packages/vite-plugin-route-builder/src/vite-plugin-route-builder.ts b/packages/vite-plugin-route-builder/src/vite-plugin-route-builder.ts
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
