chore: reorder imports

docs/content/2.module/0.guide.md

@@ -128,9 +128,9 @@ export interface ClientFunctions {
 And then in your module code:
 
 ```ts
+import type { ClientFunctions, ServerFunctions } from './rpc-types'
 import { extendServerRpc, onDevToolsInitialized } from '@nuxt/devtools-kit'
 import { defineNuxtModule } from '@nuxt/kit'
-import type { ClientFunctions, ServerFunctions } from './rpc-types'
 
 const RPC_NAMESPACE = 'my-module-rpc'
 
@@ -156,8 +156,8 @@ export default defineNuxtModule({
 And on the embedded iframe client side, you can do:
 
 ```ts
-import { onDevtoolsClientConnected } from '@nuxt/devtools-kit/iframe-client'
 import type { ClientFunctions, ServerFunctions } from './rpc-types'
+import { onDevtoolsClientConnected } from '@nuxt/devtools-kit/iframe-client'
 
 const RPC_NAMESPACE = 'my-module-rpc'
 

docs/tailwind.config.ts

@@ -1,5 +1,5 @@
-import defaultTheme from 'tailwindcss/defaultTheme'
 import type { Config } from 'tailwindcss'
+import defaultTheme from 'tailwindcss/defaultTheme'
 
 export default <Partial<Config>>{
   theme: {

eslint.config.mjs

@@ -11,4 +11,7 @@ export default antfu(
       'vue/no-v-text-v-html-on-component': 'off',
     },
   },
+  {
+    ignores: ['**/foo/**'],
+  },
 )

local.ts

@@ -1,3 +1,4 @@
+import type { ModuleOptions } from './packages/devtools/src/types'
 /**
  * Local development module entry
  *
@@ -25,7 +26,6 @@ import { defaultOptions } from './packages/devtools/src/constant'
 import { packageDir } from './packages/devtools/src/dirs'
 import { enableModule } from './packages/devtools/src/module-main'
 import { startSubprocess } from './packages/devtools-kit/src/index'
-import type { ModuleOptions } from './packages/devtools/src/types'
 
 export type { ModuleOptions }
 

packages/devtools-kit/src/index.ts

@@ -1,7 +1,7 @@
-import { useNuxt } from '@nuxt/kit'
-import { execa } from 'execa'
 import type { BirpcGroup } from 'birpc'
 import type { ModuleCustomTab, NuxtDevtoolsInfo, NuxtDevtoolsServerContext, SubprocessOptions, TerminalState } from './types'
+import { useNuxt } from '@nuxt/kit'
+import { execa } from 'execa'
 
 /**
  * Hooks to extend a custom tab in devtools.

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

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

packages/devtools-kit/src/runtime/iframe-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 { shallowRef, triggerRef } from 'vue'
 
 let clientRef: Ref<NuxtDevtoolsIframeClient | undefined> | undefined
 const hasSetup = false

packages/devtools-ui-kit/src/components/NCodeBlock.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
+import type { BuiltinLanguage } from 'shiki'
 // This components requires to run in DevTools to render correctly
 import { computed, nextTick } from 'vue'
-import type { BuiltinLanguage } from 'shiki'
 import { devToolsClient } from '../runtime/client'
 
 const props = withDefaults(

packages/devtools-ui-kit/src/components/NNotification.vue

@@ -1,8 +1,8 @@
 <script setup lang='ts'>
-import { ref } from 'vue'
+import type { DevtoolsUiShowNotificationPosition } from '../composables/notification'
 
+import { ref } from 'vue'
 import { devtoolsUiProvideNotificationFn } from '../composables/notification'
-import type { DevtoolsUiShowNotificationPosition } from '../composables/notification'
 
 const show = ref(false)
 const icon = ref<string>()

packages/devtools-ui-kit/src/unocss.ts

@@ -1,3 +1,6 @@
+import type { Preset, RuleContext } from '@unocss/core'
+import type { UnocssNuxtOptions } from '@unocss/nuxt'
+import type { Theme } from '@unocss/preset-uno'
 import { theme as unoTheme } from '@unocss/preset-mini'
 import { fonts } from '@unocss/preset-mini/rules'
 import { parseColor } from '@unocss/preset-mini/utils'
@@ -11,9 +14,6 @@ import {
   transformerDirectives,
   transformerVariantGroup,
 } from 'unocss'
-import type { Preset, RuleContext } from '@unocss/core'
-import type { UnocssNuxtOptions } from '@unocss/nuxt'
-import type { Theme } from '@unocss/preset-uno'
 
 // @unocss-include
 

packages/devtools/client/components/AssetDetails.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { useTimeAgo } from '@vueuse/core'
 import type { AssetInfo, CodeSnippet } from '~/../src/types'
+import { useTimeAgo } from '@vueuse/core'
 
 const props = defineProps<{
   modelValue: AssetInfo

packages/devtools/client/components/AssetFontPreview.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { hash } from 'ohash'
 import type { AssetInfo } from '~/../src/types'
+import { hash } from 'ohash'
 
 const props = defineProps<{
   asset: AssetInfo

packages/devtools/client/components/BuildAnalyzeDetails.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
+import type { AnalyzeBuildMeta } from '../../src/types'
 import { useRuntimeConfig } from '#imports'
 import { formatTimeAgo } from '@vueuse/core'
-import type { AnalyzeBuildMeta } from '../../src/types'
 
 const props = defineProps<{
   current: AnalyzeBuildMeta

packages/devtools/client/components/CodeDiff.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
+import type { BuiltinLanguage } from 'shiki'
 import { unrefElement } from '@vueuse/core'
 import { diffLines } from 'diff'
-import type { BuiltinLanguage } from 'shiki'
 
 const props = defineProps<{
   from: string

packages/devtools/client/components/ComponentDetails.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { pascalCase } from 'scule'
 import type { Component } from 'nuxt/schema'
+import { pascalCase } from 'scule'
 
 const props = defineProps<{
   component: Component

packages/devtools/client/components/ComponentName.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { pascalCase } from 'scule'
 import type { Component } from 'nuxt/schema'
+import { pascalCase } from 'scule'
 
 const props = defineProps<{
   component: Component

packages/devtools/client/components/ComponentsGraph.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { Network } from 'vis-network'
 import type { ComponentRelationship } from '~/../src/types'
 import type { Component, NuxtLayout, NuxtPage } from 'nuxt/schema'
 import type { Data, Node, Options } from 'vis-network'
+import { Network } from 'vis-network'
 
 const props = defineProps<{
   components: Component[]

packages/devtools/client/components/ComponentsList.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import Fuse from 'fuse.js'
 import type { Component } from 'nuxt/schema'
 import type { ComponentRelationship, ComponentWithRelationships } from '../../types'
+import Fuse from 'fuse.js'
 
 const props = defineProps<{
   components: Component[]

packages/devtools/client/components/CronCollection.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import cronstrue from 'cronstrue'
 import type { CronCollection } from '../../src/types/tasks'
+import cronstrue from 'cronstrue'
 
 const props = defineProps<{
   collection: CronCollection

packages/devtools/client/components/DataSchemaDrawer.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
+import type { BuiltinLanguage } from 'shiki'
 import { InputData, jsonInputForTargetLanguage, quicktype } from 'quicktype-core'
 import { all as languages } from 'quicktype-core/dist/language/All'
-import type { BuiltinLanguage } from 'shiki'
 
 const input = useSchemaInput()
 

packages/devtools/client/components/ModuleInstallList.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
+import type { ModuleStaticInfo } from '../../src/types'
 import Fuse from 'fuse.js'
 // @ts-expect-error missing types
 import { RecycleScroller } from 'vue-virtual-scroller'
-import type { ModuleStaticInfo } from '../../src/types'
 
 type SortingFunction<T> = (a: T, b: T) => number
 

packages/devtools/client/components/OpenGraphMissingTabs.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { defu } from 'defu'
 import type { MetaFlatInput } from '@unhead/schema'
 import type { ReactiveHead } from '@unhead/vue'
-import { ogTags } from '../data/open-graph'
 import type { NormalizedHeadTag } from '../../src/types'
+import { defu } from 'defu'
+import { ogTags } from '../data/open-graph'
 
 const props = defineProps<{
   tags: NormalizedHeadTag[]

packages/devtools/client/components/ServerRouteDetails.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { createReusableTemplate, watchDebounced } from '@vueuse/core'
-import JsonEditorVue from 'json-editor-vue'
 import type { CodeSnippet, ServerRouteInfo, ServerRouteInput } from '~/../src/types'
 import type { $Fetch } from 'ofetch'
+import { createReusableTemplate, watchDebounced } from '@vueuse/core'
+import JsonEditorVue from 'json-editor-vue'
 
 const props = defineProps<{
   route: ServerRouteInfo

packages/devtools/client/components/ServerTaskDetails.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { createReusableTemplate } from '@vueuse/core'
-import JsonEditorVue from 'json-editor-vue'
 import type { ServerRouteInput, ServerTaskInfo } from '~/../src/types'
 import type { $Fetch } from 'ofetch'
+import { createReusableTemplate } from '@vueuse/core'
+import JsonEditorVue from 'json-editor-vue'
 
 const props = defineProps<{
   task: ServerTaskInfo

packages/devtools/client/components/SideNavItem.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { NuxtLink } from '#components'
 import type { ModuleBuiltinTab, ModuleCustomTab } from '~/../src/types'
+import { NuxtLink } from '#components'
 
 const props = withDefaults(
   defineProps<{

packages/devtools/client/components/TerminalView.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
+import type { TerminalInfo } from '../../src/types'
 import { FitAddon } from '@xterm/addon-fit'
 import { Terminal } from '@xterm/xterm'
-import type { TerminalInfo } from '../../src/types'
 import '@xterm/xterm/css/xterm.css'
 
 const props = defineProps<{

packages/devtools/client/components/TimelineTable.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
+import type { TimelineEvent, TimelineEventNormalized, TimelineMetrics } from '../../types'
 import { clamp } from '@antfu/utils'
 import { segmentTimelineEvents } from '~/composables/timeline'
-import type { TimelineEvent, TimelineEventNormalized, TimelineMetrics } from '../../types'
 
 const props = defineProps<{
   data: TimelineMetrics

packages/devtools/client/composables/npm.ts

@@ -1,5 +1,5 @@
-import semver from 'semver'
 import type { NpmCommandOptions } from '../../src/types'
+import semver from 'semver'
 
 export type PackageUpdateState = 'idle' | 'running' | 'updated'
 

packages/devtools/client/composables/rpc.ts

@@ -1,8 +1,8 @@
+import type { ClientFunctions, ServerFunctions } from '../../src/types'
 import { createBirpc } from 'birpc'
 import { parse, stringify } from 'flatted'
 import { tryCreateHotContext } from 'vite-hot-client'
 import { WS_EVENT_NAME } from '../../src/constant'
-import type { ClientFunctions, ServerFunctions } from '../../src/types'
 
 export const wsConnecting = ref(false)
 export const wsError = ref<any>()

packages/devtools/client/composables/state-commands.ts

@@ -1,5 +1,5 @@
-import { randomStr } from '@antfu/utils'
 import type { MaybeRefOrGetter } from 'vue'
+import { randomStr } from '@antfu/utils'
 
 export interface CommandItem {
   id: string

packages/devtools/client/composables/state-tabs.ts

@@ -1,6 +1,6 @@
-import { objectPick } from '@antfu/utils'
 import type { MaybeRef } from 'vue'
 import type { CategorizedTabs, ModuleBuiltinTab, ModuleCustomTab, RouteInfo, TabCategory } from '../../src/types'
+import { objectPick } from '@antfu/utils'
 
 export function useAllTabs() {
   const customTabs = useCustomTabs()

packages/devtools/client/composables/state.ts

@@ -1,6 +1,6 @@
-import { objectPick } from '@antfu/utils'
 import type { Ref } from 'vue'
 import type { HookInfo, RouteInfo } from '../../src/types'
+import { objectPick } from '@antfu/utils'
 
 export function useServerPages() {
   return useAsyncState('getServerPages', () => rpc.getServerPages())

packages/devtools/client/composables/storage-options.ts

@@ -1,36 +1,58 @@
+import type { NuxtDevToolsOptions } from '../../types'
 import { toRefs, watchDebounced } from '@vueuse/core'
-
-// Assets
-const assetsOptions = ref(await rpc.getOptions('assets'))
-const assets = toRefs(assetsOptions)
-
-watchDebounced(assetsOptions, async (options) => {
-  rpc.updateOptions('assets', options)
-}, { deep: true, flush: 'post', debounce: 500, maxWait: 1000 })
-
-// Server Routes
-const serverRouteOptions = ref(await rpc.getOptions('serverRoutes'))
-const serverRoutes = toRefs(serverRouteOptions)
-
-watchDebounced(serverRouteOptions, async (options) => {
-  rpc.updateOptions('serverRoutes', options)
-}, { deep: true, flush: 'post', debounce: 500, maxWait: 1000 })
-
-// Server Tasks
-const serverTasksOptions = ref(await rpc.getOptions('serverTasks'))
-const serverTasks = toRefs(serverTasksOptions)
-
-watchDebounced(serverTasksOptions, async (options) => {
-  rpc.updateOptions('serverTasks', options)
-}, { deep: true, flush: 'post', debounce: 500, maxWait: 1000 })
-
-// Options List
-const list = {
-  serverRoutes,
-  serverTasks,
-  assets,
+import { ref } from 'vue'
+import { defaultTabOptions } from '../../src/constant'
+import { rpc } from './rpc'
+
+let instance: ReturnType<typeof init> | null = null
+
+function init() {
+  // Assets
+  const assetsOptions = ref<NuxtDevToolsOptions['assets']>(defaultTabOptions.assets)
+  rpc.getOptions('assets').then((options) => {
+    assetsOptions.value = options
+  })
+  const assets = toRefs(assetsOptions)
+
+  watchDebounced(assetsOptions, async (options) => {
+    rpc.updateOptions('assets', options)
+  }, { deep: true, flush: 'post', debounce: 500, maxWait: 1000 })
+
+  // Server Routes
+  const serverRouteOptions = ref<NuxtDevToolsOptions['serverRoutes']>(defaultTabOptions.serverRoutes)
+  rpc.getOptions('serverRoutes').then((options) => {
+    serverRouteOptions.value = options
+  })
+  const serverRoutes = toRefs(serverRouteOptions)
+
+  watchDebounced(serverRouteOptions, async (options) => {
+    rpc.updateOptions('serverRoutes', options)
+  }, { deep: true, flush: 'post', debounce: 500, maxWait: 1000 })
+
+  // Server Tasks
+  const serverTasksOptions = ref<NuxtDevToolsOptions['serverTasks']>(defaultTabOptions.serverTasks)
+  rpc.getOptions('serverTasks').then((options) => {
+    serverTasksOptions.value = options
+  })
+  const serverTasks = toRefs(serverTasksOptions)
+
+  watchDebounced(serverTasksOptions, async (options) => {
+    rpc.updateOptions('serverTasks', options)
+  }, { deep: true, flush: 'post', debounce: 500, maxWait: 1000 })
+
+  // Options List
+  const list = {
+    serverRoutes,
+    serverTasks,
+    assets,
+  }
+
+  return list
 }
 
-export function useDevToolsOptions<T extends keyof typeof list>(tab: T) {
-  return list[tab]
+export function useDevToolsOptions<T extends keyof ReturnType<typeof init>>(tab: T) {
+  if (!instance) {
+    instance = init()
+  }
+  return instance[tab]
 }