Aller au contenu

@astrojs/ svelte

v5.4.0 GitHub npm Changelog

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 Installation

Astro 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 :

Fenêtre de terminal
npx astro add svelte

Si 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 manuelle

Tout d’abord, installez le paquet @astrojs/svelte :

Fenêtre de terminal
npm install @astrojs/svelte

La 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 :

Fenêtre de terminal
npm install svelte

Ensuite, appliquez l’intégration à votre fichier astro.config.* en utilisant la propriété integrations :

astro.config.mjs
import { defineConfig } from 'astro/config';
import svelte from '@astrojs/svelte';


export default defineConfig({
  // ...
  integrations: [svelte()],
});

Démarrage

Titre de la section Démarrage

Pour 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 Options

Cette 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éfaut

Cette 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 :

astro.config.mjs
import { defineConfig } from 'astro/config';
import svelte from '@astrojs/svelte';


export default defineConfig({
  integrations: [svelte({ preprocess: [] })],
});
svelte.config.js
export default {
  preprocess: [],
};

Auto-complétion pour TypeScript

Titre de la section Auto-complétion pour TypeScript
Ajouté à la version : @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.

svelte.config.js
import { vitePreprocess } from '@astrojs/svelte';


export default {
  preprocess: vitePreprocess(),
};

Ce fichier de configuration sera automatiquement ajouté pour vous lorsque vous lancerez astro add svelte.

Plus d'intégrations

Framework d'interface utilisateur

Adaptateurs SSR

Autres intégrations