feat(language-core): split strictTemplates

packages/component-meta/lib/base.ts

@@ -138,8 +138,8 @@ export function baseCreate(
 	const directoryExists = languageServiceHost.directoryExists?.bind(languageServiceHost);
 	const fileExists = languageServiceHost.fileExists.bind(languageServiceHost);
 	const getScriptSnapshot = languageServiceHost.getScriptSnapshot.bind(languageServiceHost);
-	const globalTypesName = `${commandLine.vueOptions.lib}_${commandLine.vueOptions.target}_${commandLine.vueOptions.strictTemplates}.d.ts`;
-	const globalTypesContents = `// @ts-nocheck\nexport {};\n` + vue.generateGlobalTypes(commandLine.vueOptions.lib, commandLine.vueOptions.target, commandLine.vueOptions.strictTemplates);
+	const globalTypesName = vue.resolveGlobalTypesName(commandLine.vueOptions);
+	const globalTypesContents = `// @ts-nocheck\nexport {};\n` + vue.generateGlobalTypes(commandLine.vueOptions);
 	const globalTypesSnapshot: ts.IScriptSnapshot = {
 		getText: (start, end) => globalTypesContents.substring(start, end),
 		getLength: () => globalTypesContents.length,

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

@@ -1,7 +1,14 @@
 import { getSlotsPropertyName } from '../utils/shared';
+import type { VueCompilerOptions } from '../types';
 
-export function generateGlobalTypes(lib: string, target: number, strictTemplates: boolean) {
-	const fnPropsType = `(K extends { $props: infer Props } ? Props : any)${strictTemplates ? '' : ' & Record<string, unknown>'}`;
+export function resolveGlobalTypesName(options: VueCompilerOptions) {
+	const { lib, target, strictTemplates } = options;
+	return `${lib}_${target}_${strictTemplates.attributes}_${strictTemplates.components}.d.ts`;
+}
+
+export function generateGlobalTypes(options: VueCompilerOptions) {
+	const { lib, target, strictTemplates } = options;
+	const fnPropsType = `(K extends { $props: infer Props } ? Props : any)${strictTemplates.attributes ? '' : ' & Record<string, unknown>'}`;
 	let text = ``;
 	if (target < 3.5) {
 		text += `
@@ -47,7 +54,7 @@ export function generateGlobalTypes(lib: string, target: number, strictTemplates
 		N1 extends keyof __VLS_GlobalComponents ? N1 extends N0 ? Pick<__VLS_GlobalComponents, N0 extends keyof __VLS_GlobalComponents ? N0 : never> : { [K in N0]: __VLS_GlobalComponents[N1] } :
 		N2 extends keyof __VLS_GlobalComponents ? N2 extends N0 ? Pick<__VLS_GlobalComponents, N0 extends keyof __VLS_GlobalComponents ? N0 : never> : { [K in N0]: __VLS_GlobalComponents[N2] } :
 		N3 extends keyof __VLS_GlobalComponents ? N3 extends N0 ? Pick<__VLS_GlobalComponents, N0 extends keyof __VLS_GlobalComponents ? N0 : never> : { [K in N0]: __VLS_GlobalComponents[N3] } :
-		${strictTemplates ? '{}' : '{ [K in N0]: unknown }'}
+		${strictTemplates.components ? '{}' : '{ [K in N0]: unknown }'}
 	type __VLS_FunctionalComponentProps<T, K> =
 		'__ctx' extends keyof __VLS_PickNotAny<K, {}> ? K extends { __ctx?: { props?: infer P } } ? NonNullable<P> : never
 		: T extends (props: infer P, ...args: any) => any ? P :
@@ -133,8 +140,8 @@ export function generateGlobalTypes(lib: string, target: number, strictTemplates
 		} & { props?: ${fnPropsType}; expose?(exposed: K): void; } }
 		: T extends () => any ? (props: {}, ctx?: any) => ReturnType<T>
 		: T extends (...args: any) => any ? T
-		: (_: {}${strictTemplates ? '' : ' & Record<string, unknown>'}, ctx?: any) => { __ctx?: { attrs?: any, expose?: any, slots?: any, emit?: any, props?: {}${strictTemplates ? '' : ' & Record<string, unknown>'} } };
-	function __VLS_elementAsFunction<T>(tag: T, endTag?: T): (_: T${strictTemplates ? '' : ' & Record<string, unknown>'}) => void;
+		: (_: {}${strictTemplates.attributes ? '' : ' & Record<string, unknown>'}, ctx?: any) => { __ctx?: { attrs?: any, expose?: any, slots?: any, emit?: any, props?: {}${strictTemplates.attributes ? '' : ' & Record<string, unknown>'} } };
+	function __VLS_elementAsFunction<T>(tag: T, endTag?: T): (_: T${strictTemplates.components ? '' : ' & Record<string, unknown>'}) => void;
 	function __VLS_functionalComponentArgsRest<T extends (...args: any) => any>(t: T): 2 extends Parameters<T>['length'] ? [any] : [];
 	function __VLS_normalizeSlot<S>(s: S): S extends () => infer R ? (props: {}) => R : S;
 	function __VLS_tryAsConstant<const T>(t: T): T;

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

@@ -4,7 +4,7 @@ import type { ScriptRanges } from '../../parsers/scriptRanges';
 import type { ScriptSetupRanges } from '../../parsers/scriptSetupRanges';
 import type { Code, Sfc, VueCodeInformation, VueCompilerOptions } from '../../types';
 import { endOfLine, generateSfcBlockSection, newLine } from '../common';
-import { generateGlobalTypes } from '../globalTypes';
+import { generateGlobalTypes, resolveGlobalTypesName } from '../globalTypes';
 import type { TemplateCodegenContext } from '../template/context';
 import { generateComponentSelf } from './componentSelf';
 import { createScriptCodegenContext, ScriptCodegenContext } from './context';
@@ -61,7 +61,7 @@ export function* generateScript(options: ScriptCodegenOptions): Generator<Code,
 			yield `/// <reference types="${globalTypes.absolutePath}" />${newLine}`;
 		}
 		else {
-			yield `/// <reference types=".vue-global-types/${options.vueCompilerOptions.lib}_${options.vueCompilerOptions.target}_${options.vueCompilerOptions.strictTemplates}.d.ts" />${newLine}`;
+			yield `/// <reference types=".vue-global-types/${resolveGlobalTypesName(options.vueCompilerOptions)}" />${newLine}`;
 		}
 	}
 	else {
@@ -160,7 +160,7 @@ export function* generateScript(options: ScriptCodegenOptions): Generator<Code,
 	}
 	yield* ctx.localTypes.generate([...ctx.localTypes.getUsedNames()]);
 	if (options.appendGlobalTypes) {
-		yield generateGlobalTypes(options.vueCompilerOptions.lib, options.vueCompilerOptions.target, options.vueCompilerOptions.strictTemplates);
+		yield generateGlobalTypes(options.vueCompilerOptions);
 	}
 
 	if (options.sfc.scriptSetup) {

packages/language-core/lib/codegen/template/elementEvents.ts

@@ -38,7 +38,7 @@ export function* generateElementEvents(
 				? originalPropName
 				: `'${originalPropName}'`;
 			yield `const ${ctx.getInternalVariable()}: `;
-			if (!options.vueCompilerOptions.strictTemplates) {
+			if (!options.vueCompilerOptions.strictTemplates.attributes) {
 				yield `Record<string, unknown> & `;
 			}
 			yield `(${newLine}`;

packages/language-core/lib/codegen/template/elementProps.ts

@@ -123,7 +123,7 @@ export function* generateElementProps(
 							prop.arg.loc.start.offset,
 							{
 								...codeInfo,
-								verification: options.vueCompilerOptions.strictTemplates
+								verification: options.vueCompilerOptions.strictTemplates.attributes
 									? codeInfo.verification
 									: {
 										shouldReport(_source, code) {
@@ -209,7 +209,7 @@ export function* generateElementProps(
 				: {
 					...ctx.codeFeatures.withoutHighlightAndCompletion,
 				};
-			if (!options.vueCompilerOptions.strictTemplates) {
+			if (!options.vueCompilerOptions.strictTemplates.attributes) {
 				const verification = codeInfo.verification;
 				codeInfo.verification = {
 					shouldReport(_source, code) {

packages/language-core/lib/types.ts

@@ -28,7 +28,10 @@ export interface VueCompilerOptions {
 	vitePressExtensions: string[];
 	petiteVueExtensions: string[];
 	jsxSlots: boolean;
-	strictTemplates: boolean;
+	strictTemplates: {
+		attributes: boolean;
+		components: boolean;
+	};
 	skipTemplateCodegen: boolean;
 	fallthroughAttributes: boolean;
 	dataAttributes: string[];

packages/language-core/lib/utils/ts.ts

@@ -3,7 +3,7 @@ import type * as ts from 'typescript';
 import { posix as path } from 'path-browserify';
 import type { RawVueCompilerOptions, VueCompilerOptions, VueLanguagePlugin } from '../types';
 import { getAllExtensions } from '../languagePlugin';
-import { generateGlobalTypes } from '../codegen/globalTypes';
+import { generateGlobalTypes, resolveGlobalTypesName } from '../codegen/globalTypes';
 
 export type ParsedCommandLine = ts.ParsedCommandLine & {
 	vueOptions: VueCompilerOptions;
@@ -223,6 +223,13 @@ function getPartialVueCompilerOptions(
 export function resolveVueCompilerOptions(vueOptions: Partial<VueCompilerOptions>): VueCompilerOptions {
 	const target = vueOptions.target ?? 3.3;
 	const lib = vueOptions.lib ?? 'vue';
+	const strictTemplates = typeof vueOptions.strictTemplates === 'boolean' ? {
+		attributes: vueOptions.strictTemplates,
+		components: vueOptions.strictTemplates
+	} : vueOptions.strictTemplates ?? {
+		attributes: false,
+		components: false
+	};
 	return {
 		...vueOptions,
 		target,
@@ -231,7 +238,7 @@ export function resolveVueCompilerOptions(vueOptions: Partial<VueCompilerOptions
 		petiteVueExtensions: vueOptions.petiteVueExtensions ?? [],
 		lib,
 		jsxSlots: vueOptions.jsxSlots ?? false,
-		strictTemplates: vueOptions.strictTemplates ?? false,
+		strictTemplates,
 		skipTemplateCodegen: vueOptions.skipTemplateCodegen ?? false,
 		fallthroughAttributes: vueOptions.fallthroughAttributes ?? false,
 		dataAttributes: vueOptions.dataAttributes ?? [],
@@ -294,8 +301,8 @@ export function setupGlobalTypes(rootDir: string, vueOptions: VueCompilerOptions
 			}
 			dir = parentDir;
 		}
-		const globalTypesPath = path.join(dir, 'node_modules', '.vue-global-types', `${vueOptions.lib}_${vueOptions.target}_${vueOptions.strictTemplates}.d.ts`);
-		const globalTypesContents = `// @ts-nocheck\nexport {};\n` + generateGlobalTypes(vueOptions.lib, vueOptions.target, vueOptions.strictTemplates);
+		const globalTypesPath = path.join(dir, 'node_modules', '.vue-global-types', resolveGlobalTypesName(vueOptions));
+		const globalTypesContents = `// @ts-nocheck\nexport {};\n` + generateGlobalTypes(vueOptions);
 		host.writeFile(globalTypesPath, globalTypesContents);
 		return { absolutePath: globalTypesPath };
 	} catch { }

packages/language-core/schemas/vue-tsconfig.schema.json

@@ -41,9 +41,12 @@
 					"markdownDescription": "Generate slots type for `JSX.ElementChildrenAttribute`."
 				},
 				"strictTemplates": {
-					"type": "boolean",
-					"default": false,
-					"markdownDescription": "Strict props, component type-checking in templates."
+					"type": ["boolean", "object"],
+					"default": {
+						"attributes": false,
+						"components": false
+					},
+					"markdownDescription": "Strict props(attrs), component type-checking in templates."
 				},
 				"skipTemplateCodegen": {
 					"type": "boolean",
@@ -85,8 +88,16 @@
 						"defineSlots": [ "defineSlots" ],
 						"defineEmits": [ "defineEmits" ],
 						"defineExpose": [ "defineExpose" ],
-						"withDefaults": [ "withDefaults" ],
-						"templateRef": [ "templateRef", "useTemplateRef" ]
+						"defineModel": [ "defineModel" ],
+						"defineOptions": [ "defineOptions" ],
+						"withDefaults": [ "withDefaults" ]
+					}
+				},
+				"composables": {
+					"type": "object",
+					"default": {
+						"useCssModule": [ "useCssModule" ],
+						"useTemplateRef": [ "useTemplateRef", "templateRef" ]
 					}
 				},
 				"experimentalResolveStyleCssClasses": {

packages/language-server/lib/initialize.ts

@@ -1,6 +1,6 @@
 import type { LanguageServer } from '@volar/language-server';
 import { createTypeScriptProject } from '@volar/language-server/node';
-import { createParsedCommandLine, createVueLanguagePlugin, generateGlobalTypes, getAllExtensions, resolveVueCompilerOptions, VueCompilerOptions } from '@vue/language-core';
+import { createParsedCommandLine, createVueLanguagePlugin, generateGlobalTypes, getAllExtensions, resolveGlobalTypesName, resolveVueCompilerOptions, VueCompilerOptions } from '@vue/language-core';
 import { Disposable, getFullLanguageServicePlugins, InitializeParams } from '@vue/language-service';
 import type * as ts from 'typescript';
 
@@ -55,8 +55,8 @@ export function initialize(
 							const directoryExists = project.typescript.languageServiceHost.directoryExists?.bind(project.typescript.languageServiceHost);
 							const fileExists = project.typescript.languageServiceHost.fileExists.bind(project.typescript.languageServiceHost);
 							const getScriptSnapshot = project.typescript.languageServiceHost.getScriptSnapshot.bind(project.typescript.languageServiceHost);
-							const globalTypesName = `${vueCompilerOptions.lib}_${vueCompilerOptions.target}_${vueCompilerOptions.strictTemplates}.d.ts`;
-							const globalTypesContents = `// @ts-nocheck\nexport {};\n` + generateGlobalTypes(vueCompilerOptions.lib, vueCompilerOptions.target, vueCompilerOptions.strictTemplates);
+							const globalTypesName = resolveGlobalTypesName(vueCompilerOptions);
+							const globalTypesContents = `// @ts-nocheck\nexport {};\n` + generateGlobalTypes(vueCompilerOptions);
 							const globalTypesSnapshot: ts.IScriptSnapshot = {
 								getText: (start, end) => globalTypesContents.substring(start, end),
 								getLength: () => globalTypesContents.length,