Add SsrHtmlTag component (#161)

mondeja · Jun 25, 2024 · a4f90a2 · a4f90a2
1 parent a50c6df
commit a4f90a2
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 6 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,8 +8,10 @@
   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.
+  the initial language from the system language. Useful for desktop
+  applications. Must be enabled the new feature `system` to use it.
+- Expose `leptos_fluent::SsrHtmlTag` component to render it on SSR to sync
+  global attribute of `<html>` tag with the current language.
 
 [GTK example]: https://github.com/mondeja/leptos-fluent/tree/master/examples/system-gtk
 

diff --git a/Cargo.lock b/Cargo.lock
diff --git a/examples/ssr-hydrate-axum/src/app.rs b/examples/ssr-hydrate-axum/src/app.rs
@@ -3,7 +3,7 @@ use fluent_templates::once_cell::sync::Lazy;
 use fluent_templates::static_loader;
 use fluent_templates::StaticLoader;
 use leptos::*;
-use leptos_fluent::{expect_i18n, leptos_fluent, move_tr, tr};
+use leptos_fluent::{expect_i18n, leptos_fluent, move_tr, tr, SsrHtmlTag};
 use leptos_meta::*;
 use leptos_router::*;
 
@@ -45,6 +45,7 @@ pub fn App() -> impl IntoView {
     }};
 
     view! {
+        <SsrHtmlTag/>
         <Title text=move || tr!("welcome-to-leptos")/>
 
         // content for this welcome page

diff --git a/leptos-fluent/Cargo.toml b/leptos-fluent/Cargo.toml
@@ -14,6 +14,7 @@ keywords.workspace = true
 leptos-fluent-macros = { path = "../leptos-fluent-macros" }
 fluent-templates.workspace = true
 leptos = ">=0.6"
+leptos_meta = { version = ">=0.6", optional = true }
 web-sys = { version = ">=0.1", features = [
   "HtmlDocument",
   "Navigator",
@@ -29,7 +30,7 @@ default = ["json"]
 system = ["dep:current_locale", "leptos-fluent-macros/system"]
 nightly = ["leptos-fluent-macros/nightly"]
 hydrate = ["leptos-fluent-macros/hydrate"]
-ssr = ["leptos-fluent-macros/ssr"]
+ssr = ["leptos-fluent-macros/ssr", "dep:leptos_meta"]
 actix = ["leptos-fluent-macros/actix"]
 axum = ["leptos-fluent-macros/axum"]
 json = ["leptos-fluent-macros/json"]

diff --git a/leptos-fluent/src/lib.rs b/leptos-fluent/src/lib.rs
@@ -263,10 +263,14 @@ use fluent_templates::{
     LanguageIdentifier, StaticLoader,
 };
 use leptos::{
-    use_context, Attribute, IntoAttribute, Oco, RwSignal, Signal, SignalGet,
-    SignalSet, SignalWith,
+    component, use_context, Attribute, IntoAttribute, IntoView, Oco, RwSignal,
+    Signal, SignalGet, SignalSet, SignalWith,
 };
+#[cfg(feature = "ssr")]
+use leptos::{view, SignalGetUntracked};
 pub use leptos_fluent_macros::leptos_fluent;
+#[cfg(feature = "ssr")]
+use leptos_meta::Html;
 
 /// Direction of the text
 #[cfg_attr(debug_assertions, derive(Debug))]
@@ -638,6 +642,31 @@ pub fn l(
     language_from_str_between_languages(code, languages)
 }
 
+/// Reactive HTML tag to set attributes on SSR
+///
+/// Currently there is not a way to set the `dir` and `lang` attributes
+/// of `<html>` tags on SSR. This components updates it on SSR. Must be
+/// rendered in a view.
+///
+/// ```rust,ignore
+/// use leptos_fluent::SsrHtmlTag;
+///
+/// view! {
+///     <SsrHtmlTag/>
+/// }
+/// ```
+#[component(transparent)]
+#[cfg(feature = "ssr")]
+pub fn SsrHtmlTag() -> impl IntoView {
+    let lang = expect_i18n().language.get_untracked();
+    view! { <Html lang=lang.id.to_string() dir=lang.dir.as_str()/> }
+}
+
+/// Reactive HTML tag to set attributes on SSR
+#[component(transparent)]
+#[cfg(not(feature = "ssr"))]
+pub fn SsrHtmlTag() -> impl IntoView {}
+
 #[cfg(test)]
 mod test {
     fn major_and_minor_version(version: &str) -> String {