feat: add link to source map visualization

.github/renovate.json

@@ -1,4 +1,7 @@
 {
   "$schema": "https://docs.renovatebot.com/renovate-schema.json",
-  "extends": ["github>Boshen/renovate", "helpers:pinGitHubActionDigestsToSemver"]
+  "extends": [
+    "github>Boshen/renovate",
+    "helpers:pinGitHubActionDigestsToSemver"
+  ]
 }

src/components/output/CodegenPanel.vue

@@ -1,10 +1,38 @@
 <script setup lang="ts">
+import { computed } from 'vue'
 import { useOxc } from '~/composables/oxc'
 import OutputPreview from './OutputPreview.vue'
 
 const { oxc } = await useOxc()
+
+const sourcemapLink = computed(() => {
+  const code = oxc.value.codegenText
+  const map = oxc.value.codegenSourcemapText
+  if (code && map) {
+    const hash = btoa(`${code.length}\0${code}${map.length}\0${map}`)
+    return `https://evanw.github.io/source-map-visualization/#${hash}`
+  }
+  return ''
+})
 </script>
 
 <template>
-  <OutputPreview :code="oxc.codegenText" lang="tsx" />
+  <div class="w-full flex flex-col overflow-auto">
+    <OutputPreview :code="oxc.codegenText" lang="tsx" />
+    <a
+      v-if="sourcemapLink"
+      class="m-2 flex items-center self-start text-sm opacity-80"
+      :href="sourcemapLink"
+      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>
 </template>

src/components/sidebar/Codegen.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import Checkbox from '~/components/ui/Checkbox.vue'
+import { useOxc } from '~/composables/oxc'
+
+const { options } = await useOxc()
+</script>
+
+<template>
+  <div flex flex-col gap2>
+    <div font-medium>Codegen</div>
+    <Checkbox
+      v-model="options.codegen.enableSourcemap"
+      label="Enable Source Map"
+    />
+  </div>
+</template>

src/components/sidebar/Sidebar.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import Codegen from './Codegen.vue'
 import Linter from './Linter.vue'
 import Logo from './Logo.vue'
 import Minifier from './Minifier.vue'
@@ -23,6 +24,8 @@ import Transformer from './Transformer.vue'
       <Minifier />
       <!-- <Prettier /> -->
       <hr />
+      <Codegen />
+      <hr />
       <OptionsDialog />
     </div>
   </aside>

src/composables/oxc.ts

@@ -38,7 +38,9 @@ export const useOxc = createGlobalState(async () => {
       target: 'es2015',
       isolatedDeclarations: false,
     },
-    codegen: {},
+    codegen: {
+      enableSourcemap: true,
+    },
     minifier: {},
     controlFlow: {
       verbose: false,