From c79531a1584a09542ba9e3d08065a40b1c314cf2 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Thu, 10 Aug 2023 12:08:23 +0200
Subject: [PATCH] refactor!: orangize internal host client interface (#381)

---
 .../devtools-kit/src/_types/client-api.ts     |  68 ++++++-----
 packages/devtools/client/app.vue              |   4 +-
 .../client/components/RestartDialogs.vue      |   2 +-
 .../client/components/TimelineView.vue        |   2 +-
 .../devtools/client/pages/modules/hooks.vue   |   2 +-
 .../client/pages/modules/overview.vue         |  15 +--
 .../devtools/client/pages/modules/plugins.vue |   4 +-
 .../client/pages/modules/runtime-configs.vue  |   2 +-
 packages/devtools/client/pages/settings.vue   |   4 +-
 packages/devtools/client/plugins/global.ts    |   2 +
 .../src/runtime/plugins/view/FrameBox.vue     |   2 +-
 .../src/runtime/plugins/view/Main.vue         |   6 +-
 .../src/runtime/plugins/view/client.ts        | 114 +++++++++++-------
 13 files changed, 133 insertions(+), 94 deletions(-)

diff --git a/packages/devtools-kit/src/_types/client-api.ts b/packages/devtools-kit/src/_types/client-api.ts
index 9eba1e8f31..8fce4ecd92 100644
--- a/packages/devtools-kit/src/_types/client-api.ts
+++ b/packages/devtools-kit/src/_types/client-api.ts
@@ -42,6 +42,14 @@ export interface NuxtDevtoolsClientHooks {
    * Triggers reactivity manually, since Vue won't be reactive across frames)
    */
   'host:update:reactivity': () => void
+  /**
+   * Host action to control the DevTools navigation
+   */
+  'host:action:navigate': (path: string) => void
+  /**
+   * Host action to reload the DevTools
+   */
+  'host:action:reload': () => void
 }
 
 /**
@@ -49,10 +57,9 @@ export interface NuxtDevtoolsClientHooks {
  */
 export interface NuxtDevtoolsHostClient {
   nuxt: NuxtApp
-  appConfig: AppConfig
   hooks: Hookable<NuxtDevtoolsClientHooks>
 
-  colorMode: Ref<'dark' | 'light'>
+  getIframe(): HTMLIFrameElement | undefined
 
   inspector?: {
     instance?: VueInspectorClient
@@ -62,38 +69,45 @@ export interface NuxtDevtoolsHostClient {
     isEnabled: Ref<boolean>
   }
 
-  loadingTimeMetrics: LoadingTimeMetric
-  getClientHooksMetrics(): HookInfo[]
-
-  clientPluginMetrics: PluginMetric[] | undefined
-  clientTimelineMetrics: TimelineMetrics | undefined
-
-  reloadPage(): void
+  devtools: {
+    close(): void
+    open(): void
+    toggle(): void
+    reload(): void
+    navigate(path: string): void
+
+    /**
+     * Popup the DevTools frame into Picture-in-Picture mode
+     *
+     * Requires Chrome 111 with experimental flag enabled.
+     *
+     * Function is undefined when not supported.
+     *
+     * @see https://developer.chrome.com/docs/web-platform/document-picture-in-picture/
+     */
+    popup?(): any
+  }
 
-  close(): void
-  open(): void
-  toggle(): void
+  app: {
+    reload(): void
+    navigate(path: string, hard?: boolean): void
+    appConfig: AppConfig
+    colorMode: Ref<'dark' | 'light'>
+    frameState: Ref<DevToolsFrameState>
+  }
 
-  /**
-   * Popup the DevTools frame into Picture-in-Picture mode
-   *
-   * Requires Chrome 111 with experimental flag enabled.
-   *
-   * Function is undefined when not supported.
-   *
-   * @see https://developer.chrome.com/docs/web-platform/document-picture-in-picture/
-   */
-  popup?(): any
+  metrics: {
+    clientHooks(): HookInfo[]
+    clientPlugins(): PluginMetric[] | undefined
+    clientTimeline(): TimelineMetrics | undefined
+    loading(): LoadingTimeMetric
+  }
 
   /**
    * Update client
    * @internal
    */
-  updateClient(): NuxtDevtoolsHostClient
-
-  getIframe(): HTMLIFrameElement | undefined
-
-  frameState: Ref<DevToolsFrameState>
+  syncClient(): NuxtDevtoolsHostClient
 }
 
 export interface NuxtDevtoolsClient {
diff --git a/packages/devtools/client/app.vue b/packages/devtools/client/app.vue
index ef40a01e43..5f7c764dcc 100644
--- a/packages/devtools/client/app.vue
+++ b/packages/devtools/client/app.vue
@@ -36,7 +36,7 @@ const isUtilityView = computed(() => route.path.startsWith('/__'))
 const waiting = computed(() => !client.value && !showConnectionWarning.value)
 
 watch(
-  () => client.value?.colorMode.value,
+  () => client.value?.app.colorMode.value,
   (mode) => {
     if (mode)
       colorMode.value = mode
@@ -46,7 +46,7 @@ watch(
 
 addEventListener('keydown', (e) => {
   if (e.code === 'KeyD' && e.altKey) {
-    client.value?.close()
+    client.value?.devtools.close()
     e.preventDefault()
   }
 })
diff --git a/packages/devtools/client/components/RestartDialogs.vue b/packages/devtools/client/components/RestartDialogs.vue
index 00b8efded3..b23e45ea6e 100644
--- a/packages/devtools/client/components/RestartDialogs.vue
+++ b/packages/devtools/client/components/RestartDialogs.vue
@@ -17,7 +17,7 @@ nuxt.hook('devtools:terminal:exit', ({ id, code }) => {
           if (result) {
             rpc.restartNuxt()
             setTimeout(() => {
-              client.value?.reloadPage()
+              client.value?.app.reload()
             }, 500)
           }
         })
diff --git a/packages/devtools/client/components/TimelineView.vue b/packages/devtools/client/components/TimelineView.vue
index 2e29eb95e5..1b787ab71f 100644
--- a/packages/devtools/client/components/TimelineView.vue
+++ b/packages/devtools/client/components/TimelineView.vue
@@ -6,7 +6,7 @@ const client = useClient()
 const view = ref<'table' | 'list'>('table')
 const selected = ref<TimelineEvent | undefined>()
 
-const metrics = computed(() => client.value?.clientTimelineMetrics)
+const metrics = computed(() => client.value?.metrics.clientTimeline())
 
 function clear() {
   if (metrics.value)
diff --git a/packages/devtools/client/pages/modules/hooks.vue b/packages/devtools/client/pages/modules/hooks.vue
index f4adfef317..2f597ba80c 100644
--- a/packages/devtools/client/pages/modules/hooks.vue
+++ b/packages/devtools/client/pages/modules/hooks.vue
@@ -7,7 +7,7 @@ definePageMeta({
 
 const serverHooks = useServerHooks()
 const client = useClient()
-const clientHooks = computed(() => client.value?.getClientHooksMetrics())
+const clientHooks = computed(() => client.value?.metrics.clientHooks())
 </script>
 
 <template>
diff --git a/packages/devtools/client/pages/modules/overview.vue b/packages/devtools/client/pages/modules/overview.vue
index f916c8746d..bfe0be62f1 100644
--- a/packages/devtools/client/pages/modules/overview.vue
+++ b/packages/devtools/client/pages/modules/overview.vue
@@ -22,6 +22,7 @@ function goIntro() {
 }
 
 const vueVersion = computed(() => client.value?.nuxt.vueApp.version)
+const metricsLoading = computed(() => client.value?.metrics.loading())
 </script>
 
 <template>
@@ -87,35 +88,35 @@ const vueVersion = computed(() => client.value?.nuxt.vueApp.version)
             <div carbon-plug text-3xl />
             <div>{{ config.plugins.length }} plugins</div>
           </NuxtLink>
-          <div v-if="client?.loadingTimeMetrics" pointer-events-none min-w-40 p4 theme-card-lime flex="~ auto gap-6">
+          <div v-if="metricsLoading" pointer-events-none min-w-40 p4 theme-card-lime flex="~ auto gap-6">
             <div i-carbon-time-plot flex-none text-3xl />
             <div grid="~ cols-[auto_auto] gap-x-5 items-center">
-              <template v-if="client.loadingTimeMetrics.ssrStart">
+              <template v-if="metricsLoading.ssrStart">
                 <div text-sm>
                   SSR to full load
                 </div>
                 <div text-right>
-                  {{ formatDuration(client.loadingTimeMetrics.appLoad! - client.loadingTimeMetrics.ssrStart!) }}
+                  {{ formatDuration(metricsLoading.appLoad! - metricsLoading.ssrStart!) }}
                 </div>
               </template>
               <div text-sm>
                 Page load
               </div>
               <div text-right>
-                {{ formatDuration(client.loadingTimeMetrics.appLoad! - client.loadingTimeMetrics.appInit!) }}
+                {{ formatDuration(metricsLoading.appLoad! - metricsLoading.appInit!) }}
               </div>
               <div text-sm>
                 Navigation
               </div>
               <div text-right>
-                {{ formatDuration(client.loadingTimeMetrics.pageEnd! - client.loadingTimeMetrics.pageStart!) }}
+                {{ formatDuration(metricsLoading.pageEnd! - metricsLoading.pageStart!) }}
               </div>
-              <template v-if="client.loadingTimeMetrics.hmrStart">
+              <template v-if="metricsLoading.hmrStart">
                 <div text-sm>
                   HMR
                 </div>
                 <div text-right>
-                  {{ formatDuration(client.loadingTimeMetrics.hmrEnd! - client.loadingTimeMetrics.hmrStart!) }}
+                  {{ formatDuration(metricsLoading.hmrEnd! - metricsLoading.hmrStart!) }}
                 </div>
               </template>
             </div>
diff --git a/packages/devtools/client/pages/modules/plugins.vue b/packages/devtools/client/pages/modules/plugins.vue
index 2d29d859d4..a29707c1f2 100644
--- a/packages/devtools/client/pages/modules/plugins.vue
+++ b/packages/devtools/client/pages/modules/plugins.vue
@@ -12,7 +12,7 @@ const client = useClient()
 
 const plugins = computed((): PluginInfoWithMetic[] => {
   const plugins = app.value?.plugins || []
-  const metics = client.value?.clientPluginMetrics || []
+  const metics = client.value?.metrics.clientPlugins() || []
 
   return plugins.map((plugin) => {
     const p = typeof plugin === 'string' ? { src: plugin } : plugin
@@ -24,7 +24,7 @@ const plugins = computed((): PluginInfoWithMetic[] => {
 })
 
 const totalTime = computed(() => {
-  const metics = client.value?.clientPluginMetrics || []
+  const metics = client.value?.metrics.clientPlugins() || []
   const minStart = Math.min(...metics.map(m => m.start))
   const maxEnd = Math.max(...metics.map(m => m.end))
   return maxEnd - minStart
diff --git a/packages/devtools/client/pages/modules/runtime-configs.vue b/packages/devtools/client/pages/modules/runtime-configs.vue
index 88a26bc040..1e3634edc2 100644
--- a/packages/devtools/client/pages/modules/runtime-configs.vue
+++ b/packages/devtools/client/pages/modules/runtime-configs.vue
@@ -31,7 +31,7 @@ const privateConfig = computed(() => {
       text="App Config"
       :padding="false"
     >
-      <StateEditor :state="client.appConfig" />
+      <StateEditor :state="client.app.appConfig" />
     </NSectionBlock>
 
     <NSectionBlock
diff --git a/packages/devtools/client/pages/settings.vue b/packages/devtools/client/pages/settings.vue
index a1d9b653d2..baed432e7d 100644
--- a/packages/devtools/client/pages/settings.vue
+++ b/packages/devtools/client/pages/settings.vue
@@ -73,11 +73,11 @@ function pinMove(name: string, delta: number) {
 
 // sync devtools options with frame state
 watchEffect(() => {
-  client.value.frameState.value.closeOnOutsideClick = interactionCloseOnOutsideClick.value
+  client.value.app.frameState.value.closeOnOutsideClick = interactionCloseOnOutsideClick.value
 })
 
 watchEffect(() => {
-  client.value.frameState.value.minimizePanelInactive = minimizePanelInactive.value
+  client.value.app.frameState.value.minimizePanelInactive = minimizePanelInactive.value
 })
 </script>
 
diff --git a/packages/devtools/client/plugins/global.ts b/packages/devtools/client/plugins/global.ts
index f6e78b2a5b..0ef51fd376 100644
--- a/packages/devtools/client/plugins/global.ts
+++ b/packages/devtools/client/plugins/global.ts
@@ -27,6 +27,8 @@ export default defineNuxtPlugin(() => {
         _client.hooks.hook('host:update:reactivity', onUpdateReactivity)
         _client.hooks.hook('host:inspector:update', onInspectorUpdate)
         _client.hooks.hook('host:inspector:click', onInspectorClick)
+        _client.hooks.hook('host:action:reload', () => location.reload())
+        _client.hooks.hook('host:action:navigate', (path: string) => router.push(path))
 
         // eslint-disable-next-line no-console
         console.log('[nuxt-devtools] Client connected', _client)
diff --git a/packages/devtools/src/runtime/plugins/view/FrameBox.vue b/packages/devtools/src/runtime/plugins/view/FrameBox.vue
index b3e2535ac7..3303b93331 100644
--- a/packages/devtools/src/runtime/plugins/view/FrameBox.vue
+++ b/packages/devtools/src/runtime/plugins/view/FrameBox.vue
@@ -34,7 +34,7 @@ useEventListener(window, 'keydown', (e: KeyboardEvent) => {
   if (e.key === 'Escape' && props.client.inspector?.isEnabled.value) {
     e.preventDefault()
     props.client.inspector?.disable()
-    props.client.close()
+    props.client.devtools.close()
   }
 })
 
diff --git a/packages/devtools/src/runtime/plugins/view/Main.vue b/packages/devtools/src/runtime/plugins/view/Main.vue
index 07e7c88ef3..523a7db0a8 100644
--- a/packages/devtools/src/runtime/plugins/view/Main.vue
+++ b/packages/devtools/src/runtime/plugins/view/Main.vue
@@ -31,7 +31,7 @@ watchEffect(() => {
 const SNAP_THRESHOLD = 2
 
 const vars = computed(() => {
-  const dark = props.client.colorMode.value === 'dark'
+  const dark = props.client.app.colorMode.value === 'dark'
   return {
     '--nuxt-devtools-widget-bg': dark ? '#111' : '#ffffff',
     '--nuxt-devtools-widget-fg': dark ? '#F5F5F5' : '#111',
@@ -285,7 +285,7 @@ const iframeStyle = computed(() => {
 
 const time = computed(() => {
   let type = ''
-  const metric = props.client.loadingTimeMetrics
+  const metric = props.client.metrics.loading()
   let time = -1
   if (metric.pageEnd && metric.pageStart) {
     time = metric.pageEnd - metric.pageStart
@@ -328,7 +328,7 @@ onMounted(() => {
         class="nuxt-devtools-icon-button nuxt-devtools-nuxt-button"
         title="Toggle Nuxt DevTools"
         :style="state.open ? '' : 'filter:saturate(0)'"
-        @click="client.toggle()"
+        @click="client.devtools.toggle()"
       >
         <svg
           viewBox="0 0 324 324" fill="none" xmlns="http://www.w3.org/2000/svg"
diff --git a/packages/devtools/src/runtime/plugins/view/client.ts b/packages/devtools/src/runtime/plugins/view/client.ts
index aab73ee5bd..7cf26ccb7b 100644
--- a/packages/devtools/src/runtime/plugins/view/client.ts
+++ b/packages/devtools/src/runtime/plugins/view/client.ts
@@ -35,57 +35,79 @@ export async function setupDevToolsClient({
 
   const client: NuxtDevtoolsHostClient = shallowReactive({
     nuxt: markRaw(nuxt as any),
-    appConfig: useAppConfig() as any,
     hooks: createHooks(),
-    getClientHooksMetrics: () => Object.values(clientHooks),
-    clientPluginMetrics: window.__NUXT_DEVTOOLS_PLUGINS_METRIC__,
-    clientTimelineMetrics: timeline,
-    loadingTimeMetrics: timeMetric,
-    reloadPage() {
-      location.reload()
-    },
-    toggle() {
-      if (state.value.open)
-        client.close()
-      else
-        client.open()
-    },
-    close() {
-      if (!state.value.open)
-        return
-      state.value.open = false
-      if (popupWindow.value) {
-        try {
-          popupWindow.value.close()
-        }
-        catch (e) {
+    inspector: getInspectorInstance(),
+
+    getIframe,
+    syncClient,
+
+    devtools: {
+      toggle() {
+        if (state.value.open)
+          client.devtools.close()
+        else
+          client.devtools.open()
+      },
+      close() {
+        if (!state.value.open)
+          return
+        state.value.open = false
+        if (popupWindow.value) {
+          try {
+            popupWindow.value.close()
+          }
+          catch (e) {
+          }
+          popupWindow.value = null
         }
-        popupWindow.value = null
-      }
+      },
+      open() {
+        if (state.value.open)
+          return
+        state.value.open = true
+        return nextTick(() => {
+          client.syncClient()
+        })
+      },
+      async navigate(path: string) {
+        if (!state.value.open)
+          await client.devtools.open()
+        await client.hooks.callHook('host:action:navigate', path)
+      },
+      async reload() {
+        await client.hooks.callHook('host:action:reload')
+      },
     },
-    open() {
-      if (state.value.open)
-        return
-      state.value.open = true
-      nextTick(() => {
-        client.updateClient()
-      })
+
+    app: {
+      appConfig: useAppConfig() as any,
+      reload() {
+        location.reload()
+      },
+      navigate(path: string, hard = false) {
+        if (hard)
+          location.href = path
+        else
+          router.push(path)
+      },
+      colorMode,
+      frameState: state,
+    },
+
+    metrics: {
+      clientPlugins: () => window.__NUXT_DEVTOOLS_PLUGINS_METRIC__,
+      clientHooks: () => Object.values(clientHooks),
+      clientTimeline: () => timeline,
+      loading: () => timeMetric,
     },
-    inspector: getInspectorInstance(),
-    colorMode,
-    getIframe,
-    updateClient,
-    frameState: state,
   })
 
   let iframe: HTMLIFrameElement | undefined
 
-  function updateClient() {
+  function syncClient() {
     if (!client.inspector)
       client.inspector = getInspectorInstance()
 
-    client.clientPluginMetrics = window.__NUXT_DEVTOOLS_PLUGINS_METRIC__
-
     try {
       iframe?.contentWindow?.__NUXT_DEVTOOLS_VIEW__?.setClient(client)
     }
@@ -105,7 +127,7 @@ export async function setupDevToolsClient({
         iframe.src = initialUrl
         iframe.onload = async () => {
           await waitForClientInjection()
-          client.updateClient()
+          client.syncClient()
         }
       }
       catch (e) {
@@ -196,7 +218,7 @@ export async function setupDevToolsClient({
   // https://developer.chrome.com/docs/web-platform/document-picture-in-picture/
   const documentPictureInPicture = window.documentPictureInPicture
   if (documentPictureInPicture?.requestWindow) {
-    client.popup = async () => {
+    client.devtools.popup = async () => {
       const iframe = getIframe()
       if (!iframe)
         return
@@ -233,7 +255,7 @@ export async function setupDevToolsClient({
     }
   }
 
-  client.updateClient()
+  client.syncClient()
 
   const holder = document.createElement('div')
   holder.id = 'nuxt-devtools-container'
@@ -243,7 +265,7 @@ export async function setupDevToolsClient({
   // Shortcut to toggle devtools
   addEventListener('keydown', (e) => {
     if (e.code === 'KeyD' && e.altKey && e.shiftKey)
-      client.toggle()
+      client.devtools.toggle()
   })
 
   const app = createApp({
@@ -349,8 +371,8 @@ function setupReactivity(client: NuxtDevtoolsHostClient, router: Router | undefi
   // trigger update for reactivity
   watch(() => [
     client.nuxt.payload,
-    client.colorMode.value,
-    client.loadingTimeMetrics,
+    client.app.colorMode.value,
+    client.metrics.loading(),
     timeMetric,
   ], () => {
     refreshReactivity()