vite-plugin-generoutes 0.3.0-beta.1 → 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/LICENSE +21 -21
  2. package/README.md +101 -81
  3. package/README.zh_CN.md +132 -0
  4. package/package.json +82 -82
package/LICENSE CHANGED
@@ -1,21 +1,21 @@
1
- MIT License
2
-
3
- Copyright (c) 2024 Ronnie Zhang(大脸怪)
4
-
5
- Permission is hereby granted, free of charge, to any person obtaining a copy
6
- of this software and associated documentation files (the "Software"), to deal
7
- in the Software without restriction, including without limitation the rights
8
- to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
- copies of the Software, and to permit persons to whom the Software is
10
- furnished to do so, subject to the following conditions:
11
-
12
- The above copyright notice and this permission notice shall be included in all
13
- copies or substantial portions of the Software.
14
-
15
- THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
- IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
- FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
- AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
- LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
- OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
- SOFTWARE.
1
+ MIT License
2
+
3
+ Copyright (c) 2024 Ronnie Zhang(大脸怪)
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md CHANGED
@@ -1,112 +1,132 @@
1
1
  # vite-plugin-generoutes
2
2
 
3
- A Vite plugin that generate routes based on the file structure, supports dynamic routes, and supports custom meta data for each route.
3
+ A Vite plugin that automatically generates Vue router configuration based on file system.
4
4
 
5
- ## Usage
5
+ ### ✨ Features
6
6
 
7
- 1. Install the plugin:
7
+ - 📁 File-system based routing
8
+ - 🔄 Dynamic and nested routes support
9
+ - 🛠️ Hot reload - routes update when files change
10
+ - 🎨 Customizable route configuration
11
+ - 🧩 Support for route metadata via `defineOptions`
12
+ - 🚦 Route redirection support
13
+
14
+ ### 📦 Installation
8
15
 
9
16
  ```bash
10
- npm install vite-plugin-generoutes
17
+ # npm
18
+ npm install vite-plugin-generoutes -D
19
+
20
+ # yarn
21
+ yarn add vite-plugin-generoutes -D
22
+
23
+ # pnpm
24
+ pnpm add vite-plugin-generoutes -D
11
25
  ```
12
26
 
13
- 2. Add the plugin to your `vite.config.js`:
27
+ ### 🔨 Usage
28
+
29
+ Configure the plugin in your `vite.config.ts`:
14
30
 
15
- ```js
31
+ ```typescript
32
+ import vue from '@vitejs/plugin-vue'
33
+ // vite.config.ts
16
34
  import { defineConfig } from 'vite'
17
35
  import generoutes from 'vite-plugin-generoutes'
18
36
 
19
37
  export default defineConfig({
20
38
  plugins: [
21
- generoutes()
22
- // ... other plugins
39
+ vue(),
40
+ generoutes({
41
+ // options
42
+ })
23
43
  ]
24
44
  })
25
45
  ```
26
46
 
27
- 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.
47
+ ### ⚙️ Configuration Options
28
48
 
29
- ```
30
- src/routes/pages
31
- ├── index.vue
32
- ├── [...all].vue
33
- ├── user/
34
- │ ├── index.vue
35
- │ ├── [id]
36
- │ │ └── index.vue
37
- └── post
38
- ├── index.vue
39
- └── [...all].vue
40
- ```
49
+ | Option | Type | Default | Description |
50
+ | --------------- | ---------- | ------------------------ | ------------------------------------------------------- |
51
+ | `pagesFolder` | `string` | `'src/pages'` | Path to pages folder |
52
+ | `ignoreFolders` | `string[]` | `['components']` | Folders to ignore when generating routes |
53
+ | `routesPath` | `string` | `'src/router/routes.js'` | Path to generated routes file, can also be a `.ts` file |
54
+ | `nested` | `boolean` | `false` | Whether to generate nested routes |
41
55
 
42
- The above example will generate the routes file `src/pages/generoutes.js` with the following content:
43
- ```js
44
- export const routes = [
45
- {
46
- name: 'Index',
47
- path: '/',
48
- component: () => import('/src/pages/index.vue'),
49
- meta: {},
50
- },
51
- {
52
- name: 'User',
53
- path: '/user',
54
- component: () => import('/src/pages/user/index.vue'),
55
- meta: {},
56
- },
57
- {
58
- name: 'User_[id]',
59
- path: '/user/:id',
60
- component: () => import('/src/pages/user/[id]/index.vue'),
61
- meta: {},
62
- },
63
- {
64
- name: 'User_Post',
65
- path: '/user/post',
66
- component: () => import('/src/pages/user/post/index.vue'),
67
- meta: {},
68
- },
69
- {
70
- name: 'Index_[...all]',
71
- path: '/:pathMatch(.*)*',
72
- component: () => import('/src/pages/[...all].vue'),
73
- meta: {},
74
- },
75
- {
76
- name: 'User_Post_[...all]',
77
- path: '/user/post/:pathMatch(.*)*',
78
- component: () => import('/src/pages/user/post/[...all].vue'),
79
- meta: {},
56
+ ### 📝 Routing Conventions
57
+
58
+ #### Basic Routes
59
+
60
+ - `src/pages/index.vue` -> `/`
61
+ - `src/pages/about.vue` -> `/about`
62
+ - `src/pages/users/index.vue` -> `/users`
63
+ - `src/pages/users/profile.vue` -> `/users/profile`
64
+
65
+ #### Dynamic Routes
66
+
67
+ - `src/pages/users/[id].vue` -> `/users/:id`
68
+ - `src/pages/users/[...all].vue` -> `/users/:pathMatch(.*)*`
69
+ - `src/pages/[org]/[repo].vue` -> `/:org/:repo`
70
+
71
+ #### Virtual Directories
72
+
73
+ - Paths with parentheses in the filename are treated as virtual directories. The parenthesized part will be omitted in the generated route path.
74
+ - For example: `src/pages/(auth)/login.vue` -> `/login`
75
+
76
+ ### 🧠 Custom Routes
77
+
78
+ You can use `defineOptions` in your Vue files to customize route configuration:
79
+
80
+ ```vue
81
+ <script setup>
82
+ defineOptions({
83
+ name: 'CustomRouteName',
84
+ meta: {
85
+ title: 'Page Title',
86
+ icon: 'home',
87
+ requiresAuth: true,
88
+ enabled: true // Set to false to exclude this route
80
89
  },
81
- ]
90
+ redirect: '/other-route' // Set redirection
91
+ })
92
+ </script>
82
93
  ```
83
94
 
84
- 4. Import the generated routes and create a router instance:
95
+ ### 🌲 Nested Routes
85
96
 
86
- ```js
87
- import { createRouter, createWebHashHistory } from 'vue-router'
88
- import { routes } from './pages/generoutes'
97
+ With the `nested: true` option enabled, you can set nested route relationships using the `parent` property:
89
98
 
90
- const router = createRouter({
91
- history: createWebHashHistory(),
92
- routes,
99
+ ```vue
100
+ <script setup>
101
+ defineOptions({
102
+ name: 'ChildRoute',
103
+ parent: 'ParentRouteName',
104
+ meta: {
105
+ title: 'Child Route'
106
+ }
93
107
  })
94
-
95
- export default router
108
+ </script>
96
109
  ```
97
110
 
98
- ## Features
99
-
100
- - Generate routes based on the file structure.
101
- - Support dynamic routes.
102
- - Support multiple NotFound routes.
103
- - Support custom meta data for each route.
104
- - Support ghost paths, For example, the (admin) folder will not be part of the route path, which is very useful for folder grouping.
105
- - Support immediate update of the routes file when the file structure or defineOptions changes.
106
- - Support nested route.
111
+ ### 🚀 Complete Example
107
112
 
108
- ## Custom route info，including name and meta
113
+ ```typescript
114
+ import vue from '@vitejs/plugin-vue'
115
+ // vite.config.ts
116
+ import { defineConfig } from 'vite'
117
+ import generoutes from 'vite-plugin-generoutes'
109
118
 
110
- 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.
119
+ export default defineConfig({
120
+ plugins: [
121
+ vue(),
122
+ generoutes({
123
+ pagesFolder: 'src/views',
124
+ ignoreFolders: ['components', 'assets'],
125
+ routesPath: 'src/router/routes.ts',
126
+ nested: true
127
+ })
128
+ ]
129
+ })
130
+ ```
111
131
 
112
- 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.
132
+ [中文文档](./README.zh_CN.md)
package/README.zh_CN.md ADDED
@@ -0,0 +1,132 @@
1
+ # vite-plugin-generoutes
2
+
3
+ 一个基于文件系统自动生成Vue路由配置的Vite插件。
4
+
5
+ ### ✨ 特性
6
+
7
+ - 📁 基于文件系统的路由生成
8
+ - 🔄 支持动态路由和嵌套路由
9
+ - 🛠️ 热重载 - 文件变化时自动更新路由
10
+ - 🎨 可自定义路由配置
11
+ - 🧩 支持通过`defineOptions`设置路由元数据
12
+ - 🚦 支持路由重定向
13
+
14
+ ### 📦 安装
15
+
16
+ ```bash
17
+ # npm
18
+ npm install vite-plugin-generoutes -D
19
+
20
+ # yarn
21
+ yarn add vite-plugin-generoutes -D
22
+
23
+ # pnpm
24
+ pnpm add vite-plugin-generoutes -D
25
+ ```
26
+
27
+ ### 🔨 使用方法
28
+
29
+ 在`vite.config.ts`中配置插件：
30
+
31
+ ```typescript
32
+ import vue from '@vitejs/plugin-vue'
33
+ // vite.config.ts
34
+ import { defineConfig } from 'vite'
35
+ import generoutes from 'vite-plugin-generoutes'
36
+
37
+ export default defineConfig({
38
+ plugins: [
39
+ vue(),
40
+ generoutes({
41
+ // 配置选项
42
+ })
43
+ ]
44
+ })
45
+ ```
46
+
47
+ ### ⚙️ 配置选项
48
+
49
+ | 选项 | 类型 | 默认值 | 描述 |
50
+ | --------------- | ---------- | ------------------------ | ------------------------------------- |
51
+ | `pagesFolder` | `string` | `'src/pages'` | 页面文件夹路径 |
52
+ | `ignoreFolders` | `string[]` | `['components']` | 生成路由时忽略的文件夹 |
53
+ | `routesPath` | `string` | `'src/router/routes.js'` | 生成的路由文件路径，也可以是`.ts`文件 |
54
+ | `nested` | `boolean` | `false` | 是否生成嵌套路由 |
55
+
56
+ ### 📝 路由规则
57
+
58
+ #### 基本路由
59
+
60
+ - `src/pages/index.vue` -> `/`
61
+ - `src/pages/about.vue` -> `/about`
62
+ - `src/pages/users/index.vue` -> `/users`
63
+ - `src/pages/users/profile.vue` -> `/users/profile`
64
+
65
+ #### 动态路由
66
+
67
+ - `src/pages/users/[id].vue` -> `/users/:id`
68
+ - `src/pages/users/[...all].vue` -> `/users/:pathMatch(.*)*`
69
+ - `src/pages/[org]/[repo].vue` -> `/:org/:repo`
70
+
71
+ #### 虚拟目录
72
+
73
+ - 文件名带括号的路径会被当做虚拟目录，生成的路由path会忽略带括号的这一层路径
74
+ - 例如：`src/pages/(auth)/login.vue` -> `/login`
75
+
76
+ ### 🧠 自定义路由
77
+
78
+ 您可以在Vue文件中使用`defineOptions`来自定义路由配置：
79
+
80
+ ```vue
81
+ <script setup>
82
+ defineOptions({
83
+ name: 'CustomRouteName',
84
+ meta: {
85
+ title: '页面标题',
86
+ icon: 'home',
87
+ requiresAuth: true,
88
+ enabled: true // 设置为false则不会生成此路由
89
+ },
90
+ redirect: '/other-route' // 设置重定向
91
+ })
92
+ </script>
93
+ ```
94
+
95
+ ### 🌲 嵌套路由
96
+
97
+ 启用`nested: true`选项后，可以通过`parent`属性设置嵌套路由关系：
98
+
99
+ ```vue
100
+ <script setup>
101
+ defineOptions({
102
+ name: 'ChildRoute',
103
+ parent: 'ParentRouteName',
104
+ meta: {
105
+ title: '子路由'
106
+ }
107
+ })
108
+ </script>
109
+ ```
110
+
111
+ ### 🚀 完整示例
112
+
113
+ ```typescript
114
+ import vue from '@vitejs/plugin-vue'
115
+ // vite.config.ts
116
+ import { defineConfig } from 'vite'
117
+ import generoutes from 'vite-plugin-generoutes'
118
+
119
+ export default defineConfig({
120
+ plugins: [
121
+ vue(),
122
+ generoutes({
123
+ pagesFolder: 'src/views',
124
+ ignoreFolders: ['components', 'assets'],
125
+ routesPath: 'src/router/routes.ts',
126
+ nested: true
127
+ })
128
+ ]
129
+ })
130
+ ```
131
+
132
+ [English Documentation](./README.md)
package/package.json CHANGED
@@ -1,82 +1,82 @@
1
- {
2
- "name": "vite-plugin-generoutes",
3
- "type": "module",
4
- "version": "0.3.0-beta.1",
5
- "packageManager": "pnpm@10.6.2",
6
- "description": "A Vite plugin that generate routes based on the file structure, supports dynamic routes, and supports custom meta data for each route.",
7
- "author": "Ronnie Zhang <zclzone@outlook.com>",
8
- "license": "MIT",
9
- "homepage": "https://github.com/zclzone/vite-plugin-generoutes",
10
- "repository": {
11
- "type": "git",
12
- "url": "git+https://github.com/zclzone/vite-plugin-generoutes.git"
13
- },
14
- "bugs": "https://github.com/zclzone/vite-plugin-generoutes/issues",
15
- "keywords": [],
16
- "sideEffects": false,
17
- "exports": {
18
- ".": {
19
- "types": "./dist/index.d.ts",
20
- "import": "./dist/index.js"
21
- }
22
- },
23
- "main": "./dist/index.js",
24
- "module": "./dist/index.js",
25
- "types": "./dist/index.d.ts",
26
- "typesVersions": {
27
- "*": {
28
- "*": [
29
- "./dist/*",
30
- "./dist/index.d.ts"
31
- ]
32
- }
33
- },
34
- "files": [
35
- "dist"
36
- ],
37
- "scripts": {
38
- "start": "tsup --watch",
39
- "build": "tsup",
40
- "lint": "eslint .",
41
- "prepublishOnly": "nr build",
42
- "release": "bumpp && npm publish",
43
- "test": "vitest",
44
- "typecheck": "tsc --noEmit",
45
- "prepare": "simple-git-hooks",
46
- "up:deps": "taze major -I"
47
- },
48
- "peerDependencies": {
49
- "vite": "^6.1.0"
50
- },
51
- "dependencies": {
52
- "@antfu/utils": "^9.1.0",
53
- "@vue/compiler-sfc": "^3.5.13",
54
- "chalk": "^5.4.1",
55
- "fs-extra": "^11.3.0",
56
- "glob": "^11.0.1",
57
- "prettier": "^3.5.3"
58
- },
59
- "devDependencies": {
60
- "@antfu/eslint-config": "^4.10.1",
61
- "@types/fs-extra": "^11.0.4",
62
- "@types/node": "^20.17.24",
63
- "bumpp": "^10.1.0",
64
- "eslint": "^9.22.0",
65
- "esno": "^4.8.0",
66
- "lint-staged": "^15.5.0",
67
- "pnpm": "^10.6.2",
68
- "rimraf": "^5.0.10",
69
- "simple-git-hooks": "^2.11.1",
70
- "taze": "^19.0.2",
71
- "tsup": "^8.4.0",
72
- "typescript": "^5.8.2",
73
- "unbuild": "^3.5.0",
74
- "vitest": "^3.0.8"
75
- },
76
- "simple-git-hooks": {
77
- "pre-commit": "pnpm lint-staged"
78
- },
79
- "lint-staged": {
80
- "*": "eslint --fix"
81
- }
82
- }
1
+ {
2
+ "name": "vite-plugin-generoutes",
3
+ "type": "module",
4
+ "version": "1.0.0",
5
+ "packageManager": "pnpm@10.6.2",
6
+ "description": "A Vite plugin that generate routes based on the file structure, supports dynamic routes, and supports custom meta data for each route.",
7
+ "author": "Ronnie Zhang <zclzone@outlook.com>",
8
+ "license": "MIT",
9
+ "homepage": "https://github.com/zclzone/vite-plugin-generoutes",
10
+ "repository": {
11
+ "type": "git",
12
+ "url": "git+https://github.com/zclzone/vite-plugin-generoutes.git"
13
+ },
14
+ "bugs": "https://github.com/zclzone/vite-plugin-generoutes/issues",
15
+ "keywords": [],
16
+ "sideEffects": false,
17
+ "exports": {
18
+ ".": {
19
+ "types": "./dist/index.d.ts",
20
+ "import": "./dist/index.js"
21
+ }
22
+ },
23
+ "main": "./dist/index.js",
24
+ "module": "./dist/index.js",
25
+ "types": "./dist/index.d.ts",
26
+ "typesVersions": {
27
+ "*": {
28
+ "*": [
29
+ "./dist/*",
30
+ "./dist/index.d.ts"
31
+ ]
32
+ }
33
+ },
34
+ "files": [
35
+ "dist"
36
+ ],
37
+ "scripts": {
38
+ "start": "tsup --watch",
39
+ "build": "tsup",
40
+ "lint": "eslint .",
41
+ "prepublishOnly": "nr build",
42
+ "release": "bumpp && npm publish",
43
+ "test": "vitest",
44
+ "typecheck": "tsc --noEmit",
45
+ "prepare": "simple-git-hooks",
46
+ "up:deps": "taze major -I"
47
+ },
48
+ "peerDependencies": {
49
+ "vite": "^6.1.0"
50
+ },
51
+ "dependencies": {
52
+ "@antfu/utils": "^9.1.0",
53
+ "@vue/compiler-sfc": "^3.5.13",
54
+ "chalk": "^5.4.1",
55
+ "fs-extra": "^11.3.0",
56
+ "glob": "^11.0.1",
57
+ "prettier": "^3.5.3"
58
+ },
59
+ "devDependencies": {
60
+ "@antfu/eslint-config": "^4.10.1",
61
+ "@types/fs-extra": "^11.0.4",
62
+ "@types/node": "^20.17.24",
63
+ "bumpp": "^10.1.0",
64
+ "eslint": "^9.22.0",
65
+ "esno": "^4.8.0",
66
+ "lint-staged": "^15.5.0",
67
+ "pnpm": "^10.6.2",
68
+ "rimraf": "^5.0.10",
69
+ "simple-git-hooks": "^2.11.1",
70
+ "taze": "^19.0.2",
71
+ "tsup": "^8.4.0",
72
+ "typescript": "^5.8.2",
73
+ "unbuild": "^3.5.0",
74
+ "vitest": "^3.0.8"
75
+ },
76
+ "simple-git-hooks": {
77
+ "pre-commit": "pnpm lint-staged"
78
+ },
79
+ "lint-staged": {
80
+ "*": "eslint --fix"
81
+ }
82
+ }