Update docs

mondeja · Dec 16, 2024 · 47cd282 · 47cd282
1 parent 4a2c5b7
commit 47cd282
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 136 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -314,7 +314,6 @@ The deprecated `SsrHtmlTag` component has been removed.
   global attributes of `<html>` tag with the current language.
 - Add new feature `system` to enable functionalities that require system
   information. Useful on non wasm targets like desktop applications.
-  See [GTK example].
 - Add `initial_language_from_system` parameter to `leptos_fluent!` macro to set
   the initial language from the system language. Useful for desktop
   applications. Must be enabled the new feature `system` to use it.
@@ -328,8 +327,6 @@ The deprecated `SsrHtmlTag` component has been removed.
   macro to set the initial language from the system language to a data file
   when using `system` feature.
 
-[GTK example]: https://github.com/mondeja/leptos-fluent/tree/master/examples/system-gtk
-
 ### Enhancements
 
 - Use files tracker API instead of `include_bytes!` quirk to track files

diff --git a/book/src/basic-usage.md b/book/src/basic-usage.md
@@ -45,13 +45,21 @@ static_loader! {
 }
 
 #[component]
-pub fn App() -> impl IntoView {
+pub fn I18n(children: Children) -> impl IntoView {
     leptos_fluent! {
+        children: children(),
         translations: [TRANSLATIONS],
         locales: "./locales",
-    };
+    }
+}
 
-    view! { <LanguageSelector/> }
+#[component]
+pub fn App() -> impl IntoView {
+    view! {
+        <I18n>
+            <LanguageSelector/>
+        </I18n>
+    }
 }
 
 #[component]
@@ -78,6 +86,7 @@ fn LanguageSelector() -> impl IntoView {
 fn render_language(lang: &'static Language) -> impl IntoView {
     // Passed as atrribute, `Language` is converted to their code,
     // so `<input id=lang` becomes `<input id=lang.id.to_string()`
+    let i18n = expect_i18n();
     view! {
         <div>
             <label for=lang>{lang.name}</label>
@@ -86,7 +95,7 @@ fn render_language(lang: &'static Language) -> impl IntoView {
                 value=lang
                 name="language"
                 checked=lang.is_active()
-                on:click=move |_| lang.activate()
+                on:click=move |_| i18n.language.set(lang)
                 type="radio"
             />
         </div>

diff --git a/book/src/faqs.md b/book/src/faqs.md
@@ -18,20 +18,6 @@ whichs provides utilities for parsing the Fluent syntax.
 
 [`LanguageIdentifier`]: https://docs.rs/unic-langid/latest/unic_langid/struct.LanguageIdentifier.html
 
-### How to get the [i18n context] at initialization?
-
-```rust
-use leptos_fluent::leptos_fluent;
-
-let i18n = leptos_fluent! {
-    // ...
-};
-
-leptos::logging::log!("i18n context: {i18n:#?}");
-```
-
-[i18n context]: https://docs.rs/leptos-fluent/latest/leptos_fluent/struct.I18n.html
-
 ### Custom [cookie attributes] are invalid
 
 Use an expression to set the cookie attributes and will not be validated.
@@ -62,9 +48,7 @@ which is what `tr!` and `move_tr!` do internally. Instead, we can pass the conte
 as first parameter to the macros:
 
 ```rust
-let i18n = leptos_fluent! {
-    // ...
-};
+let i18n = expect_i18n();
 
 let translated_signal = move_tr!(i18n, "my-translation");
 ```
@@ -91,9 +75,6 @@ pub fn App() -> impl IntoView {
 
 #[component]
 pub fn Child() -> impl IntoView {
-    leptos_fluent! {
-        // ...
-    };
     view! {
         <div on:click=|_| {
             tr!("my-translation");
@@ -120,9 +101,7 @@ pub fn App() -> impl IntoView {
 
 #[component]
 pub fn Child() -> impl IntoView {
-    let i18n = leptos_fluent! {
-        // ...
-    };
+    let i18n = expect_i18n();
     view! {
         <div on:click=|_| {
             tr!(i18n, "my-translation");
@@ -131,102 +110,6 @@ pub fn Child() -> impl IntoView {
 }
 ```
 
-#### Confused about what context is used?
-
-Take into account that the reactive ownership graph is not the same as the component
-tree in Leptos. For example, the next code:
-
-```rust
-#[component]
-fn Foo() -> impl IntoView {
-    provide_context::<usize>(0);
-
-    view! {
-        <h1>"Foo"</h1>
-        {
-            let value = expect_context::<usize>();
-            view! {
-                <p>"Context value before Bar: "{value}</p>
-            }
-        }
-        <Bar/>
-        {
-            let value = expect_context::<usize>();
-            view! {
-                <p>"Context value after Bar -> Baz: "{value}</p>
-            }
-        }
-    }
-}
-
-#[component]
-fn Bar() -> impl IntoView {
-    provide_context::<usize>(1);
-    view! {
-        <h1>"Bar"</h1>
-        {
-            let value = expect_context::<usize>();
-            view! {
-                <p>"Context value before Baz: "{value}</p>
-            }
-        }
-        <Baz/>
-    }
-}
-
-#[component]
-fn Baz() -> impl IntoView {
-    provide_context::<usize>(2);
-    view! {
-        <h1>"Baz"</h1>
-    }
-}
-```
-
-Renders:
-
-```html
-<h1>Foo</h1>
-<p>Context value before Bar: 0</p>
-<h1>Bar</h1>
-<p>Context value before Baz: 1</p>
-<h1>Baz</h1>
-<p>Context value after Bar -&gt; Baz: 2</p>
-```
-
-Because `Baz` is a sibling of `Foo` children in the reactive graph. But maybe
-you think that is just a children of `Bar` in the component tree and that is
-outside the scope of `Foo` children. That doesn't matter for Leptos.
-
-In those cases where you're using two or more contexts, pass the context as the
-first argument to the `tr!` and `move_tr!` macros to avoid confusion.
-
-```rust
-#[component]
-fn Foo() -> impl IntoView {
-    let i18n = leptos_fluent! {
-        translations: [TRANSLATION_WITH_ONLY_FOO],
-        // ...
-    };
-    <p>{move_tr!("my-translation-from-foo")}</p>
-    <Bar/>
-    // The next message will not be translated because after `<Bar>`
-    // now the i18n context accessed by `move_tr!` is the one from `Bar`
-    <p>{move_tr!("my-translation-from-foo")}</p>
-    // instead, use:
-    <p>{move_tr!(i18n, "my-translation-from-foo")}</p>
-}
-
-#[component]
-fn Bar() -> impl IntoView {
-    let i18n = leptos_fluent! {
-        translations: [TRANSLATION_WITH_ONLY_BAR],
-        // ...
-    };
-    <p>{move_tr!("my-translation-from-bar")}</p>
-}
-```
-
 ### Why examples don't use [`<For/>`] component?
 
 ```admonish bug
@@ -311,12 +194,13 @@ Use `provide_meta_context` at the macro initialization and get them
 with the method `I18n::meta`:
 
 ```rust
-let i18n = leptos_fluent! {
+leptos_fluent! {
     // ...
     provide_meta_context: true,
 };
 
-println!("Macro parameters: {:?}", i18n.meta().unwrap());
+// ... later
+println!("Macro parameters: {:?}", expect_i18n().meta().unwrap());
 ```
 
 ### [Configuration conditional checks]

diff --git a/book/src/install.md b/book/src/install.md
@@ -70,10 +70,6 @@ leptos-fluent = { version = "0.2", features = ["system"] }
 fluent-templates = "0.11"
 ```
 
-```admonish example
-See the [GTK example](https://github.com/mondeja/leptos-fluent/tree/master/examples/system-gtk).
-```
-
 ## Features
 
 - **Server Side Rendering**: `ssr`
@@ -148,10 +144,6 @@ leptos-fluent = { version = "0.2", features = ["tracing"] }
 fluent-templates = "0.11"
 ```
 
-```admonish example
-See the [GTK example](https://github.com/mondeja/leptos-fluent/tree/master/examples/system-gtk).
-```
-
 [`fluent-templates`]: https://github.com/XAMPPRocky/fluent-templates
 [`cargo leptos`]: https://github.com/leptos-rs/cargo-leptos
 [`tracing`]: https://docs.rs/tracing/latest/tracing