From 16af8317b61dbd56dde7b5f5308269f4a033ec6c Mon Sep 17 00:00:00 2001
From: Eduardo San Martin Morote <posva13@gmail.com>
Date: Wed, 14 Aug 2024 15:02:01 +0200
Subject: [PATCH] feat: experimental auto export of data loaders

---
 package.json                                  |   1 +
 playground/src/loaders/colada-loaders.ts      |  37 +++
 playground/src/loaders/todos.ts               |   0
 .../src/pages/users/colada-loader.[id].vue    |  44 +---
 playground/vite.config.ts                     |   1 +
 pnpm-lock.yaml                                |  17 +-
 src/data-loaders/auto-exports.ts              |  64 ++++++
 src/data-loaders/navigation-guard.ts          |   7 +
 src/index.ts                                  | 216 +++++++++---------
 src/options.ts                                |  14 ++
 10 files changed, 242 insertions(+), 159 deletions(-)
 create mode 100644 playground/src/loaders/colada-loaders.ts
 create mode 100644 playground/src/loaders/todos.ts
 create mode 100644 src/data-loaders/auto-exports.ts

diff --git a/package.json b/package.json
index 8d91b2662..fb777287c 100644
--- a/package.json
+++ b/package.json
@@ -172,6 +172,7 @@
     "fast-glob": "^3.3.2",
     "json5": "^2.2.3",
     "local-pkg": "^0.5.0",
+    "magic-string": "^0.30.11",
     "mlly": "^1.7.1",
     "pathe": "^1.1.2",
     "scule": "^1.3.0",
diff --git a/playground/src/loaders/colada-loaders.ts b/playground/src/loaders/colada-loaders.ts
new file mode 100644
index 000000000..8c133f10e
--- /dev/null
+++ b/playground/src/loaders/colada-loaders.ts
@@ -0,0 +1,37 @@
+import { defineColadaLoader } from 'unplugin-vue-router/data-loaders/pinia-colada'
+import { ref } from 'vue'
+
+const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))
+export const simulateError = ref(false)
+
+export const useUserData = defineColadaLoader('/users/colada-loader.[id]', {
+  async query(to, { signal }) {
+    console.log('[🍹] coladaLoader', to.fullPath)
+    // signal.addEventListener('abort', () => {
+    //   console.log('[🍹❌] aborted', to.fullPath)
+    // })
+    // we need to read these before the delay
+    const id = to.params.id
+    // @ts-expect-error: no param "name"!
+    const name = to.params.name
+
+    await delay(500)
+    if (simulateError.value) {
+      throw new Error('Simulated Error')
+    }
+
+    const user = {
+      id,
+      name,
+      when: new Date().toUTCString(),
+    }
+
+    return user
+  },
+  key: (to) => {
+    // console.log('[🍹] key', to.fullPath)
+    return ['loader-users', to.params.id]
+  },
+  staleTime: 10000,
+  // lazy: (to, from) => to.name && to.name === from?.name,
+})
diff --git a/playground/src/loaders/todos.ts b/playground/src/loaders/todos.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/playground/src/pages/users/colada-loader.[id].vue b/playground/src/pages/users/colada-loader.[id].vue
index 4b25ca8c5..8f34a056d 100644
--- a/playground/src/pages/users/colada-loader.[id].vue
+++ b/playground/src/pages/users/colada-loader.[id].vue
@@ -1,47 +1,5 @@
-<script lang="ts">
-import { defineColadaLoader } from 'unplugin-vue-router/data-loaders/pinia-colada'
-
-const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))
-
-const simulateError = ref(false)
-
-// th
-
-export const useUserData = defineColadaLoader('/users/colada-loader.[id]', {
-  async query(to, { signal }) {
-    console.log('[🍹] coladaLoader', to.fullPath)
-    // signal.addEventListener('abort', () => {
-    //   console.log('[🍹❌] aborted', to.fullPath)
-    // })
-    // we need to read these before the delay
-    const id = to.params.id
-    // @ts-expect-error: no param "name"!
-    const name = to.params.name
-
-    await delay(500)
-    if (simulateError.value) {
-      throw new Error('Simulated Error')
-    }
-
-    const user = {
-      id,
-      name,
-      when: new Date().toUTCString(),
-    }
-
-    return user
-  },
-  key: (to) => {
-    // console.log('[🍹] key', to.fullPath)
-    return ['loader-users', to.params.id]
-  },
-  staleTime: 10000,
-  lazy: (to, from) => to.name && to.name === from.name,
-})
-</script>
-
 <script lang="ts" setup>
-import { computed, ref } from 'vue'
+import { simulateError, useUserData } from '@/loaders/colada-loaders'
 import { serialize } from '@pinia/colada'
 import { getActivePinia } from 'pinia'
 
diff --git a/playground/vite.config.ts b/playground/vite.config.ts
index 976435fcb..d102949ac 100644
--- a/playground/vite.config.ts
+++ b/playground/vite.config.ts
@@ -30,6 +30,7 @@ export default defineConfig({
     VueRouter({
       extensions: ['.page.vue', '.vue'],
       importMode: 'async',
+      experimental: { autoExportsDataLoaders: true },
       extendRoute(route) {
         route.params.forEach((param, i) => {
           // transform kebab-case to camelCase
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 87520b65c..4f63d6802 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -32,6 +32,9 @@ importers:
       local-pkg:
         specifier: ^0.5.0
         version: 0.5.0
+      magic-string:
+        specifier: ^0.30.11
+        version: 0.30.11
       mlly:
         specifier: ^1.7.1
         version: 1.7.1
@@ -1172,9 +1175,6 @@ packages:
   '@jridgewell/source-map@0.3.6':
     resolution: {integrity: sha512-1ZJTZebgqllO79ue2bm3rIGud/bOe0pP5BjSRCRxxYkEZS8STV7zN84UBbiYu7jy+eCKSnVIUgoWWE/tt+shMQ==}
 
-  '@jridgewell/sourcemap-codec@1.4.15':
-    resolution: {integrity: sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==}
-
   '@jridgewell/sourcemap-codec@1.5.0':
     resolution: {integrity: sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==}
 
@@ -3836,9 +3836,6 @@ packages:
     resolution: {integrity: sha512-oN3Bcd7ZVt+0VGEs7402qR/tjgjbM7kPlH/z7ufJnzTLVBzXJITRHOJiwMmmYMgZfdoWQsfQcY+iKlxiBppnMA==}
     engines: {node: '>=16.14.0'}
 
-  magic-string@0.30.10:
-    resolution: {integrity: sha512-iIRwTIf0QKV3UAnYK4PU8uiEc4SRh5jX0mwpIwETPpHdhVM4f53RSwS/vXvN1JhGX+Cs7B8qIq3d6AH49O5fAQ==}
-
   magic-string@0.30.11:
     resolution: {integrity: sha512-+Wri9p0QHMy+545hKww7YAu5NyzF8iomPL/RQazugQ9+Ez4Ic3mERMd8ZTX5rfK944j+560ZJi8iAwgak1Ac7A==}
 
@@ -6929,8 +6926,6 @@ snapshots:
       '@jridgewell/gen-mapping': 0.3.5
       '@jridgewell/trace-mapping': 0.3.25
 
-  '@jridgewell/sourcemap-codec@1.4.15': {}
-
   '@jridgewell/sourcemap-codec@1.5.0': {}
 
   '@jridgewell/trace-mapping@0.3.25':
@@ -10244,10 +10239,6 @@ snapshots:
     dependencies:
       magic-string: 0.30.11
 
-  magic-string@0.30.10:
-    dependencies:
-      '@jridgewell/sourcemap-codec': 1.4.15
-
   magic-string@0.30.11:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.0
@@ -10922,7 +10913,7 @@ snapshots:
       jiti: 1.21.6
       klona: 2.0.6
       knitwork: 1.1.0
-      magic-string: 0.30.10
+      magic-string: 0.30.11
       mlly: 1.7.1
       nitropack: 2.9.7(@opentelemetry/api@1.9.0)(encoding@0.1.13)(magicast@0.3.4)
       nuxi: 3.12.0
diff --git a/src/data-loaders/auto-exports.ts b/src/data-loaders/auto-exports.ts
new file mode 100644
index 000000000..749ecd46c
--- /dev/null
+++ b/src/data-loaders/auto-exports.ts
@@ -0,0 +1,64 @@
+import { createFilter } from '@rollup/pluginutils'
+import MagicString from 'magic-string'
+import { findStaticImports, parseStaticImport } from 'mlly'
+import { type UnpluginOptions } from 'unplugin'
+
+const ignoredSpecifiers = ['vue', 'vue-router', 'pinia']
+
+export function extractLoadersToExport(code: string): string[] {
+  const imports = findStaticImports(code)
+  const importNames = imports.flatMap((i) => {
+    const parsed = parseStaticImport(i)
+
+    // bail out faster for anything that is not a data loader
+    if (
+      // NOTE: move out to a regexp if the option is exposed
+      parsed.specifier.startsWith('@vueuse/') &&
+      ignoredSpecifiers.includes(parsed.specifier)
+    )
+      return []
+
+    return [
+      parsed.defaultImport,
+      ...Object.values(parsed.namedImports || {}),
+    ].filter((v): v is string => !!v && !v.startsWith('_'))
+  })
+
+  return importNames
+}
+
+export function createAutoExportPlugin(): UnpluginOptions {
+  const filterVueComponents = createFilter(
+    [/\.vue$/, /\.vue\?vue/, /\.vue\?v=/]
+    // [/[\\/]node_modules[\\/]/, /[\\/]\.git[\\/]/, /[\\/]\.nuxt[\\/]/]
+  )
+
+  return {
+    name: 'unplugin-vue-router:data-loaders-auto-export',
+    enforce: 'post',
+    vite: {
+      transform: {
+        order: 'post',
+        handler(code, id) {
+          if (!filterVueComponents(id)) {
+            return
+          }
+
+          const loadersToExports = extractLoadersToExport(code)
+
+          if (loadersToExports.length <= 0) return
+
+          const s = new MagicString(code)
+          s.append(
+            `\nexport const __loaders = [\n${loadersToExports.join(',\n')}\n];\n`
+          )
+
+          return {
+            code: s.toString(),
+            map: s.generateMap(),
+          }
+        },
+      },
+    },
+  }
+}
diff --git a/src/data-loaders/navigation-guard.ts b/src/data-loaders/navigation-guard.ts
index dac80565d..33545c97e 100644
--- a/src/data-loaders/navigation-guard.ts
+++ b/src/data-loaders/navigation-guard.ts
@@ -109,6 +109,13 @@ export function setupLoaderGuard({
                     record.meta[LOADER_SET_KEY]!.add(exportValue)
                   }
                 }
+                if (Array.isArray(viewModule.__loaders)) {
+                  for (const loader of viewModule.__loaders) {
+                    if (isDataLoader(loader)) {
+                      record.meta[LOADER_SET_KEY]!.add(loader)
+                    }
+                  }
+                }
               }
             )
 
diff --git a/src/index.ts b/src/index.ts
index 341f19cca..f3c033f13 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,4 +1,4 @@
-import { createUnplugin } from 'unplugin'
+import { createUnplugin, type UnpluginOptions } from 'unplugin'
 import { createRoutesContext } from './core/context'
 import {
   MODULE_ROUTES_PATH,
@@ -9,7 +9,6 @@ import {
   ROUTE_BLOCK_ID,
   ROUTES_LAST_LOAD_TIME,
 } from './core/moduleConstants'
-// TODO: export standalone createRoutesContext that resolves partial options
 import {
   Options,
   resolveOptions,
@@ -21,6 +20,7 @@ import { createFilter } from '@rollup/pluginutils'
 import { join } from 'pathe'
 import { appendExtensionListToPattern } from './core/utils'
 import { MACRO_DEFINE_PAGE_QUERY } from './core/definePage'
+import { createAutoExportPlugin } from './data-loaders/auto-exports'
 
 export * from './types'
 
@@ -60,129 +60,139 @@ export default createUnplugin<Options | undefined>((opt = {}, _meta) => {
     options.exclude
   )
 
-  return {
-    name: 'unplugin-vue-router',
-    enforce: 'pre',
+  const plugins: UnpluginOptions[] = [
+    {
+      name: 'unplugin-vue-router',
+      enforce: 'pre',
+
+      resolveId(id) {
+        if (
+          // vue-router/auto-routes
+          id === MODULE_ROUTES_PATH ||
+          // NOTE: it wasn't possible to override or add new exports to vue-router
+          // so we need to override it with a different package name
+          id === MODULE_VUE_ROUTER_AUTO
+        ) {
+          // virtual module
+          return asVirtualId(id)
+        }
 
-    resolveId(id) {
-      if (
-        // vue-router/auto-routes
-        id === MODULE_ROUTES_PATH ||
-        // NOTE: it wasn't possible to override or add new exports to vue-router
-        // so we need to override it with a different package name
-        id === MODULE_VUE_ROUTER_AUTO
-      ) {
-        // virtual module
-        return asVirtualId(id)
-      }
-
-      // this allows us to skip the route block module as a whole since we already parse it
-      if (routeBlockQueryRE.test(id)) {
-        return ROUTE_BLOCK_ID
-      }
-
-      // nothing to do, just for TS
-      return
-    },
+        // this allows us to skip the route block module as a whole since we already parse it
+        if (routeBlockQueryRE.test(id)) {
+          return ROUTE_BLOCK_ID
+        }
 
-    buildStart() {
-      return ctx.scanPages(options.watch)
-    },
+        // nothing to do, just for TS
+        return
+      },
 
-    buildEnd() {
-      ctx.stopWatcher()
-    },
+      buildStart() {
+        return ctx.scanPages(options.watch)
+      },
 
-    // we only need to transform page components
-    transformInclude(id) {
-      // console.log('filtering ' + id, filterPageComponents(id) ? '✅' : '❌')
-      return filterPageComponents(id)
-    },
+      buildEnd() {
+        ctx.stopWatcher()
+      },
 
-    transform(code, id) {
-      // console.log('👋  Transforming', id)
-      // remove the `definePage()` from the file or isolate it
-      return ctx.definePageTransform(code, id)
-    },
+      // we only need to transform page components
+      transformInclude(id) {
+        // console.log('filtering ' + id, filterPageComponents(id) ? '✅' : '❌')
+        return filterPageComponents(id)
+      },
 
-    // loadInclude is necessary for webpack
-    loadInclude(id) {
-      if (id === ROUTE_BLOCK_ID) return true
-      const resolvedId = getVirtualId(id)
-      return (
-        resolvedId === MODULE_ROUTES_PATH ||
-        resolvedId === MODULE_VUE_ROUTER_AUTO
-      )
-    },
+      transform(code, id) {
+        // console.log('👋  Transforming', id)
+        // remove the `definePage()` from the file or isolate it
+        return ctx.definePageTransform(code, id)
+      },
 
-    load(id) {
-      // remove the <route> block as it's parsed by the plugin
-      // stub it with an empty module
-      if (id === ROUTE_BLOCK_ID) {
-        return {
-          code: `export default {}`,
-          map: null,
-        }
-      }
+      // loadInclude is necessary for webpack
+      loadInclude(id) {
+        if (id === ROUTE_BLOCK_ID) return true
+        const resolvedId = getVirtualId(id)
+        return (
+          resolvedId === MODULE_ROUTES_PATH ||
+          resolvedId === MODULE_VUE_ROUTER_AUTO
+        )
+      },
 
-      // we need to use a virtual module so that vite resolves the vue-router/auto-routes
-      // dependency correctly
-      const resolvedId = getVirtualId(id)
+      load(id) {
+        // remove the <route> block as it's parsed by the plugin
+        // stub it with an empty module
+        if (id === ROUTE_BLOCK_ID) {
+          return {
+            code: `export default {}`,
+            map: null,
+          }
+        }
 
-      // vue-router/auto-routes
-      if (resolvedId === MODULE_ROUTES_PATH) {
-        ROUTES_LAST_LOAD_TIME.update()
-        return ctx.generateRoutes()
-      }
+        // we need to use a virtual module so that vite resolves the vue-router/auto-routes
+        // dependency correctly
+        const resolvedId = getVirtualId(id)
 
-      // vue-router/auto
-      if (resolvedId === MODULE_VUE_ROUTER_AUTO) {
-        return ctx.generateVueRouterProxy()
-      }
+        // vue-router/auto-routes
+        if (resolvedId === MODULE_ROUTES_PATH) {
+          ROUTES_LAST_LOAD_TIME.update()
+          return ctx.generateRoutes()
+        }
 
-      return // ok TS...
-    },
+        // vue-router/auto
+        if (resolvedId === MODULE_VUE_ROUTER_AUTO) {
+          return ctx.generateVueRouterProxy()
+        }
 
-    // improves DX
-    vite: {
-      configureServer(server) {
-        ctx.setServerContext(createViteContext(server))
+        return // ok TS...
       },
 
-      handleHotUpdate: {
-        order: 'post',
-        handler({ server, file, modules }) {
-          // console.log(`🔥 HMR ${file}`)
-          const moduleList = server.moduleGraph.getModulesByFile(file)
-          const definePageModule = Array.from(moduleList || []).find((mod) => {
-            return mod?.id && MACRO_DEFINE_PAGE_QUERY.test(mod.id)
-          })
-
-          if (definePageModule) {
-            // console.log(`Updating ${definePageModule.file}`)
-            const routesModule = server.moduleGraph.getModuleById(
-              asVirtualId(MODULE_ROUTES_PATH)
+      // improves DX
+      vite: {
+        configureServer(server) {
+          ctx.setServerContext(createViteContext(server))
+        },
+
+        handleHotUpdate: {
+          order: 'post',
+          handler({ server, file, modules }) {
+            // console.log(`🔥 HMR ${file}`)
+            const moduleList = server.moduleGraph.getModulesByFile(file)
+            const definePageModule = Array.from(moduleList || []).find(
+              (mod) => {
+                return mod?.id && MACRO_DEFINE_PAGE_QUERY.test(mod.id)
+              }
             )
 
-            if (!routesModule) {
-              console.error('🔥 HMR routes module not found')
-              return
+            if (definePageModule) {
+              // console.log(`Updating ${definePageModule.file}`)
+              const routesModule = server.moduleGraph.getModuleById(
+                asVirtualId(MODULE_ROUTES_PATH)
+              )
+
+              if (!routesModule) {
+                console.error('🔥 HMR routes module not found')
+                return
+              }
+
+              return [
+                ...modules,
+                // TODO: only if the definePage changed
+                definePageModule,
+                // TODO: only if ether the definePage or the route block changed
+                routesModule,
+              ]
             }
 
-            return [
-              ...modules,
-              // TODO: only if the definePage changed
-              definePageModule,
-              // TODO: only if ether the definePage or the route block changed
-              routesModule,
-            ]
-          }
-
-          return // for ts
+            return // for ts
+          },
         },
       },
     },
+  ]
+
+  if (options.experimental.autoExportsDataLoaders) {
+    plugins.push(createAutoExportPlugin())
   }
+
+  return plugins
 })
 
 export { createRoutesContext }
diff --git a/src/options.ts b/src/options.ts
index 624b72299..997bb1e08 100644
--- a/src/options.ts
+++ b/src/options.ts
@@ -209,6 +209,17 @@ export interface Options {
    * @default `!process.env.CI`
    */
   watch?: boolean
+
+  /**
+   * Experimental options. **Warning**: these can change or be removed at any time, even it patch releases. Keep an eye
+   * on the Changelog.
+   */
+  experimental?: {
+    /**
+     * Automatically export data loaders in vue components. This allows you to not
+     */
+    autoExportsDataLoaders?: boolean
+  }
 }
 
 export const DEFAULT_OPTIONS = {
@@ -227,6 +238,9 @@ export const DEFAULT_OPTIONS = {
     dotNesting: true,
   },
   watch: !process.env.CI,
+  experimental: {
+    autoExportsDataLoaders: false,
+  },
 } satisfies Options
 
 export interface ServerContext {