Draft: Support ESM project

packages/vue-code-gen/src/generators/script.ts

@@ -170,7 +170,9 @@ export function generate(
 
 		if (src.endsWith('.d.ts')) src = src.substring(0, src.length - '.d.ts'.length);
 		else if (src.endsWith('.ts')) src = src.substring(0, src.length - '.ts'.length);
-		else if (src.endsWith('.tsx')) src = src.substring(0, src.length - '.tsx'.length);
+		else if (src.endsWith('.tsx')) src = src.substring(0, src.length - '.tsx'.length) + '.jsx';
+
+		if (!src.endsWith('.js') && !src.endsWith('.jsx')) src = src + '.js'
 
 		codeGen.addText(`export * from `);
 		codeGen.addCode(
@@ -426,13 +428,13 @@ export function generate(
 				// fill $props
 				if (scriptSetupRanges.propsTypeArg) {
 					// NOTE: defineProps is inaccurate for $props
-					codeGen.addText(`$props: (await import('./__VLS_types')).makeOptional(defineProps<`);
+					codeGen.addText(`$props: (await import('./__VLS_types.js')).makeOptional(defineProps<`);
 					addExtraReferenceVirtualCode('scriptSetup', scriptSetupRanges.propsTypeArg.start, scriptSetupRanges.propsTypeArg.end);
 					codeGen.addText(`>()),\n`);
 				}
 				else if (scriptSetupRanges.propsRuntimeArg) {
 					// NOTE: defineProps is inaccurate for $props
-					codeGen.addText(`$props: (await import('./__VLS_types')).makeOptional(defineProps(`);
+					codeGen.addText(`$props: (await import('./__VLS_types.js')).makeOptional(defineProps(`);
 					addExtraReferenceVirtualCode('scriptSetup', scriptSetupRanges.propsRuntimeArg.start, scriptSetupRanges.propsRuntimeArg.end);
 					codeGen.addText(`)),\n`);
 				}
@@ -530,7 +532,7 @@ export function generate(
 			codeGen.addText(`return __VLS_Component;\n`);
 		}
 		else {
-			codeGen.addText(`const __VLS_slots = (await import('./${path.basename(fileName)}.__VLS_template')).default;\n`)
+			codeGen.addText(`const __VLS_slots = (await import('./${path.basename(fileName)}.__VLS_template.jsx')).default;\n`)
 			codeGen.addText(`return {} as typeof __VLS_Component & (new () => { ${getSlotsPropertyName(vueVersion)}: typeof __VLS_slots });\n`);
 		}
 		codeGen.addText(`})();`);
@@ -657,7 +659,7 @@ export function generate(
 		codeGen.addText(`\n`);
 		if (script && scriptRanges?.exportDefault?.args) {
 			const args = scriptRanges.exportDefault.args;
-			codeGen.addText(`export const __VLS_name = (await import('./__VLS_types')).getNameOption(`);
+			codeGen.addText(`export const __VLS_name = (await import('./__VLS_types.js')).getNameOption(`);
 			codeGen.addText(`${script.content.substring(args.start, args.end)} as const`);
 			codeGen.addText(`);\n`);
 		}

packages/vue-code-gen/src/parsers/refSugarRanges.ts

@@ -2,7 +2,7 @@ import type * as ts from 'typescript/lib/tsserverlibrary';
 import { getStartEnd, findBindingVars } from './scriptSetupRanges';
 import type { TextRange } from '../types';
 
-export interface ScriptSetupRanges extends ReturnType<typeof parseRefSugarDeclarationRanges> { }
+export interface RefSugarDeclarationRanges extends ReturnType<typeof parseRefSugarDeclarationRanges> { }
 
 export function parseRefSugarDeclarationRanges(ts: typeof import('typescript/lib/tsserverlibrary'), ast: ts.SourceFile, collectKeys: string[]) {
 

packages/vue-language-core/src/lsContext.ts

@@ -17,6 +17,19 @@ export function createLanguageContext(
 	let tsProjectVersion = 0;
 
 	const ts = host.getTypeScriptModule();
+
+	// from https://github.com/johnsoncodehk/volar/pull/1543
+	if (!((ts as any).__VLS_pitched_resolveModuleNames)) {
+		(ts as any).__VLS_pitched_resolveModuleNames = true;
+		const resolveModuleNames = ts.resolveModuleName;
+		ts.resolveModuleName = (...args) => {
+			if (args[0].endsWith('.vue') && args[6] === ts.ModuleKind.ESNext) {
+				args[6] = ts.ModuleKind.CommonJS;
+			}
+			return resolveModuleNames(...args);
+		};
+	}
+
 	const documentRegistry = createDocumentRegistry();
 	const compilerOptions = host.getCompilationSettings();
 	const vueCompilerOptions = host.getVueCompilationSettings();

packages/vue-language-core/src/plugins/vue-typescript-template.ts

@@ -51,11 +51,11 @@ export default function (
 				const tsxCodeGen = new CodeGen<EmbeddedFileMappingData>();
 
 				tsxCodeGen.addText(scriptLeadingComment + '\n');
-				tsxCodeGen.addText(`import * as __VLS_types from './__VLS_types';\n`);
+				tsxCodeGen.addText(`import * as __VLS_types from './__VLS_types.js';\n`);
 
 				if (sfc.script || sfc.scriptSetup) {
-					tsxCodeGen.addText(`import { __VLS_options, __VLS_name } from './${baseFileName}.__VLS_script';\n`);
-					tsxCodeGen.addText(`import __VLS_component from './${baseFileName}.__VLS_script';\n`);
+					tsxCodeGen.addText(`import { __VLS_options, __VLS_name } from './${baseFileName}.__VLS_script.js';\n`);
+					tsxCodeGen.addText(`import __VLS_component from './${baseFileName}.__VLS_script.js';\n`);
 				}
 				else {
 					tsxCodeGen.addText(`var __VLS_name = undefined;\n`);
@@ -165,7 +165,7 @@ export default function (
 							tsxCodeGen.addText(`__VLS_types_${text} as ${text},\n`);
 						}
 					}
-					tsxCodeGen.addText(`} from './${baseFileName}.__VLS_script';\n`);
+					tsxCodeGen.addText(`} from './${baseFileName}.__VLS_script.js';\n`);
 				}
 				function writeCssClassProperty(styleIndex: number, className: string, classRange: TextRange, propertyType: string, optional: boolean) {
 					tsxCodeGen.addText(`\n & { `);

packages/vue-language-service/src/plugins/vue-template.ts

@@ -404,10 +404,13 @@ export default function useVueTemplateLanguagePlugin<T extends ReturnType<typeof
 		async function getTypeScriptInsert() {
 			const embeddedScriptUri = shared.fsPathToUri(vueDocument.file.getScriptFileName());
 			const tsImportName = camelize(path.basename(importFile).replace(/\./g, '-'));
-			const [formatOptions, preferences] = await Promise.all([
-				options.tsSettings.getFormatOptions?.(embeddedScriptUri) ?? {},
-				options.tsSettings.getPreferences?.(embeddedScriptUri) ?? {},
+			let [formatOptions, preferences] = await Promise.all([
+				options.tsSettings.getFormatOptions?.(embeddedScriptUri),
+				options.tsSettings.getPreferences?.(embeddedScriptUri),
 			]);
+			formatOptions = formatOptions ?? {};
+			preferences = preferences ?? {};
+			(preferences as any).importModuleSpecifierEnding = 'minimal';
 			const tsDetail = options.tsLs.__internal__.raw.getCompletionEntryDetails(shared.uriToFsPath(embeddedScriptUri), 0, tsImportName, formatOptions, importFile, preferences, undefined);
 			if (tsDetail?.codeActions) {
 				for (const action of tsDetail.codeActions) {

tsconfig.base.json

@@ -11,6 +11,8 @@
 		"composite": true,
 		"declaration": true,
 		"strict": true,
+		"alwaysStrict": false,
+		"noImplicitUseStrict": true,
 		"resolveJsonModule": true,
 		"skipLibCheck": true,
 		"noUnusedLocals": true,