```js
// @noErrors
import {
SvelteComponent,
SvelteComponentTyped,
afterUpdate,
beforeUpdate,
createContext,
createEventDispatcher,
createRawSnippet,
flushSync,
fork,
getAbortSignal,
getAllContexts,
getContext,
hasContext,
hydratable,
hydrate,
mount,
onDestroy,
onMount,
setContext,
settled,
tick,
unmount,
untrack
} from 'svelte';
```
## SvelteComponent
Ceci était la classe de base pour les composants Svelte en Svelte 4. Les composants Svelte 5+ sont
d'une nature complètement différente. Pour le typeage, utilisez plutôt `Component`. Pour instancier
des composants, utilisez plutôt `mount`.
Voir le [guide de migration](/docs/svelte/v5-migration-guide#Components-are-no-longer-classes) pour
plus d'infos.
```dts
class SvelteComponent<
Props extends Record
= Record,
Events extends Record = any,
Slots extends Record = any
> {/*…*/}
```
```dts
static element?: typeof HTMLElement;
```
La version "élément personnalisé" du composant. Seulement présente si le composant est compilé avec
l'option de compilateur `customElement`.
```dts
[prop: string]: any;
```
```dts
constructor(options: ComponentConstructorOptions
>);
```
- déprécié Cette méthode n'existe que si vous utilisez
l'utilitaire de compatibilité `asClassComponent`, qui est une solution bouche-trou. Voir le [guide de
migration](/docs/svelte/v5-migration-guide#Components-are-no-longer-classes) pour
plus d'infos.
```dts
$destroy(): void;
```
- déprécié Cette méthode n'existe que si vous utilisez un des
utilitaires de compatibilité legacy, qui sont une solution bouche-trou. Voir le [guide de
migration](/docs/svelte/v5-migration-guide#Components-are-no-longer-classes) pour
plus d'infos.
```dts
$on
>(
type: K,
callback: (e: Events[K]) => void
): () => void;
```
- déprécié Cette méthode n'existe que si vous utilisez un des
utilitaires de compatibilité legacy, qui sont une solution bouche-trou. Voir le [guide de
migration](/docs/svelte/v5-migration-guide#Components-are-no-longer-classes) pour
plus d'infos.
```dts
$set(props: Partial
): void;
```
- déprécié Cette méthode n'existe que si vous utilisez un des
utilitaires de compatibilité legacy, qui sont une solution bouche-trou. Voir le [guide de
migration](/docs/svelte/v5-migration-guide#Components-are-no-longer-classes) pour
plus d'infos.
Utilisez plutôt `Component`. Voir le [guide de
migration](/docs/svelte/v5-migration-guide#Components-are-no-longer-classes) pour
plus d'infos.
```dts
class SvelteComponentTyped<
Props extends Record
= Record,
Events extends Record = any,
Slots extends Record = any
> extends SvelteComponent {}
```
Utilisez plutôt [`$effect`}(/docs/svelte/$effect)
Programme l'exécution d'un callback immédiatement après la mise à jour du composant.
La première exécution du callback aura lieu après le `onMount` initial.
En mode runes, utilisez plutôt `$effect`.
```dts
function afterUpdate(fn: () => void): void;
```
## beforeUpdate
Utilisez plutôt [`$effect.pre`](/docs/svelte/$effect#$effect.pre).
Programme l'exécution d'un callback immédiatement avant la mise à jour du composant.
La première exécution du callback aura lieu avant le `onMount` initial.
En mode runes, utilisez plutôt `$effect.pre`.
```dts
function beforeUpdate(fn: () => void): void;
```
## createContext
Disponible depuis la version 5.40.0
Renvoie une paire de fonctions `[get, set]` permettant de travailler avec un contexte de manière
typée.
`get` va jeter une erreur si aucun composant parent n'a précédemment appelé `set`.
```dts
function createContext(): [() => T, (context: T) => T];
```
## createEventDispatcher
Utilisez plutôt des props de callback et/ou la rune `$host()` — voir le [guide de
migration](/docs/svelte/v5-migration-guide#Event-changes-Component-events).
Crée un générateur d'évènement qui peut être utilisé pour générer des [évènements de
composant](/docs/svelte/legacy-on#Component-events). Les générateurs d'évènement sont des fonctions
qui prennent deux arguments : `name` et `detail`.
Les évènements de composant créés avec `createEventDispatcher` créent un
[CustomEvent](https://developer.mozilla.org/fr/docs/Web/API/CustomEvent). Ces évènements ne
["bubblent"](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture)
pas. L'argument `detail` correspond à la propriété
[CustomEvent.detail](https://developer.mozilla.org/fr/docs/Web/API/CustomEvent/detail) et peut
contenir tout type de données.
Le générateur d'évènement peut être typé pour réduire les noms d'évènement autorisés et typer
l'argument `detail` :
```ts
const dispatch = createEventDispatcher<{
loaded: null; // ne prend pas d'argument detail
change: string; // prend un argument detail obligatoire de type string
optional: number | null; // prend un argument detail optionnel de type number
}>();
```
```dts
function createEventDispatcher<
EventMap extends Record = any
>(): EventDispatcher;
```
## createRawSnippet
Crée un snippet programmatiquement.
```dts
function createRawSnippet
(
fn: (...params: Getters) => {
render: () => string;
setup?: (element: Element) => void | (() => void);
}
): Snippet;
```
```dts
function flushSync(fn?: (() => T) | undefined): T;
```
## fork
Disponible depuis la version 5.42
Crée un "fork", au sein duquel les changements d'état sont évalués mais pas appliqués au DOM.
Cela sert à charger des données spéculativement (par exemple) lorsque vous suspectez que
l'utilisateur ou l'utilisatrice est sur le point de réaliser une action.
Les frameworks comme SvelteKit peuvent se servir de cette API pour précharger des données lorsque
l'utilisateur ou l'utilisatrice touche ou survole un lien, donnant aux navigations à venir un effet
"instantané".
Le paramètre `fn` est une fonctino synchrone qui modifie l'état. Les changements d'état seront
annulés après l'initialisation du fork, puis ré-appliqués si et lorsque le fork sera appliqué pour
de bon.
Lorsqu'il apparaît évident qu'un fork ne sera _pas_ appliqué pour de bon (par ex. parce que
l'utilisateur ou l'utilisatrice a navigué vers un autre endroit), le fork doit être supprimé pour
éviter des fuites de mémoire.
```dts
function fork(fn: () => void): Fork;
```
## getAbortSignal
Renvoie un [`AbortSignal`](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) qui
s'annule lorsque le [`$derived`](/docs/svelte/$derived) ou [`$effect`](/docs/svelte/$effect) courant
est ré-exécuté ou détruit.
Doit être appelée lorsqu'un `$derived` ou `$effect` est en cours d'exécution.
```svelte
```
```dts
function getAbortSignal(): AbortSignal;
```
## getAllContexts
Récupère la map complète des contextes appartenant au composant parent le plus proche. Doit être
exécuté pendant l'initialisation du composant. Utile, par exemple, si vous créez programmatiquement
un composant et souhaitez lui passer les contexte existant.
```dts
function getAllContexts<
T extends Map
= Map
>(): T;
```
```dts
function getContext(key: any): T;
```
## hasContext
Vérifie si une clé `key` a été définie dans le contexte d'un composant parent. Doit être exécuté
pendant l'initialisation du composant.
```dts
function hasContext(key: any): boolean;
```
## hydratable
```dts
function hydratable(key: string, fn: () => T): T;
```
## hydrate
Hydrate un composant sur la cible donnée et renvoie les exports et potentiellement les props du
composant (si compilé avec `accessors: true`).
```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;
transformError?: (error: unknown) => unknown;
}
: {
target: Document | Element | ShadowRoot;
props: Props;
events?: Record any>;
context?: Map;
intro?: boolean;
recover?: boolean;
transformError?: (error: unknown) => unknown;
}
): Exports;
```
```dts
function mount<
Props extends Record
,
Exports extends Record
>(
component:
| ComponentType>
| Component,
options: MountOptions
): Exports;
```
```dts
function onDestroy(fn: () => any): void;
```
## onMount
`onMount`, comme [`$effect`](/docs/svelte/$effect), prévoit d'exécuter une fonction dès que le
composant a été monté dans le DOM. À la différence de `$effect`, la fonction fournie ne sera
exécutée qu'une seule fois.
`onMount` doit être exécutée pendant l'initialisation du composant (mais n'a pas besoin de vivre _au
sein_ du composant ; elle peut être appelée depuis un module externe). Si une fonction est renvoyée
de manière _synchrone_ depuis `onMount`, celle-ci sera exécutée lorsque le composant sera démonté.
Les callbacks fournis à `onMount` ne sont pas exécutés pendant le [rendu côté
serveur](/docs/svelte/svelte-server#render).
```dts
function onMount(
fn: () =>
| NotFunction
| Promise>
| (() => any)
): void;
```
## setContext
Associe un objet de `context` arbitraire avec le composant courant et la clé fournie `key`, et
renvoie cet objet. Le contexte est rendu disponible pour les enfants du composant (incluant les
contenus slottés) avec `getContext`.
Comme pour les fonctions de cycle de vie, cette fonction doit être exécutée lors de l'initialisation
du composant.
[`createContext`](/docs/svelte/svelte#createContext) est une alternative typée.
```dts
function setContext(key: any, context: T): T;
```
## settled
Disponible depuis la version 5.36
Renvoie une promesse qui se résout une fois que tout état a changé, ainsi que tout travail
asynchrone résultant de ces changements d'état se sont résolus et que le DOM a été mis à jour.
```dts
function settled(): Promise;
```
## tick
Renvoie une promesse qui sera résolue lorsque tous les changements d'état en attente auront été
appliqués.
```dts
function tick(): Promise;
```
## unmount
Démonte un composant précédemment monté avec `mount` ou `hydrate`.
Depuis la version 5.13.0, si `options.outro` vaut `true`, les [transitions](/docs/svelte/transition)
seront jouées avant que le composant soit retiré du DOM.
Renvoie une `Promise` qui résout après que les transitions se soient terminées si `options.outro`
vaut `true`, ou immédiatement sinon (avant la version 5.13.0, renvoie `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
Lorsqu'utilisé dans un [`$derived`](/docs/svelte/$derived) ou un [`$effect`](/docs/svelte/$effect),
tout état lu dans la fonction `fn` ne sera pas traité comme dépendance.
```ts
$effect(() => {
// ceci sera exécuté lorsque `data` change, mais pas lorsque `time` change
save(data, {
timestamp: untrack(() => time)
});
});
```
```dts
function untrack(fn: () => T): T;
```
## Component
Peut être utilisé pour créer des composants Svelte fortement typés.
### Exemple :
Vous avez une librairie de composants sur npm appelée `component-library`, à partir de laquelle vous
exportez un composant appelé `MyComponent`. Vous souhaitez fournir du typage pour les personnes
utilisant Svelte+TypeScript. Vous créez donc un fichier `index.d.ts` :
```ts
import type { Component } from 'svelte';
export declare const MyComponent: Component<{ foo: string }> {}
```
Typer de cette manière permet aux IDEs comme VS Code ayant l'extension Svelte de fournir les
fonctionnalités intellisense, et donc d'utiliser le composants comme ceci dans un fichier Svelte
avec TypeScript :
```svelte
```
```dts
interface Component<
Props extends Record
= {},
Exports extends Record = {},
Bindings extends keyof Props | '' = string
> {/*…*/}
```
```dts
(
this: void,
internals: ComponentInternals,
props: Props
): {
/**
* @deprecated Cette méthode n'existe que lorsque vous utilisez un des utilitaires de
* compatibilité, qui sont des solutions bouche-trous. Voir le [guide de migration](/docs/svelte/v5-migration-guide#Components-are-no-longer-classes)
* pour plus d'infos.
*/
$on?(type: string, callback: (e: any) => void): () => void;
/**
* @deprecated Cette méthode n'existe que lorsque vous utilisez un des utilitaires de
* compatibilité, qui sont des solutions bouche-trous. Voir le [guide de migration](/docs/svelte/v5-migration-guide#Components-are-no-longer-classes).
* pour plus d'infos.
*/
$set?(props: Partial
): void;
} & Exports;
```
- `internal` Un objet interne utilisé par Svelte. Ne pas utiliser ou modifier.
- `props` Les props passées au composant.
```dts
element?: typeof HTMLElement;
```
La version "élément personnalisé" du composant. Seulement présente si le composant est compilé avec
l'option de compilateur `customElement`.
In Svelte 4, components are classes. In Svelte 5, they are functions.
Utilisez plutôt `mount` pour instancier des composants.
Voir [guide de
migration](/docs/svelte/v5-migration-guide#Components-are-no-longer-classes)
pour plus d'infos.
```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;
```
```dts
transformError?: (error: unknown) => unknown;
```
Le nouveau type `Component` n'a pas de type dédié pour les Events. Utilisez plutôt `ComponentProps`.
```dts
type ComponentEvents
=
Comp extends SvelteComponent
? Events
: never;
```
```dts
type ComponentInternals = Branded<{}, 'ComponentInternals'>;
```
## ComponentProps
Type utilitaire pour obtenir les props qu'un certain composant attend.
Exemple : vous voulez vous assurer qu'une variable contient les props attendues par `MyComponent` :
```ts
import type { ComponentProps } from 'svelte';
import MyComponent from './MyComponent.svelte';
// Affiche une erreur si on ne fournit pas les bonnes props à MyComponent.
const props: ComponentProps = { foo: 'bar' };
```
> [!NOTE] En Svelte 4, vous feriez `ComponentProps` car `MyComponent` était une classe.
Exemple : une fonction générique qui accepte un composant et en déduit le type de ses props :
```ts
import type { Component, ComponentProps } from 'svelte';
import MyComponent from './MyComponent.svelte';
function withProps>(
component: TComponent,
props: ComponentProps
) {};
// Affiche une erreur si le deuxième argument ne correspond pas aux props attendues par le composant
// fourni en premier argument.
withProps(MyComponent, { foo: 'bar' });
```
```dts
type ComponentProps<
Comp extends SvelteComponent | Component
> =
Comp extends SvelteComponent
? Props
: Comp extends Component
? Props
: never;
```
Ce type est obsolète lorsque vous utilisez le nouveau type `Component`.
```dts
type ComponentType<
Comp extends SvelteComponent = SvelteComponent
> = (new (
options: ComponentConstructorOptions<
Comp extends SvelteComponent
? Props
: Record
>
) => Comp) & {
/** La version "élément personnalisé" du composant. N'est présent que si le composant est compilé
* avec l'option de compilateur `customElement`.
*/
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;
```
Disponible depuis la version 5.42
Représente des tâches se produisant hors de l'écran, telles que des préchargements de données en
anticipation d'une navigation.
```dts
interface Fork {/*…*/}
```
```dts
commit(): Promise
;
```
Applique le fork pour de bon. La promesse sera résolue lorsque le changement d'état aura été
appliqué
```dts
discard(): void;
```
Supprime le fork
```dts
type MountOptions<
Props extends Record
= Record
> = {
/**
* L'élément cible où le composant doit être monté.
*/
target: Document | Element | ShadowRoot;
/**
* Un noeud optionnel dans `target`. Lorsque fourni, il est utilisé pour rendre le composant juste
* immédiatement avant lui.
*/
anchor?: Node;
/**
* Permet la spécification des évènements.
* @deprecated Utilisez plutôt les props de callback.
*/
events?: Record any>;
/**
* Peut être obtenu via `getContext()` au niveau du composant.
*/
context?: Map;
/**
* Si oui ou non il faut jouer les transitions lors du rendu initial.
* @default true
*/
intro?: boolean;
/**
* Une fonction qui transforme les erreurs attrapées par les frontières d'erreur avant qu'elles ne
* soient passées au snippet `failed`.
* Vaut par défaut la fonction identité.
*/
transformError?: (
error: unknown
) => unknown | Promise;
} & ({} extends Props
? {
/**
* Component properties.
*/
props?: Props;
}
: {
/**
* Component properties.
*/
props: Props;
});
```
```dts
interface Snippet
{/*…*/}
```
```dts
(
this: void,
// cette condition autorise les tuples mais pas les tableaux. Utiliser des tableaux nécessiterait
// un type de paramètre de reste, ce qui n'est pas supporté. Si les paramètre de reste sont
// ajoutés dans le futur, cette condition pourra être supprimée.
...args: number extends Parameters['length'] ? never : Parameters
): {
'{@render ...} doit être appelée avec un Snippet': "import type { Snippet } from 'svelte'";
} & typeof SnippetReturn;
```