fix input.value set

README.md

@@ -19,7 +19,7 @@ Here is some preview of DOM syntax:
 Ok(
   div()
     .class(ui_global())
-    .style(RespoStyle::default().padding(12.0))
+    .style(respo_style().padding(12.0))
     .children([
       comp_counter(&states.pick("counter"), store.counted)?,
       comp_panel(&states.pick("panel"))?,
@@ -35,15 +35,15 @@ static_styles!(
   style_remove_button,
   (
     "&",
-    RespoStyle::default()
-      .width(CssSize::Px(16.0))
-      .height(CssSize::Px(16.0))
+    respo_style()
+      .width(16.px())
+      .height(16.px())
       .margin(4.)
-      .cursor("pointer".to_owned())
+      .cursor("pointer")
       .margin4(0.0, 0.0, 0.0, 16.0)
       .color(CssColor::Hsl(0, 90, 90)),
   ),
-  ("&:hover", RespoStyle::default().color(CssColor::Hsl(0, 90, 80))),
+  ("&:hover", respo_style().color(CssColor::Hsl(0, 90, 80))),
 );
 ```
 
@@ -146,7 +146,7 @@ impl RespoApp for App {
     Ok(
       div()
         .class(ui_global())
-        .style(RespoStyle::default().padding(12.0))
+        .style(respo_style().padding(12.0))
         .children([
           comp_counter(&states.pick("counter"), store.counted)?,
           comp_panel(&states.pick("panel"))?,

demo_respo/src/counter.rs

@@ -2,7 +2,7 @@ use std::fmt::Debug;
 
 use respo::{
   br, button,
-  css::{CssColor, RespoStyle},
+  css::{respo_style, CssColor},
   div, span,
   ui::ui_button,
   util, DispatchFn, RespoElement, RespoEvent,
@@ -85,21 +85,21 @@ pub fn comp_counter(states: &RespoStatesTree, global_counted: i32) -> Result<Res
         button()
           .class(ui_button())
           .inner_text("demo inc")
-          .style(RespoStyle::default().margin(4.))
+          .style(respo_style().margin(4))
           .on_click(on_inc),
         button()
           .class(ui_button())
           .inner_text("demo dec")
-          .style(RespoStyle::default().margin(4.))
+          .style(respo_style().margin(4))
           .on_click(on_dec),
         button()
           .class(ui_button())
           .inner_text("demo inc twice")
-          .style(RespoStyle::default().margin(4.))
+          .style(respo_style().margin(4))
           .on_click(on_inc_twice),
       ]),
       div().elements([span().inner_text(format!("value is: {}", counted)).style(
-        RespoStyle::default()
+        respo_style()
           .color(CssColor::Hsluv(270, 100, 40))
           .font_family("Menlo".to_owned())
           .font_size(10. + counted as f32),

demo_respo/src/inner_text.rs

@@ -0,0 +1,57 @@
+//! a demo for switching inner-text and children, which might cause a bug in respo
+
+use std::fmt::Debug;
+
+use respo::{button, css::respo_style, div, span, ui::ui_button, util, DispatchFn, RespoElement, RespoEvent};
+use respo_state_derive::RespoState;
+use serde::{Deserialize, Serialize};
+
+use respo::states_tree::{RespoState, RespoStatesTree};
+
+use super::store::ActionOp;
+
+#[derive(Debug, Clone, Default, PartialEq, Eq, Serialize, Deserialize, RespoState)]
+struct InnerTextState {
+  inner_text: bool,
+}
+
+pub fn comp_inner_text(states: &RespoStatesTree) -> Result<RespoElement<ActionOp>, String> {
+  let cursor = states.path();
+
+  let state = states.cast_branch::<InnerTextState>();
+
+  let on_inc = {
+    let cursor = cursor.to_owned();
+    let state = state.to_owned();
+    move |e, dispatch: DispatchFn<_>| -> Result<(), String> {
+      util::log!("click {:?}", e);
+      if let RespoEvent::Click { original_event, .. } = e {
+        original_event.prevent_default();
+      }
+
+      dispatch.run(ActionOp::Increment)?;
+      dispatch.run_state(
+        &cursor,
+        InnerTextState {
+          inner_text: !state.inner_text,
+        },
+      )?;
+      Ok(())
+    }
+  };
+
+  Ok(
+    div().elements([
+      div().elements([button()
+        .class(ui_button())
+        .inner_text("Switch inner text")
+        .style(respo_style().margin(4))
+        .on_click(on_inc)]),
+      div().elements([if state.inner_text {
+        div().inner_text("inner text")
+      } else {
+        div().elements([span().inner_text("child 1"), span().inner_text("child 2")])
+      }]),
+    ]),
+  )
+}

demo_respo/src/main.rs

@@ -1,6 +1,7 @@
 extern crate console_error_panic_hook;
 
 mod counter;
+mod inner_text;
 mod panel;
 mod plugins;
 mod store;
@@ -11,12 +12,14 @@ use std::cell::{Ref, RefCell};
 use std::panic;
 use std::rc::Rc;
 
-use respo::RespoAction;
+use inner_text::comp_inner_text;
+use respo::css::respo_style;
+use respo::{space, RespoAction};
 use web_sys::Node;
 
 use respo::ui::ui_global;
-use respo::{css::RespoStyle, util, RespoApp, RespoNode, RespoStore};
 use respo::{div, util::query_select_node};
+use respo::{util, RespoApp, RespoNode, RespoStore};
 
 use self::counter::comp_counter;
 pub use self::store::ActionOp;
@@ -62,12 +65,17 @@ impl RespoApp for App {
     Ok(
       div()
         .class(ui_global())
-        .style(RespoStyle::default().padding(12.0))
+        .style(respo_style().padding(12))
         .children([
           comp_counter(&states.pick("counter"), store.counted)?.to_node(),
+          space(None, Some(80)).to_node(),
           comp_panel(&states.pick("panel"))?,
           comp_todolist(&states.pick("todolist"), &store.tasks)?.to_node(),
+          space(None, Some(80)).to_node(),
           comp_plugins_demo(&states.pick("plugins-demo"))?.to_node(),
+          space(None, Some(80)).to_node(),
+          comp_inner_text(&states.pick("inner-text"))?.to_node(),
+          space(None, Some(80)).to_node(),
         ])
         .to_node(),
     )

demo_respo/src/panel.rs

@@ -65,9 +65,8 @@ pub fn comp_panel(states: &RespoStatesTree) -> Result<RespoNode<ActionOp>, Strin
       "panel",
       div().elements([
         input()
+          .attrs(&[("placeholder", "some content..."), ("value", state.content.as_str())])
           .class(ui_input())
-          .attribute("placeholder", "some content...")
-          .attribute("value", state.content.to_owned())
           .on_input(on_input),
         space(Some(8), None),
         button().class(ui_button()).inner_text("add").on_click(on_submit),

demo_respo/src/plugins.rs

@@ -1,5 +1,6 @@
+use respo::css::respo_style;
 use respo::ui::{ui_button_danger, ui_button_primary};
-use respo::{css::RespoStyle, space, ui::ui_row_parted};
+use respo::{space, ui::ui_row_parted};
 use respo::{RespoElement, RespoEvent};
 
 use respo::{button, div, span, ui::ui_button, util, DispatchFn};
@@ -20,7 +21,7 @@ pub fn comp_plugins_demo(states: &RespoStatesTree) -> Result<RespoElement<Action
   let alert_plugin = AlertPlugin::new(
     states.pick("info"),
     AlertOptions {
-      // card_style: RespoStyle::default().background_color(CssColor::Blue),
+      // card_style: respo_style().background_color(CssColor::Blue),
       ..AlertOptions::default()
     },
     |_dispatch: DispatchFn<ActionOp>| {
@@ -116,7 +117,7 @@ pub fn comp_plugins_demo(states: &RespoStatesTree) -> Result<RespoElement<Action
         };
         Ok(
           div()
-            .style(RespoStyle::default().padding(8.0))
+            .style(respo_style().padding(8))
             .elements([
               div().elements([span().inner_text("content in custom modal")]),
               div()
@@ -155,7 +156,7 @@ pub fn comp_plugins_demo(states: &RespoStatesTree) -> Result<RespoElement<Action
         };
         Ok(
           div()
-            .style(RespoStyle::default().padding(8.0))
+            .style(respo_style().padding(8))
             .elements([
               div().elements([span().inner_text("content in custom drawer")]),
               div()

demo_respo/src/task.rs

@@ -5,7 +5,10 @@ use std::fmt::Debug;
 use memoize::memoize;
 use respo::{
   button,
-  css::{CssColor, CssSize, RespoStyle},
+  css::{
+    respo_style, ConvertRespoCssSize,
+    CssColor::{self, Hsl},
+  },
   div, input, space, span, static_styles,
   ui::{ui_button, ui_center, ui_input, ui_row_middle},
   util, DispatchFn, RespoComponent, RespoEffect, RespoEvent, RespoNode,
@@ -100,11 +103,10 @@ pub fn comp_task(
           .class_list(&[ui_center(), style_remove_button()])
           .inner_text("✕")
           .on_click(on_remove),
-        div().style(RespoStyle::default().margin4(0.0, 0.0, 0.0, 20.0)),
+        div().style(respo_style().margin4(0, 0, 0, 20)),
         input()
+          .attrs(&[("value", state.draft.as_str()), ("placeholder", "something to update...")])
           .class(ui_input())
-          .attribute("value", &state.draft)
-          .attribute("placeholder", "something to update...")
           .on_input(on_input),
         space(Some(8), None),
         button().class(ui_button()).inner_text("Update").on_click(on_update),
@@ -118,33 +120,32 @@ pub fn comp_task(
 
 static_styles!(
   style_task_container,
-  ("&", RespoStyle::default().margin(4.).background_color(CssColor::Hsl(200, 90, 96)))
+  ("&", respo_style().margin(4).background_color(Hsl(200, 90, 96)))
 );
 
 static_styles!(
   style_done_button,
   (
     "&",
-    RespoStyle::default()
-      .width(CssSize::Px(24.0))
-      .height(CssSize::Px(24.0))
-      .margin(4.)
-      .cursor("pointer".to_owned())
-      .background_color(CssColor::Hsl(20, 90, 70)),
+    respo_style()
+      .width(24.px())
+      .height(24.px())
+      .margin(4)
+      .cursor("pointer")
+      .background_color(Hsl(20, 90, 70)),
   )
 );
 
 static_styles!(
   style_remove_button,
   (
     "&",
-    RespoStyle::default()
-      .width(CssSize::Px(16.0))
-      .height(CssSize::Px(16.0))
-      .margin(4.)
-      .cursor("pointer".to_owned())
-      .margin4(0.0, 0.0, 0.0, 16.0)
-      .color(CssColor::Hsl(0, 90, 90)),
+    respo_style()
+      .width(16.px())
+      .height(16.px())
+      .cursor("pointer")
+      .margin4(0, 0, 0, 16)
+      .color(Hsl(0, 90, 90)),
   ),
-  ("$0:hover", RespoStyle::default().color(CssColor::Hsl(0, 90, 80))),
+  ("$0:hover", respo_style().color(Hsl(0, 90, 80))),
 );

demo_respo/src/todolist.rs

@@ -24,7 +24,7 @@ pub fn comp_todolist(states: &RespoStatesTree, tasks: &[Task]) -> Result<RespoEl
       continue;
     }
 
-    children.push((RespoIndexKey::from(&task.id), comp_task(states.pick(&task.id), task.to_owned())?));
+    children.push(((&task.id).into(), comp_task(states.pick(&task.id), task.to_owned())?));
   }
 
   // util::log!("{:?}", &tasks);
@@ -47,7 +47,7 @@ pub fn comp_todolist(states: &RespoStatesTree, tasks: &[Task]) -> Result<RespoEl
 
   Ok(div().elements([
     div().elements([
-      span().inner_text(format!("tasks size: {} ... {}", tasks.len(), state.hide_done.to_owned())),
+      span().inner_text(format!("tasks size: {} ... {}", tasks.len(), state.hide_done)),
       button().class(ui_button()).inner_text("hide done").on_click(on_hide),
     ]),
     div().children_indexed(children),

respo/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "respo"
-version = "0.1.9"
+version = "0.1.14"
 edition = "2021"
 description = "a tiny virtual DOM library migrated from ClojureScript"
 license = "Apache-2.0"

respo/src/app.rs

@@ -82,7 +82,9 @@ pub trait RespoApp {
       DispatchFn::new(dispatch_action),
       Self::get_loop_delay(),
     )
-    .expect("rendering node");
+    .unwrap_or_else(|e| {
+      util::error_log!("render loop error: {:?}", e);
+    });
 
     Ok(())
   }
@@ -123,7 +125,7 @@ pub trait RespoApp {
           *store.borrow_mut() = s;
         }
         Err(e) => {
-          util::log!("error: {:?}", e);
+          util::error_log!("error: {:?}", e);
         }
       },
       _ => {