update HTML concept to use function components (#2511)

* update HTML concept to use function components

* adress comments 1

* fix test

* adress comments 2

* code outside of html

website/docs/concepts/html/classes.mdx

@@ -3,8 +3,8 @@ title: "Classes"
 description: "A handy macro to handle classes"
 ---
 
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
 
 ## Classes
 
@@ -98,10 +98,7 @@ html! {
 ## Components that accept classes
 
 ```rust
-use yew::{
-    classes, html, Children, Classes, Component,
-    Context, Html, Properties
-};
+use yew::prelude::*;
 
 #[derive(PartialEq, Properties)]
 struct Props {
@@ -111,33 +108,23 @@ struct Props {
     children: Children,
 }
 
-struct MyComponent;
-
-impl Component for MyComponent {
-    type Message = ();
-    type Properties = Props;
-
-    fn create(_ctx: &Context<Self>) -> Self {
-        Self
-    }
-
-    fn view(&self, ctx: &Context<Self>) -> Html {
-        let Props {
-            class,
-            fill,
-            children,
-        } = &ctx.props();
-        html! {
-            <div
-                class={classes!(
-                    "my-container-class",
-                    fill.then(|| Some("my-fill-class")),
-                    class.clone(),
-                )}
-            >
-                { children.clone() }
-            </div>
-        }
+#[function_component]
+fn MyComponent(props: &Props) -> Html {
+    let Props {
+        class,
+        fill,
+        children,
+    } = props;
+    html! {
+        <div
+            class={classes!(
+                "my-container-class",
+                fill.then(|| Some("my-fill-class")),
+                class.clone(),
+            )}
+        >
+            { children.clone() }
+        </div>
     }
 }
 ```

website/docs/concepts/html/components.mdx

@@ -5,76 +5,50 @@ description: "Create complex layouts with component hierarchies"
 
 ## Basic
 
-Any type that implements `Component` can be used in the `html!` macro:
+Components can be used in the `html!` macro:
 
 ```rust
-use yew::{Component, Html, html, Context, Properties};
+use yew::prelude::*;
 
-struct MyComponent;
-
-impl Component for MyComponent {
-    type Message = ();
-    type Properties = ();
-
-    fn create(_ctx: &Context<Self>) -> Self {
-        Self
-    }
-
-    fn view(&self, _ctx: &Context<Self>) -> Html {
-        html! {
-            { "This component has no properties!" }
-        }
+#[function_component]
+fn MyComponent() -> Html {
+    html! {
+        { "This component has no properties!" }
     }
 }
 
 #[derive(Clone, PartialEq, Properties)]
 struct Props {
-    prop1: String,
-    prop2: String,
+    user_first_name: String,
+    user_last_name: String,
 }
 
-struct MyComponentWithProps;
-
-impl Component for MyComponentWithProps {
-    type Message = ();
-    type Properties = Props;
-
-    fn create(_ctx: &Context<Self>) -> Self {
-        Self
-    }
-
-    fn view(&self, ctx: &Context<Self>) -> Html {
-        html! {
-            {
-                format!(
-                    "prop1: {} and prop2: {}",
-                    ctx.props().prop1,
-                    ctx.props().prop2
-                )
-            }
-        }
+#[function_component]
+fn MyComponentWithProps(props: &Props) -> Html {
+    let Props { user_first_name, user_last_name } = props;
+    html! {
+        <>{"user_first_name: "}{user_first_name}{" and user_last_name: "}{user_last_name}</>
     }
 }
 
-let props = Props { 
-    prop1: "Hello".to_owned(),
-    prop2: "World".to_owned(), 
+let props = Props {
+    user_first_name: "Bob".to_owned(),
+    user_last_name: "Smith".to_owned(),
 };
 
-
 html!{
     <>
         // No properties
         <MyComponent />
 
         // With Properties
-        <MyComponentWithProps prop1="lorem" prop2="ipsum" />
+        <MyComponentWithProps user_first_name="Sam" user_last_name="Idle" />
 
         // With the whole set of props provided at once
         <MyComponentWithProps ..props.clone() />
 
         // With Properties from a variable and specific values overridden
-        <MyComponentWithProps prop2="lorem" ..props />
+        <MyComponentWithProps user_last_name="Elm" ..props />
     </>
 };
 ```
@@ -84,30 +58,20 @@ html!{
 Components can be passed children if they have a `children` field in their `Properties`.
 
 ```rust title="parent.rs"
-use yew::{Children, Component, Context, html, Html, Properties};
+use yew::prelude::*;
 
 #[derive(PartialEq, Properties)]
 struct Props {
     id: String,
     children: Children,
 }
 
-struct Container;
-
-impl Component for Container {
-    type Message = ();
-    type Properties = Props;
-
-    fn create(_ctx: &Context<Self>) -> Self {
-        Self
-    }
-
-    fn view(&self, ctx: &Context<Self>) -> Html {
-        html! {
-            <div id={ctx.props().id.clone()}>
-                { ctx.props().children.clone() }
-            </div>
-        }
+#[function_component]
+fn Container(props: &Props) -> Html {
+    html! {
+        <div id={props.id.clone()}>
+            { props.children.clone() }
+        </div>
     }
 }
 
@@ -125,34 +89,24 @@ This base expression must occur after any individual props are passed.
 When passing a base props expression with a `children` field, the children passed in the `html!` macro overwrite the ones already present in the props.
 
 ```rust
-use yew::{Children, Component, Context, html, Html, props, Properties}; 
+use yew::prelude::*;
 
 #[derive(PartialEq, Properties)]
 struct Props {
     id: String,
     children: Children,
 }
 
-struct Container;
-
-impl Component for Container {
-    type Message = ();
-    type Properties = Props;
-
-    fn create(_ctx: &Context<Self>) -> Self {
-        Self
-    }
-
-    fn view(&self, ctx: &Context<Self>) -> Html {
-        html! {
-            <div id={ctx.props().id.clone()}>
-                { ctx.props().children.clone() }
-            </div>
-        }
+#[function_component]
+fn Container(props: &Props) -> Html {
+    html! {
+        <div id={props.id.clone()}>
+            { props.children.clone() }
+        </div>
     }
 }
 
-let props = yew::props!(Container::Properties {
+let props = yew::props!(Props {
     id: "container-2",
     children: Children::default(),
 });
@@ -171,29 +125,20 @@ Nested component properties can be accessed and mutated if the containing compon
 
 ```rust
 use std::rc::Rc;
-use yew::{html, ChildrenWithProps, Component, Context, Html, Properties};
+use yew::prelude::*;
 
 #[derive(Clone, PartialEq, Properties)]
 pub struct ListItemProps {
     value: String,
 }
 
-pub struct ListItem;
-
-impl Component for ListItem {
-    type Message = ();
-    type Properties = ListItemProps;
-
-    fn create(_ctx: &Context<Self>) -> Self {
-        Self
-    }
-
-    fn view(&self, ctx: &Context<Self>) -> Html {
-        html! {
-            <span>
-                { ctx.props().value.clone() }
-            </span>
-        }
+#[function_component]
+fn ListItem(props: &ListItemProps) -> Html {
+    let ListItemProps { value } = props.clone();
+    html! {
+        <span>
+            {value}
+        </span>
     }
 }
 
@@ -202,25 +147,16 @@ pub struct Props {
     pub children: ChildrenWithProps<ListItem>,
 }
 
-pub struct List;
-impl Component for List {
-    type Message = ();
-    type Properties = Props;
-
-    fn create(_ctx: &Context<Self>) -> Self {
-        Self
-    }
-
-    fn view(&self, ctx: &Context<Self>) -> Html {
-        html! {{
-            for ctx.props().children.iter().map(|mut item| {
-                let mut props = Rc::make_mut(&mut item.props);
-                props.value = format!("item-{}", props.value);
-                item
-            })
-        }}
-    }
+#[function_component]
+fn List(props: &Props) -> Html {
+    let modified_children = props.children.iter().map(|mut item| {
+            let mut props = Rc::make_mut(&mut item.props);
+            props.value = format!("item-{}", props.value);
+            item
+    });
+    html! { for modified_children }
 }
+
 html! {
     <List>
         <ListItem value="a" />
@@ -231,6 +167,6 @@ html! {
 ```
 
 ## Relevant examples
-- [Boids](https://github.com/yewstack/yew/tree/master/examples/boids)
-- [Router](https://github.com/yewstack/yew/tree/master/examples/router)
-- [Store](https://github.com/yewstack/yew/tree/master/examples/store)
+
+- [Function Todo MVC](https://github.com/yewstack/yew/tree/master/examples/function_todomvc)
+- [Function Router](https://github.com/yewstack/yew/tree/master/examples/function_router)

website/docs/concepts/html/conditional-rendering.mdx

@@ -3,9 +3,8 @@ title: "Conditional rendering"
 description: "Rendering nodes conditionally in html!"
 ---
 
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
 
 ## If blocks
 
@@ -15,7 +14,7 @@ To conditionally render some markup, we wrap it in an `if` block:
   <TabItem value="if" label="if">
 
 ```rust
-use yew::html;
+use yew::prelude::*;
 
 html! {
     if true {
@@ -28,7 +27,7 @@ html! {
   <TabItem value="if - else" label="if - else">
 
 ```rust
-use yew::html;
+use yew::prelude::*;
 let some_condition = true;
 
 html! {
@@ -44,7 +43,7 @@ html! {
   <TabItem value="if let" label="if let">
 
 ```rust
-use yew::html;
+use yew::prelude::*;
 let some_text = Some("text");
 
 html! {
@@ -58,7 +57,7 @@ html! {
   <TabItem value="if let else" label="if let else">
 
 ```rust
-use yew::html;
+use yew::prelude::*;
 let some_text = Some("text");
 
 html! {