From 3f2a9facf894a15babc9ec8b745471443cd0698c Mon Sep 17 00:00:00 2001
From: Greg Johnston <greg.johnston@gmail.com>
Date: Tue, 26 Sep 2023 14:24:02 -0400
Subject: [PATCH] change: enable inline children for `For` by switching to
 `children` and `bind:` (#1773)

---
 benchmarks/src/todomvc/leptos.rs              |  2 +-
 docs/book/src/router/17_nested_routing.md     |  4 +-
 examples/counters/src/lib.rs                  |  2 +-
 examples/counters_stable/src/lib.rs           |  2 +-
 examples/errors_axum/src/error_template.rs    |  2 +-
 examples/hackernews/src/routes/stories.rs     | 10 ++--
 examples/hackernews/src/routes/story.rs       | 12 ++--
 .../hackernews_axum/src/error_template.rs     |  2 +-
 .../hackernews_axum/src/routes/stories.rs     | 10 ++--
 examples/hackernews_axum/src/routes/story.rs  | 12 ++--
 .../src/error_template.rs                     |  2 +-
 .../src/routes/stories.rs                     | 10 ++--
 .../hackernews_js_fetch/src/error_template.rs |  2 +-
 .../hackernews_js_fetch/src/routes/stories.rs | 10 ++--
 .../hackernews_js_fetch/src/routes/story.rs   | 12 ++--
 examples/js-framework-benchmark/src/lib.rs    |  2 +-
 .../session_auth_axum/src/error_template.rs   |  2 +-
 .../src/error_template.rs                     |  2 +-
 .../todo_app_sqlite_viz/src/error_template.rs |  2 +-
 examples/todomvc/src/lib.rs                   |  6 +-
 leptos/src/for_loop.rs                        | 57 +++++++++++++++++--
 21 files changed, 110 insertions(+), 55 deletions(-)

diff --git a/benchmarks/src/todomvc/leptos.rs b/benchmarks/src/todomvc/leptos.rs
index 97e36c210..aed57ed8d 100644
--- a/benchmarks/src/todomvc/leptos.rs
+++ b/benchmarks/src/todomvc/leptos.rs
@@ -192,7 +192,7 @@ pub fn TodoMVC(todos: Todos) -> impl IntoView {
                         <For
                             each=filtered_todos
                             key=|todo| todo.id
-                            view=move |todo: Todo| {
+                            children=move |todo: Todo| {
                                 view! { <Todo todo=todo.clone()/> }
                             }
                         />
diff --git a/docs/book/src/router/17_nested_routing.md b/docs/book/src/router/17_nested_routing.md
index 340ebbe57..82ca0961a 100644
--- a/docs/book/src/router/17_nested_routing.md
+++ b/docs/book/src/router/17_nested_routing.md
@@ -143,8 +143,8 @@ pub fn ContactList() -> impl IntoView {
       // the contact list
       <For each=contacts
         key=|contact| contact.id
-        view=|contact| todo!()
-      >
+        children=|contact| todo!()
+      />
       // the nested child, if any
       // don’t forget this!
       <Outlet/>
diff --git a/examples/counters/src/lib.rs b/examples/counters/src/lib.rs
index a05c76060..b154be3b6 100644
--- a/examples/counters/src/lib.rs
+++ b/examples/counters/src/lib.rs
@@ -65,7 +65,7 @@ pub fn Counters() -> impl IntoView {
                 <For
                     each=counters
                     key=|counter| counter.0
-                    view=move |(id, (value, set_value)): (usize, (ReadSignal<i32>, WriteSignal<i32>))| {
+                    children=move |(id, (value, set_value)): (usize, (ReadSignal<i32>, WriteSignal<i32>))| {
                         view! {
                             <Counter id value set_value/>
                         }
diff --git a/examples/counters_stable/src/lib.rs b/examples/counters_stable/src/lib.rs
index e09a38a01..35e31bdd4 100644
--- a/examples/counters_stable/src/lib.rs
+++ b/examples/counters_stable/src/lib.rs
@@ -67,7 +67,7 @@ pub fn Counters() -> impl IntoView {
                 <For
                     each={move || counters.get()}
                     key={|counter| counter.0}
-                    view=move |(id, (value, set_value))| {
+                    children=move |(id, (value, set_value))| {
                         view! {
                             <Counter id value set_value/>
                         }
diff --git a/examples/errors_axum/src/error_template.rs b/examples/errors_axum/src/error_template.rs
index 5badfd119..045ff1c78 100644
--- a/examples/errors_axum/src/error_template.rs
+++ b/examples/errors_axum/src/error_template.rs
@@ -45,7 +45,7 @@ pub fn ErrorTemplate(
             // a unique key for each item as a reference
             key=|(index, _)| *index
             // renders each item to a view
-            view=move |error| {
+            children=move |error| {
                 let error_string = error.1.to_string();
                 let error_code= error.1.status_code();
                 view! {
diff --git a/examples/hackernews/src/routes/stories.rs b/examples/hackernews/src/routes/stories.rs
index 94f0689d1..0fe0ef2fb 100644
--- a/examples/hackernews/src/routes/stories.rs
+++ b/examples/hackernews/src/routes/stories.rs
@@ -91,12 +91,10 @@ pub fn Stories() -> impl IntoView {
                                         <For
                                             each=move || stories.clone()
                                             key=|story| story.id
-                                            view=move |story: api::Story| {
-                                                view! {
-                                                    <Story story/>
-                                                }
-                                            }
-                                        />
+                                            let:story
+                                        >
+                                            <Story story/>
+                                        </For>
                                     </ul>
                                 }.into_any())
                             }
diff --git a/examples/hackernews/src/routes/story.rs b/examples/hackernews/src/routes/story.rs
index 313d024f6..c63dafc04 100644
--- a/examples/hackernews/src/routes/story.rs
+++ b/examples/hackernews/src/routes/story.rs
@@ -57,8 +57,10 @@ pub fn Story() -> impl IntoView {
                             <For
                                 each=move || story.comments.clone().unwrap_or_default()
                                 key=|comment| comment.id
-                                view=move |comment| view! {  <Comment comment /> }
-                            />
+                                let:comment
+                            >
+                                <Comment comment />
+                            </For>
                         </ul>
                     </div>
                 </div>
@@ -100,8 +102,10 @@ pub fn Comment(comment: api::Comment) -> impl IntoView {
                                 <For
                                     each=move || comments.clone()
                                     key=|comment| comment.id
-                                    view=move |comment: api::Comment| view! { <Comment comment /> }
-                                />
+                                    let:comment
+                                >
+                                    <Comment comment />
+                                </For>
                             </ul>
                         }
                     })}
diff --git a/examples/hackernews_axum/src/error_template.rs b/examples/hackernews_axum/src/error_template.rs
index 413d94946..58a8af2ef 100644
--- a/examples/hackernews_axum/src/error_template.rs
+++ b/examples/hackernews_axum/src/error_template.rs
@@ -15,7 +15,7 @@ pub fn error_template(errors: Option<RwSignal<Errors>>) -> View {
           // a unique key for each item as a reference
           key=|(key, _)| key.clone()
           // renders each item to a view
-          view= move | (_, error)| {
+          children=move | (_, error)| {
           let error_string = error.to_string();
             view! {
 
diff --git a/examples/hackernews_axum/src/routes/stories.rs b/examples/hackernews_axum/src/routes/stories.rs
index 62a309495..150ce2192 100644
--- a/examples/hackernews_axum/src/routes/stories.rs
+++ b/examples/hackernews_axum/src/routes/stories.rs
@@ -90,12 +90,10 @@ pub fn Stories() -> impl IntoView {
                                         <For
                                             each=move || stories.clone()
                                             key=|story| story.id
-                                            view=move | story: api::Story| {
-                                                view! {
-                                                    <Story story/>
-                                                }
-                                            }
-                                        />
+                                            let:story
+                                        >
+                                            <Story story/>
+                                        </For>
                                     </ul>
                                 }.into_any())
                             }
diff --git a/examples/hackernews_axum/src/routes/story.rs b/examples/hackernews_axum/src/routes/story.rs
index edeaa9073..00449a03a 100644
--- a/examples/hackernews_axum/src/routes/story.rs
+++ b/examples/hackernews_axum/src/routes/story.rs
@@ -57,8 +57,10 @@ pub fn Story() -> impl IntoView {
                             <For
                                 each=move || story.comments.clone().unwrap_or_default()
                                 key=|comment| comment.id
-                                view=move | comment| view! { <Comment comment /> }
-                            />
+                                let:comment
+                            >
+                                <Comment comment />
+                            </For>
                         </ul>
                     </div>
                 </div>
@@ -100,8 +102,10 @@ pub fn Comment(comment: api::Comment) -> impl IntoView {
                                 <For
                                     each=move || comments.clone()
                                     key=|comment| comment.id
-                                    view=move | comment: api::Comment| view! {  <Comment comment /> }
-                                />
+                                    let:comment
+                                >
+                                    <Comment comment />
+                                </For>
                             </ul>
                         }
                     })}
diff --git a/examples/hackernews_islands_axum/src/error_template.rs b/examples/hackernews_islands_axum/src/error_template.rs
index 413d94946..b1bd543d2 100644
--- a/examples/hackernews_islands_axum/src/error_template.rs
+++ b/examples/hackernews_islands_axum/src/error_template.rs
@@ -15,7 +15,7 @@ pub fn error_template(errors: Option<RwSignal<Errors>>) -> View {
           // a unique key for each item as a reference
           key=|(key, _)| key.clone()
           // renders each item to a view
-          view= move | (_, error)| {
+          children= move | (_, error)| {
           let error_string = error.to_string();
             view! {
 
diff --git a/examples/hackernews_islands_axum/src/routes/stories.rs b/examples/hackernews_islands_axum/src/routes/stories.rs
index 147153a08..f6ddac144 100644
--- a/examples/hackernews_islands_axum/src/routes/stories.rs
+++ b/examples/hackernews_islands_axum/src/routes/stories.rs
@@ -98,12 +98,10 @@ pub fn Stories() -> impl IntoView {
                                     <For
                                         each=move || stories.clone()
                                         key=|story| story.id
-                                        view=move |story: api::Story| {
-                                            view! {
-                                                <Story story/>
-                                            }
-                                        }
-                                    />
+                                        let:story
+                                    >
+                                        <Story story/>
+                                    </For>
                                 </ul>
                             }))}
                     </Transition>
diff --git a/examples/hackernews_js_fetch/src/error_template.rs b/examples/hackernews_js_fetch/src/error_template.rs
index 2937f8928..adad9489c 100644
--- a/examples/hackernews_js_fetch/src/error_template.rs
+++ b/examples/hackernews_js_fetch/src/error_template.rs
@@ -15,7 +15,7 @@ pub fn error_template(errors: Option<RwSignal<Errors>>) -> View {
           // a unique key for each item as a reference
           key=|(key, _)| key.clone()
           // renders each item to a view
-          view= move |(_, error)| {
+          children= move |(_, error)| {
           let error_string = error.to_string();
             view! {
 
diff --git a/examples/hackernews_js_fetch/src/routes/stories.rs b/examples/hackernews_js_fetch/src/routes/stories.rs
index 700a84ae1..4deaa5a38 100644
--- a/examples/hackernews_js_fetch/src/routes/stories.rs
+++ b/examples/hackernews_js_fetch/src/routes/stories.rs
@@ -95,12 +95,10 @@ pub fn Stories() -> impl IntoView {
                                         <For
                                             each=move || stories.clone()
                                             key=|story| story.id
-                                            view=move |story: api::Story| {
-                                                view! {
-                                                    <Story story/>
-                                                }
-                                            }
-                                        />
+                                            let:story
+                                        >
+                                            <Story story/>
+                                        </For>
                                     </ul>
                                 }.into_any())
                             }
diff --git a/examples/hackernews_js_fetch/src/routes/story.rs b/examples/hackernews_js_fetch/src/routes/story.rs
index daaffa4c9..fa946ba65 100644
--- a/examples/hackernews_js_fetch/src/routes/story.rs
+++ b/examples/hackernews_js_fetch/src/routes/story.rs
@@ -58,8 +58,10 @@ pub fn Story() -> impl IntoView {
                                     <For
                                         each=move || story.comments.clone().unwrap_or_default()
                                         key=|comment| comment.id
-                                        view=move |comment| view! {  <Comment comment /> }
-                                    />
+                                        let:comment 
+                                    >
+                                        <Comment comment/>
+                                    </For>
                                 </ul>
                             </div>
                         </div>
@@ -103,8 +105,10 @@ pub fn Comment(comment: api::Comment) -> impl IntoView {
                                 <For
                                     each=move || comments.clone()
                                     key=|comment| comment.id
-                                    view=move |comment: api::Comment| view! { <Comment comment /> }
-                                />
+                                    let:comment
+                                >
+                                    <Comment comment />
+                                </For>
                             </ul>
                         }
                     })}
diff --git a/examples/js-framework-benchmark/src/lib.rs b/examples/js-framework-benchmark/src/lib.rs
index c25e246f8..cabc062f4 100644
--- a/examples/js-framework-benchmark/src/lib.rs
+++ b/examples/js-framework-benchmark/src/lib.rs
@@ -168,7 +168,7 @@ pub fn App() -> impl IntoView {
                     <For
                         each={data}
                         key={|row| row.id}
-                        view=move |row: RowData| {
+                        children=move |row: RowData| {
                             let row_id = row.id;
                             let (label, _) = row.label;
                             on_cleanup({
diff --git a/examples/session_auth_axum/src/error_template.rs b/examples/session_auth_axum/src/error_template.rs
index 2480d71cf..329dfd7f4 100644
--- a/examples/session_auth_axum/src/error_template.rs
+++ b/examples/session_auth_axum/src/error_template.rs
@@ -46,7 +46,7 @@ pub fn ErrorTemplate(
         // a unique key for each item as a reference
         key=|(index, _error)| *index
         // renders each item to a view
-        view= move |error| {
+        children=move |error| {
         let error_string = error.1.to_string();
         let error_code= error.1.status_code();
           view! {
diff --git a/examples/todo_app_sqlite_axum/src/error_template.rs b/examples/todo_app_sqlite_axum/src/error_template.rs
index 2480d71cf..329dfd7f4 100644
--- a/examples/todo_app_sqlite_axum/src/error_template.rs
+++ b/examples/todo_app_sqlite_axum/src/error_template.rs
@@ -46,7 +46,7 @@ pub fn ErrorTemplate(
         // a unique key for each item as a reference
         key=|(index, _error)| *index
         // renders each item to a view
-        view= move |error| {
+        children=move |error| {
         let error_string = error.1.to_string();
         let error_code= error.1.status_code();
           view! {
diff --git a/examples/todo_app_sqlite_viz/src/error_template.rs b/examples/todo_app_sqlite_viz/src/error_template.rs
index 5eb533077..6a367604e 100644
--- a/examples/todo_app_sqlite_viz/src/error_template.rs
+++ b/examples/todo_app_sqlite_viz/src/error_template.rs
@@ -46,7 +46,7 @@ pub fn ErrorTemplate(
         // a unique key for each item as a reference
         key=|(index, _error)| *index
         // renders each item to a view
-        view= move |error| {
+        children= move |error| {
         let error_string = error.1.to_string();
         let error_code= error.1.status_code();
           view! {
diff --git a/examples/todomvc/src/lib.rs b/examples/todomvc/src/lib.rs
index 4b70b522a..27d003486 100644
--- a/examples/todomvc/src/lib.rs
+++ b/examples/todomvc/src/lib.rs
@@ -240,8 +240,10 @@ pub fn TodoMVC() -> impl IntoView {
                         <For
                             each=filtered_todos
                             key=|todo| todo.id
-                            view=move |todo: Todo| view! { <Todo todo /> }
-                        />
+                            let:todo
+                        >
+                            <Todo todo/>
+                        </For>
                     </ul>
                 </section>
                 <footer
diff --git a/leptos/src/for_loop.rs b/leptos/src/for_loop.rs
index dfb3b8fc4..b125e1488 100644
--- a/leptos/src/for_loop.rs
+++ b/leptos/src/for_loop.rs
@@ -28,7 +28,19 @@ use std::hash::Hash;
 ///         // a unique key for each item
 ///         key=|counter| counter.id
 ///         // renders each item to a view
-///         view=move |counter: Counter| {
+///         children=move |counter: Counter| {
+///           view! {
+///             <button>"Value: " {move || counter.count.get()}</button>
+///           }
+///         }
+///       />
+///       <For
+///         // a function that returns the items we're iterating over; a signal is fine
+///         each=move || counters.get()
+///         // a unique key for each item
+///         key=|counter| counter.id
+///         // renders each item to a view
+///         children=move |counter: Counter| {
 ///           view! {
 ///             <button>"Value: " {move || counter.count.get()}</button>
 ///           }
@@ -48,8 +60,45 @@ pub fn For<IF, I, T, EF, N, KF, K>(
     each: IF,
     /// A key function that will be applied to each item.
     key: KF,
-    /// The view that will be displayed for each item.
-    view: EF,
+    /// A function that takes the item, and returns the view that will be displayed for each item.
+    ///
+    /// ## Syntax
+    /// This can be passed directly in the `view` children of the `<For/>` by using the
+    /// `let:` syntax to specify the name for the data variable passed in the argument.
+    ///
+    /// ```rust
+    /// # use leptos::*;
+    /// # if false {
+    /// let (data, set_data) = create_signal(vec![0, 1, 2]);
+    /// view! {
+    ///     <For
+    ///         each=move || data.get()
+    ///         key=|n| *n
+    ///         // stores the item in each row in a variable named `data`
+    ///         let:data
+    ///     >
+    ///         <p>{data}</p>
+    ///     </For>
+    /// }
+    /// # ;
+    /// # }
+    /// ```
+    /// is the same as
+    ///  ```rust
+    /// # use leptos::*;
+    /// # if false {
+    /// let (data, set_data) = create_signal(vec![0, 1, 2]);
+    /// view! {
+    ///     <For
+    ///         each=move || data.get()
+    ///         key=|n| *n
+    ///         children=|data| view! { <p>{data}</p> }
+    ///     />
+    /// }
+    /// # ;
+    /// # }
+    /// ```
+    children: EF,
 ) -> impl IntoView
 where
     IF: Fn() -> I + 'static,
@@ -60,5 +109,5 @@ where
     K: Eq + Hash + 'static,
     T: 'static,
 {
-    leptos_dom::Each::new(each, key, view).into_view()
+    leptos_dom::Each::new(each, key, children).into_view()
 }