feat: add base option for import.meta.glob

docs/guide/features.md

@@ -537,6 +537,26 @@ const modules = import.meta.glob('./dir/*.js', {
 })
 ```
 
+#### Base Path
+
+You can also use the `base` option to provide base path for the imports:
+
+```ts twoslash
+import 'vite/client'
+// ---cut---
+const moduleBase = import.meta.glob('**/*.js', {
+  base: './base',
+})
+```
+
+```ts
+// code produced by vite:
+const moduleBase = {
+  'dir/foo.js': () => import('./dir/foo.js'),
+  'dir/bar.js': () => import('./dir/bar.js'),
+}
+```
+
 ### Glob Import Caveats
 
 Note that:

packages/vite/src/node/__tests__/plugins/importGlob/__snapshots__/fixture.spec.ts.snap

@@ -51,6 +51,10 @@ export const cleverCwd2 = /* #__PURE__ */ Object.assign({"./modules/a.ts": () =>
 
 
 
+});
+export const customBase = /* #__PURE__ */ Object.assign({"modules/a.ts": () => import("./modules/a.ts"),"modules/b.ts": () => import("./modules/b.ts"),"modules/index.ts": () => import("./modules/index.ts"),"sibling.ts": () => import("./sibling.ts")});
+export const customRootBase = /* #__PURE__ */ Object.assign({"a.ts": () => import("../fixture-b/a.ts"),"b.ts": () => import("../fixture-b/b.ts"),"index.ts": () => import("../fixture-b/index.ts")
+
 });
 "
 `;
@@ -106,6 +110,10 @@ export const cleverCwd2 = /* #__PURE__ */ Object.assign({"./modules/a.ts": () =>
 
 
 
+});
+export const customBase = /* #__PURE__ */ Object.assign({"modules/a.ts": () => import("./modules/a.ts"),"modules/b.ts": () => import("./modules/b.ts"),"modules/index.ts": () => import("./modules/index.ts"),"sibling.ts": () => import("./sibling.ts")});
+export const customRootBase = /* #__PURE__ */ Object.assign({"a.ts": () => import("../fixture-b/a.ts"),"b.ts": () => import("../fixture-b/b.ts"),"index.ts": () => import("../fixture-b/index.ts")
+
 });
 "
 `;

packages/vite/src/node/__tests__/plugins/importGlob/fixture-a/index.ts

@@ -67,3 +67,9 @@ export const cleverCwd2 = import.meta.glob([
   '../fixture-b/*.ts',
   '!**/index.ts',
 ])
+
+export const customBase = import.meta.glob('**/*.ts', { base: './' })
+
+export const customRootBase = import.meta.glob('**/*.ts', {
+  base: '/fixture-b',
+})

packages/vite/src/node/__tests__/plugins/importGlob/parse.spec.ts

@@ -141,6 +141,28 @@ describe('parse positives', async () => {
     `)
   })
 
+  it('options with base', async () => {
+    expect(
+      await run(`
+    import.meta.glob('**/dir/*.md', {
+      base: './path/to/base'
+    })
+    `),
+    ).toMatchInlineSnapshot(`
+      [
+        {
+          "globs": [
+            "**/dir/*.md",
+          ],
+          "options": {
+            "base": "./path/to/base",
+          },
+          "start": 5,
+        },
+      ]
+    `)
+  })
+
   it('object properties - 1', async () => {
     expect(
       await run(`
@@ -376,4 +398,20 @@ describe('parse negatives', async () => {
       '[Error: Vite is unable to parse the glob options as the value is not static]',
     )
   })
+
+  it('options base', async () => {
+    expect(
+      await runError('import.meta.glob("./*.js", { base: 1 })'),
+    ).toMatchInlineSnapshot(
+      '[Error: Expected glob option "base" to be of type string, but got number]',
+    )
+    expect(
+      await runError('import.meta.glob("./*.js", { base: "foo" })'),
+    ).toMatchInlineSnapshot(
+      '[Error: Invalid glob: "foo/*.js" (resolved: "foo/*.js"). It must start with \'/\' or \'./\']',
+    )
+    expect(
+      await runError('import.meta.glob("./*.js", { base: "!/foo" })'),
+    ).toMatchInlineSnapshot('[Error: Option "base" cannot start with "!"]')
+  })
 })

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

@@ -117,6 +117,7 @@ const knownOptions = {
   import: ['string'],
   exhaustive: ['boolean'],
   query: ['object', 'string'],
+  base: ['string'],
 }
 
 const forceDefaultAs = ['raw', 'url']
@@ -162,6 +163,10 @@ function parseGlobOptions(
     }
   }
 
+  if (opts.base && opts.base[0] === '!') {
+    throw err('Option "base" cannot start with "!"', optsStartIndex)
+  }
+
   if (typeof opts.query === 'object') {
     for (const key in opts.query) {
       const value = opts.query[key]
@@ -306,7 +311,9 @@ export async function parseImportGlob(
     }
 
     const globsResolved = await Promise.all(
-      globs.map((glob) => toAbsoluteGlob(glob, root, importer, resolveId)),
+      globs.map((glob) =>
+        toAbsoluteGlob(glob, root, importer, resolveId, options.base),
+      ),
     )
     const isRelative = globs.every((i) => '.!'.includes(i[0]))
 
@@ -416,15 +423,24 @@ export async function transformGlobImport(
                 throw new Error(
                   "In virtual modules, all globs must start with '/'",
                 )
-              const filePath = `/${relative(root, file)}`
-              return { filePath, importPath: filePath }
+              const importPath = `/${relative(root, file)}`
+              const filePath = options.base
+                ? `${relative(posix.join(root, options.base), file)}`
+                : importPath
+              return { filePath, importPath }
             }
 
             let importPath = relative(dir, file)
             if (importPath[0] !== '.') importPath = `./${importPath}`
 
             let filePath: string
-            if (isRelative) {
+            if (options.base) {
+              const resolvedBasePath = options.base[0] === '/' ? root : dir
+              filePath = relative(
+                posix.join(resolvedBasePath, options.base),
+                file,
+              )
+            } else if (isRelative) {
               filePath = importPath
             } else {
               filePath = relative(root, file)
@@ -544,6 +560,7 @@ export async function toAbsoluteGlob(
   root: string,
   importer: string | undefined,
   resolveId: IdResolver,
+  base?: string,
 ): Promise<string> {
   let pre = ''
   if (glob[0] === '!') {
@@ -552,6 +569,8 @@ export async function toAbsoluteGlob(
   }
   root = globSafePath(root)
   const dir = importer ? globSafePath(dirname(importer)) : root
+  if (base && base.startsWith('./')) return pre + posix.join(dir, base, glob)
+  glob = base ? posix.join(base, glob) : glob
   if (glob[0] === '/') return pre + posix.join(root, glob.slice(1))
   if (glob.startsWith('./')) return pre + posix.join(dir, glob.slice(2))
   if (glob.startsWith('../')) return pre + posix.join(dir, glob)

packages/vite/types/importGlob.d.ts

@@ -28,6 +28,10 @@ export interface ImportGlobOptions<
    * @default false
    */
   exhaustive?: boolean
+  /**
+   * Base path to resolve relative paths.
+   */
+  base?: string
 }
 
 export type GeneralImportGlobOptions = ImportGlobOptions<boolean, string>

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

@@ -83,6 +83,12 @@ const relativeRawResult = {
   },
 }
 
+const baseRawResult = {
+  'baz.json': {
+    msg: 'baz',
+  },
+}
+
 test('should work', async () => {
   await withRetry(async () => {
     const actual = await page.textContent('.result')
@@ -247,3 +253,9 @@ test('subpath imports', async () => {
 test('#alias imports', async () => {
   expect(await page.textContent('.hash-alias-imports')).toMatch('bar foo')
 })
+
+test('import base glob raw', async () => {
+  expect(await page.textContent('.result-base')).toBe(
+    JSON.stringify(baseRawResult, null, 2),
+  )
+})

playground/glob-import/index.html

@@ -27,6 +27,8 @@ <h2>#alias imports</h2>
 <pre class="hash-alias-imports"></pre>
 <h2>In package</h2>
 <pre class="in-package"></pre>
+<h2>Base</h2>
+<pre class="result-base"></pre>
 
 <script type="module" src="./dir/index.js"></script>
 <script type="module">
@@ -167,3 +169,21 @@ <h2>In package</h2>
 <script type="module">
   import '@vitejs/test-import-meta-glob-pkg'
 </script>
+
+<script type="module">
+  const baseModules = import.meta.glob('*.json', {
+    query: '?raw',
+    eager: true,
+    import: 'default',
+    base: './dir',
+  })
+  const globBase = {}
+  Object.keys(baseModules).forEach((key) => {
+    globBase[key] = JSON.parse(baseModules[key])
+  })
+  document.querySelector('.result-base').textContent = JSON.stringify(
+    globBase,
+    null,
+    2,
+  )
+</script>