feat: generate JSX slots when vueCompilerOptions.jsxSlots enabled

close #2714
vuejs · Apr 25, 2023 · 3b9f676 · 3b9f676
1 parent 3ace934
commit 3b9f676
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 7 deletions.
diff --git a/packages/vue-language-core/schemas/vue-tsconfig.schema.json b/packages/vue-language-core/schemas/vue-tsconfig.schema.json
@@ -19,6 +19,11 @@
 					"default": [ ".vue" ],
 					"markdownDescription": "Valid file extensions that should be considered as regular Vue SFC, please note that you should not use this option separately for additional file extensions IDE support, see https://github.com/johnsoncodehk/volar/tree/master/packages/vscode-vue/README.md#custom-file-extensions."
 				},
+				"jsxSlots": {
+					"type": "boolean",
+					"default": false,
+					"markdownDescription": "Generate slots type for `JSX.ElementChildrenAttribute`."
+				},
 				"strictTemplates": {
 					"type": "boolean",
 					"default": false,

diff --git a/packages/vue-language-core/src/generators/script.ts b/packages/vue-language-core/src/generators/script.ts
@@ -142,11 +142,17 @@ export function generate(
 			}
 		}
 		if (usedHelperTypes.WithTemplateSlots) {
-			usedHelperTypes.PropsChildren = true;
-			codes.push(`type __VLS_WithTemplateSlots<T, S> = T & { new(): {
-				$slots: S;
-				$props: __VLS_PropsChildren<S>;
-			} };\n`);
+			codes.push(
+				`type __VLS_WithTemplateSlots<T, S> = T & { new(): {\n`,
+				`$slots: S;\n`,
+			);
+			if (vueCompilerOptions.jsxSlots) {
+				usedHelperTypes.PropsChildren = true;
+				codes.push(`$props: __VLS_PropsChildren<S>;\n`);
+			}
+			codes.push(
+				`} };\n`,
+			);
 		}
 		if (usedHelperTypes.ToTemplateSlots) {
 			codes.push(`type __VLS_ToTemplateSlots<T> = { [K in keyof T]: NonNullable<T[K]> extends (...args: any[]) => any ? T[K] : (props: T[K]) => any };\n`);
@@ -354,7 +360,7 @@ export function generate(
 					}
 					codes.push(`};\n`);
 				}
-				if (scriptSetupRanges.slotsTypeArg) {
+				if (scriptSetupRanges.slotsTypeArg && vueCompilerOptions.jsxSlots) {
 					usedHelperTypes.ToTemplateSlots = true;
 					usedHelperTypes.PropsChildren = true;
 					codes.push(` & __VLS_PropsChildren<__VLS_ToTemplateSlots<`);
@@ -365,7 +371,7 @@ export function generate(
 			}
 			else {
 				codes.push(`const __VLS_props: {}`);
-				if (scriptSetupRanges.slotsTypeArg) {
+				if (scriptSetupRanges.slotsTypeArg && vueCompilerOptions.jsxSlots) {
 					usedHelperTypes.ToTemplateSlots = true;
 					usedHelperTypes.PropsChildren = true;
 					codes.push(` & __VLS_PropsChildren<__VLS_ToTemplateSlots<`);

diff --git a/packages/vue-language-core/src/types.ts b/packages/vue-language-core/src/types.ts
@@ -19,6 +19,7 @@ export type RawVueCompilerOptions = Partial<Omit<VueCompilerOptions, 'target' |
 export interface VueCompilerOptions {
 	target: number;
 	extensions: string[];
+	jsxSlots: boolean;
 	strictTemplates: boolean;
 	skipTemplateCodegen: boolean;
 	dataAttributes: string[];

diff --git a/packages/vue-language-core/src/utils/ts.ts b/packages/vue-language-core/src/utils/ts.ts
@@ -176,6 +176,7 @@ export function resolveVueCompilerOptions(vueOptions: Partial<VueCompilerOptions
 		...vueOptions,
 		target,
 		extensions: vueOptions.extensions ?? ['.vue'],
+		jsxSlots: vueOptions.jsxSlots ?? false,
 		strictTemplates: vueOptions.strictTemplates ?? false,
 		skipTemplateCodegen: vueOptions.skipTemplateCodegen ?? false,
 		dataAttributes: vueOptions.dataAttributes ?? [],

diff --git a/packages/vue-test-workspace/vue-tsc/tsconfig.json b/packages/vue-test-workspace/vue-tsc/tsconfig.json
@@ -5,6 +5,7 @@
 		"noPropertyAccessFromIndexSignature": true,
 	},
 	"vueCompilerOptions": {
+		"jsxSlots": true,
 		"plugins": ["../../vue-language-plugin-pug"]
 	},
 	"include": [