fix: handle optional args in snippets (#2414)

#2406
sveltejs · Jun 24, 2024 · 7008652 · 7008652
1 parent dbfb47a
commit 7008652
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 12 deletions.
diff --git a/packages/svelte2tsx/src/htmlxtojsx_v2/nodes/SnippetBlock.ts b/packages/svelte2tsx/src/htmlxtojsx_v2/nodes/SnippetBlock.ts
@@ -82,14 +82,19 @@ export function handleSnippet(
                             typeAnnotation = p.right?.typeAnnotation;
                         }
                     }
-                    if (!typeAnnotation) return 'any';
-                    return typeAnnotation.typeAnnotation
-                        ? str.original.slice(
-                              typeAnnotation.typeAnnotation.start,
-                              typeAnnotation.typeAnnotation.end
-                          )
-                        : // slap any on to it to silence "implicit any" errors; JSDoc people can't add types to snippets
-                          'any';
+
+                    // fall back to `any` to silence "implicit any" errors; JSDoc people can't add types to snippets
+                    let type = 'any';
+                    if (typeAnnotation?.typeAnnotation) {
+                        type = str.original.slice(
+                            typeAnnotation.typeAnnotation.start,
+                            typeAnnotation.typeAnnotation.end
+                        );
+                    }
+                    if (p.optional || p.type === 'AssignmentPattern') {
+                        type += '?';
+                    }
+                    return type;
                 })
                 .join(', ')}]>`;
         }

diff --git a/packages/svelte2tsx/test/htmlx2jsx/samples/snippet.v5/expectedv2.js b/packages/svelte2tsx/test/htmlx2jsx/samples/snippet.v5/expectedv2.js
@@ -10,6 +10,10 @@
 	   { const $$_value = await (foo);{ const bar = $$_value; bar;}}
 };return __sveltets_2_any(0)};
 
+ var defaultValue/*Ωignore_startΩ*/: import('svelte').Snippet<[any?]>/*Ωignore_endΩ*/ = (x = '') => {async () => {
+	 { svelteHTML.createElement("div", {}); x; }
+};return __sveltets_2_any(0)};
+
 ;__sveltets_2_ensureSnippet(foo(1));
 ;__sveltets_2_ensureSnippet(bar());
 ;__sveltets_2_ensureSnippet(await_inside());

diff --git a/packages/svelte2tsx/test/htmlx2jsx/samples/snippet.v5/input.svelte b/packages/svelte2tsx/test/htmlx2jsx/samples/snippet.v5/input.svelte
@@ -10,6 +10,10 @@
 	{#await foo then bar}{bar}{/await}
 {/snippet}
 
+{#snippet defaultValue(x = '')}
+	<div>asd{x}</div>
+{/snippet}
+
 {@render foo(1)}
 {@render bar()}
 {@render await_inside()}

diff --git a/packages/svelte2tsx/test/htmlx2jsx/samples/ts-in-template.v5/expectedv2.js b/packages/svelte2tsx/test/htmlx2jsx/samples/ts-in-template.v5/expectedv2.js
@@ -22,9 +22,13 @@ item as string;
 
  var foo3/*Ωignore_startΩ*/: import('svelte').Snippet<[string | number]>/*Ωignore_endΩ*/ = (bar    : string | number) => {async () => { };return __sveltets_2_any(0)};
 
- var foo3/*Ωignore_startΩ*/: import('svelte').Snippet<[string | number, (str: string)=>void]>/*Ωignore_endΩ*/ = (bar    : string | number, baz     : (str: string)=>void) => {async () => { };return __sveltets_2_any(0)};
+ var foo4/*Ωignore_startΩ*/: import('svelte').Snippet<[string | number, (str: string)=>void]>/*Ωignore_endΩ*/ = (bar    : string | number, baz     : (str: string)=>void) => {async () => { };return __sveltets_2_any(0)};
 
- var foo3/*Ωignore_startΩ*/: import('svelte').Snippet<[{baz: string}]>/*Ωignore_endΩ*/ = (bar: {baz: string}) => {async () => { };return __sveltets_2_any(0)};
+ var foo5/*Ωignore_startΩ*/: import('svelte').Snippet<[{baz: string}]>/*Ωignore_endΩ*/ = (bar: {baz: string}) => {async () => { };return __sveltets_2_any(0)};
+
+ var foo6/*Ωignore_startΩ*/: import('svelte').Snippet<[string?]>/*Ωignore_endΩ*/ = (bar?: string) => {async () => { };return __sveltets_2_any(0)};
+
+ var foo7/*Ωignore_startΩ*/: import('svelte').Snippet<[any, any?]>/*Ωignore_endΩ*/ = (bar, baz = '') => {async () => { };return __sveltets_2_any(0)};
 
 ;__sveltets_2_ensureSnippet(foo(bar as string));
 

diff --git a/packages/svelte2tsx/test/htmlx2jsx/samples/ts-in-template.v5/input.svelte b/packages/svelte2tsx/test/htmlx2jsx/samples/ts-in-template.v5/input.svelte
@@ -34,11 +34,19 @@
     snippet
 {/snippet}
 
-{#snippet foo3(bar    : string | number, baz     : (str: string)=>void)}
+{#snippet foo4(bar    : string | number, baz     : (str: string)=>void)}
     snippet
 {/snippet}
 
-{#snippet foo3(bar: {baz: string})}
+{#snippet foo5(bar: {baz: string})}
+    snippet
+{/snippet}
+
+{#snippet foo6(bar?: string)}
+    snippet
+{/snippet}
+
+{#snippet foo7(bar, baz = '')}
     snippet
 {/snippet}