diff --git a/documentation/docs/03-runtime/02-svelte-store.md b/documentation/docs/03-runtime/02-svelte-store.md index ed95b0ecdf..494ce15911 100644 --- a/documentation/docs/03-runtime/02-svelte-store.md +++ b/documentation/docs/03-runtime/02-svelte-store.md @@ -2,66 +2,66 @@ title: 'svelte/store' --- -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 [stores](/docs/sveltejs#store) [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-pr-fixer-les-stores-avec-$-pour-acc-der-leur-valeur) in your components. Any object that correctly implements `.subscribe`, unsubscribe, and (optionally) `.set` is a valid store, and will work both with the special syntax, and with Svelte's built-in [`derived` stores](/docs/svelte-store#derived). +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-pr-fixer-les-stores-avec-$-pour-acc-der-leur-valeur) 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 [store](/docs/sveltejs#store) 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 [store](/docs/sveltejs#store) 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 [callback](/docs/development#callback) comme seul argument. Le [callback](/docs/development#callback) prend la valeur existante du [store](/docs/sveltejs#store) comme argument et renvoie la nouvelle valeur à définir pour le [store](/docs/sveltejs#store). -```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 [store](/docs/sveltejs#store). 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 [store](/docs/sveltejs#store) dont la valeur ne peut pas être modifiée de l'extérieur. Le premier argument est la valeur initiale du [store](/docs/sveltejs#store), le second argument est le même que le second argument de `writable`. -```js +```ts // ---cut--- import { readable } from 'svelte/store'; @@ -89,9 +89,9 @@ const ticktock = readable('tick', (set, update) => { > EXPORT_SNIPPET: svelte/store#derived -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 [store](/docs/sveltejs#store) à partir d'un ou plusieurs autres [stores](/docs/sveltejs#store). Le [callback](/docs/development#callback) s'exécute initialement lorsque le premier abonné s'abonne, puis à chaque fois que les dépendances du [store](/docs/sveltejs#store) 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 [store](/docs/sveltejs#store), et le [callback](/docs/development#callback) renvoie une valeur dérivée. ```ts // @filename: ambient.d.ts @@ -110,11 +110,11 @@ 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 [callback](/docs/development#callback) 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 [store](/docs/sveltejs#store) dérivé avant le premier appel de `set` ou `update`. Si aucune valeur initiale n'est fournie, la valeur initiale du [store](/docs/sveltejs#store) sera `undefined`. -```js +```ts // @filename: ambient.d.ts import { type Writable } from 'svelte/store'; @@ -136,14 +136,14 @@ const delayed = derived(a, ($a, set) => { const delayedIncrement = derived(a, ($a, set, update) => { set($a); setTimeout(() => update(x => x + 1), 1000); - // 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 [callback](/docs/development#callback), elle sera appelée lorsque a) le [callback](/docs/development#callback) s'exécute à nouveau, ou b) le dernier abonné se désabonne. -```js +```ts // @filename: ambient.d.ts import { type Writable } from 'svelte/store'; @@ -172,7 +172,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 [store](/docs/sveltejs#store). ```ts // @filename: ambient.d.ts @@ -201,9 +201,9 @@ const delayed = derived([a, b], ([$a, $b], set) => { > EXPORT_SNIPPET: svelte/store#readonly -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 [store](/docs/sveltejs#store) en lecture seule ([readonly](/docs/development#readonly)) à partir d'un autre [store](/docs/sveltejs#store). Vous pouvez toujours vous abonner aux changements du [store](/docs/sveltejs#store) original en utilisant le [store](/docs/sveltejs#store) `readonly`. -```js +```ts import { readonly, writable } from 'svelte/store'; const writableStore = writable(1); @@ -220,11 +220,11 @@ 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 [store](/docs/sveltejs#store) 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 [store](/docs/sveltejs#store) 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. -```js +```ts // @filename: ambient.d.ts import { type Writable } from 'svelte/store'; diff --git a/documentation/docs/07-glossary/01-development.md b/documentation/docs/07-glossary/01-development.md index e95427a9ed..3d6c771da8 100644 --- a/documentation/docs/07-glossary/01-development.md +++ b/documentation/docs/07-glossary/01-development.md @@ -96,7 +96,11 @@ Vous trouverez plus de détails sur les [getters](https://developer.mozilla.org/ > Bientôt... -## Race conditions +## Race condition + +> Bientôt... + +## Readonly > Bientôt... diff --git a/documentation/docs/07-glossary/02-web.md b/documentation/docs/07-glossary/02-web.md index 516eb007e5..1ea0b60b0a 100644 --- a/documentation/docs/07-glossary/02-web.md +++ b/documentation/docs/07-glossary/02-web.md @@ -48,7 +48,7 @@ Les transformations classiques effectuées lors d'un _bundling_ sont : > Bientôt... -## Sourcemaps +## Sourcemap > Bientôt... diff --git a/documentation/docs/07-glossary/04-sveltejs.md b/documentation/docs/07-glossary/04-sveltejs.md index ccfc92dcf1..1af317e78f 100644 --- a/documentation/docs/07-glossary/04-sveltejs.md +++ b/documentation/docs/07-glossary/04-sveltejs.md @@ -12,7 +12,7 @@ Ces mots n'ont pas de réelle traduction en français, ou alors celle-ci n'est q > Bientôt... -## Hooks +## Hook > Bientôt... @@ -26,8 +26,6 @@ Ces mots n'ont pas de réelle traduction en français, ou alors celle-ci n'est q ## Store -> Bientôt... - 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). diff --git a/packages/svelte/src/runtime/store/public.d.ts b/packages/svelte/src/runtime/store/public.d.ts index 9655a15674..0b488687d9 100644 --- a/packages/svelte/src/runtime/store/public.d.ts +++ b/packages/svelte/src/runtime/store/public.d.ts @@ -1,49 +1,50 @@ import { Invalidator } from './private.js'; -/** Callback to inform of a value updates. */ +/** [Callback](/docs/development#callback) pour informer des changements d'une valeur. */ export type Subscriber = (value: T) => void; -/** Unsubscribes from value updates. */ +/** Permet de se désabonner des changements d'une valeur */ export type Unsubscriber = () => void; -/** Callback to update a value. */ +/** [Callback](/docs/development#callback) pour mettre à jour une valeur. */ export type Updater = (value: T) => T; /** - * Start and stop notification callbacks. - * This function is called when the first subscriber subscribes. + * Lance et arrête les [callbacks](/docs/development#callback) d'abonnement. + * Cette fonction est appelée quand le premier abonné s'abonne. * - * @param {(value: T) => void} set Function that sets the value of the store. - * @param {(value: Updater) => void} update Function that sets the value of the store after passing the current value to the update function. - * @returns {void | (() => void)} Optionally, a cleanup function that is called when the last remaining - * subscriber unsubscribes. + * @param {(value: T) => void} set Fonction qui change la valeur du [store](/docs/sveltejs#store). + * + * @param {(value: Updater) => void} update Fonction qui change la valeur du [store](/docs/sveltejs#store) + * après avoir passé la valeur actuelle à la fonction de mise à jour. + * @returns {void | (() => void)} Une fonction de nettoyage optionnelle qui est appelée quand le dernier abonné se désabonne. */ export type StartStopNotifier = ( set: (value: T) => void, update: (fn: Updater) => void ) => void | (() => void); -/** Readable interface for subscribing. */ +/** Interface Readable pour s'abonner. */ export interface Readable { /** - * Subscribe on value changes. - * @param run subscription callback - * @param invalidate cleanup callback + * Permet de s'abonner aux changements de valeur. + * @param run [callback](/docs/development#callback) d'abonnement + * @param invalidate [callback](/docs/development#callback) de nettoyage */ subscribe(this: void, run: Subscriber, invalidate?: Invalidator): Unsubscriber; } -/** Writable interface for both updating and subscribing. */ +/** Interface Writable for s'abonner et mettre à jour. */ export interface Writable extends Readable { /** - * Set value and inform subscribers. - * @param value to set + * Change la valeur et informe les abonnés. + * @param value une valeur */ set(this: void, value: T): void; /** - * Update value using callback and inform subscribers. - * @param updater callback + * Met la valeur à jour en utilisant le [callback](/docs/development#callback) et informe les abonnés. + * @param updater [callback](/docs/development#callback) */ update(this: void, updater: Updater): void; }