breaking: remove Component type, keep using SvelteComponent instead

.changeset/small-papayas-laugh.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+breaking: remove Component type, keep using SvelteComponent instead

.github/PULL_REQUEST_TEMPLATE.md

@@ -4,7 +4,6 @@ Please note that [the Svelte codebase is currently being rewritten for Svelte 5]
 
 If your PR concerns Svelte 4 (including updates to [svelte.dev.docs](https://svelte.dev/docs)), please ensure the base branch is `svelte-4` and not `main`.
 
-
 ### Before submitting the PR, please make sure you do the following
 
 - [ ] It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs

packages/svelte/src/internal/client/render.js

@@ -3020,7 +3020,7 @@ export function unwrap(value) {
  * @template {Record<string, any>} Props
  * @template {Record<string, any> | undefined} Exports
  * @template {Record<string, any>} Events
- * @param {import('../../main/public.js').Component<Props, Exports, Events>} component
+ * @param {import('../../main/public.js').SvelteComponent<Props, Events>} component
  * @param {{
  * 		target: Node;
  * 		props?: Props;
@@ -3139,7 +3139,7 @@ export function createRoot(component, options) {
  * @template {Record<string, any>} Props
  * @template {Record<string, any> | undefined} Exports
  * @template {Record<string, any>} Events
- * @param {import('../../main/public.js').Component<Props, Exports, Events>} component
+ * @param {import('../../main/public.js').SvelteComponent<Props, Events>} component
  * @param {{
  * 		target: Node;
  * 		props?: Props;

packages/svelte/src/legacy/legacy-client.js

@@ -11,12 +11,12 @@ import * as $ from '../internal/index.js';
  * @template {Record<string, any>} Events
  * @template {Record<string, any>} Slots
  *
- * @param {import('./public.js').ComponentConstructorOptions<Props> & {
- * 	component: import('../main/public.js').Component<Props, Exports, Events, Slots>;
+ * @param {import('../main/public.js').ComponentConstructorOptions<Props> & {
+ * 	component: import('../main/public.js').SvelteComponent<Props, Events, Slots>;
  * 	immutable?: boolean;
  * 	recover?: false;
  * }} options
- * @returns {import('./public.js').SvelteComponent<Props & Exports, Events, Slots>}
+ * @returns {import('../main/public.js').SvelteComponent<Props, Events, Slots> & Exports}
  */
 export function createClassComponent(options) {
 	// @ts-expect-error $$prop_def etc are not actually defined
@@ -33,8 +33,8 @@ export function createClassComponent(options) {
  * @template {Record<string, any>} Events
  * @template {Record<string, any>} Slots
  *
- * @param {import('../main/public.js').Component<Props, Exports, Events, Slots>} component
- * @returns {typeof import('./public.js').SvelteComponent<Props & Exports, Events, Slots>}
+ * @param {import('../main/public.js').SvelteComponent<Props, Events, Slots>} component
+ * @returns {typeof import('../main/public.js').SvelteComponent<Props, Events, Slots> & Exports}
  */
 export function asClassComponent(component) {
 	// @ts-expect-error $$prop_def etc are not actually defined
@@ -57,7 +57,7 @@ class Svelte4Component {
 	#instance;
 
 	/**
-	 * @param {import('./public.js').ComponentConstructorOptions & {
+	 * @param {import('../main/public.js').ComponentConstructorOptions & {
 	 *  component: any;
 	 * 	immutable?: boolean;
 	 * 	recover?: false;

packages/svelte/src/legacy/legacy-server.js

@@ -6,7 +6,7 @@ import { render } from '../internal/server/index.js';
 export { createClassComponent };
 
 /**
- * Takes the component function and returns a Svelte 4 compatible component constructor.
+ * Takes a Svelte 5 component and returns a Svelte 4 compatible component constructor.
  *
  * @deprecated Use this only as a temporary solution to migrate your imperative component code to Svelte 5.
  *
@@ -15,8 +15,8 @@ export { createClassComponent };
  * @template {Record<string, any>} Events
  * @template {Record<string, any>} Slots
  *
- * @param {import('../main/public.js').Component<Props, Exports, Events, Slots>} component
- * @returns {typeof import('./public.js').SvelteComponent<Props & Exports, Events, Slots>}
+ * @param {import('../main/public.js').SvelteComponent<Props, Events, Slots>} component
+ * @returns {typeof import('../main/public.js').SvelteComponent<Props, Events, Slots> & Exports}
  */
 export function asClassComponent(component) {
 	const component_constructor = as_class_component(component);
@@ -30,8 +30,9 @@ export function asClassComponent(component) {
 			html: result.html
 		};
 	};
-	// @ts-expect-error this is present for SSR
+	// this is present for SSR
 	component_constructor.render = _render;
 
+	// @ts-ignore
 	return component_constructor;
 }

packages/svelte/src/legacy/public.d.ts

@@ -1,93 +1 @@
-/**
- * @deprecated Use `Component` instead. See TODO for more information.
- */
-export interface ComponentConstructorOptions<
-	Props extends Record<string, any> = Record<string, any>
-> {
-	target: Element | Document | ShadowRoot;
-	anchor?: Element;
-	props?: Props;
-	context?: Map<any, any>;
-	hydrate?: boolean;
-	intro?: boolean;
-	$$inline?: boolean;
-}
-
-/**
- * @deprecated use `Component` instead. See TODO for more information.
- *
- * Base class for Svelte components in Svelte 4. Svelte 5+ components implement
- * the `Component` interface instead. This class is only provided for backwards
- * compatibility with Svelte 4 typings and doesn't have any runtime equivalent.
- *
- * Can be used to create strongly typed Svelte components.
- *
- * #### Example:
- *
- * You have component library on npm called `component-library`, from which
- * you export a component called `MyComponent`. For Svelte+TypeScript users,
- * you want to provide typings. Therefore you create a `index.d.ts`:
- * ```ts
- * import { SvelteComponent } from "svelte";
- * export class MyComponent extends SvelteComponent<{foo: string}> {}
- * ```
- * Typing this makes it possible for IDEs like VS Code with the Svelte extension
- * to provide intellisense and to use the component like this in a Svelte file
- * with TypeScript:
- * ```svelte
- * <script lang="ts">
- * 	import { MyComponent } from "component-library";
- * </script>
- * <MyComponent foo={'bar'} />
- * ```
- */
-export class SvelteComponent<
-	Props extends Record<string, any> = any,
-	Events extends Record<string, any> = any,
-	Slots extends Record<string, any> = any
-> {
-	[prop: string]: any;
-
-	constructor(options: ComponentConstructorOptions<Props>);
-	/**
-	 * For type checking capabilities only.
-	 * Does not exist at runtime.
-	 * ### DO NOT USE!
-	 *
-	 * */
-	$$prop_def: Props;
-	/**
-	 * For type checking capabilities only.
-	 * Does not exist at runtime.
-	 * ### DO NOT USE!
-	 *
-	 * */
-	$$events_def: Events;
-	/**
-	 * For type checking capabilities only.
-	 * Does not exist at runtime.
-	 * ### DO NOT USE!
-	 *
-	 * */
-	$$slot_def: Slots;
-
-	$destroy(): void;
-
-	$on<K extends Extract<keyof Events, string>>(
-		type: K,
-		callback: (e: Events[K]) => void
-	): () => void;
-
-	$set(props: Partial<Props>): void;
-}
-
-/**
- * @deprecated Use `Component` instead. See TODO for more information.
- */
-export class SvelteComponentTyped<
-	Props extends Record<string, any> = any,
-	Events extends Record<string, any> = any,
-	Slots extends Record<string, any> = any
-> extends SvelteComponent<Props, Events, Slots> {}
-
 export * from './legacy-client.js';

packages/svelte/src/main/ambient.d.ts

@@ -1,5 +1,5 @@
 declare module '*.svelte' {
-	export { Component as default } from 'svelte';
+	export { SvelteComponent as default } from 'svelte';
 }
 
 /**