From c82e9647a59469b2a67ccae92e31d17f5493b0c3 Mon Sep 17 00:00:00 2001 From: Eduardo San Martin Morote Date: Thu, 25 Aug 2022 10:25:05 +0200 Subject: [PATCH] feat: one single auto import BREAKING CHANGE: `defineLoader()` is now exported from `unplugin-vue-router/runtime` and is named `_defineLoader()`. If you were using auto imports, the new `VueRouterAutoImports` object contains all the autoimports so you don't need to change it. Refer to https://github.com/posva/unplugin-vue-router/tree/main/src/data-fetching for up to date information on how to use the data fetching. --- playground/auto-imports.d.ts | 3 ++- playground/typed-router.d.ts | 11 +++++++++-- playground/vite.config.ts | 14 +++++--------- src/codegen/generateDTS.ts | 11 +++++++++-- src/index.ts | 36 +++++++++++++++++++++++++++++------- src/options.ts | 2 +- src/runtime.ts | 6 ++++++ 7 files changed, 61 insertions(+), 22 deletions(-) diff --git a/playground/auto-imports.d.ts b/playground/auto-imports.d.ts index 63eb1fb25..1908b7a16 100644 --- a/playground/auto-imports.d.ts +++ b/playground/auto-imports.d.ts @@ -1,7 +1,8 @@ // Generated by 'unplugin-auto-import' export {} declare global { - const defineLoader: typeof import('vue-router/auto')['defineLoader'] + const defineLoader: typeof import('unplugin-vue-router/runtime')['_defineLoader'] + const definePage: typeof import('unplugin-vue-router/runtime')['_definePage'] const useRoute: typeof import('vue-router/auto')['useRoute'] const useRouter: typeof import('vue-router/auto')['useRouter'] } diff --git a/playground/typed-router.d.ts b/playground/typed-router.d.ts index c9ff90943..492552747 100644 --- a/playground/typed-router.d.ts +++ b/playground/typed-router.d.ts @@ -107,8 +107,15 @@ declare module 'vue-router/auto' { export function onBeforeRouteLeave(guard: NavigationGuard): void export function onBeforeRouteUpdate(guard: NavigationGuard): void +} + +declare module 'unplugin-vue-router/runtime' { + import type { RouteNamedMap } from 'vue-router/auto/routes' + import type { + RouteLocationNormalizedLoaded, + } from 'vue-router/auto' - export function defineLoader< + export function _defineLoader< P extends Promise, Name extends keyof RouteNamedMap = keyof RouteNamedMap, isLazy extends boolean = false, @@ -117,7 +124,7 @@ declare module 'vue-router/auto' { loader: (route: RouteLocationNormalizedLoaded) => P, options?: DefineLoaderOptions, ): DataLoader, isLazy> - export function defineLoader< + export function _defineLoader< P extends Promise, isLazy extends boolean = false, >( diff --git a/playground/vite.config.ts b/playground/vite.config.ts index e1734d9f6..6bc5a9677 100644 --- a/playground/vite.config.ts +++ b/playground/vite.config.ts @@ -6,8 +6,8 @@ import VueRouter from '../src/vite' import { getFileBasedRouteName, getPascalCaseRouteName, - VueRouterExports, - RuntimeExports, + VueRouterAutoImports, + DefinePage, } from '../src' import Vue from '@vitejs/plugin-vue' import { resolve } from 'path' @@ -23,9 +23,10 @@ export default defineConfig({ // }, plugins: [ + DefinePage.vite(), Vue({}), VueRouter({ - dataFetching: true, + dataFetching: false, routesFolder: [ // can add multiple routes folders { @@ -53,12 +54,7 @@ export default defineConfig({ ], }), AutoImport({ - imports: [ - { - 'vue-router/auto': VueRouterExports, - // 'unplugin-vue-router/runtime': RuntimeExports, - }, - ], + imports: [VueRouterAutoImports], }), Inspect(), ], diff --git a/src/codegen/generateDTS.ts b/src/codegen/generateDTS.ts index cba9eebb8..565d35053 100644 --- a/src/codegen/generateDTS.ts +++ b/src/codegen/generateDTS.ts @@ -87,8 +87,15 @@ declare module '${vueRouterModule}' { export function onBeforeRouteLeave(guard: NavigationGuard): void export function onBeforeRouteUpdate(guard: NavigationGuard): void +} + +declare module 'unplugin-vue-router/runtime' { + import type { RouteNamedMap } from '${routesModule}' + import type { + RouteLocationNormalizedLoaded, + } from '${vueRouterModule}' - export function defineLoader< + export function _defineLoader< P extends Promise, Name extends keyof RouteNamedMap = keyof RouteNamedMap, isLazy extends boolean = false, @@ -97,7 +104,7 @@ declare module '${vueRouterModule}' { loader: (route: RouteLocationNormalizedLoaded) => P, options?: DefineLoaderOptions, ): DataLoader, isLazy> - export function defineLoader< + export function _defineLoader< P extends Promise, isLazy extends boolean = false, >( diff --git a/src/index.ts b/src/index.ts index 6b2cf0155..39f5b04fd 100644 --- a/src/index.ts +++ b/src/index.ts @@ -144,11 +144,33 @@ export type { DataLoader, } from './data-fetching/defineLoader' -// TODO: just export the object with vue-router/auto -export const VueRouterExports = [ - 'useRoute', - 'useRouter', - 'defineLoader', - // ['_defineLoader', 'defineLoader'], +export { DefinePage } from './data-fetching/transform' + +/** + * @deprecated use `VueRouterAutoImports` instead + */ +export const VueRouterExports = ['useRoute', 'useRouter'] + +/** + * @deprecated use `VueRouterAutoImports` instead + */ +export const RuntimeExports: [string, string][] = [ + ['_defineLoader', 'defineLoader'], + ['_definePage', 'definePage'], ] -export const RuntimeExports = [['_defineLoader', 'defineLoader']] + +/** + * Adds useful auto imports to the AutoImport config: + * @example + * ```js + * import { VueRouterAutoImports } from 'unplugin-vue-router' + * + * AutoImport({ + * imports: [VueRouterAutoImports], + * }), + * ``` + */ +export const VueRouterAutoImports = { + 'vue-router/auto': VueRouterExports, + 'unplugin-vue-router/runtime': RuntimeExports, +} diff --git a/src/options.ts b/src/options.ts index 1ee767d74..b5a087255 100644 --- a/src/options.ts +++ b/src/options.ts @@ -31,7 +31,7 @@ export interface ResolvedOptions { getRouteName: (node: TreeNode) => string /** - * EXPERIMENTAL: add the data fetching meta properties to generated routes. + * @deprecated: MUST be `false`. See https://github.com/posva/unplugin-vue-router/tree/main/src/data-fetching */ dataFetching: boolean diff --git a/src/runtime.ts b/src/runtime.ts index 6202777ac..69a126fe1 100644 --- a/src/runtime.ts +++ b/src/runtime.ts @@ -1,3 +1,5 @@ +import type { RouteRecordRaw } from 'vue-router' + export { defineLoader as _defineLoader } from './data-fetching/defineLoader' export type { DefineLoaderOptions, @@ -8,3 +10,7 @@ export { LoaderSymbol as _LoaderSymbol, } from './data-fetching/dataFetchingGuard' export { stopScope as _stopScope } from './data-fetching/dataCache' + +export function _definePage( + route: Partial> +) {}