Add custom_components demo to the showcase

examples/showcase/Cargo.toml

@@ -7,3 +7,4 @@ authors = ["Denis Kolodin <deniskolodin@gmail.com>"]
 yew = { path = "../.." }
 counter = { path = "sub/counter" }
 crm = { path = "sub/crm" }
+custom_components = { path = "sub/custom_components" }

examples/showcase/src/main.rs

@@ -2,6 +2,7 @@
 extern crate yew;
 extern crate counter;
 extern crate crm;
+extern crate custom_components;
 
 use yew::prelude::*;
 use yew::services::console::ConsoleService;
@@ -9,6 +10,7 @@ use yew::services::dialog::DialogService;
 use yew::services::storage::{StorageService, Area};
 use counter::Model as Counter;
 use crm::Model as Crm;
+use custom_components::Model as CustomComponents;
 
 struct Context {
     console: ConsoleService,
@@ -34,10 +36,17 @@ impl AsMut<DialogService> for Context {
     }
 }
 
+impl custom_components::Printer for Context {
+    fn print(&mut self, data: &str) {
+        self.console.log(data);
+    }
+}
+
 enum Scene {
     NotSelected,
     Counter,
     Crm,
+    CustomComponents,
 }
 
 enum Msg {
@@ -66,10 +75,11 @@ impl Renderable<Context, Scene> for Scene {
     fn view(&self) -> Html<Context, Self> {
         html! {
             <p>{ "Showcase" }</p>
-            { self.view_scene() }
             <button onclick=|_| Msg::SwitchTo(Scene::NotSelected),>{ "Home" }</button>
             <button onclick=|_| Msg::SwitchTo(Scene::Counter),>{ "Counter" }</button>
             <button onclick=|_| Msg::SwitchTo(Scene::Crm),>{ "Crm" }</button>
+            <button onclick=|_| Msg::SwitchTo(Scene::CustomComponents),>{ "CustomComponents" }</button>
+            { self.view_scene() }
         }
     }
 }
@@ -92,6 +102,11 @@ impl Scene {
                     <Crm: />
                 }
             }
+            Scene::CustomComponents => {
+                html! {
+                    <CustomComponents: />
+                }
+            }
         }
     }
 }

examples/showcase/sub/custom_components/Cargo.toml

@@ -4,4 +4,4 @@ version = "0.1.0"
 authors = ["Denis Kolodin <deniskolodin@gmail.com>"]
 
 [dependencies]
-yew = { path = "../.." }
+yew = { path = "../../../.." }

examples/showcase/sub/custom_components/src/counter.rs

@@ -1,4 +1,5 @@
 use yew::prelude::*;
+use super::Printer;
 
 #[derive(PartialEq, Clone)]
 pub enum Color {
@@ -85,6 +86,3 @@ impl<CTX: Printer + 'static> Renderable<CTX, Counter> for Counter {
 }
 
 
-pub trait Printer {
-    fn print(&mut self, data: &str);
-}

examples/showcase/sub/custom_components/src/lib.rs

@@ -0,0 +1,92 @@
+#[macro_use]
+extern crate yew;
+
+mod counter;
+mod button;
+mod barrier;
+
+use yew::prelude::*;
+use counter::{Counter, Color};
+use barrier::Barrier;
+
+pub trait Printer {
+    fn print(&mut self, data: &str);
+}
+
+pub struct Model {
+    with_barrier: bool,
+    color: Color,
+}
+
+pub enum Msg {
+    Repaint,
+    Toggle,
+    ChildClicked(u32),
+}
+
+impl<CTX> Component<CTX> for Model
+where
+    CTX: Printer,
+{
+    type Msg = Msg;
+    type Properties = ();
+
+    fn create(_: Self::Properties, _: &mut Env<CTX, Self>) -> Self {
+        Model {
+            with_barrier: false,
+            color: Color::Red,
+        }
+    }
+
+    fn update(&mut self, msg: Msg, context: &mut Env<CTX, Self>) -> ShouldRender {
+        match msg {
+            Msg::Repaint => {
+                self.color = Color::Blue;
+                true
+            }
+            Msg::Toggle => {
+                self.with_barrier = !self.with_barrier;
+                true
+            }
+            Msg::ChildClicked(value) => {
+                context.print(&format!("child clicked: {}", value));
+                false
+            }
+        }
+    }
+}
+
+impl<CTX> Renderable<CTX, Model> for Model
+where
+    CTX: Printer + 'static,
+{
+    fn view(&self) -> Html<CTX, Self> {
+        let counter = |x| html! {
+            <Counter: initial=x, color=&self.color, onclick=Msg::ChildClicked,/>
+        };
+        html! {
+            <div class="custom-components-example",>
+                <button onclick=|_| Msg::Toggle,>{ "Toggle" }</button>
+                { self.view_barrier() }
+                { for (1..1001).map(counter) }
+            </div>
+        }
+    }
+}
+
+impl Model {
+    fn view_barrier<CTX>(&self) -> Html<CTX, Self>
+    where
+        CTX: Printer + 'static,
+    {
+        if self.with_barrier {
+            html! {
+                <Barrier: limit=10, onsignal=|_| Msg::Repaint, />
+            }
+        } else {
+            html! {
+                <p>{ "Click \"toggle\"!" }</p>
+            }
+        }
+    }
+}

examples/showcase/sub/custom_components/src/main.rs

@@ -1,96 +1,21 @@
-#[macro_use]
 extern crate yew;
+extern crate custom_components;
 
-mod counter;
-mod button;
-mod barrier;
-
-use yew::prelude::*;
 use yew::html::Scope;
 use yew::services::console::ConsoleService;
-use counter::{Counter, Color};
-use barrier::Barrier;
+use custom_components::{Printer, Model};
 
 struct Context {
     console: ConsoleService,
 }
 
 /// If you use `App` you should implement this for `AppContext<Context, Model, Msg>` struct.
-impl counter::Printer for Context {
+impl Printer for Context {
     fn print(&mut self, data: &str) {
         self.console.log(data);
     }
 }
 
-struct Model {
-    with_barrier: bool,
-    color: Color,
-}
-
-enum Msg {
-    Repaint,
-    Toggle,
-    ChildClicked(u32),
-}
-
-impl Component<Context> for Model {
-    type Msg = Msg;
-    type Properties = ();
-
-    fn create(_: Self::Properties, _: &mut Env<Context, Self>) -> Self {
-        Model {
-            with_barrier: false,
-            color: Color::Red,
-        }
-    }
-
-    fn update(&mut self, msg: Msg, context: &mut Env<Context, Self>) -> ShouldRender {
-        match msg {
-            Msg::Repaint => {
-                self.color = Color::Blue;
-                true
-            }
-            Msg::Toggle => {
-                self.with_barrier = !self.with_barrier;
-                true
-            }
-            Msg::ChildClicked(value) => {
-                context.console.log(&format!("child clicked: {}", value));
-                false
-            }
-        }
-    }
-}
-
-impl Renderable<Context, Model> for Model {
-    fn view(&self) -> Html<Context, Self> {
-        let counter = |x| html! {
-            <Counter: initial=x, color=&self.color, onclick=Msg::ChildClicked,/>
-        };
-        html! {
-            <div class="custom-components-example",>
-                <button onclick=|_| Msg::Toggle,>{ "Toggle" }</button>
-                { self.view_barrier() }
-                { for (1..1001).map(counter) }
-            </div>
-        }
-    }
-}
-
-impl Model {
-    fn view_barrier(&self) -> Html<Context, Self> {
-        if self.with_barrier {
-            html! {
-                <Barrier: limit=10, onsignal=|_| Msg::Repaint, />
-            }
-        } else {
-            html! {
-                <p>{ "Click \"toggle\"!" }</p>
-            }
-        }
-    }
-}
-
 fn main() {
     yew::initialize();
     let context = Context {