{"_id":"@ameol/vite-plugin-pages","_rev":"1-76006e4e14721ab029fb2f3774e3c6cb","name":"@ameol/vite-plugin-pages","dist-tags":{"latest":"0.17.3"},"versions":{"0.17.3":{"name":"@ameol/vite-plugin-pages","version":"0.17.3","description":"File system base vue-router plugin for Vite","license":"MIT","repository":{"type":"git","url":"git+https://github.com/ameol/vite-plugin-pages.git"},"author":{"name":"ameol"},"main":"dist/index.js","module":"dist/index.mjs","types":"dist/index.d.ts","homepage":"https://github.com/ameol/vite-plugin-pages","bugs":{"url":"https://github.com/ameol/vite-plugin-pages/issues"},"scripts":{"dev":"npm run build -- --watch --ignore-watch examples","build":"tsup src/index.ts --dts --format cjs,esm --no-splitting","prepublishOnly":"npm run build","release":"npx git-ensure -a && npx bumpp --commit --tag --push","example:dev":"npm -C examples/vue run dev","example:build":"npm -C examples/vue run build","example:serve":"npm -C examples/vue run serve","test":"jest --runInBand","lint":"eslint --ext .js,.ts,.vue,.json .","lint:fix":"eslint --fix --ext .js,.ts,.vue,.json ."},"peerDependencies":{"@vue/compiler-sfc":">=3","vite":">=2"},"peerDependenciesMeta":{"@vue/compiler-sfc":{"optional":true}},"dependencies":{"@antfu/utils":"^0.2.4","deep-equal":"^2.0.5","fast-glob":"^3.2.7","json5":"^2.2.0","yaml":"^2.0.0-7"},"devDependencies":{"@hannoeru/eslint-config":"^0.2.1","@types/debug":"^4.1.7","@types/deep-equal":"^1.0.1","@types/glob-to-regexp":"^0.4.1","@types/jest":"^26.0.24","@types/node":"^16.4.13","@vue/compiler-sfc":"^3.1.5","debug":"^4.3.2","eslint":"^7.32.0","fs-extra":"^10.0.0","gray-matter":"^4.0.3","jest":"^27.0.6","jest-esbuild":"^0.2.0","react-router-config":"^5.1.1","rollup":"^2.56.1","ts-node":"^10.1.0","tsup":"^4.13.1","typescript":"^4.3.5","vite":"^2.4.4","vue-router":"^4.0.10"},"gitHead":"50ac641b177f2b3cd728e933f7bfd38c8303d138","_id":"@ameol/vite-plugin-pages@0.17.3","_nodeVersion":"16.6.2","_npmVersion":"7.20.3","dist":{"integrity":"sha512-rQH6niYJvoojvQRvPF1IjxPyvwhEViP8+Vm+qerGyNLPK1pywkygkgks76uMzqj0eHfsujoOWmZtF2WmX90COg==","shasum":"3435648307efbe5d26baa0462bb2f362d2cefe4d","tarball":"https://registry.npmjs.org/@ameol/vite-plugin-pages/-/vite-plugin-pages-0.17.3.tgz","fileCount":8,"unpackedSize":345235,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhGSkyCRA9TVsSAnZWagAAV/8P/RrxwV8tQsRKqX5Huwny\nhmc9D3i8WfZRWj3fHZwhIS9lFzZunCQGKaL51ITyga2ypoiIcKfPS93RU29P\nRrFpllTCFVIGF+ThllGZsCGeOtF6Zke3wJ4zyG2OjDtWhFVBGcAQ2HQxaz0H\n8JYkDb9dtfFpPFjDuY+5OPvKnWAMaU6/RfN/s4cBl1ICezZ7LU605F/0D0Di\nrzrRgMaoHHDkpqPfTVFSezwJ8KV/EDWE3xLKYxY0GOCLjOmQMopWoVKZ+ukA\nZN6/srK4uwuRbXop9bbu5slSTzRs2hLoUGE1ze54RdrPnNsdvpyBYrYftkPg\nTxSEYH1gngLt+xpMuDqtqpUKBf0chkFwFH0ACevOalz3fpUYh3zd6GwPKOUS\n02DTFBTVLWaHrDzSIkVaItvQDMtByspnc8tB9SKnFxpMEiPIGg5aw8MkNetq\nx9VVTDM0+gpBB+3MbY6Sjl0P+uGgl/JEcDpphjOOU2UUm9sOFGL3cnbiQJZ0\nWJSr8gHX/GCcAyyVACYxMkalOYOlPNIpgR9JxesgvDW2xLdoYSxMcD1nnOMu\nv1YQkgrmavjD8+SSHwdcHT9RFy6oimgSWUKXL6m7M5550ymLBhdMtdv830vW\nG5w53mJRsTj/mkSfmNcDIyj5yT7Eka7RC0zZCzicap7h5fZtgiiJfrpWyAjj\nnlR4\r\n=ARv6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCMfP99z09lCtlUtxq16JTUgTvfxcxauIc/3I0dazhF/AIhAIv6jkMMQ/61NuXCXUVSZKJ70gQWlJr/AvVt1lrj9/Sz"}]},"_npmUser":{"name":"ameol","email":"ameool@163.com"},"directories":{},"maintainers":[{"name":"ameol","email":"ameool@163.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vite-plugin-pages_0.17.3_1629038898745_0.5058916451610713"},"_hasShrinkwrap":false}},"time":{"created":"2021-08-15T14:48:18.663Z","0.17.3":"2021-08-15T14:48:18.883Z","modified":"2022-04-04T13:48:06.132Z"},"maintainers":[{"name":"ameol","email":"ameool@163.com"}],"description":"File system base vue-router plugin for Vite","homepage":"https://github.com/ameol/vite-plugin-pages","repository":{"type":"git","url":"git+https://github.com/ameol/vite-plugin-pages.git"},"author":{"name":"ameol"},"bugs":{"url":"https://github.com/ameol/vite-plugin-pages/issues"},"license":"MIT","readme":"## 修改：react模式下，mdx文件修改（meta部分，使用gray-matter）可以自动重置路由\n\n# vite-plugin-pages\n\n[![npm version](https://badgen.net/npm/v/vite-plugin-pages)](https://www.npmjs.com/package/vite-plugin-pages)\n[![monthly downloads](https://badgen.net/npm/dm/vite-plugin-pages)](https://www.npmjs.com/package/vite-plugin-pages)\n[![types](https://badgen.net/npm/types/vite-plugin-pages)](https://github.com/hannoeru/vite-plugin-pages/blob/main/src/types.ts)\n[![license](https://badgen.net/npm/license/vite-plugin-pages)](https://github.com/hannoeru/vite-plugin-pages/blob/main/LICENSE)\n\n[![Open in Visual Studio Code](https://open.vscode.dev/badges/open-in-vscode.svg)](https://open.vscode.dev/hannoeru/vite-plugin-pages)\n\n> File system based routing for Vue 3 applications using\n> [Vite](https://github.com/vitejs/vite)\n\n## Getting Started\n\n### Vue\n\nInstall:\n\n```bash\n$ npm install -D vite-plugin-pages\n$ npm install vue-router@next\n```\n\nAdd to your `vite.config.js`:\n\n```js\nimport Vue from \"@vitejs/plugin-vue\";\nimport Pages from \"vite-plugin-pages\";\n\nexport default {\n  plugins: [\n    Vue(),\n    Pages(),\n  ],\n};\n```\n\n### React(experimental)\n\nInstall:\n\n```bash\n$ npm install -D vite-plugin-pages\n$ npm install react-router react-router-dom react-router-config\n```\n\nAdd to your `vite.config.js`:\n\n```js\nimport Vue from \"@vitejs/plugin-vue\";\nimport Pages from \"vite-plugin-pages\";\n\nexport default {\n  plugins: [\n    Vue(),\n    Pages({\n      react: true,\n    }),\n  ],\n};\n```\n\n## Overview\n\nBy default a page is a Vue component exported from a `.vue` or `.js` file in the\n`src/pages` directory.\n\nYou can access the generated routes by importing the `virtual:generated-pages`\nmodule in your application.\n\n### Vue\n\n```js\nimport { createRouter } from \"vue-router\";\nimport routes from \"virtual:generated-pages\";\n\nconst router = createRouter({\n  // ...\n  routes,\n});\n```\n\n**Type**\n\n```ts\n// vite-env.d.ts\n/// <reference types=\"vite-plugin-pages/client\" />\n```\n\n### React\n\n```js\nimport { BrowserRouter } from \"react-router-dom\";\nimport { renderRoutes } from \"react-router-config\";\nimport routes from \"virtual:generated-pages-react\";\n\nReactDOM.render(\n  <BrowserRouter>\n    {renderRoutes(routes)}\n  </BrowserRouter>,\n  document.getElementById(\"root\"),\n);\n```\n\n**Type**\n\n```ts\n// vite-env.d.ts\n/// <reference types=\"vite-plugin-pages/client-react\" />\n```\n\n## Configuration\n\nTo use custom configuration, pass your options to Pages when instantiating the\nplugin:\n\n```js\n// vite.config.js\nimport Pages from \"vite-plugin-pages\";\n\nexport default {\n  plugins: [\n    Pages({\n      pagesDir: \"src/views\"\n    }),\n  ],\n};\n```\n\n### pagesDir\n\n- **Type:** `string | (string | PageDirOptions)[]`\n- **Default:** `'src/pages'`\n\nRelative path to the pages directory. Supports globs.\n\nCan be:\n\n- single path: routes point to `/`\n- array of paths: all routes in the paths point to `/`\n- array of `PageDirOptions`, Check below 👇\n\nSpecifying a glob or an array of `PageDirOptions` allow you to use multiple\npages folder, and specify the base route to append to the path and the route\nname.\n\n**Example:**\n\n```bash\n# folder structure\nsrc/\n  ├── features/\n  │  └── dashboard/\n  │     ├── code/\n  │     ├── components/\n  │     └── pages/\n  ├── admin/\n  │   ├── code/\n  │   ├── components/\n  │   └── pages/\n  └── pages/\n```\n\n```js\n// vite.config.js\nexport default {\n  plugins: [\n    Pages({\n      pagesDir: [\n        { dir: \"src/pages\", baseRoute: \"\" },\n        { dir: \"src/features/**/pages\", baseRoute: \"features\" },\n        { dir: \"src/admin/pages\", baseRoute: \"admin\" },\n      ],\n    }),\n  ],\n};\n```\n\n### extensions\n\n- **Type:** `string[]`\n- **Default:**\n  - Vue: `['vue', 'ts', 'js']`\n  - React: `['tsx', 'jsx']`\n\nAn array of valid file extensions for pages.\n\n### exclude\n\n- **Type:** `string[]`\n- **Default:** `[]`\n\nAn array of glob patterns to exclude matches.\n\n```bash\n# folder structure\nsrc/pages/\n  ├── users/\n  │  ├── components\n  │  │  └── form.vue\n  │  ├── [id].vue\n  │  └── index.vue\n  └── home.vue\n```\n\n```js\n// vite.config.js\nexport default {\n  plugins: [\n    Pages({\n      exclude: [\"**/components/*.vue\"],\n    }),\n  ],\n};\n```\n\n### importMode\n\n- **Type:** `'sync' | 'async' | (filepath: string) => 'sync' | 'async')`\n- **Default:**\n  - Top level index file: `'sync'`, can turn off by option `syncIndex`.\n  - Others(Vue): `'async'`\n  - Others(React): `'sync'`\n\nImport mode can be set to either `async`, `sync`, or a function which returns\none of those values.\n\nTo get more fine-grained control over which routes are loaded sync/async, you\ncan use a function to resolve the value based on the route path. For example:\n\n```js\n// vite.config.js\nexport default {\n  plugins: [\n    Pages({\n      importMode(path) {\n        // Load about page synchronously, all other pages are async.\n        return path.includes(\"about\") ? \"sync\" : \"async\";\n      },\n    }),\n  ],\n};\n```\n\n### routeBlockLang\n\n- **Type:** `string`\n- **Default:** `'json5'`\n\nDefault SFC route block parser.\n\n### replaceSquareBrackets(experimental)\n\n- **Type:** `boolean`\n- **Default:** `false`\n\nCheck: [#16](https://github.com/hannoeru/vite-plugin-pages/issues/16)\n\nReplace '[]' to '_' in bundle filename\n\n### nuxtStyle\n\n- **Type:** `boolean`\n- **Default:** `false`\n\nUse Nuxt.js style dynamic routing\n\nMore details:\n[File System Routing](https://nuxtjs.org/docs/2.x/features/file-system-routing)\n\n### extendRoute\n\n- **Type:**\n  `(route: Route, parent: Route | undefined) => Route | void | Promise<Route | void>`\n\nA function that takes a route and optionally returns a modified route. This is\nuseful for augmenting your routes with extra data (e.g. route metadata).\n\n```js\n// vite.config.js\nexport default {\n  // ...\n  plugins: [\n    Pages({\n      extendRoute(route, parent) {\n        if (route.path === \"/\") {\n          // Index is unauthenticated.\n          return route;\n        }\n\n        // Augment the route with meta that indicates that the route requires authentication.\n        return {\n          ...route,\n          meta: { auth: true },\n        };\n      },\n    }),\n  ],\n};\n```\n\n### onRoutesGenerated\n\n- **Type:** `(routes: Route[]) => Route[] | void | Promise<Route[] | void>`\n\nA function that takes a generated routes and optionally returns a modified\ngenerated routes.\n\n### onClientGenerated\n\n- **Type:** `(clientCode: string) => string | void | Promise<string | void>`\n\nA function that takes a generated client code and optionally returns a modified\ngenerated client code.\n\n### SFC custom block for Route Data\n\nAdd route meta to the route by adding a `<route>` block to the SFC. This will\ndirectly added to the route after it is generated, and will override it.\n\nYou can specific a parser to use using `<route lang=\"yaml\">`, or set a default\nparser using `routeBlockLang` option.\n\n- **Supported parser:** JSON, JSON5, YAML\n- **Default:** JSON5\n\nJSON/JSON5:\n\n```html\n<route>\n{\n  name: \"name-override\",\n  meta: {\n    requiresAuth: false\n  }\n}\n</route>\n```\n\nYAML:\n\n```html\n<route lang=\"yaml\">\nname: name-override\nmeta:\n  requiresAuth: true\n</route>\n```\n\n#### Syntax Highlighting `<route>`\n\nTo enable syntax highlighting `<route>` in VS Code using [Vetur's Custom Code Blocks](https://vuejs.github.io/vetur/highlighting.html#custom-block) add the following snippet to your preferences...\n\n 1. update setting\n \n ```\n \"vetur.grammar.customBlocks\": {\n    \"route\": \"json\"\n  }\n```\n \n 2. Run the command in vscode\n \n `Vetur: Generate grammar from vetur.grammar.customBlocks`\n \n 3. Restart VS Code to get syntax highlighting for custom blocks.\n\n\n## File System Routing\n\nInspired by the routing from\n[NuxtJS](https://nuxtjs.org/guides/features/file-system-routing) 💚\n\nPages automatically generates an array of routes for you to plug-in to your\ninstance of Vue Router. These routes are determined by the structure of the\nfiles in your pages directory. Simply create `.vue` files in your pages\ndirectory and routes will automatically be created for you, no additional\nconfiguration required!\n\nFor more advanced use cases, you can tailor Pages to fit the needs of your app\nthrough [configuration](#configuration).\n\n- [Basic Routing](#basic-routing)\n- [Index Routes](#index-routes)\n- [Dynamic Routes](#dynamic-routes)\n- [Nested Routes](#nested-routes)\n- [Catch-all Routes](#catch-all-routes)\n\n### Basic Routing\n\nPages will automatically map files from your pages directory to a route with the\nsame name:\n\n- `src/pages/users.vue` -> `/users`\n- `src/pages/users/profile.vue` -> `/users/profile`\n- `src/pages/settings.vue` -> `/settings`\n\n### Index Routes\n\nFiles with the name `index` are treated as the index page of a route:\n\n- `src/pages/index.vue` -> `/`\n- `src/pages/users/index.vue` -> `/users`\n\n### Dynamic Routes\n\nDynamic routes are denoted using square brackets. Both directories and pages can\nbe dynamic:\n\n- `src/pages/users/[id].vue` -> `/users/:id` (`/users/one`)\n- `src/[user]/settings.vue` -> `/:user/settings` (`/one/settings`)\n\nAny dynamic parameters will be passed to the page as props. For example, given\nthe file `src/pages/users/[id].vue`, the route `/users/abc` will be passed the\nfollowing props:\n\n```json\n{ \"id\": \"abc\" }\n```\n\n### Nested Routes\n\nWe can make use of Vue Routers child routes to create nested layouts. The parent\ncomponent can be defined by giving it the same name as the directory that\ncontains your child routes.\n\nFor example, this directory structure:\n\n```\nsrc/pages/\n  ├── users/\n  │  ├── [id].vue\n  │  └── index.vue\n  └── users.vue\n```\n\nwill result in this routes configuration:\n\n```json5\n[\n  {\n    path: '/users',\n    component: '/src/pages/users.vue',\n    children: [\n      {\n        path: '',\n        component: '/src/pages/users/index.vue',\n        name: 'users'\n      },\n      {\n        path: ':id',\n        component: '/src/pages/users/[id].vue',\n        name: 'users-id'\n      }\n    ]\n  }\n]\n```\n\n### Catch-all Routes\n\nCatch-all routes are denoted with square brackets containing an ellipsis:\n\n- `src/pages/[...all].vue` -> `/*` (`/non-existent-page`)\n\nThe text after the ellipsis will be used both to name the route, and as the name\nof the prop in which the route parameters are passed.\n\n## License\n\nMIT License © 2021 [hannoeru](https://github.com/hannoeru)\n","readmeFilename":"README.md"}