Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

i18n(es): Update reference/ V3 #4409

Merged
merged 7 commits into from
Aug 30, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
237 changes: 236 additions & 1 deletion src/content/docs/es/reference/adapter-reference.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand All @@ -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'
}
});
},
},
Expand All @@ -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;
}
```

Expand All @@ -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

Expand Down Expand Up @@ -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

<Since v="3.0.0" />

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.
}
```
30 changes: 13 additions & 17 deletions src/content/docs/es/reference/api-reference.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
// ...
}
```
Expand All @@ -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"
}
Expand Down Expand Up @@ -504,7 +504,7 @@ export function getStaticPaths() {
];
}

export function get({ params }: APIContext) {
export function GET({ params }: APIContext) {
return {
body: JSON.stringify({ id: params.id }),
};
Expand All @@ -528,7 +528,7 @@ export function getStaticPaths() {
];
}

export function get({ props }: APIContext) {
export function GET({ props }: APIContext) {
return {
body: JSON.stringify({ author: props.author }),
};
Expand All @@ -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}`,
};
}
```
Expand All @@ -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}`,
};
}
```
Expand All @@ -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);
}
Expand All @@ -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);
}
```
Expand Down Expand Up @@ -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';`.

### `<Markdown />`

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';`.

### `<Code />`

```astro 'theme="dark-plus"' /wrap\b/ /(inline) \/>/
---
import { Code } from 'astro/components';
import { Code } from 'astro:components';
---
<!-- Resaltado de sintaxis de algún código JavaScript. -->
<Code code={`const foo = 'bar';`} lang="js" />
Expand Down Expand Up @@ -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",
Expand Down
Loading