From c79d2be6d917d74c8ae6eee9da5cec9e65d41969 Mon Sep 17 00:00:00 2001 From: Romain l'Ourson Date: Wed, 12 Jul 2023 14:40:35 +0200 Subject: [PATCH] docs: chapter 2 continued (#18) * docs: chapter 2 continued * docs: ignore ts errors * docs: fix links --------- Co-authored-by: Romain Crestey --- .../02-template-syntax/02-basic-markup.md | 4 +- .../02-template-syntax/04-special-tags.md | 23 +- .../05-element-directives.md | 440 +++++++++--------- .../06-component-directives.md | 74 +-- .../02-template-syntax/07-special-elements.md | 222 ++++----- .../docs/07-glossary/01-development.md | 4 + 6 files changed, 398 insertions(+), 369 deletions(-) diff --git a/documentation/docs/02-template-syntax/02-basic-markup.md b/documentation/docs/02-template-syntax/02-basic-markup.md index a24521f8a4..3066a02819 100644 --- a/documentation/docs/02-template-syntax/02-basic-markup.md +++ b/documentation/docs/02-template-syntax/02-basic-markup.md @@ -45,9 +45,9 @@ Ou elles peuvent _être définies_ par des expressions JavaScript. ``` -Les attributs booléens sont inclus sur l'élément si leur valeur est [truthy](https://developer.mozilla.org/fr/docs/Glossary/Truthy) et exclus si leur valeur est [falsy](https://developer.mozilla.org/fr/docs/Glossary/Falsy). +Les attributs booléens sont inclus sur l'élément si leur valeur est [truthy](/docs/javascript#falsy-truthy-truthy) et exclus si leur valeur est [falsy](/docs/javascript#falsy-truthy-falsy). -Tous les autres attributs sont inclus à moins que leur valeur soit [nullish](https://developer.mozilla.org/fr/docs/Glossary/Nullish) (`null` ou `undefined`). +Tous les autres attributs sont inclus à moins que leur valeur soit [nullish](/docs/javascript#nullish). ```svelte diff --git a/documentation/docs/02-template-syntax/04-special-tags.md b/documentation/docs/02-template-syntax/04-special-tags.md index f70ab4d092..b6d4d281ac 100644 --- a/documentation/docs/02-template-syntax/04-special-tags.md +++ b/documentation/docs/02-template-syntax/04-special-tags.md @@ -1,5 +1,5 @@ --- -title: Special tags +title: Balises spéciales --- ## {@html ...} @@ -8,11 +8,11 @@ title: Special tags {@html expression} ``` -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 "
"}content{@html "
"}` will _not_ work, because `` is not valid HTML. It also will _not_ compile Svelte code. +L'expression doit être du HTML valide en soi — `{@html "
"}contenu{@html "
"}` ne fonctionnera _pas_, car `` 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 [XSS](/docs/web#xss). ```svelte
@@ -26,12 +26,11 @@ The expression should be valid standalone HTML — `{@html "
"}content{@html ```svelte {@debug} ``` - ```svelte {@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 ``` -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 - ``` -Add _modifiers_ to DOM events with the `|` character. +Ajoutez des *modificateurs* aux évènements [DOM](/docs/web#dom) avec le caractère `|`. ```svelte
- +
``` -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 +* `stopPropagation` — appelle `event.stopPropagation()`, empêchant l'évènement d'atteindre le prochain élément +* `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) +* `nonpassive` — déclare explicitement l'évènement avec `passive: false` +* `capture` — déclenche le gestionnaire d'évènement pendant la phase de _capture_ plutôt que pendant la phase de _bubbling_ +* `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 - + ``` -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 - - + ``` ## bind:_property_ @@ -94,59 +91,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 - - - + ``` -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 - - + + + ``` -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 [DOM](/docs/web#dom), Svelte traitera cette valeur comme un nombre. Si l'`` est vide ou invalide (dans le cas de `type="number"` par exemple), la valeur sera `undefined`. ```svelte - - + + ``` -On `` 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 `` 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. ```svelte - - + + ``` -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. ```svelte console.log('Old value:', value)} + on:input={() => console.log('Ancienne valeur:', value)} bind:value - on:input={() => console.log('New value:', value)} + on:input={() => console.log('Nouvelle valeur:', value)} /> ``` -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 `` de texte qui utilise l'évènement `input`. Des liaisons sur d'autres éléments pourraient utiliser d'autres évènements comme `change`. -## Binding `` -A `` correspond à la propriété `value` de l'`