fix(scan): handle local scripts with lang=ts

packages/playground/vue/__tests__/vue.spec.ts

@@ -22,8 +22,16 @@ test(':slotted', async () => {
   expect(await getColor('.slotted')).toBe('red')
 })
 
-test('scan deps from <script setup lang="ts">', async () => {
-  expect(await page.textContent('.scan')).toBe('ok')
+describe('dep scan', () => {
+  test('scan deps from <script setup lang="ts">', async () => {
+    expect(await page.textContent('.scan')).toBe('ok')
+  })
+
+  test('find deps on initial scan', () => {
+    serverLogs.forEach((log) => {
+      expect(log).not.toMatch('new dependencies found')
+    })
+  })
 })
 
 describe('pre-processors', () => {

packages/vite/src/node/optimizer/scan.ts

@@ -273,42 +273,29 @@ function esbuildScanPlugin(
                 contextMatch &&
                 (contextMatch[1] || contextMatch[2] || contextMatch[3])
               if (
-                (path.endsWith('.vue') && setupRE.test(raw)) ||
+                (path.endsWith('.vue') && setupRE.test(openTag)) ||
                 (path.endsWith('.svelte') && context !== 'module')
               ) {
+                // append imports in TS to prevent esbuild from removing them
+                // since they may be used in the template
+                const localContent =
+                  content +
+                  (loader.startsWith('ts') ? extractImportPaths(content) : '')
                 localScripts[path] = {
                   loader,
-                  contents: content
+                  contents: localContent
                 }
                 js += `import '${virtualModulePrefix}${path}';\n`
               } else {
                 js += content + '\n'
               }
             }
           }
-          // empty singleline & multiline comments to avoid matching comments
-          const code = js
-            .replace(multilineCommentsRE, '/* */')
-            .replace(singlelineCommentsRE, '')
-
-          if (
-            loader.startsWith('ts') &&
-            (path.endsWith('.svelte') ||
-              (path.endsWith('.vue') && setupRE.test(raw)))
-          ) {
-            // when using TS + (Vue + <script setup>) or Svelte, imports may seem
-            // unused to esbuild and dropped in the build output, which prevents
-            // esbuild from crawling further.
-            // the solution is to add `import 'x'` for every source to force
-            // esbuild to keep crawling due to potential side effects.
-            let m
-            while ((m = importsRE.exec(code)) != null) {
-              // This is necessary to avoid infinite loops with zero-width matches
-              if (m.index === importsRE.lastIndex) {
-                importsRE.lastIndex++
-              }
-              js += `\nimport ${m[1]}`
-            }
+
+          // `<script>` in Svelte has imports that can be used in the template
+          // so we handle them here too
+          if (loader.startsWith('ts') && path.endsWith('.svelte')) {
+            js += extractImportPaths(js)
           }
 
           // This will trigger incorrectly if `export default` is contained
@@ -488,6 +475,31 @@ async function transformGlob(
   return s.toString()
 }
 
+/**
+ * when using TS + (Vue + `<script setup>`) or Svelte, imports may seem
+ * unused to esbuild and dropped in the build output, which prevents
+ * esbuild from crawling further.
+ * the solution is to add `import 'x'` for every source to force
+ * esbuild to keep crawling due to potential side effects.
+ */
+function extractImportPaths(code: string) {
+  // empty singleline & multiline comments to avoid matching comments
+  code = code
+    .replace(multilineCommentsRE, '/* */')
+    .replace(singlelineCommentsRE, '')
+
+  let js = ''
+  let m
+  while ((m = importsRE.exec(code)) != null) {
+    // This is necessary to avoid infinite loops with zero-width matches
+    if (m.index === importsRE.lastIndex) {
+      importsRE.lastIndex++
+    }
+    js += `\nimport ${m[1]}`
+  }
+  return js
+}
+
 export function shouldExternalizeDep(
   resolvedId: string,
   rawId: string

scripts/jestPerTestSetup.ts

@@ -8,11 +8,12 @@ import {
   ViteDevServer,
   UserConfig,
   PluginOption,
-  ResolvedConfig
+  ResolvedConfig,
+  Logger
 } from 'vite'
 import { Page } from 'playwright-chromium'
 // eslint-disable-next-line node/no-extraneous-import
-import { RollupWatcher, RollupWatcherEvent } from 'rollup'
+import { RollupError, RollupWatcher, RollupWatcherEvent } from 'rollup'
 
 const isBuildTest = !!process.env.VITE_TEST_BUILD
 
@@ -25,6 +26,7 @@ declare global {
   const page: Page | undefined
 
   const browserLogs: string[]
+  const serverLogs: string[]
   const viteTestUrl: string | undefined
   const watcher: RollupWatcher | undefined
   let beforeAllError: Error | null // error caught in beforeAll, useful if you want to test error scenarios on build
@@ -34,6 +36,7 @@ declare const global: {
   page?: Page
 
   browserLogs: string[]
+  serverLogs: string[]
   viteTestUrl?: string
   watcher?: RollupWatcher
   beforeAllError: Error | null
@@ -87,6 +90,8 @@ beforeAll(async () => {
         }
       }
 
+      const serverLogs: string[] = []
+
       const options: UserConfig = {
         root: rootDir,
         logLevel: 'silent',
@@ -105,9 +110,12 @@ beforeAll(async () => {
         build: {
           // skip transpilation during tests to make it faster
           target: 'esnext'
-        }
+        },
+        customLogger: createInMemoryLogger(serverLogs)
       }
 
+      global.serverLogs = serverLogs
+
       if (!isBuildTest) {
         process.env.VITE_INLINE = 'inline-serve'
         server = await (await createServer(options)).listen()
@@ -153,6 +161,7 @@ beforeAll(async () => {
 
 afterAll(async () => {
   global.page?.off('console', onConsole)
+  global.serverLogs = []
   await global.page?.close()
   await server?.close()
   const beforeAllErr = getBeforeAllError()
@@ -221,3 +230,35 @@ export async function notifyRebuildComplete(
   })
   return watcher.removeListener('event', callback)
 }
+
+function createInMemoryLogger(logs: string[]): Logger {
+  const loggedErrors = new WeakSet<Error | RollupError>()
+  const warnedMessages = new Set<string>()
+
+  const logger: Logger = {
+    hasWarned: false,
+    hasErrorLogged: (err) => loggedErrors.has(err),
+    clearScreen: () => {},
+    info(msg) {
+      logs.push(msg)
+    },
+    warn(msg) {
+      logs.push(msg)
+      logger.hasWarned = true
+    },
+    warnOnce(msg) {
+      if (warnedMessages.has(msg)) return
+      logs.push(msg)
+      logger.hasWarned = true
+      warnedMessages.add(msg)
+    },
+    error(msg, opts) {
+      logs.push(msg)
+      if (opts?.error) {
+        loggedErrors.add(opts.error)
+      }
+    }
+  }
+
+  return logger
+}