Add render method to Component and auto implement Renderable (#563)

* Add render method to Component and auto implement Renderable

* More cleanup

* Rename Renderable method from view to render

* Doc fixes

* fix

* Update CHANGELOG.md

README.md

@@ -56,7 +56,7 @@ Yew implements strict application state management based on message passing and
 `src/main.rs`
 
 ```rust
-use yew::{html, Component, ComponentLink, Html, Renderable, ShouldRender};
+use yew::{html, Component, ComponentLink, Html, ShouldRender};
 
 struct Model { }
 
@@ -82,9 +82,7 @@ impl Component for Model {
             }
         }
     }
-}
 
-impl Renderable<Model> for Model {
     fn view(&self) -> Html<Self> {
         html! {
             // Render your model here
@@ -322,7 +320,7 @@ extern crate chrono;
 use chrono::prelude::*;
 
 impl Renderable<Model> for Model {
-    fn view(&self) -> Html<Self> {
+    fn render(&self) -> Html<Self> {
         html! {
             <p>{ Local::now() }</p>
         }

crates/macro/src/lib.rs

@@ -28,9 +28,7 @@
 //! #     fn update(&mut self, msg: Self::Message) -> ShouldRender {
 //! #         unimplemented!()
 //! #     }
-//! # }
 //! #
-//! # impl Renderable<Component> for Component {
 //! #     fn view(&self) -> Html<Self> {
 //! #
 //! // ...

examples/counter/src/lib.rs

@@ -2,7 +2,7 @@
 
 use stdweb::web::Date;
 use yew::services::ConsoleService;
-use yew::{html, Component, ComponentLink, Html, Renderable, ShouldRender};
+use yew::{html, Component, ComponentLink, Html, ShouldRender};
 
 pub struct Model {
     console: ConsoleService,
@@ -45,9 +45,7 @@ impl Component for Model {
         }
         true
     }
-}
 
-impl Renderable<Model> for Model {
     fn view(&self) -> Html<Self> {
         html! {
             <div>

examples/crm/src/lib.rs

@@ -143,15 +143,13 @@ impl Component for Model {
         }
         true
     }
-}
 
-impl Renderable<Model> for Model {
     fn view(&self) -> Html<Self> {
         match self.scene {
             Scene::ClientsList => html! {
                 <div class="crm">
                     <div class="clients">
-                        { for self.database.clients.iter().map(Renderable::view) }
+                        { for self.database.clients.iter().map(Renderable::render) }
                     </div>
                     <button onclick=|_| Msg::SwitchTo(Scene::NewClientForm(Client::empty()))>{ "Add New" }</button>
                     <button onclick=|_| Msg::SwitchTo(Scene::Settings)>{ "Settings" }</button>
@@ -180,7 +178,7 @@ impl Renderable<Model> for Model {
 }
 
 impl Renderable<Model> for Client {
-    fn view(&self) -> Html<Model> {
+    fn render(&self) -> Html<Model> {
         html! {
             <div class="client">
                 <p>{ format!("First Name: {}", self.first_name) }</p>

examples/custom_components/src/barrier.rs

@@ -48,9 +48,7 @@ impl Component for Barrier {
         self.onsignal = props.onsignal;
         true
     }
-}
 
-impl Renderable<Barrier> for Barrier {
     fn view(&self) -> Html<Self> {
         html! {
             <div class="barrier">

examples/custom_components/src/button.rs

@@ -41,9 +41,7 @@ impl Component for Button {
         self.onsignal = props.onsignal;
         true
     }
-}
 
-impl Renderable<Button> for Button {
     fn view(&self) -> Html<Self> {
         html! {
             <button onclick=|_| Msg::Clicked>{ &self.title }</button>

examples/custom_components/src/counter.rs

@@ -58,9 +58,7 @@ impl Component for Counter {
         self.onclick = props.onclick;
         true
     }
-}
 
-impl Renderable<Counter> for Counter {
     fn view(&self) -> Html<Self> {
         let colorize = {
             match self.color {

examples/custom_components/src/lib.rs

@@ -43,9 +43,7 @@ impl Component for Model {
             Msg::ChildClicked(_value) => false,
         }
     }
-}
 
-impl Renderable<Model> for Model {
     fn view(&self) -> Html<Self> {
         let counter = |x| {
             html! {

examples/dashboard/src/lib.rs

@@ -6,7 +6,7 @@ use yew::format::{Json, Nothing, Toml};
 use yew::services::fetch::{FetchService, FetchTask, Request, Response};
 use yew::services::websocket::{WebSocketService, WebSocketStatus, WebSocketTask};
 use yew::services::Task;
-use yew::{html, Component, ComponentLink, Html, Renderable, ShouldRender};
+use yew::{html, Component, ComponentLink, Html, ShouldRender};
 
 type AsBinary = bool;
 
@@ -167,9 +167,7 @@ impl Component for Model {
         }
         true
     }
-}
 
-impl Renderable<Model> for Model {
     fn view(&self) -> Html<Self> {
         html! {
             <div>

examples/file_upload/src/lib.rs

@@ -1,7 +1,7 @@
 #![recursion_limit = "256"]
 
 use yew::services::reader::{File, FileChunk, FileData, ReaderService, ReaderTask};
-use yew::{html, ChangeData, Component, ComponentLink, Html, Renderable, ShouldRender};
+use yew::{html, ChangeData, Component, ComponentLink, Html, ShouldRender};
 
 pub struct Model {
     link: ComponentLink<Model>,
@@ -64,9 +64,7 @@ impl Component for Model {
         }
         true
     }
-}
 
-impl Renderable<Model> for Model {
     fn view(&self) -> Html<Self> {
         let flag = self.by_chunks;
         html! {

examples/fragments/src/lib.rs

@@ -1,6 +1,6 @@
 #![recursion_limit = "128"]
 
-use yew::{html, Component, ComponentLink, Html, Renderable, ShouldRender};
+use yew::{html, Component, ComponentLink, Html, ShouldRender};
 
 pub struct Model {
     counter: usize,
@@ -32,9 +32,7 @@ impl Component for Model {
         }
         true
     }
-}
 
-impl Renderable<Model> for Model {
     fn view(&self) -> Html<Self> {
         html! {
             <>

examples/game_of_life/src/lib.rs

@@ -4,7 +4,7 @@ use log::info;
 use rand::Rng;
 use std::time::Duration;
 use yew::services::{IntervalService, Task};
-use yew::{html, Component, ComponentLink, Html, Renderable, ShouldRender};
+use yew::{html, Component, ComponentLink, Html, ShouldRender};
 
 #[derive(Clone, Copy, PartialEq)]
 enum LifeState {
@@ -205,9 +205,7 @@ impl Component for Model {
         }
         true
     }
-}
 
-impl Renderable<Model> for Model {
     fn view(&self) -> Html<Self> {
         html! {
             <div>

examples/inner_html/src/lib.rs

@@ -5,7 +5,15 @@ extern crate stdweb;
 use stdweb::unstable::TryFrom;
 use stdweb::web::Node;
 use yew::virtual_dom::VNode;
-use yew::{Component, ComponentLink, Html, Renderable, ShouldRender};
+use yew::{Component, ComponentLink, Html, ShouldRender};
+
+const SVG: &str = r#"
+<h2>Inline SVG or <i>any</i> HTML:</h2>
+<svg height="250" width="500">
+  <polygon points="220,10 300,210 170,250 123,234" style="fill:lime;stroke:purple;stroke-width:1" />
+    Sorry, your browser does not support inline SVG.
+</svg>
+"#;
 
 pub struct Model {
     pub value: i64,
@@ -24,17 +32,7 @@ impl Component for Model {
     fn update(&mut self, _: Self::Message) -> ShouldRender {
         true
     }
-}
-
-const SVG: &str = r#"
-<h2>Inline SVG or <i>any</i> HTML:</h2>
-<svg height="250" width="500">
-  <polygon points="220,10 300,210 170,250 123,234" style="fill:lime;stroke:purple;stroke-width:1" />
-    Sorry, your browser does not support inline SVG.
-</svg>
-"#;
 
-impl Renderable<Model> for Model {
     fn view(&self) -> Html<Self> {
         let js_svg = js! {
             var div = document.createElement("div");

examples/js_callback/src/lib.rs

@@ -52,9 +52,7 @@ impl Component for Model {
     fn change(&mut self, _: Self::Properties) -> ShouldRender {
         false
     }
-}
 
-impl Renderable<Model> for Model {
     fn view(&self) -> Html<Self> {
         html! {
             <div>

examples/large_table/src/lib.rs

@@ -1,7 +1,7 @@
 //! This demo originally created by https://github.com/qthree
 //! Source: https://github.com/qthree/yew_table100x100_test
 
-use yew::{html, Component, ComponentLink, Html, Renderable, ShouldRender};
+use yew::{html, Component, ComponentLink, Html, ShouldRender};
 
 pub struct Model {
     selected: Option<(u32, u32)>,
@@ -28,6 +28,14 @@ impl Component for Model {
         }
         true
     }
+
+    fn view(&self) -> Html<Self> {
+        html! {
+            <table>
+                { (0..99).map(|row| view_row(self.selected, row)).collect::<Html<Self>>() }
+            </table>
+        }
+    }
 }
 
 fn square_class(this: (u32, u32), selected: Option<(u32, u32)>) -> &'static str {
@@ -54,13 +62,3 @@ fn view_row(selected: Option<(u32, u32)>, row: u32) -> Html<Model> {
         </tr>
     }
 }
-
-impl Renderable<Model> for Model {
-    fn view(&self) -> Html<Self> {
-        html! {
-            <table>
-                { (0..99).map(|row| view_row(self.selected, row)).collect::<Html<Self>>() }
-            </table>
-        }
-    }
-}

examples/minimal/src/lib.rs

@@ -1,4 +1,4 @@
-use yew::{html, Component, ComponentLink, Html, Renderable, ShouldRender};
+use yew::{html, Component, ComponentLink, Html, ShouldRender};
 
 pub struct Model {}
 
@@ -20,9 +20,7 @@ impl Component for Model {
         }
         true
     }
-}
 
-impl Renderable<Model> for Model {
     fn view(&self) -> Html<Self> {
         html! {
             <div>

examples/mount_point/src/lib.rs

@@ -1,4 +1,4 @@
-use yew::{html, Component, ComponentLink, Html, Renderable, ShouldRender};
+use yew::{html, Component, ComponentLink, Html, ShouldRender};
 
 pub struct Model {
     name: String,
@@ -26,9 +26,7 @@ impl Component for Model {
         }
         true
     }
-}
 
-impl Renderable<Model> for Model {
     fn view(&self) -> Html<Self> {
         html! {
             <div>

examples/multi_thread/src/lib.rs

@@ -6,7 +6,7 @@ pub mod native_worker;
 
 use log::info;
 use yew::worker::*;
-use yew::{html, Component, ComponentLink, Html, Renderable, ShouldRender};
+use yew::{html, Component, ComponentLink, Html, ShouldRender};
 
 pub struct Model {
     worker: Box<Bridge<native_worker::Worker>>,
@@ -65,9 +65,7 @@ impl Component for Model {
         }
         true
     }
-}
 
-impl Renderable<Model> for Model {
     fn view(&self) -> Html<Self> {
         html! {
             <div>

examples/nested_list/src/header.rs

@@ -33,9 +33,7 @@ impl Component for ListHeader {
         }
         false
     }
-}
 
-impl Renderable<ListHeader> for ListHeader {
     fn view(&self) -> Html<Self> {
         html! {
             <div class="list-header" onmouseover=|_| Msg::Hover>

examples/nested_list/src/item.rs

@@ -38,9 +38,7 @@ impl Component for ListItem {
         }
         false
     }
-}
 
-impl Renderable<ListItem> for ListItem {
     fn view(&self) -> Html<Self> {
         html! {
             <div class="list-item" onmouseover=|_| Msg::Hover>
@@ -59,7 +57,7 @@ impl ListItem {
 
         html! {
             <div class="list-item-details">
-                { self.props.children.view() }
+                { self.props.children.render() }
             </div>
         }
     }

examples/nested_list/src/lib.rs

@@ -22,9 +22,7 @@ impl Component for Model {
     fn update(&mut self, _: Self::Message) -> ShouldRender {
         true
     }
-}
 
-impl Renderable<Model> for Model {
     fn view(&self) -> Html<Self> {
         html! {
             <div class="main">

examples/nested_list/src/list.rs

@@ -68,9 +68,7 @@ impl Component for List {
         }
         true
     }
-}
 
-impl Renderable<List> for List {
     fn view(&self) -> Html<Self> {
         html! {
             <div
@@ -143,7 +141,7 @@ impl fmt::Display for Hovered {
 
 impl<CHILD> From<VChild<CHILD, List>> for ListVariant
 where
-    CHILD: Component + Renderable<CHILD>,
+    CHILD: Component,
     CHILD::Properties: Into<Variants>,
 {
     fn from(vchild: VChild<CHILD, List>) -> Self {