From 1272bd12f0d94f05123977b5d758e15ed8d98640 Mon Sep 17 00:00:00 2001
From: Alex Lazar <alexandazar@gmail.com>
Date: Wed, 29 Nov 2023 04:41:13 -0800
Subject: [PATCH] docs: use `with!()` macro in book and update formatting on
 Effect page (#2054)

---
 docs/book/src/reactivity/14_create_effect.md  | 78 +++++++++----------
 .../src/reactivity/working_with_signals.md    |  2 +-
 2 files changed, 39 insertions(+), 41 deletions(-)

diff --git a/docs/book/src/reactivity/14_create_effect.md b/docs/book/src/reactivity/14_create_effect.md
index 991074f4a..b1fc25dc4 100644
--- a/docs/book/src/reactivity/14_create_effect.md
+++ b/docs/book/src/reactivity/14_create_effect.md
@@ -146,13 +146,20 @@ set_num.set(2); // (nothing happens)
 use leptos::html::Input;
 use leptos::*;
 
+#[derive(Copy, Clone)]
+struct LogContext(RwSignal<Vec<String>>);
+
 #[component]
 fn App() -> impl IntoView {
     // Just making a visible log here
     // You can ignore this...
     let log = create_rw_signal::<Vec<String>>(vec![]);
     let logged = move || log().join("\n");
-    provide_context(log);
+
+    // the newtype pattern isn't *necessary* here but is a good practice
+    // it avoids confusion with other possible future `RwSignal<Vec<String>>` contexts
+    // and makes it easier to refer to it
+    provide_context(LogContext(log));
 
     view! {
         <CreateAnEffect/>
@@ -169,34 +176,43 @@ fn CreateAnEffect() -> impl IntoView {
     // this will add the name to the log
     // any time one of the source signals changes
     create_effect(move |_| {
-        log(
-
-            if use_last() {
-                format!("{}  {}", first(), last())
-            } else {
-                first()
-            },
-        )
+        log(if use_last() {
+            with!(|first, last| format!("{first} {last}"))
+        } else {
+            first()
+        })
     });
 
     view! {
-        <h1><code>"create_effect"</code> " Version"</h1>
+        <h1>
+            <code>"create_effect"</code>
+            " Version"
+        </h1>
         <form>
             <label>
                 "First Name"
-                <input type="text" name="first" prop:value=first
+                <input
+                    type="text"
+                    name="first"
+                    prop:value=first
                     on:change=move |ev| set_first(event_target_value(&ev))
                 />
             </label>
             <label>
                 "Last Name"
-                <input type="text" name="last" prop:value=last
+                <input
+                    type="text"
+                    name="last"
+                    prop:value=last
                     on:change=move |ev| set_last(event_target_value(&ev))
                 />
             </label>
             <label>
                 "Show Last Name"
-                <input type="checkbox" name="use_last" prop:checked=use_last
+                <input
+                    type="checkbox"
+                    name="use_last"
+                    prop:checked=use_last
                     on:change=move |ev| set_use_last(event_target_checked(&ev))
                 />
             </label>
@@ -231,24 +247,10 @@ fn ManualVersion() -> impl IntoView {
     view! {
         <h1>"Manual Version"</h1>
         <form on:change=on_change>
+            <label>"First Name" <input type="text" name="first" node_ref=first/></label>
+            <label>"Last Name" <input type="text" name="last" node_ref=last/></label>
             <label>
-                "First Name"
-                <input type="text" name="first"
-                    node_ref=first
-                />
-            </label>
-            <label>
-                "Last Name"
-                <input type="text" name="last"
-                    node_ref=last
-                />
-            </label>
-            <label>
-                "Show Last Name"
-                <input type="checkbox" name="use_last"
-                    checked
-                    node_ref=use_last
-                />
+                "Show Last Name" <input type="checkbox" name="use_last" checked node_ref=use_last/>
             </label>
         </form>
     }
@@ -273,20 +275,16 @@ fn EffectVsDerivedSignal() -> impl IntoView {
         move || (!my_value.with(String::is_empty)).then(|| Some(my_value.get()));
 
     view! {
-        <input
-            prop:value=my_value
-            on:input= move |ev| set_my_value(event_target_value(&ev))
-        />
+        <input prop:value=my_value on:input=move |ev| set_my_value(event_target_value(&ev))/>
 
         <p>
             <code>"my_optional_value"</code>
             " is "
             <code>
-                <Show
-                    when=move || my_optional_value().is_some()
-                    fallback=|| view! { "None" }
-                >
-                    "Some(\"" {my_optional_value().unwrap()} "\")"
+                <Show when=move || my_optional_value().is_some() fallback=|| view! { "None" }>
+                    "Some(\""
+                    {my_optional_value().unwrap()}
+                    "\")"
                 </Show>
             </code>
         </p>
@@ -316,7 +314,7 @@ where
 }
 
 fn log(msg: impl std::fmt::Display) {
-    let log = use_context::<RwSignal<Vec<String>>>().unwrap();
+    let log = use_context::<LogContext>().unwrap().0;
     log.update(|log| log.push(msg.to_string()));
 }
 
diff --git a/docs/book/src/reactivity/working_with_signals.md b/docs/book/src/reactivity/working_with_signals.md
index e2b57a98a..89556c917 100644
--- a/docs/book/src/reactivity/working_with_signals.md
+++ b/docs/book/src/reactivity/working_with_signals.md
@@ -114,7 +114,7 @@ let memoized_double_count = create_memo(move |_| count() * 2);
 ```rust
 let (first_name, set_first_name) = create_signal("Bridget".to_string());
 let (last_name, set_last_name) = create_signal("Jones".to_string());
-let full_name = move || format!("{} {}", first_name(), last_name());
+let full_name = move || with!(|first_name, last_name| format!("{first_name} {last_name}"));
 ```
 
 **3) A and B are independent signals, but sometimes updated at the same time.** When you make the call to update A, make a separate call to update B.