Languages

leptos-fluent follows a default strategy to generate the languages of the application. This strategy is based on the locales/ directory.

Giving the next directory structure:

.
└── 📁 locales
    ├── 📁 en
    │   └── 📄 main.ftl
    └── 📁 es-ES
        └── 📄 main.ftl

The framework will generate something like the following languages array at compile time:

let LANGUAGES = [
  leptos_fluent::Language {
    id: unic_langid::langid!("en"),
    name: "English",
    dir: leptos_fluent::WritingDirection::Ltr,
  },
  leptos_fluent::Language {
    id: unic_langid::langid!("es-ES"),
    name: "Español (España)",
    dir: leptos_fluent::WritingDirection::Ltr,
  },
]

• en is built with the name "English" because it's defined as an ISO 639-1 code, without a region code.
• es-ES is built with the name "Español (España)" because it's defined as an ISO 639-1 code and a region code.

This enforces that an user will always be able to select their language in their own language, and not in the current language of the application.

The languages file

The languages array can be fully customized by defining a languages parameter in the leptos_fluent! macro pointing to a languages file. This file must be relative to the Cargo.toml file.

leptos_fluent! {
    languages: "./locales/languages.json",
    // ...
}

[
  ["en", "English"],
  ["es-ES", "Spanish (Spain)", "auto"]
]

Languages file format

In order to use a languages file, you must enable the feature for the file format you want to use in the Cargo.toml file:

[dependencies]
leptos-fluent = { version = "*", features = ["json5"] }

Available features for languages file formats are:

• json: JSON
• yaml: YAML
• json5: JSON5

Languages file layout

The languages file must expose an array of arrays with the structure:

[
  // Code, Name,            "ltr"/"rtl"/"auto" (optional)
  ["code", "Language name", "Writing direction"],
]

The first one in the languages file will used as the initial of the user when no other initialization language is discovered. Use the same as the one configured as fallback_language in static_loader!.

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

#[component]
pub fn App() -> impl IntoView {
    leptos_fluent! {
        translations: [TRANSLATIONS],
        languages: "./locales/languages.json5",
    };
}

// ./locales/languages.json5
[
  ["en", "English"],
  ["es-ES", "Español (España)"],
]