Examples

documentation/examples/00-introduction/00-hello-world/App.svelte

@@ -1,5 +1,5 @@
 <script>
-	let name = 'world';
+	let name = "tout le monde";
 </script>
 
-<h1>Hello {name}!</h1>
+<h1>Bonjour {name} !</h1>

documentation/examples/00-introduction/00-hello-world/meta.json

@@ -1,3 +1,3 @@
 {
-	"title": "Hello world"
-}
+	"title": "Bonjour tout le monde"
+}

documentation/examples/00-introduction/01-dynamic-attributes/App.svelte

@@ -1,7 +1,7 @@
 <script>
-	let src = '/tutorial/image.gif';
-	let name = 'Rick Astley';
+	let src = "/tutorial/image.gif";
+	let name = "Rick Astley";
 </script>
 
-<!-- {src} is short for src={src} -->
-<img {src} alt="{name} dancing" />
+<!-- {src} est le raccourci de src={src} -->
+<img {src} alt="{name} danse" />

documentation/examples/00-introduction/01-dynamic-attributes/meta.json

@@ -1,3 +1,3 @@
 {
-	"title": "Dynamic attributes"
-}
+	"title": "Attributs dynamiques"
+}

documentation/examples/00-introduction/02-styling/App.svelte

@@ -1,9 +1,9 @@
-<p>Styled!</p>
+<p>Stylisé !</p>
 
 <style>
 	p {
 		color: purple;
-		font-family: 'Comic Sans MS', cursive;
+		font-family: "Comic Sans MS", cursive;
 		font-size: 2em;
 	}
 </style>

documentation/examples/00-introduction/02-styling/meta.json

@@ -1,3 +1,3 @@
 {
-	"title": "Styling"
-}
+	"title": "Style"
+}

documentation/examples/00-introduction/03-nested-components/App.svelte

@@ -1,14 +1,14 @@
 <script>
-	import Nested from './Nested.svelte';
+	import Nested from "./Nested.svelte";
 </script>
 
-<p>These styles...</p>
+<p>Ce style...</p>
 <Nested />
 
 <style>
 	p {
 		color: purple;
-		font-family: 'Comic Sans MS', cursive;
+		font-family: "Comic Sans MS", cursive;
 		font-size: 2em;
 	}
 </style>

documentation/examples/00-introduction/03-nested-components/Nested.svelte

@@ -1 +1 @@
-<p>...don't affect this element</p>
+<p>...n'affecte pas cet élément</p>

documentation/examples/00-introduction/03-nested-components/meta.json

@@ -1,3 +1,3 @@
 {
-	"title": "Nested components"
-}
+	"title": "Composants imbriqués"
+}

documentation/examples/00-introduction/04-html-tags/App.svelte

@@ -1,5 +1,5 @@
 <script>
-	let string = `here's some <strong>HTML!!!</strong>`;
+	let string = `voici du <strong>HTML !!!</strong>`;
 </script>
 
 <p>{@html string}</p>

documentation/examples/00-introduction/04-html-tags/meta.json

@@ -1,3 +1,3 @@
 {
-	"title": "HTML tags"
+	"title": "Balises HTML"
 }

documentation/examples/01-reactivity/00-reactive-assignments/App.svelte

@@ -7,6 +7,5 @@
 </script>
 
 <button on:click={handleClick}>
-	Clicked {count}
-	{count === 1 ? 'time' : 'times'}
+	{count} {count === 1 ? "clic" : "clics"}
 </button>

documentation/examples/01-reactivity/00-reactive-assignments/meta.json

@@ -1,3 +1,3 @@
 {
-	"title": "Reactive assignments"
-}
+	"title": "Assignations réactives"
+}

documentation/examples/01-reactivity/01-reactive-declarations/App.svelte

@@ -1,7 +1,7 @@
 <script>
 	let count = 1;
 
-	// the `$:` means 're-run whenever these values change'
+	// Le symbole `$:` signifie "ré-exécute dès qu'une valeur change"
 	$: doubled = count * 2;
 	$: quadrupled = doubled * 2;
 
@@ -11,8 +11,8 @@
 </script>
 
 <button on:click={handleClick}>
-	Count: {count}
+	Nombre de clics: {count}
 </button>
 
 <p>{count} * 2 = {doubled}</p>
-<p>{doubled} * 2 = {quadrupled}</p>
+<p>{doubled} * 2 = {quadrupled}</p>

documentation/examples/01-reactivity/01-reactive-declarations/meta.json

@@ -1,3 +1,3 @@
 {
-	"title": "Reactive declarations"
-}
+	"title": "Déclarations réactives"
+}

documentation/examples/01-reactivity/02-reactive-statements/App.svelte

@@ -2,7 +2,7 @@
 	let count = 0;
 
 	$: if (count >= 10) {
-		alert(`count is dangerously high!`);
+		alert(`Le nombre est dangereusement élevé !`);
 		count = 9;
 	}
 
@@ -12,6 +12,5 @@
 </script>
 
 <button on:click={handleClick}>
-	Clicked {count}
-	{count === 1 ? 'time' : 'times'}
-</button>
+	Cliqué {count} fois
+</button>

documentation/examples/01-reactivity/02-reactive-statements/meta.json

@@ -1,3 +1,3 @@
 {
-	"title": "Reactive statements"
-}
+	"title": "Expressions réactives"
+}

documentation/examples/01-reactivity/meta.json

@@ -1,3 +1,3 @@
 {
-	"title": "Reactivity"
+	"title": "Réactivité"
 }

documentation/examples/02-props/00-declaring-props/App.svelte

@@ -2,4 +2,4 @@
 	import Nested from './Nested.svelte';
 </script>
 
-<Nested answer={42} />
+<Nested answer={42}/>

documentation/examples/02-props/00-declaring-props/Nested.svelte

@@ -2,4 +2,4 @@
 	export let answer;
 </script>
 
-<p>The answer is {answer}</p>
+<p>La réponse est {answer}</p>

documentation/examples/02-props/00-declaring-props/meta.json

@@ -1,3 +1,3 @@
 {
-	"title": "Declaring props"
+	"title": "Déclarer des props"
 }

documentation/examples/02-props/01-default-values/App.svelte

@@ -2,5 +2,5 @@
 	import Nested from './Nested.svelte';
 </script>
 
-<Nested answer={42} />
-<Nested />
+<Nested answer={42}/>
+<Nested/>

documentation/examples/02-props/01-default-values/Nested.svelte

@@ -1,5 +1,5 @@
 <script>
-	export let answer = 'a mystery';
+	export let answer = 'un mystère';
 </script>
 
-<p>The answer is {answer}</p>
+<p>La réponse est {answer}</p>

documentation/examples/02-props/01-default-values/meta.json

@@ -1,3 +1,3 @@
 {
-	"title": "Default values"
+	"title": "Valeurs par défaut"
 }

documentation/examples/02-props/02-spread-props/App.svelte

@@ -4,9 +4,9 @@
 	const pkg = {
 		name: 'svelte',
 		version: 3,
-		speed: 'blazing',
+		speed: 'incroyablement',
 		website: 'https://svelte.dev'
 	};
 </script>
 
-<Info {...pkg} />
+<Info {...pkg}/>

documentation/examples/02-props/02-spread-props/Info.svelte

@@ -6,7 +6,7 @@
 </script>
 
 <p>
-	The <code>{name}</code> package is {speed} fast. Download version {version} from
-	<a href="https://www.npmjs.com/package/{name}">npm</a>
-	and <a href={website}>learn more here</a>
+	Le composant <code>{name}</code> est {speed} rapide.
+	Télécharger la version {version} depuis <a href="https://www.npmjs.com/package/{name}">npm</a>
+	et <a href={website}>apprenez-en plus ici</a>
 </p>

documentation/examples/02-props/02-spread-props/meta.json

@@ -1,3 +1,3 @@
 {
-	"title": "Spread props"
+	"title": "Décomposition des props"
 }

documentation/examples/02-props/meta.json

@@ -1,3 +1,3 @@
 {
 	"title": "Props"
-}
+}

documentation/examples/03-logic/00-if-blocks/App.svelte

@@ -7,9 +7,9 @@
 </script>
 
 {#if user.loggedIn}
-	<button on:click={toggle}> Log out </button>
+	<button on:click={toggle}> Déconnexion </button>
 {/if}
 
 {#if !user.loggedIn}
-	<button on:click={toggle}> Log in </button>
+	<button on:click={toggle}> Connexion </button>
 {/if}

documentation/examples/03-logic/00-if-blocks/meta.json

@@ -1,3 +1,3 @@
 {
-	"title": "If blocks"
+	"title": "Blocs if"
 }

documentation/examples/03-logic/01-else-blocks/App.svelte

@@ -7,7 +7,7 @@
 </script>
 
 {#if user.loggedIn}
-	<button on:click={toggle}> Log out </button>
+	<button on:click={toggle}> Déconnexion </button>
 {:else}
-	<button on:click={toggle}> Log in </button>
+	<button on:click={toggle}> Connexion </button>
 {/if}

documentation/examples/03-logic/01-else-blocks/meta.json

@@ -1,3 +1,3 @@
 {
-	"title": "Else blocks"
+	"title": "Blocs else"
 }

documentation/examples/03-logic/02-else-if-blocks/App.svelte

@@ -3,9 +3,9 @@
 </script>
 
 {#if x > 10}
-	<p>{x} is greater than 10</p>
+  <p>{x} est plus grand que 10</p>
 {:else if 5 > x}
-	<p>{x} is less than 5</p>
+  <p>{x} est plus petit que 5</p>
 {:else}
-	<p>{x} is between 5 and 10</p>
+  <p>{x} est entre 5 et 10</p>
 {/if}

documentation/examples/03-logic/02-else-if-blocks/meta.json

@@ -1,3 +1,3 @@
 {
-	"title": "Else-if blocks"
+	"title": "Blocs else-if"
 }

documentation/examples/03-logic/03-each-blocks/App.svelte

@@ -1,19 +1,19 @@
 <script>
-	let cats = [
-		{ id: 'J---aiyznGQ', name: 'Keyboard Cat' },
-		{ id: 'z_AbfPXTKms', name: 'Maru' },
-		{ id: 'OUtn3pvWmpg', name: 'Henri The Existential Cat' }
-	];
+  let cats = [
+    { id: 'J---aiyznGQ', name: 'Keyboard Cat' },
+    { id: 'z_AbfPXTKms', name: 'Maru' },
+    { id: 'OUtn3pvWmpg', name: 'Henri The Existential Cat' },
+  ];
 </script>
 
-<h1>The Famous Cats of YouTube</h1>
+<h1>Les chats célèbres de Youtube</h1>
 
 <ul>
-	{#each cats as { id, name }, i}
-		<li>
-			<a target="_blank" rel="noreferrer" href="https://www.youtube.com/watch?v={id}">
-				{i + 1}: {name}
-			</a>
-		</li>
-	{/each}
+  {#each cats as { id, name }, i}
+    <li>
+      <a target="_blank" href="https://www.youtube.com/watch?v={id}" rel="noreferrer">
+        {i + 1}: {name}
+      </a>
+    </li>
+  {/each}
 </ul>

documentation/examples/03-logic/03-each-blocks/meta.json

@@ -1,3 +1,3 @@
 {
-	"title": "Each blocks"
+	"title": "Blocs each"
 }

documentation/examples/03-logic/04-keyed-each-blocks/App.svelte

@@ -14,20 +14,22 @@
 	}
 </script>
 
-<button on:click={handleClick}> Remove first thing </button>
+<button on:click={handleClick}>
+	Supprimer le premier élément
+</button>
 
 <div style="display: grid; grid-template-columns: 1fr 1fr; grid-gap: 1em">
 	<div>
-		<h2>Keyed</h2>
+		<h2>Avec clé</h2>
 		{#each things as thing (thing.id)}
-			<Thing current={thing.color} />
+			<Thing current={thing.color}/>
 		{/each}
 	</div>
 
 	<div>
-		<h2>Unkeyed</h2>
+		<h2>Sans clé</h2>
 		{#each things as thing}
-			<Thing current={thing.color} />
+			<Thing current={thing.color}/>
 		{/each}
 	</div>
 </div>

documentation/examples/03-logic/04-keyed-each-blocks/Thing.svelte

@@ -1,14 +1,14 @@
 <script>
-	// `current` is updated whenever the prop value changes...
+	// `current` est mis à jour à chaque fois que la valeur de la prop change...
 	export let current;
 
-	// ...but `initial` is fixed upon initialisation
+	// ...mais la variable "initial" est fixée au moment de l'instantiation du composant
 	const initial = current;
 </script>
 
 <p>
 	<span style="background-color: {initial}">initial</span>
-	<span style="background-color: {current}">current</span>
+	<span style="background-color: {current}">actuel</span>
 </p>
 
 <style>

documentation/examples/03-logic/04-keyed-each-blocks/meta.json

@@ -1,3 +1,3 @@
 {
-	"title": "Keyed each blocks"
+	"title": "Blocs each à clé"
 }