refactor(language-core): replace dynamic types generation with static files (#5872)

Author: johnsoncodehk

.gitignore

@@ -3,6 +3,7 @@ node_modules
 *.tsbuildinfo
 *.vsix
 
+extensions/vscode/types
 extensions/vscode/out
 extensions/vscode/tests/embeddedGrammars/*.tmLanguage.json
 packages/*/*.d.ts

extensions/vscode/rolldown.config.ts

@@ -29,6 +29,15 @@ export default defineConfig({
 				fs.rmSync(path.resolve(__dirname, './dist'), { recursive: true, force: true });
 			},
 		},
+		{
+			name: 'copy-types',
+			buildEnd() {
+				const sourceDir = path.resolve(__dirname, '../../packages/language-core/types');
+				const targetDir = path.resolve(__dirname, './types');
+				fs.rmSync(targetDir, { recursive: true, force: true });
+				fs.cpSync(sourceDir, targetDir, { recursive: true });
+			},
+		},
 		{
 			name: 'umd2esm',
 			resolveId: {

extensions/vscode/schemas/vue-tsconfig.schema.json

@@ -20,9 +20,10 @@
 					"default": "vue",
 					"markdownDescription": "Specify module name for import regular types."
 				},
-				"globalTypesPath": {
+				"typesRoot": {
 					"type": "string",
-					"markdownDescription": "Path to the global types file. Manual configuration is required when `node_modules` does not exist in the environment."
+					"default": "@vue/language-core/types",
+					"markdownDescription": "Root path for helper type definitions. See: https://github.com/vuejs/language-tools/pull/5872"
 				},
 				"extensions": {
 					"type": "array",

packages/component-meta/lib/base.ts

@@ -157,8 +157,6 @@ function baseCreate(
 	let fileNamesSet = new Set(fileNames.map(path => path.replace(windowsPathReg, '/')));
 	let projectVersion = 0;
 
-	vueOptions.globalTypesPath = core.createGlobalTypesWriter(vueOptions, ts.sys.writeFile);
-
 	const projectHost: TypeScriptProjectHost = {
 		getCurrentDirectory: () => rootPath,
 		getProjectVersion: () => projectVersion.toString(),
@@ -267,7 +265,6 @@ function baseCreate(
 		},
 		reload() {
 			[{ vueOptions, options, projectReferences }, fileNames] = getConfigAndFiles();
-			vueOptions.globalTypesPath = core.createGlobalTypesWriter(vueOptions, ts.sys.writeFile);
 			fileNamesSet = new Set(fileNames.map(path => path.replace(windowsPathReg, '/')));
 			this.clearCache();
 		},

packages/language-core/index.ts

@@ -1,4 +1,3 @@
-export * from './lib/codegen/globalTypes';
 export * from './lib/codegen/template';
 export * from './lib/compilerOptions';
 export * from './lib/languagePlugin';

packages/language-core/lib/codegen/globalTypes.ts

@@ -11,7 +11,6 @@ export const setup = '__VLS_setup';
 export const components = '__VLS_components';
 export const directives = '__VLS_directives';
 export const intrinsics = '__VLS_intrinsics';
-export const placeholder = '__VLS_placeholder';
 export const _export = '__VLS_export';
 
 export const ModelProps = '__VLS_ModelProps';
@@ -27,5 +26,3 @@ export const Emit = '__VLS_Emit';
 export const SetupExposed = '__VLS_SetupExposed';
 export const PublicProps = '__VLS_PublicProps';
 export const StyleModules = '__VLS_StyleModules';
-
-export const PROPS_FALLBACK = '__VLS_PROPS_FALLBACK';

packages/language-core/lib/codegen/names.ts

@@ -234,24 +234,31 @@ function* generateScriptWithExportDefault(
 	yield* generateSfcBlockSection(script, exportDefault.end, script.content.length, codeFeatures.all);
 }
 
-function* generateGlobalTypesReference(vueCompilerOptions: VueCompilerOptions, fileName: string): Generator<Code> {
-	const globalTypesPath = vueCompilerOptions.globalTypesPath(fileName);
-	if (!globalTypesPath) {
-		yield `/* placeholder */${newLine}`;
-	}
-	else if (path.isAbsolute(globalTypesPath)) {
-		let relativePath = path.relative(path.dirname(fileName), globalTypesPath);
+function* generateGlobalTypesReference(
+	{ typesRoot, lib, target, checkUnknownProps }: VueCompilerOptions,
+	fileName: string,
+): Generator<Code> {
+	let typesPath: string;
+	if (path.isAbsolute(typesRoot)) {
+		let relativePath = path.relative(path.dirname(fileName), typesRoot);
 		if (
-			relativePath !== globalTypesPath
+			relativePath !== typesRoot
 			&& !relativePath.startsWith('./')
 			&& !relativePath.startsWith('../')
 		) {
 			relativePath = './' + relativePath;
 		}
-		yield `/// <reference types="${relativePath}" />${newLine}`;
+		typesPath = relativePath;
 	}
 	else {
-		yield `/// <reference types="${globalTypesPath}" />${newLine}`;
+		typesPath = typesRoot;
+	}
+	yield `/// <reference types=${JSON.stringify(typesPath + '/template-helpers.d.ts')} />${newLine}`;
+	if (!checkUnknownProps) {
+		yield `/// <reference types=${JSON.stringify(typesPath + '/props-fallback.d.ts')} />${newLine}`;
+	}
+	if (lib === 'vue' && target < 3.5) {
+		yield `/// <reference types=${JSON.stringify(typesPath + '/vue-3.4-shims.d.ts')} />${newLine}`;
 	}
 }
 

packages/language-core/lib/codegen/script/index.ts

@@ -98,10 +98,7 @@ export function* generateGeneric(
 	if (propTypes.length) {
 		yield ` & ${ctx.localTypes.PrettifyLocal}<${propTypes.join(` & `)}>`;
 	}
-	if (!vueCompilerOptions.checkUnknownProps) {
-		yield ` & (typeof globalThis extends { ${names.PROPS_FALLBACK}: infer P } ? P : {})`;
-	}
-	yield endOfLine;
+	yield ` & (typeof globalThis extends { __VLS_PROPS_FALLBACK: infer P } ? P : {})${endOfLine}`;
 	yield `	expose: (exposed: `;
 	yield scriptSetupRanges.defineExpose
 		? `import('${vueCompilerOptions.lib}').ShallowUnwrapRef<typeof ${names.exposed}>`
@@ -219,7 +216,7 @@ export function* generateSetupFunction(
 					yield `])`;
 				}),
 				replace(arg.start, arg.end, function*() {
-					yield names.placeholder;
+					yield `{} as any`;
 				}),
 			);
 		}
@@ -253,7 +250,7 @@ export function* generateSetupFunction(
 				yield `(`;
 			}),
 			insert(callExp.end, function*() {
-				yield ` as __VLS_UseTemplateRef<`;
+				yield ` as Readonly<import('${options.vueCompilerOptions.lib}').ShallowRef<`;
 				if (arg) {
 					yield names.TemplateRefs;
 					yield `[`;
@@ -263,13 +260,13 @@ export function* generateSetupFunction(
 				else {
 					yield `unknown`;
 				}
-				yield `>)`;
+				yield ` | null>>)`;
 			}),
 		);
 		if (arg) {
 			transforms.push(
 				replace(arg.start, arg.end, function*() {
-					yield names.placeholder;
+					yield `{} as any`;
 				}),
 			);
 		}