Docs: more examples and docs

examples/listener.rs

@@ -2,13 +2,7 @@
 
 use dioxus_core::prelude::*;
 
-fn main() {
-    Some(10)
-        .map(|f| f * 5)
-        .map(|f| f / 3)
-        .map(|f| f * 5)
-        .map(|f| f / 3);
-}
+fn main() {}
 
 static Example: FC<()> = |ctx| {
     let (name, set_name) = use_state(&ctx, || "...?");

examples/rsx_usage.rs

@@ -5,10 +5,6 @@
 //!
 //! A full in-depth reference guide is available at: https://www.notion.so/rsx-macro-basics-ef6e367dec124f4784e736d91b0d0b19
 //!
-//! ## Topics
-//!
-//!
-//!
 //! ### Elements
 //! - Create any element from its tag
 //! - Accept compile-safe attributes for each tag
@@ -46,23 +42,119 @@ fn main() {
     dioxus::webview::launch(Example);
 }
 
+/// When trying to return "nothing" to Dioxus, you'll need to specify the type parameter or Rust will be sad.
+/// This type alias specifices the type for you so you don't need to write "None as Option<()>"
+const NONE_ELEMENT: Option<()> = None;
+
 use baller::Baller;
 use dioxus_core::prelude::*;
 
-static Example: FC<()> = |ctx| {
-    ctx.render(rsx! {
+static Example: FC<()> = |cx| {
+    let formatting = "formatting!";
+    let formatting_tuple = ("a", "b");
+    let lazy_fmt = format_args!("lazily formatted text");
+    cx.render(rsx! {
         div {
             // Elements
+            div {}
+            h1 {"Some text"}
+            h1 {"Some text with {formatting}"}
+            h1 {"Formatting basic expressions {formatting_tuple.0} and {formatting_tuple.1}"}
+            h2 {
+                "Multiple"
+                "Text"
+                "Blocks"
+                "Use comments as separators in html"
+            }
+            div {
+                h1 {"multiple"}
+                h2 {"nested"}
+                h3 {"elements"}
+            }
+            div {
+                class: "my special div"
+                h1 {"Headers and attributes!"}
+            }
+            div {
+                // pass simple rust expressions in
+                class: lazy_fmt,
+                id: format_args!("attributes can be passed lazily with std::fmt::Arguments"),
+                div {
+                    class: {
+                        const WORD: &str = "expressions";
+                        format_args!("Arguments can be passed in through curly braces for complex {}", WORD)
+                    }
+                }
+            }
 
+            // Expressions can be used in element position too:
+            {rsx!(p { "More templating!" })}
+            {html!(<p>"Even HTML templating!!"</p>)}
 
+            // Iterators
+            {(0..10).map(|i| rsx!(li { "{i}" }))}
+            {{
+                let data = std::collections::HashMap::<&'static str, &'static str>::new();
+                // Iterators *should* have keys when you can provide them.
+                // Keys make your app run faster. Make sure your keys are stable, unique, and predictable.
+                // Using an "ID" associated with your data is a good idea.
+                data.into_iter().map(|(k, v)| rsx!(li { key: "{k}" "{v}" }))
+            }}
+            
 
+            // Matching
+            // Matching will throw a Rust error about "no two closures are the same type"
+            // To fix this, call "render" method or use the "in" syntax to produce VNodes.
+            // There's nothing we can do about it, sorry :/ (unless you want *really* unhygenic macros)
+            {match true {
+                true => rsx!(in cx, h1 {"Top text"}),
+                false => cx.render(rsx!( h1 {"Bottom text"}))
+            }}
 
-            // ==============
-            //   Components
-            // ==============
+            // Conditional rendering
+            // Dioxus conditional rendering is based around None/Some. We have no special syntax for conditionals.
+            // You can convert a bool condition to rsx! with .then and .or
+            {true.then(|| rsx!(div {}))}
+
+            // True conditions need to be rendered (same reasons as matching)
+            {if true {
+                rsx!(in cx, h1 {"Top text"})
+            } else {
+                cx.render(rsx!( h1 {"Bottom text"}))
+            }}
+
+            // returning "None" is a bit noisy... but rare in practice
+            {None as Option<()>}
+
+            // Use the Dioxus type-alias for less noise
+            {NONE_ELEMENT}
+
+            // can also just use empty fragments
+            Fragment {}
+
+            // Fragments let you insert groups of nodes without a parent.
+            // This lets you make components that insert elements as siblings without a container.
+            div {"A"}
+            Fragment {
+                div {"B"}
+                div {"C"}
+                Fragment {
+                    "D"
+                    Fragment {
+                        "heavily nested fragments is an antipattern"
+                        "they cause Dioxus to do unnecessary work"
+                        "don't use them carelessly if you can help it"
+                    }
+                }
+            }
+            
+
+            // Components
             // Can accept any paths
-            crate::baller::Baller {}
+            // Notice how you still get syntax highlighting and IDE support :)
+            Baller {}
             baller::Baller { }
+            crate::baller::Baller {}
 
             // Can take properties
             Taller { a: "asd" }
@@ -71,10 +163,14 @@ static Example: FC<()> = |ctx| {
             Taller { a: "asd" }
 
             // Can pass in props directly
-            Taller { a: "asd" /* ..{props}*/  }
+            {{
+                todo!("this neesd to be implemented");
+                let props = TallerProps {a: "hello"};
+                rsx!(Taller {a: "a"})
+            }}
 
             // Can take children
-            Taller { a: "asd", div {} }
+            Taller { a: "asd", div {"hello world!"} }
         }
     })
 };
@@ -83,7 +179,8 @@ mod baller {
     use super::*;
     pub struct BallerProps {}
 
-    pub fn Baller(ctx: Context<()>) -> VNode {
+    /// This component totally balls
+    pub fn Baller(cx: Context<()>) -> VNode {
         todo!()
     }
 }
@@ -93,6 +190,7 @@ pub struct TallerProps {
     a: &'static str,
 }
 
+/// This component is taller than most :)
 pub fn Taller(ctx: Context<TallerProps>) -> VNode {
     let b = true;
     todo!()

examples/webview.rs

@@ -6,22 +6,26 @@
 //! Under the hood, the dioxus_webview crate bridges a native Dioxus VirtualDom with a custom prebuit application running
 //! in the webview runtime. Custom handlers are provided for the webview instance to consume patches and emit user events
 //! into the native VDom instance.
+//!
+//! Currently, NodeRefs won't work properly, but all other event functionality will.
 
 use dioxus::prelude::*;
 
 fn main() {
-    dioxus::webview::launch(|ctx| {
-        let (count, set_count) = use_state(&ctx, || 0);
-
-        ctx.render(rsx! {
-            div {
-                h1 { "Dioxus Desktop Demo" }
-                p { "Count is {count}" }
-                button {
-                    "Click to increment"
-                    onclick: |_| set_count(count + 1)
-                }
-            }
-        })
-    });
+    dioxus::webview::launch(App);
 }
+
+static App: FC<()> = |cx| {
+    let (count, set_count) = use_state(&cx, || 0);
+
+    cx.render(rsx! {
+        div {
+            h1 { "Dioxus Desktop Demo" }
+            p { "Count is {count}" }
+            button {
+                "Click to increment"
+                onclick: move |_| set_count(count + 1)
+            }
+        }
+    })
+};