fix(vite): fix issue detecting shadowed keyed composables (#21891)

packages/vite/src/plugins/composable-keys.ts

@@ -224,7 +224,7 @@ class ScopedVarsCollector {
 
 const NUXT_IMPORT_RE = /nuxt|#app|#imports/
 
-function detectImportNames (code: string, composableMeta: Record<string, { source?: string | RegExp }>) {
+export function detectImportNames (code: string, composableMeta: Record<string, { source?: string | RegExp }>) {
   const imports = findStaticImports(code)
   const names = new Set<string>()
   for (const i of imports) {
@@ -235,7 +235,7 @@ function detectImportNames (code: string, composableMeta: Record<string, { sourc
       if (source && matchWithStringOrRegex(i.specifier, source)) {
         return
       }
-      names.add(namedImports![name])
+      names.add(name)
     }
 
     const { namedImports, defaultImport, namespacedImport } = parseStaticImport(i)

packages/vite/test/composable-keys.test.ts

@@ -0,0 +1,27 @@
+import { describe, expect, it } from 'vitest'
+
+import { detectImportNames } from '../src/plugins/composable-keys'
+
+describe('detectImportNames', () => {
+  const keyedComposables = {
+    useFetch: { source: '#app', argumentLength: 2 },
+    useCustomFetch: { source: 'custom-fetch', argumentLength: 2 }
+  }
+  it('should not include imports from nuxt', () => {
+    expect([...detectImportNames('import { useFetch } from \'#app\'', {})]).toMatchInlineSnapshot('[]')
+    expect([...detectImportNames('import { useFetch } from \'nuxt/app\'', {})]).toMatchInlineSnapshot('[]')
+  })
+  it('should pick up other imports', () => {
+    expect([...detectImportNames('import { useCustomFetch, someThing as someThingRenamed } from \'custom-fetch\'', {})]).toMatchInlineSnapshot(`
+      [
+        "useCustomFetch",
+        "someThingRenamed",
+      ]
+    `)
+    expect([...detectImportNames('import { useCustomFetch, someThing as someThingRenamed } from \'custom-fetch\'', keyedComposables)]).toMatchInlineSnapshot(`
+      [
+        "someThingRenamed",
+      ]
+    `)
+  })
+})

test/fixtures/basic/nuxt.config.ts

@@ -63,7 +63,7 @@ export default defineNuxtConfig({
     keyedComposables: [
       {
         name: 'useCustomKeyedComposable',
-        source: 'pages/keyed-composables/index.vue',
+        source: '~/other-composables-folder/custom-keyed-composable',
         argumentLength: 1
       }
     ]

test/fixtures/basic/other-composables-folder/custom-keyed-composable.ts

@@ -0,0 +1,3 @@
+export function useCustomKeyedComposable (arg?: string) {
+  return arg
+}

test/fixtures/basic/pages/keyed-composables/index.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { useCustomKeyedComposable } from '~/other-composables-folder/custom-keyed-composable'
+
 const useLocalState = () => useState(() => {
   if (process.client) { console.error('running usestate') }
   return { foo: Math.random() }
@@ -33,7 +35,6 @@ const useLocalLazyFetch = () => useLazyFetch(() => '/api/counter')
 const { data: useLazyFetchTest1 } = await useLocalLazyFetch()
 const { data: useLazyFetchTest2 } = await useLocalLazyFetch()
 
-const useCustomKeyedComposable = (arg?: string) => arg
 const useLocalCustomKeyedComposable = () => useCustomKeyedComposable()
 const useMyAsyncDataTest1 = useLocalCustomKeyedComposable()
 const useMyAsyncDataTest2 = useLocalCustomKeyedComposable()

test/fixtures/basic/pages/keyed-composables/local.vue

@@ -39,9 +39,12 @@ function localScopedComposables () {
     })()]
   }
 
-  return [...basic(), ...hoisting(), ...complex(), ...deeperScope()]
+  function useCustomKeyedComposable (arg?: string) {
+    return _assert(arg)
   }
 
+  return [...basic(), ...hoisting(), ...complex(), ...deeperScope(), useCustomKeyedComposable()]
+}
 const skippedLocalScopedComposables = localScopedComposables().every(res => res === 'was not keyed')
 </script>