@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 crear componentes de interfaz de usuario interactivos para la web. Si deseas compilar características interactivas en tu sitio usando JavaScript, es posible que prefieras utilizar 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 el renderizado de muchos componentes de React utilizando la opción de configuración compat (ver más abajo).

¿Quieres saber 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 informarnos en GitHub e intenta los pasos de instalación manual 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 del mismo nivel asociadas. Si ves una advertencia de 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 añade 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 sobre frameworks de interfaz de usuario. 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 juntos

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

Configuración

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

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

compat

Type: 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 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 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 «Cambiar a Preact (desde React)» en el sitio web de Preact.

Cuando se importan bibliotecas de componentes de React, para intercambiar las dependencias de react y react-dom por preact/compat, puedes usar overrides para hacerlo.

package.json

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

Consulta la documentación de las invalidaciones de pnpm y las resoluciones de yarn para sus respectivas características de invalidación.

Nota

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

babel

Type: BabelOptions

Agregado en: @astrojs/preact@5.1.0

Puedes pasar opciones de configuración adicionales de Babel al plugin de Preact para Vite. 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

Type: boolean

Agregado en: @astrojs/preact@3.3.0

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

astro.config.mjs

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

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

Opciones

Combinar 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 de cada framework JSX deben utilizarse para cada uno de tus componentes. Si solo has añadido una integración de interfaz de usuario de framework JSX a tu proyecto, no se necesita configuración adicional.

Usa 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 a include para cada framework que estés utilizando. Se pueden utilizar comodines para incluir múltiples rutas de archivos.

Recomendamos colocar los componentes comunes del framework en la misma carpeta (por ejemplo, /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({
  // Enable many frameworks to support all different kinds of components.
  // No `include` is needed if you are only using a single JSX framework!
  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 diferentes frameworks!— en un proyecto de Astro.

Más integraciones

Frameworks de front-end

• 

  @astrojs/alpinejs

• 

  @astrojs/preact

• 

  @astrojs/react

• 

  @astrojs/solid⁠-⁠js

• 

  @astrojs/svelte

• 

  @astrojs/vue

Adaptadores

• 

  @astrojs/cloudflare

• 

  @astrojs/netlify

• 

  @astrojs/node

• 

  @astrojs/vercel

Otras integraciones

• 

  @astrojs/markdoc

• 

  @astrojs/mdx

• 

  @astrojs/partytown

• 

  @astrojs/sitemap