refactor!: remove setupLoaderGuard

BREAKING CHANGE: The navigation guard is replaced in favor of a Vue plugin: Replace ```ts import { setupLoaderGuard } from 'vue-router/auto' setupLoaderGuard({ router, app }) ``` with ```ts import { DataLoaderPlugin } from 'vue-router/auto' app.use(DataLoaderPlugin, { router }) ```
posva · Feb 14, 2024 · 8094f62 · 8094f62
1 parent e043cba
commit 8094f62
Show file tree

Hide file tree

Showing 7 changed files with 11 additions and 26 deletions.
diff --git a/client.d.ts b/client.d.ts
@@ -105,8 +105,7 @@ declare module 'vue-router/auto' {
   export {
     definePage,
     DataLoaderPlugin,
-    _setupLoaderGuard as setupLoaderGuard,
-    _defineBasicLoader as defineBasicLoader,
+    defineBasicLoader,
     // FIXME: remove these in next major
     _HasDataLoaderMeta as HasDataLoaderMeta,
     _setupDataFetchingGuard as setupDataFetchingGuard,

diff --git a/docs/rfcs/data-loaders/index.md b/docs/rfcs/data-loaders/index.md
@@ -129,7 +129,7 @@ By default, **data loaders block the navigation**, meaning they _just work_ with
 The simplest of data loaders can be defined in just one line and types will be automatically inferred:
 
 ```ts twoslash
-import { _defineBasicLoader as defineLoader } from 'unplugin-vue-router/runtime'
+import { defineBasicLoader as defineLoader } from 'unplugin-vue-router/runtime'
 interface Book {
   title: string
   isbn: string
@@ -227,19 +227,15 @@ const app = createApp(App)
 app.use(DataLoaderPlugin, { router })
 ```
 
-### `setupLoaderGuard()`
+### The Plugin
 
-`setupLoaderGuard()` setups a navigation guard that handles all the loaders. It has a few options
-
-#### `app`
-
-The Vue app instance created with `createApp()`
+`DataLoaderPlugin` adds the navigation guard that handles the data loaders. It requires access to the router instance to attach the navigation guard as wel as some other options
 
 #### `router`
 
 The Vue Router instance.
 
-#### `selectNavigationResult`
+#### `selectNavigationResult` (optional)
 
 Called wih an array of `NavigationResult` returned by loaders. It allows to decide the _fate_ of the navigation.
 

diff --git a/examples/nuxt/pages/users/[id].vue b/examples/nuxt/pages/users/[id].vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-// import { _defineBasicLoader as defineBasicLoader } from 'unplugin-vue-router/runtime'
+import { defineBasicLoader } from 'unplugin-vue-router/runtime'
 const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))
 
 export const useUserData = defineBasicLoader(

diff --git a/src/codegen/vueRouterModule.ts b/src/codegen/vueRouterModule.ts
@@ -18,12 +18,11 @@ export {
   _setupDataFetchingGuard as setupDataFetchingGuard,
   _stopDataFetchingScope as stopDataFetchingScope,
 
-  defineBasicLoader,
   definePage,
 
   // new data fetching
-  _setupLoaderGuard as setupLoaderGuard,
   DataLoaderPlugin,
+  defineBasicLoader,
 } from 'unplugin-vue-router/runtime'
 
 export function createRouter(options) {

diff --git a/src/data-fetching_new/meta-extensions.spec.ts b/src/data-fetching_new/meta-extensions.spec.ts
@@ -3,6 +3,8 @@ import { defineComponent } from 'vue'
 import { createRouter, createMemoryHistory } from 'vue-router'
 import { defineBasicLoader } from './defineLoader'
 
+// TODO: transform into a test-d file
+
 describe('meta-extensions', () => {
   it('has tds', () => {})
 })

diff --git a/src/index.ts b/src/index.ts
@@ -150,15 +150,7 @@ export { EditableTreeNode } from './core/extendRoutes'
  */
 export const VueRouterExports: Array<
   string | [importName: string, alias: string]
-> = [
-  'useRoute',
-  'useRouter',
-  'defineBasicLoader',
-  'onBeforeRouteUpdate',
-  'onBeforeRouteLeave',
-  // NOTE: the typing seems broken locally, so instead we export it directly from unplugin-vue-router/runtime
-  // 'definePage',
-]
+> = ['useRoute', 'useRouter', 'onBeforeRouteUpdate', 'onBeforeRouteLeave']
 
 /**
  * Adds useful auto imports to the AutoImport config:
@@ -178,14 +170,13 @@ export const VueRouterAutoImports: Record<
   'vue-router/auto': [
     'useRoute',
     'useRouter',
-    'defineBasicLoader',
     'onBeforeRouteUpdate',
     'onBeforeRouteLeave',
     // NOTE: the typing seems broken locally, so instead we export it directly from unplugin-vue-router/runtime
     // 'definePage',
   ],
   'unplugin-vue-router/runtime': [
-    ['definePage', 'definePage'],
+    'definePage',
     // FIXME: remove after deprecation
     ['_defineLoader', 'defineLoader'],
   ],

diff --git a/src/runtime.ts b/src/runtime.ts
@@ -16,8 +16,6 @@ export { stopScope as _stopDataFetchingScope } from './data-fetching/dataCache'
 // new data fetching
 export { defineBasicLoader } from './data-fetching_new/defineLoader'
 export {
-  // TODO: remove in favor of the plugin
-  setupLoaderGuard as _setupLoaderGuard,
   DataLoaderPlugin,
   NavigationResult,
 } from './data-fetching_new/navigation-guard'