mirror of
https://github.com/DioxusLabs/dioxus
synced 2024-11-10 06:34:20 +00:00
switch to use_reactive
This commit is contained in:
parent
b8c41efb54
commit
df41df75d0
8 changed files with 138 additions and 112 deletions
|
@ -69,6 +69,9 @@ pub use use_coroutine::*;
|
||||||
mod use_future;
|
mod use_future;
|
||||||
pub use use_future::*;
|
pub use use_future::*;
|
||||||
|
|
||||||
|
mod use_reactive;
|
||||||
|
pub use use_reactive::*;
|
||||||
|
|
||||||
// mod use_sorted;
|
// mod use_sorted;
|
||||||
// pub use use_sorted::*;
|
// pub use use_sorted::*;
|
||||||
|
|
||||||
|
|
|
@ -2,8 +2,7 @@ use dioxus_core::prelude::*;
|
||||||
use dioxus_signals::ReactiveContext;
|
use dioxus_signals::ReactiveContext;
|
||||||
use futures_util::StreamExt;
|
use futures_util::StreamExt;
|
||||||
|
|
||||||
use crate::use_signal;
|
use crate::use_callback;
|
||||||
use dioxus_signals::*;
|
|
||||||
|
|
||||||
/// `use_effect` will subscribe to any changes in the signal values it captures
|
/// `use_effect` will subscribe to any changes in the signal values it captures
|
||||||
/// effects will always run after first mount and then whenever the signal values change
|
/// effects will always run after first mount and then whenever the signal values change
|
||||||
|
@ -22,11 +21,31 @@ use dioxus_signals::*;
|
||||||
/// }
|
/// }
|
||||||
/// }
|
/// }
|
||||||
/// ```
|
/// ```
|
||||||
|
///
|
||||||
|
/// ## With non-reactive dependencies
|
||||||
|
/// To add non-reactive dependencies, you can use the `use_reactive` hook.
|
||||||
|
///
|
||||||
|
/// Signals will automatically be added as dependencies, so you don't need to call this method for them.
|
||||||
|
///
|
||||||
|
/// ```rust
|
||||||
|
/// # use dioxus::prelude::*;
|
||||||
|
/// # async fn sleep(delay: u32) {}
|
||||||
|
///
|
||||||
|
/// #[component]
|
||||||
|
/// fn Comp(count: u32) -> Element {
|
||||||
|
/// // Because the memo subscribes to `count` by adding it as a dependency, the memo will rerun every time `count` changes.
|
||||||
|
/// use_effect(use_reactive((&count, |(count,)| println!("Manually manipulate the dom") )));
|
||||||
|
///
|
||||||
|
/// todo!()
|
||||||
|
/// }
|
||||||
|
/// ```
|
||||||
#[track_caller]
|
#[track_caller]
|
||||||
pub fn use_effect(mut callback: impl FnMut() + 'static) -> Effect {
|
pub fn use_effect(callback: impl FnMut() + 'static) -> Effect {
|
||||||
// let mut run_effect = use_hook(|| CopyValue::new(true));
|
// let mut run_effect = use_hook(|| CopyValue::new(true));
|
||||||
// use_hook_did_run(move |did_run| run_effect.set(did_run));
|
// use_hook_did_run(move |did_run| run_effect.set(did_run));
|
||||||
|
|
||||||
|
let callback = use_callback(callback);
|
||||||
|
|
||||||
let location = std::panic::Location::caller();
|
let location = std::panic::Location::caller();
|
||||||
|
|
||||||
use_hook(|| {
|
use_hook(|| {
|
||||||
|
@ -34,7 +53,7 @@ pub fn use_effect(mut callback: impl FnMut() + 'static) -> Effect {
|
||||||
spawn(async move {
|
spawn(async move {
|
||||||
loop {
|
loop {
|
||||||
// Run the effect
|
// Run the effect
|
||||||
rc.run_in(&mut callback);
|
rc.run_in(&*callback);
|
||||||
|
|
||||||
// Wait for context to change
|
// Wait for context to change
|
||||||
let _ = changed.next().await;
|
let _ = changed.next().await;
|
||||||
|
@ -54,37 +73,6 @@ pub struct Effect {
|
||||||
}
|
}
|
||||||
|
|
||||||
impl Effect {
|
impl Effect {
|
||||||
/// Adds an explicit dependency to the effect. If the dependency changes, the effect's closure will rerun.
|
|
||||||
///
|
|
||||||
/// Signals will automatically be added as dependencies, so you don't need to call this method for them.
|
|
||||||
///
|
|
||||||
/// NOTE: You must follow the rules of hooks when calling this method.
|
|
||||||
///
|
|
||||||
/// ```rust
|
|
||||||
/// # use dioxus::prelude::*;
|
|
||||||
/// # async fn sleep(delay: u32) {}
|
|
||||||
///
|
|
||||||
/// #[component]
|
|
||||||
/// fn Comp(delay: u32) -> Element {
|
|
||||||
/// // Because the effect subscribes to `delay` by adding it as a dependency, the effect's closure will rerun every time `delay` changes.
|
|
||||||
/// use_effect(move || {
|
|
||||||
/// println!("It is safe to manually manipulate the dom here");
|
|
||||||
/// })
|
|
||||||
/// .use_dependencies((&delay,));
|
|
||||||
///
|
|
||||||
/// todo!()
|
|
||||||
/// }
|
|
||||||
/// ```
|
|
||||||
pub fn use_dependencies(mut self, dependency: impl Dependency) -> Self {
|
|
||||||
let mut dependencies_signal = use_signal(|| dependency.out());
|
|
||||||
let changed = { dependency.changed(&*dependencies_signal.read()) };
|
|
||||||
if changed {
|
|
||||||
dependencies_signal.set(dependency.out());
|
|
||||||
self.mark_dirty();
|
|
||||||
}
|
|
||||||
self
|
|
||||||
}
|
|
||||||
|
|
||||||
/// Marks the effect as dirty, causing it to rerun on the next render.
|
/// Marks the effect as dirty, causing it to rerun on the next render.
|
||||||
pub fn mark_dirty(&mut self) {
|
pub fn mark_dirty(&mut self) {
|
||||||
self.rc.mark_dirty();
|
self.rc.mark_dirty();
|
||||||
|
|
|
@ -19,6 +19,24 @@ use dioxus_signals::{Memo, Signal};
|
||||||
/// rsx! { "{double}" }
|
/// rsx! { "{double}" }
|
||||||
/// }
|
/// }
|
||||||
/// ```
|
/// ```
|
||||||
|
///
|
||||||
|
/// ## With non-reactive dependencies
|
||||||
|
/// To add non-reactive dependencies, you can use the `use_reactive` hook.
|
||||||
|
///
|
||||||
|
/// Signals will automatically be added as dependencies, so you don't need to call this method for them.
|
||||||
|
///
|
||||||
|
/// ```rust
|
||||||
|
/// # use dioxus::prelude::*;
|
||||||
|
/// # async fn sleep(delay: u32) {}
|
||||||
|
///
|
||||||
|
/// #[component]
|
||||||
|
/// fn Comp(count: u32) -> Element {
|
||||||
|
/// // Because the memo subscribes to `count` by adding it as a dependency, the memo will rerun every time `count` changes.
|
||||||
|
/// let new_count = use_memo(use_reactive((&count, |(count,)| count + 1)));
|
||||||
|
///
|
||||||
|
/// todo!()
|
||||||
|
/// }
|
||||||
|
/// ```
|
||||||
#[track_caller]
|
#[track_caller]
|
||||||
pub fn use_memo<R: PartialEq>(f: impl FnMut() -> R + 'static) -> Memo<R> {
|
pub fn use_memo<R: PartialEq>(f: impl FnMut() -> R + 'static) -> Memo<R> {
|
||||||
let callback = use_callback(f);
|
let callback = use_callback(f);
|
||||||
|
|
|
@ -1,3 +1,7 @@
|
||||||
|
use dioxus_signals::{Readable, Writable};
|
||||||
|
|
||||||
|
use crate::use_signal;
|
||||||
|
|
||||||
/// A dependency is a trait that can be used to determine if a effect or selector should be re-run.
|
/// A dependency is a trait that can be used to determine if a effect or selector should be re-run.
|
||||||
pub trait Dependency: Sized + Clone {
|
pub trait Dependency: Sized + Clone {
|
||||||
/// The output of the dependency
|
/// The output of the dependency
|
||||||
|
@ -65,3 +69,57 @@ impl_dep!(A = a1 a2, B = b1 b2, C = c1 c2, D = d1 d2, E = e1 e2,);
|
||||||
impl_dep!(A = a1 a2, B = b1 b2, C = c1 c2, D = d1 d2, E = e1 e2, F = f1 f2,);
|
impl_dep!(A = a1 a2, B = b1 b2, C = c1 c2, D = d1 d2, E = e1 e2, F = f1 f2,);
|
||||||
impl_dep!(A = a1 a2, B = b1 b2, C = c1 c2, D = d1 d2, E = e1 e2, F = f1 f2, G = g1 g2,);
|
impl_dep!(A = a1 a2, B = b1 b2, C = c1 c2, D = d1 d2, E = e1 e2, F = f1 f2, G = g1 g2,);
|
||||||
impl_dep!(A = a1 a2, B = b1 b2, C = c1 c2, D = d1 d2, E = e1 e2, F = f1 f2, G = g1 g2, H = h1 h2,);
|
impl_dep!(A = a1 a2, B = b1 b2, C = c1 c2, D = d1 d2, E = e1 e2, F = f1 f2, G = g1 g2, H = h1 h2,);
|
||||||
|
|
||||||
|
/// Takes some non-reactive data, and a closure and returns a closure that will subscribe to that non-reactive data as if it were reactive.
|
||||||
|
///
|
||||||
|
/// # Example
|
||||||
|
///
|
||||||
|
/// ```rust
|
||||||
|
/// use dioxus::prelude::*;
|
||||||
|
///
|
||||||
|
/// let data = 5;
|
||||||
|
///
|
||||||
|
/// use_effect(use_reactive((&data,), |(data,)| {
|
||||||
|
/// println!("Data changed: {}", data);
|
||||||
|
/// }));
|
||||||
|
/// ```
|
||||||
|
pub fn use_reactive<O, D: Dependency>(
|
||||||
|
non_reactive_data: D,
|
||||||
|
mut closure: impl FnMut(D::Out) -> O + 'static,
|
||||||
|
) -> impl FnMut() -> O + 'static {
|
||||||
|
let mut first_run = false;
|
||||||
|
let mut last_state = use_signal(|| {
|
||||||
|
first_run = true;
|
||||||
|
non_reactive_data.out()
|
||||||
|
});
|
||||||
|
if !first_run && non_reactive_data.changed(&*last_state.peek()) {
|
||||||
|
last_state.set(non_reactive_data.out());
|
||||||
|
}
|
||||||
|
move || closure(last_state())
|
||||||
|
}
|
||||||
|
|
||||||
|
/// A helper macro for `use_reactive` that merges uses the closure syntax to elaborate the dependency array
|
||||||
|
///
|
||||||
|
/// Takes some non-reactive data, and a closure and returns a closure that will subscribe to that non-reactive data as if it were reactive.
|
||||||
|
///
|
||||||
|
/// # Example
|
||||||
|
///
|
||||||
|
/// ```rust
|
||||||
|
/// use dioxus::prelude::*;
|
||||||
|
///
|
||||||
|
/// let data = 5;
|
||||||
|
///
|
||||||
|
/// use_effect(use_reactive!(|data| {
|
||||||
|
/// println!("Data changed: {}", data);
|
||||||
|
/// }));
|
||||||
|
/// ```
|
||||||
|
#[macro_export]
|
||||||
|
macro_rules! use_reactive {
|
||||||
|
(|| $($rest:tt)*) => { use_reactive( (), move |_| $($rest)* ) };
|
||||||
|
(| $($args:tt),* | $($rest:tt)*) => {
|
||||||
|
use_reactive(
|
||||||
|
($(&$args),*),
|
||||||
|
move |($($args),*)| $($rest)*
|
||||||
|
)
|
||||||
|
};
|
||||||
|
}
|
|
@ -51,8 +51,26 @@ use std::{cell::Cell, future::Future, rc::Rc};
|
||||||
/// }
|
/// }
|
||||||
///}
|
///}
|
||||||
/// ```
|
/// ```
|
||||||
|
///
|
||||||
|
/// ## With non-reactive dependencies
|
||||||
|
/// To add non-reactive dependencies, you can use the `use_reactive` hook.
|
||||||
|
///
|
||||||
|
/// Signals will automatically be added as dependencies, so you don't need to call this method for them.
|
||||||
|
///
|
||||||
|
/// ```rust
|
||||||
|
/// # use dioxus::prelude::*;
|
||||||
|
/// # async fn sleep(delay: u32) {}
|
||||||
|
///
|
||||||
|
/// #[component]
|
||||||
|
/// fn Comp(count: u32) -> Element {
|
||||||
|
/// // Because the memo subscribes to `count` by adding it as a dependency, the memo will rerun every time `count` changes.
|
||||||
|
/// let new_count = use_resource(use_reactive((&count, |(count,)| async move {count + 1} )));
|
||||||
|
///
|
||||||
|
/// todo!()
|
||||||
|
/// }
|
||||||
|
/// ```
|
||||||
#[must_use = "Consider using `cx.spawn` to run a future without reading its value"]
|
#[must_use = "Consider using `cx.spawn` to run a future without reading its value"]
|
||||||
pub fn use_resource<T, F>(future: impl Fn() -> F + 'static) -> Resource<T>
|
pub fn use_resource<T, F>(mut future: impl FnMut() -> F + 'static) -> Resource<T>
|
||||||
where
|
where
|
||||||
T: 'static,
|
T: 'static,
|
||||||
F: Future<Output = T> + 'static,
|
F: Future<Output = T> + 'static,
|
||||||
|
@ -66,10 +84,9 @@ where
|
||||||
|
|
||||||
let cb = use_callback(move || {
|
let cb = use_callback(move || {
|
||||||
// Create the user's task
|
// Create the user's task
|
||||||
#[allow(clippy::redundant_closure)]
|
let fut = rc.run_in(&mut future);
|
||||||
let fut = rc.run_in(|| future());
|
|
||||||
|
|
||||||
// Spawn a wrapper task that polls the innner future and watch its dependencies
|
// Spawn a wrapper task that polls the inner future and watch its dependencies
|
||||||
spawn(async move {
|
spawn(async move {
|
||||||
// move the future here and pin it so we can poll it
|
// move the future here and pin it so we can poll it
|
||||||
let fut = fut;
|
let fut = fut;
|
||||||
|
@ -144,38 +161,6 @@ pub enum UseResourceState {
|
||||||
}
|
}
|
||||||
|
|
||||||
impl<T> Resource<T> {
|
impl<T> Resource<T> {
|
||||||
/// Adds an explicit dependency to the resource. If the dependency changes, the resource's future will rerun.
|
|
||||||
///
|
|
||||||
/// Signals will automatically be added as dependencies, so you don't need to call this method for them.
|
|
||||||
///
|
|
||||||
/// NOTE: You must follow the rules of hooks when calling this method.
|
|
||||||
///
|
|
||||||
/// ```rust
|
|
||||||
/// # use dioxus::prelude::*;
|
|
||||||
/// # async fn sleep(delay: u32) {}
|
|
||||||
///
|
|
||||||
/// #[component]
|
|
||||||
/// fn Comp(delay: u32) -> Element {
|
|
||||||
/// // Because the resource subscribes to `delay` by adding it as a dependency, the resource's future will rerun every time `delay` changes.
|
|
||||||
/// let current_weather = use_resource(move || async move {
|
|
||||||
/// sleep(delay).await;
|
|
||||||
/// "Sunny"
|
|
||||||
/// })
|
|
||||||
/// .use_dependencies((&delay,));
|
|
||||||
///
|
|
||||||
/// todo!()
|
|
||||||
/// }
|
|
||||||
/// ```
|
|
||||||
pub fn use_dependencies(mut self, dependency: impl Dependency) -> Self {
|
|
||||||
let mut dependencies_signal = use_signal(|| dependency.out());
|
|
||||||
let changed = { dependency.changed(&*dependencies_signal.read()) };
|
|
||||||
if changed {
|
|
||||||
dependencies_signal.set(dependency.out());
|
|
||||||
self.restart();
|
|
||||||
}
|
|
||||||
self
|
|
||||||
}
|
|
||||||
|
|
||||||
/// Restart the resource's future.
|
/// Restart the resource's future.
|
||||||
///
|
///
|
||||||
/// Will not cancel the previous future, but will ignore any values that it
|
/// Will not cancel the previous future, but will ignore any values that it
|
||||||
|
|
|
@ -26,9 +26,18 @@ fn app() -> Element {
|
||||||
fn Child(non_reactive_prop: i32) -> Element {
|
fn Child(non_reactive_prop: i32) -> Element {
|
||||||
let mut signal = use_signal(|| 0);
|
let mut signal = use_signal(|| 0);
|
||||||
|
|
||||||
// You can manually specify the dependencies with `use_dependencies` for values that are not reactive like props
|
// You can manually specify the dependencies with `use_reactive` for values that are not reactive like props
|
||||||
let computed =
|
let computed = use_memo(use_reactive!(
|
||||||
use_memo(move || non_reactive_prop + signal()).use_dependencies((&non_reactive_prop,));
|
|(non_reactive_prop,)| non_reactive_prop + signal()
|
||||||
|
));
|
||||||
|
use_effect(use_reactive!(|(non_reactive_prop,)| println!(
|
||||||
|
"{}",
|
||||||
|
non_reactive_prop + signal()
|
||||||
|
)));
|
||||||
|
let fut = use_resource(use_reactive!(|(non_reactive_prop,)| async move {
|
||||||
|
tokio::time::sleep(std::time::Duration::from_secs(1)).await;
|
||||||
|
non_reactive_prop + signal()
|
||||||
|
}));
|
||||||
|
|
||||||
rsx! {
|
rsx! {
|
||||||
button {
|
button {
|
||||||
|
@ -37,5 +46,7 @@ fn Child(non_reactive_prop: i32) -> Element {
|
||||||
}
|
}
|
||||||
|
|
||||||
"Sum: {computed}"
|
"Sum: {computed}"
|
||||||
|
|
||||||
|
"{fut():?}"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -19,9 +19,6 @@ pub use map::*;
|
||||||
// mod comparer;
|
// mod comparer;
|
||||||
// pub use comparer::*;
|
// pub use comparer::*;
|
||||||
|
|
||||||
mod dependency;
|
|
||||||
pub use dependency::*;
|
|
||||||
|
|
||||||
mod memo;
|
mod memo;
|
||||||
pub use memo::*;
|
pub use memo::*;
|
||||||
|
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
use crate::write::Writable;
|
use crate::write::Writable;
|
||||||
use crate::{read::Readable, ReactiveContext, ReadableRef, Signal};
|
use crate::{read::Readable, ReactiveContext, ReadableRef, Signal};
|
||||||
use crate::{CopyValue, Dependency, ReadOnlySignal};
|
use crate::{CopyValue, ReadOnlySignal};
|
||||||
use std::rc::Rc;
|
use std::rc::Rc;
|
||||||
use std::{
|
use std::{
|
||||||
cell::RefCell,
|
cell::RefCell,
|
||||||
|
@ -115,40 +115,6 @@ impl<T: 'static> Memo<T> {
|
||||||
pub fn id(&self) -> generational_box::GenerationalBoxId {
|
pub fn id(&self) -> generational_box::GenerationalBoxId {
|
||||||
self.inner.id()
|
self.inner.id()
|
||||||
}
|
}
|
||||||
|
|
||||||
/// Adds an explicit dependency to the memo. If the dependency changes, the memo will rerun.
|
|
||||||
///
|
|
||||||
/// Signals will automatically be added as dependencies, so you don't need to call this method for them.
|
|
||||||
///
|
|
||||||
/// NOTE: You must follow the rules of hooks when calling this method.
|
|
||||||
///
|
|
||||||
/// ```rust
|
|
||||||
/// # use dioxus::prelude::*;
|
|
||||||
/// # async fn sleep(delay: u32) {}
|
|
||||||
///
|
|
||||||
/// #[component]
|
|
||||||
/// fn Comp(count: u32) -> Element {
|
|
||||||
/// // Because the memo subscribes to `count` by adding it as a dependency, the memo will rerun every time `count` changes.
|
|
||||||
/// let new_count = use_memo(move || {
|
|
||||||
/// count + 1
|
|
||||||
/// })
|
|
||||||
/// .use_dependencies((&count,));
|
|
||||||
///
|
|
||||||
/// todo!()
|
|
||||||
/// }
|
|
||||||
/// ```
|
|
||||||
pub fn use_dependencies(self, dependency: impl Dependency) -> Self
|
|
||||||
where
|
|
||||||
T: PartialEq,
|
|
||||||
{
|
|
||||||
let mut dependencies_signal = use_hook(|| CopyValue::new(dependency.out()));
|
|
||||||
let changed = { dependency.changed(&*dependencies_signal.read()) };
|
|
||||||
if changed {
|
|
||||||
dependencies_signal.set(dependency.out());
|
|
||||||
self.recompute();
|
|
||||||
}
|
|
||||||
self
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
impl<T> Readable for Memo<T>
|
impl<T> Readable for Memo<T>
|
||||||
|
|
Loading…
Reference in a new issue