internalization for Leptos

[Baptistemontan]

I started a discussion the other day about i18n support for leptos as I did not found any crate for it, so I started my own thing, and I went into the rabbit hole. I made it so it load locales at compile time and create a struct that mirror the given locales, I made a simple exemple if you want to check it out.

repo link: https://github.com/Baptistemontan/leptos_i18n

you need to create a i18n.json file:

{
  "default": "en",
  "locales": ["en", "fr"]
}

and the the locales files:

/locales/en.json

{
    "hello_world": "Hello World!"
}

/locales/fr.json

{
    "hello_world": "Bonjour le monde!"
}

some context need to be created and a macro to be executed

leptos_i18n::load_locales!();

#[macro_export]
macro_rules! t {
    ($cx: ident) => {
        ::leptos_i18n::t!($cx, $crate::i18n::Locales)
    };
    ($cx: ident, $key: ident) => {
        move || t!($cx).$key
    };
}

use leptos_i18n::I18nContextProvider;

#[component]
pub fn App(cx: Scope) -> impl IntoView {
    leptos_meta::provide_meta_context(cx);

    view! { cx,
        <I18nContextProvider locales=Locales>
            {/* ... */}
        </I18nContextProvider>
    }
}

Then you can do

view! { cx,
    <p>{t!(cx, hello_world)}</p>
}

anywhere in your app, with ssr or hydrate, and have easy internalization!

For now it only supports actix but I'll work on axum in the next days, should'nt be that much work.

[gbj]

Looks very cool! Apologies for not responding sooner to the other thread. I have used fluent, which includes some more complex i18n support than a one-to-one map, with Leptos... I imagine it would be pretty easy to integrate it with the same approach you're taking, although maybe it's more than you need.

[Baptistemontan]

I did not know about fluent, thanks for the info! This project was more to have a easy integration with the leptos reactive system, and with ssr, such as accepted languages from the request. The idea was to make the integration as easy as possible, it is just a one-to-one map but it was not the main focus to do more, the focus was on the ease to use.

[mondeja]

Check simple-icons-website-rs for an example of Fluent usage with Leptos, especially the i18n/ crate and language_selector.rs file.

[Baptistemontan]

thanks for the exemple, even if fluent is a wonderfull crate it is a bit too much for what I need, but I'll probably add it as a backend gated behind a feature later