@astrojs/ solid-js

Cette intégration Astro permet le rendu côté serveur 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 :

npx astro add solid

pnpm astro add solid

yarn astro add solid

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 :

npm install @astrojs/solid-js

pnpm add @astrojs/solid-js

yarn add @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 :

npm install solid-js

pnpm add solid-js

yarn add solid-js

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

import { defineConfig } from 'astro/config';
import solid from '@astrojs/solid-js';

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

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.

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 UI framework.

Limites de Suspense

Afin de prendre en charge les ressources Solid et les composants Lazy 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 suspension de haut niveau 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 :

function CharacterName() {
  const [name] = createResource(() =>
    fetch('https://swapi.dev/api/people/1')
      .then((result) => result.json())
      .then((data) => data.name)
  );

  return (
    <>
      <h2>Name:</h2>
      {/* Luke Skywalker */}
      <div>{name()}</div>
    </>
  );
}