Components implementation

examples/counter/src/main.rs

@@ -3,7 +3,7 @@ extern crate chrono;
 extern crate yew;
 
 use chrono::prelude::*;
-use yew::html::*;
+use yew::prelude::*;
 use yew::services::console::ConsoleService;
 
 struct Context {
@@ -20,7 +20,7 @@ enum Msg {
     Bulk(Vec<Msg>),
 }
 
-fn update(context: &mut Context, model: &mut Model, msg: Msg) {
+fn update(context: &mut AppContext<Context, Model, Msg>, model: &mut Model, msg: Msg) -> ShouldUpdate {
     match msg {
         Msg::Increment => {
             model.value = model.value + 1;
@@ -36,9 +36,10 @@ fn update(context: &mut Context, model: &mut Model, msg: Msg) {
             }
         }
     }
+    true
 }
 
-fn view(model: &Model) -> Html<Msg> {
+fn view(model: &Model) -> AppHtml<Context, Model, Msg> {
     html! {
         <div>
             <nav class="menu",>
@@ -54,7 +55,7 @@ fn view(model: &Model) -> Html<Msg> {
 
 fn main() {
     yew::initialize();
-    let mut app = App::new();
+    let app = App::new();
     let context = Context {
         console: ConsoleService,
     };

examples/crm/src/main.rs

@@ -3,10 +3,10 @@ extern crate serde_derive;
 #[macro_use]
 extern crate yew;
 
-use yew::html::*;
+use yew::prelude::*;
 use yew::format::Json;
 use yew::services::dialog::DialogService;
-use yew::services::storage::{StorageService, Scope};
+use yew::services::storage::{StorageService, Area};
 
 const KEY: &'static str = "yew.crm.database";
 
@@ -64,7 +64,7 @@ fn load_database(context: &mut Context) -> Database {
     })
 }
 
-fn update(context: &mut Context, model: &mut Model, msg: Msg) {
+fn update(context: &mut AppContext<Context, Model, Msg>, model: &mut Model, msg: Msg) -> ShouldUpdate {
     let mut new_scene = None;
     match model.scene {
         Scene::Initialization => {
@@ -134,9 +134,10 @@ fn update(context: &mut Context, model: &mut Model, msg: Msg) {
     if let Some(new_scene) = new_scene.take() {
         model.scene = new_scene;
     }
+    true
 }
 
-fn view(model: &Model) -> Html<Msg> {
+fn view(model: &Model) -> AppHtml<Context, Model, Msg> {
     match model.scene {
         Scene::Initialization => html! {
             <div>{ "Loading..." }</div>
@@ -170,7 +171,7 @@ fn view(model: &Model) -> Html<Msg> {
     }
 }
 
-fn view_client(client: &Client) -> Html<Msg> {
+fn view_client(client: &Client) -> AppHtml<Context, Model, Msg> {
     html! {
         <div class="client",>
             <p>{ format!("First Name: {}", client.first_name) }</p>
@@ -179,7 +180,7 @@ fn view_client(client: &Client) -> Html<Msg> {
     }
 }
 
-fn view_first_name_input(client: &Client) -> Html<Msg> {
+fn view_first_name_input(client: &Client) -> AppHtml<Context, Model, Msg> {
     html! {
         <input class=("new-client", "firstname"),
                placeholder="First name",
@@ -189,7 +190,7 @@ fn view_first_name_input(client: &Client) -> Html<Msg> {
     }
 }
 
-fn view_last_name_input(client: &Client) -> Html<Msg> {
+fn view_last_name_input(client: &Client) -> AppHtml<Context, Model, Msg> {
     html! {
         <input class=("new-client", "lastname"),
                placeholder="Last name",
@@ -203,7 +204,7 @@ fn main() {
     yew::initialize();
     let mut app = App::new();
     let mut context = Context {
-        storage: StorageService::new(Scope::Local),
+        storage: StorageService::new(Area::Local),
         dialog: DialogService,
     };
     let database = load_database(&mut context);

examples/custom_components/Cargo.toml

@@ -0,0 +1,7 @@
+[package]
+name = "custom_components"
+version = "0.1.0"
+authors = ["Denis Kolodin <[email protected]>"]
+
+[dependencies]
+yew = { path = "../.." }

examples/custom_components/src/barrier.rs

@@ -0,0 +1,76 @@
+use yew::prelude::*;
+use button::Button;
+
+pub struct Barrier {
+    limit: u32,
+    counter: u32,
+    onsignal: Option<Callback<()>>,
+}
+
+pub enum Msg {
+    ChildClicked,
+}
+
+#[derive(PartialEq, Clone)]
+pub struct Props {
+    pub limit: u32,
+    pub onsignal: Option<Callback<()>>,
+}
+
+impl Default for Props {
+    fn default() -> Self {
+        Props {
+            limit: 0,
+            onsignal: None,
+        }
+    }
+}
+
+
+impl<CTX: 'static> Component<CTX> for Barrier {
+    type Msg = Msg;
+    type Properties = Props;
+
+    fn create(_: &mut ScopeRef<CTX, Self>) -> Self {
+        Barrier {
+            limit: 0,
+            counter: 0,
+            onsignal: None,
+        }
+    }
+
+    fn update(&mut self, msg: Self::Msg, _: &mut ScopeRef<CTX, Self>) -> ShouldUpdate {
+        match msg {
+            Msg::ChildClicked => {
+                self.counter += 1;
+                if self.counter >= self.limit {
+                    if let Some(ref mut callback) = self.onsignal {
+                        callback.emit(());
+                        self.counter = 0;
+                    }
+                }
+            }
+        }
+        true
+    }
+
+    fn change(&mut self, props: Self::Properties, _: &mut ScopeRef<CTX, Self>) -> ShouldUpdate {
+        self.limit = props.limit;
+        self.onsignal = props.onsignal;
+        true
+    }
+
+    fn view(&self) -> Html<CTX, Self> {
+        html! {
+            <div>
+                <p>{ format!("{} on {} clicked", self.counter, self.limit) }</p>
+                <Button: onsignal=|_| Msg::ChildClicked, />
+                <Button: onsignal=|_| Msg::ChildClicked, />
+                <Button: onsignal=|_| Msg::ChildClicked, title="Middle", />
+                <Button: onsignal=|_| Msg::ChildClicked, />
+                <Button: onsignal=|_| Msg::ChildClicked, />
+            </div>
+        }
+    }
+}
+

examples/custom_components/src/button.rs

@@ -0,0 +1,61 @@
+use yew::prelude::*;
+
+pub struct Button {
+    title: String,
+    onsignal: Option<Callback<()>>,
+}
+
+pub enum Msg {
+    Clicked,
+}
+
+#[derive(PartialEq, Clone)]
+pub struct Props {
+    pub title: String,
+    pub onsignal: Option<Callback<()>>,
+}
+
+impl Default for Props {
+    fn default() -> Self {
+        Props {
+            title: "Send Signal".into(),
+            onsignal: None,
+        }
+    }
+}
+
+impl<CTX: 'static> Component<CTX> for Button {
+    type Msg = Msg;
+    type Properties = Props;
+
+    fn create(_: &mut ScopeRef<CTX, Self>) -> Self {
+        Button {
+            title: "Send Signal".into(),
+            onsignal: None,
+        }
+    }
+
+    fn update(&mut self, msg: Self::Msg, _: &mut ScopeRef<CTX, Self>) -> ShouldUpdate {
+        match msg {
+            Msg::Clicked => {
+                if let Some(ref mut callback) = self.onsignal {
+                    callback.emit(());
+                }
+            }
+        }
+        false
+    }
+
+    fn change(&mut self, props: Self::Properties, _: &mut ScopeRef<CTX, Self>) -> ShouldUpdate {
+        self.title = props.title;
+        self.onsignal = props.onsignal;
+        true
+    }
+
+    fn view(&self) -> Html<CTX, Self> {
+        html! {
+            <button onclick=|_| Msg::Clicked,>{ &self.title }</button>
+        }
+    }
+}
+

examples/custom_components/src/counter.rs

@@ -0,0 +1,86 @@
+use yew::prelude::*;
+
+#[derive(PartialEq, Clone)]
+pub enum Color {
+    Red,
+    Green,
+    Blue,
+}
+
+pub struct Counter {
+    value: u32,
+    color: Color,
+    onclick: Option<Callback<u32>>,
+}
+
+pub enum Msg {
+    Increase,
+}
+
+#[derive(PartialEq, Clone)]
+pub struct Props {
+    pub color: Color,
+    pub onclick: Option<Callback<u32>>,
+}
+
+impl Default for Props {
+    fn default() -> Self {
+        Props {
+            color: Color::Green,
+            onclick: None,
+        }
+    }
+}
+
+impl<CTX: Printer + 'static> Component<CTX> for Counter {
+    type Msg = Msg;
+    type Properties = Props;
+
+    fn create(_: &mut ScopeRef<CTX, Self>) -> Self {
+        Counter {
+            value: 0,
+            color: Color::Green,
+            onclick: None,
+        }
+    }
+
+    fn update(&mut self, msg: Self::Msg, context: &mut ScopeRef<CTX, Self>) -> ShouldUpdate {
+        match msg {
+            Msg::Increase => {
+                self.value = self.value + 1;
+                if let Some(ref onclick) = self.onclick {
+                    onclick.emit(self.value);
+                }
+                context.print(format!("<printer> value of model is {}", self.value).as_str());
+            }
+        }
+        true
+    }
+
+    fn change(&mut self, props: Self::Properties, _: &mut ScopeRef<CTX, Self>) -> ShouldUpdate {
+        self.color = props.color;
+        self.onclick = props.onclick;
+        true
+    }
+
+    fn view(&self) -> Html<CTX, Self> {
+        let colorize = {
+            match self.color {
+                Color::Red => "background: red;",
+                Color::Green => "background: green;",
+                Color::Blue => "background: blue;",
+            }
+        };
+        html! {
+            <div>
+                <p>{ self.value }</p>
+                <button style=colorize, onclick=|_| Msg::Increase,>{ "Increase internal counter" }</button>
+            </div>
+        }
+    }
+}
+
+
+pub trait Printer {
+    fn print(&mut self, data: &str);
+}