feat: cancel auto-delete timer when log entry is selected (#275)

Author: JianJroh

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

@@ -18,6 +18,8 @@ const logStatus = ref<'idle' | 'loading'>('idle')
 const logId = ref('')
 const logDescription = ref('')
 const logStacktrace = ref('')
+const logAutoDismiss = ref<number>()
+const logAutoDelete = ref<number>()
 
 // Update form
 const updateId = ref('')
@@ -56,6 +58,8 @@ async function addLog() {
     id: logId.value || undefined,
     description: logDescription.value || undefined,
     stacktrace: logStacktrace.value || undefined,
+    autoDismiss: logAutoDismiss.value,
+    autoDelete: logAutoDelete.value,
   })
 }
 
@@ -231,6 +235,14 @@ function incrementCounter() {
           <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>
+        <label flex="~ col gap-1">
+          <span op50 text-xs>Auto Dismiss</span>
+          <input v-model="logAutoDismiss" type="number" border="~ base" rounded px2 py1 text-sm bg-transparent outline-none>
+        </label>
+        <label flex="~ col gap-1">
+          <span op50 text-xs>Auto Delete</span>
+          <input v-model="logAutoDelete" type="number" border="~ base" rounded px2 py1 text-sm bg-transparent outline-none>
+        </label>
       </div>
       <div flex items-center gap-3 mt2>
         <label flex items-center gap-1 text-xs>

packages/core/src/client/webcomponents/components/views-builtin/ViewBuiltinLogs.vue

@@ -2,7 +2,7 @@
 import type { DevToolsLogEntry, DevToolsLogEntryFrom, DevToolsLogLevel } from '@vitejs/devtools-kit'
 import type { DocksContext } from '@vitejs/devtools-kit/client'
 import { useClipboard, useTimeAgo } from '@vueuse/core'
-import { computed, onMounted, ref } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import { markLogsAsRead, useLogs } from '../../state/logs'
 import FilterToggles from '../display/FilterToggles.vue'
 import HashBadge from '../display/HashBadge.vue'
@@ -161,6 +161,13 @@ const selectedEntry = computed(() => {
   return logsState.entries.find(e => e.id === selectedId.value) ?? null
 })
 
+watch(selectedEntry, async (entry) => {
+  if (!entry?.autoDelete)
+    return
+
+  await props.context.rpc.call('devtoolskit:internal:logs:update', entry.id, { autoDelete: 0 })
+})
+
 const selectedTimeAgo = useTimeAgo(computed(() => selectedEntry.value?.timestamp ?? Date.now()))
 const { copy: copyStacktrace, copied: stacktraceCopied } = useClipboard()