feat(devtools): improved tracking

Author: harlan-zw

client/app.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { BundledLanguage } from 'shiki'
+import { computed } from 'vue'
+import { renderCodeHighlight } from '../composables/shiki'
+
+const props = withDefaults(
+  defineProps<{
+    code: string
+    lang?: BundledLanguage
+    lines?: boolean
+    transformRendered?: (code: string) => string
+  }>(),
+  {
+    lines: false,
+  },
+)
+const rendered = computed(() => {
+  const code = renderCodeHighlight(props.code, props.lang || 'json')
+  return props.transformRendered ? props.transformRendered(code.value || '') : code.value
+})
+</script>
+
+<template>
+  <pre
+    class="n-code-block"
+    :class="lines ? 'n-code-block-lines' : ''"
+    v-html="rendered"
+  />
+</template>
+
+<style>
+.n-code-block-lines .shiki code .line::before {
+  display: none;
+}
+</style>

client/components/OCodeBlock.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <div class="inline-flex items-center px-2 py-0.5 text-xs font-medium m bg-neutral-700 text-green-300 rounded-full">
+      {{ loadTime }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  loadTime?: string
+}
+
+defineProps<Props>()
+</script>

client/components/ScriptLoadTime.vue

@@ -0,0 +1,15 @@
+<template>
+  <div v-if="size" title="kb Size">
+    <div class="inline-flex items-center px-2 py-0.5 text-xs font-medium bg-neutral-700 text-neutral-300 rounded-full">
+      {{ size }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  size?: string
+}
+
+defineProps<Props>()
+</script>

client/components/ScriptSize.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="flex items-center gap-2">
+    <div
+      class="w-2 h-2 rounded-full"
+      :class="statusColor"
+    />
+    <span class="capitalize text-sm">{{ displayStatus }}</span>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  status?: string
+  error?: string
+}
+
+const props = defineProps<Props>()
+
+const displayStatus = computed(() => {
+  if (props.error) {
+    return props.error === 'TypeError: Failed to fetch' ? 'CORS Error' : props.error
+  }
+  return props.status || 'unknown'
+})
+
+const statusColor = computed(() => {
+  if (props.error) {
+    return 'bg-red-500'
+  }
+
+  switch (props.status) {
+    case 'loaded':
+      return 'bg-green-500'
+    case 'loading':
+      return 'bg-blue-500'
+    case 'awaitingLoad':
+      return 'bg-yellow-500'
+    case 'error':
+      return 'bg-red-500'
+    default:
+      return 'bg-gray-400'
+  }
+})
+</script>

client/components/ScriptStatus.vue

@@ -0,0 +1,35 @@
+import type { HighlighterCore } from 'shiki'
+import { createHighlighterCore } from 'shiki/core'
+import { createJavaScriptRegexEngine } from 'shiki/engine/javascript'
+import { computed, ref, toValue } from 'vue'
+import type { MaybeRef } from '@vueuse/core'
+import { devtools } from './rpc'
+
+export const shiki = ref<HighlighterCore>()
+
+export function loadShiki() {
+  // Only loading when needed
+  return createHighlighterCore({
+    themes: [
+      import('@shikijs/themes/vitesse-light'),
+      import('@shikijs/themes/vitesse-dark'),
+    ],
+    langs: [
+      import('@shikijs/langs/json'),
+      import('@shikijs/langs/typescript'),
+    ],
+    engine: createJavaScriptRegexEngine(),
+  }).then((i) => {
+    shiki.value = i
+  })
+}
+
+export function renderCodeHighlight(code: MaybeRef<string>, lang: 'json' | 'typescript') {
+  return computed(() => {
+    const colorMode = devtools.value?.colorMode || 'light'
+    return shiki.value!.codeToHtml(toValue(code), {
+      lang,
+      theme: colorMode === 'dark' ? 'vitesse-dark' : 'vitesse-light',
+    }) || ''
+  })
+}

client/composables/shiki.ts

@@ -74,7 +74,41 @@ export function useRegistryScript<T extends Record<string | symbol, any>, O = Em
   const scriptInput = defu(finalScriptInput, userOptions.scriptInput, { key: registryKey }) as any as UseScriptInput
   const scriptOptions = Object.assign(userOptions?.scriptOptions || {}, options.scriptOptions || {})
   if (import.meta.dev) {
-    scriptOptions.devtools = defu(scriptOptions.devtools, { registryKey })
+    // Capture where the component was loaded from
+    const error = new Error('Stack trace for component location')
+    const stack = error.stack?.split('\n')
+    const callerLine = stack?.find(line =>
+      line.includes('.vue')
+      && !line.includes('useRegistryScript')
+      && !line.includes('node_modules'),
+    )
+
+    let loadedFrom = 'unknown'
+    if (callerLine) {
+      // Extract URL pattern like "https://localhost:3000/_nuxt/pages/features/custom-registry.vue?t=1758609859248:14:31"
+      // Handle both with and without query parameters
+      const urlMatch = callerLine.match(/https?:\/\/[^/]+\/_nuxt\/(.+\.vue)(?:\?[^)]*)?:(\d+):(\d+)/)
+        || callerLine.match(/\(https?:\/\/[^/]+\/_nuxt\/(.+\.vue)(?:\?[^)]*)?:(\d+):(\d+)\)/)
+
+      if (urlMatch) {
+        const [, filePath, line, column] = urlMatch
+        loadedFrom = `./${filePath}:${line}:${column}`
+      }
+      else {
+        // Try to extract any .vue file path with line:column
+        const vueMatch = callerLine.match(/([^/\s]+\.vue):(\d+):(\d+)/)
+        if (vueMatch) {
+          const [, fileName, line, column] = vueMatch
+          loadedFrom = `./${fileName}:${line}:${column}`
+        }
+        else {
+          // Fallback to original cleaning
+          loadedFrom = callerLine.trim().replace(/^\s*at\s+/, '')
+        }
+      }
+    }
+
+    scriptOptions.devtools = defu(scriptOptions.devtools, { registryKey, loadedFrom })
     if (options.schema) {
       const registryMeta: Record<string, string> = {}
       for (const k in options.schema.entries) {
@@ -107,13 +141,3 @@ export function useRegistryScript<T extends Record<string | symbol, any>, O = Em
   }
   return useScript<T>(scriptInput, scriptOptions as NuxtUseScriptOptions<T>)
 }
-
-export function pick(obj: Record<string, any>, keys: string[]) {
-  const res: Record<string, any> = {}
-  for (const k of keys) {
-    if (k in obj) {
-      res[k] = obj[k]
-    }
-  }
-  return res
-}