handle blur event; support optional attribute; alpha tag 0.0.11-a2

Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "respo"
-version = "0.0.11-a1"
+version = "0.0.11-a2"
 edition = "2021"
 description = "a tiny virtual DOM library migrated from ClojureScript"
 license = "Apache-2.0"
@@ -43,4 +43,5 @@ features = [
   "Element",
   "HtmlCollection",
   "CssStyleDeclaration",
+  "FocusEvent",
 ]

src/respo/patch.rs

@@ -1,7 +1,7 @@
 use std::fmt::Debug;
 
 use wasm_bindgen::prelude::Closure;
-use web_sys::{Element, HtmlElement, HtmlInputElement, InputEvent, KeyboardEvent, MouseEvent, Node};
+use web_sys::{Element, FocusEvent, HtmlElement, HtmlInputElement, InputEvent, KeyboardEvent, MouseEvent, Node};
 
 use wasm_bindgen::JsCast;
 use web_sys::console::warn_1;
@@ -227,7 +227,7 @@ fn find_coord_dom_target(mount_target: &Node, coord: &[u32]) -> Result<Node, Str
 
 pub fn attach_event(element: &Element, key: &str, coord: &[RespoCoord], handle_event: RespoEventMarkFn) -> Result<(), String> {
   let coord = coord.to_owned();
-  // util::log!("attach event {}", key);
+  // crate::util::log!("attach event {}", key);
   match key {
     "click" => {
       let handler = Closure::wrap(Box::new(move |e: MouseEvent| {
@@ -308,6 +308,7 @@ pub fn attach_event(element: &Element, key: &str, coord: &[RespoCoord], handle_e
     }
     "keydown" => {
       let handler = Closure::wrap(Box::new(move |e: KeyboardEvent| {
+        // crate::util::log!("calling handler");
         let wrap_event = RespoEvent::Keyboard {
           key: e.key(),
           key_code: e.key_code(),
@@ -372,6 +373,30 @@ pub fn attach_event(element: &Element, key: &str, coord: &[RespoCoord], handle_e
         .set_onkeypress(Some(handler.as_ref().unchecked_ref()));
       handler.forget();
     }
+    "focus" => {
+      let handler = Closure::wrap(Box::new(move |e: FocusEvent| {
+        handle_event
+          .run(RespoEventMark::new("focus", &coord, RespoEvent::Focus(e)))
+          .expect("handle focus event");
+      }) as Box<dyn FnMut(FocusEvent)>);
+      element
+        .dyn_ref::<HtmlInputElement>()
+        .expect("convert to html input element")
+        .set_onfocus(Some(handler.as_ref().unchecked_ref()));
+      handler.forget();
+    }
+    "blur" => {
+      let handler = Closure::wrap(Box::new(move |e: FocusEvent| {
+        handle_event
+          .run(RespoEventMark::new("blur", &coord, RespoEvent::Focus(e)))
+          .expect("handle blur event");
+      }) as Box<dyn FnMut(FocusEvent)>);
+      element
+        .dyn_ref::<HtmlInputElement>()
+        .expect("convert to html input element")
+        .set_onblur(Some(handler.as_ref().unchecked_ref()));
+      handler.forget();
+    }
     _ => {
       warn_1(&format!("unhandled event: {}", key).into());
     }

src/respo/primes.rs

@@ -8,7 +8,7 @@ use cirru_parser::{Cirru, CirruWriterOptions};
 use serde::de::DeserializeOwned;
 use serde::{Deserialize, Serialize};
 use serde_json::Value;
-use web_sys::{InputEvent, KeyboardEvent, MouseEvent, Node};
+use web_sys::{FocusEvent, InputEvent, KeyboardEvent, MouseEvent, Node};
 
 use crate::{MaybeState, StatesTree};
 
@@ -138,6 +138,26 @@ where
     }
     self
   }
+  pub fn maybe_insert_attr<U, V>(&mut self, property: U, value: Option<V>) -> &mut Self
+  where
+    U: Into<String> + ToOwned,
+    V: Into<String> + ToOwned,
+  {
+    if let Some(v) = value {
+      match self {
+        RespoNode::Component(_, _, node) => {
+          node.insert_attr(property, v);
+        }
+        RespoNode::Element { ref mut attrs, .. } => {
+          attrs.insert(property.into(), v.into());
+        }
+        RespoNode::Referenced(_) => {
+          unreachable!("should not be called on a referenced node");
+        }
+      }
+    }
+    self
+  }
   pub fn add_attrs<U, V, W>(&mut self, more: U) -> &mut Self
   where
     U: IntoIterator<Item = (V, W)>,
@@ -406,6 +426,8 @@ pub enum RespoEvent {
     value: String,
     original_event: InputEvent,
   },
+  Focus(FocusEvent),
+  Blur(FocusEvent),
 }
 
 /// effects that attached to components