feat: 支持构建时输出路由表

Author: cloudcome

Diff for: packages/unplugin-react-pages/client.d.ts

@@ -1,4 +1,4 @@
-declare module 'virtual:react-app' {
+declare module 'virtual:react-pages' {
   import type { RouteObject } from 'react-router-dom';
 
   export const routes: RouteObject[];

Diff for: packages/unplugin-react-pages/src/core/FSRouter.ts

@@ -185,7 +185,8 @@ export class FSRouter {
       '/**',
       ' * generated by pkg-name-for-test@pkg-version-for-test',
       ' * @ref https://github.com/FrontEndDev-org/unplugin-react-pages',
-      ' * @ref https://reactrouter.com/',
+      ' * @ref https://react.dev',
+      ' * @ref https://reactrouter.com',
       ' */',
       '',
       'import { Suspense, lazy, createElement } from "react";',

Diff for: packages/unplugin-react-pages/src/core/ReactApp.ts renamed to packages/unplugin-react-pages/src/core/ReactPages.ts

@@ -7,29 +7,29 @@ import { ensureArray } from '../helpers';
 import type { PluginOptions } from '../plugin';
 import { FSTree } from './FSTree';
 
-export type ReactAppChange = (this: ReactApp) => unknown;
-export class ReactApp {
+export type ReactPagesChange = (this: ReactPages) => unknown;
+export class ReactPages {
   logger: Logger;
   fsTree: FSTree;
-  absApp: string;
+  absPagesDir: string;
 
   constructor(
     readonly options: PluginOptions,
     readonly config: ResolvedConfig,
   ) {
     this.logger = createLogger(options.logLevel, { prefix: `[${pkgName}]` });
     this.logger.info(`new Options: ${JSON.stringify(options)}`);
-    this.absApp = nodePath.join(this.config.root, options.appDir);
+    this.absPagesDir = nodePath.join(this.config.root, options.pagesDir);
     this.fsTree = new FSTree({
-      cwd: nodePath.join('/', options.appDir),
+      cwd: nodePath.join('/', options.pagesDir),
       logger: this.logger,
       resolveFileName: (page, fileType) => {
         const fileNames = ensureArray(this.options.fileNames[fileType]);
         if (fileNames.length === 0)
           return;
 
         return fileNames.find((fileName) => {
-          const absFile = nodePath.join(this.absApp, page.dirName, fileName);
+          const absFile = nodePath.join(this.absPagesDir, page.dirName, fileName);
           return nodeFS.existsSync(absFile) && nodeFS.statSync(absFile).isFile();
         });
       },
@@ -46,39 +46,44 @@ export class ReactApp {
     });
   }
 
-  get output() {
+  async generate() {
+    if (!this.isSetup) {
+      this.logger.info(`is not setup, try to setup again`);
+      await this.setup();
+    }
+
     const output = this.fsTree.render();
     this.logger.info(`Generated: ${output}`);
     return output;
   }
 
-  private _inApp(path: string) {
-    return path.startsWith(this.absApp);
+  private _inPagesDir(path: string) {
+    return path.startsWith(this.absPagesDir);
   }
 
   private devServer?: ViteDevServer;
   private onChange?: () => unknown;
-  async connect(devServer: ViteDevServer, onChange: ReactAppChange) {
+  async watch(devServer: ViteDevServer, onChange: ReactPagesChange) {
     this.devServer = devServer;
     this.onChange = onChange;
     this.logger.info(`setup`);
 
     devServer.watcher.on('unlink', async (path) => {
-      if (!this._inApp(path))
+      if (!this._inPagesDir(path))
         return;
 
       await this.removeFile(path);
     });
 
     devServer.watcher.on('add', async (path) => {
-      if (!this._inApp(path))
+      if (!this._inPagesDir(path))
         return;
 
       await this.addFile(path);
     });
 
     devServer.watcher.on('change', async (path) => {
-      if (!this._inApp(path))
+      if (!this._inPagesDir(path))
         return;
 
       await this.updateFile(path);
@@ -87,16 +92,26 @@ export class ReactApp {
     await this.setup();
   }
 
+  private _isSetup = false;
+  get isSetup() {
+    return this._isSetup;
+  }
+
   async setup() {
-    this.logger.info(`setup`);
+    if (this.isSetup) {
+      this.logger.error(`is already setup`);
+      return;
+    }
+
+    this.logger.info(`setup react pages ${this.absPagesDir}`);
 
     const pageFileNames = ensureArray(this.options.fileNames.page);
 
     if (pageFileNames.length > 0) {
       const pageFiles = await glob(
         nodePath.join('**', pageFileNames.length > 1 ? `{${pageFileNames.join(',')}}` : pageFileNames[0]),
         {
-          cwd: this.absApp,
+          cwd: this.absPagesDir,
           nodir: true,
           dot: false,
           ignore: this.options.excludes,

Diff for: packages/unplugin-react-pages/src/index.ts

@@ -1,2 +1,2 @@
-export * from './const';
+export { pkgName, pkgVersion } from './const';
 export { reactPages } from './plugin';

Diff for: packages/unplugin-react-pages/src/plugin.ts

@@ -1,6 +1,6 @@
 import type { LogLevel, ModuleNode, Plugin } from 'vite';
 import { pkgName } from './const';
-import { ReactApp } from './core/ReactApp';
+import { ReactPages } from './core/ReactPages';
 import { type DeepPartial, withDefaults } from './helpers';
 import type { FileType } from './core/FSTree';
 
@@ -14,7 +14,7 @@ export interface PluginOptions {
    * 应用目录
    * @default 'src/pages'
    */
-  appDir: string;
+  pagesDir: string;
 
   /**
    * 文件名映射
@@ -45,12 +45,12 @@ export interface PluginOptions {
 export type UserPluginOptions = DeepPartial<PluginOptions>;
 
 // @ref https://cn.vitejs.dev/guide/api-plugin#virtual-modules-convention
-const virtualModuleId = 'virtual:react-app';
+const virtualModuleId = 'virtual:react-pages';
 const resolvedVirtualModuleId = `\0${virtualModuleId}`;
 
 const defaultPluginOptions: () => PluginOptions = () => ({
   debug: false,
-  appDir: 'src/pages',
+  pagesDir: 'src/pages',
   logLevel: 'error',
   disableLazy: false,
   caseSensitive: false,
@@ -67,19 +67,19 @@ const defaultPluginOptions: () => PluginOptions = () => ({
 });
 
 export function reactPages(userPluginOptions?: UserPluginOptions): Plugin {
-  let reactApp: ReactApp | null = null;
+  let reactPages: ReactPages | null = null;
 
   return {
     name: pkgName,
     enforce: 'pre',
 
     async configResolved(config) {
-      reactApp = new ReactApp(withDefaults(defaultPluginOptions(), userPluginOptions), config);
+      reactPages = new ReactPages(withDefaults(defaultPluginOptions(), userPluginOptions), config);
     },
 
     async configureServer(server) {
-      await reactApp?.connect(server, function () {
-        this.logger.info(`react-app is changed`);
+      await reactPages?.watch(server, function () {
+        this.logger.info(`react-pages is changed`);
 
         const { moduleGraph } = server;
         const mods = moduleGraph.getModulesByFile(resolvedVirtualModuleId);
@@ -108,7 +108,7 @@ export function reactPages(userPluginOptions?: UserPluginOptions): Plugin {
       if (id !== resolvedVirtualModuleId)
         return;
 
-      return reactApp?.output;
+      return reactPages?.generate();
     },
   };
 }