vite-plugin-glob
The design experiment for import.meta.glob from Vite.
Motivations
There are quite some scenarios that import.meta.glob wasn't considered when it's been implemented at the beginning. So we received quite a few PRs to improve it.
However, some design considerations might conflict with each other. For example, #2495 support ignore option for glob import supports the ignore glob as a second argument, while in #6953 import.meta.glob support ?raw we uses the second argument to specify glob query (and later been changed to { as } via #7215 deprecate { assert: { type: raw }} in favor of { as: raw }).
There are several other PRs that touches it's design as well:
With these two TC39 proposals (import-reflection and import-assertions) not settled yet, combining with different needs and design tradeoffs in each PR, making the good API design for import.meta.glob directly in Vite core becoming harder and more and more complex than it could be (with the cautions to not break existing usages).
On top of that, in Vite we are having multiple macros for different options:
import.meta.globimport.meta.globEagerimport.meta.globEagerDefault(undocumented)
That results in a quite large API surface to maintain and make the future extension harder. For example, if we want import.meta.globNamed we might also need to add import.meta.globEagerNamed, making the counts to 5.
Thus I propose to experiment with the import.meta.glob as an external plugin so we could introduce breaking change more easier and ships the implementation much faster (in Vite it takes days for a change to be meraged, and weeks to months for it to be landed in stable release). And when we feel the new design is able to cover most of the use cases, then we could embed it into Vite core as a one-time breaking change in v3.0.
Features
- Globing for multiple patterns
- Globing ignore
- HMR on file modification / addition / deletion
- Ability to provide custom queries
- Ability to only import default / named export
- An unified API for different options
- Vite alias
- (Optional) Takeover Vite's
import.meta.glob
Experiments
The following features are in experiments, feedbacks are greatly welcome!
Install
npm i -D vite-plugin-glob
// vite.config.ts
import { defineConfig } from 'vite'
import GlobPlugin from 'vite-plugin-glob'
export default defineConfig({
plugins: [
GlobPlugin({
// enable to let this plugin interpret `import.meta.glob`
// takeover: true,
}),
],
})
Usage
The API is named as
import.meta.importGlobto avoid conflict with Vite'simport.meta.globin this implementation.
const modules = import.meta.importGlob('./dir/*.js')
/* {
'./dir/foo.js': () => import('./dir/foo.js'),
'./dir/bar.js': () => import('./dir/bar.js'),
} */
Multiple Globs
const modules = import.meta.importGlob([
'./dir/*.js',
'./another/dir/*.js',
])
/* {
'./dir/foo.js': () => import('./dir/foo.js'),
'./dir/bar.js': () => import('./dir/bar.js'),
'./another/dir/index.js': () => import('./another/dir/index.js'),
} */
Ignore Glob
Globs start with ! will be matched to exclude.
const modules = import.meta.importGlob([
'./dir/*.js',
'!**/index.js',
])
Eager
Import the modules as static imports.
const modules = import.meta.importGlob('./dir/*.js', { eager: true })
/*
import * as __glob__0_0 from './dir/foo.js'
import * as __glob__0_1 from './dir/bar.js'
const modules = {
'./dir/foo.js': __glob__0_0,
'./dir/bar.js': __glob__0_1
}
*/
Import As
const modules = import.meta.importGlob('./dir/*.js', { as: 'raw' })
/* {
'./dir/foo.js': () => import('./dir/foo.js?raw'),
'./dir/bar.js': () => import('./dir/bar.js?raw'),
} */
Named Exports
It's possible to only import parts of the modules with the export options.
const setups = import.meta.importGlob('./dir/*.js', { export: 'setup' })
/* {
'./dir/foo.js': () => import('./dir/foo.js').then(m => m.setup),
'./dir/bar.js': () => import('./dir/bar.js').then(m => m.setup),
} */
Combining with eager, it's even possible to have tree-shaking enable for those modules.
const setups = import.meta.importGlob('./dir/*.js', { export: 'setup', eager: true })
/*
import { setup as __glob__0_0 } from './dir/foo.js'
import { setup as __glob__0_1 } from './dir/bar.js'
const setups = {
'./dir/foo.js': __glob__0_0,
'./dir/bar.js': __glob__0_1
}
*/
Set export to default to import the default export.
const modules = import.meta.importGlob('./dir/*.js', { export: 'deafult', eager: true })
/*
import __glob__0_0 from './dir/foo.js'
import __glob__0_1 from './dir/bar.js'
const modules = {
'./dir/foo.js': __glob__0_0,
'./dir/bar.js': __glob__0_1
}
*/
Custom Queries
const setups = import.meta.importGlob('./dir/*.js', { query: { foo: 'bar', bar: true } })
/* {
'./dir/foo.js': () => import('./dir/foo.js?foo=bar&bar=true&lang.js').then(m => m.setup),
'./dir/bar.js': () => import('./dir/bar.js?foo=bar&bar=true&lang.js').then(m => m.setup),
} */
Experimental:
lang.(ext)will be added automatically to preseve the file extension for following plugins to process. Discussions.
TypeScript
Add to tsconfig.json
{
"compilerOptions": {
"types": [
"vite-plugin-glob/client",
// with takeover enabled
// "vite-plugin-glob/takeover"
]
}
}
You can use generic to specify the type of the modules.
interface SomeModule {
name: string
default: { /* ... */ }
}
import.meta.importGlob<SomeModule>('./dir/*.js')
Sponsors
License
MIT License © 2021 Anthony Fu
81 Dec 31, 2022
10 Aug 2, 2022
19 Dec 17, 2022
583 Dec 23, 2022
146 Dec 23, 2022
37 Aug 14, 2022
49 Nov 26, 2022
84 Nov 28, 2022
3 Mar 26, 2022
95 Dec 15, 2022
6 Jun 25, 2022
8 Nov 11, 2022
9 Jul 16, 2022
31 Dec 13, 2022
90 Dec 15, 2022
2 Feb 8, 2022
6 Aug 1, 2022
6 Nov 13, 2022
64 Jan 4, 2023