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

…5011)
Hawthorne001 · Dec 15, 2024 · b3b088b · b3b088b
1 parent 79dae70
commit b3b088b
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 7 deletions.
diff --git a/packages/language-core/lib/codegen/script/scriptSetup.ts b/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
+			])
+		}
+	}
 	for (const { define } of scriptSetupRanges.cssModules) {
 		setupCodeModifies.push([
 			[`(`],

diff --git a/packages/language-core/lib/codegen/template/index.ts b/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> {

diff --git a/packages/language-core/lib/parsers/scriptSetupRanges.ts b/packages/language-core/lib/parsers/scriptSetupRanges.ts
@@ -44,6 +44,9 @@ export function parseScriptSetupRanges(
 		name?: string;
 		inheritAttrs?: string;
 	} = {};
+	const attrs: {
+		define: ReturnType<typeof parseDefineFunction>;
+	}[] = []; 
 	const cssModules: {
 		define: ReturnType<typeof parseDefineFunction>;
 	}[] = [];
@@ -125,6 +128,7 @@ export function parseScriptSetupRanges(
 		emits,
 		expose,
 		options,
+		attrs,
 		cssModules,
 		defineProp,
 		templateRefs,
@@ -371,6 +375,18 @@ export function parseScriptSetupRanges(
 					}
 				}
 			}
+			else if (vueCompilerOptions.composables.useAttrs.includes(callText)) {
+				const define = parseDefineFunction(node);
+				attrs.push({
+					define
+				});
+			}
+			else if (vueCompilerOptions.composables.useCssModule.includes(callText)) {
+				const define = parseDefineFunction(node);
+				cssModules.push({
+					define
+				});
+			}
 			else if (
 				vueCompilerOptions.composables.useTemplateRef.includes(callText)
 				&& !node.typeArguments?.length
@@ -382,12 +398,6 @@ export function parseScriptSetupRanges(
 					define
 				});
 			}
-			else if (vueCompilerOptions.composables.useCssModule.includes(callText)) {
-				const define = parseDefineFunction(node);
-				cssModules.push({
-					define
-				});
-			}
 		}
 
 		ts.forEachChild(node, child => {

diff --git a/packages/language-core/lib/types.ts b/packages/language-core/lib/types.ts
@@ -44,6 +44,7 @@ export interface VueCompilerOptions {
 		withDefaults: string[];
 	};
 	composables: {
+		useAttrs: string[];
 		useCssModule: string[];
 		useTemplateRef: string[];
 	};

diff --git a/packages/language-core/lib/utils/ts.ts b/packages/language-core/lib/utils/ts.ts
@@ -252,6 +252,7 @@ export function resolveVueCompilerOptions(vueOptions: Partial<VueCompilerOptions
 			...vueOptions.macros,
 		},
 		composables: {
+			useAttrs: ['useAttrs'],
 			useCssModule: ['useCssModule'],
 			useTemplateRef: ['useTemplateRef', 'templateRef'],
 			...vueOptions.composables,

diff --git a/test-workspace/tsc/passedFixtures/fallthroughAttributes_strictTemplate/useAttrs/main.vue b/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>