Merge branch 'main' into fix/explicit-type-imports

docs/package.json

@@ -13,7 +13,7 @@
     "@nuxt/content": "^2.13.2",
     "@nuxt/devtools": "^1.4.1",
     "@nuxt/fonts": "^0.7.2",
-    "@nuxt/image": "1.7.0",
+    "@nuxt/image": "1.8.0",
     "@nuxt/ui-pro": "^1.4.2",
     "@nuxthq/studio": "^2.0.3",
     "@nuxtjs/plausible": "^1.0.2",

package.json

@@ -29,6 +29,7 @@
     "@nuxt/devtools-ui-kit": "workspace:*",
     "@nuxt/module-builder": "catalog:",
     "@nuxt/schema": "catalog:",
+    "@opentelemetry/api": "catalog:",
     "@types/markdown-it": "catalog:",
     "@types/node": "catalog:",
     "@types/which": "catalog:",

packages/devtools/client/app.vue

@@ -3,6 +3,7 @@ import { useEyeDropper } from '@vueuse/core'
 import { splitScreenAvailable } from '~/composables/storage'
 import { setupClientRPC } from './setup/client-rpc'
 import { setupVueDevTools } from './setup/vue-devtools'
+
 import 'floating-vue/dist/style.css'
 import '@vue/devtools-applet/style.css'
 import 'vanilla-jsoneditor/themes/jse-theme-dark.css'

packages/devtools/client/components/AssetDropZone.vue

@@ -189,7 +189,7 @@ useEventListener('drop', onDrop)
               n="xs"
               h-full flex-auto
               :model-value="file.name"
-              @update:model-value="changeName(file, ($event.target as HTMLInputElement).value)"
+              @update:model-value="changeName(file, (($event as any).target as HTMLInputElement).value)"
             />
             <NButton
               n="red"

packages/devtools/client/components/ServerRouteDetails.vue

@@ -474,7 +474,7 @@ const copy = useCopy()
           placeholder="Value..."
           :model-value="cookie.value"
           flex-1 n="primary"
-          @input="updateCookie(cookie.key, $event.target?.value)"
+          @input="updateCookie(cookie.key, ($event as any).target?.value)"
         />
         <NButton title="Delete" n="red" @click="updateCookie(cookie.key, undefined)">
           <NIcon icon="i-carbon-trash-can" />

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

@@ -40,7 +40,10 @@ function toShortPath(path: string) {
 const files = computed(() => {
   if (!data.value)
     return []
-  return data.value.entries.filter(i => !i.id.startsWith(`${data.value?.rootDir || ''}/.nuxt/`)).sort((a, b) => a.id.localeCompare(b.id))
+  return data.value
+    .entries
+    .filter(i => !i.id.startsWith(`${data.value?.rootDir || ''}/.nuxt/`))
+    .sort((a, b) => a.id.localeCompare(b.id))
 })
 
 const fuse = computed(() => new Fuse(files.value, {

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

@@ -8,19 +8,21 @@ export function setup({ nuxt }: NuxtDevtoolsServerContext) {
    * Wrap plugins with performance metrics
    */
   nuxt.hook('app:templates', (app) => {
-    app.templates.filter(i => i.filename?.startsWith('plugins/')).forEach((i) => {
-      if (!i.getContents)
-        return
-      const original = i.getContents
-      i.getContents = async (...args) => {
-        let content = await original(...args)
+    app.templates
+      .filter(i => i.filename?.startsWith('plugins/'))
+      .forEach((i) => {
+        if (!i.getContents)
+          return
+        const original = i.getContents
+        i.getContents = async (...args) => {
+          let content = await original(...args)
 
-        const PAYLOAD_KEY = '__NUXT_DEVTOOLS_PLUGINS_METRIC__'
-        const WRAPPER_KEY = '__DEVTOOLS_WRAPPER__'
-        if (content.includes(PAYLOAD_KEY))
-          return content
+          const PAYLOAD_KEY = '__NUXT_DEVTOOLS_PLUGINS_METRIC__'
+          const WRAPPER_KEY = '__DEVTOOLS_WRAPPER__'
+          if (content.includes(PAYLOAD_KEY))
+            return content
 
-        const snippets = `
+          const snippets = `
 if (!globalThis.${PAYLOAD_KEY}) {
   Object.defineProperty(globalThis, '${PAYLOAD_KEY}', {
     value: [],
@@ -51,23 +53,23 @@ function ${WRAPPER_KEY} (plugin, src) {
 }
 `
 
-        const imports = Array.from(content.matchAll(/(?:\n|^)import (.*) from ['"](.*)['"]/g))
-          .map(([, name, path]) => ({ name, path }))
+          const imports = Array.from(content.matchAll(/(?:\n|^)import (.*) from ['"](.*)['"]/g))
+            .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)})`
+          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)})`
+            })
+            return `\n${snippets}\nexport default [\n${items.join(',\n')}\n]\n`
           })
-          return `\n${snippets}\nexport default [\n${items.join(',\n')}\n]\n`
-        })
 
-        content = `import { defineNuxtPlugin } from "#imports"\n${content}`
+          content = `import { defineNuxtPlugin } from "#imports"\n${content}`
 
-        return content
-      }
-    })
+          return content
+        }
+      })
   })
 }

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

@@ -2,10 +2,12 @@ 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'