feat: add formatName option (#5)

Author: AriPerkkio

README.md

@@ -61,6 +61,20 @@ Filename for the report. Defaults to `report.html`.
 
 Directory for the output. Defaults to `.vite-source-map-visualizer`.
 
+### `formatName`
+
+Format name of the files. For example to remove `process.cwd()`:
+
+```ts
+export default defineConfig({
+  plugins: [
+    sourcemapVisualizer({
+      formatName: (filename) => filename.replace(process.cwd(), "/<root>"),
+    }),
+  ],
+});
+```
+
 ## Credits
 
 Special thanks to:

src/plugin.ts

@@ -13,6 +13,9 @@ interface Options {
 
   /** Directory for the output. Defaults to `.vite-source-map-visualizer` */
   outDir?: string;
+
+  /** Format name of the transformed file */
+  formatName?: (filename: string) => string;
 }
 
 interface Result {
@@ -33,6 +36,7 @@ export function sourcemapVisualizer(options?: Options): Plugin {
   );
 
   const reportName = options?.filename || "report.html";
+  const formatName = options?.formatName || defaultFormatName;
 
   return {
     name: PLUGIN_NAME,
@@ -64,7 +68,7 @@ export function sourcemapVisualizer(options?: Options): Plugin {
     transform(code, id, options) {
       const map = this.getCombinedSourcemap();
       const hash = toVisualizer({ code, map });
-      const filename = id;
+      const filename = formatName(id);
 
       results.push({ filename, hash, ssr: options?.ssr || false });
     },
@@ -101,6 +105,10 @@ function generateHTML(results: Result[], root: string) {
       <a href="${root}">Vite Source Map Visualizer</a>
     </h1>
 
+    <button id="menu" title="Toggle file list">
+      <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g data-name="Layer 2"><g data-name="menu"><rect width="24" height="24" transform="rotate(180 12 12)" opacity="0"/><rect x="3" y="11" width="18" height="2" rx=".95" ry=".95"/><rect x="3" y="16" width="18" height="2" rx=".95" ry=".95"/><rect x="3" y="6" width="18" height="2" rx=".95" ry=".95"/></g></g></svg>
+    </button>
+
     <button id="theme-toggle" title="Toggle theme">
       <svg id="theme-icon-light" class="theme-light" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g data-name="Layer 2"><g data-name="sun"><rect width="24" height="24" transform="rotate(180 12 12)" opacity="0"/><path d="M12 6a1 1 0 0 0 1-1V3a1 1 0 0 0-2 0v2a1 1 0 0 0 1 1z"/><path d="M21 11h-2a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2z"/><path d="M6 12a1 1 0 0 0-1-1H3a1 1 0 0 0 0 2h2a1 1 0 0 0 1-1z"/><path d="M6.22 5a1 1 0 0 0-1.39 1.47l1.44 1.39a1 1 0 0 0 .73.28 1 1 0 0 0 .72-.31 1 1 0 0 0 0-1.41z"/><path d="M17 8.14a1 1 0 0 0 .69-.28l1.44-1.39A1 1 0 0 0 17.78 5l-1.44 1.42a1 1 0 0 0 0 1.41 1 1 0 0 0 .66.31z"/><path d="M12 18a1 1 0 0 0-1 1v2a1 1 0 0 0 2 0v-2a1 1 0 0 0-1-1z"/><path d="M17.73 16.14a1 1 0 0 0-1.39 1.44L17.78 19a1 1 0 0 0 .69.28 1 1 0 0 0 .72-.3 1 1 0 0 0 0-1.42z"/><path d="M6.27 16.14l-1.44 1.39a1 1 0 0 0 0 1.42 1 1 0 0 0 .72.3 1 1 0 0 0 .67-.25l1.44-1.39a1 1 0 0 0-1.39-1.44z"/><path d="M12 8a4 4 0 1 0 4 4 4 4 0 0 0-4-4zm0 6a2 2 0 1 1 2-2 2 2 0 0 1-2 2z"/></g></g></svg>
       <svg id="theme-icon-dark" class="theme-dark" <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g data-name="Layer 2"><g data-name="moon"><rect width="24" height="24" opacity="0"/><path d="M12.3 22h-.1a10.31 10.31 0 0 1-7.34-3.15 10.46 10.46 0 0 1-.26-14 10.13 10.13 0 0 1 4-2.74 1 1 0 0 1 1.06.22 1 1 0 0 1 .24 1 8.4 8.4 0 0 0 1.94 8.81 8.47 8.47 0 0 0 8.83 1.94 1 1 0 0 1 1.27 1.29A10.16 10.16 0 0 1 19.6 19a10.28 10.28 0 0 1-7.3 3zM7.46 4.92a7.93 7.93 0 0 0-1.37 1.22 8.44 8.44 0 0 0 .2 11.32A8.29 8.29 0 0 0 12.22 20h.08a8.34 8.34 0 0 0 6.78-3.49A10.37 10.37 0 0 1 7.46 4.92z"/></g></g></svg>
@@ -123,7 +131,7 @@ function generateHTML(results: Result[], root: string) {
             <tr>
               <td>
                 <a href="${root}?filename=${result.filename}#${result.hash}">
-                  ${result.filename}
+                  ${escapeHTML(result.filename)}
                 </a>
               </td>
               <td>
@@ -150,3 +158,22 @@ function generateHTML(results: Result[], root: string) {
 </html>
 `.trim();
 }
+
+function defaultFormatName(filename: string) {
+  return decodeURI(filename);
+}
+
+function escapeHTML(str: string) {
+  return str.replace(
+    /[&<>'"]/g,
+    (tag) =>
+      // @ts-expect-error -- umm...
+      ({
+        "&": "&amp;",
+        "<": "&lt;",
+        ">": "&gt;",
+        "'": "&#39;",
+        '"': "&quot;",
+      }[tag])
+  );
+}

src/report.ts

@@ -17,6 +17,12 @@ export function script() {
     localStorage.setItem("theme", next);
   });
 
+  const menu = document.querySelector("button#menu")!;
+  menu.addEventListener("click", () => {
+    const fileList = document.querySelector("details#files" as "details")!;
+    fileList.open = !fileList.open;
+  });
+
   const url = new URL(window.location.href);
   const filename = url.searchParams.get("filename");
 

src/styles.css

@@ -1,14 +1,16 @@
 :root[data-theme="light"] {
   --text: rgba(60, 60, 67);
-  --text-accaccent: #3451b2;
+  --text-accent: #3451b2;
   --bg: #ffffff;
+  --bg-invert: #1b1b1f;
   --border: #c2c2c4;
 }
 
 :root[data-theme="dark"] {
-  --text-accaccent: #a8b1ff;
+  --text-accent: #a8b1ff;
   --text: rgba(255, 255, 245, 0.86);
   --bg: #1b1b1f;
+  --bg-invert: #ffffff;
   --border: #3c3f44;
 }
 
@@ -46,7 +48,8 @@ h1 {
   margin: 2rem;
 }
 
-button#theme-toggle {
+button#theme-toggle,
+button#menu {
   width: 3rem;
   height: 3rem;
   border: 0;
@@ -55,33 +58,28 @@ button#theme-toggle {
   background-color: transparent;
   position: absolute;
   top: 1rem;
-  right: 1rem;
   cursor: pointer;
+  fill: var(--bg-invert);
 }
 
-#theme-icon-light {
-  fill: #ffffff;
+button#theme-toggle {
+  right: 1rem;
 }
 
-#theme-icon-dark {
-  fill: #1b1b1f;
+button#menu {
+  right: 5rem;
 }
 
 a {
-  color: var(--text-accaccent);
+  color: var(--text-accent);
 }
 
 details#files {
   margin: 2rem;
 }
 
-summary {
-  display: inline-block;
-  list-style: none;
-  color: var(--text-accaccent);
-  text-decoration: underline;
-  cursor: pointer;
-  margin-bottom: 1rem;
+details#files summary {
+  display: none;
 }
 
 table {