i18n(es): add guides/integrations-guide/preact.mdx

src/content/docs/es/guides/integrations-guide/preact.mdx

@@ -0,0 +1,265 @@
+---
+type: integration
+title: '@astrojs/preact'
+description: Aprende a usar la integración del framework @astrojs/preact para extender el soporte de componentes en tu proyecto de Astro.
+sidebar:
+  label: Preact
+githubIntegrationURL: 'https://github.com/withastro/astro/tree/main/packages/integrations/preact/'
+category: renderer
+i18nReady: true
+---
+
+import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
+import Since from '~/components/Since.astro';
+
+Esta **[integración de Astro][astro-integration]** permite el renderizado y la hidratación del lado del cliente para tus componentes de [Preact](https://preactjs.com/).
+
+## ¿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 [“Learn Preact”](https://preactjs.com/tutorial), 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](#instalación-manual) en su lugar.
+
+Para instalar `@astrojs/preact`, ejecuta lo siguiente desde el directorio de tu proyecto y sigue las instrucciones:
+
+<PackageManagerTabs>
+  <Fragment slot="npm">
+  ```sh
+  npx astro add preact
+  ```
+  </Fragment>
+  <Fragment slot="pnpm">
+  ```sh
+  pnpm astro add preact
+  ```
+  </Fragment>
+  <Fragment slot="yarn">
+  ```sh
+  yarn astro add preact
+  ```
+  </Fragment>
+</PackageManagerTabs>
+
+Si tienes algún problema, [no dudes en reportarlo en GitHub](https://github.com/withastro/astro/issues) e intenta seguir los pasos de instalación manual que aparecen a continuación.
+
+### Instalación manual
+
+Primero, instala el paquete `@astrojs/preact`:
+
+<PackageManagerTabs>
+  <Fragment slot="npm">
+  ```sh
+  npm install @astrojs/preact
+  ```
+  </Fragment>
+  <Fragment slot="pnpm">
+  ```sh
+  pnpm add @astrojs/preact
+  ```
+  </Fragment>
+  <Fragment slot="yarn">
+  ```sh
+  yarn add @astrojs/preact
+  ```
+  </Fragment>
+</PackageManagerTabs>
+
+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:
+
+<PackageManagerTabs>
+  <Fragment slot="npm">
+  ```sh
+  npm install preact
+  ```
+  </Fragment>
+  <Fragment slot="pnpm">
+  ```sh
+  pnpm add preact
+  ```
+  </Fragment>
+  <Fragment slot="yarn">
+  ```sh
+  yarn add preact
+  ```
+  </Fragment>
+</PackageManagerTabs>
+
+Luego, aplica la integración a tu archivo `astro.config.*` usando la propiedad `integrations`:
+
+```js title="astro.config.mjs" ins={2} ins="preact()"
+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`.
+
+```json title="tsconfig.json" ins={5-8}
+{
+  "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][astro-ui-frameworks]. 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][astro-integration] 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`
+
+<p>
+
+**Tipo:** `boolean`<br />
+<Since pkg="@astrojs/preact" v="0.3.0" />
+</p>
+
+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`.
+
+```js title="astro.config.mjs" "compat: true"
+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 [“Switching to Preact (from React)”](https://preactjs.com/guide/v10/switching-to-preact) 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`](https://docs.npmjs.com/cli/v8/configuring-npm/package-json#overrides) para lograrlo.
+
+```json title="package.json"
+{
+  "overrides": {
+    "react": "npm:@preact/compat@latest",
+    "react-dom": "npm:@preact/compat@latest"
+  }
+}
+```
+
+Consulta la documentación de [overrides de `pnpm`](https://pnpm.io/package_json#pnpmoverrides) y [resolutions de `yarn`](https://yarnpkg.com/configuration/manifest#resolutions) para sus respectivas características de sobrescritura.
+
+:::note
+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`
+
+<p>
+
+**Tipo:** [`BabelOptions`](https://github.com/preactjs/preset-vite#babel-configuration)<br />
+<Since pkg="@astrojs/preact" v="5.1.0" />
+</p>
+
+Puedes pasar [opciones de configuración de Babel](https://babeljs.io/docs/options) 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:
+
+```js title="astro.config.mjs"
+import { defineConfig } from 'astro/config';
+import preact from '@astrojs/preact';
+
+export default defineConfig({
+  integrations: [
+    preact({
+      babel: {
+        babelrc: true,
+      },
+    }),
+  ],
+});
+```
+
+### `devtools`
+
+<p>
+
+**Tipo:** `boolean`<br />
+<Since pkg="@astrojs/preact" v="3.3.0" />
+</p>
+
+Puedes habilitar las [devtools de Preact](https://preactjs.github.io/preact-devtools/) en desarrollo pasando un objeto con `devtools: true` a la configuración de tu integración `preact()`:
+
+```js title="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 arreglo 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:
+
+```js title="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](https://github.com/withastro/astro/tree/latest/examples/framework-preact) muestra cómo usar un componente interactivo de Preact en un proyecto de Astro.
+* El [ ejemplo de Astro Nanostores](https://github.com/withastro/astro/tree/latest/examples/with-nanostores) muestra cómo compartir el estado entre diferentes componentes — ¡e incluso entre diferentes frameworks! — en un proyecto de Astro.
+
+[astro-integration]: /en/guides/integrations/
+
+[astro-ui-frameworks]: /en/guides/framework-components/#using-framework-components