fix: improve types for props when using Client-side component API

.changeset/few-tips-suffer.md

@@ -0,0 +1,5 @@
+---
+'svelte': major
+---
+
+improve types for props when using Client-side component API

packages/svelte/src/runtime/internal/dev.js

@@ -292,9 +292,9 @@ export function construct_svelte_component_dev(component, props) {
  * </script>
  * <MyComponent foo={'bar'} />
  * ```
- * @template {Record<string, any>} [Props=any]
- * @template {Record<string, any>} [Events=any]
- * @template {Record<string, any>} [Slots=any]
+ * @template {Record<string, any> | never} [Props=Record<string, any>]
+ * @template {Record<string, any>} [Events=Record<string, any>]
+ * @template {Record<string, any>} [Slots=Record<string, any>]
  * @extends {SvelteComponent<Props, Events>}
  */
 export class SvelteComponentDev extends SvelteComponent {
@@ -346,9 +346,9 @@ export class SvelteComponentDev extends SvelteComponent {
 	$inject_state() {}
 }
 /**
- * @template {Record<string, any>} [Props=any]
- * @template {Record<string, any>} [Events=any]
- * @template {Record<string, any>} [Slots=any]
+ * @template {Record<string, any> | never} [Props=Record<string, any>]
+ * @template {Record<string, any>} [Events=Record<string, any>]
+ * @template {Record<string, any>} [Slots=Record<string, any>]
  * @deprecated Use `SvelteComponent` instead. See PR for more information: https://github.com/sveltejs/svelte/pull/8512
  * @extends {SvelteComponentDev<Props, Events, Slots>}
  */

packages/svelte/src/runtime/internal/public.d.ts

@@ -1,18 +1,34 @@
 import { SvelteComponent } from './Component.js';
 import { SvelteComponentDev } from './dev.js';
 
-export interface ComponentConstructorOptions<
-	Props extends Record<string, any> = Record<string, any>
-> {
+interface ComponentConstructorOptionsWithoutProps {
 	target: Element | Document | ShadowRoot;
 	anchor?: Element;
-	props?: Props;
 	context?: Map<any, any>;
 	hydrate?: boolean;
 	intro?: boolean;
 	$$inline?: boolean;
 }
 
+interface ComponentConstructorOptionsWithProps<
+	Props extends Record<string, any> = Record<string, any>
+> extends ComponentConstructorOptionsWithoutProps {
+	props: Props;
+}
+
+interface ComponentConstructorOptionsWithOptionalProps<
+	Props extends Record<string, any> = Record<string, any>
+> extends ComponentConstructorOptionsWithoutProps {
+	props?: Props;
+}
+
+export type ComponentConstructorOptions<Props extends Record<string, any> | null = null> =
+	Props extends null
+		? ComponentConstructorOptionsWithoutProps
+		: Record<string, any> extends Props
+		? ComponentConstructorOptionsWithOptionalProps
+		: ComponentConstructorOptionsWithProps<Props>;
+
 /**
  * Convenience type to get the events the given component expects. Example:
  * ```html

packages/svelte/test/types/component-constructor-options.ts

@@ -0,0 +1,60 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { ComponentConstructorOptions } from '$runtime/internal/public.js';
+
+type NoProps = ComponentConstructorOptions;
+
+const n1: NoProps = {
+	target: document.body
+};
+
+const n2: NoProps = {
+	target: document.body,
+	// @ts-expect-error does not accept props
+	props: {}
+};
+
+const n3: NoProps = {
+	target: document.body,
+	// @ts-expect-error does not accept any props
+	props: {
+		img: ''
+	}
+};
+
+type Props = ComponentConstructorOptions<{ img: string }>;
+
+// @ts-expect-error
+const p1: Props = {
+	target: document.body
+};
+
+const p2: Props = {
+	target: document.body,
+	// @ts-expect-error required prop is missing
+	props: {}
+};
+
+const p3: Props = {
+	target: document.body,
+	props: {
+		img: ''
+	}
+};
+
+type OptionalProps = ComponentConstructorOptions<{ img?: string }>;
+
+const o1: OptionalProps = {
+	target: document.body
+};
+
+const o2: OptionalProps = {
+	target: document.body,
+	props: {}
+};
+
+const o3: OptionalProps = {
+	target: document.body,
+	props: {
+		img: ''
+	}
+};