feat(language-core): type support for useAttrs and $attrs

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

@@ -192,6 +192,19 @@ function* generateSetupFunction(
 			]);
 		}
 	}
+	if (scriptSetupRanges.attrs.length) {
+		for (const { define } of scriptSetupRanges.attrs) {
+			setupCodeModifies.push([
+				[`(`],
+				define.start,
+				define.start
+			], [
+				[` as __VLS_TemplateResult['attrs'] & Record<string, unknown>)`],
+				define.end,
+				define.end
+			])
+		}
+	}
 	if (scriptSetupRanges.cssModules.length) {
 		for (const { define } of scriptSetupRanges.cssModules) {
 			setupCodeModifies.push([

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

@@ -34,6 +34,7 @@ export function* generateTemplate(options: TemplateCodegenOptions): Generator<Co
 	if (options.propsAssignName) {
 		ctx.addLocalVariable(options.propsAssignName);
 	}
+	ctx.addLocalVariable("$attrs");
 	ctx.addLocalVariable('$el');
 	ctx.addLocalVariable('$refs');
 
@@ -91,11 +92,12 @@ function* generateSlotsType(options: TemplateCodegenOptions, ctx: TemplateCodege
 }
 
 function* generateInheritedAttrs(ctx: TemplateCodegenContext): Generator<Code> {
-	yield 'var __VLS_inheritedAttrs!: {}';
+	yield 'let __VLS_inheritedAttrs!: {}';
 	for (const varName of ctx.inheritedAttrVars) {
 		yield ` & typeof ${varName}`;
 	}
 	yield endOfLine;
+	yield `var $attrs!: Partial<typeof __VLS_inheritedAttrs> & Record<string, unknown>${endOfLine}`;
 }
 
 function* generateRefs(ctx: TemplateCodegenContext): Generator<Code> {

packages/language-core/lib/parsers/scriptSetupRanges.ts

@@ -48,6 +48,9 @@ export function parseScriptSetupRanges(
 		name?: string;
 		inheritAttrs?: string;
 	} = {};
+	const attrs: {
+		define: ReturnType<typeof parseDefineFunction>;
+	}[] = []; 
 	const cssModules: {
 		define: ReturnType<typeof parseDefineFunction>;
 	}[] = [];
@@ -127,6 +130,7 @@ export function parseScriptSetupRanges(
 		emits,
 		expose,
 		options,
+		attrs,
 		cssModules,
 		defineProp,
 		templateRefs,
@@ -377,14 +381,10 @@ export function parseScriptSetupRanges(
 						}
 					}
 				}
-			} else if (vueCompilerOptions.composibles.useTemplateRef.includes(callText) && node.arguments.length && !node.typeArguments?.length) {
+			}
+			else if (vueCompilerOptions.composibles.useAttrs.includes(callText)) {
 				const define = parseDefineFunction(node);
-				let name;
-				if (ts.isVariableDeclaration(parent)) {
-					name = getNodeText(ts, parent.name, ast);
-				}
-				templateRefs.push({
-					name,
+				attrs.push({
 					define
 				});
 			}
@@ -394,6 +394,17 @@ export function parseScriptSetupRanges(
 					define
 				});
 			}
+			else if (vueCompilerOptions.composibles.useTemplateRef.includes(callText) && node.arguments.length && !node.typeArguments?.length) {
+				const define = parseDefineFunction(node);
+				let name;
+				if (ts.isVariableDeclaration(parent)) {
+					name = getNodeText(ts, parent.name, ast);
+				}
+				templateRefs.push({
+					name,
+					define
+				});
+			}
 		}
 		ts.forEachChild(node, child => {
 			parents.push(node);

packages/language-core/lib/types.ts

@@ -44,6 +44,7 @@ export interface VueCompilerOptions {
 		withDefaults: string[];
 	};
 	composibles: {
+		useAttrs: string[];
 		useCssModule: string[];
 		useTemplateRef: string[];
 	};

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

@@ -252,6 +252,7 @@ export function resolveVueCompilerOptions(vueOptions: Partial<VueCompilerOptions
 			...vueOptions.macros,
 		},
 		composibles: {
+			useAttrs: ['useAttrs'],
 			useCssModule: ['useCssModule'],
 			useTemplateRef: ['useTemplateRef', 'templateRef'],
 			...vueOptions.composibles,

test-workspace/tsc/passedFixtures/fallthroughAttributes_strictTemplate/useAttrs/main.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { type AnchorHTMLAttributes, type ReservedProps, useAttrs } from 'vue';
+import { exactType } from '../../shared';
+
+type InheritedAttrs = Partial<AnchorHTMLAttributes & ReservedProps> & Record<string, unknown>;
+
+const attrs = useAttrs();
+exactType(attrs, {} as InheritedAttrs);
+</script>
+
+<template>
+	<a>{{ exactType($attrs, {} as InheritedAttrs) }}</a>
+</template>