refactor: expose plugin and rework defineLoader types

playground/src/main.ts

@@ -1,11 +1,7 @@
 import { createApp } from 'vue'
 import App from './App.vue'
-import {
-  createWebHistory,
-  createRouter,
-  setupDataFetchingGuard,
-  setupLoaderGuard,
-} from 'vue-router/auto'
+import { createWebHistory, createRouter } from 'vue-router/auto'
+import { DataLoaderPlugin } from 'unplugin-vue-router/runtime'
 
 const router = createRouter({
   history: createWebHistory(),
@@ -15,11 +11,9 @@ const router = createRouter({
   },
 })
 
-// setupDataFetchingGuard(router)
-setupLoaderGuard(router)
-
 const app = createApp(App)
 
+app.use(DataLoaderPlugin, { router })
 app.use(router)
 
 app.mount('#app')

playground/tsconfig.json

@@ -12,7 +12,13 @@
     "paths": {
       "@/*": [
         "./src/*"
-      ]
+      ],
+      "unplugin-vue-router/runtime": [
+        "../src/runtime"
+      ],
+      "unplugin-vue-router/types": [
+        "../src/types"
+      ],
     }
   },
   "vueCompilerOptions": {

playground/typed-router.d.ts

@@ -33,8 +33,9 @@ import type {
   UseLinkFnTyped,
 
   // data fetching
-  _DataLoader,
-  _DefineLoaderOptions,
+  _DefineLoaderFn,
+  _DefineDataLoaderOptions,
+  _UseDataLoader,
 } from 'unplugin-vue-router/types'
 
 declare module 'vue-router/auto/routes' {
@@ -135,29 +136,32 @@ declare module 'vue-router/auto' {
   // Experimental Data Fetching
 
   export function defineLoader<
-    P extends Promise<any>,
-    Name extends keyof RouteNamedMap = keyof RouteNamedMap,
+    P extends Promise<unknown>,
     isLazy extends boolean = false,
+    Name extends keyof RouteNamedMap = keyof RouteNamedMap
   >(
     name: Name,
-    loader: (route: RouteLocationNormalizedLoaded<Name>) => P,
-    options?: _DefineLoaderOptions<isLazy>,
-  ): _DataLoader<Awaited<P>, isLazy>
+    loader: _DefineLoaderFn<P, RouteLocationNormalizedLoaded<Name>>,
+    options?: _DefineDataLoaderOptions<isLazy>
+  ): _UseDataLoader<isLazy, Awaited<P>>
   export function defineLoader<
-    P extends Promise<any>,
-    isLazy extends boolean = false,
+    P extends Promise<unknown>,
+    isLazy extends boolean = false
   >(
-    loader: (route: RouteLocationNormalizedLoaded) => P,
-    options?: _DefineLoaderOptions<isLazy>,
-  ): _DataLoader<Awaited<P>, isLazy>
+    loader: _DefineLoaderFn<P, RouteLocationNormalizedLoaded<Name>>,
+    options?: _DefineDataLoaderOptions<isLazy>
+  ): _UseDataLoader<isLazy, Awaited<P>>
 
   export {
     _definePage as definePage,
+
+    DataLoaderPlugin,
+    _setupLoaderGuard as setupLoaderGuard,
+
+    // TODO: remove these
     _HasDataLoaderMeta as HasDataLoaderMeta,
     _setupDataFetchingGuard as setupDataFetchingGuard,
     _stopDataFetchingScope as stopDataFetchingScope,
-
-    _setupLoaderGuard as setupLoaderGuard,
   } from 'unplugin-vue-router/runtime'
 }
 

playground/vite.config.ts

@@ -127,6 +127,9 @@ export default defineConfig({
       'unplugin-vue-router/runtime': fileURLToPath(
         new URL('../src/runtime.ts', import.meta.url)
       ),
+      'unplugin-vue-router/types': fileURLToPath(
+        new URL('../src/types.ts', import.meta.url)
+      ),
     },
   },
 })

src/codegen/generateDTS.ts

@@ -42,8 +42,9 @@ import type {
   UseLinkFnTyped,
 
   // data fetching
-  _DataLoader,
-  _DefineLoaderOptions,
+  _DefineLoaderFn,
+  _DefineDataLoaderOptions,
+  _UseDataLoader,
 } from 'unplugin-vue-router/types'
 
 declare module '${routesModule}' {
@@ -109,36 +110,32 @@ declare module '${vueRouterModule}' {
   // Experimental Data Fetching
 
   export function defineLoader<
-    P extends Promise<any>,
-    Name extends keyof RouteNamedMap = keyof RouteNamedMap,
+    P extends Promise<unknown>,
     isLazy extends boolean = false,
+    Name extends keyof RouteNamedMap = keyof RouteNamedMap
   >(
     name: Name,
-    loader: (route: RouteLocationNormalizedLoaded<Name>) => P,
-    options?: _DefineLoaderOptions<isLazy>,
-  ): _DataLoader<Awaited<P>, isLazy>
+    loader: _DefineLoaderFn<P, RouteLocationNormalizedLoaded<Name>>,
+    options?: _DefineDataLoaderOptions<isLazy>
+  ): _UseDataLoader<isLazy, Awaited<P>>
   export function defineLoader<
-    P extends Promise<any>,
-    isLazy extends boolean = false,
+    P extends Promise<unknown>,
+    isLazy extends boolean = false
   >(
-    loader: (route: RouteLocationNormalizedLoaded) => P,
-    options?: _DefineLoaderOptions<isLazy>,
-  ): _DataLoader<Awaited<P>, isLazy>
+    loader: _DefineLoaderFn<P, RouteLocationNormalizedLoaded<Name>>,
+    options?: _DefineDataLoaderOptions<isLazy>
+  ): _UseDataLoader<isLazy, Awaited<P>>
 
   export {
     _definePage as definePage,
 
-    // Experimental Data Fetching
-    // TODO: override to have the type to have named routes
-    _defineLoader as defineLoader,
+    DataLoaderPlugin,
     _setupLoaderGuard as setupLoaderGuard,
 
     // TODO: remove these
     _HasDataLoaderMeta as HasDataLoaderMeta,
     _setupDataFetchingGuard as setupDataFetchingGuard,
     _stopDataFetchingScope as stopDataFetchingScope,
-
-    _setupLoaderGuard as setupLoaderGuard,
   } from 'unplugin-vue-router/runtime'
 }
 

src/data-fetching_new/createDataLoader.ts

@@ -317,7 +317,10 @@ type A = UseDataLoaderResult<boolean, string>['data']
 /**
  * Loader function that can be passed to `defineLoader()`.
  */
-export interface DefineLoaderFn<Data> {
+export interface DefineLoaderFn<
+  P extends Promise<unknown>,
+  Route = RouteLocationNormalizedLoaded
+> {
   // TODO: context variable?
-  (route: RouteLocationNormalizedLoaded): Promise<Awaited<Data>>
+  (route: Route): P
 }

src/data-fetching_new/navigation-guard.ts

@@ -190,6 +190,27 @@ export function isAsyncModule(
   )
 }
 
+/**
+ * Data Loader plugin to add data loading support to Vue Router.
+ *
+ * @example
+ * ```ts
+ * import { createApp } from 'vue'
+ * import {
+ *   createRouter,
+ *   DataLoaderPlugin,
+ *   createWebHistory,
+ * } from 'vue-router/auto'
+ *
+ * const router = createRouter({
+ *   history: createWebHistory(),
+ * })
+ *
+ * const app = createApp({})
+ * app.use(DataLoaderPlugin, { router })
+ * app.use(router)
+ * ```
+ */
 export function DataLoaderPlugin(
   app: App,
   { router }: DataLoaderPluginOptions

src/types.ts

@@ -49,6 +49,10 @@ export type {
 
 // expose for generated type extensions
 export type {
-  DefineLoaderOptions as _DefineLoaderOptions,
-  DataLoader as _DataLoader,
-} from './data-fetching/defineLoader'
+  DefineLoaderFn as _DefineLoaderFn,
+  UseDataLoader as _UseDataLoader,
+} from './data-fetching_new/createDataLoader'
+export type {
+  // ...
+  DefineDataLoaderOptions as _DefineDataLoaderOptions,
+} from './data-fetching_new/defineLoader'