polish: examples

packages/web/src/dom.rs

@@ -314,12 +314,20 @@ impl WebsysDom {
             }
         }
 
-        if let Some(node) = node.dyn_ref::<HtmlInputElement>() {
+        if let Some(input) = node.dyn_ref::<HtmlInputElement>() {
             if name == "value" {
-                node.set_value(value);
+                /*
+                if the attribute being set is the same as the value of the input, then don't bother setting it.
+                This is used in controlled components to keep the cursor in the right spot.
+
+                this logic should be moved into the virtualdom since we have the notion of "volatile"
+                */
+                if input.value() != value {
+                    input.set_value(value);
+                }
             }
             if name == "checked" {
-                node.set_checked(true);
+                input.set_checked(true);
             }
         }
 

packages/web/src/lib.rs

@@ -156,6 +156,7 @@ pub async fn run_with_props<T: Properties + 'static>(root: FC<T>, root_props: T,
         work_loop.wait_for_raf().await;
 
         for mut edit in mutations {
+            log::debug!("edits are {:#?}", edit);
             // actually apply our changes during the animation frame
             websys_dom.process_edits(&mut edit.edits);
         }

packages/web/src/ric_raf.rs

@@ -4,7 +4,7 @@ use gloo_timers::future::TimeoutFuture;
 use js_sys::Function;
 use wasm_bindgen::JsCast;
 use wasm_bindgen::{prelude::Closure, JsValue};
-use web_sys::Window;
+use web_sys::{window, Window};
 
 pub struct RafLoop {
     window: Window,
@@ -24,10 +24,21 @@ impl RafLoop {
 
         let (ric_sender, ric_receiver) = async_channel::unbounded();
 
-        let ric_closure: Closure<dyn Fn(JsValue)> = Closure::wrap(Box::new(move |_v: JsValue| {
-            //
-            let deadline = _v.dyn_into::<web_sys::IdleDeadline>().unwrap();
-            let time_remaining = deadline.time_remaining() as u32;
+        let has_idle_callback = {
+            let bo = window().unwrap().dyn_into::<js_sys::Object>().unwrap();
+            bo.has_own_property(&JsValue::from_str("requestIdleCallback"))
+        };
+        let ric_closure: Closure<dyn Fn(JsValue)> = Closure::wrap(Box::new(move |v: JsValue| {
+            let time_remaining = if has_idle_callback {
+                if let Ok(deadline) = v.dyn_into::<web_sys::IdleDeadline>() {
+                    deadline.time_remaining() as u32
+                } else {
+                    10
+                }
+            } else {
+                10
+            };
+
             ric_sender.try_send(time_remaining).unwrap()
         }));