wip: move examples around

examples/core/alternative.rs

@@ -0,0 +1,34 @@
+use dioxus_core::prelude::*;
+use dioxus_core_macro::format_args_f;
+use dioxus_core_macro::rsx;
+use dioxus_html as dioxus_elements;
+
+fn main() {
+    let mut dom = VirtualDom::new(EXAMPLE);
+    dom.rebuild();
+    println!("{}", dom);
+}
+
+pub static EXAMPLE: FC<()> = |(cx, _)| {
+    let list = (0..10).map(|_f| {
+        rsx! {
+            "{_f}"
+        }
+    });
+    // let list = (0..10).map(|_f| Some(Box::new(move |_f| todo!())));
+
+    cx.render(Some(LazyNodes::new(move |cx| {
+        cx.raw_element(
+            "div",
+            None,
+            [],
+            [],
+            [
+                cx.text(format_args!("hello")),
+                cx.text(format_args!("hello")),
+                cx.fragment_from_iter(list),
+            ],
+            None,
+        )
+    })))
+};

examples/core/async.rs

@@ -0,0 +1,15 @@
+use dioxus_core::prelude::*;
+
+fn main() {
+    let mut dom = VirtualDom::new(App);
+    dom.rebuild();
+}
+
+const App: FC<()> = |(cx, props)| {
+    let id = cx.scope_id();
+    // cx.submit_task(Box::pin(async move { id }));
+
+    // let (handle, contents) = use_task(cx, || async { "hello world".to_string() });
+
+    todo!()
+};

examples/core/borrowed.rs

@@ -0,0 +1,78 @@
+//! Demonstrate that borrowed data is possible as a property type
+//! Borrowing (rather than cloning) is very important for speed and ergonomics.
+//!
+//! It's slightly more advanced than just cloning, but well worth the investment.
+//!
+//! If you use the FC macro, we handle the lifetimes automatically, making it easy to write efficient & performant components.
+fn main() {}
+
+use dioxus_core::prelude::*;
+
+use std::rc::Rc;
+
+struct AppProps {
+    items: Vec<Rc<ListItem>>,
+}
+
+#[derive(PartialEq)]
+struct ListItem {
+    name: String,
+    age: u32,
+}
+
+fn app<'a>(cx: Context<'a>, props: &AppProps) -> Element<'a> {
+    // let (val, set_val) = use_state_classic(cx, || 0);
+
+    todo!()
+    // cx.render(LazyNodes::new(move |_nodecx| {
+    //     todo!()
+    //     // builder::ElementBuilder::new(_nodecx, "div")
+    //     //     .iter_child({
+    //     //         cx.items.iter().map(|child| {
+    //     //             builder::virtual_child(
+    //     //                 _nodecx,
+    //     //                 ChildItem,
+    //     //                 ChildProps {
+    //     //                     item: child.clone(),
+    //     //                     item_handler: set_val.clone(),
+    //     //                 },
+    //     //                 None,
+    //     //                 &[],
+    //     //             )
+    //     //         })
+    //     //     })
+    //     //     .iter_child([builder::ElementBuilder::new(_nodecx, "div")
+    //     //         .iter_child([builder::text3(_nodecx.bump(), format_args!("{}", val))])
+    //     //         .finish()])
+    //     //     .finish()
+    // }))
+}
+
+// props should derive a partialeq implementation automatically, but implement ptr compare for & fields
+struct ChildProps {
+    // Pass down complex structs
+    item: Rc<ListItem>,
+
+    // Even pass down handlers!
+    item_handler: Rc<dyn Fn(i32)>,
+}
+
+fn ChildItem<'a>(cx: Context<'a>, props: &'a ChildProps) -> Element<'a> {
+    todo!()
+}
+
+impl PartialEq for ChildProps {
+    fn eq(&self, _other: &Self) -> bool {
+        false
+    }
+}
+impl Properties for ChildProps {
+    type Builder = ();
+    const IS_STATIC: bool = true;
+    fn builder() -> Self::Builder {
+        ()
+    }
+    unsafe fn memoize(&self, other: &Self) -> bool {
+        self == other
+    }
+}

examples/core/contextapi.rs

@@ -0,0 +1,36 @@
+use dioxus_core::prelude::*;
+
+fn main() {}
+struct SomeContext {
+    items: Vec<String>,
+}
+
+#[allow(unused)]
+static Example: FC<()> = |(cx, props)| {
+    todo!()
+
+    // let value = cx.use_context(|c: &SomeContext| c.items.last().unwrap());
+
+    // cx.render(LazyNodes::new(move |bump| {
+    //     builder::ElementBuilder::new(bump, "button")
+    //         .on("click", move |_| {
+    //             println!("Value is {}", cx.name);
+    //             println!("Value is {}", value.as_str());
+    //             println!("Value is {}", *value);
+    //         })
+    //         .on("click", move |_| {
+    //             println!("Value is {}", cx.name);
+    //         })
+    //         .finish()
+    // }))
+    // cx.render(html! {
+    //     <div>
+    //         <button onclick={move |_| println!("Value is {}", value)} />
+    //         <button onclick={move |_| println!("Value is {}", value)} />
+    //         <button onclick={move |_| println!("Value is {}", value)} />
+    //         <div>
+    //             <p> "Value is: {val}" </p>
+    //         </div>
+    //     </div>
+    // })
+};

examples/core/expand.rs

@@ -0,0 +1 @@
+fn main( ) {}

examples/core/fragment_from_iter.rs

@@ -0,0 +1,46 @@
+use dioxus_core::prelude::*;
+
+fn main() {}
+
+fn app<'a>(cx: Context<'a>, props: &()) -> Element<'a> {
+    // let vak = use_suspense(
+    //     cx,
+    //     || async {},
+    //     |c, _res| c.render(LazyNodes::new(move |f| f.text(format_args!("")))),
+    // );
+
+    // let d1 = cx.render(to_lazy_nodes(move |f| {
+    //     f.raw_element(
+    //         "div",
+    //         None,
+    //         [],
+    //         [],
+    //         [
+    //             // f.fragment_from_iter(vak),
+    //             f.text(format_args!("")),
+    //             f.text(format_args!("")),
+    //             f.text(format_args!("")),
+    //             f.text(format_args!("")),
+    //         ],
+    //         None,
+    //     )
+    // }));
+
+    todo!()
+    // cx.render(LazyNodes::new(move |f| {
+    //     f.raw_element(
+    //         "div",
+    //         None,
+    //         [],
+    //         [],
+    //         [
+    //             f.text(format_args!("")),
+    //             f.text(format_args!("")),
+    //             f.text(format_args!("")),
+    //             f.text(format_args!("")),
+    //             d1.unwrap(),
+    //         ],
+    //         None,
+    //     )
+    // }))
+}

examples/core/html.rs

@@ -0,0 +1,108 @@
+use bumpalo::Bump;
+
+fn main() {}
+
+fn build(factory: Factory) {
+    factory.text();
+    div::new(factory)
+        .r#class()
+        .r#tag()
+        .r#type()
+        .add_children()
+        .iter_children()
+        .finish();
+}
+
+/// # The `div` element
+///
+///
+/// The <div> HTML element is the generic container for flow content. It has no effect on the content or layout until
+/// styled in some way using CSS (e.g. styling is directly applied to it, or some kind of layout model like Flexbox is
+/// applied to its parent element).
+///
+/// As a "pure" container, the <div> element does not inherently represent anything. Instead, it's used to group content
+/// so it can be easily styled using the class or id attributes, marking a section of a document as being written in a
+/// different language (using the lang attribute), and so on.
+///
+/// ## Usage
+/// ```
+/// rsx!{
+///     div { class: "tall", id: "unique id"
+///         h1 {}
+///         p {}
+///     }
+/// }
+///
+/// ```
+///
+/// ## Specifications
+/// - Content categories: Flow content, palpable content.
+/// - Permitted content: Flow content.
+/// - Permitted parents: Any element that accepts flow content.
+#[allow(non_camel_case_types)]
+struct div {}
+
+struct h1 {}
+
+struct h2 {}
+
+trait BasicElement: Sized {
+    const TagName: &'static str;
+    fn get_bump(&self) -> &Bump;
+    fn new(factory: Factory) -> Self;
+    fn add_children(self) -> Self {
+        self
+    }
+    fn iter_children(self) -> Self {
+        self
+    }
+    fn finish(self) -> Self {
+        self
+    }
+}
+
+impl BasicElement for div {
+    const TagName: &'static str = "div";
+
+    fn get_bump(&self) -> &Bump {
+        todo!()
+    }
+
+    fn new(_factory: Factory) -> Self {
+        todo!()
+    }
+}
+
+impl div {
+    fn class(self) -> Self {
+        self
+    }
+    fn tag(self) -> Self {
+        self
+    }
+    fn r#type(self) -> Self {
+        self
+    }
+}
+
+#[derive(Clone, Copy)]
+struct Factory<'a> {
+    bump: &'a bumpalo::Bump,
+}
+
+impl<'a> Factory<'a> {
+    fn text(&self) -> &str {
+        todo!()
+    }
+    fn new_el(&'a self, tag: &'static str) -> ElementBuilder<'a> {
+        ElementBuilder {
+            bump: self.bump,
+            tag,
+        }
+    }
+}
+
+struct ElementBuilder<'a> {
+    tag: &'static str,
+    bump: &'a bumpalo::Bump,
+}

examples/core/jsframework.rs

@@ -0,0 +1,118 @@
+#![allow(non_snake_case)]
+
+use dioxus::component::Scope;
+use dioxus::events::on::MouseEvent;
+use dioxus_core as dioxus;
+use dioxus_core::prelude::*;
+use dioxus_core_macro::*;
+use dioxus_html as dioxus_elements;
+use rand::prelude::*;
+use std::fmt::Display;
+
+fn main() {
+    let mut dom = VirtualDom::new(App);
+    let g = dom.rebuild();
+    assert!(g.edits.len() > 1);
+}
+
+fn App((cx, props): Scope<()>) -> Element {
+    let mut rng = SmallRng::from_entropy();
+    let rows = (0..10_000_usize).map(|f| {
+        let label = Label::new(&mut rng);
+        rsx! {
+            Row {
+                row_id: f,
+                label: label
+            }
+        }
+    });
+    cx.render(rsx! {
+        table {
+            tbody {
+                {rows}
+            }
+        }
+    })
+}
+
+#[derive(PartialEq, Props)]
+struct RowProps {
+    row_id: usize,
+    label: Label,
+}
+
+fn Row<'a>((cx, props): Scope<'a, RowProps>) -> Element<'a> {
+    let handler = move |evt: MouseEvent| {
+        let g = evt.button;
+    };
+    cx.render(rsx! {
+        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: {handler}
+            //         span { class: "glyphicon glyphicon-remove remove" aria_hidden: "true" }
+            //     }
+            // }
+            // td { class: "col-md-6" }
+        }
+    })
+}
+
+#[derive(PartialEq)]
+struct Label([&'static str; 3]);
+
+impl Label {
+    fn new(rng: &mut SmallRng) -> Self {
+        Label([
+            ADJECTIVES.choose(rng).unwrap(),
+            COLOURS.choose(rng).unwrap(),
+            NOUNS.choose(rng).unwrap(),
+        ])
+    }
+}
+impl Display for Label {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        write!(f, "{} {} {}", self.0[0], self.0[1], self.0[2])
+    }
+}
+
+static ADJECTIVES: &[&str] = &[
+    "pretty",
+    "large",
+    "big",
+    "small",
+    "tall",
+    "short",
+    "long",
+    "handsome",
+    "plain",
+    "quaint",
+    "clean",
+    "elegant",
+    "easy",
+    "angry",
+    "crazy",
+    "helpful",
+    "mushy",
+    "odd",
+    "unsightly",
+    "adorable",
+    "important",
+    "inexpensive",
+    "cheap",
+    "expensive",
+    "fancy",
+];
+
+static COLOURS: &[&str] = &[
+    "red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black",
+    "orange",
+];
+
+static NOUNS: &[&str] = &[
+    "table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger",
+    "pizza", "mouse", "keyboard",
+];

examples/core/syntax.rs

@@ -0,0 +1,148 @@
+use std::marker::PhantomData;
+
+use dioxus::component::Scope;
+use dioxus::events::on::MouseEvent;
+use dioxus::nodes::IntoVNode;
+use dioxus_core as dioxus;
+use dioxus_core::prelude::*;
+use dioxus_core_macro::*;
+use dioxus_html as dioxus_elements;
+
+fn main() {}
+
+fn html_usage() {
+    let mo = move |_| {};
+    let r = rsx! {
+        div {
+            onclick: move |_| {}
+            onmouseover: {mo}
+            "type": "bar",
+            "hello world"
+        }
+    };
+
+    let items = ["bob", "bill", "jack"];
+
+    let f = items
+        .iter()
+        .filter(|f| f.starts_with('b'))
+        .map(|f| rsx!("hello {f}"));
+
+    // let p = rsx!(div { {f} });
+}
+
+static App2: FC<()> = |(cx, _)| cx.render(rsx!("hello world!"));
+
+static App: FC<()> = |(cx, props)| {
+    let name = cx.use_state(|| 0);
+
+    cx.render(rsx!(div {
+        h1 {}
+        h2 {}
+    }))
+};
+
+pub trait UseState<'a, T: 'static> {
+    fn use_state(self, f: impl FnOnce() -> T) -> &'a T;
+}
+impl<'a, T: 'static> UseState<'a, T> for Context<'a> {
+    fn use_state(self, f: impl FnOnce() -> T) -> &'a T {
+        todo!()
+    }
+}
+
+fn App3((cx, props): Scope<()>) -> Element {
+    let p = rsx! {
+        Child {
+            bame: 10,
+        }
+    };
+    todo!()
+    // cx.render(rsx!(Child {
+    //     bame: 102,
+    //     ..ChildProps { bame: 10 }
+    // }))
+}
+
+#[derive(Props, PartialEq, Debug)]
+struct ChildProps {
+    bame: i32, // children: Children<'a>,
+}
+
+fn Child<'a>((cx, props): Scope<'a, ChildProps>) -> Element<'a> {
+    cx.render(rsx!(div {
+        // {props.children}
+    }))
+}
+
+// Some(LazyNodes::new(|f| {
+//     //
+//     // let r = f.fragment_from_iter(&props.children);
+//     r
+//     // todo!()
+// }))
+// todo!()
+// rsx!({ Some(p) })
+// todo!()
+
+pub struct Children<'a> {
+    children: VNode<'static>,
+    _p: PhantomData<&'a ()>,
+}
+
+impl<'a> Children<'a> {
+    pub fn new(children: VNode<'a>) -> Self {
+        Self {
+            children: unsafe { std::mem::transmute(children) },
+            _p: PhantomData,
+        }
+    }
+}
+
+static Bapp: FC<()> = |(cx, props)| {
+    let name = cx.use_state(|| 0);
+
+    cx.render(rsx!(
+        div {
+            div {
+
+            }
+            div {
+
+            }
+        }
+    ))
+};
+
+static Match: FC<()> = |(cx, props)| {
+    //
+    let b: Box<dyn Fn(NodeFactory) -> VNode> = Box::new(|f| todo!());
+
+    let b = match "ag" {
+        "a" => {
+            let __b: Box<dyn FnOnce(NodeFactory) -> VNode> = Box::new(|f: NodeFactory| todo!());
+            __b
+        }
+        _ => {
+            let __b: Box<dyn FnOnce(NodeFactory) -> VNode> = Box::new(|f: NodeFactory| todo!());
+            __b
+        }
+    };
+
+    // let b: Box<dyn Fn(NodeFactory) -> VNode> = match "alph" {
+    //     "beta" => Box::new(|f: NodeFactory| {
+    //         //
+    //         todo!()
+    //     }),
+    //     _ => Box::new(|f: NodeFactory| {
+    //         //
+    //         todo!()
+    //     }),
+    // };
+
+    cx.render(rsx! {
+        div {
+
+        }
+    })
+};

examples/core/syntax2.rs

@@ -0,0 +1,259 @@
+use std::borrow::BorrowMut;
+use std::cell::{Cell, RefCell};
+use std::marker::PhantomData;
+
+use dioxus::component::Scope;
+use dioxus::events::on::MouseEvent;
+use dioxus::nodes::{IntoVNode, VComponent, VFragment, VText};
+use dioxus_core as dioxus;
+use dioxus_core::prelude::*;
+use dioxus_core_macro::*;
+use dioxus_html as dioxus_elements;
+
+fn main() {}
+
+fn t() {
+    let g = rsx! {
+        div {
+            div {
+
+            }
+        }
+    };
+
+    let g = {
+        let ___p: Box<dyn FnOnce(NodeFactory) -> VNode> = Box::new(|__cx: NodeFactory| {
+            use dioxus_elements::{GlobalAttributes, SvgAttributes};
+            __cx.element(dioxus_elements::div, [], [], [], None)
+        });
+        // let __z = ___p as ;
+        // __z
+    };
+}
+
+// #[derive(PartialEq, Props)]
+// struct OurProps {
+//     foo: String,
+// }
+
+// fn App<'a>((cx, props): Scope<'a, OurProps>) -> Element<'a> {
+//     let a = rsx! {
+//         div {
+//             "asd"
+//             "{props.foo}"
+//         }
+//     };
+
+//     let p = (0..10).map(|f| {
+//         rsx! {
+//             div {
+
+//             }
+//         }
+//     });
+
+//     let g = match "text" {
+//         "a" => {
+//             rsx!("asd")
+//         }
+//         _ => {
+//             rsx!("asd")
+//         }
+//     };
+
+//     let items = ["bob", "bill", "jack"];
+
+//     let f = items
+//         .iter()
+//         .filter(|f| f.starts_with('b'))
+//         .map(|f| rsx!("hello {f}"));
+
+//     // use dioxus_hooks;
+//     // let g = use_state(|| "hello".to_string());
+
+//     let s: &'a mut String = cx.use_hook(|_| String::new(), |f| f, |_| {});
+
+//     /*
+//     the final closure is allowed to borrow anything provided it
+//     */
+//     // cx.render({
+//     //     let p: Option<Box<dyn FnOnce(_) -> _>> = Some(Box::new(move |__cx: NodeFactory| {
+//     //         use dioxus_elements::{GlobalAttributes, SvgAttributes};
+
+//     //         let props = Child2Props { foo: s };
+//     //         let ch: VNode = __cx.component(Child2, props, None, []);
+//     //         __cx.element(
+//     //             dioxus_elements::div,
+//     //             [],
+//     //             [],
+//     //             [ch],
+//     //             // [__cx.component(Child2, fc_to_builder(Child2).foo(s).build(), None, [])],
+//     //             None,
+//     //         )
+//     //     }));
+//     //     p
+//     //     // let ___p: Box<dyn FnOnce(NodeFactory) -> VNode> = Box::new(move |__cx| {
+//     //     //     use dioxus_elements::{GlobalAttributes, SvgAttributes};
+
+//     //     //     let props = Child2Props { foo: s };
+//     //     //     let ch: VNode = __cx.component(Child2, props, None, []);
+//     //     //     __cx.element(
+//     //     //         dioxus_elements::div,
+//     //     //         [],
+//     //     //         [],
+//     //     //         [ch],
+//     //     //         // [__cx.component(Child2, fc_to_builder(Child2).foo(s).build(), None, [])],
+//     //     //         None,
+//     //     //     )
+//     //     // });
+//     //     // Some(___p)
+//     // })
+
+//     let a = annotate_lazy(move |f| {
+//         //
+//         todo!()
+//     });
+//     let b = annotate_lazy(move |f| {
+//         //
+//         f.text(format_args!("{}", props.foo))
+//     });
+
+//     let c = annotate_lazy(move |f| {
+//         //
+//         f.component(
+//             Child,
+//             OurProps {
+//                 //
+//                 foo: "hello".to_string(),
+//             },
+//             None,
+//             [],
+//         )
+//     });
+
+//     let st: &'a String = cx.use_hook(|_| "hello".to_string(), |f| f, |_| {});
+
+//     let d = annotate_lazy(move |f| {
+//         //
+//         f.component(
+//             Child2,
+//             Child2Props {
+//                 //
+//                 foo: st,
+//             },
+//             None,
+//             [],
+//         )
+//     });
+
+//     let e = match "asd" {
+//         b => {
+//             //
+
+//             annotate_lazy(move |f| {
+//                 //
+//                 f.text(format_args!("{}", props.foo))
+//             })
+//         }
+//         a => {
+//             //
+
+//             annotate_lazy(move |f| {
+//                 //
+//                 f.text(format_args!("{}", props.foo))
+//             })
+//         }
+//     };
+
+//     cx.render(annotate_lazy(move |f| {
+//         //
+
+//         f.raw_element(
+//             "div",
+//             None,
+//             [],
+//             [],
+//             [
+//                 //
+//                 f.fragment_from_iter(a),
+//                 f.fragment_from_iter(b),
+//                 f.fragment_from_iter(c),
+//                 f.fragment_from_iter(e),
+//             ],
+//             None,
+//         )
+//         // todo!()
+//     }))
+//     // cx.render(rsx! {
+//     //     div {
+//     //         div {
+//     //             {a}
+//     //             // {p}
+//     //             // {g}
+//     //             // {f}
+//     //         }
+//     //         // div {
+//     //         //     "asd"
+//     //         //     div {
+//     //         //         "asd"
+//     //         //     }
+//     //         // }
+//     //         // Child {
+//     //         //     foo: "asd".to_string(),
+//     //         // }
+//     //         Child2 {
+//     //             foo: s,
+//     //         }
+//     //     }
+//     // })
+// }
+
+// fn Child((cx, props): Scope<OurProps>) -> Element {
+//     cx.render(rsx! {
+//         div {
+//             div {}
+//         }
+//     })
+// }
+
+#[derive(Props)]
+struct Child2Props<'a> {
+    foo: &'a String,
+}
+
+fn Child2<'a>((cx, props): Scope<'a, Child2Props>) -> Element<'a> {
+    let node = cx
+        .render(rsx! {
+            div {
+
+            }
+        })
+        .unwrap();
+
+    cx.render(rsx! {
+        div {
+            ChildrenComp {
+                div {}
+            }
+        }
+    })
+}
+
+#[derive(Props)]
+struct ChildrenTest<'a> {
+    children: ScopeChildren<'a>,
+}
+
+fn ChildrenComp<'a>((cx, props): Scope<'a, ChildrenTest<'a>>) -> Element<'a> {
+    cx.render(rsx! {
+        div {
+            div {
+                {&props.children}
+            }
+        }
+    })
+}
+
+fn ChildrenMemo((cx, props): Scope<()>) -> Element {
+    todo!()
+}

examples/core/tasks.rs

@@ -0,0 +1 @@
+fn main() {}

examples/core/vdom_usage.rs

@@ -0,0 +1,17 @@
+use std::time::Duration;
+
+use dioxus_core::{lazynodes::LazyNodes, prelude::*};
+
+// #[async_std::main]
+fn main() {
+    static App: FC<()> =
+        |(cx, props)| cx.render(Some(LazyNodes::new(move |f| f.text(format_args!("hello")))));
+
+    let mut dom = VirtualDom::new(App);
+
+    dom.rebuild();
+
+    // let deadline = async_std::task::sleep(Duration::from_millis(50));
+
+    // let _fut = dom.run_with_deadline(|| deadline.);
+}