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