Properly support and type optional props in Svelte components (#3993)

* Properly support and type optional props in Svelte components

* Change output to support documentating components

* Add changeset

2 files changed, 9 insertions, 6 deletions

diff --git a/.changeset/lovely-lions-attend.md b/.changeset/lovely-lions-attend.md
new file mode 100644
index 000000000..e81a2b6dc
--- /dev/null
+++ b/.changeset/lovely-lions-attend.md
@@ -0,0 +1,5 @@
+---
+'@astrojs/svelte': patch
+---
+
+Fix optional props not being recognized properly in the editor
diff --git a/packages/integrations/svelte/src/editor.cts b/packages/integrations/svelte/src/editor.cts
index 202609d33..c14f082b1 100644
--- a/packages/integrations/svelte/src/editor.cts
+++ b/packages/integrations/svelte/src/editor.cts
@@ -7,13 +7,11 @@ export function toTSX(code: string, className: string): string {
 	`;
 
 	try {
-		let tsx = svelte2tsx(code).code;
-		tsx = 'let Props = render().props;\n' + tsx;
-
-		// Replace Svelte's class export with a function export
+		let tsx = svelte2tsx(code, { mode: 'ts' }).code;
+		tsx = '/// <reference types="svelte2tsx/svelte-shims" />\n' + tsx;
 		result = tsx.replace(
-			/^export default[\S\s]*/gm,
-			`export default function ${className}__AstroComponent_(_props: typeof Props): any {}`
+			'export default class extends __sveltets_1_createSvelte2TsxComponent(',
+			`export default function ${className}__AstroComponent_(_props: typeof Component.props): any {}\nlet Component = `
 		);
 	} catch (e: any) {
 		return result;