fix: trigger stateful component when attributes are changed

crates/core/src/dom/component/stateful_component.rs

@@ -16,11 +16,8 @@ pub trait StatefulComponent {
     fn attribute_changed(
         &mut self,
         attr_name: &str,
-        old_value: DomAttrValue,
-        new_value: DomAttrValue,
-    ) where
-        Self: Sized;
-
+        new_value: Vec<DomAttrValue>,
+    ); 
     /// remove the attribute with this name
     fn remove_attribute(&mut self, _attr_name: AttributeName) {}
 

crates/core/src/dom/dom_attr.rs

@@ -317,16 +317,16 @@ impl DomAttr {
 
 impl DomAttrValue {
     /// return the value if it is a Simple variant
-    pub fn get_simple(&self) -> Option<&Value> {
+    pub fn as_simple(&self) -> Option<&Value> {
         match self {
             Self::Simple(v) => Some(v),
             _ => None,
         }
     }
 
     /// make a string representation of this value if it is a simple value
-    pub fn get_string(&self) -> Option<String> {
-        let simple = self.get_simple()?;
+    pub fn as_string(&self) -> Option<String> {
+        let simple = self.as_simple()?;
         Some(simple.to_string())
     }
 }

crates/core/src/dom/dom_node.rs

@@ -826,6 +826,11 @@ where
                 [],
             ),
         );
+
+        let dom_attrs:Vec<DomAttr> = comp.attrs.iter().map(|a|self.convert_attr(a)).collect();
+        for dom_attr in dom_attrs.into_iter(){
+            comp.comp.borrow_mut().attribute_changed(dom_attr.name, dom_attr.value);
+        }
         // the component children is manually appended to the StatefulComponent
         // here to allow the conversion of dom nodes with its event
         // listener and removing the generics msg

examples/custom-element/datetime_widget/src/date_time.rs

@@ -195,34 +195,28 @@ where
 
 
 impl StatefulComponent for DateTimeWidget<()>{
-    /*
-    fn append_children(&mut self, children: Vec<DomNode>) {
-         self.children.extend(children);
-    }
-    */
 
     /// this is called when the attributes in the mount is changed
     fn attribute_changed(
         &mut self,
         attr_name: &str,
-        old_value: DomAttrValue,
-        new_value: DomAttrValue,
-    ) where
-        Self: Sized,
+        new_value: Vec<DomAttrValue>,
+    ) 
     {
+        log::info!("attribute changed: {attr_name}: {new_value:?}");
         match &*attr_name {
             "time" => {
-                if let Some(new_value) = new_value.get_string(){
+                if let Some(new_value) = new_value[0].as_string(){
                     Component::update(self, Msg::TimeChange(new_value));
                 }
             }
             "date" => {
-                if let Some(new_value) = new_value.get_string(){
+                if let Some(new_value) = new_value[0].as_string(){
                     Component::update(self, Msg::DateChange(new_value));
                 }
             }
             "interval" => {
-                if let Some(new_value) = new_value.get_string() {
+                if let Some(new_value) = new_value[0].as_string() {
                     let new_value: f64 = str::parse(&new_value).expect("must parse to f64");
                     Component::update(self, Msg::IntervalChange(new_value));
                 }

examples/fancy-ui/src/frame.rs

@@ -609,27 +609,27 @@ impl<XMSG> StatefulComponent for Frame<XMSG> {
     fn attribute_changed(
         &mut self,
         attr_name: &str,
-        _old_value: DomAttrValue,
-        new_value: DomAttrValue,
+        new_value: Vec<DomAttrValue>,
     ) {
+        log::info!("attribuite changed: {attr_name}: {new_value:?}");
         match attr_name {
             "theme-primary" => {
-                if let Some(primary) = new_value.get_string() {
-                    //let background = &app.theme.background_color;
-                    //app.theme =
-                    //    Theme::from_str(&primary, background).expect("must be a valid theme");
+                if let Some(primary) = new_value[0].as_string() {
+                    let background = &self.theme.background_color;
+                    self.theme =
+                        Theme::from_str(&primary, background).expect("must be a valid theme");
                 }
             }
             "theme-background" => {
-                if let Some(background) = new_value.get_string() {
-                    //let primary = &app.theme.primary_color;
-                    //app.theme =
-                    //    Theme::from_str(primary, &background).expect("must be a valid theme");
+                if let Some(background) = new_value[0].as_string() {
+                    let primary = &self.theme.primary_color;
+                    self.theme =
+                        Theme::from_str(primary, &background).expect("must be a valid theme");
                 }
             }
             "status" => {
-                if let Some(v) = new_value.get_string() {
-                    //app.status = Status::from_str(&v).ok();
+                if let Some(v) = new_value[0].as_string() {
+                    self.status = Status::from_str(&v).ok();
                 }
             }
             _ => (),

examples/fancy-ui/src/lib.rs

@@ -31,7 +31,7 @@ impl Application for App {
     fn view(&self) -> Node<Msg> {
         node! {
             <main>
-            {frame([], [
+            {frame([attr("theme-primary", "red"), attr("theme-background", "black"), attr("status", "error")], [
                 button([on_click(|_|Msg::Clicked)],[text!("Button has been clicked {} times", self.count)])
             ])}
             </main>