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.

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

  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:

Terminal window
# 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:

Terminal window
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:

Terminal window
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()],
// ^^^^^^^
});

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

Solución de problemas

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.

Contribuyendo

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

Otros

Frameworks UI

Adaptadores SSR

Otros