wip: docs and router

examples/async.rs

@@ -11,7 +11,7 @@ async fn main() {
     dioxus::desktop::launch(App, |c| c);
 }
 
-pub static App: FC<()> = |(cx, _)| {
+pub static App: FC<()> = |cx, _| {
     let count = use_state(cx, || 0);
     let mut direction = use_state(cx, || 1);
 

examples/calculator.rs

@@ -10,7 +10,7 @@ fn main() {
     dioxus::desktop::launch(APP, |cfg| cfg);
 }
 
-const APP: FC<()> = |(cx, _)| {
+const APP: FC<()> = |cx, _| {
     let cur_val = use_state(cx, || 0.0_f64);
     let operator = use_state(cx, || None as Option<&'static str>);
     let display_value = use_state(cx, || String::from(""));
@@ -114,10 +114,10 @@ const APP: FC<()> = |(cx, _)| {
 struct CalculatorKeyProps<'a> {
     name: &'static str,
     onclick: &'a dyn Fn(MouseEvent),
-    children: ScopeChildren<'a>,
+    children: Element,
 }
 
-fn CalculatorKey<'a>((cx, props): Scope<'a, CalculatorKeyProps<'a>>) -> Element {
+fn CalculatorKey<'a>(cx: Context, props: &CalculatorKeyProps) -> Element {
     rsx!(cx, button {
         class: "calculator-key {props.name}"
         onclick: {props.onclick}

examples/core/alternative.rs

@@ -9,7 +9,7 @@ fn main() {
     println!("{}", dom);
 }
 
-pub static EXAMPLE: FC<()> = |(cx, _)| {
+pub static EXAMPLE: FC<()> = |cx, _| {
     let list = (0..10).map(|_f| {
         rsx! {
             "{_f}"

examples/core/syntax.rs

@@ -31,7 +31,7 @@ fn html_usage() {
     // let p = rsx!(div { {f} });
 }
 
-static App2: FC<()> = |(cx, _)| cx.render(rsx!("hello world!"));
+static App2: FC<()> = |cx, _| cx.render(rsx!("hello world!"));
 
 static App: FC<()> = |cx, props| {
     let name = cx.use_state(|| 0);

examples/crm.rs

@@ -19,7 +19,7 @@ pub struct Client {
     pub description: String,
 }
 
-static App: FC<()> = |(cx, _)| {
+static App: FC<()> = |cx, _| {
     let mut clients = use_ref(cx, || vec![] as Vec<Client>);
     let mut scene = use_state(cx, || Scene::ClientsList);
 

examples/desktop/crm.rs

@@ -21,7 +21,7 @@ pub struct Client {
     pub description: String,
 }
 
-static App: FC<()> = |(cx, _)| {
+static App: FC<()> = |cx, _| {
     let mut scene = use_state(cx, || Scene::ClientsList);
     let clients = use_ref(cx, || vec![] as Vec<Client>);
 

examples/desktop/todomvc.rs

@@ -32,7 +32,7 @@ pub struct TodoItem {
 }
 pub type Todos = HashMap<u32, TodoItem>;
 
-pub static App: FC<()> = |(cx, _)| {
+pub static App: FC<()> = |cx, _| {
     // Share our TodoList to the todos themselves
     use_provide_state(cx, Todos::new);
 

examples/framework_benchmark.rs

@@ -1,50 +1,38 @@
-use dioxus::{events::MouseEvent, prelude::*};
-use fxhash::FxBuildHasher;
-use std::rc::Rc;
+use dioxus::prelude::*;
+use rand::prelude::*;
 
 fn main() {
-    dioxus::desktop::launch(App, |c| c);
+    dioxus::web::launch(App, |c| c);
+    // dioxus::desktop::launch(App, |c| c);
 }
 
-// We use a special immutable hashmap to make hashmap operations efficient
-type RowList = im_rc::HashMap<usize, Rc<str>, FxBuildHasher>;
+#[derive(Clone, PartialEq)]
+struct Label {
+    key: usize,
+    labels: [&'static str; 3],
+}
 
-static App: FC<()> = |(cx, _props)| {
-    let mut items = use_state(cx, || RowList::default());
-
-    let create_rendered_rows = move |from, num| move |_| items.set(create_row_list(from, num));
-
-    let mut append_1_000_rows =
-        move |_| items.set(create_row_list(items.len(), 1000).union((*items).clone()));
-
-    let update_every_10th_row = move |_| {
-        let mut new_items = (*items).clone();
-        let mut small_rng = SmallRng::from_entropy();
-        new_items.iter_mut().step_by(10).for_each(|(_, val)| {
-            *val = create_new_row_label(&mut String::with_capacity(30), &mut small_rng)
-        });
-        items.set(new_items);
-    };
-    let clear_rows = move |_| items.set(RowList::default());
-
-    let swap_rows = move |_| {
-        // this looks a bit ugly because we're using a hashmap instead of a vec
-        if items.len() > 998 {
-            let mut new_items = (*items).clone();
-            let a = new_items.get(&0).unwrap().clone();
-            *new_items.get_mut(&0).unwrap() = new_items.get(&998).unwrap().clone();
-            *new_items.get_mut(&998).unwrap() = a;
-            items.set(new_items);
+impl Label {
+    fn new_list(num: usize) -> Vec<Self> {
+        let mut rng = SmallRng::from_entropy();
+        let mut labels = Vec::with_capacity(num);
+        for _ in 0..num {
+            labels.push(Label {
+                key: 0,
+                labels: [
+                    ADJECTIVES.choose(&mut rng).unwrap(),
+                    COLOURS.choose(&mut rng).unwrap(),
+                    NOUNS.choose(&mut rng).unwrap(),
+                ],
+            });
         }
-    };
+        labels
+    }
+}
 
-    let rows = items.iter().map(|(key, value)| {
-        rsx!(Row {
-            key: "{key}",
-            row_id: *key as usize,
-            label: value.clone(),
-        })
-    });
+static App: FC<()> = |cx, _props| {
+    let mut items = use_ref(cx, || vec![]);
+    let mut selected = use_state(cx, || None);
 
     cx.render(rsx! {
         div { class: "container"
@@ -53,22 +41,49 @@ static App: FC<()> = |(cx, _props)| {
                     div { class: "col-md-6", h1 { "Dioxus" } }
                     div { class: "col-md-6"
                         div { class: "row"
-                            ActionButton { name: "Create 1,000 rows", id: "run", onclick: {create_rendered_rows(0, 1_000)} }
-                            ActionButton { name: "Create 10,000 rows", id: "runlots", onclick: {create_rendered_rows(0, 10_000)} }
-                            ActionButton { name: "Append 1,000 rows", id: "add", onclick: {append_1_000_rows} }
-                            ActionButton { name: "Update every 10th row", id: "update", onclick: {update_every_10th_row} }
-                            ActionButton { name: "Clear", id: "clear", onclick: {clear_rows} }
-                            ActionButton { name: "Swap rows", id: "swaprows", onclick: {swap_rows} }
+                            ActionButton { name: "Create 1,000 rows", id: "run",
+                                onclick: move || items.set(Label::new_list(1_000)),
+                            }
+                            ActionButton { name: "Create 10,000 rows", id: "runlots",
+                                onclick: move || items.set(Label::new_list(10_000)),
+                            }
+                            ActionButton { name: "Append 1,000 rows", id: "add",
+                                onclick: move || items.write().extend(Label::new_list(1_000)),
+                            }
+                            ActionButton { name: "Update every 10th row", id: "update",
+                                onclick: move || items.write().iter_mut().step_by(10).for_each(|item| item.labels[2] = "!!!"),
+                            }
+                            ActionButton { name: "Clear", id: "clear",
+                                onclick: move || items.write().clear(),
+                            }
+                            ActionButton { name: "Swap rows", id: "swaprows",
+                                onclick: move || items.write().swap(0, 998),
+                            }
                         }
                     }
                 }
             }
             table {
                 tbody {
-                    {rows}
+                    {items.read().iter().enumerate().map(|(id, item)| {
+                        let is_in_danger = if (*selected).map(|s| s == id).unwrap_or(false) {"danger"} else {""};
+                        rsx!(tr { class: "{is_in_danger}"
+                            td { class:"col-md-1" }
+                            td { class:"col-md-1", "{item.key}" }
+                            td { class:"col-md-1", onclick: move |_| selected.set(Some(id)),
+                                a { class: "lbl", {item.labels} }
+                            }
+                            td { class: "col-md-1"
+                                a { class: "remove", onclick: move |_| { items.write().remove(id); },
+                                    span { class: "glyphicon glyphicon-remove remove" aria_hidden: "true" }
+                                }
+                            }
+                            td { class: "col-md-6" }
+                        })
+                    })}
                 }
              }
-            span {}
+            // span { class: "preloadicon glyphicon glyphicon-remove" aria_hidden: "true" }
         }
     })
 };
@@ -77,59 +92,17 @@ static App: FC<()> = |(cx, _props)| {
 struct ActionButtonProps<'a> {
     name: &'static str,
     id: &'static str,
-    onclick: &'a dyn Fn(MouseEvent),
+    onclick: &'a dyn Fn(),
 }
 
-fn ActionButton<'a>((cx, props): Scope<'a, ActionButtonProps>) -> Element<'a> {
+fn ActionButton(cx: Context, props: &ActionButtonProps) -> Element {
     rsx!(cx, div { class: "col-sm-6 smallpad"
-        button { class:"btn btn-primary btn-block", r#type: "button", id: "{props.id}",  onclick: {props.onclick},
+        button { class:"btn btn-primary btn-block", r#type: "button", id: "{props.id}",  onclick: move |_| (props.onclick)(),
             "{props.name}"
         }
     })
 }
 
-#[derive(PartialEq, Props)]
-struct RowProps {
-    row_id: usize,
-    label: Rc<str>,
-}
-fn Row((cx, props): Scope<RowProps>) -> Element {
-    rsx!(cx, tr {
-        td { class:"col-md-1", "{props.row_id}" }
-        td { class:"col-md-1", onclick: move |_| { /* run onselect */ }
-            a { class: "lbl", "{props.label}" }
-        }
-        td { class: "col-md-1"
-            a { class: "remove", onclick: move |_| {/* remove */}
-                span { class: "glyphicon glyphicon-remove remove" aria_hidden: "true" }
-            }
-        }
-        td { class: "col-md-6" }
-    })
-}
-
-use rand::prelude::*;
-fn create_new_row_label(label: &mut String, rng: &mut SmallRng) -> Rc<str> {
-    label.push_str(ADJECTIVES.choose(rng).unwrap());
-    label.push(' ');
-    label.push_str(COLOURS.choose(rng).unwrap());
-    label.push(' ');
-    label.push_str(NOUNS.choose(rng).unwrap());
-    Rc::from(label.as_ref())
-}
-
-fn create_row_list(from: usize, num: usize) -> RowList {
-    let mut small_rng = SmallRng::from_entropy();
-    let mut buf = String::with_capacity(35);
-    (from..num + from)
-        .map(|f| {
-            let o = (f, create_new_row_label(&mut buf, &mut small_rng));
-            buf.clear();
-            o
-        })
-        .collect::<RowList>()
-}
-
 static ADJECTIVES: &[&str] = &[
     "pretty",
     "large",
@@ -167,3 +140,24 @@ static NOUNS: &[&str] = &[
     "table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger",
     "pizza", "mouse", "keyboard",
 ];
+
+// #[derive(PartialEq, Props)]
+// struct RowProps<'a> {
+//     row_id: usize,
+//     label: &'a Label,
+// }
+
+// fn Row(cx: Context, props: &RowProps) -> Element {
+//     rsx!(cx, tr {
+//         td { class:"col-md-1", "{props.row_id}" }
+//         td { class:"col-md-1", onclick: move |_| { /* run onselect */ }
+//             a { class: "lbl", {props.label.labels} }
+//         }
+//         td { class: "col-md-1"
+//             a { class: "remove", onclick: move |_| {/* remove */}
+//                 span { class: "glyphicon glyphicon-remove remove" aria_hidden: "true" }
+//             }
+//         }
+//         td { class: "col-md-6" }
+//     })
+// }

examples/pattern_reducer.rs

@@ -11,7 +11,7 @@ fn main() {
     dioxus::desktop::launch(App, |c| c);
 }
 
-pub static App: FC<()> = |(cx, _)| {
+pub static App: FC<()> = |cx, _| {
     let state = use_state(cx, PlayerState::new);
 
     let is_playing = state.is_playing();

examples/web/basic.rs

@@ -14,7 +14,7 @@ fn main() {
     dioxus_web::launch(APP, |c| c)
 }
 
-static APP: FC<()> = |(cx, _)| {
+static APP: FC<()> = |cx, _| {
     let mut count = use_state(cx, || 3);
     let content = use_state(cx, || String::from("h1"));
     let text_content = use_state(cx, || String::from("Hello, world!"));
@@ -86,4 +86,4 @@ fn render_list(cx: Context, count: usize) -> Element {
     rsx!(cx, ul { {items} })
 }
 
-static CHILD: FC<()> = |(cx, _)| rsx!(cx, div {"hello child"});
+static CHILD: FC<()> = |cx, _| rsx!(cx, div {"hello child"});

examples/web/crm2.rs

@@ -28,7 +28,7 @@ pub struct Client {
     pub description: String,
 }
 
-static App: FC<()> = |(cx, _)| {
+static App: FC<()> = |cx, _| {
     let scene = use_state(cx, || Scene::ClientsList);
     let clients = use_ref(cx, || vec![] as Vec<Client>);