Added spread operator in dom! macro

Author: sfisol

CHANGES.md

@@ -11,6 +11,7 @@
 * Enums nad newtypes support in `AutoJsJson`
 * `bind!` macro now accepts namespaced variables, f. ex. `bind!(state.value, || value + 100)`
 * Components now accept value without attribute name if the names matches (`color={color}` → `{color}`)
+* In `dom!` macro `..` operator now spreads iterable into children (`<ul>{..items}</ul>`)
 
 ### Changed
 

crates/vertigo-macro/src/html_parser.rs

@@ -1,7 +1,7 @@
 use proc_macro::TokenStream;
 use proc_macro2::{Span, TokenStream as TokenStream2};
-use quote::quote;
-use syn::{Expr, __private::ToTokens};
+use quote::{quote, ToTokens};
+use syn::Expr;
 use syn_rsx::{parse, Node, NodeType};
 
 pub(crate) fn dom_inner(input: TokenStream) -> TokenStream {
@@ -301,10 +301,22 @@ fn convert_node(node: Node, convert_to_dom_node: bool) -> TokenStream2 {
                 let Some(block) = extract_value(child, parent_span) else {
                     continue;
                 };
-
-                out_child.push(quote! {
-                    .child(vertigo::EmbedDom::embed(#block))
-                });
+                let block_str = block.to_string();
+                if block_str.starts_with("..") {
+                    let value: TokenStream2 = block.into_iter().skip(2).collect();
+                    out_child.push(quote! {
+                        .children(
+                            #value
+                                .into_iter()
+                                .map(|item| vertigo::EmbedDom::embed(item))
+                                .collect::<Vec<_>>()
+                        )
+                    });
+                } else {
+                    out_child.push(quote! {
+                        .child(vertigo::EmbedDom::embed(#block))
+                    });
+                }
             }
             node_type => {
                 emit_error!(

crates/vertigo/src/tests/dom/list_spread.rs

@@ -0,0 +1,37 @@
+use crate::dom;
+use crate::{self as vertigo, DomNode};
+
+#[test]
+fn children_from_iter() {
+    let list = (0..10)
+        .map(|i| dom! { <li>{i}</li> });
+
+    let node = dom! {
+        <ul>
+            "Children: "
+            {..list}
+        </ul>
+    };
+
+    let DomNode::Node { node } = node else {
+        panic!("Expected DomNode::Node")
+    };
+
+    assert_eq!(node.get_children().len(), 11);
+}
+
+#[test]
+fn children_from_iter_inline() {
+    let node = dom! {
+        <ul>
+            "Children: "
+            {..(0..10).map(|i| dom! { <li>{i}</li> })}
+        </ul>
+    };
+
+    let DomNode::Node { node } = node else {
+        panic!("Expected DomNode::Node")
+    };
+
+    assert_eq!(node.get_children().len(), 11);
+}

crates/vertigo/src/tests/dom/mod.rs

@@ -1,2 +1,3 @@
 mod component;
+mod list_spread;
 mod params;

demo/app/src/app/js_api_access/mod.rs

@@ -1,4 +1,4 @@
-use vertigo::{bind, component, css, document, dom, dom_element, window, JsValue, Value};
+use vertigo::{bind, component, css, document, dom, window, JsValue, Value};
 
 #[derive(Default, PartialEq)]
 pub struct State {
@@ -12,10 +12,8 @@ pub fn JsApiAccess() {
     let container_css = css!{"
     "};
 
-    let items = dom_element!{ <ol /> }
-        .children(
-            (1..201).map(|i| dom! { <li>"List item" {i}</li> }).collect()
-        );
+    let items = (1..201)
+        .map(|i| dom! { <li>"List item" {i}</li> });
 
     let to_bottom = || {
         let max_y = window!("scrollMaxY");
@@ -53,7 +51,7 @@ pub fn JsApiAccess() {
                 <button on_click={ask}>"Ask"</button>
                 " Answer: " {state.answer}
             </p>
-            {items}
+            <ol>{..items}</ol>
             <button on_click={|| { window!("scrollTo()", 0, 0); }}>"to top"</button>
         </div>
     }