refactor!: orangize internal host client interface (nuxt#381)

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

@@ -42,17 +42,24 @@ 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
 }
 
 /**
  * Host client from the App
  */
 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 {

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()
   }
 })

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)
           }
         })

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)

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>

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>

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

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

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>
 

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)

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()
   }
 })
 

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"