Je débute avec Svelte. Par où commencer ?permalink
Nous pensons que la meilleure manière de commencer est de jouer avec le tutoriel 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.
Cinq à dix minutes devraient suffire pour démarrer. Une heure et demie devrait vous permettre de parcourir entièrement le tutoriel.
Où puis-je obtenir de l'aide ?permalink
Si votre question est en rapport avec une certaine syntaxe, la page d'API est un bon point de départ.
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 ou posez la votre !
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, le Discord francophone ou le canal Reddit en sont des exemples. Si vous avez une question relative à du code Svelte, Stack Overflow est probablement le meilleur endroit.
Existe-t-il des ressources tierces ?permalink
La Svelte Society maintient une liste de livres et vidéos.
Comment puis-je utiliser la coloration syntaxique sur mes fichiers .svelte dans VS Code ?permalink
Il existe une extension VS Code officielle pour Svelte.
Existe-t-il un outil pour formater automatiquement mes fichiers .svelte ?permalink
Vous pouvez utiliser Prettier avec le plugin plugin-prettier-svelte.
Comment documenter mes composants ?permalink
Dans les éditeurs qui utilisent le Language Server Svelte (svelte-language-server), vous pouvez documenter les composants, fonctions et exports à l'aide de commentaires spécialement formatés.
<script>
/** Comment doit-on appeler l'utilisateur ? */
export let nom = 'world';
</script>
<!--
@component
Voici une documentation pour ce composant.
Elle apparaîtra au survol
- Vous pouvez utiliser la syntaxe Markdown ici.
- Vous pouvez également utiliser des blocs de code ici.
- Utilisation:
```tsx
<main nom="Arethra">-->
Salut, {nom}
Note: Le @component est nécessaire dans le commentaire HTML qui décrit votre composant.
Est-ce que l'usage de Svelte est pertinent à grande échelle ?permalink
Il y aura certainement un article de blog à ce sujet, mais en attendant, consultez cette discussion.
Existe-t-il une bibliothèque de composants d'interface ?permalink
Il existe plusieurs bibliothèques de composants d'interface ainsi que des composants autonomes. Retrouvez-les dans la section design systems de la page composants du site de Svelte Society.
Comment tester mes applications Svelte ?permalink
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 logs, 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.
Une application Svelte aura généralement trois types différents de tests : Unitaires, Composants et end to end (E2E)
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 pour les tests unitaires. D'autres moteurs de tests pourraient être également utilisés.
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 DOM. 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 couplée à un moteur de test type Vitest, à des solutions qui utilisent de vrais navigateurs pour fournir des fonctionnalités de tests visuels comme Playwright ou Cypress.
Tests end to end : 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 end to end (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 pour les tests end to end. Il existe également d'autres librairies de tests E2E.
Quelques ressources pour démarrer avec les tests unitaires :
- Svelte Testing Library
- Tests de composants Svelte avec Cypress
- Exemple utilisant vitest
- Exemple utilisant uvu avec JSDOM
- Tests de composants Svelte Vitest et Playwright
- Tests de composants avec WebdriverIO
Un routeur est-il intégré ?permalink
La bibliothèque officielle de routing est SvelteKit. 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.
Toutefois, vous pouvez utiliser n'importe quelle bibliothèque de routing de votre choix. Beaucoup de gens utilisent page.js. Il y a aussi navaid, qui est très similaire. Et universal-router, qui est isomorphe avec les routes enfants, mais sans prise en charge intégrée de l'historique.
Si vous préférez une approche HTML déclarative, il existe la bibliothèque isomorphe svelte-routing et un fork appelé [svelte-navigator](https://github. com/mefechoel/svelte-navigator) contenant des fonctionnalités supplémentaires.
Si vous avez besoin d'un routing basé sur le hashing côté client, consultez svelte-spa-router ou abstract-state-router.
Routify 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.
Vous pouvez trouver une liste de routeurs maintenus par la communauté sur sveltesociety.dev.
Puis-je demander à Svelte de pne pas supprimer mes styles inutilisés ?permalink
Non. Svelte supprime les styles inutilisés des composants et vous prévient pour éviter certaines problématiques qui surviendraient sinon.
Le scoping des styles d'un composant Svelte fonctionne en générant une classe unique pour le composant en question, en l'ajoutant aux éléments pertinents du composant sous le contrôle de Svelte, puis en ajoutant cette classe à chacun des sélecteurs dans le style de ce composant. Si le compilateur ne peut pas savoir sur quels éléments un sélecteur de style s'applique, deux mauvaises options s'offrent à lui pour le garder :
- S'il garde le sélecteur et lui ajoute la classe, le sélecteur ne s'appliquera probablement plus aux éléments du composant auxquels il est censé s'appliquer, et certainement pas si ces éléments ont été créés par un composant enfant ou par
{@html ...}. - S'il garde le sélecteur sans lui ajouter la classe, le style en question devient un style global, affectant toute votre page.
Si vous ave besoin de styliser quelque chose que Svelte ne peut pas identifier au moment de la compilation, vous aurez besoin d'utiliser explicitement les styles globaux en utilisant :global (...). Mais gardez également en tête que vous pouvez entourer seulement une partie d'un sélecteur avec :global (...). .foo :global(.bar) { ... } s'appliquera à tout élément .bar présent dans les éléments .foo du composant. Tant qu'il y a un élément parent au sein du composant courant, les sélecteur globaux partiels comme .foo :global(.bar) { ... } vous permettront presque systématiquement d'obtenir ce que vous recherchez.
La version 2 de Svelte est-elle toujours disponible ?permalink
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é.
La documentation est toujours disponible ici.
Comment puis-je recharger un module automatiquement ?permalink
Nous vous recommandons d'utiliser SvelteKit, qui prend en charge le HMR prêt à l'emploi et est construit avec Vite et svelte-hmr. Il existe également des plugins communautaires pour rollup et webpack.