v0.4.0

v0.4.0

This release add a bunch of things, I will briefly cover them here, but you can read about them in the updated book.

I18next JSON v4

This version tries to follow more closely the I18next JSON v4 format, and for this some adjustement have been made:

• Proper plurals
• Changed "Foreign keys" to follow I18next nesting syntax
• Added formatters

Proper Plurals

The old versions of plurals were a weird homemade version that was actually not that great, they still exist and are renommed "Ranges", but you can now create actual plurals:

{
    "key_one": "one item",
    "key_other": "{{ count }} items"
}

t!(i18n, key, count = move || 0); // -> "0 items"
t!(i18n, key, count = move || 1); // -> "one item"
t!(i18n, key, count = move || 2); // -> "2 items"

And also support ordinal plurals:

{
  "key_ordinal_one": "{{ count }}st place",
  "key_ordinal_two": "{{ count }}nd place",
  "key_ordinal_few": "{{ count }}rd place",
  "key_ordinal_other": "{{ count }}th place"
}

t!(i18n, key, count = move || 1); // -> "1st place"
t!(i18n, key, count = move || 2); // -> "2nd place"
t!(i18n, key, count = move || 3); // -> "3rd place"
t!(i18n, key, count = move || 4); // -> "4th place"
t!(i18n, key, count = move || 41); // -> "41st place"

Read more

Nesting

Before, the syntax for foreign keys was {{ @key, arg = value, ..}}, this now follows I18next nesting syntax: $t(key, { "arg": value }).
The rework is really powerful, as you can do stuff like:

{
  "key": "{{ arg }}",
  "string_arg": "$t(key, {\"arg\": \"str\"})",
  "boolean_arg": "$t(key, {\"arg\": true})",
  "number_arg": "$t(key, {\"arg\": 56})",
  "interpolated_arg": "$t(key, {\"arg\": \"value: {{ new_arg }}\"})",
  "foreign_key_arg": "$t(key, {\"arg\": \"value: $t(interpolated_arg)\"})"
}

t!(i18n, string_arg); // -> "str"
t!(i18n, boolean_arg); // -> "true"
t!(i18n, number_arg); // -> "56"
t!(i18n, interpolated_arg, new_arg = "a value"); // -> "value: a value"
t!(i18n, foreign_key_arg, new_arg = "a value"); // -> "value: value: a value"

Or use them to have plurals with 2 different count:

{
  "key": "$t(key_boys, {\"count\": \"{{ boys_count }}\"}) and $t(key_girls, {\"count\": \"{{ girls_count }}\"})",
  "key_boys_one": "{{ count }} boy",
  "key_boys_other": "{{ count }} boys",
  "key_girls_one": "{{ count }} girl",
  "key_girls_other": "{{ count }} girls"
}

t!(i18n, key, boys_count = move || 0, girls_count = move || 0); // -> "0 boys and 0 girls"
t!(i18n, key, boys_count = move || 0, girls_count = move || 1); // -> "0 boys and 1 girl"
t!(i18n, key, boys_count = move || 1, girls_count = move || 0); // -> "1 boy and 0 girls"
t!(i18n, key, boys_count = move || 56, girls_count = move || 39); // -> "56 boys and 39 girls"

Read more

Routing

You can now use a router to have a "/:locale/..." prefix for the URL !

use crate::i18n::I18nRoute;
use leptos::*;
use leptos_router::*;

view! {
    <Router>
        <Routes>
            <I18nRoute>
                <Route path="/" view=Home />
                <Route path="/counter" view=Counter />
            </I18nRoute>
        </Routes>
    </Router>
}

Read more

Scoping

You can turn this:

let i18n = use_i18n();

t!(i18n, namespace.subkeys.value);
t!(i18n, namespace.subkeys.more_subkeys.subvalue);
t!(i18n, namespace.subkeys.more_subkeys.another_subvalue);

Into this:

let i18n = use_i18n();
let i18n = scope_i18n!(i18n, namespace.subkeys);

t!(i18n, value);
t!(i18n, more_subkeys.subvalue);
t!(i18n, more_subkeys.another_subvalue);

Read more

Context provider

provide_i18n_context() is now deprecated. Now use I18nContextProvider.

Sub contexts

You can now create subcontext with a subcontext provider:

use crate::i18n::*;
use leptos::*;

#[component]
fn Foo() -> impl IntoView {
    view! {
        <I18nContextProvider>
            <I18nSubContextProvider>
                <Sub />
            </I18nSubContextProvider>
            <Home />
        </I18nContextProvider>
    }
}

#[component]
fn Sub() -> impl IntoView {
    let i18n = use_i18n();
    view! {
        <p>{t!(i18n, sub)}</p>
    }
}

In this snippet the Sub component will have a context seperated from the "main" context.

Read more

Formatters

You can now specify a formatter for a value:

{
  "key": "{{ var, formatter }}"
}

Currently supported formatters:

• Number
• Date
• Time
• DateTime
• List

Read more

Directives

I18nContext now implement Directives, so you can now do <div use:i18n /> and it will set the "lang" attributes on it, reactively: <div lang="en"></div>.

Bugfixes

There are also some bugfixes and improvement that I won't list here.

What's Changed

• fix CI by @Baptistemontan in #104
• Feature to replace translations by the key during dev by @Baptistemontan in #103
• Fixed an error when using t_string! with the debug_interpolations feature by @Baptistemontan in #102
• Fix csr locale fetching by @Baptistemontan in #108
• private macro to declare locales in code by @Baptistemontan in #105
• Add end2end testing for examples by @Baptistemontan in #107
• Scoped contexts by @Baptistemontan in #111
• Add a i18nRoute component for locale based routing by @Baptistemontan in #113
• Extends context API by @Baptistemontan in #114
• Use typed-builder for interpolations by @Baptistemontan in #117
• Refactor to use leptos_use::use_locales by @Baptistemontan in #120
• icu4x integration by @Baptistemontan in #121
• Fix redirection bug with routing when changing locale in explicit default locale suffix by @Baptistemontan in #124
• Rework plurals by @Baptistemontan in #125
• Rework Foreign keys to follow i18next nesting syntax and behavior by @Baptistemontan in #128
• Typo fixes by @mrkiffie in #129
• Update doc for the incoming v0.4 by @Baptistemontan in #131

New Contributors

• @mrkiffie made their first contribution in #129

Full Changelog: v0.3.3...v0.4.0