i18n

Habilita la internacionalización en el proyecto de SvelteKit.

Sintaxis

$ vela enable i18n

Esto configura Wuchale 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.

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 gestionan los catálogos:

Revertir

vela disable i18n elimina los archivos generados y deshace los cambios anteriores. Tus catálogos en src/locales se conservan.