# i18n

Habilita la internacionalización en el proyecto de SvelteKit.

### Sintaxis

```
$ vela enable i18n
```

Esto configura [Wuchale](https://wuchale.dev) con enrutado según el idioma. Las cadenas traducibles se extraen del código fuente en lugar de escribirse a mano en archivos de mensajes, así que no se mantienen claves aparte del marcado.

No tiene dependencias — funciona con o sin backend, y se combina con el hook reroute de la [negociación de contenido](/es/enable/content-negotiation).

### Qué obtienes

- `wuchale.config.js`, con los idiomas `en` y `es`. El inglés es el idioma de origen y conserva las URLs sin prefijo; el español se sirve bajo `/es`.
- Un hook `reroute` en `src/hooks.ts` que lleva las URLs localizadas a sus rutas, y las funciones de URL que usa en `src/lib/url.ts`. El archivo se crea si el proyecto no tiene uno; si no, el hook se combina con el `reroute` existente.
- Un selector de idioma en `src/lib/components/language-select.svelte`, añadido al layout raíz.
- Un handle en `src/hooks.server.ts` que carga los catálogos en el servidor y renderiza cada petición en su idioma. El archivo se crea si el proyecto no tiene uno; si no, el handle se combina con el `handle` existente.
- Un `load` en `src/routes/+layout.ts` que carga el catálogo del idioma en el navegador. Se añade a un archivo que ya tenga opciones de ruta propias; si el archivo ya tiene un `load`, se deja como está y se indica qué combinar.
- `lang="%sveltekit.lang%"` en la etiqueta `<html>` de `src/app.html`, que el handle rellena con el idioma.
- El plugin de Wuchale en la configuración de Vite, y un alias `$locales` para `src/locales`, donde viven los catálogos. El alias va en `svelte.config.js`, o en las opciones de `sveltekit()` si la configuración de Vite las define ahí.
- Los paquetes `wuchale` y `@wuchale/svelte`, y el componente `select` en un proyecto con shadcn-svelte.
- Una entrada en `.gitignore` para `src/locales/.wuchale`.

En un proyecto con shadcn-svelte, el selector de idioma es un `Select` de shadcn, añadido como último elemento de la barra de navegación del layout raíz. Sin shadcn-svelte, como en un proyecto creado con `sv create`, es un `<select>` nativo colocado encima de `{@render children()}` en `src/routes/+layout.svelte`.

Si `src/routes/+page.svelte` sigue siendo la página de bienvenida de `sv create`, el comando también escribe su traducción al español en `src/locales/es.po`, así que cambiar de idioma cambia la página de forma visible. El resto de los textos te toca traducirlos a ti.

Un archivo que el comando no puede editar con seguridad se deja como está, y en su lugar se muestra el cambio que hay que hacer. El caso habitual es un `src/routes/+layout.ts` que ya tiene un `load`, como el de la plantilla `static`: integra en él a mano el cargador que se muestra.

### Trabajar con las traducciones

Una vez habilitado, los comandos [`vela i18n`](/es/i18n) gestionan los catálogos:

- [`vela i18n extract`](/es/i18n/extract) - Extraer las cadenas traducibles
- [`vela i18n watch`](/es/i18n/watch) - Extraer al cambiar
- [`vela i18n status`](/es/i18n/status) - Mostrar qué está traducido
- [`vela i18n clean`](/es/i18n/clean) - Eliminar las cadenas que ya no se usan

### Revertir

[`vela disable i18n`](/es/disable/i18n) elimina los archivos generados y deshace los cambios anteriores. Tus catálogos en `src/locales` se conservan.