Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mondeja/leptos-fluent
Internationalization framework for Leptos using Fluent
https://github.com/mondeja/leptos-fluent
fluent fluent-templates framework i18n internationalization leptos leptos-fluent reactive translation
Last synced: 7 days ago
JSON representation
Internationalization framework for Leptos using Fluent
- Host: GitHub
- URL: https://github.com/mondeja/leptos-fluent
- Owner: mondeja
- License: mit
- Created: 2024-02-08T03:44:02.000Z (11 months ago)
- Default Branch: master
- Last Pushed: 2024-12-25T02:16:02.000Z (18 days ago)
- Last Synced: 2024-12-31T23:48:51.935Z (11 days ago)
- Topics: fluent, fluent-templates, framework, i18n, internationalization, leptos, leptos-fluent, reactive, translation
- Language: Rust
- Homepage: https://mondeja.github.io/leptos-fluent/
- Size: 2.45 MB
- Stars: 40
- Watchers: 1
- Forks: 11
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome-leptos - leptos-fluent
README
# leptos-fluent
[](https://crates.io/crates/leptos-fluent)
[](https://github.com/mondeja/leptos-fluent/blob/master/LICENSE)
[](https://github.com/mondeja/leptos-fluent/actions)
[](https://mondeja.github.io/leptos-fluent/)
[](https://docs.rs/leptos-fluent)
[](https://crates.io/crates/leptos-fluent)
[](https://discord.com/channels/1031524867910148188/1251579884371705927)
Internationalization framework for [Leptos] using [fluent-templates].
## Installation
Add the following to your `Cargo.toml` file:
```toml
[dependencies]
leptos-fluent = "0.2"
fluent-templates = "0.12"
[features]
hydrate = [
"leptos-fluent/hydrate"
]
ssr = [
"leptos-fluent/ssr",
"leptos-fluent/actix", # actix and axum are supported
]
```
If you're using `cargo-leptos` to build your project, watch the
_locales/_ folder with:
```toml
[package.metadata.leptos]
watch-additional-files = ["locales"] # Relative to Cargo.toml
```
## Usage
Giving the following directory structure:
```plaintext
.
├── 📄 Cargo.toml
├── 📁 locales
│ ├── 📁 en
│ │ └── 📄 main.ftl
│ └── 📁 es
│ └── 📄 main.ftl
└── 📁 src
├── 📄 main.rs
└── 📄 lib.rs
```
```ftl
# locales/en/main.ftl
hello-world = Hello, world!
hello-args = Hello, { $arg1 } and { $arg2 }!
```
```ftl
# locales/es/main.ftl
hello-world = ¡Hola, mundo!
hello-args = ¡Hola, { $arg1 } y { $arg2 }!
```
You can use `leptos-fluent` as follows:
```rust
use fluent_templates::static_loader;
use leptos::prelude::*;
use leptos_fluent::{expect_i18n, leptos_fluent, move_tr, tr};
static_loader! {
static TRANSLATIONS = {
locales: "./locales",
fallback_language: "en",
};
}
#[component]
fn I18n(children: Children) -> impl IntoView {
// See all options in the reference at
// https://mondeja.github.io/leptos-fluent/leptos_fluent.html
leptos_fluent! {
children: children(),
// Path to the locales directory, relative to Cargo.toml.
locales: "./locales",
// Static translations struct provided by fluent-templates.
translations: [TRANSLATIONS],
// Check translations correctness in the specified files.
#[cfg(debug_assertions)]
check_translations: "./src/**/*.rs",
// Next options are all opt-in and can be enabled
// separately as needed.
// Client side options
// -------------------
// Synchronize `` attribute with
// current active language.
sync_html_tag_lang: true,
// Synchronize `` attribute with `"ltr"`,
// `"rtl"` or `"auto"` depending on active language.
sync_html_tag_dir: true,
// Update language on URL parameter when changes.
set_language_to_url_param: true,
// Set initial language of user from URL in local storage.
initial_language_from_url_param_to_localstorage: true,
// Set initial language of user from URL in a cookie.
initial_language_from_url_param_to_cookie: true,
// Key used to get and set the current language of the
// user on local storage. By default is `"lang"`.
localstorage_key: "language",
// Get initial language from local storage if not found
// in an URL param.
initial_language_from_localstorage: true,
// Set the initial language of the user from
// local storage to a cookie.
initial_language_from_localstorage_to_cookie: true,
// Update language on local storage when changes.
set_language_to_localstorage: true,
// Get initial language from `navigator.languages`
// if not found in local storage.
initial_language_from_navigator: true,
// Set initial language of user from navigator to local storage.
initial_language_from_navigator_to_localstorage: true,
// Set initial language of user from navigator to a cookie.
initial_language_from_navigator_to_cookie: true,
// Attributes to set for language cookie.
// By default `""`.
cookie_attrs: "Secure; Path=/; Max-Age=600",
// Update language on cookie when the language changes.
set_language_to_cookie: true,
// Set initial language from a cookie to local storage.
initial_language_from_cookie_to_localstorage: true,
// Server side options
// -------------------
// Set initial language from the `Accept-Language`
// header of the request.
initial_language_from_accept_language_header: true,
// Server and client side options
// ------------------------------
// Name of the cookie to get and set the current active
// language. By default `"lf-lang"`.
cookie_name: "lang",
// Set initial language from cookie.
initial_language_from_cookie: true,
// URL parameter to use setting the language in the URL.
// By default `"lang"`.
url_param: "lang",
// Set initial language of the user from an URL parameter.
initial_language_from_url_param: true,
// Desktop applications (feature `system`)
// ---------------------------------------
// Set initial language from the system locale.
initial_language_from_system: true,
// Set initial language of the user from
// the system locale to a data file.
initial_language_from_system_to_data_file: true,
// Get initial language from a data file.
initial_language_from_data_file: true,
// Key to use to name the data file. Should be unique per
// application. By default `"leptos-fluent"`.
data_file_key: "my-app",
// Set the language selected to a data file.
set_language_to_data_file: true,
}
}
#[component]
pub fn App() -> impl IntoView {
view! {
}
}
#[component]
fn TranslatableComponent() -> impl IntoView {
// Use `tr!` and `move_tr!` macros to translate strings:
view! {
{move || tr!("hello-world")}
{move_tr!("hello-args", {
"arg1" => "foo",
"arg2" => "bar",
})}
}
// The `tr!` macro must be inside a reactive context or the
// translation will not be updated on the fly when the language changes.
}
#[component]
fn LanguageSelector() -> impl IntoView {
// `expect_i18n()` to get the i18n context
// `i18n.languages` exposes a static array with the available languages
// `i18n.language.read()` to get the current language
// `lang.activate()` or `i18n.language.set(lang)` to set the current language
// `lang.is_active()` to check if a language is the current selected one
let i18n = expect_i18n();
view! {
{
move || expect_i18n().languages.iter().map(|lang| {
view! {
{lang.name}
}
}).collect::>()
}
}
}
```
### Features
- **Server Side Rendering**: `ssr`
- **Hydration**: `hydrate`
- **Actix Web integration**: `actix`
- **Axum integration**: `axum`
- **Nightly toolchain**: `nightly`
- **Desktop applications**: `system`
- **JSON languages file**: `json`
- **YAML languages file**: `yaml`
- **JSON5 languages file**: `json5`
- **Tracing support**: `tracing`
- **Debugging**: `debug`
## Resources
- [Book]
- [Quickstart]
- [Documentation]
- [Examples]
[leptos]: https://leptos.dev/
[fluent-templates]: https://github.com/XAMPPRocky/fluent-templates
[quickstart]: https://mondeja.github.io/leptos-fluent/leptos_fluent.html
[examples]: https://github.com/mondeja/leptos-fluent/tree/master/examples
[book]: https://mondeja.github.io/leptos-fluent/
[documentation]: https://docs.rs/leptos-fluent