From e272667bddedf7c4ea1cf216e3903bc791306b27 Mon Sep 17 00:00:00 2001 From: bluwy Date: Tue, 3 May 2022 15:16:08 +0800 Subject: [PATCH 1/6] feat: import ts with .js in vue --- packages/plugin-vue/src/main.ts | 12 +++++++++--- packages/vite/src/node/plugins/resolve.ts | 8 +++++--- 2 files changed, 14 insertions(+), 6 deletions(-) diff --git a/packages/plugin-vue/src/main.ts b/packages/plugin-vue/src/main.ts index 44b1de74721efd..5938d2d29e5d41 100644 --- a/packages/plugin-vue/src/main.ts +++ b/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,11 @@ export async function transformMain( code: resolvedCode, map: resolvedMap || { mappings: '' + }, + meta: { + vite: { + isTs + } } } } diff --git a/packages/vite/src/node/plugins/resolve.ts b/packages/vite/src/node/plugins/resolve.ts index 1b59503a9d43ed..22d67ea12eb3a4 100644 --- a/packages/vite/src/node/plugins/resolve.ts +++ b/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?.isTs } let res: string | PartialResolvedId | undefined From 027fc713db5d315967e53d6ff7793dd00a54aa43 Mon Sep 17 00:00:00 2001 From: bluwy Date: Tue, 3 May 2022 15:24:23 +0800 Subject: [PATCH 2/6] refactor: use lang --- packages/plugin-vue/src/main.ts | 4 +++- packages/vite/src/node/plugins/resolve.ts | 2 +- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/plugin-vue/src/main.ts b/packages/plugin-vue/src/main.ts index 5938d2d29e5d41..1dd9460da964d1 100644 --- a/packages/plugin-vue/src/main.ts +++ b/packages/plugin-vue/src/main.ts @@ -216,7 +216,9 @@ export async function transformMain( }, meta: { vite: { - isTs + lang: isTs + ? 'ts' + : descriptor.scriptSetup?.lang || descriptor.script?.lang || 'js' } } } diff --git a/packages/vite/src/node/plugins/resolve.ts b/packages/vite/src/node/plugins/resolve.ts index 22d67ea12eb3a4..e0d72ab62402e4 100644 --- a/packages/vite/src/node/plugins/resolve.ts +++ b/packages/vite/src/node/plugins/resolve.ts @@ -133,7 +133,7 @@ export function resolvePlugin(baseOptions: InternalResolveOptions): Plugin { isFromTsImporter: !importer ? false : isTsRequest(importer) || - this.getModuleInfo(importer)?.meta?.vite?.isTs + this.getModuleInfo(importer)?.meta?.vite?.lang === 'ts' } let res: string | PartialResolvedId | undefined From 0856fb21b45145b34741f6cbd7e2e5c841bc50d3 Mon Sep 17 00:00:00 2001 From: bluwy Date: Tue, 3 May 2022 15:31:14 +0800 Subject: [PATCH 3/6] chore: add test --- packages/playground/vue/Main.vue | 2 ++ packages/playground/vue/TsImport.vue | 8 ++++++++ packages/playground/vue/TsImportFile.ts | 1 + packages/playground/vue/__tests__/vue.spec.ts | 4 ++++ 4 files changed, 15 insertions(+) create mode 100644 packages/playground/vue/TsImport.vue create mode 100644 packages/playground/vue/TsImportFile.ts diff --git a/packages/playground/vue/Main.vue b/packages/playground/vue/Main.vue index 87319acdf6f736..c5f3d27402fda7 100644 --- a/packages/playground/vue/Main.vue +++ b/packages/playground/vue/Main.vue @@ -15,6 +15,7 @@
this should be red
+ @@ -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' diff --git a/packages/playground/vue/TsImport.vue b/packages/playground/vue/TsImport.vue new file mode 100644 index 00000000000000..986c383b2b9f4b --- /dev/null +++ b/packages/playground/vue/TsImport.vue @@ -0,0 +1,8 @@ + + + diff --git a/packages/playground/vue/TsImportFile.ts b/packages/playground/vue/TsImportFile.ts new file mode 100644 index 00000000000000..62761d5733b432 --- /dev/null +++ b/packages/playground/vue/TsImportFile.ts @@ -0,0 +1 @@ +export const foo = 'success' diff --git a/packages/playground/vue/__tests__/vue.spec.ts b/packages/playground/vue/__tests__/vue.spec.ts index 025c05f53e8688..0bce5d1e1a03f5 100644 --- a/packages/playground/vue/__tests__/vue.spec.ts +++ b/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 ? `` : ``) }) From 2a0b9489bba64decd78a0e1b0df7c954efef0314 Mon Sep 17 00:00:00 2001 From: bluwy Date: Tue, 3 May 2022 22:39:08 +0800 Subject: [PATCH 4/6] fix: simplify meta lang --- packages/plugin-vue/src/main.ts | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/packages/plugin-vue/src/main.ts b/packages/plugin-vue/src/main.ts index 1dd9460da964d1..6a5ab6fd5e2150 100644 --- a/packages/plugin-vue/src/main.ts +++ b/packages/plugin-vue/src/main.ts @@ -192,13 +192,12 @@ export async function transformMain( } // handle TS transpilation - const isTs = + let resolvedCode = output.join('\n') + if ( (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, @@ -216,9 +215,7 @@ export async function transformMain( }, meta: { vite: { - lang: isTs - ? 'ts' - : descriptor.scriptSetup?.lang || descriptor.script?.lang || 'js' + lang: descriptor.script?.lang || descriptor.scriptSetup?.lang || 'js' } } } From 63ea8d438b69a65310378f51056592990640540a Mon Sep 17 00:00:00 2001 From: bluwy Date: Tue, 3 May 2022 23:10:05 +0800 Subject: [PATCH 5/6] chore: add jsx test --- packages/playground/vue-jsx/TsImport.vue | 8 ++++++++ packages/playground/vue-jsx/TsImportFile.ts | 1 + packages/playground/vue-jsx/__tests__/vue-jsx.spec.ts | 1 + packages/playground/vue-jsx/main.jsx | 2 ++ 4 files changed, 12 insertions(+) create mode 100644 packages/playground/vue-jsx/TsImport.vue create mode 100644 packages/playground/vue-jsx/TsImportFile.ts diff --git a/packages/playground/vue-jsx/TsImport.vue b/packages/playground/vue-jsx/TsImport.vue new file mode 100644 index 00000000000000..c63923d51947fa --- /dev/null +++ b/packages/playground/vue-jsx/TsImport.vue @@ -0,0 +1,8 @@ + + + diff --git a/packages/playground/vue-jsx/TsImportFile.ts b/packages/playground/vue-jsx/TsImportFile.ts new file mode 100644 index 00000000000000..62761d5733b432 --- /dev/null +++ b/packages/playground/vue-jsx/TsImportFile.ts @@ -0,0 +1 @@ +export const foo = 'success' diff --git a/packages/playground/vue-jsx/__tests__/vue-jsx.spec.ts b/packages/playground/vue-jsx/__tests__/vue-jsx.spec.ts index 999fdc19af51ec..275c918684119d 100644 --- a/packages/playground/vue-jsx/__tests__/vue-jsx.spec.ts +++ b/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 () => { diff --git a/packages/playground/vue-jsx/main.jsx b/packages/playground/vue-jsx/main.jsx index e304e7788e49e7..f13e60c45367c0 100644 --- a/packages/playground/vue-jsx/main.jsx +++ b/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() { + ) } From ea61266a8cc0954c206a4383781e3937fe1a4c24 Mon Sep 17 00:00:00 2001 From: bluwy Date: Tue, 3 May 2022 23:17:02 +0800 Subject: [PATCH 6/6] feat: support tsx --- packages/vite/src/node/plugins/resolve.ts | 15 ++++++++++----- packages/vite/src/node/utils.ts | 2 +- 2 files changed, 11 insertions(+), 6 deletions(-) diff --git a/packages/vite/src/node/plugins/resolve.ts b/packages/vite/src/node/plugins/resolve.ts index e0d72ab62402e4..98a2cd8a9f776e 100644 --- a/packages/vite/src/node/plugins/resolve.ts +++ b/packages/vite/src/node/plugins/resolve.ts @@ -129,11 +129,16 @@ export function resolvePlugin(baseOptions: InternalResolveOptions): Plugin { const options: InternalResolveOptions = { isRequire, ...baseOptions, - scan: resolveOpts?.scan ?? baseOptions.scan, - isFromTsImporter: !importer - ? false - : isTsRequest(importer) || - this.getModuleInfo(importer)?.meta?.vite?.lang === 'ts' + 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 diff --git a/packages/vite/src/node/utils.ts b/packages/vite/src/node/utils.ts index e7a20afbdd5ae7..bf4e12e764b7cb 100644 --- a/packages/vite/src/node/utils.ts +++ b/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) {