Saltearse al contenido

@astrojs/ solid-js

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

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

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

  1. (Opcionalmente) Instala todas las dependencias y peer-dependencias necesarias.
  2. (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:

Ventana de terminal
# 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.

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

Ventana de terminal
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:

Ventana de terminal
npm install solid-js

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

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

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

Combinando múltiples frameworks JSX

Sección titulada 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/*'],
}),
],
});

Para obtener ayuda, consulta el canal de #support en Discord. ¡Nuestros amables miembros del equipo de soporte están aquí para ayudar!

También puedes revisar nuestra documentación de integraciónes de Astro para obtener más información sobre las integraciones.

Este paquete es mantenido por el equipo central de Astro. ¡Estás invitado a enviar un problema o PR!

Más integraciones

Frameworks UI

Adaptadores SSR

Otras integraciones