Better ImplicitClone ergnomics (#3508)

* Use cheap-to-clone types more

* Use IArray in NodeSeq & add IntoPropValue for &AttrValue

* Add function get_mut() on VChild to make things easier

* Use AttrValue in timer_functional example

* fix VList PartialEq

* extract implicit-clone as workspace dep and bump to 0.5.1

* docs: advocate using IArray and IMap instead of Vec and HashMap

* docs: AI translation for lifecycles.mdx in Japanese and simplified Chinese
---------

Co-authored-by: Mattuwu <syan4@ualberta.ca>

Author: cecton

Cargo.lock

@@ -30,3 +30,4 @@ unexpected_cfgs = { level = "warn", check-cfg = [
 ]}
 [workspace.dependencies]
 tokio = { version = "1.47.1" }
+implicit-clone = { version = "0.5.1" }

Cargo.toml

@@ -6,7 +6,7 @@ edition = "2021"
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
 [dependencies]
-implicit-clone = { version = "0.5", features = ["map"] }
+implicit-clone = { workspace = true, features = ["map"] }
 wasm-bindgen = "0.2"
 web-sys = "0.3"
 yew = { path = "../../packages/yew", features = ["csr"] }

examples/immutable/Cargo.toml

@@ -6,6 +6,7 @@ edition = "2021"
 license = "MIT OR Apache-2.0"
 
 [dependencies]
+implicit-clone = { workspace = true }
 log = "0.4"
 wasm-logger = "0.2"
 yew = { path = "../../packages/yew", features = ["csr"] }

examples/nested_list/Cargo.toml

@@ -1,5 +1,4 @@
-use std::rc::Rc;
-
+use implicit_clone::unsync::IArray;
 use yew::prelude::*;
 use yew::virtual_dom::VChild;
 
@@ -14,9 +13,9 @@ pub enum Msg {
 #[derive(Clone, PartialEq, Properties)]
 pub struct Props {
     #[prop_or_default]
-    pub header: Vec<VChild<ListHeader>>,
+    pub header: IArray<VChild<ListHeader>>,
     #[prop_or_default]
-    pub children: Vec<VChild<ListItem>>,
+    pub children: IArray<VChild<ListItem>>,
 
     pub on_hover: Callback<Hovered>,
     pub weak_link: WeakComponentLink<List>,
@@ -56,9 +55,9 @@ impl Component for List {
         html! {
             <div class="list-container" {onmouseover}>
                 <div class={classes!("list", inactive)}>
-                    { ctx.props().header.clone() }
+                    { &ctx.props().header }
                     <div class="items">
-                        { Self::view_items(ctx.props().children.clone()) }
+                        { Self::view_items(&ctx.props().children) }
                     </div>
                 </div>
             </div>
@@ -67,13 +66,13 @@ impl Component for List {
 }
 
 impl List {
-    fn view_items(children: Vec<VChild<ListItem>>) -> Html {
+    fn view_items(children: &IArray<VChild<ListItem>>) -> Html {
         children
-            .into_iter()
+            .iter()
             .filter(|c| !c.props.hide)
             .enumerate()
             .map(|(i, mut c)| {
-                let props = Rc::make_mut(&mut c.props);
+                let props = c.get_mut();
                 props.name = format!("#{} - {}", i + 1, props.name).into();
                 c
             })

examples/nested_list/src/list.rs

@@ -40,16 +40,14 @@ impl<COMP: Component> PartialEq for WeakComponentLink<COMP> {
     }
 }
 
-#[derive(Debug, Clone, PartialEq, Eq, Hash)]
+#[derive(Debug, Clone, ImplicitClone, PartialEq, Eq, Hash)]
 pub enum Hovered {
     Header,
     Item(AttrValue),
     List,
     None,
 }
 
-impl ImplicitClone for Hovered {}
-
 impl fmt::Display for Hovered {
     fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
         write!(

examples/nested_list/src/main.rs

@@ -1,6 +1,6 @@
 use gloo::console::{self, Timer};
 use gloo::timers::callback::{Interval, Timeout};
-use yew::{html, Component, Context, Html};
+use yew::prelude::*;
 
 pub enum Msg {
     StartTimeout,
@@ -13,7 +13,7 @@ pub enum Msg {
 
 pub struct App {
     time: String,
-    messages: Vec<&'static str>,
+    messages: Vec<AttrValue>,
     _standalone: (Interval, Interval),
     interval: Option<Interval>,
     timeout: Option<Timeout>,
@@ -68,7 +68,7 @@ impl Component for App {
                 self.messages.clear();
                 console::clear!();
 
-                self.messages.push("Timer started!");
+                self.log("Timer started!");
                 self.console_timer = Some(Timer::new("Timer"));
                 true
             }
@@ -82,18 +82,18 @@ impl Component for App {
                 self.messages.clear();
                 console::clear!();
 
-                self.messages.push("Interval started!");
+                self.log("Interval started!");
                 true
             }
             Msg::Cancel => {
                 self.cancel();
-                self.messages.push("Canceled!");
+                self.log("Canceled!");
                 console::warn!("Canceled!");
                 true
             }
             Msg::Done => {
                 self.cancel();
-                self.messages.push("Done!");
+                self.log("Done!");
 
                 // todo weblog
                 // ConsoleService::group();
@@ -107,7 +107,7 @@ impl Component for App {
                 true
             }
             Msg::Tick => {
-                self.messages.push("Tick...");
+                self.log("Tick...");
                 // todo weblog
                 // ConsoleService::count_named("Tick");
                 true
@@ -139,14 +139,20 @@ impl Component for App {
                         { &self.time }
                     </div>
                     <div id="messages">
-                        { for self.messages.iter().map(|message| html! { <p>{ *message }</p> }) }
+                        { for self.messages.iter().map(|message| html! { <p>{ message }</p> }) }
                     </div>
                 </div>
             </>
         }
     }
 }
 
+impl App {
+    fn log(&mut self, message: impl Into<AttrValue>) {
+        self.messages.push(message.into());
+    }
+}
+
 fn main() {
     yew::Renderer::<App>::new().render();
 }

examples/timer/src/main.rs

@@ -18,11 +18,34 @@ enum TimerAction {
 
 #[derive(Clone, Debug)]
 struct TimerState {
-    messages: Vec<&'static str>,
+    messages: Messages,
     interval_handle: Option<Rc<Interval>>,
     timeout_handle: Option<Rc<Timeout>>,
 }
 
+#[derive(Clone, Debug, Default, PartialEq, Eq)]
+struct Messages(Vec<AttrValue>);
+
+impl Messages {
+    fn log(&mut self, message: impl Into<AttrValue>) {
+        self.0.push(message.into());
+    }
+}
+
+impl std::ops::Deref for Messages {
+    type Target = Vec<AttrValue>;
+
+    fn deref(&self) -> &Self::Target {
+        &self.0
+    }
+}
+
+impl FromIterator<&'static str> for Messages {
+    fn from_iter<T: IntoIterator<Item = &'static str>>(it: T) -> Self {
+        Messages(it.into_iter().map(Into::into).collect())
+    }
+}
+
 impl PartialEq for TimerState {
     fn eq(&self, other: &Self) -> bool {
         self.messages == other.messages
@@ -37,26 +60,26 @@ impl Reducible for TimerState {
         match action {
             TimerAction::Add(message) => {
                 let mut messages = self.messages.clone();
-                messages.push(message);
+                messages.log(message);
                 Rc::new(TimerState {
                     messages,
                     interval_handle: self.interval_handle.clone(),
                     timeout_handle: self.timeout_handle.clone(),
                 })
             }
             TimerAction::SetInterval(t) => Rc::new(TimerState {
-                messages: vec!["Interval started!"],
+                messages: ["Interval started!"].into_iter().collect(),
                 interval_handle: Some(Rc::from(t)),
                 timeout_handle: self.timeout_handle.clone(),
             }),
             TimerAction::SetTimeout(t) => Rc::new(TimerState {
-                messages: vec!["Timer started!!"],
+                messages: ["Timer started!!"].into_iter().collect(),
                 interval_handle: self.interval_handle.clone(),
                 timeout_handle: Some(Rc::from(t)),
             }),
             TimerAction::TimeoutDone => {
                 let mut messages = self.messages.clone();
-                messages.push("Done!");
+                messages.log("Done!");
                 Rc::new(TimerState {
                     messages,
                     interval_handle: self.interval_handle.clone(),
@@ -65,7 +88,7 @@ impl Reducible for TimerState {
             }
             TimerAction::Cancel => {
                 let mut messages = self.messages.clone();
-                messages.push("Canceled!");
+                messages.log("Canceled!");
                 Rc::new(TimerState {
                     messages,
                     interval_handle: None,
@@ -94,7 +117,7 @@ fn clock() -> Html {
 #[function_component]
 fn App() -> Html {
     let state = use_reducer(|| TimerState {
-        messages: Vec::new(),
+        messages: Default::default(),
         interval_handle: None,
         timeout_handle: None,
     });
@@ -105,7 +128,7 @@ fn App() -> Html {
         .iter()
         .map(|message| {
             key += 1;
-            html! { <p key={ key }>{ *message }</p> }
+            html! { <p {key}>{ message }</p> }
         })
         .collect();
 

examples/timer_functional/src/main.rs

@@ -28,6 +28,7 @@ rustversion = "1"
 [dev-dependencies]
 trybuild = "1"
 yew = { path = "../yew" }
+implicit-clone = { workspace = true }
 
 [lints]
 workspace = true

packages/yew-macro/Cargo.toml

@@ -59,7 +59,7 @@ impl ::yew::Component for Container {
     }
 }
 
-#[derive(::std::clone::Clone, ::std::cmp::PartialEq)]
+#[derive(::std::clone::Clone, ::implicit_clone::ImplicitClone, ::std::cmp::PartialEq)]
 pub enum ChildrenVariants {
     Child(::yew::virtual_dom::VChild<Child>),
     AltChild(::yew::virtual_dom::VChild<AltChild>),