|
1 | 1 | ---
|
2 |
| -title: Frequently asked questions |
| 2 | +title: Foire aux questions |
3 | 3 | ---
|
4 | 4 |
|
5 |
| -## I'm new to Svelte. Where should I start? |
| 5 | +## Je débute avec Svelte. Par où commencer ? |
6 | 6 |
|
7 |
| -We think the best way to get started is playing through the interactive [tutorial](https://learn.svelte.dev/). Each step there is mainly focused on one specific aspect and is easy to follow. You'll be editing and running real Svelte components right in your browser. |
| 7 | +Nous pensons que la meilleure manière de commencer est de jouer avec le [tutoriel](https://learn.svelte.dev/) interactif. Chaque étape est principalement axée sur un aspect spécifique et est facile à suivre. Vous éditerez et exécuterez de vrais composants directement dans votre navigateur. |
8 | 8 |
|
9 |
| -Five to ten minutes should be enough to get you up and running. An hour and a half should get you through the entire tutorial. |
| 9 | +Cinq à dix minutes devraient suffire pour démarrer. Une heure et demie devrait vous permettre de parcourir entièrement le tutoriel. |
10 | 10 |
|
11 |
| -## Where can I get support? |
| 11 | +## Où puis-je obtenir de l'aide ? |
12 | 12 |
|
13 |
| -If your question is about certain syntax, the [API page](https://svelte.dev/docs) is a good place to start. |
| 13 | +Si votre question est en rapport avec une certaine syntaxe, la [page d'API](https://svelte.dev/docs) est un bon point de départ. |
14 | 14 |
|
15 |
| -Stack Overflow is a popular forum to ask code-level questions or if you’re stuck with a specific error. Read through the existing questions tagged with [Svelte](https://stackoverflow.com/questions/tagged/svelte+or+svelte-3) or [ask your own](https://stackoverflow.com/questions/ask?tags=svelte)! |
| 15 | +Stack Overflow est un forum populaire pour poser des questions liées à du code ou si vous bloquez sur une erreur spécifique. Lisez les questions existantes étiquetées avec [Svelte](https://stackoverflow.com/questions/tagged/svelte+or+svelte-3) ou [posez la votre](https://stackoverflow.com/questions/ask?tags=svelte) ! |
16 | 16 |
|
17 |
| -There are online forums and chats which are a great place for discussion about best practices, application architecture or just to get to know fellow Svelte users. [Our Discord](https://svelte.dev/chat) or [the Reddit channel](https://www.reddit.com/r/sveltejs/) are examples of that. If you have an answerable code-level question, Stack Overflow is usually a better fit. |
| 17 | +Il existe des forums en ligne pour échanger à propos des bonnes pratiques, de l'architecture d'une application ou tout simplement pour apprendre à connaître d'autres développeurs Svelte. [Le Discord anglophone](https://svelte.dev/chat), le [Discord francophone](https://discord.gg/D6Dzc5m3) ou [le canal Reddit](https://www.reddit.com/r/sveltejs/) en sont des exemples. Si vous avez une question relative à du code Svelte, Stack Overflow est probablement le meilleur endroit. |
18 | 18 |
|
19 |
| -## Are there any third-party resources? |
| 19 | +## Existe-t-il des ressources tierces ? |
20 | 20 |
|
21 |
| -Svelte Society maintains a [list of books and videos](https://sveltesociety.dev/resources). |
| 21 | +La Svelte Society maintient une [liste de livres et vidéos](https://sveltesociety.dev/resources). |
22 | 22 |
|
23 |
| -## How can I get VS Code to syntax-highlight my .svelte files? |
| 23 | +## Comment puis-je utiliser la coloration syntaxique sur mes fichiers .svelte dans VS Code ? |
24 | 24 |
|
25 |
| -There is an [official VS Code extension for Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode). |
| 25 | +Il existe une [extension VS Code officielle pour Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode). |
26 | 26 |
|
27 |
| -## Is there a tool to automatically format my .svelte files? |
| 27 | +## Existe-t-il un outil pour formater automatiquement mes fichiers .svelte ? |
28 | 28 |
|
29 |
| -You can use prettier with the [prettier-plugin-svelte](https://www.npmjs.com/package/prettier-plugin-svelte) plugin. |
| 29 | +Vous pouvez utiliser prettier avec le <span class="vo">[plugin](/docs/development#plugin)</span> [plugin-prettier-svelte](https://www.npmjs.com/package/prettier-plugin-svelte). |
30 | 30 |
|
31 |
| -## How do I document my components? |
| 31 | +## Comment documenter mes composants ? |
32 | 32 |
|
33 |
| -In editors which use the Svelte Language Server you can document Components, functions and exports using specially formatted comments. |
| 33 | +Dans les éditeurs qui utilisent le Langage Serveur Svelte (*Svelte Language Server*) vous pouvez documenter les composants, fonctions et exports à l'aide de commentaires spécialement formatés. |
34 | 34 |
|
35 |
| -````svelte |
| 35 | +```svelte |
36 | 36 | <script>
|
37 |
| - /** What should we call the user? */ |
38 |
| - export let name = 'world'; |
| 37 | + /** Comment doit-on appeler l'utilisateur ? */ |
| 38 | + export let nom = 'world'; |
39 | 39 | </script>
|
40 | 40 |
|
41 | 41 | <!--
|
42 | 42 | @component
|
43 |
| -Here's some documentation for this component. |
44 |
| -It will show up on hover. |
| 43 | +Voici une documentation pour ce composant. |
| 44 | +Elle apparaîtra au survol |
45 | 45 |
|
46 |
| -- You can use markdown here. |
47 |
| -- You can also use code blocks here. |
48 |
| -- Usage: |
| 46 | +- Vous pouvez utiliser markdown ici. |
| 47 | +- Vous pouvez également utiliser des blocs de code ici. |
| 48 | +- Utilisation: |
49 | 49 | ```tsx
|
50 |
| - <main name="Arethra"> |
| 50 | + <main nom="Arethra"> |
51 | 51 | ```
|
52 | 52 | -->
|
53 | 53 | <main>
|
54 | 54 | <h1>
|
55 |
| - Hello, {name} |
| 55 | + Salut, {nom} |
56 | 56 | </h1>
|
57 | 57 | </main>
|
58 | 58 | ````
|
59 | 59 |
|
60 |
| -Note: The `@component` is necessary in the HTML comment which describes your component. |
| 60 | +Note: Le `@component` est nécessaire dans le commentaire HTML qui décrit votre composant. |
61 | 61 |
|
62 |
| -## What about TypeScript support? |
| 62 | +## TypeScript est-il supporté ? |
63 | 63 |
|
64 |
| -You need to install a preprocessor such as [svelte-preprocess](https://github.com/sveltejs/svelte-preprocess). You can run type checking from the command line with [svelte-check](https://www.npmjs.com/package/svelte-check). |
| 64 | +Vous devez installer un pré-processeur tel que [svelte-preprocess](https://github.com/sveltejs/svelte-preprocess). Vous pouvez exécuter la vérification de type en ligne de commande avec [svelte-check](https://www.npmjs.com/package/svelte-check). |
65 | 65 |
|
66 |
| -To declare the type of a reactive variable in a Svelte template, you should use the following syntax: |
| 66 | +Pour déclarer le type d'une variable réactive dans un template Svelte, vous devez utiliser la syntaxe suivante : |
67 | 67 |
|
68 | 68 | ```ts
|
69 |
| -const count: number = 100; |
70 |
| - |
71 |
| -// ---cut--- |
72 | 69 | let x: number;
|
73 |
| -$: x = count + 1; |
| 70 | +$: x = compteur + 1; |
74 | 71 | ```
|
75 | 72 |
|
76 |
| -To import a type or interface make sure to use [TypeScript's `type` modifier](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-8.html#type-only-imports-and-export): |
| 73 | +Pour importer un type ou une interface, assurez-vous d'utiliser [le modificateur `type` de TypeScript](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-8.html#type-only-imports-and-export): |
77 | 74 |
|
78 | 75 | ```ts
|
79 |
| -// @filename: SomeFile.ts |
80 |
| -export interface SomeInterface { |
81 |
| - foo: string; |
82 |
| -} |
83 |
| - |
84 |
| -// @filename: index.ts |
85 |
| -// ---cut--- |
86 |
| -import type { SomeInterface } from './SomeFile'; |
| 76 | +import type { UneInterface } from "./UnFichier"; |
87 | 77 | ```
|
88 | 78 |
|
89 |
| -You must use the `type` modifier because `svelte-preprocess` doesn't know whether an import is a type or a value — it only transpiles one file at a time without knowledge of the other files and therefore can't safely erase imports which only contain types without this modifier present. |
| 79 | +Vous devez utiliser le modificateur `type` car `svelte-preprocess` ne sait pas si une importation est un type ou une valeur — il ne transpile qu'un seul fichier à la fois sans connaître les autres fichiers et ne peut donc pas effacer en toute sécurité les imports qui ne contiennent que des types sans ce modificateur présent. |
90 | 80 |
|
91 |
| -## Does Svelte scale? |
| 81 | +## Est-ce que l'usage de Svelte est pertinent à grande échelle ? |
92 | 82 |
|
93 |
| -There will be a blog post about this eventually, but in the meantime, check out [this issue](https://github.com/sveltejs/svelte/issues/2546). |
| 83 | +Il y aura certainement un article de blog à ce sujet, mais en attendant, consultez [cette discussion](https://github.com/sveltejs/svelte/issues/2546). |
94 | 84 |
|
95 |
| -## Is there a UI component library? |
| 85 | +## Existe-t-il une bibliothèque de composants d'interface ? |
96 | 86 |
|
97 |
| -There are several UI component libraries as well as standalone components. Find them under the [components section](https://sveltesociety.dev/components#design-systems) of the Svelte Society website. |
| 87 | +Il existe plusieurs bibliothèques de composants d'interface ainsi que des composants autonomes. Retrouvez-les dans la [section composants](https://sveltesociety.dev/components) du site de Svelte Society. |
98 | 88 |
|
99 |
| -## How do I test Svelte apps? |
| 89 | +## Comment tester mes applications Svelte ? |
100 | 90 |
|
101 |
| -How your application is structured and where logic is defined will determine the best way to ensure it is properly tested. It is important to note that not all logic belongs within a component - this includes concerns such as data transformation, cross-component state management, and logging, among others. Remember that the Svelte library has its own test suite, so you do not need to write tests to validate implementation details provided by Svelte. |
| 91 | +La façon dont votre application est structurée et l'endroit où la logique est définie vont déterminer la meilleure façon de s'assurer qu'elle est correctement testée. Il est important de comprendre que certaines logiques ne devraient pas être définies dans un composant — notamment les sujets de transformation de données, de gestion d'état inter-composants, et l'affichage de <span class="vo">[logs](/docs/development#log)</span>, entre autres. Ayez en tête que la librairie Svelte a sa propre suite de tests, vous n'avez donc pas besoin d'écrire des tests pour vérifier les détails d'implémentation fournis par Svelte. |
102 | 92 |
|
103 |
| -A Svelte application will typically have three different types of tests: Unit, Component, and End-to-End (E2E). |
| 93 | +Une application Svelte aura généralement trois types différents de tests : Unitaires, Composants et <span class="vo">[end to end](/docs/development#end-to-end)<span> (E2E) |
104 | 94 |
|
105 |
| -_Unit Tests_: Focus on testing business logic in isolation. Often this is validating individual functions and edge cases. By minimizing the surface area of these tests they can be kept lean and fast, and by extracting as much logic as possible from your Svelte components more of your application can be covered using them. When creating a new SvelteKit project, you will be asked whether you would like to setup [Vitest](https://vitest.dev/) for unit testing. There are a number of other test runners that could be used as well. |
| 95 | +_Tests Unitaires_ : Servent à tester la logique métier en isolation. Souvent il s'agit de valider des fonction individuelles et des cas particuliers. Minimiser la surface de ces tests permet de les garder légers et rapides, et extraire un maximum de logique de vos composants Svelte vous permet d'augmenter le nombre de ce type de tests pour couvrir votre application. Lorsque vous créez un nouveau projet SvelteKit, vous avez la possibilité de choisir d'installer [Vitest](https://vitest.dev/) pour les tests unitaires. D'autres moteurs de tests pourraient être également utilisés. |
106 | 96 |
|
107 |
| -_Component Tests_: Validating that a Svelte component mounts and interacts as expected throughout its lifecycle requires a tool that provides a Document Object Model (DOM). Components can be compiled (since Svelte is a compiler and not a normal library) and mounted to allow asserting against element structure, listeners, state, and all the other capabilities provided by a Svelte component. Tools for component testing range from an in-memory implementation like jsdom paired with a test runner like [Vitest](https://vitest.dev/) to solutions that leverage an actual browser to provide a visual testing capability such as [Playwright](https://playwright.dev/docs/test-components) or [Cypress](https://www.cypress.io/). |
| 97 | +_Tests de composant_ : Vérifier qu'un composant Svelte s'instancie et réagit comme prévu aux interactions au cours de sa vie nécessite un outil qui fournit un <span class="vo">[DOM](/docs/web#dom)</span>. Les composants peuvent être compilés (puisque Svelte est un compilateur et non une simple librairie) et montés pour permettre de vérifier la structure de l'élément, les gestionnaires d'évènements, l'état, et les autres fonctionnalités offertes par un composant Svelte. Les outils de test de composant vont d'une implémentation en mémoire type [jsdom](https://www.npmjs.com/package/jsdom) couplée à un moteur de test type [Vitest](https://vitest.dev/), à des solutions qui utilisent de vrais navigateurs pour fournir des fonctionnalités de tests visuels comme [Playwright](https://playwright.dev/docs/test-components) ou [Cypress](https://www.cypress.io/). |
108 | 98 |
|
109 |
| -_End-to-End Tests_: To ensure your users are able to interact with your application it is necessary to test it as a whole in a manner as close to production as possible. This is done by writing end-to-end (E2E) tests which load and interact with a deployed version of your application in order to simulate how the user will interact with your application. When creating a new SvelteKit project, you will be asked whether you would like to setup [Playwright](https://playwright.dev/) for end-to-end testing. There are many other E2E test libraries available for use as well. |
| 99 | +_Tests <span class="vo">[end to end](/docs/development#end-to-end)</span>_ : Pour vous assurer que votre application fonctionne comme prévu dans des cas réels d'utilisation, il est nécessaire de la tester d'une manière la plus proche possible de la production. Cela se fait avec des tests dits <span class="vo">[end to end](/docs/development#end-to-end)</span> (E2E) qui chargent et interagissent avec une version déployée de votre application afin de simuler les interactions utilisateur. Lorsque vous créez un nouveau projet SvelteKit, vous avez la possibilité de choisir d'installer [Playwright](https://playwright.dev/) pour les tests <span class="vo">[end to end](/docs/development#end-to-end)</span>. Il existe également d'autres librairies de tests E2E. |
110 | 100 |
|
111 |
| -Some resources for getting started with testing: |
| 101 | +Quelques ressources pour démarrer avec les tests unitaires : |
112 | 102 |
|
113 | 103 | - [Svelte Testing Library](https://testing-library.com/docs/svelte-testing-library/example/)
|
114 |
| -- [Svelte Component Testing in Cypress](https://docs.cypress.io/guides/component-testing/svelte/overview) |
115 |
| -- [Example using vitest](https://github.com/vitest-dev/vitest/tree/main/examples/svelte) |
116 |
| -- [Example using uvu test runner with JSDOM](https://github.com/lukeed/uvu/tree/master/examples/svelte) |
117 |
| -- [Test Svelte components using Vitest & Playwright](https://davipon.hashnode.dev/test-svelte-component-using-vitest-playwright) |
118 |
| -- [Component testing with WebdriverIO](https://webdriver.io/docs/component-testing/svelte) |
| 104 | +- [Tests de composants Svelte avec Cypress](https://docs.cypress.io/guides/component-testing/svelte/overview) |
| 105 | +- [Exemple utilisant vitest](https://github.com/vitest-dev/vitest/tree/main/examples/svelte) |
| 106 | +- [Exemple utilisant uvu avec JSDOM](https://github.com/lukeed/uvu/tree/master/examples/svelte) |
| 107 | +- [Tests de composants Svelte Vitest et Playwright](https://davipon.hashnode.dev/test-svelte-component-using-vitest-playwright) |
| 108 | +- [Tests de composants avec WebdriverIO](https://webdriver.io/docs/component-testing/svelte) |
119 | 109 |
|
120 |
| -## Is there a router? |
| 110 | +## Un routeur est-il intégré ? |
121 | 111 |
|
122 |
| -The official routing library is [SvelteKit](https://kit.svelte.dev/). SvelteKit provides a filesystem router, server-side rendering (SSR), and hot module reloading (HMR) in one easy-to-use package. It shares similarities with Next.js for React. |
| 112 | +La bibliothèque officielle de <span class="vo">[routing](/docs/web#route)</span> est [SvelteKit](https://kit.svelte.dev/). Sveltekit fournit un routeur basé sur le système de fichier, un rendu coté serveur (SSR) et un rechargement automatique de module (HMR) en une seule librairie facile à utiliser. Il est similaire à Next.js pour React. |
123 | 113 |
|
124 |
| -However, you can use any router library. A lot of people use [page.js](https://github.com/visionmedia/page.js). There's also [navaid](https://github.com/lukeed/navaid), which is very similar. And [universal-router](https://github.com/kriasoft/universal-router), which is isomorphic with child routes, but without built-in history support. |
| 114 | +Toutefois, vous pouvez utiliser n'importe quelle bibliothèque de routage de votre choix. Beaucoup de gens utilisent [page.js](https://github.com/visionmedia/page.js). Il y a aussi [navaid](https://github.com/lukeed/navaid), qui est très similaire. Et [universal-router](https://github.com/kriasoft/universal-router), qui est isomorphe avec les routes enfants, mais sans prise en charge intégrée de l'historique. |
125 | 115 |
|
126 |
| -If you prefer a declarative HTML approach, there's the isomorphic [svelte-routing](https://github.com/EmilTholin/svelte-routing) library and a fork of it called [svelte-navigator](https://github.com/mefechoel/svelte-navigator) containing some additional functionality. |
| 116 | +Si vous préférez une approche HTML déclarative, il existe la bibliothèque isomorphe [svelte-routing](https://github.com/EmilTholin/svelte-routing) et un fork appelé [svelte-navigator](https://github. com/mefechoel/svelte-navigator) contenant des fonctionnalités supplémentaires. |
127 | 117 |
|
128 |
| -If you need hash-based routing on the client side, check out [svelte-spa-router](https://github.com/ItalyPaleAle/svelte-spa-router) or [abstract-state-router](https://github.com/TehShrike/abstract-state-router/). |
| 118 | +Si vous avez besoin d'un routage basé sur le hachage côté client, consultez [svelte-spa-router](https://github.com/ItalyPaleAle/svelte-spa-router) ou [abstract-state-router](https://github.com/TehShrike/abstract-state-router/). |
129 | 119 |
|
130 |
| -[Routify](https://routify.dev) is another filesystem-based router, similar to SvelteKit's router. Version 3 supports Svelte's native SSR. |
| 120 | +[Routify](https://routify.dev) est un autre routeur basé sur l'arborescence de fichiers, similaire au routeur de SvelteKit. La version 3 supporte le rendu côté serveur natif de Svelte. |
131 | 121 |
|
132 |
| -You can see a [community-maintained list of routers on sveltesociety.dev](https://sveltesociety.dev/components#routers). |
| 122 | +Vous pouvez trouver une [liste de routeurs maintenus par la communauté sur sveltesociety.dev](https://sveltesociety.dev/components#routers). |
133 | 123 |
|
134 |
| -## Is Svelte v2 still available? |
| 124 | +## La version 2 de Svelte est-elle toujours disponible ? |
135 | 125 |
|
136 |
| -New features aren't being added to it, and bugs will probably only be fixed if they are extremely nasty or present some sort of security vulnerability. |
| 126 | +Nous n'y ajoutons pas de nouvelles fonctionnalités, et les bugs ne seront probablement corrigés que s'ils sont extrêmement dangereux ou présentent une sorte de vulnérabilité de sécurité. |
137 | 127 |
|
138 |
| -The documentation is still available [here](https://v2.svelte.dev/guide). |
| 128 | +La documentation est toujours disponible [ici](https://v2.svelte.dev/guide). |
139 | 129 |
|
140 |
| -## How do I do hot module reloading? |
| 130 | +## Comment puis-je recharger un module automatiquement ? |
141 | 131 |
|
142 |
| -We recommend using [SvelteKit](https://kit.svelte.dev/), which supports HMR out of the box and is built on top of [Vite](https://vitejs.dev/) and [svelte-hmr](https://github.com/sveltejs/svelte-hmr). There are also community plugins for [rollup](https://github.com/rixo/rollup-plugin-svelte-hot) and [webpack](https://github.com/sveltejs/svelte-loader). |
| 132 | +Nous vous recommandons d'utiliser [SvelteKit](https://kit.svelte.dev/), qui prend en charge le rechargement automatique (HMR) prêt à l'emploi et est construit avec [Vite](https://vitejs.dev/) et [svelte-hmr](https://github.com/sveltejs/svelte-hmr). Il existe également des <span class="vo">[plugins](/docs/development#plugin)</span> communautaires pour [rollup](https://github.com/rixo/rollup-plugin-svelte-hot) et [webpack](https://github.com/sveltejs/svelte-loader). |
0 commit comments