From 8094f62f5871988611d82e857867064b2d959189 Mon Sep 17 00:00:00 2001
From: Eduardo San Martin Morote <posva13@gmail.com>
Date: Wed, 14 Feb 2024 16:39:23 +0100
Subject: [PATCH] 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 })
```
---
 client.d.ts                                   |  3 +--
 docs/rfcs/data-loaders/index.md               | 12 ++++--------
 examples/nuxt/pages/users/[id].vue            |  2 +-
 src/codegen/vueRouterModule.ts                |  3 +--
 src/data-fetching_new/meta-extensions.spec.ts |  2 ++
 src/index.ts                                  | 13 ++-----------
 src/runtime.ts                                |  2 --
 7 files changed, 11 insertions(+), 26 deletions(-)

diff --git a/client.d.ts b/client.d.ts
index b7454c087..ddd598054 100644
--- 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
index 53b933a7f..f4e99e53f 100644
--- 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
index ee04847ae..474a61ee0 100644
--- 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
index bd4dc4692..1666bb8dd 100644
--- 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
index 0790bfd82..35b39c942 100644
--- 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
index 0c1e17a8c..982a2650e 100644
--- 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
index 8a8b2e159..b923efc0c 100644
--- 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'