i18n and L10n

examples/wasm/Cargo.toml

@@ -8,7 +8,11 @@ authors = [
 
 [dependencies]
 gloo-worker = "0.2.1" # MIT or Apache-2.0
+i18n-embed = { version = "0.13.8", features = ["fluent-system", "web-sys-requester"]}  # MIT
+i18n-embed-fl = "0.6.5"  # MIT
+once_cell = "1.17.0"  # MIT or Apache-2.0
 ouroboros = "0.15.5" # MIT or Apache-2.0
+rust-embed = "6.4.2"  # MIT
 ruzstd = "0.3.0" # MIT
 serde = "1" # MIT or Apache-2.0
 vibrato = { path = "../../vibrato", default-features = false } # MIT or Apache-2.0

examples/wasm/i18n.toml

@@ -0,0 +1,4 @@
+fallback_language = "en"
+
+[fluent]
+assets_dir = "i18n"

examples/wasm/i18n/en/vibrato_wasm.ftl

@@ -0,0 +1,7 @@
+title = 🎤 Vibrato Wasm Demo
+project-page = [Project Page]
+place-holder = Enter Japanese here
+surface = Surface
+pos = Part of Speech
+pron = Pronunciation
+loading = Loading...

examples/wasm/i18n/ja/vibrato_wasm.ftl

@@ -0,0 +1,7 @@
+title = 🎤 Vibrato Wasm デモ
+project-page = [プロジェクトページ]
+place-holder = ここに日本語を入力してください
+surface = 表層形
+pos = 品詞
+pron = 読み
+loading = 読み込み中...

examples/wasm/src/i18n.rs

@@ -0,0 +1,28 @@
+use i18n_embed::{
+    fluent::{fluent_language_loader, FluentLanguageLoader},
+    WebLanguageRequester,
+};
+use once_cell::sync::Lazy;
+use rust_embed::RustEmbed;
+
+#[derive(RustEmbed)]
+#[folder = "i18n"]
+struct Localizations;
+
+pub static STATIC_LOADER: Lazy<FluentLanguageLoader> = Lazy::new(|| {
+    let loader = fluent_language_loader!();
+    let requested_languages = WebLanguageRequester::requested_languages();
+    i18n_embed::select(&loader, &Localizations, &requested_languages).unwrap();
+    loader
+});
+
+#[macro_export]
+macro_rules! fl {
+    ($message_id:literal) => {{
+        i18n_embed_fl::fl!($crate::i18n::STATIC_LOADER, $message_id)
+    }};
+
+    ($message_id:literal, $($args:expr),*) => {{
+        i18n_embed_fl::fl!($crate::i18n::STATIC_LOADER, $message_id, $($args), *)
+    }};
+}

examples/wasm/src/lib.rs

@@ -1,3 +1,4 @@
+mod i18n;
 mod text_input;
 mod token_view;
 
@@ -127,8 +128,8 @@ impl Component for App {
         html! {
             <>
                 <header>
-                    <h1>{"🎤 Vibrato Wasm Demo"}</h1>
-                    <p class="header-link"><a href="https://github.com/daac-tools/vibrato">{"[Project Page]"}</a></p>
+                    <h1>{ fl!("title") }</h1>
+                    <p class="header-link"><a href="https://github.com/daac-tools/vibrato">{ fl!("project-page") }</a></p>
                 </header>
                 <main>
                     <div>
@@ -137,7 +138,7 @@ impl Component for App {
                                 html! {
                                     <TextInput
                                         callback={ctx.link().callback(Msg::SetText)}
-                                        value={Rc::clone(&self.text)}
+                                        value={ Rc::clone(&self.text) }
                                     />
                                 }
                             } else {
@@ -150,11 +151,11 @@ impl Component for App {
                     {
                         if let Some(tokens) = &self.tokens {
                             html! {
-                                <TokenView tokens={Rc::clone(&tokens)} />
+                                <TokenView tokens={ Rc::clone(tokens) } />
                             }
                         } else {
                             html! {
-                                <div id="loading">{"Loading..."}</div>
+                                <div id="loading">{ fl!("loading") }</div>
                             }
                         }
                     }

examples/wasm/src/text_input.rs

@@ -4,6 +4,8 @@ use wasm_bindgen::{JsCast, UnwrapThrowExt};
 use web_sys::{Event, HtmlInputElement, InputEvent};
 use yew::{html, Callback, Component, Context, Html, NodeRef, Properties};
 
+use crate::fl;
+
 #[derive(Clone, PartialEq, Properties)]
 pub struct Props {
     pub value: Rc<String>,
@@ -39,7 +41,7 @@ impl Component for TextInput {
             <input
                 ref={self.node_ref.clone()}
                 type="text"
-                placeholder="Enter Japanese here"
+                placeholder={ fl!("place-holder") }
                 value={value.to_string()}
                 {oninput}
             />

examples/wasm/src/token_view.rs

@@ -2,6 +2,7 @@ use std::rc::Rc;
 
 use yew::{function_component, html, Html, Properties};
 
+use crate::fl;
 use crate::Token;
 
 #[derive(Clone, PartialEq, Properties)]
@@ -17,18 +18,18 @@ pub fn token_view(props: &Props) -> Html {
         <table>
             <thead>
                 <tr>
-                    <th>{"Surface"}</th>
-                    <th>{"Part of Speech"}</th>
-                    <th>{"Pronunciation"}</th>
+                    <th>{ fl!("surface") }</th>
+                    <th>{ fl!("pos") }</th>
+                    <th>{ fl!("pron") }</th>
                 </tr>
             </thead>
             <tbody>
                 {
                     for tokens.iter().map(|Token { surface, pos, pron }| html! {
                         <tr>
-                            <td>{surface}</td>
-                            <td>{pos}</td>
-                            <td>{pron}</td>
+                            <td>{ surface }</td>
+                            <td>{ pos }</td>
+                            <td>{ pron }</td>
                         </tr>
                     })
                 }