feat: add base option to import.meta.glob (vitejs#20163)

Co-authored-by: hakshu25 <[email protected]>
Co-authored-by: 翠 / green <[email protected]>
Co-authored-by: Ben McCann <[email protected]>

Author: 4 people

docs/guide/features.md

@@ -580,6 +580,32 @@ 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 modulesWithBase = import.meta.glob('./**/*.js', {
+  base: './base',
+})
+```
+
+```ts
+// code produced by vite:
+const modulesWithBase = {
+  './dir/foo.js': () => import('./base/dir/foo.js'),
+  './dir/bar.js': () => import('./base/dir/bar.js'),
+}
+```
+
+The base option can only be a directory path relative to the importer file or absolute against the project root. Aliases and virtual modules aren't supported.
+
+Only the globs that are relative paths are interpreted as relative to the resolved base.
+
+All the resulting module keys are modified to be relative to the base if provided.
+
 ### Glob Import Caveats
 
 Note that:

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

@@ -92,6 +92,13 @@ 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")
+
+});
+export const customBaseParent = /* #__PURE__ */ Object.assign({"../fixture-b/a.ts": () => import("/fixture-b/a.ts"),"../fixture-b/b.ts": () => import("/fixture-b/b.ts"),"../fixture-b/index.ts": () => import("/fixture-b/index.ts")
+
 });
 "
 `;
@@ -188,11 +195,19 @@ 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")
+
+});
+export const customBaseParent = /* #__PURE__ */ Object.assign({"../fixture-b/a.ts": () => import("/fixture-b/a.ts"),"../fixture-b/b.ts": () => import("/fixture-b/b.ts"),"../fixture-b/index.ts": () => import("/fixture-b/index.ts")
+
 });
 "
 `;
 
 exports[`fixture > virtual modules 1`] = `
 "/* #__PURE__ */ Object.assign({"/modules/a.ts": () => import("/modules/a.ts"),"/modules/b.ts": () => import("/modules/b.ts"),"/modules/index.ts": () => import("/modules/index.ts")})
-/* #__PURE__ */ Object.assign({"/../fixture-b/a.ts": () => import("/../fixture-b/a.ts"),"/../fixture-b/b.ts": () => import("/../fixture-b/b.ts"),"/../fixture-b/index.ts": () => import("/../fixture-b/index.ts")})"
+/* #__PURE__ */ Object.assign({"/../fixture-b/a.ts": () => import("/../fixture-b/a.ts"),"/../fixture-b/b.ts": () => import("/../fixture-b/b.ts"),"/../fixture-b/index.ts": () => import("/../fixture-b/index.ts")})
+/* #__PURE__ */ Object.assign({"./a.ts": () => import("/modules/a.ts"),"./b.ts": () => import("/modules/b.ts"),"./index.ts": () => import("/modules/index.ts")})"
 `;

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

@@ -110,3 +110,13 @@ 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',
+})
+
+export const customBaseParent = import.meta.glob('/fixture-b/**/*.ts', {
+  base: '/fixture-a',
+})

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

@@ -45,6 +45,7 @@ describe('fixture', async () => {
     const code = [
       "import.meta.glob('/modules/*.ts')",
       "import.meta.glob(['/../fixture-b/*.ts'])",
+      "import.meta.glob(['./*.ts'], { base: '/modules' })",
     ].join('\n')
     expect(
       (

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: Option \"base\" must start with '/', './' or '../', but got \"foo\"]",
+    )
+    expect(
+      await runError('import.meta.glob("./*.js", { base: "!/foo" })'),
+    ).toMatchInlineSnapshot('[Error: Option "base" cannot start with "!"]')
+  })
 })

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

@@ -120,6 +120,7 @@ const knownOptions = {
   import: ['string'],
   exhaustive: ['boolean'],
   query: ['object', 'string'],
+  base: ['string'],
 }
 
 const forceDefaultAs = ['raw', 'url']
@@ -165,6 +166,21 @@ function parseGlobOptions(
     }
   }
 
+  if (opts.base) {
+    if (opts.base[0] === '!') {
+      throw err('Option "base" cannot start with "!"', optsStartIndex)
+    } else if (
+      opts.base[0] !== '/' &&
+      !opts.base.startsWith('./') &&
+      !opts.base.startsWith('../')
+    ) {
+      throw err(
+        `Option "base" must start with '/', './' or '../', but got "${opts.base}"`,
+        optsStartIndex,
+      )
+    }
+  }
+
   if (typeof opts.query === 'object') {
     for (const key in opts.query) {
       const value = opts.query[key]
@@ -309,7 +325,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]))
     const sliceCode = cleanCode.slice(0, start)
@@ -432,19 +450,35 @@ export async function transformGlobImport(
 
           const resolvePaths = (file: string) => {
             if (!dir) {
-              if (isRelative)
+              if (!options.base && isRelative)
                 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)}`
+              let filePath = options.base
+                ? `${relative(posix.join(root, options.base), file)}`
+                : importPath
+              if (options.base && filePath[0] !== '.') {
+                filePath = `./${filePath}`
+              }
+              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,
+              )
+              if (filePath[0] !== '.') filePath = `./${filePath}`
+              if (options.base[0] === '/') {
+                importPath = `/${relative(root, file)}`
+              }
+            } else if (isRelative) {
               filePath = importPath
             } else {
               filePath = relative(root, file)
@@ -582,14 +616,28 @@ export async function toAbsoluteGlob(
   root: string,
   importer: string | undefined,
   resolveId: IdResolver,
+  base?: string,
 ): Promise<string> {
   let pre = ''
   if (glob[0] === '!') {
     pre = '!'
     glob = glob.slice(1)
   }
   root = globSafePath(root)
-  const dir = importer ? globSafePath(dirname(importer)) : root
+  let dir
+  if (base) {
+    if (base.startsWith('/')) {
+      dir = posix.join(root, base)
+    } else {
+      dir = posix.resolve(
+        importer ? globSafePath(dirname(importer)) : root,
+        base,
+      )
+    }
+  } else {
+    dir = importer ? globSafePath(dirname(importer)) : root
+  }
+
   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>