feat: add copy button for stacktrace (#260)

Author: JianJroh

packages/core/playground/src/pages/devtools.vue

@@ -17,6 +17,7 @@ const logNotify = ref(false)
 const logStatus = ref<'idle' | 'loading'>('idle')
 const logId = ref('')
 const logDescription = ref('')
+const logStacktrace = ref('')
 
 // Update form
 const updateId = ref('')
@@ -54,6 +55,7 @@ async function addLog() {
     status: logStatus.value === 'loading' ? 'loading' : undefined,
     id: logId.value || undefined,
     description: logDescription.value || undefined,
+    stacktrace: logStacktrace.value || undefined,
   })
 }
 
@@ -225,6 +227,10 @@ function incrementCounter() {
           <span op50 text-xs>Description</span>
           <textarea v-model="logDescription" rows="2" border="~ base" rounded px2 py1 text-sm bg-transparent outline-none resize-y />
         </label>
+        <label flex="~ col gap-1" col-span-2>
+          <span op50 text-xs>Stacktrace</span>
+          <textarea v-model="logStacktrace" rows="3" border="~ base" rounded px2 py1 text-sm bg-transparent outline-none resize-y font-mono />
+        </label>
       </div>
       <div flex items-center gap-3 mt2>
         <label flex items-center gap-1 text-xs>

packages/core/src/client/webcomponents/.generated/css.ts

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { DevToolsLogEntry, DevToolsLogEntryFrom, DevToolsLogLevel } from '@vitejs/devtools-kit'
 import type { DocksContext } from '@vitejs/devtools-kit/client'
-import { useTimeAgo } from '@vueuse/core'
+import { useClipboard, useTimeAgo } from '@vueuse/core'
 import { computed, onMounted, ref } from 'vue'
 import { markLogsAsRead, useLogs } from '../../state/logs'
 import FilterToggles from '../display/FilterToggles.vue'
@@ -162,6 +162,7 @@ const selectedEntry = computed(() => {
 })
 
 const selectedTimeAgo = useTimeAgo(computed(() => selectedEntry.value?.timestamp ?? Date.now()))
+const { copy: copyStacktrace, copied: stacktraceCopied } = useClipboard()
 
 async function openFile(entry: DevToolsLogEntry) {
   if (!entry.filePosition)
@@ -410,7 +411,19 @@ onMounted(() => {
           <div class="op50 text-xs mb-1">
             Stack Trace
           </div>
-          <pre class="text-xs bg-gray/5 rounded p-2 of-x-auto whitespace-pre-wrap font-mono">{{ selectedEntry.stacktrace }}</pre>
+          <div class="group relative">
+            <pre class="text-xs bg-gray/5 rounded p-2 of-x-auto whitespace-pre-wrap font-mono">{{ selectedEntry.stacktrace }}</pre>
+            <button
+              class="group/bt absolute top-1.5 right-1.5 op0 group-hover:op100 p-1 rounded bg-base border border-base transition"
+              title="Copy"
+              @click="copyStacktrace(selectedEntry.stacktrace)"
+            >
+              <div
+                :class="stacktraceCopied ? 'i-ph:check' : 'i-ph:copy'"
+                class="op50 group-hover/bt:op100 size-3.5"
+              />
+            </button>
+          </div>
         </div>
 
         <!-- Timers -->