wip: some ideas

examples/async.rs

@@ -2,43 +2,41 @@
 //!
 //! The example from the README.md
 
-use std::{pin::Pin, time::Duration};
-
 use dioxus::prelude::*;
-use futures::Future;
 fn main() {
-    env_logger::init();
-    log::info!("hello world");
     dioxus::desktop::launch(App, |c| c).expect("faield to launch");
 }
 
-#[derive(serde::Deserialize)]
-struct DogApi {
-    message: String,
-}
+pub static App: FC<()> = |cx| {
+    let count = use_state(cx, || 0);
+    let mut direction = use_state(cx, || 1);
 
-const ENDPOINT: &str = "https://dog.ceo/api/breeds/image/random";
-
-static App: FC<()> = |cx| {
-    let mut count = use_state(cx, || 0);
-    let mut fut = Box::pin(async {
-        let mut tick: i32 = 0;
+    let (async_count, dir) = (count.for_async(), *direction);
+    let (task, _result) = cx.use_task(move || async move {
         loop {
-            async_std::task::sleep(Duration::from_millis(250)).await;
-            log::debug!("ticking forward... {}", tick);
-            tick += 1;
-            // match surf::get(ENDPOINT).recv_json::<DogApi>().await {
-            //     Ok(_) => (),
-            //     Err(_) => (),
-            // }
+            gloo_timers::future::TimeoutFuture::new(250).await;
+            *async_count.get_mut() += dir;
         }
     });
 
-    cx.submit_task(fut);
-
     cx.render(rsx! {
         div {
-            h1 {"it's working somewhat properly"}
+            h1 {"count is {count}"}
+            button {
+                "Stop counting"
+                onclick: move |_| task.stop()
+            }
+            button {
+                "Start counting"
+                onclick: move |_| task.start()
+            }
+            button {
+                "Switch counting direcion"
+                onclick: move |_| {
+                    direction *= -1;
+                    task.restart();
+                }
+            }
         }
     })
 };

examples/doggo.rs

@@ -1,16 +0,0 @@
-use dioxus::prelude::*;
-fn main() {}
-
-pub static Example: FC<()> = |cx| {
-    let (g, set_g) = use_state(cx, || 0).classic();
-    let v = (0..10).map(move |f| {
-        rsx!(li {
-            onclick: move |_| set_g(10)
-        })
-    });
-    cx.render(rsx! {
-        div {
-            {v}
-        }
-    })
-};

examples/reference/main.rs

@@ -1,170 +0,0 @@
-#![allow(
-    unused,
-    dead_code,
-    non_upper_case_globals,
-    non_camel_case_types,
-    non_snake_case
-)]
-
-mod antipatterns;
-mod basics;
-mod children;
-mod conditional_rendering;
-mod controlled_inputs;
-mod custom_elements;
-mod empty;
-mod fragments;
-mod global_css;
-mod inline_styles;
-mod iterators;
-mod listener;
-mod memo;
-mod noderefs;
-mod signals;
-mod spreadpattern;
-mod statemanagement;
-mod suspense;
-mod task;
-mod testing;
-mod tostring;
-
-fn main() {}
-
-use std::rc::Rc;
-
-use dioxus::prelude::*;
-
-static App: FC<()> = |cx| {
-    let (selection, set_selection) = use_state(cx, || None as Option<usize>).classic();
-
-    let body = match selection {
-        Some(id) => rsx!(in cx, ReferenceItem { selected: *id }),
-        None => rsx!(in cx, div { "Select an concept to explore" }),
-    };
-
-    cx.render(rsx! {
-        div {
-            ScrollSelector { onselect: move |id| set_selection(id)  }
-            {body}
-        }
-    })
-};
-
-// this is its own component to stay memoized
-#[derive(Props)]
-struct ScrollSelectorProps<'a> {
-    onselect: &'a dyn Fn(Option<usize>),
-}
-
-fn ScrollSelector<'a>(cx: Context<'a, ScrollSelectorProps>) -> VNode<'a> {
-    let selection_list = (&REFERENCES).iter().enumerate().map(|(id, _)| {
-        rsx! {
-            li {
-                h3 {}
-            }
-        }
-    });
-    cx.render(rsx! {
-        div {
-            h1 {""}
-            ul {
-                {selection_list}
-                button {
-                    onclick: move |_| (cx.onselect)(Some(10))
-                }
-            }
-        }
-    })
-}
-
-#[derive(PartialEq, Props)]
-struct ReferenceItemProps {
-    selected: usize,
-}
-
-static ReferenceItem: FC<ReferenceItemProps> = |cx| {
-    let (caller, name, code) = REFERENCES[cx.selected];
-
-    // Create the component using the factory API directly
-    let caller_node = LazyNodes::new(move |f| f.component(caller, (), None, &[]));
-
-    cx.render(rsx! {
-        div {
-            // Source of the left, rendered on the right
-            div {
-                code { "{code}" }
-            }
-            div {
-                {caller_node}
-            }
-        }
-    })
-};
-
-static REFERENCES: &[(FC<()>, &str, &str)] = &[
-    (basics::Example, "Basics", include_str!("./basics.rs")),
-    (children::Example, "Children", include_str!("./children.rs")),
-    (
-        conditional_rendering::Example,
-        "Conditional Rendering",
-        include_str!("./conditional_rendering.rs"),
-    ),
-    // TODO
-    (
-        controlled_inputs::Example,
-        "Controlled Inputs",
-        include_str!("./controlled_inputs.rs"),
-    ),
-    (empty::Example, "empty", include_str!("./empty.rs")),
-    (
-        custom_elements::Example,
-        "Custom Elements & Web Components",
-        include_str!("./custom_elements.rs"),
-    ),
-    (
-        fragments::Example,
-        "Fragments",
-        include_str!("./fragments.rs"),
-    ),
-    (
-        iterators::Example,
-        "Iterators",
-        include_str!("./iterators.rs"),
-    ),
-    (
-        global_css::Example,
-        "Global CSS",
-        include_str!("./global_css.rs"),
-    ),
-    (
-        inline_styles::Example,
-        "Inline Styles",
-        include_str!("./inline_styles.rs"),
-    ),
-    (listener::Example, "Listener", include_str!("./listener.rs")),
-    (memo::Example, "Memo", include_str!("./memo.rs")),
-    (
-        spreadpattern::Example,
-        "Spread Pattern",
-        include_str!("./spreadpattern.rs"),
-    ),
-    (suspense::Example, "Suspense", include_str!("./suspense.rs")),
-    (task::Example, "Task", include_str!("./task.rs")),
-    (tostring::Example, "Tostring", include_str!("./tostring.rs")),
-    (
-        antipatterns::Example,
-        "Anti-patterns",
-        include_str!("./antipatterns.rs"),
-    ),
-    /*
-        TODO!
-    */
-    (signals::Example, "Signals", include_str!("./signals.rs")),
-    (noderefs::Example, "NodeRefs", include_str!("./noderefs.rs")),
-    (
-        statemanagement::Example,
-        "State Management",
-        include_str!("./statemanagement.rs"),
-    ),
-    (testing::Example, "Testing", include_str!("./testing.rs")),
-];

examples/reference/tostring.rs

@@ -7,7 +7,7 @@ pub static Example: FC<()> = |cx| {
         // This is an easy/low hanging fruit to improve upon
         let mut dom = VirtualDom::new(SomeApp);
         dom.rebuild_in_place().unwrap();
-        ssr::render_root(&dom)
+        ssr::render_vdom(&dom)
     });
 
     cx.render(rsx! {

examples/showcase.rs

@@ -1,8 +1,84 @@
-//! Example: Reference Showcase
-//! ---------------------------
-//!
-//! This example provides a cute interface for browsing the reference examples.
+#![allow(
+    unused,
+    dead_code,
+    non_upper_case_globals,
+    non_camel_case_types,
+    non_snake_case
+)]
 
+fn main() {}
+
+use dioxus::prelude::*;
+use std::rc::Rc;
+
+static App: FC<()> = |cx| {
+    let (selection, set_selection) = use_state(cx, || None as Option<usize>).classic();
+
+    let body = match selection {
+        Some(id) => rsx!(in cx, ReferenceItem { selected: *id }),
+        None => rsx!(in cx, div { "Select an concept to explore" }),
+    };
+
+    cx.render(rsx! {
+        div {
+            ScrollSelector { onselect: move |id| set_selection(id)  }
+            {body}
+        }
+    })
+};
+
+// this is its own component to stay memoized
+#[derive(Props)]
+struct ScrollSelectorProps<'a> {
+    onselect: &'a dyn Fn(Option<usize>),
+}
+
+fn ScrollSelector<'a>(cx: Context<'a, ScrollSelectorProps>) -> VNode<'a> {
+    let selection_list = (&REFERENCES).iter().enumerate().map(|(id, _)| {
+        rsx! {
+            li {
+                h3 {}
+            }
+        }
+    });
+    cx.render(rsx! {
+        div {
+            h1 {""}
+            ul {
+                {selection_list}
+                button {
+                    onclick: move |_| (cx.onselect)(Some(10))
+                }
+            }
+        }
+    })
+}
+
+#[derive(PartialEq, Props)]
+struct ReferenceItemProps {
+    selected: usize,
+}
+
+static ReferenceItem: FC<ReferenceItemProps> = |cx| {
+    let (caller, name, code) = REFERENCES[cx.selected];
+
+    // Create the component using the factory API directly
+    let caller_node = LazyNodes::new(move |f| f.component(caller, (), None, &[]));
+
+    cx.render(rsx! {
+        div {
+            // Source of the left, rendered on the right
+            div {
+                code { "{code}" }
+            }
+            div {
+                {caller_node}
+            }
+        }
+    })
+};
+
+use reference::REFERENCES;
 mod reference {
     mod antipatterns;
     mod basics;
@@ -22,9 +98,111 @@ mod reference {
     mod spreadpattern;
     mod statemanagement;
     mod suspense;
+    mod task;
     mod testing;
     mod tostring;
-    mod webcomponents;
+    use super::*;
+    pub static REFERENCES: &[(FC<()>, &str, &str)] = &[
+        (
+            basics::Example,
+            "Basics",
+            include_str!("./reference/basics.rs"),
+        ),
+        (
+            children::Example,
+            "Children",
+            include_str!("./reference/children.rs"),
+        ),
+        (
+            conditional_rendering::Example,
+            "Conditional Rendering",
+            include_str!("./reference/conditional_rendering.rs"),
+        ),
+        // TODO
+        (
+            controlled_inputs::Example,
+            "Controlled Inputs",
+            include_str!("./reference/controlled_inputs.rs"),
+        ),
+        (
+            empty::Example,
+            "empty",
+            include_str!("./reference/empty.rs"),
+        ),
+        (
+            custom_elements::Example,
+            "Custom Elements & Web Components",
+            include_str!("./reference/custom_elements.rs"),
+        ),
+        (
+            fragments::Example,
+            "Fragments",
+            include_str!("./reference/fragments.rs"),
+        ),
+        (
+            iterators::Example,
+            "Iterators",
+            include_str!("./reference/iterators.rs"),
+        ),
+        (
+            global_css::Example,
+            "Global CSS",
+            include_str!("./reference/global_css.rs"),
+        ),
+        (
+            inline_styles::Example,
+            "Inline Styles",
+            include_str!("./reference/inline_styles.rs"),
+        ),
+        (
+            listener::Example,
+            "Listener",
+            include_str!("./reference/listener.rs"),
+        ),
+        (memo::Example, "Memo", include_str!("./reference/memo.rs")),
+        (
+            spreadpattern::Example,
+            "Spread Pattern",
+            include_str!("./reference/spreadpattern.rs"),
+        ),
+        (
+            suspense::Example,
+            "Suspense",
+            include_str!("./reference/suspense.rs"),
+        ),
+        (task::Example, "Task", include_str!("./reference/task.rs")),
+        (
+            tostring::Example,
+            "Tostring",
+            include_str!("./reference/tostring.rs"),
+        ),
+        (
+            antipatterns::Example,
+            "Anti-patterns",
+            include_str!("./reference/antipatterns.rs"),
+        ),
+        /*
+            TODO! these showcase features that aren't quite ready
+        */
+        (
+            signals::Example,
+            "Signals",
+            include_str!("./reference/signals.rs"),
+        ),
+        (
+            noderefs::Example,
+            "NodeRefs",
+            include_str!("./reference/noderefs.rs"),
+        ),
+        (
+            statemanagement::Example,
+            "State Management",
+            include_str!("./reference/statemanagement.rs"),
+        ),
+        (
+            testing::Example,
+            "Testing",
+            include_str!("./reference/testing.rs"),
+        ),
+    ];
 }
-
-fn main() {}

examples/ssr.rs

@@ -4,7 +4,7 @@ use dioxus::ssr;
 fn main() {
     let mut vdom = VirtualDom::new(App);
     vdom.rebuild_in_place();
-    println!("{}", ssr::render_root(&vdom));
+    println!("{}", ssr::render_vdom(&vdom));
 }
 
 const App: FC<()> = |cx| {

examples/tailwind.rs

@@ -1,7 +1,7 @@
-use dioxus::desktop::wry::application::platform::macos::*;
 use dioxus::prelude::*;
 
 fn main() {
+    use dioxus::desktop::wry::application::platform::macos::*;
     dioxus::desktop::launch(App, |c| {
         c.with_fullsize_content_view(true)
             .with_titlebar_buttons_hidden(false)