https://github.com/davidbonnet/vite-plugin-module-list
🧶 Vite plugin that generates a module that automatically imports modules of a given folder.
https://github.com/davidbonnet/vite-plugin-module-list
Last synced: 2 months ago
JSON representation
🧶 Vite plugin that generates a module that automatically imports modules of a given folder.
- Host: GitHub
- URL: https://github.com/davidbonnet/vite-plugin-module-list
- Owner: davidbonnet
- Created: 2023-08-29T13:25:42.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2023-11-28T16:45:50.000Z (almost 2 years ago)
- Last Synced: 2025-08-19T13:44:24.982Z (3 months ago)
- Language: TypeScript
- Homepage:
- Size: 521 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- fucking-awesome-vite - vite-plugin-module-list - Automatically import the modules found in a specified folder. (Plugins / Framework-agnostic Plugins)
- awesome-vite - vite-plugin-module-list - Automatically import the modules found in a specified folder. (Plugins / Framework-agnostic Plugins)
README
# Vite plugin: Module list
🧶 Vite plugin that generates a module that automatically imports modules of a given folder.
### Key features
- Writes a simple module that imports all modules of a specified folder.
- Outputs different exports styles (dynamic, static, types, with or without file extension).
- Handles JavaScript/TypeScript and CSS modules.
- Automatically updates when files are added, removed, or renamed to the specified folder.
- Optionally formats the written module using Prettier.
- Works with [Vite](http://vitejs.dev) 2.x and onward.
## Installation
```bash
npm install vite-plugin-module-list
```
## Import
```js
import moduleList from "vite-plugin-module-list";
```
## API
Please checkout the [API documentation](./doc/README.md) for a full list of available options.
The default exported function returns a regular Vite plugin object. It adds hook that sets a file change listener on the Vite development server.
```js
import { resolve } from "path";
import moduleList from "vite-plugin-module-list";
export default defineConfig({
plugins: [
moduleList({
rootPath: resolve("src/pages"),
outputPath: resolve("src/pages.ts"),
includeExtensions: ["tsx"],
formatOptions: {
trailingComma: "all",
},
mode: {
language: "ts",
dynamic: true,
},
}),
],
});
```
## Example
### Dynamic import
With the example configuration above, the `pages.ts` module will be generated:
```diff
src/
+ pages.ts
pages/
A.css
A.tsx
A.test.tsx
B.css
B.tsx
C.tsx
README.md
```
It will contain:
```js
// File automatically generated by `vite-plugin-module-list`
export default [
{ path: "A.tsx", module: () => import("./pages/A") },
{ path: "B.tsx", module: () => import("./pages/B") },
{ path: "C.tsx", module: () => import("./pages/C") },
];
```
Note that the CSS and test files are excluded. This behavior can be overridden with the `include`, `exclude`, and `includeExtensions` options.
It can then be imported in another module that wraps the dynamic imports with a `lazy` decorator:
```jsx
import MODULE_LIST from "./pages";
const PAGE_LIST = MODULE_LIST.map(({ path, module }) => {
const name = path.slice(0, -4);
return {
path: `/${name.toLowerCase()}`,
name,
Page: lazy(module),
};
});
```
### Static import
This plugin can also be used to automatically group TypeScript types or name-exported functions.
For example, a plugin instance with this setup:
```js
moduleList({
rootPath: resolve("src/types"),
outputPath: resolve("src/types.ts"),
formatOptions: {
trailingComma: "all",
},
mode: {
language: "ts",
type: true,
},
});
```
Would yield this module on this project structure:
```diff
src/
+ types.ts
types/
A.ts
B.ts
```
The `types.ts` module would contain:
```typescript
// File automatically generated by `vite-plugin-module-list`
export type { A } from "./types/A";
export type { B } from "./types/B";
```