concept: integrate signals

packages/web/Cargo.toml

@@ -24,7 +24,6 @@ once_cell = "1.7.2"
 atoms = { path="../atoms" }
 
 async-channel = "1.6.1"
-nohash-hasher = "0.2.0"
 anyhow = "1.0.41"
 slotmap = "1.0.3"
 

packages/web/examples/todomvc-nodeps.rs

@@ -0,0 +1,125 @@
+use std::{collections::HashMap, rc::Rc};
+
+use dioxus_core as dioxus;
+use dioxus_core::prelude::*;
+use dioxus_web::WebsysRenderer;
+
+static APP_STYLE: &'static str = include_str!("./todomvc/style.css");
+
+fn main() {
+    wasm_bindgen_futures::spawn_local(WebsysRenderer::start(App));
+}
+
+#[derive(PartialEq)]
+pub enum FilterState {
+    All,
+    Active,
+    Completed,
+}
+
+#[derive(Debug, PartialEq, Clone)]
+pub struct TodoItem {
+    pub id: uuid::Uuid,
+    pub checked: bool,
+    pub contents: String,
+}
+
+pub fn App(cx: Context<()>) -> VNode {
+    let (draft, set_draft) = use_state(&cx, || "".to_string());
+    let (todos, set_todos) = use_state(&cx, || HashMap::<uuid::Uuid, Rc<TodoItem>>::new());
+    let (filter, set_filter) = use_state(&cx, || FilterState::All);
+
+    let filtered_todos = todos.iter().filter(move |(id, item)| match filter {
+        FilterState::All => true,
+        FilterState::Active => !item.checked,
+        FilterState::Completed => item.checked,
+    });
+    let items_left = filtered_todos.clone().count();
+    let item_text = match items_left {
+        1 => "item",
+        _ => "items",
+    };
+
+    cx.render(rsx! {
+        div { id: "app"
+            div {
+                header { class: "header"
+                    h1 {"todos"}
+                    input {
+                        class: "new-todo"
+                        placeholder: "What needs to be done?"
+                        value: "{draft}"
+                        oninput: move |evt| set_draft(evt.value())
+                    }
+                }
+
+                {filtered_todos.map(|(id, item)| {
+                    rsx!(TodoEntry {
+                        key: "{id}",
+                        item: item.clone()
+                    })
+                })}
+
+                // filter toggle (show only if the list isn't empty)
+                {(!todos.is_empty()).then(|| rsx!(
+                    footer {
+                        span {
+                            strong {"{items_left}"}
+                            span {"{item_text} left"}
+                        }
+                        ul {
+                            class: "filters"
+                            li { class: "All", a { href: "", onclick: move |_| set_filter(FilterState::All), "All" }}
+                            li { class: "Active", a { href: "active", onclick: move |_| set_filter(FilterState::Active), "Active" }}
+                            li { class: "Completed", a { href: "completed", onclick: move |_| set_filter(FilterState::Completed), "Completed" }}
+                        }
+                    }
+                ))}
+            }
+            // footer
+            footer {
+                class: "info"
+                p {"Double-click to edit a todo"}
+                p {
+                    "Created by "
+                    a { "jkelleyrtp", href: "http://github.com/jkelleyrtp/" }
+                }
+                p {
+                    "Part of "
+                    a { "TodoMVC", href: "http://todomvc.com" }
+                }
+            }
+        }
+    })
+}
+
+#[derive(PartialEq, Props)]
+pub struct TodoEntryProps {
+    item: Rc<TodoItem>,
+}
+
+pub fn TodoEntry(cx: Context<TodoEntryProps>) -> VNode {
+    let (is_editing, set_is_editing) = use_state(&cx, || false);
+    let contents = "";
+    let todo = TodoItem {
+        checked: false,
+        contents: "asd".to_string(),
+        id: uuid::Uuid::new_v4(),
+    };
+
+    cx.render(rsx! (
+        li {
+            "{todo.id}"
+            input {
+                class: "toggle"
+                type: "checkbox"
+                "{todo.checked}"
+            }
+           {is_editing.then(|| rsx!{
+                input {
+                    value: "{contents}"
+                }
+            })}
+        }
+    ))
+}

packages/web/examples/todomvcsingle.rs

@@ -8,6 +8,7 @@
 //!
 //! Here, we show to use Dioxus' Recoil state management solution to simplify app logic
 #![allow(non_snake_case)]
+use dioxus_core as dioxus;
 use dioxus_web::dioxus::prelude::*;
 
 use std::collections::HashMap;
@@ -141,39 +142,27 @@ pub fn FilterToggles(cx: Context<()>) -> VNode {
     let reducer = TodoManager(use_recoil_api(cx));
     let items_left = use_read(cx, &TODOS_LEFT);
 
-    let toggles = [
-        ("All", "", FilterState::All),
-        ("Active", "active", FilterState::Active),
-        ("Completed", "completed", FilterState::Completed),
-    ]
-    .iter()
-    .map(|(name, path, filter)| {
-        rsx!(
-            li { class: "{name}"
-                a {
-                    href: "{path}",
-                    onclick: move |_| reducer.set_filter(&filter),
-                    "{name}",
-                }
-            }
-        )
-    });
-
     let item_text = match items_left {
         1 => "item",
         _ => "items",
     };
 
+    let toggles = rsx! {
+        ul {
+            class: "filters"
+            li { class: "All", a { href: "", onclick: move |_| reducer.set_filter(&FilterState::All), "All" }}
+            li { class: "Active", a { href: "active", onclick: move |_| reducer.set_filter(&FilterState::Active), "Active" }}
+            li { class: "Completed", a { href: "completed", onclick: move |_| reducer.set_filter(&FilterState::Completed), "Completed" }}
+        }
+    };
+
     rsx! { in cx,
         footer {
             span {
                 strong {"{items_left}"}
                 span { "{item_text} left" }
             }
-            ul {
-                class: "filters"
-                {toggles}
-            }
+            {toggles}
         }
     }
 }

packages/web/src/new.rs

@@ -6,7 +6,6 @@ use dioxus_core::{
     virtual_dom::RealDomNode,
 };
 use fxhash::FxHashMap;
-use nohash_hasher::IntMap;
 use slotmap::{DefaultKey, Key, KeyData};
 use wasm_bindgen::{closure::Closure, JsCast};
 use web_sys::{
@@ -20,25 +19,19 @@ pub struct WebsysDom {
     root: Element,
 
     event_receiver: async_channel::Receiver<EventTrigger>,
+
     trigger: Arc<dyn Fn(EventTrigger)>,
 
-    // every callback gets a monotomically increasing callback ID
-    callback_id: usize,
-
     // map of listener types to number of those listeners
-    listeners: FxHashMap<String, (usize, Closure<dyn FnMut(&Event)>)>,
-
-    // Map of callback_id to component index and listener id
-    callback_map: FxHashMap<usize, (usize, usize)>,
+    // This is roughly a delegater
+    // TODO: check how infero delegates its events - some are more performant
+    listeners: FxHashMap<&'static str, (usize, Closure<dyn FnMut(&Event)>)>,
 
     // We need to make sure to add comments between text nodes
     // We ensure that the text siblings are patched by preventing the browser from merging
     // neighboring text nodes. Originally inspired by some of React's work from 2016.
     //  -> https://reactjs.org/blog/2016/04/07/react-v15.html#major-changes
     //  -> https://github.com/facebook/react/pull/5753
-    //
-    // `ptns` = Percy text node separator
-    // TODO
     last_node_was_text: bool,
 }
 impl WebsysDom {
@@ -48,7 +41,7 @@ impl WebsysDom {
             .document()
             .expect("must have access to the Document");
 
-        let (sender, mut receiver) = async_channel::unbounded::<EventTrigger>();
+        let (sender, receiver) = async_channel::unbounded::<EventTrigger>();
 
         let sender_callback = Arc::new(move |ev| {
             let c = sender.clone();
@@ -57,19 +50,13 @@ impl WebsysDom {
             });
         });
 
-        let mut nodes = slotmap::SlotMap::new();
-        // HashMap::with_capacity_and_hasher(1000, nohash_hasher::BuildNoHashHasher::default());
-        // let mut nodes =
-        //     HashMap::with_capacity_and_hasher(1000, nohash_hasher::BuildNoHashHasher::default());
+        let mut nodes = slotmap::SlotMap::with_capacity(1000);
 
         let root_id = nodes.insert(root.clone().dyn_into::<Node>().unwrap());
         Self {
             stack: Stack::with_capacity(10),
             nodes,
-
-            callback_id: 0,
             listeners: FxHashMap::default(),
-            callback_map: FxHashMap::default(),
             document,
             event_receiver: receiver,
             trigger: sender_callback,
@@ -208,7 +195,7 @@ impl<'a> dioxus_core::diff::RealDom<'a> for WebsysDom {
 
     fn new_event_listener(
         &mut self,
-        event: &str,
+        event: &'static str,
         scope: dioxus_core::prelude::ScopeIdx,
         el_id: usize,
         real_id: RealDomNode,
@@ -231,10 +218,10 @@ impl<'a> dioxus_core::diff::RealDom<'a> for WebsysDom {
             .dyn_ref::<Element>()
             .expect(&format!("not an element: {:?}", el));
 
-        let (gi_id, gi_gen) = (&scope).into_raw_parts();
+        let gi_id = scope.data().as_ffi();
         el.set_attribute(
             &format!("dioxus-event-{}", event),
-            &format!("{}.{}.{}.{}", gi_id, gi_gen, el_id, real_id.0),
+            &format!("{}.{}.{}", gi_id, el_id, real_id.0),
         )
         .unwrap();
 
@@ -565,13 +552,9 @@ fn decode_trigger(event: &web_sys::Event) -> anyhow::Result<EventTrigger> {
         .get_attribute(&format!("dioxus-event-{}", typ))
         .context("")?;
 
-    let mut fields = val.splitn(4, ".");
+    let mut fields = val.splitn(3, ".");
 
     let gi_id = fields
-        .next()
-        .and_then(|f| f.parse::<usize>().ok())
-        .context("")?;
-    let gi_gen = fields
         .next()
         .and_then(|f| f.parse::<u64>().ok())
         .context("")?;
@@ -585,17 +568,19 @@ fn decode_trigger(event: &web_sys::Event) -> anyhow::Result<EventTrigger> {
         .context("")?;
 
     // Call the trigger
-    log::debug!(
-        "decoded gi_id: {},  gi_gen: {},  li_idx: {}",
-        gi_id,
-        gi_gen,
-        el_id
-    );
+    log::debug!("decoded gi_id: {}, li_idx: {}", gi_id, el_id);
 
-    let triggered_scope = ScopeIdx::from_raw_parts(gi_id, gi_gen);
+    let triggered_scope: ScopeIdx = KeyData::from_ffi(gi_id).into();
     Ok(EventTrigger::new(
         virtual_event_from_websys_event(event),
         triggered_scope,
         real_id,
     ))
 }
+
+struct ListenerMap {}
+impl ListenerMap {
+    fn get(&self, event: &'static str) -> bool {
+        false
+    }
+}