feat: provide component instance type in Svelte 5 (#2553)

While it's a gotcha for people declaring their own types, the vast majority of people will use component types via importing other components, and as such it makes sense to provide the same convenience we know from class components

#2522

Author: dummdidumm

packages/svelte2tsx/src/svelte2tsx/addComponentExport.ts

@@ -174,13 +174,15 @@ function addSimpleComponentExport({
 
     const doc = componentDocumentation.getFormatted();
     const className = fileName && classNameFromFilename(fileName, mode !== 'dts');
+    const componentName = className || '$$Component';
 
     let statement: string;
     if (mode === 'dts') {
         if (isSvelte5 && exportedNames.usesRunes() && !usesSlots && !events.hasEvents()) {
             statement =
-                `\n${doc}const ${className || '$$Component'} = __sveltets_2_fn_component(render());\n` +
-                `export default ${className || '$$Component'};`;
+                `\n${doc}const ${componentName} = __sveltets_2_fn_component(render());\n` +
+                `type ${componentName} = ReturnType<typeof ${componentName}>;\n` +
+                `export default ${componentName};`;
         } else if (isSvelte5) {
             // Inline definitions from Svelte shims; else dts files will reference the globals which will be unresolved
             statement =
@@ -203,11 +205,11 @@ function addSimpleComponentExport({
 declare function $$__sveltets_2_isomorphic_component<
     Props extends Record<string, any>, Events extends Record<string, any>, Slots extends Record<string, any>, Exports extends Record<string, any>, Bindings extends string
 >(klass: {props: Props, events: Events, slots: Slots, exports?: Exports, bindings?: Bindings }): $$__sveltets_2_IsomorphicComponent<Props, Events, Slots, Exports, Bindings>;\n`) +
-                `${doc}const ${className || '$$Component'} = $$__sveltets_2_isomorphic_component${usesSlots ? '_slots' : ''}(${propDef});\n` +
+                `${doc}const ${componentName} = $$__sveltets_2_isomorphic_component${usesSlots ? '_slots' : ''}(${propDef});\n` +
                 surroundWithIgnoreComments(
-                    `type ${className || '$$Component'} = InstanceType<typeof ${className || '$$Component'}>;\n`
+                    `type ${componentName} = InstanceType<typeof ${componentName}>;\n`
                 ) +
-                `export default ${className || '$$Component'};`;
+                `export default ${componentName};`;
         } else if (isTsFile) {
             const svelteComponentClass = noSvelteComponentTyped
                 ? 'SvelteComponent'
@@ -244,15 +246,16 @@ declare function $$__sveltets_2_isomorphic_component<
         if (isSvelte5) {
             if (exportedNames.usesRunes() && !usesSlots && !events.hasEvents()) {
                 statement =
-                    `\n${doc}const ${className || '$$Component'} = __sveltets_2_fn_component(render());\n` +
-                    `export default ${className || '$$Component'};`;
+                    `\n${doc}const ${componentName} = __sveltets_2_fn_component(render());\n` +
+                    `type ${componentName} = ReturnType<typeof ${componentName}>;\n` +
+                    `export default ${componentName};`;
             } else {
                 statement =
-                    `\n${doc}const ${className || '$$Component'} = __sveltets_2_isomorphic_component${usesSlots ? '_slots' : ''}(${propDef});\n` +
+                    `\n${doc}const ${componentName} = __sveltets_2_isomorphic_component${usesSlots ? '_slots' : ''}(${propDef});\n` +
                     surroundWithIgnoreComments(
-                        `type ${className || '$$Component'} = InstanceType<typeof ${className || '$$Component'}>;\n`
+                        `type ${componentName} = InstanceType<typeof ${componentName}>;\n`
                     ) +
-                    `export default ${className || '$$Component'};`;
+                    `export default ${componentName};`;
             }
         } else {
             statement =

packages/svelte2tsx/test/emitDts/samples/javascript-runes.v5/expected/TestRunes.svelte.d.ts

@@ -4,4 +4,5 @@ declare const TestRunes: import("svelte").Component<{
 }, {
     baz: () => void;
 }, "bar">;
+type TestRunes = ReturnType<typeof TestRunes>;
 export default TestRunes;

packages/svelte2tsx/test/emitDts/samples/typescript-runes.v5/expected/TestRunes.svelte.d.ts

@@ -4,4 +4,5 @@ declare const TestRunes: import("svelte").Component<{
 }, {
     baz: () => void;
 }, "bar">;
+type TestRunes = ReturnType<typeof TestRunes>;
 export default TestRunes;

packages/svelte2tsx/test/svelte2tsx/samples/export-list-runes.v5/expectedv2.ts

@@ -22,4 +22,5 @@ async () => {  { svelteHTML.createElement("svelte:options", {"runes":true,});}
 };
 return { props: /** @type {Record<string, never>} */ ({}), exports: /** @type {{name1: typeof name1,name2: typeof name2,renamed1: typeof rename1,renamed2: typeof rename2,Foo: typeof Foo,bar: typeof bar,baz: typeof baz,RenamedFoo: typeof RenameFoo,renamedbar: typeof renamebar,renamedbaz: typeof renamebaz}} */ ({}), bindings: __sveltets_$$bindings(''), slots: {}, events: {} }}
 const Input__SvelteComponent_ = __sveltets_2_fn_component(render());
+type Input__SvelteComponent_ = ReturnType<typeof Input__SvelteComponent_>;
 export default Input__SvelteComponent_;

packages/svelte2tsx/test/svelte2tsx/samples/renamed-exports-runes.v5/expectedv2.ts

@@ -10,4 +10,5 @@ async () => {  { svelteHTML.createElement("svelte:options", {"runes":true,});}
 };
 return { props: /** @type {Record<string, never>} */ ({}), exports: /** @type {{name3: typeof name,name4: typeof name2}} */ ({}), bindings: __sveltets_$$bindings(''), slots: {}, events: {} }}
 const Input__SvelteComponent_ = __sveltets_2_fn_component(render());
+type Input__SvelteComponent_ = ReturnType<typeof Input__SvelteComponent_>;
 export default Input__SvelteComponent_;

packages/svelte2tsx/test/svelte2tsx/samples/runes-best-effort-types.v5/expectedv2.ts

@@ -6,4 +6,5 @@
 async () => {};
 return { props: /** @type {$$ComponentProps} */({}), exports: {}, bindings: __sveltets_$$bindings(''), slots: {}, events: {} }}
 const Input__SvelteComponent_ = __sveltets_2_fn_component(render());
+type Input__SvelteComponent_ = ReturnType<typeof Input__SvelteComponent_>;
 export default Input__SvelteComponent_;

packages/svelte2tsx/test/svelte2tsx/samples/runes-bindable.v5/expectedv2.ts

@@ -6,4 +6,5 @@
 async () => {};
 return { props: /** @type {$$ComponentProps} */({}), exports: {}, bindings: __sveltets_$$bindings('b'), slots: {}, events: {} }}
 const Input__SvelteComponent_ = __sveltets_2_fn_component(render());
+type Input__SvelteComponent_ = ReturnType<typeof Input__SvelteComponent_>;
 export default Input__SvelteComponent_;

packages/svelte2tsx/test/svelte2tsx/samples/runes-looking-like-stores.v5/expectedv2.ts

@@ -10,4 +10,5 @@ async () => {
 state; derived;};
 return { props: /** @type {$$ComponentProps} */({}), exports: {}, bindings: __sveltets_$$bindings(''), slots: {}, events: {} }}
 const Input__SvelteComponent_ = __sveltets_2_fn_component(render());
+type Input__SvelteComponent_ = ReturnType<typeof Input__SvelteComponent_>;
 export default Input__SvelteComponent_;

packages/svelte2tsx/test/svelte2tsx/samples/runes-only-export.v5/expectedv2.ts

@@ -9,4 +9,5 @@ async () => {
 x;};
 return { props: /** @type {Record<string, never>} */ ({}), exports: /** @type {{foo: typeof foo}} */ ({}), bindings: __sveltets_$$bindings(''), slots: {}, events: {} }}
 const Input__SvelteComponent_ = __sveltets_2_fn_component(render());
+type Input__SvelteComponent_ = ReturnType<typeof Input__SvelteComponent_>;
 export default Input__SvelteComponent_;

packages/svelte2tsx/test/svelte2tsx/samples/runes.v5/expectedv2.ts

@@ -9,4 +9,5 @@
 async () => {};
 return { props: /** @type {$$ComponentProps} */({}), exports: {}, bindings: __sveltets_$$bindings(''), slots: {}, events: {} }}
 const Input__SvelteComponent_ = __sveltets_2_fn_component(render());
+type Input__SvelteComponent_ = ReturnType<typeof Input__SvelteComponent_>;
 export default Input__SvelteComponent_;