From cae76383451dadc878871f4522b75f5fa958c484 Mon Sep 17 00:00:00 2001 From: John Campion Jr Date: Sat, 16 Dec 2023 11:09:31 -0500 Subject: [PATCH] chore: add simpler example with unplugin-vue-router --- examples/unplugin-vue-router/index.html | 12 ++ examples/unplugin-vue-router/package.json | 24 +++ examples/unplugin-vue-router/src/App.vue | 3 + examples/unplugin-vue-router/src/index.css | 1 + .../src/layouts/default.vue | 8 + .../src/layouts/second.vue | 8 + .../src/layouts/sub/layoutsub.vue | 8 + examples/unplugin-vue-router/src/main.ts | 19 +++ .../src/module1/layouts/module1layout.vue | 8 + .../src/module2/layouts/module2layout.vue | 8 + .../src/pages/about/index.vue | 6 + .../src/pages/about/who/me.vue | 12 ++ .../src/pages/deep/deeper/deepest/index.vue | 3 + .../src/pages/deep/deeper/index.vue | 6 + .../src/pages/deep/index.vue | 6 + .../unplugin-vue-router/src/pages/index.vue | 39 +++++ .../unplugin-vue-router/src/pages/module1.vue | 10 ++ .../unplugin-vue-router/src/pages/module2.vue | 10 ++ .../unplugin-vue-router/src/pages/news.vue | 10 ++ .../src/pages/news/Today.vue | 8 + .../src/pages/news/index.vue | 3 + .../src/pages/nolayout.vue | 10 ++ .../src/pages/second/index.vue | 13 ++ .../src/pages/sublayout.vue | 12 ++ .../unplugin-vue-router/src/shims-vue.d.ts | 5 + .../unplugin-vue-router/typed-router.d.ts | 154 ++++++++++++++++++ examples/unplugin-vue-router/vite.config.ts | 29 ++++ 27 files changed, 435 insertions(+) create mode 100644 examples/unplugin-vue-router/index.html create mode 100644 examples/unplugin-vue-router/package.json create mode 100644 examples/unplugin-vue-router/src/App.vue create mode 100644 examples/unplugin-vue-router/src/index.css create mode 100644 examples/unplugin-vue-router/src/layouts/default.vue create mode 100644 examples/unplugin-vue-router/src/layouts/second.vue create mode 100644 examples/unplugin-vue-router/src/layouts/sub/layoutsub.vue create mode 100644 examples/unplugin-vue-router/src/main.ts create mode 100644 examples/unplugin-vue-router/src/module1/layouts/module1layout.vue create mode 100644 examples/unplugin-vue-router/src/module2/layouts/module2layout.vue create mode 100644 examples/unplugin-vue-router/src/pages/about/index.vue create mode 100644 examples/unplugin-vue-router/src/pages/about/who/me.vue create mode 100644 examples/unplugin-vue-router/src/pages/deep/deeper/deepest/index.vue create mode 100644 examples/unplugin-vue-router/src/pages/deep/deeper/index.vue create mode 100644 examples/unplugin-vue-router/src/pages/deep/index.vue create mode 100644 examples/unplugin-vue-router/src/pages/index.vue create mode 100644 examples/unplugin-vue-router/src/pages/module1.vue create mode 100644 examples/unplugin-vue-router/src/pages/module2.vue create mode 100644 examples/unplugin-vue-router/src/pages/news.vue create mode 100644 examples/unplugin-vue-router/src/pages/news/Today.vue create mode 100644 examples/unplugin-vue-router/src/pages/news/index.vue create mode 100644 examples/unplugin-vue-router/src/pages/nolayout.vue create mode 100644 examples/unplugin-vue-router/src/pages/second/index.vue create mode 100644 examples/unplugin-vue-router/src/pages/sublayout.vue create mode 100644 examples/unplugin-vue-router/src/shims-vue.d.ts create mode 100644 examples/unplugin-vue-router/typed-router.d.ts create mode 100644 examples/unplugin-vue-router/vite.config.ts diff --git a/examples/unplugin-vue-router/index.html b/examples/unplugin-vue-router/index.html new file mode 100644 index 0000000..53db78d --- /dev/null +++ b/examples/unplugin-vue-router/index.html @@ -0,0 +1,12 @@ + + + + + + Vite App + + +
+ + + \ No newline at end of file diff --git a/examples/unplugin-vue-router/package.json b/examples/unplugin-vue-router/package.json new file mode 100644 index 0000000..6c545ff --- /dev/null +++ b/examples/unplugin-vue-router/package.json @@ -0,0 +1,24 @@ +{ + "private": true, + "scripts": { + "dev": "nodemon --watch ../../dist/index.js -x \"cross-env DEBUG=vite-plugin-layouts vite\"", + "build": "cross-env DEBUG=vite-plugin-layouts vite build", + "serve": "vite preview" + }, + "dependencies": { + "vue": "^3.3.10" + }, + "devDependencies": { + "@vitejs/plugin-vue": "^4.5.0", + "@vue/compiler-sfc": "^3.3.8", + "cross-env": "^7.0.3", + "nodemon": "^3.0.1", + "typescript": "^5.3.2", + "vite": "^5.0.2", + "vite-plugin-inspect": "^0.8.1", + "vite-plugin-pages": "^0.32.0", + "vite-plugin-vue-layouts": "workspace:*", + "unplugin-vue-markdown": "^0.25.2", + "unplugin-vue-router": "^0.7.0" + } +} diff --git a/examples/unplugin-vue-router/src/App.vue b/examples/unplugin-vue-router/src/App.vue new file mode 100644 index 0000000..98240ae --- /dev/null +++ b/examples/unplugin-vue-router/src/App.vue @@ -0,0 +1,3 @@ + diff --git a/examples/unplugin-vue-router/src/index.css b/examples/unplugin-vue-router/src/index.css new file mode 100644 index 0000000..5a221bc --- /dev/null +++ b/examples/unplugin-vue-router/src/index.css @@ -0,0 +1 @@ +.test { } \ No newline at end of file diff --git a/examples/unplugin-vue-router/src/layouts/default.vue b/examples/unplugin-vue-router/src/layouts/default.vue new file mode 100644 index 0000000..7920f08 --- /dev/null +++ b/examples/unplugin-vue-router/src/layouts/default.vue @@ -0,0 +1,8 @@ + diff --git a/examples/unplugin-vue-router/src/layouts/second.vue b/examples/unplugin-vue-router/src/layouts/second.vue new file mode 100644 index 0000000..55a8910 --- /dev/null +++ b/examples/unplugin-vue-router/src/layouts/second.vue @@ -0,0 +1,8 @@ + diff --git a/examples/unplugin-vue-router/src/layouts/sub/layoutsub.vue b/examples/unplugin-vue-router/src/layouts/sub/layoutsub.vue new file mode 100644 index 0000000..6cda384 --- /dev/null +++ b/examples/unplugin-vue-router/src/layouts/sub/layoutsub.vue @@ -0,0 +1,8 @@ + diff --git a/examples/unplugin-vue-router/src/main.ts b/examples/unplugin-vue-router/src/main.ts new file mode 100644 index 0000000..1ee9fe6 --- /dev/null +++ b/examples/unplugin-vue-router/src/main.ts @@ -0,0 +1,19 @@ +import { createApp } from 'vue' +import { createRouter, createWebHistory } from 'vue-router/auto' +import { createGetRoutes, setupLayouts } from 'virtual:generated-layouts' +import App from './App.vue' +import './index.css' + +const router = createRouter({ + history: createWebHistory(), + extendRoutes: routes => setupLayouts(routes), +}) + +const getRoutes = createGetRoutes(router) +console.log(getRoutes()) + +const app = createApp(App) + +app.use(router) + +app.mount('#app') diff --git a/examples/unplugin-vue-router/src/module1/layouts/module1layout.vue b/examples/unplugin-vue-router/src/module1/layouts/module1layout.vue new file mode 100644 index 0000000..776eb74 --- /dev/null +++ b/examples/unplugin-vue-router/src/module1/layouts/module1layout.vue @@ -0,0 +1,8 @@ + diff --git a/examples/unplugin-vue-router/src/module2/layouts/module2layout.vue b/examples/unplugin-vue-router/src/module2/layouts/module2layout.vue new file mode 100644 index 0000000..e2caaaa --- /dev/null +++ b/examples/unplugin-vue-router/src/module2/layouts/module2layout.vue @@ -0,0 +1,8 @@ + diff --git a/examples/unplugin-vue-router/src/pages/about/index.vue b/examples/unplugin-vue-router/src/pages/about/index.vue new file mode 100644 index 0000000..45bcb44 --- /dev/null +++ b/examples/unplugin-vue-router/src/pages/about/index.vue @@ -0,0 +1,6 @@ + diff --git a/examples/unplugin-vue-router/src/pages/about/who/me.vue b/examples/unplugin-vue-router/src/pages/about/who/me.vue new file mode 100644 index 0000000..49784e8 --- /dev/null +++ b/examples/unplugin-vue-router/src/pages/about/who/me.vue @@ -0,0 +1,12 @@ + + + +{ + name: "who-me-override", + meta: { + requiresAuth: false + } +} + diff --git a/examples/unplugin-vue-router/src/pages/deep/deeper/deepest/index.vue b/examples/unplugin-vue-router/src/pages/deep/deeper/deepest/index.vue new file mode 100644 index 0000000..34d2d20 --- /dev/null +++ b/examples/unplugin-vue-router/src/pages/deep/deeper/deepest/index.vue @@ -0,0 +1,3 @@ + diff --git a/examples/unplugin-vue-router/src/pages/deep/deeper/index.vue b/examples/unplugin-vue-router/src/pages/deep/deeper/index.vue new file mode 100644 index 0000000..aee923c --- /dev/null +++ b/examples/unplugin-vue-router/src/pages/deep/deeper/index.vue @@ -0,0 +1,6 @@ + diff --git a/examples/unplugin-vue-router/src/pages/deep/index.vue b/examples/unplugin-vue-router/src/pages/deep/index.vue new file mode 100644 index 0000000..947af63 --- /dev/null +++ b/examples/unplugin-vue-router/src/pages/deep/index.vue @@ -0,0 +1,6 @@ + diff --git a/examples/unplugin-vue-router/src/pages/index.vue b/examples/unplugin-vue-router/src/pages/index.vue new file mode 100644 index 0000000..a9de5b1 --- /dev/null +++ b/examples/unplugin-vue-router/src/pages/index.vue @@ -0,0 +1,39 @@ + + + +{ + name: "name-override", + meta: {requiresAuth: false} +} + diff --git a/examples/unplugin-vue-router/src/pages/module1.vue b/examples/unplugin-vue-router/src/pages/module1.vue new file mode 100644 index 0000000..7f5b3ad --- /dev/null +++ b/examples/unplugin-vue-router/src/pages/module1.vue @@ -0,0 +1,10 @@ + + +{ + meta: { + layout: "module1layout" + } +} + diff --git a/examples/unplugin-vue-router/src/pages/module2.vue b/examples/unplugin-vue-router/src/pages/module2.vue new file mode 100644 index 0000000..485ef03 --- /dev/null +++ b/examples/unplugin-vue-router/src/pages/module2.vue @@ -0,0 +1,10 @@ + + +{ + meta: { + layout: "module2layout" + } +} + diff --git a/examples/unplugin-vue-router/src/pages/news.vue b/examples/unplugin-vue-router/src/pages/news.vue new file mode 100644 index 0000000..221a89f --- /dev/null +++ b/examples/unplugin-vue-router/src/pages/news.vue @@ -0,0 +1,10 @@ + + +{ + meta: { + layout: "second" + } +} + diff --git a/examples/unplugin-vue-router/src/pages/news/Today.vue b/examples/unplugin-vue-router/src/pages/news/Today.vue new file mode 100644 index 0000000..bdfa7d2 --- /dev/null +++ b/examples/unplugin-vue-router/src/pages/news/Today.vue @@ -0,0 +1,8 @@ + + +{ + name: 'named-news-page' +} + \ No newline at end of file diff --git a/examples/unplugin-vue-router/src/pages/news/index.vue b/examples/unplugin-vue-router/src/pages/news/index.vue new file mode 100644 index 0000000..f991c49 --- /dev/null +++ b/examples/unplugin-vue-router/src/pages/news/index.vue @@ -0,0 +1,3 @@ + diff --git a/examples/unplugin-vue-router/src/pages/nolayout.vue b/examples/unplugin-vue-router/src/pages/nolayout.vue new file mode 100644 index 0000000..38ee03e --- /dev/null +++ b/examples/unplugin-vue-router/src/pages/nolayout.vue @@ -0,0 +1,10 @@ + + + +meta: + layout: false + diff --git a/examples/unplugin-vue-router/src/pages/second/index.vue b/examples/unplugin-vue-router/src/pages/second/index.vue new file mode 100644 index 0000000..ea0a077 --- /dev/null +++ b/examples/unplugin-vue-router/src/pages/second/index.vue @@ -0,0 +1,13 @@ + + +{ + meta: { + layout: "second" + } +} + diff --git a/examples/unplugin-vue-router/src/pages/sublayout.vue b/examples/unplugin-vue-router/src/pages/sublayout.vue new file mode 100644 index 0000000..7f3fb3b --- /dev/null +++ b/examples/unplugin-vue-router/src/pages/sublayout.vue @@ -0,0 +1,12 @@ + + + +{meta: { + layout: "sub/layoutsub" +} +} + diff --git a/examples/unplugin-vue-router/src/shims-vue.d.ts b/examples/unplugin-vue-router/src/shims-vue.d.ts new file mode 100644 index 0000000..2b97bd9 --- /dev/null +++ b/examples/unplugin-vue-router/src/shims-vue.d.ts @@ -0,0 +1,5 @@ +declare module '*.vue' { + import type { DefineComponent } from 'vue' + const component: DefineComponent<{}, {}, any> + export default component +} diff --git a/examples/unplugin-vue-router/typed-router.d.ts b/examples/unplugin-vue-router/typed-router.d.ts new file mode 100644 index 0000000..d3f703e --- /dev/null +++ b/examples/unplugin-vue-router/typed-router.d.ts @@ -0,0 +1,154 @@ +/* eslint-disable */ +/* prettier-ignore */ +// @ts-nocheck +// Generated by unplugin-vue-router. ‼️ DO NOT MODIFY THIS FILE ‼️ +// It's recommended to commit this file. +// Make sure to add this file to your tsconfig.json file as an "includes" or "files" entry. + +/// + +import type { + // type safe route locations + RouteLocationTypedList, + RouteLocationResolvedTypedList, + RouteLocationNormalizedTypedList, + RouteLocationNormalizedLoadedTypedList, + RouteLocationAsString, + RouteLocationAsRelativeTypedList, + RouteLocationAsPathTypedList, + + // helper types + // route definitions + RouteRecordInfo, + ParamValue, + ParamValueOneOrMore, + ParamValueZeroOrMore, + ParamValueZeroOrOne, + + // vue-router extensions + _RouterTyped, + RouterLinkTyped, + RouterLinkPropsTyped, + NavigationGuard, + UseLinkFnTyped, + + // data fetching + _DataLoader, + _DefineLoaderOptions, +} from 'unplugin-vue-router/types' + +declare module 'vue-router/auto/routes' { + export interface RouteNamedMap { + 'name-override': RouteRecordInfo<'name-override', '/', Record, Record>, + '/about/': RouteRecordInfo<'/about/', '/about', Record, Record>, + 'who-me-override': RouteRecordInfo<'who-me-override', '/about/who/me', Record, Record>, + '/deep/': RouteRecordInfo<'/deep/', '/deep', Record, Record>, + '/deep/deeper/': RouteRecordInfo<'/deep/deeper/', '/deep/deeper', Record, Record>, + '/deep/deeper/deepest/': RouteRecordInfo<'/deep/deeper/deepest/', '/deep/deeper/deepest', Record, Record>, + '/module1': RouteRecordInfo<'/module1', '/module1', Record, Record>, + '/module2': RouteRecordInfo<'/module2', '/module2', Record, Record>, + '/news': RouteRecordInfo<'/news', '/news', Record, Record>, + '/news/': RouteRecordInfo<'/news/', '/news', Record, Record>, + 'named-news-page': RouteRecordInfo<'named-news-page', '/news/Today', Record, Record>, + '/nolayout': RouteRecordInfo<'/nolayout', '/nolayout', Record, Record>, + '/second/': RouteRecordInfo<'/second/', '/second', Record, Record>, + '/sublayout': RouteRecordInfo<'/sublayout', '/sublayout', Record, Record>, + } +} + +declare module 'vue-router/auto' { + import type { RouteNamedMap } from 'vue-router/auto/routes' + + export type RouterTyped = _RouterTyped + + /** + * Type safe version of `RouteLocationNormalized` (the type of `to` and `from` in navigation guards). + * Allows passing the name of the route to be passed as a generic. + */ + export type RouteLocationNormalized = RouteLocationNormalizedTypedList[Name] + + /** + * Type safe version of `RouteLocationNormalizedLoaded` (the return type of `useRoute()`). + * Allows passing the name of the route to be passed as a generic. + */ + export type RouteLocationNormalizedLoaded = RouteLocationNormalizedLoadedTypedList[Name] + + /** + * Type safe version of `RouteLocationResolved` (the returned route of `router.resolve()`). + * Allows passing the name of the route to be passed as a generic. + */ + export type RouteLocationResolved = RouteLocationResolvedTypedList[Name] + + /** + * Type safe version of `RouteLocation` . Allows passing the name of the route to be passed as a generic. + */ + export type RouteLocation = RouteLocationTypedList[Name] + + /** + * Type safe version of `RouteLocationRaw` . Allows passing the name of the route to be passed as a generic. + */ + export type RouteLocationRaw = + | RouteLocationAsString + | RouteLocationAsRelativeTypedList[Name] + | RouteLocationAsPathTypedList[Name] + + /** + * Generate a type safe params for a route location. Requires the name of the route to be passed as a generic. + */ + export type RouteParams = RouteNamedMap[Name]['params'] + /** + * Generate a type safe raw params for a route location. Requires the name of the route to be passed as a generic. + */ + export type RouteParamsRaw = RouteNamedMap[Name]['paramsRaw'] + + export function useRouter(): RouterTyped + export function useRoute(name?: Name): RouteLocationNormalizedLoadedTypedList[Name] + + export const useLink: UseLinkFnTyped + + export function onBeforeRouteLeave(guard: NavigationGuard): void + export function onBeforeRouteUpdate(guard: NavigationGuard): void + + export const RouterLink: RouterLinkTyped + export const RouterLinkProps: RouterLinkPropsTyped + + // Experimental Data Fetching + + export function defineLoader< + P extends Promise, + Name extends keyof RouteNamedMap = keyof RouteNamedMap, + isLazy extends boolean = false, + >( + name: Name, + loader: (route: RouteLocationNormalizedLoaded) => P, + options?: _DefineLoaderOptions, + ): _DataLoader, isLazy> + export function defineLoader< + P extends Promise, + isLazy extends boolean = false, + >( + loader: (route: RouteLocationNormalizedLoaded) => P, + options?: _DefineLoaderOptions, + ): _DataLoader, isLazy> + + export { + _definePage as definePage, + _HasDataLoaderMeta as HasDataLoaderMeta, + _setupDataFetchingGuard as setupDataFetchingGuard, + _stopDataFetchingScope as stopDataFetchingScope, + } from 'unplugin-vue-router/runtime' +} + +declare module 'vue-router' { + import type { RouteNamedMap } from 'vue-router/auto/routes' + + export interface TypesConfig { + beforeRouteUpdate: NavigationGuard + beforeRouteLeave: NavigationGuard + + $route: RouteLocationNormalizedLoadedTypedList[keyof RouteNamedMap] + $router: _RouterTyped + + RouterLink: RouterLinkTyped + } +} diff --git a/examples/unplugin-vue-router/vite.config.ts b/examples/unplugin-vue-router/vite.config.ts new file mode 100644 index 0000000..f366d91 --- /dev/null +++ b/examples/unplugin-vue-router/vite.config.ts @@ -0,0 +1,29 @@ +import { defineConfig } from 'vite' +import Vue from '@vitejs/plugin-vue' +import Pages from 'vite-plugin-pages' +import Layouts from 'vite-plugin-vue-layouts' +import Markdown from 'unplugin-vue-markdown/vite' +import VueRouter from 'unplugin-vue-router/vite' + +const config = defineConfig({ + plugins: [ + VueRouter({ + /* options */ + }), + Vue({ + include: [/\.vue$/, /\.md$/], + }), + Pages({ + extensions: ['vue', 'md'], + syncIndex: false, + }), + Layouts({ + defaultLayout: 'default', + layoutsDirs: 'src/**/layouts', + pagesDirs: [], + }), + Markdown({}), + ], +}) + +export default config