From 8c541f66d5f7ef2286f2cdf9b0496a9c404471f9 Mon Sep 17 00:00:00 2001
From: Jonathan Kelley <jkelleyrtp@gmail.com>
Date: Thu, 1 Apr 2021 21:44:18 -0400
Subject: [PATCH] wip: todos

---
 README.md                                     |  9 +-
 notes/CHANGELOG.md                            | 28 +++---
 packages/core-macro/src/rsxt.rs               | 91 +++++++++----------
 packages/core/src/events.rs                   | 25 ++++-
 packages/web/Cargo.toml                       | 15 ++-
 packages/web/examples/rsxt.rs                 |  6 +-
 .../web/examples/todomvc/filtertoggles.rs     |  4 +-
 packages/web/examples/todomvc/main.rs         |  7 +-
 packages/web/examples/todomvc/recoil.rs       | 14 +++
 packages/web/examples/todomvc/state.rs        | 38 ++++++--
 packages/web/examples/todomvc/todoitem.rs     | 17 +---
 packages/web/examples/todomvc/todolist.rs     | 22 ++---
 packages/web/src/interpreter.rs               | 89 +++++++++++++++++-
 packages/web/src/lib.rs                       |  1 +
 14 files changed, 257 insertions(+), 109 deletions(-)

diff --git a/README.md b/README.md
index cbbcd6e64..5167c846e 100644
--- a/README.md
+++ b/README.md
@@ -29,9 +29,10 @@ Dioxus can be used to deliver webapps, desktop apps, static pages, liveview apps
 ### **Things you'll love ❤️:**
 - Ergonomic design
 - Minimal boilerplate
-- Simple build, test, and deploy
+- Simple build, test, and deploy 
 - Support for html! and rsx! templating
 - SSR, WASM, desktop, and mobile support
+- Powerful and simple integrated state management
 - Rust! (enums, static types, modules, efficiency)
   
 
@@ -47,10 +48,6 @@ Dioxus can be used to deliver webapps, desktop apps, static pages, liveview apps
     <tr>
 </table>
 
-
-
-
-
 ## Explore
 - [**HTML Templates**: Drop in existing HTML5 templates with html! macro](docs/guides/00-index.md)
 - [**RSX Templates**: Clean component design with rsx! macro](docs/guides/00-index.md)
@@ -81,7 +78,7 @@ Liveview is an architecture for building web applications where the final page i
 
 In other frameworks, the DOM will be updated after events from the page are sent to the server and new html is generated. The html is then sent back to the page over websockets (ie html over websockets).
 
-In Dioxus, the user's bundle will link individual components on the page to the Liveview server. This ensures local events propogate through the page virtual dom if the server is not needed, keeping interactive latency low. This ensures the server load stays low, enablinmg a single server to handle tens of thousands of simultaneous clients.
+In Dioxus, the user's bundle will link individual components on the page to the Liveview server. This ensures local events propogate through the page virtual dom if the server is not needed, keeping interactive latency low. This ensures the server load stays low, enabling a single server to handle tens of thousands of simultaneous clients.
 
 <!-- ## Dioxus LiveHost
 Dioxus LiveHost is a paid service that accelerates the deployment of Dioxus Apps. It provides CI/CD, testing, monitoring, scaling, and deployment specifically for Dioxus apps. 
diff --git a/notes/CHANGELOG.md b/notes/CHANGELOG.md
index bfd74c64d..f4ce34ea0 100644
--- a/notes/CHANGELOG.md
+++ b/notes/CHANGELOG.md
@@ -76,20 +76,26 @@ Welcome to the first iteration of the Dioxus Virtual DOM! This release brings su
 
 ## Outstanding todos:
 > anything missed so far
+- [x] keys on components
+- [x] Allow paths for components
+- [x] todo mvc
+- [ ] Make events lazy (use traits + Box<dyn>)
+- [ ] attrs on elements should implement format_args
+- [ ] Beef up the dioxus CLI tool
+- [ ] Tweak macro parsing for better errors
+- [ ] make ssr follow HTML spec (ish)
 - [ ] dirty tagging, compression
-- [ ] fragments
-- [ ] make ssr follow HTML spec
-- [ ] code health
+- [ ] fix keys on elements
 - [ ] miri tests
-- [ ] todo mvc
-- [ ] fix
+- [ ] code health
+- [ ] all synthetic events filled out
+- [ ] doublecheck event targets and stuff
+- [ ] Documentation overhaul
+- [ ] Website
+
+lower priorty features
+- [ ] fragments
 - [ ] node refs (postpone for future release?)
 - [ ] styling built-in (future release?)
 - [ ] key handler?
 - [ ] FC macro
-- [ ] Documentation overhaul
-- [ ] Website
-- [x] keys on components
-- [ ] fix keys on elements
-- [ ] all synthetic events filed out
-- [ ] doublecheck event targets and stuff
diff --git a/packages/core-macro/src/rsxt.rs b/packages/core-macro/src/rsxt.rs
index bb55fbb1e..41c174916 100644
--- a/packages/core-macro/src/rsxt.rs
+++ b/packages/core-macro/src/rsxt.rs
@@ -144,11 +144,53 @@ impl Parse for Node {
 }
 
 struct Component {
-    name: Ident,
+    // accept any path-like argument
+    name: syn::Path,
     body: Vec<ComponentField>,
     children: Vec<Node>,
 }
 
+impl Parse for Component {
+    fn parse(s: ParseStream) -> Result<Self> {
+        // let name = s.parse::<syn::ExprPath>()?;
+        // todo: look into somehow getting the crate/super/etc
+
+        let name = syn::Path::parse_mod_style(s)?;
+        // parse the guts
+        let content: ParseBuffer;
+        syn::braced!(content in s);
+
+        let mut body: Vec<ComponentField> = Vec::new();
+        let _children: Vec<Node> = Vec::new();
+
+        'parsing: loop {
+            // [1] Break if empty
+            if content.is_empty() {
+                break 'parsing;
+            }
+
+            if let Ok(field) = content.parse::<ComponentField>() {
+                body.push(field);
+            }
+
+            // consume comma if it exists
+            // we don't actually care if there *are* commas between attrs
+            if content.peek(Token![,]) {
+                let _ = content.parse::<Token![,]>();
+            }
+        }
+
+        // todo: add support for children
+        let children: Vec<Node> = vec![];
+
+        Ok(Self {
+            name,
+            body,
+            children,
+        })
+    }
+}
+
 impl ToTokens for &Component {
     fn to_tokens(&self, tokens: &mut TokenStream2) {
         let name = &self.name;
@@ -186,53 +228,6 @@ impl ToTokens for &Component {
         });
     }
 }
-
-impl Parse for Component {
-    fn parse(s: ParseStream) -> Result<Self> {
-        let name = Ident::parse_any(s)?;
-
-        if crate::util::is_valid_tag(&name.to_string()) {
-            return Err(Error::new(
-                name.span(),
-                "Components cannot share names with valid HTML tags",
-            ));
-        }
-
-        // parse the guts
-        let content: ParseBuffer;
-        syn::braced!(content in s);
-
-        let mut body: Vec<ComponentField> = Vec::new();
-        let _children: Vec<Node> = Vec::new();
-
-        'parsing: loop {
-            // [1] Break if empty
-            if content.is_empty() {
-                break 'parsing;
-            }
-
-            if let Ok(field) = content.parse::<ComponentField>() {
-                body.push(field);
-            }
-
-            // consume comma if it exists
-            // we don't actually care if there *are* commas between attrs
-            if content.peek(Token![,]) {
-                let _ = content.parse::<Token![,]>();
-            }
-        }
-
-        // todo: add support for children
-        let children: Vec<Node> = vec![];
-
-        Ok(Self {
-            name,
-            body,
-            children,
-        })
-    }
-}
-
 // the struct's fields info
 pub struct ComponentField {
     name: Ident,
diff --git a/packages/core/src/events.rs b/packages/core/src/events.rs
index 9c04e95fe..761ad6293 100644
--- a/packages/core/src/events.rs
+++ b/packages/core/src/events.rs
@@ -115,7 +115,7 @@ pub mod on {
         data: String,
     }
     event_builder! {
-        ClipboardEvent;
+        CompositionEvent;
         compositionend compositionstart compositionupdate
     }
 
@@ -133,6 +133,29 @@ pub mod on {
         which: usize,
         get_modifier_state: GetModifierKey,
     }
+    pub struct KeyboardEvent2(pub Box<dyn KeyboardEventT>);
+    impl std::ops::Deref for KeyboardEvent2 {
+        type Target = Box<dyn KeyboardEventT>;
+
+        fn deref(&self) -> &Self::Target {
+            &self.0
+        }
+    }
+
+    pub trait KeyboardEventT {
+        fn char_code(&self) -> usize;
+        fn ctrl_key(&self) -> bool;
+        fn key(&self) -> String;
+        fn key_code(&self) -> usize;
+        fn locale(&self) -> String;
+        fn location(&self) -> usize;
+        fn meta_key(&self) -> bool;
+        fn repeat(&self) -> bool;
+        fn shift_key(&self) -> bool;
+        fn which(&self) -> usize;
+        fn get_modifier_state(&self) -> GetModifierKey;
+    }
+
     event_builder! {
         KeyboardEvent;
         keydown keypress keyup
diff --git a/packages/web/Cargo.toml b/packages/web/Cargo.toml
index 066dce4cd..4c4c53a2c 100644
--- a/packages/web/Cargo.toml
+++ b/packages/web/Cargo.toml
@@ -45,10 +45,23 @@ features = [
     "Event",
     "MouseEvent",
     "InputEvent",
+    "ClipboardEvent",
+    "KeyboardEvent",
+    "TouchEvent",
+    "WheelEvent",
+    "AnimationEvent",
+    "TransitionEvent",
+    "PointerEvent",
+    "FocusEvent",
+    "CompositionEvent",
     "DocumentType",
     "CharacterData",
     "HtmlOptionElement",
-]
+] # "FormEvent",
+# "UIEvent",
+# "ToggleEvent",
+# "MediaEvent",
+# "SelectionEvent",
 
 [profile.release]
 debug = true
diff --git a/packages/web/examples/rsxt.rs b/packages/web/examples/rsxt.rs
index 48156e8b0..04419bc69 100644
--- a/packages/web/examples/rsxt.rs
+++ b/packages/web/examples/rsxt.rs
@@ -36,9 +36,9 @@ static Example: FC<ExampleProps> = |ctx, props| {
                 "Hello, {name}"
             }
             
-            CustomButton { name: "Jack!", handler: move |evt| name.set("Jack".to_string()) }
-            CustomButton { name: "Jill!", handler: move |evt| name.set("Jill".to_string()) }
-            CustomButton { name: "Bob!", handler: move |evt| name.set("Bob".to_string())}
+            CustomButton { name: "Jack!", handler: move |_| name.set("Jack".to_string()) }
+            CustomButton { name: "Jill!", handler: move |_| name.set("Jill".to_string()) }
+            CustomButton { name: "Bob!", handler: move |_| name.set("Bob".to_string())}
         }
     })
 };
diff --git a/packages/web/examples/todomvc/filtertoggles.rs b/packages/web/examples/todomvc/filtertoggles.rs
index c806b9388..d3ade6642 100644
--- a/packages/web/examples/todomvc/filtertoggles.rs
+++ b/packages/web/examples/todomvc/filtertoggles.rs
@@ -13,7 +13,7 @@ pub fn FilterToggles(ctx: Context, props: &()) -> DomTree {
     ]
     .iter()
     .map(|(name, path, filter)| {
-        rsx! {
+        rsx!(
             li {
                 class: "{name}"
                 a {
@@ -22,7 +22,7 @@ pub fn FilterToggles(ctx: Context, props: &()) -> DomTree {
                     "{name}"
                 }
             }
-        }
+        )
     });
 
     // todo
diff --git a/packages/web/examples/todomvc/main.rs b/packages/web/examples/todomvc/main.rs
index 37ac660bf..a858fedb2 100644
--- a/packages/web/examples/todomvc/main.rs
+++ b/packages/web/examples/todomvc/main.rs
@@ -1,5 +1,4 @@
-use dioxus_core::prelude::*;
-use dioxus_web::WebsysRenderer;
+use dioxus_web::{prelude::*, WebsysRenderer};
 
 mod filtertoggles;
 mod recoil;
@@ -7,8 +6,6 @@ mod state;
 mod todoitem;
 mod todolist;
 
-use todolist::TodoList;
-
 static APP_STYLE: &'static str = include_str!("./style.css");
 
 fn main() {
@@ -19,7 +16,7 @@ fn main() {
                 style { "{APP_STYLE}" }
 
                 // list
-                TodoList {}
+                todolist::TodoList {}
 
                 // footer
                 footer {
diff --git a/packages/web/examples/todomvc/recoil.rs b/packages/web/examples/todomvc/recoil.rs
index a92f79b57..e1067acd1 100644
--- a/packages/web/examples/todomvc/recoil.rs
+++ b/packages/web/examples/todomvc/recoil.rs
@@ -85,3 +85,17 @@ mod atoms {
     pub struct atom_family<K: PartialEq, V: PartialEq>(pub fn(&mut AtomFamilyBuilder<K, V>));
     pub type AtomFamily<K: PartialEq, V: PartialEq> = atom_family<K, V>;
 }
+
+pub use selectors::selector;
+mod selectors {
+    pub struct SelectorBuilder<Out, const Built: bool> {
+        _p: std::marker::PhantomData<Out>,
+    }
+    impl<O> SelectorBuilder<O, false> {
+        pub fn getter(self, f: impl Fn(()) -> O) -> SelectorBuilder<O, true> {
+            std::rc::Rc::pin(value)
+            todo!()
+        }
+    }
+    pub struct selector<O>(pub fn(SelectorBuilder<O, false>) -> SelectorBuilder<O, true>);
+}
diff --git a/packages/web/examples/todomvc/state.rs b/packages/web/examples/todomvc/state.rs
index 3bc794d68..571cdb812 100644
--- a/packages/web/examples/todomvc/state.rs
+++ b/packages/web/examples/todomvc/state.rs
@@ -1,7 +1,12 @@
 use crate::recoil::*;
+use dioxus_core::prelude::Context;
 
 pub static TODOS: AtomFamily<uuid::Uuid, TodoItem> = atom_family(|_| {});
 pub static FILTER: Atom<FilterState> = atom(|_| FilterState::All);
+pub static SHOW_ALL_TODOS: selector<bool> = selector(|g| g.getter(|f| false));
+
+// an atomfamily is just a HashMap<K, Pin<Rc<V>>> that pins the Rc and exposes the values by reference
+// we could do a more advanced management, but this is fine too
 
 #[derive(PartialEq)]
 pub enum FilterState {
@@ -17,11 +22,30 @@ pub struct TodoItem {
     pub contents: String,
 }
 
-impl crate::recoil::RecoilContext<()> {
-    pub fn add_todo(&self, contents: String) {}
-    pub fn remove_todo(&self) {}
-    pub fn select_all_todos(&self) {}
-    pub fn toggle_todo(&self, id: uuid::Uuid) {}
-    pub fn clear_completed(&self) {}
-    pub fn set_filter(&self, filter: &FilterState) {}
+pub fn add_todo(ctx: &Context, contents: String) {}
+
+pub fn remove_todo(ctx: &Context, id: &uuid::Uuid) {
+    TODOS.with(&ctx).remove(id)
 }
+
+pub fn select_all_todos(ctx: &Context) {}
+
+pub fn toggle_todo(ctx: &Context, id: &uuid::Uuid) {}
+
+pub fn clear_completed(ctx: &Context) {
+    let (set, get) = (self.set, self.get);
+
+    TOODS
+        .get(&ctx)
+        .iter()
+        .filter(|(k, v)| v.checked)
+        .map(|(k, v)| TODOS.remove(&ctx, k));
+}
+
+pub fn set_filter(ctx: &Context, filter: &FilterState) {}
+
+struct TodoManager<'a> {}
+fn use_todos(ctx: &Context) {}
+
+#[test]
+fn test() {}
diff --git a/packages/web/examples/todomvc/todoitem.rs b/packages/web/examples/todomvc/todoitem.rs
index f3cb9259a..e1fc26d69 100644
--- a/packages/web/examples/todomvc/todoitem.rs
+++ b/packages/web/examples/todomvc/todoitem.rs
@@ -1,11 +1,10 @@
 use super::state::TODOS;
 use crate::recoil::use_atom_family;
 use dioxus_core::prelude::*;
-use uuid::Uuid;
 
 #[derive(PartialEq, Props)]
 pub struct TodoEntryProps {
-    id: Uuid,
+    id: uuid::Uuid,
 }
 
 pub fn TodoEntry(ctx: Context, props: &TodoEntryProps) -> DomTree {
@@ -20,17 +19,11 @@ pub fn TodoEntry(ctx: Context, props: &TodoEntryProps) -> DomTree {
                 type: "checkbox"
                 "{todo.checked}"
             }
-            {is_editing.then(|| {
-                rsx!(input {
+            {is_editing.then(|| rsx!(
+                input {
                     value: "{contents}"
-                })
-            })}
+                }
+            ))}
         }
     ))
 }
-
-pub fn Example(ctx: Context, id: Uuid, name: String) -> DomTree {
-    ctx.render(rsx! {
-        div {}
-    })
-}
diff --git a/packages/web/examples/todomvc/todolist.rs b/packages/web/examples/todomvc/todolist.rs
index 1164ca363..96841d85c 100644
--- a/packages/web/examples/todomvc/todolist.rs
+++ b/packages/web/examples/todomvc/todolist.rs
@@ -1,20 +1,20 @@
 use super::state::{FilterState, TodoItem, FILTER, TODOS};
-use crate::filtertoggles::FilterToggles;
+use crate::filtertoggles;
 use crate::recoil::use_atom;
 use crate::todoitem::TodoEntry;
 use dioxus_core::prelude::*;
 
 pub fn TodoList(ctx: Context, props: &()) -> DomTree {
-    let (entry, set_entry) = use_state(&ctx, || "".to_string());
-    let todos: &Vec<TodoItem> = todo!();
+    let (draft, set_draft) = use_state(&ctx, || "".to_string());
+    let (todos, _) = use_state(&ctx, || Vec::<TodoItem>::new());
     let filter = use_atom(&ctx, &FILTER);
 
     let list = todos
         .iter()
-        .filter(|f| match filter {
+        .filter(|item| match filter {
             FilterState::All => true,
-            FilterState::Active => !f.checked,
-            FilterState::Completed => f.checked,
+            FilterState::Active => !item.checked,
+            FilterState::Completed => item.checked,
         })
         .map(|item| {
             rsx!(TodoEntry {
@@ -25,25 +25,23 @@ pub fn TodoList(ctx: Context, props: &()) -> DomTree {
 
     ctx.render(rsx! {
         div {
-            // header
             header {
                 class: "header"
                 h1 {"todos"}
                 input {
                     class: "new-todo"
                     placeholder: "What needs to be done?"
-                    value: "{entry}"
-                    oninput: move |evt| set_entry(evt.value)
+                    value: "{draft}"
+                    oninput: move |evt| set_draft(evt.value)
                 }
             }
 
-            // list
             {list}
 
             // filter toggle (show only if the list isn't empty)
             {(!todos.is_empty()).then(||
-                rsx!{ FilterToggles {}
-            })}
+                rsx!( filtertoggles::FilterToggles {})
+            )}
         }
     })
 }
diff --git a/packages/web/src/interpreter.rs b/packages/web/src/interpreter.rs
index 429a6bebe..ae71b38d6 100644
--- a/packages/web/src/interpreter.rs
+++ b/packages/web/src/interpreter.rs
@@ -97,7 +97,12 @@ impl EventDelegater {
 
                 if let (Some(gi_id), Some(gi_gen), Some(li_idx)) = (gi_id, gi_gen, li_idx) {
                     // Call the trigger
-                    log::debug!("decoded gi_id: {},  gi_gen: {},  li_idx: {}", gi_id,gi_gen,li_idx);
+                    log::debug!(
+                        "decoded gi_id: {},  gi_gen: {},  li_idx: {}",
+                        gi_id,
+                        gi_gen,
+                        li_idx
+                    );
 
                     let triggered_scope = ScopeIdx::from_raw_parts(gi_id, gi_gen);
                     trigger.0.as_ref()(EventTrigger::new(
@@ -514,6 +519,33 @@ impl PatchMachine {
 fn virtual_event_from_websys_event(event: &web_sys::Event) -> VirtualEvent {
     use dioxus_core::events::on::*;
     match event.type_().as_str() {
+        "copy" | "cut" | "paste" => {
+            // let evt: web_sys::ClipboardEvent = event.clone().dyn_into().unwrap();
+
+            todo!()
+        }
+
+        "compositionend" | "compositionstart" | "compositionupdate" => {
+            let evt: web_sys::CompositionEvent = event.clone().dyn_into().unwrap();
+            todo!()
+        }
+
+        "keydown" | "keypress" | "keyup" => {
+            let evt: web_sys::KeyboardEvent = event.clone().dyn_into().unwrap();
+            todo!()
+        }
+
+        "focus" | "blur" => {
+            let evt: web_sys::FocusEvent = event.clone().dyn_into().unwrap();
+            todo!()
+        }
+
+        "change" | "input" | "invalid" | "reset" | "submit" => {
+            // is a special react events
+            // let evt: web_sys::FormEvent = event.clone().dyn_into().unwrap();
+            todo!()
+        }
+
         "click" | "contextmenu" | "doubleclick" | "drag" | "dragend" | "dragenter" | "dragexit"
         | "dragleave" | "dragover" | "dragstart" | "drop" | "mousedown" | "mouseenter"
         | "mouseleave" | "mousemove" | "mouseout" | "mouseover" | "mouseup" => {
@@ -537,6 +569,61 @@ fn virtual_event_from_websys_event(event: &web_sys::Event) -> VirtualEvent {
                 })),
             })))
         }
+
+        "pointerdown" | "pointermove" | "pointerup" | "pointercancel" | "gotpointercapture"
+        | "lostpointercapture" | "pointerenter" | "pointerleave" | "pointerover" | "pointerout" => {
+            let evt: web_sys::PointerEvent = event.clone().dyn_into().unwrap();
+            todo!()
+        }
+
+        "select" => {
+            // let evt: web_sys::SelectionEvent = event.clone().dyn_into().unwrap();
+            // not required to construct anything special beyond standard event stuff
+            todo!()
+        }
+
+        "touchcancel" | "touchend" | "touchmove" | "touchstart" => {
+            let evt: web_sys::TouchEvent = event.clone().dyn_into().unwrap();
+            todo!()
+        }
+
+        "scroll" => {
+            // let evt: web_sys::UIEvent = event.clone().dyn_into().unwrap();
+            todo!()
+        }
+
+        "wheel" => {
+            let evt: web_sys::WheelEvent = event.clone().dyn_into().unwrap();
+            todo!()
+        }
+
+        "abort" | "canplay" | "canplaythrough" | "durationchange" | "emptied" | "encrypted"
+        | "ended" | "error" | "loadeddata" | "loadedmetadata" | "loadstart" | "pause" | "play"
+        | "playing" | "progress" | "ratechange" | "seeked" | "seeking" | "stalled" | "suspend"
+        | "timeupdate" | "volumechange" | "waiting" => {
+            // not required to construct anything special beyond standard event stuff
+
+            // let evt: web_sys::MediaEvent = event.clone().dyn_into().unwrap();
+            // let evt: web_sys::MediaEvent = event.clone().dyn_into().unwrap();
+            todo!()
+        }
+
+        "animationstart" | "animationend" | "animationiteration" => {
+            let evt: web_sys::AnimationEvent = event.clone().dyn_into().unwrap();
+            todo!()
+        }
+
+        "transitionend" => {
+            let evt: web_sys::TransitionEvent = event.clone().dyn_into().unwrap();
+            todo!()
+        }
+
+        "toggle" => {
+            // not required to construct anything special beyond standard event stuff (target)
+
+            // let evt: web_sys::ToggleEvent = event.clone().dyn_into().unwrap();
+            todo!()
+        }
         _ => VirtualEvent::OtherEvent,
     }
 }
diff --git a/packages/web/src/lib.rs b/packages/web/src/lib.rs
index 22d0106b1..5e74f2499 100644
--- a/packages/web/src/lib.rs
+++ b/packages/web/src/lib.rs
@@ -11,6 +11,7 @@ pub use dioxus_core as dioxus;
 use dioxus_core::{events::EventTrigger, prelude::FC};
 // use futures::{channel::mpsc, SinkExt, StreamExt};
 
+pub use dioxus_core::prelude;
 pub mod interpreter;
 
 /// The `WebsysRenderer` provides a way of rendering a Dioxus Virtual DOM to the browser's DOM.