yewstack · hamza1311 · Jan 5, 2022 · Nov 26, 2021 · Nov 27, 2021 · Nov 27, 2021
diff --git a/Cargo.toml b/Cargo.toml
@@ -34,6 +34,7 @@ members = [
   "examples/two_apps",
   "examples/webgl",
   "examples/web_worker_fib",
+  "examples/suspense",
 
   # Release tools
   "packages/changelog",

diff --git a/examples/futures/src/markdown.rs b/examples/futures/src/markdown.rs
@@ -107,7 +107,7 @@ pub fn render_markdown(src: &str) -> Html {
     }
 
     if elems.len() == 1 {
-        VNode::VTag(Box::new(elems.pop().unwrap()))
+        Ok(VNode::VTag(Box::new(elems.pop().unwrap())))
     } else {
         html! {
             <div>{ for elems.into_iter() }</div>

diff --git a/examples/inner_html/src/main.rs b/examples/inner_html/src/main.rs
@@ -1,4 +1,5 @@
 use web_sys::console;
+use yew::virtual_dom::VNode;
 use yew::{Component, Context, Html};
 
 const HTML: &str = include_str!("document.html");
@@ -21,7 +22,7 @@ impl Component for Model {
         // See <https://github.com/yewstack/yew/issues/1546>
         console::log_1(&div);
 
-        Html::VRef(div.into())
+        Ok(VNode::VRef(div.into()))
     }
 }
 

diff --git a/examples/nested_list/src/list.rs b/examples/nested_list/src/list.rs
@@ -4,7 +4,7 @@ use crate::{Hovered, WeakComponentLink};
 use std::rc::Rc;
 use yew::html::{ChildrenRenderer, NodeRef};
 use yew::prelude::*;
-use yew::virtual_dom::{VChild, VComp};
+use yew::virtual_dom::{VChild, VComp, VNode};
 
 #[derive(Clone, PartialEq)]
 pub enum Variants {
@@ -41,8 +41,8 @@ where
     }
 }
 
-impl From<ListVariant> for Html {
-    fn from(variant: ListVariant) -> Html {
+impl From<ListVariant> for VNode {
+    fn from(variant: ListVariant) -> VNode {
         match variant.props {
             Variants::Header(props) => {
                 VComp::new::<ListHeader>(props, NodeRef::default(), None).into()
@@ -113,7 +113,7 @@ impl List {
     }
 
     fn view_items(children: &ChildrenRenderer<ListVariant>) -> Html {
-        children
+        let children = children
             .iter()
             .filter(|c| matches!(&c.props, Variants::Item(props) if !props.hide))
             .enumerate()
@@ -125,6 +125,8 @@ impl List {
                 }
                 c
             })
-            .collect::<Html>()
+            .collect::<VNode>();
+
+        html! {<>{children}</>}
     }
 }
diff --git a/examples/suspense/Cargo.toml b/examples/suspense/Cargo.toml
@@ -0,0 +1,21 @@
+[package]
+name = "suspense"
+version = "0.1.0"
+edition = "2018"
+license = "MIT OR Apache-2.0"
+
+# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
+
+[dependencies]
+yew = { path = "../../packages/yew" }
+gloo-timers = { version = "0.2.1", features = ["futures"] }
+wasm-bindgen-futures = "0.4"
+wasm-bindgen = "0.2"
+log = "0.4.14"
+console_log = { version = "0.2.0", features = ["color"] }
+
+[dependencies.web-sys]
+version = "0.3"
+features = [
+    "HtmlTextAreaElement",
+]
diff --git a/examples/suspense/README.md b/examples/suspense/README.md
@@ -0,0 +1,10 @@
+# Suspense Example
+
+[![Demo](https://img.shields.io/website?label=demo&url=https%3A%2F%2Fexamples.yew.rs%2Fsuspense)](https://examples.yew.rs/suspense)
+
+This is an example that demonstrates `<Suspense />` support.
+
+## Concepts
+
+This example shows that how `<Suspense />` works in Yew and how you can
+create hooks that utilises suspense.
diff --git a/examples/suspense/index.html b/examples/suspense/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Yew Suspense Demo</title>
+
+    <link data-trunk rel="sass" href="index.scss" />
+  </head>
+
+  <body></body>
+</html>
diff --git a/examples/suspense/index.scss b/examples/suspense/index.scss
@@ -0,0 +1,71 @@
+html, body {
+  font-family: sans-serif;
+
+  margin: 0;
+  padding: 0;
+
+  background-color: rgb(237, 244, 255);
+}
+
+.layout {
+  height: 100vh;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.content {
+  height: 600px;
+  width: 600px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  border-radius: 4px;
+  box-shadow: 0 0 5px 0  black;
+
+  background: white;
+}
+
+.content-area {
+  width: 350px;
+  height: 500px;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+textarea {
+  width: 300px;
+  height: 300px;
+  font-size: 15px;
+}
+
+.action-area {
+  padding-top: 40px;
+}
+
+button {
+  color: white;
+  height: 50px;
+  width: 300px;
+  font-size: 20px;
+  background-color: rgb(88, 164, 255);
+  border-radius: 5px;
+  border: none;
+}
+
+.hint {
+  padding-top: 20px;
+
+  font-size: 12px;
+
+  text-align: center;
+
+  color: rgb(100, 100, 100);
+}
diff --git a/examples/suspense/src/main.rs b/examples/suspense/src/main.rs
@@ -0,0 +1,63 @@
+use web_sys::HtmlTextAreaElement;
+use yew::prelude::*;
+
+use log::Level;
+
+mod use_sleep;
+
+use use_sleep::use_sleep;
+
+#[function_component(PleaseWait)]
+fn please_wait() -> Html {
+    html! {<div class="content-area">{"Please wait 5 Seconds..."}</div>}
+}
+
+#[function_component(AppContent)]
+fn app_content() -> Html {
+    let resleep = use_sleep()?;
+
+    let value = use_state(|| "I am writing a long story...".to_string());
+
+    let on_text_input = {
+        let value = value.clone();
+
+        Callback::from(move |e: InputEvent| {
+            let input: HtmlTextAreaElement = e.target_unchecked_into();
+
+            value.set(input.value());
+        })
+    };
+
+    let on_take_a_break = Callback::from(move |_| (resleep.clone())());
+
+    html! {
+        <div class="content-area">
+            <textarea value={value.to_string()} oninput={on_text_input}></textarea>
+            <div class="action-area">
+                <button onclick={on_take_a_break}>{"Take a break!"}</button>
+                <div class="hint">{"You can take a break at anytime"}<br />{"and your work will be preserved."}</div>
+            </div>
+        </div>
+    }
+}
+
+#[function_component(App)]
+fn app() -> Html {
+    let fallback = html! {<PleaseWait />};
+
+    html! {
+        <div class="layout">
+            <div class="content">
+                <h1>{"Yew Suspense Demo"}</h1>
+                <Suspense fallback={fallback}>
+                    <AppContent />
+                </Suspense>
+            </div>
+        </div>
+    }
+}
+
+fn main() {
+    console_log::init_with_level(Level::Trace).expect("Failed to initialise Log!");
+    yew::start_app::<App>();
+}
diff --git a/examples/suspense/src/use_sleep.rs b/examples/suspense/src/use_sleep.rs
@@ -0,0 +1,43 @@
+use std::rc::Rc;
+
+use gloo_timers::future::TimeoutFuture;
+use wasm_bindgen_futures::spawn_local;
+use yew::prelude::*;
+use yew::suspense::{Suspension, SuspensionResult};
+
+#[derive(PartialEq)]
+pub struct SleepState {
+    s: Suspension,
+}
+
+impl SleepState {
+    fn new() -> Self {
+        let (s, handle) = Suspension::new();
+
+        spawn_local(async move {
+            TimeoutFuture::new(5_000).await;
+
+            handle.resume();
+        });
+
+        Self { s }
+    }
+}
+
+impl Reducible for SleepState {
+    type Action = ();
+
+    fn reduce(self: Rc<Self>, _action: Self::Action) -> Rc<Self> {
+        Self::new().into()
+    }
+}
+
+pub fn use_sleep() -> SuspensionResult<Rc<dyn Fn()>> {
+    let sleep_state = use_reducer(SleepState::new);
+
+    if sleep_state.s.resumed() {
+        Ok(Rc::new(move || sleep_state.dispatch(())))
+    } else {
+        Err(sleep_state.s.clone())
+    }
+}
diff --git a/packages/yew-macro/src/html_tree/html_iterable.rs b/packages/yew-macro/src/html_tree/html_iterable.rs
@@ -42,7 +42,14 @@ impl ToTokens for HtmlIterable {
         let expr = &self.0;
         let new_tokens = quote_spanned! {expr.span()=>
             #[allow(unused_braces)]
-            ::std::iter::Iterator::collect::<::yew::virtual_dom::VNode>(::std::iter::IntoIterator::into_iter(#expr))
+            {
+                let mut nodes: ::std::vec::Vec<::yew::virtual_dom::VNode> = ::std::vec::Vec::new();
+                for __node in #expr {
+                    nodes.push(::yew::utils::TryIntoNode::try_into_node(__node)?.into_value());
+                }
+
+                ::std::iter::Iterator::collect::<::yew::virtual_dom::VNode>(::std::iter::IntoIterator::into_iter(nodes))
+            }
         };
 
         tokens.extend(new_tokens);
@@ -55,7 +62,14 @@ impl ToNodeIterator for HtmlIterable {
         // #expr can return anything that implements IntoIterator<Item=Into<T>>
         // We use a util method to avoid clippy warnings and reduce generated code size
         Some(quote_spanned! {expr.span()=>
-            ::yew::utils::into_node_iter(#expr)
+            {
+                let mut nodes = ::std::vec::Vec::new();
+                for __node in #expr {
+                    nodes.push(::yew::utils::TryIntoNode::try_into_node(__node)?.into_value());
+                }
+
+                ::std::iter::IntoIterator::into_iter(nodes)
+            }
         })
     }
 }
diff --git a/packages/yew-macro/src/html_tree/html_node.rs b/packages/yew-macro/src/html_tree/html_node.rs
@@ -60,7 +60,7 @@ impl ToNodeIterator for HtmlNode {
             HtmlNode::Expression(expr) => {
                 // NodeSeq turns both Into<T> and Vec<Into<T>> into IntoIterator<Item = T>
                 Some(
-                    quote_spanned! {expr.span()=> ::std::convert::Into::<::yew::utils::NodeSeq<_, _>>::into(#expr)},
+                    quote_spanned! {expr.span()=> ::yew::utils::TryIntoNodeSeq::try_into_node_seq(#expr)?},
                 )
             }
         }

diff --git a/packages/yew-macro/src/html_tree/mod.rs b/packages/yew-macro/src/html_tree/mod.rs
@@ -182,7 +182,7 @@ impl ToTokens for HtmlRootVNode {
         let new_tokens = self.0.to_token_stream();
         tokens.extend(quote! {{
             #[allow(clippy::useless_conversion)]
-            <::yew::virtual_dom::VNode as ::std::convert::From<_>>::from(#new_tokens)
+            (|| ::yew::html::RenderResult::Ok(::yew::utils::TryIntoNode::<_, ::yew::virtual_dom::VNode>::try_into_node(#new_tokens)?.into_value()))()
         }});
     }
 }

diff --git a/packages/yew-macro/tests/function_component_attr/bad-return-type-fail.stderr b/packages/yew-macro/tests/function_component_attr/bad-return-type-fail.stderr
@@ -8,6 +8,9 @@ error[E0308]: mismatched types
   --> $DIR/bad-return-type-fail.rs:13:5
    |
 12 | fn comp(_props: &Props) -> u32 {
-   |                            --- expected `VNode` because of return type
+   |                            --- expected `std::result::Result<VNode, RenderError>` because of return type
 13 |     1
-   |     ^ expected enum `VNode`, found integer
+   |     ^ expected enum `std::result::Result`, found integer
+   |
+   = note: expected enum `std::result::Result<VNode, RenderError>`
+              found type `{integer}`
diff --git a/packages/yew-macro/tests/function_component_attr/generic-pass.rs b/packages/yew-macro/tests/function_component_attr/generic-pass.rs
@@ -68,10 +68,10 @@ fn const_generics<const N: ::std::primitive::i32>() -> ::yew::Html {
 }
 
 fn compile_pass() {
-    ::yew::html! { <Comp<Props> a=10 /> };
-    ::yew::html! { <Comp1<::std::primitive::usize, ::std::primitive::usize> /> };
+    (::yew::html! { <Comp<Props> a=10 /> }).unwrap();
+    (::yew::html! { <Comp1<::std::primitive::usize, ::std::primitive::usize> /> }).unwrap();
 
-    ::yew::html! { <ConstGenerics<10> /> };
+    (::yew::html! { <ConstGenerics<10> /> }).unwrap();
 }
 
 fn main() {}