Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,11 @@ If a function is returned from `onMount`, it will be called when the component i

## `onDestroy`

Schedules a callback to run immediately before the component is unmounted.

Out of `onMount`, `beforeUpdate`, `afterUpdate` and `onDestroy`, this is the
only one that runs inside a server-side component.

<div class="ts-block">

```dts
Expand All @@ -53,6 +58,8 @@ function onDestroy(fn: () => any): void;

</div>



Schedules a callback to run immediately before the component is unmounted.

Out of `onMount`, `beforeUpdate`, `afterUpdate` and `onDestroy`, this is the only one that runs inside a server-side component.
Expand Down
70 changes: 55 additions & 15 deletions apps/svelte.dev/content/docs/svelte/98-reference/20-svelte.md
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,12 @@ import {

## afterUpdate

<blockquote class="tag deprecated">

Use `$effect` instead — see https://svelte-5-preview.vercel.app/docs/deprecations#beforeupdate-and-afterupdate

</blockquote>

Schedules a callback to run immediately after the component has been updated.

The first time the callback runs will be after the initial `onMount`.
Expand All @@ -42,8 +48,16 @@ function afterUpdate(fn: () => void): void;

</div>



## beforeUpdate

<blockquote class="tag deprecated">

Use `$effect.pre` instead — see https://svelte-5-preview.vercel.app/docs/deprecations#beforeupdate-and-afterupdate

</blockquote>

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`.
Expand All @@ -58,8 +72,16 @@ function beforeUpdate(fn: () => void): void;

</div>



## createEventDispatcher

<blockquote class="tag deprecated">

Use callback props and/or the `$host()` rune instead — see https://svelte-5-preview.vercel.app/docs/deprecations#createeventdispatcher

</blockquote>

Creates an event dispatcher that can be used to dispatch [component events](https://svelte.dev/docs#template-syntax-component-directives-on-eventname).
Event dispatchers are functions that can take two arguments: `name` and `detail`.

Expand Down Expand Up @@ -88,6 +110,8 @@ function createEventDispatcher<

</div>



## createRawSnippet

Create a snippet programmatically
Expand All @@ -105,6 +129,8 @@ function createRawSnippet<Params extends unknown[]>(

</div>



## flushSync

Synchronously flushes any pending state changes and those that result from it.
Expand All @@ -117,6 +143,8 @@ function flushSync(fn?: (() => void) | undefined): void;

</div>



## getAllContexts

Retrieves the whole context map that belongs to the closest parent component.
Expand All @@ -133,6 +161,8 @@ function getAllContexts<

</div>



## getContext

Retrieves the context that belongs to the closest parent component with the specified `key`.
Expand All @@ -146,6 +176,8 @@ function getContext<T>(key: any): T;

</div>



## hasContext

Checks whether a given `key` has been set in the context of a parent component.
Expand All @@ -159,6 +191,8 @@ function hasContext(key: any): boolean;

</div>



## hydrate

Hydrates a component on the given target and returns the exports and potentially the props (if compiled with `accessors: true`) of the component
Expand Down Expand Up @@ -195,6 +229,8 @@ function hydrate<

</div>



## mount

Mounts a component to the given target and returns the exports and potentially the props (if compiled with `accessors: true`) of the component.
Expand Down Expand Up @@ -232,6 +268,8 @@ function mount<

</div>



## onDestroy

Schedules a callback to run immediately before the component is unmounted.
Expand All @@ -247,6 +285,8 @@ function onDestroy(fn: () => any): void;

</div>



## onMount

The `onMount` function schedules a callback to run as soon as the component has been mounted to the DOM.
Expand All @@ -270,6 +310,8 @@ function onMount<T>(

</div>



## setContext

Associates an arbitrary `context` object with the current component and the specified `key`
Expand All @@ -286,6 +328,8 @@ function setContext<T>(key: any, context: T): T;

</div>



## tick

Returns a promise that resolves once any pending state changes have been applied.
Expand All @@ -298,6 +342,8 @@ function tick(): Promise<void>;

</div>



## unmount

Unmounts a component that was previously mounted using `mount` or `hydrate`.
Expand All @@ -310,6 +356,8 @@ function unmount(component: Record<string, any>): void;

</div>



## untrack

Use `untrack` to prevent something from being treated as an `$effect`/`$derived` dependency.
Expand All @@ -324,6 +372,8 @@ function untrack<T>(fn: () => T): T;

</div>



## Component

Can be used to create strongly typed Svelte components.
Expand Down Expand Up @@ -403,8 +453,7 @@ element?: typeof HTMLElement;
The custom element version of the component. Only present if compiled with the `customElement` compiler option

</div>
</div>
</div>
</div></div>

## ComponentConstructorOptions

Expand Down Expand Up @@ -504,8 +553,7 @@ $$inline?: boolean;
```

<div class="ts-block-property-details"></div>
</div>
</div>
</div></div>

## ComponentEvents

Expand All @@ -524,7 +572,6 @@ type ComponentEvents<Comp extends SvelteComponent> =
: never;
```


</div>

## ComponentInternals
Expand All @@ -537,7 +584,6 @@ Internal implementation details that vary between environments
type ComponentInternals = Branded<{}, 'ComponentInternals'>;
```


</div>

## ComponentProps
Expand Down Expand Up @@ -582,7 +628,6 @@ type ComponentProps<
: never;
```


</div>

## ComponentType
Expand Down Expand Up @@ -610,7 +655,6 @@ type ComponentType<
};
```


</div>

## EventDispatcher
Expand All @@ -636,8 +680,7 @@ interface EventDispatcher<
```

<div class="ts-block-property-details"></div>
</div>
</div>
</div></div>

## Snippet

Expand Down Expand Up @@ -670,8 +713,7 @@ interface Snippet<Parameters extends unknown[] = []> {/*…*/}
```

<div class="ts-block-property-details"></div>
</div>
</div>
</div></div>

## SvelteComponent

Expand Down Expand Up @@ -789,8 +831,7 @@ for more info.
</div>

</div>
</div>
</div>
</div></div>

## SvelteComponentTyped

Expand All @@ -810,7 +851,6 @@ class SvelteComponentTyped<
> extends SvelteComponent<Props, Events, Slots> {}
```


</div>


Original file line number Diff line number Diff line change
Expand Up @@ -42,8 +42,7 @@ interface Action<
```

<div class="ts-block-property-details"></div>
</div>
</div>
</div></div>

## ActionReturn

Expand Down Expand Up @@ -100,7 +99,6 @@ destroy?: () => void;
```

<div class="ts-block-property-details"></div>
</div>
</div>
</div></div>


Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,8 @@ function flip(

</div>



## AnimationConfig

<div class="ts-block">
Expand Down Expand Up @@ -83,8 +85,7 @@ tick?: (t: number, u: number) => void;
```

<div class="ts-block-property-details"></div>
</div>
</div>
</div></div>

## FlipParams

Expand Down Expand Up @@ -119,7 +120,6 @@ easing?: (t: number) => number;
```

<div class="ts-block-property-details"></div>
</div>
</div>
</div></div>


Loading
Loading