import PackageManagerTabs from '/components/tabs/PackageManagerTabs.astro'; import Since from '/components/Since.astro';

Cette intégration Astro permet le rendu et l'hydratation côté client pour vos composants SolidJS.

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/solid-js, exécutez ce qui suit depuis le répertoire de votre projet et suivez les instructions :

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

Tout d'abord, installez le paquet @astrojs/solid-js :

La plupart des gestionnaires de paquets installent également les dépendances associées. Si vous voyez un avertissement Cannot find package 'solid-js' (ou similaire) lorsque vous démarrez Astro, vous devez installer SolidJS :

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

import { defineConfig } from 'astro/config';import solidJs from '@astrojs/solid-js';export default defineConfig({  // ...  integrations: [solidJs()],});

Et ajoutez le code suivant au fichier tsconfig.json.

{  "extends": "astro/tsconfigs/strict",  "include": [".astro/types.d.ts", "**/*"],  "exclude": ["dist"],  "compilerOptions": {    "jsx": "preserve",    "jsxImportSource": "solid-js"  }}

Démarrage

Pour utiliser votre premier composant SolidJS 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.

Configuration

devtools

Vous pouvez activer les outils de développement de Solid durant le développement en transmettant un objet avec devtools: true à votre configuration d'intégration solid() et en ajoutant solid-devtools aux dépendances de votre projet :

import { defineConfig } from 'astro/config';import solid from '@astrojs/solid-js';export default defineConfig({  // ...  integrations: [solid({ devtools: true })],});

Options

Combinaison de plusieurs frameworks JSX

Lorsque vous utilisez plusieurs frameworks JSX (React, Preact, Solid) dans le même projet, Astro doit déterminer quelles transformations spécifiques au framework JSX doivent être utilisées pour chacun de vos composants. Si vous n'avez ajouté qu'une seule intégration de framework JSX à votre projet, aucune configuration supplémentaire n'est nécessaire.

Utilisez les options de configuration include (obligatoire) et exclude (optionnelle) pour spécifier quels fichiers appartiennent à quel framework. Fournissez un tableau de fichiers et/ou de dossiers à inclure pour chaque framework que vous utilisez. Des caractères joker peuvent être utilisés pour inclure plusieurs chemins de fichiers.

Nous recommandons de placer les composants communs du framework dans le même dossier (par exemple /components/react/ et /components/solid/) pour faciliter la spécification de vos inclusions, mais ce n'est pas obligatoire :

import { defineConfig } from 'astro/config';import preact from '@astrojs/preact';import react from '@astrojs/react';import svelte from '@astrojs/svelte';import vue from '@astrojs/vue';import solid from '@astrojs/solid-js';export default defineConfig({  // Permettre à de nombreux frameworks de prendre en charge tous les différents types de composants.  // Aucun `include` n'est nécessaire si vous n'utilisez qu'un seul framework JSX !  integrations: [    preact({      include: ['**/preact/*'],    }),    react({      include: ['**/react/*'],    }),    solid({      include: ['**/solid/*', '**/node_modules/@suid/material/**'],    }),  ],});

Utilisation

Utilisez un composant SolidJS comme vous le feriez avec n'importe quel composant de framework UI.

Limites de Suspense

Afin de prendre en charge les ressources Solid et les composants chargés à la demande sans configuration excessive, les composants réservés au serveur et les composants d'hydratation sont automatiquement englobés dans les limites de Suspense de niveau supérieur et rendu sur le serveur à l'aide de la fonction renderToStringAsync. Par conséquent, il n'est pas nécessaire d'ajouter une limite de Suspense de niveau supérieur autour des composants asynchrones.

Par exemple, vous pouvez utiliser la fonction createResource de Solid pour récupérer des données distantes asynchrones sur le serveur. Les données distantes seront incluses dans le HTML initial rendu par le serveur à partir d'Astro :

// CharacterName.tsxfunction CharacterName() {  const [name] = createResource(() =>    fetch('https://swapi.dev/api/people/1')      .then((result) => result.json())      .then((data) => data.name)  );  return (    <>      <h2>Nom :</h2>      {/* Luke Skywalker */}      <div>{name()}</div>    </>  );}

De même, les composants chargés à la demande de Solid seront également résolus et leur HTML sera inclus dans la page initiale rendue par le serveur.

Les composants non hydratants client:only ne sont pas automatiquement englobés dans les limites de Suspense.

N'hésitez pas à ajouter d'autres limites de Suspense selon vos préférences.