diff --git a/src/content/docs/es/reference/adapter-reference.mdx b/src/content/docs/es/reference/adapter-reference.mdx index aa60a36bcded4..67877a08da560 100644 --- a/src/content/docs/es/reference/adapter-reference.mdx +++ b/src/content/docs/es/reference/adapter-reference.mdx @@ -2,6 +2,7 @@ title: API de adaptadores de Astro i18nReady: true --- +import Since from '~/components/Since.astro'; Astro está diseñado para que sea fácil de desplegar a cualquier proveedor de la nube que soporte SSR (server side rendering). Esta capacidad la proporcionan los __adaptadores__, que son [integraciones](/es/reference/integrations-reference/). Lee la [guía de SSR](/es/guides/server-side-rendering/#añadiendo-un-adaptador) para aprender cómo añadir un adaptador. @@ -26,7 +27,10 @@ export default function createIntegration() { 'astro:config:done': ({ setAdapter }) => { setAdapter({ name: '@matthewp/my-adapter', - serverEntrypoint: '@matthewp/my-adapter/server.js' + serverEntrypoint: '@matthewp/my-adapter/server.js', + supportedAstroFeatures: { + staticOutput: 'stable' + } }); }, }, @@ -41,6 +45,52 @@ interface AstroAdapter { name: string; serverEntrypoint?: string; exports?: string[]; + adapterFeatures: AstroAdapterFeatures; + supportedAstroFeatures: AstroFeatureMap; +} + +export interface AstroAdapterFeatures { + /** + * Crea una función edge que se comunicará con el middleware de Astro + */ + edgeMiddleware: boolean; + /** + * Solo SSR. Cada ruta se convierte en su propia función/archivo + */ + functionPerRoute: boolean; +} + +export type SupportsKind = 'unsupported' | 'stable' | 'experimental' | 'deprecated'; + +export type AstroFeatureMap = { + /** + * El adaptador puede servir páginas estáticas + */ + staticOutput?: SupportsKind; + /** + * El adaptador es capaz de servir páginas que son estáticas o renderizadas a través del servidor + */ + hybridOutput?: SupportsKind; + /** + * El adaptador es capaz de servir páginas SSR + */ + serverOutput?: SupportsKind; + /** + * El adaptador puede emitir assets estáticos + */ + assets?: AstroAssetsFeature; +}; + +export interface AstroAssetsFeature { + supportKind?: SupportsKind; + /** + * Si este adaptador implementa archivos en un entorno compatible con la biblioteca `sharp` + */ + isSharpCompatible?: boolean; + /** + * Si este adaptador implementa archivos en un entorno compatible con la biblioteca `squoosh` + */ + isSquooshCompatible?: boolean; } ``` @@ -49,6 +99,9 @@ Las propiedades son: * __name__: Un nombre único para tu adaptador, usado para iniciar sesión. * __serverEntrypoint__: el punto de entrada para el renderizado en el servidor. * __exports__: un array de exportaciones con nombre cuando se usa junto con `createExports` (explicado a continuación). +* __adapterFeatures__: Un objeto que habilita características específicas que deben ser compatibles con el adaptador. + Estas características cambiarán la salida generada, y el adaptador debe implementar la lógica adecuada para manejar las diferentes salidas. +* __supportedAstroFeatures__: Un mapa de las características integradas en Astro. Esto permite que Astro determine qué características un adaptador no puede o no está dispuesto a admitir, para que se puedan proporcionar mensajes de error adecuados. ### Server Entrypoint @@ -189,3 +242,185 @@ Por lo general, puedes llamar a `app.render(request)` sin usar `.match` porque A ``` Una vez que [publiques tu adaptador a npm](https://docs.npmjs.com/cli/v8/commands/npm-publish), correr `astro add example` instalará tu paquete con cualquier otra dependencia peer especificada en tu `package.json`. También indicaremos a los usuarios a actualizar la configuración de su proyecto manualmente. + +## Características de Astro + + + +Las características de Astro son una forma en que un adaptador le indica a Astro si puede admitir una característica, así como el nivel de soporte del adaptador para esa característica. + +Cuando se utilizan estas propiedades, Astro realizará lo siguiente: +- ejecutará validaciones específicas; +- emitirá información contextual en los registros; + +Estas operaciones se ejecutan en función de las características admitidas o no admitidas, su nivel de soporte y la configuración que utiliza el usuario. + +La siguiente configuración le indica a Astro que este adaptador tiene soporte experimental para assets, pero el adaptador no es compatible con los servicios integrados Sharp y Squoosh: + +```js title="my-adapter.mjs" ins={9-15} +export default function createIntegration() { + return { + name: '@matthewp/my-adapter', + hooks: { + 'astro:config:done': ({ setAdapter }) => { + setAdapter({ + name: '@matthewp/my-adapter', + serverEntrypoint: '@matthewp/my-adapter/server.js', + supportedAstroFeatures: { + assets: { + supportKind: "experimental", + isSharpCompatible: false, + isSquooshCompatible: false + } + } + }); + }, + }, + }; +} +``` + +Astro registrará una **advertencia** en la terminal: + +``` +[@matthewp/my-adapter] The feature is experimental and subject to issues or changes. +``` + +y un error si el servicio utilizado para activos no es compatible con el adaptador: + +``` +[@matthewp/my-adapter] The currently selected adapter `@matthewp/my-adapter` is not compatible with the service "Sharp". Your project will NOT be able to build. +``` + +## Características del adaptador + +Un conjunto de características que cambian la salida de los archivos emitidos. Cuando un adaptador elige habilitar estas características, recibirá información adicional dentro de hooks específicos. + +### `functionPerRoute` + +Esta es una característica que se habilita al usar solo SSR. Por defecto, Astro emite un único archivo `entry.mjs`, que se encarga de emitir la página renderizada en cada solicitud. + +Cuando `functionPerRoute` está en `true`, Astro en su lugar creará un archivo separado para cada ruta definida en el proyecto. +Cada archivo emitido solo renderizará una página. +Las páginas se emitirán dentro de un directorio `dist/pages/`, y los archivos emitidos mantendrán las mismas rutas de archivo del directorio `src/pages/`. + +Habilita la característica pasando `true` al adaptador. + +```js title="my-adapter.mjs" ins={9-11} +export default function createIntegration() { + return { + name: '@matthewp/my-adapter', + hooks: { + 'astro:config:done': ({ setAdapter }) => { + setAdapter({ + name: '@matthewp/my-adapter', + serverEntrypoint: '@matthewp/my-adapter/server.js', + adapterFeatures: { + functionPerRoute: true + } + }); + }, + }, + }; +} +``` + +Luego, utiliza el hook [`astro:build:ssr`](/es/reference/integrations-reference/#astrobuildssr), que te proporcionará un objeto `entryPoints` que mapea una ruta de página al archivo físico emitido después de la compilación. + +```js title="my-adapter.mjs" ins={15-19} +export default function createIntegration() { + return { + name: '@matthewp/my-adapter', + hooks: { + 'astro:config:done': ({ setAdapter }) => { + setAdapter({ + name: '@matthewp/my-adapter', + serverEntrypoint: '@matthewp/my-adapter/server.js', + adapterFeatures: { + functionPerRoute: true + } + }); + }, + + 'astro:build:ssr': ({ entryPoints }) => { + for (const [route, entryFile] of entryPoints) { + // haz algo con route y entryFile + } + } + }, + }; +} +``` + +:::caution +`entryFile` es de tipo `URL` y representa la ruta física del archivo en el sistema de archivos. Esto significa que las rutas cambian según el sistema operativo en el que se ejecute el código. +::: + +#### Entornos serverless + +Establecer `functionPerRoute: true` en un entorno serverless crea un archivo JavaScript (controlador) para cada ruta. El nombre de un controlador puede variar según la plataforma de alojamiento que estés utilizando: lambda, función, página, etc. + +Cada una de estas rutas está sujeta a un [arranque en frío](https://azure.microsoft.com/en-us/blog/understanding-serverless-cold-start/) cuando se ejecuta el controlador, lo que puede causar cierto retraso. Este retraso está influenciado por diferentes factores. + +Con `functionPerRoute: false`, solo hay un controlador único encargado de renderizar todas tus rutas. Cuando se activa este controlador por primera vez, estarás sujeto a un arranque en frío. Después de eso, todas las demás rutas deberían funcionar sin retraso. Sin embargo, perderás el beneficio de la división de código que proporciona `functionPerRoute: true`. + +:::note +Es importante que comprendas tu plataforma de alojamiento y cómo funciona para elegir la configuración adecuada de `functionPerRoute` para tu proyecto. +::: + +### `edgeMiddleware` + +Define si se incluirá el código de middleware SSR al realizar la compilación. + +Cuando está habilitado, esto evita que el código de middleware se empaquete e importe en todas las páginas durante la compilación: + +```js title="my-adapter.mjs" ins={9-11} +export default function createIntegration() { + return { + name: '@matthewp/my-adapter', + hooks: { + 'astro:config:done': ({ setAdapter }) => { + setAdapter({ + name: '@matthewp/my-adapter', + serverEntrypoint: '@matthewp/my-adapter/server.js', + adapterFeatures: { + edgeMiddleware: true + } + }); + }, + }, + }; +} +``` + +Luego, utiliza el hook [`astro:build:ssr`](/es/reference/integrations-reference/#astrobuildssr), que te proporcionará un `middlewareEntryPoint`, que es una `URL` que apunta al archivo físico en el sistema de archivos. + +```js title="my-adapter.mjs" ins={15-19} +export default function createIntegration() { + return { + name: '@matthewp/my-adapter', + hooks: { + 'astro:config:done': ({ setAdapter }) => { + setAdapter({ + name: '@matthewp/my-adapter', + serverEntrypoint: '@matthewp/my-adapter/server.js', + adapterFeatures: { + edgeMiddleware: true + } + }); + }, + + 'astro:build:ssr': ({ middlewareEntryPoint }) => { + // recuerda verificar si esta propiedad existe, será `undefined` isi el adaptador no opta por habilitar la característica. + if (middlewareEntryPoint) { + createEdgeMiddleware(middlewareEntryPoint) + } + } + }, + }; +} + +function createEdgeMiddleware(middlewareEntryPoint) { + // emite un nuevo archivo físico utilizando tu sistema de empaquetado. +} +``` diff --git a/src/content/docs/es/reference/api-reference.mdx b/src/content/docs/es/reference/api-reference.mdx index ada8a947b23e5..96019cde8eb5b 100644 --- a/src/content/docs/es/reference/api-reference.mdx +++ b/src/content/docs/es/reference/api-reference.mdx @@ -450,7 +450,7 @@ const orders = Array.from(Astro.locals.orders.entries()); ```ts title="endpoint.json.ts" import type { APIContext } from 'astro'; -export function get(context: APIContext) { +export function GET(context: APIContext) { // ... } ``` @@ -476,7 +476,7 @@ Los endpoints de la API sólo pueden leer información de `context.locals`.: ```ts title="src/pages/hello.ts" import type { APIContext } from 'astro'; -export function get({ locals }: APIContext) { +export function GET({ locals }: APIContext) { return { body: locals.title // "Título por defecto" } @@ -504,7 +504,7 @@ export function getStaticPaths() { ]; } -export function get({ params }: APIContext) { +export function GET({ params }: APIContext) { return { body: JSON.stringify({ id: params.id }), }; @@ -528,7 +528,7 @@ export function getStaticPaths() { ]; } -export function get({ props }: APIContext) { +export function GET({ props }: APIContext) { return { body: JSON.stringify({ author: props.author }), }; @@ -544,9 +544,9 @@ Un objeto [Request](https://developer.mozilla.org/es/docs/Web/API/Request) está ```ts import type { APIContext } from 'astro'; -export function get({ request }: APIContext) { +export function GET({ request }: APIContext) { return { - body: `Hello ${request.url}`, + body: `Hola ${request.url}`, }; } ``` @@ -572,9 +572,9 @@ Especifica la [dirección IP](https://es.wikipedia.org/wiki/Dirección_IP) de la ```ts import type { APIContext } from 'astro'; -export function get({ clientAddress }: APIContext) { +export function GET({ clientAddress }: APIContext) { return { - body: `Your IP address is: ${clientAddress}`, + body: `Tu dirección IP es: ${clientAddress}`, }; } ``` @@ -594,7 +594,7 @@ Ver también: [Astro.site](#astrosite) ```ts title="src/pages/site-info.json.ts" import type { APIContext } from 'astro'; -export function get({ generator, site }: APIContext) { +export function GET({ generator, site }: APIContext) { const body = JSON.stringify({ generator, site }); return new Response(body); } @@ -609,7 +609,7 @@ Ver también: [Astro.generator](#astrogenerator) ```ts import type { APIContext } from 'astro'; -export function get({ redirect }: APIContext) { +export function GET({ redirect }: APIContext) { return redirect('/login', 302); } ``` @@ -1022,17 +1022,13 @@ export default function () { ## Componentes incorporados -Astro incluye varios componentes incorporados para que los uses en tus proyectos. Todos los componentes incorporados están disponibles en archivos `.astro` a través de `import {} from 'astro/components';`. - -### `` - -El componente Markdown ya no está integrado en Astro. Descubre cómo [importar Markdown en tus archivos Astro](/es/guides/markdown-content/#importando-markdown) en nuestra página de Markdown. +Astro incluye varios componentes integrados que puedes usar en tus proyectos. Todos los componentes integrados están disponibles en archivos `.astro` a través de `import {} from 'astro:components';`. ### `` ```astro 'theme="dark-plus"' /wrap\b/ /(inline) \/>/ --- -import { Code } from 'astro/components'; +import { Code } from 'astro:components'; --- @@ -1094,7 +1090,7 @@ Consulta la [lista de idiomas admitidos por Prism](https://prismjs.com/#supporte ```astro --- -import { Debug } from 'astro/components'; +import { Debug } from 'astro:components'; const serverObject = { a: 0, b: "string", diff --git a/src/content/docs/es/reference/cli-reference.mdx b/src/content/docs/es/reference/cli-reference.mdx index e0bf6be601901..7c314d1c35b3b 100644 --- a/src/content/docs/es/reference/cli-reference.mdx +++ b/src/content/docs/es/reference/cli-reference.mdx @@ -5,8 +5,6 @@ i18nReady: true import Since from '~/components/Since.astro'; import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' - - Puredes usar la Interfaz de Línea de Comandos (CLI) proporcionada por Astro para desarrollar, construir y previsualizar tu proyecto desde una ventana de la terminal. ### Comandos `astro` @@ -101,15 +99,16 @@ Cunado sigues las instrucciones para [instalar Astro manualmente](/es/install/ma } ``` -Seguido usarás estos comandos `astro` o los scripts que los ejecutan, sin ninguna flag. Agrega las flags al comando cuando quieras personalizar el comportamiento del comando. Por ejemplo, es posible que desees iniciar el servidor de desarrollo en un puerto diferente, o construir tu sitio incluyendo páginas borrador. +Seguido usarás estos comandos `astro` o los scripts que los ejecutan, sin ninguna flag. Agrega las flags al comando cuando quieras personalizar el comportamiento del comando. Por ejemplo, es posible que desees iniciar el servidor de desarrollo en un puerto diferente, o construir tu sitio +con registros detallados para la depuración. ```shell # ejecuta el servidor de desarrollo en el puerto 8080 usando el script `start` en `package.json` npm run start -- --port 8080 - # compila tu sitio incluyendo páginas borrador usando el script `build` en `package.json` - npm run build -- --drafts + # compila tu sitio con registros detallados usando el script `build` en `package.json` + npm run build -- --verbose ``` (The extra `--` before the `--port` flag is necessary for `npm` to pass your flags to the `astro` command.) @@ -117,16 +116,16 @@ Seguido usarás estos comandos `astro` o los scripts que los ejecutan, sin ningu ```shell # ejecuta el servidor de desarrollo en el puerto 8080 usando el script `start` en `package.json` pnpm start --port 8080 - # compila tu sitio incluyendo páginas borrador usando el script `build` en `package.json` - pnpm build --drafts + # compila tu sitio con registros detallados usando el script `build` en `package.json` + pnpm build --verbose ``` ```shell # ejecuta el servidor de desarrollo en el puerto 8080 usando el script `start` en `package.json` yarn start --port 8080 - # compila tu sitio incluyendo páginas borrador usando el script `build` en `package.json` - yarn build --drafts + # compila tu sitio con registros detallados usando el script `build` en `package.json` + yarn build --verbose ``` @@ -214,10 +213,6 @@ Construye tu proyecto para producción. Por defecto, Astro generará archivos es Usa estas flags para personalizar tu compilación. Para flags compartidas con otros comandos de Astro, puedes ver [flags comunes](#flags-comunes) más abajo. -#### `--drafts` - -Incluye las [páginas de Markdown en borradores](/es/guides/markdown-content/#páginas-de-borrador) en la compilación. - ## `astro preview` Inicia un servidor local para servir tus archivos estáticos compilados en `dist/`. @@ -357,3 +352,129 @@ Abre automáticamente la aplicación en el navegador al iniciar el servidor. ### `--help` Imprime un mensaje de ayuda. + +## APIs avanzadas (Experimental) + +Si necesitas más control al ejecutar Astro, el paquete `"astro"` también exporta APIs para ejecutar los comandos de la CLI de manera programática. + +Estas APIs son experimentales y su firma de API puede cambiar. Cualquier actualización se mencionará en el [registro de cambios de Astro](https://github.com/withastro/astro/blob/main/packages/astro/CHANGELOG.md) y la información a continuación siempre mostrará la información actual y actualizada. + +### `AstroInlineConfig` + +El tipo `AstroInlineConfig` es utilizado por todas las APIs de comandos que se detallan a continuación. Este extiende de la [configuración de Astro del usuario](/es/reference/configuration-reference/): + +```ts +interface AstroInlineConfig extends AstroUserConfig { + configFile?: string | false; + mode?: "development" | "production"; + logLevel?: "debug" | "info" | "warn" | "error" | "silent"; +} +``` + +#### `configFile` + +

+ +**Tipo:** `string | false`
+**Por defecto:** `undefined` +

+ +Una ruta personalizada al archivo de configuración de Astro. + +Si este valor es `undefined` (predeterminado) o no se establece, Astro buscará un archivo `astro.config.(js,mjs,ts)` en relación con la `root` y cargará el archivo de configuración si se encuentra. + +Si se establece una ruta relativa, se resolverá en función del directorio de trabajo actual. + +Establece a `false` para deshabilitar la carga de cualquier archivo de configuración. + +La configuración en línea proporcionada en este objeto tendrá la mayor prioridad al fusionarse con la configuración de usuario cargada. + +#### `mode` + +

+ +**Tipo:** `"development" | "production"`
+**Por defecto:** `"development"` cuando se ejecuta `astro dev`, `"production"` cuando se ejecuta `astro build` +

+ +El modo utilizado al compilar tu sitio para generar código "development" o "production". + +#### `logLevel` + +

+ +**Tipo:** `"debug" | "info" | "warn" | "error" | "silent"`
+**Por defecto:** `"info"` +

+ +El nivel de registro para filtrar los mensajes registrados por Astro. + +- `"debug"`: Registrar todo, incluyendo diagnósticos ruidosos de depuración. +- `"info"`: Registrar mensajes informativos, advertencias y errores. +- `"warn"`: Registrar advertencias y errores. +- `"error"`: Registrar solo errores. +- `"silent"`: Sin registros. + +### `dev()` + +**Tipo:** `(inlineConfig: AstroInlineConfig) => AstroDevServer` + +Similar a [`astro dev`](#astro-dev), ejecuta el servidor de desarrollo de Astro. + +```js +import { dev } from "astro"; + +const devServer = await dev({ + root: "./my-project", +}); + +// Detén el servidor si es necesario +await devServer.stop(); +``` + +### `build()` + +**Tipo:** `(inlineConfig: AstroInlineConfig) => void` + +Similar a [`astro build`](#astro-build), compila tu sitio para el despliegue. + +```js +import { build } from "astro"; + +await build({ + root: "./my-project", +}); +``` + +### `preview()` + +**Tipo:** `(inlineConfig: AstroInlineConfig) => AstroPreviewServer` + +Similar a [`astro preview`](#astro-preview), inicia un servidor local para servir el directorio estático `dist/`. + +```js +import { preview } from "astro"; + +const previewServer = await preview({ + root: "./my-project", +}); + +// Detén el servidor si es necesario +await previewServer.stop(); +``` + +### `sync()` + +**Tipo:** `(inlineConfig: AstroInlineConfig) => number` + +Similar a [`astro sync`](#astro-sync), genera tipos de TypeScript para todos los módulos de Astro. + +```js +import { sync } from "astro"; + +const exitCode = await sync({ + root: "./my-project", +}); + +process.exit(exitCode) +``` diff --git a/src/content/docs/es/reference/configuration-reference.mdx b/src/content/docs/es/reference/configuration-reference.mdx index 195a513435195..9abe078cd5473 100644 --- a/src/content/docs/es/reference/configuration-reference.mdx +++ b/src/content/docs/es/reference/configuration-reference.mdx @@ -4,8 +4,6 @@ i18nReady: true --- import Since from '~/components/Since.astro'; - - La siguiente referencia cubre todas las opciones de configuración compatibles en Astro. Para obtener más información sobre la configuración de Astro, consulta nuestra guía sobre [configuración de Astro](/es/guides/configuring-astro/). ```js @@ -175,15 +173,15 @@ La URL final donde se desplegará. Astro usa esta URL completa para generar el s

**Tipo:** `boolean`
-**Por defecto:** `false` +**Por defecto:** `true`

-Esta es una opción para minificar tu salida HTML y reducir el tamaño de tus archivos HTML. Cuando está activada, Astro elimina todos los espacios en blanco de tu HTML, incluyendo los saltos de línea, en los componentes `.astro`. Esto ocurre tanto en el modo de desarrollo como en la compilación final. -Para activarlo, establece el parámetro `compressHTML` en `true`. +Esta es una opción para minificar tu salida HTML y reducir el tamaño de tus archivos HTML. Por defecto, Astro elimina todos los espacios en blanco de tu HTML, incluyendo los saltos de línea, en los componentes `.astro`. Esto ocurre tanto en el modo de desarrollo como en la compilación final. +Para desactivar la compresión del HTML, establece el parámetro `compressHTML` en `false`. ```js { - compressHTML: true + compressHTML: false } ``` @@ -206,13 +204,7 @@ En el ejemplo de abajo, `astro dev` empezará tu servidor en `/docs`. Cuando utilices esta opción, todas tus importaciones de activos estáticos y URL deben agregar la base como prefijo. Puedes acceder a este valor a través de `import.meta.env.BASE_URL`. -Por defecto, el valor de `import.meta.env.BASE_URL` incluye una barra diagonal al final. Si tienes la opción [`trailingSlash`](/es/reference/configuration-reference/#trailingslash) establecida en `'never'`, deberás agregarla manualmente en tus importaciones de activos estáticos y URLs. - -```astro -About - -``` - +El valor de `import.meta.env.BASE_URL` respeta tu configuración de `trailingSlash` e incluirá una barra diagonal al final si la incluyes explícitamente o si se establece `trailingSlash: "always"`. Si se establece `trailingSlash: "never"`, `BASE_URL` no incluirá una barra diagonal al final, incluso si `base` la incluye. ### trailingSlash @@ -243,17 +235,19 @@ También puedes configurar esto si prefieres ser más estricto, de modo que las ### scopedStyleStrategy

-**Tipo:** `'where' | 'class'`
+**Tipo:** `'where' | 'class' | | 'attribute`
**Por defecto:** `'where'`

Especifica la estrategia utilizada para delimitar los estilos dentro de los componentes de Astro. Elige entre: - - `'where'` - Utilizar selectores `:where`, sin que aumente la especificidad. - - `'class'` - Utilizar selectores basados en clases, lo que provoca un aumento de la especificidad de +1. + - `'where'` - Utilizar selectores `:where`, sin que aumente la especificidad. + - `'class'` - Utilizar selectores basados en clases, lo que provoca un aumento de la especificidad de +1. + - `'attribute'` - Utilizar atributos `data-`, sin aumentar la especificidad. Utilizar `'class'` es útil cuando quieres asegurar que los selectores de elementos dentro de un componente de Astro anulan los valores predeterminados de estilo global (p. ej. de una hoja de estilos global). Utilizar `'where'` te brinda más control sobre la especificidad, pero requiere que utilices selectores de mayor especificidad, capas y otras herramientas para controlar qué selectores se aplican. +Utilizar `'attribute'` es útil cuando estás manipulando el atributo `class` de elementos y necesitas evitar conflictos entre tu lógica de estilo y la aplicación de estilos de Astro. ### adapter @@ -471,7 +465,7 @@ Esta opción está destinada principalmente a ser utilizada por adaptadores que

**Tipo:** `'always' | 'auto' | 'never'`
-**Por defecto:** `never`
+**Por defecto:** `auto`

@@ -483,7 +477,7 @@ Controla si los estilos del proyecto se envían al navegador en un archivo CSS s ```js { build: { - inlineStylesheets: `auto`, + inlineStylesheets: `never`, }, } ``` @@ -494,45 +488,24 @@ Controla si los estilos del proyecto se envían al navegador en un archivo CSS s

**Tipo:** `boolean`
-**Por defecto:** `false`
- +**Por defecto:** `false`

-Define como el código SSR debe ser empaquetado cuando se compila. - -Cuando `split` es `true`, Astro emitirá un archivo para cada página. -Cada archivo emitido renderizará solo una página. Las páginas se emitirán -dentro de un directorio `dist/pages/`, y los archivos emitidos mantendrán las mismas rutas de archivo -del directorio `src/pages`. +La opción de configuración de compilación `build.split` ha sido reemplazada por la opción de configuración del adaptador [`functionPerRoute`](/es/reference/adapter-reference/#functionperroute). -```js -{ - build: { - split: true - } -} -``` +Por favor, consulta la documentación de tu adaptador SSR en [la guía de integraciones](/es/guides/integrations-guide/#integraciones-oficiales) para usar `functionPerRoute` y definir cómo se empaqueta tu código SSR. ### build.excludeMiddleware

**Tipo:** `boolean`
-**Por defecto:** `false`
- +**Por defecto:** `false`

-Define si el código del middleware SSR se incluirá o no al compilar. - -Cuando está habilitado, el código del middleware no es empaquetado ni se importa en todas las páginas durante la compilación. Para ejecutar e importar manualmente el código del middleware, establece `build.excludeMiddleware: true`: +La opción de configuración de compilación `build.excludeMiddleware` ha sido reemplazada por la opción de configuración del adaptador [`edgeMiddleware`](/es/reference/adapter-reference/#edgemiddleware). -```js -{ - build: { - excludeMiddleware: true - } -} -``` +Por favor, consulta la documentación de tu adaptador SSR en [la guía de integraciones](/es/guides/integrations-guide/#integraciones-oficiales) para utilizar `edgeMiddleware` y definir si se empaquetará o no el código de middleware SSR durante la compilación. ## Opciones del Servidor @@ -549,7 +522,7 @@ Para establecer una configuración diferente basada en el comando ejecutar ("dev ```js { // Ejemplo: Usa una función para personalizar según el comando - server: ({ command }) => ({ port: command === 'dev' ? 3000 : 4000 }), + server: ({ command }) => ({ port: command === 'dev' ? 4321 : 4000 }), } ``` @@ -571,7 +544,7 @@ Establece en qué direcciones de IP el servidor debe escuchar (es decir, direcci

**Tipo:** `number`
-**Por defecto:** `3000` +**Por defecto:** `4321`

Establece en qué puerto debe escuchar el servidor. @@ -602,11 +575,11 @@ Establece encabezados de respuesta HTTP personalizados para enviar en `astro dev

**Tipo:** `Object`
-**Por defecto:** `{entrypoint: 'astro/assets/services/squoosh', config?: {}}`
+**Por defecto:** `{entrypoint: 'astro/assets/services/sharp', config?: {}}`

-Establece qué servicio de imágenes se utiliza para el soporte experimental de activos de Astro. +Establece qué servicio de imágenes se utiliza para el soporte experimental de assets de Astro. El valor debe ser un especificador de módulo para el servicio de imágenes que se utilizará: uno de los dos servicios incorporados de Astro o una implementación de terceros. @@ -830,7 +803,7 @@ Puedes pasar opciones a [remark-rehype](https://github.com/remarkjs/remark-rehyp ## Integraciones -Extiende Astro con integraciones personalizadas. Las integraciones sirven para agregar soporte a frameworks (como Solid.js), nuevas funcionalidades (sitemaps) y nuevas bibliotecas (como Partytown y Turbolinks). +Extiende Astro con integraciones personalizadas. Las integraciones sirven para agregar soporte a frameworks (como Solid.js), nuevas funcionalidades (sitemaps) y nuevas bibliotecas (como Partytown). Consulta nuestra [guía de integraciones](/es/guides/integrations-guide/) para obtener ayuda para comenzar con integraciones de Astro. @@ -883,45 +856,6 @@ Astro ofrece flags experimentales para dar a los usuarios acceso temprano a nuev Estas flags no son garantía de ser estables. -### experimental.assets - -

- -**Tipo:** `boolean`
-**Por defecto:** `false`
- -

- -Habilita soporte experimental para optimizar y cambiar el tamaño de las imágenes. Con esto habilitado, se expondrá un nuevo módulo `astro:assets`. - -Para habilitar esta característica, establezca `experimental.assets` en `true` en la configuración de Astro: - -```js -{ - experimental: { - assets: true, - }, -} -``` - -### experimental.viewTransitions - -

-**Tipo:** `boolean`
-**Por defecto:** `false`
- -

- -Habilita el soporte experimental para el componente ``. Con esto habilitado, puedes optar por las [transiciones de vista](/es/guides/view-transitions/) por página utilizando este componente y activar las animaciones con la directiva `transition:animate`. - -```js -{ - experimental: { - viewTransitions: true, - }, -} -``` - ### experimental.optimizeHoistedScript

diff --git a/src/content/docs/es/reference/directives-reference.mdx b/src/content/docs/es/reference/directives-reference.mdx index 4b8044d4b9ce6..3a5eb8f039fcc 100644 --- a/src/content/docs/es/reference/directives-reference.mdx +++ b/src/content/docs/es/reference/directives-reference.mdx @@ -26,24 +26,21 @@ Una directiva de maquetado nunca se incluye directamente en el HTML del compilad ### `class:list` -`class:list={...}` toma un array de clases y los convierte en un string. Esto está inspirado en la popular biblioteca auxiliar [clsx](https://github.com/lukeed/clsx) de @lukeed, pero integrado directamente en Astro. +`class:list={...}` toma un array de clases y los convierte en un string. Esto está impulsado por la popular biblioteca auxiliar de [@lukeed](https://github.com/lukeed/clsx) llamada [clsx](https://github.com/lukeed/clsx). `class:list` toma un array de varios tipos de valores posibles diferentes: - `string`: Agregado al elemento `class` - `Object`: Todas las keys verdaderas se agregan al elemento `class` - `Array`: aplanado -- `Set`: aplanado -- `false` o `null`: omitido +- `false`, `null`, o `undefined`: Omitido ```astro - + ``` -Los valores duplicados se eliminan automáticamente. - ### `set:html` `set:html={string}` inyecta un string de HTML en un elemento, similar a la opción `el.innerHTML`. diff --git a/src/content/docs/es/reference/error-reference.mdx b/src/content/docs/es/reference/error-reference.mdx index cd2cc79820b96..ff2af329c0172 100644 --- a/src/content/docs/es/reference/error-reference.mdx +++ b/src/content/docs/es/reference/error-reference.mdx @@ -52,6 +52,7 @@ La siguiente referencia es una lista completa de los errores que puedes encontra - [**AstroGlobNoMatch**](/es/reference/errors/astro-glob-no-match/)
Astro.glob() did not match any files. - [**RedirectWithNoLocation**](/es/reference/errors/redirect-with-no-location/)
A redirect must be given a location with the `Location` header. - [**InvalidDynamicRoute**](/es/reference/errors/invalid-dynamic-route/)
Invalid dynamic route. +- [**MissingSharp**](/es/reference/errors/missing-sharp/)
Could not find Sharp. - [**UnknownViteError**](/es/reference/errors/unknown-vite-error/)
Unknown Vite Error. - [**FailedToLoadModuleSSR**](/es/reference/errors/failed-to-load-module-ssr/)
Could not import file. - [**InvalidGlob**](/es/reference/errors/invalid-glob/)
Invalid glob pattern. diff --git a/src/content/docs/es/reference/errors/expected-image-options.mdx b/src/content/docs/es/reference/errors/expected-image-options.mdx index a6f0b35d75606..96078fcf842c4 100644 --- a/src/content/docs/es/reference/errors/expected-image-options.mdx +++ b/src/content/docs/es/reference/errors/expected-image-options.mdx @@ -19,4 +19,4 @@ const optimizedImage = await getImage({src: myImage, width: 300, height: 300}); En la mayoría de los casos, este error se produce porque los parámetros se han pasado directamente en lugar de dentro de un objeto. **Ver también:** -- [Assets (Experimental)](/es/guides/assets/) +- [Images](/es/guides/images/) \ No newline at end of file diff --git a/src/content/docs/es/reference/errors/expected-image.mdx b/src/content/docs/es/reference/errors/expected-image.mdx index b3f3d846cb84f..9b19295ac2fed 100644 --- a/src/content/docs/es/reference/errors/expected-image.mdx +++ b/src/content/docs/es/reference/errors/expected-image.mdx @@ -22,4 +22,4 @@ import myImage from "../assets/my_image.png"; En la mayoría de los casos, este error ocurre cuando el valor pasado a `src` es undefined. **Ver también:** -- [Assets (Experimental)](/es/guides/assets/) +- [Images](/es/guides/images/) diff --git a/src/content/docs/es/reference/errors/image-missing-alt.mdx b/src/content/docs/es/reference/errors/image-missing-alt.mdx index d7a14539386cd..03bb9aab6509b 100644 --- a/src/content/docs/es/reference/errors/image-missing-alt.mdx +++ b/src/content/docs/es/reference/errors/image-missing-alt.mdx @@ -17,6 +17,6 @@ La propiedad `alt` te permite proporcionar texto alternativo descriptivo a los u Si la imagen es meramente decorativa (es decir, no contribuye a la comprensión de la página), establece `alt=""` para que los lectores de pantalla sepan ignorar la imagen. **Ver también:** -- [Activos (experimental)](/es/guides/assets/) -- [Componente Imagen](/es/guides/assets/#image--astroassets) -- [Componente Imagen#alt](/es/guides/assets/#alt-requerido) +- [Images](/es/guides/images/) +- [Componente Imagen](/es/guides/images/#image--astroassets) +- [Componente Imagen#alt](/es/guides/images/#alt-requerido) diff --git a/src/content/docs/es/reference/errors/local-image-used-wrongly.mdx b/src/content/docs/es/reference/errors/local-image-used-wrongly.mdx index 2b508c558c7b6..8c342e71f6559 100644 --- a/src/content/docs/es/reference/errors/local-image-used-wrongly.mdx +++ b/src/content/docs/es/reference/errors/local-image-used-wrongly.mdx @@ -23,4 +23,4 @@ import myImage from "../my_image.png"; ``` **Ver también:** -- [Assets (Experimental)](/es/guides/assets/) +- [Images](/es/guides/images/) diff --git a/src/content/docs/es/reference/errors/locals-not-an-object.mdx b/src/content/docs/es/reference/errors/locals-not-an-object.mdx index 42549e3975a24..0139962e8b85f 100644 --- a/src/content/docs/es/reference/errors/locals-not-an-object.mdx +++ b/src/content/docs/es/reference/errors/locals-not-an-object.mdx @@ -11,7 +11,7 @@ Se produce un error en el modo de desarrollo cuando `locals` se sobrescribe con Por ejemplo: ```ts -import {defineMiddleware} from "astro/middleware"; +import {defineMiddleware} from "astro:middleware"; export const onRequest = defineMiddleware((context, next) => { context.locals = 1541; return next(); diff --git a/src/content/docs/es/reference/errors/markdown-image-not-found.mdx b/src/content/docs/es/reference/errors/markdown-image-not-found.mdx index 146db4912eace..357fa9d6994b3 100644 --- a/src/content/docs/es/reference/errors/markdown-image-not-found.mdx +++ b/src/content/docs/es/reference/errors/markdown-image-not-found.mdx @@ -12,4 +12,4 @@ Astro no pudo encontrar una imagen que incluiste en tu contenido Markdown. Norma Las imágenes en Markdown son relativas al archivo actual. Para referirse a una imagen que se encuentra en la misma carpeta que el archivo `.md`, la ruta debe empezar por `./`. **Ver también:** -- [Assets (Experimental)](/es/guides/assets/) +- [Images](/es/guides/images/) diff --git a/src/content/docs/es/reference/errors/middleware-no-data-or-next-called.mdx b/src/content/docs/es/reference/errors/middleware-no-data-or-next-called.mdx index f99676e54d55b..6395c16a4fd00 100644 --- a/src/content/docs/es/reference/errors/middleware-no-data-or-next-called.mdx +++ b/src/content/docs/es/reference/errors/middleware-no-data-or-next-called.mdx @@ -11,7 +11,7 @@ Se produce un error cuando el middleware no devuelve ningún dato ni llama a la Por ejemplo: ```ts -import {defineMiddleware} from "astro/middleware"; +import {defineMiddleware} from "astro:middleware"; export const onRequest = defineMiddleware((context, _) => { // no regresa nada o llama `next context.locals.someData = false; diff --git a/src/content/docs/es/reference/errors/middleware-not-aresponse.mdx b/src/content/docs/es/reference/errors/middleware-not-aresponse.mdx index c22b976ba0706..9c5549d292941 100644 --- a/src/content/docs/es/reference/errors/middleware-not-aresponse.mdx +++ b/src/content/docs/es/reference/errors/middleware-not-aresponse.mdx @@ -11,7 +11,7 @@ Se produce un error en el modo de desarrollo cuando el middleware devuelve algo Por ejemplo: ```ts -import {defineMiddleware} from "astro/middleware"; +import {defineMiddleware} from "astro:middleware"; export const onRequest = defineMiddleware(() => { return "string" }); diff --git a/src/content/docs/es/reference/errors/missing-image-dimension.mdx b/src/content/docs/es/reference/errors/missing-image-dimension.mdx index 45c4bc711007b..41bd8f7f09378 100644 --- a/src/content/docs/es/reference/errors/missing-image-dimension.mdx +++ b/src/content/docs/es/reference/errors/missing-image-dimension.mdx @@ -1,9 +1,4 @@ --- -# NOTE: This file is auto-generated from 'scripts/error-docgen.mjs' -# Do not make edits to it directly, they will be overwritten. -# Instead, change this file: https://github.com/withastro/astro/blob/main/packages/astro/src/core/errors/errors-data.ts -# Translators, please remove this note and the component. - title: Missing image dimensions i18nReady: true githubURL: https://github.com/withastro/astro/blob/main/packages/astro/src/core/errors/errors-data.ts @@ -17,5 +12,5 @@ Para imágenes remotas, no se pueden inferir `width` y `height` del archivo orig Si tu imagen está dentro de tu carpeta `src`, probablemente quieras importarla en su lugar. Consulta [la guía de importaciones para obtener más información](/es/guides/imports/#otros-recursos). **Ver también:** -- [Activos (experimental)](/es/guides/assets/) -- [Componente Imagen#width-and-height](/es/guides/assets/#width-y-height) +- [Images](/es/guides/images/) +- [Componente Imagen#width-y-height-requerido](/es/guides/images/#width-y-height-requerido-para-imágenes-public-y-remotas) diff --git a/src/content/docs/es/reference/errors/missing-sharp.mdx b/src/content/docs/es/reference/errors/missing-sharp.mdx new file mode 100644 index 0000000000000..8582a14f837ad --- /dev/null +++ b/src/content/docs/es/reference/errors/missing-sharp.mdx @@ -0,0 +1,27 @@ +--- +title: Could not find Sharp. +i18nReady: true +githubURL: https://github.com/withastro/astro/blob/main/packages/astro/src/core/errors/errors-data.ts +--- + +> **MissingSharp**: Could not find Sharp. Please install Sharp (`sharp`) manually into your project. + +## ¿Qué salió mal? + +Sharp es el servicio de imagen predeterminado utilizado para `astro:assets`. Cuando se utiliza un [administrador de paquetes estricto](https://pnpm.io/pnpm-vs-npm#npms-flat-tree) como pnpm, Sharp debe instalarse manualmente en tu proyecto para utilizar el procesamiento de imágenes. + +Si no estás utilizando `astro:assets` para el procesamiento de imágenes y no deseas instalar Sharp, puedes configurar el siguiente servicio de imagen para que no realiza ningún procesamiento: + +```js +import { defineConfig, passthroughImageService } from "astro/config"; +export default defineConfig({ + image: { + service: passthroughImageService(), + }, +}); +``` + +**Ver también:** +- [Servicio de Imágenes Predeterminado](/es/guides/images/#servicio-de-imágenes-por-defecto) +- [Componente Image](/es/guides/images/#image--astroassets) +- [API de Servicios de Imágenes](/es/reference/image-service-reference/) \ No newline at end of file diff --git a/src/content/docs/es/reference/errors/static-redirect-not-available.mdx b/src/content/docs/es/reference/errors/static-redirect-not-available.mdx index 96e400a73f0d9..9f2aeaabb36ed 100644 --- a/src/content/docs/es/reference/errors/static-redirect-not-available.mdx +++ b/src/content/docs/es/reference/errors/static-redirect-not-available.mdx @@ -4,8 +4,8 @@ i18nReady: true githubURL: https://github.com/withastro/astro/blob/main/packages/astro/src/core/errors/errors-data.ts --- -:::caution[En desuso] -desde la version 2.6 +:::caution[Obsoleto] +Obsoleto desde la version 2.6. ::: > **StaticRedirectNotAvailable**: Los redireccionamientos solo están disponibles cuando se usa `output: 'server'` o `output: 'hybrid'`. Actualiza tu configuración de Astro si necesitas funciones de SSR. (E03001) diff --git a/src/content/docs/es/reference/errors/unsupported-image-format.mdx b/src/content/docs/es/reference/errors/unsupported-image-format.mdx index b908e4b19b4ac..c7085ae4dd54b 100644 --- a/src/content/docs/es/reference/errors/unsupported-image-format.mdx +++ b/src/content/docs/es/reference/errors/unsupported-image-format.mdx @@ -9,10 +9,10 @@ githubURL: https://github.com/withastro/astro/blob/main/packages/astro/src/core/ ## ¿Qué salió mal? Los servicios precargados de imagen no tienen soporte para optimizar todos los formatos de imagen. -Para formatos no admitidos como SVG y GIF, puedes usar una etiqueta `img` directamente: +Para formatos no admitidos como los GIFs, puedes usar una etiqueta `img` directamente: ```astro --- -import rocket from '../assets/images/rocket.svg'; +import rocket from '../assets/images/rocket.gif'; --- Un cohete en el espacio. diff --git a/src/content/docs/es/reference/image-service-reference.mdx b/src/content/docs/es/reference/image-service-reference.mdx index 083f994dd2d44..7b8b43ece179d 100644 --- a/src/content/docs/es/reference/image-service-reference.mdx +++ b/src/content/docs/es/reference/image-service-reference.mdx @@ -137,7 +137,7 @@ Para acceder a la configuración del servicio de imágenes ([`image.service.conf import type { APIRoute } from "astro"; import { getConfiguredImageService, imageConfig } from 'astro:assets'; -export const get: APIRoute = async ({ request }) => { +export const GET: APIRoute = async ({ request }) => { const imageService = await getConfiguredImageService(); const imageTransform = imageService.parseURL(new URL(request.url), imageConfig); diff --git a/src/content/docs/es/reference/integrations-reference.mdx b/src/content/docs/es/reference/integrations-reference.mdx index a98cde8e7b7fa..57f38c8a7f021 100644 --- a/src/content/docs/es/reference/integrations-reference.mdx +++ b/src/content/docs/es/reference/integrations-reference.mdx @@ -32,20 +32,26 @@ interface AstroIntegration { addClientDirective: (directive: ClientDirectiveConfig) => void; injectScript: (stage: InjectedScriptStage, content: string) => void; injectRoute: ({ pattern: string, entryPoint: string }) => void; + logger: AstroIntegrationLogger; }) => void; - 'astro:config:done'?: (options: { config: AstroConfig }) => void | Promise; - 'astro:server:setup'?: (options: { server: vite.ViteDevServer }) => void | Promise; - 'astro:server:start'?: (options: { address: AddressInfo }) => void | Promise; - 'astro:server:done'?: () => void | Promise; - 'astro:build:start'?: (options: { buildConfig: BuildConfig }) => void | Promise; + 'astro:config:done'?: (options: { config: AstroConfig; logger: AstroIntegrationLogger; }) => void | Promise; + 'astro:server:setup'?: (options: { server: vite.ViteDevServer; logger: AstroIntegrationLogger; }) => void | Promise; + 'astro:server:start'?: (options: { address: AddressInfo; logger: AstroIntegrationLogger; }) => void | Promise; + 'astro:server:done'?: (options: { logger: AstroIntegrationLogger; }) => void | Promise; + 'astro:build:start'?: (options: { logger: AstroIntegrationLogger; }) => void | Promise; 'astro:build:setup'?: (options: { vite: ViteConfigWithSSR; pages: Map; target: 'client' | 'server'; + logger: AstroIntegrationLogger; }) => void | Promise; - 'astro:build:generated'?: (options: { dir: URL }) => void | Promise; - 'astro:build:ssr'?: (options: { manifest: SerializedSSRManifestm, entryPoints: Map }) => void | Promise; - 'astro:build:done'?: (options: { dir: URL; routes: RouteData[] }) => void | Promise; + 'astro:build:generated'?: (options: { dir: URL; logger: AstroIntegrationLogger; }) => void | Promise; + 'astro:build:ssr'?: (options: { + manifest: SerializedSSRManifestm; + entryPoints: Map; + logger: AstroIntegrationLogger; + }) => void | Promise; + 'astro:build:done'?: (options: { dir: URL; routes: RouteData[]; logger: AstroIntegrationLogger; }) => void | Promise; }; } ``` @@ -71,6 +77,7 @@ interface AstroIntegration { addClientDirective: (directive: ClientDirectiveConfig) => void; injectScript: (stage: InjectedScriptStage, content: string) => void; injectRoute: ({ pattern: string, entryPoint: string }) => void; + logger: AstroIntegrationLogger; }) => void; ``` @@ -529,6 +536,69 @@ export default defineConfig({ Esto supone que la definición de la integración es 1) una exportación `default` y 2) una función. ¡Asegúrate de que esto sea cierto antes de agregar la palabra clave `astro-integration`! ::: +## `AstroIntegrationLogger` + +Una instancia del logger de Astro, útil para escribir registros. Este logger utiliza el mismo [nivel de registro](/es/reference/cli-reference/#--verbose) +configurado a través de la CLI. + +**Métodos disponibles** para escribir en la terminal: +- `logger.info("Mensaje")`; +- `logger.warn("Mensaje")`; +- `logger.error("Mensaje")`; +- `logger.debug("Mensaje")`; + +Todos los mensajes son precedidos por una etiqueta que tiene el mismo valor de la integración. + +```ts title="integration.ts" {8} +import type { AstroIntegration } from "astro"; +export function formatIntegration(): AstroIntegration { + return { + name: "astro-format", + hooks: { + "astro:build:done": (options, { logger }) => { + // hacer algo + logger.info("Integration ready."); + } + } + } +} +``` + +El ejemplo anterior registrará un mensaje que incluye el mensaje `info` proporcionado: + +```shell +[astro-format] Integration ready. +``` + +Para registrar algunos mensajes con una etiqueta diferente, utiliza el método `.fork` para especificar una alternativa al `nombre` predeterminado: + +```ts title="integration.ts" ".fork" +import type { AstroIntegration } from "astro"; +export function formatIntegration(): AstroIntegration { + return { + name: "astro-format", + hooks: { + "astro:config:done": ({ logger }) => { + // hacer algo + logger.info("Integration ready."); + }, + "astro:build:done": ({ logger }) => { + const buildLogger = logger.fork("astro-format/build"); + // hacer algo + buildLogger.info("Build finished.") + } + } + } +} +``` + +El ejemplo anterior generará registros con `[astro-format]` de forma predeterminada, y con `[astro-format/build]` cuando se especifique: + +```shell +[astro-format] Integration ready. +[astro-format/build] Build finished. +``` + ## Orden de integración Todas las integraciones se ejecutan en el orden en que están configuradas. Por ejemplo, para el array `[react(), svelte()]` en `astro.config.*` de un usuario, `react` se ejecutará antes que `svelte`.