From 3b9f676f11e6991398af8c1e8b3d900233d2eba2 Mon Sep 17 00:00:00 2001
From: Johnson Chu <johnsoncodehk@gmail.com>
Date: Wed, 26 Apr 2023 03:49:56 +0800
Subject: [PATCH] feat: generate JSX slots when `vueCompilerOptions.jsxSlots`
 enabled

close #2714
---
 .../schemas/vue-tsconfig.schema.json          |  5 +++++
 .../src/generators/script.ts                  | 20 ++++++++++++-------
 packages/vue-language-core/src/types.ts       |  1 +
 packages/vue-language-core/src/utils/ts.ts    |  1 +
 .../vue-test-workspace/vue-tsc/tsconfig.json  |  1 +
 5 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/packages/vue-language-core/schemas/vue-tsconfig.schema.json b/packages/vue-language-core/schemas/vue-tsconfig.schema.json
index 1d938859f..adfa891f1 100644
--- 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
index a89ad83aa..b8bb16006 100644
--- 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
index f08678910..88ff2f373 100644
--- 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
index a5f15f33a..d0723c5a0 100644
--- 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
index 34e44b61d..75623fb61 100644
--- 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": [