@astrojs/ preact

Esta integración de Astro permite el renderizado y la hidratación del lado del cliente para tus componentes de Preact.

¿Por qué Preact?

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

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

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

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

npm

npx astro add preact

pnpm

pnpm astro add preact

Yarn

yarn astro add preact

Si tienes algún problema, no dudes en reportarlo en GitHub e intenta seguir los pasos de instalación manual que aparecen a continuación.

Instalación manual

Primero, instala el paquete @astrojs/preact:

npm

npm install @astrojs/preact

pnpm

pnpm add @astrojs/preact

Yarn

yarn add @astrojs/preact

La mayoría de los gestores de paquetes también instalarán las dependencias de pares asociadas. Si ves una advertencia como Cannot find package 'preact' (o similar) al iniciar Astro, tendrás que instalar Preact:

npm

npm install preact

pnpm

pnpm add preact

Yarn

yarn add preact

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

astro.config.mjs

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

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

Y agrega el siguiente código al archivo tsconfig.json.

tsconfig.json

{
  "extends": "astro/tsconfigs/strict",
  "include": [".astro/types.d.ts", "**/*"],
  "exclude": ["dist"],
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "preact"
  }
}

Uso

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

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

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

Configuración

La integración de Preact en Astro maneja cómo se renderizan los componentes de Preact y tiene sus propias opciones. Cámbialas en el archivo astro.config.mjs que es donde residen los ajustes de integración de tu proyecto.

Para un uso básico, no necesitas configurar la integración de Preact.

compat

Tipo: boolean

Agregado en: @astrojs/preact@0.3.0

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 pesadas 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 componentes de React como componentes de Preact en tu proyecto y también te permitirá importar componentes de React dentro de componentes de Preact. Lee más en “Cambiarse a Preact (desde React)” en el sitio web de Preact.

Al importar bibliotecas de componentes de React, para intercambiar las dependencias de react y react-dom por preact/compat, puedes usar overrides para lograrlo.

package.json

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

Consulta la documentación de overrides de pnpm y resolutions de yarn para sus respectivas características de sobrescritura.

Nota

Actualmente, la opción compat solo funciona para las bibliotecas de React que exportan código como ESM. Si ocurre un error durante el tiempo de compilación, intenta agregar la biblioteca a vite.ssr.noExternal: ['the-react-library'] en tu archivo astro.config.mjs.

babel

Tipo: BabelOptions

Agregado en: @astrojs/preact@5.1.0

Puedes pasar opciones de configuración de Babel adicionales al plugin de Vite para Preact. Esto te permite personalizar la transformación de Babel aplicada a tus componentes de Preact.

Por ejemplo, la siguiente configuración le indica a Babel que cargue .babelrc al procesar tus componentes de Preact:

astro.config.mjs

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

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

devtools

Tipo: boolean

Agregado en: @astrojs/preact@3.3.0

Puedes habilitar las devtools 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

Combinando múltiples frameworks JSX

Cuando utilizas múltiples frameworks JSX (React, Preact, Solid) en el mismo proyecto, Astro necesita determinar qué transformaciones específicas de cada framework JSX deben usarse para cada uno de tus componentes. Si solo has añadido la integración de un framework JSX a tu proyecto, no se necesita configuración adicional.

Usa las opciones de configuración include (requerido) 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. Se pueden usar comodines para incluir múltiples rutas de archivos.

Recomendamos colocar los componentes de un mismo framework en la misma carpeta (p. ej. /components/react/ y /components/solid/) para que sea más fácil especificar 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 soportar todo tipo de componentes.
  // ¡No se necesita `include` si solo estás usando un único framework JSX!
  integrations: [
    preact({
      include: ['**/preact/*'],
    }),
    react({
      include: ['**/react/*'],
    }),
    solid({
      include: ['**/solid/*'],
    }),
  ],
});

Ejemplos

• El ejemplo de Astro Preact muestra cómo usar 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 entre diferentes frameworks! — en un proyecto de Astro.

Más integraciones

Frameworks UI

• 

  @astrojs/alpinejs

• 

  @astrojs/preact

• 

  @astrojs/react

• 

  @astrojs/solid⁠-⁠js

• 

  @astrojs/svelte

• 

  @astrojs/vue

Adaptadores SSR

• 

  @astrojs/cloudflare

• 

  @astrojs/netlify

• 

  @astrojs/node

• 

  @astrojs/vercel

Otras integraciones

• 

  @astrojs/markdoc

• 

  @astrojs/mdx

• 

  @astrojs/partytown

• 

  @astrojs/sitemap