Skip to content

Commit b411d53

Browse files
KazariEXjohnsoncodehk
KazariEX
and
johnsoncodehk
authored
feat(language-core): introduce options to control type inference of $attrs, $el, $refs and $slots (#5135)
Co-authored-by: Johnson Chu <[email protected]>
1 parent 408e97a commit b411d53

File tree

15 files changed

+118
-41
lines changed

15 files changed

+118
-41
lines changed

‎packages/language-core/lib/codegen/script/component.ts

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,10 +37,18 @@ export function* generateComponent(
3737
}
3838
yield* generatePropsOption(options, ctx, scriptSetup, scriptSetupRanges, !!emitOptionCodes.length, true);
3939
}
40-
if (options.vueCompilerOptions.target >= 3.5 && options.templateCodegen?.templateRefs.size) {
40+
if (
41+
options.vueCompilerOptions.target >= 3.5
42+
&& options.vueCompilerOptions.inferComponentDollarRefs
43+
&& options.templateCodegen?.templateRefs.size
44+
) {
4145
yield `__typeRefs: {} as __VLS_TemplateRefs,${newLine}`;
4246
}
43-
if (options.vueCompilerOptions.target >= 3.5 && options.templateCodegen?.singleRootElType) {
47+
if (
48+
options.vueCompilerOptions.target >= 3.5
49+
&& options.vueCompilerOptions.inferComponentDollarEl
50+
&& options.templateCodegen?.singleRootElType
51+
) {
4452
yield `__typeEl: {} as __VLS_RootEl,${newLine}`;
4553
}
4654
if (options.sfc.script && options.scriptRanges?.exportDefault?.args) {

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

Lines changed: 24 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -171,16 +171,18 @@ function* generateSetupFunction(
171171
]);
172172
}
173173
}
174-
for (const { callExp } of scriptSetupRanges.useAttrs) {
175-
setupCodeModifies.push([
176-
[`(`],
177-
callExp.start,
178-
callExp.start
179-
], [
180-
[` as typeof __VLS_special.$attrs)`],
181-
callExp.end,
182-
callExp.end
183-
]);
174+
if (options.vueCompilerOptions.inferTemplateDollarAttrs) {
175+
for (const { callExp } of scriptSetupRanges.useAttrs) {
176+
setupCodeModifies.push([
177+
[`(`],
178+
callExp.start,
179+
callExp.start
180+
], [
181+
[` as typeof __VLS_dollars.$attrs)`],
182+
callExp.end,
183+
callExp.end
184+
]);
185+
}
184186
}
185187
for (const { callExp, exp, arg } of scriptSetupRanges.useCssModule) {
186188
setupCodeModifies.push([
@@ -210,16 +212,18 @@ function* generateSetupFunction(
210212
]);
211213
}
212214
}
213-
for (const { callExp } of scriptSetupRanges.useSlots) {
214-
setupCodeModifies.push([
215-
[`(`],
216-
callExp.start,
217-
callExp.start
218-
], [
219-
[` as typeof __VLS_special.$slots)`],
220-
callExp.end,
221-
callExp.end
222-
]);
215+
if (options.vueCompilerOptions.inferTemplateDollarSlots) {
216+
for (const { callExp } of scriptSetupRanges.useSlots) {
217+
setupCodeModifies.push([
218+
[`(`],
219+
callExp.start,
220+
callExp.start
221+
], [
222+
[` as typeof __VLS_dollars.$slots)`],
223+
callExp.end,
224+
callExp.end
225+
]);
226+
}
223227
}
224228
const isTs = options.lang !== 'js' && options.lang !== 'jsx';
225229
for (const { callExp, exp, arg } of scriptSetupRanges.useTemplateRef) {

‎packages/language-core/lib/codegen/template/context.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ export function createTemplateCodegenContext(options: Pick<TemplateCodegenOption
4545

4646
const hoistVars = new Map<string, string>();
4747
const localVars = new Map<string, number>();
48-
const specialVars = new Set<string>();
48+
const dollarVars = new Set<string>();
4949
const accessExternalVariables = new Map<string, Set<number>>();
5050
const slots: {
5151
name: string;
@@ -83,7 +83,7 @@ export function createTemplateCodegenContext(options: Pick<TemplateCodegenOption
8383
resolveCodeFeatures,
8484
slots,
8585
dynamicSlots,
86-
specialVars,
86+
dollarVars,
8787
accessExternalVariables,
8888
lastGenericComment,
8989
blockConditions,

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

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -34,11 +34,20 @@ export function* generateTemplate(options: TemplateCodegenOptions): Generator<Co
3434
if (options.propsAssignName) {
3535
ctx.addLocalVariable(options.propsAssignName);
3636
}
37+
3738
const slotsPropertyName = getSlotsPropertyName(options.vueCompilerOptions.target);
38-
ctx.specialVars.add(slotsPropertyName);
39-
ctx.specialVars.add('$attrs');
40-
ctx.specialVars.add('$refs');
41-
ctx.specialVars.add('$el');
39+
if (options.vueCompilerOptions.inferTemplateDollarSlots) {
40+
ctx.dollarVars.add(slotsPropertyName);
41+
}
42+
if (options.vueCompilerOptions.inferTemplateDollarAttrs) {
43+
ctx.dollarVars.add('$attrs');
44+
}
45+
if (options.vueCompilerOptions.inferTemplateDollarRefs) {
46+
ctx.dollarVars.add('$refs');
47+
}
48+
if (options.vueCompilerOptions.inferTemplateDollarEl) {
49+
ctx.dollarVars.add('$el');
50+
}
4251

4352
if (options.template.ast) {
4453
yield* generateTemplateChild(options, ctx, options.template.ast, undefined);
@@ -55,7 +64,7 @@ export function* generateTemplate(options: TemplateCodegenOptions): Generator<Co
5564
['$el', yield* generateRootEl(ctx)]
5665
];
5766

58-
yield `var __VLS_special!: {${newLine}`;
67+
yield `var __VLS_dollars!: {${newLine}`;
5968
for (const [name, type] of speicalTypes) {
6069
yield `${name}: ${type}${endOfLine}`;
6170
}
@@ -114,7 +123,7 @@ function* generateInheritedAttrs(
114123
if (ctx.bindingAttrLocs.length) {
115124
yield `[`;
116125
for (const loc of ctx.bindingAttrLocs) {
117-
yield `__VLS_special.`;
126+
yield `__VLS_dollars.`;
118127
yield [
119128
loc.source,
120129
'template',

‎packages/language-core/lib/codegen/template/interpolation.ts

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -134,7 +134,7 @@ function* forEachInterpolationSegment(
134134
const curVar = ctxVars[i];
135135
const nextVar = ctxVars[i + 1];
136136

137-
yield* generateVar(code, ctx.specialVars, destructuredPropNames, templateRefNames, curVar);
137+
yield* generateVar(code, ctx.dollarVars, destructuredPropNames, templateRefNames, curVar);
138138

139139
if (nextVar.isShorthand) {
140140
yield [code.slice(curVar.offset + curVar.text.length, nextVar.offset + nextVar.text.length), curVar.offset + curVar.text.length];
@@ -146,7 +146,7 @@ function* forEachInterpolationSegment(
146146
}
147147

148148
const lastVar = ctxVars.at(-1)!;
149-
yield* generateVar(code, ctx.specialVars, destructuredPropNames, templateRefNames, lastVar);
149+
yield* generateVar(code, ctx.dollarVars, destructuredPropNames, templateRefNames, lastVar);
150150
if (lastVar.offset + lastVar.text.length < code.length) {
151151
yield [code.slice(lastVar.offset + lastVar.text.length), lastVar.offset + lastVar.text.length, 'endText'];
152152
}
@@ -158,7 +158,7 @@ function* forEachInterpolationSegment(
158158

159159
function* generateVar(
160160
code: string,
161-
specialVars: Set<string>,
161+
dollarVars: Set<string>,
162162
destructuredPropNames: Set<string> | undefined,
163163
templateRefNames: Set<string> | undefined,
164164
curVar: CtxVar
@@ -175,8 +175,8 @@ function* generateVar(
175175
yield [`)`, undefined];
176176
}
177177
else {
178-
if (specialVars.has(curVar.text)) {
179-
yield [`__VLS_special.`, undefined];
178+
if (dollarVars.has(curVar.text)) {
179+
yield [`__VLS_dollars.`, undefined];
180180
}
181181
else if (!isDestructuredProp) {
182182
yield [`__VLS_ctx.`, undefined];

‎packages/language-core/lib/types.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,12 @@ export interface VueCompilerOptions {
3232
checkUnknownEvents: boolean;
3333
checkUnknownDirectives: boolean;
3434
checkUnknownComponents: boolean;
35+
inferComponentDollarEl: boolean;
36+
inferComponentDollarRefs: boolean;
37+
inferTemplateDollarAttrs: boolean;
38+
inferTemplateDollarEl: boolean;
39+
inferTemplateDollarRefs: boolean;
40+
inferTemplateDollarSlots: boolean;
3541
skipTemplateCodegen: boolean;
3642
fallthroughAttributes: boolean;
3743
dataAttributes: string[];

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -266,6 +266,12 @@ export function getDefaultCompilerOptions(target = 99, lib = 'vue', strictTempla
266266
checkUnknownEvents: strictTemplates,
267267
checkUnknownDirectives: strictTemplates,
268268
checkUnknownComponents: strictTemplates,
269+
inferComponentDollarEl: false,
270+
inferComponentDollarRefs: false,
271+
inferTemplateDollarAttrs: false,
272+
inferTemplateDollarEl: false,
273+
inferTemplateDollarRefs: false,
274+
inferTemplateDollarSlots: false,
269275
skipTemplateCodegen: false,
270276
fallthroughAttributes: false,
271277
dataAttributes: [],

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

Lines changed: 35 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,36 @@
6565
"default": false,
6666
"markdownDescription": "Check unknown components. If not set, uses the 'strictTemplates' value."
6767
},
68+
"inferComponentDollarEl": {
69+
"type": "boolean",
70+
"default": false,
71+
"markdownDescription": "Infer `$el` type on the component instance."
72+
},
73+
"inferComponentDollarRefs": {
74+
"type": "boolean",
75+
"default": false,
76+
"markdownDescription": "Infer `$refs` type on the component instance."
77+
},
78+
"inferTemplateDollarAttrs": {
79+
"type": "boolean",
80+
"default": false,
81+
"markdownDescription": "Infer `$attrs` type in the template and the return type of `useAttrs`."
82+
},
83+
"inferTemplateDollarEl": {
84+
"type": "boolean",
85+
"default": false,
86+
"markdownDescription": "Infer `$el` type in the template."
87+
},
88+
"inferTemplateDollarRefs": {
89+
"type": "boolean",
90+
"default": false,
91+
"markdownDescription": "Infer `$refs` type in the template."
92+
},
93+
"inferTemplateDollarSlots": {
94+
"type": "boolean",
95+
"default": false,
96+
"markdownDescription": "Infer `$slots` type in the template and the return type of `useSlots`."
97+
},
6898
"skipTemplateCodegen": {
6999
"type": "boolean",
70100
"default": false,
@@ -85,11 +115,6 @@
85115
"default": [ "aria-*" ],
86116
"markdownDescription": "A glob matcher array that should always be recognizing as HTML Attributes rather than Component props. Attribute name will never convert to camelize case."
87117
},
88-
"plugins": {
89-
"type": "array",
90-
"default": [ ],
91-
"markdownDescription": "Plugins to be used in the SFC compiler."
92-
},
93118
"optionsWrapper": {
94119
"type": "array",
95120
"default": [
@@ -119,6 +144,11 @@
119144
"useTemplateRef": [ "useTemplateRef", "templateRef" ]
120145
}
121146
},
147+
"plugins": {
148+
"type": "array",
149+
"default": [ ],
150+
"markdownDescription": "Plugins to be used in the SFC compiler."
151+
},
122152
"experimentalResolveStyleCssClasses": {
123153
"enum": [
124154
"scoped",

‎packages/tsc/tests/__snapshots__/dts.spec.ts.snap

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -331,7 +331,7 @@ exports[`vue-tsc-dts > Input: reference-type-props/component-destructure.vue, Ou
331331
"type __VLS_Props = {
332332
text: string;
333333
};
334-
declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, HTMLDivElement>;
334+
declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
335335
export default _default;
336336
"
337337
`;

‎test-workspace/tsc/passedFixtures/vue3/rootEl/base.vue

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
<!-- @inferComponentDollarEl true -->
2+
<!-- @inferTemplateDollarEl true -->
3+
14
<script setup lang="ts">
25
import { exactType } from '../../shared';
36
</script>

0 commit comments

Comments
 (0)