Components are the building blocks of Svelte applications. They are written into `.svelte` files, using a superset of HTML.
Les composants sont les briques de base d'une application Svelte. Ils sont décrits dans des fichiers `.svelte`, qui utilisent un HTML augmenté.
All three sections — script, styles and markup — are optional.
Les trois sections qui le composent - scripts, styles, et <spanclass="vo">[markup](/docs/web#markup)</span> - sont optionnelles.
```svelte
<script>
// logic goes here
// la logique
</script>
<!--markup (zero or more items) goes here-->
<!--le markup (avec ou sans éléments)-->
<style>
/* styles go here */
/* les styles */
</style>
```
## <script>
A `<script>` block contains JavaScript that runs when a component instance is created. Variables declared (or imported) at the top level are 'visible' from the component's markup. There are four additional rules:
Un bloc `<script>` contient du JavaScript qui est exécuté lorsqu'une instance de composant est créée. Les variables déclarées (ou importées) à la racine du composant sont 'visibles' pour le <spanclass='vo'>[markup](/docs/web#markup)</span> du composant. Il y a quatre règles supplémentaires:
### 1. `export` creates a component prop
### 1. `export` crée une props de composant
Svelte uses the `export` keyword to mark a variable declaration as a _property_ or _prop_, which means it becomes accessible to consumers of the component (see the section on [attributes and props](/docs/basic-markup#attributes-and-props) for more information).
Svelte utilise le mot-clé `export` pour déclarer une variable en tant que _propriété_ ou <spanclass='vo'>[_props_](/docs/sveltejs#props)</span>, ce qui la rend accessible lorsque l'on consomme le composant (voir la section sur les [attributs et props](/docs/basic-markup#attributs-et-props)) pour plus d'informations.
```svelte
<script>
export let foo;
// Values that are passed in as props
// are immediately available
// Les valeurs passées en tant que props
// sont immédiatement disponibles
console.log({ foo });
</script>
```
You can specify a default initial value for a prop. It will be used if the component's consumer doesn't specify the prop on the component (or if its initial value is `undefined`) when instantiating the component. Note that if the values of props are subsequently updated, then any prop whose value is not specified will be set to `undefined` (rather than its initial value).
Vous pouvez spécifier une valeur initiale par défaut d'une <spanclass='vo'>[props](/docs/sveltejs#props)</span>. Elle sera utilisée si la <spanclass='vo'>[props](/docs/sveltejs#props)</span> n'est pas fournie au composant par le parent lors de l'instanciation du composant (ou si la valeur fournie est `undefined`). Notez que si les valeurs des <spanclass='vo'>[props](/docs/sveltejs#props)</span> sont mises à jour a posteriori, n'importe quelle valeur de <spanclass='vo'>[props](/docs/sveltejs#props)</span> non spécifiée sera mise à `undefined` (plutôt qu'à sa valeur initiale).
In development mode (see the [compiler options](/docs/svelte-compiler#compile)), a warning will be printed if no default initial value is provided and the consumer does not specify a value. To squelch this warning, ensure that a default initial value is specified, even if it is`undefined`.
En mode développement (voir les [options de compilation](/docs/svelte-compiler#compile)), un <spanclass='vo'>[warning](/docs/development#warning)</span> sera affiché si aucune valeur initiale par défaut n'est fournie et que le parent ne précise pas de valeur. Pour museler ce <spanclass='vo'>[warning](/docs/development#warning)</span>, assurez-vous qu'une valeur initiale par défaut est définie, même si celle-ci est`undefined`.
```svelte
<script>
export let bar = 'optional default initial value';
export let bar = 'valeur initiale par défaut, optionnelle';
export let baz = undefined;
</script>
```
If you export a `const`, `class` or `function`, it is readonly from outside the component. Functions are valid prop values, however, as shown below.
Si vous exportez une `const`, une `class` ou une `function`, elle sera en lecture seule à l'extérieur du composant. En revanche, les fonctions sont des valeurs de <spanclass='vo'>[props](/docs/sveltejs#props)</span> valides, comme montré ci-dessous.
```svelte
<!--- file: App.svelte --->
<script>
// these are readonly
// ces exports sont en lecture seule
export const thisIs = 'readonly';
/** @param {string} name */
export function greet(name) {
alert(`hello ${name}!`);
}
// this is a prop
// ceci est une prop
export let format = (n) => n.toFixed(2);
</script>
```
Readonly props can be accessed as properties on the element, tied to the component using [`bind:this` syntax](/docs/component-directives#bind-this).
Les <spanclass='vo'>[props](/docs/sveltejs#props)</span> en lecture seule sont accessibles comme propriétés de l'instance en utilisant la [syntaxe `bind:this`](/docs/component-directives#bind-this).
You can use reserved words as prop names.
Vous pouvez utiliser les mots réservés comme noms de <spanclass='vo'>[props](/docs/sveltejs#props)</span>.
```svelte
<!--- file: App.svelte --->
<script>
/** @type {string} */
let className;
// creates a `class` property, even
// though it is a reserved word
// crée une propriété `class`, même
// si le mot est réservé
export { className as class };
</script>
```
### 2. Assignments are 'reactive'
### 2. Les assignations sont 'réactives'
To change component state and trigger a re-render, just assign to a locally declared variable.
Pour changer l'état d'un composant et déclencher une mise-à-jour du rendu, il suffit d'assigner une variable déclarée localement.
Update expressions (`count += 1`) and property assignments (`obj.x = y`) have the same effect.
Les expressions de mise-à-jour (`count += 1`) et les assignations de propriété (`obj.x = y`) produisent le même effet.
```svelte
<script>
let count = 0;
function handleClick() {
// calling this function will trigger an
// update if the markup references`count`
// l'exécution de cette fonction déclenchera
// une mise à jour si le markup référence`count`
count = count + 1;
}
</script>
```
Because Svelte's reactivity is based on assignments, using array methods like `.push()` and `.splice()` won't automatically trigger updates. A subsequent assignment is required to trigger the update. This and more details can also be found in the [tutorial](https://learn.svelte.dev/tutorial/updating-arrays-and-objects).
Puisque la réactivité de Svelte est basée sur les assignations, l'utilisation de méthodes de tableaux comme `.push()` et `.splice()` ne déclenchera pas de rendu. Une assignation sera alors nécessaire pour déclencher un nouveau rendu. Vous retrouverez cet exemple ainsi que plus de détails dans le [tutoriel](/tutorial/updating-arrays-and-objects).
```svelte
<script>
let arr = [0, 1];
function handleClick() {
// this method call does not trigger an update
// l'appel de cette méthode ne déclenche pas de rendu
arr.push(2);
// this assignment will trigger an update
// if the markup references `arr`
// cette assignation déclenchera un rendu
// si le markup référence `arr`
arr = arr;
}
</script>
```
Svelte's `<script>` blocks are run only when the component is created, so assignments within a `<script>` block are not automatically run again when a prop updates. If you'd like to track changes to a prop, see the next example in the following section.
En Svelte, les blocs `<script>` sont exécutés uniquement lorsque le composant est créé, ce qui signifie que les assignations au sein d'un bloc `<script>` ne sont pas automatiquement rejouées lorsqu'une <spanclass='vo'>[props](/docs/sveltejs#props)</span> est mise à jour. Si vous souhaitez suivre les changements d'une <spanclass='vo'>[props](/docs/sveltejs#props)</span>, allez voir le premier exemple dans la section qui suit.
```svelte
<script>
export let person;
// this will only set `name` on component creation
// it will not update when `person` does
// ceci assigne seulement `name` lors de la création de l'instance
// `name` ne sera pas mise à jour lorsque `person` changera
let { name } = person;
</script>
```
### 3. `$:`marks a statement as reactive
### 3. `$:`déclare une expression comme réactive
Any top-level statement (i.e. not inside a block or a function) can be made reactive by prefixing it with the `$:` [JS label syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/label). Reactive statements run after other script code and before the component markup is rendered, whenever the values that they depend on have changed.
Toute expression à la racine du composant (c-à-d ni dans un bloc ni dans une fonction) peut être rendu réactive en la préfixant avec la syntaxe `$:` empruntées aux [labels JS](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Statements/label). Les expressions réactives sont exécutées après tout autre code du script, et avant le rendu du <spanclass="vo">[markup](/docs/web#markup)</span> du composant, à chaque fois que les valeurs dont elle dépend changent.
```svelte
<script>
export let title;
export let person;
// this will update `document.title` whenever
// the `title` prop changes
// ceci met à jour `document.title` lorsque
// la prop `title` change
$: document.title = title;
$: {
console.log(`multiple statements can be combined`);
console.log(`the current title is ${title}`);
console.log(`plusieurs expressions peuvent être combinées`);
console.log(`le titre actuel est ${title}`);
}
// this will update `name` when 'person' changes
// ceci met à jour `name` lorsque `person` change
$: ({ name } = person);
// don't do this. it will run before the previous line
// ne faites pas ça:
// cette expression est exécutée avant la ligne précédente
let name2 = name;
</script>
```
Only values which directly appear within the `$:` block will become dependencies of the reactive statement. For example, in the code below `total` will only update when `x` changes, but not `y`.
Seules les valeurs qui apparaissent directement au sein d'un bloc `$:` sont des dépendances de l'expression réactive. Par exemple, dans le code ci-dessous `total` sera mise à jour uniquement lorsque `x` change, mais pas lorsque `y` change.
```svelte
<!--- file: App.svelte --->
<script>
let x = 0;
let y = 0;
/** @param {number} value */
function yPlusAValue(value) {
return value + y;
}
@ -169,102 +165,99 @@ Only values which directly appear within the `$:` block will become dependencies
</script>
Total: {total}
<buttonon:click={()=> x++}> Increment X </button>
<buttonon:click={()=> x++}> Incrémenter X </button>
<buttonon:click={()=> y++}> Increment Y </button>
<buttonon:click={()=> y++}> Incrémenter Y </button>
```
It is important to note that the reactive blocks are ordered via simple static analysis at compile time, and all the compiler looks at are the variables that are assigned to and used within the block itself, not in any functions called by them. This means that `yDependent` will not be updated when `x` is updated in the following example:
Il est important de noter que les blocs réactifs sont ordonnés par une analyse statique simple au moment de la compilation, et tout ce que le compilateur considère sont les variables qui sont assignées et utilisées au sein du bloc lui-même, pas au sein d'éventuelles fonctions appelées par le bloc. Cela implique que `yDependent` ne sera pas mise à jour quand `x` change dans l'exemple suivant:
```svelte
<script>
let x = 0;
let y = 0;
/** @param {number} value */
function setY(value) {
const setY = (value) => {
y = value;
}
};
$: yDependent = y;
$: setY(x);
</script>
```
Moving the line `$: yDependent = y` below `$: setY(x)` will cause `yDependent` to be updated when `x` is updated.
Déplacer la ligne `$: yDependent = y` en-dessous de `$: setY(x)` implique que `yDependent` sera mise à jour lorsque `x` change.
If a statement consists entirely of an assignment to an undeclared variable, Svelte will inject a `let` declaration on your behalf.
Si une expression est entièrement constituée d'une assignation à une variable non déclarée, Svelte injectera une déclaration `let` à votre place.
```svelte
<!--- file: App.svelte --->
<script>
/** @type {number} */
export let num;
// we don't need to declare `squared` and`cubed`
// — Svelte does it for us
// nous n'avons pas besoin de déclarer `squared` et`cubed`
// — Svelte le fait pour nous
$: squared = num * num;
$: cubed = squared * num;
</script>
```
### 4. Prefix stores with `$` to access their values
### 4. Préfixer les stores avec `$` pour accéder à leur valeur
A _store_ is an object that allows reactive access to a value via a simple _store contract_. The [`svelte/store` module](/docs/svelte-store) contains minimal store implementations which fulfil this contract.
Un <spanclass="vo">[_store_](/docs/sveltejs#store)</span> est un objet qui permet un accès réactif à une valeur via un simple _contrat de store_. Le [module `svelte/store`](/docs/svelte-store) contient des implémentations minimales qui remplissent ce contrat.
Any time you have a reference to a store, you can access its value inside a component by prefixing it with the `$` character. This causes Svelte to declare the prefixed variable, subscribe to the store at component initialization and unsubscribe when appropriate.
À chaque fois que vous avez une référence à un <spanclass="vo">[store](/docs/sveltejs#store)</span>, vous pouvez accéder à sa valeur au sein d'un composant en le préfixant avec le caractère `$`. Cela indique à Svelte de déclarer la variable préfixée, de s'abonner au <spanclass="vo">[store](/docs/sveltejs#store)</span> à l'initialisation du composant, et de se désabonner lorsque c'est pertinent.
Assignments to `$`-prefixed variables require that the variable be a writable store, and will result in a call to the store's `.set` method.
Les assignations aux variables préfixées avec `$` nécessitent que la variable soit un _<span class="vo">[writable](/docs/development#writable)</span> <span class="vo">[store](/docs/sveltejs#store)</span>_, et cela fera appel à la méthode `.set` du <spanclass="vo">[store](/docs/sveltejs#store)</span>.
Note that the store must be declared at the top level of the component — not inside an `if` block or a function, for example.
Notez que le <spanclass="vo">[store](/docs/sveltejs#store)</span> doit être déclaré à la racine du composant — et non au sein d'un bloc `if` ou d'une fonction, par exemple.
Local variables (that do not represent store values) must _not_ have a `$` prefix.
Les variables locales (qui ne représentent pas la valeur d'un <spanclass="vo">[store](/docs/sveltejs#store)</span>) ne doivent _pas_ être préfixées avec `$`.
```svelte
<script>
import { writable } from 'svelte/store';
const count = writable(0);
console.log($count); // logs 0
console.log($count); // affiche 0
count.set(1);
console.log($count); // logs 1
console.log($count); // affiche 1
$count = 2;
console.log($count); // logs 2
console.log($count); // affiche 2
</script>
```
#### Store contract
#### Le contrat de <spanclass="vo">[store](/docs/sveltejs#store)</span>
You can create your own stores without relying on [`svelte/store`](/docs/svelte-store), by implementing the _store contract_:
Vous pouvez créer vos propres <spanclass="vo">[stores](/docs/sveltejs#store)</span> sans dépendre de [`svelte/store`](/docs/svelte-store), en implémentant vous-même le _contrat de store_:
1. A store must contain a `.subscribe` method, which must accept as its argument a subscription function. This subscription function must be immediately and synchronously called with the store's current value upon calling `.subscribe`. All of a store's active subscription functions must later be synchronously called whenever the store's value changes.
2. The `.subscribe` method must return an unsubscribe function. Calling an unsubscribe function must stop its subscription, and its corresponding subscription function must not be called again by the store.
3. A store may _optionally_ contain a `.set` method, which must accept as its argument a new value for the store, and which synchronously calls all of the store's active subscription functions. Such a store is called a _writable store_.
1. Un <spanclass="vo">[store](/docs/sveltejs#store)</span> doit contenir une méthode `.subscribe`, qui doit accepter comme argument une fonction d'abonnement. Lorsque `.subscribe` est appelée, cette fonction d'abonnement doit être appelée immédiatement et de manière synchrone avec la valeur actuelle du <spanclass="vo">[store](/docs/sveltejs#store)</span>. Toutes les fonctions d'abonnements actives d'un <spanclass="vo">[store](/docs/sveltejs#store)</span> doivent ensuite être appelées de manière synchrone à chaque fois que la valeur du <spanclass="vo">[store](/docs/sveltejs#store)</span> est mise à jour.
2. La méthode `.subscribe` doit retourner une fonction de désabonnement. Exécuter une fonction de désabonnement doit mettre fin à l'abonnement, et la fonction d'abonnement correspondant ne doit plus être appelée par le <spanclass="vo">[store](/docs/sveltejs#store)</span>.
3. Un <spanclass="vo">[store](/docs/sveltejs#store)</span> peut de manière _optionnelle_ contenir une méthode `.set`, qui doit accepter comme argument une nouvelle valeur pour le <spanclass="vo">[store](/docs/sveltejs#store)</span>, et qui appellera de manière synchrone toutes les fonctions d'abonnement actives du <spanclass="vo">[store](/docs/sveltejs#store)</span>. Un tel <spanclass="vo">[store](/docs/sveltejs#store)</span> est appelé un <spanclass="vo">[store](/docs/sveltejs#store)</span> d'écriture (_writable store_).
For interoperability with RxJS Observables, the `.subscribe` method is also allowed to return an object with an `.unsubscribe` method, rather than return the unsubscription function directly. Note however that unless `.subscribe` synchronously calls the subscription (which is not required by the Observable spec), Svelte will see the value of the store as `undefined` until it does.
Pour l'interopérabilité avec les Observables RxJS, la méthode `.subscribe` est également autorisée à retourner un objet avec une méthode `.unsubscribe`, au lieu de renvoyer directement la fonction de désabonnement. Notez toutefois qu'à moins que `.subscribe` appelle de manière synchrone la fonction d'abonnement (ce qui n'est pas requis par la spec Observable), Svelte aura `undefined` pour valeur du <spanclass="vo">[store](/docs/sveltejs#store)</span> jusqu'à ce qu'elle soit appelée.
## <script context="module">
A `<script>` tag with a `context="module"` attribute runs once when the module first evaluates, rather than for each component instance. Values declared in this block are accessible from a regular `<script>` (and the component markup) but not vice versa.
Une balise `<script>` avec un attribut `context="module"` est exécutée une seule fois quand le module est évalué la première fois, au lieu d'une fois pour chaque instance de composant. Les valeurs déclarées au sein de ce bloc sont accessibles depuis un `<script>` classique (et depuis le <spanclass="vo">[markup](/docs/web#markup)</span> du composant), mais pas inversement.
You can `export` bindings from this block, and they will become exports of the compiled module.
Vous pouvez `export` des valeurs depuis ce bloc, et elles seront exposées comme exports du module compilés.
You cannot `export default`, since the default export is the component itself.
Vous ne pouvez pas `export default`, puisque l'export par défaut est le composant lui-même.
> Variables defined in `module` scripts are not reactive — reassigning them will not trigger a rerender even though the variable itself will update. For values shared between multiple components, consider using a [store](/docs/svelte-store).
> Les variables définies dans des scripts `module` ne sont pas réactives — les réassigner ne déclenchera pas de nouveau rendu même si la variable elle-même est mise à jour. Pour partager des valeurs entre différents composants, priviléviez l'usage d'un [store](/docs/svelte-store).
```svelte
<scriptcontext="module">
let totalComponents = 0;
// the export keyword allows this function to imported with e.g.
// le mot clé "export" permet à cette fonction d'être importée ailleurs, par ex.
// `import Example, { alertTotal } from './Example.svelte'`
export function alertTotal() {
alert(totalComponents);
@ -273,76 +266,75 @@ You cannot `export default`, since the default export is the component itself.
<script>
totalComponents += 1;
console.log(`total number of times this component has been created: ${totalComponents}`);
console.log(`Nb de fois total où ce composant a été créé: ${totalComponents}`);
</script>
```
## <style>
CSS inside a `<style>` block will be scoped to that component.
Le CSS au sein d'un bloc `<style>` sera <spanclass='vo'>[scopé](/docs/development#scope)</span> à ce composant.
This works by adding a class to affected elements, which is based on a hash of the component styles (e.g. `svelte-123xyz`).
Cela est possible grâce à l'ajout d'une classe aux éléments concernés, classe basée sur un <spanclass='vo'>[hash](/docs/development#hash)</span> des styles du composant (par ex. `svelte-123xyz`).
```svelte
<style>
p {
/* this will only affect <p> elements in this component */
/* cela affectera uniquement les éléments `<p>` dans ce composant */
color: burlywood;
}
</style>
```
To apply styles to a selector globally, use the `:global(...)` modifier.
Pour appliquer les styles d'un sélecteur globalement, vous pouvez utiliser le modificateur `:global(...)`.
```svelte
<style>
:global(body) {
/* this will apply to <body> */
/* ceci s'applique au `<body>` */
margin: 0;
}
div :global(strong) {
/* this will apply to all <strong> elements, in any
component, that are inside <div> elements belonging
to this component */
/* ceci s'applique à tous les éléments `<strong>`, dans n'importe
quel composant, qui sont à l'intérieur d'éléments `<div>`
appartenant à ce composant */
color: goldenrod;
}
p:global(.red) {
/* this will apply to all <p> elements belonging to this
component with a class of red, even if class="red" does
not initially appear in the markup, and is instead
added at runtime. This is useful when the class
of the element is dynamically applied, for instance
when updating the element's classList property directly. */
/* ceci s'applique à tous les éléments `<p>` appartenant à ce
composant avec une classe `red`, même si `class="red"` n'apparaît pas
initialement dans le markup, mais est ajoutée plus tard à runtime.
Cela sert quand la classe de l'élément est dynamiquement appliquée,
par exemple lorsque l'on met à jour la propriété `classList` d'un élément. */
}
</style>
```
If you want to make @keyframes that are accessible globally, you need to prepend your keyframe names with`-global-`.
Si vous voulez utiliser des `@keyframes` accessibles globalement, vous devez préfixer votre <spanclass='vo'>[keyframe](/docs/web#keyframe)</span> avec`-global-`.
The `-global-` part will be removed when compiled, and the keyframe then be referenced using just `my-animation-name` elsewhere in your code.
Le préfixe `-global-` sera supprimé à la compilation, et la <spanclass='vo'>[keyframe](/docs/web#keyframe)</span> pourra alors être référencée en utilisant simplement `my-animation-name` ailleurs dans le code.
```svelte
```html
<style>
@keyframes -global-my-animation-name {
/* code goes here */
...;
}
</style>
```
There should only be 1 top-level `<style>` tag per component.
Il ne peut y avoir qu'une 1 seule balise `<style>` à la racine d'un component.
However, it is possible to have `<style>` tag nested inside other elements or logic blocks.
Toutefois, il est possible d'avoir une balise `<style>` imbriquée dans d'autres éléments ou blocs logiques.
In that case, the `<style>` tag will be inserted as-is into the DOM, no scoping or processing will be done on the `<style>` tag.
Dans ce cas, la balise `<style>` sera injectée telle quelle dans le <spanclass='vo'>[DOM](/docs/web#dom)</span>, aucun <spanclass='vo'>[scoping](/docs/development#scope)</span> ou formattage ne lui sera appliqué.
```svelte
```html
<div>
<style>
/* this style tag will be inserted as-is */
/* cette balise sera injectée telle quelle */
div {
/* this will apply to all `<div>` elements in the DOM */
/* ceci s'appliquera à tous les éléments `<div>` du DOM */
A lowercase tag, like `<div>`, denotes a regular HTML element. A capitalised tag, such as `<Widget>` or `<Namespace.Widget>`, indicates a _component_.
Une balise en minuscules, comme `<div>`, indique un élément HTML standard. Une balise avec la première lettre en majuscule, comme `<Widget>` ou `<Namespace.Widget>`, indique un _composant_.
```svelte
<script>
@ -16,120 +16,120 @@ A lowercase tag, like `<div>`, denotes a regular HTML element. A capitalised tag
</div>
```
## Attributes and props
## Attributs et props
By default, attributes work exactly like their HTML counterparts.
Par défaut, les attributs fonctionnent exactement comme leur équivalent HTML.
```svelte
<divclass="foo">
<buttondisabled>can't touch this</button>
<buttondisabled>pas touche</button>
</div>
```
As in HTML, values may be unquoted.
Comme en HTML, les valeurs peuvent être fournies sans guillemets.
<!-- prettier-ignore -->
```svelte
<inputtype=checkbox/>
```
Attribute values can contain JavaScript expressions.
Les valeurs des attributs peuvent contenir des expressions JavaScript.
```svelte
<ahref="page/{p}">page {p}</a>
```
Or they can _be_ JavaScript expressions.
Ou elles peuvent _être définies_ par des expressions JavaScript.
```svelte
<buttondisabled={!clickable}>...</button>
```
Boolean attributes are included on the element if their value is [truthy](https://developer.mozilla.org/en-US/docs/Glossary/Truthy) and excluded if it's [falsy](https://developer.mozilla.org/en-US/docs/Glossary/Falsy).
Les attributs booléens sont inclus sur l'élément si leur valeur est [truthy](https://developer.mozilla.org/fr/docs/Glossary/Truthy) et exclus si leur valeur est [falsy](https://developer.mozilla.org/fr/docs/Glossary/Falsy).
All other attributes are included unless their value is [nullish](https://developer.mozilla.org/en-US/docs/Glossary/Nullish) (`null` or`undefined`).
Tous les autres attributs sont inclus à moins que leur valeur soit [nullish](https://developer.mozilla.org/fr/docs/Glossary/Nullish) (`null` ou`undefined`).
```svelte
<inputrequired={false}placeholder="This input field is not required" />
<divtitle={null}>This div has no title attribute</div>
<inputrequired={false}placeholder="Ce champ input n'est pas requis" />
<divtitle={null}>Cette div n'a pas de titre</div>
```
An expression might include characters that would cause syntax highlighting to fail in regular HTML, so quoting the value is permitted. The quotes do not affect how the value is parsed:
Une expression peut éventuellement inclure des caractères qui casseraient la mise en valeur de la syntaxe dans du HTML classique, en conséquence il est permis de mettre la valeur en guillemets. Les guillemets n'ont pas d'influence sur le <spanclass='vo'>[parsing](/docs/development#parser)</span> de la valeur.
```svelte
<buttondisabled={number!==42}>...</button>
```
When the attribute name and value match (`name={name}`), they can be replaced with`{name}`.
Quand le nom d'un attribut et sa valeur sont identiques, (`name={name}`), il est possible d'écrire`{name}`.
```svelte
<button{disabled}>...</button>
<!-- equivalent to
<!-- est équivalent à
<buttondisabled={disabled}>...</button>
-->
```
By convention, values passed to components are referred to as _properties_ or _props_ rather than _attributes_, which are a feature of the DOM.
Par convention, les valeurs passées aux composants sont appelées _propriétés_ ou <spanclass='vo'>[_props_](/docs/sveltejs#props)</span> plutôt qu'_attributs_, caractéristiques du <spanclass='vo'>[DOM](/docs/web#dom)</span>.
As with elements, `name={name}` can be replaced with the `{name}` shorthand.
Comme pour les éléments, `name={name}` peut être raccourci en `{name}`.
```svelte
<Widgetfoo={bar}answer={42}text="hello" />
<Widgetfoo={bar}answer={42}text="salut" />
```
_Spread attributes_ allow many attributes or properties to be passed to an element or component at once.
Les _attributs décomposés (spread attributes)_ permettent de passer de nombreux attributs ou propriétés d'un seul coup.
An element or component can have multiple spread attributes, interspersed with regular ones.
Un élément ou un composant peut avoir plusieurs attributs décomposés, parsemés ou non d'attributs classiques.
```svelte
<Widget{...things}/>
```
`$$props` references all props that are passed to a component, including ones that are not declared with `export`. It is not generally recommended, as it is difficult for Svelte to optimise. But it can be useful in rare cases – for example, when you don't know at compile time what props might be passed to a component.
La variable `$$props` référence toutes les props qui sont fournies à un composant, y compris celles qui ne sont pas déclarées avec `export`. Il est en général déconseillé de l'utiliser, car Svelte a du mal à l'optimiser. Elle peut toutefois être utile dans de rares cas – par exemple lorsque vous ne savez pas à la compilation quelles props pourraient être passées à un composant.
```svelte
<Widget{...$$props}/>
```
`$$restProps` contains only the props which are _not_ declared with `export`. It can be used to pass down other unknown attributes to an element in a component. It shares the same optimisation problems as `$$props`, and is likewise not recommended.
La variable `$$restProps` contient uniquement les props qui ne sont _pas_ déclarées avec `export`. Elle peut être utilisée pour relayer des attributs inconnus à un élément dans un composant plus profond. Elle a les mêmes problèmes d'optimisation que `$$props`, et son utilisation n'est pas non plus recommandée.
```svelte
```html
<input{...$$restProps}/>
```
> The `value` attribute of an `input` element or its children `option` elements must not be set with spread attributes when using `bind:group` or `bind:checked`. Svelte needs to be able to see the element's `value` directly in the markup in these cases so that it can link it to the bound variable.
> L'attribut `value` d'un élément `input` ou ses éléments enfants de type `option` ne doivent pas être utilisés avec des attributs décomposés lorsque `bind:group` ou `bind:checked` est utilisé. Dans ce cas, Svelte doit être capable d'accéder à la `value` de l'élément directement dans le <spanclass="vo">[markup](/docs/web#markup)</span>, afin de la relier à la variable correspondante.
> Sometimes, the attribute order matters as Svelte sets attributes sequentially in JavaScript. For example,`<input type="range" min="0" max="1" value={0.5} step="0.1"/>`, Svelte will attempt to set the value to `1` (rounding up from 0.5 as the step by default is 1), and then set the step to `0.1`. To fix this, change it to`<input type="range" min="0" max="1" step="0.1" value={0.5}/>`.
> Parfois, l'ordre des attributs est important car Svelte gère les attributs séquentiellement dans JavaScript. Dans l'exemple`<input type="range" min="0" max="1" value={0.5} step="0.1"/>`, Svelte va essayer d'attribuer `1` à la valeur (arrondissant 0.5 à 1 car le pas par défaut est 1), puis va mettre le pas à `0.1`. Pour régler ce problème, utilisez plutôt`<input type="range" min="0" max="1" step="0.1" value={0.5}/>`.
> Another example is `<img src="..." loading="lazy" />`. Svelte will set the img `src` before making the img element `loading="lazy"`, which is probably too late. Change this to`<img loading="lazy" src="...">` to make the image lazily loaded.
> Un autre exemple est `<img src="..." loading="lazy" />`. Svelte va essayer d'attribuer la `src` de l'image avant d'appliquer `loading="lazy"` à l'élément `<img>`, ce qui arrive trop tard. Pour profiter du <spanclass='vo'>[lazy loading](/docs/web#lazy-loading)</span>, utilisez plutôt`<img loading="lazy" src="...">`.
## Text expressions
## Expressions texte
```svelte
{expression}
```
Text can also contain JavaScript expressions:
Le texte peut aussi contenir des expressions JavaScript:
> If you're using a regular expression (`RegExp`) [literal notation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp#literal_notation_and_constructor), you'll need to wrap it in parentheses.
> Si vous utilisez la [notation littérale](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp#literal_notation_and_constructor) des expressions régulières (`RegExp`), vous devrez l'entourer de parenthèses.
<!-- prettier-ignore -->
```svelte
<h1>Hello {name}!</h1>
<h1>Bonjour {name}!</h1>
<p>{a} + {b} = {a + b}.</p>
<div>{(/^[A-Za-z ]+$/).test(value) ? x : y}</div>
```
## Comments
## Commentaires
You can use HTML comments inside components.
Vous pouvez utiliser des commentaires HTML à l'intérieur des composants.
```svelte
<!--this is a comment! --><h1>Hello world</h1>
<!--quel beau commentaire ! --><h1>Bonjour tout le monde</h1>
```
Comments beginning with `svelte-ignore` disable warnings for the next block of markup. Usually, these are accessibility warnings; make sure that you're disabling them for a good reason.
Les commentaires qui commencent par `svelte-ignore` désactivent les avertissements du prochain bloc de <spanclass="vo">[markup](/docs/web#markup)</span>. En général, ce sont des avertissements d'accessibilité ; essayez de ne les désactiver que pour une bonne raison.
Content that is conditionally rendered can be wrapped in an if block.
Il est possible d'afficher conditionnellement du contenu en l'encadrant par un bloc `if`.
```svelte
{#if answer === 42}
<p>what was the question?</p>
<p>c'était quoi la question déjà ?</p>
{/if}
```
Additional conditions can be added with `{:else if expression}`, optionally ending in an `{:else}` clause.
Des conditions supplémentaires peuvent être ajoutées avec `{:else if expression}`, et il est possible de terminer avec un `{:else}` optionnel.
```svelte
{#if porridge.temperature > 100}
<p>too hot!</p>
{:else if 80 > porridge.temperature}
<p>too cold!</p>
{#if soupe.temperature > 100}
<p>trop chaud !</p>
{:else if 80 > soupe.temperature}
<p>trop froid !</p>
{:else}
<p>just right!</p>
<p>parfait !</p>
{/if}
```
(Blocks don't have to wrap elements, they can also wrap text within elements!)
(Les blocs n'ont pas besoin d'entourer des éléments, ils peuvent aussi entourer du texte au sein d'éléments !)
## {#each ...}
@ -60,10 +60,10 @@ Additional conditions can be added with `{:else if expression}`, optionally endi
{#each expression as name}...{:else}...{/each}
```
Iterating over lists of values can be done with an each block.
Il est possible d'itérer sur des listes de valeurs avec un bloc `each`.
```svelte
<h1>Shopping list</h1>
<h1>Liste de courses</h1>
<ul>
{#each items as item}
<li>{item.name} x {item.qty}</li>
@ -71,9 +71,9 @@ Iterating over lists of values can be done with an each block.
</ul>
```
You can use each blocks to iterate over any array or array-like value — that is, any object with a `length` property.
Vous pouvez utiliser des blocs `each` pour itérer sur n'importe quel tableau ou valeur similaire — c'est-à-dire un objet avec une propriété `length`.
An each block can also specify an _index_, equivalent to the second argument in an `array.map(...)` callback:
Un bloc `each` peut aussi spécifier un _indice_, équivalent au deuxième argument du <spanclass="vo">[callback](/docs/development#callback)</span> de `array.map(...)`:
```svelte
{#each items as item, i}
@ -81,20 +81,20 @@ An each block can also specify an _index_, equivalent to the second argument in
{/each}
```
If a _key_ expression is provided — which must uniquely identify each list item — Svelte will use it to diff the list when data changes, rather than adding or removing items at the end. The key can be any object, but strings and numbers are recommended since they allow identity to persist when the objects themselves change.
Vous pouvez spécifier une _clé_ à un bloc `each`. Cette clé doit identifier de manière unique chaque élément de la liste. Svelte s'en servira pour mettre à jour la liste avec précision lorsque la donnée changera, plutôt que d'ajouter ou enlever des éléments à la fin. La clé peut être n'importe quel objet, mais les chaînes de caractères ou les nombres sont recommandés car ils permettent de persister l'identité, ce qui n'est pas le cas des objets.
```svelte
{#each items as item (item.id)}
<li>{item.name} x {item.qty}</li>
{/each}
<!-- or with additional index value -->
<!-- ou en utilisant un indice -->
{#each items as item, i (item.id)}
<li>{i + 1}: {item.name} x {item.qty}</li>
{/each}
```
You can freely use destructuring and rest patterns in each blocks.
Vous pouvez librement utiliser la syntaxe de [décomposition](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) dans les blocs `each`.
```svelte
{#each items as { id, name, qty }, i (id)}
@ -110,17 +110,17 @@ You can freely use destructuring and rest patterns in each blocks.
{/each}
```
An each block can also have an `{:else}` clause, which is rendered if the list is empty.
Un bloc `each` peut aussi avoir une clause `{:else}`, qui sera affichée si la liste est vide.
```svelte
{#each todos as todo}
<p>{todo.text}</p>
{:else}
<p>No tasks today!</p>
<p>Rien à faire aujourd'hui !</p>
{/each}
```
Since Svelte 4 it is possible to iterate over iterables like `Map` or `Set`. Iterables need to be finite and static (they shouldn't change while being iterated over). Under the hood, they are transformed to an array using `Array.from` before being passed off to rendering. If you're writing performance-sensitive code, try to avoid iterables and use regular arrays as they are more performant.
Depuis Svelte 4, il est possible d'itérer sur les itérables comme `Map` ou `Set`. Les itérables doivent êtres finis et statiques (ils ne doivent pas changer lorsqu'on itère dessus). Sous le capot, ils sont transformés en tableau avec `Array.from` avant d'être envoyés au rendu. Si vous écrivez du code sensible à la performance, essayez d'éviter les itérables et utilisez plutôt des tableaux classiques, qui sont plus performants dans ce cas.
## {#await ...}
@ -140,46 +140,46 @@ Since Svelte 4 it is possible to iterate over iterables like `Map` or `Set`. Ite
{#await expression catch name}...{/await}
```
Await blocks allow you to branch on the three possible states of a Promise — pending, fulfilled or rejected. In SSR mode, only the pending state will be rendered on the server.
Les blocs `await` permettent de différencier les trois états de promesse possibles — en attente, résolue ou rejetée. En mode <spanclass="vo">[SSR](/docs/web#server-side-rendering)</span>, seul l'état d'attente sera rendu sur le serveur.
```svelte
{#await promise}
<!--promise is pending-->
<p>waiting for the promise to resolve...</p>
<!--la promesse est en attente-->
<p>en attente de la résolution de la promesse...</p>
{:then value}
<!--promise was fulfilled-->
<p>The value is {value}</p>
<!--la promesse est résolue-->
<p>La valeur est {value}</p>
{:catch error}
<!--promise was rejected-->
<p>Something went wrong: {error.message}</p>
<!--la promesse est rejetée-->
<p>Quelque chose ne va pas : {error.message}</p>
{/await}
```
The `catch` block can be omitted if you don't need to render anything when the promise rejects (or no error is possible).
Le bloc `catch` peut être ignoré si vous n'avez pas besoin d'afficher quoi que ce soit lorsque la promesse est rejetée (ou si aucune erreur n'est possible).
```svelte
{#await promise}
<!--promise is pending-->
<p>waiting for the promise to resolve...</p>
<!--la promesse est en attente-->
<p>en attente de la résolution de la promesse...</p>
{:then value}
<!--promise was fulfilled-->
<p>The value is {value}</p>
<!--la promesse est résolue-->
<p>La valeur est {value}</p>
{/await}
```
If you don't care about the pending state, you can also omit the initial block.
Si l'état d'attente ne vous concerne pas, vous pouvez aussi ignorer le bloc initial.
```svelte
{#await promise then value}
<p>The value is {value}</p>
<p>La valeur est {value}</p>
{/await}
```
Similarly, if you only want to show the error state, you can omit the `then` block.
De manière similaire, si vous voulez uniquement afficher l'état d'erreur, vous pouvez ignorer le bloc `then`.
```svelte
{#await promise catch error}
<p>The error is {error}</p>
<p>L'erreur est {error}</p>
{/await}
```
@ -189,9 +189,9 @@ Similarly, if you only want to show the error state, you can omit the `then` blo
{#key expression}...{/key}
```
Key blocks destroy and recreate their contents when the value of an expression changes.
Les blocs `key` détruisent et reconstruisent leur contenu quand la valeur de leur expression change.
This is useful if you want an element to play its transition whenever a value changes.
C'est utile lorsque vous voulez qu'un élément joue sa transition à chaque fois qu'une valeur se met à jour.
```svelte
{#key value}
@ -199,7 +199,7 @@ This is useful if you want an element to play its transition whenever a value ch
{/key}
```
When used around components, this will cause them to be reinstantiated and reinitialised.
Utilisé autour de composants, un bloc `key` déclenchera leur réinstantiation et réinitialisation.
The `svelte/store` module exports functions for creating [readable](/docs/svelte-store#readable), [writable](/docs/svelte-store#writable) and [derived](/docs/svelte-store#derived) stores.
Keep in mind that you don't _have_ to use these functions to enjoy the [reactive `$store` syntax](/docs/svelte-components#script-4-prefix-stores-with-$-to-access-their-values) in your components. Any object that correctly implements `.subscribe`, unsubscribe, and (optionally) `.set` is a valid store, and will work both with the special syntax, and with Svelte's built-in [`derived` stores](/docs/svelte-store#derived).
Keep in mind that you don't _have_ to use these functions to enjoy the [reactive `$store` syntax](/docs/svelte-components#script-4-pr-fixer-les-stores-avec-$-pour-acc-der-leur-valeur) in your components. Any object that correctly implements `.subscribe`, unsubscribe, and (optionally) `.set` is a valid store, and will work both with the special syntax, and with Svelte's built-in [`derived` stores](/docs/svelte-store#derived).
This makes it possible to wrap almost any other reactive state handling library for use in Svelte. Read more about the [store contract](/docs/svelte-components#script-4-prefix-stores-with-$-to-access-their-values) to see what a correct implementation looks like.
This makes it possible to wrap almost any other reactive state handling library for use in Svelte. Read more about the [store contract](/docs/svelte-components#script-4-pr-fixer-les-stores-avec-$-pour-acc-der-leur-valeur) to see what a correct implementation looks like.
By default, custom elements are compiled with `accessors: true`, which means that any [props](/docs/basic-markup#attributes-and-props) are exposed as properties of the DOM element (as well as being readable/writable as attributes, where possible).
By default, custom elements are compiled with `accessors: true`, which means that any [props](/docs/basic-markup#attributs-et-props) are exposed as properties of the DOM element (as well as being readable/writable as attributes, where possible).
To prevent this, add `accessors={false}` to `<svelte:options>`.
Vous trouverez plus de détails sur les [getters](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Functions/get) et [setters](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Functions/set) en JavaScript dans la documentation de MDN.
## Hash
> Bientôt...
## IDE
> Bientôt...
@ -108,6 +112,10 @@ Vous trouverez plus de détails sur les [getters](https://developer.mozilla.org/
> Bientôt...
## Warning
> Bientôt...
## Wrapper
Un _wrapper_ est une fonction qui "enveloppe" une autre fonction afin de lui apporter des fonctionnalités supplémentaires.
> Par extension, un _wrapper_ désigne également un composant qui "enveloppe" une autre composant afin de lui apporter des fonctionnalités supplémentaires (style, comportement, etc.).
Romain l'Ourson
3 years ago
committed by
Romain Crestey