Chore: some cleanup and documentation

packages/core-macro/src/rsx/ambiguous.rs

@@ -50,9 +50,14 @@ impl Parse for AmbiguousElement {
                 false => {
                     let first_char = name_str.chars().next().unwrap();
                     if first_char.is_ascii_uppercase() {
-                        input
-                            .parse::<Component>()
-                            .map(|c| AmbiguousElement::Component(c))
+                        match name_str.as_str() {
+                            "Fragment" => input
+                                .parse::<Fragment>()
+                                .map(|c| AmbiguousElement::Fragment(c)),
+                            _ => input
+                                .parse::<Component>()
+                                .map(|c| AmbiguousElement::Component(c)),
+                        }
                     } else {
                         let name = input.parse::<Ident>().unwrap();
                         Err(Error::new(

packages/core-macro/src/rsx/component.rs

@@ -116,26 +116,16 @@ impl ToTokens for Component {
                 #( .add_child(#childs) )*
                 .finish()
         };
-        let name_str = name.segments.last().unwrap().ident.to_string();
-        match name_str.as_str() {
-            "Fragment" => tokens.append_all(quote! {
-                dioxus::builder::vfragment(
-                    __ctx,
-                    #key_token,
-                    #children
-                )
-            }),
-            _ => tokens.append_all(quote! {
-                dioxus::builder::virtual_child(
-                    __ctx,
-                    #name,
-                    #builder,
-                    #key_token,
-                    #children
-                )
-            }),
-        }
-        // }
+
+        tokens.append_all(quote! {
+            dioxus::builder::virtual_child(
+                __ctx,
+                #name,
+                #builder,
+                #key_token,
+                #children
+            )
+        })
     }
 }
 

packages/core-macro/src/rsx/fragment.rs

@@ -8,6 +8,10 @@
 //! - [ ] Children
 //! - [ ] Keys
 
+use syn::parse::ParseBuffer;
+
+use super::AmbiguousElement;
+
 use {
     proc_macro::TokenStream,
     proc_macro2::{Span, TokenStream as TokenStream2},
@@ -19,15 +23,44 @@ use {
     },
 };
 
-pub struct Fragment {}
+pub struct Fragment {
+    children: Vec<AmbiguousElement>,
+}
 impl Parse for Fragment {
     fn parse(input: ParseStream) -> Result<Self> {
-        todo!()
+        input.parse::<Ident>()?;
+
+        let children = Vec::new();
+
+        // parse the guts
+        let content: ParseBuffer;
+        syn::braced!(content in input);
+        while !content.is_empty() {
+            content.parse::<AmbiguousElement>()?;
+
+            if content.peek(Token![,]) {
+                let _ = content.parse::<Token![,]>();
+            }
+        }
+        Ok(Self { children })
     }
 }
 
 impl ToTokens for Fragment {
     fn to_tokens(&self, tokens: &mut TokenStream2) {
-        todo!()
+        let childs = &self.children;
+        let children = quote! {
+            ChildrenList::new(__ctx)
+                #( .add_child(#childs) )*
+                .finish()
+        };
+        tokens.append_all(quote! {
+            // #key_token,
+            dioxus::builder::vfragment(
+                __ctx,
+                None,
+                #children
+            )
+        })
     }
 }

packages/core-macro/src/rsx/mod.rs

@@ -26,7 +26,7 @@ pub use node::*;
 
 use crate::util::is_valid_tag;
 use proc_macro2::TokenStream as TokenStream2;
-use quote::{quote, ToTokens};
+use quote::{quote, ToTokens, TokenStreamExt};
 use syn::{
     parse::{Parse, ParseStream},
     Error, Ident, LitStr, Result, Token,
@@ -34,7 +34,7 @@ use syn::{
 
 pub struct RsxRender {
     custom_context: Option<Ident>,
-    root: AmbiguousElement,
+    roots: Vec<AmbiguousElement>,
 }
 
 impl Parse for RsxRender {
@@ -61,16 +61,13 @@ impl Parse for RsxRender {
                 None
             };
 
-        let root = { input.parse::<AmbiguousElement>() }?;
-        if !input.is_empty() {
-            return Err(Error::new(
-                input.span(),
-                "Currently only one element is allowed per component. Try wrapping your list of components in a `Fragment` tag",
-            ));
+        let mut roots = Vec::new();
+        while !input.is_empty() {
+            roots.push(input.parse::<AmbiguousElement>()?);
         }
 
         Ok(Self {
-            root,
+            roots,
             custom_context,
         })
     }
@@ -78,27 +75,41 @@ impl Parse for RsxRender {
 
 impl ToTokens for RsxRender {
     fn to_tokens(&self, out_tokens: &mut TokenStream2) {
-        let inner = &self.root;
-        let output = match &self.custom_context {
-            // The `in ctx` pattern allows directly rendering
-            Some(ident) => {
-                quote! {
-                    #ident.render(dioxus::prelude::LazyNodes::new(move |__ctx|{
-                        let bump = &__ctx.bump();
-                        #inner
-                    }))
-                }
-            }
-            // Otherwise we just build the LazyNode wrapper
-            None => {
-                quote! {
-                    dioxus::prelude::LazyNodes::new(move |__ctx|{
-                        let bump = &__ctx.bump();
-                        #inner
-                     })
-                }
+        let inner = if self.roots.len() == 1 {
+            let inner = &self.roots[0];
+            quote! {#inner}
+        } else {
+            let childs = &self.roots;
+            let children = quote! {
+                ChildrenList::new(__ctx)
+                    #( .add_child(#childs) )*
+                    .finish()
+            };
+            quote! {
+                // #key_token,
+                dioxus::builder::vfragment(
+                    __ctx,
+                    None,
+                    #children
+                )
             }
         };
-        output.to_tokens(out_tokens)
+
+        match &self.custom_context {
+            // The `in ctx` pattern allows directly rendering
+            Some(ident) => out_tokens.append_all(quote! {
+                #ident.render(dioxus::prelude::LazyNodes::new(move |__ctx|{
+                    let bump = &__ctx.bump();
+                    #inner
+                }))
+            }),
+            // Otherwise we just build the LazyNode wrapper
+            None => out_tokens.append_all(quote! {
+                dioxus::prelude::LazyNodes::new(move |__ctx|{
+                    let bump = &__ctx.bump();
+                    #inner
+                 })
+            }),
+        };
     }
 }

packages/core/examples/borrowed.rs

@@ -39,6 +39,7 @@ fn app(ctx: Context<Props>) -> VNode {
                     .item_handler(Callback(set_val.clone()))
                     .build(),
                 None,
+                &[],
             ));
         }
         root.finish()

packages/core/examples/nested.rs

@@ -19,6 +19,7 @@ static Header: FC<()> = |ctx| {
                 Bottom,
                 (),
                 None,
+                &[],
             ))))
             .finish()
     }))

packages/web/examples/fragment.rs

@@ -14,14 +14,12 @@ fn main() {
 
 static App: FC<()> = |ctx| {
     ctx.render(rsx! {
-        h2 { "abc 1" }
-        h2 { "abc 1" }
-        h2 { "abc 1" }
-        h2 { "abc 1" }
-        h2 { "abc 1" }
         h2 { "abc 1" }
         div {
             "hello world!"
         }
+        Fragment {
+            h2 { "abc 2"}
+        }
     })
 };

packages/web/examples/helloworld.rs

@@ -0,0 +1,11 @@
+use dioxus_web::prelude::*;
+
+fn main() {
+    wasm_bindgen_futures::spawn_local(dioxus_web::WebsysRenderer::start(App))
+}
+
+fn App(ctx: Context<()>) -> VNode {
+    ctx.render(rsx! {
+        div { "Hello, world!" }
+    })
+}

packages/web/examples/todomvcsingle.rs

@@ -149,11 +149,11 @@ pub fn FilterToggles(ctx: Context<()>) -> VNode {
     .iter()
     .map(|(name, path, filter)| {
         rsx!(
-            li {
-                class: "{name}"
-                a { "{name}",
+            li { class: "{name}"
+                a {
                     href: "{path}",
                     onclick: move |_| reducer.set_filter(&filter),
+                    "{name}",
                 }
             }
         )
@@ -168,7 +168,7 @@ pub fn FilterToggles(ctx: Context<()>) -> VNode {
         footer {
             span {
                 strong {"{items_left}"}
-                span {"{item_text} left"}
+                span { "{item_text} left" }
             }
             ul {
                 class: "filters"
@@ -180,8 +180,7 @@ pub fn FilterToggles(ctx: Context<()>) -> VNode {
 
 pub fn Footer(ctx: Context<()>) -> VNode {
     rsx! { in ctx,
-        footer {
-            class: "info"
+        footer { class: "info"
             p {"Double-click to edit a todo"}
             p {
                 "Created by "