feat(loaders): change experimental option to match only specific folders

Author: posva

playground/vite.config.ts

@@ -30,7 +30,9 @@ export default defineConfig({
     VueRouter({
       extensions: ['.page.vue', '.vue'],
       importMode: 'async',
-      experimental: { autoExportsDataLoaders: true },
+      experimental: {
+        autoExportsDataLoaders: ['src/loaders/**/*', '@/loaders/**/*'],
+      },
       extendRoute(route) {
         route.params.forEach((param, i) => {
           // transform kebab-case to camelCase

src/data-loaders/auto-exports.ts

@@ -1,22 +1,29 @@
 import { createFilter } from '@rollup/pluginutils'
 import MagicString from 'magic-string'
 import { findStaticImports, parseStaticImport } from 'mlly'
+import { join, resolve } from 'pathe'
 import { type UnpluginOptions } from 'unplugin'
 
-const ignoredSpecifiers = ['vue', 'vue-router', 'pinia']
-
-export function extractLoadersToExport(code: string): string[] {
+export function extractLoadersToExport(
+  code: string,
+  filterPaths: (id: string) => boolean,
+  root: 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)
+    // since we run post-post, vite will add a leading slash to the specifier
+    const specifier = resolve(
+      root,
+      parsed.specifier.startsWith('/')
+        ? parsed.specifier.slice(1)
+        : parsed.specifier
     )
-      return []
+    console.log('🔍', specifier)
+
+    // bail out faster for anything that is not a data loader
+    if (!filterPaths(specifier)) return []
 
     return [
       parsed.defaultImport,
@@ -27,11 +34,17 @@ export function extractLoadersToExport(code: string): string[] {
   return importNames
 }
 
-export function createAutoExportPlugin(): UnpluginOptions {
-  const filterVueComponents = createFilter(
-    [/\.vue$/, /\.vue\?vue/, /\.vue\?v=/]
-    // [/[\\/]node_modules[\\/]/, /[\\/]\.git[\\/]/, /[\\/]\.nuxt[\\/]/]
-  )
+export function createAutoExportPlugin({
+  filterPageComponents,
+  loadersPathsGlobs,
+  root,
+}: {
+  filterPageComponents: (id: string) => boolean
+  loadersPathsGlobs: string | string[]
+  root: string
+}): UnpluginOptions {
+  console.log('Creating auto-export plugin', loadersPathsGlobs)
+  const filterPaths = createFilter(loadersPathsGlobs)
 
   return {
     name: 'unplugin-vue-router:data-loaders-auto-export',
@@ -40,11 +53,18 @@ export function createAutoExportPlugin(): UnpluginOptions {
       transform: {
         order: 'post',
         handler(code, id) {
-          if (!filterVueComponents(id)) {
+          // strip query to also match .vue?vue&lang=ts etc
+          const queryIndex = id.indexOf('?')
+          const idWithoutQuery = queryIndex >= 0 ? id.slice(0, queryIndex) : id
+          if (!filterPageComponents(idWithoutQuery)) {
             return
           }
 
-          const loadersToExports = extractLoadersToExport(code)
+          const loadersToExports = extractLoadersToExport(
+            code,
+            filterPaths,
+            root
+          )
 
           if (loadersToExports.length <= 0) return
 

src/index.ts

@@ -188,8 +188,15 @@ export default createUnplugin<Options | undefined>((opt = {}, _meta) => {
     },
   ]
 
+  // Experimental options
   if (options.experimental.autoExportsDataLoaders) {
-    plugins.push(createAutoExportPlugin())
+    plugins.push(
+      createAutoExportPlugin({
+        filterPageComponents,
+        loadersPathsGlobs: options.experimental.autoExportsDataLoaders,
+        root: options.root,
+      })
+    )
   }
 
   return plugins

src/options.ts

@@ -216,9 +216,12 @@ export interface Options {
    */
   experimental?: {
     /**
-     * Automatically export data loaders in vue components. This allows you to not
+     * (Vite only). File paths or globs where loaders are exported. This will be used to filter out imported loaders and
+     * automatically re export them in page components. You can for example set this to `'src/loaders/**\/*'` (without
+     * the backslash) to automatically re export any imported variable from files in the `src/loaders` folder within a
+     * page component.
      */
-    autoExportsDataLoaders?: boolean
+    autoExportsDataLoaders?: string | string[]
   }
 }
 
@@ -239,7 +242,7 @@ export const DEFAULT_OPTIONS = {
   },
   watch: !process.env.CI,
   experimental: {
-    autoExportsDataLoaders: false,
+    autoExportsDataLoaders: 'src/loaders/**/*',
   },
 } satisfies Options
 
@@ -299,6 +302,14 @@ export function resolveOptions(options: Options) {
     src: resolve(root, routeOption.src),
   }))
 
+  if (options.experimental?.autoExportsDataLoaders) {
+    options.experimental.autoExportsDataLoaders = (
+      Array.isArray(options.experimental.autoExportsDataLoaders)
+        ? options.experimental.autoExportsDataLoaders
+        : [options.experimental.autoExportsDataLoaders]
+    ).map((path) => resolve(root, path))
+  }
+
   if (options.extensions) {
     options.extensions = options.extensions
       // ensure that extensions start with a dot or warn the user