wip: todos

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,

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

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

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())}
         }
     })
 };

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

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 {

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>);
+}

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() {}

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 {}
-    })
-}

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 {})
+            )}
         }
     })
 }

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,
     }
 }

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.