fix: fixed an error in the vue component editor(https://github.com/wi…

packages/integrations/vue/package.json

@@ -49,6 +49,7 @@
     "@types/chai": "^4.3.10",
     "astro": "workspace:*",
     "astro-scripts": "workspace:*",
+    "chai": "^4.3.10",
     "cheerio": "1.0.0-rc.12",
     "linkedom": "^0.16.4",
     "vite": "^5.1.4",

packages/integrations/vue/src/editor.cts

@@ -23,7 +23,8 @@ export function toTSX(code: string, className: string): string {
 		const { scriptSetup } = parsedResult.descriptor;
 
 		if (scriptSetup) {
-			const definePropsType = scriptSetup.content.match(/defineProps<([\s\S]+?)>\s?\(\)/);
+			const codeWithoutComments = scriptSetup.content.replace(/\/\/.*|\/\*[\s\S]*?\*\//g, '');
+			const definePropsType = codeWithoutComments.match(/defineProps<([\s\S]+?)>\s?\(\)/);
 			const propsGeneric = scriptSetup.attrs.generic;
 			const propsGenericType = propsGeneric ? `<${propsGeneric}>` : '';
 
@@ -40,11 +41,10 @@ export function toTSX(code: string, className: string): string {
 				// 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]+\)/);
-
+				const defineProps = codeWithoutComments.match(/defineProps\([\s\S]+?\)/);
 				if (defineProps) {
 					result = `
-					import { defineProps } from '@vue/runtime-core';
+					import { defineProps } from 'vue';
 
 					${regularScriptBlockContent}
 

packages/integrations/vue/test/toTsx.test.cts

@@ -0,0 +1,47 @@
+import { toTSX } from '../src/editor.cts';
+import {  describe, it} from 'node:test';
+import { expect } from 'chai';
+
+describe('toTSX function', () => {
+	it('should correctly transform Vue code to TSX with comments', () => {
+    const vueCode = `
+      <template>
+        <div>{{ msg }}</div>
+      </template>
+
+      <script setup>
+        // This is a comment in script setup
+        // defineProps(['msg']);
+				// console.log('foo)
+      </script>
+    `;
+
+    const className = 'MyComponent';
+    const result = toTSX(vueCode, className);
+
+    // Replace the expectations below with the expected result based on your logic
+    expect(result).to.equal(`export default function ${className}__AstroComponent_(_props: Record<string, any>): any {}`);
+  });
+	it('should correctly transform Vue code to TSX', () => {
+    const vueCode = `
+      <template>
+        <div @click="handleClick">{{ msg }}</div>
+      </template>
+
+      <script setup>
+        const props defineProps({
+					msg: String
+				});
+				const handleClick = () => {
+					console.log('foo');
+				}
+      </script>
+    `;
+
+    const className = 'MyComponent';
+    const result = toTSX(vueCode, className);
+
+    expect(result.replace(/\s/g, '')).
+		to.equal(`import{defineProps}from'vue';constProps=defineProps({msg:String})exportdefaultfunction${className}__AstroComponent_(_props:typeofProps):any{<div></div>}`);
+  });
+});