feat(self-inspect): add shared state viewer/editor (#240)

Co-authored-by: Claude Haiku 4.5 <noreply@anthropic.com>

Author: antfu

packages/self-inspect/package.json

@@ -40,6 +40,7 @@
   },
   "devDependencies": {
     "@unocss/nuxt": "catalog:build",
+    "@visual-json/vue": "catalog:frontend",
     "@vueuse/core": "catalog:frontend",
     "@vueuse/nuxt": "catalog:build",
     "structured-clone-es": "catalog:deps",

packages/self-inspect/src/app/app.vue

@@ -16,6 +16,7 @@ const navItems = [
   { title: 'Docks', to: '/docks', icon: 'i-ph-layout-duotone' },
   { title: 'Client Scripts', to: '/scripts', icon: 'i-ph-code-duotone' },
   { title: 'Plugins', to: '/plugins', icon: 'i-ph-puzzle-piece-duotone' },
+  { title: 'Shared State', to: '/state', icon: 'i-ph-database-duotone' },
   { title: 'Auth Tokens', to: '/auth', icon: 'i-ph-key-duotone' },
 ]
 

packages/self-inspect/src/app/components/SharedStateView.vue

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { JsonEditor } from '@visual-json/vue'
+import { nanoid } from '@vitejs/devtools-kit/utils/nanoid'
+import { computed, ref, shallowRef, watch } from 'vue'
+import { useRpc } from '../composables/rpc'
+
+const props = defineProps<{
+  keys: string[]
+}>()
+
+const rpc = useRpc()
+const showInternal = ref(false)
+const selectedKey = ref<string>()
+
+const filteredKeys = computed(() => {
+  if (showInternal.value)
+    return props.keys
+  return props.keys.filter(key => !key.startsWith('devtoolskit:internal:') && !key.startsWith('__'))
+})
+const stateValue = shallowRef<any>()
+const loading = ref(false)
+
+async function loadState(key: string) {
+  loading.value = true
+  try {
+    stateValue.value = await rpc.value.call('devtoolskit:internal:rpc:server-state:get', key)
+  }
+  finally {
+    loading.value = false
+  }
+}
+
+watch(selectedKey, (key) => {
+  stateValue.value = undefined
+  if (key)
+    loadState(key)
+})
+
+function selectKey(key: string) {
+  selectedKey.value = key
+}
+
+async function handleChange(value: any) {
+  if (!selectedKey.value)
+    return
+  const syncId = nanoid()
+  stateValue.value = value
+  await rpc.value.call('devtoolskit:internal:rpc:server-state:set', selectedKey.value, value, syncId)
+}
+</script>
+
+<template>
+  <div flex="~" h-full of-hidden>
+    <!-- Keys list -->
+    <div w-60 shrink-0 border="r base" flex="~ col" of-hidden>
+      <div px3 py2 text-xs op60 border="b base" flex="~ items-center justify-between">
+        <span>{{ filteredKeys.length }} shared states</span>
+        <label flex="~ items-center gap-1" cursor-pointer>
+          <input v-model="showInternal" type="checkbox">
+          <span>Internal</span>
+        </label>
+      </div>
+      <div flex-1 of-auto>
+        <button
+          v-for="key in filteredKeys" :key="key"
+          block w-full text-left
+          px3 py2 text-sm font-mono
+          border="b base"
+          hover:bg-active transition-colors
+          :class="selectedKey === key ? 'bg-active! text-primary' : 'op70'"
+          @click="selectKey(key)"
+        >
+          {{ key }}
+        </button>
+      </div>
+    </div>
+
+    <!-- State viewer/editor -->
+    <div flex-1 of-auto>
+      <div v-if="!selectedKey" flex="~ items-center justify-center" h-full op40 text-sm>
+        Select a shared state to inspect
+      </div>
+      <VisualLoading v-else-if="loading" />
+      <div v-else-if="stateValue !== undefined" h-full>
+        <JsonEditor
+          :value="stateValue"
+          height="100%"
+          @change="handleChange"
+        />
+      </div>
+    </div>
+  </div>
+</template>

packages/self-inspect/src/app/pages/state.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { useRpc } from '#imports'
+import { onMounted, shallowRef } from 'vue'
+import { useRefreshProvider } from '../composables/refresh'
+
+const rpc = useRpc()
+const keys = shallowRef<string[]>()
+
+async function fetchData() {
+  keys.value = await rpc.value.call('devtoolskit:self-inspect:get-shared-state-keys')
+}
+
+useRefreshProvider(fetchData)
+onMounted(fetchData)
+</script>
+
+<template>
+  <VisualLoading v-if="!keys" />
+  <SharedStateView v-else :keys="keys" />
+</template>

packages/self-inspect/src/node/rpc/functions/get-shared-state-keys.ts

@@ -0,0 +1,13 @@
+import { defineRpcFunction } from '@vitejs/devtools-kit'
+
+export const getSharedStateKeys = defineRpcFunction({
+  name: 'devtoolskit:self-inspect:get-shared-state-keys',
+  type: 'query',
+  setup: (context) => {
+    return {
+      handler: async () => {
+        return context.rpc.sharedState.keys()
+      },
+    }
+  },
+})

packages/self-inspect/src/node/rpc/index.ts

@@ -4,6 +4,7 @@ import { getClientScripts } from './functions/get-client-scripts'
 import { getDevtoolsPlugins } from './functions/get-devtools-plugins'
 import { getDocks } from './functions/get-docks'
 import { getRpcFunctions } from './functions/get-rpc-functions'
+import { getSharedStateKeys } from './functions/get-shared-state-keys'
 import { revokeAuthTokenRpc } from './functions/revoke-auth-token'
 import '@vitejs/devtools-kit'
 
@@ -13,6 +14,7 @@ export const rpcFunctions = [
   getClientScripts,
   getDevtoolsPlugins,
   getAuthTokens,
+  getSharedStateKeys,
   revokeAuthTokenRpc,
 ] as const
 

pnpm-lock.yaml

@@ -90,6 +90,7 @@ catalogs:
     '@floating-ui/dom': ^1.7.6
     '@json-render/core': 0.13.0
     '@json-render/vue': 0.13.0
+    '@visual-json/vue': ^0.3.1
     '@vueuse/components': ^14.2.1
     '@vueuse/core': ^14.2.1
     '@vueuse/router': ^14.2.1