Skip to content

Commit 5e637c3

Browse files
bleucitronEnnoriel
andauthored
4.4 (#25)
* docs: 4.4 * docs: 4.5.1 * docs: 4.5.2 * docs: 4.5.3 * docs: 4.5.x * docs: 4.6.1 * docs: 4.6.2 * docs: 4.6.3 * docs: 4.6.4 * docs: 4.7 * Apply suggestions from code review Co-authored-by: Maxime Dupont <[email protected]> * Update content/tutorial/04-advanced-sveltekit/04-advanced-routing/05-breaking-out-of-layouts/README.md Co-authored-by: Maxime Dupont <[email protected]> * Update content/tutorial/04-advanced-sveltekit/05-advanced-loading/01-universal-load-functions/README.md * fix: replace ? by . * fix: site links --------- Co-authored-by: Maxime Dupont <[email protected]>
1 parent 805b270 commit 5e637c3

File tree

57 files changed

+181
-177
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

57 files changed

+181
-177
lines changed
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,28 @@
11
---
2-
title: Optional parameters
2+
title: Paramètres optionels
33
---
44

5-
In the first chapter on [routing](/tutorial/pages), we learned how to create routes with [dynamic parameters](/tutorial/params).
5+
Dans le premier chapitre sur le [routing](/tutorial/pages), nous avons vu comment créer des route avec des [paramètres dynamiques](/tutorial/params).
66

7-
Sometimes it's helpful to make a parameter optional. A classic example is when you use the pathname to determine the locale — `/fr/...`, `/de/...` and so on — but you also want to have a default locale.
7+
Il est parfois utile de rendre un paramètre optionnel. Un exemple classique est lorsque vous utilisez un chemin pour déterminer la langue - `/fr/...`, `/de/...` et ainsi de suite — mais vous souhaitez également avoir une langue par défaut.
88

9-
To do that, we use double brackets. Rename the `[lang]` directory to `[[lang]]`.
9+
Pour faire cela, nous utilisons les crochets doubles. Renommez le dossier `[lang]` en `[[lang]]`.
1010

11-
The app now fails to build, because `src/routes/+page.svelte` and `src/routes/[[lang]]/+page.svelte` would both match `/`. Delete `src/routes/+page.svelte`. (You may need to reload the app to recover from the error page).
11+
L'application ne parvient plus à compiler, car les routes `src/routes/+page.svelte` et `src/routes/[[lang]]/+page.svelte` satisfont toutes les deux `/`. Supprimez la route `src/routes/+page.svelte` (il est possible que vous ayez besoin de recharger l'application pour annuler la page d'erreur).
1212

13-
Lastly, edit `src/routes/[[lang]]/+page.server.js` to specify the default locale:
13+
Enfin, modifiez `src/routes/[[lang]]/+page.server.js` pour préciser la langue par défaut :
1414

1515
```js
1616
/// file: src/routes/[[lang]]/+page.server.js
1717
const greetings = {
1818
en: 'hello!',
1919
de: 'hallo!',
20-
fr: 'bonjour!'
20+
fr: 'bonjour !'
2121
};
2222

2323
export function load({ params }) {
2424
return {
25-
greeting: greetings[params.lang +++?? 'en'+++]
25+
greeting: greetings[params.lang +++?? 'fr'+++]
2626
};
2727
}
2828
```
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<nav>
2-
<a href="/">default</a>
3-
<a href="/en">english</a>
4-
<a href="/de">german</a>
5-
<a href="/fr">french</a>
2+
<a href="/">par défaut</a>
3+
<a href="/en">anglais</a>
4+
<a href="/de">allemand</a>
5+
<a href="/fr">français</a>
66
</nav>
77

88
<slot />
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<h1>hello!</h1>
1+
<h1>bonjour !</h1>

content/tutorial/04-advanced-sveltekit/04-advanced-routing/01-optional-params/app-a/src/routes/[lang]/+page.server.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
const greetings = {
22
en: 'hello!',
33
de: 'hallo!',
4-
fr: 'bonjour!'
4+
fr: 'bonjour !'
55
};
66

77
export function load({ params }) {
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
const greetings = {
22
en: 'hello!',
33
de: 'hallo!',
4-
fr: 'bonjour!'
4+
fr: 'bonjour !'
55
};
66

77
export function load({ params }) {
88
return {
9-
greeting: greetings[params.lang ?? 'en']
9+
greeting: greetings[params.lang ?? 'fr']
1010
};
1111
}
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
---
2-
title: Rest parameters
2+
title: Paramètres du reste
33
path: /how
44
focus: /src/routes/[path]/+page.svelte
55
---
66

7-
To match an unknown number of path segments, use a `[...rest]` parameter, so named for its resemblance to [rest parameters in JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters).
7+
Pour cibler un nombre indéfini de segments, utilisez un paramètre `[...rest]`, appelé ainsi pour sa ressemblance avec les [paramètres du reste en JavaScript](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Functions/rest_parameters) (**rest parameters** en anglais).
88

9-
Rename `src/routes/[path]` to `src/routes/[...path]`. The route now matches any path.
9+
Renommez `src/routes/[path]` en `src/routes/[...path]`. La route cible maintenant n'importe quel chemin.
1010

11-
> Other, more specific routes will be tested first, making rest parameters useful as 'catch-all' routes. For example, if you needed a custom 404 page for pages inside `/categories/...`, you could add these files:
11+
> D'autres routes, plus spécifiques, seront d'abord testées, rendant les paramètres du reste efficaces en tant que routes "attrape-tout". Par exemple, si vous aviez besoin d'une page 404 personnalisée dans `/categories/...`, vous pourriez ajouter ces fichiers :
1212
>
1313
> ```diff
1414
> src/routes/
@@ -21,6 +21,6 @@ Rename `src/routes/[path]` to `src/routes/[...path]`. The route now matches any
2121
> +│ │ └ +page.server.js
2222
> ```
2323
>
24-
> Inside the `+page.server.js` file, `throw error(404)` inside `load`.
24+
> dans le fichier `+page.server.js`, ajoutez `throw error(404)` dans la fonction `load`.
2525
26-
Rest parameters do _not_ need to go at the end — a route like `/items/[...path]/edit` or `/items/[...path].json` is totally valid.
26+
Les paramètres du reste n'ont _pas_ besoin d'être définis en dernier — une route comme `/items/[...path]/edit` ou `/items/[...path].json` est totalement valide.

content/tutorial/04-advanced-sveltekit/04-advanced-routing/02-rest-params/app-a/src/routes/[path]/+page.svelte

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<script>
22
import { page } from '$app/stores';
33
4-
let words = ['how', 'deep', 'does', 'the', 'rabbit', 'hole', 'go'];
4+
let words = ['on', 'descend', 'avec','le', 'lapin', 'blanc' ,'au', 'fond' ,'du', 'gouffre'];
55
66
$: depth = $page.params.path.split('/').filter(Boolean).length;
77
$: next = depth === words.length ? '/' : `/${words.slice(0, depth + 1).join('/')}`;
@@ -12,7 +12,7 @@
1212
<p>{word}</p>
1313
{/each}
1414

15-
<p><a href={next}>{words[depth] ?? '?'}</a></p>
15+
<p><a href={next}>{words[depth] ?? '.'}</a></p>
1616
</div>
1717

1818
<style>

content/tutorial/04-advanced-sveltekit/04-advanced-routing/02-rest-params/app-b/src/routes/[...path]/+page.svelte

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<script>
22
import { page } from '$app/stores';
33
4-
let words = ['how', 'deep', 'does', 'the', 'rabbit', 'hole', 'go'];
4+
let words = ['on', 'descend', 'avec','le', 'lapin', 'blanc' ,'au', 'fond' ,'du', 'gouffre'];
55
66
$: depth = $page.params.path.split('/').filter(Boolean).length;
77
$: next = depth === words.length ? '/' : `/${words.slice(0, depth + 1).join('/')}`;
@@ -12,7 +12,7 @@
1212
<p>{word}</p>
1313
{/each}
1414

15-
<p><a href={next}>{words[depth] ?? '?'}</a></p>
15+
<p><a href={next}>{words[depth] ?? '.'}</a></p>
1616
</div>
1717

1818
<style>
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
---
2-
title: Param matchers
2+
title: Validateurs de paramètres
33
path: /colors/ff3e00
44
---
55

6-
To prevent the router from matching on invalid input, you can specify a _matcher_. For example, you might want a route like `/colors/[value]` to match hex values like `/colors/ff3e00` but not named colors like `/colors/octarine` or any other arbitrary input.
6+
Pour éviter que le router reconnaisse des routes avec un paramètre invalide, vous pouvez préciser un _validateur_. Par exemple, vous pourriez vouloir une route comme `/colors/[value]` pour cibler les valeurs hexadécimales comme `/colors/ff3e00` mais pas les couleurs nommées comme `/colors/octarine`, ou tout autre valeur arbitraire.
77

8-
First, create a new file called `src/params/hex.js` and export a `match` function from it:
8+
Commencez par créer un nouveau fichier appelé `src/params/hex.js` et exportez-y une fonction `match` :
99

1010
```js
1111
/// file: src/params/hex.js
@@ -14,8 +14,8 @@ export function match(value) {
1414
}
1515
```
1616

17-
Then, to use the new matcher, rename `src/routes/colors/[color]` to `src/routes/colors/[color=hex]`.
17+
Ensuite, pour utiliser le nouveau validateur, renommez `src/routes/colors/[color]` en `src/routes/colors/[color=hex]`.
1818

19-
Now, whenever someone navigates to that route, SvelteKit will verify that `color` is a valid `hex` value. If not, SvelteKit will try to match other routes, before eventually returning a 404.
19+
À partir de maintenant, lorsque quelqu'un navigue vers cette route, SvelteKit va vérifier que `color` est une valeur `hex` valide. Si ce n'est pas le cas, SvelteKit va essayer de cibler d'autres routes, avant éventuellement de renvoyer une erreur 404.
2020

21-
> Matchers run both on the server and in the browser.
21+
> Les validateurs sont exécutés à la fois sur le serveur et sur le navigateur.
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<h1>color picker</h1>
1+
<h1>palette de couleur</h1>
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
---
2-
title: Route groups
2+
title: Routes groupées
33
---
44

5-
As we saw in the [routing introduction](/tutorial/layouts), layouts are a way to share UI and data loading logic between different routes.
5+
Comme nous l'avons vu dans l'[introduction sur le routing](/tutorial/layouts), les <span class="vo">[layouts](PUBLIC_SVELTE_SITE_URL/docs/web#layout)</span> permettent de partager de l'interface et du chargement de données entre différentes routes.
66

7-
Sometimes it's useful to use layouts without affecting the route — for example, you might need your `/app` and `/account` routes to be behind authentication, while your `/about` page is open to the world. We can do this with a _route group_, which is a directory in parentheses.
7+
Il est parfois pratique d'utiliser des <span class="vo">[layouts](PUBLIC_SVELTE_SITE_URL/docs/web#layout)</span> sans affecter la route — par exemple, vous pourriez avoir besoin que vos routes `/app` et `/account` soient derrière une authentification, tandis que votre page `/about` reste accessible par tout le monde. Vous pouvez faire cela avec un _groupe de routes_, qui est un dossier entre parenthèses.
88

9-
Create an `(authed)` group by renaming `account` to `(authed)/account` then renaming `app` to `(authed)/app`.
9+
Créez un groupe `(authed)` en renommant `account` en `(authed)/account` puis renommez `app` en `(authed)/app`.
1010

11-
Now we can control access to these routes by creating `src/routes/(authed)/+layout.server.js`:
11+
Nous pouvons maintenant contrôler l'accès à ces routes en créant `src/routes/(authed)/+layout.server.js` :
1212

1313
```js
1414
/// file: src/routes/(authed)/+layout.server.js
@@ -21,15 +21,15 @@ export function load({ cookies, url }) {
2121
}
2222
```
2323

24-
If you try to visit these pages, you'll be redirected to the `/login` route, which has a form action in `src/routes/login/+page.server.js` that sets the `logged_in` cookie.
24+
Si vous essayez de visiter ces pages, vous serez redirigés vers la route `/login`, qui contient une action de formulaire dans `src/routes/login/+page.server.js` permettant de définir le cookie `logged_in`.
2525

26-
We can also add some UI to these two routes by adding a `src/routes/(authed)/+layout.svelte` file:
26+
Nous pouvez aussi ajouter de l'interface pour ces deux routes en ajoutant un fichier `src/routes/(authed)/+layout.svelte` :
2727

2828
```svelte
2929
/// file: src/routes/(authed)/+layout.svelte
3030
<slot />
3131
3232
<form method="POST" action="/logout">
33-
<button>log out</button>
33+
<button>se déconnecter</button>
3434
</form>
3535
```
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<nav>
2-
<a href="/">home</a>
3-
<a href="/about">about</a>
4-
<a href="/account">account</a>
5-
<a href="/app">app</a>
2+
<a href="/">accueil</a>
3+
<a href="/about">à propos</a>
4+
<a href="/account">compte</a>
5+
<a href="/app">application</a>
66
</nav>
77

88
<slot />
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
<h1>home</h1>
1+
<h1>accueil</h1>
22

3-
<p>this is the home page.</p>
3+
<p>ceci est la page d'accueil.</p>
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
<h1>about</h1>
1+
<h1>à propos</h1>
22

3-
<p>this is the about page.</p>
3+
<p>ceci est la page À propos.</p>
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
<h1>account</h1>
1+
<h1>compte</h1>
22

3-
<p>this is the account page</p>
3+
<p>ceci est la page de compte</p>
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
<h1>app</h1>
1+
<h1>application</h1>
22

3-
<p>this is the app</p>
3+
<p>ceci est l'application</p>
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
<h1>log in</h1>
1+
<h1>connexion</h1>
22

33
<form method="POST">
4-
<button>log in</button>
4+
<button>se connecter</button>
55
</form>
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<slot />
22

33
<form method="POST" action="/logout">
4-
<button>log out</button>
4+
<button>se déconnecter</button>
55
</form>
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
<h1>account</h1>
1+
<h1>compte</h1>
22

3-
<p>this is the account page</p>
3+
<p>ceci est la page de compte</p>
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
<h1>app</h1>
1+
<h1>application</h1>
22

3-
<p>this is the app</p>
3+
<p>ceci est l'application</p>
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
<h1>account</h1>
1+
<h1>compte</h1>
22

3-
<p>this is the account page</p>
3+
<p>ceci est la page de compte</p>
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
<h1>account</h1>
1+
<h1>application</h1>
22

3-
<p>this is the account page</p>
3+
<p>ceci est l'application</p>
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,19 @@
11
---
2-
title: Breaking out of layouts
2+
title: Ignorer des layouts
33
---
44

5-
Ordinarily, a page inherits every layout above it, meaning that `src/routes/a/b/c/+page.svelte` inherits four layouts:
5+
D'habitude, une page hérite de tous ses <span class="vo">[layouts](PUBLIC_SVELTE_SITE_URL/docs/web#layout)</span> parents, ce qui implique que la route `src/routes/a/b/c/+page.svelte` hérite de quatre <span class="vo">[layouts](PUBLIC_SVELTE_SITE_URL/docs/web#layout)</span> :
66

77
- `src/routes/+layout.svelte`
88
- `src/routes/a/+layout.svelte`
99
- `src/routes/a/b/+layout.svelte`
1010
- `src/routes/a/b/c/+layout.svelte`
1111

12-
Occasionally, it's useful to break out of the current layout hierarchy. We can do that by adding the `@` sign followed by the name of the parent segment to 'reset' to — for example `[email protected]` would put `/a/b/c` inside `src/routes/a/b/+layout.svelte`, while `[email protected]` would put it inside `src/routes/a/+layout.svelte`.
12+
Occasionnellement, c'est utile d'ignorer la hiérarchie de <span class="vo">[layouts](PUBLIC_SVELTE_SITE_URL/docs/web#layout)</span> courante. Nous pouvons faire cela en ajoutant le symbole `@` suivi du nom du segment parent servant de nouvelle "base". Par exemple, prenons le fichier de page de la route `src/routes/a/b/c` ; si on le nomme :
13+
- `+page.svelte`, il utilise les layouts des répertoires `a`, `a/b`, et `a/b/c`
14+
- `[email protected]`, il utilise les layouts des répertoires `a` et `a/b`, mais *pas* de `a/b/c`
15+
- `[email protected]`, il utilise le layout du répertoire `a`, mais *pas* de `a/b/c`, *ni* de `a/b`
1316

14-
Let's reset it all the way to the root layout, by renaming it to `[email protected]`.
17+
Réinitialisons le <span class="vo">[layout](PUBLIC_SVELTE_SITE_URL/docs/web#layout)</span> jusqu'au layout racine, en renommant le fichier `[email protected]`.
1518

16-
> The root layout applies to every page of your app, you cannot break out of it.
19+
> Le <span class="vo">[layout](PUBLIC_SVELTE_SITE_URL/docs/web#layout)</span> racine s'applique à toutes les pages de votre application, vous ne pouvez pas y échapper.

content/tutorial/04-advanced-sveltekit/04-advanced-routing/05-breaking-out-of-layouts/app-a/src/routes/+layout.svelte

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<nav>
2-
<a href="/">home</a>
2+
<a href="/">accueil</a>
33
<a href="/a">a</a>
44
<a href="/a/b">a/b</a>
55
<a href="/a/b/c">a/b/c</a>
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<h1>home</h1>
1+
<h1>accueil</h1>
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
{
2-
"title": "Advanced routing"
2+
"title": "Routing avancé"
33
}
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,37 @@
11
---
2-
title: Universal load functions
2+
title: Fonctions load universelles
33
---
44

5-
In the [previous section on loading](page-data) we loaded data from the server using `+page.server.js` and `+layout.server.js` files. This is very convenient if you need to do things like getting data directly from a database, or reading cookies.
5+
Dans le [précédent chapitre sur le chargement](page-data), nous avons chargé de la donnée depuis le serveur en utilisant les fichiers `+page.server.js` et `+layout.server.js`. Cette méthode est très pratique si vous avez besoin d'accéder directement à une base de données, ou de lire des cookies.
66

7-
Sometimes it doesn't make sense to load data from the server when doing a client-side navigation. For example:
7+
Parfois, charger de la donnée depuis le serveur lors d'une navigation côté client n'a pas vraiment de sens. Par exemple :
88

9-
- You're loading data from an external API
10-
- You want to use in-memory data if it's available
11-
- You want to delay navigation until an image has been preloaded, to avoid pop-in
12-
- You need to return something from `load` that can't be serialized (SvelteKit uses [devalue](https://github.com/Rich-Harris/devalue) to turn server data into JSON), such as a component or a store
9+
- Vous chargez de la donnée depuis une <span class="vo">[API](PUBLIC_SVELTE_SITE_URL/docs/development#api)</span> externe
10+
- Vous voulez utiliser de la donnée en mémoire du navigateur, si disponible
11+
- Vous voulez retarder la navigation jusqu'à ce qu'une image ait été chargée, pour éviter de la faire apparaître brusquement
12+
- Vous avez besoin de renvoyer quelque chose depuis `load` qui ne peut pas être sérialisé (SvelteKit utilise [devalue](https://github.com/Rich-Harris/devalue) pour transformer la donnée du serveur en <span class="vo">[JSON](PUBLIC_SVELTE_SITE_URL/docs/web#json)</span>), comme un composant ou un <span class="vo">[store](PUBLIC_SVELTE_SITE_URL/docs/sveltejs#store)</span>
1313

14-
In this exercise, we're dealing with the latter case. The server `load` functions in `src/routes/red/+page.server.js`, `src/routes/green/+page.server.js` and `src/routes/blue/+page.server.js` return a `component` constructor, which can't be serialized like data. If you navigate to `/red`, `/green` or `/blue`, you'll see a 'Data returned from `load` ... is not serializable' error in the terminal.
14+
Dans cet exercice, nous avons à faire au dernier cas. Les fonction `load` de serveur dans `src/routes/red/+page.server.js`, `src/routes/green/+page.server.js` et `src/routes/blue/+page.server.js` renvoient un constructeur `component`, qui ne peut pas être sérialisé comme de la donnée. Si vous naviguez vers `/red`, `/green` ou `/blue`, vous verrez apparaître dans le terminal l'erreur "Data returned from `load` ... is not serializable" (_La donnée ... renvoyée par `load` n'est pas sérialisable_).
1515

16-
To turn the server `load` functions into universal `load` functions, rename each `+page.server.js` file to `+page.js`. Now, the functions will run on the server during server-side rendering, but will also run in the browser when the app hydrates or the user performs a client-side navigation.
16+
Pour transformer les fonctions `load` de serveur en fonctions `load` universelles, renommez chaque fichier `+page.server.js` en `+page.js`. Désormais, les fonctions `load` seront exécutées sur le serveur lors du rendu côté serveur, mais elles seront également exécutées dans le navigateur lorsque l'application est hydratée, ou lorsque l'utilisateur ou l'utilisatrice déclenche une navigation côté client.
1717

18-
We can now use the `component` returned from these `load` functions like any other value, including in `src/routes/+layout.svelte`:
18+
Nous pouvons maintenant utiliser la valeur `component` renvoyée par ces fonctions `load` comme n'importe quelle autre valeur, même dans `src/routes/+layout.svelte` :
1919

2020
```svelte
2121
/// file: src/routes/+layout.svelte
2222
<nav
2323
class:has-color={!!$page.data.color}
2424
style:background={$page.data.color ?? 'var(--bg-2)'}
2525
>
26-
<a href="/">home</a>
27-
<a href="/red">red</a>
28-
<a href="/green">green</a>
29-
<a href="/blue">blue</a>
26+
<a href="/">accueil</a>
27+
<a href="/red">rouge</a>
28+
<a href="/green">vert</a>
29+
<a href="/blue">bleu</a>
3030
3131
+++ {#if $page.data.component}
3232
<svelte:component this={$page.data.component} />
3333
{/if}+++
3434
</nav>
3535
```
3636

37-
Read the [documentation](https://kit.svelte.dev/docs/load#universal-vs-server) to learn more about the distinction between server `load` functions and universal `load` functions, and when to use which.
37+
Rendez-vous dans la [documentation](PUBLIC_KIT_SITE_URL/docs/load#universal-vs-server) pour en apprendre plus sur la différence entre une fonction `load` de serveur et une fonction `load` universelle, ainsi que les cas d'usage de chacune.

0 commit comments

Comments
 (0)