fix(vue): vue regular script block exports not being recognized inside editor (#8998)

Co-authored-by: Erika <3019731+Princesseuh@users.noreply.github.com>

1 files changed, 19 insertions, 9 deletions

diff --git a/packages/integrations/vue/src/editor.cts b/packages/integrations/vue/src/editor.cts
index 29adaa09c..0b62e899e 100644
--- a/packages/integrations/vue/src/editor.cts
+++ b/packages/integrations/vue/src/editor.cts
@@ -6,7 +6,7 @@ export function toTSX(code: string, className: string): string {
 	// NOTE: As you can expect, using regexes for this is not exactly the most reliable way of doing things
 	// However, I couldn't figure out a way to do it using Vue's compiler, I tried looking at how Volar does it, but I
 	// didn't really understand everything happening there and it seemed to be pretty Volar-specific. I do believe
-	// someone more knowledgable on Vue's internals could figure it out, but since this solution is good enough for most
+	// someone more knowledgeable on Vue's internals could figure it out, but since this solution is good enough for most
 	// Vue components (and it's an improvement over, well, nothing), it's alright, I think
 	try {
 		const parsedResult = parse(code);
@@ -18,29 +18,39 @@ export function toTSX(code: string, className: string): string {
 			`;
 		}
 
-		if (parsedResult.descriptor.scriptSetup) {
-			const definePropsType =
-				parsedResult.descriptor.scriptSetup.content.match(/defineProps<([\s\S]+)>/m);
+		// Vue supports 2 type of script blocks: setup and non-setup
+		const regularScriptBlockContent = parsedResult.descriptor.script?.content ?? '';
+		const { scriptSetup } = parsedResult.descriptor;
+
+		if (scriptSetup) {
+			const definePropsType = scriptSetup.content.match(/defineProps<([\S\s]+?)>\s?\(\)/m);
+			const propsGeneric = scriptSetup.attrs.generic;
+			const propsGenericType = propsGeneric ? `<${propsGeneric}>` : '';
 
 			if (definePropsType) {
 				result = `
-						${parsedResult.descriptor.scriptSetup.content}
+						${regularScriptBlockContent}
+						${scriptSetup.content}
 
-						export default function ${className}__AstroComponent_(_props: ${definePropsType[1]}): any {
+						export default function ${className}__AstroComponent_${propsGenericType}(_props: ${definePropsType[1]}): any {
 							<div></div>
 						}
 				`;
 			} else {
-				const defineProps =
-					parsedResult.descriptor.scriptSetup.content.match(/defineProps\([\s\S]+\)/m);
+				// TODO. Find a way to support generics when using defineProps without passing explicit types.
+				// Right now something like this `defineProps({ prop: { type: Array as PropType<T[]> } })`
+				//  won't be correctly typed in Astro.
+				const defineProps = scriptSetup.content.match(/defineProps\([\s\S]+\)/m);
 
 				if (defineProps) {
 					result = `
 					import { defineProps } from '@vue/runtime-core';
 
+					${regularScriptBlockContent}
+
 					const Props = ${defineProps[0]}
 
-					export default function ${className}__AstroComponent_(_props: typeof Props): any {
+					export default function ${className}__AstroComponent_${propsGenericType}(_props: typeof Props): any {
 						<div></div>
 					}
 				`;