feat(language-core): support defineSlots destructuring (#4312)

Co-authored-by: Johnson Chu <johnsoncodehk@gmail.com>
vuejs · Apr 30, 2024 · 8719468 · 8719468
1 parent cad85aa
commit 8719468
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>