You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/content/docs/es/concepts/why-astro.mdx
+3-3Lines changed: 3 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -70,9 +70,9 @@ Un sitio web de Astro puede [cargar un 40% más rápido con un 90% menos de Java
70
70
71
71
### Fácil de usar
72
72
73
-
**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.
73
+
**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.
74
74
75
-
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.
75
+
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.
76
76
77
77
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.
78
78
@@ -86,6 +86,6 @@ Creemos firmemente que Astro es un proyecto exitoso si a las personas les encant
86
86
87
87
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.
88
88
89
-
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.
89
+
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.
90
90
91
91
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.
Copy file name to clipboardExpand all lines: src/content/docs/es/guides/actions.mdx
+60-10Lines changed: 60 additions & 10 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -24,7 +24,7 @@ Las acciones se definen en un objeto `server` exportado desde `src/actions/index
24
24
25
25
```ts title="src/actions/index.ts"
26
26
import { defineAction } from'astro:actions';
27
-
import { z } from'astro:schema';
27
+
import { z } from'astro/zod';
28
28
29
29
exportconst server = {
30
30
myAction: defineAction({ /* ... */ })
@@ -63,11 +63,11 @@ Sigue estos pasos para definir una acción y llamarla desde una etiqueta `script
63
63
}
64
64
```
65
65
66
-
2. Importa la utilidad `defineAction()` desde `astro:actions` y el objeto `z` desde `astro:schema`.
66
+
2. Importa la utilidad `defineAction()` desde `astro:actions` y el objeto `z` desde `astro/zod`.
67
67
68
68
```ts ins={1-2} title="src/actions/index.ts"
69
69
import { defineAction } from'astro:actions';
70
-
import { z } from'astro:schema';
70
+
import { z } from'astro/zod';
71
71
72
72
exportconst server = {
73
73
// declaraciones de acciones
@@ -79,7 +79,7 @@ Sigue estos pasos para definir una acción y llamarla desde una etiqueta `script
79
79
80
80
```ts ins={5-12} title="src/actions/index.ts"
81
81
import { defineAction } from'astro:actions';
82
-
import { z } from'astro:schema';
82
+
import { z } from'astro/zod';
83
83
84
84
exportconst server = {
85
85
getGreeting: defineAction({
@@ -291,7 +291,7 @@ Las acciones aceptan datos JSON por defecto. Para aceptar datos de formulario de
291
291
292
292
```ts title="src/actions/index.ts" ins={6}
293
293
import { defineAction } from'astro:actions';
294
-
import { z } from'astro:schema';
294
+
import { z } from'astro/zod';
295
295
296
296
exportconst server = {
297
297
comment: defineAction({
@@ -302,6 +302,56 @@ export const server = {
302
302
}
303
303
```
304
304
305
+
### Uso de validadores con entradas de formulario
306
+
307
+
{/* TODO: add link to "configurada para aceptar datos de formulario" when existing file /es/reference/modules/astro-actions/#propiedad-accept */}
308
+
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()`.
309
+
310
+
Además, Astro proporciona un manejo especial interno para tu conveniencia para validar los siguientes tipos de campos de entrada:
311
+
312
+
- Las entradas de tipo `number` se pueden validar usando `z.number()`
313
+
- Las entradas de tipo `checkbox` se pueden validar usando `z.coerce.boolean()`
314
+
- Las entradas de tipo `file` se pueden validar usando `z.instanceof(File)`
315
+
- Las entradas múltiples del mismo `name` se pueden validar usando `z.array(/* validador */)`
316
+
- Todas las demás entradas se pueden validar usando `z.string()`
317
+
318
+
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 (`""`).
319
+
320
+
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:
// Coincide cuando el campo `type` tiene el valor `create`
332
+
type: z.literal('create'),
333
+
name: z.string(),
334
+
email: z.string().email(),
335
+
}),
336
+
z.object({
337
+
// Coincide cuando el campo `type` tiene el valor `update`
338
+
type: z.literal('update'),
339
+
id: z.number(),
340
+
name: z.string(),
341
+
email: z.string().email(),
342
+
}),
343
+
]),
344
+
async handler(input) {
345
+
if (input.type==='create') {
346
+
// el input es { type: 'create', name: string, email: string }
347
+
} else {
348
+
// el input es { type: 'update', id: number, name: string, email: string }
349
+
}
350
+
},
351
+
}),
352
+
};
353
+
```
354
+
305
355
### Validación de datos de formulario
306
356
307
357
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.
@@ -330,7 +380,7 @@ El siguiente ejemplo muestra un formulario validado para la suscripción a un ne
330
380
331
381
```ts title="src/actions/index.ts" ins={5-12}
332
382
import { defineAction } from'astro:actions';
333
-
import { z } from'astro:schema';
383
+
import { z } from'astro/zod';
334
384
335
385
exportconst server = {
336
386
newsletter: defineAction({
@@ -407,8 +457,7 @@ Las páginas deben renderizarse bajo demanda al llamar acciones usando una acci
407
457
408
458
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.
409
459
410
-
{/* TODO: add link for spanish */}
411
-
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.
460
+
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.
412
461
413
462
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.
414
463
@@ -445,7 +494,7 @@ Por ejemplo, imagina que tienes una acción `createProduct` que devuelve el id d
445
494
446
495
```ts title="src/actions/index.ts" mark={10}
447
496
import { defineAction } from'astro:actions';
448
-
import { z } from'astro:schema';
497
+
import { z } from'astro/zod';
449
498
450
499
exportconst server = {
451
500
createProduct: defineAction({
@@ -660,7 +709,8 @@ Las acciones son accesibles como endpoints públicos basados en el nombre de la
660
709
661
710
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.
662
711
663
-
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`:
712
+
{/* TODO: add link [un subconjunto de `APIContext` object](/es/reference/modules/astro-actions/#actionapicontext) when astro-actions.mdx exists */}
713
+
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`:
0 commit comments