From 40a45e3ef6284c024d442cf7cb8e36d8354a35d1 Mon Sep 17 00:00:00 2001
From: Erika <3019731+Princesseuh@users.noreply.github.com>
Date: Wed, 20 Jul 2022 17:32:46 -0400
Subject: [PATCH] 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
---
 .changeset/lovely-lions-attend.md           |  5 +++++
 packages/integrations/svelte/src/editor.cts | 10 ++++------
 2 files changed, 9 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/lovely-lions-attend.md

diff --git a/.changeset/lovely-lions-attend.md b/.changeset/lovely-lions-attend.md
new file mode 100644
index 000000000000..e81a2b6dcf27
--- /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 202609d3393f..c14f082b1505 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;