@tcfed/vite-plugin-page-routes 0.1.3

package/dist/index.d.ts

@@ -0,0 +1,15 @@
+import type { Plugin } from "vite";
+export interface PageRoutesPluginOptions {
+    pagesDir?: string;
+    routesFile?: string;
+    routePath?: string;
+}
+interface GeneratedPageRoute {
+    path: string;
+    title: string;
+    modulePath: string;
+    examplePath?: string;
+}
+export declare function createPageRoutesPlugin(options?: PageRoutesPluginOptions): Plugin;
+export declare function scanPageRoutes(root: string, pagesDir?: string, routesFile?: string): GeneratedPageRoute[];
+export {};

package/dist/index.js

@@ -0,0 +1,316 @@
+import fs from "node:fs";
+import path from "node:path";
+export function createPageRoutesPlugin(options = {}) {
+    const routePath = normalizeDevRoutePath(options.routePath ?? "/__pages");
+    return {
+        name: "vite-plugin-page-routes",
+        apply: "serve",
+        enforce: "pre",
+        configureServer(server) {
+            registerPagesMiddleware(server, routePath, options.pagesDir, options.routesFile);
+        },
+    };
+}
+export function scanPageRoutes(root, pagesDir = "src/pages", routesFile = "src/App.tsx") {
+    const appRoutes = scanReactRouterRoutes(root, routesFile);
+    if (appRoutes.length > 0)
+        return appRoutes;
+    return scanPageDirectories(root, pagesDir);
+}
+function scanReactRouterRoutes(root, routesFile = "src/App.tsx") {
+    const absoluteRoutesFile = path.resolve(root, routesFile);
+    if (!fs.existsSync(absoluteRoutesFile))
+        return [];
+    const content = fs.readFileSync(absoluteRoutesFile, "utf-8");
+    const modulesByComponent = new Map();
+    for (const match of content.matchAll(/const\s+([A-Za-z_$][\w$]*)\s*=\s*lazy\(\s*\(\)\s*=>\s*import\(\s*["']([^"']+)["']\s*\)\s*\)/g)) {
+        modulesByComponent.set(match[1], match[2]);
+    }
+    const routes = [];
+    for (const match of content.matchAll(/<Route\b[^>]*\bpath=["']([^"']+)["'][^>]*\belement=\{<([A-Za-z_$][\w$]*)\s*\/>\}[^>]*\/>/g)) {
+        const modulePath = modulesByComponent.get(match[2]);
+        if (!modulePath?.startsWith("@/pages/"))
+            continue;
+        routes.push({
+            path: match[1],
+            title: inferTitle(modulePath.replace(/^@\/pages\/?/, "").split("/")),
+            modulePath,
+            examplePath: inferExamplePath(match[1]),
+        });
+    }
+    return routes;
+}
+function scanPageDirectories(root, pagesDir) {
+    const absolutePagesDir = path.resolve(root, pagesDir);
+    if (!fs.existsSync(absolutePagesDir))
+        return [];
+    const routes = [];
+    for (const indexFile of findPageIndexFiles(absolutePagesDir)) {
+        const pageDir = path.dirname(indexFile);
+        const relativeDir = toPosix(path.relative(absolutePagesDir, pageDir));
+        const segments = relativeDir.split("/").filter(Boolean);
+        if (segments.some((segment) => segment.startsWith("__")))
+            continue;
+        const routePath = inferRoutePath(segments, pageDir);
+        routes.push({
+            path: routePath,
+            title: inferTitle(segments),
+            modulePath: `@/${toPosix(path.relative(path.resolve(root, "src"), pageDir))}`,
+            examplePath: inferExamplePath(routePath),
+        });
+    }
+    return routes.sort((a, b) => {
+        if (a.path === "/")
+            return -1;
+        if (b.path === "/")
+            return 1;
+        return a.path.localeCompare(b.path);
+    });
+}
+function findPageIndexFiles(dir) {
+    const entries = fs.readdirSync(dir, { withFileTypes: true });
+    const files = [];
+    for (const entry of entries) {
+        const entryPath = path.join(dir, entry.name);
+        if (entry.isDirectory()) {
+            files.push(...findPageIndexFiles(entryPath));
+            continue;
+        }
+        if (entry.isFile() && entry.name === "index.tsx") {
+            files.push(entryPath);
+        }
+    }
+    return files;
+}
+function inferRoutePath(segments, pageDir) {
+    if (segments.length === 1 && segments[0] === "home")
+        return "/";
+    const routeSegments = segments.map((segment) => {
+        if (segment.startsWith("[") && segment.endsWith("]")) {
+            return `:${segment.slice(1, -1)}`;
+        }
+        return segment;
+    });
+    for (const paramName of inferParamNames(pageDir)) {
+        if (!routeSegments.includes(`:${paramName}`)) {
+            routeSegments.push(`:${paramName}`);
+        }
+    }
+    return `/${routeSegments.join("/")}`;
+}
+function inferParamNames(pageDir) {
+    const names = new Set();
+    const files = fs
+        .readdirSync(pageDir, { withFileTypes: true })
+        .filter((entry) => entry.isFile() && /\.tsx?$/.test(entry.name))
+        .map((entry) => path.join(pageDir, entry.name));
+    for (const file of files) {
+        const content = fs.readFileSync(file, "utf-8");
+        for (const match of content.matchAll(/\{\s*([A-Za-z_$][\w$]*)\s*(?::[^,}]+)?\s*\}\s*=\s*useParams/g)) {
+            names.add(match[1]);
+        }
+        for (const match of content.matchAll(/useParams\s*<\s*\{\s*([^}]+)\}/g)) {
+            const keys = match[1].matchAll(/([A-Za-z_$][\w$]*)\s*:/g);
+            for (const key of keys) {
+                names.add(key[1]);
+            }
+        }
+    }
+    return [...names];
+}
+function inferTitle(segments) {
+    return segments.join("/") || "home";
+}
+function inferExamplePath(routePath) {
+    if (!routePath.includes("/:"))
+        return undefined;
+    return routePath.replace(/:([A-Za-z_$][\w$]*)/g, (_, name) => {
+        if (name.toLowerCase() === "id")
+            return "1";
+        if (name.toLowerCase().endsWith("id"))
+            return `${name}_demo`;
+        return "demo";
+    });
+}
+function registerPagesMiddleware(server, routePath, pagesDir, routesFile) {
+    server.middlewares.use((req, res, next) => {
+        if (!req.url) {
+            next();
+            return;
+        }
+        const pathname = new URL(req.url, "http://localhost").pathname;
+        if (pathname !== routePath) {
+            next();
+            return;
+        }
+        const routes = scanPageRoutes(server.config.root, pagesDir, routesFile);
+        res.statusCode = 200;
+        res.setHeader("Content-Type", "text/html; charset=utf-8");
+        res.end(renderPagesHtml(routes));
+    });
+}
+function renderPagesHtml(routes) {
+    const routeItems = routes
+        .map((route) => {
+        const targetPath = route.examplePath ?? route.path;
+        const badge = route.examplePath ? '<span class="badge">示例</span>' : "";
+        return `<a class="route" href="${escapeHtml(targetPath)}">
+        <div class="route-main">
+          <div class="route-title">
+            <strong>${escapeHtml(route.title)}</strong>
+            ${badge}
+          </div>
+          <code>${escapeHtml(route.path)}</code>
+          <span>${escapeHtml(route.modulePath)}</span>
+        </div>
+        <span class="open">↗</span>
+      </a>`;
+    })
+        .join("");
+    return `<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>页面路由</title>
+    <style>
+      * { box-sizing: border-box; }
+      body {
+        margin: 0;
+        min-height: 100vh;
+        background: #f9fafb;
+        color: #111827;
+        font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+      }
+      main {
+        width: min(100%, 448px);
+        min-height: 100vh;
+        margin: 0 auto;
+        padding-bottom: 32px;
+        background: #f9fafb;
+      }
+      header {
+        position: sticky;
+        top: 0;
+        z-index: 1;
+        padding: 14px 16px;
+        background: #fff;
+        box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
+      }
+      h1 {
+        margin: 0;
+        font-size: 16px;
+        line-height: 24px;
+      }
+      .meta {
+        margin-top: 2px;
+        color: #6b7280;
+        font-size: 12px;
+      }
+      .list {
+        display: grid;
+        gap: 12px;
+        padding: 16px;
+      }
+      .route {
+        display: flex;
+        align-items: flex-start;
+        gap: 12px;
+        padding: 16px;
+        border: 1px solid #f3f4f6;
+        border-radius: 8px;
+        background: #fff;
+        color: inherit;
+        text-decoration: none;
+        box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
+      }
+      .route:active { background: #f9fafb; }
+      .route-main {
+        min-width: 0;
+        flex: 1;
+      }
+      .route-title {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        min-width: 0;
+      }
+      strong {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        font-size: 14px;
+        line-height: 20px;
+      }
+      .badge {
+        flex: none;
+        border-radius: 4px;
+        padding: 2px 6px;
+        background: #fffbeb;
+        color: #b45309;
+        font-size: 10px;
+        font-weight: 600;
+      }
+      code {
+        display: block;
+        margin-top: 8px;
+        padding: 5px 8px;
+        border-radius: 6px;
+        background: #f9fafb;
+        color: #374151;
+        word-break: break-all;
+        font: 12px/18px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+      }
+      span {
+        display: block;
+        margin-top: 8px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        color: #9ca3af;
+        font-size: 12px;
+      }
+      .open {
+        flex: none;
+        margin: 1px 0 0;
+        color: #9ca3af;
+        font-size: 14px;
+      }
+    </style>
+  </head>
+  <body>
+    <main>
+      <header>
+        <h1>页面路由</h1>
+        <div class="meta">dev only · ${routes.length} 个页面</div>
+      </header>
+      <section class="list">${routeItems}</section>
+    </main>
+  </body>
+</html>`;
+}
+function normalizeDevRoutePath(value) {
+    const routePath = value.trim();
+    if (!routePath || routePath === "/")
+        return "/__pages";
+    return `/${routePath.replace(/^\/+|\/+$/g, "")}`;
+}
+function escapeHtml(value) {
+    return value.replace(/[&<>"']/g, (char) => {
+        switch (char) {
+            case "&":
+                return "&amp;";
+            case "<":
+                return "&lt;";
+            case ">":
+                return "&gt;";
+            case '"':
+                return "&quot;";
+            default:
+                return "&#39;";
+        }
+    });
+}
+function toPosix(value) {
+    return value.split(path.sep).join("/");
+}

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@tcfed/vite-plugin-page-routes",
+  "version": "0.1.3",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "rm -rf dist && tsc -p tsconfig.build.json",
+    "test": "vitest run src",
+    "typecheck": "tsc --noEmit"
+  },
+  "devDependencies": {
+    "@types/node": "^24.12.4",
+    "typescript": "~6.0.2",
+    "vite": "^8.0.12",
+    "vitest": "^4.1.7"
+  },
+  "peerDependencies": {
+    "vite": ">=5"
+  }
+}