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
withastro · Jul 20, 2022 · 40a45e3 · 40a45e3
1 parent 3114241
commit 40a45e3
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 6 deletions.
diff --git a/.changeset/lovely-lions-attend.md 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
@@ -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;