23 releases

new 0.0.23	May 18, 2024
0.0.22	May 1, 2024
0.0.21	Mar 23, 2024
0.0.14	Feb 15, 2024

#243 in HTTP server

199 downloads per month

MIT license

33KB
381 lines

leptos-fluent

Internationalization framework for Leptos using fluent-templates.

Installation

Add the following to your Cargo.toml file:

[dependencies]
leptos-fluent = "0.0.21"
fluent-templates = "0.9"

[features]
csr = ["leptos-fluent/csr"]
hydrate = ["leptos-fluent/hydrate"]
ssr = [
  "leptos-fluent/ssr",
  "leptos-fluent/actix",  # actix and axum are supported
]

Usage

Giving the following directory structure:

.
├── 📄 Cargo.toml
├── 📁 locales
│   ├── 📁 en
│   │   └── 📄 main.ftl
│   └── 📁 es
│       └── 📄 main.ftl
└── 📁 src
    ├── 📄 main.rs
    └── 📄 lib.rs

With Fluent files en.ftl and es.ftl:

foo = Hello, world!
bar = Hello, { $arg1 } and { $arg2 }!

foo = ¡Hola, mundo!
bar = ¡Hola, { $arg1 } y { $arg2 }!

You can use leptos-fluent as follows:

use fluent_templates::static_loader;
use leptos::*;
use leptos_fluent::{leptos_fluent, tr, move_tr};

static_loader! {
    static TRANSLATIONS = {
        locales: "./locales",
        fallback_language: "en",
    };
}

#[component]
pub fn App() -> impl IntoView {
    leptos_fluent! {{
        // Path to the locales directory, relative to Cargo.toml file.
        locales: "./locales",
        // Static translations struct provided by fluent-templates.
        translations: TRANSLATIONS,

        // Client side options (for `csr` and `hydrate`)
        // ---------------------------------------------
        // Synchronize `<html lang="...">` attribute with the current
        // language using `leptos::create_effect`. By default, it is `false`.
        sync_html_tag_lang: true,
        // Discover the initial language of the user from the URL.
        // By default, it is `false`.
        initial_language_from_url: true,
        // URL parameter name to use discovering the initial language
        // of the user. By default is `"lang"`.
        initial_language_from_url_param: "lang",
        // Set the discovered initial language of the user from
        // the URL in local storage. By default, it is `false`.
        initial_language_from_url_to_localstorage: true,
        // Get the initial language from local storage if not found
        // in an URL param. By default, it is `false`.
        initial_language_from_localstorage: true,
        // Get the initial language from `navigator.languages` if not
        // found in the local storage. By default, it is `false`.
        initial_language_from_navigator: true,
        // Name of the field in local storage to get and set the
        // current language of the user. By default, it is `"lang"`.
        localstorage_key: "language",

        // Server side options (for `ssr`)
        // -------------------------------
        // Set the initial language from the Accept-Language header of the
        // request. By default, it is `false`.
        initial_language_from_accept_language_header: true,
    }};

    view! {
        <ChildComponent />
    }
}

#[component]
fn ChildComponent() -> impl IntoView {
    // Use `tr!` and `move_tr!` macros to translate strings.
    view! {
        <p>
            <span>{move || tr!("foo")}</span>
            <span>{move_tr!("bar", {
                "arg1" => "value1",
                "arg2" => "value2",
            })}</span>
        </p>
    }
}

Features

Client side rendering (CSR): Use the leptos-fluent/csr feature.
Server side rendering (SSR): Use the leptos-fluent/ssr feature.
Hydration: Use the leptos-fluent/hydrate feature.
Actix Web integration: Use the leptos-fluent/actix feature.
Axum integration: Use the leptos-fluent/axum feature.

Resources

Roadmap

Leptos-fluent is currently ready for most use cases. However, it is still in an early stage of development and the API may contain breaking changes through v0.0.X releases. I'm trying to release the API at v0.1.0 as stable as possible.

Dependencies

~21–37MB
~622K SLoC