feat(routes): add pages data module

Author: Codpoe

packages/playground/spa/src/pages/user/index.tsx

@@ -1,5 +1,11 @@
+import pagesData from 'virtual:conventional-pages-data';
 import './index.css';
 
 export default function User() {
-  return <div>user page</div>;
+  return (
+    <div>
+      user page
+      <pre>{JSON.stringify(pagesData, null, 2)}</pre>
+    </div>
+  );
 }

packages/routes/shim.d.ts

@@ -10,3 +10,15 @@ declare module 'virtual:conventional-routes*' {
   const routes: Route[];
   export default routes;
 }
+
+declare module 'virtual:conventional-pages-data' {
+  export interface PageData {
+    basePath: string;
+    routePath: string;
+    filePath: string;
+    meta?: Record<string, any>;
+  }
+
+  const pagesData: Record<string, PageData>;
+  export default pagesData;
+}

packages/routes/src/PagesService.ts

@@ -17,7 +17,11 @@ import {
   toArray,
 } from './utils';
 import { Page, ResolvedConfig, Route } from './types';
-import { PAGE_EXTS, RESOLVED_ROUTES_MODULE_ID } from './constants';
+import {
+  PAGE_EXTS,
+  RESOLVED_PAGES_DATA_MODULE_ID,
+  RESOLVED_ROUTES_MODULE_ID,
+} from './constants';
 import { generateWithPreloadCode } from './withPreload';
 
 /**
@@ -220,11 +224,14 @@ export class PagesService extends EventEmitter {
       return;
     }
 
-    const mods = this._server.moduleGraph.getModulesByFile(
-      RESOLVED_ROUTES_MODULE_ID
-    );
+    const mods = [
+      RESOLVED_ROUTES_MODULE_ID,
+      RESOLVED_PAGES_DATA_MODULE_ID,
+    ].flatMap(id => [
+      ...(this._server?.moduleGraph.getModulesByFile(id) || []),
+    ]);
 
-    if (mods) {
+    if (mods.length) {
       const seen = new Set<ModuleNode>();
       mods.forEach(mod => {
         this._server?.moduleGraph.invalidateModule(mod, seen);
@@ -277,18 +284,19 @@ export class PagesService extends EventEmitter {
     return page;
   }
 
-  getPages() {
-    return this._pages;
-  }
-
-  async createRoutes(basePath: string): Promise<Route[]> {
+  async getPages() {
     if (!this._startPromise) {
       throw new Error('PagesService is not started yet');
     }
 
     await this._startPromise;
+    return this._pages;
+  }
 
-    let pages = this._pages.filter(page => page.basePath === basePath);
+  async createRoutes(basePath: string): Promise<Route[]> {
+    let pages = (await this.getPages()).filter(
+      page => page.basePath === basePath
+    );
     // run hook: onCreatePages
     pages = (await this.config.onCreatePages?.(pages)) || pages;
 
@@ -389,4 +397,23 @@ export default routes;
 
     return routesCode;
   }
+
+  async generatePagesDataCode() {
+    const pagesData = (await this.getPages()).reduce<Record<string, Page>>(
+      (res, page) => {
+        // skip layout file and 404 file
+        if (page.isLayout || page.is404) {
+          return res;
+        }
+
+        res[page.routePath] = page;
+        return res;
+      },
+      {}
+    );
+
+    return `export const pagesData = ${JSON.stringify(pagesData, null, 2)};
+export default pagesData;
+`;
+  }
 }

packages/routes/src/constants.ts

@@ -23,3 +23,7 @@ export const DEFAULT_IGNORE = [
 
 export const ROUTES_MODULE_ID = 'virtual:conventional-routes';
 export const RESOLVED_ROUTES_MODULE_ID = '\0' + ROUTES_MODULE_ID;
+
+// pages data
+export const PAGES_DATA_MODULE_ID = 'virtual:conventional-pages-data';
+export const RESOLVED_PAGES_DATA_MODULE_ID = '\0' + PAGES_DATA_MODULE_ID;

packages/routes/src/index.ts

@@ -5,22 +5,31 @@ import {
   ResolvedConfig as ResolvedViteConfig,
 } from 'vite';
 import { resolveConfig, resolvePagesConfig } from './config';
-import { RESOLVED_ROUTES_MODULE_ID, ROUTES_MODULE_ID } from './constants';
+import {
+  PAGES_DATA_MODULE_ID,
+  RESOLVED_PAGES_DATA_MODULE_ID,
+  RESOLVED_ROUTES_MODULE_ID,
+  ROUTES_MODULE_ID,
+} from './constants';
 import { PagesService } from './PagesService';
 import { Page, ResolvedConfig, UserConfig } from './types';
 import { normalizeRoutePath, toArray } from './utils';
 
 export * from './types';
 
-export { resolvePagesConfig, RESOLVED_ROUTES_MODULE_ID };
+export {
+  resolvePagesConfig,
+  RESOLVED_ROUTES_MODULE_ID,
+  RESOLVED_PAGES_DATA_MODULE_ID,
+};
 
 declare module 'vite' {
   export interface Plugin {
     api?: {
       /**
        * expose pages
        */
-      getPages?: () => Page[];
+      getPages?: () => Promise<Page[]>;
     };
   }
 }
@@ -121,6 +130,10 @@ export function conventionalRoutes(userConfig?: UserConfig): Plugin {
         );
         return `${RESOLVED_ROUTES_MODULE_ID}?basePath=${basePath}`;
       }
+
+      if (source === PAGES_DATA_MODULE_ID) {
+        return RESOLVED_PAGES_DATA_MODULE_ID;
+      }
     },
     async load(id, opts) {
       if (id.startsWith(RESOLVED_ROUTES_MODULE_ID)) {
@@ -137,6 +150,10 @@ export function conventionalRoutes(userConfig?: UserConfig): Plugin {
           loader: 'jsx',
         });
       }
+
+      if (id === RESOLVED_PAGES_DATA_MODULE_ID) {
+        return pagesService.generatePagesDataCode();
+      }
     },
     transform(code, id) {
       // export meta will affect @vitejs/plugin-react's judgment of react refresh boundary,