21 releases

0.0.21	Mar 23, 2024
0.0.20	Mar 10, 2024
0.0.14	Feb 15, 2024

#182 in HTTP server

303 downloads per month

MIT license

32KB
378 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",  # Currently only actix is supported
]

Usage

Giving the following directory structure:

.
├── 📄 Cargo.toml
├── 📁 locales
│   ├── 📄 en.ftl
│   └── 📄 es.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 leptos-fluent/csr feature.
Server side rendering (SSR): Use leptos-fluent/ssr feature.
Hydration: Use leptos-fluent/hydrate feature.
Actix web integration: Use leptos-fluent/actix 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–38MB
~607K SLoC