From 87194683a90e94cd2c7d37940d1170c65a28f0bb Mon Sep 17 00:00:00 2001
From: zhiyuanzmj <32807958+zhiyuanzmj@users.noreply.github.com>
Date: Tue, 30 Apr 2024 10:27:59 +0800
Subject: [PATCH] feat(language-core): support defineSlots destructuring
 (#4312)

Co-authored-by: Johnson Chu <johnsoncodehk@gmail.com>
---
 .../lib/codegen/script/scriptSetup.ts         | 13 +++++++++++--
 .../lib/parsers/scriptSetupRanges.ts          |  8 +++++++-
 .../tsc/tests/__snapshots__/dts.spec.ts.snap  | 19 +++++++++++++++++++
 .../component-destructuring.vue               | 13 +++++++++++++
 4 files changed, 50 insertions(+), 3 deletions(-)
 create mode 100644 test-workspace/component-meta/template-slots/component-destructuring.vue

diff --git a/packages/language-core/lib/codegen/script/scriptSetup.ts b/packages/language-core/lib/codegen/script/scriptSetup.ts
index 8be76b06ca..0e46c94992 100644
--- a/packages/language-core/lib/codegen/script/scriptSetup.ts
+++ b/packages/language-core/lib/codegen/script/scriptSetup.ts
@@ -162,8 +162,17 @@ function* generateSetupFunction(
 			}
 		}
 	}
-	if (scriptSetupRanges.slots.define && !scriptSetupRanges.slots.name) {
-		setupCodeModifies.push([[`const __VLS_slots = `], scriptSetupRanges.slots.define.start, scriptSetupRanges.slots.define.start]);
+	if (scriptSetupRanges.slots.define) {
+		if (!scriptSetupRanges.slots.name) {
+			setupCodeModifies.push([[`const __VLS_slots = `], scriptSetupRanges.slots.define.start, scriptSetupRanges.slots.define.start]);
+		}
+		else if (scriptSetupRanges.slots.isObjectBindingPattern) {
+			setupCodeModifies.push([
+				[`__VLS_slots;\nconst __VLS_slots = `],
+				scriptSetupRanges.slots.define.start,
+				scriptSetupRanges.slots.define.start,
+			]);
+		}
 	}
 	if (scriptSetupRanges.emits.define && !scriptSetupRanges.emits.name) {
 		setupCodeModifies.push([[`const __VLS_emit = `], scriptSetupRanges.emits.define.start, scriptSetupRanges.emits.define.start]);
diff --git a/packages/language-core/lib/parsers/scriptSetupRanges.ts b/packages/language-core/lib/parsers/scriptSetupRanges.ts
index e332edccc3..9727e3eba3 100644
--- a/packages/language-core/lib/parsers/scriptSetupRanges.ts
+++ b/packages/language-core/lib/parsers/scriptSetupRanges.ts
@@ -23,6 +23,7 @@ export function parseScriptSetupRanges(
 	} = {};
 	const slots: {
 		name?: string;
+		isObjectBindingPattern?: boolean;
 		define?: ReturnType<typeof parseDefineFunction>;
 	} = {};
 	const emits: {
@@ -185,7 +186,12 @@ export function parseScriptSetupRanges(
 			else if (vueCompilerOptions.macros.defineSlots.includes(callText)) {
 				slots.define = parseDefineFunction(node);
 				if (ts.isVariableDeclaration(parent)) {
-					slots.name = getNodeText(ts, parent.name, ast);
+					if (ts.isIdentifier(parent.name)) {
+						slots.name = getNodeText(ts, parent.name, ast);
+					}
+					else {
+						slots.isObjectBindingPattern = ts.isObjectBindingPattern(parent.name);
+					}
 				}
 			}
 			else if (vueCompilerOptions.macros.defineEmits.includes(callText)) {
diff --git a/packages/tsc/tests/__snapshots__/dts.spec.ts.snap b/packages/tsc/tests/__snapshots__/dts.spec.ts.snap
index 01f1312db9..67094f61fe 100644
--- a/packages/tsc/tests/__snapshots__/dts.spec.ts.snap
+++ b/packages/tsc/tests/__snapshots__/dts.spec.ts.snap
@@ -742,6 +742,25 @@ type __VLS_WithTemplateSlots<T, S> = T & {
 "
 `;
 
+exports[`vue-tsc-dts > Input: template-slots/component-destructuring.vue, Output: template-slots/component-destructuring.vue.d.ts 1`] = `
+"declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>, Readonly<{
+    bottom: (props: {
+        num: number;
+    }) => any[];
+}> & {
+    bottom: (props: {
+        num: number;
+    }) => any[];
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+"
+`;
+
 exports[`vue-tsc-dts > Input: template-slots/component-no-script.vue, Output: template-slots/component-no-script.vue.d.ts 1`] = `
 "declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>, {
     "no-bind"?(_: {}): any;
diff --git a/test-workspace/component-meta/template-slots/component-destructuring.vue b/test-workspace/component-meta/template-slots/component-destructuring.vue
new file mode 100644
index 0000000000..5f5c360109
--- /dev/null
+++ b/test-workspace/component-meta/template-slots/component-destructuring.vue
@@ -0,0 +1,13 @@
+<template>
+	<component-destructure #bottom="{ num }">
+		{{ num }}
+	</component-destructure>
+
+	<bottom :num="1" />
+</template>
+
+<script setup lang="ts">
+const { bottom } = defineSlots<{
+	bottom: (props: { num: number }) => any[],
+}>()
+</script>