Implement sourcemap visualizer feature with UI controls

Co-authored-by: sapphi-red <[email protected]>

Author: Copilot

app/components/Navbar.vue

@@ -7,6 +7,7 @@ import {
   DEFAULT_ENTRY,
   defaultFiles,
   files,
+  sourcemapEnabled,
   timeCost,
 } from '~/state/bundler'
 import { handleDownloadProject } from '~/utils/download'
@@ -83,6 +84,19 @@ function resetState() {
         <span op80>{{ timeCost }}ms</span>
       </div>
 
+      <label
+        flex
+        cursor-pointer
+        items-center
+        gap1
+        text-sm
+        title="Generate source maps for visualization"
+      >
+        <input v-model="sourcemapEnabled" type="checkbox" class="mr-1" />
+        <div i-ri:map-line op60 />
+        <span op80>Sourcemap</span>
+      </label>
+
       <button title="Reset State" nav-button @click="resetState">
         <div i-ri:refresh-line />
       </button>

app/components/OutputContainer.vue

@@ -1,7 +1,13 @@
 <script setup lang="ts">
 import ansis from 'ansis'
 import { build } from '~/composables/bundler'
-import { CONFIG_FILES, currentVersion, files, timeCost } from '~/state/bundler'
+import {
+  CONFIG_FILES,
+  currentVersion,
+  files,
+  sourcemapEnabled,
+  timeCost,
+} from '~/state/bundler'
 
 const { data: rolldownVersions } = await useRolldownVersions()
 
@@ -73,6 +79,14 @@ const { data, status, error, refresh } = useAsyncData(
     const startTime = performance.now()
 
     try {
+      // Ensure sourcemap is enabled if the state is set
+      if (sourcemapEnabled.value && !configObject.output?.sourcemap) {
+        if (!configObject.output) {
+          configObject.output = {}
+        }
+        configObject.output.sourcemap = true
+      }
+
       const result = await build(core, files.value, entries, configObject)
       return result
     } finally {
@@ -82,7 +96,7 @@ const { data, status, error, refresh } = useAsyncData(
   { server: false, deep: false },
 )
 
-watch([files, currentVersion], () => refresh(), {
+watch([files, currentVersion, sourcemapEnabled], () => refresh(), {
   deep: true,
 })
 
@@ -110,6 +124,31 @@ const errorText = computed(() => {
   }
   return `${str}\n\n${stack && str !== stack ? `${stack}\n` : ''}`
 })
+
+// Helper function for UTF-8 encoding (needed for sourcemap visualization with unicode)
+const utf16ToUTF8 = (str: string) => unescape(encodeURIComponent(str))
+
+const sourcemapLinks = computed(() => {
+  if (!data.value?.output || !data.value?.sourcemaps) return {}
+
+  const links: Record<string, string> = {}
+
+  for (const [fileName, code] of Object.entries(data.value.output)) {
+    const sourcemap = data.value.sourcemaps[fileName]
+    if (code && sourcemap) {
+      // Encode for source map visualization
+      const encodedCode = utf16ToUTF8(code)
+      const encodedMap = utf16ToUTF8(sourcemap)
+      const hash = btoa(
+        `${encodedCode.length}\0${encodedCode}${encodedMap.length}\0${encodedMap}`,
+      )
+      links[fileName] =
+        `https://evanw.github.io/source-map-visualization/#${hash}`
+    }
+  }
+
+  return links
+})
 </script>
 
 <template>
@@ -133,14 +172,32 @@ const errorText = computed(() => {
       w-full
       flex-1
     >
-      <CodeEditor
-        :model-value="data?.output[value] || ''"
-        language="javascript"
-        readonly
-        min-h-0
-        w-full
-        flex-1
-      />
+      <div min-h-0 w-full flex flex-1 flex-col>
+        <CodeEditor
+          :model-value="data?.output[value] || ''"
+          language="javascript"
+          readonly
+          min-h-0
+          w-full
+          flex-1
+        />
+        <a
+          v-if="sourcemapLinks[value]"
+          class="m-2 flex items-center self-start text-sm opacity-80"
+          :href="sourcemapLinks[value]"
+          target="_blank"
+          rel="noopener"
+        >
+          <span
+            class="text-[#3c3c43] font-medium dark:text-[#fffff5]/[.86] hover:text-[#3451b2] dark:hover:text-[#a8b1ff]"
+          >
+            Visualize source map
+          </span>
+          <div
+            class="i-ri:arrow-right-up-line ml-1 h-3 w-3 text-[#3c3c43]/[.56] dark:text-[#fffff5]/[.6]"
+          />
+        </a>
+      </div>
     </Tabs>
     <div
       v-if="status === 'success' && data?.warnings?.length"

app/composables/bundler.ts

@@ -3,6 +3,7 @@ import type { InputOptions, OutputOptions } from '@rolldown/browser'
 
 export interface TransformResult {
   output: Record<string, string>
+  sourcemaps?: Record<string, string>
   warnings?: string[]
 }
 
@@ -61,8 +62,21 @@ export async function build(
           ],
     ),
   )
+
+  const sourcemaps = Object.fromEntries(
+    result.output
+      .filter((chunk) => chunk.type === 'chunk' && (chunk as any).map)
+      .map((chunk) => [
+        chunk.fileName,
+        typeof (chunk as any).map === 'string'
+          ? (chunk as any).map
+          : JSON.stringify((chunk as any).map),
+      ]),
+  )
+
   return {
     output,
+    sourcemaps: Object.keys(sourcemaps).length > 0 ? sourcemaps : undefined,
     warnings,
   }
 }

app/state/bundler.ts

@@ -22,5 +22,6 @@ export const defaultFiles = () => {
 export const files = ref<SourceFileMap>(defaultFiles())
 export const activeFile = ref<string>()
 export const timeCost = ref<number>()
+export const sourcemapEnabled = ref<boolean>(false)
 
 export const currentVersion = ref<string>('latest')