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

Author: KazariEX

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,

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}`;
 }
 }
 }

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> {