fix(timeline): duplication injection

packages/devtools-kit/package.json

@@ -48,7 +48,7 @@
     "error-stack-parser-es": "^0.1.0",
     "hookable": "^5.5.3",
     "unbuild": "^1.2.1",
-    "unimport": "^3.0.14",
+    "unimport": "^3.1.0",
     "vite-plugin-vue-inspector": "^3.4.2",
     "vue-router": "^4.2.4"
   }

packages/devtools/package.json

@@ -67,7 +67,7 @@
     "rc9": "^2.1.1",
     "semver": "^7.5.4",
     "sirv": "^2.0.3",
-    "unimport": "^3.0.14",
+    "unimport": "^3.1.0",
     "vite-plugin-inspect": "^0.7.32",
     "vite-plugin-vue-inspector": "^3.4.2",
     "wait-on": "^7.0.1",

packages/devtools/src/integrations/timeline.ts

@@ -1,5 +1,6 @@
 import { resolve } from 'pathe'
 import type { Import } from 'unimport'
+import semver from 'semver'
 import type { NuxtDevtoolsServerContext } from '../types'
 import { runtimeDir } from '../dirs'
 
@@ -10,6 +11,7 @@ export async function setup({ nuxt, options }: NuxtDevtoolsServerContext) {
     '#app',
     '@unhead/vue',
   ]
+
   const include = options.timeline?.functions?.include || [
     i => includeFrom.includes(i.from),
     i => i.from.includes('composables'),
@@ -32,6 +34,10 @@ export async function setup({ nuxt, options }: NuxtDevtoolsServerContext) {
 
   nuxt.hook('imports:context', (unimport) => {
     const ctx = unimport.getInternalContext()
+
+    if (!ctx.version || !semver.gte(ctx.version, '3.1.0'))
+      throw new Error(`[Nuxt DevTools] The timeline feature requires \`unimport\` >= v3.1.0, but got \`${ctx.version || '(unknown)'}\`. Please upgrade using \`nuxi upgrade --force\`.`)
+
     ctx.addons.push(
       {
         injectImportsResolved(imports) {
@@ -50,13 +56,16 @@ export async function setup({ nuxt, options }: NuxtDevtoolsServerContext) {
             }
           })
         },
-        injectImportsStringified(str, imports) {
+        injectImportsStringified(str, imports, s) {
+          const code = s.toString()
           const injected = imports.filter(i => i.meta?.wrapperOriginalAs)
           if (injected.length) {
             const result = [
               str,
-              `import { __wrapFunction } from ${JSON.stringify(helperPath)}`,
-              ...injected.map(i => `const ${i.meta!.wrapperOriginalAs} = __wrapFunction(${JSON.stringify(i.name)}, ${i.as})`),
+              code.includes('__nuxtTimelineWrap')
+                ? ''
+                : `import { __nuxtTimelineWrap } from ${JSON.stringify(helperPath)}`,
+              ...injected.map(i => `const ${i.meta!.wrapperOriginalAs} = __nuxtTimelineWrap(${JSON.stringify(i.name)}, ${i.as})`),
               '',
             ].join(';')
             return result

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

@@ -38,7 +38,7 @@ export function initTimelineMetrics(): TimelineMetrics {
 
 const wrapperFunctions = new WeakMap<any, any>()
 
-export function __wrapFunction(name: string, fn: any) {
+export function __nuxtTimelineWrap(name: string, fn: any) {
   if (process.server)
     return fn
   if (typeof fn !== 'function')

playgrounds/tab-timeline/nuxt.config.ts

@@ -21,6 +21,8 @@ export default defineNuxtConfig({
           '@vueuse/core',
         ],
       },
+
+      enabled: true,
     },
   },
 })