yewstack · WorldSEnder · Mar 27, 2022 · Mar 27, 2022 · Mar 27, 2022 · Mar 27, 2022
diff --git a/Cargo.toml b/Cargo.toml
@@ -22,6 +22,7 @@ members = [
   "examples/inner_html",
   "examples/js_callback",
   "examples/keyed_list",
+  "examples/light_switch",
   "examples/mount_point",
   "examples/nested_list",
   "examples/node_refs",

diff --git a/examples/light_switch/Cargo.toml b/examples/light_switch/Cargo.toml
@@ -0,0 +1,9 @@
+[package]
+name = "light_switch"
+version = "0.1.0"
+authors = ["WorldSEnder <WorldSEnder@users.noreply.github.com>"]
+edition = "2021"
+license = "MIT OR Apache-2.0"
+
+[dependencies]
+yew = { path = "../../packages/yew", features = ["csr"] }
diff --git a/examples/light_switch/README.md b/examples/light_switch/README.md
@@ -0,0 +1,23 @@
+# Counter Example
+
+[![Demo](https://img.shields.io/website?label=demo&url=https%3A%2F%2Fexamples.yew.rs%2Flight_switch)](https://examples.yew.rs/light_switch)
+
+A simple example of a light switch controlling the light setting in neighboring component
+
+## Running
+
+Run a debug version of this application:
+
+```bash
+trunk serve
+```
+
+Run a release version of this application:
+
+```bash
+trunk serve --release
+```
+
+## Concepts
+
+Demonstrates the use of ComponentRef to send messages to children and sibling components.
diff --git a/examples/light_switch/index.html b/examples/light_switch/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Yew • Light Switch</title>
+
+    <link data-trunk rel="rust" />
+    <link data-trunk rel="sass" href="index.scss" />
+  </head>
+
+  <body></body>
+</html>
diff --git a/examples/light_switch/index.scss b/examples/light_switch/index.scss
@@ -0,0 +1,64 @@
+.switchlabel {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  height: 34px;
+  margin: 2px;
+}
+
+.switch input {
+  display: none;
+}
+
+.switch .drive {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  -webkit-transition: .4s;
+  transition: .4s;
+  border-radius: 34px;
+  display: flex;
+}
+
+.switch .pin {
+  height: 26px;
+  width: 26px;
+  background-color: white;
+  border-radius: 50%;
+  margin: 4px;
+}
+
+.drive .buffer {
+  transition: flex .1s;
+}
+
+.switch input:checked + .drive {
+  background-color: #2196F3;
+}
+
+.switch input:checked + .drive .buffer {
+  flex: 1;
+}
+
+.switch input:focus + .drive {
+  box-shadow: 0 0 1px #2196F3;
+}
+
+.light {
+  min-height: 400px;
+  background-color: #404040;
+}
+
+.light.on {
+  background-color: rgb(242, 245, 53);
+}
diff --git a/examples/light_switch/src/main.rs b/examples/light_switch/src/main.rs
@@ -0,0 +1,77 @@
+use yew::html::{BindableRef, Scope};
+use yew::prelude::*;
+
+#[derive(PartialEq, Properties)]
+struct SwitchProps {
+    on_toggle: Callback<MouseEvent>,
+}
+
+#[function_component]
+fn Switch(SwitchProps { on_toggle }: &SwitchProps) -> Html {
+    html! {
+        <div class="switchlabel">
+            <label class="switch">
+                <input type="checkbox" onclick={on_toggle} />
+                <span class="drive">
+                    <span class="buffer" />
+                    <span class="pin" />
+                </span>
+            </label>
+            {"Light switch"}
+        </div>
+    }
+}
+
+enum LightMessage {
+    Toggle,
+}
+
+struct Light {
+    is_on: bool,
+}
+
+impl ComponentWithRef for Light {
+    type Message = LightMessage;
+    type Properties = ();
+    type Reference = Scope<Self>;
+
+    fn create(ctx: &Context<Self>, bindable_ref: BindableRef<'_, Self::Reference>) -> Self {
+        bindable_ref.bind(ctx.link().clone());
+        Light { is_on: false }
+    }
+
+    fn update(&mut self, _ctx: &Context<Self>, LightMessage::Toggle: LightMessage) -> bool {
+        self.is_on = !self.is_on;
+        true
+    }
+
+    fn view(&self, _ctx: &Context<Self>) -> Html {
+        html! {
+            <div class={classes!["light", self.is_on.then(|| "on")]} />
+        }
+    }
+}
+
+#[function_component]
+fn Room() -> Html {
+    let light_ref: ComponentRef<Light> = use_html_ref();
+    let on_toggle = {
+        let light_ref = light_ref.clone();
+        Callback::from(move |_| {
+            light_ref
+                .get()
+                .expect("a light to have rendered")
+                .send_message(LightMessage::Toggle)
+        })
+    };
+    html! {
+        <>
+            <Light ref={&light_ref} />
+            <Switch {on_toggle} />
+        </>
+    }
+}
+
+fn main() {
+    yew::Renderer::<Room>::new().render();
+}
diff --git a/examples/nested_list/README.md b/examples/nested_list/README.md
@@ -7,7 +7,7 @@ This example shows a nested list and displays which item was last hovered.
 ## Concepts
 
 - Creating components which only accepts specific child elements
-- Communicating with a component that isn't a parent. See `WeakComponentLink` in [main.rs](src/main.rs).
+- Communicating with a component that isn't a parent.
 
 ## Improvements
 

diff --git a/examples/nested_list/src/app.rs b/examples/nested_list/src/app.rs
@@ -3,16 +3,16 @@ use yew::prelude::*;
 use super::header::ListHeader;
 use super::item::ListItem;
 use super::list::List;
-use super::{Hovered, WeakComponentLink};
+use super::Hovered;
 
 pub enum Msg {
     Hover(Hovered),
 }
 
 pub struct App {
     hovered: Hovered,
-    list_link: WeakComponentLink<List>,
-    sub_list_link: WeakComponentLink<List>,
+    list_link: ComponentRef<List>,
+    sub_list_link: ComponentRef<List>,
 }
 
 impl Component for App {
@@ -22,8 +22,8 @@ impl Component for App {
     fn create(_ctx: &Context<Self>) -> Self {
         Self {
             hovered: Hovered::None,
-            list_link: WeakComponentLink::default(),
-            sub_list_link: WeakComponentLink::default(),
+            list_link: HtmlRef::new(),
+            sub_list_link: HtmlRef::new(),
         }
     }
 
@@ -53,13 +53,13 @@ impl Component for App {
         html! {
             <div class="main" {onmouseover}>
                 <h1>{ "Nested List Demo" }</h1>
-                <List {on_hover} weak_link={list_link}>
+                <List {on_hover} ref={list_link}>
                     <ListHeader text="Calling all Rusties!" {on_hover} {list_link} />
                     <ListItem name="Rustin" {on_hover} />
                     <ListItem hide=true name="Rustaroo" {on_hover} />
                     <ListItem name="Rustifer" {on_hover}>
                         <div class="sublist" onmouseover={onmouseoversublist}>{ "Sublist!" }</div>
-                        <List {on_hover} weak_link={sub_list_link}>
+                        <List {on_hover} ref={sub_list_link}>
                             <ListHeader text="Sub Rusties!" {on_hover} list_link={sub_list_link}/>
                             <ListItem hide=true name="Hidden Sub" {on_hover} />
                             { for letters }

diff --git a/examples/nested_list/src/header.rs b/examples/nested_list/src/header.rs
@@ -1,13 +1,13 @@
 use yew::prelude::*;
 
 use super::list::{List, Msg as ListMsg};
-use super::{Hovered, WeakComponentLink};
+use super::Hovered;
 
 #[derive(Clone, PartialEq, Properties)]
 pub struct Props {
     pub on_hover: Callback<Hovered>,
     pub text: String,
-    pub list_link: WeakComponentLink<List>,
+    pub list_link: ComponentRef<List>,
 }
 
 pub struct ListHeader;
@@ -21,7 +21,7 @@ impl Component for ListHeader {
     }
 
     fn view(&self, ctx: &Context<Self>) -> Html {
-        let list_link = ctx.props().list_link.borrow().clone().unwrap();
+        let list_link = ctx.props().list_link.get().unwrap();
         let onmouseover = ctx.props().on_hover.reform(|e: MouseEvent| {
             e.stop_propagation();
             Hovered::Header

diff --git a/examples/nested_list/src/list.rs b/examples/nested_list/src/list.rs
@@ -1,12 +1,12 @@
 use std::rc::Rc;
 
-use yew::html::{ChildrenRenderer, NodeRef};
+use yew::html::{BindableRef, ChildrenRenderer, ComponentWithRef, Scope};
 use yew::prelude::*;
 use yew::virtual_dom::{VChild, VComp};
 
 use crate::header::{ListHeader, Props as HeaderProps};
 use crate::item::{ListItem, Props as ItemProps};
-use crate::{Hovered, WeakComponentLink};
+use crate::Hovered;
 
 #[derive(Clone, PartialEq)]
 pub enum Variants {
@@ -46,10 +46,8 @@ where
 impl From<ListVariant> for Html {
     fn from(variant: ListVariant) -> Html {
         match variant.props {
-            Variants::Header(props) => {
-                VComp::new::<ListHeader>(props, NodeRef::default(), None).into()
-            }
-            Variants::Item(props) => VComp::new::<ListItem>(props, NodeRef::default(), None).into(),
+            Variants::Header(props) => VComp::new::<ListHeader>(props, None, None).into(),
+            Variants::Item(props) => VComp::new::<ListItem>(props, None, None).into(),
         }
     }
 }
@@ -62,22 +60,19 @@ pub enum Msg {
 pub struct Props {
     pub children: ChildrenRenderer<ListVariant>,
     pub on_hover: Callback<Hovered>,
-    pub weak_link: WeakComponentLink<List>,
 }
 
 pub struct List {
     inactive: bool,
 }
 
-impl Component for List {
+impl ComponentWithRef for List {
     type Message = Msg;
     type Properties = Props;
+    type Reference = Scope<Self>;
 
-    fn create(ctx: &Context<Self>) -> Self {
-        ctx.props()
-            .weak_link
-            .borrow_mut()
-            .replace(ctx.link().clone());
+    fn create(ctx: &Context<Self>, bindable_ref: BindableRef<'_, Self::Reference>) -> Self {
+        bindable_ref.bind(ctx.link().clone());
         Self { inactive: false }
     }
 

diff --git a/examples/nested_list/src/main.rs b/examples/nested_list/src/main.rs
@@ -3,41 +3,7 @@ mod header;
 mod item;
 mod list;
 
-use std::cell::RefCell;
 use std::fmt;
-use std::ops::Deref;
-use std::rc::Rc;
-
-use yew::html::{Component, ImplicitClone, Scope};
-
-pub struct WeakComponentLink<COMP: Component>(Rc<RefCell<Option<Scope<COMP>>>>);
-
-impl<COMP: Component> Clone for WeakComponentLink<COMP> {
-    fn clone(&self) -> Self {
-        Self(Rc::clone(&self.0))
-    }
-}
-impl<COMP: Component> ImplicitClone for WeakComponentLink<COMP> {}
-
-impl<COMP: Component> Default for WeakComponentLink<COMP> {
-    fn default() -> Self {
-        Self(Rc::default())
-    }
-}
-
-impl<COMP: Component> Deref for WeakComponentLink<COMP> {
-    type Target = Rc<RefCell<Option<Scope<COMP>>>>;
-
-    fn deref(&self) -> &Self::Target {
-        &self.0
-    }
-}
-
-impl<COMP: Component> PartialEq for WeakComponentLink<COMP> {
-    fn eq(&self, other: &Self) -> bool {
-        Rc::ptr_eq(&self.0, &other.0)
-    }
-}
 
 #[derive(Debug)]
 pub enum Hovered {

diff --git a/examples/node_refs/src/input.rs b/examples/node_refs/src/input.rs
@@ -7,6 +7,7 @@ pub enum Msg {
 #[derive(Properties, PartialEq)]
 pub struct Props {
     pub on_hover: Callback<()>,
+    pub input_ref: NodeRef,
 }
 
 pub struct InputComponent;
@@ -33,6 +34,7 @@ impl Component for InputComponent {
             <input
                 type="text"
                 class="input-component"
+                ref={&ctx.props().input_ref}
                 onmouseover={ctx.link().callback(|_| Msg::Hover)}
             />
         }