vite-plugin-generoutes 0.2.5 → 0.2.7

package/README.md

@@ -1,135 +1,112 @@
-# vite-plugin-generoutes
-
-A Vite plugin that generates routes based on the file structure, supports dynamic routes, and supports custom meta data for each route.
-
-## Usage
-
-1. Install the plugin:
-
-```bash
-npm install vite-plugin-generoutes
-```
-
-2. Add the plugin to your `vite.config.js`:
-
-```js
-import { defineConfig } from 'vite'
-import generoutes from 'vite-plugin-generoutes'
-
-export default defineConfig({
-  plugins: [
-    generoutes()
-    // ... other plugins
-  ]
-})
-```
-
-3. Create your page files(`index.vue` or `[...all].vue`) in the `src/pages` directory. Each file in this directory will be treated as a route.
-
-```
-src/routes/pages
-├── index.vue
-├── [...all].vue
-├── user/
-│   ├── index.vue
-│   ├── [id]
-│   │   └── index.vue
-└── post
-    ├── index.vue
-    └── [...all].vue
-```
-
-The above example will generate the routes file `src/router/generoutes/index.js` with the following content:
-```js
-export const routes = [
-  {
-    name: 'Index',
-    path: '/',
-    component: () => import('/src/pages/index.vue'),
-    meta: {
-      title: 'Index',
-      show: true,
-      keepAlive: false,
-    },
-  },
-  {
-    name: 'User',
-    path: '/user',
-    component: () => import('/src/pages/user/index.vue'),
-    meta: {
-      title: 'User',
-      show: true,
-      keepAlive: false,
-    },
-  },
-  {
-    name: 'User_[id]',
-    path: '/user/:id',
-    component: () => import('/src/pages/user/[id]/index.vue'),
-    meta: {
-      title: 'User_[id]',
-      show: true,
-      keepAlive: false,
-    },
-  },
-  {
-    name: 'User_Post',
-    path: '/user/post',
-    component: () => import('/src/pages/user/post/index.vue'),
-    meta: {
-      title: 'User_Post',
-      show: true,
-      keepAlive: false,
-    },
-  },
-  {
-    name: 'Index_[...all]',
-    path: '/:pathMatch(.*)*',
-    component: () => import('/src/pages/[...all].vue'),
-    meta: {
-      title: '404 Not Found',
-      show: true,
-      keepAlive: false,
-    },
-  },
-  {
-    name: 'User_Post_[...all]',
-    path: '/user/post/:pathMatch(.*)*',
-    component: () => import('/src/pages/user/post/[...all].vue'),
-    meta: {
-      title: 'User_Post_[...all]',
-      show: true,
-      keepAlive: false,
-    },
-  },
-]
-```
-
-4. Import the generated routes and create a router instance:
-
-```js
-import { createRouter, createWebHashHistory } from 'vue-router'
-import { routes } from './generoutes'
-
-const router = createRouter({
-  history: createWebHashHistory(),
-  routes,
-})
-
-export default router
-```
-
-## Features
-
-- Generate routes based on the file structure.
-- Support dynamic routes.
-- Support multiple NotFound routes.
-- Support custom meta data for each route.
-- Support ghost paths, For example, the (admin) folder will not be part of the route path, which is very useful for folder grouping.
-- Support immediate update of the routes file when the file structure or defineOptions changes.
-
-## Custom route info，including name and meta
-
-You can define `name` and `meta` fields in the `defineOptions` of your `.vue` file, which will be used to override the default properties of the generated route. The `name` field will be used as the route name, which is very useful for `KeepAlive`. Any property in `defineOptions.meta` will be used as a property of the route `meta`, which makes the route metadata very flexible.
-
-When you make any changes that may affect the route result, the `src/router/generoutes/index.js` file will be updated immediately, and the page will be refreshed without restarting the server.
+# vite-plugin-generoutes
+
+A Vite plugin that generate routes based on the file structure, supports dynamic routes, and supports custom meta data for each route.
+
+## Usage
+
+1. Install the plugin:
+
+```bash
+npm install vite-plugin-generoutes
+```
+
+2. Add the plugin to your `vite.config.js`:
+
+```js
+import { defineConfig } from 'vite'
+import generoutes from 'vite-plugin-generoutes'
+
+export default defineConfig({
+  plugins: [
+    generoutes()
+    // ... other plugins
+  ]
+})
+```
+
+3. Create your page files(`index.vue` or `[...all].vue`) in the `src/pages` directory. Each file in this directory will be treated as a route.
+
+```
+src/routes/pages
+├── index.vue
+├── [...all].vue
+├── user/
+│   ├── index.vue
+│   ├── [id]
+│   │   └── index.vue
+└── post
+    ├── index.vue
+    └── [...all].vue
+```
+
+The above example will generate the routes file `src/pages/generoutes.js` with the following content:
+```js
+export const routes = [
+  {
+    name: 'Index',
+    path: '/',
+    component: () => import('/src/pages/index.vue'),
+    meta: {},
+  },
+  {
+    name: 'User',
+    path: '/user',
+    component: () => import('/src/pages/user/index.vue'),
+    meta: {},
+  },
+  {
+    name: 'User_[id]',
+    path: '/user/:id',
+    component: () => import('/src/pages/user/[id]/index.vue'),
+    meta: {},
+  },
+  {
+    name: 'User_Post',
+    path: '/user/post',
+    component: () => import('/src/pages/user/post/index.vue'),
+    meta: {},
+  },
+  {
+    name: 'Index_[...all]',
+    path: '/:pathMatch(.*)*',
+    component: () => import('/src/pages/[...all].vue'),
+    meta: {},
+  },
+  {
+    name: 'User_Post_[...all]',
+    path: '/user/post/:pathMatch(.*)*',
+    component: () => import('/src/pages/user/post/[...all].vue'),
+    meta: {},
+  },
+]
+```
+
+4. Import the generated routes and create a router instance:
+
+```js
+import { createRouter, createWebHashHistory } from 'vue-router'
+import { routes } from './pages/generoutes'
+
+const router = createRouter({
+  history: createWebHashHistory(),
+  routes,
+})
+
+export default router
+```
+
+## Features
+
+- Generate routes based on the file structure.
+- Support dynamic routes.
+- Support multiple NotFound routes.
+- Support custom meta data for each route.
+- Support ghost paths, For example, the (admin) folder will not be part of the route path, which is very useful for folder grouping.
+- Support immediate update of the routes file when the file structure or defineOptions changes.
+- Support nested route.
+
+## Custom route info，including name and meta
+
+You can define `name` and `meta` fields in the `defineOptions` of your `.vue` file, which will be used to override the default properties of the generated route. The `name` field will be used as the route name, which is very useful for `KeepAlive`. Any property in `defineOptions.meta` will be used as a property of the route `meta`, which makes the route metadata very flexible.
+
+When you make any changes that may affect the route result, the `src/pages/generoutes.js` file will be updated immediately, and the page will be refreshed without restarting the server.

package/dist/index.d.ts

@@ -3,7 +3,7 @@ import { Plugin } from 'vite';
 /**********************************
  * @Author: Ronnie Zhang
  * @LastEditor: Ronnie Zhang
- * @LastEditTime: 2023/12/04 22:48:11
+ * @LastEditTime: 2024/07/01 14:51:47
  * @Email: zclzone@outlook.com
  * Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
  **********************************/

package/dist/index.js

@@ -84,7 +84,7 @@ function VitePluginGeneroutes(options = {}) {
         return null;
       const pathSegments = filePath.replace(`${pagesFolder}`, "").replace(".vue", "").replace("index", "").split("/").filter((item) => !!item && !/^\(.*\)$/.test(item));
       const name = defineOptions.name || pathSegments.map((item) => toPascalCase(item)).join("_") || "Index";
-      const component = `##/${filePath}##`;
+      const component = `##/${filePath}@@${name}##`;
       const routePath = `/${pathSegments.map((item) => item.replace(/\[(.*?)\]/g, (_, p1) => p1 === "...all" ? ":pathMatch(.*)*" : p1.split(",").map((i) => `:${i}`).join("/"))).join("/")}`;
       return {
         name,
@@ -112,22 +112,25 @@ function VitePluginGeneroutes(options = {}) {
 
     export const routes = ${JSON.stringify(routes, null, 2)}
     `;
-    routesStr = routesStr.replace(/"##(.*)##"/g, (_, p1) => `() => import('${p1}')`);
+    routesStr = routesStr.replace(/"##(.*)##"/g, (_, p1) => `async () => ({...(await import('${p1.split("@@")[0]}')).default, name: '${p1.split("@@")[1]}'})`);
     routesStr = await prettier.format(routesStr, { parser: "babel", semi: false, singleQuote: true });
     const filePath = path.resolve(rootDir, routesPath);
     await fs.ensureDir(path.dirname(filePath));
     fs.writeFileSync(filePath, routesStr);
   }
   const debounceWriter = debounce(500, writerRoutesFile);
+  let watcher;
   function createWatcher() {
-    const watcher = chokidar.watch(`${pagesFolder}/**/*.vue`, { ignoreInitial: true });
+    watcher = chokidar.watch(`${pagesFolder}/**/*.vue`, { ignoreInitial: true });
     return watcher.on("all", async (event, path2) => {
       if (ignoreFolders.some((folder) => slash(path2).includes(`/${folder}/`)))
         return;
       if (path2.endsWith(".vue") && (event === "add" || event === "unlink")) {
         debounceWriter();
-        await watcher.close();
-        createWatcher();
+        if (watcher) {
+          await watcher.close();
+          createWatcher();
+        }
       }
     });
   }
@@ -146,6 +149,9 @@ function VitePluginGeneroutes(options = {}) {
           debounceWriter();
         }
       }
+    },
+    closeBundle() {
+      watcher && watcher.close();
     }
   };
 }

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "vite-plugin-generoutes",
   "type": "module",
-  "version": "0.2.5",
+  "version": "0.2.7",
   "packageManager": "pnpm@9.1.1",
-  "description": "_description_",
+  "description": "A Vite plugin that generate routes based on the file structure, supports dynamic routes, and supports custom meta data for each route.",
   "author": "Ronnie Zhang <zclzone@outlook.com>",
   "license": "MIT",
   "homepage": "https://github.com/zclzone/vite-plugin-generoutes",
@@ -78,4 +78,4 @@
   "lint-staged": {
     "*": "eslint --fix"
   }
-}
+}