From 1ef3cc8fa14c3c34e4bd011212670783abc4257f Mon Sep 17 00:00:00 2001
From: Cecile Tonglet <cecile.tonglet@cecton.com>
Date: Thu, 3 Mar 2022 14:34:33 +0100
Subject: [PATCH 01/25] Add imut to Yew's dependencies

---
 .github/workflows/publish-examples.yml |  13 ++-
 Cargo.toml                             |   5 +
 examples/immutable/Cargo.toml          |  12 +++
 examples/immutable/README.md           |  15 +++
 examples/immutable/examples/array.rs   |  96 +++++++++++++++++
 examples/immutable/examples/map.rs     |  99 ++++++++++++++++++
 examples/immutable/examples/string.rs  |  79 ++++++++++++++
 packages/yew/Cargo.toml                |   1 +
 packages/yew/src/html/conversion.rs    |  48 +++++----
 packages/yew/src/lib.rs                |   1 +
 packages/yew/src/virtual_dom/mod.rs    | 139 +------------------------
 11 files changed, 350 insertions(+), 158 deletions(-)
 create mode 100644 examples/immutable/Cargo.toml
 create mode 100644 examples/immutable/README.md
 create mode 100644 examples/immutable/examples/array.rs
 create mode 100644 examples/immutable/examples/map.rs
 create mode 100644 examples/immutable/examples/string.rs

diff --git a/.github/workflows/publish-examples.yml b/.github/workflows/publish-examples.yml
index 69168f5269b..49996e9eb2c 100644
--- a/.github/workflows/publish-examples.yml
+++ b/.github/workflows/publish-examples.yml
@@ -58,12 +58,21 @@ jobs:
               continue
             fi
 
-            echo "building: $example"
             (
               cd "$path"
               dist_dir="$output/$example"
 
-              trunk build --release --dist "$dist_dir" --public-url "$PUBLIC_URL_PREFIX/$example"
+              echo "building: $example"
+              if [[ "$example" == "immutable" ]]; then
+                cargo run --example string -- dist --release
+                mv target/release/dist "${dist_dir}-string"
+                cargo run --example array -- dist --release
+                mv target/release/dist "${dist_dir}-array"
+                cargo run --example map -- dist --release
+                mv target/release/dist "${dist_dir}-map"
+              else
+                trunk build --release --dist "$dist_dir" --public-url "$PUBLIC_URL_PREFIX/$example"
+              fi
             )
           done
 
diff --git a/Cargo.toml b/Cargo.toml
index a8a25de90ac..470897d8e0f 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -34,6 +34,7 @@ members = [
   "examples/webgl",
   "examples/web_worker_fib",
   "examples/suspense",
+  "examples/immutable",
 
   # Tools
   "tools/changelog",
@@ -42,3 +43,7 @@ members = [
   "tools/benchmark-hooks",
   "tools/website-test",
 ]
+
+[patch.crates-io]
+xtask-wasm = { path = "/home/cecile/repos/xtask-wasm" }
+xtask-wasm-run-example = { path = "/home/cecile/repos/xtask-wasm/xtask-wasm-run-example" }
diff --git a/examples/immutable/Cargo.toml b/examples/immutable/Cargo.toml
new file mode 100644
index 00000000000..285679ed63f
--- /dev/null
+++ b/examples/immutable/Cargo.toml
@@ -0,0 +1,12 @@
+[package]
+name = "immutable"
+version = "0.1.0"
+edition = "2021"
+
+# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
+
+[dev-dependencies]
+wasm-bindgen = "0.2"
+web-sys = "0.3"
+xtask-wasm = { version = "0.1", features = ["run-example"] }
+yew = { path = "../../packages/yew" }
diff --git a/examples/immutable/README.md b/examples/immutable/README.md
new file mode 100644
index 00000000000..f88fde2e5dc
--- /dev/null
+++ b/examples/immutable/README.md
@@ -0,0 +1,15 @@
+# Yew Immutable Example
+
+## How to run
+
+These examples are built with
+[xtask-wasm](https://github.com/rustminded/xtask-wasm).
+
+Running an example is as easy as running a single command:
+
+```bash
+cd examples/immutable
+cargo run --example <name_of_the_example>
+```
+
+Then you can connect on http://127.0.0.1:8000
diff --git a/examples/immutable/examples/array.rs b/examples/immutable/examples/array.rs
new file mode 100644
index 00000000000..471460502a9
--- /dev/null
+++ b/examples/immutable/examples/array.rs
@@ -0,0 +1,96 @@
+use wasm_bindgen::JsCast;
+use wasm_bindgen::UnwrapThrowExt;
+use web_sys::{HtmlInputElement, KeyboardEvent};
+use yew::immutable::*;
+use yew::prelude::*;
+
+struct MyComponent;
+
+#[derive(Properties, PartialEq)]
+struct MyComponentProps {
+    values: IArray<IString>,
+}
+
+impl Component for MyComponent {
+    type Message = ();
+    type Properties = MyComponentProps;
+
+    fn create(_ctx: &Context<Self>) -> Self {
+        Self
+    }
+
+    fn view(&self, ctx: &Context<Self>) -> Html {
+        let props = ctx.props();
+
+        html! {
+            <>
+            <p>{"Hello to:"}</p>
+            <ul>
+            { for props.values.iter().map(|s| html!(<li>{s}</li>)) }
+            </ul>
+            </>
+        }
+    }
+}
+
+struct App {
+    values: IArray<IString>,
+}
+
+enum AppMessage {
+    AddName(String),
+    Noop,
+}
+
+impl Component for App {
+    type Message = AppMessage;
+    type Properties = ();
+
+    fn create(_ctx: &Context<Self>) -> Self {
+        Self {
+            values: Default::default(),
+        }
+    }
+
+    fn update(&mut self, _: &Context<Self>, msg: Self::Message) -> bool {
+        match msg {
+            AppMessage::AddName(name) => {
+                self.values = self
+                    .values
+                    .iter()
+                    .chain(std::iter::once(IString::from(name)))
+                    .collect();
+                true
+            }
+            AppMessage::Noop => false,
+        }
+    }
+
+    fn view(&self, ctx: &Context<Self>) -> Html {
+        let link = ctx.link();
+        let onkeyup = link.callback(|e: KeyboardEvent| {
+            if e.key() == "Enter" {
+                let event: Event = e.dyn_into().unwrap_throw();
+                let event_target = event.target().unwrap_throw();
+                let target: HtmlInputElement = event_target.dyn_into().unwrap_throw();
+                let value = target.value();
+                target.set_value("");
+                AppMessage::AddName(value)
+            } else {
+                AppMessage::Noop
+            }
+        });
+
+        html! {
+            <>
+            <input {onkeyup} />
+            <MyComponent values={&self.values} />
+            </>
+        }
+    }
+}
+
+#[xtask_wasm::run_example]
+fn run_app() {
+    yew::start_app::<App>();
+}
diff --git a/examples/immutable/examples/map.rs b/examples/immutable/examples/map.rs
new file mode 100644
index 00000000000..d9ffa72bd1c
--- /dev/null
+++ b/examples/immutable/examples/map.rs
@@ -0,0 +1,99 @@
+use wasm_bindgen::JsCast;
+use wasm_bindgen::UnwrapThrowExt;
+use web_sys::{HtmlInputElement, KeyboardEvent};
+use yew::immutable::*;
+use yew::prelude::*;
+
+struct MyComponent;
+
+#[derive(Properties, PartialEq)]
+struct MyComponentProps {
+    values: IMap<u32, IString>,
+}
+
+impl Component for MyComponent {
+    type Message = ();
+    type Properties = MyComponentProps;
+
+    fn create(_ctx: &Context<Self>) -> Self {
+        Self
+    }
+
+    fn view(&self, ctx: &Context<Self>) -> Html {
+        let props = ctx.props();
+
+        html! {
+            <>
+            <p>{"Hello to:"}</p>
+            <ul>
+            { for props.values.iter().map(|(i, s)| html!(<li>{i}{" => "}{s}</li>)) }
+            </ul>
+            </>
+        }
+    }
+}
+
+struct App {
+    values: IMap<u32, IString>,
+}
+
+enum AppMessage {
+    AddName(String),
+    Noop,
+}
+
+impl Component for App {
+    type Message = AppMessage;
+    type Properties = ();
+
+    fn create(_ctx: &Context<Self>) -> Self {
+        Self {
+            values: Default::default(),
+        }
+    }
+
+    fn update(&mut self, _: &Context<Self>, msg: Self::Message) -> bool {
+        match msg {
+            AppMessage::AddName(name) => {
+                self.values = self
+                    .values
+                    .iter()
+                    .chain(std::iter::once((
+                        self.values.len() as u32,
+                        IString::from(name),
+                    )))
+                    .collect();
+                true
+            }
+            AppMessage::Noop => false,
+        }
+    }
+
+    fn view(&self, ctx: &Context<Self>) -> Html {
+        let link = ctx.link();
+        let onkeyup = link.callback(|e: KeyboardEvent| {
+            if e.key() == "Enter" {
+                let event: Event = e.dyn_into().unwrap_throw();
+                let event_target = event.target().unwrap_throw();
+                let target: HtmlInputElement = event_target.dyn_into().unwrap_throw();
+                let value = target.value();
+                target.set_value("");
+                AppMessage::AddName(value)
+            } else {
+                AppMessage::Noop
+            }
+        });
+
+        html! {
+            <>
+            <input {onkeyup} />
+            <MyComponent values={&self.values} />
+            </>
+        }
+    }
+}
+
+#[xtask_wasm::run_example]
+fn run_app() {
+    yew::start_app::<App>();
+}
diff --git a/examples/immutable/examples/string.rs b/examples/immutable/examples/string.rs
new file mode 100644
index 00000000000..9139e12f73a
--- /dev/null
+++ b/examples/immutable/examples/string.rs
@@ -0,0 +1,79 @@
+use wasm_bindgen::JsCast;
+use wasm_bindgen::UnwrapThrowExt;
+use web_sys::{HtmlInputElement, InputEvent};
+use yew::immutable::*;
+use yew::prelude::*;
+
+struct MyComponent;
+
+#[derive(Properties, PartialEq)]
+struct MyComponentProps {
+    name: IString,
+}
+
+impl Component for MyComponent {
+    type Message = ();
+    type Properties = MyComponentProps;
+
+    fn create(_ctx: &Context<Self>) -> Self {
+        Self
+    }
+
+    fn view(&self, ctx: &Context<Self>) -> Html {
+        let props = ctx.props();
+
+        html! {
+            <p>{"Hello "}{&props.name}{"!"}</p>
+        }
+    }
+}
+
+struct App {
+    name: IString,
+}
+
+enum AppMessage {
+    UpdateName(String),
+}
+
+impl Component for App {
+    type Message = AppMessage;
+    type Properties = ();
+
+    fn create(_ctx: &Context<Self>) -> Self {
+        Self {
+            name: "World".into(),
+        }
+    }
+
+    fn update(&mut self, _: &Context<Self>, msg: Self::Message) -> bool {
+        match msg {
+            AppMessage::UpdateName(name) => {
+                self.name = name.into();
+                true
+            }
+        }
+    }
+
+    fn view(&self, ctx: &Context<Self>) -> Html {
+        let link = ctx.link();
+        let oninput = link.callback(|e: InputEvent| {
+            let event: Event = e.dyn_into().unwrap_throw();
+            let event_target = event.target().unwrap_throw();
+            let target: HtmlInputElement = event_target.dyn_into().unwrap_throw();
+            AppMessage::UpdateName(target.value())
+        });
+
+        html! {
+            <>
+            <input value={&self.name} {oninput} />
+            <MyComponent name={&self.name} />
+            </>
+        }
+    }
+}
+
+#[xtask_wasm::run_example]
+fn run_app() {
+    yew::start_app::<App>();
+}
diff --git a/packages/yew/Cargo.toml b/packages/yew/Cargo.toml
index fa63c9d84d7..936b9e88eae 100644
--- a/packages/yew/Cargo.toml
+++ b/packages/yew/Cargo.toml
@@ -29,6 +29,7 @@ thiserror = "1.0"
 
 futures = { version = "0.3", optional = true }
 html-escape = { version = "0.2.9", optional = true }
+imut = { git = "https://github.com/rustminded/imut", branch = "main", features = ["map"] }
 
 [dependencies.web-sys]
 version = "0.3"
diff --git a/packages/yew/src/html/conversion.rs b/packages/yew/src/html/conversion.rs
index aa0b6c7d077..590eaae5d56 100644
--- a/packages/yew/src/html/conversion.rs
+++ b/packages/yew/src/html/conversion.rs
@@ -2,30 +2,12 @@ use super::{Component, NodeRef, Scope};
 use crate::virtual_dom::AttrValue;
 use std::rc::Rc;
 
-/// Marker trait for types that the [`html!`](macro@crate::html) macro may clone implicitly.
-pub trait ImplicitClone: Clone {}
-
-impl<T: ImplicitClone> ImplicitClone for Option<T> {}
-impl<T> ImplicitClone for Rc<T> {}
+pub use imut::ImplicitClone;
 
 impl ImplicitClone for NodeRef {}
 impl<Comp: Component> ImplicitClone for Scope<Comp> {}
 // TODO there are still a few missing
 
-macro_rules! impl_implicit_clone {
-    ($($ty:ty),+ $(,)?) => {
-        $(impl ImplicitClone for $ty {})*
-    };
-}
-
-#[rustfmt::skip]
-impl_implicit_clone!(
-    u8, u16, u32, u64, u128,
-    i8, i16, i32, i64, i128,
-    f32, f64,
-    &'static str,
-);
-
 /// A trait similar to `Into<T>` which allows conversion to a value of a `Properties` struct.
 pub trait IntoPropValue<T> {
     /// Convert `self` to a value of a `Properties` struct.
@@ -99,6 +81,34 @@ impl_into_prop!(|value: &'static str| -> AttrValue { AttrValue::Static(value) })
 impl_into_prop!(|value: String| -> AttrValue { AttrValue::Rc(Rc::from(value)) });
 impl_into_prop!(|value: Rc<str>| -> AttrValue { AttrValue::Rc(value) });
 
+impl<T: ImplicitClone + 'static> IntoPropValue<imut::IArray<T>> for &'static [T] {
+    fn into_prop_value(self) -> imut::IArray<T> {
+        imut::IArray::from(self)
+    }
+}
+
+impl<T: ImplicitClone + 'static> IntoPropValue<imut::IArray<T>> for Vec<T> {
+    fn into_prop_value(self) -> imut::IArray<T> {
+        imut::IArray::from(self)
+    }
+}
+
+impl<K: Eq + std::hash::Hash + ImplicitClone + 'static, V: PartialEq + ImplicitClone + 'static>
+    IntoPropValue<imut::IMap<K, V>> for &'static [(K, V)]
+{
+    fn into_prop_value(self) -> imut::IMap<K, V> {
+        imut::IMap::from(self)
+    }
+}
+
+impl<K: Eq + std::hash::Hash + ImplicitClone + 'static, V: PartialEq + ImplicitClone + 'static>
+    IntoPropValue<imut::IMap<K, V>> for indexmap::IndexMap<K, V>
+{
+    fn into_prop_value(self) -> imut::IMap<K, V> {
+        imut::IMap::from(self)
+    }
+}
+
 #[cfg(test)]
 mod test {
     use super::*;
diff --git a/packages/yew/src/lib.rs b/packages/yew/src/lib.rs
index e0885153ca5..e0e8bbeb6b1 100644
--- a/packages/yew/src/lib.rs
+++ b/packages/yew/src/lib.rs
@@ -278,6 +278,7 @@ pub mod suspense;
 pub mod tests;
 pub mod utils;
 pub mod virtual_dom;
+pub use imut as immutable;
 #[cfg(feature = "ssr")]
 pub use server_renderer::*;
 
diff --git a/packages/yew/src/virtual_dom/mod.rs b/packages/yew/src/virtual_dom/mod.rs
index 898d2517928..17aaad3c4c3 100644
--- a/packages/yew/src/virtual_dom/mod.rs
+++ b/packages/yew/src/virtual_dom/mod.rs
@@ -21,8 +21,7 @@ pub mod vtext;
 
 use crate::html::{AnyScope, NodeRef};
 use indexmap::IndexMap;
-use std::borrow::Cow;
-use std::{collections::HashMap, fmt, hint::unreachable_unchecked, iter};
+use std::{collections::HashMap, hint::unreachable_unchecked, iter};
 use web_sys::{Element, Node};
 
 #[doc(inline)]
@@ -43,143 +42,9 @@ pub use self::vsuspense::VSuspense;
 pub use self::vtag::VTag;
 #[doc(inline)]
 pub use self::vtext::VText;
-use std::fmt::Formatter;
-use std::ops::Deref;
-use std::rc::Rc;
 
 /// Attribute value
-#[derive(Debug)]
-pub enum AttrValue {
-    /// String living for `'static`
-    Static(&'static str),
-    /// Reference counted string
-    Rc(Rc<str>),
-}
-
-impl Deref for AttrValue {
-    type Target = str;
-
-    fn deref(&self) -> &Self::Target {
-        match self {
-            AttrValue::Static(s) => *s,
-            AttrValue::Rc(s) => &*s,
-        }
-    }
-}
-
-impl From<&'static str> for AttrValue {
-    fn from(s: &'static str) -> Self {
-        AttrValue::Static(s)
-    }
-}
-
-impl From<String> for AttrValue {
-    fn from(s: String) -> Self {
-        AttrValue::Rc(Rc::from(s))
-    }
-}
-
-impl From<Rc<str>> for AttrValue {
-    fn from(s: Rc<str>) -> Self {
-        AttrValue::Rc(s)
-    }
-}
-
-impl From<Cow<'static, str>> for AttrValue {
-    fn from(s: Cow<'static, str>) -> Self {
-        match s {
-            Cow::Borrowed(s) => s.into(),
-            Cow::Owned(s) => s.into(),
-        }
-    }
-}
-
-impl Clone for AttrValue {
-    fn clone(&self) -> Self {
-        match self {
-            AttrValue::Static(s) => AttrValue::Static(s),
-            AttrValue::Rc(s) => AttrValue::Rc(Rc::clone(s)),
-        }
-    }
-}
-
-impl AsRef<str> for AttrValue {
-    fn as_ref(&self) -> &str {
-        &*self
-    }
-}
-
-impl fmt::Display for AttrValue {
-    fn fmt(&self, f: &mut Formatter<'_>) -> fmt::Result {
-        match self {
-            AttrValue::Static(s) => write!(f, "{}", s),
-            AttrValue::Rc(s) => write!(f, "{}", s),
-        }
-    }
-}
-
-impl PartialEq for AttrValue {
-    fn eq(&self, other: &Self) -> bool {
-        self.as_ref() == other.as_ref()
-    }
-}
-
-impl Eq for AttrValue {}
-
-impl AttrValue {
-    /// Consumes the AttrValue and returns the owned String from the AttrValue whenever possible.
-    /// For AttrValue::Rc the <str> is cloned to String in case there are other Rc or Weak pointers to the
-    /// same allocation.
-    pub fn into_string(self) -> String {
-        match self {
-            AttrValue::Static(s) => (*s).to_owned(),
-            AttrValue::Rc(mut rc) => {
-                if let Some(s) = Rc::get_mut(&mut rc) {
-                    (*s).to_owned()
-                } else {
-                    rc.to_string()
-                }
-            }
-        }
-    }
-}
-
-#[cfg(test)]
-mod tests_attr_value {
-    use super::*;
-
-    #[test]
-    fn test_into_string() {
-        let av = AttrValue::Static("str");
-        assert_eq!(av.into_string(), "str");
-
-        let av = AttrValue::Rc("Rc<str>".into());
-        assert_eq!(av.into_string(), "Rc<str>");
-    }
-
-    #[test]
-    fn test_from_string() {
-        let av = AttrValue::from("str");
-        assert_eq!(av.into_string(), "str");
-
-        let av = AttrValue::from("String".to_string());
-        assert_eq!(av.into_string(), "String");
-
-        let av = AttrValue::from(Cow::from("BorrowedCow"));
-        assert_eq!(av.into_string(), "BorrowedCow");
-    }
-
-    #[test]
-    fn test_equality() {
-        // construct 3 AttrValue with same embedded value; expectation is that all are equal
-        let a = AttrValue::Static("same");
-        let b = AttrValue::Rc("same".into());
-
-        assert_eq!(a, b);
-
-        assert_eq!(a, b);
-    }
-}
+pub type AttrValue = imut::IString;
 
 /// Applies contained changes to DOM [Element]
 trait Apply {

From c7b958dc6b42fda6ade8b99b9e4cea17c1af9d3b Mon Sep 17 00:00:00 2001
From: Cecile Tonglet <cecile.tonglet@cecton.com>
Date: Thu, 31 Mar 2022 11:36:45 +0100
Subject: [PATCH 02/25] Update example to use trunk

---
 Cargo.toml                                    |  4 --
 examples/immutable/Cargo.toml                 |  3 +-
 examples/immutable/index.html                 | 17 ++++++
 examples/immutable/{examples => src}/array.rs | 57 +++++++------------
 examples/immutable/src/main.rs                | 28 +++++++++
 examples/immutable/{examples => src}/map.rs   | 57 +++++++------------
 .../immutable/{examples => src}/string.rs     | 43 +++++---------
 7 files changed, 102 insertions(+), 107 deletions(-)
 create mode 100644 examples/immutable/index.html
 rename examples/immutable/{examples => src}/array.rs (61%)
 create mode 100644 examples/immutable/src/main.rs
 rename examples/immutable/{examples => src}/map.rs (63%)
 rename examples/immutable/{examples => src}/string.rs (61%)

diff --git a/Cargo.toml b/Cargo.toml
index 470897d8e0f..7d89a8b01ca 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -43,7 +43,3 @@ members = [
   "tools/benchmark-hooks",
   "tools/website-test",
 ]
-
-[patch.crates-io]
-xtask-wasm = { path = "/home/cecile/repos/xtask-wasm" }
-xtask-wasm-run-example = { path = "/home/cecile/repos/xtask-wasm/xtask-wasm-run-example" }
diff --git a/examples/immutable/Cargo.toml b/examples/immutable/Cargo.toml
index 285679ed63f..900963093ea 100644
--- a/examples/immutable/Cargo.toml
+++ b/examples/immutable/Cargo.toml
@@ -5,8 +5,7 @@ edition = "2021"
 
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
-[dev-dependencies]
+[dependencies]
 wasm-bindgen = "0.2"
 web-sys = "0.3"
-xtask-wasm = { version = "0.1", features = ["run-example"] }
 yew = { path = "../../packages/yew" }
diff --git a/examples/immutable/index.html b/examples/immutable/index.html
new file mode 100644
index 00000000000..8f7dd97459a
--- /dev/null
+++ b/examples/immutable/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Yew • TodoMVC</title>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/todomvc-common@1.0.5/base.css"
+    />
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/todomvc-app-css@2.3.0/index.css"
+    />
+  </head>
+  <body></body>
+</html>
diff --git a/examples/immutable/examples/array.rs b/examples/immutable/src/array.rs
similarity index 61%
rename from examples/immutable/examples/array.rs
rename to examples/immutable/src/array.rs
index 471460502a9..c92a608b9b3 100644
--- a/examples/immutable/examples/array.rs
+++ b/examples/immutable/src/array.rs
@@ -4,46 +4,34 @@ use web_sys::{HtmlInputElement, KeyboardEvent};
 use yew::immutable::*;
 use yew::prelude::*;
 
-struct MyComponent;
-
 #[derive(Properties, PartialEq)]
-struct MyComponentProps {
+struct DisplayProps {
     values: IArray<IString>,
 }
 
-impl Component for MyComponent {
-    type Message = ();
-    type Properties = MyComponentProps;
-
-    fn create(_ctx: &Context<Self>) -> Self {
-        Self
-    }
-
-    fn view(&self, ctx: &Context<Self>) -> Html {
-        let props = ctx.props();
-
-        html! {
-            <>
-            <p>{"Hello to:"}</p>
-            <ul>
-            { for props.values.iter().map(|s| html!(<li>{s}</li>)) }
-            </ul>
-            </>
-        }
+#[function_component]
+fn Display(props: &DisplayProps) -> Html {
+    html! {
+        <>
+        <p>{"Hello to:"}</p>
+        <ul>
+        { for props.values.iter().map(|s| html!(<li>{s}</li>)) }
+        </ul>
+        </>
     }
 }
 
-struct App {
+pub struct ArrayExample {
     values: IArray<IString>,
 }
 
-enum AppMessage {
+pub enum ArrayExampleMessage {
     AddName(String),
     Noop,
 }
 
-impl Component for App {
-    type Message = AppMessage;
+impl Component for ArrayExample {
+    type Message = ArrayExampleMessage;
     type Properties = ();
 
     fn create(_ctx: &Context<Self>) -> Self {
@@ -54,7 +42,7 @@ impl Component for App {
 
     fn update(&mut self, _: &Context<Self>, msg: Self::Message) -> bool {
         match msg {
-            AppMessage::AddName(name) => {
+            ArrayExampleMessage::AddName(name) => {
                 self.values = self
                     .values
                     .iter()
@@ -62,7 +50,7 @@ impl Component for App {
                     .collect();
                 true
             }
-            AppMessage::Noop => false,
+            ArrayExampleMessage::Noop => false,
         }
     }
 
@@ -75,22 +63,19 @@ impl Component for App {
                 let target: HtmlInputElement = event_target.dyn_into().unwrap_throw();
                 let value = target.value();
                 target.set_value("");
-                AppMessage::AddName(value)
+                ArrayExampleMessage::AddName(value)
             } else {
-                AppMessage::Noop
+                ArrayExampleMessage::Noop
             }
         });
 
         html! {
             <>
+            <h2>{"Input"}</h2>
             <input {onkeyup} />
-            <MyComponent values={&self.values} />
+            <h2>{"Output"}</h2>
+            <Display values={&self.values} />
             </>
         }
     }
 }
-
-#[xtask_wasm::run_example]
-fn run_app() {
-    yew::start_app::<App>();
-}
diff --git a/examples/immutable/src/main.rs b/examples/immutable/src/main.rs
new file mode 100644
index 00000000000..58ba786a367
--- /dev/null
+++ b/examples/immutable/src/main.rs
@@ -0,0 +1,28 @@
+mod array;
+mod map;
+mod string;
+
+use self::array::*;
+use self::map::*;
+use self::string::*;
+use yew::prelude::*;
+
+#[function_component]
+fn App() -> Html {
+    html! {
+        <>
+            <h1>{ "IString Example" }</h1>
+            <StringExample />
+            <hr/>
+            <h1>{ "IArray Example" }</h1>
+            <ArrayExample />
+            <hr/>
+            <h1>{ "IMap Example" }</h1>
+            <MapExample />
+        </>
+    }
+}
+
+fn main() {
+    yew::start_app::<App>();
+}
diff --git a/examples/immutable/examples/map.rs b/examples/immutable/src/map.rs
similarity index 63%
rename from examples/immutable/examples/map.rs
rename to examples/immutable/src/map.rs
index d9ffa72bd1c..46f292c8fe0 100644
--- a/examples/immutable/examples/map.rs
+++ b/examples/immutable/src/map.rs
@@ -4,46 +4,34 @@ use web_sys::{HtmlInputElement, KeyboardEvent};
 use yew::immutable::*;
 use yew::prelude::*;
 
-struct MyComponent;
-
 #[derive(Properties, PartialEq)]
-struct MyComponentProps {
+struct DisplayProps {
     values: IMap<u32, IString>,
 }
 
-impl Component for MyComponent {
-    type Message = ();
-    type Properties = MyComponentProps;
-
-    fn create(_ctx: &Context<Self>) -> Self {
-        Self
-    }
-
-    fn view(&self, ctx: &Context<Self>) -> Html {
-        let props = ctx.props();
-
-        html! {
-            <>
-            <p>{"Hello to:"}</p>
-            <ul>
-            { for props.values.iter().map(|(i, s)| html!(<li>{i}{" => "}{s}</li>)) }
-            </ul>
-            </>
-        }
+#[function_component]
+fn Display(props: &DisplayProps) -> Html {
+    html! {
+        <>
+        <p>{"Hello to:"}</p>
+        <ul>
+        { for props.values.iter().map(|(i, s)| html!(<li>{i}{" => "}{s}</li>)) }
+        </ul>
+        </>
     }
 }
 
-struct App {
+pub struct MapExample {
     values: IMap<u32, IString>,
 }
 
-enum AppMessage {
+pub enum MapExampleMessage {
     AddName(String),
     Noop,
 }
 
-impl Component for App {
-    type Message = AppMessage;
+impl Component for MapExample {
+    type Message = MapExampleMessage;
     type Properties = ();
 
     fn create(_ctx: &Context<Self>) -> Self {
@@ -54,7 +42,7 @@ impl Component for App {
 
     fn update(&mut self, _: &Context<Self>, msg: Self::Message) -> bool {
         match msg {
-            AppMessage::AddName(name) => {
+            MapExampleMessage::AddName(name) => {
                 self.values = self
                     .values
                     .iter()
@@ -65,7 +53,7 @@ impl Component for App {
                     .collect();
                 true
             }
-            AppMessage::Noop => false,
+            MapExampleMessage::Noop => false,
         }
     }
 
@@ -78,22 +66,19 @@ impl Component for App {
                 let target: HtmlInputElement = event_target.dyn_into().unwrap_throw();
                 let value = target.value();
                 target.set_value("");
-                AppMessage::AddName(value)
+                MapExampleMessage::AddName(value)
             } else {
-                AppMessage::Noop
+                MapExampleMessage::Noop
             }
         });
 
         html! {
             <>
+            <h2>{"Input"}</h2>
             <input {onkeyup} />
-            <MyComponent values={&self.values} />
+            <h2>{"Output"}</h2>
+            <Display values={&self.values} />
             </>
         }
     }
 }
-
-#[xtask_wasm::run_example]
-fn run_app() {
-    yew::start_app::<App>();
-}
diff --git a/examples/immutable/examples/string.rs b/examples/immutable/src/string.rs
similarity index 61%
rename from examples/immutable/examples/string.rs
rename to examples/immutable/src/string.rs
index 9139e12f73a..125ce52c9d1 100644
--- a/examples/immutable/examples/string.rs
+++ b/examples/immutable/src/string.rs
@@ -4,40 +4,28 @@ use web_sys::{HtmlInputElement, InputEvent};
 use yew::immutable::*;
 use yew::prelude::*;
 
-struct MyComponent;
-
 #[derive(Properties, PartialEq)]
-struct MyComponentProps {
+struct DisplayProps {
     name: IString,
 }
 
-impl Component for MyComponent {
-    type Message = ();
-    type Properties = MyComponentProps;
-
-    fn create(_ctx: &Context<Self>) -> Self {
-        Self
-    }
-
-    fn view(&self, ctx: &Context<Self>) -> Html {
-        let props = ctx.props();
-
-        html! {
-            <p>{"Hello "}{&props.name}{"!"}</p>
-        }
+#[function_component]
+fn Display(props: &DisplayProps) -> Html {
+    html! {
+        <p>{"Hello "}{&props.name}{"!"}</p>
     }
 }
 
-struct App {
+pub struct StringExample {
     name: IString,
 }
 
-enum AppMessage {
+pub enum StringExampleMessage {
     UpdateName(String),
 }
 
-impl Component for App {
-    type Message = AppMessage;
+impl Component for StringExample {
+    type Message = StringExampleMessage;
     type Properties = ();
 
     fn create(_ctx: &Context<Self>) -> Self {
@@ -48,7 +36,7 @@ impl Component for App {
 
     fn update(&mut self, _: &Context<Self>, msg: Self::Message) -> bool {
         match msg {
-            AppMessage::UpdateName(name) => {
+            StringExampleMessage::UpdateName(name) => {
                 self.name = name.into();
                 true
             }
@@ -61,19 +49,16 @@ impl Component for App {
             let event: Event = e.dyn_into().unwrap_throw();
             let event_target = event.target().unwrap_throw();
             let target: HtmlInputElement = event_target.dyn_into().unwrap_throw();
-            AppMessage::UpdateName(target.value())
+            StringExampleMessage::UpdateName(target.value())
         });
 
         html! {
             <>
+            <h2>{"Input"}</h2>
             <input value={&self.name} {oninput} />
-            <MyComponent name={&self.name} />
+            <h2>{"Output"}</h2>
+            <Display name={&self.name} />
             </>
         }
     }
 }
-
-#[xtask_wasm::run_example]
-fn run_app() {
-    yew::start_app::<App>();
-}

From 46660ed2129b20b64d3d733060a37c11745c756b Mon Sep 17 00:00:00 2001
From: Cecile Tonglet <cecile.tonglet@cecton.com>
Date: Thu, 31 Mar 2022 11:42:35 +0100
Subject: [PATCH 03/25] Update with most recent version of Yew

---
 examples/immutable/Cargo.toml  | 2 +-
 examples/immutable/src/main.rs | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/examples/immutable/Cargo.toml b/examples/immutable/Cargo.toml
index 900963093ea..361fe1303b8 100644
--- a/examples/immutable/Cargo.toml
+++ b/examples/immutable/Cargo.toml
@@ -8,4 +8,4 @@ edition = "2021"
 [dependencies]
 wasm-bindgen = "0.2"
 web-sys = "0.3"
-yew = { path = "../../packages/yew" }
+yew = { path = "../../packages/yew", features = ["csr"] }
diff --git a/examples/immutable/src/main.rs b/examples/immutable/src/main.rs
index 58ba786a367..571bc613f7f 100644
--- a/examples/immutable/src/main.rs
+++ b/examples/immutable/src/main.rs
@@ -24,5 +24,5 @@ fn App() -> Html {
 }
 
 fn main() {
-    yew::start_app::<App>();
+    yew::Renderer::<App>::new().render();
 }

From 8bea4e6ff96f9117456c4e25eb5ff9a34dec4ed7 Mon Sep 17 00:00:00 2001
From: Cecile Tonglet <cecile.tonglet@cecton.com>
Date: Thu, 31 Mar 2022 11:44:47 +0100
Subject: [PATCH 04/25] Revert changes to workflow

---
 .github/workflows/publish-examples.yml | 13 ++-----------
 1 file changed, 2 insertions(+), 11 deletions(-)

diff --git a/.github/workflows/publish-examples.yml b/.github/workflows/publish-examples.yml
index 49996e9eb2c..69168f5269b 100644
--- a/.github/workflows/publish-examples.yml
+++ b/.github/workflows/publish-examples.yml
@@ -58,21 +58,12 @@ jobs:
               continue
             fi
 
+            echo "building: $example"
             (
               cd "$path"
               dist_dir="$output/$example"
 
-              echo "building: $example"
-              if [[ "$example" == "immutable" ]]; then
-                cargo run --example string -- dist --release
-                mv target/release/dist "${dist_dir}-string"
-                cargo run --example array -- dist --release
-                mv target/release/dist "${dist_dir}-array"
-                cargo run --example map -- dist --release
-                mv target/release/dist "${dist_dir}-map"
-              else
-                trunk build --release --dist "$dist_dir" --public-url "$PUBLIC_URL_PREFIX/$example"
-              fi
+              trunk build --release --dist "$dist_dir" --public-url "$PUBLIC_URL_PREFIX/$example"
             )
           done
 

From 741e0c50ac481512f3a16abb51e3c5f08c9ab231 Mon Sep 17 00:00:00 2001
From: Cecile Tonglet <cecile.tonglet@cecton.com>
Date: Thu, 31 Mar 2022 12:09:52 +0100
Subject: [PATCH 05/25] Update README

---
 examples/immutable/README.md | 16 +++-------------
 1 file changed, 3 insertions(+), 13 deletions(-)

diff --git a/examples/immutable/README.md b/examples/immutable/README.md
index f88fde2e5dc..6604c64e5c4 100644
--- a/examples/immutable/README.md
+++ b/examples/immutable/README.md
@@ -1,15 +1,5 @@
-# Yew Immutable Example
+# Immutable Example
 
-## How to run
+[![Demo](https://img.shields.io/website?label=demo&url=https%3A%2F%2Fexamples.yew.rs%2Fimmutable)](https://examples.yew.rs/immutable)
 
-These examples are built with
-[xtask-wasm](https://github.com/rustminded/xtask-wasm).
-
-Running an example is as easy as running a single command:
-
-```bash
-cd examples/immutable
-cargo run --example <name_of_the_example>
-```
-
-Then you can connect on http://127.0.0.1:8000
+This is a technical demonstration for how to use immutables types in Yew.

From 7ff2aa7c004ae08a869d92be02b101b5b0e4c297 Mon Sep 17 00:00:00 2001
From: Cecile Tonglet <cecile.tonglet@cecton.com>
Date: Thu, 31 Mar 2022 12:16:23 +0100
Subject: [PATCH 06/25] Update css

---
 examples/immutable/index.html | 24 ++++++++++--------------
 examples/immutable/index.scss | 11 +++++++++++
 2 files changed, 21 insertions(+), 14 deletions(-)
 create mode 100644 examples/immutable/index.scss

diff --git a/examples/immutable/index.html b/examples/immutable/index.html
index 8f7dd97459a..ca9bd343190 100644
--- a/examples/immutable/index.html
+++ b/examples/immutable/index.html
@@ -1,17 +1,13 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>Yew • TodoMVC</title>
-    <link
-      rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/todomvc-common@1.0.5/base.css"
-    />
-    <link
-      rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/todomvc-app-css@2.3.0/index.css"
-    />
-  </head>
-  <body></body>
+
+<head>
+  <meta charset="utf-8" />
+  <title>Yew • Immutable</title>
+  <link data-trunk rel="scss" href="index.scss"/>
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@900&display=swap" rel="stylesheet">
+</head>
+
+<body></body>
+
 </html>
diff --git a/examples/immutable/index.scss b/examples/immutable/index.scss
new file mode 100644
index 00000000000..a548fa82fb6
--- /dev/null
+++ b/examples/immutable/index.scss
@@ -0,0 +1,11 @@
+$font-stack:    Roboto, sans-serif;
+$primary-color: #f5f5f5;
+
+body {
+    font: 100% $font-stack;
+    color: black;
+    background-color: $primary-color;
+    margin: 0 auto;
+    min-width: 230px;
+    max-width: 550px;
+}

From 126fb18ee6b0145def84826a6285f5dd9734e2c2 Mon Sep 17 00:00:00 2001
From: Cecile Tonglet <cecile.tonglet@cecton.com>
Date: Fri, 15 Apr 2022 11:38:22 +0100
Subject: [PATCH 07/25] Renamed crate imut to implicit-clone

---
 packages/yew/Cargo.toml             |  2 +-
 packages/yew/src/html/conversion.rs | 27 ++++++++++++++-------------
 packages/yew/src/lib.rs             |  2 +-
 packages/yew/src/virtual_dom/mod.rs |  2 +-
 4 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/packages/yew/Cargo.toml b/packages/yew/Cargo.toml
index d8b0ef42e24..08bed2e69a2 100644
--- a/packages/yew/Cargo.toml
+++ b/packages/yew/Cargo.toml
@@ -29,7 +29,7 @@ thiserror = "1.0"
 
 futures = { version = "0.3", optional = true }
 html-escape = { version = "0.2.9", optional = true }
-imut = { git = "https://github.com/rustminded/imut", branch = "main", features = ["map"] }
+implicit-clone = { version = "0.2", features = ["map"] }
 
 [dependencies.web-sys]
 version = "0.3"
diff --git a/packages/yew/src/html/conversion.rs b/packages/yew/src/html/conversion.rs
index c4e8f658711..acd879c8e64 100644
--- a/packages/yew/src/html/conversion.rs
+++ b/packages/yew/src/html/conversion.rs
@@ -1,9 +1,10 @@
 use super::super::callback::Callback;
 use super::{Component, NodeRef, Scope};
 use crate::virtual_dom::AttrValue;
+use implicit_clone::unsync::{IArray, IMap};
 use std::rc::Rc;
 
-pub use imut::ImplicitClone;
+pub use implicit_clone::ImplicitClone;
 
 impl ImplicitClone for NodeRef {}
 impl<Comp: Component> ImplicitClone for Scope<Comp> {}
@@ -109,31 +110,31 @@ impl_into_prop!(|value: &'static str| -> AttrValue { AttrValue::Static(value) })
 impl_into_prop!(|value: String| -> AttrValue { AttrValue::Rc(Rc::from(value)) });
 impl_into_prop!(|value: Rc<str>| -> AttrValue { AttrValue::Rc(value) });
 
-impl<T: ImplicitClone + 'static> IntoPropValue<imut::IArray<T>> for &'static [T] {
-    fn into_prop_value(self) -> imut::IArray<T> {
-        imut::IArray::from(self)
+impl<T: ImplicitClone + 'static> IntoPropValue<IArray<T>> for &'static [T] {
+    fn into_prop_value(self) -> IArray<T> {
+        IArray::from(self)
     }
 }
 
-impl<T: ImplicitClone + 'static> IntoPropValue<imut::IArray<T>> for Vec<T> {
-    fn into_prop_value(self) -> imut::IArray<T> {
-        imut::IArray::from(self)
+impl<T: ImplicitClone + 'static> IntoPropValue<IArray<T>> for Vec<T> {
+    fn into_prop_value(self) -> IArray<T> {
+        IArray::from(self)
     }
 }
 
 impl<K: Eq + std::hash::Hash + ImplicitClone + 'static, V: PartialEq + ImplicitClone + 'static>
-    IntoPropValue<imut::IMap<K, V>> for &'static [(K, V)]
+    IntoPropValue<IMap<K, V>> for &'static [(K, V)]
 {
-    fn into_prop_value(self) -> imut::IMap<K, V> {
-        imut::IMap::from(self)
+    fn into_prop_value(self) -> IMap<K, V> {
+        IMap::from(self)
     }
 }
 
 impl<K: Eq + std::hash::Hash + ImplicitClone + 'static, V: PartialEq + ImplicitClone + 'static>
-    IntoPropValue<imut::IMap<K, V>> for indexmap::IndexMap<K, V>
+    IntoPropValue<IMap<K, V>> for indexmap::IndexMap<K, V>
 {
-    fn into_prop_value(self) -> imut::IMap<K, V> {
-        imut::IMap::from(self)
+    fn into_prop_value(self) -> IMap<K, V> {
+        IMap::from(self)
     }
 }
 
diff --git a/packages/yew/src/lib.rs b/packages/yew/src/lib.rs
index 8d343c585dc..6db79d71214 100644
--- a/packages/yew/src/lib.rs
+++ b/packages/yew/src/lib.rs
@@ -281,7 +281,7 @@ mod server_renderer;
 pub mod suspense;
 pub mod utils;
 pub mod virtual_dom;
-pub use imut as immutable;
+pub use implicit_clone::unsync as immutable;
 #[cfg(feature = "ssr")]
 pub use server_renderer::*;
 
diff --git a/packages/yew/src/virtual_dom/mod.rs b/packages/yew/src/virtual_dom/mod.rs
index 14daab9d1e9..a58ea53bea7 100644
--- a/packages/yew/src/virtual_dom/mod.rs
+++ b/packages/yew/src/virtual_dom/mod.rs
@@ -42,7 +42,7 @@ use indexmap::IndexMap;
 use std::hint::unreachable_unchecked;
 
 /// Attribute value
-pub type AttrValue = imut::IString;
+pub type AttrValue = implicit_clone::unsync::IString;
 
 #[cfg(any(feature = "ssr", feature = "hydration"))]
 mod feat_ssr_hydration {

From 6fbdf8cee75e53f6e944026f22c89529f0db4da4 Mon Sep 17 00:00:00 2001
From: Cecile Tonglet <cecile.tonglet@cecton.com>
Date: Fri, 15 Apr 2022 11:59:27 +0100
Subject: [PATCH 08/25] Add website doc

---
 examples/README.md                         |   1 +
 website/docs/advanced-topics/immutable.mdx | 112 +++++++++++++++++++++
 website/sidebars/docs.js                   |   1 +
 3 files changed, 114 insertions(+)
 create mode 100644 website/docs/advanced-topics/immutable.mdx

diff --git a/examples/README.md b/examples/README.md
index 26ab8f6249d..ac66a8b22a2 100644
--- a/examples/README.md
+++ b/examples/README.md
@@ -40,6 +40,7 @@ As an example, check out the TodoMVC example here: <https://examples.yew.rs/todo
 | [function_todomvc](function_todomvc)               | F  | Implementation of [TodoMVC](http://todomvc.com/) using function components and hooks.                                              |
 | [futures](futures)                                 | S  | Demonstrates how you can use futures and async code with Yew. Features a Markdown renderer.                                        |
 | [game_of_life](game_of_life)                       | S  | Implementation of [Conway's Game of Life](https://en.wikipedia.org/wiki/Conway%27s_Game_of_Life)                                   |
+| [immutable](immutable)                             | SF | Using immutable types in components.                                                                                               |
 | [inner_html](inner_html)                           | S  | Embeds an external document as raw HTML by manually managing the element                                                           |
 | [js_callback](js_callback)                         | S  | Interacts with JavaScript code                                                                                                     |
 | [keyed_list](keyed_list)                           | S  | Demonstrates how to use keys to improve the performance of lists                                                                   |
diff --git a/website/docs/advanced-topics/immutable.mdx b/website/docs/advanced-topics/immutable.mdx
new file mode 100644
index 00000000000..393f36b8af7
--- /dev/null
+++ b/website/docs/advanced-topics/immutable.mdx
@@ -0,0 +1,112 @@
+---
+title: 'Immutable'
+description: 'Immutable.js-like types for Yew'
+---
+
+## What are immutable types?
+
+These are types that you can instantiate but never mutate the values. In order
+to update a value, you must instantiate a new value.
+
+## Why using immutable types?
+
+In a React-like framework, properties a propagated from ancestors to children.
+This means that the properties must live when each component update happens.
+This is why properties should -ideally- be cheap to clone. In order to achieve
+this we usually wrap things in `Rc`.
+
+Immutable types are a great fit for holding property's values because they can
+be cheaply cloned when passed from component to component.
+
+## Example using an immutable array
+
+```rust
+use wasm_bindgen::JsCast;
+use wasm_bindgen::UnwrapThrowExt;
+use web_sys::{HtmlInputElement, KeyboardEvent};
+use yew::immutable::*;
+use yew::prelude::*;
+
+#[derive(Properties, PartialEq)]
+struct DisplayProps {
+    values: IArray<IString>,
+}
+
+#[function_component]
+fn Display(props: &DisplayProps) -> Html {
+    html! {
+        <>
+        <p>{"Hello to:"}</p>
+        <ul>
+        { for props.values.iter().map(|s| html!(<li>{s}</li>)) }
+        </ul>
+        </>
+    }
+}
+
+pub struct ArrayExample {
+    values: IArray<IString>,
+}
+
+pub enum ArrayExampleMessage {
+    AddName(String),
+    Noop,
+}
+
+impl Component for ArrayExample {
+    type Message = ArrayExampleMessage;
+    type Properties = ();
+
+    fn create(_ctx: &Context<Self>) -> Self {
+        Self {
+            values: Default::default(),
+        }
+    }
+
+    fn update(&mut self, _: &Context<Self>, msg: Self::Message) -> bool {
+        match msg {
+            ArrayExampleMessage::AddName(name) => {
+	    	// A new IArray is created with all the elements of the previous one
+		// plus the new element.
+                self.values = self
+                    .values
+                    .iter()
+                    .chain(std::iter::once(IString::from(name)))
+                    .collect();
+                true
+            }
+            ArrayExampleMessage::Noop => false,
+        }
+    }
+
+    fn view(&self, ctx: &Context<Self>) -> Html {
+        let link = ctx.link();
+        let onkeyup = link.callback(|e: KeyboardEvent| {
+            if e.key() == "Enter" {
+                let event: Event = e.dyn_into().unwrap_throw();
+                let event_target = event.target().unwrap_throw();
+                let target: HtmlInputElement = event_target.dyn_into().unwrap_throw();
+                let value = target.value();
+                target.set_value("");
+                ArrayExampleMessage::AddName(value)
+            } else {
+                ArrayExampleMessage::Noop
+            }
+        });
+
+        html! {
+            <>
+            <h2>{"Input"}</h2>
+            <input {onkeyup} />
+            <h2>{"Output"}</h2>
+            <Display values={&self.values} />
+            </>
+        }
+    }
+}
+```
+
+## Further reading
+
+-   [Immutable example](https://github.com/yewstack/yew/tree/master/examples/immutable)
+-   [Crate `implicit-clone`](https://docs.rs/implicit-clone/)
diff --git a/website/sidebars/docs.js b/website/sidebars/docs.js
index f59bfdcc067..eef200c0818 100644
--- a/website/sidebars/docs.js
+++ b/website/sidebars/docs.js
@@ -147,6 +147,7 @@ module.exports = {
                 'advanced-topics/optimizations',
                 'advanced-topics/portals',
                 'advanced-topics/server-side-rendering',
+                'advanced-topics/immutable',
             ],
         },
         {

From 8f3ce15f025cff5f59dafd3f48b741efb81adc35 Mon Sep 17 00:00:00 2001
From: Cecile Tonglet <cecile.tonglet@cecton.com>
Date: Fri, 15 Apr 2022 12:01:18 +0100
Subject: [PATCH 09/25] Fix incorrect import

---
 packages/yew/src/virtual_dom/mod.rs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/yew/src/virtual_dom/mod.rs b/packages/yew/src/virtual_dom/mod.rs
index a58ea53bea7..27411cf2ff6 100644
--- a/packages/yew/src/virtual_dom/mod.rs
+++ b/packages/yew/src/virtual_dom/mod.rs
@@ -118,7 +118,7 @@ mod feat_ssr_hydration {
         }
 
         #[cfg(feature = "hydration")]
-        pub fn name(&self) -> super::Cow<'static, str> {
+        pub fn name(&self) -> std::borrow::Cow<'static, str> {
             match self {
                 #[cfg(debug_assertions)]
                 Self::Component(m) => format!("Component({})", m).into(),

From b10f743346bd67902d531a1998329e1ba8809a05 Mon Sep 17 00:00:00 2001
From: Cecile Tonglet <cecile.tonglet@cecton.com>
Date: Fri, 15 Apr 2022 14:36:46 +0100
Subject: [PATCH 10/25] Doc update: rewording, typos, ...

---
 website/docs/advanced-topics/immutable.mdx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/website/docs/advanced-topics/immutable.mdx b/website/docs/advanced-topics/immutable.mdx
index 393f36b8af7..7239a89dce0 100644
--- a/website/docs/advanced-topics/immutable.mdx
+++ b/website/docs/advanced-topics/immutable.mdx
@@ -10,10 +10,10 @@ to update a value, you must instantiate a new value.
 
 ## Why using immutable types?
 
-In a React-like framework, properties a propagated from ancestors to children.
-This means that the properties must live when each component update happens.
-This is why properties should -ideally- be cheap to clone. In order to achieve
-this we usually wrap things in `Rc`.
+In a React-like framework, properties are propagated from ancestors to
+children. This means that the properties must live when each component is
+updated. This is why properties should —ideally— be cheap to clone. In order to
+achieve this we usually wrap things in `Rc`.
 
 Immutable types are a great fit for holding property's values because they can
 be cheaply cloned when passed from component to component.
@@ -66,8 +66,8 @@ impl Component for ArrayExample {
     fn update(&mut self, _: &Context<Self>, msg: Self::Message) -> bool {
         match msg {
             ArrayExampleMessage::AddName(name) => {
-	    	// A new IArray is created with all the elements of the previous one
-		// plus the new element.
+                // A new IArray is created with all the elements of the previous one
+                // plus the new element.
                 self.values = self
                     .values
                     .iter()

From 5d27f5b2eccf423ef2af527aa88616d84a775ebf Mon Sep 17 00:00:00 2001
From: Cecile Tonglet <cecile.tonglet@cecton.com>
Date: Fri, 15 Apr 2022 14:55:51 +0100
Subject: [PATCH 11/25] Update yew-macro test's stderr

---
 .../tests/html_macro/component-fail.stderr    | 16 +++----
 .../tests/html_macro/element-fail.stderr      | 46 +++++++++----------
 2 files changed, 31 insertions(+), 31 deletions(-)

diff --git a/packages/yew-macro/tests/html_macro/component-fail.stderr b/packages/yew-macro/tests/html_macro/component-fail.stderr
index 5374e76ba40..9f59d58362a 100644
--- a/packages/yew-macro/tests/html_macro/component-fail.stderr
+++ b/packages/yew-macro/tests/html_macro/component-fail.stderr
@@ -342,11 +342,11 @@ error[E0277]: the trait bound `{integer}: IntoPropValue<String>` is not satisfie
    |                                 ^ the trait `IntoPropValue<String>` is not implemented for `{integer}`
    |
    = help: the following implementations were found:
-             <&'static str as IntoPropValue<AttrValue>>
+             <&'static [(K, V)] as IntoPropValue<IMap<K, V>>>
+             <&'static [T] as IntoPropValue<IArray<T>>>
              <&'static str as IntoPropValue<Classes>>
-             <&'static str as IntoPropValue<Option<AttrValue>>>
-             <&'static str as IntoPropValue<Option<String>>>
-           and 18 others
+             <&'static str as IntoPropValue<IString>>
+           and 22 others
 
 error[E0277]: the trait bound `{integer}: IntoPropValue<String>` is not satisfied
   --> tests/html_macro/component-fail.rs:79:34
@@ -355,11 +355,11 @@ error[E0277]: the trait bound `{integer}: IntoPropValue<String>` is not satisfie
    |                                  ^ the trait `IntoPropValue<String>` is not implemented for `{integer}`
    |
    = help: the following implementations were found:
-             <&'static str as IntoPropValue<AttrValue>>
+             <&'static [(K, V)] as IntoPropValue<IMap<K, V>>>
+             <&'static [T] as IntoPropValue<IArray<T>>>
              <&'static str as IntoPropValue<Classes>>
-             <&'static str as IntoPropValue<Option<AttrValue>>>
-             <&'static str as IntoPropValue<Option<String>>>
-           and 18 others
+             <&'static str as IntoPropValue<IString>>
+           and 22 others
 
 error[E0308]: mismatched types
   --> tests/html_macro/component-fail.rs:80:31
diff --git a/packages/yew-macro/tests/html_macro/element-fail.stderr b/packages/yew-macro/tests/html_macro/element-fail.stderr
index 61b85a3fc60..f5abdaf11d6 100644
--- a/packages/yew-macro/tests/html_macro/element-fail.stderr
+++ b/packages/yew-macro/tests/html_macro/element-fail.stderr
@@ -246,11 +246,11 @@ error[E0308]: mismatched types
 40 |     html! { <option selected=1 /> };
    |                              ^ expected `bool`, found integer
 
-error[E0277]: the trait bound `(): IntoPropValue<Option<AttrValue>>` is not satisfied
+error[E0277]: the trait bound `(): IntoPropValue<Option<IString>>` is not satisfied
   --> tests/html_macro/element-fail.rs:43:26
    |
 43 |     html! { <input type={()} /> };
-   |                          ^^ the trait `IntoPropValue<Option<AttrValue>>` is not implemented for `()`
+   |                          ^^ the trait `IntoPropValue<Option<IString>>` is not implemented for `()`
    |
 note: required by `into_prop_value`
   --> $WORKSPACE/packages/yew/src/html/conversion.rs
@@ -258,11 +258,11 @@ note: required by `into_prop_value`
    |     fn into_prop_value(self) -> T;
    |     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 
-error[E0277]: the trait bound `(): IntoPropValue<Option<AttrValue>>` is not satisfied
+error[E0277]: the trait bound `(): IntoPropValue<Option<IString>>` is not satisfied
   --> tests/html_macro/element-fail.rs:44:27
    |
 44 |     html! { <input value={()} /> };
-   |                           ^^ the trait `IntoPropValue<Option<AttrValue>>` is not implemented for `()`
+   |                           ^^ the trait `IntoPropValue<Option<IString>>` is not implemented for `()`
    |
 note: required by `into_prop_value`
   --> $WORKSPACE/packages/yew/src/html/conversion.rs
@@ -270,11 +270,11 @@ note: required by `into_prop_value`
    |     fn into_prop_value(self) -> T;
    |     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 
-error[E0277]: the trait bound `(): IntoPropValue<Option<AttrValue>>` is not satisfied
+error[E0277]: the trait bound `(): IntoPropValue<Option<IString>>` is not satisfied
   --> tests/html_macro/element-fail.rs:45:22
    |
 45 |     html! { <a href={()} /> };
-   |                      ^^ the trait `IntoPropValue<Option<AttrValue>>` is not implemented for `()`
+   |                      ^^ the trait `IntoPropValue<Option<IString>>` is not implemented for `()`
    |
 note: required by `into_prop_value`
   --> $WORKSPACE/packages/yew/src/html/conversion.rs
@@ -282,11 +282,11 @@ note: required by `into_prop_value`
    |     fn into_prop_value(self) -> T;
    |     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 
-error[E0277]: the trait bound `NotToString: IntoPropValue<Option<AttrValue>>` is not satisfied
+error[E0277]: the trait bound `NotToString: IntoPropValue<Option<IString>>` is not satisfied
   --> tests/html_macro/element-fail.rs:46:28
    |
 46 |     html! { <input string={NotToString} /> };
-   |                            ^^^^^^^^^^^ the trait `IntoPropValue<Option<AttrValue>>` is not implemented for `NotToString`
+   |                            ^^^^^^^^^^^ the trait `IntoPropValue<Option<IString>>` is not implemented for `NotToString`
    |
 note: required by `into_prop_value`
   --> $WORKSPACE/packages/yew/src/html/conversion.rs
@@ -294,36 +294,36 @@ note: required by `into_prop_value`
    |     fn into_prop_value(self) -> T;
    |     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 
-error[E0277]: the trait bound `Option<NotToString>: IntoPropValue<Option<AttrValue>>` is not satisfied
+error[E0277]: the trait bound `Option<NotToString>: IntoPropValue<Option<IString>>` is not satisfied
   --> tests/html_macro/element-fail.rs:47:23
    |
 47 |     html! { <a media={Some(NotToString)} /> };
-   |                       ^^^^^^^^^^^^^^^^^ the trait `IntoPropValue<Option<AttrValue>>` is not implemented for `Option<NotToString>`
+   |                       ^^^^^^^^^^^^^^^^^ the trait `IntoPropValue<Option<IString>>` is not implemented for `Option<NotToString>`
    |
    = help: the following implementations were found:
-             <Option<&'static str> as IntoPropValue<Option<AttrValue>>>
+             <Option<&'static str> as IntoPropValue<Option<IString>>>
              <Option<&'static str> as IntoPropValue<Option<String>>>
              <Option<F> as IntoPropValue<Option<yew::Callback<I, O>>>>
-             <Option<String> as IntoPropValue<Option<AttrValue>>>
-             <Option<std::rc::Rc<str>> as IntoPropValue<Option<AttrValue>>>
+             <Option<String> as IntoPropValue<Option<IString>>>
+             <Option<std::rc::Rc<str>> as IntoPropValue<Option<IString>>>
 note: required by `into_prop_value`
   --> $WORKSPACE/packages/yew/src/html/conversion.rs
    |
    |     fn into_prop_value(self) -> T;
    |     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 
-error[E0277]: the trait bound `Option<{integer}>: IntoPropValue<Option<AttrValue>>` is not satisfied
+error[E0277]: the trait bound `Option<{integer}>: IntoPropValue<Option<IString>>` is not satisfied
   --> tests/html_macro/element-fail.rs:48:22
    |
 48 |     html! { <a href={Some(5)} /> };
-   |                      ^^^^^^^ the trait `IntoPropValue<Option<AttrValue>>` is not implemented for `Option<{integer}>`
+   |                      ^^^^^^^ the trait `IntoPropValue<Option<IString>>` is not implemented for `Option<{integer}>`
    |
    = help: the following implementations were found:
-             <Option<&'static str> as IntoPropValue<Option<AttrValue>>>
+             <Option<&'static str> as IntoPropValue<Option<IString>>>
              <Option<&'static str> as IntoPropValue<Option<String>>>
              <Option<F> as IntoPropValue<Option<yew::Callback<I, O>>>>
-             <Option<String> as IntoPropValue<Option<AttrValue>>>
-             <Option<std::rc::Rc<str>> as IntoPropValue<Option<AttrValue>>>
+             <Option<String> as IntoPropValue<Option<IString>>>
+             <Option<std::rc::Rc<str>> as IntoPropValue<Option<IString>>>
 note: required by `into_prop_value`
   --> $WORKSPACE/packages/yew/src/html/conversion.rs
    |
@@ -416,11 +416,11 @@ error[E0277]: the trait bound `Option<yew::NodeRef>: IntoPropValue<yew::NodeRef>
    |                         ^^^^^^^^^^^^^^^^^^^^^^^^ the trait `IntoPropValue<yew::NodeRef>` is not implemented for `Option<yew::NodeRef>`
    |
    = help: the following implementations were found:
-             <Option<&'static str> as IntoPropValue<Option<AttrValue>>>
+             <Option<&'static str> as IntoPropValue<Option<IString>>>
              <Option<&'static str> as IntoPropValue<Option<String>>>
              <Option<F> as IntoPropValue<Option<yew::Callback<I, O>>>>
-             <Option<String> as IntoPropValue<Option<AttrValue>>>
-             <Option<std::rc::Rc<str>> as IntoPropValue<Option<AttrValue>>>
+             <Option<String> as IntoPropValue<Option<IString>>>
+             <Option<std::rc::Rc<str>> as IntoPropValue<Option<IString>>>
 note: required by `into_prop_value`
   --> $WORKSPACE/packages/yew/src/html/conversion.rs
    |
@@ -451,11 +451,11 @@ note: required by a bound in `yew::html::onclick::Wrapper::__macro_new`
     | |_^ required by this bound in `yew::html::onclick::Wrapper::__macro_new`
     = note: this error originates in the macro `impl_action` (in Nightly builds, run with -Z macro-backtrace for more info)
 
-error[E0277]: the trait bound `NotToString: IntoPropValue<Option<AttrValue>>` is not satisfied
+error[E0277]: the trait bound `NotToString: IntoPropValue<Option<IString>>` is not satisfied
   --> tests/html_macro/element-fail.rs:60:28
    |
 60 |     html! { <input string={NotToString} /> };
-   |                            ^^^^^^^^^^^ the trait `IntoPropValue<Option<AttrValue>>` is not implemented for `NotToString`
+   |                            ^^^^^^^^^^^ the trait `IntoPropValue<Option<IString>>` is not implemented for `NotToString`
    |
 note: required by `into_prop_value`
   --> $WORKSPACE/packages/yew/src/html/conversion.rs

From edceb155f612de341e343a7078bec907783cffe9 Mon Sep 17 00:00:00 2001
From: Cecile Tonglet <cecile.tonglet@cecton.com>
Date: Sat, 16 Apr 2022 08:50:00 +0100
Subject: [PATCH 12/25] Update array example to use function component with
 use_state

---
 examples/immutable/src/array.rs | 82 +++++++++++----------------------
 1 file changed, 28 insertions(+), 54 deletions(-)

diff --git a/examples/immutable/src/array.rs b/examples/immutable/src/array.rs
index c92a608b9b3..1ec7aca35a8 100644
--- a/examples/immutable/src/array.rs
+++ b/examples/immutable/src/array.rs
@@ -5,77 +5,51 @@ use yew::immutable::*;
 use yew::prelude::*;
 
 #[derive(Properties, PartialEq)]
-struct DisplayProps {
-    values: IArray<IString>,
+struct FolksViewProps {
+    folks: IArray<IString>,
 }
 
-#[function_component]
-fn Display(props: &DisplayProps) -> Html {
+#[function_component(FolksView)]
+fn folks_view(props: &FolksViewProps) -> Html {
     html! {
         <>
         <p>{"Hello to:"}</p>
         <ul>
-        { for props.values.iter().map(|s| html!(<li>{s}</li>)) }
+        { for props.folks.iter().map(|s| html!(<li>{s}</li>)) }
         </ul>
         </>
     }
 }
 
-pub struct ArrayExample {
-    values: IArray<IString>,
-}
-
-pub enum ArrayExampleMessage {
-    AddName(String),
-    Noop,
-}
-
-impl Component for ArrayExample {
-    type Message = ArrayExampleMessage;
-    type Properties = ();
-
-    fn create(_ctx: &Context<Self>) -> Self {
-        Self {
-            values: Default::default(),
-        }
-    }
-
-    fn update(&mut self, _: &Context<Self>, msg: Self::Message) -> bool {
-        match msg {
-            ArrayExampleMessage::AddName(name) => {
-                self.values = self
-                    .values
-                    .iter()
-                    .chain(std::iter::once(IString::from(name)))
-                    .collect();
-                true
-            }
-            ArrayExampleMessage::Noop => false,
-        }
-    }
-
-    fn view(&self, ctx: &Context<Self>) -> Html {
-        let link = ctx.link();
-        let onkeyup = link.callback(|e: KeyboardEvent| {
+#[function_component(ArrayExample)]
+pub fn array_example() -> Html {
+    let folks = use_state(|| IArray::<IString>::default());
+    let onkeyup = {
+        let folks = folks.clone();
+        Callback::from(move |e: KeyboardEvent| {
             if e.key() == "Enter" {
                 let event: Event = e.dyn_into().unwrap_throw();
                 let event_target = event.target().unwrap_throw();
                 let target: HtmlInputElement = event_target.dyn_into().unwrap_throw();
-                let value = target.value();
+                let name = target.value();
                 target.set_value("");
-                ArrayExampleMessage::AddName(value)
-            } else {
-                ArrayExampleMessage::Noop
+
+                folks.set(
+                    folks
+                        .iter()
+                        .chain(std::iter::once(IString::from(name)))
+                        .collect(),
+                );
             }
-        });
+        })
+    };
 
-        html! {
-            <>
-            <h2>{"Input"}</h2>
-            <input {onkeyup} />
-            <h2>{"Output"}</h2>
-            <Display values={&self.values} />
-            </>
-        }
+    html! {
+        <>
+        <h2>{"Input"}</h2>
+        <input {onkeyup} />
+        <h2>{"Output"}</h2>
+        <FolksView folks={&*folks} />
+        </>
     }
 }

From efb55e6e341753e73ebfd8c3a70cb42559ec5852 Mon Sep 17 00:00:00 2001
From: Cecile Tonglet <cecile.tonglet@cecton.com>
Date: Sat, 16 Apr 2022 08:54:31 +0100
Subject: [PATCH 13/25] clippy

---
 examples/immutable/src/array.rs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/immutable/src/array.rs b/examples/immutable/src/array.rs
index 1ec7aca35a8..f1368f9b173 100644
--- a/examples/immutable/src/array.rs
+++ b/examples/immutable/src/array.rs
@@ -23,7 +23,7 @@ fn folks_view(props: &FolksViewProps) -> Html {
 
 #[function_component(ArrayExample)]
 pub fn array_example() -> Html {
-    let folks = use_state(|| IArray::<IString>::default());
+    let folks = use_state(IArray::<IString>::default);
     let onkeyup = {
         let folks = folks.clone();
         Callback::from(move |e: KeyboardEvent| {

From ca1fab33da97fdb7538528ed2dfb1a7203e353eb Mon Sep 17 00:00:00 2001
From: Cecile Tonglet <cecile.tonglet@cecton.com>
Date: Sat, 16 Apr 2022 09:11:48 +0100
Subject: [PATCH 14/25] Update doc example to use functional component

---
 website/docs/advanced-topics/immutable.mdx | 84 ++++++++--------------
 1 file changed, 28 insertions(+), 56 deletions(-)

diff --git a/website/docs/advanced-topics/immutable.mdx b/website/docs/advanced-topics/immutable.mdx
index 7239a89dce0..d014ccd780f 100644
--- a/website/docs/advanced-topics/immutable.mdx
+++ b/website/docs/advanced-topics/immutable.mdx
@@ -28,80 +28,52 @@ use yew::immutable::*;
 use yew::prelude::*;
 
 #[derive(Properties, PartialEq)]
-struct DisplayProps {
-    values: IArray<IString>,
+struct FolksViewProps {
+    folks: IArray<IString>,
 }
 
-#[function_component]
-fn Display(props: &DisplayProps) -> Html {
+#[function_component(FolksView)]
+fn folks_view(props: &FolksViewProps) -> Html {
     html! {
         <>
         <p>{"Hello to:"}</p>
         <ul>
-        { for props.values.iter().map(|s| html!(<li>{s}</li>)) }
+        { for props.folks.iter().map(|s| html!(<li>{s}</li>)) }
         </ul>
         </>
     }
 }
 
-pub struct ArrayExample {
-    values: IArray<IString>,
-}
-
-pub enum ArrayExampleMessage {
-    AddName(String),
-    Noop,
-}
-
-impl Component for ArrayExample {
-    type Message = ArrayExampleMessage;
-    type Properties = ();
-
-    fn create(_ctx: &Context<Self>) -> Self {
-        Self {
-            values: Default::default(),
-        }
-    }
-
-    fn update(&mut self, _: &Context<Self>, msg: Self::Message) -> bool {
-        match msg {
-            ArrayExampleMessage::AddName(name) => {
-                // A new IArray is created with all the elements of the previous one
-                // plus the new element.
-                self.values = self
-                    .values
-                    .iter()
-                    .chain(std::iter::once(IString::from(name)))
-                    .collect();
-                true
-            }
-            ArrayExampleMessage::Noop => false,
-        }
-    }
-
-    fn view(&self, ctx: &Context<Self>) -> Html {
-        let link = ctx.link();
-        let onkeyup = link.callback(|e: KeyboardEvent| {
+#[function_component(ArrayExample)]
+pub fn array_example() -> Html {
+    let folks = use_state(IArray::<IString>::default);
+    let onkeyup = {
+        let folks = folks.clone();
+        Callback::from(move |e: KeyboardEvent| {
             if e.key() == "Enter" {
                 let event: Event = e.dyn_into().unwrap_throw();
                 let event_target = event.target().unwrap_throw();
                 let target: HtmlInputElement = event_target.dyn_into().unwrap_throw();
-                let value = target.value();
+                let name = target.value();
                 target.set_value("");
-                ArrayExampleMessage::AddName(value)
-            } else {
-                ArrayExampleMessage::Noop
+
+                folks.set(
+                    folks
+                        .iter()
+                        .chain(std::iter::once(IString::from(name)))
+                        .collect(),
+                );
             }
-        });
+        })
+    };
 
-        html! {
-            <>
-            <h2>{"Input"}</h2>
-            <input {onkeyup} />
-            <h2>{"Output"}</h2>
-            <Display values={&self.values} />
-            </>
-        }
+    html! {
+        <>
+        <h2>{"Input"}</h2>
+        <input {onkeyup} />
+        <h2>{"Output"}</h2>
+        <FolksView folks={&*folks} />
+        </>
     }
 }
 ```

From 76595b786cbd3478fca5c6aaaa946e948f185c08 Mon Sep 17 00:00:00 2001
From: Cecile Tonglet <cecile.tonglet@cecton.com>
Date: Sun, 24 Apr 2022 08:47:59 +0100
Subject: [PATCH 15/25] cargo fmt

---
 packages/yew/src/html/conversion.rs | 9 +++++----
 packages/yew/src/virtual_dom/mod.rs | 7 ++++---
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/packages/yew/src/html/conversion.rs b/packages/yew/src/html/conversion.rs
index acd879c8e64..bdad086f207 100644
--- a/packages/yew/src/html/conversion.rs
+++ b/packages/yew/src/html/conversion.rs
@@ -1,11 +1,12 @@
-use super::super::callback::Callback;
-use super::{Component, NodeRef, Scope};
-use crate::virtual_dom::AttrValue;
-use implicit_clone::unsync::{IArray, IMap};
 use std::rc::Rc;
 
+use implicit_clone::unsync::{IArray, IMap};
 pub use implicit_clone::ImplicitClone;
 
+use super::super::callback::Callback;
+use super::{Component, NodeRef, Scope};
+use crate::virtual_dom::AttrValue;
+
 impl ImplicitClone for NodeRef {}
 impl<Comp: Component> ImplicitClone for Scope<Comp> {}
 // TODO there are still a few missing
diff --git a/packages/yew/src/virtual_dom/mod.rs b/packages/yew/src/virtual_dom/mod.rs
index 8b9b9204c02..764464fafa6 100644
--- a/packages/yew/src/virtual_dom/mod.rs
+++ b/packages/yew/src/virtual_dom/mod.rs
@@ -19,6 +19,10 @@ pub mod vtag;
 #[doc(hidden)]
 pub mod vtext;
 
+use std::hint::unreachable_unchecked;
+
+use indexmap::IndexMap;
+
 #[doc(inline)]
 pub use self::key::Key;
 #[doc(inline)]
@@ -38,9 +42,6 @@ pub use self::vtag::VTag;
 #[doc(inline)]
 pub use self::vtext::VText;
 
-use indexmap::IndexMap;
-use std::hint::unreachable_unchecked;
-
 /// Attribute value
 pub type AttrValue = implicit_clone::unsync::IString;
 

From f63be013747779dad191f655947fe9cfa7b2ab95 Mon Sep 17 00:00:00 2001
From: Cecile Tonglet <cecile.tonglet@cecton.com>
Date: Sun, 24 Apr 2022 08:50:26 +0100
Subject: [PATCH 16/25] cargo fmt --all

---
 examples/immutable/src/array.rs  | 3 +--
 examples/immutable/src/main.rs   | 3 ++-
 examples/immutable/src/map.rs    | 3 +--
 examples/immutable/src/string.rs | 3 +--
 4 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/examples/immutable/src/array.rs b/examples/immutable/src/array.rs
index f1368f9b173..3e66e3bd37d 100644
--- a/examples/immutable/src/array.rs
+++ b/examples/immutable/src/array.rs
@@ -1,5 +1,4 @@
-use wasm_bindgen::JsCast;
-use wasm_bindgen::UnwrapThrowExt;
+use wasm_bindgen::{JsCast, UnwrapThrowExt};
 use web_sys::{HtmlInputElement, KeyboardEvent};
 use yew::immutable::*;
 use yew::prelude::*;
diff --git a/examples/immutable/src/main.rs b/examples/immutable/src/main.rs
index 571bc613f7f..6b2216241f6 100644
--- a/examples/immutable/src/main.rs
+++ b/examples/immutable/src/main.rs
@@ -2,10 +2,11 @@ mod array;
 mod map;
 mod string;
 
+use yew::prelude::*;
+
 use self::array::*;
 use self::map::*;
 use self::string::*;
-use yew::prelude::*;
 
 #[function_component]
 fn App() -> Html {
diff --git a/examples/immutable/src/map.rs b/examples/immutable/src/map.rs
index 46f292c8fe0..7d587f89151 100644
--- a/examples/immutable/src/map.rs
+++ b/examples/immutable/src/map.rs
@@ -1,5 +1,4 @@
-use wasm_bindgen::JsCast;
-use wasm_bindgen::UnwrapThrowExt;
+use wasm_bindgen::{JsCast, UnwrapThrowExt};
 use web_sys::{HtmlInputElement, KeyboardEvent};
 use yew::immutable::*;
 use yew::prelude::*;
diff --git a/examples/immutable/src/string.rs b/examples/immutable/src/string.rs
index 125ce52c9d1..db91277f94f 100644
--- a/examples/immutable/src/string.rs
+++ b/examples/immutable/src/string.rs
@@ -1,5 +1,4 @@
-use wasm_bindgen::JsCast;
-use wasm_bindgen::UnwrapThrowExt;
+use wasm_bindgen::{JsCast, UnwrapThrowExt};
 use web_sys::{HtmlInputElement, InputEvent};
 use yew::immutable::*;
 use yew::prelude::*;

From 59b253892c8f9f7332c3363dc120bfee78aac10e Mon Sep 17 00:00:00 2001
From: Cecile Tonglet <cecile.tonglet@cecton.com>
Date: Mon, 30 May 2022 12:55:13 +0100
Subject: [PATCH 17/25] Update website/docs/advanced-topics/immutable.mdx

Co-authored-by: Muhammad Hamza <muhammadhamza1311@gmail.com>
---
 website/docs/advanced-topics/immutable.mdx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/website/docs/advanced-topics/immutable.mdx b/website/docs/advanced-topics/immutable.mdx
index d014ccd780f..0e4c1d96781 100644
--- a/website/docs/advanced-topics/immutable.mdx
+++ b/website/docs/advanced-topics/immutable.mdx
@@ -1,6 +1,6 @@
 ---
-title: 'Immutable'
-description: 'Immutable.js-like types for Yew'
+title: 'Immutable Types'
+description: 'Immutable data structures for Yew'
 ---
 
 ## What are immutable types?

From 61fa8dec4cd3a0bec3027d0991ee4750d8b9fe79 Mon Sep 17 00:00:00 2001
From: Cecile Tonglet <cecile.tonglet@cecton.com>
Date: Mon, 30 May 2022 12:56:25 +0100
Subject: [PATCH 18/25] Update lib.rs

---
 packages/yew/src/lib.rs | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/yew/src/lib.rs b/packages/yew/src/lib.rs
index 68822c889bd..b9bdd9eb257 100644
--- a/packages/yew/src/lib.rs
+++ b/packages/yew/src/lib.rs
@@ -288,7 +288,6 @@ mod server_renderer;
 pub mod suspense;
 pub mod utils;
 pub mod virtual_dom;
-pub use implicit_clone::unsync as immutable;
 #[cfg(feature = "ssr")]
 pub use server_renderer::*;
 

From 3781b23b3919c737ae696309df12adad3b7faa6a Mon Sep 17 00:00:00 2001
From: Cecile Tonglet <cecile.tonglet@cecton.com>
Date: Mon, 30 May 2022 13:38:47 +0100
Subject: [PATCH 19/25] Update immutable.mdx

---
 website/docs/advanced-topics/immutable.mdx | 60 ----------------------
 1 file changed, 60 deletions(-)

diff --git a/website/docs/advanced-topics/immutable.mdx b/website/docs/advanced-topics/immutable.mdx
index 0e4c1d96781..5f372135b22 100644
--- a/website/docs/advanced-topics/immutable.mdx
+++ b/website/docs/advanced-topics/immutable.mdx
@@ -18,66 +18,6 @@ achieve this we usually wrap things in `Rc`.
 Immutable types are a great fit for holding property's values because they can
 be cheaply cloned when passed from component to component.
 
-## Example using an immutable array
-
-```rust
-use wasm_bindgen::JsCast;
-use wasm_bindgen::UnwrapThrowExt;
-use web_sys::{HtmlInputElement, KeyboardEvent};
-use yew::immutable::*;
-use yew::prelude::*;
-
-#[derive(Properties, PartialEq)]
-struct FolksViewProps {
-    folks: IArray<IString>,
-}
-
-#[function_component(FolksView)]
-fn folks_view(props: &FolksViewProps) -> Html {
-    html! {
-        <>
-        <p>{"Hello to:"}</p>
-        <ul>
-        { for props.folks.iter().map(|s| html!(<li>{s}</li>)) }
-        </ul>
-        </>
-    }
-}
-
-#[function_component(ArrayExample)]
-pub fn array_example() -> Html {
-    let folks = use_state(IArray::<IString>::default);
-    let onkeyup = {
-        let folks = folks.clone();
-        Callback::from(move |e: KeyboardEvent| {
-            if e.key() == "Enter" {
-                let event: Event = e.dyn_into().unwrap_throw();
-                let event_target = event.target().unwrap_throw();
-                let target: HtmlInputElement = event_target.dyn_into().unwrap_throw();
-                let name = target.value();
-                target.set_value("");
-
-                folks.set(
-                    folks
-                        .iter()
-                        .chain(std::iter::once(IString::from(name)))
-                        .collect(),
-                );
-            }
-        })
-    };
-
-    html! {
-        <>
-        <h2>{"Input"}</h2>
-        <input {onkeyup} />
-        <h2>{"Output"}</h2>
-        <FolksView folks={&*folks} />
-        </>
-    }
-}
-```
-
 ## Further reading
 
 -   [Immutable example](https://github.com/yewstack/yew/tree/master/examples/immutable)

From af8df52b546893b816770ecc6c9f0a51780404d1 Mon Sep 17 00:00:00 2001
From: Cecile Tonglet <cecile.tonglet@cecton.com>
Date: Mon, 30 May 2022 14:27:56 +0100
Subject: [PATCH 20/25] Fix imports

---
 examples/immutable/Cargo.toml    | 1 +
 examples/immutable/src/array.rs  | 2 +-
 examples/immutable/src/map.rs    | 2 +-
 examples/immutable/src/string.rs | 2 +-
 4 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/examples/immutable/Cargo.toml b/examples/immutable/Cargo.toml
index 361fe1303b8..cd6929d7c27 100644
--- a/examples/immutable/Cargo.toml
+++ b/examples/immutable/Cargo.toml
@@ -6,6 +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.2", features = ["map"] }
 wasm-bindgen = "0.2"
 web-sys = "0.3"
 yew = { path = "../../packages/yew", features = ["csr"] }
diff --git a/examples/immutable/src/array.rs b/examples/immutable/src/array.rs
index 3e66e3bd37d..7898b6e8504 100644
--- a/examples/immutable/src/array.rs
+++ b/examples/immutable/src/array.rs
@@ -1,6 +1,6 @@
+use implicit_clone::unsync::*;
 use wasm_bindgen::{JsCast, UnwrapThrowExt};
 use web_sys::{HtmlInputElement, KeyboardEvent};
-use yew::immutable::*;
 use yew::prelude::*;
 
 #[derive(Properties, PartialEq)]
diff --git a/examples/immutable/src/map.rs b/examples/immutable/src/map.rs
index 7d587f89151..174d3ce6457 100644
--- a/examples/immutable/src/map.rs
+++ b/examples/immutable/src/map.rs
@@ -1,6 +1,6 @@
+use implicit_clone::unsync::*;
 use wasm_bindgen::{JsCast, UnwrapThrowExt};
 use web_sys::{HtmlInputElement, KeyboardEvent};
-use yew::immutable::*;
 use yew::prelude::*;
 
 #[derive(Properties, PartialEq)]
diff --git a/examples/immutable/src/string.rs b/examples/immutable/src/string.rs
index db91277f94f..86e5df5cb1f 100644
--- a/examples/immutable/src/string.rs
+++ b/examples/immutable/src/string.rs
@@ -1,6 +1,6 @@
+use implicit_clone::unsync::*;
 use wasm_bindgen::{JsCast, UnwrapThrowExt};
 use web_sys::{HtmlInputElement, InputEvent};
-use yew::immutable::*;
 use yew::prelude::*;
 
 #[derive(Properties, PartialEq)]

From 8e58911ba792dc17e4f769e50e18d61f6da9f477 Mon Sep 17 00:00:00 2001
From: Cecile Tonglet <cecile.tonglet@cecton.com>
Date: Thu, 16 Jun 2022 06:35:27 +0100
Subject: [PATCH 21/25] Update output error

---
 .../tests/html_macro/component-fail.stderr    | 12 ++---
 .../tests/html_macro/element-fail.stderr      | 46 +++++++++----------
 2 files changed, 29 insertions(+), 29 deletions(-)

diff --git a/packages/yew-macro/tests/html_macro/component-fail.stderr b/packages/yew-macro/tests/html_macro/component-fail.stderr
index 50567b50894..872621354b8 100644
--- a/packages/yew-macro/tests/html_macro/component-fail.stderr
+++ b/packages/yew-macro/tests/html_macro/component-fail.stderr
@@ -345,10 +345,10 @@ error[E0277]: the trait bound `{integer}: IntoPropValue<String>` is not satisfie
    |                                 ^ the trait `IntoPropValue<String>` is not implemented for `{integer}`
    |
    = help: the following implementations were found:
-             <&'static [(K, V)] as IntoPropValue<IMap<K, V>>>
-             <&'static [T] as IntoPropValue<IArray<T>>>
+             <&'static [(K, V)] as IntoPropValue<implicit_clone::unsync::IMap<K, V>>>
+             <&'static [T] as IntoPropValue<implicit_clone::unsync::IArray<T>>>
              <&'static str as IntoPropValue<Classes>>
-             <&'static str as IntoPropValue<IString>>
+             <&'static str as IntoPropValue<Option<String>>>
            and 22 others
 
 error[E0277]: the trait bound `{integer}: IntoPropValue<String>` is not satisfied
@@ -358,10 +358,10 @@ error[E0277]: the trait bound `{integer}: IntoPropValue<String>` is not satisfie
    |                                  ^ the trait `IntoPropValue<String>` is not implemented for `{integer}`
    |
    = help: the following implementations were found:
-             <&'static [(K, V)] as IntoPropValue<IMap<K, V>>>
-             <&'static [T] as IntoPropValue<IArray<T>>>
+             <&'static [(K, V)] as IntoPropValue<implicit_clone::unsync::IMap<K, V>>>
+             <&'static [T] as IntoPropValue<implicit_clone::unsync::IArray<T>>>
              <&'static str as IntoPropValue<Classes>>
-             <&'static str as IntoPropValue<IString>>
+             <&'static str as IntoPropValue<Option<String>>>
            and 22 others
 
 error[E0308]: mismatched types
diff --git a/packages/yew-macro/tests/html_macro/element-fail.stderr b/packages/yew-macro/tests/html_macro/element-fail.stderr
index f5abdaf11d6..3ccbe94ae96 100644
--- a/packages/yew-macro/tests/html_macro/element-fail.stderr
+++ b/packages/yew-macro/tests/html_macro/element-fail.stderr
@@ -246,11 +246,11 @@ error[E0308]: mismatched types
 40 |     html! { <option selected=1 /> };
    |                              ^ expected `bool`, found integer
 
-error[E0277]: the trait bound `(): IntoPropValue<Option<IString>>` is not satisfied
+error[E0277]: the trait bound `(): IntoPropValue<Option<implicit_clone::unsync::IString>>` is not satisfied
   --> tests/html_macro/element-fail.rs:43:26
    |
 43 |     html! { <input type={()} /> };
-   |                          ^^ the trait `IntoPropValue<Option<IString>>` is not implemented for `()`
+   |                          ^^ the trait `IntoPropValue<Option<implicit_clone::unsync::IString>>` is not implemented for `()`
    |
 note: required by `into_prop_value`
   --> $WORKSPACE/packages/yew/src/html/conversion.rs
@@ -258,11 +258,11 @@ note: required by `into_prop_value`
    |     fn into_prop_value(self) -> T;
    |     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 
-error[E0277]: the trait bound `(): IntoPropValue<Option<IString>>` is not satisfied
+error[E0277]: the trait bound `(): IntoPropValue<Option<implicit_clone::unsync::IString>>` is not satisfied
   --> tests/html_macro/element-fail.rs:44:27
    |
 44 |     html! { <input value={()} /> };
-   |                           ^^ the trait `IntoPropValue<Option<IString>>` is not implemented for `()`
+   |                           ^^ the trait `IntoPropValue<Option<implicit_clone::unsync::IString>>` is not implemented for `()`
    |
 note: required by `into_prop_value`
   --> $WORKSPACE/packages/yew/src/html/conversion.rs
@@ -270,11 +270,11 @@ note: required by `into_prop_value`
    |     fn into_prop_value(self) -> T;
    |     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 
-error[E0277]: the trait bound `(): IntoPropValue<Option<IString>>` is not satisfied
+error[E0277]: the trait bound `(): IntoPropValue<Option<implicit_clone::unsync::IString>>` is not satisfied
   --> tests/html_macro/element-fail.rs:45:22
    |
 45 |     html! { <a href={()} /> };
-   |                      ^^ the trait `IntoPropValue<Option<IString>>` is not implemented for `()`
+   |                      ^^ the trait `IntoPropValue<Option<implicit_clone::unsync::IString>>` is not implemented for `()`
    |
 note: required by `into_prop_value`
   --> $WORKSPACE/packages/yew/src/html/conversion.rs
@@ -282,11 +282,11 @@ note: required by `into_prop_value`
    |     fn into_prop_value(self) -> T;
    |     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 
-error[E0277]: the trait bound `NotToString: IntoPropValue<Option<IString>>` is not satisfied
+error[E0277]: the trait bound `NotToString: IntoPropValue<Option<implicit_clone::unsync::IString>>` is not satisfied
   --> tests/html_macro/element-fail.rs:46:28
    |
 46 |     html! { <input string={NotToString} /> };
-   |                            ^^^^^^^^^^^ the trait `IntoPropValue<Option<IString>>` is not implemented for `NotToString`
+   |                            ^^^^^^^^^^^ the trait `IntoPropValue<Option<implicit_clone::unsync::IString>>` is not implemented for `NotToString`
    |
 note: required by `into_prop_value`
   --> $WORKSPACE/packages/yew/src/html/conversion.rs
@@ -294,36 +294,36 @@ note: required by `into_prop_value`
    |     fn into_prop_value(self) -> T;
    |     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 
-error[E0277]: the trait bound `Option<NotToString>: IntoPropValue<Option<IString>>` is not satisfied
+error[E0277]: the trait bound `Option<NotToString>: IntoPropValue<Option<implicit_clone::unsync::IString>>` is not satisfied
   --> tests/html_macro/element-fail.rs:47:23
    |
 47 |     html! { <a media={Some(NotToString)} /> };
-   |                       ^^^^^^^^^^^^^^^^^ the trait `IntoPropValue<Option<IString>>` is not implemented for `Option<NotToString>`
+   |                       ^^^^^^^^^^^^^^^^^ the trait `IntoPropValue<Option<implicit_clone::unsync::IString>>` is not implemented for `Option<NotToString>`
    |
    = help: the following implementations were found:
-             <Option<&'static str> as IntoPropValue<Option<IString>>>
              <Option<&'static str> as IntoPropValue<Option<String>>>
+             <Option<&'static str> as IntoPropValue<Option<implicit_clone::unsync::IString>>>
              <Option<F> as IntoPropValue<Option<yew::Callback<I, O>>>>
-             <Option<String> as IntoPropValue<Option<IString>>>
-             <Option<std::rc::Rc<str>> as IntoPropValue<Option<IString>>>
+             <Option<Rc<str>> as IntoPropValue<Option<implicit_clone::unsync::IString>>>
+             <Option<String> as IntoPropValue<Option<implicit_clone::unsync::IString>>>
 note: required by `into_prop_value`
   --> $WORKSPACE/packages/yew/src/html/conversion.rs
    |
    |     fn into_prop_value(self) -> T;
    |     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 
-error[E0277]: the trait bound `Option<{integer}>: IntoPropValue<Option<IString>>` is not satisfied
+error[E0277]: the trait bound `Option<{integer}>: IntoPropValue<Option<implicit_clone::unsync::IString>>` is not satisfied
   --> tests/html_macro/element-fail.rs:48:22
    |
 48 |     html! { <a href={Some(5)} /> };
-   |                      ^^^^^^^ the trait `IntoPropValue<Option<IString>>` is not implemented for `Option<{integer}>`
+   |                      ^^^^^^^ the trait `IntoPropValue<Option<implicit_clone::unsync::IString>>` is not implemented for `Option<{integer}>`
    |
    = help: the following implementations were found:
-             <Option<&'static str> as IntoPropValue<Option<IString>>>
              <Option<&'static str> as IntoPropValue<Option<String>>>
+             <Option<&'static str> as IntoPropValue<Option<implicit_clone::unsync::IString>>>
              <Option<F> as IntoPropValue<Option<yew::Callback<I, O>>>>
-             <Option<String> as IntoPropValue<Option<IString>>>
-             <Option<std::rc::Rc<str>> as IntoPropValue<Option<IString>>>
+             <Option<Rc<str>> as IntoPropValue<Option<implicit_clone::unsync::IString>>>
+             <Option<String> as IntoPropValue<Option<implicit_clone::unsync::IString>>>
 note: required by `into_prop_value`
   --> $WORKSPACE/packages/yew/src/html/conversion.rs
    |
@@ -416,11 +416,11 @@ error[E0277]: the trait bound `Option<yew::NodeRef>: IntoPropValue<yew::NodeRef>
    |                         ^^^^^^^^^^^^^^^^^^^^^^^^ the trait `IntoPropValue<yew::NodeRef>` is not implemented for `Option<yew::NodeRef>`
    |
    = help: the following implementations were found:
-             <Option<&'static str> as IntoPropValue<Option<IString>>>
              <Option<&'static str> as IntoPropValue<Option<String>>>
+             <Option<&'static str> as IntoPropValue<Option<implicit_clone::unsync::IString>>>
              <Option<F> as IntoPropValue<Option<yew::Callback<I, O>>>>
-             <Option<String> as IntoPropValue<Option<IString>>>
-             <Option<std::rc::Rc<str>> as IntoPropValue<Option<IString>>>
+             <Option<Rc<str>> as IntoPropValue<Option<implicit_clone::unsync::IString>>>
+             <Option<String> as IntoPropValue<Option<implicit_clone::unsync::IString>>>
 note: required by `into_prop_value`
   --> $WORKSPACE/packages/yew/src/html/conversion.rs
    |
@@ -451,11 +451,11 @@ note: required by a bound in `yew::html::onclick::Wrapper::__macro_new`
     | |_^ required by this bound in `yew::html::onclick::Wrapper::__macro_new`
     = note: this error originates in the macro `impl_action` (in Nightly builds, run with -Z macro-backtrace for more info)
 
-error[E0277]: the trait bound `NotToString: IntoPropValue<Option<IString>>` is not satisfied
+error[E0277]: the trait bound `NotToString: IntoPropValue<Option<implicit_clone::unsync::IString>>` is not satisfied
   --> tests/html_macro/element-fail.rs:60:28
    |
 60 |     html! { <input string={NotToString} /> };
-   |                            ^^^^^^^^^^^ the trait `IntoPropValue<Option<IString>>` is not implemented for `NotToString`
+   |                            ^^^^^^^^^^^ the trait `IntoPropValue<Option<implicit_clone::unsync::IString>>` is not implemented for `NotToString`
    |
 note: required by `into_prop_value`
   --> $WORKSPACE/packages/yew/src/html/conversion.rs

From a9602c264b5369f719d06c4cde79049b7e698bbf Mon Sep 17 00:00:00 2001
From: Cecile Tonglet <cecile.tonglet@cecton.com>
Date: Mon, 20 Jun 2022 07:10:06 +0100
Subject: [PATCH 22/25] Update website/docs/advanced-topics/immutable.mdx

Co-authored-by: Muhammad Hamza <muhammadhamza1311@gmail.com>
---
 website/docs/advanced-topics/immutable.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/website/docs/advanced-topics/immutable.mdx b/website/docs/advanced-topics/immutable.mdx
index 5f372135b22..0ae35885c37 100644
--- a/website/docs/advanced-topics/immutable.mdx
+++ b/website/docs/advanced-topics/immutable.mdx
@@ -10,7 +10,7 @@ to update a value, you must instantiate a new value.
 
 ## Why using immutable types?
 
-In a React-like framework, properties are propagated from ancestors to
+Properties, like in React, are propagated from ancestors to
 children. This means that the properties must live when each component is
 updated. This is why properties should —ideally— be cheap to clone. In order to
 achieve this we usually wrap things in `Rc`.

From 7c2232641e6d432d50e865ada366484f82ff23a1 Mon Sep 17 00:00:00 2001
From: Cecile Tonglet <cecile.tonglet@cecton.com>
Date: Tue, 21 Jun 2022 05:04:43 +0100
Subject: [PATCH 23/25] Remove map from implicit-clone features

---
 packages/yew/Cargo.toml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/yew/Cargo.toml b/packages/yew/Cargo.toml
index 5992fbc6063..68a310d1190 100644
--- a/packages/yew/Cargo.toml
+++ b/packages/yew/Cargo.toml
@@ -29,7 +29,7 @@ thiserror = "1.0"
 
 futures = { version = "0.3", optional = true }
 html-escape = { version = "0.2.9", optional = true }
-implicit-clone = { version = "0.2", features = ["map"] }
+implicit-clone = "0.2"
 base64ct = { version = "1.5.0", features = ["std"], optional = true }
 bincode = { version = "1.3.3", optional = true }
 serde = { version = "1", features = ["derive"] }

From e56b54b2e40c9dc6c79118ddaf7583ce4cf55d04 Mon Sep 17 00:00:00 2001
From: Cecile Tonglet <cecile.tonglet@cecton.com>
Date: Tue, 21 Jun 2022 05:29:24 +0100
Subject: [PATCH 24/25] Revert "Remove map from implicit-clone features"

This reverts commit 7c2232641e6d432d50e865ada366484f82ff23a1.
---
 packages/yew/Cargo.toml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/yew/Cargo.toml b/packages/yew/Cargo.toml
index e27db3ff88a..db03032b98c 100644
--- a/packages/yew/Cargo.toml
+++ b/packages/yew/Cargo.toml
@@ -29,7 +29,7 @@ thiserror = "1.0"
 
 futures = { version = "0.3", optional = true }
 html-escape = { version = "0.2.9", optional = true }
-implicit-clone = "0.2"
+implicit-clone = { version = "0.2", features = ["map"] }
 base64ct = { version = "1.5.0", features = ["std"], optional = true }
 bincode = { version = "1.3.3", optional = true }
 serde = { version = "1", features = ["derive"] }

From 1e4b52a2dc2f4ca0b8eab2d4a3760d8464fe1a3e Mon Sep 17 00:00:00 2001
From: Muhammad Hamza <muhammadhamza1311@gmail.com>
Date: Fri, 24 Jun 2022 19:40:24 +0500
Subject: [PATCH 25/25] Fix tests

---
 .../tests/html_macro/component-fail.stderr    | 12 +++---
 .../tests/html_macro/element-fail.stderr      | 40 +++++++++----------
 2 files changed, 26 insertions(+), 26 deletions(-)

diff --git a/packages/yew-macro/tests/html_macro/component-fail.stderr b/packages/yew-macro/tests/html_macro/component-fail.stderr
index 2297008d628..e1e62501041 100644
--- a/packages/yew-macro/tests/html_macro/component-fail.stderr
+++ b/packages/yew-macro/tests/html_macro/component-fail.stderr
@@ -345,11 +345,11 @@ error[E0277]: the trait bound `{integer}: IntoPropValue<String>` is not satisfie
    |                                 ^ the trait `IntoPropValue<String>` is not implemented for `{integer}`
    |
    = help: the following implementations were found:
-             <&'static str as IntoPropValue<AttrValue>>
+             <&'static [(K, V)] as IntoPropValue<implicit_clone::unsync::IMap<K, V>>>
+             <&'static [T] as IntoPropValue<implicit_clone::unsync::IArray<T>>>
              <&'static str as IntoPropValue<Classes>>
-             <&'static str as IntoPropValue<Option<AttrValue>>>
              <&'static str as IntoPropValue<Option<String>>>
-           and 27 others
+           and 31 others
 
 error[E0277]: the trait bound `{integer}: IntoPropValue<String>` is not satisfied
   --> tests/html_macro/component-fail.rs:79:34
@@ -358,11 +358,11 @@ error[E0277]: the trait bound `{integer}: IntoPropValue<String>` is not satisfie
    |                                  ^ the trait `IntoPropValue<String>` is not implemented for `{integer}`
    |
    = help: the following implementations were found:
-             <&'static str as IntoPropValue<AttrValue>>
+             <&'static [(K, V)] as IntoPropValue<implicit_clone::unsync::IMap<K, V>>>
+             <&'static [T] as IntoPropValue<implicit_clone::unsync::IArray<T>>>
              <&'static str as IntoPropValue<Classes>>
-             <&'static str as IntoPropValue<Option<AttrValue>>>
              <&'static str as IntoPropValue<Option<String>>>
-           and 27 others
+           and 31 others
 
 error[E0308]: mismatched types
   --> tests/html_macro/component-fail.rs:80:31
diff --git a/packages/yew-macro/tests/html_macro/element-fail.stderr b/packages/yew-macro/tests/html_macro/element-fail.stderr
index c47e79d8d5d..de86b65d6d9 100644
--- a/packages/yew-macro/tests/html_macro/element-fail.stderr
+++ b/packages/yew-macro/tests/html_macro/element-fail.stderr
@@ -246,11 +246,11 @@ error[E0308]: mismatched types
 40 |     html! { <option selected=1 /> };
    |                              ^ expected `bool`, found integer
 
-error[E0277]: the trait bound `(): IntoPropValue<Option<AttrValue>>` is not satisfied
+error[E0277]: the trait bound `(): IntoPropValue<Option<implicit_clone::unsync::IString>>` is not satisfied
   --> tests/html_macro/element-fail.rs:43:26
    |
 43 |     html! { <input type={()} /> };
-   |                          ^^ the trait `IntoPropValue<Option<AttrValue>>` is not implemented for `()`
+   |                          ^^ the trait `IntoPropValue<Option<implicit_clone::unsync::IString>>` is not implemented for `()`
    |
 note: required by `into_prop_value`
   --> $WORKSPACE/packages/yew/src/html/conversion.rs
@@ -258,11 +258,11 @@ note: required by `into_prop_value`
    |     fn into_prop_value(self) -> T;
    |     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 
-error[E0277]: the trait bound `(): IntoPropValue<Option<AttrValue>>` is not satisfied
+error[E0277]: the trait bound `(): IntoPropValue<Option<implicit_clone::unsync::IString>>` is not satisfied
   --> tests/html_macro/element-fail.rs:44:27
    |
 44 |     html! { <input value={()} /> };
-   |                           ^^ the trait `IntoPropValue<Option<AttrValue>>` is not implemented for `()`
+   |                           ^^ the trait `IntoPropValue<Option<implicit_clone::unsync::IString>>` is not implemented for `()`
    |
 note: required by `into_prop_value`
   --> $WORKSPACE/packages/yew/src/html/conversion.rs
@@ -270,11 +270,11 @@ note: required by `into_prop_value`
    |     fn into_prop_value(self) -> T;
    |     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 
-error[E0277]: the trait bound `(): IntoPropValue<Option<AttrValue>>` is not satisfied
+error[E0277]: the trait bound `(): IntoPropValue<Option<implicit_clone::unsync::IString>>` is not satisfied
   --> tests/html_macro/element-fail.rs:45:22
    |
 45 |     html! { <a href={()} /> };
-   |                      ^^ the trait `IntoPropValue<Option<AttrValue>>` is not implemented for `()`
+   |                      ^^ the trait `IntoPropValue<Option<implicit_clone::unsync::IString>>` is not implemented for `()`
    |
 note: required by `into_prop_value`
   --> $WORKSPACE/packages/yew/src/html/conversion.rs
@@ -282,11 +282,11 @@ note: required by `into_prop_value`
    |     fn into_prop_value(self) -> T;
    |     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 
-error[E0277]: the trait bound `NotToString: IntoPropValue<Option<AttrValue>>` is not satisfied
+error[E0277]: the trait bound `NotToString: IntoPropValue<Option<implicit_clone::unsync::IString>>` is not satisfied
   --> tests/html_macro/element-fail.rs:46:28
    |
 46 |     html! { <input string={NotToString} /> };
-   |                            ^^^^^^^^^^^ the trait `IntoPropValue<Option<AttrValue>>` is not implemented for `NotToString`
+   |                            ^^^^^^^^^^^ the trait `IntoPropValue<Option<implicit_clone::unsync::IString>>` is not implemented for `NotToString`
    |
 note: required by `into_prop_value`
   --> $WORKSPACE/packages/yew/src/html/conversion.rs
@@ -294,17 +294,17 @@ note: required by `into_prop_value`
    |     fn into_prop_value(self) -> T;
    |     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 
-error[E0277]: the trait bound `Option<NotToString>: IntoPropValue<Option<AttrValue>>` is not satisfied
+error[E0277]: the trait bound `Option<NotToString>: IntoPropValue<Option<implicit_clone::unsync::IString>>` is not satisfied
   --> tests/html_macro/element-fail.rs:47:23
    |
 47 |     html! { <a media={Some(NotToString)} /> };
-   |                       ^^^^^^^^^^^^^^^^^ the trait `IntoPropValue<Option<AttrValue>>` is not implemented for `Option<NotToString>`
+   |                       ^^^^^^^^^^^^^^^^^ the trait `IntoPropValue<Option<implicit_clone::unsync::IString>>` is not implemented for `Option<NotToString>`
    |
    = help: the following implementations were found:
-             <Option<&'static str> as IntoPropValue<Option<AttrValue>>>
              <Option<&'static str> as IntoPropValue<Option<String>>>
+             <Option<&'static str> as IntoPropValue<Option<implicit_clone::unsync::IString>>>
              <Option<F> as IntoPropValue<Option<yew::Callback<I, O>>>>
-             <Option<String> as IntoPropValue<Option<AttrValue>>>
+             <Option<Rc<str>> as IntoPropValue<Option<implicit_clone::unsync::IString>>>
            and 4 others
 note: required by `into_prop_value`
   --> $WORKSPACE/packages/yew/src/html/conversion.rs
@@ -312,17 +312,17 @@ note: required by `into_prop_value`
    |     fn into_prop_value(self) -> T;
    |     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 
-error[E0277]: the trait bound `Option<{integer}>: IntoPropValue<Option<AttrValue>>` is not satisfied
+error[E0277]: the trait bound `Option<{integer}>: IntoPropValue<Option<implicit_clone::unsync::IString>>` is not satisfied
   --> tests/html_macro/element-fail.rs:48:22
    |
 48 |     html! { <a href={Some(5)} /> };
-   |                      ^^^^^^^ the trait `IntoPropValue<Option<AttrValue>>` is not implemented for `Option<{integer}>`
+   |                      ^^^^^^^ the trait `IntoPropValue<Option<implicit_clone::unsync::IString>>` is not implemented for `Option<{integer}>`
    |
    = help: the following implementations were found:
-             <Option<&'static str> as IntoPropValue<Option<AttrValue>>>
              <Option<&'static str> as IntoPropValue<Option<String>>>
+             <Option<&'static str> as IntoPropValue<Option<implicit_clone::unsync::IString>>>
              <Option<F> as IntoPropValue<Option<yew::Callback<I, O>>>>
-             <Option<String> as IntoPropValue<Option<AttrValue>>>
+             <Option<Rc<str>> as IntoPropValue<Option<implicit_clone::unsync::IString>>>
            and 4 others
 note: required by `into_prop_value`
   --> $WORKSPACE/packages/yew/src/html/conversion.rs
@@ -416,10 +416,10 @@ error[E0277]: the trait bound `Option<yew::NodeRef>: IntoPropValue<yew::NodeRef>
    |                         ^^^^^^^^^^^^^^^^^^^^^^^^ the trait `IntoPropValue<yew::NodeRef>` is not implemented for `Option<yew::NodeRef>`
    |
    = help: the following implementations were found:
-             <Option<&'static str> as IntoPropValue<Option<AttrValue>>>
              <Option<&'static str> as IntoPropValue<Option<String>>>
+             <Option<&'static str> as IntoPropValue<Option<implicit_clone::unsync::IString>>>
              <Option<F> as IntoPropValue<Option<yew::Callback<I, O>>>>
-             <Option<String> as IntoPropValue<Option<AttrValue>>>
+             <Option<Rc<str>> as IntoPropValue<Option<implicit_clone::unsync::IString>>>
            and 4 others
 note: required by `into_prop_value`
   --> $WORKSPACE/packages/yew/src/html/conversion.rs
@@ -451,11 +451,11 @@ note: required by a bound in `yew::html::onclick::Wrapper::__macro_new`
     | |_^ required by this bound in `yew::html::onclick::Wrapper::__macro_new`
     = note: this error originates in the macro `impl_action` (in Nightly builds, run with -Z macro-backtrace for more info)
 
-error[E0277]: the trait bound `NotToString: IntoPropValue<Option<AttrValue>>` is not satisfied
+error[E0277]: the trait bound `NotToString: IntoPropValue<Option<implicit_clone::unsync::IString>>` is not satisfied
   --> tests/html_macro/element-fail.rs:60:28
    |
 60 |     html! { <input string={NotToString} /> };
-   |                            ^^^^^^^^^^^ the trait `IntoPropValue<Option<AttrValue>>` is not implemented for `NotToString`
+   |                            ^^^^^^^^^^^ the trait `IntoPropValue<Option<implicit_clone::unsync::IString>>` is not implemented for `NotToString`
    |
 note: required by `into_prop_value`
   --> $WORKSPACE/packages/yew/src/html/conversion.rs