wip: performance looks good, needs more testing

packages/web/Cargo.toml

@@ -62,6 +62,7 @@ features = [
     "SvgElement",
     "SvgAnimatedString",
     "HtmlOptionElement",
+    "IdleDeadline",
 ]
 
 [lib]

packages/web/examples/basic.rs

@@ -15,7 +15,7 @@ use std::{pin::Pin, time::Duration};
 
 fn main() {
     // Setup logging
-    wasm_logger::init(wasm_logger::Config::new(log::Level::Debug));
+    // wasm_logger::init(wasm_logger::Config::new(log::Level::Debug));
     console_error_panic_hook::set_once();
 
     // Run the app
@@ -25,26 +25,34 @@ fn main() {
 static APP: FC<()> = |cx, props| {
     let mut count = use_state(cx, || 3);
 
+    let mut content = use_state(cx, || String::new());
     cx.render(rsx! {
         div {
+            input {
+                value: "{content}"
+                oninput: move |e| {
+                    content.set(e.value());
+                }
+            }
             button {
                 onclick: move |_| count += 1,
                 "Click to add."
                 "Current count: {count}"
             }
+
             select {
-                name:"cars"
-                id:"cars"
+                name: "cars"
+                id: "cars"
+                value: "h1"
                 oninput: move |ev| {
                     match ev.value().as_str() {
                         "h1" => count.set(0),
                         "h2" => count.set(5),
                         "h3" => count.set(10),
-                        s => {
-                            log::debug!("real value is {}", s);
-                        }
+                        s => {}
                     }
                 },
+
                 option { value: "h1", "h1" }
                 option { value: "h2", "h2" }
                 option { value: "h3", "h3" }
@@ -56,18 +64,20 @@ static APP: FC<()> = |cx, props| {
                     li { "b - {f}" }
                     li { "c - {f}" }
                 })}
+
             }
+
+            {render_bullets(cx)}
+
             Child {}
         }
     })
 };
 
-static Child: FC<()> = |cx, props| {
-    cx.render(rsx! {
-        div {
-            div {
-                "hello child"
-            }
-        }
+fn render_bullets(cx: Context) -> DomTree {
+    rsx!(cx, div {
+        "bite me"
     })
-};
+}
+
+static Child: FC<()> = |cx, props| rsx!(cx, div {"hello child"});

packages/web/src/dom.rs

@@ -520,8 +520,6 @@ fn virtual_event_from_websys_event(event: web_sys::Event) -> SyntheticEvent {
 /// This function decodes a websys event and produces an EventTrigger
 /// With the websys implementation, we attach a unique key to the nodes
 fn decode_trigger(event: &web_sys::Event) -> anyhow::Result<UserEvent> {
-    log::debug!("Handling event!");
-
     let target = event
         .target()
         .expect("missing target")
@@ -535,7 +533,7 @@ fn decode_trigger(event: &web_sys::Event) -> anyhow::Result<UserEvent> {
     let attrs = target.attributes();
     for x in 0..attrs.length() {
         let attr: Attr = attrs.item(x).unwrap();
-        log::debug!("attrs include: {:#?}, {:#?}", attr.name(), attr.value());
+        // log::debug!("attrs include: {:#?}, {:#?}", attr.name(), attr.value());
     }
 
     use anyhow::Context;
@@ -558,11 +556,11 @@ fn decode_trigger(event: &web_sys::Event) -> anyhow::Result<UserEvent> {
         .context("failed to parse real id")?;
 
     // Call the trigger
-    log::debug!("decoded scope_id: {}, node_id: {:#?}", gi_id, real_id);
+    // log::debug!("decoded scope_id: {}, node_id: {:#?}", gi_id, real_id);
 
     let triggered_scope = gi_id;
     // let triggered_scope: ScopeId = KeyData::from_ffi(gi_id).into();
-    log::debug!("Triggered scope is {:#?}", triggered_scope);
+    // log::debug!("Triggered scope is {:#?}", triggered_scope);
     Ok(UserEvent {
         name: event_name_from_typ(&typ),
         event: virtual_event_from_websys_event(event.clone()),

packages/web/src/lib.rs

@@ -152,8 +152,6 @@ pub async fn run_with_props<T: Properties + 'static>(root: FC<T>, root_props: T,
         // run the virtualdom work phase until the frame deadline is reached
         let mutations = dom.run_with_deadline(|| (&mut deadline).now_or_never().is_some());
 
-        log::debug!("received mutations {:#?}", mutations);
-
         // wait for the animation frame to fire so we can apply our changes
         work_loop.wait_for_raf().await;
 

packages/web/src/ric_raf.rs

@@ -8,7 +8,7 @@ use web_sys::Window;
 
 pub struct RafLoop {
     window: Window,
-    ric_receiver: async_channel::Receiver<()>,
+    ric_receiver: async_channel::Receiver<u32>,
     raf_receiver: async_channel::Receiver<()>,
     ric_closure: Closure<dyn Fn(JsValue)>,
     raf_closure: Closure<dyn Fn(JsValue)>,
@@ -25,7 +25,10 @@ impl RafLoop {
         let (ric_sender, ric_receiver) = async_channel::unbounded();
 
         let ric_closure: Closure<dyn Fn(JsValue)> = Closure::wrap(Box::new(move |_v: JsValue| {
-            ric_sender.try_send(()).unwrap()
+            //
+            let deadline = _v.dyn_into::<web_sys::IdleDeadline>().unwrap();
+            let time_remaining = deadline.time_remaining() as u32;
+            ric_sender.try_send(time_remaining).unwrap()
         }));
 
         // execute the polyfill for safari
@@ -46,8 +49,8 @@ impl RafLoop {
     /// waits for some idle time and returns a timeout future that expires after the idle time has passed
     pub async fn wait_for_idle_time(&self) -> TimeoutFuture {
         let ric_fn = self.ric_closure.as_ref().dyn_ref::<Function>().unwrap();
-        let deadline: u32 = self.window.request_idle_callback(ric_fn).unwrap();
-        self.ric_receiver.recv().await.unwrap();
+        let _cb_id: u32 = self.window.request_idle_callback(ric_fn).unwrap();
+        let deadline = self.ric_receiver.recv().await.unwrap();
         let deadline = TimeoutFuture::new(deadline);
         deadline
     }