fix: use URL hash for local links, SPA mode (#6)

AriPerkkio · web-flow · commit 239f0bc1b81c · 2024-08-31T13:37:00.000+03:00
diff --git a/src/plugin.ts b/src/plugin.ts
@@ -76,7 +76,7 @@ export function sourcemapVisualizer(options?: Options): Plugin {
     async buildEnd() {
       try {
         const filename = `${outDir}/${reportName}`;
-        const html = generateHTML(results, filename);
+        const html = generateHTML(results);
         await fs.writeFile(filename, html, "utf8");
       } catch (error) {
         console.error(error);
@@ -86,7 +86,7 @@ export function sourcemapVisualizer(options?: Options): Plugin {
   };
 }
 
-function generateHTML(results: Result[], root: string) {
+function generateHTML(results: Result[]) {
   // prettier-ignore
   return `
 <!DOCTYPE html>
@@ -102,7 +102,7 @@ function generateHTML(results: Result[], root: string) {
 <body>
   <main>
     <h1>
-      <a href="${root}">Vite Source Map Visualizer</a>
+      <a href="#">Vite Source Map Visualizer</a>
     </h1>
 
     <button id="menu" title="Toggle file list">
@@ -130,7 +130,7 @@ function generateHTML(results: Result[], root: string) {
           ${results.map((result) => `
             <tr>
               <td>
-                <a href="${root}?filename=${result.filename}#${result.hash}">
+                <a href="#${result.hash}">
                   ${escapeHTML(result.filename)}
                 </a>
               </td>
diff --git a/src/report.ts b/src/report.ts
@@ -23,18 +23,24 @@ export function script() {
     fileList.open = !fileList.open;
   });
 
-  const url = new URL(window.location.href);
-  const filename = url.searchParams.get("filename");
+  initializePage();
+  addEventListener("hashchange", initializePage);
 
-  if (filename) {
+  function initializePage() {
+    const fileList = document.querySelector("details#files" as "details")!;
     const iframe = document.querySelector(
       "iframe#source-map-visualizer" as "iframe"
     )!;
-    iframe.src = `https://evanw.github.io/source-map-visualization${url.hash}`;
-    iframe.style.display = "block";
 
-    const fileList = document.querySelector("details#files" as "details")!;
-    fileList.open = false;
+    if (window.location.hash) {
+      iframe.src = `https://evanw.github.io/source-map-visualization${window.location.hash}`;
+      iframe.style.display = "block";
+      fileList.open = false;
+    } else {
+      iframe.src = "";
+      iframe.style.display = "none";
+      fileList.open = true;
+    }
   }
 }
 /* v8 ignore stop */
