Readable and Writable helpers for String, HashMap and HashSet (#4834)

* Add more read/write methods for string signals

* add helpers for HashMap and HashSet as well

* fix typo

* fix conflicting string and str extensions

* fix counters example

examples/01-app-demos/calculator.rs

@@ -34,15 +34,15 @@ fn app() -> Element {
         if val() == "0" {
             val.set(String::new());
         }
-        val.write().push_str(num.as_str());
+        val.push_str(num.as_str());
     };
 
-    let mut input_operator = move |key: &str| val.write().push_str(key);
+    let mut input_operator = move |key: &str| val.push_str(key);
 
     let handle_key_down_event = move |evt: KeyboardEvent| match evt.key() {
         Key::Backspace => {
             if !val().is_empty() {
-                val.write().pop();
+                val.pop();
             }
         }
         Key::Character(character) => match character.as_str() {
@@ -104,7 +104,7 @@ fn app() -> Element {
                                 }
                                 button {
                                     class: "calculator-key key-dot",
-                                    onclick: move |_| val.write().push('.'),
+                                    onclick: move |_| val.push('.'),
                                     "●"
                                 }
                                 for k in 1..10 {

examples/01-app-demos/counters.rs

@@ -19,8 +19,8 @@ fn app() -> Element {
         Stylesheet { href: STYLE }
 
         div { id: "controls",
-            button { onclick: move |_| counters.write().push(0), "Add counter" }
-            button { onclick: move |_| { counters.write().pop(); }, "Remove counter" }
+            button { onclick: move |_| counters.push(0), "Add counter" }
+            button { onclick: move |_| { counters.pop(); }, "Remove counter" }
         }
 
         h3 { "Total: {sum}" }
@@ -47,7 +47,7 @@ fn app() -> Element {
                     }
                 }
                 button { onclick: move |_| counters.write()[i] += 1, "+1" }
-                button { onclick: move |_| { counters.write().remove(i); }, "x" }
+                button { onclick: move |_| { counters.remove(i); }, "x" }
             }
         }
     }

examples/01-app-demos/todomvc.rs

@@ -115,13 +115,13 @@ fn TodoHeader(mut todos: WriteSignal<HashMap<u32, TodoItem>>) -> Element {
     let mut todo_id = use_signal(|| 0);
 
     let onkeydown = move |evt: KeyboardEvent| {
-        if evt.key() == Key::Enter && !draft.read().is_empty() {
+        if evt.key() == Key::Enter && !draft.is_empty() {
             let id = todo_id();
             let todo = TodoItem {
                 checked: false,
                 contents: draft.to_string(),
             };
-            todos.write().insert(id, todo);
+            todos.insert(id, todo);
             todo_id += 1;
             draft.set("".to_string());
         }
@@ -169,7 +169,7 @@ fn TodoEntry(mut todos: WriteSignal<HashMap<u32, TodoItem>>, id: u32) -> Element
                     r#type: "checkbox",
                     id: "cbg-{id}",
                     checked: "{checked}",
-                    oninput: move |evt| todos.write().get_mut(&id).unwrap().checked = evt.checked()
+                    oninput: move |evt| todos.get_mut(&id).unwrap().checked = evt.checked()
                 }
                 label {
                     r#for: "cbg-{id}",
@@ -181,7 +181,7 @@ fn TodoEntry(mut todos: WriteSignal<HashMap<u32, TodoItem>>, id: u32) -> Element
                     class: "destroy",
                     onclick: move |evt| {
                         evt.prevent_default();
-                        todos.write().remove(&id);
+                        todos.remove(&id);
                     },
                 }
             }
@@ -191,7 +191,7 @@ fn TodoEntry(mut todos: WriteSignal<HashMap<u32, TodoItem>>, id: u32) -> Element
                 input {
                     class: "edit",
                     value: "{contents}",
-                    oninput: move |evt| todos.write().get_mut(&id).unwrap().contents = evt.value(),
+                    oninput: move |evt| todos.get_mut(&id).unwrap().contents = evt.value(),
                     autofocus: "true",
                     onfocusout: move |_| is_editing.set(false),
                     onkeydown: move |evt| {
@@ -250,7 +250,7 @@ fn ListFooter(
             if show_clear_completed() {
                 button {
                     class: "clear-completed",
-                    onclick: move |_| todos.write().retain(|_, todo| !todo.checked),
+                    onclick: move |_| todos.retain(|_, todo| !todo.checked),
                     "Clear completed"
                 }
             }

examples/01-app-demos/todomvc_store.rs

@@ -175,7 +175,7 @@ fn TodoHeader(mut todos: Store<TodoState>) -> Element {
     let mut todo_id = use_signal(|| 0);
 
     let onkeydown = move |evt: KeyboardEvent| {
-        if evt.key() == Key::Enter && !draft.read().is_empty() {
+        if evt.key() == Key::Enter && !draft.is_empty() {
             let id = todo_id();
             let todo = TodoItem::new(draft.take());
             todos.todos().insert(id, todo);

examples/01-app-demos/websocket_chat.rs

@@ -46,7 +46,7 @@ fn app() -> Element {
     use_future(move || async move {
         while let Ok(msg) = socket.recv().await {
             match msg {
-                ServerEvent::ReceiveMessage(message) => message_list.write().push(message),
+                ServerEvent::ReceiveMessage(message) => message_list.push(message),
                 ServerEvent::Connected { messages } => message_list.set(messages),
             }
         }

examples/07-fullstack/server_sent_events.rs

@@ -38,7 +38,7 @@ fn app() -> Element {
 
         // And then poll it for new events, adding them to our signal
         while let Some(Ok(event)) = stream.recv().await {
-            events.write().push(event);
+            events.push(event);
         }
 
         anyhow::Ok(())

examples/07-fullstack/streaming.rs

@@ -31,23 +31,23 @@ fn app() -> Element {
     let mut json_responses = use_signal(Vec::new);
 
     let mut start_text_stream = use_action(move || async move {
-        text_responses.write().clear();
+        text_responses.clear();
         let mut stream = text_stream(Some(100)).await?;
 
         while let Some(Ok(text)) = stream.next().await {
-            text_responses.write().push_str(&text);
-            text_responses.write().push('\n');
+            text_responses.push_str(&text);
+            text_responses.push('\n');
         }
 
         dioxus::Ok(())
     });
 
     let mut start_json_stream = use_action(move || async move {
-        json_responses.write().clear();
+        json_responses.clear();
         let mut stream = json_stream().await?;
 
         while let Some(Ok(dog)) = stream.next().await {
-            json_responses.write().push(dog);
+            json_responses.push(dog);
         }
 
         dioxus::Ok(())

examples/08-apis/control_focus.rs

@@ -56,7 +56,7 @@ fn app() -> Element {
                 input {
                     r#type: "number",
                     value: "{i}",
-                    onmounted: move |cx| elements.write().push(cx.data()),
+                    onmounted: move |cx| elements.push(cx.data()),
                     oninput: move |_| running.set(false),
                 }
             }

examples/08-apis/file_upload.rs

@@ -27,12 +27,12 @@ fn app() -> Element {
         for file in files {
             let filename = file.name();
             if let Ok(contents) = file.read_string().await {
-                files_uploaded.write().push(UploadedFile {
+                files_uploaded.push(UploadedFile {
                     name: filename,
                     contents,
                 });
             } else {
-                files_uploaded.write().push(UploadedFile {
+                files_uploaded.push(UploadedFile {
                     name: filename,
                     contents: "Failed to read file".into(),
                 });
@@ -45,7 +45,7 @@ fn app() -> Element {
 
         h1 { "File Upload Example" }
         p { "Drop a .txt, .rs, or .js file here to read it" }
-        button { onclick: move |_| files_uploaded.write().clear(), "Clear files" }
+        button { onclick: move |_| files_uploaded.clear(), "Clear files" }
 
         div {
             label { r#for: "directory-upload", "Enable directory upload" }

examples/08-apis/window_popup.rs

@@ -15,7 +15,7 @@ fn app() -> Element {
     let handle = use_coroutine(move |mut rx: UnboundedReceiver<String>| async move {
         use futures_util::StreamExt;
         while let Some(message) = rx.next().await {
-            emails_sent.write().push(message);
+            emails_sent.push(message);
         }
     });