yewstack · yozhgoor · Oct 19, 2020 · Oct 19, 2020 · Oct 19, 2020 · Oct 19, 2020
diff --git a/Cargo.toml b/Cargo.toml
@@ -26,6 +26,7 @@ members = [
   "examples/file_upload",
   "examples/futures",
   "examples/game_of_life",
+  "examples/hello",
   "examples/inner_html",
   "examples/js_callback",
   "examples/keyed_list",

diff --git a/examples/hello/Cargo.toml b/examples/hello/Cargo.toml
@@ -0,0 +1,9 @@
+[package]
+name = "hello"
+version = "0.1.0"
+authors = ["Yozhgoor <yozhgoor@outlook.com>"]
+edition = "2018"
+
+[dependencies]
+js-sys = "0.3"
+yew = { path = "../../yew" }
diff --git a/examples/hello/README.md b/examples/hello/README.md
@@ -0,0 +1,9 @@
+# Hello Example
+
+[![Demo](https://img.shields.io/website?label=demo&url=https%3A%2F%2Fexamples.yew.rs%2Fhello)](https://examples.yew.rs/hello)
+
+A "Hello world!" example.
+
+## Concepts
+
+Pass component as property.
diff --git a/examples/hello/index.html b/examples/hello/index.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Yew • Hello</title>
+  </head>
+
+  <body></body>
+</html>
diff --git a/examples/hello/src/main.rs b/examples/hello/src/main.rs
@@ -0,0 +1,85 @@
+use yew::prelude::*;
+
+pub struct Model {
+    link: ComponentLink<Self>,
+    value: String,
+}
+
+impl Component for Model {
+    type Message = ChangeData;
+    type Properties = ();
+
+    fn create(_props: Self::Properties, link: ComponentLink<Self>) -> Self {
+        Self {
+            link,
+            value: String::from(""),
+        }
+    }
+
+    fn update(&mut self, msg: Self::Message) -> ShouldRender {
+        match msg {
+            ChangeData::Value(value) => self.value = value,
+            _ => unreachable!(),
+        }
+        true
+    }
+
+    fn change(&mut self, _props: Self::Properties) -> ShouldRender {
+        false
+    }
+
+    fn view(&self) -> Html {
+        html! {
+            <div>
+                <input onchange=self.link.callback(|x| x) />
+                <Hello name=self.value.clone() />
+                <Hello name="world!" />
+                <Hello name=html!(<strong>{"WORLD"}</strong>) />
+            </div>
+        }
+    }
+}
+
+struct Hello {
+    props: HelloProps,
+}
+
+#[derive(Clone, PartialEq, Properties)]
+struct HelloProps {
+    name: yew::virtual_dom::VNode,
+}
+
+impl Component for Hello {
+    type Message = ();
+    type Properties = HelloProps;
+
+    fn create(props: Self::Properties, _link: ComponentLink<Self>) -> Self {
+        Self { props }
+    }
+
+    fn update(&mut self, _msg: Self::Message) -> ShouldRender {
+        true
+    }
+
+    fn change(&mut self, props: Self::Properties) -> ShouldRender {
+        if props != self.props {
+            self.props = props;
+            true
+        } else {
+            false
+        }
+    }
+
+    fn view(&self) -> Html {
+        return html! {
+            <div>
+                {"Hello "}
+                {self.props.name.clone()}
+            </div>
+        };
+    }
+}
+
+fn main() {
+    yew::start_app::<Model>();
+}
diff --git a/yew/src/virtual_dom/vnode.rs b/yew/src/virtual_dom/vnode.rs
@@ -1,6 +1,6 @@
 //! This module contains the implementation of abstract virtual node.
 
-use super::{Key, VChild, VComp, VDiff, VList, VTag, VText};
+use super::{Key, Transformer, VChild, VComp, VDiff, VList, VTag, VText};
 use crate::html::{AnyScope, Component, NodeRef};
 use cfg_if::cfg_if;
 use cfg_match::cfg_match;
@@ -218,6 +218,18 @@ impl PartialEq for VNode {
     }
 }
 
+impl Transformer<&str, VNode> for VComp {
+    fn transform(from: &str) -> VNode {
+        VNode::VText(VText::new(from.to_string()))
+    }
+}
+
+impl Transformer<String, VNode> for VComp {
+    fn transform(from: String) -> VNode {
+        VNode::VText(VText::new(from))
+    }
+}
+
 #[cfg(all(test, feature = "web_sys"))]
 mod layout_tests {
     use super::*;