From 4de3452368fa7f2d19c0b1757b89b86ea86baa4a Mon Sep 17 00:00:00 2001 From: Romain l'Ourson Date: Wed, 12 Jul 2023 12:59:55 +0200 Subject: [PATCH] fr: add 02-01-svelte-components doc (#9) * fr: add 02-01-svelte-components doc * fr: fix store link * fr: add writable glossary entry * fr: add 02-02-basic-markup doc * fr: fix links * fr: add 02-03-logic-blocks doc * fix: links --------- Co-authored-by: Romain Crestey --- .../01-svelte-components.md | 202 +++++++++--------- .../02-template-syntax/02-basic-markup.md | 70 +++--- .../02-template-syntax/03-logic-blocks.md | 78 +++---- .../docs/02-template-syntax/meta.json | 2 +- .../docs/03-runtime/02-svelte-store.md | 4 +- .../04-custom-elements-api.md | 2 +- .../docs/07-glossary/01-development.md | 12 ++ documentation/docs/07-glossary/02-web.md | 4 + 8 files changed, 191 insertions(+), 183 deletions(-) diff --git a/documentation/docs/02-template-syntax/01-svelte-components.md b/documentation/docs/02-template-syntax/01-svelte-components.md index 7d4abb7b6a..b48b72aa12 100644 --- a/documentation/docs/02-template-syntax/01-svelte-components.md +++ b/documentation/docs/02-template-syntax/01-svelte-components.md @@ -1,166 +1,162 @@ --- -title: Svelte components +title: Composants 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 [markup](/docs/web#markup) - sont optionnelles. ```svelte - + ``` ## <script> -A ` ``` -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 [props](/docs/sveltejs#props). Elle sera utilisée si la [props](/docs/sveltejs#props) 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 [props](/docs/sveltejs#props) sont mises à jour a posteriori, n'importe quelle valeur de [props](/docs/sveltejs#props) 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 [warning](/docs/development#warning) 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 [warning](/docs/development#warning), assurez-vous qu'une valeur initiale par défaut est définie, même si celle-ci est `undefined`. ```svelte ``` -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 [props](/docs/sveltejs#props) valides, comme montré ci-dessous. ```svelte - ``` -Readonly props can be accessed as properties on the element, tied to the component using [`bind:this` syntax](/docs/component-directives#bind-this). +Les [props](/docs/sveltejs#props) 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 [props](/docs/sveltejs#props). ```svelte - ``` -### 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 ``` -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 ``` -Svelte's ` ``` -### 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 [markup](/docs/web#markup) du composant, à chaque fois que les valeurs dont elle dépend changent. ```svelte ``` -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 - Total: {total} - + - + ``` -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 ``` -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 - ``` -### 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 [_store_](/docs/sveltejs#store) 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 [store](/docs/sveltejs#store), 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 [store](/docs/sveltejs#store) à 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 _[writable](/docs/development#writable) [store](/docs/sveltejs#store)_, et cela fera appel à la méthode `.set` du [store](/docs/sveltejs#store). -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 [store](/docs/sveltejs#store) 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 [store](/docs/sveltejs#store)) ne doivent _pas_ être préfixées avec `$`. ```svelte ``` -#### Store contract +#### Le contrat de [store](/docs/sveltejs#store) ```ts // @noErrors store = { subscribe: (subscription: (value: any) => void) => (() => void), set?: (value: any) => void } ``` -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 [stores](/docs/sveltejs#store) 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 [store](/docs/sveltejs#store) 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 [store](/docs/sveltejs#store). Toutes les fonctions d'abonnements actives d'un [store](/docs/sveltejs#store) doivent ensuite être appelées de manière synchrone à chaque fois que la valeur du [store](/docs/sveltejs#store) 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 [store](/docs/sveltejs#store). +3. Un [store](/docs/sveltejs#store) peut de manière _optionnelle_ contenir une méthode `.set`, qui doit accepter comme argument une nouvelle valeur pour le [store](/docs/sveltejs#store), et qui appellera de manière synchrone toutes les fonctions d'abonnement actives du [store](/docs/sveltejs#store). Un tel [store](/docs/sveltejs#store) est appelé un [store](/docs/sveltejs#store) 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 [store](/docs/sveltejs#store) jusqu'à ce qu'elle soit appelée. ## <script context="module"> -A ` ``` ## <style> -CSS inside a ` ``` -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 ``` -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 [keyframe](/docs/web#keyframe) 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 [keyframe](/docs/web#keyframe) pourra alors être référencée en utilisant simplement `my-animation-name` ailleurs dans le code. -```svelte +```html ``` -There should only be 1 top-level ` diff --git a/documentation/docs/02-template-syntax/02-basic-markup.md b/documentation/docs/02-template-syntax/02-basic-markup.md index 281790ac71..a24521f8a4 100644 --- a/documentation/docs/02-template-syntax/02-basic-markup.md +++ b/documentation/docs/02-template-syntax/02-basic-markup.md @@ -1,10 +1,10 @@ --- -title: Basic markup +title: Markup de base --- -## Tags +## Balises -A lowercase tag, like `
`, denotes a regular HTML element. A capitalised tag, such as `` or ``, indicates a _component_. +Une balise en minuscules, comme `
`, indique un élément HTML standard. Une balise avec la première lettre en majuscule, comme `` ou ``, indique un _composant_. ```svelte