feat: add filename and outdir reports (#2)

Author: AriPerkkio

README.md

@@ -1,10 +1,23 @@
 # vite-plugin-source-map-visualizer
 
+<a href="https://www.npmjs.com/package/vite-plugin-source-map-visualizer">
+    <img alt="version" src="https://img.shields.io/npm/v/vite-plugin-source-map-visualizer" />
+</a>
+
+[Installation](#installation) | [Configuration](#configuration) | [Credits](#credits)
+
 > Vite plugin for generating source map visualizations of transform results
 
+`vite-plugin-source-map-visualizer` is a Vite plugin for inspecting source maps of the transformed files. It generates HTML report that provides quick way for seeing how the tranformed files look in [source-map-visualization](https://github.com/evanw/source-map-visualization). See [live example](https://ariperkkio.github.io/vite-plugin-source-map-visualizer/).
+
+For more detailed plugin debugging tool you might want to check [`vite-plugin-inspect`](https://github.com/antfu-collective/vite-plugin-inspect) instead.
+
+<br />
 <img src="https://github.com/user-attachments/assets/e22e1559-9b5f-48a2-912d-b3f59c6be9cd" width="420px" />
+<br />
+<br />
 
-## Install
+## Installation
 
 ```bash
 $ npm install --save-dev vite-plugin-source-map-visualizer
@@ -26,7 +39,31 @@ Run Vite and check `.vite-source-map-visualizer/report.html`:
     └── report.html
 ```
 
+## Configuration
+
+You can pass options to the plugin as function arguments:
+
+```ts
+export default defineConfig({
+  plugins: [
+    sourcemapVisualizer({
+      filename: "my-report.html",
+    }),
+  ],
+});
+```
+
+### `filename`
+
+Filename for the report. Defaults to `report.html`.
+
+### `outDir`
+
+Directory for the output. Defaults to `.vite-source-map-visualizer`.
+
 ## Credits
 
+Special thanks to:
+
 - [`vite-plugin-inspect`](https://github.com/antfu-collective/vite-plugin-inspect) from [@antfu](https://github.com/antfu)
 - [source-map-visualization](https://github.com/evanw/source-map-visualization) from [@evanw](https://github.com/evanw)

src/plugin.ts

@@ -5,17 +5,33 @@ import type { Plugin } from "vite";
 import { toVisualizer } from "./generate-link.js";
 import { script, style } from "./report.js";
 
+interface Options {
+  /** Filename for the report. Defaults to `report.html` */
+  filename?: string;
+
+  /** Directory for the output. Defaults to `.vite-source-map-visualizer` */
+  outDir?: string;
+}
+
 interface Result {
   filename: string;
   hash: string;
   ssr: boolean;
 }
 
-const outDir = join(process.cwd(), ".vite-source-map-visualizer");
-
-export function sourcemapVisualizer(): Plugin {
+/**
+ * Generate HTML report for inspecting the transformed files in https://evanw.github.io/source-map-visualization/
+ */
+export function sourcemapVisualizer(options?: Options): Plugin {
   const results: Result[] = [];
 
+  const outDir = join(
+    process.cwd(),
+    options?.outDir || ".vite-source-map-visualizer"
+  );
+
+  const reportName = options?.filename || "report.html";
+
   return {
     name: "source-map-visualizer",
     enforce: "post",
@@ -34,7 +50,7 @@ export function sourcemapVisualizer(): Plugin {
     },
 
     async buildEnd() {
-      const filename = `${outDir}/report.html`;
+      const filename = `${outDir}/${reportName}`;
       const html = generateHTML(results, filename);
       await fs.writeFile(filename, html, "utf8");
     },