fix: introduce client.revision to trigger state editor update

Author: antfu

packages/devtools-kit/src/_types/client-api.ts

@@ -105,6 +105,11 @@ export interface NuxtDevtoolsHostClient {
     loading: () => LoadingTimeMetric
   }
 
+  /**
+   * A counter to trigger reactivity updates
+   */
+  revision: Ref<number>
+
   /**
    * Update client
    * @internal

packages/devtools-kit/src/runtime/iframe-client.ts

@@ -47,7 +47,9 @@ export function useDevtoolsClient() {
   }
 
   function onUpdateReactivity() {
-    triggerRef(clientRef!)
+    if (clientRef) {
+      triggerRef(clientRef)
+    }
   }
 
   function setup(client: NuxtDevtoolsIframeClient) {

packages/devtools/client/components/StateEditor.vue

@@ -4,6 +4,7 @@ import JsonEditorVue from 'json-editor-vue'
 const props = defineProps<{
   name?: string
   open?: boolean
+  revision?: number
   state?: any
   readonly?: boolean
 }>()
@@ -17,8 +18,6 @@ const colorMode = useColorMode()
 const proxy = shallowRef()
 const error = shallowRef()
 
-const state = useState(props.name)
-
 function clone() {
   error.value = undefined
   try {
@@ -38,13 +37,13 @@ let watcher: ReturnType<typeof watchPausable> | undefined
 onMounted(() => {
   clone()
 
-  watcher = watchPausable(
-    proxy,
+  watch(
+    () => [props.revision, props.state],
     (value) => {
       if (typeof value !== 'number' && typeof value !== 'string')
         deepSync(value, props.state)
       else
-        state.value = value
+        proxy.value = props.state
     },
     { deep: true },
   )

packages/devtools/client/components/StateGroup.vue

@@ -2,6 +2,7 @@
 withDefaults(
   defineProps<{
     state?: Record<string, any>
+    revision?: number
     prefix?: string
   }>(),
   {
@@ -16,6 +17,7 @@ withDefaults(
       <StateEditor
         v-for="value, key of state"
         :key="key"
+        :revision="revision"
         :state="value"
         :name="key.startsWith(prefix) ? key.slice(prefix.length) : key"
       >

packages/devtools/client/composables/utils.ts

@@ -170,6 +170,7 @@ export function refreshData() {
 
   nuxt.hooks.callHookParallel('app:data:refresh', Object.keys(nuxt.payload.data))
   triggerRef(client)
+  client.value.revision.value += 1
 }
 
 export function reloadPage() {

packages/devtools/client/pages/modules/payload.vue

@@ -12,6 +12,7 @@ definePageMeta({
 
 const client = useClient()
 const payload = computed(() => client.value?.nuxt.payload)
+const revision = computed(() => client.value?.revision.value)
 
 async function refreshData(keys?: string[]) {
   await client.value?.nuxt.hooks.callHookParallel('app:data:refresh', keys)
@@ -27,7 +28,9 @@ async function refreshData(keys?: string[]) {
       :padding="false"
     >
       <StateGroup
-        :state="payload.state" prefix="$s"
+        :state="payload.state"
+        :revision="revision"
+        prefix="$s"
       />
     </NSectionBlock>
     <NSectionBlock
@@ -45,7 +48,10 @@ async function refreshData(keys?: string[]) {
           Re-fetch all data
         </NButton>
       </template>
-      <StateGroup :state="payload.data">
+      <StateGroup
+        :state="payload.data"
+        :revision="revision"
+      >
         <template #actions="{ isOpen, name }">
           <NButton
             v-if="isOpen && name"
@@ -67,6 +73,7 @@ async function refreshData(keys?: string[]) {
       <StateEditor
         ml--6
         :state="payload.functions"
+        :revision="revision"
       />
     </NSectionBlock>
   </div>

packages/devtools/client/pages/modules/runtime-configs.vue

@@ -13,6 +13,7 @@ definePageMeta({
 const client = useClient()
 const runtimeConfig = useServerRuntimeConfig()
 const payload = computed(() => client.value?.nuxt.payload)
+const revision = computed(() => client.value?.revision.value)
 
 const privateConfig = computed(() => {
   const clone = {
@@ -31,15 +32,21 @@ const privateConfig = computed(() => {
       text="App Config"
       :padding="false"
     >
-      <StateEditor :state="client.app.appConfig" />
+      <StateEditor
+        :state="client.app.appConfig"
+        :revision="revision"
+      />
     </NSectionBlock>
 
     <NSectionBlock
       icon="carbon-settings"
       text="Public Runtime Config"
       :padding="false"
     >
-      <StateEditor :state="payload.config?.public" />
+      <StateEditor
+        :state="payload.config?.public"
+        :revision="revision"
+      />
     </NSectionBlock>
 
     <NSectionBlock
@@ -49,7 +56,11 @@ const privateConfig = computed(() => {
       :padding="false"
       description="These values are not exposed to the client. Readonly in the DevTools."
     >
-      <StateEditor :state="privateConfig" readonly />
+      <StateEditor
+        :state="privateConfig"
+        :revision="revision"
+        readonly
+      />
     </NSectionBlock>
   </div>
 

packages/devtools/client/plugins/global.ts

@@ -5,6 +5,7 @@ export default defineNuxtPlugin(() => {
 
   function onUpdateReactivity() {
     triggerRef(client)
+    client.value.revision.value += 1
   }
 
   function onInspectorUpdate(data: any) {

packages/devtools/src/runtime/plugins/view/client.ts

@@ -100,6 +100,8 @@ export async function setupDevToolsClient({
       clientTimeline: () => timeline,
       loading: () => timeMetric,
     },
+
+    revision: ref(0),
   })
 
   window.__NUXT_DEVTOOLS_HOST__ = client