From fe1b35d6105d92a8cab553bc6a808a2155578ace Mon Sep 17 00:00:00 2001 From: Evan Almloff Date: Fri, 12 Jan 2024 17:47:27 -0600 Subject: [PATCH 1/3] fix mount event --- packages/desktop/headless_tests/events.rs | 16 ++++++- packages/liveview/src/pool.rs | 4 +- packages/web/src/dom.rs | 6 +-- playwright-tests/liveview/src/main.rs | 26 +++--------- playwright-tests/web/src/main.rs | 51 +++++++---------------- 5 files changed, 41 insertions(+), 62 deletions(-) diff --git a/packages/desktop/headless_tests/events.rs b/packages/desktop/headless_tests/events.rs index 061c040ed..69f743a1a 100644 --- a/packages/desktop/headless_tests/events.rs +++ b/packages/desktop/headless_tests/events.rs @@ -216,13 +216,27 @@ fn app(cx: Scope) -> Element { r#"new FocusEvent("focusout",{bubbles: true})"#, ); - if **received_events == 12 { + if **received_events == 13 { println!("all events recieved"); desktop_context.close(); } render! { div { + div { + width: "100px", + height: "100px", + onmounted: move |evt| { + to_owned![received_events]; + async move { + let rect = evt.get_client_rect().await.unwrap(); + println!("rect: {:?}", rect); + assert_eq!(rect.width(), 100.0); + assert_eq!(rect.height(), 100.0); + received_events.modify(|x| *x + 1) + } + } + } button { id: "button", onclick: move |event| { diff --git a/packages/liveview/src/pool.rs b/packages/liveview/src/pool.rs index 6fac0abfe..79fc6b34d 100644 --- a/packages/liveview/src/pool.rs +++ b/packages/liveview/src/pool.rs @@ -6,7 +6,7 @@ use crate::{ LiveViewError, }; use dioxus_core::{prelude::*, BorrowedAttributeValue, Mutations}; -use dioxus_html::{event_bubbles, EventData, HtmlEvent, MountedData, PlatformEventData}; +use dioxus_html::{event_bubbles, EventData, HtmlEvent, PlatformEventData}; use dioxus_interpreter_js::binary_protocol::Channel; use futures_util::{pin_mut, SinkExt, StreamExt}; use rustc_hash::FxHashMap; @@ -188,7 +188,7 @@ pub async fn run(mut vdom: VirtualDom, ws: impl LiveViewSocket) -> Result<(), Li let element = LiveviewElement::new(evt.element, query_engine.clone()); vdom.handle_event( &evt.name, - Rc::new(PlatformEventData::new(Box::new(MountedData::new(element)))), + Rc::new(PlatformEventData::new(Box::new(element))), evt.element, evt.bubbles, ); diff --git a/packages/web/src/dom.rs b/packages/web/src/dom.rs index 9d08f09f4..44c0628e6 100644 --- a/packages/web/src/dom.rs +++ b/packages/web/src/dom.rs @@ -9,8 +9,8 @@ use dioxus_core::{ BorrowedAttributeValue, ElementId, Mutation, Template, TemplateAttribute, TemplateNode, }; +use dioxus_html::event_bubbles; use dioxus_html::PlatformEventData; -use dioxus_html::{event_bubbles, MountedData}; use dioxus_interpreter_js::{get_node, minimal_bindings, save_template, Channel}; use futures_channel::mpsc; use rustc_hash::FxHashMap; @@ -267,13 +267,11 @@ impl WebsysDom { pub(crate) fn send_mount_event(&self, id: ElementId) { let node = get_node(id.0 as u32); if let Some(element) = node.dyn_ref::() { - let data: MountedData = element.into(); - let data = Box::new(data); let _ = self.event_channel.unbounded_send(UiEvent { name: "mounted".to_string(), bubbles: false, element: id, - data: PlatformEventData::new(data), + data: PlatformEventData::new(Box::new(element.clone())), }); } } diff --git a/playwright-tests/liveview/src/main.rs b/playwright-tests/liveview/src/main.rs index d28e3b7fd..71af6cc81 100644 --- a/playwright-tests/liveview/src/main.rs +++ b/playwright-tests/liveview/src/main.rs @@ -11,29 +11,15 @@ fn app(cx: Scope) -> Element { "hello axum! {num}" button { onclick: move |_| num += 1, "Increment" } } - svg { - circle { cx: 50, cy: 50, r: 40, stroke: "green", fill: "yellow" } - } - div { - class: "raw-attribute-div", - "raw-attribute": "raw-attribute-value", - } - div { - class: "hidden-attribute-div", - hidden: true, - } + svg { circle { cx: 50, cy: 50, r: 40, stroke: "green", fill: "yellow" } } + div { class: "raw-attribute-div", "raw-attribute": "raw-attribute-value" } + div { class: "hidden-attribute-div", hidden: true } div { class: "dangerous-inner-html-div", - dangerous_inner_html: "

hello dangerous inner html

", - } - input { - value: "hello input", - } - div { - class: "style-div", - color: "red", - "colored text" + dangerous_inner_html: "

hello dangerous inner html

" } + input { value: "hello input" } + div { class: "style-div", color: "red", "colored text" } }) } diff --git a/playwright-tests/web/src/main.rs b/playwright-tests/web/src/main.rs index c116d9365..1af72b92f 100644 --- a/playwright-tests/web/src/main.rs +++ b/playwright-tests/web/src/main.rs @@ -11,57 +11,38 @@ fn app(cx: Scope) -> Element { cx.render(rsx! { div { "hello axum! {num}" - button { - class: "increment-button", - onclick: move |_| num += 1, "Increment" - } - } - svg { - circle { cx: 50, cy: 50, r: 40, stroke: "green", fill: "yellow" } - } - div { - class: "raw-attribute-div", - "raw-attribute": "raw-attribute-value", - } - div { - class: "hidden-attribute-div", - hidden: true, + button { class: "increment-button", onclick: move |_| num += 1, "Increment" } } + svg { circle { cx: 50, cy: 50, r: 40, stroke: "green", fill: "yellow" } } + div { class: "raw-attribute-div", "raw-attribute": "raw-attribute-value" } + div { class: "hidden-attribute-div", hidden: true } div { class: "dangerous-inner-html-div", - dangerous_inner_html: "

hello dangerous inner html

", - } - input { - value: "hello input", - } - div { - class: "style-div", - color: "red", - "colored text" + dangerous_inner_html: "

hello dangerous inner html

" } + input { value: "hello input" } + div { class: "style-div", color: "red", "colored text" } button { class: "eval-button", onclick: move |_| { let eval = eval_provider( - r#" - window.document.title = 'Hello from Dioxus Eval!'; - dioxus.send("returned eval value"); - "#).unwrap(); + r#" + window.document.title = 'Hello from Dioxus Eval!'; + dioxus.send("returned eval value"); + "#, + ) + .unwrap(); let setter = eval_result.setter(); async move { - // Set the window title let result = eval.recv().await; if let Ok(serde_json::Value::String(string)) = result { setter(string); } - - }}, + } + }, "Eval" } - div { - class: "eval-result", - "{eval_result}" - } + div { class: "eval-result", "{eval_result}" } }) } From 011116b83d4f55faa6bc9f43cd2e6a62ab7ea03a Mon Sep 17 00:00:00 2001 From: Hampus Lidin Date: Sat, 13 Jan 2024 20:07:38 +0100 Subject: [PATCH 2/3] Fix panic when using dev profile (#1824) --- packages/cli/src/builder.rs | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/packages/cli/src/builder.rs b/packages/cli/src/builder.rs index 92d9ab093..6ad009bd9 100644 --- a/packages/cli/src/builder.rs +++ b/packages/cli/src/builder.rs @@ -117,8 +117,13 @@ pub fn build(config: &CrateConfig, _: bool, skip_assets: bool) -> Result Result target_dir - .join(format!("wasm32-unknown-unknown/{}", build_profile)) + .join(format!("wasm32-unknown-unknown/{}", build_target)) .join(format!("{}.wasm", name)), ExecutableType::Example(name) => target_dir - .join(format!("wasm32-unknown-unknown/{}/examples", build_profile)) + .join(format!("wasm32-unknown-unknown/{}/examples", build_target)) .join(format!("{}.wasm", name)), }; From e89dd8a888d035cb85e7ebd4baebbdefc6e4f8e0 Mon Sep 17 00:00:00 2001 From: Evan Almloff Date: Sun, 14 Jan 2024 12:19:31 -0600 Subject: [PATCH 3/3] fix the web form event --- packages/web/src/event.rs | 31 ++++++++++++++++++++++++++++--- 1 file changed, 28 insertions(+), 3 deletions(-) diff --git a/packages/web/src/event.rs b/packages/web/src/event.rs index 9e5ca9421..2e9632eae 100644 --- a/packages/web/src/event.rs +++ b/packages/web/src/event.rs @@ -410,6 +410,12 @@ impl HasFormData for WebFormData { } } + // try to fill in select element values + if let Some(select) = self.element.dyn_ref::() { + let options = get_select_data(select); + values.insert("options".to_string(), FormValue::VecText(options)); + } + values } @@ -530,16 +536,17 @@ export function get_form_data(form) { const formData = new FormData(form); for (let name of formData.keys()) { - const fieldType = target.elements[name].type; + const fieldType = form.elements[name].type; + console.log(fieldType); switch (fieldType) { case "select-multiple": - contents.values[name] = formData.getAll(name); + values.set(name, formData.getAll(name)); break; // add cases for fieldTypes that can hold multiple values here default: - contents.values[name] = formData.get(name); + values.set(name, formData.get(name)); break; } } @@ -550,3 +557,21 @@ export function get_form_data(form) { extern "C" { fn get_form_data(form: &web_sys::HtmlFormElement) -> js_sys::Map; } + +// web-sys does not expose the keys api for select data, so we need to manually bind to it +#[wasm_bindgen(inline_js = r#" +export function get_select_data(select) { + let values = []; + for (let i = 0; i < select.options.length; i++) { + let option = select.options[i]; + if (option.selected) { + values.push(option.value.toString()); + } + } + + return values; +} +"#)] +extern "C" { + fn get_select_data(select: &web_sys::HtmlSelectElement) -> Vec; +}