Components v2 (2) (yewstack#1961)

* Start rewrite

* Rc > cloning props

* fmt + rm useless file

* move props inside `Context`

* router compiles

* fix boids example

* fix counter example

* fix crm example

* fix dyn_create_destroy_apps example

* fix file_upload example

* fix futures example

* fix game_of_life example

* fix inner_html example

* fix js_callback example

* fix mount_point example

* fix keyed_list example

* fix web_gl example

* fix two_apps example

* fix todomvc example

* fix timer example

* fix store example

* fix nested_list example

* fix node_refs example

* fix pub_sub example

* fix multi_thread example

* don't call `changed` if props weren't changed

* formatting

* fix doc tests, remove neq_assign

* update router example, fix neq_assign compile errors

* fix macro/rest of doc tests

* start updating documentation

* `Component`'s documentation

* Apply suggestions from code review

Co-authored-by: mc1098 <m.cripps1@uni.brighton.ac.uk>

* Apply suggestions from code review (part 2)

* Apply suggestions from code review (part 3)

* fix context

* clippy

* post merge fixes

Co-authored-by: mc1098 <m.cripps1@uni.brighton.ac.uk>

Author: ranile

examples/boids/src/main.rs

@@ -1,7 +1,8 @@
 use settings::Settings;
 use simulation::Simulation;
 use slider::Slider;
-use yew::{html, Component, ComponentLink, Html, ShouldRender};
+use yew::html::Scope;
+use yew::{html, Component, Context, Html, ShouldRender};
 
 mod boid;
 mod math;
@@ -17,7 +18,6 @@ pub enum Msg {
 }
 
 pub struct Model {
-    link: ComponentLink<Self>,
     settings: Settings,
     generation: usize,
     paused: bool,
@@ -26,16 +26,15 @@ impl Component for Model {
     type Message = Msg;
     type Properties = ();
 
-    fn create(_props: Self::Properties, link: ComponentLink<Self>) -> Self {
+    fn create(_ctx: &Context<Self>) -> Self {
         Self {
-            link,
             settings: Settings::load(),
             generation: 0,
             paused: false,
         }
     }
 
-    fn update(&mut self, msg: Self::Message) -> ShouldRender {
+    fn update(&mut self, _ctx: &Context<Self>, msg: Msg) -> ShouldRender {
         match msg {
             Msg::ChangeSettings(settings) => {
                 self.settings = settings;
@@ -58,11 +57,7 @@ impl Component for Model {
         }
     }
 
-    fn change(&mut self, _props: Self::Properties) -> ShouldRender {
-        false
-    }
-
-    fn view(&self) -> Html {
+    fn view(&self, ctx: &Context<Self>) -> Html {
         let Self {
             ref settings,
             generation,
@@ -74,18 +69,17 @@ impl Component for Model {
             <>
                 <h1 class="title">{ "Boids" }</h1>
                 <Simulation settings={settings.clone()} {generation} {paused} />
-                { self.view_panel() }
+                { self.view_panel(ctx.link()) }
             </>
         }
     }
 }
 impl Model {
-    fn view_panel(&self) -> Html {
-        let link = &self.link;
+    fn view_panel(&self, link: &Scope<Self>) -> Html {
         let pause_text = if self.paused { "Resume" } else { "Pause" };
         html! {
             <div class="panel">
-                { self.view_settings() }
+                { self.view_settings(link) }
                 <div class="panel__buttons">
                     <button onclick={link.callback(|_| Msg::TogglePause)}>{ pause_text }</button>
                     <button onclick={link.callback(|_| Msg::ResetSettings)}>{ "Use Defaults" }</button>
@@ -95,8 +89,8 @@ impl Model {
         }
     }
 
-    fn view_settings(&self) -> Html {
-        let Self { link, settings, .. } = self;
+    fn view_settings(&self, link: &Scope<Self>) -> Html {
+        let Self { settings, .. } = self;
 
         // This helper macro creates a callback which applies the new value to the current settings and sends `Msg::ChangeSettings`.
         // Thanks to this, we don't need to have "ChangeBoids", "ChangeCohesion", etc. messages,

examples/boids/src/simulation.rs

@@ -2,7 +2,7 @@ use crate::boid::Boid;
 use crate::math::Vector2D;
 use crate::settings::Settings;
 use gloo::timers::callback::Interval;
-use yew::{html, Component, ComponentLink, Html, Properties, ShouldRender};
+use yew::{html, Component, Context, Html, Properties, ShouldRender};
 
 pub const SIZE: Vector2D = Vector2D::new(1600.0, 1000.0);
 
@@ -22,44 +22,37 @@ pub struct Props {
 
 #[derive(Debug)]
 pub struct Simulation {
-    props: Props,
-    link: ComponentLink<Self>,
     boids: Vec<Boid>,
     interval: Interval,
 }
 impl Component for Simulation {
     type Message = Msg;
     type Properties = Props;
 
-    fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self {
-        let settings = &props.settings;
+    fn create(ctx: &Context<Self>) -> Self {
+        let settings = &ctx.props().settings;
         let boids = (0..settings.boids)
             .map(|_| Boid::new_random(settings))
             .collect();
 
         let interval = {
-            let link = link.clone();
+            let link = ctx.link().clone();
             Interval::new(settings.tick_interval_ms as u32, move || {
                 link.send_message(Msg::Tick)
             })
         };
 
-        Self {
-            props,
-            link,
-            boids,
-            interval,
-        }
+        Self { boids, interval }
     }
 
-    fn update(&mut self, msg: Self::Message) -> ShouldRender {
+    fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> ShouldRender {
         match msg {
             Msg::Tick => {
                 let Props {
                     ref settings,
                     paused,
                     ..
-                } = self.props;
+                } = *ctx.props();
 
                 if paused {
                     false
@@ -71,36 +64,26 @@ impl Component for Simulation {
         }
     }
 
-    fn change(&mut self, props: Self::Properties) -> ShouldRender {
-        if props == self.props {
-            false
-        } else {
-            if props.generation != self.props.generation {
-                // generation changed; restart from scratch.
-                self.boids.clear();
-            }
+    fn changed(&mut self, ctx: &Context<Self>) -> ShouldRender {
+        self.boids.clear();
 
-            let settings = &props.settings;
-            self.boids
-                .resize_with(settings.boids, || Boid::new_random(settings));
+        let settings = &ctx.props().settings;
+        self.boids
+            .resize_with(settings.boids, || Boid::new_random(settings));
 
-            if settings.tick_interval_ms != self.props.settings.tick_interval_ms {
-                // as soon as the previous task is dropped it is cancelled.
-                // We don't need to worry about manually stopping it.
-                self.interval = {
-                    let link = self.link.clone();
-                    Interval::new(settings.tick_interval_ms as u32, move || {
-                        link.send_message(Msg::Tick)
-                    })
-                }
-            }
+        // as soon as the previous task is dropped it is cancelled.
+        // We don't need to worry about manually stopping it.
+        self.interval = {
+            let link = ctx.link().clone();
+            Interval::new(settings.tick_interval_ms as u32, move || {
+                link.send_message(Msg::Tick)
+            })
+        };
 
-            self.props = props;
-            true
-        }
+        true
     }
 
-    fn view(&self) -> Html {
+    fn view(&self, _ctx: &Context<Self>) -> Html {
         let view_box = format!("0 0 {} {}", SIZE.x, SIZE.y);
 
         html! {

examples/boids/src/slider.rs

@@ -1,7 +1,7 @@
 use std::cell::Cell;
 use yew::{
-    html, web_sys::HtmlInputElement, Callback, Component, ComponentLink, Html, InputEvent,
-    Properties, ShouldRender, TargetCast,
+    html, web_sys::HtmlInputElement, Callback, Component, Context, Html, InputEvent, Properties,
+    ShouldRender, TargetCast,
 };
 
 thread_local! {
@@ -28,34 +28,23 @@ pub struct Props {
 }
 
 pub struct Slider {
-    props: Props,
     id: usize,
 }
 impl Component for Slider {
     type Message = ();
     type Properties = Props;
 
-    fn create(props: Self::Properties, _link: ComponentLink<Self>) -> Self {
+    fn create(_ctx: &Context<Self>) -> Self {
         Self {
-            props,
             id: next_slider_id(),
         }
     }
 
-    fn update(&mut self, _msg: Self::Message) -> ShouldRender {
+    fn update(&mut self, _ctx: &Context<Self>, _msg: Self::Message) -> ShouldRender {
         unimplemented!()
     }
 
-    fn change(&mut self, props: Self::Properties) -> ShouldRender {
-        if self.props != props {
-            self.props = props;
-            true
-        } else {
-            false
-        }
-    }
-
-    fn view(&self) -> Html {
+    fn view(&self, ctx: &Context<Self>) -> Html {
         let Props {
             label,
             value,
@@ -65,7 +54,7 @@ impl Component for Slider {
             min,
             max,
             step,
-        } = self.props;
+        } = *ctx.props();
 
         let precision = precision.unwrap_or_else(|| if percentage { 1 } else { 0 });
 

examples/counter/src/main.rs

@@ -1,6 +1,6 @@
 use js_sys::Date;
 use weblog::console_log;
-use yew::{html, Component, ComponentLink, Html, ShouldRender};
+use yew::{html, Component, Context, Html, ShouldRender};
 
 // Define the possible messages which can be sent to the component
 pub enum Msg {
@@ -9,19 +9,18 @@ pub enum Msg {
 }
 
 pub struct Model {
-    link: ComponentLink<Self>,
     value: i64, // This will store the counter value
 }
 
 impl Component for Model {
     type Message = Msg;
     type Properties = ();
 
-    fn create(_props: Self::Properties, link: ComponentLink<Self>) -> Self {
-        Self { link, value: 0 }
+    fn create(_ctx: &Context<Self>) -> Self {
+        Self { value: 0 }
     }
 
-    fn update(&mut self, msg: Self::Message) -> ShouldRender {
+    fn update(&mut self, _ctx: &Context<Self>, msg: Self::Message) -> ShouldRender {
         match msg {
             Msg::Increment => {
                 self.value += 1;
@@ -36,26 +35,22 @@ impl Component for Model {
         }
     }
 
-    fn change(&mut self, _props: Self::Properties) -> ShouldRender {
-        false
-    }
-
-    fn view(&self) -> Html {
+    fn view(&self, ctx: &Context<Self>) -> Html {
         html! {
             <div>
                 <div class="panel">
                     // A button to send the Increment message
-                    <button class="button" onclick={self.link.callback(|_| Msg::Increment)}>
+                    <button class="button" onclick={ctx.link().callback(|_| Msg::Increment)}>
                         { "+1" }
                     </button>
 
                     // A button to send the Decrement message
-                    <button onclick={self.link.callback(|_| Msg::Decrement)}>
+                    <button onclick={ctx.link().callback(|_| Msg::Decrement)}>
                         { "-1" }
                     </button>
 
                     // A button to send two Increment messages
-                    <button onclick={self.link.batch_callback(|_| vec![Msg::Increment, Msg::Increment])}>
+                    <button onclick={ctx.link().batch_callback(|_| vec![Msg::Increment, Msg::Increment])}>
                         { "+1, +1" }
                     </button>
 

examples/crm/src/add_client.rs

@@ -1,8 +1,7 @@
 use crate::Client;
+use yew::web_sys::{Event, HtmlInputElement, HtmlTextAreaElement};
 use yew::{
-    classes, html,
-    web_sys::{Event, HtmlInputElement, HtmlTextAreaElement},
-    Callback, Component, ComponentLink, Html, Properties, ShouldRender, TargetCast,
+    classes, html, Callback, Component, Context, Html, Properties, ShouldRender, TargetCast,
 };
 
 #[derive(Debug)]
@@ -21,23 +20,19 @@ pub struct Props {
 }
 
 pub struct AddClientForm {
-    props: Props,
-    link: ComponentLink<Self>,
     client: Client,
 }
 impl Component for AddClientForm {
     type Message = Msg;
     type Properties = Props;
 
-    fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self {
+    fn create(_ctx: &Context<Self>) -> Self {
         Self {
-            props,
-            link,
             client: Client::default(),
         }
     }
 
-    fn update(&mut self, msg: Self::Message) -> ShouldRender {
+    fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> ShouldRender {
         let client = &mut self.client;
         match msg {
             Msg::UpdateFirstName(value) => {
@@ -53,27 +48,19 @@ impl Component for AddClientForm {
                 true
             }
             Msg::Add => {
-                self.props.on_add.emit(std::mem::take(client));
+                ctx.props().on_add.emit(std::mem::take(client));
                 true
             }
             Msg::Abort => {
-                self.props.on_abort.emit(());
+                ctx.props().on_abort.emit(());
                 false
             }
         }
     }
 
-    fn change(&mut self, props: Self::Properties) -> ShouldRender {
-        if self.props == props {
-            false
-        } else {
-            self.props = props;
-            true
-        }
-    }
-
-    fn view(&self) -> Html {
-        let Self { link, client, .. } = self;
+    fn view(&self, ctx: &Context<Self>) -> Html {
+        let link = ctx.link();
+        let Self { client, .. } = self;
 
         let update_name = |f: fn(String) -> Msg| {
             link.callback(move |e: Event| {