Upgrade to Yew 0.21 (#38)

* feat: migrate to yew 0.21

* chore: ignore intellij files

.gitignore

@@ -9,4 +9,5 @@ Cargo.lock
 # These are backup files generated by rustfmt
 **/*.rs.bk
 
-/.vscode/
+/.vscode/
+/.idea/

Cargo.toml

@@ -1,4 +1,5 @@
 [workspace]
+resolver = "2"
 members = [
     "crates/*",
     "examples/*",

crates/yew-hooks-test/Cargo.toml

@@ -15,4 +15,4 @@ documentation = "https://github.com/jetli/yew-hooks"
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
 [dependencies]
-yew = { version = "0.20.0", features=["csr"]}
+yew = { version = "0.21.0", features=["csr"]}

crates/yew-hooks/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "yew-hooks"
-version = "0.2.0"
+version = "0.3.0"
 edition = "2021"
 authors = ["Jet Li <jing.i.qin@icloud.com>"]
 categories = ["gui", "wasm", "web-programming"]
@@ -16,8 +16,8 @@ documentation = "https://docs.rs/yew-hooks/"
 
 [dependencies]
 log = "0.4"
-yew = { version = "0.20.0", features=["csr"] }
-gloo = "0.8"
+yew = { version = "0.21.0", features=["csr"] }
+gloo = "0.10"
 wasm-bindgen = "0.2"
 wasm-bindgen-futures = "0.4"
 serde = "1"

crates/yew-hooks/src/hooks/use_clipboard.rs

@@ -127,27 +127,21 @@ pub fn use_clipboard() -> UseClipboardHandle {
     let text = use_state_ptr_eq(|| None);
     let bytes = use_state_ptr_eq(|| None);
     let bytes_mime_type = use_state_ptr_eq(|| None);
-    let is_supported = use_memo(
-        |_| {
-            window()
-                .expect_throw("Can't find the global Window")
-                .navigator()
-                .clipboard()
-                .is_some()
-        },
-        (),
-    );
+    let is_supported = use_memo((), |_| {
+        window()
+            .expect_throw("Can't find the global Window")
+            .navigator()
+            .clipboard()
+            .is_some()
+    });
     let copied = use_state_ptr_eq(|| false);
 
-    let clipboard = use_memo(
-        |_| {
-            window()
-                .expect_throw("Can't find the global Window")
-                .navigator()
-                .clipboard()
-        },
-        (),
-    );
+    let clipboard = use_memo((), |_| {
+        window()
+            .expect_throw("Can't find the global Window")
+            .navigator()
+            .clipboard()
+    });
 
     let write_text = {
         let clipboard = clipboard.clone();

crates/yew-hooks/src/hooks/use_debounce_effect.rs

@@ -96,14 +96,11 @@ pub fn use_debounce_effect_with_deps<Callback, Dependents>(
 
     {
         let debounce = debounce.clone();
-        use_effect_with_deps(
-            move |_| {
-                debounce.run();
+        use_effect_with(deps, move |_| {
+            debounce.run();
 
-                || ()
-            },
-            deps,
-        );
+            || ()
+        });
     }
 
     use_unmount(move || {

crates/yew-hooks/src/hooks/use_default.rs

@@ -90,7 +90,7 @@ where
     F: FnOnce() -> Option<T>,
 {
     let inner = use_state(init_fn);
-    let default = use_memo(|_| default, ());
+    let default = use_memo((), |_| default);
 
     UseDefaultHandle { inner, default }
 }

crates/yew-hooks/src/hooks/use_drag.rs

@@ -117,16 +117,13 @@ pub fn use_drag_with_options(node: NodeRef, options: UseDragOptions) -> UseDragH
         });
     }
 
-    use_effect_with_deps(
-        move |node| {
-            if let Some(element) = &node.cast::<Element>() {
-                let _ = element.set_attribute("draggable", "true");
-            }
+    use_effect_with(node, move |node| {
+        if let Some(element) = &node.cast::<Element>() {
+            let _ = element.set_attribute("draggable", "true");
+        }
 
-            || ()
-        },
-        node,
-    );
+        || ()
+    });
 
     UseDragHandle { dragging }
 }

crates/yew-hooks/src/hooks/use_effect_once.rs

@@ -30,5 +30,5 @@ where
     Callback: FnOnce() -> Destructor + 'static,
     Destructor: FnOnce() + 'static,
 {
-    use_effect_with_deps(move |_| callback(), ());
+    use_effect_with((), move |_| callback());
 }

crates/yew-hooks/src/hooks/use_effect_update.rs

@@ -57,14 +57,11 @@ pub fn use_effect_update_with_deps<Callback, Destructor, Dependents>(
 {
     let first = use_is_first_mount();
 
-    use_effect_with_deps(
-        move |deps| {
-            if first {
-                Box::new(|| ()) as Box<dyn FnOnce()>
-            } else {
-                Box::new(callback(deps))
-            }
-        },
-        deps,
-    );
+    use_effect_with(deps, move |deps| {
+        if first {
+            Box::new(|| ()) as Box<dyn FnOnce()>
+        } else {
+            Box::new(callback(deps))
+        }
+    });
 }

crates/yew-hooks/src/hooks/use_event.rs

@@ -41,19 +41,16 @@ where
 {
     let callback = use_latest(callback);
 
-    use_effect_with_deps(
-        move |(node, event_type)| {
-            let window = window();
-            let node = node.get();
-            // If we cannot get the wrapped `Node`, then we use `Window` as the default target of the event.
-            let target = node.as_deref().map_or(&*window, |t| t);
+    use_effect_with((node, event_type.into()), move |(node, event_type)| {
+        let window = window();
+        let node = node.get();
+        // If we cannot get the wrapped `Node`, then we use `Window` as the default target of the event.
+        let target = node.as_deref().map_or(&*window, |t| t);
 
-            // We should only set passive event listeners for `touchstart` and `touchmove`.
-            // See here: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Improving_scrolling_performance_with_passive_listeners
-            let listener = if event_type == "touchstart"
-                || event_type == "touchmove"
-                || event_type == "scroll"
-            {
+        // We should only set passive event listeners for `touchstart` and `touchmove`.
+        // See here: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Improving_scrolling_performance_with_passive_listeners
+        let listener =
+            if event_type == "touchstart" || event_type == "touchmove" || event_type == "scroll" {
                 Some(EventListener::new(
                     target,
                     event_type.clone(),
@@ -72,10 +69,8 @@ where
                 ))
             };
 
-            move || drop(listener)
-        },
-        (node, event_type.into()),
-    );
+        move || drop(listener)
+    });
 }
 
 /// A hook that subscribes a callback to events only for window.

crates/yew-hooks/src/hooks/use_favicon.rs

@@ -25,30 +25,27 @@ use yew::prelude::*;
 /// ```
 #[hook]
 pub fn use_favicon(href: String) {
-    use_effect_with_deps(
-        move |href| {
-            let link = {
-                if let Ok(Some(link)) = document().query_selector("link[rel*='icon']") {
-                    link
-                } else {
-                    document().create_element("link").unwrap_throw()
-                }
+    use_effect_with(href, move |href| {
+        let link = {
+            if let Ok(Some(link)) = document().query_selector("link[rel*='icon']") {
+                link
+            } else {
+                document().create_element("link").unwrap_throw()
             }
-            .dyn_into::<HtmlLinkElement>()
-            .unwrap_throw();
+        }
+        .dyn_into::<HtmlLinkElement>()
+        .unwrap_throw();
 
-            link.set_type("image/x-icon");
-            link.set_rel("shortcut icon");
-            link.set_href(href);
+        link.set_type("image/x-icon");
+        link.set_rel("shortcut icon");
+        link.set_href(href);
 
-            let head = document()
-                .get_elements_by_tag_name("head")
-                .item(0)
-                .unwrap_throw();
-            let _ = head.append_child(&link.dyn_into::<Node>().unwrap_throw());
+        let head = document()
+            .get_elements_by_tag_name("head")
+            .item(0)
+            .unwrap_throw();
+        let _ = head.append_child(&link.dyn_into::<Node>().unwrap_throw());
 
-            || ()
-        },
-        href,
-    );
+        || ()
+    });
 }

crates/yew-hooks/src/hooks/use_infinite_scroll.rs

@@ -47,17 +47,14 @@ where
 
     {
         let load_more = load_more.clone();
-        use_effect_with_deps(
-            move |load_more| {
-                if **load_more {
-                    let callback = &*callback_ref.current();
-                    callback();
-                }
+        use_effect_with(load_more, move |load_more| {
+            if **load_more {
+                let callback = &*callback_ref.current();
+                callback();
+            }
 
-                || ()
-            },
-            load_more,
-        );
+            || ()
+        });
     }
 
     let debounce = {

crates/yew-hooks/src/hooks/use_interval.rs

@@ -39,20 +39,17 @@ where
     let callback_ref = use_mut_latest(callback);
     let interval_ref = use_mut_ref(|| None);
 
-    use_effect_with_deps(
-        move |millis| {
-            if *millis > 0 {
-                *interval_ref.borrow_mut() = Some(Interval::new(*millis, move || {
-                    let callback_ref = callback_ref.current();
-                    let callback = &mut *callback_ref.borrow_mut();
-                    callback();
-                }));
-            } else {
-                *interval_ref.borrow_mut() = None;
-            }
+    use_effect_with(millis, move |millis| {
+        if *millis > 0 {
+            *interval_ref.borrow_mut() = Some(Interval::new(*millis, move || {
+                let callback_ref = callback_ref.current();
+                let callback = &mut *callback_ref.borrow_mut();
+                callback();
+            }));
+        } else {
+            *interval_ref.borrow_mut() = None;
+        }
 
-            move || *interval_ref.borrow_mut() = None
-        },
-        millis,
-    );
+        move || *interval_ref.borrow_mut() = None
+    });
 }

crates/yew-hooks/src/hooks/use_local_storage.rs

@@ -105,7 +105,7 @@ where
 {
     let inner: UseStateHandle<Option<T>> =
         use_state(|| LocalStorage::get(&key).unwrap_or_default());
-    let key = use_memo(|_| key, ());
+    let key = use_memo((), |_| key);
 
     {
         let key = key.clone();

crates/yew-hooks/src/hooks/use_measure.rs

@@ -59,37 +59,33 @@ pub fn use_measure(node: NodeRef) -> UseMeasureState {
 
     {
         let state = state.clone();
-        use_effect_with_deps(
-            move |node| {
-                let closure = Closure::wrap(Box::new(move |entries: Vec<ResizeObserverEntry>| {
-                    for entry in &entries {
-                        let rect = entry.content_rect();
-                        state.set(UseMeasureState {
-                            x: rect.x(),
-                            y: rect.y(),
-                            width: rect.width(),
-                            height: rect.height(),
-                            top: rect.top(),
-                            left: rect.left(),
-                            bottom: rect.bottom(),
-                            right: rect.right(),
-                        });
-                    }
-                })
-                    as Box<dyn Fn(Vec<ResizeObserverEntry>)>);
+        use_effect_with(node, move |node| {
+            let closure = Closure::wrap(Box::new(move |entries: Vec<ResizeObserverEntry>| {
+                for entry in &entries {
+                    let rect = entry.content_rect();
+                    state.set(UseMeasureState {
+                        x: rect.x(),
+                        y: rect.y(),
+                        width: rect.width(),
+                        height: rect.height(),
+                        top: rect.top(),
+                        left: rect.left(),
+                        bottom: rect.bottom(),
+                        right: rect.right(),
+                    });
+                }
+            }) as Box<dyn Fn(Vec<ResizeObserverEntry>)>);
 
-                let observer = ResizeObserver::new(closure.as_ref().unchecked_ref()).unwrap_throw();
-                // Forget the closure to keep it alive
-                closure.forget();
+            let observer = ResizeObserver::new(closure.as_ref().unchecked_ref()).unwrap_throw();
+            // Forget the closure to keep it alive
+            closure.forget();
 
-                if let Some(element) = &node.cast::<Element>() {
-                    observer.observe(element);
-                }
+            if let Some(element) = &node.cast::<Element>() {
+                observer.observe(element);
+            }
 
-                move || observer.disconnect()
-            },
-            node,
-        );
+            move || observer.disconnect()
+        });
     }
 
     (*state).clone()