Ton premier composant Svelte

Il est temps de forger notre première rune ! Un composant Svelte est un fichier avec l'extension .svelte qui combine HTML, CSS, et JavaScript.

Anatomie d'un composant

<script>
  // Ici le JavaScript - la logique du composant
  let name = 'Guerrier';
</script>

<!-- Ici le HTML - la structure -->
<h1>Bienvenue, {name} !</h1>

<style>
  /* Ici le CSS - les styles */
  h1 {
    color: #c9a227;
  }
</style>

Trois sections :

1. <script> - logique JavaScript/TypeScript
2. Markup - code HTML avec des expressions {}
3. <style> - styles CSS (scoped par défaut !)

Expressions de template

En Svelte on utilise des accolades {} pour insérer des valeurs JavaScript :

<script>
  let vikingName = 'Ragnar';
  let strength = 95;
  let weapons = ['Hache', 'Épée', 'Lance'];
</script>

<h1>Guerrier : {vikingName}</h1>
<p>Force : {strength}/100</p>
<p>Arme principale : {weapons[0]}</p>
<p>Nombre d'armes : {weapons.length}</p>

Ces valeurs ne changent jamais, donc un simple let suffit. Quand une valeur doit changer et rafraîchir l'écran, nous la marquerons avec la rune $state, dès la prochaine leçon !

Expressions JavaScript

Tu peux utiliser n'importe quelle expression JavaScript :

<script>
  let gold = 150;
  let silver = 30;
</script>

<p>Trésor total : {gold + silver * 0.1} pièces d'or</p>
<p>Viking riche ? {gold > 100 ? 'Oui !' : 'Pas encore'}</p>
<p>Nom en majuscules : {'ragnar'.toUpperCase()}</p>

Les styles sont Scoped !

C'est l'une des propriétés magiques de Svelte : les styles d'un composant s'appliquent uniquement à ce composant :

<script>
  let title = 'Salle du Thing';
</script>

<h1>{title}</h1>

<style>
  /* Ce style s'applique UNIQUEMENT au h1 de ce composant ! */
  h1 {
    color: gold;
    font-family: 'Norse', serif;
    text-shadow: 2px 2px 4px #000;
  }
</style>

D'autres composants avec <h1> n'auront pas ces styles. C'est comme un sort runique de protection !

<script>
  // Exercise: Anatomy of a Svelte component
  // Fill in the missing parts!

  let vikingName = 'Ragnar';
  let strength = 95;
  let weapons = ['Axe', 'Sword', 'Spear'];
</script>

<!-- Markup - HTML structure with {} expressions -->
<div class="warrior-card">
  <h1>Warrior: {vikingName}</h1>
  <p>Strength: {strength}/100</p>
  <p>Main weapon: {weapons[0]}</p>
  <p>Number of weapons: {weapons.length}</p>

  <!-- JavaScript expressions -->
  <p class="status">
    Status: {strength > 80 ? 'Elite warrior!' : 'Regular warrior'}
  </p>
</div>

<style>
  /* Styles - CSS scoped to this component */
  .warrior-card {
    background: linear-gradient(135deg, #2c1810 0%, #1a0f0a 100%);
    border: 2px solid #d4af37;
    border-radius: 8px;
    padding: 2rem;
    color: #e8d5b7;
    max-width: 400px;
    margin: 2rem auto;
  }

  h1 {
    color: #d4af37;
    border-bottom: 1px solid #d4af37;
    padding-bottom: 0.5rem;
  }

  .status {
    background: rgba(212, 175, 55, 0.2);
    padding: 0.5rem 1rem;
    border-radius: 4px;
    color: #d4af37;
  }
</style>