@astrojs/ svelte
Cette intégration Astro permet le rendu côté serveur et l’hydratation côté client pour vos composants Svelte. Elle supporte Svelte 3, 4 et 5 (expérimental).
Installation
Titre de la section InstallationAstro inclut une commande astro add pour automatiser l’installation des intégrations officielles. Si vous préférez, vous pouvez installer les intégrations manuellement à la place.
Pour installer @astrojs/svelte, exécutez ce qui suit depuis le répertoire de votre projet et suivez les instructions :
npx astro add sveltepnpm astro add svelteyarn astro add svelteSi vous rencontrez des problèmes, n’hésitez pas à nous les signaler sur GitHub et essayez les étapes d’installation manuelle ci-dessous.
Installation manuelle
Titre de la section Installation manuelleTout d’abord, installez le paquet @astrojs/svelte :
npm install @astrojs/sveltepnpm add @astrojs/svelteyarn add @astrojs/svelteLa plupart des gestionnaires de paquets installent également les dépendances associées. Si vous voyez un avertissement “Cannot find package ‘svelte’” (ou similaire) lorsque vous démarrez Astro, vous devez installer Svelte :
npm install sveltepnpm add svelteyarn add svelteEnsuite, appliquez l’intégration à votre fichier astro.config.* en utilisant la propriété integrations :
import { defineConfig } from 'astro/config';import svelte from '@astrojs/svelte';
export default defineConfig({ // ... integrations: [svelte()],});Démarrage
Titre de la section DémarragePour utiliser votre premier composant Svelte dans Astro, consultez notre documentation sur les frameworks UI. Vous y découvrirez :
- 📦 comment les composants du framework sont chargés,
- 💧 les options d’hydratation côté client, et
- 🤝 les possibilités de mélanger et d’imbriquer les frameworks entre eux
Options
Titre de la section OptionsCette intégration est alimentée par @sveltejs/vite-plugin-svelte. Pour personnaliser le compilateur Svelte, des options peuvent être fournies à l’intégration. Voir @sveltejs/vite-plugin-svelte docs pour plus de détails.
Options par défaut
Titre de la section Options par défautCette intégration transmet les options par défaut suivantes au compilateur Svelte :
const defaultOptions = { emitCss: true, compilerOptions: { dev: isDev, hydratable: true }, preprocess: vitePreprocess(),};Ces valeurs emitCss, compilerOptions.dev, et compilerOptions.hydratable sont nécessaires pour construire correctement pour Astro et ne peuvent pas être surchargées.
Fournir vos propres options de preprocess aura pour effet de surcharger la valeur par défaut de vitePreprocess(). Assurez-vous d’activer les flags de préprocesseur nécessaires à votre projet.
Vous pouvez définir les options en les passant à l’intégration svelte dans astro.config.mjs ou dans svelte.config.js. L’une ou l’autre de ces deux options remplacera le réglage par défaut de preprocess :
import { defineConfig } from 'astro/config';import svelte from '@astrojs/svelte';
export default defineConfig({ integrations: [svelte({ preprocess: [] })],});export default { preprocess: [],};Auto-complétion pour TypeScript
Titre de la section Auto-complétion pour TypeScript@astrojs/svelte@2.0.0
Si vous utilisez un préprocesseur comme TypeScript ou SCSS dans vos fichiers Svelte, vous pouvez créer un fichier svelte.config.js pour que l’extension Svelte IDE puisse analyser correctement les fichiers Svelte.
import { vitePreprocess } from '@astrojs/svelte';
export default { preprocess: vitePreprocess(),};Ce fichier de configuration sera automatiquement ajouté pour vous lorsque vous lancerez astro add svelte.
