dnrops
/
leptos
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: add collect_view(cx) (#956)

This commit is contained in:
Roland Fredenhagen 2023-04-28 22:02:24 +02:00 committed by GitHub
parent 4b498a3b42
commit 1011c464dc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
18 changed files with 129 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/book/src/ssr/24_hydration_bugs.md
View File

@ -65,7 +65,7 @@ pub fn App(cx: Scope) -> impl IntoView {
};
data.into_iter()
.map(|value| view! { cx, <span>{value}</span> })
.collect::<Vec<_>>()
.collect_view(cx)
}
```

18
docs/book/src/view/04_iteration.md
View File

@ -31,6 +31,22 @@ view! { cx,
}
```
Leptos also provides a `.collect_view(cx)` helper function that allows you to collect any iterator of `T: IntoView` into `Vec<View>`.
```rust
let values = vec![0, 1, 2];
view! { cx,
// this will just render "012"
<p>{values.clone()}</p>
// or we can wrap them in <li>
<ul>
{values.into_iter()
.map(|n| view! { cx, <li>{n}</li>})
.collect_view(cx)}
</ul>
}
```
The fact that the _list_ is static doesn’t mean the interface needs to be static.
You can render dynamic items as part of a static list.
@ -52,7 +68,7 @@ let counter_buttons = counters
</li>
}
})
.collect::<Vec<_>>();
.collect_view(cx);
view! { cx,
<ul>{counter_buttons}</ul>

2
docs/book/src/view/07_errors.md
View File

@ -80,7 +80,7 @@ fn NumericInput(cx: Scope) -> impl IntoView {
{move || errors.get()
.into_iter()
.map(|(_, e)| view! { cx, <li>{e.to_string()}</li>})
.collect::<Vec<_>>()
.collect_view(cx)
}
</ul>
</div>

2
docs/book/src/view/09_component_children.md
View File

@ -103,7 +103,7 @@ pub fn WrapsChildren(cx: Scope, children: Children) -> impl IntoView {
.nodes
.into_iter()
.map(|child| view! { cx, <li>{child}</li> })
.collect::<Vec<_>>();
.collect_view(cx);
view! { cx,
<ul>{children}</ul>

64
examples/counters/tests/web.rs
View File

@ -1,12 +1,11 @@
use wasm_bindgen_test::*;
use wasm_bindgen::JsCast;
use wasm_bindgen_test::*;
wasm_bindgen_test_configure!(run_in_browser);
use counters::Counters;
use leptos::*;
use web_sys::HtmlElement;
use counters::Counters;
#[wasm_bindgen_test]
fn inc() {
mount_to_body(|cx| view! { cx, <Counters/> });
@ -25,7 +24,26 @@ fn inc() {
add_counter.click();
// check HTML
assert_eq!(div.inner_html(), "<button>Add Counter</button><button>Add 1000 Counters</button><button>Clear Counters</button><p>Total: <span><!-- <DynChild> -->0<!-- </DynChild> --></span> from <span><!-- <DynChild> -->3<!-- </DynChild> --></span> counters.</p><ul><!-- <Each> --><!-- <EachItem> --><!-- <Counter> --><li><button>-1</button><input type=\"text\"><span><!-- <DynChild> -->0<!-- </DynChild> --></span><button>+1</button><button>x</button></li><!-- </Counter> --><!-- </EachItem> --><!-- <EachItem> --><!-- <Counter> --><li><button>-1</button><input type=\"text\"><span><!-- <DynChild> -->0<!-- </DynChild> --></span><button>+1</button><button>x</button></li><!-- </Counter> --><!-- </EachItem> --><!-- <EachItem> --><!-- <Counter> --><li><button>-1</button><input type=\"text\"><span><!-- <DynChild> -->0<!-- </DynChild> --></span><button>+1</button><button>x</button></li><!-- </Counter> --><!-- </EachItem> --><!-- </Each> --></ul>");
assert_eq!(
div.inner_html(),
"<button>Add Counter</button><button>Add 1000 \
Counters</button><button>Clear Counters</button><p>Total: <span><!-- \
<DynChild> -->0<!-- </DynChild> --></span> from <span><!-- \
<DynChild> -->3<!-- </DynChild> --></span> counters.</p><ul><!-- \
<Each> --><!-- <EachItem> --><!-- <Counter> \
--><li><button>-1</button><input type=\"text\"><span><!-- <DynChild> \
-->0<!-- </DynChild> \
--></span><button>+1</button><button>x</button></li><!-- </Counter> \
--><!-- </EachItem> --><!-- <EachItem> --><!-- <Counter> \
--><li><button>-1</button><input type=\"text\"><span><!-- <DynChild> \
-->0<!-- </DynChild> \
--></span><button>+1</button><button>x</button></li><!-- </Counter> \
--><!-- </EachItem> --><!-- <EachItem> --><!-- <Counter> \
--><li><button>-1</button><input type=\"text\"><span><!-- <DynChild> \
-->0<!-- </DynChild> \
--></span><button>+1</button><button>x</button></li><!-- </Counter> \
--><!-- </EachItem> --><!-- </Each> --></ul>"
);
let counters = div
.query_selector("ul")
@ -53,7 +71,26 @@ fn inc() {
}
}
assert_eq!(div.inner_html(), "<button>Add Counter</button><button>Add 1000 Counters</button><button>Clear Counters</button><p>Total: <span><!-- <DynChild> -->6<!-- </DynChild> --></span> from <span><!-- <DynChild> -->3<!-- </DynChild> --></span> counters.</p><ul><!-- <Each> --><!-- <EachItem> --><!-- <Counter> --><li><button>-1</button><input type=\"text\"><span><!-- <DynChild> -->1<!-- </DynChild> --></span><button>+1</button><button>x</button></li><!-- </Counter> --><!-- </EachItem> --><!-- <EachItem> --><!-- <Counter> --><li><button>-1</button><input type=\"text\"><span><!-- <DynChild> -->2<!-- </DynChild> --></span><button>+1</button><button>x</button></li><!-- </Counter> --><!-- </EachItem> --><!-- <EachItem> --><!-- <Counter> --><li><button>-1</button><input type=\"text\"><span><!-- <DynChild> -->3<!-- </DynChild> --></span><button>+1</button><button>x</button></li><!-- </Counter> --><!-- </EachItem> --><!-- </Each> --></ul>");
assert_eq!(
div.inner_html(),
"<button>Add Counter</button><button>Add 1000 \
Counters</button><button>Clear Counters</button><p>Total: <span><!-- \
<DynChild> -->6<!-- </DynChild> --></span> from <span><!-- \
<DynChild> -->3<!-- </DynChild> --></span> counters.</p><ul><!-- \
<Each> --><!-- <EachItem> --><!-- <Counter> \
--><li><button>-1</button><input type=\"text\"><span><!-- <DynChild> \
-->1<!-- </DynChild> \
--></span><button>+1</button><button>x</button></li><!-- </Counter> \
--><!-- </EachItem> --><!-- <EachItem> --><!-- <Counter> \
--><li><button>-1</button><input type=\"text\"><span><!-- <DynChild> \
-->2<!-- </DynChild> \
--></span><button>+1</button><button>x</button></li><!-- </Counter> \
--><!-- </EachItem> --><!-- <EachItem> --><!-- <Counter> \
--><li><button>-1</button><input type=\"text\"><span><!-- <DynChild> \
-->3<!-- </DynChild> \
--></span><button>+1</button><button>x</button></li><!-- </Counter> \
--><!-- </EachItem> --><!-- </Each> --></ul>"
);
// remove the first counter
counters
@ -64,5 +101,20 @@ fn inc() {
.unchecked_into::<HtmlElement>()
.click();
assert_eq!(div.inner_html(), "<button>Add Counter</button><button>Add 1000 Counters</button><button>Clear Counters</button><p>Total: <span><!-- <DynChild> -->5<!-- </DynChild> --></span> from <span><!-- <DynChild> -->2<!-- </DynChild> --></span> counters.</p><ul><!-- <Each> --><!-- <EachItem> --><!-- <Counter> --><li><button>-1</button><input type=\"text\"><span><!-- <DynChild> -->2<!-- </DynChild> --></span><button>+1</button><button>x</button></li><!-- </Counter> --><!-- </EachItem> --><!-- <EachItem> --><!-- <Counter> --><li><button>-1</button><input type=\"text\"><span><!-- <DynChild> -->3<!-- </DynChild> --></span><button>+1</button><button>x</button></li><!-- </Counter> --><!-- </EachItem> --><!-- </Each> --></ul>");
assert_eq!(
div.inner_html(),
"<button>Add Counter</button><button>Add 1000 \
Counters</button><button>Clear Counters</button><p>Total: <span><!-- \
<DynChild> -->5<!-- </DynChild> --></span> from <span><!-- \
<DynChild> -->2<!-- </DynChild> --></span> counters.</p><ul><!-- \
<Each> --><!-- <EachItem> --><!-- <Counter> \
--><li><button>-1</button><input type=\"text\"><span><!-- <DynChild> \
-->2<!-- </DynChild> \
--></span><button>+1</button><button>x</button></li><!-- </Counter> \
--><!-- </EachItem> --><!-- <EachItem> --><!-- <Counter> \
--><li><button>-1</button><input type=\"text\"><span><!-- <DynChild> \
-->3<!-- </DynChild> \
--></span><button>+1</button><button>x</button></li><!-- </Counter> \
--><!-- </EachItem> --><!-- </Each> --></ul>"
);
}

2
examples/error_boundary/src/lib.rs
View File

@ -26,7 +26,7 @@ pub fn App(cx: Scope) -> impl IntoView {
{move || errors.get()
.into_iter()
.map(|(_, e)| view! { cx, <li>{e.to_string()}</li>})
.collect::<Vec<_>>()
.collect_view(cx)
}
</ul>
</div>

4
examples/fetch/src/lib.rs
View File

@ -55,7 +55,7 @@ pub fn fetch_example(cx: Scope) -> impl IntoView {
errors
.iter()
.map(|(_, e)| view! { cx, <li>{e.to_string()}</li> })
.collect::<Vec<_>>()
.collect_view(cx)
})
};
@ -76,7 +76,7 @@ pub fn fetch_example(cx: Scope) -> impl IntoView {
data.map(|data| {
data.iter()
.map(|s| view! { cx, <span>{s}</span> })
.collect::<Vec<_>>()
.collect_view(cx)
})
})
};

2
examples/router/src/lib.rs
View File

@ -97,7 +97,7 @@ pub fn ContactList(cx: Scope) -> impl IntoView {
<li><A href=contact.id.to_string()><span>{&contact.first_name} " " {&contact.last_name}</span></A></li>
}
})
.collect::<Vec<_>>()
.collect_view(cx)
})
};

9
examples/session_auth_axum/src/todo.rs
View File

@ -241,11 +241,11 @@ pub fn Todos(cx: Scope) -> impl IntoView {
todos.read(cx)
.map(move |todos| match todos {
Err(e) => {
vec![view! { cx, <pre class="error">"Server Error: " {e.to_string()}</pre>}.into_any()]
view! { cx, <pre class="error">"Server Error: " {e.to_string()}</pre>}.into_view(cx)
}
Ok(todos) => {
if todos.is_empty() {
vec![view! { cx, <p>"No tasks were found."</p> }.into_any()]
view! { cx, <p>"No tasks were found."</p> }.into_view(cx)
} else {
todos
.into_iter()
@ -266,9 +266,8 @@ pub fn Todos(cx: Scope) -> impl IntoView {
</ActionForm>
</li>
}
.into_any()
})
.collect::<Vec<_>>()
.collect_view(cx)
}
}
})
@ -287,7 +286,7 @@ pub fn Todos(cx: Scope) -> impl IntoView {
<li class="pending">{move || submission.input.get().map(|data| data.title) }</li>
}
})
.collect::<Vec<_>>()
.collect_view(cx)
};
view! {

4
examples/ssr_modes/src/app.rs
View File

@ -44,7 +44,7 @@ fn HomePage(cx: Scope) -> impl IntoView {
.map(|posts| {
posts.iter()
.map(|post| view! { cx, <li><a href=format!("/post/{}", post.id)>{&post.title}</a></li>})
.collect::<Vec<_>>()
.collect_view(cx)
})
)
};
@ -109,7 +109,7 @@ fn Post(cx: Scope) -> impl IntoView {
{move || errors.get()
.into_iter()
.map(|(_, error)| view! { cx, <li>{error.to_string()} </li> })
.collect::<Vec<_>>()
.collect_view(cx)
}
</ul>
</div>

4
examples/ssr_modes_axum/src/app.rs
View File

@ -49,7 +49,7 @@ fn HomePage(cx: Scope) -> impl IntoView {
.map(|posts| {
posts.iter()
.map(|post| view! { cx, <li><a href=format!("/post/{}", post.id)>{&post.title}</a> "|" <a href=format!("/post_in_order/{}", post.id)>{&post.title}"(in order)"</a></li>})
.collect::<Vec<_>>()
.collect_view(cx)
})
)
};
@ -114,7 +114,7 @@ fn Post(cx: Scope) -> impl IntoView {
{move || errors.get()
.into_iter()
.map(|(_, error)| view! { cx, <li>{error.to_string()} </li> })
.collect::<Vec<_>>()
.collect_view(cx)
}
</ul>
</div>

5
examples/todo_app_sqlite/src/todo.rs
View File

@ -176,8 +176,7 @@ pub fn Todos(cx: Scope) -> impl IntoView {
</li>
}
})
.collect::<Vec<_>>()
.into_view(cx)
.collect_view(cx)
}
}
})
@ -196,7 +195,7 @@ pub fn Todos(cx: Scope) -> impl IntoView {
<li class="pending">{move || submission.input.get().map(|data| data.title) }</li>
}
})
.collect::<Vec<_>>()
.collect_view(cx)
};
view! {

5
examples/todo_app_sqlite_axum/src/todo.rs
View File

@ -229,8 +229,7 @@ pub fn Todos(cx: Scope) -> impl IntoView {
</li>
}
})
.collect::<Vec<_>>()
.into_view(cx)
.collect_view(cx)
}
}
})
@ -249,7 +248,7 @@ pub fn Todos(cx: Scope) -> impl IntoView {
<li class="pending">{move || submission.input.get().map(|data| data.title) }</li>
}
})
.collect::<Vec<_>>()
.collect_view(cx)
};
view! {

5
examples/todo_app_sqlite_viz/src/todo.rs
View File

@ -183,8 +183,7 @@ pub fn Todos(cx: Scope) -> impl IntoView {
</li>
}
})
.collect::<Vec<_>>()
.into_view(cx)
.collect_view(cx)
}
}
})
@ -203,7 +202,7 @@ pub fn Todos(cx: Scope) -> impl IntoView {
<li class="pending">{move || submission.input.get().map(|data| data.title) }</li>
}
})
.collect::<Vec<_>>()
.collect_view(cx)
};
view! {

4
leptos/src/lib.rs
View File

@ -164,8 +164,8 @@ pub use leptos_dom::{
window_event_listener_with_precast,
},
html, log, math, mount_to, mount_to_body, svg, warn, window, Attribute,
Class, Errors, Fragment, HtmlElement, IntoAttribute, IntoClass,
IntoProperty, IntoView, NodeRef, Property, View,
Class, CollectView, Errors, Fragment, HtmlElement, IntoAttribute,
IntoClass, IntoProperty, IntoView, NodeRef, Property, View,
};
pub use leptos_macro::*;
pub use leptos_reactive::*;

15
leptos/src/suspense.rs
View File

@ -29,18 +29,15 @@ use std::rc::Rc;
/// <Suspense fallback=move || view! { cx, <p>"Loading (Suspense Fallback)..."</p> }>
/// {move || {
/// cats.read(cx).map(|data| match data {
/// None => view! { cx, <pre>"Error"</pre> }.into_any(),
/// Some(cats) => view! { cx,
/// <div>{
/// cats.iter()
/// .map(|src| {
/// None => view! { cx, <pre>"Error"</pre> }.into_view(cx),
/// Some(cats) => cats
/// .iter()
/// .map(|src| {
/// view! { cx,
/// <img src={src}/>
/// }
/// })
/// .collect::<Vec<_>>()
/// }</div>
/// }.into_any(),
/// })
/// .collect_view(cx),
/// })
/// }
/// }

15
leptos/src/transition.rs
View File

@ -39,18 +39,15 @@ use std::{
/// >
/// {move || {
/// cats.read(cx).map(|data| match data {
/// None => view! { cx, <pre>"Error"</pre> }.into_any(),
/// Some(cats) => view! { cx,
/// <div>{
/// cats.iter()
/// .map(|src| {
/// None => view! { cx, <pre>"Error"</pre> }.into_view(cx),
/// Some(cats) => cats
/// .iter()
/// .map(|src| {
/// view! { cx,
/// <img src={src}/>
/// }
/// })
/// .collect::<Vec<_>>()
/// }</div>
/// }.into_any(),
/// })
/// .collect_view(cx),
/// })
/// }
/// }

19
leptos_dom/src/lib.rs
View File

@ -209,6 +209,25 @@ where
}
}
/// Collects an iterator or collection into a [`View`].
pub trait CollectView {
/// Collects an iterator or collection into a [`View`].
fn collect_view(self, cx: Scope) -> View;
}
impl<I: IntoIterator<Item = T>, T: IntoView> CollectView for I {
#[cfg_attr(
any(debug_assertions, feature = "ssr"),
instrument(level = "info", name = "#text", skip_all)
)]
fn collect_view(self, cx: Scope) -> View {
self.into_iter()
.map(|v| v.into_view(cx))
.collect::<Fragment>()
.into_view(cx)
}
}
cfg_if! {
if #[cfg(all(target_arch = "wasm32", feature = "web"))] {
/// HTML element.