feat: import ts with .js in vue (#7998)

Author: bluwy

packages/playground/vue-jsx/TsImport.vue

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

packages/playground/vue-jsx/TsImportFile.ts

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

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

@@ -9,6 +9,7 @@ test('should render', async () => {
   expect(await page.textContent('.src-import')).toMatch('5')
   expect(await page.textContent('.jsx-with-query')).toMatch('6')
   expect(await page.textContent('.other-ext')).toMatch('Other Ext')
+  expect(await page.textContent('.ts-import')).toMatch('success')
 })
 
 test('should update', async () => {

packages/playground/vue-jsx/main.jsx

@@ -7,6 +7,7 @@ import JsxSrcImport from './SrcImport.vue'
 import JsxSetupSyntax from './setup-syntax-jsx.vue'
 // eslint-disable-next-line
 import JsxWithQuery from './Query.jsx?query=true'
+import TsImport from './TsImport.vue'
 
 function App() {
   return (
@@ -20,6 +21,7 @@ function App() {
       <JsxSrcImport />
       <JsxSetupSyntax />
       <JsxWithQuery />
+      <TsImport />
     </>
   )
 }

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

@@ -211,6 +211,11 @@ export async function transformMain(
     code: resolvedCode,
     map: resolvedMap || {
       mappings: ''
+    },
+    meta: {
+      vite: {
+        lang: descriptor.script?.lang || descriptor.scriptSetup?.lang || 'js'
+      }
     }
   }
 }

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

@@ -128,12 +128,19 @@ export function resolvePlugin(baseOptions: InternalResolveOptions): Plugin {
 
       const options: InternalResolveOptions = {
         isRequire,
-
         ...baseOptions,
-        isFromTsImporter: isTsRequest(importer ?? ''),
         scan: resolveOpts?.scan ?? baseOptions.scan
       }
 
+      if (importer) {
+        if (isTsRequest(importer)) {
+          options.isFromTsImporter = true
+        } else {
+          const moduleLang = this.getModuleInfo(importer)?.meta?.vite?.lang
+          options.isFromTsImporter = moduleLang && isTsRequest(`.${moduleLang}`)
+        }
+      }
+
       let res: string | PartialResolvedId | undefined
 
       // resolve pre-bundled deps requests, these could be resolved by

packages/vite/src/node/utils.ts

@@ -228,7 +228,7 @@ export const isJSRequest = (url: string): boolean => {
 
 const knownTsRE = /\.(ts|mts|cts|tsx)$/
 const knownTsOutputRE = /\.(js|mjs|cjs|jsx)$/
-export const isTsRequest = (url: string) => knownTsRE.test(cleanUrl(url))
+export const isTsRequest = (url: string) => knownTsRE.test(url)
 export const isPossibleTsOutput = (url: string) =>
   knownTsOutputRE.test(cleanUrl(url))
 export function getPotentialTsSrcPaths(filePath: string) {