refactor: import from data-loaders instead of runtime

Author: posva

client.d.ts

@@ -33,17 +33,21 @@ declare module 'vue-router' {
   }
 }
 
+// FIXME: remove vue-router/auto in next major
+
+/**
+ * @deprecated Directly import from 'vue-router' instead
+ */
 declare module 'vue-router/auto' {
   // reexport all types that are not augmented by unplugin-vue-router
   export * from 'vue-router'
 
-  // TODO: deprecate vue-router/auto
+  export { definePage } from 'unplugin-vue-router/runtime'
+  // Experimental Data Fetching
   export {
-    // Experimental Data Fetching
-    definePage,
     DataLoaderPlugin,
     NavigationResult,
-  } from 'unplugin-vue-router/runtime'
+  } from 'unplugin-vue-router/data-loaders'
   // must be added to the virtual vue-router/auto
   // FIXME: is there a way to achieve this without losing the types?
   // export { defineBasicLoader } from 'unplugin-vue-router/data-loaders/basic'

examples/nuxt/nuxt.config.ts

@@ -4,7 +4,9 @@ export default defineNuxtConfig({
     shim: false,
   },
 
-  build: { transpile: [/unplugin-vue-router\/runtime/] },
+  build: {
+    transpile: [/unplugin-vue-router\/runtime/],
+  },
 
   app: {
     pageTransition: false,

examples/nuxt/plugins/vueRouter.ts

@@ -1,4 +1,4 @@
-import { DataLoaderPlugin } from 'unplugin-vue-router/runtime'
+import { DataLoaderPlugin } from 'unplugin-vue-router/data-loaders'
 
 export default defineNuxtPlugin((nuxtApp) => {
   // TODO:

src/data-loaders/defineColadaLoader.spec.ts

@@ -18,7 +18,7 @@ import {
   getCurrentContext,
   setCurrentContext,
   UseDataLoader,
-} from 'unplugin-vue-router/runtime'
+} from 'unplugin-vue-router/data-loaders'
 import { testDefineLoader } from '../../tests/data-loaders'
 import { getRouter } from 'vue-router-mock'
 import { enableAutoUnmount, mount } from '@vue/test-utils'

src/data-loaders/defineColadaLoader.ts

@@ -6,17 +6,15 @@ import {
   type RouteLocationNormalizedLoaded,
   type Router,
 } from 'vue-router'
-import type {
-  DataLoaderContextBase,
-  DataLoaderEntryBase,
-  DefineDataLoaderOptionsBase,
-  DefineLoaderFn,
-  UseDataLoader,
-  UseDataLoaderResult,
-  _DefineLoaderEntryMap,
-  _PromiseMerged,
-} from 'unplugin-vue-router/runtime'
 import {
+  type DataLoaderContextBase,
+  type DataLoaderEntryBase,
+  type DefineDataLoaderOptionsBase,
+  type DefineLoaderFn,
+  type UseDataLoader,
+  type UseDataLoaderResult,
+  type _DefineLoaderEntryMap,
+  type _PromiseMerged,
   ABORT_CONTROLLER_KEY,
   APP_KEY,
   IS_USE_DATA_LOADER_KEY,
@@ -31,7 +29,7 @@ import {
   setCurrentContext,
   trackRoute,
   IS_SSR_KEY,
-} from 'unplugin-vue-router/runtime'
+} from 'unplugin-vue-router/data-loaders'
 import {} from './utils'
 import { type ShallowRef, shallowRef, watch } from 'vue'
 import {

src/data-loaders/defineLoader.spec.ts

@@ -23,13 +23,13 @@ import {
   NavigationResult,
   UseDataLoader,
   setCurrentContext,
-} from 'unplugin-vue-router/runtime'
+} from 'unplugin-vue-router/data-loaders'
 import { testDefineLoader } from '../../tests/data-loaders'
 import { getRouter } from 'vue-router-mock'
 import { enableAutoUnmount, mount } from '@vue/test-utils'
 import RouterViewMock from '../../tests/data-loaders/RouterViewMock.vue'
 import { mockPromise } from '../../tests/utils'
-import { RouteLocationNormalizedLoaded } from 'vue-router'
+import { type RouteLocationNormalizedLoaded } from 'vue-router'
 
 function mockedLoader<T = string | NavigationResult>(
   // boolean is easier to handle for router mock

src/data-loaders/defineLoader.test-d.ts

@@ -1,7 +1,7 @@
 import { describe, it, expectTypeOf } from 'vitest'
 import { defineBasicLoader } from './defineLoader'
 import { Ref } from 'vue'
-import { NavigationResult } from 'unplugin-vue-router/runtime'
+import { NavigationResult } from 'unplugin-vue-router/data-loaders'
 
 describe('defineBasicLoader', () => {
   interface UserData {

src/data-loaders/defineLoader.ts

@@ -5,15 +5,13 @@ import {
   useRouter,
   type Router,
 } from 'vue-router'
-import type {
-  DataLoaderContextBase,
-  DataLoaderEntryBase,
-  DefineDataLoaderOptionsBase,
-  DefineLoaderFn,
-  UseDataLoader,
-  UseDataLoaderResult,
-} from 'unplugin-vue-router/runtime'
 import {
+  type DataLoaderContextBase,
+  type DataLoaderEntryBase,
+  type DefineDataLoaderOptionsBase,
+  type DefineLoaderFn,
+  type UseDataLoader,
+  type UseDataLoaderResult,
   ABORT_CONTROLLER_KEY,
   APP_KEY,
   IS_USE_DATA_LOADER_KEY,
@@ -25,7 +23,7 @@ import {
   getCurrentContext,
   setCurrentContext,
   IS_SSR_KEY,
-} from 'unplugin-vue-router/runtime'
+} from 'unplugin-vue-router/data-loaders'
 
 import { shallowRef } from 'vue'
 import { toLazyValue } from './createDataLoader'

src/data-loaders/defineQueryLoader.spec.ts

@@ -9,7 +9,7 @@ import { afterEach, beforeEach, describe, expect, it } from 'vitest'
 import {
   NavigationResult,
   setCurrentContext,
-} from 'unplugin-vue-router/runtime'
+} from 'unplugin-vue-router/data-loaders'
 import { testDefineLoader } from '../../tests/data-loaders'
 import { enableAutoUnmount } from '@vue/test-utils'
 

src/data-loaders/defineVueFireLoader.ts

@@ -20,7 +20,7 @@ import {
   IS_USE_DATA_LOADER_KEY,
   LOADER_ENTRIES_KEY,
   STAGED_NO_VALUE,
-} from 'unplugin-vue-router/runtime'
+} from 'unplugin-vue-router/data-loaders'
 import { Ref, UnwrapRef, ref, shallowRef } from 'vue'
 
 export function defineVueFireLoader<

src/data-loaders/entries/index.ts

@@ -1,10 +1,31 @@
-export {
-  DataLoaderPlugin,
-  NavigationResult,
-  withLoaderContext,
-} from 'unplugin-vue-router/runtime'
+export type {
+  UseDataLoader,
+  UseDataLoaderInternals,
+  UseDataLoaderResult,
+  DataLoaderContextBase,
+  DataLoaderEntryBase,
+  DefineDataLoaderOptionsBase,
+  DefineLoaderFn,
+} from '../createDataLoader'
+
+// new data fetching
+export { DataLoaderPlugin, NavigationResult } from '../navigation-guard'
 export type {
   DataLoaderPluginOptions,
   SetupLoaderGuardOptions,
   _DataLoaderRedirectResult,
-} from 'unplugin-vue-router/runtime'
+} from '../navigation-guard'
+
+export {
+  getCurrentContext,
+  setCurrentContext,
+  type _PromiseMerged,
+  assign,
+  isSubsetOf,
+  trackRoute,
+  withLoaderContext,
+  currentContext,
+} from '../utils'
+
+// expose all symbols that could be use by loaders
+export * from '../meta-extensions'

src/data-loaders/index.ts

@@ -42,8 +42,16 @@ declare module 'vue-router' {
      */
     [PENDING_LOCATION_KEY]: RouteLocationNormalizedLoaded | null
 
+    /**
+     * The app instance that is used by the router.
+     * @internal
+     */
     [APP_KEY]: App<unknown>
 
+    /**
+     * Whether the router is running in server-side rendering mode.
+     * @internal
+     */
     [IS_SSR_KEY]: boolean
   }
 

src/data-loaders/meta-extensions.ts

@@ -20,7 +20,7 @@ import {
   DataLoaderPlugin,
   NavigationResult,
   DataLoaderPluginOptions,
-} from 'unplugin-vue-router/runtime'
+} from 'unplugin-vue-router/data-loaders'
 import { mockPromise } from '../../tests/utils'
 import {
   useDataOne,

src/data-loaders/navigation-guard.spec.ts

@@ -1,7 +1,7 @@
 import type { RouteRecordRaw } from 'vue-router'
 
 // new data fetching
-export * from './data-loaders'
+export * from './data-loaders/entries/index'
 
 // NOTE: for tests only
 // export * from './data-loaders/defineQueryLoader'

src/runtime.ts

@@ -13,8 +13,7 @@ import {
   type DataLoaderContextBase,
   type DefineDataLoaderOptionsBase,
   type UseDataLoader,
-  // TODO: move to /data-loaders
-} from 'unplugin-vue-router/runtime'
+} from 'unplugin-vue-router/data-loaders'
 import { mockPromise } from '../utils'
 import RouterViewMock from '../data-loaders/RouterViewMock.vue'
 import ComponentWithNestedLoader from '../data-loaders/ComponentWithNestedLoader.vue'

tests/data-loaders/tester.ts

@@ -51,9 +51,9 @@
       "unplugin-vue-router/runtime": [
         "./src/runtime.ts"
       ],
-      // "unplugin-vue-router/data-loaders": [
-      //   "./src/data-loaders/entries/index.ts"
-      // ]
+      "unplugin-vue-router/data-loaders": [
+        "./src/data-loaders/entries/index.ts"
+      ]
     },
     "types": [
       "node",

tsconfig.json

@@ -8,7 +8,15 @@ export default defineConfig({
     alias: [
       {
         find: 'unplugin-vue-router/runtime',
-        replacement: fileURLToPath(new URL('src/runtime.ts', import.meta.url)),
+        replacement: fileURLToPath(
+          new URL('./src/runtime.ts', import.meta.url)
+        ),
+      },
+      {
+        find: 'unplugin-vue-router/data-loaders',
+        replacement: fileURLToPath(
+          new URL('./src/data-loaders/entries/index.ts', import.meta.url)
+        ),
       },
     ],
   },