feat: import ts with .js in vue

packages/playground/vue/Main.vue

@@ -15,6 +15,7 @@
     <div class="slotted">this should be red</div>
   </Slotted>
   <ScanDep />
+  <TsImport />
   <Suspense>
     <AsyncComponent />
   </Suspense>
@@ -33,6 +34,7 @@ import CustomBlock from './CustomBlock.vue'
 import SrcImport from './src-import/SrcImport.vue'
 import Slotted from './Slotted.vue'
 import ScanDep from './ScanDep.vue'
+import TsImport from './TsImport.vue'
 import AsyncComponent from './AsyncComponent.vue'
 import ReactivityTransform from './ReactivityTransform.vue'
 import SetupImportTemplate from './setup-import-template/SetupImportTemplate.vue'

packages/playground/vue/TsImport.vue

@@ -0,0 +1,8 @@
+<template>
+  <h2>Ts Import</h2>
+  <p class="ts-import">{{ foo }}</p>
+</template>
+
+<script setup lang="ts">
+import { foo } from './TsImportFile.js'
+</script>

packages/playground/vue/TsImportFile.ts

@@ -0,0 +1 @@
+export const foo = 'success'

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

@@ -14,6 +14,10 @@ test('template/script latest syntax support', async () => {
   expect(await page.textContent('.syntax')).toBe('baz')
 })
 
+test('import ts with .js extension with lang="ts"', async () => {
+  expect(await page.textContent('.ts-import')).toBe('success')
+})
+
 test('should remove comments in prod', async () => {
   expect(await page.innerHTML('.comments')).toBe(isBuild ? `` : `<!--hello-->`)
 })

packages/plugin-vue/src/main.ts

@@ -192,12 +192,13 @@ export async function transformMain(
   }
 
   // handle TS transpilation
-  let resolvedCode = output.join('\n')
-  if (
+  const isTs =
     (descriptor.script?.lang === 'ts' ||
       descriptor.scriptSetup?.lang === 'ts') &&
     !descriptor.script?.src // only normal script can have src
-  ) {
+
+  let resolvedCode = output.join('\n')
+  if (isTs) {
     const { code, map } = await transformWithEsbuild(
       resolvedCode,
       filename,
@@ -212,6 +213,13 @@ export async function transformMain(
     code: resolvedCode,
     map: resolvedMap || {
       mappings: ''
+    },
+    meta: {
+      vite: {
+        lang: isTs
+          ? 'ts'
+          : descriptor.scriptSetup?.lang || descriptor.script?.lang || 'js'
+      }
     }
   }
 }

packages/vite/src/node/plugins/resolve.ts

@@ -128,10 +128,12 @@ export function resolvePlugin(baseOptions: InternalResolveOptions): Plugin {
 
       const options: InternalResolveOptions = {
         isRequire,
-
         ...baseOptions,
-        isFromTsImporter: isTsRequest(importer ?? ''),
-        scan: resolveOpts?.scan ?? baseOptions.scan
+        scan: resolveOpts?.scan ?? baseOptions.scan,
+        isFromTsImporter: !importer
+          ? false
+          : isTsRequest(importer) ||
+            this.getModuleInfo(importer)?.meta?.vite?.lang === 'ts'
       }
 
       let res: string | PartialResolvedId | undefined