Skip to content
Open
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
6 changes: 3 additions & 3 deletions src/content/docs/es/concepts/why-astro.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -70,9 +70,9 @@ Un sitio web de Astro puede [cargar un 40% más rápido con un 90% menos de Java

### Fácil de usar

**La meta de Astro es ser accessible a cada desarrollador web.** Astro fué diseñado para sentirse familiar y asequible independientemente el nivel de habilidad o experiencia pasada en el desarrollo web.
**La meta de Astro es ser accessible a cada desarrollador web.** Astro fue diseñado para sentirse familiar y asequible independientemente el nivel de habilidad o experiencia pasada en el desarrollo web.

El lenguaje de UI `.astro` es un superconjunto de HTML: ¡cualquier HTML válido es una sintaxis de plantilla válida en Astro! Entonces, si puedes escribir HTML, ¡puedes escribir componentes de Astro! Pero, además combina algunas de nuestra características favoritas tomadas de otros lenguajes de componentes, como expresiones JSX (React) y CSS con ámbito por defecto (Svelte y Vue). Esta cercanía a HTML también facilita el uso de mejoras progresivas y patrones comunes de accessibilidad sin un costo adicional.
El lenguaje de UI `.astro` es un superconjunto de HTML: ¡cualquier HTML válido es una sintaxis de plantilla válida en Astro! Entonces, si puedes escribir HTML, ¡puedes escribir componentes de Astro! Pero, además combina algunas de nuestra características favoritas tomadas de otros lenguajes de componentes, como expresiones JSX (React) y CSS con ámbito por defecto (Svelte y Vue). Esta cercanía a HTML también facilita el uso de mejoras progresivas y patrones comunes de accesibilidad sin un costo adicional.

Luego nos aseguramos de que también pudieras usar tus lenguajes de componentes de UI favoritos que ya conoces e incluso reutilizar componentes que ya puedas tener. React, Preact, Svelte, Vue, Solid y otros, incluidos los web components, son compatibles para la creación de componentes de UI en un proyecto de Astro.

Expand All @@ -86,6 +86,6 @@ Creemos firmemente que Astro es un proyecto exitoso si a las personas les encant

Astro invierte en herramientas de desarrollo como una gran experiencia en el CLI desde el momento que abres la terminal, una extension oficial de VS Code para el resaltado de sintaxis, TypeScript y Intellisense, y una documentación mantenida activamente por cientos de contribuidores de la comunidad, disponible en 14 idiomas.

Nuestra comunidad acogedora, respetuosa e inclusiva de Discord está lista para proporcionar soporte, motivacion y ánimo. Abre un hilo en `#support` para obtener ayuda con tu proyecto. Visita nuestro canal dedicado `#showcase` para compartir tus sitios de Astro, publicaciones de blog, videos e incluso trabajos en progreso para obtener comentarios seguros y críticas constructivas. Participa en eventos en vivo regulares como nuestra llamada comunitaria semanal "Talking and Doc'ing" y sesiones de API/bug.
Nuestra comunidad acogedora, respetuosa e inclusiva de Discord está lista para proporcionar soporte, motivación y ánimo. Abre un hilo en `#support` para obtener ayuda con tu proyecto. Visita nuestro canal dedicado `#showcase` para compartir tus sitios de Astro, publicaciones de blog, videos e incluso trabajos en progreso para obtener comentarios seguros y críticas constructivas. Participa en eventos en vivo regulares como nuestra llamada comunitaria semanal "Talking and Doc'ing" y sesiones de API/bug.

Como proyecto open-source, damos la bienvenida a contribuciones de todos los tipos y tamaños por parte de miembros de la comunidad de todos los niveles de experiencia. Estás invitado a unirte a las discusiones sobre la hoja de ruta para dar forma al futuro de Astro, y esperamos que contribuyas con correcciones y características al código base principal, compilador, docs, herramientas de lenguaje, sitios web y otros proyectos.
70 changes: 60 additions & 10 deletions src/content/docs/es/guides/actions.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ Las acciones se definen en un objeto `server` exportado desde `src/actions/index

```ts title="src/actions/index.ts"
import { defineAction } from 'astro:actions';
import { z } from 'astro:schema';
import { z } from 'astro/zod';

export const server = {
myAction: defineAction({ /* ... */ })
Expand Down Expand Up @@ -63,11 +63,11 @@ Sigue estos pasos para definir una acción y llamarla desde una etiqueta `script
}
```

2. Importa la utilidad `defineAction()` desde `astro:actions` y el objeto `z` desde `astro:schema`.
2. Importa la utilidad `defineAction()` desde `astro:actions` y el objeto `z` desde `astro/zod`.

```ts ins={1-2} title="src/actions/index.ts"
import { defineAction } from 'astro:actions';
import { z } from 'astro:schema';
import { z } from 'astro/zod';

export const server = {
// declaraciones de acciones
Expand All @@ -79,7 +79,7 @@ Sigue estos pasos para definir una acción y llamarla desde una etiqueta `script

```ts ins={5-12} title="src/actions/index.ts"
import { defineAction } from 'astro:actions';
import { z } from 'astro:schema';
import { z } from 'astro/zod';

export const server = {
getGreeting: defineAction({
Expand Down Expand Up @@ -291,7 +291,7 @@ Las acciones aceptan datos JSON por defecto. Para aceptar datos de formulario de

```ts title="src/actions/index.ts" ins={6}
import { defineAction } from 'astro:actions';
import { z } from 'astro:schema';
import { z } from 'astro/zod';

export const server = {
comment: defineAction({
Expand All @@ -302,6 +302,56 @@ export const server = {
}
```

### Uso de validadores con entradas de formulario

{/* TODO: add link to "configurada para aceptar datos de formulario" when existing file /es/reference/modules/astro-actions/#propiedad-accept */}
Cuando tu acción está configurada para aceptar datos de formulario, puedes usar cualquier validador de Zod para validar tus campos (por ejemplo, `z.coerce.date()` para entradas de fecha). Las funciones de extensión, incluyendo `.refine()`, `.transform()` y `.pipe()`, también son compatibles con el validador `z.object()`.

Además, Astro proporciona un manejo especial interno para tu conveniencia para validar los siguientes tipos de campos de entrada:

- Las entradas de tipo `number` se pueden validar usando `z.number()`
- Las entradas de tipo `checkbox` se pueden validar usando `z.coerce.boolean()`
- Las entradas de tipo `file` se pueden validar usando `z.instanceof(File)`
- Las entradas múltiples del mismo `name` se pueden validar usando `z.array(/* validador */)`
- Todas las demás entradas se pueden validar usando `z.string()`

Cuando envías tu formulario con entradas vacías, el tipo de salida puede no coincidir con tu validador `input`. Los valores vacíos se convierten en `null`, excepto al validar arreglos o booleanos. Por ejemplo, si se envía una entrada de tipo `text` con un valor vacío, el resultado será `null` en lugar de una cadena vacía (`""`).

Para aplicar una unión de diferentes validadores, usa el envoltorio `z.discriminatedUnion()` para reducir el tipo basado en un campo de formulario específico. Este ejemplo acepta el envío de un formulario para "crear" o "actualizar" un usuario, usando el campo del formulario con el nombre `type` para determinar contra qué objeto validar:

```ts title="src/actions/index.ts" {7-21} "create" "update"
import { defineAction } from 'astro:actions';
import { z } from 'astro/zod';

export const server = {
changeUser: defineAction({
accept: 'form',
input: z.discriminatedUnion('type', [
z.object({
// Coincide cuando el campo `type` tiene el valor `create`
type: z.literal('create'),
name: z.string(),
email: z.string().email(),
}),
z.object({
// Coincide cuando el campo `type` tiene el valor `update`
type: z.literal('update'),
id: z.number(),
name: z.string(),
email: z.string().email(),
}),
]),
async handler(input) {
if (input.type === 'create') {
// el input es { type: 'create', name: string, email: string }
} else {
// el input es { type: 'update', id: number, name: string, email: string }
}
},
}),
};
```

### Validación de datos de formulario

Las acciones convertirán los datos del formulario enviado en un objeto, usando el valor del atributo `name` de cada input como claves del objeto. Por ejemplo, un formulario que contenga `<input name="search">` se convertirá en un objeto como `{ search: 'valor ingresado por el usuario' }`. El esquema `input` de tu acción se usará para validar este objeto.
Expand Down Expand Up @@ -330,7 +380,7 @@ El siguiente ejemplo muestra un formulario validado para la suscripción a un ne

```ts title="src/actions/index.ts" ins={5-12}
import { defineAction } from 'astro:actions';
import { z } from 'astro:schema';
import { z } from 'astro/zod';

export const server = {
newsletter: defineAction({
Expand Down Expand Up @@ -407,8 +457,7 @@ Las páginas deben renderizarse bajo demanda al llamar acciones usando una acci

Puedes habilitar envíos de formularios sin JavaScript usando atributos estándar en cualquier elemento `<form>`. Los envíos de formularios sin JavaScript del lado cliente pueden ser útiles como respaldo cuando JavaScript no carga o si prefieres manejar formularios completamente desde el servidor.

{/* TODO: add link for spanish */}
Llamar a Astro.getActionResult() en el servidor devuelve el resultado de tu envío de formulario (`data` o `error`), y puede usarse para redirigir dinámicamente, manejar errores de formulario, actualizar la interfaz y más.
Llamar a [Astro.getActionResult()](/es/reference/api-reference/#getactionresult) en el servidor devuelve el resultado de tu envío de formulario (`data` o `error`), y puede usarse para redirigir dinámicamente, manejar errores de formulario, actualizar la interfaz y más.

Para llamar una acción desde un formulario HTML, agrega `method="POST"` a tu `<form>`, luego asigna el atributo `action` usando tu acción, por ejemplo `action={actions.logout}`. Esto configurará el atributo `action` con una cadena de consulta que es manejada automáticamente por el servidor.

Expand Down Expand Up @@ -445,7 +494,7 @@ Por ejemplo, imagina que tienes una acción `createProduct` que devuelve el id d

```ts title="src/actions/index.ts" mark={10}
import { defineAction } from 'astro:actions';
import { z } from 'astro:schema';
import { z } from 'astro/zod';

export const server = {
createProduct: defineAction({
Expand Down Expand Up @@ -660,7 +709,8 @@ Las acciones son accesibles como endpoints públicos basados en el nombre de la

Para autorizar las solicitudes de acción, agrega una verificación de autenticación en el handler de tu acción. Puedes usar [una biblioteca de autenticación](/es/guides/authentication/) para manejar la gestión de sesiones y la información del usuario.

Las acciones exponen el objeto completo `APIContext` para acceder a propiedades pasadas desde middleware usando `context.locals`. Cuando un usuario no está autorizado, puedes lanzar un `ActionError` con el código `UNAUTHORIZED`:
{/* TODO: add link [un subconjunto de `APIContext` object](/es/reference/modules/astro-actions/#actionapicontext) when astro-actions.mdx exists */}
Las acciones exponen un subconjunto de `APIContext` object para acceder a propiedades pasadas desde middleware usando `context.locals`. Cuando un usuario no está autorizado, puedes lanzar un `ActionError` con el código `UNAUTHORIZED`:

```ts title="src/actions/index.ts" {6-8}
import { defineAction, ActionError } from 'astro:actions';
Expand Down
3 changes: 3 additions & 0 deletions src/content/i18n/es.yml
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,9 @@ deploy.staticTag: Estático
media.navTitle: Más guías de DAM
# Vocabulario de guías de CMS
cms.navTitle: Más guías de CMS
cms.featuredSubheading: Socios de CMS destacados
cms.allSubheading: Todas las guías de CMS

# Vocabulario de guías de migración
migration.navTitle: Más guías de migración
# Vocabulario de <RecipeLinks>
Expand Down