You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: documentation/docs/03-runtime/01-svelte.md
+37-36Lines changed: 37 additions & 36 deletions
Original file line number
Diff line number
Diff line change
@@ -2,27 +2,27 @@
2
2
title: svelte
3
3
---
4
4
5
-
The `svelte`package exposes [lifecycle functions](https://learn.svelte.dev/tutorial/onmount)and the [context API](https://learn.svelte.dev/tutorial/context-api).
5
+
Le paquet `svelte`expose les [fonctions de cycle de vie](https://learn.svelte.dev/tutorial/onmount)et l'[API de contexte](https://learn.svelte.dev/tutorial/context-api).
6
6
7
7
## `onMount`
8
8
9
9
> EXPORT_SNIPPET: svelte#onMount
10
10
11
-
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).
11
+
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).
12
12
13
-
`onMount`does not run inside a [server-side component](/docs/server-side-component-api).
13
+
`onMount`n'est pas exécutée pas à l'intérieur d'un [composant serveur](/docs/server-side-component-api).
14
14
15
15
```svelte
16
16
<script>
17
17
import { onMount } from 'svelte';
18
18
19
19
onMount(() => {
20
-
console.log('the component has mounted');
20
+
console.log('le composant est monté');
21
21
});
22
22
</script>
23
23
```
24
24
25
-
If a function is returned from`onMount`, it will be called when the component is unmounted.
25
+
Si une fonction est renvoyée par`onMount`, celle-ci sera appelée lorsque le composant sera démonté.
26
26
27
27
```svelte
28
28
<script>
@@ -38,22 +38,22 @@ If a function is returned from `onMount`, it will be called when the component i
38
38
</script>
39
39
```
40
40
41
-
> 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.
41
+
> 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_.
42
42
43
43
## `beforeUpdate`
44
44
45
45
> EXPORT_SNIPPET: svelte#beforeUpdate
46
46
47
-
Schedules a callback to run immediately before the component is updated after any state change.
47
+
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.
48
48
49
-
> The first time the callback runs will be before the initial`onMount`
49
+
> La première exécution du <spanclass="vo">[callback](/docs/development#callback)</span> se produit juste avant l'appel du`onMount` initial.
50
50
51
51
```svelte
52
52
<script>
53
53
import { beforeUpdate } from 'svelte';
54
54
55
55
beforeUpdate(() => {
56
-
console.log('the component is about to update');
56
+
console.log('le composant est sur le point de se mettre à jour');
57
57
});
58
58
</script>
59
59
```
@@ -62,16 +62,16 @@ Schedules a callback to run immediately before the component is updated after an
62
62
63
63
> EXPORT_SNIPPET: svelte#afterUpdate
64
64
65
-
Schedules a callback to run immediately after the component has been updated.
65
+
Planifie un <spanclass="vo">[callback](/docs/development#callback)</span> à exécuter immédiatement après la mise à jour du composant.
66
66
67
-
> The first time the callback runs will be after the initial`onMount`
67
+
> La première exécution du <spanclass="vo">[callback](/docs/development#callback)</span> se produit juste après l'appel du`onMount` initial.
68
68
69
-
```svelte
69
+
```sv
70
70
<script>
71
71
import { afterUpdate } from 'svelte';
72
72
73
73
afterUpdate(() => {
74
-
console.log('the component just updated');
74
+
console.log("le composant vient d'être mis à jour");
75
75
});
76
76
</script>
77
77
```
@@ -80,16 +80,16 @@ Schedules a callback to run immediately after the component has been updated.
80
80
81
81
> EXPORT_SNIPPET: svelte#onDestroy
82
82
83
-
Schedules a callback to run immediately before the component is unmounted.
83
+
Planifie un <spanclass="vo">[callback](/docs/development#callback)</span> à exécuter immédiatement avant que le composant ne soit démonté.
84
84
85
-
Out of `onMount`, `beforeUpdate`, `afterUpdate`and`onDestroy`, this is the only one that runs inside a server-side component.
85
+
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.
86
86
87
87
```svelte
88
88
<script>
89
89
import { onDestroy } from 'svelte';
90
90
91
91
onDestroy(() => {
92
-
console.log('the component is being destroyed');
92
+
console.log('le composant va être détruit');
93
93
});
94
94
</script>
95
95
```
@@ -98,16 +98,16 @@ Out of `onMount`, `beforeUpdate`, `afterUpdate` and `onDestroy`, this is the onl
98
98
99
99
> EXPORT_SNIPPET: svelte#tick
100
100
101
-
Returns a promise that resolves once any pending state changes have been applied, or in the next microtask if there are none.
101
+
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.
102
102
103
103
```svelte
104
104
<script>
105
105
import { beforeUpdate, tick } from 'svelte';
106
106
107
107
beforeUpdate(async () => {
108
-
console.log('the component is about to update');
108
+
console.log('le composant est sur le point de se mettre à jour');
109
109
await tick();
110
-
console.log('the component just updated');
110
+
console.log('le composant vient de se mettre à jour');
111
111
});
112
112
</script>
113
113
```
@@ -116,9 +116,9 @@ Returns a promise that resolves once any pending state changes have been applied
116
116
117
117
> EXPORT_SNIPPET: svelte#setContext
118
118
119
-
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`.
119
+
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`.
120
120
121
-
Like lifecycle functions, this must be called during component initialisation.
121
+
Comme les fonctions de cycle de vie, elle doit être appelée pendant l'instantiation du composant.
122
122
123
123
```svelte
124
124
<script>
@@ -128,13 +128,13 @@ Like lifecycle functions, this must be called during component initialisation.
128
128
</script>
129
129
```
130
130
131
-
> Context is not inherently reactive. If you need reactive values in context then you can pass a store into context, which _will_ be reactive.
131
+
> 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.
132
132
133
133
## `getContext`
134
134
135
135
> EXPORT_SNIPPET: svelte#getContext
136
136
137
-
Retrieves the context that belongs to the closest parent component with the specified `key`. Must be called during component initialisation.
137
+
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.
138
138
139
139
```svelte
140
140
<script>
@@ -148,14 +148,14 @@ Retrieves the context that belongs to the closest parent component with the spec
148
148
149
149
> EXPORT_SNIPPET: svelte#hasContext
150
150
151
-
Checks whether a given `key` has been set in the context of a parent component. Must be called during component initialisation.
151
+
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.
152
152
153
153
```svelte
154
154
<script>
155
155
import { hasContext } from 'svelte';
156
156
157
157
if (hasContext('answer')) {
158
-
// do something
158
+
// faites quelque chose
159
159
}
160
160
</script>
161
161
```
@@ -164,7 +164,7 @@ Checks whether a given `key` has been set in the context of a parent component.
164
164
165
165
> EXPORT_SNIPPET: svelte#getAllContexts
166
166
167
-
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.
167
+
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.
168
168
169
169
```svelte
170
170
<script>
@@ -178,9 +178,9 @@ Retrieves the whole context map that belongs to the closest parent component. Mu
178
178
179
179
> EXPORT_SNIPPET: svelte#createEventDispatcher
180
180
181
-
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`.
181
+
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`.
182
182
183
-
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.
183
+
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-bubble)</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.
184
184
185
185
```svelte
186
186
<script>
@@ -189,22 +189,22 @@ Component events created with `createEventDispatcher` create a [CustomEvent](htt
<button on:click="{() => dispatch('notify', 'detail value')}">Générer un événement</button>
193
193
```
194
194
195
-
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.
195
+
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`.
207
+
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`.
208
208
209
209
```svelte
210
210
<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.
226
+
Vous pouvez typer le générateur d'évènement pour définir quels évènements il peut recevoir. Cela rendra votre
227
+
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.
Copy file name to clipboardExpand all lines: documentation/docs/07-glossary/03-javascript.md
+4Lines changed: 4 additions & 0 deletions
Original file line number
Diff line number
Diff line change
@@ -108,3 +108,7 @@ Une valeur _nullish_ est une valeur qui est `null` ou `undefined`.
108
108
109
109
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).
0 commit comments