feat: support absolute glob patterns

close #1875

Author: yyx990803

docs/guide/features.md

@@ -221,7 +221,7 @@ const modules = {
 Note that:
 
 - This is a Vite-only feature and is not a web or ES standard.
-- The glob patterns must be relative and start with `.`.
+- The glob patterns are treated like import specifiers: they must be either relative (start with `./`) or absolute (start with `/`, resolved relative to project root). Globbing from dependencies is not supported.
 - The glob matching is done via `fast-glob` - check out its documentation for [supported glob patterns](https://github.com/mrmlnc/fast-glob#pattern-syntax).
 
 ## Web Assembly

packages/playground/glob-import/__tests__/glob-import.spec.ts

@@ -30,14 +30,14 @@ const json = isBuild
 
 const allResult = {
   // JSON file should be properly transformed
-  './dir/baz.json': json,
-  './dir/foo.js': {
+  '/dir/baz.json': json,
+  '/dir/foo.js': {
     msg: 'foo'
   },
-  './dir/index.js': {
+  '/dir/index.js': {
     modules: filteredResult
   },
-  './dir/nested/bar.js': {
+  '/dir/nested/bar.js': {
     modules: {
       '../baz.json': json
     },
@@ -58,7 +58,7 @@ if (!isBuild) {
       () => page.textContent('.result'),
       JSON.stringify(
         {
-          './dir/a.js': {},
+          '/dir/a.js': {},
           ...allResult
         },
         null,
@@ -72,7 +72,7 @@ if (!isBuild) {
       () => page.textContent('.result'),
       JSON.stringify(
         {
-          './dir/a.js': {
+          '/dir/a.js': {
             msg: 'a'
           },
           ...allResult

packages/playground/glob-import/index.html

@@ -2,7 +2,7 @@
 
 <script type="module" src="./dir/index.js"></script>
 <script type="module">
-  const modules = import.meta.glob('./dir/**')
+  const modules = import.meta.glob('/dir/**')
 
   for (const path in modules) {
     modules[path]().then((mod) => {

packages/vite/src/node/importGlob.ts

@@ -13,6 +13,7 @@ export async function transformImportGlob(
   pos: number,
   importer: string,
   importIndex: number,
+  root: string,
   normalizeUrl?: (url: string, pos: number) => Promise<[string, string]>
 ): Promise<{
   importsString: string
@@ -35,18 +36,25 @@ export async function transformImportGlob(
   const importerBasename = path.basename(importer)
 
   let [pattern, endIndex] = lexGlobPattern(source, pos)
-  if (!pattern.startsWith('.')) {
-    throw err(`pattern must start with "."`)
+  if (!pattern.startsWith('.') && !pattern.startsWith('/')) {
+    throw err(`pattern must start with "." or "/" (relative to project root)`)
   }
-  let base = path.dirname(importer)
+  let base
   let parentDepth = 0
-  while (pattern.startsWith('../')) {
-    pattern = pattern.slice(3)
-    base = path.resolve(base, '../')
-    parentDepth++
-  }
-  if (pattern.startsWith('./')) {
-    pattern = pattern.slice(2)
+  let isAbsolute = pattern.startsWith('/')
+  if (isAbsolute) {
+    base = path.resolve(root)
+    pattern = pattern.slice(1)
+  } else {
+    base = path.dirname(importer)
+    while (pattern.startsWith('../')) {
+      pattern = pattern.slice(3)
+      base = path.resolve(base, '../')
+      parentDepth++
+    }
+    if (pattern.startsWith('./')) {
+      pattern = pattern.slice(2)
+    }
   }
   const files = glob.sync(pattern, { cwd: base })
   const imports: string[] = []
@@ -55,7 +63,9 @@ export async function transformImportGlob(
   for (let i = 0; i < files.length; i++) {
     // skip importer itself
     if (files[i] === importerBasename) continue
-    const file = parentDepth
+    const file = isAbsolute
+      ? `/${files[i]}`
+      : parentDepth
       ? `${'../'.repeat(parentDepth)}${files[i]}`
       : `./${files[i]}`
     let importee = file

packages/vite/src/node/optimizer/scan.ts

@@ -200,10 +200,12 @@ function esbuildScanPlugin(
         }
 
         if (js.includes('import.meta.glob')) {
-          return transformGlob(js, path, loader).then((contents) => ({
-            loader,
-            contents
-          }))
+          return transformGlob(js, path, config.root, loader).then(
+            (contents) => ({
+              loader,
+              contents
+            })
+          )
         }
 
         return {
@@ -310,7 +312,7 @@ function esbuildScanPlugin(
         }
 
         if (contents.includes('import.meta.glob')) {
-          return transformGlob(contents, id, ext as Loader).then(
+          return transformGlob(contents, id, config.root, ext as Loader).then(
             (contents) => ({
               loader: ext as Loader,
               contents
@@ -326,7 +328,12 @@ function esbuildScanPlugin(
   }
 }
 
-async function transformGlob(source: string, importer: string, loader: Loader) {
+async function transformGlob(
+  source: string,
+  importer: string,
+  root: string,
+  loader: Loader
+) {
   // transform the content first since es-module-lexer can't handle non-js
   if (loader !== 'js') {
     source = (await (await ensureService()).transform(source, { loader })).code
@@ -344,7 +351,8 @@ async function transformGlob(source: string, importer: string, loader: Loader) {
       source,
       start,
       normalizePath(importer),
-      index
+      index,
+      root
     )
     s.prepend(importsString)
     s.overwrite(expStart, endIndex, exp)

packages/vite/src/node/plugins/importAnalysis.ts

@@ -85,7 +85,9 @@ function markExplicitImport(url: string) {
  *     ```
  */
 export function importAnalysisPlugin(config: ResolvedConfig): Plugin {
-  const clientPublicPath = path.posix.join(config.base, CLIENT_PUBLIC_PATH)
+  const { root, base } = config
+  const clientPublicPath = path.posix.join(base, CLIENT_PUBLIC_PATH)
+
   let server: ViteDevServer
 
   return {
@@ -96,7 +98,7 @@ export function importAnalysisPlugin(config: ResolvedConfig): Plugin {
     },
 
     async transform(source, importer, ssr) {
-      const prettyImporter = prettifyUrl(importer, config.root)
+      const prettyImporter = prettifyUrl(importer, root)
 
       if (canSkip(importer)) {
         isDebug && debugRewrite(chalk.dim(`[skipped] ${prettyImporter}`))
@@ -162,8 +164,8 @@ export function importAnalysisPlugin(config: ResolvedConfig): Plugin {
         url: string,
         pos: number
       ): Promise<[string, string]> => {
-        if (config.base !== '/' && url.startsWith(config.base)) {
-          url = url.replace(config.base, '/')
+        if (base !== '/' && url.startsWith(base)) {
+          url = url.replace(base, '/')
         }
 
         const resolved = await this.resolve(url, importer)
@@ -179,9 +181,9 @@ export function importAnalysisPlugin(config: ResolvedConfig): Plugin {
 
         // normalize all imports into resolved URLs
         // e.g. `import 'foo'` -> `import '/@fs/.../node_modules/foo/index.js`
-        if (resolved.id.startsWith(config.root + '/')) {
+        if (resolved.id.startsWith(root + '/')) {
           // in root: infer short absolute path from root
-          url = resolved.id.slice(config.root.length)
+          url = resolved.id.slice(root.length)
         } else if (fs.existsSync(cleanUrl(resolved.id))) {
           // exists but out of root: rewrite to absolute /@fs/ paths
           url = path.posix.join(FS_PREFIX + resolved.id)
@@ -234,7 +236,7 @@ export function importAnalysisPlugin(config: ResolvedConfig): Plugin {
         }
 
         // prepend base (dev base is guaranteed to have ending slash)
-        url = config.base + url.replace(/^\//, '')
+        url = base + url.replace(/^\//, '')
         return [url, resolved.id]
       }
 
@@ -284,13 +286,12 @@ export function importAnalysisPlugin(config: ResolvedConfig): Plugin {
               start,
               importer,
               index,
+              root,
               normalizeUrl
             )
             str().prepend(importsString)
             str().overwrite(expStart, endIndex, exp)
-            imports.forEach((url) =>
-              importedUrls.add(url.replace(config.base, '/'))
-            )
+            imports.forEach((url) => importedUrls.add(url.replace(base, '/')))
             server._globImporters[importerModule.file!] = {
               module: importerModule,
               base,
@@ -386,7 +387,7 @@ export function importAnalysisPlugin(config: ResolvedConfig): Plugin {
 
           // record for HMR import chain analysis
           // make sure to normalize away base
-          importedUrls.add(url.replace(config.base, '/'))
+          importedUrls.add(url.replace(base, '/'))
         } else if (!importer.startsWith(clientDir) && !ssr) {
           if (!hasViteIgnore && !isSupportedDynamicImport(url)) {
             this.warn(

packages/vite/src/node/plugins/importAnaysisBuild.ts

@@ -132,7 +132,13 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin {
             exp,
             endIndex,
             isEager
-          } = await transformImportGlob(source, start, importer, index)
+          } = await transformImportGlob(
+            source,
+            start,
+            importer,
+            index,
+            config.root
+          )
           str().prepend(importsString)
           str().overwrite(expStart, endIndex, exp)
           if (!isEager) {