@astrojs/ solid-js

v4.0.1 GitHub npm Changelog

Esta integración de Astro habilita el renderizado del lado del servidor y la hidratación del lado del cliente para sus componentes SolidJS.

Instalación

Hay dos formas de agregar integraciones a tu proyecto. ¡Vamos a probar la opción más conveniente primero!

Comando `astro add`

Astro incluye una herramienta CLI para agregar integraciones: astro add. Este comando hará:

(Opcionalmente) Instala todas las dependencias y peer-dependencias necesarias.
(También opcional) Actualiza tu archivo astro.config.* para aplicar esta integración

Para instalar @astrojs/solid-js, ejecuta lo siguiente desde el directorio raíz de tu proyecto y sigue las instrucciones:

# Usando NPM
npx astro add solid
# Usando Yarn
yarn astro add solid
# Usando PNPM
pnpm astro add solid

Si tienes algún problema, no dudes en informarnos en GitHub o intenta los pasos de instalación manual a continuación.

Instala dependencias manualmente

Primero, instala la integración @astrojs/solid-js de la siguiente manera:

npm install @astrojs/solid-js

La mayoría de los gestores de paquetes también instalarán las dependencias asociadas. Sin embargo, si ves un mensaje de advertencia que dice “No se puede encontrar el paquete ‘solid-js’” (o similar) al iniciar Astro, tendrás que instalar SolidJS:

npm install solid-js

Ahora, aplica esta integración a tu archivo astro.config.* usando la propiedad integrations:

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

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

Empezando

Para usar tu primer componente con solidjs en Astro, dirígete a nuestra documentación del interfaz de usuario. Explorarás:

📦 como se cargan los componentes de framework,
💧 opciones de hidratación del lado del cliente, y
🤝 oportunidades para mezclar y anidar frameworks juntos

Opciones

Combinando múltiples frameworks JSX

Cuando estás utilizando múltiples frameworks JSX (React, Preact, Solid) en el mismo proyecto, Astro necesita determinar qué transformaciones específicas del framework JSX deben usarse para cada uno de tus componentes. Si solo has agregado una integración de framework JSX a tu proyecto, no se necesita configuración adicional.

Utiliza las opciones de configuración include (obligatoria) y exclude (opcional) para especificar qué archivos pertenecen a qué framework. Proporciona un array de archivos y/o carpetas en include para cada framework que estés utilizando. Puedes utilizar comodines para incluir múltiples rutas de archivo.

Recomendamos colocar los componentes comunes de los frameworks en la misma carpeta (p. ej. /components/react/ y /components/solid/) para facilitar la especificación de tus inclusiones, pero esto no es obligatorio:

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({
  // Habilita varios frameworks para admitir todo tipo de componentes diferentes.
  // ¡No se necesita `include` si solo estás utilizando un solo framework JSX!
  integrations: [
    preact({
      include: ['**/preact/*'],
    }),
    react({
      include: ['**/react/*'],
    }),
    solid({
      include: ['**/solid/*'],
    }),
  ],
});