feat: provide component instance type in Svelte 5

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_;

packages/svelte2tsx/test/svelte2tsx/samples/sveltekit-autotypes-$props-rune-no-changes.v5/expectedv2.ts

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

packages/svelte2tsx/test/svelte2tsx/samples/sveltekit-autotypes-$props-rune.v5/expectedv2.ts

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

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

@@ -22,4 +22,5 @@ async () => {  { svelteHTML.createElement("svelte:options", {"runes":true,});}
 };
 return { props: {} as Record<string, never>, exports: {} as any as { name1: string,name2: string,name3: string,name4: string,renamed1: string,renamed2: string,Foo: typeof Foo,bar: typeof bar,baz: string,RenamedFoo: typeof RenameFoo,renamedbar: typeof renamebar,renamedbaz: string }, 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/ts-runes-best-effort-types.v5/expectedv2.ts

@@ -6,4 +6,5 @@
 async () => {};
 return { props: {} as any as $$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/ts-runes-bindable.v5/expectedv2.ts

@@ -6,4 +6,5 @@
 async () => {};
 return { props: {} as any as $$ComponentProps, exports: {}, bindings: __sveltets_$$bindings('b', 'c'), 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/ts-runes.v5/expectedv2.ts

@@ -8,4 +8,5 @@
 async () => {};
 return { props: {} as any as $$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/ts-sveltekit-autotypes-$props-rune-unchanged.v5/expectedv2.ts

@@ -7,4 +7,5 @@
 async () => {};
 return { props: {} as any as $$ComponentProps, exports: {} as any as { snapshot: any }, bindings: __sveltets_$$bindings(''), slots: {}, events: {} }}
 const Page__SvelteComponent_ = __sveltets_2_fn_component(render());
+type Page__SvelteComponent_ = ReturnType<typeof Page__SvelteComponent_>;
 export default Page__SvelteComponent_;

packages/svelte2tsx/test/svelte2tsx/samples/ts-sveltekit-autotypes-$props-rune.v5/expectedv2.ts

@@ -7,4 +7,5 @@
 async () => {};
 return { props: {} as any as $$ComponentProps, exports: {} as any as { snapshot: typeof snapshot }, bindings: __sveltets_$$bindings(''), slots: {}, events: {} }}
 const Page__SvelteComponent_ = __sveltets_2_fn_component(render());
+type Page__SvelteComponent_ = ReturnType<typeof Page__SvelteComponent_>;
 export default Page__SvelteComponent_;