svelte

Le paquet svelte expose les fonctions de cycle de vie et l'API de contexte.

onMountpermalink

ts
function onMount<T>(
	fn: () =>
		| NotFunction<T>
		| Promise<NotFunction<T>>
		| (() => any)
): void;

La fonction onMount permet de planifier l'exécution d'un callback dès que le composant a été monté dans le DOM. Elle doit être appelée pendant l'instantiation du composant (mais elle n'a pas besoin d'être définie à l'intérieur du composant ; elle peut être appelée depuis un module externe).

onMount n'est pas exécutée pas à l'intérieur d'un composant serveur.

<script>
	import { onMount } from 'svelte';

	onMount(() => {
		console.log('le composant est monté');
	});
</script>

Si une fonction est renvoyée par onMount, celle-ci sera appelée lorsque le composant sera démonté.

<script>
	import { onMount } from 'svelte';

	onMount(() => {
		const interval = setInterval(() => {
			console.log('beep');
		}, 1000);

		return () => clearInterval(interval);
	});
</script>

Ce comportement ne fonctionne que si la fonction passée à onMount renvoie une valeur de manière synchrone. Les fonctions async renvoient toujours une Promise, ce qui implique qu'elles ne peuvent jamais renvoyer une fonction de manière synchrone.

beforeUpdatepermalink

ts
function beforeUpdate(fn: () => any): void;

Planifie l'exécution d'un callback immédiatement avant la mise à jour du composant, lorsqu'un changement d'état s'est produit.

La première exécution du callback se produit juste avant l'appel du onMount initial.

<script>
	import { beforeUpdate } from 'svelte';

	beforeUpdate(() => {
		console.log('le composant est sur le point de se mettre à jour');
	});
</script>

afterUpdatepermalink

ts
function afterUpdate(fn: () => any): void;

Planifie un callback à exécuter immédiatement après la mise à jour du composant.

La première exécution du callback se produit juste après l'appel du onMount initial.

<script>
	import { afterUpdate } from 'svelte';

	afterUpdate(() => {
		console.log("le composant vient d'être mis à jour");
	});
</script>

onDestroypermalink

ts
function onDestroy(fn: () => any): void;

Planifie un callback à exécuter immédiatement avant que le composant ne soit démonté.

Parmi les callbacks de onMount, beforeUpdate, afterUpdate et onDestroy, c'est le seul qui s'exécute dans un composant côté serveur.

<script>
	import { onDestroy } from 'svelte';

	onDestroy(() => {
		console.log('le composant va être détruit');
	});
</script>

tickpermalink

ts
function tick(): Promise<void>;

Renvoie une promesse qui se résout une fois que tous les changements d'état en attente ont été appliqués, ou dans la micro-tâche suivante s'il n'y en a pas.

<script>
	import { beforeUpdate, tick } from 'svelte';

	beforeUpdate(async () => {
		console.log('le composant est sur le point de se mettre à jour');
		await tick();
		console.log('le composant vient de se mettre à jour');
	});
</script>

setContextpermalink

ts
function setContext<T>(key: any, context: T): T;

Associe un objet context arbitraire au composant courant et à la key spécifiée, puis retourne cet objet. Le contexte est alors accessible pour les enfants du composant (y compris le contenu de slot) avec getContext.

Comme les fonctions de cycle de vie, elle doit être appelée pendant l'instantiation du composant.

<script>
	import { setContext } from 'svelte';

	setContext('answer', 42);
</script>

Le contexte n'est pas intrinsèquement réactif. Si vous avez besoin de valeurs réactives dans le contexte, alors vous pouvez passer un store dans le contexte, store qui sera réactif.

getContextpermalink

ts
function getContext<T>(key: any): T;

Récupère le contexte qui appartient au composant parent le plus proche avec la key spécifiée. Doit être appelé pendant l'instantiation du composant.

<script>
	import { getContext } from 'svelte';

	const answer = getContext('answer');
</script>

hasContextpermalink

ts
function hasContext(key: any): boolean;

Vérifie si une clé donnée a été définie dans le contexte d'un composant parent. Doit être appelé pendant l'instantiation du composant.

<script>
	import { hasContext } from 'svelte';

	if (hasContext('answer')) {
		// faites quelque chose
	}
</script>

getAllContextspermalink

ts
function getAllContexts<
	T extends Map<any, any> = Map<any, any>
>(): T;

Récupère l'ensemble des contextes appartenant au composant parent le plus proche. Doit être appelé pendant l'instantiation du composant. Utile, par exemple, si vous créez un composant de manière programmatique et que vous voulez lui passer le contexte existant.

<script>
	import { getAllContexts } from 'svelte';

	const contexts = getAllContexts();
</script>

createEventDispatcherpermalink

ts
function createEventDispatcher<
	EventMap extends Record<string, any> = any
>(): EventDispatcher<EventMap>;

Crée un générateur d'événements qui peut être utilisé pour distribuer les [événements de composants] (/docs#template-syntaxe-component-directives-on-eventname). Les générateurs d'événements sont des fonctions qui peuvent prendre deux arguments : name et detail.

Les événements de composants créés avec createEventDispatcher créent un CustomEvent (en anglais). Ces événements ne suivent pas la chaîne de bubbling. L'argument detail correspond à la propriété CustomEvent.detail (en anglais) et peut contenir tout type de données.

<script>
	import { createEventDispatcher } from 'svelte';

	const dispatch = createEventDispatcher();
</script>

<button on:click="{() => dispatch('notify', 'detail value')}">Générer un événement</button>

Les événements envoyés par les composants enfants peuvent être écoutés par leur parent. Toutes les données fournies lors de l'envoi de l'événement sont disponibles dans la propriété detail de l'objet événement.

<script>
	function callbackFunction(event) {
		console.log(`Événement généré ! Détail: ${event.detail}`)
	}
</script>

<Child on:notify="{callbackFunction}"/>

Les événements peuvent être annulables en passant un troisième paramètre à la fonction dispatch. La fonction renvoie false si l'événement est annulé avec event.preventDefault(), sinon elle renvoie true.

<script>
	import { createEventDispatcher } from 'svelte';

	const dispatch = createEventDispatcher();

	function notify() {
		const shouldContinue = dispatch('notify', 'detail value', { cancelable: true });
		if (shouldContinue) {
			// personne n'a appelé preventDefault
		} else {
			// un listener a appelé preventDefault
		}
	}
</script>

Vous pouvez typer le générateur d'évènement pour définir quels évènements il peut recevoir. Cela rendra votre code plus solide à la fois dans le composant (les mauvais appels seront mis en valeur) et lorsque vous utiliserez le composant (les types d'évènements seront réduits). Voir cette section pour plus de détail.

Typespermalink

ComponentConstructorOptionspermalink

ts
interface ComponentConstructorOptions<
	Props extends Record<string, any> = Record<string, any>
> {…}

ts
target: Element | Document | ShadowRoot;

ts
anchor?: Element;

ts
props?: Props;

ts
context?: Map<any, any>;

ts
hydrate?: boolean;

ts
intro?: boolean;

ts
$$inline?: boolean;

ComponentEventspermalink

Convenience type to get the events the given component expects. Example:

<script lang="ts">
   import type { ComponentEvents } from 'svelte';
   import Component from './Component.svelte';

   function handleCloseEvent(event: ComponentEvents<Component>['close']) {
	  console.log(event.detail);
   }
</script>

<Component on:close={handleCloseEvent} />

ts
type ComponentEvents<Component extends SvelteComponent_1> =
	Component extends SvelteComponent<any, infer Events>
		? Events
		: never;

ComponentPropspermalink

Convenience type to get the props the given component expects. Example:

<script lang="ts">
	import type { ComponentProps } from 'svelte';
	import Component from './Component.svelte';

	const props: ComponentProps<Component> = { foo: 'bar' }; // Errors if these aren't the correct props
</script>

ts
type ComponentProps<Component extends SvelteComponent_1> =
	Component extends SvelteComponent<infer Props>
		? Props
		: never;

ComponentTypepermalink

Convenience type to get the type of a Svelte component. Useful for example in combination with dynamic components using <svelte:component>.

Example:

<script lang="ts">
	import type { ComponentType, SvelteComponent } from 'svelte';
	import Component1 from './Component1.svelte';
	import Component2 from './Component2.svelte';

	const component: ComponentType = someLogic() ? Component1 : Component2;
	const componentOfCertainSubType: ComponentType<SvelteComponent<{ needsThisProp: string }>> = someLogic() ? Component1 : Component2;
</script>

<svelte:component this={component} />
<svelte:component this={componentOfCertainSubType} needsThisProp="hello" />

ts
type ComponentType<
	Component extends SvelteComponent = SvelteComponent
> = (new (
	options: ComponentConstructorOptions<
		Component extends SvelteComponent<infer Props>
			? Props
			: Record<string, any>
	>
) => Component) & {
	/** The custom element version of the component. Only present if compiled with the `customElement` compiler option */
	element?: typeof HTMLElement;
};

SvelteComponentpermalink

Base class for Svelte components with some minor dev-enhancements. Used when dev=true.

Can be used to create strongly typed Svelte components.

Example:permalink

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:

<script lang="ts">
	import { MyComponent } from "component-library";
</script>
<MyComponent foo={'bar'} />

ts
class SvelteComponent<
	Props extends Record<string, any> = any,
	Events extends Record<string, any> = any,
	Slots extends Record<string, any> = any
> extends SvelteComponent_1<Props, Events> {…}

ts
[prop: string]: any;

ts
constructor(options: ComponentConstructorOptions<Props>);

ts
$capture_state(): void;

ts
$inject_state(): void;

SvelteComponentTypedpermalink

Use SvelteComponent instead. See PR for more information: https://github.com/sveltejs/svelte/pull/8512

ts
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> {}