Skip to main content
SvelteAnciennes APIs

API de composant impérative

L’API servant à interagir avec un composant de Svelte 3 et 4 est différente de celle de Svelte 5. Notez que cette page ne s’applique pas aux composants en mode legacy d’une application Svelte 5.

Créer un composant

const const component: anycomponent = new Component(options);

Un composant prévu pour le client — c’est-à-dire un composant compilé avec generate: 'dom' (ou l’option generate non définie) est une classe JavaScript.

import 
type App = SvelteComponent<Record<string, any>, any, any>
const App: LegacyComponentType
App from './App.svelte';

const const app: SvelteComponent<Record<string, any>, any, any>app = new new App(o: ComponentConstructorOptions): SvelteComponentApp({
	ComponentConstructorOptions<Record<string, any>>.target: Document | Element | ShadowRoottarget: var document: Document
MDN Reference


document.Document.body: HTMLElement
Specifies the beginning and end of the document body.


MDN Reference


body,
	ComponentConstructorOptions<Record<string, any>>.props?: Record<string, any> | undefinedprops: {
		// en supposant que App.svelte contient quelque chose
		// comme `export let answer`
		answer: numberanswer: 42
	}
});

Les options d’initialisation suivantes peuvent être fournies :

option par défaut description
target aucun Un HTMLElement ou ShadowRoot cible dans lequel rendre le composant. Cette option est obligatoire
anchor null Un enfant de target qui doit être immédiatement après le composant à rendre
props {} Un objet de propriétés à fournir au composant
context new Map() Une Map de contexte racine contenant des paires clé-valeur à fournir au composant
hydrate false Voir ci-dessous
intro false Si true, les transitions seront jouées lors du rendu initial, sans attendre un changement d'état

Les enfants existante de target sont laissés à leur place.

L’option hydrate dit à Svelte d’améliorer le DOM existant (en général venant du rendu côté serveur) plutôt que de créer de nouveaux éléments. Ceci ne fonctionne que si le composant a été compilé avec l’option hydratable: true. L’hydratation des éléments <head> ne fonctionne correctement que si leur rendu côté serveur a également été compilé avec hydratable: true, ce qui ajoute un marqueur à chaque élément de <head> afin que le composant sache quels élément du <head> il est responsable d’enlever lors de l’hydratation.

Bien que les enfants de target sont normalement laissés intacts, hydrate: true va supprimer tous les enfants de la cible. Pour cette raison, l’option anchor ne peut pas être utilisée avec hydrate: true.

Le DOM existant n’a pas besoin de correspondre au composant — Svelte va “réparer” le DOM au fur et à mesure.

index
import 
type App = SvelteComponent<Record<string, any>, any, any>
const App: LegacyComponentType
App from './App.svelte';

const const app: SvelteComponent<Record<string, any>, any, any>app = new new App(o: ComponentConstructorOptions): SvelteComponentApp({
	ComponentConstructorOptions<Record<string, any>>.target: Document | Element | ShadowRoottarget: var document: Document
MDN Reference


document.ParentNode.querySelector<Element>(selectors: string): Element | null (+4 overloads)
Returns the first element that is a descendant of node that matches selectors.


MDN Reference


querySelector('#server-rendered-html'),
	ComponentConstructorOptions<Record<string, any>>.hydrate?: boolean | undefinedhydrate: true
});

Avec Svelte 5+, utilisez plutôt mount

$set

component.$set(props);

Définit programmatiquement des props sur une instance. component.$set({ x: 1 }) est équivalent à x = 1 dans le bloc <script> du composant.

Appeler cette méthode programme une mise à jour lors de la prochaine micro-tâche — le DOM n’est pas mis à jour de manière synchrone.

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

Avec Svelte 5+, utiliser plutôt $state pour créer une prop de composant et la mettre à jour

let 
module props
let props: {
    answer: number;
}
props = 
function $state<{
    answer: number;
}>(initial: {
    answer: number;
}): {
    answer: number;
} (+1 overload)
namespace $state
Declares reactive state.


Example:


let count = $state(0);
https://svelte.dev/docs/svelte/$state


@paraminitial The initial value
$state({ answer: numberanswer: 42 });
const const component: anycomponent = mount(Component, { 
props: {
    answer: number;
}
props });
// ...

module props
let props: {
    answer: number;
}
props.answer: numberanswer = 24;

$on

component.$on(ev, callback);

Provoque l’appel de la fonction callback chaque fois que le composant génère un event.

Une fonction est renvoyée par .$on, celle-ci supprimera le gestionnaire d’évènement lors de son appel.

const const off: anyoff = component.$on('selected', (event: anyevent) => {
	var console: Console
The console module provides a simple debugging console that is similar to the
JavaScript console mechanism provided by web browsers.


The module exports two specific components:


    

  • A Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.
    • 

  • A global console instance configured to write to process.stdout and
process.stderr. The global console can be used without calling require('console').
    • 



Warning: The global console object’s methods are neither consistently
synchronous like the browser APIs they resemble, nor are they consistently
asynchronous like all other Node.js streams. See the note on process I/O for
more information.


Example using the global console:


console.log('hello world');
// Prints: hello world, to stdout
console.log('hello %s', 'world');
// Prints: hello world, to stdout
console.error(new Error('Whoops, something bad happened'));
// Prints error message and stack trace to stderr:
//   Error: Whoops, something bad happened
//     at [eval]:5:15
//     at Script.runInThisContext (node:vm:132:18)
//     at Object.runInThisContext (node:vm:309:38)
//     at node:internal/process/execution:77:19
//     at [eval]-wrapper:6:22
//     at evalScript (node:internal/process/execution:76:60)
//     at node:internal/main/eval_string:23:3

const name = 'Will Robinson';
console.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to stderr
Example using the Console class:


const out = getStreamSomehow();
const err = getStreamSomehow();
const myConsole = new console.Console(out, err);

myConsole.log('hello world');
// Prints: hello world, to out
myConsole.log('hello %s', 'world');
// Prints: hello world, to out
myConsole.error(new Error('Whoops, something bad happened'));
// Prints: [Error: Whoops, something bad happened], to err

const name = 'Will Robinson';
myConsole.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to err
@seesource
console.Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)
Prints to stdout with newline. Multiple arguments can be passed, with the
first used as the primary message and all additional used as substitution
values similar to printf(3)
(the arguments are all passed to util.format()).


const count = 5;
console.log('count: %d', count);
// Prints: count: 5, to stdout
console.log('count:', count);
// Prints: count: 5, to stdout
See util.format() for more information.


@sincev0.1.100
log(event: anyevent.detail.selection);
});

const off: anyoff();

Avec Svelte 5+, passer plutôt des callbacks en props

$destroy

component.$destroy();

Supprime un composant du DOM et déclenche les éventuels callbacks prévus par onDestroy.

Avec Svelte 5+, utilisez plutôt unmount

Props de composant

component.prop;
module componentcomponent.component.prop: anyprop = value;

Si un composant est compilé avec accessors: tru, chaque instance aura des getters et des setters correspondant à chacune des props du composant. Définir une valeur déclenchera alors une mise à jour synchrone plutôt que la mise à jour par défaut asynchrone habituellement déclenchée par component.$set(...).

Par défaut, accessors vaut false, à moins que vous ne compiliez en tant qu’élément personnalisé.

var console: Console
The console module provides a simple debugging console that is similar to the
JavaScript console mechanism provided by web browsers.


The module exports two specific components:


    

  • A Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.
    • 

  • A global console instance configured to write to process.stdout and
process.stderr. The global console can be used without calling require('console').
    • 



Warning: The global console object’s methods are neither consistently
synchronous like the browser APIs they resemble, nor are they consistently
asynchronous like all other Node.js streams. See the note on process I/O for
more information.


Example using the global console:


console.log('hello world');
// Prints: hello world, to stdout
console.log('hello %s', 'world');
// Prints: hello world, to stdout
console.error(new Error('Whoops, something bad happened'));
// Prints error message and stack trace to stderr:
//   Error: Whoops, something bad happened
//     at [eval]:5:15
//     at Script.runInThisContext (node:vm:132:18)
//     at Object.runInThisContext (node:vm:309:38)
//     at node:internal/process/execution:77:19
//     at [eval]-wrapper:6:22
//     at evalScript (node:internal/process/execution:76:60)
//     at node:internal/main/eval_string:23:3

const name = 'Will Robinson';
console.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to stderr
Example using the Console class:


const out = getStreamSomehow();
const err = getStreamSomehow();
const myConsole = new console.Console(out, err);

myConsole.log('hello world');
// Prints: hello world, to out
myConsole.log('hello %s', 'world');
// Prints: hello world, to out
myConsole.error(new Error('Whoops, something bad happened'));
// Prints: [Error: Whoops, something bad happened], to err

const name = 'Will Robinson';
myConsole.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to err
@seesource
console.Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)
Prints to stdout with newline. Multiple arguments can be passed, with the
first used as the primary message and all additional used as substitution
values similar to printf(3)
(the arguments are all passed to util.format()).


const count = 5;
console.log('count: %d', count);
// Prints: count: 5, to stdout
console.log('count:', count);
// Prints: count: 5, to stdout
See util.format() for more information.


@sincev0.1.100
log(component.count);
component.count += 1;

Avec Svelte 5+, ce concept est obsolète. Si vous souhaitez rendre des propriétés accessibles depuis l’extérieur, vous pouvez les exporter

API de composant côté serveur

const const result: anyresult = Component.render(...)

À la différence des composants client, les composants serveur n’ont pas d’existence après leur rendu – leur unique mission est de créer du HTML et du CSS. Pour cette raison, leur API est un peu différente.

Un composant serveur expose une méthode render qui peut être appelée avec des props optionnelles. Elle renvoie un objet avec des propriétés head, html et css, où head contient le contenu de tous les éléments <svelte:head> rencontrés.

Vous pouvez importer un composant Svelte directement dans Node en utilisant svelte/register.

var require: NodeRequire
(id: string) => any
require('svelte/register');

const const App: anyApp = 
var require: NodeRequire
(id: string) => any
require('./App.svelte').default;

const { const head: anyhead, const html: anyhtml, const css: anycss } = const App: anyApp.render({
	answer: numberanswer: 42
});

La méthode .render() accepte les paramètres suivants :

paramètre défaut description
props {} Un objet de propriétés à fournir au composant
options {} Un objet d'options

L’objet options accepte les options suivantes :

paramètre défaut description
context new Map() Une Map de paires clé-valeur représentant un contexte racine à fournir au composant 
const { const head: anyhead, const html: anyhtml, const css: anycss } = App.render(
	// props
	{ answer: numberanswer: 42 },
	// options
	{
		context: Map<string, string>context: new 
var Map: MapConstructor
new <string, string>(iterable?: Iterable<readonly [string, string]> | null | undefined) => Map<string, string> (+3 overloads)
Map([['context-key', 'context-value']])
	}
);

Avec Svelte 5+, utilisez plutôt render

Modifier cette page sur Github

précédent suivant
<svelte:self>