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

@@ -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']
 }

playground/typed-router.d.ts

@@ -107,8 +107,15 @@ declare module 'vue-router/auto' {
 
   export function onBeforeRouteLeave(guard: NavigationGuard<RouteNamedMap>): void
   export function onBeforeRouteUpdate(guard: NavigationGuard<RouteNamedMap>): 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<any>,
     Name extends keyof RouteNamedMap = keyof RouteNamedMap,
     isLazy extends boolean = false,
@@ -117,7 +124,7 @@ declare module 'vue-router/auto' {
     loader: (route: RouteLocationNormalizedLoaded<Name>) => P,
     options?: DefineLoaderOptions<isLazy>,
   ): DataLoader<Awaited<P>, isLazy>
-  export function defineLoader<
+  export function _defineLoader<
     P extends Promise<any>,
     isLazy extends boolean = false,
   >(

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(),
   ],

src/codegen/generateDTS.ts

@@ -87,8 +87,15 @@ declare module '${vueRouterModule}' {
 
   export function onBeforeRouteLeave(guard: NavigationGuard<RouteNamedMap>): void
   export function onBeforeRouteUpdate(guard: NavigationGuard<RouteNamedMap>): 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<any>,
     Name extends keyof RouteNamedMap = keyof RouteNamedMap,
     isLazy extends boolean = false,
@@ -97,7 +104,7 @@ declare module '${vueRouterModule}' {
     loader: (route: RouteLocationNormalizedLoaded<Name>) => P,
     options?: DefineLoaderOptions<isLazy>,
   ): DataLoader<Awaited<P>, isLazy>
-  export function defineLoader<
+  export function _defineLoader<
     P extends Promise<any>,
     isLazy extends boolean = false,
   >(

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,
+}

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
 

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<Omit<RouteRecordRaw, 'children' | 'components' | 'component'>>
+) {}