Saltearse al contenido

@astrojs/ preact

v3.4.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 tus componentes de Preact.

¿Por qué Preact?

Sección titulada ¿Por qué Preact?

Preact es una biblioteca que te permite construir componentes UI interactivos para la web. Si deseas crear características interactivas en tu sitio web utilizando JavaScript, es posible que prefieras usar su formato de componentes en lugar de usar directamente las API del navegador.

Preact también es una gran opción si has utilizado anteriormente React. Preact proporciona la misma API que React, pero en un paquete mucho más pequeño de 3kB. Incluso admite la representación de muchos componentes de React mediante la opción de configuración compat (consulta a continuación).

¿Quieres aprender más sobre Preact antes de usar esta integración?
Revisa “Aprende Preact en 10 minutos”, un tutorial interactivo en su sitio web.

Instalación

Sección titulada 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/preact, ejecuta lo siguiente desde el directorio de tu proyecto y sigue las indicaciones:

Ventana de terminal
npx astro add preact

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

Instalación manual

Sección titulada Instalación manual

Primero, instala el paquete @astrojs/preact:

Ventana de terminal
npm install @astrojs/preact

La mayoría de los gestores de paquetes instalarán las dependencias asociadas también. Si ves un mensaje de advertencia “Cannot find package ‘preact’” (o similar) cuando inicias Astro, deberás instalar Preact:

Ventana de terminal
npm install preact

Luego, aplica la integración a tu archivo astro.config.* utilizando la propiedad integrations:

astro.config.mjs
import { defineConfig } from 'astro/config';
import preact from '@astrojs/preact';


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

Uso

Sección titulada Uso

Para usar tu primer componente de Preact en Astro, dirígete a nuestra documentación de frameworks UI. Allí explorarás:

  • 📦 cómo se cargan los componentes del framework,
  • 💧 opciones de hidratación en el lado del cliente, y
  • 🤝 oportunidades para mezclar y anidar diferentes frameworks juntos.

También puedes revisar nuestra Documentación de Integración de Astro para obtener más información sobre las integraciones.

Configuración

Sección titulada Configuración

La integración de Astro con Preact se encarga de cómo se renderizan los componentes de Preact y tiene sus propias opciones. Puedes cambiar estas opciones en el archivo astro.config.mjs donde se encuentran las configuraciones de integración de tu proyecto.

Para el uso básico, no es necesario configurar la integración de Preact en Astro.

compat

Sección titulada compat

Puedes habilitar preact/compat, la capa de compatibilidad de Preact para renderizar componentes de React sin necesidad de instalar o enviar las bibliotecas más grandes de React a los navegadores web de tus usuarios.

Para hacerlo, pasa un objeto a la integración de Preact y establece compat: true.

astro.config.mjs
import { defineConfig } from 'astro/config';
import preact from '@astrojs/preact';


export default defineConfig({
  integrations: [preact({ compat: true })],
});

Con la opción compat habilitada, la integración de Preact renderizará tanto los componentes de React como los componentes de Preact en tu proyecto y también te permitirá importar componentes de React dentro de componentes de Preact. Lee más en “Cambiando a Preact (de React)” en el sitio web de Preact.

Cuando se importan librerías de componentes de React, para reemplazar las dependencias react y react-dom como preact/compat, puedes utilizar overrides para hacerlo.

package.json
{
  "overrides": {
    "react": "npm:@preact/compat@latest",
    "react-dom": "npm:@preact/compat@latest"
  }
}

Consulta las documentaciónes de pnpm overrides y yarn resolutions para conocer sus respectivas características de anulación de dependencias.

devtools

Sección titulada devtools

Agregado en: @astrojs/preact@3.3.0

Puedes habilitar las herramientas de desarrollo de Preact en desarrollo pasando un objeto con devtools: true a la configuración de tu integración preact():

astro.config.mjs
import { defineConfig } from 'astro/config';
import preact from '@astrojs/preact';


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

Opciones

Sección titulada Opciones

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:

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

Ejemplos

Sección titulada Ejemplos
  • El ejemplo Astro Preact muestra cómo utilizar un componente interactivo de Preact en un proyecto de Astro.
  • El ejemplo de Astro Nanostores muestra cómo compartir el estado entre diferentes componentes, e incluso diferentes frameworks, en un proyecto de Astro.

Más integraciones

Frameworks UI

Adaptadores SSR

Otras integraciones