rename to dialog namespace; adding docs; release 0.0.13

demo_respo/src/plugins.rs

@@ -1,12 +1,11 @@
 use std::fmt::Debug;
-use std::rc::Rc;
 
 use respo::space;
 use serde::{Deserialize, Serialize};
 
 use respo::{button, div, span, ui::ui_button, util, DispatchFn, RespoNode, StatesTree};
 
-use respo::alerts::{
+use respo::dialog::{
   AlertOptions, AlertPlugin, AlertPluginInterface, ConfirmOptions, ConfirmPlugin, ConfirmPluginInterface, ModalOptions, ModalPlugin,
   ModalPluginInterface, ModalRenderer, PromptOptions, PromptPlugin, PromptPluginInterface, PromptValidator,
 };
@@ -20,14 +19,24 @@ struct TaskState {
 }
 
 pub fn comp_plugins_demo(states: &StatesTree) -> Result<RespoNode<ActionOp>, String> {
-  respo::util::log!("renrender");
+  // respo::util::log!("re-render");
 
   let alert_plugin = AlertPlugin::new(states.pick("info"), AlertOptions::default(), |_dispatch: DispatchFn<ActionOp>| {
     respo::util::log!("on read");
     Ok(())
-  })?;
-  let alert_plugin = Rc::new(alert_plugin);
-  let alert_plugin2 = alert_plugin.clone();
+  })?
+  .share_with_ref();
+
+  let on_alert = {
+    let alert_plugin = alert_plugin.clone();
+    move |e, dispatch: DispatchFn<_>| -> Result<(), String> {
+      util::log!("click {:?}", e);
+
+      alert_plugin.show(dispatch, None)?;
+
+      Ok(())
+    }
+  };
 
   let confirm_plugin = ConfirmPlugin::new(
     states.pick("confirm"),
@@ -36,35 +45,60 @@ pub fn comp_plugins_demo(states: &StatesTree) -> Result<RespoNode<ActionOp>, Str
       respo::util::log!("on confirm");
       Ok(())
     },
-  )?;
+  )?
+  .share_with_ref();
 
-  let confirm_plugin = Rc::new(confirm_plugin);
-  let confirm_plugin3 = confirm_plugin.clone();
-  let confirm_plugin2 = confirm_plugin;
+  let on_confirm = {
+    let confirm_plugin = confirm_plugin.clone();
+    move |e, dispatch: DispatchFn<_>| -> Result<(), String> {
+      util::log!("click {:?}", e);
 
-  let options = PromptOptions {
-    validator: Some(PromptValidator::new(|text| {
-      if text.len() < 3 {
+      confirm_plugin.show(dispatch, move || {
+        respo::util::log!("do something on confirm");
         Ok(())
-      } else {
-        Err("too long".to_owned())
-      }
-    })),
-    multilines: true,
-    ..Default::default()
+      })?;
+
+      Ok(())
+    }
   };
 
-  let prompt_plugin = Rc::new(PromptPlugin::new(
+  let prompt_plugin = PromptPlugin::new(
     states.pick("prompt"),
-    options,
+    PromptOptions {
+      validator: Some(PromptValidator::new(|text| {
+        if text.len() < 3 {
+          Ok(())
+        } else {
+          Err("too long".to_owned())
+        }
+      })),
+      multilines: true,
+      ..Default::default()
+    },
     |content, _dispatch: DispatchFn<ActionOp>| {
       respo::util::log!("on prompt: {}", content);
       Ok(())
     },
-  )?);
-  let prompt_plugin2 = prompt_plugin.clone();
+  )?
+  .share_with_ref();
 
-  let modal_plugin = Rc::new(ModalPlugin::new(
+  let on_prompt = {
+    let prompt_plugin = prompt_plugin.clone();
+    move |e, dispatch: DispatchFn<_>| -> Result<(), String> {
+      util::log!("click {:?}", e);
+
+      prompt_plugin.show(dispatch, move |content| {
+        respo::util::log!("do something on prompt: {}", content);
+        Ok(())
+      })?;
+
+      Ok(())
+    }
+  };
+
+  // declare modal
+
+  let modal_plugin = ModalPlugin::new(
     states.pick("modal"),
     ModalOptions {
       render: ModalRenderer::new(|close_modal: _| {
@@ -83,45 +117,18 @@ pub fn comp_plugins_demo(states: &StatesTree) -> Result<RespoNode<ActionOp>, Str
       }),
       ..ModalOptions::default()
     },
-  )?);
-  let modal_plugin2 = modal_plugin.clone();
-
-  let on_alert = move |e, dispatch: DispatchFn<_>| -> Result<(), String> {
-    util::log!("click {:?}", e);
+  )?
+  .share_with_ref();
 
-    alert_plugin.show(dispatch, None)?;
+  let on_modal = {
+    let modal_plugin = modal_plugin.clone();
+    move |e, dispatch: DispatchFn<_>| -> Result<(), String> {
+      util::log!("click {:?}", e);
 
-    Ok(())
-  };
-
-  let on_confirm = move |e, dispatch: DispatchFn<_>| -> Result<(), String> {
-    util::log!("click {:?}", e);
-
-    confirm_plugin2.show(dispatch, move || {
-      respo::util::log!("do something on confirm");
-      Ok(())
-    })?;
-
-    Ok(())
-  };
+      modal_plugin.show(dispatch)?;
 
-  let on_prompt = move |e, dispatch: DispatchFn<_>| -> Result<(), String> {
-    util::log!("click {:?}", e);
-
-    prompt_plugin2.show(dispatch, move |content| {
-      respo::util::log!("do something on prompt: {}", content);
       Ok(())
-    })?;
-
-    Ok(())
-  };
-
-  let on_modal = move |e, dispatch: DispatchFn<_>| -> Result<(), String> {
-    util::log!("click {:?}", e);
-
-    modal_plugin.show(dispatch, None)?;
-
-    Ok(())
+    }
   };
 
   Ok(
@@ -143,10 +150,10 @@ pub fn comp_plugins_demo(states: &StatesTree) -> Result<RespoNode<ActionOp>, Str
             button().class(ui_button()).inner_text("Try Modal").on_click(on_modal).to_owned(),
           ])
           .to_owned(),
-        alert_plugin2.render()?,
-        confirm_plugin3.render()?,
+        alert_plugin.render()?,
+        confirm_plugin.render()?,
         prompt_plugin.render()?,
-        modal_plugin2.render()?,
+        modal_plugin.render()?,
       ])
       .to_owned(),
   )

respo/Cargo.toml

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

respo/src/alerts.rs → respo/src/dialog.rs

@@ -1,3 +1,5 @@
+//! module to provide popup dialogs.
+
 mod alert;
 mod confirm;
 mod modal;
@@ -11,12 +13,12 @@ use web_sys::{Element, HtmlElement, Node};
 use crate::{respo, static_styles, RespoEffectType};
 use crate::{CssColor, CssOverflow, CssPosition, CssSize, RespoEffectArg, RespoStyle};
 
-pub(crate) const BUTTON_NAME: &str = "alert-button";
+pub(crate) const BUTTON_NAME: &str = "dialog-button";
 
-pub use alert::{comp_alert_modal, AlertOptions, AlertPlugin, AlertPluginInterface};
-pub use confirm::{comp_confirm_modal, ConfirmOptions, ConfirmPlugin, ConfirmPluginInterface};
-pub use modal::{comp_modal, ModalOptions, ModalPlugin, ModalPluginInterface, ModalRenderer};
-pub use prompt::{comp_prompt_modal, PromptOptions, PromptPlugin, PromptPluginInterface, PromptValidator};
+pub use alert::{AlertOptions, AlertPlugin, AlertPluginInterface};
+pub use confirm::{ConfirmOptions, ConfirmPlugin, ConfirmPluginInterface};
+pub use modal::{ModalOptions, ModalPlugin, ModalPluginInterface, ModalRenderer};
+pub use prompt::{PromptOptions, PromptPlugin, PromptPluginInterface, PromptValidator};
 
 pub(crate) fn effect_focus(args: Vec<RespoEffectArg>, effect_type: RespoEffectType, el: &Node) -> Result<(), String> {
   let show: bool = args[0].cast_into()?;

respo/src/alerts/alert.rs → respo/src/dialog/alert.rs

@@ -5,24 +5,29 @@ use std::rc::Rc;
 
 use serde::{Deserialize, Serialize};
 
-use crate::alerts::{css_backdrop, css_button, css_card};
+use crate::dialog::{css_backdrop, css_button, css_card};
 use crate::ui::{ui_button, ui_center, ui_column, ui_fullscreen, ui_global, ui_row_parted};
 
 use crate::{
   button, div, space, span, CssLineHeight, CssPosition, DispatchFn, RespoAction, RespoEvent, RespoNode, RespoStyle, StatesTree,
 };
 
-use crate::alerts::{effect_fade, effect_focus, BUTTON_NAME};
+use crate::dialog::{effect_fade, effect_focus, BUTTON_NAME};
 
+/// The options for alert modal.
 #[derive(Debug, Clone, Default)]
 pub struct AlertOptions {
-  backdrop_style: RespoStyle,
-  card_style: RespoStyle,
-  text: Option<String>,
-  button_text: Option<String>,
+  /// inline style for backdrop
+  pub backdrop_style: RespoStyle,
+  /// inline style for card
+  pub card_style: RespoStyle,
+  /// message of the alert modal, defaults to `Alert!`
+  pub text: Option<String>,
+  /// text on button
+  pub button_text: Option<String>,
 }
 
-pub fn comp_alert_modal<T, U, V>(options: AlertOptions, show: bool, on_read: U, on_close: V) -> Result<RespoNode<T>, String>
+fn comp_alert_modal<T, U, V>(options: AlertOptions, show: bool, on_read: U, on_close: V) -> Result<RespoNode<T>, String>
 where
   U: Fn(DispatchFn<T>) -> Result<(), String> + 'static,
   V: Fn(DispatchFn<T>) -> Result<(), String> + 'static,
@@ -34,7 +39,7 @@ where
 
   Ok(
     RespoNode::new_component(
-      "alert-model",
+      "alert-modal",
       div()
         .style(RespoStyle::default().position(CssPosition::Absolute).to_owned())
         .children([if show {
@@ -96,24 +101,28 @@ where
   )
 }
 
-/// provides the interfaces to component of alert
+/// provides the interfaces to component of alert dialog
 pub trait AlertPluginInterface<T, U>
 where
   T: Debug + Clone + RespoAction,
   U: Fn(DispatchFn<T>) -> Result<(), String>,
 {
-  /// renders UI
+  /// renders virtual dom for alert modal
   fn render(&self) -> Result<RespoNode<T>, String>
   where
     T: Clone + Debug;
-  /// to show alert
+  /// to show alert, second parameter is a message that could overwrite the default message
   fn show(&self, dispatch: DispatchFn<T>, text: Option<String>) -> Result<(), String>;
   /// to close alert
   fn close(&self, dispatch: DispatchFn<T>) -> Result<(), String>;
 
+  /// show alert with options, `on_read` is the callback function when read button is clicked
   fn new(states: StatesTree, options: AlertOptions, on_read: U) -> Result<Self, String>
   where
     Self: std::marker::Sized;
+
+  /// return referencial counted alert plugin
+  fn share_with_ref(&self) -> Rc<Self>;
 }
 
 #[derive(Debug, Clone, Default, Serialize, Deserialize)]
@@ -122,7 +131,8 @@ struct AlertPluginState {
   text: Option<String>,
 }
 
-/// struct for AlertPlugin
+/// abstraction for Alert modal, new with `AlertOption`,
+/// just displaying a message, you read it, you close it
 #[derive(Debug, Clone)]
 pub struct AlertPlugin<T, U>
 where
@@ -204,4 +214,8 @@ where
 
     Ok(instance)
   }
+
+  fn share_with_ref(&self) -> Rc<Self> {
+    Rc::new(self.clone())
+  }
 }