Before filing an issue we'd appreciate it if you could take a moment to ensure
there isn't already an open issue or pull-request.
---
## Attention
If there's an existing issue, please add a :+1: reaction to the description of
the issue. One way we prioritize issues is by the number of :+1: reactions on
their descriptions. Please DO NOT add `+1` or :+1: comments.
Vous vous apprêtez à ouvrir une issue sur le projet de traduction francophone de la documentation de Svelte.
### Feature requests and proposals
Ce projet est uniquement dédié à de la traduction, et nous n'accepterons donc que les issues dont l'objet est l'ajout ou la modification de traductions, ou tout outillage associé.
We're excited to hear how we can make Svelte better. Please add as much detail
as you can on your use case. To propose an implementation of a large feature or
change, please create an [RFC](https://github.com/sveltejs/rfcs).
### Bugs
If you're filing an issue about a bug please include as much information
as you can including the following.
- Your browser and the version: (e.x. Chrome 52.1, Firefox 48.0, IE 10)
- Your operating system: (e.x. OS X 10, Windows XP, etc)
- Svelte version (Please check you can reproduce the issue with the latest release!)
- Whether your project uses Webpack or Rollup
- _Repeatable steps to reproduce the issue_
## Thanks for being part of Svelte!
Pour toute issue liée au projet Svelte en lui-même, merci de les ouvrir sur le [repository officiel](https://github.com/sveltejs/svelte/issues).
Thanks for taking the time to fill out this bug report!
- type:textarea
id:bug-description
attributes:
label:Describe the bug
description:A clear and concise description of what the bug is. If you intend to submit a PR for this issue, tell us in the description. Thanks!
placeholder:Bug description
validations:
required:true
- type:textarea
id:reproduction
attributes:
label:Reproduction
description:Please provide a link to a repo or REPL that can reproduce the problem you ran into. If a report is vague (e.g. just a generic error message) and has no reproduction, it will receive a "need reproduction" label. If no reproduction is provided within a reasonable time-frame, the issue will be closed.
placeholder:Reproduction
validations:
required:true
- type:textarea
id:logs
attributes:
label:Logs
description:'Please include browser console and server logs around the time this bug occurred. Optional if provided reproduction. Please try not to insert an image but copy paste the log text.'
render:shell
- type:textarea
id:system-info
attributes:
label:System Info
description:Output of `npx envinfo --system --npmPackages svelte,rollup,webpack --binaries --browsers`
Thanks for taking the time to request this feature! If your feature request is complex or substantial enough to warrant in-depth discussion, maintainers may close the issue and ask you to open an [RFC](https://github.com/sveltejs/rfcs).
- type:textarea
id:problem
attributes:
label:Describe the problem
description:Please provide a clear and concise description the problem this feature would solve. The more information you can provide here, the better.
placeholder:I'm always frustrated when...
validations:
required:true
- type:textarea
id:solution
attributes:
label:Describe the proposed solution
description:Please provide a clear and concise description of what you would like to happen.
placeholder:I would like to see...
validations:
required:true
- type:textarea
id:alternatives
attributes:
label:Alternatives considered
description:"Please provide a clear and concise description of any alternative solutions or features you've considered."
Please note that [the Svelte codebase is currently being rewritten](https://svelte.dev/blog/runes). Thus, it's best to hold off on new features or refactorings for the time being.
Vous vous apprêtez à ouvrir une PR sur le projet de traduction francophone de la documentation de Svelte.
### Before submitting the PR, please make sure you do the following
Ce projet est uniquement dédié à de la traduction, et nous n'accepterons donc que les PRs dont l'objet est l'ajout ou la modification de traductions, ou tout outillage associé.
- [ ] It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs
- [ ] Prefix your PR title with `feat:`, `fix:`, `chore:`, or `docs:`.
- [ ] This message body should clearly illustrate what problems it solves.
- [ ] Ideally, include a test that fails without this PR but passes with it.
### Tests and linting
- [ ] Run the tests with `pnpm test` and lint the project with `pnpm lint`
Pour toute PR liée au projet Svelte en lui-même, merci de les ouvrir sur le [repository officiel](https://github.com/sveltejs/svelte/pulls).
@ -72,6 +72,12 @@ The source code for https://svelte.dev lives in the [sites](https://github.com/s
Probably not, but it's possible. If you can't seem to access any `.dev` sites, check out [this SuperUser question and answer](https://superuser.com/q/1413402).
Welcome to the Svelte reference documentation! This is intended as a resource for people who already have some familiarity with Svelte and want to learn more about using it.
Bienvenue sur la documentation Svelte de référence ! Ces pages sont pensées comme une ressource utile pour des personnes ayant déjà une certaine familiarité avec Svelte, et souhaitant en apprendre davantage.
If that's not you (yet), you may prefer to visit the [interactive tutorial](https://learn.svelte.dev) or the [examples](/examples) before consulting this reference. You can try Svelte online using the [REPL](/repl). Alternatively, if you'd like a more fully-featured environment, you can try Svelte on [StackBlitz](https://sveltekit.new).
Si ce n'est pas (encore) le cas pour vous, vous préférerez probablement jeter un oeil au [tutoriel interactif](/tutorial) ou aux [exemples](/examples) avant de consulter cette section. Vous pouvez essayez Svelte en ligne en utilisant le [REPL](/repl), ou bien sur [StackBlitz](https://sveltekit.new) si vous préférez un environnement de développement plus complet.
## Start a new project
> Cette documentation en français, ainsi que l'intégralité du contenu en français de ce site, sont une **traduction bénévole et non officielle** de la [documentation](PUBLIC_SVELTE_SITE_URL/docs) et du [site](PUBLIC_SVELTE_SITE_URL) officiels (en anglais), qui restent la référence. N'hésitez pas à y jeter un oeil. Vous pouvez aussi [nous faire part de vos suggestions de traduction](https://github.com/PUBLIC_GITHUB_ORG/svelte/issues) si celles que vous trouverez dans ces pages ne vous conviennent pas.
>
> Vous trouverez parfois des termes non traduits, comme <spanclass="vo">[falsy](/docs/javascript#falsy-truthy-falsy)</span> ou encore
> <spanclass="vo">[bundler](/docs/web#bundler-packager)</span>. Ces termes sont en général utilisés tels quels en français, et nous avons choisi de les laisser ainsi dans la documentation française. N'hésitez pas à suivre les liens proposés, qui vous dirigeront vers un glossaire fournissant quelques explications.
We recommend using [SvelteKit](https://kit.svelte.dev/), the official application framework from the Svelte team:
## Démarrer un nouveau projet
Nous recommandons d'utiliser [SvelteKit](PUBLIC_KIT_SITE_URL/), le <spanclass="vo">[framework](/docs/web#framework)</span> d'application officiel créé par l'équipe Svelte :
```
npm create svelte@latest myapp
@ -17,18 +22,18 @@ npm install
npm run dev
```
SvelteKit will handle calling [the Svelte compiler](https://www.npmjs.com/package/svelte) to convert your `.svelte` files into `.js` files that create the DOM and `.css` files that style it. It also provides all the other pieces you need to build a web application such as a development server, routing, deployment, and SSR support. [SvelteKit](https://kit.svelte.dev/) uses [Vite](https://vitejs.dev/) to build your code.
SvelteKit se charge d'exécuter [le compilateur Svelte](https://www.npmjs.com/package/svelte) pour convertir vos fichiers `.svelte` en fichiers `.js` qui créent le DOM, et en fichiers `.css` qui le stylisent. Il fournit également tout ce dont vous avez besoin pour créer une application web, comme un serveur de développement, du <spanclass="vo">[routing](/docs/web#routing)</span>, et des outils de déploiement. [SvelteKit](PUBLIC_KIT_SITE_URL/) utilise [Vite](https://vitejs.dev/) pour empaqueter votre code.
### Alternatives to SvelteKit
### Alternatives à SvelteKit
If you don't want to use SvelteKit for some reason, you can also use Svelte with Vite (but without SvelteKit) by running `npm create vite@latest` and selecting the `svelte` option. With this, `npm run build` will generate HTML, JS and CSS files inside the `dist` directory. In most cases, you will probably need to [choose a routing library](/faq#is-there-a-router) as well.
Si vous ne souhaitez pas utiliser SvelteKit, vous pouvez aussi utiliser Svelte (sans SvelteKit) avec Vite en exécutant `npm create vite@latest`, puis en choisissant l'option `svelte`. De cette manière, `npm run build` génèrera les fichiers HTML, JS et CSS dans le dossier `dist`. Dans la plupart des cas, vous aurez aussi probablement besoin de [choisir une librairie de routing](/faq#is-there-a-router).
Alternatively, there are [plugins for all the major web bundlers](https://sveltesociety.dev/tools#bundling) to handle Svelte compilation — which will output `.js` and `.css` that you can insert into your HTML — but most others won't handle SSR.
Il existe également des [plugins pour les bundlers web majeurs](https://sveltesociety.dev/tools#bundling) pour gérer la compilation Svelte — qui génèreront les `.js` et `.css` à insérer dans votre HTML — mais la plupart ne gèreront pas pas le <spanclass="vo">[rendu côté serveur (SSR)](/docs/web#server-side-rendering)</span>.
## Editor tooling
## Outillage d'éditeur
The Svelte team maintains a [VS Code extension](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode) and there are integrations with various other [editors](https://sveltesociety.dev/tools#editor-support) and tools as well.
L'équipe Svelte maintient une extension [VS Code](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode), et des intégrations existent également pour d'autres [éditeurs](https://sveltesociety.dev/tools#editor-support) ou outils.
## Getting help
## Obtenir de l'aide
Don't be shy about asking for help in the [Discord chatroom](https://svelte.dev/chat)! You can also find answers on [Stack Overflow](https://stackoverflow.com/questions/tagged/svelte).
Si vous rencontrez des difficultés, vous trouverez de l'aide sur le [Discord officiel](PUBLIC_SVELTE_SITE_URL/chat) ou sur le [Discord francophone](/chat). Vous trouverez également des réponses sur [StackOverflow](https://stackoverflow.com/questions/tagged/svelte).
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,123 +16,123 @@ 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 <spanclass="vo">[truthy](/docs/javascript#falsy-truthy-truthy)</span> et exclus si leur valeur est <spanclass="vo">[falsy](/docs/javascript#falsy-truthy-falsy)</span>.
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 <spanclass="vo">[nullish](/docs/javascript#nullish)</span>.
```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.
<!-- prettier-ignore -->
```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`. Using `$$props` will not perform as well as references to a specific prop because changes to any prop will cause Svelte to recheck all usages of `$$props`. But it can be useful in some 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`. Utiliser `$$props` ne sera pas aussi performant qu'utiliser une <spanclass="vo">[prop](/docs/sveltejs#props)</span> spécifique directement car les changements de n'importe quelle prop vont déclencher une nouvelle vérification de toutes les occurences de `$$props`. Toutefois `$$props` peut être utile dans certains cas — par exemple, lorsque vous ne savez pas à la compilation quelles props peuvent être passées au 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 performance characteristics compared to specific property access as `$$props`.
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. `restProps` souffre des mêmes problématiques de performance que `$$props` comparé à un accès direct à une prop.
```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
A JavaScript expression can be included as text by surrounding it with curly braces.
Une expression JavaScript peut être incluse en tant que texte en l'entourant avec des accolades.
```svelte
{expression}
```
Curly braces can be included in a Svelte template by using their [HTML entity](https://developer.mozilla.org/docs/Glossary/Entity) strings: `{`, `{`, or `{` for `{` and `}`, `}`, or `}` for `}`.
Des accolades peuvent être incluses dans un <spanclass="vo">[template](/docs/development#template)</span> Svelte en utilisant leur [entité HTML](https://developer.mozilla.org/docs/Glossary/Entity) sous forme de chaîne de caractères : `{`, `{`, ou `{` pour `{` et `}`, `}`, ou `}` pour `}`.
> 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 ...}
@ -68,10 +68,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>
@ -79,9 +79,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}
@ -89,20 +89,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)}
@ -118,17 +118,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 ...}
@ -152,48 +152,47 @@ 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 branch will be rendered on the server.
If the provided expression is not a Promise only the fulfilled branch will be rendered, including in SSR mode.
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.
Si l'expression fournie n'est pas une Promesse, seule la branche résolue sera rendue, même en mode SSR.
```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 or not a Promise -->
<p>The value is {value}</p>
<!--la promesse est résolue ou l'expression n'est pas une Promesse -->
<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}
```
@ -204,9 +203,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}
@ -214,7 +213,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.
In a text expression, characters like `<` and `>` are escaped; however, with HTML expressions, they're not.
Dans une expression texte, les caractères `<` et `>` sont échappés ; ils ne sont en revanche pas échappés dans une expression HTML.
The expression should be valid standalone HTML — `{@html "<div>"}content{@html "</div>"}` will _not_ work, because `</div>` is not valid HTML. It also will _not_ compile Svelte code.
L'expression doit être du HTML valide en soi — `{@html "<div>"}contenu{@html "</div>"}` ne fonctionnera _pas_, car `</div>` n'est pas du HTML valide. Dans ce cas, Svelte ne réussira _pas_ à compiler.
> Svelte does not sanitize expressions before injecting HTML. If the data comes from an untrusted source, you must sanitize it, or you are exposing your users to an XSS vulnerability.
> Svelte ne nettoie pas les expressions avant d'injecter le HTML. Si la donnée provient d'une source non sûre, vous devez le nettoyer vous-même pour éviter d'exposer vos utilisateurs à des vulnérabilités de type <spanclass="vo">[XSS](/docs/web#xss)</span>.
```svelte
<divclass="blog-post">
@ -28,13 +28,12 @@ The expression should be valid standalone HTML — `{@html "<div>"}content{@html
<!--- copy: false --->
{@debug}
```
```svelte
<!--- copy: false --->
{@debug var1, var2, ..., varN}
```
The `{@debug ...}` tag offers an alternative to `console.log(...)`. It logs the values of specific variables whenever they change, and pauses code execution if you have devtools open.
La balise `{@debug ...}` offre une alternative à `console.log(...)`. Elle affiche les valeurs des variables spécifiées lorsqu'elle changent, et met en pause l'exécution du code si vous avez les outils de développement ouverts.
```svelte
<script>
@ -49,21 +48,21 @@ The `{@debug ...}` tag offers an alternative to `console.log(...)`. It logs the
<h1>Hello {user.firstname}!</h1>
```
`{@debug ...}` accepts a comma-separated list of variable names (not arbitrary expressions).
`{@debug ...}` accepte une liste de noms de variables séparés par des virgules (mais pas des expressions).
```svelte
<!-- Compiles-->
<!-- Compile-->
{@debug user}
{@debug user1, user2, user3}
<!--WON'T compile-->
<!--Ne compile pas-->
{@debug user.firstname}
{@debug myArray[0]}
{@debug !isReady}
{@debug typeof user === 'object'}
```
The `{@debug}` tag without any arguments will insert a `debugger` statement that gets triggered when _any_ state changes, as opposed to the specified variables.
La balise `{@debug}` sans argument insère une expression `debugger` qui est déclenchée lorsque _n'importe quel_ état change, plutôt que certaines variables spécifiques.
## {@const ...}
@ -72,7 +71,7 @@ The `{@debug}` tag without any arguments will insert a `debugger` statement that
{@const assignment}
```
The `{@const ...}` tag defines a local constant.
La balise `{@const ...}` définit une constante locale.
```svelte
<script>
@ -85,4 +84,4 @@ The `{@const ...}` tag defines a local constant.
{/each}
```
`{@const}`is only allowed as direct child of`{#if}`, `{:else if}`, `{:else}`, `{#each}`, `{:then}`, `{:catch}`, `<Component />` or`<svelte:fragment />`.
`{@const}`est uniquement utilisable en tant qu'enfant direct de`{#if}`, `{:else if}`, `{:else}`, `{#each}`, `{:then}`, `{:catch}`, `<Component />` ou`<svelte:fragment />`.
As well as attributes, elements can have _directives_, which control the element's behaviour in some way.
En plus des attributs, les éléments peuvent avoir des _directives_, qui contrôlent le comportement des éléments de différentes manières.
## on:_eventname_
@ -10,68 +10,67 @@ As well as attributes, elements can have _directives_, which control the element
<!--- copy: false --->
on:eventname={handler}
```
```svelte
<!--- copy: false --->
on:eventname|modifiers={handler}
```
Use the `on:` directive to listen to DOM events.
Utilisez la directive `on:` pour écouter des évènements du <spanclass='vo'>[DOM](/docs/web#dom)</span>.
```svelte
<!--- file: App.svelte --->
<script>
let count = 0;
/** @param {MouseEvent} event */
function handleClick(event) {
count += 1;
}
</script>
<buttonon:click={handleClick}>
count: {count}
Compte: {count}
</button>
```
Handlers can be declared inline with no performance penalty. As with attributes, directive values may be quoted for the sake of syntax highlighters.
Les gestionnaires d'évènement peuvent être déclarés directement sans pénaliser les performances. Comme pour les attributs, les valeurs utilisées pour les directives peuvent être mises entre guillemets afin d'aider la coloration syntaxique.
```svelte
<buttonon:click={() => (count += 1)}>
count: {count}
<buttonon:click="{() => count += 1}">
Compte: {count}
</button>
```
Add _modifiers_ to DOM events with the `|` character.
Ajoutez des *modificateurs* aux évènements <spanclass='vo'>[DOM](/docs/web#dom)</span> avec le caractère `|`.
```svelte
<formon:submit|preventDefault={handleSubmit}>
<!-- the `submit` event's default is prevented,
so the page won't reload -->
<!-- le comportement par défaut de l'évènement `submit` est ignoré,
ce qui permet de ne pas recharger la page -->
</form>
```
The following modifiers are available:
Les modificateurs suivants sont disponibles:
- `preventDefault` — calls `event.preventDefault()` before running the handler
- `stopPropagation` — calls `event.stopPropagation()`, preventing the event reaching the next element
- `stopImmediatePropagation` - calls `event.stopImmediatePropagation()`, preventing other listeners of the same event from being fired.
- `passive` — improves scrolling performance on touch/wheel events (Svelte will add it automatically where it's safe to do so)
- `nonpassive` — explicitly set`passive: false`
- `capture` — fires the handler during the _capture_ phase instead of the _bubbling_ phase
- `once` — remove the handler after the first time it runs
- `self` — only trigger handler if `event.target` is the element itself
- `trusted` — only trigger handler if `event.isTrusted` is `true`. I.e. if the event is triggered by a user action.
* `preventDefault` — appelle `event.preventDefault()` avant d'exécuter le gestionnaire d'évènement
* `stopImmediatePropagation` - appelle `event.stopImmediatePropagation()`, empêchant d'autres gestionnaires du même évènement d'être exécutés
* `passive` — améliore la performance du défilement pour les évènements `touch`/`wheel` (Svelte l'ajoutera automatiquement lorsque qu'il détecte que ce n'est pas problématique)
* `capture` — déclenche le gestionnaire d'évènement pendant la phase de <spanclass='vo'>[capture](/docs/javascript#bubble-capture)</span> plutôt que pendant la phase de <spanclass='vo'>[bubbling](/docs/javascript#bubble-capture)</span>
* `once` — supprime le gestionnaire d'évènement après sa première exécution
* `self` — ne déclenche le gestionnaire d'évènement que si `event.target` est l'élément lui-même
* `trusted` — ne déclenche le gestionnaire d'évènement que si `event.isTrusted` est `true`. C'est-à-dire si l'évènement est déclenché par une action utilisateur.
Modifiers can be chained together, e.g. `on:click|once|capture={...}`.
Vous pouvez chaîner les modificateurs, par ex. `on:click|once|capture={...}`.
If the `on:` directive is used without a value, the component will _forward_ the event, meaning that a consumer of the component can listen for it.
Si la directive `on:` est utilisée sans valeur, le composant relaiera l'évènement à son parent, ce qui permettra à ce dernier de l'écouter.
```svelte
<buttonon:click> The component itself will emit the click event </button>
<buttonon:click>
Le composant lui-même va émettre un évènement clic
</button>
```
It's possible to have multiple event listeners for the same event:
Il est possible d'avoir plusieurs gestionnaires pour le même évènement:
```svelte
<script>
@ -80,13 +79,12 @@ It's possible to have multiple event listeners for the same event:
<buttonon:click={increment}on:click={track}>Cliquez moi !</button>
```
## bind:_property_
@ -96,59 +94,64 @@ It's possible to have multiple event listeners for the same event:
bind:property={variable}
```
Data ordinarily flows down, from parent to child. The `bind:` directive allows data to flow the other way, from child to parent. Most bindings are specific to particular elements.
En général, la donnée _descend_ du parent vers l'enfant. La directive `bind:` permet à la donnée de remonter de l'enfant vers le parent. Le plus souvent ces liaisons sont spécifiques à des éléments particuliers.
The simplest bindings reflect the value of a property, such as`input.value`.
L'exemple le plus simple d'une liaison reflète la valeur d'une propriété, comme`input.value`.
```svelte
<inputbind:value={name}/>
<textareabind:value={text}/>
<inputbind:value={name}>
<textareabind:value={text}></textarea>
<inputtype="checkbox"bind:checked={yes}/>
<inputtype="checkbox"bind:checked={yes}>
```
If the name matches the value, you can use a shorthand.
Si le nom de la variable est le même que le nom de la propriété, vous pouvez simplifier l'écriture.
```svelte
<inputbind:value/>
<!-- equivalent to
<inputbind:value={value}/>
-->
<!-- Ces écritures sont équivalentes -->
<inputbind:value={value}>
<inputbind:value>
```
Numeric input values are coerced; even though `input.value` is a string as far as the DOM is concerned, Svelte will treat it as a number. If the input is empty or invalid (in the case of `type="number"`), the value is`undefined`.
Les valeurs numériques sont traitées comme des nombres ; même si `input.value` est une chaîne de caractères pour le <spanclass='vo'>[DOM](/docs/web#dom)</span>, Svelte traitera cette valeur comme un nombre. Si l'`<input>` est vide ou invalide (dans le cas de `type="number"` par exemple), la valeur sera`undefined`.
```svelte
<inputtype="number"bind:value={num}/>
<inputtype="range"bind:value={num}/>
<inputtype="number"bind:value={num}>
<inputtype="range"bind:value={num}>
```
On `<input>` elements with `type="file"`, you can use `bind:files` to get the [`FileList` of selected files](https://developer.mozilla.org/en-US/docs/Web/API/FileList). It is readonly.
Sur les éléments `<input>` de type `type="file"`, vous pouvez utiliser `bind:files` pour obtenir la [`FileList` des fichiers sélectionnés](https://developer.mozilla.org/fr/docs/Web/API/FileList). Cette liste est en lecture seule.
If you're using `bind:` directives together with `on:` directives, the order that they're defined in affects the value of the bound variable when the event handler is called.
Si vous utilisez des directives `bind:` conjointement à des directives `on:`, l'ordre dans lequel elles sont définies affectera la valeur de la variable liée lorsque la fonction d'écoute sera appelée.
Here we were binding to the value of a text input, which uses the `input` event. Bindings on other elements may use different events such as`change`.
Dans ce cas, nous avons lié la valeur d'un `<input>` de texte qui utilise l'évènement `input`. Des liaisons sur d'autres éléments pourraient utiliser d'autres évènements comme`change`.
## Binding `<select>` value
### Lier les valeurs de `<select>`
A `<select>` value binding corresponds to the `value` property on the selected `<option>`, which can be any value (not just strings, as is normally the case in the DOM).
Une liaison sur un `<select>` correspond à la propriété `value` de l'`<option>` sélectionnée, qui peut être n'importe quelle valeur (pas uniquement des chaînes de caractères, comme c'est le cas en général dans le <spanclass='vo'>[DOM](/docs/web#dom)</span>).
```svelte
<selectbind:value={selected}>
@ -158,72 +161,73 @@ A `<select>` value binding corresponds to the `value` property on the selected `
</select>
```
A `<select multiple>` element behaves similarly to a checkbox group. The bound variable is an array with an entry corresponding to the `value` property of each selected `<option>`.
Un élément `<select multiple>` se comporte de manière similaire à un groupe de `<checkbox>`. La variable liée est un tableau avec un élément correspondant à la propriété `value` de chaque `<option>` sélectionnée.
There are slight differences between each of these, read more about them [here](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent#Differences_from_innerText).
Il y a de légères différences entre ces différentes liaisons, apprenez-en plus [ici](https://developer.mozilla.org/fr/docs/Web/API/Node/textContent#Differences_from_innerText).
<!-- for some reason puts the comment and html on same line -->
* `readyState` (lecture seule) — nombre entre 0 (inclus) et 4 (inclus)
...and five _two-way_ bindings:
... et 5 liaisons _lecture-écriture_:
- `currentTime` — the current playback time in the video, in seconds
- `playbackRate` — how fast or slow to play the video, where 1 is 'normal'
- `paused` — this one should be self-explanatory
- `volume` — a value between 0 and 1
- `muted` — a boolean value indicating whether the player is muted
* `currentTime` — temps actuel de lecture de la vidéo, en secondes
* `playbackRate` — vitesse de lecture de la vidéo, 1 étant 'normal'
* `paused` — a priori vous voyez ce que c'est
* `volume` — une valeur entre 0 et 1
* `muted` — booléen indiquant si le lecteur est en sourdine
Videos additionally have readonly `videoWidth` and `videoHeight` bindings.
Les vidéos ont de plus des liaisons en lecture seule pour les attributs `videoWidth` et `videoHeight`.
```svelte
<video
@ -242,15 +246,15 @@ Videos additionally have readonly `videoWidth` and `videoHeight` bindings.
bind:muted
bind:videoWidth
bind:videoHeight
/>
></video>
```
## Image element bindings
### Liaisons des éléments image
Image elements (`<img>`) have two readonly bindings:
Les éléments d'image (`<img>`) ont deux liaisons en lecture seule :
- `naturalWidth` (readonly) — the original width of the image, available after the image has loaded
- `naturalHeight` (readonly) — the original height of the image, available after the image has loaded
* `naturalWidth` (lecture seule) — la largeur d'origine de l'image, disponible après le chargement de l'image
* `naturalHeight` (lecture seule) — la hauteur d'origine de l'image, disponible après le chargement de l'image
```svelte
<img
@ -259,18 +263,21 @@ Image elements (`<img>`) have two readonly bindings:
></img>
```
## Block-level element bindings
### Liaisons des éléments de type `block`
Block-level elements have 4 read-only bindings, measured using a technique similar to [this one](http://www.backalleycoder.com/2013/03/18/cross-browser-event-based-element-resize-detection/):
Les éléments de type `block` ont 4 liaisons en lecture seule, mesurées en utilisant [une technique similaire à celle-ci](http://www.backalleycoder.com/2013/03/18/cross-browser-event-based-element-resize-detection/) (en anglais):
Actions are functions that are called when an element is created. They can return an object with a `destroy` method that is called after the element is unmounted:
Les actions sont des fonctions exécutées lorsqu'un élément est créé. Elles peuvent renvoyer un objet avec une méthode `destroy` qui sera appelée lors de la destruction de l'élément.
```svelte
<script>
/** @type {import('svelte/action').Action} */
function foo(node) {
// the node has been mounted in the DOM
// le noeud a été ajouté au DOM
return {
destroy() {
// the node has been removed from the DOM
// le noeud a été supprimé du DOM
}
};
}
</script>
<divuse:foo/>
<divuse:foo></div>
```
An action can have a parameter. If the returned value has an `update` method, it will be called whenever that parameter changes, immediately after Svelte has applied updates to the markup.
Une action peut avoir un argument. Si la valeur renvoyée possède une méthode `update`, celle-ci sera exécutée à chaque fois que cet argument changera, juste après que Svelte a appliqué les modifications au <spanclass="vo">[markup](/docs/web#markup)</span>.
> Ne vous inquiétez pas du fait que l'on redéclare la fonction `foo` pour chaque instance — Svelte garde en mémoire toute fonction qui ne dépend pas d'un état local en dehors de la définition du composant.
> Don't worry about the fact that we're redeclaring the `foo` function for every component instance — Svelte will hoist any functions that don't depend on local state out of the component definition.
```svelte
<script>
export let bar;
/** @type {import('svelte/action').Action} */
function foo(node, bar) {
// the node has been mounted in the DOM
// le noeud a été ajouté au DOM
return {
update(bar) {
// the value of `bar` has changed
// la valeur de `bar` a changé
},
destroy() {
// the node has been removed from the DOM
// le noeud a été supprimé du DOM
}
};
}
</script>
<divuse:foo={bar}/>
<divuse:foo={bar}></div>
```
Read more in the [`svelte/action`](/docs/svelte-action) page.
Plus d'infos dans la page [`svelte/action`](/docs/svelte-action).
A transition is triggered by an element entering or leaving the DOM as a result of a state change.
Une transition est déclenchée lorsqu'un élément entre ou sort du <spanclass='vo'>[DOM](/docs/web#dom)</span> après un changement d'état.
When a block is transitioning out, all elements inside the block, including those that do not have their own transitions, are kept in the DOM until every transition in the block has been completed.
Quand un bloc transitionne vers sa sortie, tous les éléments au sein du bloc, y compris ceux n'ayant pas de transition propre, sont laissés dans le DOM tant que toutes les transitions du bloc se soient terminées.
The `transition:` directive indicates a _bidirectional_ transition, which means it can be smoothly reversed while the transition is in progress.
La directive `transition:` établit une transition _bidirectionnelle_, ce qui implique qu'elle peut être inversée sans heurts en cours de transition.
```svelte
{#if visible}
<divtransition:fade>fades in and out</div>
<divtransition:fade>
s'estompe en entrant et en sortant
</div>
{/if}
```
Transitions are local by default (in Svelte 3, they were global by default). Local transitions only play when the block they belong to is created or destroyed, _not_ when parent blocks are created or destroyed.
Les transitions sont locales par défaut (dans Svelte 3, elles étaient globales par défaut). Les transitions locales sont jouées uniquement lorsque le bloc auquel elles appartiennent est créé ou détruit, _pas_ lorsqu'un bloc parent est créé ou détruit.
```svelte
{#if x}
{#if y}
<!-- Svelte 3: <p transition:fade|local> -->
<ptransition:fade>fades in and out only when y changes</p>
<ptransition:fade>entre et sort en s'estompant seulement quand y change</p>
<!-- Svelte 3: <p transition:fade> -->
<ptransition:fade|global>fades in and out when x or y change</p>
<ptransition:fade|global>entre et sort en s'estompant quand x ou y change</p>
{/if}
{/if}
```
> By default intro transitions will not play on first render. You can modify this behaviour by setting `intro: true` when you [create a component](/docs/client-side-component-api) and marking the transition as `global`.
> Par défaut, les transitions d'entrée (`in`) ne sont pas jouées au premier rendu. Vous pouvez modifier ce comportement en appliquant `intro: true` lorsque vous [instanciez manuellement un composant](/docs/client-side-component-api).
## Transition parameters
## Paramètres de transition
Like actions, transitions can have parameters.
À l'instar des actions, les transitions peuvent avoir des paramètres.
(The double `{{curlies}}` aren't a special syntax; this is an object literal inside an expression tag.)
(La syntaxe `{{accolades}}` n'est pas spéciale ; il s'agit simplement d'un objet dans une balise d'expression.)
```svelte
{#if visible}
<divtransition:fade={{duration:2000}}>fades in and out over two seconds</div>
<divtransition:fade="{{ duration: 2000 }}">
s'estompe en entrant et en sortant sur une durée de 2 secondes
</div>
{/if}
```
## Custom transition functions
## Transitions personnalisées
Transitions can use custom functions. If the returned object has a `css` function, Svelte will create a CSS animation that plays on the element.
Les transitions peuvent être définies par des fonctions personnalisées. Si l'objet retourné possède une fonction `css`, Svelte créera une animation CSS qui sera jouée sur l'élément.
The `t` argument passed to `css` is a value between `0` and `1` after the `easing` function has been applied. _In_ transitions run from `0` to `1`, _out_ transitions run from `1` to `0` —in other words, `1` is the element's natural state, as though no transition had been applied. The `u` argument is equal to`1 - t`.
L'argument `t` passé à `css` est une valeur entre `0` et `1` après que la fonction `easing` a été appliquée. Les transitions _entrantes_ sont jouées de `0` à `1`, les transitions _sortantes_ sont jouées de `1` à `0` — en d'autres termes, `1` est l'état normal de l'élément, comme si aucune transition ne lui était appliquée. L'argument `u` est égal à`1 - t`.
The function is called repeatedly _before_ the transition begins, with different `t` and `u` arguments.
La fonction est régulièrement appelée _avant_ que la transition ne commence, avec différentes valeurs pour `t` et `u`.
```svelte
<script>
@ -581,13 +584,13 @@ The function is called repeatedly _before_ the transition begins, with different
</script>
{#if visible}
<divin:whoosh>whooshes in</div>
<divin:whoosh>entre en faisant woosh</div>
{/if}
```
A custom transition function can also return a `tick` function, which is called _during_ the transition with the same `t` and `u` arguments.
Une fonction de transition personnalisée peut aussi renvoyer une fonction `tick`, qui est appelée _pendant_ la transition avec les mêmes arguments `t` et `u`.
> If it's possible to use `css` instead of `tick`, do so — CSS animations can run off the main thread, preventing jank on slower devices.
> Il est recommandé d'utiliser `css` plutôt que `tick`, si possible — les animations CSS sont exécutées sur un <spanclass='vo'>[thread](/docs/development#thread)</span> différent de celui de JS, évitant ainsi de ralentir les machines les moins puissantes.
```svelte
<!--- file: App.svelte --->
@ -599,10 +602,13 @@ A custom transition function can also return a `tick` function, which is called
throw new Error(`This transition only works on elements with a single text node child`);
throw new Error(`Cette transition ne fonctionne que sur les éléments avec un seul noeud texte comme enfant`);
}
const text = node.textContent;
@ -610,7 +616,7 @@ A custom transition function can also return a `tick` function, which is called
return {
duration,
tick: (t) => {
tick: t => {
const i = ~~(text.length * t);
node.textContent = text.slice(0, i);
}
@ -619,37 +625,39 @@ A custom transition function can also return a `tick` function, which is called
</script>
{#if visible}
<pin:typewriter={{speed:1}}>The quick brown fox jumps over the lazy dog</p>
<pin:typewriter="{{ speed: 1 }}">
Portez ce vieux whisky au juge blond qui fume
</p>
{/if}
```
If a transition returns a function instead of a transition object, the function will be called in the next microtask. This allows multiple transitions to coordinate, making [crossfade effects](https://learn.svelte.dev/tutorial/deferred-transitions) possible.
Si une transition retourne une fonction au lieu d'un objet transition, la fonction sera appelée lors de la prochaine micro-tâche. Cela permet à plusieurs transitions de se coordonner, rendant les effets de [fondu croisé](PUBLIC_LEARN_SITE_URL/tutorial/deferred-transitions) possibles.
Transition functions also receive a third argument, `options`, which contains information about the transition.
Les fonctions de transition peuvent aussi avoir un troisième argument, `options`, qui contient des informations sur la transition.
Available values in the `options` object are:
Les valeurs possibles dans l'objet `options` sont:
- `direction` - one of `in`, `out`, or `both` depending on the type of transition
* `direction` - `in`, `out`, or `both`, selon le type de transition
## Transition events
## Évènements de transition
An element with transitions will dispatch the following events in addition to any standard DOM events:
Un élément ayant des transitions génére les évènements suivants en plus des évènements <spanclass='vo'>[DOM](/docs/web#dom)</span> standards:
-`introstart`
-`introend`
-`outrostart`
-`outroend`
*`introstart`
*`introend`
*`outrostart`
*`outroend`
```svelte
{#if visible}
<p
transition:fly={{ y: 200, duration: 2000 }}
on:introstart={() => (status = 'intro started')}
on:outrostart={() => (status = 'outro started')}
on:introend={() => (status = 'intro ended')}
on:outroend={() => (status = 'outro ended')}
transition:fly="{{ y: 200, duration: 2000 }}"
on:introstart="{() => status = "début de l'entrée"}"
on:outrostart="{() => status = "début de la sortie"}"
on:introend="{() => status = "fin de l'entrée"}"
on:outroend="{() => status = "fin de la sortie"}"
>
Flies in and out
Entre et sort en volant
</p>
{/if}
```
@ -716,13 +724,15 @@ out:fn|local
out:fn|local={params}
```
Similar to `transition:`, but only applies to elements entering (`in:`) or leaving (`out:`) the DOM.
Similaire à `transition:`, mais s'applique uniquement aux éléments entrant (`in:`) ou sortant (`out:`) du <spanclass='vo'>[DOM](/docs/web#dom)</span>.
Unlike with `transition:`, transitions applied with `in:` and `out:` are not bidirectional — an in transition will continue to 'play' alongside the out transition, rather than reversing, if the block is outroed while the transition is in progress. If an out transition is aborted, transitions will restart from scratch.
Contrairement à `transition:`, les transitions appliquées avec `in:` et `out:` ne sont pas bi-directionnelles — une transition entrante continuera sa course en parallèle de la transition sortante, plutôt que d'être inversée, si le bloc est supprimé pendant la transition en cours. Si une transition sortante est annulée, les transitions seront rejouées du début.
```svelte
{#if visible}
<divin:flyout:fade>flies in, fades out</div>
<divin:flyout:fade>
entre en volant, sort en fondu
</div>
{/if}
```
@ -765,38 +775,38 @@ DOMRect {
}
```
An animation is triggered when the contents of a [keyed each block](/docs/logic-blocks#each) are re-ordered. Animations do not run when an element is added or removed, only when the index of an existing data item within the each block changes. Animate directives must be on an element that is an _immediate_ child of a keyed each block.
Une animation est déclenchée quand le contenu d'un [bloc `each` à clé](/docs/logic-blocks#each) est réordonné. Les animations ne sont pas jouées lorsqu'un élément est ajouté ou supprimé, seulement lorsque l'indice d'un élément de liste change au sein d'un bloc `each`. Les directives `animate:` doivent appartenir à un élément enfant _direct_ d'un bloc `each` à clé.
Animations can be used with Svelte's [built-in animation functions](/docs/svelte-animate) or [custom animation functions](/docs/element-directives#custom-animation-functions).
Les animations peuvent être utilisées avec les [fonctions d'animation natives](/docs/svelte-animate) de Svelte ou avec des [fonctions d'animation personnalisées](/docs/element-directives#fonctions-d-animation-personnalis-es).
```svelte
<!-- When `list` is reordered the animation will run-->
<!-- Quand `list` est réordonnée, l'animation sera jouée -->
{#each list as item, index (item)}
<lianimate:flip>{item}</li>
{/each}
```
## Animation Parameters
## Paramètres d'animation
As with actions and transitions, animations can have parameters.
À l'instar des actions et des transitions, les animations peuvent avoir des paramètres.
(The double `{{curlies}}` aren't a special syntax; this is an object literal inside an expression tag.)
(La syntaxe `{{accolades}}` n'est pas spéciale; il s'agit simplement d'un objet dans une balise d'expression.)
```svelte
{#each list as item, index (item)}
<lianimate:flip={{ delay: 500 }}>{item}</li>
<lianimate:flip="{{ delay: 500 }}">{item}</li>
{/each}
```
## Custom animation functions
## Fonctions d'animation personnalisées
Animations can use custom functions that provide the `node`, an `animation` object and any `parameters` as arguments. The `animation` parameter is an object containing `from` and `to` properties each containing a [DOMRect](https://developer.mozilla.org/en-US/docs/Web/API/DOMRect#Properties) describing the geometry of the element in its `start` and `end` positions. The `from` property is the DOMRect of the element in its starting position, and the `to` property is the DOMRect of the element in its final position after the list has been reordered and the DOM updated.
Les animations peuvent être définies par des fonctions fournissant un `node`, un objet `animation`, et n'importe quels `parameters` en arguments. L'argument `animation` est un objet ayant les propriétés `from` et `to`, chacune contenant un [DOMRect](https://developer.mozilla.org/fr/docs/Web/API/DOMRect#Properties) décrivant la géométrie de l'élément dans ses positions de départ (`start`) et arrivée (`end`). La propriété `from` est le DOMRect de l'élément dans sa position de départ, la propriété `to` est le DOMRect de l'élément dans sa position d'arrivée après que la liste a été réordonnée et le <spanclass='vo'>[DOM](/docs/web#dom)</span> mis à jour.
If the returned object has a `css` method, Svelte will create a CSS animation that plays on the element.
Si l'objet renvoyé a une méthode `css`, Svelte va créer une animation CSS qui sera jouée sur l'élément.
The `t` argument passed to `css` is a value that goes from `0` and `1` after the `easing` function has been applied. The `u` argument is equal to`1 - t`.
L'argument `t` passé à `css` est une valeur qui va de `0` à `1` avec que la fonction `easing` a été appliquée. L'argument `u` est égal à`1 - t`.
The function is called repeatedly _before_ the animation begins, with different `t` and `u` arguments.
La fonction est régulièrement appelée _avant_ que la transition ne commence, avec différentes valeurs pour `t` et `u`.
<!-- TODO: Types -->
@ -810,6 +820,7 @@ The function is called repeatedly _before_ the animation begins, with different
* @param {any} params
*/
function whizz(node, { from, to }, params) {
const dx = from.left - to.left;
const dy = from.top - to.top;
@ -819,7 +830,7 @@ The function is called repeatedly _before_ the animation begins, with different
@ -829,9 +840,9 @@ The function is called repeatedly _before_ the animation begins, with different
{/each}
```
A custom animation function can also return a `tick` function, which is called _during_ the animation with the same `t` and `u` arguments.
Une fonction d'animation personnalisée peut aussi renvoyer une fonction `tick`, qui est appelée _pendant_ la transition avec les mêmes arguments `t` et `u`.
> If it's possible to use `css` instead of `tick`, do so — CSS animations can run off the main thread, preventing jank on slower devices.
> Il est recommandé d'utiliser `css` plutôt que `tick`, si possible — les animations CSS sont exécutées sur un <spanclass='vo'>[thread](/docs/development#thread)</span> différent de celui de JS, évitant ainsi de ralentir les machines les moins puissantes.
```svelte
<script>
@ -843,6 +854,7 @@ A custom animation function can also return a `tick` function, which is called _
* @param {any} params
*/
function whizz(node, { from, to }, params) {
const dx = from.left - to.left;
const dy = from.top - to.top;
@ -852,7 +864,8 @@ A custom animation function can also return a `tick` function, which is called _
Components can emit events using [`createEventDispatcher`](/docs/svelte#createeventdispatcher) or by forwarding DOM events.
Les composants peuvent émettre des évènements en utilisant [createEventDispatcher](/docs/svelte#createeventdispatcher), ou en relayant les évènements <spanclass='vo'>[DOM](/docs/web#dom)</span>.
```svelte
<script>
@ -25,16 +25,17 @@ Components can emit events using [`createEventDispatcher`](/docs/svelte#createev
<buttonon:click> two </button>
```
Listening for component events looks the same as listening for DOM events:
Il est possible d'écouter des évènements de composant de la même manière que pour des évènements <spanclass='vo'>[DOM](/docs/web#dom)</span>:
```svelte
<SomeComponent on:whatever={handler}/>
<UnComposant on:peuimporte={handler}/>
```
As with DOM events, if the `on:` directive is used without a value, the event will be forwarded, meaning that a consumer can listen for it.
Comme pour les évènements <spanclass='vo'>[DOM](/docs/web#dom)</span>, si la direction `on:` est utilisée sans valeur, l'évènement sera *relayé*, ce qui permet au parent du composant de l'écouter.
```svelte
<SomeComponent on:whatever/>
<UnComposant on:peuimporte/>
```
## --style-props
@ -44,72 +45,85 @@ As with DOM events, if the `on:` directive is used without a value, the event wi
--style-props="anycssvalue"
```
You can also pass styles as props to components for the purposes of theming, using CSS custom properties.
Vous pouvez aussi passer des props de style aux composants en utilisant les [propriétés CSS personnalisées](https://developer.mozilla.org/fr/docs/Web/CSS/Using_CSS_custom_properties). Cela permet notamment d'appliquer des thèmes.
Svelte's implementation is essentially syntactic sugar for adding a wrapper element. This example:
Cette fonctionnalité est principalement du sucre syntaxique, que Svelte va transformer pour entourer l'élément, comme dans cet exemple :
**Note**: Since this is an extra `<div>`, beware that your CSS structure might accidentally target this. Be mindful of this added wrapper element when using this feature.
**Note**: Faites attention, cette syntaxe ajoute une `<div>` à votre <spanclass="vo">[markup](/docs/web#markup)</span>, qui pourra être ciblée accidentellement par votre CSS. Ayez conscience de cet ajout d'élément lorsque vous utilisez cette fonctionnalité.
For SVG namespace, the example above desugars into using `<g>` instead:
Dans le <spanclass='vo'>[namespace](/docs/development#namespace)</span> SVG, l'exemple ci-dessus va générer un `<g>` à la place d'une `<div>`:
**Note**: Since this is an extra `<g>`, beware that your CSS structure might accidentally target this. Be mindful of this added wrapper element when using this feature.
**Note**: Faites attention, cette syntaxe ajoute un `<g>` à votre <spanclass="vo">[markup](/docs/web#markup)</span>, qui pourra être ciblé accidentellement par votre CSS. Ayez conscience de cet ajout d'élément lorsque vous utilisez cette fonctionnalité.
Svelte's CSS Variables support allows for easily themeable components:
Le support des variables CSS dans Svelte permet d'appliquer des thèmes aux composants de manière simple :
Vous pouvez alors définir une couleur de thème à plus haut niveau :
```css
/* global.css */
html {
--theme-color: black;
--theme-color: black;
}
```
Or override it at the consumer level:
Ou l'écraser au niveau de l'instantiation du composant :
```svelte
<Slider--rail-color="goldenrod"/>
<Slider--rail-color="goldenrod"/>
```
## bind:_property_
## bind:*property*
```svelte
bind:property={variable}
```
You can bind to component props using the same syntax as for elements.
Vous pouvez lier des props de composant en utilisant la même syntaxe que pour les éléments.
```svelte
<Keypadbind:value={pin}/>
<Keypadbind:value={pin}/>
```
While Svelte props are reactive without binding, that reactivity only flows downward into the component by default. Using `bind:property` allows changes to the property from within the component to flow back up out of the component.
Alors que les <spanclass="vo">[props](/docs/sveltejs#props)</span> de Svelte sont réactives sans ajouter de liaison, cette réactivité est descendante vers l'intérieur du composant par défaut. Utiliser `bind:property` permet aux modifications effectuées sur cette prop depuis l'intérieur du composant de remonter en dehors du composant.
## bind:this
@ -118,12 +132,13 @@ While Svelte props are reactive without binding, that reactivity only flows down
bind:this={component_instance}
```
Components also support `bind:this`, allowing you to interact with component instances programmatically.
Les composants permettent aussi `bind:this`, permettant d'interagir avec les instances de composant programmatiquement.
> Note that we can't do `{cart.empty}` since `cart` is `undefined` when the button is first rendered and throws an error.
> Notez qu'on ne peut pas écrire `{cart.empty}` puisque `cart` est `undefined` quand le bouton est rendu la première fois, ce qui provoquerait une erreur
<slotname="x"><!--contenu par défaut optionnel--></slot>
```
```svelte
<slotprop={value}/>
<slotprop={value}></slot>
```
Components can have child content, in the same way that elements can.
Les composants peuvent avoir du contenu enfant, de la même façon que les éléments.
The content is exposed in the child component using the `<slot>` element, which can contain fallback content that is rendered if no children are provided.
Le contenu est exposé dans le composant enfant avec l'élément `<slot>`, qui peut avoir un contenu par défaut qui sera utilisé si aucun enfant n'est fourni.
```svelte
<!-- Widget.svelte -->
<div>
<slot>
this fallback content will be rendered when no content is provided, like in the first example
ce contenu slot par défaut sera rendu si aucun contenu n'est fourni, comme dans le premier exemple
</slot>
</div>
<!-- App.svelte -->
<Widget/>
<!--this component will render the default content -->
<!--ce composant va rendre le contenu par défaut -->
<Widget>
<p>this is some child content that will overwrite the default slot content</p>
<p>ceci est du contenu qui remplacera le contenu slot par défaut</p>
</Widget>
```
Note: If you want to render regular `<slot>` element, You can use`<svelte:element this="slot" />`.
Note: Si vous souhaitez afficher [un élément HTML de type `<slot>`](https://developer.mozilla.org/fr/docs/Web/HTML/Element/slot), vous pouvez utiliser`<svelte:element this="slot" />`.
### `<slot name="`_name_`">`
### `<slot name="`*name*`">`
Named slots allow consumers to target specific areas. They can also have fallback content.
Les <spanclass="vo">[slots](/docs/sveltejs#slot)</span> nommés permettent aux parents de cibler des zones spécifiques. Ils peuvent aussi avoir du contenu par défaut.
```svelte
<!-- Widget.svelte -->
<div>
<slotname="header">No header was provided</slot>
<p>Some content between header and footer</p>
<slotname="footer"/>
<slotname="header">Aucun en-tête fourni</slot>
<p>Du contenu entre l'en-tête et le bas de page</p>
Components can be placed in a named slot using the syntax `<Component slot="name" />`.
In order to place content in a slot without using a wrapper element, you can use the special element`<svelte:fragment>`.
Les composants peuvent être placés dans un <spanclass="vo">[slot](/docs/sveltejs#slot)</span> nommé en utilisant le syntaxe `<Component slot="name />`.
Pour positionner du contenu dans un <spanclass="vo">[slot](/docs/sveltejs#slot)</span> sans l'entourer d'un élément, vous pouvez utiliser l'élément spécial`<svelte:fragment>`.
```svelte
<!-- Widget.svelte -->
<div>
<slotname="header">No header was provided</slot>
<p>Some content between header and footer</p>
<slotname="footer"/>
<slotname="header">Aucun en-tête fourni</slot>
<p>Du contenu entre l'en-tête et le bas de page</p>
<slotname="footer"></slot>
</div>
<!-- App.svelte -->
<Widget>
<HeaderComponentslot="header"/>
<svelte:fragmentslot="footer">
<p>All rights reserved.</p>
<p>Tous droits réservés.</p>
<p>Copyright (c) 2019 Svelte Industries</p>
</svelte:fragment>
</Widget>
```
### $$slots
### `$$slots`
`$$slots` is an object whose keys are the names of the slots passed into the component by the parent. If the parent does not pass in a slot with a particular name, that name will not be present in `$$slots`. This allows components to render a slot (and other elements, like wrappers for styling) only if the parent provides it.
L'objet `$$slots` a comme clés les noms des <spanclass="vo">[slots](/docs/sveltejs#slot)</span> passés au composant par le parent. Si le parent ne fournit pas un <spanclass="vo">[slot](/docs/sveltejs#slot)</span> avec un nom particulier, ce nom ne sera pas présent dans `$$slots`. Cela permet aux composants d'afficher un <spanclass="vo">[slot](/docs/sveltejs#slot)</span> (et d'autres éléments, comment des *wrappers* de style) uniquement si le parent le fournit.
Note that explicitly passing in an empty named slot will add that slot's name to `$$slots`. For example, if a parent passes `<div slot="title" />` to a child component, `$$slots.title` will be truthy within the child.
Notez que passer explicitement un <spanclass="vo">[slot](/docs/sveltejs#slot)</span> nommé vide ajoutera le nom de ce slot à `$$slots`. Par exemple, si un parent fournit `<div slot="title" />` à un composant enfant, `$$slots.title` sera *truthy* dans l'enfant.
```svelte
<!-- Card.svelte -->
<div>
<slotname="title"/>
<slotname="title"></slot>
{#if $$slots.description}
<!--This <hr> and slot will render only if a slot named "description" is provided.-->
<hr/>
<slotname="description"/>
<!--Ce <hr> et ce <slot> seront rendus uniquement si un slot nommé "description" est fourni-->
<hr>
<slotname="description"></slot>
{/if}
</div>
<!-- App.svelte -->
<Card>
<h1slot="title">Blog Post Title</h1>
<!--No slot named "description" was provided so the optional slot will not be rendered.-->
<h1slot="title">Titre d'article de blog</h1>
<!--Aucun slot "description" n'est fourni, donc aucun des éléments dépendants de $$slots.description ne sera rendu-->
</Card>
```
### `<slot key={`_value_`}>`
### `<slot key={`*value*`}>`
Slots can be rendered zero or more times and can pass values _back_ to the parent using props. The parent exposes the values to the slot template using the `let:` directive.
Les <spanclass="vo">[slots](/docs/sveltejs#slot)</span> peuvent être rendus zéro ou plusieurs fois, et peuvent passer des valeurs *en retour* au parent en utilisant des <spanclass="vo">[props](/docs/sveltejs#props)</span>. Le parent expose ces valeurs au <spanclass="vo">[template](/docs/development#template)</span> de <spanclass="vo">[slot](/docs/sveltejs#slot)</span> avec la directive `let:`.
The usual shorthand rules apply — `let:item` is equivalent to `let:item={item}`, and `<slot {item}>` is equivalent to`<slot item={item}>`.
Il est possible d'utiliser la syntaxe raccourcie usuelle — `let:item` est équivalent à `let:item={item}`, et `<slot {item}>` est équivalent à`<slot item={item}>`.
```svelte
<!-- FancyList.svelte -->
<ul>
{#each items as item}
<liclass="fancy">
<slotprop={item}/>
<slotprop={item}></slot>
</li>
{/each}
</ul>
@ -125,19 +123,19 @@ The usual shorthand rules apply — `let:item` is equivalent to `let:item={item}
</FancyList>
```
Named slots can also expose values. The `let:` directive goes on the element with the `slot` attribute.
Les <spanclass="vo">[slots](/docs/sveltejs#slot)</span> nommés peuvent aussi exposer des valeurs. La directive `let:` ira sur l'élément avec l'attribut `slot` correspondant.
```svelte
<!-- FancyList.svelte -->
<ul>
{#each items as item}
<liclass="fancy">
<slotname="item"{item}/>
<slotname="item"{item}></slot>
</li>
{/each}
</ul>
<slotname="footer"/>
<slotname="footer"></slot>
<!-- App.svelte -->
<FancyList{items}>
@ -148,56 +146,55 @@ Named slots can also expose values. The `let:` directive goes on the element wit
## `<svelte:self>`
The `<svelte:self>` element allows a component to include itself, recursively.
L'élément `<svelte:self>` permet à un composant de s'inclure lui-même, récursivement.
It cannot appear at the top level of your markup; it must be inside an if or each block or passed to a component's slot to prevent an infinite loop.
Cet élément ne peut pas être utilisé à la racine du <spanclass="vo">[markup](/docs/web#markup)</span> ; il doit être placé à l'intérieur d'un bloc `{#if}` ou `{#each}` ou passé à un `<slot>` pour éviter une boucle infinie.
```svelte
<script>
/** @type {number} */
export let count;
</script>
{#if count > 0}
<p>counting down... {count}</p>
<svelte:selfcount={count - 1}/>
<p>compte à rebours ... {count}</p>
<svelte:selfcount="{count - 1}"/>
{:else}
<p>lift-off!</p>
<p>décollage !</p>
{/if}
```
## `<svelte:component>`
```svelte
<svelte:componentthis={expression}/>
<svelte:componentthis={expression}/>
```
The `<svelte:component>` element renders a component dynamically, using the component constructor specified as the `this` property. When the property changes, the component is destroyed and recreated.
L'élément `<svelte:component>` rend un composant dynamiquement, en utilisant le constructeur du composant spécifié avec la propriété `this`. Quand cette propriété change, l'instance du composant est détruite et recréée.
If `this` is falsy, no component is rendered.
Si la valeur de `this` est <spanclass="vo">[falsy](/docs/javascript#falsy-truthy-falsy)</span>, aucun composant n'est rendu.
The `<svelte:element>` element lets you render an element of a dynamically specified type. This is useful for example when displaying rich text content from a CMS. Any properties and event listeners present will be applied to the element.
L'élément `<svelte:element>` permet de rendre un élément d'un type spécifié dynamiquement. Cela peut servir par exemple pour afficher du contenu texte enrichi provenant d'un CMS. Toutes les propriétés et fonctions d'écoute d'évènements seront appliquées à l'élément.
The only supported binding is `bind:this`, since the element type-specific bindings that Svelte does at build time (e.g. `bind:value` for input elements) do not work with a dynamic tag type.
Le seul type de liaison (<spanclass="vo">[binding](/docs/sveltejs#binding)</span>) possible dans ce cas est `bind:this`, puisque les liaisons spécifiques créées par Svelte au moment de la compilation pour le type de l'élément (par ex. `bind:value` pour les éléments `<input>`) ne sont pas compatibles avec un type de balise dynamique.
If `this` has a nullish value, the element and its children will not be rendered.
Si `this` a une valeur <spanclass="vo">[nullish](/docs/javascript#nullish)</span>, l'élément et ses enfants ne seront pas rendus.
If `this` is the name of a [void element](https://developer.mozilla.org/en-US/docs/Glossary/Void_element) (e.g., `br`) and `<svelte:element>` has child elements, a runtime error will be thrown in development mode.
Si `this` a pour valeur le nom d'une [balise vide](https://developer.mozilla.org/fr/docs/Glossary/Void_element) (comme `br`), et des enfants ont été fournis à `<svelte:element>`, une erreur d'exécution sera levée en mode développement.
```svelte
<script>
let tag = 'div';
export let handler;
</script>
@ -207,140 +204,148 @@ If `this` is the name of a [void element](https://developer.mozilla.org/en-US/do
## `<svelte:window>`
```svelte
<svelte:windowon:event={handler}/>
<svelte:windowon:event={handler}/>
```
```svelte
<svelte:windowbind:prop={value}/>
<svelte:windowbind:prop={value}/>
```
The `<svelte:window>` element allows you to add event listeners to the `window` object without worrying about removing them when the component is destroyed, or checking for the existence of `window` when server-side rendering.
L'élément `<svelte:window>` permet d'ajouter des fonctions d'écoute d'évènements à l'objet `window` sans avoir à penser à les supprimer quand le composant est détruit, ou sans avoir à vérifier l'existence de `window` lorsque l'on fait des rendus côté serveur.
Unlike `<svelte:self>`, this element may only appear at the top level of your component and must never be inside a block or element.
À l'inverse de `<svelte:self>`, cet élément peut uniquement être placé à la racine du <spanclass="vo">[markup](/docs/web#markup)</span> d'un composant, et ne doit jamais être à l'intérieur d'un bloc de compilation ou d'un élément.
```svelte
<script>
/** @param {KeyboardEvent} event */
function handleKeydown(event) {
alert(`pressed the ${event.key} key`);
alert(`la touche ${event.key} a été enfoncée`);
}
</script>
<svelte:windowon:keydown={handleKeydown}/>
<svelte:windowon:keydown={handleKeydown}/>
```
You can also bind to the following properties:
Vous pouvez aussi lier (avec `bind:`) les propriétés suivantes :
-`innerWidth`
-`innerHeight`
-`outerWidth`
-`outerHeight`
-`scrollX`
-`scrollY`
- `online` — an alias for`window.navigator.onLine`
-`devicePixelRatio`
*`innerWidth`
*`innerHeight`
*`outerWidth`
*`outerHeight`
*`scrollX`
*`scrollY`
* `online` — alias de`window.navigator.onLine`
*`devicePixelRatio`
All except `scrollX` and `scrollY` are readonly.
Toutes ces propriétés sont en lecture seule, à l'exception de `scrollX` and `scrollY`.
```svelte
<svelte:windowbind:scrollY={y}/>
<svelte:windowbind:scrollY={y}/>
```
> Note that the page will not be scrolled to the initial value to avoid accessibility issues. Only subsequent changes to the bound variable of `scrollX` and `scrollY` will cause scrolling. However, if the scrolling behaviour is desired, call `scrollTo()` in`onMount()`.
> Notez que la page ne défilera pas à la valeur fournie initialement pour des raisons d'accessibilité. Seuls les changements ultérieurs liés aux variables `scrollX` et `scrollY` déclencheront le défilement. Cependant, si un défilement initial est tout de même nécessaire, vous pouvez utiliser `scrollTo()` dans`onMount()`.
## `<svelte:document>`
```svelte
<svelte:documenton:event={handler}/>
<svelte:documenton:event={handler}/>
```
```svelte
<svelte:documentbind:prop={value}/>
<svelte:documentbind:prop={value}/>
```
Similarly to `<svelte:window>`, this element allows you to add listeners to events on `document`, such as `visibilitychange`, which don't fire on `window`. It also lets you use [actions](/docs/element-directives#use-action) on`document`.
À l'instar de `<svelte:window>`, cet élément vous permet d'ajouter des gestionnaires d'évènement sur `document`, comme `visibilitychange`, qui n'est pas déclenché sur `window`. Cet élément vous permet aussi d'utiliser des [actions](/docs/element-directives#use-action) sur`document`.
As with `<svelte:window>`, this element may only appear the top level of your component and must never be inside a block or element.
Comme pour `<svelte:window>`, cet élément peut uniquement être utilisé à la racine du <spanclass="vo">[markup](/docs/web#markup)</span> de votre composant, et ne doit jamais être à l'intérieur d'un bloc de compilation ou d'un élément.
Vous pouvez aussi lier (avec `:bind`) les propriétés suivantes:
-`fullscreenElement`
-`visibilityState`
*`fullscreenElement`
*`visibilityState`
All are readonly.
Elles sont toutes en lecture seule.
## `<svelte:body>`
```svelte
<svelte:bodyon:event={handler}/>
<svelte:bodyon:event={handler}/>
```
Similarly to `<svelte:window>`, this element allows you to add listeners to events on `document.body`, such as `mouseenter` and `mouseleave`, which don't fire on `window`. It also lets you use [actions](/docs/element-directives#use-action) on the `<body>` element.
À l'instar de `<svelte:window>`, cet élément vous permet d'ajouter des fonctions d'écoute pour les évènements se produisant sur le `document.body`, comme `mouseenter` et `mouseleave`, qui ne se déclenchent pas sur `window`. Cela permet également d'utiliser des [actions](/docs/element-directives#use-action) sur l'élément `<body>`.
As with `<svelte:window>` and `<svelte:document>`, this element may only appear the top level of your component and must never be inside a block or element.
Comme pour `<svelte:window>` et `<svelte:document>`, cet élément peut uniquement être placé à la racine du <spanclass="vo">[markup](/docs/web#markup)</span> d'un composant, et ne doit jamais être à l'intérieur d'un bloc de compilation ou d'un élément.
This element makes it possible to insert elements into `document.head`. During server-side rendering, `head` content is exposed separately to the main `html` content.
Cet élément rend possible l'insertion d'éléments dans `document.head`. Lors d'un rendu côté serveur, le contenu de `head` est exposé séparément du contenu `html`.
As with `<svelte:window>`, `<svelte:document>` and `<svelte:body>`, this element may only appear at the top level of your component and must never be inside a block or element.
Comme pour `<svelte:window>`, `<svelte:document>` et `<svelte:body>`, cet élément peut uniquement être placé à la racine du <spanclass="vo">[markup](/docs/web#markup)</span> d'un composant, et ne doit jamais être à l'intérieur d'un bloc de compilation ou d'un élément.
```svelte
<svelte:head>
<title>Hello world!</title>
<metaname="description"content="This is where the description goes for SEO"/>
The `<svelte:options>` element provides a place to specify per-component compiler options, which are detailed in the [compiler section](/docs/svelte-compiler#compile). The possible options are:
L'élément `<svelte:options>` permet de fournir à un composant des options de compilation spécifiques, dont le détail est fourni dans [la section Compilation](/docs/svelte-compiler#compile).
Les options disponibles sont:
- `immutable={true}` — you never use mutable data, so the compiler can do simple referential equality checks to determine if values have changed
- `immutable={false}` — the default. Svelte will be more conservative about whether or not mutable objects have changed
- `accessors={true}` — adds getters and setters for the component's props
- `accessors={false}` — the default
- `namespace="..."` — the namespace where this component will be used, most commonly "svg"; use the "foreign" namespace to opt out of case-insensitive attribute names and HTML-specific warnings
- `customElement="..."` — the name to use when compiling this component as a custom element
* `immutable={true}` — vous n'utilisez aucune donnée mutable, le compilateur peut donc se contenter d'effectuer des vérifications d'égalité par référence pour déterminer si des valeurs ont changé
* `immutable={false}` — utilisé par défaut. Svelte sera plus conservatif pour vérifier si des objets mutables ont changé
* `accessors={true}` — ajoute des <spanclass="vo">[getters](/docs/development#getter-setter)</span> et <spanclass="vo">[setters](/docs/development#getter-setter)</span> aux <spanclass="vo">[props](/docs/sveltejs#props)</span> d'un composant
* `accessors={false}` — utilisé par défaut
* `namespace="..."` — le <spanclass="vo">[namespace](/docs/development#namespace)</span> où ce composant sera utilisé, le plus souvent "svg" ; utilisez le <spanclass="vo">[namespace](/docs/development#namespace)</span> "foreign" pour désactiver l'insensibilité à la casse des noms d'attributs ainsi que les avertissements spécifiques au HTML
* `tag="..."` — le nom à utiliser à la compilation de ce composant en <spanclass="vo">[web component](/docs/web#web-component)</span>
The `<svelte:fragment>` element allows you to place content in a [named slot](/docs/special-elements#slot-slot-name-name) without wrapping it in a container DOM element. This keeps the flow layout of your document intact.
L'élément `<svelte:fragment>` permet de placer du contenu dans un [slot nommé](/docs/special-elements#slot-slot-name-name) sans l'encadrer par un élément <spanclass="vo">[DOM](/docs/web#dom)</span> supplémentaire. Cela permet de garder la structure de votre document intacte.
```svelte
<!-- Widget.svelte -->
<div>
<slotname="header">No header was provided</slot>
<p>Some content between header and footer</p>
<slotname="footer"/>
<slotname="header">Aucun en-tête fourni</slot>
<p>Du contenu entre l'en-tête et le bas de page</p>
The `svelte` package exposes [lifecycle functions](https://learn.svelte.dev/tutorial/onmount) and the [context API](https://learn.svelte.dev/tutorial/context-api).
Le paquet `svelte` expose les [fonctions de cycle de vie](PUBLIC_LEARN_SITE_URL/tutorial/onmount) et l'[API de contexte](PUBLIC_LEARN_SITE_URL/tutorial/context-api).
## `onMount`
> EXPORT_SNIPPET: svelte#onMount
The `onMount` function schedules a callback to run as soon as the component has been mounted to the DOM. It must be called during the component's initialisation (but doesn't need to live _inside_ the component; it can be called from an external module).
La fonction `onMount` permet de planifier l'exécution d'un <spanclass="vo">[callback](/docs/development#callback)</span> dès que le composant a été monté dans le <spanclass="vo">[DOM](/docs/web#dom)</span>. 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`does not run inside a [server-side component](/docs/server-side-component-api).
`onMount`n'est pas exécutée pas à l'intérieur d'un [composant serveur](/docs/server-side-component-api).
```svelte
<script>
import { onMount } from 'svelte';
onMount(() => {
console.log('the component has mounted');
console.log('le composant est monté');
});
</script>
```
If a function is returned from `onMount`, it will be called when the component is unmounted.
Si une fonction est renvoyée par `onMount`, celle-ci sera appelée lorsque le composant sera démonté.
```svelte
<script>
@ -38,22 +38,22 @@ If a function is returned from `onMount`, it will be called when the component i
</script>
```
> This behaviour will only work when the function passed to `onMount`_synchronously_ returns a value. `async` functions always return a `Promise`, and as such cannot _synchronously_ return a function.
> 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_.
## `beforeUpdate`
> EXPORT_SNIPPET: svelte#beforeUpdate
Schedules a callback to run immediately before the component is updated after any state change.
Planifie l'exécution d'un <spanclass="vo">[callback](/docs/development#callback)</span> immédiatement avant la mise à jour du composant, lorsqu'un changement d'état s'est produit.
> The first time the callback runs will be before the initial `onMount`
> La première exécution du <spanclass="vo">[callback](/docs/development#callback)</span> se produit juste avant l'appel du `onMount` initial.
```svelte
<script>
import { beforeUpdate } from 'svelte';
beforeUpdate(() => {
console.log('the component is about to update');
console.log('le composant est sur le point de se mettre à jour');
});
</script>
```
@ -62,16 +62,16 @@ Schedules a callback to run immediately before the component is updated after an
> EXPORT_SNIPPET: svelte#afterUpdate
Schedules a callback to run immediately after the component has been updated.
Planifie un <spanclass="vo">[callback](/docs/development#callback)</span> à exécuter immédiatement après la mise à jour du composant.
> The first time the callback runs will be after the initial `onMount`
> La première exécution du <spanclass="vo">[callback](/docs/development#callback)</span> se produit juste après l'appel du `onMount` initial.
```svelte
```sv
<script>
import { afterUpdate } from 'svelte';
afterUpdate(() => {
console.log('the component just updated');
console.log("le composant vient d'être mis à jour");
});
</script>
```
@ -80,16 +80,16 @@ Schedules a callback to run immediately after the component has been updated.
> EXPORT_SNIPPET: svelte#onDestroy
Schedules a callback to run immediately before the component is unmounted.
Planifie un <spanclass="vo">[callback](/docs/development#callback)</span> à exécuter immédiatement avant que le composant ne soit démonté.
Out of `onMount`, `beforeUpdate`, `afterUpdate` and `onDestroy`, this is the only one that runs inside a server-side component.
Parmi les <spanclass="vo">[callbacks](/docs/development#callback)</span> de `onMount`, `beforeUpdate`, `afterUpdate` et `onDestroy`, c'est le seul qui s'exécute dans un composant côté serveur.
```svelte
<script>
import { onDestroy } from 'svelte';
onDestroy(() => {
console.log('the component is being destroyed');
console.log('le composant va être détruit');
});
</script>
```
@ -98,16 +98,16 @@ Out of `onMount`, `beforeUpdate`, `afterUpdate` and `onDestroy`, this is the onl
> EXPORT_SNIPPET: svelte#tick
Returns a promise that resolves once any pending state changes have been applied, or in the next microtask if there are none.
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.
```svelte
<script>
import { beforeUpdate, tick } from 'svelte';
beforeUpdate(async () => {
console.log('the component is about to update');
console.log('le composant est sur le point de se mettre à jour');
await tick();
console.log('the component just updated');
console.log('le composant vient de se mettre à jour');
});
</script>
```
@ -116,9 +116,9 @@ Returns a promise that resolves once any pending state changes have been applied
> EXPORT_SNIPPET: svelte#setContext
Associates an arbitrary `context` object with the current component and the specified `key` and returns that object. The context is then available to children of the component (including slotted content) with`getContext`.
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 <spanclass="vo">[slot](/docs/sveltejs#slot)</span>) avec`getContext`.
Like lifecycle functions, this must be called during component initialisation.
Comme les fonctions de cycle de vie, elle doit être appelée pendant l'instantiation du composant.
```svelte
<script>
@ -128,13 +128,13 @@ Like lifecycle functions, this must be called during component initialisation.
</script>
```
> Context is not inherently reactive. If you need reactive values in context then you can pass a store into context, which _will_ be reactive.
> 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.
## `getContext`
> EXPORT_SNIPPET: svelte#getContext
Retrieves the context that belongs to the closest parent component with the specified `key`. Must be called during component initialisation.
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.
```svelte
<script>
@ -148,14 +148,14 @@ Retrieves the context that belongs to the closest parent component with the spec
> EXPORT_SNIPPET: svelte#hasContext
Checks whether a given `key` has been set in the context of a parent component. Must be called during component initialisation.
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.
```svelte
<script>
import { hasContext } from 'svelte';
if (hasContext('answer')) {
// do something
// faites quelque chose
}
</script>
```
@ -164,7 +164,7 @@ Checks whether a given `key` has been set in the context of a parent component.
> EXPORT_SNIPPET: svelte#getAllContexts
Retrieves the whole context map that belongs to the closest parent component. Must be called during component initialisation. Useful, for example, if you programmatically create a component and want to pass the existing context to it.
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.
```svelte
<script>
@ -178,9 +178,9 @@ Retrieves the whole context map that belongs to the closest parent component. Mu
> EXPORT_SNIPPET: svelte#createEventDispatcher
Creates an event dispatcher that can be used to dispatch [component events](/docs/component-directives#on-eventname). Event dispatchers are functions that can take two arguments: `name` and`detail`.
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`.
Component events created with `createEventDispatcher` create a [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent). These events do not [bubble](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture). The `detail` argument corresponds to the [CustomEvent.detail](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/detail) property and can contain any type of data.
Les événements de composants créés avec `createEventDispatcher` créent un [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent) (en anglais). Ces événements ne suivent pas la chaîne de <spanclass="vo">[bubbling](/docs/javascript#bubble-capture)</span>. L'argument `detail` correspond à la propriété [CustomEvent.detail](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/detail) (en anglais) et peut contenir tout type de données.
```svelte
<script>
@ -189,22 +189,22 @@ Component events created with `createEventDispatcher` create a [CustomEvent](htt
<buttonon:click="{() => dispatch('notify', 'detail value')}">Générer un événement</button>
```
Events dispatched from child components can be listened to in their parent. Any data provided when the event was dispatched is available on the `detail` property of the event object.
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.
Events can be cancelable by passing a third parameter to the dispatch function. The function returns `false` if the event is cancelled with `event.preventDefault()`, otherwise it returns`true`.
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`.
```svelte
<script>
@ -215,15 +215,16 @@ Events can be cancelable by passing a third parameter to the dispatch function.
You can type the event dispatcher to define which events it can receive. This will make your code more type safe both within the component (wrong calls are flagged) and when using the component (types of the events are now narrowed). See [here](typescript#script-lang-ts-events) how to do it.
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](typescript#script-lang-ts-events) pour plus de détail.
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.
Le module `svelte/store` exporte des fonctions pour créer des <spanclass="vo">[stores](/docs/sveltejs#store)</span> [de lecture (_readable_)](/docs/svelte-store#readable), [d'écriture (_writable_)](/docs/svelte-store#writable) et [dérivés (_derived_)](/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-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).
Gardez à l'esprit que vous n'êtes pas _obligé•e_ d'utiliser ces fonctions pour profiter de la [syntaxe réactive `$store`](/docs/svelte-components#script-4-pr-fixer-les-stores-avec-$-pour-acc-der-leur-valeur) dans vos composants. Tout objet qui implémente correctement `.subscribe`, `unsubscribe`, et (éventuellement) `.set` est un store valide, et fonctionnera à la fois avec la syntaxe spéciale, et avec les [stores dérivés](/docs/svelte-store#derived) de Svelte.
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.
Cela permet d'envelopper presque toute autre bibliothèque de gestion d'état réactif pour l'utiliser dans Svelte. Renseignez-vous sur le [contrat de store](/docs/svelte-components#script-4-pr-fixer-les-stores-avec-$-pour-acc-der-leur-valeur) pour voir à quoi ressemble une implémentation fonctionnelle.
## `writable`
> EXPORT_SNIPPET: svelte/store#writable
Function that creates a store which has values that can be set from 'outside' components. It gets created as an object with additional `set` and `update` methods.
Fonction qui crée un <spanclass="vo">[store](/docs/sveltejs#store)</span> dont les valeurs peuvent être définies à partir de composants "extérieurs". Il est créé comme un objet avec les méthodes supplémentaires `set` et `update`.
`set`is a method that takes one argument which is the value to be set. The store value gets set to the value of the argument if the store value is not already equal to it.
`set`est une méthode qui prend un argument la valeur à définir. La valeur courante du <spanclass="vo">[store](/docs/sveltejs#store)</span> est remplacée par la valeur de l'argument si celle-ci n'est pas déjà égale à la valeur courante.
`update`is a method that takes one argument which is a callback. The callback takes the existing store value as its argument and returns the new value to be set to the store.
`update`est une méthode qui prend un <spanclass="vo">[callback](/docs/development#callback)</span> comme seul argument. Le <spanclass="vo">[callback](/docs/development#callback)</span> prend la valeur existante du <spanclass="vo">[store](/docs/sveltejs#store)</span> comme argument et renvoie la nouvelle valeur à définir pour le <spanclass="vo">[store](/docs/sveltejs#store)</span>.
```js
```ts
/// file: store.js
import { writable } from 'svelte/store';
const count = writable(0);
count.subscribe((value) => {
console.log(value);
}); // logs '0'
count.subscribe(valeur => {
console.log(valeur);
}); // affiche '0'.
count.set(1); // logs '1'
count.set(1); // affiche '1'.
count.update((n) => n + 1); // logs '2'
count.update(n => n + 1); // affiche '2'.
```
If a function is passed as the second argument, it will be called when the number of subscribers goes from zero to one (but not from one to two, etc). That function will be passed a `set` function which changes the value of the store, and an `update` function which works like the `update` method on the store, taking a callback to calculate the store's new value from its old value. It must return a `stop` function that is called when the subscriber count goes from one to zero.
Si une fonction est passée comme deuxième argument, elle sera appelée lorsque le nombre d'abonnés au store passera de zéro à un (mais pas de un à deux, etc.). Cette fonction a comme argument une fonction `set` qui peut changer la valeur du <spanclass="vo">[store](/docs/sveltejs#store)</span>. Elle doit retourner une fonction `stop` qui sera appelée lorsque le nombre d'abonnés passera de un à zéro.
```js
```ts
/// file: store.js
import { writable } from 'svelte/store';
const count = writable(0, () => {
console.log('got a subscriber');
return () => console.log('no more subscribers');
console.log('vous avez un abonné');
return () => console.log("vous n'avez plus d'abonnés");
});
count.set(1); // does nothing
count.set(1); // ne fait rien
const unsubscribe = count.subscribe((value) => {
const unsubscribe = count.subscribe(value => {
console.log(value);
}); // logs 'got a subscriber', then '1'
}); // affiche 'vous avez un abonné', puis '1'.
unsubscribe(); // logs 'no more subscribers'
unsubscribe(); // affiche "vous n'avez plus d'abonnés".
```
Note that the value of a `writable` is lost when it is destroyed, for example when the page is refreshed. However, you can write your own logic to sync the value to for example the `localStorage`.
Notez que la valeur d'un `writable` est perdue lorsqu'il est détruit, par exemple lorsque la page est rafraîchie. Cependant, vous pouvez écrire votre propre logique pour synchroniser la valeur, par exemple dans le `localStorage`.
## `readable`
> EXPORT_SNIPPET: svelte/store#readable
Creates a store whose value cannot be set from 'outside', the first argument is the store's initial value, and the second argument to `readable` is the same as the second argument to`writable`.
Crée un <spanclass="vo">[store](/docs/sveltejs#store)</span> dont la valeur ne peut pas être modifiée de l'extérieur. Le premier argument est la valeur initiale du <spanclass="vo">[store](/docs/sveltejs#store)</span>, le second argument est le même que le second argument de`writable`.
Derives a store from one or more other stores. The callback runs initially when the first subscriber subscribes and then whenever the store dependencies change.
Dérive un <spanclass="vo">[store](/docs/sveltejs#store)</span> à partir d'un ou plusieurs autres <spanclass="vo">[stores](/docs/sveltejs#store)</span>. Le <spanclass="vo">[callback](/docs/development#callback)</span> s'exécute initialement lorsque le premier abonné s'abonne, puis à chaque fois que les dépendances du <spanclass="vo">[store](/docs/sveltejs#store)</span> changent.
In the simplest version, `derived` takes a single store, and the callback returns a derived value.
Dans la version la plus simple, `derived` prend un seul <spanclass="vo">[store](/docs/sveltejs#store)</span>, et le <spanclass="vo">[callback](/docs/development#callback)</span> renvoie une valeur dérivée.
```ts
// @filename: ambient.d.ts
@ -108,9 +108,9 @@ import { derived } from 'svelte/store';
const doubled = derived(a, ($a) => $a * 2);
```
The callback can set a value asynchronously by accepting a second argument, `set`, and an optional third argument, `update`, calling either or both of them when appropriate.
Le <spanclass="vo">[callback](/docs/development#callback)</span> peut définir une valeur de manière asynchrone en acceptant un second argument, `set`, et en l'appelant au moment opportun.
In this case, you can also pass a third argument to `derived` — the initial value of the derived store before `set` or `update` is first called. If no initial value is specified, the store's initial value will be`undefined`.
Dans ce cas, vous pouvez également passer un troisième argument à `derived` - la valeur initiale du <spanclass="vo">[store](/docs/sveltejs#store)</span> dérivé avant le premier appel de `set` ou `update`. Si aucune valeur initiale n'est fournie, la valeur initiale du <spanclass="vo">[store](/docs/sveltejs#store)</span> sera`undefined`.
// every time $a produces a value, this produces two
// values, $a immediately and then $a + 1 a second later
// chaque fois que $a produit une valeur, ceci va produire
// deux valeurs, $a immédiatement, pius $a + 1 une seconde plus tard
});
```
If you return a function from the callback, it will be called when a) the callback runs again, or b) the last subscriber unsubscribes.
Si vous renvoyez une fonction à partir du <spanclass="vo">[callback](/docs/development#callback)</span>, elle sera appelée lorsque a) le <spanclass="vo">[callback](/docs/development#callback)</span> s'exécute à nouveau, ou b) le dernier abonné se désabonne.
```ts
// @filename: ambient.d.ts
@ -174,7 +174,7 @@ const tick = derived(
);
```
In both cases, an array of arguments can be passed as the first argument instead of a single store.
Dans les deux cas, un tableau d'arguments peut être passé comme premier argument au lieu d'un seul <spanclass="vo">[store](/docs/sveltejs#store)</span>.
This simple helper function makes a store readonly. You can still subscribe to the changes from the original one using this new readable store.
Cette fonction utilitaire crée un <spanclass="vo">[store](/docs/sveltejs#store)</span> en lecture seule (<spanclass="vo">[readonly](/docs/development#readonly)</span>) à partir d'un autre <spanclass="vo">[store](/docs/sveltejs#store)</span>. Vous pouvez toujours vous abonner aux changements du <spanclass="vo">[store](/docs/sveltejs#store)</span> original en utilisant le <spanclass="vo">[store](/docs/sveltejs#store)</span>`readonly`.
```js
```ts
import { readonly, writable } from 'svelte/store';
const writableStore = writable(1);
@ -222,9 +222,9 @@ readableStore.set(2); // ERROR
> EXPORT_SNIPPET: svelte/store#get
Generally, you should read the value of a store by subscribing to it and using the value as it changes over time. Occasionally, you may need to retrieve the value of a store to which you're not subscribed. `get` allows you to do so.
De manière générale, il est recommandé de lire la valeur d'un <spanclass="vo">[store](/docs/sveltejs#store)</span> en vous y abonnant et en utilisant la valeur à mesure qu'elle change. Occasionnellement, vous pouvez avoir besoin de récupérer la valeur d'un <spanclass="vo">[store](/docs/sveltejs#store)</span> auquel vous n'êtes pas abonné. `get` vous permet de le faire.
> This works by creating a subscription, reading the value, then unsubscribing. It's therefore not recommended in hot code paths.
> Cela fonctionne en créant un abonnement, en lisant la valeur, puis en se désabonnant. Cette méthode n'est donc pas recommandée lorsque le code concerné est exécuté à haute fréquence.
The `svelte/motion` module exports two functions, `tweened` and `spring`, for creating writable stores whose values change over time after `set` and `update`, rather than immediately.
Le module `svelte/motion` exporte deux fonctions, `tweened` et `spring`, pour créer des <spanclass="vo">[stores](/docs/sveltejs#store)</span> de type `writable` dont les valeurs changent dans le temps après `set` et `update`, plutôt qu'immédiatement.
## `tweened`
> EXPORT_SNIPPET: svelte/motion#tweened
Tweened stores update their values over a fixed duration. The following options are available:
Les <spanclass="vo">[stores](/docs/sveltejs#store)</span>`tweened` mettent à jour leur valeur sur une durée fixe. Les options suivantes sont disponibles:
- `delay` (`number`, default 0) — milliseconds before starting
* `delay` (`number`, par défaut 0) - millisecondes avant le démarrage
* `duration` (`number` | `function`, par défaut 400) - durée de la transition en millisecondes
* `easing` (`function`, par défaut `t => t`) - une [fonction de lissage (`easing function`)](/docs/svelte-easing)
* `interpolate` (`function`) - voir ci-dessous
`store.set`and `store.update` can accept a second `options` argument that will override the options passed in upon instantiation.
`store.set`et `store.update` peuvent accepter un second argument `options` qui remplacera les options passées à l'instanciation.
Both functions return a Promise that resolves when the tween completes. If the tween is interrupted, the promise will never resolve.
Les deux fonctions retournent une promesse qui se résout lorsque la transition se termine. Si la transition est interrompue, la promesse ne sera jamais résolue.
Out of the box, Svelte will interpolate between two numbers, two arrays or two objects (as long as the arrays and objects are the same 'shape', and their 'leaf' properties are also numbers).
Sans que vous n'ayez rien à faire, Svelte interpolera entre deux nombres, deux tableaux ou deux objets (tant que les tableaux et les objets ont la même "forme" et que leurs propriétés "feuilles" sont également des nombres).
```svelte
<script>
@ -32,17 +32,17 @@ Out of the box, Svelte will interpolate between two numbers, two arrays or two o
If the initial value is `undefined` or `null`, the first value change will take effect immediately. This is useful when you have tweened values that are based on props, and don't want any motion when the component first renders.
Si la valeur initiale est `undefined` ou `null`, le premier changement de valeur prendra effet immédiatement. Ceci est utile lorsque vous avez des valeurs d'interpolation qui sont basées sur des propriétés de composant et que vous ne voulez pas qu'il y ait de mouvement lors du premier rendu du composant.
The `interpolate` option allows you to tween between _any_ arbitrary values. It must be an `(a, b) => t => value` function, where `a` is the starting value, `b` is the target value, `t` is a number between 0 and 1, and `value` is the result. For example, we can use the [d3-interpolate](https://github.com/d3/d3-interpolate) package to smoothly interpolate between two colours.
L'option `interpolate` vous permet de faire une transition entre _n'importe quelles_ valeurs arbitraires. Cette option doit être une fonction `(a, b) => t => value`, où `a` est la valeur de départ, `b` est la valeur cible, `t` est un nombre entre 0 et 1, et `value` est le résultat. Par exemple, il est possible d'utiliser [d3-interpolate](https://github.com/d3/d3-interpolate) pour interpoler entre deux couleurs.
```svelte
<script>
@ -93,13 +93,13 @@ The `interpolate` option allows you to tween between _any_ arbitrary values. It
> EXPORT_SNIPPET: svelte/motion#spring
A `spring` store gradually changes to its target value based on its `stiffness` and `damping` parameters. Whereas `tweened` stores change their values over a fixed duration, `spring` stores change over a duration that is determined by their existing velocity, allowing for more natural-seeming motion in many situations. The following options are available:
Un <spanclass="vo">[store](/docs/sveltejs#store)</span> de type `spring` change progressivement vers sa valeur cible en fonction de ses paramètres `stiffness` (raideur) et `damping` (amortissement). Alors que les stores `tweened` changent leur valeur sur une durée fixe, les stores `spring` changent leur valeur sur une durée qui est déterminée par leur vélocité courante, permettant un mouvement plus naturel dans de nombreuses situations. Les options suivantes sont disponibles :
- `stiffness` (`number`, default `0.15`) — a value between 0 and 1 where higher means a 'tighter' spring
- `damping` (`number`, default `0.8`) — a value between 0 and 1 where lower means a 'springier' spring
- `precision` (`number`, default `0.01`) — determines the threshold at which the spring is considered to have 'settled', where lower means more precise
* `stiffness` (`number`, par défaut `0.15`) - une valeur entre 0 et 1, où une valeur plus grande signifie un ressort plus 'raide'.
* `damping` (`number`, par défaut `0.8`) - une valeur entre 0 et 1, où une valeur plus basse signifie un ressort plus 'élastique'.
* `precision` (`number`, par défaut `0.01`) - détermine le seuil à partir duquel le ressort est considéré comme 'arrêté'. Une valeur plus basse signifie un ressort plus précis.
All of the options above can be changed while the spring is in motion, and will take immediate effect.
Toutes les options ci-dessus peuvent être changées pendant que le ressort est en mouvement, et prendront effet immédiatement.
```js
import { spring } from 'svelte/motion';
@ -110,17 +110,17 @@ size.damping = 0.4;
size.precision = 0.005;
```
As with [`tweened`](/docs/svelte-motion#tweened) stores, `set` and `update` return a Promise that resolves if the spring settles.
Comme avec les <spanclass="vo">[stores](/docs/sveltejs#store)</span> [`tweened`](/docs/svelte-motion#tweened), `set` et `update` retournent une promesse qui se résout lorsque le ressort s'arrête.
Both `set` and `update` can take a second argument — an object with `hard` or `soft` properties. `{ hard: true }` sets the target value immediately; `{ soft: n }` preserves existing momentum for `n` seconds before settling. `{ soft: true }` is equivalent to`{ soft: 0.5 }`.
Les deux méthodes `set` et `update` peuvent prendre un second argument - un objet avec les propriétés `hard` ou `soft`. `{ hard: true }` fixe immédiatement la valeur cible ; `{ soft: n }` préserve l'élan actuel pendant `n` secondes avant de s'arrêter. `{ soft: true }` est équivalent à`{ soft: 0.5 }`.
```js
import { spring } from 'svelte/motion';
const coords = spring({ x: 50, y: 50 });
// updates the value immediately
// change la valeur immédiatement
coords.set({ x: 100, y: 200 }, { hard: true });
// preserves existing momentum for 1s
// garde l'élan actuel pendant 1s
coords.update(
(target_coords, coords) => {
return { x: target_coords.x, y: coords.y };
@ -129,7 +129,7 @@ coords.update(
);
```
[See a full example on the spring tutorial.](https://learn.svelte.dev/tutorial/springs)
[Un exemple complet de store de type `spring` est disponible dans le tutoriel.](PUBLIC_LEARN_SITE_URL/tutorial/springs)
```svelte
<script>
@ -145,7 +145,7 @@ coords.update(
</script>
```
If the initial value is `undefined` or `null`, the first value change will take effect immediately, just as with `tweened` values (see above).
Si la valeur initiale est `undefined` ou `null`, le premier changement de valeur prendra effet immédiatement, comme pour les valeurs `tweened` (voir ci-dessus).
The `svelte/transition` module exports seven functions: `fade`, `blur`, `fly`, `slide`, `scale`, `draw` and `crossfade`. They are for use with Svelte [`transitions`](/docs/element-directives#transition-fn).
Le module `svelte/transition` exporte 7 fonctions : `fade`, `blur`, `fly`, `slide`, `scale`, `draw` et `crossfade`. Ces fonctions sont utilisables avec les [`transitions`](/docs/element-directives#transition-fn) Svelte.
## `fade`
@ -23,15 +23,15 @@ in:fade={params}
out:fade={params}
```
Animates the opacity of an element from 0 to the current opacity for `in` transitions and from the current opacity to 0 for `out` transitions.
Anime l'opacité d'un élément de 0 jusqu'à l'opacité courante pour les transitions de type `in` et depuis l'opacité courante vers 0 pour les transitions de type `out`.
`fade` accepts the following parameters:
Les paramètres suivants peuvent être utilisés avec `fade`:
- `delay` (`number`, default 0) — milliseconds before starting
- `duration` (`number`, default 400) — milliseconds the transition lasts
- `easing` (`function`, default `linear`) — an [easing function](/docs/svelte-easing)
* `delay` (`number`, par défaut 0) - millisecondes avant le démarrage
* `duration` (`number`, par défaut 400) - durée de la transition en millisecondes
* `easing` (`function`, par défaut `linear`) — une [fonction de lissage](/docs/svelte-easing)
You can see the `fade` transition in action in the [transition tutorial](https://learn.svelte.dev/tutorial/transition).
Un exemple de transition de type `fade` est présenté dans le [tutoriel relatif aux transitions](PUBLIC_LEARN_SITE_URL/tutorial/transition).
```svelte
<script>
@ -39,7 +39,7 @@ You can see the `fade` transition in action in the [transition tutorial](https:/
</script>
{#if condition}
<divtransition:fade={{delay:250,duration:300}}>fades in and out</div>
<divtransition:fade={{delay:250,duration:300}}>Apparaît et disparaît en s'estompant</div>
{/if}
```
@ -62,15 +62,15 @@ in:blur={params}
out:blur={params}
```
Animates a `blur` filter alongside an element's opacity.
Anime le filtre de flou (`blur`) en même temps que l'opacité d'un élément.
`blur` accepts the following parameters:
Les paramètres suivants peuvent être utilisés avec `blur`:
- `delay` (`number`, default 0) — milliseconds before starting
- `duration` (`number`, default 400) — milliseconds the transition lasts
- `easing` (`function`, default `cubicInOut`) — an [easing function](/docs/svelte-easing)
- `opacity` (`number`, default 0) - the opacity value to animate out to and in from
- `amount` (`number | string`, default 5) - the size of the blur. Supports css units (for example: `"4rem"`). The default unit is `px`
* `delay` (`number`, par défaut 0) - millisecondes avant le démarrage
* `duration` (`number`, par défaut 400) - durée de la transition en millisecondes
* `easing` (`function`, par défaut `cubicInOut`) — une [fonction de lissage](/docs/svelte-easing)
* `opacity` (`number`, par défaut 0) - opacité cible de l'animation
* `amount` (`number | string`, par défaut 5) - la taille du flou. Supporte les unités CSS (par exemple : `"4rem"`). L'unité par défaut est `px`.
```svelte
<script>
@ -78,7 +78,7 @@ Animates a `blur` filter alongside an element's opacity.
</script>
{#if condition}
<divtransition:blur={{amount:10}}>fades in and out</div>
<divtransition:blur={{amount:10}}>Apparaît et disparaît avec un flou</div>
{/if}
```
@ -101,19 +101,20 @@ in:fly={params}
out:fly={params}
```
Animates the x and y positions and the opacity of an element. `in` transitions animate from the provided values, passed as parameters to the element's default values. `out` transitions animate from the element's default values to the provided values.
Anime les positions x, y et l'opacité d'un élément. Les transitions entrantes (`in`) permettent d'animer les propriétés depuis les valeurs spécifiées, passées en tant que paramètres, vers les valeurs par défaut. Les transitions sortantes (`out`) permettent quant à elles d'animer depuis les valeurs par défaut de l'élément vers les valeurs spécifiées.
`fly` accepts the following parameters:
Les paramètres suivants peuvent être utilisés avec `fly`:
- `delay` (`number`, default 0) — milliseconds before starting
- `duration` (`number`, default 400) — milliseconds the transition lasts
- `easing` (`function`, default `cubicOut`) — an [easing function](/docs/svelte-easing)
- `x` (`number | string`, default 0) - the x offset to animate out to and in from
- `y` (`number | string`, default 0) - the y offset to animate out to and in from
- `opacity` (`number`, default 0) - the opacity value to animate out to and in from
* `delay` (`number`, par défaut 0) - millisecondes avant le démarrage
* `duration` (`number`, par défaut 400) - durée de la transition en millisecondes
* `easing` (`function`, par défaut `cubicOut`) — une [fonction de lissage](/docs/svelte-easing)
* `x` (`number | string`, par défaut 0) - décalage horizontal de l'animation
* `y` (`number | string`, par défaut 0) - décalage vertical de l'animation
* `opacity` (`number`, par défaut 0) - opacité cible de l'animation
x and y use `px` by default but support css units, for example `x: '100vw'` or `y: '50%'`.
You can see the `fly` transition in action in the [transition tutorial](https://learn.svelte.dev/tutorial/adding-parameters-to-transitions).
x et y utilisent `px` par défaut mais supportent les unités CSS, par exemple `x: '100vw'` ou `y: '50%'`.
Un exemple de transition de type `fly` est présenté dans le [tutoriel relatif aux transitions](PUBLIC_LEARN_SITE_URL/tutorial/adding-parameters-to-transitions).
```svelte
<script>
@ -125,7 +126,7 @@ You can see the `fly` transition in action in the [transition tutorial](https://
Animates the opacity and scale of an element. `in` transitions animate from an element's current (default) values to the provided values, passed as parameters. `out` transitions animate from the provided values to an element's default values.
Anime l'opacité et l'échelle d'un élément. Les transitions entrantes (`in`) s'animent à partir des valeurs fournies en paramètre vers les valeurs par défaut de l'élément, passées en paramètres. Les transitions sortantes (`out`) s'animent à partir des valeurs par défaut de l'élément vers les valeurs fournies en paramètre.
`scale` accepts the following parameters:
Les paramètres suivants peuvent être utilisés avec `scale`:
- `delay` (`number`, default 0) — milliseconds before starting
- `duration` (`number`, default 400) — milliseconds the transition lasts
- `easing` (`function`, default `cubicOut`) — an [easing function](/docs/svelte-easing)
- `start` (`number`, default 0) - the scale value to animate out to and in from
- `opacity` (`number`, default 0) - the opacity value to animate out to and in from
* `delay` (`number`, par défaut 0) - millisecondes avant le démarrage
* `duration` (`number`, par défaut 400) - durée de la transition en millisecondes
* `easing` (`function`, par défaut `cubicInOut`) — une [fonction de lissage](/docs/svelte-easing)
* `start` (`number`, par défaut 0) - ratio d'agrandissement de l'animation
* `opacity` (`number`, par défaut 0) - opacité cible de l'animation
```svelte
<script>
@ -209,7 +209,7 @@ Animates the opacity and scale of an element. `in` transitions animate from an e
Animates the stroke of an SVG element, like a snake in a tube. `in` transitions begin with the path invisible and draw the path to the screen over time. `out` transitions start in a visible state and gradually erase the path. `draw` only works with elements that have a `getTotalLength` method, like `<path>` and`<polyline>`.
Anime le tracé d'un élément SVG, comme un serpent dans un tube. Les transitions entrantes (`in`) commencent avec le tracé non visible et dessinent le tracé. Les transitions sortantes (`out`) commencent avec le tracé visible et l'effacent au fur et à mesure. L'animation `draw` ne fonctionne qu'avec les éléments ayant la méthode `getTotalLength`, comme `<path>` et`<polyline>`.
`draw` accepts the following parameters:
Les paramètres suivants peuvent être utilisés avec `draw`:
- `delay` (`number`, default 0) — milliseconds before starting
- `speed` (`number`, default undefined) - the speed of the animation, see below.
- `easing` (`function`, default `cubicInOut`) — an [easing function](/docs/svelte-easing)
* `delay` (`number`, par défaut 0) - millisecondes avant le démarrage
* `speed` (`number`, par défaut undefined) - vitesse de l'animation, voir ci-dessous.
* `duration` (`number` | `function`, par défaut 800) - durée de la transition en millisecondes
* `easing` (`function`, par défaut `cubicInOut`) — une [fonction de lissage](/docs/svelte-easing)
The `speed` parameter is a means of setting the duration of the transition relative to the path's length. It is a modifier that is applied to the length of the path: `duration = length / speed`. A path that is 1000 pixels with a speed of 1 will have a duration of `1000ms`, setting the speed to `0.5` will double that duration and setting it to `2` will halve it.
Le paramètre de vitesse `speed` peut être utilisé à la place du paramètre durée `duration` pour spécifier la vitesse de la transition en fonction de la longueur totale du chemin. Il s'agit d'un coefficient permettant de calculer la durée de l'animation : `durée = longueur / vitesse` (`duration = length / speed`). Par exemple, un chemin qui mesure 1000 pixels de long avec une vitesse de 1 aura une durée de 1000ms. Avec une vitesse de `0.5`, l'animation aura un temps doublé. Avec une vitesse de `2`, l'animation sera deux fois plus lente.
```svelte
<script>
@ -268,14 +268,14 @@ The `speed` parameter is a means of setting the duration of the transition relat
> EXPORT_SNIPPET: svelte/transition#crossfade
The `crossfade` function creates a pair of [transitions](/docs/element-directives#transition-fn) called `send` and `receive`. When an element is 'sent', it looks for a corresponding element being 'received', and generates a transition that transforms the element to its counterpart's position and fades it out. When an element is 'received', the reverse happens. If there is no counterpart, the `fallback` transition is used.
La fonction de fondu croisé `crossfade` crée deux [transitions](/docs/element-directives#transition-fn) appelées `send` et `receive`. Quand un élément est "envoyé", Svelte cherche un élément correspondant "reçu" et génère une transition qui déplace l'élément vers la position de sa contrepartie en le faisant disparaître. Quand un élément est "reçu", l'inverse s'applique. S'il n'y a pas d'élément reçu, la transition par défaut `fallback` s'applique.
`crossfade` accepts the following parameters:
Les paramètres suivants peuvent être utilisés avec `crossfade`:
- `delay` (`number`, default 0) — milliseconds before starting
- `easing` (`function`, default `cubicOut`) — an [easing function](/docs/svelte-easing)
- `fallback` (`function`) — A fallback [transition](/docs/element-directives#transition-fn) to use for send when there is no matching element being received, and for receive when there is no element being sent.
* `delay` (`number`, par défaut 0) - millisecondes avant le démarrage
* `duration` (`number` | `function`, par défaut 800) - durée de la transition en millisecondes
* `easing` (`function`, par défaut `cubicOut`) — une [fonction de lissage](/docs/svelte-easing)
* `fallback` (`function`) — une [transition](/docs/element-directives#transition-fn) de secours à utiliser lorsqu'il n'y a pas d'élément "reçu" correspondant.
```svelte
<script>
@ -289,9 +289,9 @@ The `crossfade` function creates a pair of [transitions](/docs/element-directive
The `svelte/animate` module exports one function for use with Svelte [animations](/docs/element-directives#animate-fn).
Le module `svelte/animate` exporte une fonction à utiliser avec les [animations](/docs/element-directives#animate-fn) Svelte.
## `flip`
@ -13,20 +13,21 @@ The `svelte/animate` module exports one function for use with Svelte [animations
animate:flip={params}
```
The `flip` function calculates the start and end position of an element and animates between them, translating the `x` and `y` values. `flip` stands for [First, Last, Invert, Play](https://aerotwist.com/blog/flip-your-animations/).
La méthode `flip` calcule la position de départ et d'arrivée d'un élément et génère une animation de translation des coordonnées `x` et `y`. Le mot `flip` est l'acronyme de [First, Last, Invert, Play](https://aerotwist.com/blog/flip-your-animations/) (en anglais).
`flip` accepts the following parameters:
Les paramètres suivants peuvent être utilisés avec `flip`:
- `delay` (`number`, default 0) — milliseconds before starting
* `easing` (`function`, par défaut `cubicOut`) — une [fonction de lissage](/docs/svelte-easing)
`duration` can be provided as either:
- a `number`, in milliseconds.
- a function, `distance: number => duration: number`, receiving the distance the element will travel in pixels and returning the duration in milliseconds. This allows you to assign a duration that is relative to the distance travelled by each element.
Le paramètre de durée `duration` peut être:
You can see a full example on the [animations tutorial](https://learn.svelte.dev/tutorial/animate).
- soit un nombre, en millisecondes.
- une fonction, `distance: number => duration: number`, dont le paramètre correspond à la distance que l'élément va parcourir en pixels et qui retourne la durée en millisecondes. Cela permet de définir une durée, relative à la distance parcourue de l'élément.
Un exemple complet est présenté dans le [tutoriel relatif aux animations](PUBLIC_LEARN_SITE_URL/tutorial/animate).
Easing functions specify the rate of change over time and are useful when working with Svelte's built-in transitions and animations as well as the tweened and spring utilities. `svelte/easing` contains 31 named exports, a `linear` ease and 3 variants of 10 different easing functions: `in`, `out` and`inOut`.
Les fonctions de lissage permettent de configurer la vitesse de transitions ou d'animations. Elles peuvent également être utilisées avec les <spanclass="vo">[stores](/docs/sveltejs#store)</span> [`tweened`](/docs/svelte-motion#tweened) et [`spring`](/docs/svelte-motion#spring). `svelte/easing` exporte 31 utilitaires, une fonction de lissage linéaire (`linear`), et 3 variantes de 10 différentes fonctions de lissage : `in`, `out` et`inOut`.
You can explore the various eases using the [ease visualiser](/examples/easing) in the [examples section](/examples).
Un exemple de chaque méthode est présenté dans le [démonstrateur des fonctions de lissage](/examples/easing) ainsi que dans la section d'[exemples](/examples).
Actions are functions that are called when an element is created. They can return an object with a `destroy` method that is called after the element is unmounted:
Les actions sont des fonctions exécutées lorsqu'un élément est créé. Elles peuvent renvoyer un objet avec une méthode `destroy` qui sera appelée lors de la destruction de l'élément.
```svelte
<script>
/** @type {import('svelte/action').Action} */
function foo(node) {
// the node has been mounted in the DOM
// le noeud a été ajouté au DOM
return {
destroy() {
// the node has been removed from the DOM
// le noeud a été supprimé du DOM
}
};
}
@ -21,9 +21,9 @@ Actions are functions that are called when an element is created. They can retur
<divuse:foo/>
```
An action can have a parameter. If the returned value has an `update` method, it will be called immediately after Svelte has applied updates to the markup whenever that parameter changes.
Une action peut avoir un argument. Si la valeur renvoyée possède une méthode `update`, celle-ci sera exécutée à chaque fois que cet argument changera, juste après que Svelte a appliqué les modifications au <spanclass="vo">[markup](/docs/web#markup)</span>.
> Don't worry that we're redeclaring the `foo` function for every component instance — Svelte will hoist any functions that don't depend on local state out of the component definition.
> Ne vous inquiétez pas du fait que l'on redéclare la fonction `foo` pour chaque instance — Svelte garde en mémoire toute fonction qui ne dépend pas d'un état local en dehors de la définition du composant.
```svelte
<script>
@ -32,15 +32,15 @@ An action can have a parameter. If the returned value has an `update` method, it
@ -51,6 +51,8 @@ An action can have a parameter. If the returned value has an `update` method, it
## Attributes
Les actions émettent parfois des évènements ou appliquent des attributs personnalisés à l'élément sur lequel elles sont utilisées. Pour gérer cela, les actions typées avec `Action` ou `ActionReturn` peuvent avoir un dernier paramètres, `Attributes` :
Sometimes actions emit custom events and apply custom attributes to the element they are applied to. To support this, actions typed with `Action` or `ActionReturn` type can have a last parameter, `Attributes`:
```svelte
@ -59,14 +61,14 @@ Sometimes actions emit custom events and apply custom attributes to the element
Typically, you won't interact with the Svelte compiler directly, but will instead integrate it into your build system using a bundler plugin. The bundler plugin that the Svelte team most recommends and invests in is [vite-plugin-svelte](https://github.com/sveltejs/vite-plugin-svelte). The [SvelteKit](https://kit.svelte.dev/) framework provides a setup leveraging `vite-plugin-svelte` to build applications as well as a [tool for packaging Svelte component libraries](https://kit.svelte.dev/docs/packaging). Svelte Society maintains a list of [other bundler plugins](https://sveltesociety.dev/tools/#bundling) for additional tools like Rollup and Webpack.
En général, vous n'interagirez pas directement avec le compilateur Svelte, mais vous l'intègrerez plutôt dans un processus de <spanclass="vo">[build](/docs/development#build)</span> à travers un <spanclass="vo">[plugin](/docs/development#plugin)</span> de <spanclass="vo">[bundler](/docs/web#bundler-packager)</span>. Le plugin que l'équipe Svelte recommande et avec lequel elle travaille est [vite-plugin-svelte](https://github.com/sveltejs/vite-plugin-svelte). Le <spanclass="vo">[framework](/docs/web#framework)</span> [SvelteKit](PUBLIC_KIT_SITE_URL/) fournit une configuration de `vite-plugin-svelte` qui permet de compiler des applications et de <spanclass="vo">[packager](/docs/web#bundler-packager)</span> des [librairies de composants Svelte](PUBLIC_KIT_SITE_URL/docs/packaging). Svelte Society maintient des [plugins](https://sveltesociety.dev/tools/#bundling) pour d'autres bundlers (notamment Rollup et Webpack).
Nonetheless, it's useful to understand how to use the compiler, since bundler plugins generally expose compiler options to you.
Néanmoins, il est utile de comprendre comment utiliser le compilateur, puisque les plugins exposent généralement des options.
## compile
> EXPORT_SNIPPET: svelte/compiler#compile
This is where the magic happens. `svelte.compile` takes your component source code, and turns it into a JavaScript module that exports a class.
C'est ici que la magie opère. `svelte.compile` convertit le code source des composants en module JavaScript qui exporte des classes.
```js
// @filename: ambient.d.ts
@ -29,9 +29,9 @@ const result = compile(source, {
});
```
Refer to [CompileOptions](#types-compileoptions) for all the available options.
Référez-vous à la section [CompilerOptions](#types-compileoptions) pour voir les options disponibles.
The returned `result` object contains the code for your component, along with useful bits of metadata.
L'objet retourné `result` contient le code du composant, ainsi que des métadonnées utiles.
```ts
// @filename: ambient.d.ts
@ -47,13 +47,13 @@ import { compile } from 'svelte/compiler';
Refer to [CompileResult](#types-compileresult) for a full description of the compile result.
Référez-vous à la section [CompilerResult](#types-compileresult) pour une description du résultat compilé.
## parse
> EXPORT_SNIPPET: svelte/compiler#parse
The `parse` function parses a component, returning only its abstract syntax tree. Unlike compiling with the `generate: false` option, this will not perform any validation or other analysis of the component beyond parsing it. Note that the returned AST is not considered public API, so breaking changes could occur at any point in time.
La méthode `parse` convertit un composant pour retourner son arbre de la syntaxe abstraite (<spanclass="vo">[AST](/docs/development#ast)</span>). Contrairement à la compilation avec l'option `generate: false`, aucune validation ni analyse n'est effectuée. Notez que l'AST n'est pas considéré comme une <spanclass="vo">[API](/docs/development#api)</span> publique ; des changements critiques pourraient survenir à n'importe quel moment.
A number of [official and community-maintained preprocessing plugins](https://sveltesociety.dev/tools#preprocessors) are available to allow you to use Svelte with tools like TypeScript, PostCSS, SCSS, and Less.
Un certain nombre de [plugins de pré-processeur maintenus par la communauté](https://sveltesociety.dev/tools#preprocessors) est disponible pour vous permettre d'utiliser Svelte avec des outils comme TypeScript, PostCSS, SCSS, et Less.
You can write your own preprocessor using the `svelte.preprocess` API.
Vous pouvez écrire votre propre pré-processeur en utilisant l'<spanclass="vo">[API](/docs/development#api)</span> `svelte.
The `preprocess` function provides convenient hooks for arbitrarily transforming component source code. For example, it can be used to convert a `<style lang="sass">` block into vanilla CSS.
La fonction `preprocess` fournit des <spanclass="vo">[framework](/docs/web#framework)</span> pour transformer le code source d'un composant selon vos besoins. Par exemple, elle peut convertir un bloc `<style lang="sass">` en css natif.
The first argument is the component source code. The second is an array of _preprocessors_ (or a single preprocessor, if you only have one), where a preprocessor is an object with a `name` which is required, and `markup`, `script` and `style` functions, each of which is optional.
Le premier argument est le code source du composant lui-même. Le second argument est un tableau de _pré-processeurs_ (ou éventuellement un seul pré-processeur si vous n'en avez qu'un). Un pré-processeur est un objet contenant trois fonctions : `markup`, `script` et `style`, toutes optionnelles.
The `markup` function receives the entire component source text, along with the component's `filename` if it was specified in the third argument.
La fonction `markup` reçoit en argument le <spanclass="vo">[markup](/docs/web#markup)</span> du composant, et le nom du composant `filename` s'il était spécifié comme troisième argument.
The `script` and `style` functions receive the contents of `<script>` and `<style>` elements respectively (`content`) as well as the entire component source text (`markup`). In addition to `filename`, they get an object of the element's attributes.
Les fonctions `script` et `style` reçoivent le contenu des blocs `<script>` et `<style>` respectivement (`content`) ainsi que toute la source textuelle (`markup`) du composant. En plus du nom du fichier `filename`, elles reçoivent un objet contenant les attributs de l'élément.
Each `markup`, `script` or `style` function must return an object (or a Promise that resolves to an object) with a `code` property, representing the transformed source code. Optionally they can return an array of `dependencies` which represents files to watch for changes, and a `map` object which is a sourcemap mapping back the transformation to the original code. `script` and `style` preprocessors can optionally return a record of attributes which represent the updated attributes on the script/style tag.
Chaque fonction `markup`, `script` et `style` doit retourner un objet (ou une Promesse qui résout un objet) contenant un attribut `code`, représentant le code source transformé. Ces fonctions peuvent aussi renvoyer un tableau facultatif de dépendances `dependencies` qui représente les fichiers dont les changements sont à surveiller, ainsi qu'un objet `map` qui est une <spanclass="vo">[sourcemap](/docs/web#sourcemap)</span> renvoyant la transformation vers le code d'origine.
Les pré-processeurs `script` et `style` peuvent de manière optionnelle renvoyer un ensemble d'attributs qui représentent les attributs mis à jour sur les balises `<script>`/`<style>`.
> Preprocessor functions should return a `map` object whenever possible or else debugging becomes harder as stack traces can't link to the original code correctly.
> Les fonctions de <spanclass="vo">[preprocessing](/docs/web#preprocessing)</span> doivent également retourner un objet `map` en plus de `code` et `dependencies`, où `map` correspond à la <spanclass="vo">[sourcemap](/docs/web#sourcemap)</span> de la transformation.
If a `dependencies` array is returned, it will be included in the result object. This is used by packages like [vite-plugin-svelte](https://github.com/sveltejs/vite-plugin-svelte) and [rollup-plugin-svelte](https://github.com/sveltejs/rollup-plugin-svelte) to watch additional files for changes, in the case where your `<style>` tag has an `@import` (for example).
Si un tableau de dépendances `dependencies` est retourné, il sera inclus dans l'objet retourné. Ce tableau est utilisé par des librairies comme [rollup-plugin-svelte](https://github.com/sveltejs/rollup-plugin-svelte) pour surveiller les changements dans les fichiers, par exemple si un bloc `<style>` contient un import de type `@import`.
Multiple preprocessors can be used together. The output of the first becomes the input to the second. Within one preprocessor, `markup` runs first, then `script` and`style`.
Plusieurs pré-processeurs peuvent être utilisés ensemble. La sortie du premier devient l'argument du second. Les fonctions sont exécutées dans l'ordre suivant : `markup`, `script` puis`style`.
> In Svelte 3, all `markup` functions ran first, then all `script` and then all `style` preprocessors. This order was changed in Svelte 4.
> En Svelte 3, toutes les fonctions `markup` étaient exécutées en premier, puis toutes les fonctions `script` et enfin toutes les fonctions `style`. Cet ordre a été changé dans Svelte 4.
```js
/// file: multiple-preprocessor.js
@ -220,27 +221,27 @@ import { preprocess } from 'svelte/compiler';
The `walk` function provides a way to walk the abstract syntax trees generated by the parser, using the compiler's own built-in instance of [estree-walker](https://github.com/Rich-Harris/estree-walker).
La fonction `walk` fournit un un moyen de parcourir les arbres <spanclass="vo">[AST](/docs/development#ast)</span> générés par le <spanclass="vo">[parser](/docs/development#parser)</span>, en utilisant l'utilitaire [estree-walker](https://github.com/Rich-Harris/estree-walker) du compilateur.
The walker takes an abstract syntax tree to walk and an object with two optional methods: `enter` and `leave`. For each node, `enter` is called (if present). Then, unless `this.skip()` is called during `enter`, each of the children are traversed, and then `leave` is called on the node.
La fonction prend comme argument l'arbre <spanclass="vo">[AST](/docs/development#ast)</span> à traiter et un objet contenant 2 méthodes facultatives : `enter` et `leave`. `enter` est appelée pour chaque noeud (si la méthode est définie). Puis, à moins que `this.skip()` n'ait été appelée lors de l'exécution de `enter`, chaque enfant est également traversé. Enfin, la méthode `leave` est appelée pour le noeud actuel.
```js
/// file: compiler-walk.js
// @filename: ambient.d.ts
declare global {
var ast: import('estree').Node;
function do_something(node: import('estree').Node): void;
function do_something_else(node: import('estree').Node): void;
function should_skip_children(node: import('estree').Node): boolean;
function faire_quelque_chose(node: import('estree').Node): void;
function faire_autre_chose(node: import('estree').Node): void;
function doit_ignorer_les_enfants(node: import('estree').Node): boolean;
}
export {};
@ -275,13 +276,13 @@ import { walk } from 'svelte/compiler';
walk(ast, {
enter(node, parent, prop, index) {
do_something(node);
if (should_skip_children(node)) {
faire_quelque_chose(node);
if (doit_ignorer_les_enfants(node)) {
this.skip();
}
},
leave(node, parent, prop, index) {
do_something_else(node);
faire_autre_chose(node);
}
});
```
@ -290,11 +291,11 @@ walk(ast, {
> EXPORT_SNIPPET: svelte/compiler#VERSION
The current version, as set in package.json.
La version actuelle, définie dans le fichier `package.json`.
```js
import { VERSION } from 'svelte/compiler';
console.log(`running svelte version ${VERSION}`);
console.log(`la version ${VERSION} de Svelte est en cours d'exécution`);
A client-side component —that is, a component compiled with `generate: 'dom'` (or the `generate` option left unspecified) is a JavaScript class.
Un composant <spanclass="vo">[client-side](/docs/web#client-side-rendering)</span> est une classe JavaScript correspondant à un composant compilé avec l'option `generate: 'dom'` (ou avec l'option `generate` non spécifiée).
```ts
// @errors: 2554
@ -40,31 +40,31 @@ import App from './App.svelte';
const app = new App({
target: document.body,
props: {
// assuming App.svelte contains something like
// en supposant que App.svelte contienne :
// `export let answer`:
answer: 42
}
});
```
The following initialisation options can be provided:
Les options d'initialisation suivantes peuvent être utilisées :
| `target` | **none** | An `HTMLElement` or `ShadowRoot` to render to. This option is required |
| `anchor` | `null` | A child of `target` to render the component immediately before |
| `props` | `{}` | An object of properties to supply to the component |
| `context` | `new Map()` | A `Map` of root-level context key-value pairs to supply to the component |
| `hydrate` | `false` | See below |
| `intro` | `false` | If `true`, will play transitions on initial render, rather than waiting for subsequent state changes |
| 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
Existing children of `target` are left where they are.
Les enfants existants de la cible `target` ne sont pas affectés.
The `hydrate` option instructs Svelte to upgrade existing DOM (usually from server-side rendering) rather than creating new elements. It will only work if the component was compiled with the [`hydratable: true` option](/docs/svelte-compiler#compile). Hydration of `<head>` elements only works properly if the server-side rendering code was also compiled with `hydratable: true`, which adds a marker to each element in the `<head>` so that the component knows which elements it's responsible for removing during hydration.
L'option d'hydratation `hydrate` indique à Svelte de mettre à jour le <spanclass="vo">[DOM](/docs/web#dom)</span> existant (habituellement à partir du <spanclass="vo">[SSR](/docs/web/#ssr)</span>) 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`](/docs/svelte-compiler#compile). 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.
Whereas children of `target` are normally left alone, `hydrate: true` will cause any children to be removed. For that reason, the `anchor` option cannot be used alongside `hydrate: true`.
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`.
The existing DOM doesn't need to match the component — Svelte will 'repair' the DOM as it goes.
Le <spanclass="vo">[DOM](/docs/web#dom)</span> existant n'a pas besoin de correspondre au composant, Svelte "réparera" le DOM au fur et à mesure.
```ts
/// file: index.js
@ -106,9 +106,9 @@ export {};
component.$set(props);
```
Programmatically sets props on an instance. `component.$set({ x: 1 })` is equivalent to `x = 1` inside the component's `<script>` block.
`$set` définit programmatiquement les <spanclass="vo">[props](/docs/sveltejs#props)</span> d'une instance de composant. `component.$set({ x: 1 })` est équivalent à `x = 1` à l'intérieur de la balise `<script>` du composant.
Calling this method schedules an update for the next microtask — the DOM is _not_ updated synchronously.
L'appel de cette méthode déclenchera une mise à jour à la prochaine micro-tâche — le <spanclass="vo">[DOM](/docs/web#dom)</span>_n'est pas_ mis à jour de manière synchrone.
```ts
// @filename: ambient.d.ts
@ -146,9 +146,9 @@ export {};
component.$on(ev, callback);
```
Causes the `callback` function to be called whenever the component dispatches an`event`.
`$on` enregistre un <spanclass="vo">[callback](/docs/development#callback)</span> qui sera appelé à chaque génération d'un évènement de type`event`.
A function is returned that will remove the event listener when called.
`$on` retourne une fonction dont l'exécution permet de supprimer l'écoute de cet événement.
```ts
/// file: index.js
@ -189,9 +189,9 @@ export {}
component.$destroy();
```
Removes a component from the DOM and triggers any `onDestroy` handlers.
Retire un composant du <spanclass="vo">[DOM](/docs/web#dom)</span> et déclenche les <spanclass="vo">[callbacks](/docs/development#callback)</span> de type `onDestroy` associés.
## Component props
## Props de composant
```js
// @filename: ambient.d.ts
@ -228,9 +228,9 @@ export {}
component.prop = value;
```
If a component is compiled with `accessors: true`, each instance will have getters and setters corresponding to each of the component's props. Setting a value will cause a _synchronous_ update, rather than the default async update caused by`component.$set(...)`.
Si un composant est compilé avec l'option `accessors: true`, chaque instance sera générée avec des <spanclass="vo">[getters et setters](/docs/development#getter-setter)</span> correspondant à chacune de ses <spanclass="vo">[props](/docs/sveltejs#props)</span>. 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(...)`.
By default, `accessors` is `false`, unless you're compiling as a custom element.
Par défaut, `accessors` est initialisé à `false`, à moins que vous ne compiliez un [web component](/docs/custom-elements-api).
Unlike client-side components, server-side components don't have a lifespan after you render them — their whole job is to create some HTML and CSS. For that reason, the API is somewhat different.
À la différence des composants <spanclass="vo">[client-side](/docs/web#client-side-rendering)</span>, les composants <spanclass="vo">[server-side](/docs/web#server-side-rendering)</span> n'ont pas d'existence après que vous les ayez rendus — leur seul et unique rôle est de créer du HTML et du CSS. Pour cette raison, leur <spanclass="vo">[API](/docs/development#api)</span> est un peu différente.
A server-side component exposes a `render` method that can be called with optional props. It returns an object with `head`, `html`, and `css` properties, where `head` contains the contents of any `<svelte:head>` elements encountered.
Un composant <spanclass="vo">[server-side](/docs/web#server-side-rendering)</span> expose une méthode `render` qui peut être appelée avec des <spanclass="vo">[props](/docs/sveltejs#props)</span> optionnelles. Cette méthode renvoie un objet avec des champs `head`, `html` et `css`, où `head` représente le contenu de tout élément `<svelte:head>` rencontré.
You can import a Svelte component directly into Node using [`svelte/register`](/docs/svelte-register).
Vous pouvez importer un composant Svelte directement dans Node en utilisant [`svelte/register`](/docs/svelte-register).
Svelte components can also be compiled to custom elements (aka web components) using the `customElement: true` compiler option. You should specify a tag name for the component using the `<svelte:options>` [element](/docs/special-elements#svelte-options).
Les composants Svelte peuvent également être compilés en [web components (ou "custom elements")](/docs/web#web-component) en utilisant l'option `customElement: true`. Il est recommandé de spécifier un nom de balise pour le composant en utilisant la balise [`<svelte:options>`](/docs/special-elements#svelte-options) et l'attribut `customElement`.
```svelte
<svelte:optionscustomElement="my-element"/>
<!--in Svelte 3, do this instead:
<!--en Svelte 3, faire plutôt ceci :
<svelte:optionstag="my-element"/>
-->
<script>
export let name = 'world';
export let name = 'tout le monde';
</script>
<h1>Hello {name}!</h1>
<h1>Bonjour {name} !</h1>
<slot/>
```
You can leave out the tag name for any of your inner components which you don't want to expose and use them like regular Svelte components. Consumers of the component can still name it afterwards if needed, using the static `element` property which contains the custom element constructor and which is available when the `customElement` compiler option is`true`.
Vous pouvez ignorer le nom de balise pour tout composant imbriqué que vous ne voulez pas exposer et les utiliser plutôt comme des composants Svelte normaux. Il sera toujours possible de nommer ce composant au moment de son instanciation si besoin, en utilisant la <spanclass="vo">[props](/docs/sveltejs#props)</span> statique `element` qui contient le constructeur de <spanclass="vo">[web component](/docs/web#web-component)</span> et qui est disponible lorsque l'option de compilateur `customElement` est à`true`.
Once a custom element has been defined, it can be used as a regular DOM element:
Une fois qu'un <spanclass="vo">[web component](/docs/web#web-component)</span> a été défini, il peut être utilisé comme un élément du <spanclass="vo">[DOM](/docs/web#dom)</span> classique :
```js
document.body.innerHTML = `
<my-element>
<p>This is some slotted content</p>
<p>Ceci est du contenu enfant</p>
</my-element>
`;
```
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).
Par défaut, les <spanclass="vo">[web components](/docs/web#web-component)</span> sont compilés avec l'option `accessors: true`, qui indique que n'importe quelle [props](/docs/basic-markup#attributs-et-props) sera exposée comme propriété de l'élément <spanclass="vo">[DOM](/docs/web#dom)</span> (et sera traitée comme un attribut modifiable lorsque ce sera possible).
To prevent this, add `accessors={false}` to`<svelte:options>`.
Pour empêcher ce comportement, vous pouvez ajouter l'option `accessors={false}` à la balise`<svelte:options>`.
```js
// @noErrors
const el = document.querySelector('my-element');
// get the current value of the 'name' prop
// affiche la valeur courante de la propriété 'name'
console.log(el.name);
// set a new value, updating the shadow DOM
// met à jour une nouvelle valeur, mettant à jour le shadow DOM
el.name = 'everybody';
```
## Component lifecycle
## Cycle de vie du web component
Custom elements are created from Svelte components using a wrapper approach. This means the inner Svelte component has no knowledge that it is a custom element. The custom element wrapper takes care of handling its lifecycle appropriately.
Les <spanclass="vo">[web component](/docs/web#web-component)</span> sont créés à partir de composants Svelte en utilisant une approche de <spanclass="vo">[wrapper](/docs/development#wrapper)</span>. Cela signifie que le composant Svelte imbriqué n'a aucune conscience qu'il est au sein d'un <spanclass="vo">[web component](/docs/web#web-component)</span>. Le web component englobant prend lui-même en charge la gestion du cycle de vie.
When a custom element is created, the Svelte component it wraps is _not_ created right away. It is only created in the next tick after the `connectedCallback` is invoked. Properties assigned to the custom element before it is inserted into the DOM are temporarily saved and then set on component creation, so their values are not lost. The same does not work for invoking exported functions on the custom element though, they are only available after the element has mounted. If you need to invoke functions before component creation, you can work around it by using the [`extend` option](#component-options).
Quand un <spanclass="vo">[web component](/docs/web#web-component)</span> est créé, le composant Svelte qu'il embarque n'est _pas_ créé immédiatement. Il est uniquement créé lors du <spanclass="vo">[tick](/docs/sveltejs#tick)</span> suivant l'appel à `connectedCallback`. Les propriétés assignées au <spanclass="vo">[web component](/docs/web#web-component)</span> avant qu'il ne soit inséré dans le <spanclass="vo">[DOM](/docs/web#dom)</span> sont temporairement enregistrées et assignées à la création du composant, pour ne pas perdre leur valeur. Toutefois, la même chose ne fonctionne pas pour l'invocation des fonctions exportées par le <spanclass="vo">[web component](/docs/web#web-component)</span>, elles sont uniquement disponibles après le montage du composant. Si vous avez besoin d'invoquer des fonctions avant la création du composant, vous pouvez contourner le problème en utilisant l'option [`extend` option](#options-de-composant).
When a custom element written with Svelte is created or updated, the shadow DOM will reflect the value in the next tick, not immediately. This way updates can be batched, and DOM moves which temporarily (but synchronously) detach the element from the DOM don't lead to unmounting the inner component.
Lorsqu'un <spanclass="vo">[web component](/docs/web#web-component)</span> écrit avec Svelte est créé ou mis à jour, le <spanclass="vo">[DOM fantôme](/docs/javascript#shadow-dom)</span> reflète la valeur lors du <spanclass="vo">[tick](/docs/sveltejs#tick)</span> suivant, et non immédiatement. Ainsi, les mises à jour peuvent être groupées, et les déplacements <spanclass="vo">[DOM](/docs/web#dom)</span> qui détachent temporairement (mais de manière synchrone) les éléments du DOM ne déclenchent pas le démontage du composant sous-jacent.
The inner Svelte component is destroyed in the next tick after the `disconnectedCallback` is invoked.
Le composant Svelte sous-jacent est détruit dans le <spanclass="vo">[tick](/docs/sveltejs#tick)</span> suivant l'invocation de `disconnectedCallback`.
## Component options
## Options de composant
When constructing a custom element, you can tailor several aspects by defining `customElement` as an object within `<svelte:options>` since Svelte 4. This object may contain the following properties:
Lorsque vous construisez un <spanclass="vo">[web component](/docs/web#web-component)</span>, vous pouvez définir plusieurs aspects en utilisant l'attribut `customElement` de `<svelte:options>` en tant qu'objet, et ce depuis Svelte 4. Cet objet peut avoir les propriétés suivantes :
- `tag`: the mandatory `tag` property for the custom element's name
- `shadow`: an optional property that can be set to `"none"` to forgo shadow root creation. Note that styles are then no longer encapsulated, and you can't use slots
- `tag`: le nom du <spanclass="vo">[web component](/docs/web#web-component)</span>, obligatoire
- `shadow`: champ optionnel dont la valeur peut être `"none"` pour ignorer la création du [noeud fantôme racine](/docs/javascript#shadow-dom). Notez que les styles ne seront alors plus encapsulés, et que ne pourrez plus utiliser de <spanclass="vo">[slot](/docs/sveltejs#slot)</span>
- `props`: an optional property to modify certain details and behaviors of your component's properties. It offers the following settings:
- `attribute: string`: To update a custom element's prop, you have two alternatives: either set the property on the custom element's reference as illustrated above or use an HTML attribute. For the latter, the default attribute name is the lowercase property name. Modify this by assigning `attribute: "<desired name>"`.
- `reflect: boolean`: By default, updated prop values do not reflect back to the DOM. To enable this behavior, set `reflect: true`.
- `type: 'String' | 'Boolean' | 'Number' | 'Array' | 'Object'`: While converting an attribute value to a prop value and reflecting it back, the prop value is assumed to be a `String` by default. This may not always be accurate. For instance, for a number type, define it using `type: "Number"`
You don't need to list all properties, those not listed will use the default settings.
- `extend`: an optional property which expects a function as its argument. It is passed the custom element class generated by Svelte and expects you to return a custom element class. This comes in handy if you have very specific requirements to the life cycle of the custom element or want to enhance the class to for example use [ElementInternals](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals#examples) for better HTML form integration.
- `attribute: string`: Pour mettre à jour une <spanclass="vo">[props](/docs/sveltejs#props)</span> d'un <spanclass="vo">[web component](/docs/web#web-component)</span>, vous avez deux alternatives : soit affecter la props sur la référence de l'élément comme illustré juste au-dessus ou utiliser un attribut HTML. Pour cette dernière, le nom par défaut de l'attribut est le nom de la props en minuscules. Vous pouvez modifier ceci avec `attribute: "<nom que vous voulez>"`
- `reflect: boolean`: Par défaut, les <spanclass="vo">[props](/docs/sveltejs#props)</span> mises à jour ne sont pas reflétées dans le <spanclass="vo">[DOM](/docs/web#dom)</span>. Pour activer ce comportement, utiliser `reflect: true`.
- `type: 'String' | 'Boolean' | 'Number' | 'Array' | 'Object'`: Si vous convertissez une valeur d'attribut en valeur de <spanclass="vo">[props](/docs/sveltejs#props)</span> pour la refléter dans le <spanclass="vo">[DOM](/docs/web#dom)</span>, la valeur de la props est supposée de type `String` par défaut. Ce n'est pas toujours correct. Par exemple, pour un nombre, vous pouvez utiliser `type: "Number"`
- `extend`: une propriété optionnelle qui attend une fonction comme argument. Cette fonction est passée à la classe du <spanclass="vo">[web component](/docs/web#web-component)</span> générée par Svelte et attend que vous retourniez une classe de <spanclass="vo">[web component](/docs/web#web-component)</span>. Cela est utile si vous ave des contraintes particulières concernant le cycle de vie du <spanclass="vo">[web component](/docs/web#web-component)</span> ou si vous voulez améliorer la classe pour utiliser par exemple les [ElementInternals](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals#examples) (en anglais) pour une meilleure intégration des formulaires.
```svelte
<svelte:options
@ -87,7 +86,7 @@ When constructing a custom element, you can tailor several aspects by defining `
// Extend the class so we can let it participate in HTML forms
// Étend la classe pour lui permettre de participer aux formulaires HTML
return class extends customElementConstructor {
static formAssociated = true;
@ -96,9 +95,9 @@ When constructing a custom element, you can tailor several aspects by defining `
this.attachedInternals = this.attachInternals();
}
// Add the function here, not below in the component so that
// it's always available, not just when the inner Svelte component
// is mounted
// Ajoutez la fonction ici, pas en-dessous dans le composant
// pour qu'elle soit toujours accessible, pas seulement lorsque
// le composant Svelte sous-jacent est monté
randomIndex() {
this.elementIndex = Math.random();
}
@ -119,14 +118,16 @@ When constructing a custom element, you can tailor several aspects by defining `
...
```
## Caveats and limitations
## Limitations
Custom elements can be a useful way to package components for consumption in a non-Svelte app, as they will work with vanilla HTML and JavaScript as well as [most frameworks](https://custom-elements-everywhere.com/). There are, however, some important differences to be aware of:
Les <spanclass="vo">[web components](/docs/web#web-component)</span> sont un bon moyen de <spanclass="vo">[packager](/docs/web#bundler-packager)</span> des composants pour une utilisation dans une application développée dans une autre technologie que Svelte, puisqu'ils fonctionneront avec du HTML et JavaScript natifs mais aussi avec [la plupart des frameworks](https://custom-elements-everywhere.com/). Il y a cependant des différences importantes à connaître :
- Styles are _encapsulated_, rather than merely _scoped_ (unless you set `shadow: "none"`). This means that any non-component styles (such as you might have in a `global.css` file) will not apply to the custom element, including styles with the `:global(...)` modifier
- Instead of being extracted out as a separate .css file, styles are inlined into the component as a JavaScript string
- Custom elements are not generally suitable for server-side rendering, as the shadow DOM is invisible until JavaScript loads
- In Svelte, slotted content renders _lazily_. In the DOM, it renders _eagerly_. In other words, it will always be created even if the component's `<slot>` element is inside an `{#if ...}` block. Similarly, including a `<slot>` in an `{#each ...}` block will not cause the slotted content to be rendered multiple times
- The `let:` directive has no effect, because custom elements do not have a way to pass data to the parent component that fills the slot
- Polyfills are required to support older browsers
- You can use Svelte's context feature between regular Svelte components within a custom element, but you can't use them across custom elements. In other words, you can't use `setContext` on a parent custom element and read that with `getContext` in a child custom element.
- Le style est _encapsulé_, plutôt que simplement <spanclass="vo">[scopé](/docs/development#scope)</span>. Cela signifie que tout style défini en dehors du composant (par exemple, celui défini dans un fichier `global.css` et celui défini avec `:global(...)`) ne s'appliquera pas au <spanclass="vo">[web component](/docs/web#web-component)</span>
- Plutôt que d'être extrait dans un fichier `.css` séparé, le style est <spanclass="vo">[inliné](/docs/javascript#inline)</span> directement en tant que `string` JavaScript
- Les <spanclass="vo">[web components](/docs/web#web-component)</span> ne sont généralement pas faits pour être rendus côté serveur, puisque le <spanclass="vo">[DOM fantôme](/docs/javascript#shadow-dom)</span> est invisible tant que le code JavaScript n'est pas chargé
- En Svelte, les éléments <spanclass="vo">[slottés](/docs/sveltejs#slot)</span> sont rendus de manière <spanclass="vo">[lazy](/docs/web#lazy-loading)</span>. Dans le <spanclass="vo">[DOM](/docs/web#dom)</span>, le rendu est "impatient". En d'autres termes, le composant sera toujours créé même si l'élément `<slot>` est à l'intérieur d'un bloc `{#if ...}`. De la même manière, inclure un `<slot>` dans un bloc `{#each ...}` ne rendra pas l'enfant plusieurs fois
- La directive `let:` n'a aucun effet, car les <spanclass="vo">[web components](/docs/web#web-component)</span> n'ont aucun moyen de passer de la donnée au composant parent qui fournit le <spanclass="vo">[slot](/docs/sveltejs#slot)</span>
- Des <spanclass="vo">[polyfills](/docs/javascript#polyfill)</span> sont nécessaires pour supporter de vieux navigateurs
- Vous pouvez utiliser la fonctionnalité Svelte de contexte entre des composants Svelte classiques à l'intérieur d'un <spanclass="vo">[web component](/docs/web#web-component)</span>, mais vous ne pouvez pas l'utiliser entre différents <spanclass="vo">[web component](/docs/web#web-component)</span>. En d'autres mots, vous ne pouvez pas utiliser `setContext` dans un <spanclass="vo">[web component](/docs/web#web-component)</span> parent et lire ce contexte avec `getContext` dans un <spanclass="vo">[web component](/docs/web#web-component)</span> enfant.
Lorsqu'un <spanclass="vo">[web component](/docs/web#web-component)</span> écrit avec Svelte est créé ou mis à jour, le <spanclass="vo">[DOM fantôme](/docs/javascript#shadow-dom)</span> reflète la valeur dans le rendu suivant, et non immédiatement. Ainsi, les mises à jour peuvent être groupées, et les déplacements <spanclass="vo">[DOM](/docs/web#dom)</span> qui détachent temporairement (mais de manière synchrone) les éléments du DOM ne déclenchent pas le démontage du composant sous-jacent.
We think the best way to get started is playing through the interactive [tutorial](https://learn.svelte.dev/). Each step there is mainly focused on one specific aspect and is easy to follow. You'll be editing and running real Svelte components right in your browser.
Nous pensons que la meilleure manière de commencer est de jouer avec le [tutoriel](PUBLIC_LEARN_SITE_URL/) interactif. Chaque étape est principalement axée sur un aspect spécifique et est facile à suivre. Vous éditerez et exécuterez de vrais composants directement dans votre navigateur.
Five to ten minutes should be enough to get you up and running. An hour and a half should get you through the entire tutorial.
Cinq à dix minutes devraient suffire pour démarrer. Une heure et demie devrait vous permettre de parcourir entièrement le tutoriel.
## Where can I get support?
## Où puis-je obtenir de l'aide ?
If your question is about certain syntax, the [API page](https://svelte.dev/docs) is a good place to start.
Si votre question est en rapport avec une certaine syntaxe, la [page d'API](https://svelte-french.vercel.app/docs/introduction) est un bon point de départ.
Stack Overflow is a popular forum to ask code-level questions or if you’re stuck with a specific error. Read through the existing questions tagged with [Svelte](https://stackoverflow.com/questions/tagged/svelte+or+svelte-3) or [ask your own](https://stackoverflow.com/questions/ask?tags=svelte)!
Stack Overflow est un forum populaire pour poser des questions liées à du code ou si vous bloquez sur une erreur spécifique. Lisez les questions existantes étiquetées avec [Svelte](https://stackoverflow.com/questions/tagged/svelte+or+svelte-3) ou [posez la votre](https://stackoverflow.com/questions/ask?tags=svelte)!
There are online forums and chats which are a great place for discussion about best practices, application architecture or just to get to know fellow Svelte users. [Our Discord](https://svelte.dev/chat) or [the Reddit channel](https://www.reddit.com/r/sveltejs/) are examples of that. If you have an answerable code-level question, Stack Overflow is usually a better fit.
Il existe des forums en ligne pour échanger à propos des bonnes pratiques, de l'architecture d'une application ou tout simplement pour apprendre à connaître d'autres développeurs Svelte. [Le Discord anglophone](PUBLIC_SVELTE_SITE_URL/chat), le [Discord francophone](https://discord.gg/D6Dzc5m3) ou [le canal Reddit](https://www.reddit.com/r/sveltejs/) en sont des exemples. Si vous avez une question relative à du code Svelte, Stack Overflow est probablement le meilleur endroit.
## Are there any third-party resources?
## Existe-t-il des ressources tierces ?
Svelte Society maintains a [list of books and videos](https://sveltesociety.dev/resources).
La Svelte Society maintient une [liste de livres et vidéos](https://sveltesociety.dev/resources).
## How can I get VS Code to syntax-highlight my .svelte files?
## Comment puis-je utiliser la coloration syntaxique sur mes fichiers .svelte dans VS Code ?
There is an [official VS Code extension for Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).
Il existe une [extension VS Code officielle pour Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).
## Is there a tool to automatically format my .svelte files?
## Existe-t-il un outil pour formater automatiquement mes fichiers .svelte ?
You can use prettier with the [prettier-plugin-svelte](https://www.npmjs.com/package/prettier-plugin-svelte) plugin.
Vous pouvez utiliser Prettier avec le <spanclass="vo">[plugin](/docs/development#plugin)</span> [plugin-prettier-svelte](https://www.npmjs.com/package/prettier-plugin-svelte).
## How do I document my components?
## Comment documenter mes composants ?
In editors which use the Svelte Language Server you can document Components, functions and exports using specially formatted comments.
Dans les éditeurs qui utilisent le <spanclass="vo">[Language Server](/docs/web#language-server)</span> Svelte ([svelte-language-server](https://www.npmjs.com/package/svelte-language-server)), vous pouvez documenter les composants, fonctions et exports à l'aide de commentaires spécialement formatés.
````svelte
```svelte
<script>
/** What should we call the user? */
export let name = 'world';
/** Comment doit-on appeler l'utilisateur ? */
export let nom = 'world';
</script>
<!--
@component
Here's some documentation for this component.
It will show up on hover.
Voici une documentation pour ce composant.
Elle apparaîtra au survol
- You can use markdown here.
- You can also use code blocks here.
- Usage:
- Vous pouvez utiliser la syntaxe Markdown ici.
- Vous pouvez également utiliser des blocs de code ici.
- Utilisation:
```tsx
<mainname="Arethra">
<mainnom="Arethra">
```
-->
<main>
<h1>
Hello, {name}
Salut, {nom}
</h1>
</main>
````
Note: The `@component` is necessary in the HTML comment which describes your component.
Note: Le `@component` est nécessaire dans le commentaire HTML qui décrit votre composant.
## Does Svelte scale?
## Est-ce que l'usage de Svelte est pertinent à grande échelle ?
There will be a blog post about this eventually, but in the meantime, check out [this issue](https://github.com/sveltejs/svelte/issues/2546).
Il y aura certainement un article de blog à ce sujet, mais en attendant, consultez [cette discussion](https://github.com/sveltejs/svelte/issues/2546).
## Is there a UI component library?
## Existe-t-il une bibliothèque de composants d'interface ?
There are several UI component libraries as well as standalone components. Find them under the [design systems section of the components page](https://sveltesociety.dev/components#design-systems) on the Svelte Society website.
Il existe plusieurs bibliothèques de composants d'interface ainsi que des composants autonomes. Retrouvez-les dans la [section design systems de la page composants](https://sveltesociety.dev/components#design-systems) du site de Svelte Society.
## How do I test Svelte apps?
## Comment tester mes applications Svelte ?
How your application is structured and where logic is defined will determine the best way to ensure it is properly tested. It is important to note that not all logic belongs within a component - this includes concerns such as data transformation, cross-component state management, and logging, among others. Remember that the Svelte library has its own test suite, so you do not need to write tests to validate implementation details provided by Svelte.
La façon dont votre application est structurée et l'endroit où la logique est définie vont déterminer la meilleure façon de s'assurer qu'elle est correctement testée. Il est important de comprendre que certaines logiques ne devraient pas être définies dans un composant — notamment les sujets de transformation de données, de gestion d'état inter-composants, et l'affichage de <spanclass="vo">[logs](/docs/development#log)</span>, entre autres. Ayez en tête que la librairie Svelte a sa propre suite de tests, vous n'avez donc pas besoin d'écrire des tests pour vérifier les détails d'implémentation fournis par Svelte.
A Svelte application will typically have three different types of tests: Unit, Component, and End-to-End (E2E).
Une application Svelte aura généralement trois types différents de tests : Unitaires, Composants et <spanclass="vo">[end to end](/docs/development#end-to-end)<span> (E2E)
_Unit Tests_: Focus on testing business logic in isolation. Often this is validating individual functions and edge cases. By minimizing the surface area of these tests they can be kept lean and fast, and by extracting as much logic as possible from your Svelte components more of your application can be covered using them. When creating a new SvelteKit project, you will be asked whether you would like to setup [Vitest](https://vitest.dev/) for unit testing. There are a number of other test runners that could be used as well.
_Tests Unitaires_ : Servent à tester la logique métier en isolation. Souvent il s'agit de valider des fonction individuelles et des cas particuliers. Minimiser la surface de ces tests permet de les garder légers et rapides, et extraire un maximum de logique de vos composants Svelte vous permet d'augmenter le nombre de ce type de tests pour couvrir votre application. Lorsque vous créez un nouveau projet SvelteKit, vous avez la possibilité de choisir d'installer [Vitest](https://vitest.dev/) pour les tests unitaires. D'autres moteurs de tests pourraient être également utilisés.
_Component Tests_: Validating that a Svelte component mounts and interacts as expected throughout its lifecycle requires a tool that provides a Document Object Model (DOM). Components can be compiled (since Svelte is a compiler and not a normal library) and mounted to allow asserting against element structure, listeners, state, and all the other capabilities provided by a Svelte component. Tools for component testing range from an in-memory implementation like jsdom paired with a test runner like [Vitest](https://vitest.dev/) to solutions that leverage an actual browser to provide a visual testing capability such as [Playwright](https://playwright.dev/docs/test-components) or [Cypress](https://www.cypress.io/).
_Tests de composant_ : Vérifier qu'un composant Svelte s'instancie et réagit comme prévu aux interactions au cours de sa vie nécessite un outil qui fournit un <spanclass="vo">[DOM](/docs/web#dom)</span>. Les composants peuvent être compilés (puisque Svelte est un compilateur et non une simple librairie) et montés pour permettre de vérifier la structure de l'élément, les gestionnaires d'évènements, l'état, et les autres fonctionnalités offertes par un composant Svelte. Les outils de test de composant vont d'une implémentation en mémoire type [jsdom](https://www.npmjs.com/package/jsdom) couplée à un moteur de test type [Vitest](https://vitest.dev/), à des solutions qui utilisent de vrais navigateurs pour fournir des fonctionnalités de tests visuels comme [Playwright](https://playwright.dev/docs/test-components) ou [Cypress](https://www.cypress.io/).
_End-to-End Tests_: To ensure your users are able to interact with your application it is necessary to test it as a whole in a manner as close to production as possible. This is done by writing end-to-end (E2E) tests which load and interact with a deployed version of your application in order to simulate how the user will interact with your application. When creating a new SvelteKit project, you will be asked whether you would like to setup [Playwright](https://playwright.dev/) for end-to-end testing. There are many other E2E test libraries available for use as well.
_Tests <spanclass="vo">[end to end](/docs/development#end-to-end)</span>_ : Pour vous assurer que votre application fonctionne comme prévu dans des cas réels d'utilisation, il est nécessaire de la tester d'une manière la plus proche possible de la production. Cela se fait avec des tests dits <spanclass="vo">[end to end](/docs/development#end-to-end)</span> (E2E) qui chargent et interagissent avec une version déployée de votre application afin de simuler les interactions utilisateur. Lorsque vous créez un nouveau projet SvelteKit, vous avez la possibilité de choisir d'installer [Playwright](https://playwright.dev/) pour les tests <spanclass="vo">[end to end](/docs/development#end-to-end)</span>. Il existe également d'autres librairies de tests E2E.
Some resources for getting started with testing:
Quelques ressources pour démarrer avec les tests unitaires :
- [Exemple utilisant uvu avec JSDOM](https://github.com/lukeed/uvu/tree/master/examples/svelte)
- [Tests de composants Svelte Vitest et Playwright](https://davipon.hashnode.dev/test-svelte-component-using-vitest-playwright)
- [Tests de composants avec WebdriverIO](https://webdriver.io/docs/component-testing/svelte)
## Is there a router?
## Un routeur est-il intégré ?
The official routing library is [SvelteKit](https://kit.svelte.dev/). SvelteKit provides a filesystem router, server-side rendering (SSR), and hot module reloading (HMR) in one easy-to-use package. It shares similarities with Next.js for React.
La bibliothèque officielle de <spanclass="vo">[routing](/docs/web#routing)</span> est [SvelteKit](PUBLIC_KIT_SITE_URL/). Sveltekit fournit un routeur basé sur le système de fichier, un <spanclass="vo">[rendu coté serveur (SSR)](/docs/web#server-side-rendering)</span> et un <spanclass="vo">[rechargement automatique de module (HMR)](/docs/web#hot-module-reloading)</span> en une seule librairie facile à utiliser. Il est similaire à Next.js pour React.
However, you can use any router library. A lot of people use [page.js](https://github.com/visionmedia/page.js). There's also [navaid](https://github.com/lukeed/navaid), which is very similar. And [universal-router](https://github.com/kriasoft/universal-router), which is isomorphic with child routes, but without built-in history support.
Toutefois, vous pouvez utiliser n'importe quelle bibliothèque de <spanclass='vo'>[routing](/docs/web#routing)</span> de votre choix. Beaucoup de gens utilisent [page.js](https://github.com/visionmedia/page.js). Il y a aussi [navaid](https://github.com/lukeed/navaid), qui est très similaire. Et [universal-router](https://github.com/kriasoft/universal-router), qui est isomorphe avec les routes enfants, mais sans prise en charge intégrée de l'historique.
If you prefer a declarative HTML approach, there's the isomorphic [svelte-routing](https://github.com/EmilTholin/svelte-routing) library and a fork of it called [svelte-navigator](https://github.com/mefechoel/svelte-navigator) containing some additional functionality.
Si vous préférez une approche HTML déclarative, il existe la bibliothèque isomorphe [svelte-routing](https://github.com/EmilTholin/svelte-routing) et un fork appelé [svelte-navigator](https://github. com/mefechoel/svelte-navigator) contenant des fonctionnalités supplémentaires.
If you need hash-based routing on the client side, check out [svelte-spa-router](https://github.com/ItalyPaleAle/svelte-spa-router) or [abstract-state-router](https://github.com/TehShrike/abstract-state-router/).
Si vous avez besoin d'un <spanclass='vo'>[routing](/docs/web#routing)</span> basé sur le <spanclass="vo">[hashing](/docs/development#hash)</span> côté client, consultez [svelte-spa-router](https://github.com/ItalyPaleAle/svelte-spa-router) ou [abstract-state-router](https://github.com/TehShrike/abstract-state-router/).
[Routify](https://routify.dev) is another filesystem-based router, similar to SvelteKit's router. Version 3 supports Svelte's native SSR.
[Routify](https://routify.dev) est un autre routeur basé sur l'arborescence de fichiers, similaire au routeur de SvelteKit. La version 3 supporte le rendu côté serveur natif de Svelte.
You can see a [community-maintained list of routers on sveltesociety.dev](https://sveltesociety.dev/components#routers).
Vous pouvez trouver une [liste de routeurs maintenus par la communauté sur sveltesociety.dev](https://sveltesociety.dev/components#routers).
## Can I tell Svelte not to remove my unused styles?
## Puis-je demander à Svelte de pne pas supprimer mes styles inutilisés ?
No. Svelte removes the styles from the component and warns you about them in order to prevent issues that would otherwise arise.
Non. Svelte supprime les styles inutilisés des composants et vous prévient pour éviter certaines problématiques qui surviendraient sinon.
Svelte's component style scoping works by generating a class unique to the given component, adding it to the relevant elements in the component that are under Svelte's control, and then adding it to each of the selectors in that component's styles. When the compiler can't see what elements a style selector applies to, there would be two bad options for keeping it:
Le <spanclass="vo">[scoping](/docs/development#scope)</span> des styles d'un composant Svelte fonctionne en générant une classe unique pour le composant en question, en l'ajoutant aux éléments pertinents du composant sous le contrôle de Svelte, puis en ajoutant cette classe à chacun des sélecteurs dans le style de ce composant. Si le compilateur ne peut pas savoir sur quels éléments un sélecteur de style s'applique, deux mauvaises options s'offrent à lui pour le garder :
- If it keeps the selector and adds the scoping class to it, the selector will likely not match the expected elements in the component, and they definitely won't if they were created by a child component or `{@html ...}`.
- If it keeps the selector without adding the scoping class to it, the given style will become a global style, affecting your entire page.
- S'il garde le sélecteur et lui ajoute la classe, le sélecteur ne s'appliquera probablement plus aux éléments du composant auxquels il est censé s'appliquer, et certainement pas si ces éléments ont été créés par un composant enfant ou par `{@html ...}`.
- S'il garde le sélecteur sans lui ajouter la classe, le style en question devient un style global, affectant toute votre page.
If you need to style something that Svelte can't identify at compile time, you will need to explicitly opt into global styles by using `:global(...)`. But also keep in mind that you can wrap `:global(...)` around only part of a selector. `.foo :global(.bar) { ... }` will style any `.bar` elements that appear within the component's `.foo` elements. As long as there's some parent element in the current component to start from, partially global selectors like this will almost always be able to get you what you want.
Si vous ave besoin de styliser quelque chose que Svelte ne peut pas identifier au moment de la compilation, vous aurez besoin d'utiliser explicitement les styles globaux en utilisant `:global (...)`. Mais gardez également en tête que vous pouvez entourer seulement une partie d'un sélecteur avec `:global (...)`. `.foo :global(.bar) { ... }` s'appliquera à tout élément `.bar` présent dans les éléments `.foo` du composant. Tant qu'il y a un élément parent au sein du composant courant, les sélecteur globaux partiels comme `.foo :global(.bar) { ... }` vous permettront presque systématiquement d'obtenir ce que vous recherchez.
## Is Svelte v2 still available?
## La version 2 de Svelte est-elle toujours disponible ?
New features aren't being added to it, and bugs will probably only be fixed if they are extremely nasty or present some sort of security vulnerability.
Nous n'y ajoutons pas de nouvelles fonctionnalités, et les bugs ne seront probablement corrigés que s'ils sont extrêmement dangereux ou présentent une sorte de vulnérabilité de sécurité.
The documentation is still available [here](https://v2.svelte.dev/guide).
La documentation est toujours disponible [ici](https://v2.svelte.dev/guide).
## How do I do hot module reloading?
## Comment puis-je recharger un module automatiquement ?
We recommend using [SvelteKit](https://kit.svelte.dev/), which supports HMR out of the box and is built on top of [Vite](https://vitejs.dev/) and [svelte-hmr](https://github.com/sveltejs/svelte-hmr). There are also community plugins for [rollup](https://github.com/rixo/rollup-plugin-svelte-hot) and [webpack](https://github.com/sveltejs/svelte-loader).
Nous vous recommandons d'utiliser [SvelteKit](PUBLIC_KIT_SITE_URL/), qui prend en charge le <spanclass="vo">[HMR](/docs/web#hot-module-reloading)</span> prêt à l'emploi et est construit avec [Vite](https://vitejs.dev/) et [svelte-hmr](https://github.com/sveltejs/svelte-hmr). Il existe également des <spanclass="vo">[plugins](/docs/development#plugin)</span> communautaires pour [rollup](https://github.com/rixo/rollup-plugin-svelte-hot) et [webpack](https://github.com/sveltejs/svelte-loader).
Accessibility (shortened to a11y) isn't always easy to get right, but Svelte will help by warning you at compile time if you write inaccessible markup. However, keep in mind that many accessibility issues can only be identified at runtime using other automated tools and by manually testing your application.
L'accessibilité (souvent raccourcie en "a11y") est un sujet complexe, qu'il est courant de mal implémenter. Pour vous aider, Svelte vous avertit au moment de la compilation si vous écrivez du markup non accessible. Toutefois, gardez à l'esprit que de nombreux problèmes d'accessibilité ne peuvent être identifiés qu'au moment de l'exécution, à l'aide d'autres outils automatisés et en testant manuellement votre application.
Some warnings may be incorrect in your concrete use case. You can disable such false positives by placing a `<!-- svelte-ignore a11y-<code> -->` comment above the line that causes the warning. Example:
Certains avertissements seront incorrects dans votre cas. Vous pouvez désactivez ces faux positifs en ajoutant le commentaire `<!-- svelte-ignore a11y-<code> -->` juste au dessus de la ligne causant l'avertissement. Exemple :
```svelte
<!-- svelte-ignore a11y-autofocus -->
<inputautofocus/>
```
Here is a list of accessibility checks Svelte will do for you.
Voici la liste des vérifications d'accessibilité que Svelte fera pour vous.
## `a11y-accesskey`
Enforce no `accesskey` on element. Access keys are HTML attributes that allow web developers to assign keyboard shortcuts to elements. Inconsistencies between keyboard shortcuts and keyboard commands used by screen reader and keyboard-only users create accessibility complications. To avoid complications, access keys should not be used.
Assure de ne pas utiliser l'attribut `accesskey` sur des éléments. L'attribut HTML `accesskey` permet aux développeurs web d'attribuer des raccourcis clavier aux éléments. Les incohérences entre les raccourcis clavier et les commandes clavier utilisées par le lecteur d'écran et les utilisateurs du clavier créent des complications d'accessibilité. Pour éviter les complications, les touches d'accès ne doivent pas être utilisées.
<!-- prettier-ignore -->
```svelte
@ -25,7 +25,7 @@ Enforce no `accesskey` on element. Access keys are HTML attributes that allow we
## `a11y-aria-activedescendant-has-tabindex`
An element with `aria-activedescendant` must be tabbable, so it must either have an inherent `tabindex` or declare `tabindex` as an attribute.
Un élément avec `aria-activedescendant` doit pouvoir être navigable en utilisant la touche "Tab", il doit donc avoir un `tabindex` intrinsèque, ou déclarer `tabindex` comme attribut.
```svelte
<!-- A11y: Elements with attribute aria-activedescendant should have tabindex value -->
@ -34,7 +34,7 @@ An element with `aria-activedescendant` must be tabbable, so it must either have
## `a11y-aria-attributes`
Certain reserved DOM elements do not support ARIA roles, states and properties. This is often because they are not visible, for example `meta`, `html`, `script`, `style`. This rule enforces that these DOM elements do not contain the `aria-*` props.
Certains éléments <spanclass="vo">[DOM](/docs/web#dom)</span> spéciaux ne prennent pas en charge les rôles, états et propriétés <spanclass="vo">[ARIA](/docs/web#aria)</span>. C'est souvent parce qu'ils ne sont pas visibles, comme `meta`, `html`, `script`, `style`. Cette règle garantit que ces éléments DOM ne contiennent pas des `aria-*` accessoires.
```svelte
<!-- A11y: <meta> should not have aria-* attributes -->
@ -43,7 +43,7 @@ Certain reserved DOM elements do not support ARIA roles, states and properties.
## `a11y-autofocus`
Enforce that `autofocus` is not used on elements. Autofocusing elements can cause usability issues for sighted and non-sighted users alike.
Interdit l’usage d'`autofocus` sur les éléments. Le focus automatique d'éléments peut entraîner des problèmes d'usage pour les utilisateurs, qu'ils soient malvoyants, non voyants ou avec une vue parfaite.
```svelte
<!-- A11y: Avoid using autofocus -->
@ -52,24 +52,25 @@ Enforce that `autofocus` is not used on elements. Autofocusing elements can caus
## `a11y-click-events-have-key-events`
Enforce that visible, non-interactive elements with an `on:click` event are accompanied by a keyboard event handler.
Assure que les éléments visibles et non interactifs possédent un évènement `on:click` possèdent également un gestionnaire d'évènement de clavier.
Users should first consider whether an interactive element might be more appropriate such as a `<button type="button">` element for actions or `<a>` element for navigations. These elements are more semantically meaningful and will have built-in key handling. E.g. `Space` and `Enter` will trigger a `<button>` and `Enter` will trigger an `<a>` element.
Il est important de se poser la question si un élément interactif serait plus approprié sous la forme d'un élément `<button type="button">` pour des actions ou d'un élément `<a>` pour des navigations. Ces éléments ont du sens sémantiquement et ont une gestion native des touches du clavier. Par exemple, `Space` et `Enter` déclenchent l'action d'un `<button>` et `Enter` déclenche la navigation d'un élément `<a>`.
If a non-interactive element is required then `on:click` should be accompanied by an `on:keyup` or `on:keydown` handler that enables the user to perform equivalent actions via the keyboard. In order for the user to be able to trigger a key press, the element will also need to be focusable by adding a [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex). While an `on:keypress` handler will also silence this warning, it should be noted that the `keypress` event is deprecated.
Si un élément non interactif est requis, alors `on:click` doit être accompagné d'un gestionnaire `on:keyup` ou `on:keydown` permettant à l'utilisateur ou l'utilisatrice de faire des actions équivalentes au clavier. Afin qu'ils ou elles puissent déclencher une touche de clavier, l'élément doit aussi pouvoir récupérer le focus en ajoutant un [`tabindex`](https://developer.mozilla.org/fr/docs/Web/HTML/Global_attributes/tabindex). Même si l'ajout d'un gestionnaire `on:keypress` va désactiver cet avertissement, il est important de noter que l'évènement `keypress` est déprécié.
```svelte
<!-- A11y: visible, non-interactive elements with an on:click event must be accompanied by a keyboard event handler. -->
<divon:click={()=> {}} />
```
Coding for the keyboard is important for users with physical disabilities who cannot use a mouse, AT compatibility, and screenreader users.
Développer avec l'usage au clavier en tête est important pour les personnes ne pouvant pas physiquement utiliser une souris, pour les personnes utilisant la compatibilité AT, ainsi que pour les personnes utilisant des lecteurs d'écran.
## `a11y-distracting-elements`
Enforces that no distracting elements are used. Elements that can be visually distracting can cause accessibility issues with visually impaired users. Such elements are most likely deprecated, and should be avoided.
Assure qu'aucun élément distrayant ne soit utilisé. Les éléments distrayants visuellement peuvent causer des problèmes d'accessibilité avec les utilisateurs malvoyants. Ces éléments sont généralement dépréciés et doivent être évités.
The following elements are visually distracting: `<marquee>` and`<blink>`.
Les éléments suivants sont visuellement distrayants: `<marquee>` et`<blink>`.
```svelte
<!-- A11y: Avoid <marquee> elements -->
@ -78,7 +79,7 @@ The following elements are visually distracting: `<marquee>` and `<blink>`.
## `a11y-hidden`
Certain DOM elements are useful for screen reader navigation and should not be hidden.
Certains éléments <spanclass="vo">[DOM](/docs/web#dom)</span> sont utiles pour la navigation avec lecteur d'écran et ne doivent pas être cachés.
<!-- prettier-ignore -->
```svelte
@ -88,28 +89,28 @@ Certain DOM elements are useful for screen reader navigation and should not be h
## `a11y-img-redundant-alt`
Enforce img alt attribute does not contain the word image, picture, or photo. Screen readers already announce `img` elements as an image. There is no need to use words such as _image_, _photo_, and/or _picture_.
Assure que l'attribut `alt` des balises `img` ne contienne pas le mot "image" ou "photo". Les lecteurs d'écran décrivent déjà les éléments `img` comme étant des images. Il n'est pas nécessaire d'utiliser des mots tels que *photo* et / ou *image*.
```svelte
<imgsrc="foo"alt="Foo eating a sandwich." />
<imgsrc="foo"alt="Foo mange un sandwich." />
<!--aria-hidden, won't be announced by screen reader -->
<imgsrc="bar"aria-hidden="true"alt="Picture of me taking a photo of an image" />
<!--A11y: aria-hidden, won't be announced by screen reader -->
<imgsrc="bar"aria-hidden="true"alt="Photo de moi prenant une photo d'une image" />
<!-- A11y: Screen readers already announce <img> elements as an image. -->
<imgsrc="foo"alt="Photo of foo being weird." />
<imgsrc="foo"alt="Image de foo bizarre." />
<!-- A11y: Screen readers already announce <img> elements as an image. -->
<imgsrc="bar"alt="Image of me at a bar!" />
<imgsrc="bar"alt="Image de moi dans un bar !" />
<!-- A11y: Screen readers already announce <img> elements as an image. -->
<imgsrc="foo"alt="Picture of baz fixing a bug." />
<imgsrc="foo"alt="Image de baz corrigeant un bug." />
```
## `a11y-incorrect-aria-attribute-type`
Enforce that only the correct type of value is used for aria attributes. For example, `aria-hidden`
should only receive a boolean.
Assure que le bon type de valeur soit utilisé pour les attributs `aria`. Par exemple, `aria-hidden` ne devrait recevoir qu'un booléen.
```svelte
<!-- A11y: The value of 'aria-hidden' must be exactly one of true or false -->
@ -118,16 +119,16 @@ should only receive a boolean.
## `a11y-invalid-attribute`
Enforce that attributes important for accessibility have a valid value. For example, `href` should not be empty, `'#'`, or`javascript:`.
Assure que les attributs importants pour l'accessibilité aient une valeur valide. Par exemple, `href` ne devrait pas être vide, `'#'` ou`javascript:`.
```svelte
<!-- A11y: '' is not a valid href attribute -->
<ahref="">invalid</a>
<ahref="">invalide</a>
```
## `a11y-interactive-supports-focus`
Enforce that elements with an interactive role and interactive handlers (mouse or key press) must be focusable or tabbable.
Assure que les éléments avec un rôle interactif et des gestionnaires d'évènements interactifs (de souris ou de clavier) soient focalisables ou accessibles avec la touche Tab.
```svelte
<!-- A11y: Elements with the 'button' interactive role must have a tabindex value. -->
@ -136,12 +137,12 @@ Enforce that elements with an interactive role and interactive handlers (mouse o
## `a11y-label-has-associated-control`
Enforce that a label tag has a text label and an associated control.
Assure qu'un élément `label` ait une étiquette de texte et un contrôle associé.
There are two supported ways to associate a label with a control:
Il existe deux méthodes prises en charge pour associer une étiquette à un contrôle :
- Wrapping a control in a label tag.
- Adding `for` to a label and assigning it the ID of an input on the page.
- Envelopper un contrôle dans un élément `label`.
- Ajouter `for` à une étiquette et lui attribuer l'ID d'un champ d'entrée sur la page.
```svelte
<labelfor="id">B</label>
@ -154,9 +155,9 @@ There are two supported ways to associate a label with a control:
## `a11y-media-has-caption`
Providing captions for media is essential for deaf users to follow along. Captions should be a transcription or translation of the dialogue, sound effects, relevant musical cues, and other relevant audio information. Not only is this important for accessibility, but can also be useful for all users in the case that the media is unavailable (similar to `alt` text on an image when an image is unable to load).
Fournir des sous-titres pour les médias est essentiel afin que les utilisateurs sourds puissent suivre. Les sous-titres devraient être une transcription ou une traduction du dialogue, des effets sonores, des indications musicales pertinentes et d'autres informations audio pertinentes. Ce n'est pas seulement important pour l'accessibilité, mais peut également être utile pour tous les utilisateurs dans le cas où les médias ne sont pas disponibles (similaire au texte `alt` sur une image lorsqu'une image ne peut pas être chargée).
The captions should contain all important and relevant information to understand the corresponding media. This may mean that the captions are not a 1:1 mapping of the dialogue in the media content. However, captions are not necessary for video components with the `muted` attribute.
Les sous-titres doivent contenir toutes les informations importantes et pertinentes pour comprendre les médias correspondants. Cela peut signifier que les sous-titres ne sont pas une correspondance 1:1 du dialogue dans le contenu média. Cependant, les sous-titres ne sont pas nécessaires pour les composants vidéo avec l'attribut `muted`.
```svelte
<video><trackkind="captions"/></video>
@ -172,7 +173,7 @@ The captions should contain all important and relevant information to understand
## `a11y-misplaced-role`
Certain reserved DOM elements do not support ARIA roles, states and properties. This is often because they are not visible, for example `meta`, `html`, `script`, `style`. This rule enforces that these DOM elements do not contain the `role` props.
Certains éléments <spanclass="vo">[DOM](/docs/web#dom)</span> réservés ne prennent pas en charge les rôles, états et propriétés <spanclass="vo">[ARIA](/docs/web#aria)</span>. Cela est souvent dû à leur invisibilité, par exemple `meta`, `html`, `script`, `style`. Cette règle impose que ces éléments DOM ne contiennent pas l'attribut `role`.
```svelte
<!-- A11y: <meta> should not have role attribute -->
@ -181,7 +182,7 @@ Certain reserved DOM elements do not support ARIA roles, states and properties.
## `a11y-misplaced-scope`
The scope attribute should only be used on `<th>` elements.
L'attribut `scope` ne devrait être utilisé que sur les éléments `<th>`.
<!-- prettier-ignore -->
```svelte
@ -191,15 +192,15 @@ The scope attribute should only be used on `<th>` elements.
## `a11y-missing-attribute`
Enforce that attributes required for accessibility are present on an element. This includes the following checks:
Assure que les attributs requis pour l'accessibilité soient présents sur un élément. Cela inclut les vérifications suivantes:
- `<a>`should have an href (unless it's a [fragment-defining tag](https://github.com/sveltejs/svelte/issues/4697))
- `<area>`should have alt, aria-label, or aria-labelledby
- `<html>`should have lang
- `<iframe>`should have title
- `<img>`should have alt
- `<object>`should have title, aria-label, or aria-labelledby
- `<input type="image">`should have alt, aria-label, or aria-labelledby
- `<a>`devrait avoir un `href` (sauf s'il s'agit d'une [balise définissant un fragment](https://github.com/sveltejs/svelte/issues/4697))
- `<area>`devrait avoir `alt`, `aria-label` ou `aria-labelledby`
- `<html>`devrait avoir `lang`
- `<iframe>`devrait avoir `title`
- `<img>`devrait avoir `alt`
- `<object>`devrait avoir `title`, `aria-label` ou `aria-labelledby`
- `<input type="image">`devrait avoir `alt`, `aria-label` ou `aria-labelledby`
```svelte
<!-- A11y: <input type=\"image\"> element should have an alt, aria-label or aria-labelledby attribute -->
@ -209,12 +210,12 @@ Enforce that attributes required for accessibility are present on an element. Th
<html/>
<!-- A11y: <a> element should have an href attribute -->
<a>text</a>
<a>texte</a>
```
## `a11y-missing-content`
Enforce that heading elements (`h1`, `h2`, etc.) and anchors have content and that the content is accessible to screen readers
Assure que les éléments d'en-tête (`h1`, `h2`, etc.) et les ancres aient un contenu, et que ce contenu soit accessible aux lecteurs d'écran.
```svelte
<!-- A11y: <a> element should have child content -->
@ -226,7 +227,7 @@ Enforce that heading elements (`h1`, `h2`, etc.) and anchors have content and th
## `a11y-mouse-events-have-key-events`
Enforce that `on:mouseover` and `on:mouseout` are accompanied by `on:focus` and `on:blur`, respectively. This helps to ensure that any functionality triggered by these mouse events is also accessible to keyboard users.
Assure que `on:mouseover` and `on:mouseout` soient accompagnés de `on:focus` et `on:blur`, respectivement. Cela aide à garantir que toutes les fonctionnalités déclenchées par ces événements de souris soient également accessibles aux utilisateurs du clavier.
```svelte
<!-- A11y: on:mouseover must be accompanied by on:focus -->
@ -238,7 +239,7 @@ Enforce that `on:mouseover` and `on:mouseout` are accompanied by `on:focus` and
## `a11y-no-redundant-roles`
Some HTML elements have default ARIA roles. Giving these elements an ARIA role that is already set by the browser [has no effect](https://www.w3.org/TR/using-aria/#aria-does-nothing) and is redundant.
Certains éléments HTML ont des rôles <spanclass="vo">[ARIA](/docs/web#aria)</span> par défaut. Donner à ces éléments un rôle ARIA déjà défini par le navigateur [n'a aucun effet](https://www.w3.org/TR/using-aria/#aria-does-nothing) et est redondant.
```svelte
<!-- A11y: Redundant role 'button' -->
@ -250,37 +251,25 @@ Some HTML elements have default ARIA roles. Giving these elements an ARIA role t
[WAI-ARIA](https://www.w3.org/TR/wai-aria-1.1/#usage_intro) roles should not be used to convert an interactive element to a non-interactive element. Non-interactive ARIA roles include`article`, `banner`, `complementary`, `img`, `listitem`, `main`, `region`and`tooltip`.
Les rôles [WAI-ARIA](https://www.w3.org/TR/wai-aria-1.1/#usage_intro) ne devraient pas être utilisés pour convertir un élément interactif en un élément non interactif. Les rôles <spanclass="vo">[ARIA](/docs/web#aria)</span> non interactifs incluent`article`, `banner`, `complementary`, `img`, `listitem`, `main`, `region`et`tooltip`.
```svelte
<!-- A11y: <textarea> cannot have role 'listitem' -->
<textarearole="listitem"/>
```
### `a11y-no-noninteractive-element-interactions`
A non-interactive element does not support event handlers (mouse and key handlers). Non-interactive elements include `<main>`, `<area>`, `<h1>` (,`<h2>`, etc), `<p>`, `<img>`, `<li>`, `<ul>` and `<ol>`. Non-interactive [WAI-ARIA roles](https://www.w3.org/TR/wai-aria-1.1/#usage_intro) include `article`, `banner`, `complementary`, `img`, `listitem`, `main`, `region` and `tooltip`.
```sv
<!-- `A11y: Non-interactive element <li> should not be assigned mouse or keyboard event listeners.` -->
<lion:click={()=> {}} />
<!-- `A11y: Non-interactive element <div> should not be assigned mouse or keyboard event listeners.` -->
[WAI-ARIA](https://www.w3.org/TR/wai-aria-1.1/#usage_intro) roles should not be used to convert a non-interactive element to an interactive element. Interactive ARIA roles include`button`, `link`, `checkbox`, `menuitem`, `menuitemcheckbox`, `menuitemradio`, `option`, `radio`, `searchbox`, `switch`and`textbox`.
Un élément non interactif ne supporte pas les gestionnaires d'événements (souris et clavier). Les éléments non interactifs incluent : `<main>`, `<area>`, `<h1>` (,`<h2>`, etc), `<p>`, `<img>`, `<li>`, `<ul>` and `<ol>`. Les [rôles WAI-ARIA](https://www.w3.org/TR/wai-aria-1.1/#usage_intro) interactifs incluent `button`, `link`, `checkbox`, `menuitem`, `menuitemcheckbox`, `menuitemradio`, `option`, `radio`, `searchbox`, `switch` et `textbox`.
```svelte
<!-- A11y: Non-interactive element <h3> cannot have interactive role 'searchbox' -->
<h3role="searchbox">Button</h3>
<h3role="searchbox">Bouton</h3>
```
## `a11y-no-noninteractive-tabindex`
Tab key navigation should be limited to elements on the page that can be interacted with.
La navigation à l'aide de la touche Tab doit être limitée aux éléments de la page avec lesquels il est possible d'interagir.
<!-- prettier-ignore -->
```svelte
@ -288,9 +277,9 @@ Tab key navigation should be limited to elements on the page that can be interac
<divtabindex="0"/>
```
## a11y-no-static-element-interactions
## `a11y-no-static-element-interactions`
Elements like `<div>` with interactive handlers like `click` must have an ARIA role.
Les éléments comme un `<div>` avec des gestionnaires d'événements comme `click` doivent avoir un rôle <spanclass="vo">[ARIA](/docs/web#aria)</span>.
<!-- prettier-ignore -->
```svelte
@ -300,7 +289,7 @@ Elements like `<div>` with interactive handlers like `click` must have an ARIA r
## `a11y-positive-tabindex`
Avoid positive `tabindex` property values. This will move elements out of the expected tab order, creating a confusing experience for keyboard users.
Évitez les valeurs positives pour la propriété `tabindex`. Cela positionnera des éléments en dehors de l'ordre de tabulation attendu, ce qui créera une expérience confuse pour les utilisateurs du clavier.
<!-- prettier-ignore -->
```svelte
@ -310,7 +299,7 @@ Avoid positive `tabindex` property values. This will move elements out of the ex
## `a11y-role-has-required-aria-props`
Elements with ARIA roles must have all required attributes for that role.
Les éléments avec des rôles <spanclass="vo">[ARIA](/docs/web#aria)</span> doivent avoir tous les attributs requis pour ce rôle.
```svelte
<!-- A11y: A11y: Elements with the ARIA role "checkbox" must have the following attributes defined: "aria-checked" -->
@ -319,7 +308,7 @@ Elements with ARIA roles must have all required attributes for that role.
## `a11y-role-supports-aria-props`
Elements with explicit or implicit roles defined contain only `aria-*` properties supported by that role.
Les éléments avec un rôle explicite ou implicite doivent contenir uniquement des propriétés `aria-*` prévues pour ce rôles.
```svelte
<!-- A11y: The attribute 'aria-multiline' is not supported by the role 'link'. -->
@ -331,18 +320,18 @@ Elements with explicit or implicit roles defined contain only `aria-*` propertie
## `a11y-structure`
Enforce that certain DOM elements have the correct structure.
Assure que certains éléments <spanclass="vo">[DOM](/docs/web#dom)</span> aient la bonne structure.
```svelte
<!-- A11y: <figcaption> must be an immediate child of <figure> -->
<div>
<figcaption>Image caption</figcaption>
<figcaption>Légende de l'image</figcaption>
</div>
```
## `a11y-unknown-aria-attribute`
Enforce that only known ARIA attributes are used. This is based on the [WAI-ARIA States and Properties spec](https://www.w3.org/WAI/PF/aria-1.1/states_and_properties).
Assure que seuls les attributs <spanclass="vo">[ARIA](/docs/web#aria)</span> connus soient utilisés. Cela est basé sur la spécification [WAI-ARIA States and Properties](https://www.w3.org/WAI/PF/aria-1.1/states_and_properties).
```svelte
<!-- A11y: Unknown aria attribute 'aria-labeledby' (did you mean 'labelledby'?) -->
@ -351,7 +340,7 @@ Enforce that only known ARIA attributes are used. This is based on the [WAI-ARIA
## `a11y-unknown-role`
Elements with ARIA roles must use a valid, non-abstract ARIA role. A reference to role definitions can be found at [WAI-ARIA](https://www.w3.org/TR/wai-aria/#role_definitions) site.
Les éléments avec des rôles <spanclass="vo">[ARIA](/docs/web#aria)</span> doivent utiliser un rôle ARIA valide et non abstrait. Une référence aux définitions de rôle peut être trouvée sur le site [WAI-ARIA](https://www.w3.org/TR/wai-aria/#role_definitions).
You can use TypeScript within Svelte components. IDE extensions like the [Svelte VSCode extension](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode) will help you catch errors right in your editor, and [`svelte-check`](https://www.npmjs.com/package/svelte-check) does the same on the command line, which you can integrate into your CI.
Vous pouvez utiliser TypeScript dans vos composants. Des extensions d'<spanclass="vo">[IDE](/docs/development#ide)</span> comme l'[extension Svelte VSCode](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode) vous aideront à voir et corriger les erreurs directement dans votre éditeur, et [`svelte-check`](https://www.npmjs.com/package/svelte-check) fera la même chose en ligne de commande, que vous pouvez ajouter à votre chaîne d'intégration continue.
## Setup
## Mise en place
To use TypeScript within Svelte components, you need to add a preprocessor that will turn TypeScript into JavaScript.
Pour utiliser TypeScript dans vos composants Svelte, vous devez ajouter un préprocesseur qui compilera le code TypeScript en JavaScript.
### Using SvelteKit or Vite
### Utiliser SvelteKit ou Vite
The easiest way to get started is scaffolding a new SvelteKit project by typing `npm create svelte@latest`, following the prompts and choosing the TypeScript option.
La façon la plus simple de démarrer avec Typescript est de créer un nouveau projet en tapant : `npm create svelte@latest`, en suivant les propositions et en choisissant l'option TypeScript.
```ts
/// file: svelte.config.js
@ -24,7 +24,7 @@ const config = {
export default config;
```
If you don't need or want all the features SvelteKit has to offer, you can scaffold a Svelte-flavoured Vite project instead by typing `npm create vite@latest` and selecting the `svelte-ts` option.
Si vous n'avez pas besoin ou ne souhaitez pas de toutes les fonctionnalités de SvelteKit, vous pouvez démarrer un projet Svelte avec Vite en tapant : `npm create vite@latest` et en choisissant l'option `svelte-ts`.
```ts
/// file: svelte.config.js
@ -37,17 +37,17 @@ const config = {
export default config;
```
In both cases, a `svelte.config.js` with `vitePreprocess` will be added. Vite/SvelteKit will read from this config file.
Dans les deux cas, un fichier `svelte.config.js` avec `vitePreprocess` sera ajouté. Vite et SvelteKit liront ce fichier de configuration.
### Other build tools
### Autres outils de compilation
If you're using tools like Rollup or Webpack instead, install their respective Svelte plugins. For Rollup that's [rollup-plugin-svelte](https://github.com/sveltejs/rollup-plugin-svelte) and for Webpack that's [svelte-loader](https://github.com/sveltejs/svelte-loader). For both, you need to install `typescript` and `svelte-preprocess` and add the preprocessor to the plugin config (see the respective READMEs for more info). If you're starting a new project, you can also use the [rollup](https://github.com/sveltejs/template) or [webpack](https://github.com/sveltejs/template-webpack) template to scaffold the setup from a script.
Si vous utilisez d'autres outils comme Rollup ou Webpack, installez leurs <spanclass="vo">[plugins](/docs/development#plugin)</span> Svelte respectifs. Pour Rollup, il s'agit de [rollup-plugin-svelte](https://github.com/sveltejs/rollup-plugin-svelte) et pour Webpack, c'est [svelte-loader](https://github.com/sveltejs/svelte-loader). Dans les deux cas, vous devez installer `typescript` et `svelte-preprocess` et ajouter le préprocesseur à la configuration du plugin (voir les documentations respectives). Si vous démarrez un nouveau projet, vous pouvez utiliser le [template rollup](https://github.com/sveltejs/template) ou le [template webpack](https://github.com/sveltejs/template-webpack) pour configurer votre projet.
> If you're starting a new project, we recommend using SvelteKit or Vite instead
> Si vous démarrez un nouveau projet, nous vous recommandons plutôt d'utiliser SvelteKit ou Vite.
## `<script lang="ts">`
To use TypeScript inside your Svelte components, add `lang="ts"` to your `script` tags:
Pour utiliser TypeScript dans vos composants Svelte, ajoutez `lang="ts"` au tag `script`:
```svelte
<scriptlang="ts">
@ -61,7 +61,7 @@ To use TypeScript inside your Svelte components, add `lang="ts"` to your `script
### Props
Props can be typed directly on the `export let` statement:
Les <spanclass="vo">[props](/docs/sveltejs#props)</span> peuvent directement être typées sur l'instruction `export let`:
```svelte
<scriptlang="ts">
@ -71,7 +71,7 @@ Props can be typed directly on the `export let` statement:
### Slots
Slot and slot prop types are inferred from the types of the slot props passed to them:
Les <spanclass="vo">[slots](/docs/sveltejs#slot)</span> et les types de leurs <spanclass="vo">[props](/docs/sveltejs#props)</span> sont déduits des types des props qui leurs sont passées :
```svelte
<scriptlang="ts">
@ -80,67 +80,67 @@ Slot and slot prop types are inferred from the types of the slot props passed to
<slot{name}/>
<!--Later-->
<!--Ailleurs-->
<Complet:name>
<!-- ^ Inferred as string -->
<!-- ^ Déduit comme string -->
{name}
</Comp>
```
### Events
Events can be typed with `createEventDispatcher`:
Les événements peuvent être typés avec `createEventDispatcher`:
```svelte
<scriptlang="ts">
import { createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher<{
event: null; // does not accept a payload
click: string; // has a required string payload
type: string | null; // has an optional string payload
event: null; // n'accepte pas d'argument
click: string; // contient obligatoirement une string
type: string | null; // peut contenir une string ou être non défini
Svelte provides a best effort of all the HTML DOM types that exist. Sometimes you may want to use experimental attributes or custom events coming from an action. In these cases, TypeScript will throw a type error, saying that it does not know these types. If it's a non-experimental standard attribute/event, this may very well be a missing typing from our [HTML typings](https://github.com/sveltejs/svelte/blob/master/packages/svelte/elements.d.ts). In that case, you are welcome to open an issue and/or a PR fixing it.
Svelte fournit des types aussi proche que possible pour chaque élément HTML du <spanclass="vo">[DOM](/docs/web#dom)</span> qui existe. Parfois, vous voudrez utiliser des attributs expérimentaux ou des événements personnalisés. Dans ces cas, TypeScript lèvera une erreur de type, en indiquant qu'il ne connaît pas ces types. S'il s'agit d'un attribut ou événement standard et non expérimental, il se peut tout à fait que ce soit un type manquant dans [le typage HTML de Svelte](https://github.com/sveltejs/svelte/blob/master/packages/svelte/elements.d.ts). Dans ce cas, vous êtes invité•e à ouvrir une <spanclass="vo">[issue](/docs/development#issue)</span> ou une <spanclass="vo">[PR](/docs/development#pull-request)</span> pour le corriger.
In case this is a custom or experimental attribute/event, you can enhance the typings like this:
S'il s'agit d'un attribut ou d'un événement expérimental ou personnalisé, vous pouvez étendre le typage comme suit :
// If you want to use myCustomAttribute={..} (note: all lowercase)
mycustomattribute?: any; // You can replace any with something more specific if you like
// Si vous voulez utiliser myCustomAttribute={..} (note: tout en minuscule)
mycustomattribute?: any; // Vous pouvez remplacer any par quelque chose de plus précis si vous le souhaitez
}
}
```
Then make sure that `d.ts` file is referenced in your `tsconfig.json`. If it reads something like `"include": ["src/**/*"]` and your `d.ts` file is inside `src`, it should work. You may need to reload for the changes to take effect.
Ensuite, assurez vous que les fichiers `d.ts` soient référencés dans `tsconfig.json`. Si vous lisez quelque chose comme : `"include": ["src/**/*"]` et vos fichiers `d.ts` sont dans votre dossier `src`, ça devrait marcher. Vous devrez peut-être relancer votre serveur pour que le changement prenne effet.
Since Svelte version 4.2 / `svelte-check` version 3.5 / VS Code extension version 107.10.0 you can also declare the typings by augmenting the `svelte/elements` module like this:
Depuis Svelte version 4.2 / `svelte-check` version 3.5 / l'extension VSCode version 107.10.0, vous pouvez aussi déclarer les types en étendant le module `svelte/elements` comme ceci :
// allows for more granular control over what element to add the typings to
// permet un contrôle plus fin sur l'élément auquel vous ajoutez les types
export interface HTMLButtonAttributes {
veryexperimentalattribute?: string;
veryexperimentalattribute?: string;
}
}
export {}; // ensure this is not an ambient module, else types will be overridden instead of augmented
export {}; // assure que ceci n'est pas un module "ambiant", sinon les types seront écrasés au lieu d'être augmentés
```
## Experimental advanced typings
## Typings avancés expérimentaux
A few features are missing from taking full advantage of TypeScript in more advanced use cases like typing that a component implements a certain interface, explicitly typing slots, or using generics. These things are possible using experimental advanced type capabilities. See [this RFC](https://github.com/dummdidumm/rfcs/blob/ts-typedefs-within-svelte-components/text/ts-typing-props-slots-events.md) for more information on how to make use of them.
Quelques fonctionnalités sont manquantes pour bénéficier de tous les avantages de TypeScript dans des cas plus avancés, comme pour typer qu'un composant étend une interface, pour typer les <spanclass="vo">[slots](/docs/sveltejs#slot)</span> ou pour utiliser des génériques. Tout ceci est rendu possible en utilisant des fonctionnalités expérimentales avancées. Voir [la RFC](https://github.com/dummdidumm/rfcs/blob/ts-typedefs-within-svelte-components/text/ts-typing-props-slots-events.md) pour savoir comment définir de tels typages.
> The API is experimental and may change at any point
> Cette <spanclass="vo">[API](/docs/development#api)</span> est expérimentale et peut changer à tout moment.
## Limitations
### No TS in markup
### Pas de TypeScript dans le code HTML
You cannot use TypeScript in your template's markup. For example, the following does not work:
Vous ne pouvez pas utiliser explicitement TypeScript dans les templates HTML. Par exemple, l'exemple suivant n'est pas possible :
```svelte
<scriptlang="ts">
let count = 10;
</script>
<h1>Count as string: {count as string}!</h1><!-- ❌ Does not work-->
<h1>Count as string: {count as string}!</h1><!-- ❌ Ne fonctionne pas-->
{#if count > 4}
{@const countString: string = count} <!-- ❌ Does not work-->
{@const countString: string = count} <!-- ❌ Ne fonctionne pas-->
{countString}
{/if}
```
### Reactive Declarations
### Déclarations réactives
You cannot type your reactive declarations with TypeScript in the way you type a variable. For example, the following does not work:
Vous ne pouvez pas typer les déclarations réactives avec TypeScript de la manière dont vous typeriez une variable. Par exemple, le code suivant ne fonctionne pas :
```svelte
<scriptlang="ts">
let count = 0;
$: doubled: number = count * 2; // ❌ Does not work
$: doubled: number = count * 2; // ❌ Ne fonctionne pas
</script>
```
You cannot add a `: TYPE` because it's invalid syntax in this position. Instead, you can move the definition to a `let` statement just above:
Vous ne pouvez pas utiliser `: TYPE` car cela résulte en une syntaxe invalide. À la place, vous pouvez déplacer le typage sur une instruction `let` juste au dessus :
This migration guide provides an overview of how to migrate from Svelte version 3 to 4. See the linked PRs for more details about each change. Use the migration script to migrate some of these automatically: `npx svelte-migrate@latest svelte-4`
Ce guide de migration fournit un aperçu de la manière dont vous devez migrer une application en Svelte 3 vers Svelte 4. Allez voir les <spanclass="vo">[PRs](/docs/development#pull-request)</span> associées pour plus de détails au sujet de chaque changement. Utilisez le script de migration pour migrer certains de ces changements automatiquement : `npx svelte-migrate@latest svelte-4`.
If you're a library author, consider whether to only support Svelte 4 or if it's possible to support Svelte 3 too. Since most of the breaking changes don't affect many people, this may be easily possible. Also remember to update the version range in your`peerDependencies`.
Si vous êtes l'auteur d'une librairie, considérez bien le choix de ne supporter que Svelte 4 ou, si cela est possible, de continuer à supporter Svelte 3 également. Comme la plupart des changements non réversibles n'affectent que peu de personnes, cela est facilement faisable la plupart du temps. Enfin, n'oubliez pas de mettre à jour la plage de versions des`peerDependencies`.
## Minimum version requirements
## Exigences minimales pour Svelte 4
- Upgrade to Node 16 or higher. Earlier versions are no longer supported. ([#8566](https://github.com/sveltejs/svelte/issues/8566))
- If you are using SvelteKit, upgrade to 1.20.4 or newer ([sveltejs/kit#10172](https://github.com/sveltejs/kit/pull/10172))
- If you are using Vite without SvelteKit, upgrade to `vite-plugin-svelte` 2.4.1 or newer ([#8516](https://github.com/sveltejs/svelte/issues/8516))
- If you are using webpack, upgrade to webpack 5 or higher and `svelte-loader` 3.1.8 or higher. Earlier versions are no longer supported. ([#8515](https://github.com/sveltejs/svelte/issues/8515), [198dbcf](https://github.com/sveltejs/svelte/commit/198dbcf))
- If you are using Rollup, upgrade to `rollup-plugin-svelte` 7.1.5 or higher ([198dbcf](https://github.com/sveltejs/svelte/commit/198dbcf))
- If you are using TypeScript, upgrade to TypeScript 5 or higher. Lower versions might still work, but no guarantees are made about that. ([#8488](https://github.com/sveltejs/svelte/issues/8488))
- Mettez à jour vers Node 16 ou plus. Les versions précédentes ne sont plus supportées. ([#8566](https://github.com/sveltejs/svelte/issues/8566))
- Si vous utilisez SvelteKit, mettez à jour sa version à 1.20.4 ou plus ([sveltejs/kit#10172](https://github.com/sveltejs/kit/pull/10172))
- Si vous utilisez Vite sans SvelteKit, mettez à jour la version de `vite-plugin-svelte` à 2.4.1 ou plus ([#8516](https://github.com/sveltejs/svelte/issues/8516))
- Si vous utilisez webpack, mettez à jour sa version à 5 ou plus et `svelte-loader` à 3.1.8 ou plus. Les versions précédentes ne sont plus supportées. ([#8515](https://github.com/sveltejs/svelte/issues/8515), [198dbcf](https://github.com/sveltejs/svelte/commit/198dbcf))
- Si vous utilisez Rollup, mettez à jour la version de `rollup-plugin-svelte` à 7.1.5 ou plus ([198dbcf](https://github.com/sveltejs/svelte/commit/198dbcf))
- Si vous utilisez TypeScript, mettez à jour sa version à 5.0.0 ou plus. Les versions précédentes pourront probablement toujours fonctionner, mais nous ne pouvons pas le garantir. ([#8488](https://github.com/sveltejs/svelte/issues/8488))
## Browser conditions for bundlers
## Conditions de navigateurs pour les bundlers
Bundlers must now specify the `browser` condition when building a frontend bundle for the browser. SvelteKit and Vite will handle this automatically for you. If you're using any others, you may observe lifecycle callbacks such as `onMount` not get called and you'll need to update the module resolution configuration.
- For Rollup this is done within the `@rollup/plugin-node-resolve` plugin by setting `browser: true` in its options. See the [`rollup-plugin-svelte`](https://github.com/sveltejs/rollup-plugin-svelte/#usage) documentation for more details
- For wepback this is done by adding `"browser"` to the `conditionNames` array. You may also have to update your `alias` config, if you have set it. See the [`svelte-loader`](https://github.com/sveltejs/svelte-loader#usage) documentation for more details
Les <spanclass="vo">[bundlers](/docs/web#bundler-packager)</span> doivent maintenant spécifier la condition `browser` lorsque vous créez un bundler frontend pour le navigateur. SvelteKit et Vite se chargeront de le préciser pour vous automatiquement. Si vous utilisez un autre bundler, il se peut que les <spanclass="vo">[callbacks](/docs/development#callback)</span> de cycle de vie comme `onMount` ne s'exécutent pas correctement, et vous devrez mettre à jour la configuration de la résolution de module.
- Pour Rollup, vous pouvez faire cela dans le <spanclass="vo">[plugin](/docs/development#plugin)</span>`@rollup/plugin-node-resolve` en choisissant `browser: true` dans ses options. Voir la documentation de [`rollup-plugin-svelte`](https://github.com/sveltejs/rollup-plugin-svelte/#usage) pour plus de détail
- Pour Webpack, vous pouvez faire cela en ajoutant `"browser"` au tableau `conditionNames`. Vous pourriez aussi avoir à mettre à jour votre configuration d'`alias`, si vous vous en servez. Voir la documentation de [`svelte-loader`](https://github.com/sveltejs/svelte-loader#usage) pour plus de détail
Svelte no longer supports the CommonJS (CJS) format for compiler output and has also removed the `svelte/register` hook and the CJS runtime version. If you need to stay on the CJS output format, consider using a bundler to convert Svelte's ESM output to CJS in a post-build step. ([#8613](https://github.com/sveltejs/svelte/issues/8613))
Svelte ne supporte plus le format CommonJS (CJS) comme format de sortie de la compilation. L'<spanclass="vo">[API](/docs/development#api)</span>`svelte/register` a été retirée ainsi que la version de runtime CJS. Si vous avez besoin de garder le format de sortie CJS, utilisez un <spanclass="vo">[bundler](/docs/web#bundler-packager)</span> pour convertir la sortie ESM en CJS avec une étape de post-build. ([#8613](https://github.com/sveltejs/svelte/issues/8613))
## Stricter types for Svelte functions
## Typage plus strict pour les fonctions Svelte
There are now stricter types for `createEventDispatcher`, `Action`, `ActionReturn`, and `onMount`:
Il y a maintenant des types plus stricts pour `createEventDispatcher`, `Action`, `ActionReturn` et `onMount`:
- `createEventDispatcher`now supports specifying that a payload is optional, required, or non-existent, and the call sites are checked accordingly ([#7224](https://github.com/sveltejs/svelte/issues/7224))
- `createEventDispatcher`supporte maintenant de pouvoir spécifier que son argument soit optionnel, obligatoire, ou simplement non défini ; les appels seront vérifiés en conséquence ([#7224](https://github.com/sveltejs/svelte/issues/7224)) :
dispatch('noArgument', 'surprise'); // erreur, il n'est pas possible de passer un argument (error, cannot pass an argument)
```
- `Action`and `ActionReturn` have a default parameter type of `undefined` now, which means you need to type the generic if you want to specify that this action receives a parameter. The migration script will migrate this automatically ([#7442](https://github.com/sveltejs/svelte/pull/7442))
- `Action`et `ActionReturn` ont maintenant un type d'argument par défaut à `undefined`, ce qui signifie que vous devez typer le <spanclass="vo">[generic](/docs/javascript#generic)</span> si vous voulez spécifier que cette action reçoit un paramètre. Le script de migration prendra cette règle en compte automatiquement ([#7442](https://github.com/sveltejs/svelte/pull/7442))
```diff
-const action: Action = (node, params) => { .. } // this is now an error if you use params in any way
+const action: Action<HTMLElement,string> = (node, params) => { .. } // params is of type string
-const action: Action = (node, params) => { .. } // ceci lèvera maintenant une erreur si vous utilisez un paramètre
+const action: Action<HTMLElement,string> = (node, params) => { .. } // params est maintenant de type string
```
- `onMount`now shows a type error if you return a function asynchronously from it, because this is likely a bug in your code where you expect the callback to be called on destroy, which it will only do for synchronously returned functions ([#8136](https://github.com/sveltejs/svelte/issues/8136))
- `onMount`affichera maintenant une erreur de typage si vous retournez une fonction asynchrone. En effet, cela est probablement un bug dans votre code pour lequel vous vous attendez à ce que le <spanclass="vo">[callback](/docs/development#callback)</span> soit appelé à la destruction du composant, ce qui n'est le cas que pour des fonctions synchrones ([#8136](https://github.com/sveltejs/svelte/issues/8136))
```diff
// Example where this change reveals an actual bug
// Exemple pour lequel ce changement révèle un vrai bug
onMount(
- // someCleanup() not called because function handed to onMount is async
- // someCleanup() n'est pas appelé car la fonction passée à onMount est asynchrone
- async () => {
- const something = await foo();
+ // someCleanup() is called because function handed to onMount is sync
+ // someCleanup() est appelé car la fonction passée à onMount est synchrone
+ () => {
+ foo().then(something => ..
// ..
@ -78,20 +79,20 @@ onMount(
);
```
## Custom Elements with Svelte
## Les Custom Elements avec Svelte
The creation of custom elements with Svelte has been overhauled and significantly improved. The `tag` option is deprecated in favor of the new `customElement` option:
La création des <spanclass="vo">[Custom Elements (ou Web Components)](/docs/web#web-component)</span> avec Svelte a complètement été repensée et significativement améliorée. L'option `tag` a été dépréciée en faveur de la nouvelle option `customElement`:
```diff
-<svelte:optionstag="my-component"/>
+<svelte:optionscustomElement="my-component"/>
```
This change was made to allow [more configurability](custom-elements-api#component-options) for advanced use cases. The migration script will adjust your code automatically. The update timing of properties has changed slightly as well. ([#8457](https://github.com/sveltejs/svelte/issues/8457))
Ce changement est intervenu pour permettre [une meilleure configuration](custom-elements-api#options-de-composant) pour des cas d'usages avancés. Le code de migration ajustera votre code automatiquement. La temporalité des changements des propriétés a également légèrement changée. ([#8457](https://github.com/sveltejs/svelte/issues/8457))
## SvelteComponentTyped is deprecated
## SvelteComponentTyped est déprécié
`SvelteComponentTyped`is deprecated, as `SvelteComponent` now has all its typing capabilities. Replace all instances of `SvelteComponentTyped` with`SvelteComponent`.
`SvelteComponentTyped`est déprécié, car `SvelteComponent` contient tout le typage nécessaire. Remplacez toutes les instances de `SvelteComponentTyped` par`SvelteComponent`.
```diff
- import { SvelteComponentTyped } from 'svelte';
@ -101,7 +102,7 @@ This change was made to allow [more configurability](custom-elements-api#compone
+ export class Foo extends SvelteComponent<{ aProp: string }> {}
```
If you have used `SvelteComponent` as the component instance type previously, you may see a somewhat opaque type error now, which is solved by changing `: typeof SvelteComponent` to `: typeof SvelteComponent<any>`.
Si par le passé vous utilisiez `SvelteComponent` comme type d'instance de composant, vous pourriez maintenant voir une erreur de type obscure, qui est résolue en changeant ` : typeof SvelteComponent` par ` : typeof SvelteComponent<any>`.
```diff
<script>
@ -117,30 +118,30 @@ If you have used `SvelteComponent` as the component instance type previously, yo
The migration script will do both automatically for you. ([#8512](https://github.com/sveltejs/svelte/issues/8512))
Le script de migration changera les deux cas automatiquement pour vous. ([#8512](https://github.com/sveltejs/svelte/issues/8512))
## Transitions are local by default
## Les transitions sont locales par défaut
Transitions are now local by default to prevent confusion around page navigations. "local" means that a transition will not play if it's within a nested control flow block (`each/if/await/key`) and not the direct parent block but a block above it is created/destroyed. In the following example, the `slide` intro animation will only play when `success` goes from `false` to `true`, but it will _not_ play when `show` goes from `false` to `true`:
Les transitions sont désormais locales par défaut afin d'éviter toute confusion lors de la navigation dans les pages. "Local" signifie qu'une transition ne sera pas jouée si elle se trouve dans un bloc de contrôle imbriqué (`each/if/await/key`) et non dans le bloc parent direct, mais qu'un bloc au-dessus soit créé ou détruit. Dans l'exemple suivant, l'animation d'introduction `slide` ne sera jouée que lorsque `success` passera de `false` à `true`, mais elle ne sera _pas_ jouée lorsque `show` passera de `false` à `true`:
```svelte
{#if show}
...
{#if success}
<pin:slide>Success</p>
<pin:slide>Succès</p>
{/each}
{/if}
```
To make transitions global, add the `|global` modifier - then they will play when _any_ control flow block above is created/destroyed. The migration script will do this automatically for you. ([#6686](https://github.com/sveltejs/svelte/issues/6686))
Pour rendre les transitions globales, ajoutez le modificateur `|global` - elles seront alors jouées lorsque _n'importe quel_ bloc de flux de contrôle ci-dessus est créé ou détruit. Le script de migration le fera automatiquement pour vous. ([#6686](https://github.com/sveltejs/svelte/issues/6686))
## Default slot bindings
## Les binding de slot par défaut
Default slot bindings are no longer exposed to named slots and vice versa:
Les liaisons de <spanclass="vo">[slots](/docs/sveltejs#slot)</span> par défaut ne sont plus exposées aux slots nommés et vice versa :
```svelte
<script>
@ -149,19 +150,19 @@ Default slot bindings are no longer exposed to named slots and vice versa:
<Nestedlet:count>
<p>
count in default slot - is available: {count}
count dans un slot par défaut - est accessible : {count}
</p>
<pslot="bar">
count in bar slot - is not available: {count}
count dans un slot nommé (bar) - n'est pas accessible: {count}
</p>
</Nested>
```
This makes slot bindings more consistent as the behavior is undefined when for example the default slot is from a list and the named slot is not. ([#6049](https://github.com/sveltejs/svelte/issues/6049))
Cela rend les liaisons de <spanclass="vo">[slots](/docs/sveltejs#slot)</span> plus cohérentes car le comportement est indéfini lorsque, par exemple, le slot par défaut provient d'une liste et que le slot nommé n'en fait pas partie. ([#6049](https://github.com/sveltejs/svelte/issues/6049))
## Preprocessors
## Préprocesseurs
The order in which preprocessors are applied has changed. Now, preprocessors are executed in order, and within one group, the order is markup, script, style.
L'ordre dans lequel les préprocesseurs sont appliqués a changé. Désormais, les préprocesseurs sont exécutés dans l'ordre et, au sein d'un même groupe, l'ordre est le suivant : balisage, script, style.
This could affect you for example if you are using `MDsveX` - in which case you should make sure it comes before any script or style preprocessor.
Ceci peut vous affecter si vous utilisez par exemple `MDsveX` - pour lequel vous devez vous assurer qu'il vient avant n'importe quel préprocesseur de script ou de style :
```diff
preprocess: [
@ -226,19 +227,19 @@ preprocess: [
]
```
Each preprocessor must also have a name. ([#8618](https://github.com/sveltejs/svelte/issues/8618))
Chaque préprocesseur doit également avoir un nom. ([#8618](https://github.com/sveltejs/svelte/issues/8618))
## New eslint package
## Nouvelle librairie eslint
`eslint-plugin-svelte3`is deprecated. It may still work with Svelte 4 but we make no guarantees about that. We recommend switching to our new package [eslint-plugin-svelte](https://github.com/sveltejs/eslint-plugin-svelte). See [this Github post](https://github.com/sveltejs/kit/issues/10242#issuecomment-1610798405) for an instruction how to migrate. Alternatively, you can create a new project using `npm create svelte@latest`, select the eslint (and possibly TypeScript) option and then copy over the related files into your existing project.
`eslint-plugin-svelte3`est déprécié. Il est possible qu'il fonctionne encore avec Svelte 4, mais nous ne le garantissons pas. Nous recommandons de passer à notre nouvelle librairie [eslint-plugin-svelte] (https://github.com/sveltejs/eslint-plugin-svelte). Voir [ce ticket Github](https://github.com/sveltejs/kit/issues/10242#issuecomment-1610798405) pour des instructions sur la façon de migrer. Alternativement, vous pouvez créer un nouveau projet en utilisant `npm create svelte@latest`, sélectionner l'option eslint (et éventuellement TypeScript) et ensuite copier les fichiers associés dans votre projet existant.
## Other breaking changes
## Autres changements majeurs
- the `inert` attribute is now applied to outroing elements to make them invisible to assistive technology and prevent interaction. ([#8628](https://github.com/sveltejs/svelte/pull/8628))
- the runtime now uses `classList.toggle(name, boolean)` which may not work in very old browsers. Consider using a [polyfill](https://github.com/eligrey/classList.js) if you need to support these browsers. ([#8629](https://github.com/sveltejs/svelte/issues/8629))
- the runtime now uses the `CustomEvent` constructor which may not work in very old browsers. Consider using a [polyfill](https://github.com/theftprevention/event-constructor-polyfill/tree/master) if you need to support these browsers. ([#8775](https://github.com/sveltejs/svelte/pull/8775))
- people implementing their own stores from scratch using the `StartStopNotifier` interface (which is passed to the create function of `writable` etc) from `svelte/store` now need to pass an update function in addition to the set function. This has no effect on people using stores or creating stores using the existing Svelte stores. ([#6750](https://github.com/sveltejs/svelte/issues/6750))
- `derived`will now throw an error on falsy values instead of stores passed to it. ([#7947](https://github.com/sveltejs/svelte/issues/7947))
- type definitions for `svelte/internal` were removed to further discourage usage of those internal methods which are not public API. Most of these will likely change for Svelte 5
- Removal of DOM nodes is now batched which slightly changes its order, which might affect the order of events fired if you're using a `MutationObserver` on these elements ([#8763](https://github.com/sveltejs/svelte/pull/8763))
- if you enhanced the global typings through the `svelte.JSX` namespace before, you need to migrate this to use the `svelteHTML` namespace. Similarly if you used the `svelte.JSX` namespace to use type definitions from it, you need to migrate those to use the types from `svelte/elements` instead. You can find more information about what to do [here](https://github.com/sveltejs/language-tools/blob/master/docs/preprocessors/typescript.md#im-getting-deprecation-warnings-for-sveltejsx--i-want-to-migrate-to-the-new-typings)
- l'attribut `inert` est maintenant appliqué aux éléments sortants pour les rendre invisibles aux technologies d'assistance et empêcher l'interaction. ([#8628](https://github.com/sveltejs/svelte/pull/8628))
- le <spanclass="vo">[runtime](/docs/development#runtime)</span> utilise maintenant `classList.toggle(name, boolean)` qui peut ne pas fonctionner dans les très vieux navigateurs. Envisagez d'utiliser un [polyfill](https://github.com/eligrey/classList.js) si vous avez besoin de supporter ces navigateurs. ([#8629](https://github.com/sveltejs/svelte/issues/8629))
- le <spanclass="vo">[runtime](/docs/development#runtime)</span> utilise maintenant le constructeur `CustomEvent` qui peut ne pas fonctionner dans les très vieux navigateurs. Envisagez d'utiliser un [polyfill] (https://github.com/theftprevention/event-constructor-polyfill/tree/master) si vous avez besoin de supporter ces navigateurs. ([#8775](https://github.com/sveltejs/svelte/pull/8775))
- Les personnes qui implémentent leurs propres <spanclass="vo">[stores](/docs/sveltejs#store)</span> en utilisant l'interface `StartStopNotifier` (qui est passée à la fonction create de `writable` etc) de `svelte/store` doivent maintenant passer une fonction de mise à jour en plus de la fonction set. Cela n'a aucun effet sur les personnes qui utilisent des stores ou qui créent des stores en utilisant les stores Svelte existants. ([#6750](https://github.com/sveltejs/svelte/issues/6750))
- `derived`lancera maintenant une erreur sur les valeurs <spanclass="vo">[falsy](/docs/javascript#falsy-truthy-falsy)</span> au lieu des <spanclass="vo">[stores](/docs/sveltejs#store)</span> qui lui sont passés. ([#7947](https://github.com/sveltejs/svelte/issues/7947))
- les définitions de type pour `svelte/internal` ont été supprimées pour décourager encore plus l'utilisation de ces méthodes internes qui ne sont pas des <spanclass="vo">[API](/docs/development#api)</span> publiques. La plupart de ces éléments seront probablement modifiés pour Svelte 5.
- La suppression des noeuds du <spanclass="vo">[DOM](/docs/web#dom)</span> se fait maintenant par lots, ce qui modifie légèrement l'ordre, ce qui peut affecter l'ordre des événements déclenchés si vous utilisez un `MutationObserver` sur ces éléments ([#8763](https://github.com/sveltejs/svelte/pull/8763))
- si vous avez étendu les typages globaux à travers le <spanclass="vo">[namespace](/docs/development#namespace)</span>`svelte.JSX` auparavant, vous devez les migrer pour utiliser le namespace `svelteHTML`. De même, si vous avez utilisé le namespace `svelte.JSX` pour utiliser des définitions de types, vous devez les migrer pour utiliser les types de `svelte/elements` à la place. Vous pouvez trouver plus d'informations sur ce qu'il faut faire [ici](https://github.com/sveltejs/language-tools/blob/master/docs/preprocessors/typescript.md#im-getting-deprecation-warnings-for-sveltejsx--i-want-to-migrate-to-the-new-typings)
> This API is removed in Svelte 4. `require` hooks are deprecated and current Node versions understand ESM. Use a bundler like Vite or our full-stack framework [SvelteKit](https://kit.svelte.dev) instead to create JavaScript modules from Svelte components.
> Cette <spanclass="vo">[API](/docs/development#api)</span> a été retirée de Svelte 4. La fonction `require` est maintenant dépréciée puisque les versions actuelles de Node comprennent le format ESM. Utilisez plutôt un <spanclass="vo">[bundler](/docs/web#bundler-packager)</span> comme Vite ou le <spanclass="vo">[framework](/docs/web#framework)</span> [SvelteKit](PUBLIC_KIT_SITE_URL) pour créer des modules JavaScript à partir de composants Svelte.
To render Svelte components in Node.js without bundling, use `require('svelte/register')`. After that, you can use `require` to include any `.svelte` file.
Pour rendre des composants Svelte en Node.js sans compilation, utilisez `require('svelte/register')`. Vous pourrez alors utiliser la fonction `require` pour inclure n'importe quel fichier `.svelte`.
> The `.default` is necessary because we're converting from native JavaScript modules to the CommonJS modules recognised by Node. Note that if your component imports JavaScript modules, they will fail to load in Node and you will need to use a bundler instead.
> Le `.default` est nécessaire parce que nous convertissons des modules JavaScript natifs en modules CommonJS interprétés par Node. Notez cependant que si vos composent importent des modules JavaScript, ils ne réussirons pas à les charger avec Node et vous devrez utiliser un <spanclass="vo">[bundler](/docs/web#bundler-packager)</span>.
To set compile options, or to use a custom file extension, call the `register` hook as a function:
Pour définir des options de compilations ou utiliser une extension de fichier personnalisée, appelez le retour de la fonction `register()` comme une fonction :
```js
// @noErrors
require('svelte/register')({
extensions: ['.customextension'], // defaults to ['.html', '.svelte']
extensions: ['.customextension'], // par défaut ['.html', '.svelte']
Voici quelques informations sur les anglicismes usuels utilisés dans un contexte de développement informatique.
Ces mots n'ont pas de réelle traduction en français, ou alors celle-ci n'est que très rarement utilisée. Nous préférons donc laisser leur version anglaise dans la documentation pour rester au plus près de l'usage courant.
> Cette section de glossaire est spécifique à la documentation française de Svelte, et n'existe pas dans la documentation officielle.
## API
Une API est une interface de programmation d'application. Il s'agit d'un ensemble de **points d'accès** publics ou privés basés sur le protocol HTTP et qui répondent des données, généralement exprimé en JSON.
Une API peut suivre une architecture logicielle particulière. Les plus connues sont le REST (_Representational State Transfer_) ou le GraphQL (_Graph Query Language_).
Dans le cadre de SvelteKit, il est possible de [définir une API publique](PUBLIC_KIT_SITE_URL/docs/routing#server) en définissant un fichier `+server.js` dans le dossier `routes`.
## AST
Un arbre de la syntaxe abstraite (_Abstract Syntax Tree_ ou _AST_) est un format de représentation de certains données sous forme d'arbre dont les nœuds internes et les feuilles (ou nœuds externes) possèdent des caractéristiques particulières.
Svelte utilise le format _AST_ comme intermédiaire entre un composant Svelte et le code JavaScript natif interprété par le navigateur web.
## Bug
Vous le savez très certainement, un _bug_ (["insecte"](https://fr.wikipedia.org/wiki/Bug_(informatique)#/media/Fichier:First_Computer_Bug,_1945.jpg) en anglais) est une erreur ou un problème qui empêche le bon fonctionnement d'un logiciel.
Il est courant d'utiliser un _debugger_ ou "débuggueur" pour aider à la résolution de ces _bugs_.
Le mot francisé est "bogue", mais il semble que personne ne s'en serve.
## Build
Un _build_ est l'ensemble de fichiers produits par le <spanclass="vo">[bundler](/docs/web#bundler-packager)</span>. C'est le plus souvent ce qui sera utilisé pour déployer l'application en production.
## Buffer
> Bientôt...
## Callback
Un _callback_ (ou fonction de rappel) est une fonction qui sera appelée lorsqu'un certain travail est terminé.
C'est en général une fonction passée en argument à une autre fonction pour que cette dernière s'en serve lorsque nécessaire.
Par exemple on peut utiliser un _callback_ pour afficher un message lorsqu'un téléchargement est terminé.
```ts
function afficheCoucou() {
console.log('Coucou');
}
function chargeLaDonnée(callback: () => void) {
// je charge la donnée, peu importe comment, puis...
callback();
}
// ici, afficheCoucou est utilisée en tant que callback
chargeLaDonnée(afficheCoucou);
```
## CI
> Bientôt...
## CLI
_CLI_ est l'acronyme de "Command Line Interface" ("Interface en ligne de commande"), et désigne l'<spanclass="vo">[API](#api)</span> d'un programme que l'on lance en ligne de commande.
Il s'agit donc de toutes les interactions possibles avec un programme que vous allez lancer en entrant des instructions dans votre terminal.
Par exemple, [npm](https://www.npmjs.com/) est un programme en ligne de commande, et possède donc un CLI. [Git](https://git-scm.com/book/fr/v2/D%C3%A9marrage-rapide-La-ligne-de-commande) est un autre exemple de programme pouvant s'exécuter via un CLI.
```bash
npm install
npm publish
git init
git clone
git branch
...
```
## Commit
> Bientôt...
## Debugger
Un _debugger_ est un outil logiciel aidant à la résolution de <spanclass="vo">[bugs](#bug)</span>.
## End to end
L'adjectif bout en bout (_end to end_) s'applique à un processus qui soit complet (en opposition avec un processus unitaire).
Il s'applique généralement aux tests _end to end_ qui permettent de tester l'ensemble de l'application (IHM et serveur) sans simuler tout ou partie du système.
Dans le cadre de SvelteKit, il fait également référence au typage _end to end_, permettant de récupérer les types des données retournées par les méthodes `load()` des `layout` et des `routes` dans la variable `data` de la route correspondante.
## Flag
> Bientôt...
## Getter / Setter
Un _getter_ est une fonction qui permet de lire une valeur.
Un _setter_ est une fonction qui permet d'écrire une valeur.
Ils vont souvent de pair, mais peuvent exister indépendamment de l'autre.
Ils sont en général utilisés pour éviter d'exposer les propriétés internes d'un objet et permet à l'objet de faire des vérifications ou des supplémentaires sur les valeurs.
Un _setter_ pourrait être utilisé pour la propriété `nom` pour forcer la mise en majuscule
```ts
class Personne {
#nom = 'Marie';
// setter
set nom(n: string) {
this.#nom = n.toUpperCase()
}
// getter
get nom() {
return this.nom
}
}
```
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
Un _hash_ est le résultat d'une fonction de hachage (ou _hashing_). Une fonction de hachage est une fonction qui associe des valeurs de taille fixe à des données de taille arbitraire. Les _hash_ ont la particularité d'être statistiquement uniques, leur permettant d'être utilisés dans des applications d'indexation (pour une donnée, un hash unique est calculé et est stockée dans une table d'indexation).
Dans le cadre de Svelte, les _hash_ sont utilisés pour générer les noms de classes CSS.
## IDE
Un environnement de développement intégré (_Integrated Development Environment) est un logiciel intégrant plusieurs outils facilitant le développement informatique. Parmi les plus célèbres dans le monde web: VSCode et WebStorm.
## Intellisense
Le terme _intelliSense_ fait référence à des aides à la saisie semi-automatique de code qui comprend un certain nombre de fonctionnalités : autocomplétion, liste des propriétés, etc. Ces outils peuvent être intégré aux <spanclass="vo">[IDE](/docs/development#ide)</span> ou ajouté via des <spanclass="vo">[plugins](/docs/development#plugin)</span>. Il sont dépendants du langage de programmation et peuvent souvent être fortement configurés.
## Issue
Une _issue_ (qui signifie "problème" en anglais) est une note sur un dépôt à propos de quelque chose qui nécessite une attention particulière. Il peut s'agir d'un bogue, d'une demande de fonctionnalité, d'une question ou de bien d'autres choses. Cette terminologie est très utilisée entre autres sur les sites [Github](https://github.com), [Gitlab](https://gitlab.com) et [Bitbucket](https://bitbucket.org).
On parle parfois en français de "ticket".
## Log
Un _log_ est l'affichage d'une information lors de l'exécution d'un programme. Ils peuvent être affichées en direct, ou bien stockées dans un fichier de logs.
## Monorepo
> Bientôt...
## Namespace
Un `_namespace_` ou "espace de noms" est un espace abstrait dans lequel on peut regrouper des définitions. Cela permet de définir par exemple deux définitions ayant le même nom dans deux espaces différents, sans pour autant les confondre.
Par exemple, on peut définir `sinus` dans un namespace `Math`, ainsi que dans un namespace `Corps`. Ainsi `Math.sinus` renvoie à la fonction mathématique sinus, tandis que `Corps.sinus` renvoie aux cavités nasales du corps humain.
Dans le développement web, les `_namespaces_` sont souvent utilisés en TypeScript pour organiser les types.
## Number
_Number_ est le mot anglais pour "nombre". En développement informatique, il s'agit la plupart du temps d'un type de variable représentant des nombres.
## Package
> Bientôt...
## Parser
_Parser_ est un verbe représentant l'action de transformer une donnée reçue dans un format adapté à son traitement. Un cas classique dans une application web est de _parser_ une chaîne de caractères représentant un <spanclass="vo">[JSON](/docs/web#json)</span>, reçu en réponse d'un appel HTTP, en un objet JavaScript, plus simple à manipuler. Dans d'autres contextes, il est est également possible de _parser_ du binaire en chaîne de caractères.
## Payload
Une _payload_ représente la donnée utile transportée dans une communication.
## Placeholder
> Bientôt...
## Plugin
Un _plugin_ est une librairie utilitaire que l'on peut ajouter à un programme (navigateur web, <spanclass="vo">[IDE](/docs/development#ide)</span>, etc.) pour l'améliorer.
## Pull Request
Une _Pull Request_ est une demande d'intégration de nouveau code dans le code existant d'un logiciel. Ce terme est en général utilisé lorsque le logiciel est versionné avec Git.
Comme <spanclass="vo">[issue](#issue)</span>, cette terminologie est très utilisée entre autres sur les sites [Github](https://github.com) et [Bitbucket](https://bitbucket.org). Sur [Gitlab](https://gitlab.com), on parle de _Merge Request_, qui est synonyme.
## Race condition
Une _race condition_, ou ["situation de compétition"](https://fr.wikipedia.org/wiki/Situation_de_comp%C3%A9tition) décrit une situation où un enchaînement d'opérations effectuées par plusieurs acteurs d'un système donne des résultats différents selon l'ordre dans lequel les acteurs effectuent leurs opérations.
Il est en général préférable d'éviter d'avoir de telles situations.
## Readonly
On dit d'une entité qu'elle est _readonly_ lorsqu'on ne peut pas changer sa valeur une fois que celle-ci a été définie. On parle aussi de "lecture seule" en français.
Ce terme est à mettre en opposition avec <spanclass="vo">[writable](#writable)</span>.
## Runtime
Un _runtime_ est un environnement d'exécution permettant d'effectuer les opérations d'un programme informatique dans un langage donné.
Dans le contexte du langage JavaScript, on désigne par _runtime_ les programmes permettant l'exécution de programmes écrits en JavaScript sur un serveur. Les trois _runtime_ JavaScript les plus connus sont [NodeJS](https://nodejs.org/en), [Deno](https://deno.com), et [Bun](https://bun.sh).
## Scope
Un _scope_ définit la [portée](https://fr.wikipedia.org/wiki/Port%C3%A9e_(informatique)) ou les limites dans lesquelles une certaine chose est définie ou a de l'influence.
On parle de la portée d'une variable en JavaScript pour désigner les limites dans lesquelles celle-ci est définie. De même, on parle de la portée d'une règle CSS pour désigner les limites dans lesquelles cette règle s'applique.
## Slash
Un _slash_ est simplement le caractère `/`, à ne pas confondre avec son frère jumeau _antislash_`\`.
## Stack trace
Une _stack trace_, ou "trace de pile", est une liste détaillant dans l'ordre chronologique les appels de fonctions utilisés lorsqu'un programme informatique produit une erreur. Cela permet de suivre le chemin d'exécution du programme, et facilite ainsi la résolution de <spanclass="vo">[bugs](#bug)</span>.
## String
_String_ est le mot anglais pour "chaîne de caractères". En développement informatique, il s'agit la plupart du temps d'un type de variable représentant du texte.
## Timestamp
> Bientôt...
## Thread
Un _thread_, ou ["fil d'exécution"](https://fr.wikipedia.org/wiki/Thread_(informatique)) est similaire dans une certaine mesure à un processus permettant l'exécution de tâches sur un microprocesseur.
JavaScript est un langage ne pouvant historiquement s'exécuter que sur un seul _thread_, mais l'arrivée récente des [Web Workers](https://developer.mozilla.org/fr/docs/Web/API/Web_Workers_API/Using_web_workers) permet d'exécuter JavaScript sur plusieurs _threads_.
## Template
Un _template_ désigne un modèle qui simplifie la création d'un site web, d'un logiciel, d'une application ou d'un design. Il intègre des éléments déjà préconçus et faciles à modifier pour rendre la création web plus facile et rapide.
## Tooltip
Un _tooltip_ est une info-bulle, c'est-à-dire un message qui peut s'afficher à l'écran dans certaines circonstances (souvent au survol du curseur) pour fournir des informations contextuelles.
## Tree-shaking
> Bientôt...
## Warning
Un _warning_ est un avertissement, moins grave qu'une erreur, mais suffisamment important pour qu'il soit porté à l'attention des personnes concernées.
## Worker
> Bientôt...
## Workflow
> Bientôt...
## Wrapper
Un _wrapper_ est une fonction qui "enveloppe" une autre fonction afin de lui apporter des fonctionnalités supplémentaires.
On peut également le voir comme une fonction qui crée et renvoie une fonction qui se sert de la fonction d'origine.
Un _wrapper_ pourrait être utilisé pour aggrémenter un message d'accueil :
> 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.).
## Writable
On dit d'une entité qu'elle est _writable_ lorsqu'on peut pas changer sa valeur une fois que celle-ci a été définie. Le terme _writable_ est à mettre en opposition avec <spanclass="vo">[readonly](#readonly)</span>.
Dans le cadre de Svelte, _writable_ fait souvent référence à un <spanclass="vo">[store](/docs/sveltejs#store)</span>_writable_, dont la valeur peut être mise à jour.
Voici quelques informations sur les angliscismes usuels utilisés dans le contexte web.
Ces mots n'ont pas de réelle traduction en français, ou alors celle-ci n'est que très rarement utilisée. Nous préférons donc laisser leur version anglaise dans la documentation pour rester au plus près de l'usage courant.
> Cette section de glossaire est spécifique à la documentation française de Svelte, et n'existe pas dans la documentation officielle.
## ARIA
[_ARIA_](https://developer.mozilla.org/fr/docs/Web/Accessibility/ARIA) est l'acronyme de "Accessible Rich Internet Applications", et a pour objectif la popularisation d'applications internet riches d'un point de vue de l'accessibilité. Il s'agit plus concrètement d'un ensemble d'attributs et de rôles HTML permettant de rendre le contenu d'une page web plus accessible.
## Backend
> Bientôt...
## Body
> Bientôt...
## Bundler / Packager
Un _bundler_ (ou _packager_) est un outil de développement qui permet à une application web répartie sur plusieurs fichiers sources d'être ramenée à un nombre réduit de fichiers (voir en un unique fichier).
L'étape de _bundling_ est donc une sorte de compilation spécifique au contexte du web. C'est souvent lors de cette étape que l'on transforme notre code source pour l'optimiser pour le navigateur.
Les transformations classiques effectuées lors d'un _bundling_ sont :
- Typescript => Javascript
- JSX => Javascript
- Svelte => Javascript, HTML et CSS
- Minification
- ES20XX => ES6
- Réorganisation des dossiers et fichiers
> Vite et Rollup sont des exemples de _bundler_.
## CDN
> Bientôt...
## Checkbox
Une [_checkbox_](https://developer.mozilla.org/fr/docs/Web/HTML/Element/input/checkbox) est une boîte à cocher permettant à un utilisateur ou utilisatrice de faire des choix dans des formulaires.
## Client-side rendering
Le rendu côté client, ou _client-side rendering_ (CSR) est l'action de générer une page web avec tout ou partie des données métier dans le navigateur. Il est à mettre en opposition avec le <spanclass='vo'>[rendu côté serveur](#server-side-rendering)</span>, ou _server-side rendering_, où les pages viennent charger leurs données métier d'abord sur le serveur.
Le CSR permet notamment de naviguer au sein d'une application sans jamais reconstruire intégralement la page, puisque les différents éléments de la page sont ajoutés au fur et à mesure de la navigation. Le CSR est la stratégie de rendu naturelle des <spanclass="vo">[SPAs](#spa)</span>.
Une stratégie CSR nécessite néanmoins d'avoir JavaScript disponible dans son navigateur.
## CMS
> Bientôt...
## Cross-site
> Bientôt...
## Desktop
_Desktop_ signifie "bureau" en anglais et désigne un ordinateur dans un contexte de développement. Dans le milieu du web, on distingue parfois une navigation _desktop_ d'une navigation mobile pour des questions de design ou de comportements différents.
## DOM
Le _Document Object Model_ (DOM) est la représentation objet d'un document HTML chargé dans le navigateur web. Cette représentation du document permet de le voir comme un groupe structuré de nœuds et d'objets possédant différentes propriétés et méthodes. On parle souvent d'"arbre DOM".
Le DOM relie les pages web aux scripts, fichiers de styles, ressources externes ou langages de programmation. Il peut être manipulé à l'aide du JavaScript.
## DNS
> Bientôt...
## Edge
> Bientôt...
## Endpoint
Un _endpoint_ (ou "point de terminaison") est un point d'accès d'une <spanclass="vo">[API](/docs/development#api)</span> permettant d'interagir avec cette API.
Dans un contexte web, on parle souvent d'un _endpoint_ d'API REST, permettant de requêter les données d'un serveur.
## Framework
Un _framework_ est une libraire complète proposant des outils ainsi qu'une philosophie de travail permettant de réaliser une tâche particulière du début à la fin.
Il existe toutes sortes de frameworks, notamment serveur (Express, ...), de composants client (React, Vue, Svelte, ...) ou d'application (SvelteKit, Next, ...).
## Frontend
> Bientôt...
## Header
Un _header_ ou "en-tête" est un information que l'on fournit à une requête ou réponse HTTP pour préciser des informations sur la requête ou la réponse.
## Hot Module Reloading
Le _Hot Module Reloading_ (ou HMR) est un outil de développement permettant de rafraîchir instantanément l'état d'une page web lorsque le code source est modifié, afin de fluidifier le travail de développement. Cet outil est aujourd'hui proposé par la plupart des <spanclass="vo">[bundlers](#bundler-packager)</span> modernes.
## Iframe
Une [_iframe_](https://developer.mozilla.org/fr/docs/Web/HTML/Element/iframe) est un élément HTML (`<iframe>`) permettant d'intégrer une page web au sein d'une autre page web, affichant ainsi le contenu d'un site dans un autre site. Les communications entre l'_iframe_ et la page principale sont volontairement limitées pour des raisons de sécurité.
## ISR
> Bientôt...
## JSON
Le [_JSON_](https://fr.wikipedia.org/wiki/JavaScript_Object_Notation) ("JavaScript Object Notation") est un format de données représentant un objet JavaScript sous forme de chaîne de caractères. C'est un format très populaire pour transmettre des données sur le web.
```json
{
"name": "Lucie",
"age": 43,
"pets": [{
"name": "Cookie",
"age": 3,
"type": "dog"
}, {
"name": "Chouquette",
"age": 7,
"type": "cat"
}]
}
```
## Keyframe
Une _keyframe_ représente une étape lors d'une animation CSS. L'usage de _keyframes_ permet de contrôler précisément le déroulé d'une animation CSS.
## Language Server
Un _language server_ est un algorithme exécuté par un <spanclass="vo">[IDE](/docs/development#ide)</span>. Il permet d’exécuter les aides au développement (autocomplétion, accès rapide, liste des utilisations, etc.) adaptées à un langage de programmation. L'interface entre l'IDE et le _language server_ est défini par un protocole, le _Language Server Protocol_ (LSP).
Plus d'infos sur le [site de la documentation du LSP](https://microsoft.github.io/language-server-protocol/).
## Layout
Dans le web, un _layout_ désigne un composant particulier qui a pour but de formaliser une mise en page donnée. Elle peut alors être utilisée pour tout ou partie de l'application voire être composée avec d'autres _layouts_.
## Lazy loading
Le _lazy loading_ (ou "chargement différé" ou "chargement paresseux") est l'action de charger de l'information au moment où elle nécessaire. Par exemple, il est courant d'utiliser cette technique pour charger les images d'une page de site web uniquement lorsqu'elles sont censées être visibles, mais pas avant. Cela permet de rendre le chargement initial de la page plus léger, car la plupart des images ne seront alors pas chargées.
## Load balancer
> Bientôt...
## Lockfile
> Bientôt...
## Markup
Un langage de _markup_ est un [langage de balisage](https://fr.wikipedia.org/wiki/Langage_de_balisage), c'est-à-dire décrivant l'information au sein de balises telles que `<image>` ou `<article>`. Les langages HTML et XML sont deux exemples de langages de _markup_.
Lorsqu'on parle de _markup_, on désigne l'ensemble des balises présentes dans un document ou une page.
## Metadata
Les _metadata_, ou "meta-données", sont des données non essentielles mais permettant d'enrichir le contexte des données auxquelles elles se réfèrent. Par exemple, la langue d'une page n'est pas la donnée principale de la page — le texte de la page est la donnée principale —, mais est une meta-donnée permettant de mieux interpréter le contenu de la page.
## Middleware
> Bientôt...
## MIME
> Bientôt...
## MPA
Une _Multi Page Application_, ou "Application Multi-Page", est un type d'application web se déployant sur plusieurs pages distinctes que l'on charge au fur et à mesure de la navigation. C'est le type d'application historique du web.
Les _MPAs_ sont à mettre en opposition avec les <spanclass="vo">[SPAs](#spa)</span>, applications sur une seule page, permettant de ne pas recharger intégralement la page à chaque navigation.
Les _MPAs_ sont souvent utilisées conjointement à une stratégie de [rendu côté serveur](#server-side-rendering).
## Preprocessing
Le _preprocessing_ désigne le fait de préparer préalablement du code ou de la donnée afin de l'optimiser ou l'adapter à son futur traitement.
Le développement JavaScript moderne implique souvent plusieurs étapes de _preprocessing_, comme par exemple :
- transformer du code JavaScript moderne en code JavaScript plus ancien, mais compatible avec plus de navigateurs
- transformer du code TypeScript en code JavaScript
- transformer du code SASS en code CSS
- minifier le code JavaScript pour le rendre plus léger à transporter
Svelte utilise également des préprocesseurs pour convertir les composants Svelte en code JavaScript natif, compréhensible par le navigateur.
## Prerendering
Le _prerendering_, ou "rendu préalable", est une stratégie de rendu d'une page web construisant les pages à l'avance. À la différences des stratégies <spanclass="vo">[CSR](#client-side-rendering)</span> ou <spanclass="vo">[SSR](#server-side-rendering)</span>, les pages prérendues sont construites une seule fois, au moment de la compilation (dans le cas où l'application nécessite une étape de compilation).
Toutes les pages d'une application ne sont pas compatibles avec cette stratégie, car il est nécessaire que les pages soient statiques, c'est-à-dire que leur contenu soit le même quel que soit la personne visitant la page ou quel que soit le moment de la visite.
Le <spanclass="vo">[SSG](#ssg)</span> permet d'avoir une application construite entièrement avec des pages prérendues.
## Proxy
> Bientôt...
## REPL
Un _REPL_ (de l'anglais "Read-Eval-Print-Loop") est un outil permettant de modifier et d'exécuter du code sur une page web et dans un environnement restreint, afin de tester certaines fonctionnalités. Svelte propose son propre [_REPL_](/repl).
## Routing
Le _routing_, ou "routage", est le fait d'aiguiller un utilisateur ou une utilisatrice sur les différentes pages d'un site web, éventuellement via des redirections. Normalement géré par le serveur recevant les requêtes — on parlera alors de _routing_ serveur —, il est également possible de gérer cet aiguillage directement sur le client dans une stratégie <spanclass="vo">[CSR](#client-side-rendering)</span> — on parlera alors de _routing_ client.
## Sourcemap
Une _sourcemap_ est un fichier ou une structure de données associée à un code source, généralement utilisée dans le développement web et la programmation front-end. Elle sert à établir une correspondance entre le code source original, tel qu'il est écrit dans un langage de programmation comme JavaScript, et le code résultant après compilation, minification ou transpilation, qui lui sera réellement exécuté par le navigateur. Cela permet de facilement retrouver dans le code source l'origine d'un <spanclass="vo">[bug](/docs/development#bug)</span> qui aura été généré par le code compilé.
## SEO
Le _SEO_ ("Search Engine Optimization") désigne l'ensemble des stratégies appliquées à un site web pour optimiser le référencement de ses pages au sein des moteurs de recherche, permettant une meilleure visibilité du site sur internet.
## Serverless
> Bientôt...
## Service worker
> Bientôt...
## Server-side rendering
Le rendu côté serveur, ou _server-side rendering_ (SSR) est l'action de générer une page web avec tout ou partie des données métier directement sur le serveur. Il est à mettre en opposition avec le <spanclass='vo'>[rendu côté client](#client-side-rendering)</span>, ou _client-side rendering_, où les pages viennent charger la logique dans un premier temps et les données métiers avec des requêtes supplémentaires, ce qui implique de construire une grande partie de la page dans le navigateur. Le SSR est une stratégie de rendu s'intégrant naturellement dans des [MPAs](#mpa).
Le SSR a pour avantages :
- une exécution plus rapide car nécessitant moins de requêtes
- le fait de pouvoir générer l'entièreté d'une page à la première requête, ce qui permet d'afficher une page même si JavaScript n'est pas disponible côté client
- bénéficie d'un meilleur référencement SEO, car les balises de référencement sont générées côté serveur et disponibles pour les outils d'indexation
SvelteKit propose le SSR par défaut, qui peut être désactivé au cas par cas.
## Sitemap
> Bientôt...
## Socket
> Bientôt...
## SPA
Une _Single Page Application_, ou "Application sur une seule page" est un genre d'application web popularisée par le <spanclass="vo">[frameworks](#framework)</span> [React](https://react.dev/) et [AngularJS](https://fr.wikipedia.org/wiki/AngularJS). Le principe est de construire tout le HTML de son application côté client (donc dans le navigateur), et de naviguer dans les différentes sections de l'application sans recharger la page.
Le fait de ne pas avoir besoin de recharger la page permet des fonctionnalités comme ne pas interrompre la lecture d'un flux audio ou vidéo lors de la navigation. Mais ce type d'application a également de gros inconvénients parmi lesquels un temps de chargement potentiellement allongé ainsi qu'une forte dégradation du référencement.
Les _SPAs_ sont à mettre en opposition avec les <spanclass="vo">[MPAs](#mpa)</span>, applications multi-pages, nécessitant un rechargement complet entre chaque page.
Les _SPAs_ nécessitent une stratégie de [rendu côté client](#client-side-rendering), et à ce titre sont plutôt considérées comme des mauvaises pratiques, sauf dans quelques cas très particuliers.
On leur préfère des stratégies comme le <spanclass="vo">[SSR](#server-side-rendering)</span>, le <spanclass="vo">[SSG](#ssg)</span>, ou encore des stratégies hybrides.
## SSG
_SSG_ est l'acronyme de "Static Site Generation", ou "Génération de Site Statique". Il s'agit d'une stratégie de rendu d'une application web où l'intégralité des pages est généré automatiquement au moment de la compilation, utilisant des méthodes de <spanclass="vo">[prerendering](#prerendering)</span>.
Cette stratégie requiert que toutes les pages de l'application soient statiques, c'est-à-dire que leur contenu soit le même quel que soit la personne visitant la page ou quel que soit le moment de la visite.
## Stream
> Bientôt...
## TLS
> Bientôt...
## Trailing slash
Un _trailing slash_ est le <spanclass="vo">[slash](/docs/development#slash)</span> que l'on retrouve parfois à la fin d'une url, par exemple `https://www.mon-super-site.com/bonjour/`.
La présence ou l'absence de ce _trailing slash_ a des répercussions sur les navigations relatives au sein du site ainsi que sur le référencement des pages concernées
## Viewport
Le _viewport_ désigne la surface visible d'une page web au sein d'un navigateur.
## Web component
Les [_web components_](https://developer.mozilla.org/fr/docs/Web/API/Web_components) sont des éléments HTML personnalisés réutilisables, créés via une <spanclass="vo">[API](/docs/development#api)</span> standardisée.
## XSS
_XSS_ est l'acronyme de ["Cross-Site-Scripting"](https://fr.wikipedia.org/wiki/Cross-site_scripting). Il s'agit d'un type d'attaque informatique ciblant les pages d'un site web dans l'objectif de subtiliser les informations de connexion d'un utilisateur ou d'une utilisatrice via l'exécution d'un script malveillant au sein même de la page.
Voici quelques informations sur les angliscismes usuels utilisés dans le contexte de JavaScript.
Ces mots n'ont pas de réelle traduction en français, ou alors celle-ci n'est que très rarement utilisée. Nous préférons donc laisser leur version anglaise dans la documentation pour rester au plus près de l'usage courant.
> Cette section de glossaire est spécifique à la documentation française de Svelte, et n'existe pas dans la documentation officielle.
## Bubble / Capture
Lorsqu'un événement JavaScript est déclenché, celui-ci parcours le <spanclass="vo">[DOM](/docs/web#dom)</span> en 3 phases distinctes, dans cet ordre :
- la phase _capture_ : de l'élément window jusqu'à l'élément qui a déclenché l'événement
- la phase _target_ : lorsque l'événement atteint l'élément qui a déclenché l'événement
- la phase _bubble_ de l'élément qui a déclenché l'événement jusqu'à l'élément `window`
Un _event listener_ écoutera par défaut les événements dans leurs phases de _bubbling_. Il est néanmoins possible d'initialiser un _listener_ pour qu'il écoute dans la phase _capture_ avec l'option `{capture: true}` (en svelte, avec le [modificateur de directive](/docs/element-directives) `|capture`).
## Event dispatcher
Un _event dispatcher_ (ou générateur d'évènements) est une fonction qui peut être utilisée pour distribuer des évènements au sein d'une application, notamment pour communiquer entre composants.
Plus d'infos sur [les _event dispatchers_ dans la documentation](/docs/svelte#createeventdispatcher).
## Event listener
Un _event listener_ est une fonction conçue pour être exécutée lorsqu'un événement est déclenché.
Par exemple, on peut utiliser un _event listener_ pour **changer la couleur d'un bouton** (fonction) lorsqu'on **clique** dessus.
Plus d'infos sur les _event listeners_ sur [le site de MDN](https://developer.mozilla.org/fr/docs/Web/API/EventTarget/addEventListener).
## Falsy / Truthy
### Falsy
Une valeur est dite _falsy_ si celle-ci peut être interprétée comme équivalente (et non pas égale) à `false`.
Les valeurs _falsy_ sont:
- `false`
- `0`
- `-0`
- `0n` (`0` en BigInt)
- `""` (chaîne de caractère vide)
- `null`
- `undefined`
- `NaN`
- `document.all`
Si une valeur est _falsy_, alors sa double négation renvoie la valeur `false`.
```ts
!!0 // false
!!null // false
!!undefined // false
// ...
```
Plus d'infos sur les valeurs _falsy_ sur [le site de MDN](https://developer.mozilla.org/en-US/docs/Glossary/Falsy) (en anglais).
### Truthy
Une valeur est dite _truthy_ si celle-ci n'est pas <spanclass="vo">[falsy](/docs/javascript#falsy-truthy-falsy)</span>. Toutes les valeurs qui ne sont pas celles listées juste au-dessus sont donc _truthy_.
Si une valeur est _truthy_, alors sa double négation renvoie la valeur `true`.
```ts
!!1 // true
!!{} // true
!!'dsds' // true
// ...
```
Plus d'infos sur les valeurs _truthy_ sur [le site de MDN](https://developer.mozilla.org/fr/docs/Glossary/Truthy).
## Generic
Un _generic_ est une notion en TypeScript qui permet de définir une variable au sein d'un type. Il a pour fonctionnalité première de permettre de propager un type au sein d'une méthode lorsque le type est variable. L'exemple le plus simple est la fonction identité :
```typescript
function identity<Type>(arg: Type): Type {
return arg;
}
```
Dans ce cas précis, le paramètre `arg` pourra être de n'importe quel type, représenté par le _generic_`Type`. Le retour de la méthode aura le même type que le paramètre.
Plus d'infos sur les [generics sur le site TypeScript](https://www.typescriptlang.org/docs/handbook/2/generics.html).
## Inline
L'adjectif _inline_ désigne le fait de définir du style, une condition, une fonction ou un composant sur une seule ligne. Toutes ces fonctionnalités ne sont pas permises nativement en Javascript. Certaines sont apportées par les frameworks de développement, comme Svelte.
<!-- autre manière d'écrire du style inline en Svelte -->
<divstyle:margin="8px"/>
```
## Nullish
Une valeur _nullish_ est une valeur qui est `null` ou `undefined`.
`null` et `undefined` sont deux valeurs qui représentent toutes les deux l'absence de valeur. Ce sont des valeurs différentes (`null !== undefined`), mais équivalentes (`null == undefined`). Pour pouvoir faire référence aux deux, on utilise le terme _nullish_.
Pour en savoir plus sur la différence entre `null` et `undefined`, vous pouvez par exemple lire [ceci](https://stackoverflow.com/questions/5076944/what-is-the-difference-between-null-and-undefined-in-javascript) (en anglais).
## Polyfill
Un _polyfill_ est un bout de code (généralement en JavaScript sur le web) utilisé pour fournir des fonctionnalités récentes sur d'anciens navigateurs qui ne les supportent pas nativement.
Plus d'infos sur les [polyfills sur le site MDN](https://developer.mozilla.org/fr/docs/Glossary/Polyfill).
## Shadow DOM
Un _shadow DOM_ (ou DOM fantôme) est un <spanclass='vo'>[DOM](/docs/web#dom)</span> dans le DOM. Il est monté via la méthode `element.attachShadow()` et a pour particularité d'être encapsulé, c'est-à-dire que sa structure de balisage est isolée, que son style est isolé et que son comportement est caché et séparé du reste de code de la page.
Plus d'infos sur le [shadow DOM sur le site MDN](https://developer.mozilla.org/fr/docs/Web/API/Web_components/Using_shadow_DOM).
Voici quelques informations sur les angliscismes classiques utilisés dans le contexte de Svelte.
Ces mots n'ont pas de réelle traduction en français, ou alors celle-ci n'est que très rarement utilisée. Nous préférons donc laisser leur version anglaise dans la documentation pour rester au plus près de l'usage courant.
> Cette section de glossaire est spécifique à la documentation française de Svelte, et n'existe pas dans la documentation officielle.
## Binding
Le _binding_ est le mécanisme par lequel une valeur d'un input est automatiquement copiée dans une variable :
```svelte
<!-- ici, la valeur est initialisée avec la variable name
mais la variable ne sera pas mise à jour automatiquement avec la saisie de l'utilisateur -->
<inputvalue={name}>
<!-- dans ce cas, la valeur est initialisée avec la variable name
et la variable sera automatiquement mise à jour avec la saisie de l'utilisateur -->
<inputbind:value={name}>
<!-- écriture plus concise du binding dans le cas ou la variable porte le même nom que la propriété bindée -->
<inputbind:value>
```
De la même manière, il est possible de _binder_ des propriétés d'un composant :
```svelte
<script>
import { Commande } from './Commande.svelte';
let articles;
</script>
<Commandebind:articles={articles}>
```
Il est également possible de _binder_ des propriétés de certains éléments du <spanclass='vo'>[DOM](/docs/web#dom)</span> (les éléments de type bloc, les images, les vidéo, window via `svelte:window` et document via `svelte:document`).
## Hook
Un _hook_ est un type de méthode proposé par SvelteKit pour traiter toutes les requêtes arrivant sur le serveur. Vous trouverez [plus de détails sur le site de référence de SvelteKit](PUBLIC_KIT_SITE_URL/docs/hooks).
> Ne pas confondre avec les [hooks de React](https://react.dev/reference/react) (en anglais), qui sont un concept totalement différent.
## Props
Les _props_ ou propriétés sont les valeurs passées aux composants. Les props sont définies avec le mot clé `export` au sein du `script` des composants :
```sv
<script>
export let value;
</script>
```
Elles sont passées au composant de la même manière qu'un attribut HTML :
```svelte
<Widgetvalue="salut"/>
```
Plus d'infos sur les [props dans la documentation](/docs/basic-markup#attributs-et-props).
> Le concept de props est exactement le même en Svelte qu'en React, Vue ou Solid.
## Slot
Un _slot_ correspond au contenu enfant d'un composant. Il est possible d'y accéder dans le markup via `<slot>` ou dans le bloc `script` via la variable globale `$$slots`.
Plus d'infos sur [les slots dans la documentation](/docs/special-elements#slot).
## Snapshot
> Bientôt...
## Store
Un _store_ est un concept au sein de Svelte qui permet de stocker une valeur, et de notifier n'importe quel module au sein de l'application de ses changements de valeur.
Plus d'infos sur [les stores Svelte dans la documentation](/docs/svelte-store).
## Tick
De manière générale, un _tick_ peut faire référence à une période de temps unitaire.
Dans le cadre de Svelte, la méthode _tick_ définit est 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.
Plus d'infos sur [les ticks Svelte dans la documentation](/docs/svelte#tick).
Romain Crestey
3 years ago
committed by
Romain Crestey