Skip to main content

Compilateur et API

API de composant client-side

Modifier cette page sur Github

Créer un composant

ts
const component = new Component(options);

Un composant client-side est une classe JavaScript correspondant à un composant compilé avec l'option generate: 'dom' (ou avec l'option generate non spécifiée).

ts
import App from './App.svelte';


const app = new App({
	target: document.body,
	props: {
		// en supposant que App.svelte contienne :
		// `export let answer`:
		answer: 42
	}
});

Les options d'initialisation suivantes peuvent être utilisées :

option défaut description
target none Un élément HTMLElement ou ShadowRoot sur lequel rendre le composant. Cette option est obligatoire
anchor null Un enfant de la cible target à rendre juste avant le composant
props {} Des propriétés avec lesquelles le composant sera initialisé
context new Map() Une Map de paires clé-valeur de contexte à fournir au composant
hydrate false Voir plus bas
intro false Si true, jouera les transitions au premier rendu, plutôt que d'attendre de futurs changements d'état

Les enfants existants de la cible target ne sont pas affectés.

L'option d'hydratation hydrate indique à Svelte de mettre à jour le DOM existant (habituellement à partir du SSR) plutôt que de créer de nouveaux éléments. Cela ne fonctionnera que si le composant a été compilé avec l'option hydratable: true. L'hydratation de la section <head> ne fonctionnera que si le code généré côté serveur a également été compilé avec l'option hydratable: true. Cette option a pour effet d'identifier chaque élément à l'intérieur de la section <head> de telle sorte que le composant sache quels éléments il peut supprimer pendant l'hydratation.

Alors que les enfants de la cible target ne sont normalement pas modifiés, l'option hydrate: true causera leur suppression. Pour cette raison, l'option anchor ne peut pas être utilisée en même temps que hydrate: true.

Le DOM existant n'a pas besoin de correspondre au composant, Svelte "réparera" le DOM au fur et à mesure.

index.js
ts
import App from './App.svelte';


const app = new App({
	target: document.querySelector('#server-rendered-html'),
	hydrate: true
});

$set

ts
component.$set(props);

$set définit programmatiquement les props d'une instance de composant. component.$set({ x: 1 }) est équivalent à x = 1 à l'intérieur de la balise <script> du composant.

L'appel de cette méthode déclenchera une mise à jour à la prochaine micro-tâche — le DOM n'est pas mis à jour de manière synchrone.

ts
component.$set({ answer: 42 });

$on

ts
component.$on(ev, callback);

$on enregistre un callback qui sera appelé à chaque génération d'un évènement de type event.

$on retourne une fonction dont l'exécution permet de supprimer l'écoute de cet événement.

index.js
ts
const off = component.$on('selected', (event) => {
	console.log(event.detail.selection);
});


off();

$destroy

ts
component.$destroy();

Retire un composant du DOM et déclenche les callbacks de type onDestroy associés.

Props de composant

ts
component.prop;
ts
component.prop = value;

Si un composant est compilé avec l'option accessors: true, chaque instance sera générée avec des getters et setters correspondant à chacune de ses props. Mettre à jour une des props déclenchera une mise à jour synchrone. Ce comportement est différent de la mise à jour asynchrone déclenchée par l'appel component.$set(...).

Par défaut, accessors est initialisé à false, à moins que vous ne compiliez un web component.

index.js
ts
console.log(component.count);
component.count += 1;
index.ts
ts
console.log(component.count);
component.count += 1;
précédent svelte/compiler
suivant API de composant server-side