feat(language-core): type support of $attrs (vuejs#5076)

Hawthorne001 · Dec 20, 2024 · 8cf123f · 8cf123f
1 parent 54f630e
commit 8cf123f
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 22 deletions.
diff --git a/packages/language-core/lib/codegen/template/context.ts b/packages/language-core/lib/codegen/template/context.ts
@@ -125,6 +125,8 @@ export function createTemplateCodegenContext(options: Pick<TemplateCodegenOption
 	}[] = [];
 	const emptyClassOffsets: number[] = [];
 	const inlayHints: InlayHintInfo[] = [];
+	const bindingAttrLocs: CompilerDOM.SourceLocation[] = [];
+	const inheritedAttrVars = new Set<string>();
 	const templateRefs = new Map<string, [varName: string, offset: number]>();
 
 	return {
@@ -140,7 +142,8 @@ export function createTemplateCodegenContext(options: Pick<TemplateCodegenOption
 		emptyClassOffsets,
 		inlayHints,
 		hasSlot: false,
-		inheritedAttrVars: new Set(),
+		bindingAttrLocs,
+		inheritedAttrVars,
 		templateRefs,
 		singleRootElType: undefined as string | undefined,
 		singleRootNode: undefined as CompilerDOM.ElementNode | undefined,

diff --git a/packages/language-core/lib/codegen/template/elementProps.ts b/packages/language-core/lib/codegen/template/elementProps.ts
@@ -240,28 +240,35 @@ export function* generateElementProps(
 			&& !prop.arg
 			&& prop.exp?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION
 		) {
-			const codes = wrapWith(
-				prop.exp.loc.start.offset,
-				prop.exp.loc.end.offset,
-				ctx.codeFeatures.verification,
-				`...`,
-				...generatePropExp(
-					options,
-					ctx,
-					prop,
-					prop.exp,
-					ctx.codeFeatures.all,
-					false,
-					enableCodeFeatures
-				)
-			);
-			if (enableCodeFeatures) {
-				yield* codes;
+			if (prop.exp.loc.source === '$attrs') {
+				if (enableCodeFeatures) {
+					ctx.bindingAttrLocs.push(prop.exp.loc);
+				}
 			}
 			else {
-				yield toString([...codes]);
+				const codes = wrapWith(
+					prop.exp.loc.start.offset,
+					prop.exp.loc.end.offset,
+					ctx.codeFeatures.verification,
+					`...`,
+					...generatePropExp(
+						options,
+						ctx,
+						prop,
+						prop.exp,
+						ctx.codeFeatures.all,
+						false,
+						enableCodeFeatures
+					)
+				);
+				if (enableCodeFeatures) {
+					yield* codes;
+				}
+				else {
+					yield toString([...codes]);
+				}
+				yield `,${newLine}`;
 			}
-			yield `,${newLine}`;
 		}
 	}
 }

diff --git a/packages/language-core/lib/codegen/template/index.ts b/packages/language-core/lib/codegen/template/index.ts
@@ -35,9 +35,8 @@ export function* generateTemplate(options: TemplateCodegenOptions): Generator<Co
 	if (options.propsAssignName) {
 		ctx.addLocalVariable(options.propsAssignName);
 	}
-	// TODO: circular reference
-	// ctx.addLocalVariable('$attrs');
 	ctx.addLocalVariable(getSlotsPropertyName(options.vueCompilerOptions.target));
+	ctx.addLocalVariable('$attrs');
 	ctx.addLocalVariable('$refs');
 	ctx.addLocalVariable('$el');
 
@@ -100,6 +99,20 @@ function* generateInheritedAttrs(ctx: TemplateCodegenContext): Generator<Code> {
 	}
 	yield endOfLine;
 	yield `var $attrs!: Partial<typeof __VLS_inheritedAttrs> & Record<string, unknown>${endOfLine}`;
+
+	if (ctx.bindingAttrLocs.length) {
+		yield `[`;
+		for (const loc of ctx.bindingAttrLocs) {
+			yield [
+				loc.source,
+				'template',
+				loc.start.offset,
+				ctx.codeFeatures.all
+			];
+			yield `,`;
+		}
+		yield `]${endOfLine}`;
+	}
 }
 
 function* generateRefs(ctx: TemplateCodegenContext): Generator<Code> {