I18 Micro, mi solución a localización en la web

Si quieres algo bien hecho a veces tienes que hacerlo tu mismo.

Desde hace algunos años la mayoría de las aplicaciones en las que he trabajado han tenido sistemas de localización, y literalmente he tenido que utilizar librerías distintas para cáda uno. Basado en mi experiencia no existe una que cumpla con todas mis expectativas:

1. Typesafe
2. No build step
3. Fácil de usar

Otras veces me di cuenta que el proyecto que estaba creando simplemente por diversión no necesitaba una librería con 10000 dependencias para traducir 10 textos.

Así que decidí crear mi propia solución.

Ejemplo interactivo

const locales = ["en", "es", "fr"];

type Locale = typeof locales[number];

const i18n = new I18n(locales, "en", {
    en: {
        hello: "Hello",
    bye: "Bye"
    },
    es: {
        hello: "Hola",
        bye: "Adios"
    },
    fr: {
        hello: "Bonjour",
        bye: "Au revoir"
    }
})

---

i18n Micro

Ningún otro nombre estaba disponible, pero hay que ver un ejemplo de como funciona:

import I18n from "i18n-micro";

const i18n = new I18n(
    ["en", "es"],
    "en",
    {
        en: {
            greeting: "Hello, {name}!",
            nav: {
                home: "Home",
                about: "About",
            },
        },
        es: {
            greeting: "¡Hola, {name}!",
            nav: {
                home: "Inicio",
                about: "Acerca de",
            },
        },
    }
);

El constructor acepta 3 parámetros: un array de idiomas, el idioma default, que tiene que ser tipo array de idiomas, y finalmente un objeto de textos, que en su primer nivel DEBE de tener por key uno de los lenguajes declarados anteriormente.

Cómo utilizar

Este approach se me hizo bastante limpio en práctica, miren como funciona:

i18n.t("nav.home"); // Home

¿Y si necesitamos cambiar de idioma?

i18n.t("nav.home"); // Home
i18n.changeLocale("es");
i18n.t("nav.home"); // Inicio

¿Y si tenemos una constante como un nombre que sabemos que no será traducido?

const name = "Sturgill Simpson";
i18n.t('greeting', { name }); //¡Hola, Sturgill Simpson!

Ah, y el parámetro de string que acepta la función i18n.t es typesafe:

i18n.t("nav.hoem"); // ❌ TypeScript error

i18n micro es agnóstica, puede utilizarse en el cliente y en el servidor, muy bias de mi parte pero honestamente es mi librería i18n favorita, la he utilizado para 2 proyectos, y planeo seguirla utilizando para muchos más (Empezando por remplazar el horrible sistema de i18n custom que diseñé para mi blog.)

Conclusión

En su primera semana publicada en NPM tuvo 120 descargas, que al menos 110 deben ser de bots, y 8 deben ser mías, sin embargo con los mini-proyectos en donde la he utilizado ya me ha salvado del clásico setup inicial que hago con mis soluciones custom.

Planeo en un futuro agregar typesafety mientras se utilizan json files para aplicaciones más grandes, sin embargo eso tendría que ser un build step, así que no lo considero una prioridad.

El repositorio es público en Github, y pueden verlo en NPM también.

¡Hasta la próxima!