fix: avoid using top-level await, fix #723

Author: antfu

package.json

@@ -27,7 +27,7 @@
     "@antfu/ni": "catalog:",
     "@nuxt/devtools": "workspace:*",
     "@nuxt/devtools-ui-kit": "workspace:*",
-    "@nuxt/eslint": "^0.5.7",
+    "@nuxt/eslint": "catalog:",
     "@nuxt/module-builder": "catalog:",
     "@nuxt/schema": "catalog:",
     "@opentelemetry/api": "catalog:",
@@ -39,13 +39,14 @@
     "bumpp": "catalog:",
     "conventional-changelog-cli": "catalog:",
     "eslint": "catalog:",
-    "eslint-flat-config-utils": "^0.4.0",
+    "eslint-flat-config-utils": "catalog:",
+    "eslint-plugin-antfu": "catalog:",
     "eslint-plugin-format": "catalog:",
     "esno": "catalog:",
     "execa": "catalog:",
     "lint-staged": "catalog:",
     "nuxt": "catalog:",
-    "nuxt-eslint-auto-explicit-import": "^0.1.0",
+    "nuxt-eslint-auto-explicit-import": "catalog:",
     "pathe": "catalog:",
     "simple-git-hooks": "catalog:",
     "taze": "catalog:",

packages/devtools/client/app.vue

@@ -8,7 +8,8 @@ import { devAuthToken, isDevAuthed } from '~/composables/dev-auth'
 import { useCopy } from '~/composables/editor'
 import { rpc } from '~/composables/rpc'
 import { registerCommands } from '~/composables/state-commands'
-import { splitScreenAvailable, splitScreenEnabled, useDevToolsUIOptions } from '~/composables/storage'
+import { splitScreenAvailable, splitScreenEnabled } from '~/composables/storage'
+import { useDevToolsOptions } from './composables/storage-options'
 import { setupClientRPC } from './setup/client-rpc'
 import { setupVueDevTools } from './setup/vue-devtools'
 
@@ -63,7 +64,7 @@ useEventListener('keydown', (e) => {
   }
 })
 
-const { scale, sidebarExpanded } = useDevToolsUIOptions()
+const { scale, sidebarExpanded } = useDevToolsOptions('ui')
 // const dataSchema = useSchemaInput()
 
 onMounted(async () => {

packages/devtools/client/components/ComponentsGraph.vue

@@ -7,7 +7,7 @@ import { Network } from 'vis-network'
 import { computed, onMounted, ref, watch } from 'vue'
 import { getColorMode } from '~/composables/client'
 import { useLayouts, useServerConfig, useServerPages } from '~/composables/state'
-import { useDevToolsUIOptions } from '~/composables/storage'
+import { useDevToolsOptions } from '../composables/storage-options'
 
 const props = defineProps<{
   components: Component[]
@@ -36,7 +36,7 @@ const {
   componentsGraphShowPages: showPages,
   componentsGraphShowLayouts: showLayouts,
   componentsGraphShowWorkspace: showWorkspace,
-} = useDevToolsUIOptions()
+} = useDevToolsOptions('ui')
 
 const selectedFilter = ref<ComponentRelationship>()
 

packages/devtools/client/components/DockingPanel.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import { splitScreenAvailable, splitScreenEnabled, useDevToolsUIOptions } from '~/composables/storage'
+import { splitScreenAvailable, splitScreenEnabled } from '~/composables/storage'
 import { refreshData, reloadPage } from '~/composables/utils'
+import { useDevToolsOptions } from '../composables/storage-options'
 
-const { sidebarExpanded } = useDevToolsUIOptions()
+const { sidebarExpanded } = useDevToolsOptions('ui')
 
 function toggleSplitScreen() {
   splitScreenEnabled.value = !splitScreenEnabled.value

packages/devtools/client/components/HelpFab.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-import { useDevToolsUIOptions } from '~/composables/storage'
+import { useDevToolsOptions } from '../composables/storage-options'
 
 const open = ref(false)
-const { showHelpButtons } = useDevToolsUIOptions()
+const { showHelpButtons } = useDevToolsOptions('ui')
 </script>
 
 <template>

packages/devtools/client/components/SideNav.vue

@@ -3,12 +3,12 @@ import { onClickOutside, useWindowSize } from '@vueuse/core'
 import { computed, ref } from 'vue'
 import { useClient } from '~/composables/client'
 import { getCategorizedTabs, useEnabledTabs } from '~/composables/state-tabs'
-import { useDevToolsUIOptions } from '~/composables/storage'
+import { useDevToolsOptions } from '../composables/storage-options'
 import TabsGrid from './TabsGrid.vue'
 
 const client = useClient()
 const allTabs = useEnabledTabs()
-const { sidebarExpanded, sidebarScrollable } = useDevToolsUIOptions()
+const { sidebarExpanded, sidebarScrollable } = useDevToolsOptions('ui')
 
 const showDocking = ref(false)
 const showMoreTabs = ref(false)

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

@@ -4,14 +4,14 @@ import { objectPick } from '@antfu/utils'
 
 export function useAllTabs() {
   const customTabs = useCustomTabs()
-  const settings = useDevToolsUIOptions()
+  const settings = useDevToolsOptions('ui')
   const router = useRouter()
 
   const builtin = computed(() => [
     ...router.getRoutes()
       .filter(route => route.path.startsWith('/modules/') && route.meta.title && !route.meta.wip)
       .filter(route => !route.meta.experimental || (route.meta.experimental && settings.showExperimentalFeatures.value))
-      .sort((a, b) => (a.meta.order || 100) - (b.meta.order || 100))
+      .sort((a, b) => (a.meta.order as number || 100) - (b.meta.order as number || 100))
       .map((i): ModuleBuiltinTab => {
         return {
           name: i.name as string,
@@ -60,7 +60,7 @@ function getCategorizedRecord(): Record<TabCategory, (ModuleCustomTab | ModuleBu
 export function getCategorizedTabs(tabs: MaybeRef<(ModuleCustomTab | ModuleBuiltinTab)[]>): ComputedRef<CategorizedTabs> {
   const {
     pinnedTabs,
-  } = useDevToolsUIOptions()
+  } = useDevToolsOptions('ui')
 
   return computed(() => {
     const categories = getCategorizedRecord()
@@ -88,7 +88,7 @@ export function getCategorizedTabs(tabs: MaybeRef<(ModuleCustomTab | ModuleBuilt
 
 export function useEnabledTabs() {
   const tabs = useAllTabs()
-  const settings = useDevToolsUIOptions()
+  const settings = useDevToolsOptions('ui')
   const categoryOrder = Object.keys(getCategorizedRecord())
   const tabShows = tabs.value.map(tab => (tab as ModuleBuiltinTab)?.show?.())
 

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

@@ -1,58 +1,36 @@
+import type { ToRefs } from 'vue'
 import type { NuxtDevToolsOptions } from '../../types'
-import { toRefs, watchDebounced } from '@vueuse/core'
-import { ref } from 'vue'
+import { watchDebounced } from '@vueuse/core'
+import { toRefs } from 'vue'
 import { defaultTabOptions } from '../../src/constant'
 import { rpc } from './rpc'
 
-let instance: ReturnType<typeof init> | null = null
+const cache = new Map<string, any>()
 
-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,
+function getTabOptions<T extends keyof NuxtDevToolsOptions>(tab: T): ToRefs<NuxtDevToolsOptions[T]> {
+  if (cache.has(tab)) {
+    return cache.get(tab)
   }
-
-  return list
+  const source = reactive({ ...defaultTabOptions[tab] }) as NuxtDevToolsOptions[T]
+  const refs = toRefs(source)
+  cache.set(tab, refs)
+
+  rpc.getOptions(tab)
+    .then((options) => {
+      Object.assign(source, options)
+
+      watchDebounced(
+        source,
+        async (options) => {
+          rpc.updateOptions(tab, options)
+        },
+        { deep: true, flush: 'post', debounce: 500, maxWait: 1000 },
+      )
+    })
+
+  return refs
 }
 
-export function useDevToolsOptions<T extends keyof ReturnType<typeof init>>(tab: T) {
-  if (!instance) {
-    instance = init()
-  }
-  return instance[tab]
+export function useDevToolsOptions<T extends keyof NuxtDevToolsOptions>(tab: T): ToRefs<NuxtDevToolsOptions[T]> {
+  return getTabOptions(tab)
 }

packages/devtools/client/composables/storage.ts

@@ -1,5 +1,4 @@
 import type { DevToolsFrameState } from '~~/../src/types'
-import { toRefs } from '@vueuse/core'
 
 export const isFirstVisit = useLocalStorage('nuxt-devtools-first-visit', true)
 
@@ -10,26 +9,8 @@ export const splitScreenEnabled = useLocalStorage('nuxt-devtools-split-screen',
 export const splitScreenView = useLocalStorage('nuxt-devtools-split-screen-view', 'overview')
 
 const devToolsFrameState = useLocalStorage<DevToolsFrameState>('nuxt-devtools-frame-state', {} as any, { listenToStorageChanges: true })
-
 const devToolsPanelsState = useLocalStorage<Record<string, number>>('nuxt-devtools-panels-state', {} as any, { listenToStorageChanges: false })
 
-const uiOptions = ref(await rpc.getOptions('ui'))
-const uiOptionsRefs = toRefs(uiOptions)
-
-watch(uiOptions, async (options) => {
-  rpc.updateOptions('ui', options)
-}, { deep: true, flush: 'post' })
-
-// Migrate settings from localStorage to devtools options. TODO: remove in next major release
-if (localStorage.getItem('nuxt-devtools-settings')) {
-  Object.assign(uiOptions.value, JSON.parse(localStorage.getItem('nuxt-devtools-settings')!))
-  localStorage.removeItem('nuxt-devtools-settings')
-}
-
-export function useDevToolsUIOptions() {
-  return uiOptionsRefs
-}
-
 export function useDevToolsFrameState() {
   return devToolsFrameState
 }

packages/devtools/client/composables/telemetry.ts

@@ -1,8 +1,4 @@
-export const telemetryEnabled = ref(await rpc.getOptions('behavior').then(options => options.telemetry))
-
-watch(telemetryEnabled, async (value) => {
-  await rpc.updateOptions('behavior', { telemetry: value })
-})
+export const telemetryEnabled = useDevToolsOptions('behavior').telemetry
 
 export function telemetry(event: string, payload?: object, immediate = false) {
   if (telemetryEnabled.value === false)