fix: support function invocation from imported *.svelte components (#…

…12061)

When the TypeScript plugin we provide isn't enabled, imports to `.svelte`-files fall back to an ambient module declaration. Said declaration was still only providing the deprecated class. This PR widens the type so that you can also invoke it like a function. After the transition period (Svelte 6 or 7) only the new type should be provided from the module declaration.

.changeset/ninety-days-visit.md

@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: support function invocation from imported `*.svelte` components

packages/svelte/src/ambient.d.ts

@@ -1,5 +1,16 @@
 declare module '*.svelte' {
-	export { SvelteComponent as default } from 'svelte';
+	import { SvelteComponent, Component, type ComponentConstructorOptions } from 'svelte';
+
+	// Support using the component as both a class and function during the transition period
+	interface ComponentType {
+		(
+			...args: Parameters<Component<Record<string, any>>>
+		): ReturnType<Component<Record<string, any>, Record<string, any>>>;
+		new (o: ComponentConstructorOptions): SvelteComponent;
+	}
+	const Comp: ComponentType;
+	type Comp = SvelteComponent;
+	export default Comp;
 }
 
 /**

packages/svelte/tests/types/component.ts

@@ -281,3 +281,13 @@ render(functionComponent, {
 		x: ''
 	}
 });
+
+// --------------------------------------------------------------------------- *.svelte components
+
+// import from a nonexistent file to trigger the declare module '*.svelte' in ambient.d.ts
+// this could show an error in the future in the editor (because language tools intercepts and knows this is an error)
+// but should always pass in tsc (because it will never know about this fact)
+import Foo from './doesntexist.svelte';
+
+Foo(null, { a: true });
+const f: Foo = new Foo({ target: document.body, props: { a: true } });

packages/svelte/types/index.d.ts

@@ -2634,7 +2634,18 @@ declare module 'svelte/types/compiler/interfaces' {
 	 */
 	type Namespace = 'html' | 'svg' | 'mathml' | 'foreign';
 }declare module '*.svelte' {
-	export { SvelteComponent as default } from 'svelte';
+	import { SvelteComponent, Component, type ComponentConstructorOptions } from 'svelte';
+
+	// Support using the component as both a class and function during the transition period
+	interface ComponentType {
+		(
+			...args: Parameters<Component<Record<string, any>>>
+		): ReturnType<Component<Record<string, any>, Record<string, any>>>;
+		new (o: ComponentConstructorOptions): SvelteComponent;
+	}
+	const Comp: ComponentType;
+	type Comp = SvelteComponent;
+	export default Comp;
 }
 
 /**