```js
// @noErrors
import {
SvelteComponent,
SvelteComponentTyped,
afterUpdate,
beforeUpdate,
createEventDispatcher,
createRawSnippet,
flushSync,
getAllContexts,
getContext,
hasContext,
hydrate,
mount,
onDestroy,
onMount,
setContext,
tick,
unmount,
untrack
} from 'svelte';
```
## SvelteComponent
This was the base class for Svelte components in Svelte 4. Svelte 5+ components
are completely different under the hood. For typing, use `Component` instead.
To instantiate components, use `mount` instead.
See [migration guide](/docs/svelte/v5-migration-guide#Components-are-no-longer-classes) for more info.
```dts
class SvelteComponent<
Props extends Record
= Record,
Events extends Record = any,
Slots extends Record = any
> {/*…*/}
```
```dts
static element?: typeof HTMLElement;
```
The custom element version of the component. Only present if compiled with the `customElement` compiler option
```dts
[prop: string]: any;
```
```dts
constructor(options: ComponentConstructorOptions
>);
```
- deprecated This constructor only exists when using the `asClassComponent` compatibility helper, which
is a stop-gap solution. Migrate towards using `mount` instead. See
[migration guide](https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes) for more info.
```dts
$destroy(): void;
```
- deprecated This method only exists when using one of the legacy compatibility helpers, which
is a stop-gap solution. See [migration guide](https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes)
for more info.
```dts
$on
>(
type: K,
callback: (e: Events[K]) => void
): () => void;
```
- deprecated This method only exists when using one of the legacy compatibility helpers, which
is a stop-gap solution. See [migration guide](https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes)
for more info.
```dts
$set(props: Partial
): void;
```
- deprecated This method only exists when using one of the legacy compatibility helpers, which
is a stop-gap solution. See [migration guide](https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes)
for more info.
Use `Component` instead. See [migration guide](/docs/svelte/v5-migration-guide#Components-are-no-longer-classes) for more information.
```dts
class SvelteComponentTyped<
Props extends Record
= Record,
Events extends Record = any,
Slots extends Record = any
> extends SvelteComponent {}
```
Use [`$effect`](/docs/svelte/$effect) instead
Schedules a callback to run immediately after the component has been updated.
The first time the callback runs will be after the initial `onMount`.
In runes mode use `$effect` instead.
```dts
function afterUpdate(fn: () => void): void;
```
## beforeUpdate
Use [`$effect.pre`](/docs/svelte/$effect#$effect.pre) instead
Schedules a callback to run immediately before the component is updated after any state change.
The first time the callback runs will be before the initial `onMount`.
In runes mode use `$effect.pre` instead.
```dts
function beforeUpdate(fn: () => void): void;
```
## createEventDispatcher
Use callback props and/or the `$host()` rune instead — see [migration guide](/docs/svelte/v5-migration-guide#Event-changes-Component-events)
Creates an event dispatcher that can be used to dispatch [component events](/docs/svelte/legacy-on#Component-events).
Event dispatchers are functions that can take two arguments: `name` and `detail`.
Component events created with `createEventDispatcher` create a
[CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent).
These events do not [bubble](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture).
The `detail` argument corresponds to the [CustomEvent.detail](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/detail)
property and can contain any type of data.
The event dispatcher can be typed to narrow the allowed event names and the type of the `detail` argument:
```ts
const dispatch = createEventDispatcher<{
loaded: null; // does not take a detail argument
change: string; // takes a detail argument of type string, which is required
optional: number | null; // takes an optional detail argument of type number
}>();
```
```dts
function createEventDispatcher<
EventMap extends Record = any
>(): EventDispatcher;
```
## createRawSnippet
Create a snippet programmatically
```dts
function createRawSnippet
(
fn: (...params: Getters) => {
render: () => string;
setup?: (element: Element) => void | (() => void);
}
): Snippet;
```
```dts
function flushSync(fn?: (() => T) | undefined): T;
```
## getAllContexts
Retrieves the whole context map that belongs to the closest parent component.
Must be called during component initialisation. Useful, for example, if you
programmatically create a component and want to pass the existing context to it.
```dts
function getAllContexts<
T extends Map
= Map
>(): T;
```
```dts
function getContext(key: any): T;
```
## hasContext
Checks whether a given `key` has been set in the context of a parent component.
Must be called during component initialisation.
```dts
function hasContext(key: any): boolean;
```
## hydrate
Hydrates a component on the given target and returns the exports and potentially the props (if compiled with `accessors: true`) of the component
```dts
function hydrate<
Props extends Record
,
Exports extends Record
>(
component:
| ComponentType>
| Component,
options: {} extends Props
? {
target: Document | Element | ShadowRoot;
props?: Props;
events?: Record any>;
context?: Map;
intro?: boolean;
recover?: boolean;
}
: {
target: Document | Element | ShadowRoot;
props: Props;
events?: Record any>;
context?: Map;
intro?: boolean;
recover?: boolean;
}
): Exports;
```
```dts
function mount<
Props extends Record
,
Exports extends Record
>(
component:
| ComponentType>
| Component,
options: MountOptions
): Exports;
```
```dts
function onDestroy(fn: () => any): void;
```
## onMount
`onMount`, like [`$effect`](/docs/svelte/$effect), schedules a function to run as soon as the component has been mounted to the DOM.
Unlike `$effect`, the provided function only runs once.
It must be called during the component's initialisation (but doesn't need to live _inside_ the component;
it can be called from an external module). If a function is returned _synchronously_ from `onMount`,
it will be called when the component is unmounted.
`onMount` functions do not run during [server-side rendering](/docs/svelte/svelte-server#render).
```dts
function onMount(
fn: () =>
| NotFunction
| Promise>
| (() => any)
): void;
```
## setContext
Associates an arbitrary `context` object with the current component and the specified `key`
and returns that object. The context is then available to children of the component
(including slotted content) with `getContext`.
Like lifecycle functions, this must be called during component initialisation.
```dts
function setContext(key: any, context: T): T;
```
## tick
Returns a promise that resolves once any pending state changes have been applied.
```dts
function tick(): Promise;
```
## unmount
Unmounts a component that was previously mounted using `mount` or `hydrate`.
Since 5.13.0, if `options.outro` is `true`, [transitions](/docs/svelte/transition) will play before the component is removed from the DOM.
Returns a `Promise` that resolves after transitions have completed if `options.outro` is true, or immediately otherwise (prior to 5.13.0, returns `void`).
```js
// @errors: 7031
import { mount, unmount } from 'svelte';
import App from './App.svelte';
const app = mount(App, { target: document.body });
// later...
unmount(app, { outro: true });
```
```dts
function unmount(
component: Record,
options?:
| {
outro?: boolean;
}
| undefined
): Promise;
```
## untrack
When used inside a [`$derived`](/docs/svelte/$derived) or [`$effect`](/docs/svelte/$effect),
any state read inside `fn` will not be treated as a dependency.
```ts
$effect(() => {
// this will run when `data` changes, but not when `time` changes
save(data, {
timestamp: untrack(() => time)
});
});
```
```dts
function untrack(fn: () => T): T;
```
## Component
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 type { Component } from 'svelte';
export declare const MyComponent: Component<{ 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
```
```dts
interface Component<
Props extends Record
= {},
Exports extends Record = {},
Bindings extends keyof Props | '' = string
> {/*…*/}
```
```dts
(
this: void,
internals: ComponentInternals,
props: Props
): {
/**
* @deprecated This method only exists when using one of the legacy compatibility helpers, which
* is a stop-gap solution. See [migration guide](https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes)
* for more info.
*/
$on?(type: string, callback: (e: any) => void): () => void;
/**
* @deprecated This method only exists when using one of the legacy compatibility helpers, which
* is a stop-gap solution. See [migration guide](https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes)
* for more info.
*/
$set?(props: Partial
): void;
} & Exports;
```
- `internal` An internal object used by Svelte. Do not use or modify.
- `props` The props passed to the component.
```dts
element?: typeof HTMLElement;
```
The custom element version of the component. Only present if compiled with the `customElement` compiler option
In Svelte 4, components are classes. In Svelte 5, they are functions.
Use `mount` instead to instantiate components.
See [migration guide](/docs/svelte/v5-migration-guide#Components-are-no-longer-classes)
for more info.
```dts
interface ComponentConstructorOptions<
Props extends Record
= Record
> {/*…*/}
```
```dts
target: Element | Document | ShadowRoot;
```
```dts
anchor?: Element;
```
```dts
props?: Props;
```
```dts
context?: Map
;
```
```dts
hydrate?: boolean;
```
```dts
intro?: boolean;
```
```dts
recover?: boolean;
```
```dts
sync?: boolean;
```
```dts
idPrefix?: string;
```
```dts
$$inline?: boolean;
```
The new `Component` type does not have a dedicated Events type. Use `ComponentProps` instead.
```dts
type ComponentEvents
=
Comp extends SvelteComponent
? Events
: never;
```
```dts
type ComponentInternals = Branded<{}, 'ComponentInternals'>;
```
## ComponentProps
Convenience type to get the props the given component expects.
Example: Ensure a variable contains the props expected by `MyComponent`:
```ts
import type { ComponentProps } from 'svelte';
import MyComponent from './MyComponent.svelte';
// Errors if these aren't the correct props expected by MyComponent.
const props: ComponentProps = { foo: 'bar' };
```
> [!NOTE] In Svelte 4, you would do `ComponentProps` because `MyComponent` was a class.
Example: A generic function that accepts some component and infers the type of its props:
```ts
import type { Component, ComponentProps } from 'svelte';
import MyComponent from './MyComponent.svelte';
function withProps>(
component: TComponent,
props: ComponentProps
) {};
// Errors if the second argument is not the correct props expected by the component in the first argument.
withProps(MyComponent, { foo: 'bar' });
```
```dts
type ComponentProps<
Comp extends SvelteComponent | Component
> =
Comp extends SvelteComponent
? Props
: Comp extends Component
? Props
: never;
```
This type is obsolete when working with the new `Component` type.
```dts
type ComponentType<
Comp extends SvelteComponent = SvelteComponent
> = (new (
options: ComponentConstructorOptions<
Comp extends SvelteComponent
? Props
: Record
>
) => Comp) & {
/** The custom element version of the component. Only present if compiled with the `customElement` compiler option */
element?: typeof HTMLElement;
};
```
## EventDispatcher
```dts
interface EventDispatcher<
EventMap extends Record
> {/*…*/}
```
```dts
(
...args: null extends EventMap[Type]
? [type: Type, parameter?: EventMap[Type] | null | undefined, options?: DispatchOptions]
: undefined extends EventMap[Type]
? [type: Type, parameter?: EventMap[Type] | null | undefined, options?: DispatchOptions]
: [type: Type, parameter: EventMap[Type], options?: DispatchOptions]
): boolean;
```
```dts
type MountOptions<
Props extends Record
= Record
> = {
/**
* Target element where the component will be mounted.
*/
target: Document | Element | ShadowRoot;
/**
* Optional node inside `target`. When specified, it is used to render the component immediately before it.
*/
anchor?: Node;
/**
* Allows the specification of events.
* @deprecated Use callback props instead.
*/
events?: Record any>;
/**
* Can be accessed via `getContext()` at the component level.
*/
context?: Map;
/**
* Whether or not to play transitions on initial render.
* @default true
*/
intro?: boolean;
} & ({} extends Props
? {
/**
* Component properties.
*/
props?: Props;
}
: {
/**
* Component properties.
*/
props: Props;
});
```
```dts
interface Snippet
{/*…*/}
```
```dts
(
this: void,
// this conditional allows tuples but not arrays. Arrays would indicate a
// rest parameter type, which is not supported. If rest parameters are added
// in the future, the condition can be removed.
...args: number extends Parameters['length'] ? never : Parameters
): {
'{@render ...} must be called with a Snippet': "import type { Snippet } from 'svelte'";
} & typeof SnippetReturn;
```