fix: use explicit imports of types (#715)

Co-authored-by: Anthony Fu <github@antfu.me>

Author: danielroe

docs/package.json

@@ -14,7 +14,7 @@
     "@nuxt/devtools": "^1.4.1",
     "@nuxt/fonts": "^0.7.2",
     "@nuxt/image": "1.8.0",
-    "@nuxt/ui-pro": "^1.4.1",
+    "@nuxt/ui-pro": "^1.4.2",
     "@nuxthq/studio": "^2.0.3",
     "@nuxtjs/plausible": "^1.0.2",
     "@vueuse/core": "^11.0.3",

docs/pnpm-lock.yaml

@@ -1,6 +1,6 @@
 import { shallowRef } from 'vue'
+import type { NuxtDevtoolsHostClient } from '@nuxt/devtools-kit/types'
 import type { Ref } from 'vue'
-import type { NuxtDevtoolsHostClient } from '../types'
 
 let clientRef: Ref<NuxtDevtoolsHostClient | undefined> | undefined
 const fns = [] as ((client: NuxtDevtoolsHostClient) => void)[]

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

@@ -1,6 +1,6 @@
 import { shallowRef, triggerRef } from 'vue'
+import type { NuxtDevtoolsIframeClient } from '@nuxt/devtools-kit/types'
 import type { Ref } from 'vue'
-import type { NuxtDevtoolsIframeClient } from '../types'
 
 let clientRef: Ref<NuxtDevtoolsIframeClient | undefined> | undefined
 const hasSetup = false

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

@@ -40,10 +40,8 @@ function toShortPath(path: string) {
 const files = computed(() => {
   if (!data.value)
     return []
-  return data
-    .value
+  return data.value
     .entries
-    // Hide Nuxt dist files, as they are aliased as `#build`
     .filter(i => !i.id.startsWith(`${data.value?.rootDir || ''}/.nuxt/`))
     .sort((a, b) => a.id.localeCompare(b.id))
 })

packages/devtools/client/pages/modules/virtual-files.vue

@@ -57,15 +57,12 @@ function ${WRAPPER_KEY} (plugin, src) {
             .map(([, name, path]) => ({ name, path }))
 
           content = content.replace(/\nexport default\s*\[([\s\S]*)\]/, (_, itemsRaw: string) => {
-            const items = itemsRaw
-              .split(',')
-              .map(i => i.trim())
-              .map((i) => {
-                const importItem = imports.find(({ name }) => name === i)
-                if (!importItem)
-                  return i
-                return `${WRAPPER_KEY}(${i}, ${JSON.stringify(importItem.path)})`
-              })
+            const items = itemsRaw.split(',').map(i => i.trim()).map((i) => {
+              const importItem = imports.find(({ name }) => name === i)
+              if (!importItem)
+                return i
+              return `${WRAPPER_KEY}(${i}, ${JSON.stringify(importItem.path)})`
+            })
             return `\n${snippets}\nexport default [\n${items.join(',\n')}\n]\n`
           })
 

packages/devtools/src/integrations/plugin-metrics.ts

@@ -1,8 +1,8 @@
 // @unimport-disable
 import { parse as parseStrackTrace } from 'error-stack-parser-es'
 import { markRaw, reactive } from 'vue'
+import type { TimelineEventFunction, TimelineMetrics } from '@nuxt/devtools/types'
 import { useObjectStorage } from './plugins/view/utils'
-import type { TimelineEventFunction, TimelineMetrics } from '../types'
 
 const nonLiteralSymbol = Symbol('nuxt-devtools-fn-metrics-non-literal')
 

packages/devtools/src/runtime/function-metrics-helpers.ts

@@ -1,9 +1,9 @@
 import { shallowReactive, watchEffect } from 'vue'
 
+import type { TimelineServerState } from '@nuxt/devtools/types'
 import type { Router } from 'vue-router'
-import { setupHooksDebug } from '../shared/hooks'
 
-import type { TimelineServerState } from '../../types'
+import { setupHooksDebug } from '../shared/hooks'
 // eslint-disable-next-line ts/ban-ts-comment
 // @ts-ignore tsconfig
 import { defineNuxtPlugin, useRouter, useState } from '#imports'

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

@@ -1,5 +1,5 @@
 import { defineNuxtPlugin, useState } from '#imports'
-import type { TimelineServerState } from '../../types'
+import type { TimelineServerState } from '@nuxt/devtools/types'
 
 export default defineNuxtPlugin(() => {
   // record ssr start time

packages/devtools/src/runtime/plugins/devtools.server.ts

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { ref, watchEffect } from 'vue'
+import type { NuxtDevtoolsHostClient } from '@nuxt/devtools/types'
 import { PANEL_MAX, PANEL_MIN, popupWindow, state } from './state'
 import { useEventListener } from './utils'
-import type { NuxtDevtoolsHostClient } from '../../../types'
 
 const props = defineProps<{
   client: NuxtDevtoolsHostClient

packages/devtools/src/runtime/plugins/view/FrameBox.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { computed, onMounted, reactive, ref, watchEffect } from 'vue'
+import type { NuxtDevtoolsHostClient } from '@nuxt/devtools/types'
 import type { CSSProperties } from 'vue'
 import { settings } from '../../settings'
 import FrameBox from './FrameBox.vue'
 import { state } from './state'
 import { millisecondToHumanreadable, useElementBounding, useEventListener, useScreenSafeArea } from './utils'
-import type { NuxtDevtoolsHostClient } from '../../../types'
 
 const props = defineProps<{
   client: NuxtDevtoolsHostClient

packages/devtools/src/runtime/plugins/view/Main.vue

@@ -2,13 +2,15 @@ import { setIframeServerContext } from '@vue/devtools-kit'
 import { createHooks } from 'hookable'
 import { debounce } from 'perfect-debounce'
 import { computed, createApp, h, markRaw, ref, shallowReactive, shallowRef, watch } from 'vue'
+
+import type { NuxtDevtoolsHostClient, TimelineEventRoute, TimelineMetrics } from '@nuxt/devtools/types'
 import type { $Fetch } from 'ofetch'
 import type { Ref } from 'vue'
 import type { Router } from 'vue-router'
+
 import { initTimelineMetrics } from '../../function-metrics-helpers'
 import Main from './Main.vue'
 import { popupWindow, state } from './state'
-import type { NuxtDevtoolsHostClient, TimelineEventRoute, TimelineMetrics } from '../../../types'
 
 // eslint-disable-next-line ts/ban-ts-comment
 // @ts-ignore tsconfig

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

@@ -1,6 +1,6 @@
 import { shallowRef } from 'vue'
+import type { DevToolsFrameState } from '@nuxt/devtools/types'
 import { useObjectStorage } from './utils'
-import type { DevToolsFrameState } from '../../../types'
 
 export const PANEL_PADDING = 10
 export const PANEL_MIN = 20

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

@@ -1,7 +1,7 @@
 // @ts-expect-error virtual module
 import _settings from '#build/devtools/settings'
 
-import type { NuxtDevToolsOptions } from '../types'
+import type { NuxtDevToolsOptions } from '@nuxt/devtools/types'
 
 export const settings = _settings as {
   ui: NuxtDevToolsOptions['ui']

packages/devtools/src/runtime/settings.ts

@@ -1,5 +1,5 @@
+import type { HookInfo } from '@nuxt/devtools/types'
 import type { Hookable } from 'hookable'
-import type { HookInfo } from '../../types'
 
 export function setupHooksDebug<T extends Hookable<any>>(hooks: T) {
   const serverHooks: Record<string, HookInfo> = {}

packages/devtools/src/runtime/shared/hooks.ts

@@ -1,6 +1,6 @@
 import { shallowRef } from 'vue'
+import type { NuxtDevtoolsHostClient } from '@nuxt/devtools/types'
 import type { Ref } from 'vue'
-import type { NuxtDevtoolsHostClient } from '../types'
 
 /**
  * Get Nuxt DevTools client for host app

packages/devtools/src/runtime/use-nuxt-devtools.ts

@@ -41,15 +41,12 @@ export function setupServerRoutesRPC({ nuxt, refresh }: NuxtDevtoolsServerContex
             method: item.method,
             type: item.route?.startsWith('/api') ? 'api' : 'route',
           })),
-        ...nitro.options
-          .handlers
-          .filter(item => !item.route?.startsWith('/_nitro') && !item.route?.startsWith('/__nuxt') && !item.middleware)
-          .map(item => ({
-            route: item.route,
-            filepath: item.handler,
-            method: item.method,
-            type: 'runtime',
-          })),
+        ...nitro.options.handlers.filter(item => !item.route?.startsWith('/_nitro') && !item.route?.startsWith('/__nuxt') && !item.middleware).map(item => ({
+          route: item.route,
+          filepath: item.handler,
+          method: item.method,
+          type: 'runtime',
+        })),
       ] as ServerRouteInfo[]
     })()