extend CssColor; add preset style; provide memo functions; tag 0.0.17

README.md

@@ -1,4 +1,4 @@
-# Respo in MoonBit(Early Stage)
+# Respo in MoonBit(Beta)
 
 > tiny toy virtual DOM library ported from [Respo.rs](https://github.com/Respo/respo.rs).
 
@@ -15,6 +15,10 @@ Core ideas:
 
 This project is in early stage, APIs and structure may change.
 
+TODO:
+
+- immutable data enhancement
+
 ### Usage
 
 ```bash

moon.mod.json

@@ -1,6 +1,6 @@
 {
   "name": "tiye/respo",
-  "version": "0.0.16",
+  "version": "0.0.17",
   "deps": {
     "tiye/dom-ffi": "0.0.6",
     "tiye/cirru-parser": "0.0.7"

src/lib/memo.mbt

@@ -0,0 +1,79 @@
+//! Memoization utilities. based on work of [@hackwaly](https://taolun.moonbitlang.com/t/topic/958/2)
+
+pub fn memoize1[K : Hash + Eq, V](f : (K) -> V) -> (K) -> V {
+  let map = @hashmap.new()
+  fn(k : K) -> V {
+    match map[k] {
+      Some(v) => v
+      None => {
+        let v = f(k)
+        map[k] = v
+        v
+      }
+    }
+  }
+}
+
+pub fn memoize2[K1 : Hash + Eq, K2 : Hash + Eq, V](
+  f : (K1, K2) -> V
+) -> (K1, K2) -> V {
+  let map = @hashmap.new()
+  fn(k1 : K1, k2 : K2) -> V {
+    match map[(k1, k2)] {
+      Some(v) => v
+      None => {
+        let v = f(k1, k2)
+        map[(k1, k2)] = v
+        v
+      }
+    }
+  }
+}
+
+pub fn memoize3[K1 : Hash + Eq, K2 : Hash + Eq, K3 : Hash + Eq, V](
+  f : (K1, K2, K3) -> V
+) -> (K1, K2, K3) -> V {
+  let map = @hashmap.new()
+  fn(k1 : K1, k2 : K2, k3 : K3) -> V {
+    match map[(k1, k2, k3)] {
+      Some(v) => v
+      None => {
+        let v = f(k1, k2, k3)
+        map[(k1, k2, k3)] = v
+        v
+      }
+    }
+  }
+}
+
+pub fn memoize4[K1 : Hash + Eq, K2 : Hash + Eq, K3 : Hash + Eq, K4 : Hash + Eq, V](
+  f : (K1, K2, K3, K4) -> V
+) -> (K1, K2, K3, K4) -> V {
+  let map = @hashmap.new()
+  fn(k1 : K1, k2 : K2, k3 : K3, k4 : K4) -> V {
+    match map[(k1, k2, k3, k4)] {
+      Some(v) => v
+      None => {
+        let v = f(k1, k2, k3, k4)
+        map[(k1, k2, k3, k4)] = v
+        v
+      }
+    }
+  }
+}
+
+pub fn memoize5[K1 : Hash + Eq, K2 : Hash + Eq, K3 : Hash + Eq, K4 : Hash + Eq, K5 : Hash + Eq, V](
+  f : (K1, K2, K3, K4, K5) -> V
+) -> (K1, K2, K3, K4, K5) -> V {
+  let map = @hashmap.new()
+  fn(k1 : K1, k2 : K2, k3 : K3, k4 : K4, k5 : K5) -> V {
+    match map[(k1, k2, k3, k4, k5)] {
+      Some(v) => v
+      None => {
+        let v = f(k1, k2, k3, k4, k5)
+        map[(k1, k2, k3, k4, k5)] = v
+        v
+      }
+    }
+  }
+}

src/lib/node/css.mbt

@@ -14,11 +14,8 @@ pub fn to_string(self : RespoStyle) -> String {
   result
 }
 
-pub fn insert(
-  self : RespoStyle,
-  property : String,
-  value : String
-) -> RespoStyle {
+/// for custom styles not defined with enum, use this function to add
+pub fn add(self : RespoStyle, property : String, value : String) -> RespoStyle {
   self._.push((property, value))
   self
 }
@@ -27,7 +24,7 @@ pub fn merge(self : RespoStyle, other : RespoStyle) -> RespoStyle {
   let mut result = self
   for pair in other._ {
     let (property, value) = pair
-    result = result.insert(property, value)
+    result = result.add(property, value)
   }
   result
 }
@@ -111,7 +108,9 @@ pub fn respo_style(
   content? : String,
   content_visibility? : CssContentVisibility,
   filter? : CssFilter,
-  object_fit? : CssObjectFit
+  object_fit? : CssObjectFit,
+  overscroll_behavior_x? : CssOverscrollBehavior,
+  overscroll_behavior_y? : CssOverscrollBehavior
 ) -> RespoStyle {
   let style : Array[(String, String)] = []
   match color {
@@ -377,6 +376,14 @@ pub fn respo_style(
     Some(value) => style.push(("object-fit", value.to_string()))
     None => ()
   }
+  match overscroll_behavior_x {
+    Some(value) => style.push(("overscroll-behavior-x", value.to_string()))
+    None => ()
+  }
+  match overscroll_behavior_y {
+    Some(value) => style.push(("overscroll-behavior-y", value.to_string()))
+    None => ()
+  }
   RespoStyle(style)
 }
 
@@ -458,6 +465,8 @@ pub(all) enum CssColor {
   Cyan
   Orange
   Pink
+  RawString(String)
+  Transparent
 } derive(Eq)
 
 pub fn CssColor::to_string(self : CssColor) -> String {
@@ -480,6 +489,8 @@ pub fn CssColor::to_string(self : CssColor) -> String {
     Cyan => "cyan"
     Orange => "orange"
     Pink => "pink"
+    RawString(value) => value
+    Transparent => "transparent"
   }
 }
 
@@ -968,6 +979,20 @@ pub fn CssObjectFit::to_string(self : CssObjectFit) -> String {
   }
 }
 
+pub(all) enum CssOverscrollBehavior {
+  Auto
+  Contain
+  None
+}
+
+pub fn CssOverscrollBehavior::to_string(self : CssOverscrollBehavior) -> String {
+  match self {
+    Auto => "auto"
+    Contain => "contain"
+    None => "none"
+  }
+}
+
 // /// turns `src/a/b.rs` into `a_b`, (used inside macro)
 // pub fn css_name_from_path(p: &str) -> String {
 //   let mut s = p.to_owned();
@@ -982,7 +1007,12 @@ pub fn CssObjectFit::to_string(self : CssObjectFit) -> String {
 
 let class_name_in_tags : @hashset.T[String] = @hashset.new()
 
-/// Moonbit version, use [T] for <T> for generics, GC language no need to use to_owned() and &
+/// Declare a static style in the head of the documentm for example
+/// ```moonbit
+/// let style_demo : String = declare_static_style(
+///  [("&", respo_style(margin=Px(4), background_color=Hsl(200, 90, 96)))],
+/// )
+/// ```
 pub fn declare_static_style[U : Show](
   rules : Array[(U, RespoStyle)],
   loc~ : SourceLoc = _

src/lib/node/element.mbt

@@ -70,6 +70,7 @@ pub fn set_attribute[T](
 
 // TODO implement methods for RespoElement
 
+/// create attributes for an element
 pub fn respo_attrs(
   id? : String,
   class_name? : String,

src/lib/states-tree.mbt

@@ -12,6 +12,12 @@ pub(all) struct RespoStatesTree {
   branches : Map[String, RespoStatesTree]
 }
 
+impl Eq for RespoStatesTree with op_equal(self, other) {
+  self.cursor == other.cursor &&
+  self.data == other.data &&
+  self.branches == other.branches
+}
+
 pub fn to_json(self : RespoStatesTree) -> @json.JsonValue {
   let object = {}
   object.set("data", self.data.to_json()) // TODO need to use manual version by now

src/lib/ui.mbt

@@ -380,3 +380,26 @@ pub let ui_row_parted : String = declare_static_style(
     ),
   ],
 )
+
+/// common CSS resets for Respo pages
+pub let preset : String = declare_static_style(
+  [
+    (
+      "body",
+      respo_style(
+        margin=Px(0),
+        overscroll_behavior_x=None,
+        overscroll_behavior_y=None,
+      ),
+    ),
+    ("body *", respo_style(box_sizing=BorderBox)),
+    ("::-webkit-scrollbar", respo_style(width=Px(4), height=Px(4))),
+    ("::-webkit-scrollbar-track", respo_style(background_color=Hsl(0, 0, 100))),
+    (
+      "::-webkit-scrollbar-thumb",
+      respo_style(background_color=Hsla(180, 40, 76, 0.8)),
+    ),
+    ("::-webkit-scrollbar-corner", respo_style(background_color=Transparent)),
+    ("::-webkit-resizer", respo_style(background_color=Transparent)),
+  ],
+)

src/main/main.mbt

@@ -6,7 +6,7 @@ fn view(
   // @dom_ffi.log("Store to render: " + store.to_json().stringify(indent=2))
   let states = store.get_states()
   div(
-    class_name=@respo.ui_global,
+    class_name=str_spaced([@respo.ui_global, @respo.preset]),
     style=respo_style(padding=Px(12)),
     [
       comp_counter(states.pick("counter"), store.counted),

src/main/plugins.mbt

@@ -20,7 +20,7 @@ fn comp_plugins_demo(
   ) -> Unit!@respo_node.RespoCommonError {
     @dom_ffi.log("click " + e.to_string())
 
-    // alert_plugin.show(dispatch, Some("a mesasge for you".to_owned()))?;
+    // alert_plugin.show(dispatch, Some("a mesasge for you"))?;
     alert_plugin.show!(dispatch, None)
   }
   let confirm_plugin = @dialog.ConfirmPlugin::new(