i18n fixes + sync

examples/i18n/README.md

@@ -1,7 +1,7 @@
-# use_i18n
+# i18n
 
-Learn how to use `use_i18n`.
+i18n for web or single window on desktop.
 
 Run:
 
-```dioxus serve```
+```dx serve --bin i18n```

examples/i18n/src/en-US.json

@@ -1,5 +1,6 @@
 {
     "id": "en-US",
+    "name": "English",
     "texts": {
         "messages": {
             "hello_world": "Hello World!"

examples/i18n/src/es-ES.json

@@ -1,9 +1,9 @@
 {
     "id": "es-ES",
+    "name": "Español",
     "texts": {
         "messages": {
             "hello_world": "Hola Mundo!"
-        },
-        "messages.hello": "Hola {name}"
+        }
     }
 }

examples/i18n/src/it-IT.json

@@ -0,0 +1,9 @@
+{
+    "id": "it-IT",
+    "texts": {
+        "messages": {
+            "hello_world": "Ciao Mondo!"
+        },
+        "messages.hello": "Ciao {name}"
+    }
+}

examples/i18n/src/main.rs

@@ -1,6 +1,7 @@
 use dioxus::prelude::*;
 use dioxus_sdk::i18n::*;
 use dioxus_sdk::translate;
+use std::collections::HashMap;
 use std::str::FromStr;
 
 fn main() {
@@ -13,38 +14,59 @@ fn main() {
 
 static EN_US: &str = include_str!("./en-US.json");
 static ES_ES: &str = include_str!("./es-ES.json");
+static IT_IT: &str = include_str!("./it-IT.json");
 
-#[allow(non_snake_case)]
-fn Body() -> Element {
-    let mut i18 = use_i18();
+fn app() -> Element {
 
-    let change_to_english = move |_| i18.set_language("en-US".parse().unwrap());
-    let change_to_spanish = move |_| i18.set_language("es-ES".parse().unwrap());
+    use_init_i18n("en-US".parse().unwrap(), 
+    ("en-US", HashMap::from([("es", vec!["it-IT"])])).into()
+        , || {
+        let en_us = Language::from_str(EN_US).unwrap();
+        let es_es = Language::from_str(ES_ES).unwrap();
+        let it_it = Language::from_str(IT_IT).unwrap();
+        vec![en_us, es_es, it_it]
+    });
+
+    let i18 = use_i18();
 
     rsx!(
-        button {
-            onclick: change_to_english,
-            label {
-                "English"
-            }
-        }
-        button {
-            onclick: change_to_spanish,
-            label {
-                "Spanish"
-            }
-        }
-        p { {translate!(i18, "messages.hello_world")} }
-        p { {translate!(i18, "messages.hello", name: "Dioxus")}  }
+        change_language_dropdown{}
+        change_language_btn{}
+        p { "Translated in selected language: " {translate!(i18, "messages.hello_world")} }
+        p { "Fallback due to missing translation: " {translate!(i18, "messages.hello", name: "Dioxus")}  }
+        p { "Missing translation and missing in fallback: " {translate!(i18, "unkown_id")}  }
+
     )
 }
 
-fn app() -> Element {
-    use_init_i18n("en-US".parse().unwrap(), "en-US".parse().unwrap(), || {
-        let en_us = Language::from_str(EN_US).unwrap();
-        let es_es = Language::from_str(ES_ES).unwrap();
-        vec![en_us, es_es]
-    });
-
-    rsx!(Body {})
+fn change_language_btn() -> Element {
+    let mut i18 = use_i18();
+    rsx! {{
+        i18.language_list().iter().map(|(id, name, _img)| {
+            let id = id.clone();
+            rsx! { button {
+                    onclick: move |_| { i18.set_language(id.clone()); },
+                    "{name}"
+            }}
+        })
+    }}
 }
+
+fn change_language_dropdown() -> Element {
+    let mut i18 = use_i18();
+
+    rsx! {
+        select {
+            oninput: move |ev| {
+                i18.set_language(ev.value().parse().unwrap())
+            },
+            {i18.language_list().iter().map(|(id, name, _img)| {
+                rsx! { option { 
+                    value: id.to_string(), 
+                    selected: i18.is_selected(id),
+                    "{name}" 
+                }}
+            })}
+        }
+    }
+}

examples/i18sync/Cargo.toml

@@ -0,0 +1,16 @@
+[package]
+name = "i18sync"
+version = "0.1.0"
+edition = "2021"
+
+[dependencies]
+dioxus = { workspace = true, features = ["desktop"] }
+dioxus-sdk = { workspace = true, features = ["i18n"] }
+
+log = "0.4.6"
+
+
+
+
+
+

examples/i18sync/Dioxus.toml

@@ -0,0 +1,42 @@
+[application]
+
+# App (Project) Name
+name = "i18sync"
+
+# Dioxus App Default Platform
+# desktop, web, mobile, ssr
+default_platform = "desktop"
+
+# `build` & `serve` dist path
+out_dir = "dist"
+
+# resource (public) file folder
+asset_dir = "public"
+
+[web.app]
+
+# HTML title tag content
+title = "dioxus | ⛺"
+
+[web.watcher]
+
+# when watcher trigger, regenerate the `index.html`
+reload_html = true
+
+# which files or dirs will be watcher monitoring
+watch_path = ["src", "public"]
+
+# include `assets` in web platform
+[web.resource]
+
+# CSS style file
+style = []
+
+# Javascript code file
+script = []
+
+[web.resource.dev]
+
+# Javascript code file
+# serve: [dev-server] only
+script = []

examples/i18sync/README.md

@@ -0,0 +1,7 @@
+# i18n
+
+i18n in multiple windows - desktop only.
+
+Run:
+
+```dx serve --bin i18sync```

examples/i18sync/src/en-US.json

@@ -0,0 +1,10 @@
+{
+    "id": "en-US",
+    "name": "English",
+    "texts": {
+        "messages": {
+            "hello_world": "Hello World!"
+        },
+        "messages.hello": "Hello {name}"
+    }
+}

examples/i18sync/src/es-ES.json

@@ -0,0 +1,9 @@
+{
+    "id": "es-ES",
+    "name": "Español",
+    "texts": {
+        "messages": {
+            "hello_world": "Hola Mundo!"
+        }
+    }
+}

examples/i18sync/src/it-IT.json

@@ -0,0 +1,9 @@
+{
+    "id": "it-IT",
+    "texts": {
+        "messages": {
+            "hello_world": "Ciao Mondo!"
+        },
+        "messages.hello": "Ciao {name}"
+    }
+}