syntax sugar for Respo styles; tag 0.1.14

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

@@ -2,7 +2,7 @@
 
 use std::fmt::Debug;
 
-use respo::{button, css::RespoStyle, div, span, ui::ui_button, util, DispatchFn, RespoElement, RespoEvent};
+use respo::{button, css::respo_style, div, span, ui::ui_button, util, DispatchFn, RespoElement, RespoEvent};
 use respo_state_derive::RespoState;
 use serde::{Deserialize, Serialize};
 
@@ -45,7 +45,7 @@ pub fn comp_inner_text(states: &RespoStatesTree) -> Result<RespoElement<ActionOp
       div().elements([button()
         .class(ui_button())
         .inner_text("Switch inner text")
-        .style(RespoStyle::default().margin(4.))
+        .style(respo_style().margin(4))
         .on_click(on_inc)]),
       div().elements([if state.inner_text {
         div().inner_text("inner text")

demo_respo/src/main.rs

@@ -13,12 +13,13 @@ use std::panic;
 use std::rc::Rc;
 
 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;
@@ -64,7 +65,7 @@ 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(),

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,7 +103,7 @@ 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())
@@ -117,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.13"
+version = "0.1.14"
 edition = "2021"
 description = "a tiny virtual DOM library migrated from ClojureScript"
 license = "Apache-2.0"

respo/src/node.rs

@@ -20,12 +20,13 @@ pub use element::RespoElement;
 
 use crate::states_tree::{DynEq, RespoStateBranch, RespoUpdateState};
 
-use css::RespoStyle;
+use css::respo_style;
 
 pub(crate) use dom_change::RespoCoord;
 pub(crate) use dom_change::{ChildDomOp, DomChange};
 
 pub use component::effect::{RespoEffect, RespoEffectType};
+pub use css::ConvertRespoCssSize;
 
 /// an `Element` or a `Component`
 #[derive(Debug, Clone, PartialEq, Eq)]
@@ -125,7 +126,7 @@ where
       name: name.into(),
       attributes: HashMap::new(),
       event: HashMap::new(),
-      style: RespoStyle::default(),
+      style: respo_style(),
       children: Vec::new(),
     })
   }