fix(devtools): avoid infinite recursion

client/app.vue

@@ -3,26 +3,52 @@ import 'floating-vue/dist/style.css'
 import { useLocalStorage } from '@vueuse/core'
 import {
   envTab,
-  globalDebug,
   path,
   refreshSources,
 } from './util/logic'
 import {
+  appFetch,
   colorMode,
   computed,
-  fetchGlobalDebug,
   highlight,
+  useAsyncData,
   useHead,
 } from '#imports'
-import { fetchPageDebug } from '~/composables/fetch'
 
 useHead({
-  title: 'Nuxt Simple Robots',
+  title: 'Nuxt Robots',
 })
 
-globalDebug.value = await fetchGlobalDebug()
+const globalDebugFetch = useAsyncData<{ indexable: boolean, hints: string[], runtimeConfig: { version: string } }>(() => {
+  if (!appFetch.value || typeof appFetch.value !== 'function') {
+    return null
+  }
+  const query: Record<string, any> = {}
+  if (envTab.value === 'Production')
+    query.mockProductionEnv = true
+  return appFetch.value('/__robots__/debug.json', {
+    query,
+  })
+}, {
+  watch: [envTab, appFetch],
+})
+const { data: globalDebug } = globalDebugFetch
 
-const pathDebug = await fetchPageDebug()
+const pathDebug = useAsyncData<any>(() => {
+  if (!appFetch.value || typeof appFetch.value !== 'function') {
+    return null
+  }
+  const query: Record<string, any> = {
+    path: path.value,
+  }
+  if (envTab.value === 'Production')
+    query.mockProductionEnv = true
+  return appFetch.value('/__robots__/debug-path.json', {
+    query,
+  })
+}, {
+  watch: [envTab, path, appFetch],
+})
 
 const pathDebugData = computed(() => pathDebug.data?.value)
 
@@ -33,7 +59,7 @@ useHead({
   },
 })
 
-const globalDebugData = computed(() => globalDebug.value?.data)
+const globalDebugData = computed(() => globalDebug.value || {})
 
 const version = computed(() => {
   return globalDebugData.value?.runtimeConfig?.version || ''
@@ -142,11 +168,11 @@ const tab = useLocalStorage('nuxt-robots:tab', 'overview')
     </header>
     <div class="flex-row flex p4 h-full" style="min-height: calc(100vh - 64px);">
       <main class="mx-auto flex flex-col w-full bg-white dark:bg-black dark:bg-dark-700 bg-light-200 ">
-        <div v-if="globalDebug!.pending">
+        <div v-if="!globalDebug || globalDebugFetch.status.value === 'pending'">
           <NLoading />
         </div>
-        <div v-if="globalDebug!.error">
-          {{ globalDebug!.error }}
+        <div v-else-if="globalDebugFetch.error.value">
+          {{ globalDebugFetch.error.value }}
         </div>
         <div v-else-if="tab === 'overview'" class="h-full relative max-h-full">
           <fieldset

client/components/OSectionBlock.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useVModel } from '@vueuse/core'
+import { ref } from '#imports'
 
 const props = withDefaults(
   defineProps<{
@@ -20,9 +20,14 @@ const props = withDefaults(
   },
 )
 
-const open = useVModel(props, 'open')
+const emits = defineEmits<{
+  'update:modelValue': [value: boolean]
+}>()
+
+const open = ref(props.open)
 function onToggle(e: any) {
   open.value = e.target.open
+  emits('update:modelValue', e.target.open)
 }
 </script>
 

client/composables/rpc.ts

@@ -2,7 +2,7 @@ import { onDevtoolsClientConnected } from '@nuxt/devtools-kit/iframe-client'
 import type { $Fetch } from 'nitropack'
 import { ref, watchEffect } from 'vue'
 import type { NuxtDevtoolsClient, NuxtDevtoolsIframeClient } from '@nuxt/devtools-kit/types'
-import type { ClientFunctions, ServerFunctions } from '../../src/rpc-types'
+import type { ClientFunctions, ServerFunctions } from '../../src/devtools'
 import { globalRefreshTime, path, query, refreshSources } from '~/util/logic'
 
 export const appFetch = ref<$Fetch>()

client/composables/shiki.ts

@@ -4,6 +4,7 @@ import { ref } from 'vue'
 import { useColorMode } from '#imports'
 
 export const shiki = ref<Highlighter>()
+const mode = useColorMode()
 
 // TODO: Only loading when needed
 getHighlighter({
@@ -18,7 +19,6 @@ getHighlighter({
 }).then((i) => { shiki.value = i })
 
 export function highlight(code: string, lang: BundledLanguage) {
-  const mode = useColorMode()
   if (!shiki.value)
     return code
   return shiki.value.codeToHtml(code, {

client/util/logic.ts

@@ -1,11 +1,9 @@
 import { computed, ref } from 'vue'
 import { useDebounceFn, useLocalStorage } from '@vueuse/core'
 import { withBase } from 'ufo'
-import type { _AsyncData } from '#app/composables/asyncData'
 
 export const envTab = useLocalStorage('nuxt-robots:env-tab', 'Production')
 
-export const globalDebug = ref<_AsyncData<{ indexable: boolean, hints: string[], runtimeConfig: { version: string } }, any>>()
 export const refreshTime = ref(Date.now())
 export const globalRefreshTime = ref(Date.now())