fix: class overwrites class when updating signal values (#46)

* fix: class overwrites class when updating signal values

* fix:  class rendering of ssr mode

src/alert/mod.rs

@@ -1,6 +1,12 @@
 mod theme;
 
-use crate::{theme::use_theme, utils::mount_style, Icon, Theme};
+#[cfg(not(feature = "ssr"))]
+use crate::utils::dyn_classes;
+use crate::{
+    theme::use_theme,
+    utils::{mount_style, ssr_class},
+    Icon, Theme,
+};
 use icondata::AiIcon;
 use leptos::*;
 pub use theme::AlertTheme;
@@ -79,9 +85,12 @@ pub fn Alert(
         }
         .into()
     });
+
+    let ssr_class = ssr_class(&class);
     view! {
         <div
-            class=move || class.get()
+            class=ssr_class
+            use:dyn_classes=class
             class:thaw-alert=true
             style=move || css_vars.get()>
             <Icon icon class="thaw-alert__icon"/>

src/auto_complete/mod.rs

@@ -1,5 +1,6 @@
 mod theme;
 
+use crate::utils::{dyn_classes, ssr_class};
 use crate::{
     components::{Binder, Follower, FollowerPlacement, FollowerWidth},
     use_theme,
@@ -108,9 +109,10 @@ pub fn AutoComplete(
         }
     };
 
+    let ssr_class = ssr_class(&class);
     view! {
         <Binder target_ref=auto_complete_ref>
-            <div class=move || class.get() class:thaw-auto-complete=true ref=auto_complete_ref on:keydown=on_keydown>
+            <div class=ssr_class use:dyn_classes=class class:thaw-auto-complete=true ref=auto_complete_ref on:keydown=on_keydown>
                 <Input
                     value
                     placeholder
@@ -194,5 +196,3 @@ pub fn AutoComplete(
         </Binder>
     }
 }
-
-

src/avatar/mod.rs

@@ -1,6 +1,12 @@
 mod theme;
 
-use crate::{use_theme, utils::mount_style, Theme};
+#[cfg(not(feature = "ssr"))]
+use crate::utils::dyn_classes;
+use crate::{
+    use_theme,
+    utils::{mount_style, ssr_class},
+    Theme,
+};
 use leptos::*;
 pub use theme::AvatarTheme;
 
@@ -28,8 +34,10 @@ pub fn Avatar(
         css_vars
     });
     mount_style("avatar", include_str!("./avatar.css"));
+
+    let ssr_class = ssr_class(&class);
     view! {
-        <span class=move || class.get() class:thaw-avatar=true style=move || css_vars.get()>
+        <span class=ssr_class use:dyn_classes=class class:thaw-avatar=true style=move || css_vars.get()>
             {move || {
                 let src = src.get();
                 (!src.is_empty()).then(|| view! { <img src=src/> })

src/button/mod.rs

@@ -1,11 +1,13 @@
 mod button_group;
 mod theme;
 
+#[cfg(not(feature = "ssr"))]
+use crate::utils::dyn_classes;
 use crate::{
     components::{OptionComp, Wave, WaveRef},
     icon::*,
     theme::*,
-    utils::{mount_style, ComponentRef},
+    utils::{mount_style, ssr_class, ComponentRef},
 };
 pub use button_group::ButtonGroup;
 use leptos::*;
@@ -220,9 +222,11 @@ pub fn Button(
         callback.call(event);
     };
     
+    let ssr_class = ssr_class(&class);
     view! {
         <button
-            class=move || class.get()
+            class=ssr_class
+            use:dyn_classes=class
             class:thaw-button=true
             class=("thaw-button--solid", move || variant.get() == ButtonVariant::Solid)
             class=("thaw-button--text", move || variant.get() == ButtonVariant::Text)

src/time_picker/mod.rs

@@ -158,6 +158,7 @@ fn Panel(
     #[cfg(not(any(feature = "csr", feature = "hydrate")))]
     {
         _ = time_picker_ref;
+        _ = panel_ref;
     }
 
     let hour_ref = create_node_ref::<html::Div>();

src/utils/dyn_classes.rs

@@ -0,0 +1,37 @@
+use cfg_if::cfg_if;
+use leptos::{html::AnyElement, HtmlElement, MaybeSignal};
+
+pub fn dyn_classes(el: HtmlElement<AnyElement>, classes_signal: MaybeSignal<String>) {
+    cfg_if! {
+        if #[cfg(feature = "ssr")] {
+            let _ = el;
+            let _ = classes_signal;
+        } else {
+            use leptos::SignalGet;
+            let _ = el.dyn_classes(move || {
+                let classes = classes_signal.get();
+                if classes.is_empty() {
+                    return vec![];
+                }
+                classes
+                    .split_ascii_whitespace()
+                    .map(|class| class.to_string())
+                    .collect::<Vec<String>>()
+            });
+        }
+    };
+}
+
+pub fn ssr_class(class: &MaybeSignal<String>) -> String {
+    let ssr_class;
+    cfg_if! {
+        if #[cfg(feature = "ssr")] {
+            use leptos::SignalGetUntracked;
+            ssr_class = class.get_untracked();
+        } else {
+            let _ = class;
+            ssr_class = String::new();
+        }
+    };
+    ssr_class
+}

src/utils/mod.rs

@@ -1,5 +1,6 @@
 // mod callback;
 mod component_ref;
+mod dyn_classes;
 mod event_listener;
 mod mount_style;
 mod signal;
@@ -7,6 +8,7 @@ mod stored_maybe_signal;
 
 // pub use callback::AsyncCallback;
 pub(crate) use component_ref::ComponentRef;
+pub(crate) use dyn_classes::*;
 pub(crate) use event_listener::*;
 pub(crate) use mount_style::mount_style;
 pub use signal::SignalWatch;