@astrojs/ solid-js

v4.2.0 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

Astro incluye un comando astro add para automatizar la configuración de las integraciones oficiales. Si lo prefieres, puedes instalar las integraciones manualmente en su lugar.

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

npx astro add solid

pnpm astro add solid

yarn 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.

Instalación manual

Primero, instala el paquete @astrojs/solid-js:

npm install @astrojs/solid-js

pnpm add @astrojs/solid-js

yarn add @astrojs/solid-js

La mayoría de los gestores de paquetes instalarán las dependencias asociadas también. Si ves un mensaje de advertencia Cannot find package 'solid-js' (o similar) cuando inicias Astro, necesitarás instalar SolidJS:

npm install solid-js

pnpm add solid-js

yarn add solid-js

Luego, aplica la 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

Configuración

devtools

Agregado en: @astrojs/solid-js@4.2.0 Nuevo

Puedes habilitar las herramientas de desarrollo de Solid en desarrollo pasando un objeto con devtools: true a tu configuración de integración solid() y agregando solid-devtools a las dependencias de tu proyecto:

npm install solid-devtools

pnpm add solid-devtools

yarn add solid-devtools

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

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

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

Uso

Usa un componente SolidJS como lo harías con cualquier componente de framework UI.

Límites de Suspense

Para admitir los recursos de Solid y los componentes Lazy sin una configuración excesiva, los componentes solo del servidor y de hidratación se envuelven automáticamente en límites de Suspense de nivel superior y se renderizan en el servidor utilizando la función renderToStringAsync. Por lo tanto, no es necesario agregar un límite de Suspense de nivel superior alrededor de los componentes asíncronos. Por ejemplo, puedes usar createResource de Solid para obtener datos remotos asíncronos en el servidor. Los datos remotos se incluirán en el HTML inicial renderizado en el servidor desde Astro:

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

Similarmente, los componentes Lazy de Solid también se resolverán y su HTML se incluirá en la página inicial renderizada en el servidor. Los componentes client:only que no se hidratan no se envuelven automáticamente en límites de Suspense.

Sientete libre de agregar límites de Suspense adicionales según tu preferencia.