fix: support function invocation from imported *.svelte components

.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;
 }
 
 /**