diff --git a/Cargo.toml b/Cargo.toml index 711c0a327..0974adea7 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -19,10 +19,10 @@ dioxus-native-core = { path = "packages/native-core", version = "0.5.0-alpha.2" dioxus-native-core-macro = { path = "packages/native-core-macro", version = "0.5.0-alpha.2" } plasmo = { path = "packages/plasmo", version = "0.5.0-alpha.2" } -dioxus = { version = "0.5.0-alpha.2" } -dioxus-core = { version = "0.5.0-alpha.2" } -dioxus-hot-reload = { version = "0.5.0-alpha.2" } -dioxus-html = { version = "0.5.0-alpha.2" } +dioxus = { git = "https://github.com/DioxusLabs/dioxus" } +dioxus-core = { git = "https://github.com/DioxusLabs/dioxus" } +dioxus-hot-reload = { git = "https://github.com/DioxusLabs/dioxus" } +dioxus-html = { git = "https://github.com/DioxusLabs/dioxus" } tracing = "0.1.37" tracing-futures = "0.2.5" diff --git a/packages/blitz-core/Cargo.toml b/packages/blitz-core/Cargo.toml index c225b1a37..a4fb562ea 100644 --- a/packages/blitz-core/Cargo.toml +++ b/packages/blitz-core/Cargo.toml @@ -14,7 +14,7 @@ dioxus-native-core = { workspace = true, features = [ "layout-attributes", ] } dioxus-native-core-macro = { workspace = true } -dioxus-html = { version = "0.5.0-alpha.2" } +dioxus-html = { git = "https://github.com/DioxusLabs/dioxus" } taffy = "0.3.12" tokio = { version = "1.25.0", features = ["full"] } lightningcss = "1.0.0-alpha.39" diff --git a/packages/blitz-core/src/events.rs b/packages/blitz-core/src/events.rs index fffd2bb0a..268bd43c1 100644 --- a/packages/blitz-core/src/events.rs +++ b/packages/blitz-core/src/events.rs @@ -12,7 +12,7 @@ use tao::event::MouseButton; use vello::kurbo::Point; use dioxus_html::{ - geometry::{euclid::Point2D, ClientPoint, Coordinates, ElementPoint, PagePoint, ScreenPoint}, input_data::{self, keyboard_types::Modifiers, MouseButtonSet}, SerializedFocusData, SerializedKeyboardData, SerializedMouseData, SerializedWheelData + geometry::{euclid::Point2D, ClientPoint, Coordinates, ElementPoint, PagePoint, ScreenPoint}, input_data::{self, keyboard_types::Modifiers, MouseButtonSet}, PlatformEventData, SerializedFocusData, SerializedKeyboardData, SerializedMouseData, SerializedWheelData }; use dioxus_native_core::prelude::*; @@ -101,12 +101,12 @@ pub enum EventData { impl EventData { pub fn into_any(self) -> Rc { - match self { - EventData::Mouse(data) => Rc::new(data), - EventData::Keyboard(data) => Rc::new(data), - EventData::Focus(data) => Rc::new(data), - EventData::Wheel(data) => Rc::new(data), - } + Rc::new(PlatformEventData::new(match self { + EventData::Mouse(data) => Box::new(data) as Box, + EventData::Keyboard(data) => Box::new(data), + EventData::Focus(data) => Box::new(data), + EventData::Wheel(data) => Box::new(data), + })) } } diff --git a/packages/blitz/Cargo.toml b/packages/blitz/Cargo.toml index b75e337b3..0db46b297 100644 --- a/packages/blitz/Cargo.toml +++ b/packages/blitz/Cargo.toml @@ -11,12 +11,12 @@ repository = "https://github.com/DioxusLabs/blitz" # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html [dependencies] -dioxus = { version = "0.5.0-alpha.2" } +dioxus = { git = "https://github.com/DioxusLabs/dioxus" } dioxus-native-core = { workspace = true, features = [ "dioxus", ] } -dioxus-html = { version = "0.5.0-alpha.2" } -dioxus-hot-reload = { version = "0.5.0-alpha.2" } +dioxus-html = { git = "https://github.com/DioxusLabs/dioxus" } +dioxus-hot-reload = { git = "https://github.com/DioxusLabs/dioxus" } blitz-core = { path = "../blitz-core" } tokio = { version = "1.26.0", features = ["full"] } keyboard-types = "0.7.0" diff --git a/packages/blitz/examples/buttons.rs b/packages/blitz/examples/buttons.rs index 73012b33a..d44ea3032 100644 --- a/packages/blitz/examples/buttons.rs +++ b/packages/blitz/examples/buttons.rs @@ -5,41 +5,41 @@ async fn main() { blitz::launch(app).await; } -#[derive(PartialEq, Props)] +#[derive(PartialEq, Props, Clone)] struct ButtonProps { color_offset: u32, layer: u16, } #[allow(non_snake_case)] -fn Button(cx: Scope) -> Element { - let toggle = use_state(cx, || false); - let hovered = use_state(cx, || false); +fn Button(props: ButtonProps) -> Element { + let mut toggle = use_signal(|| false); + let mut hovered = use_signal( || false); - let hue = cx.props.color_offset % 255; - let saturation = if *toggle.get() { 50 } else { 25 } + if *hovered.get() { 50 } else { 25 }; + let hue = props.color_offset % 255; + let saturation = if toggle() { 50 } else { 25 } + if hovered() { 50 } else { 25 }; let brightness = saturation / 2; let color = format!("hsl({hue}, {saturation}%, {brightness}%)"); - cx.render(rsx! { + rsx! { div { border_width: "0px", width: "100%", height: "100%", background_color: "{color}", - tabindex: "{cx.props.layer}", - onkeydown: |e| { + tabindex: "{props.layer}", + onkeydown: move |e| { if e.code() == keyboard_types::Code::Space { - toggle.modify(|f| !f); + toggle.toggle(); } }, - onmouseup: |_| { - toggle.modify(|f| !f); + onmouseup: move |_| { + toggle.toggle(); }, - onmouseenter: |_| { + onmouseenter: move |_| { hovered.set(true); }, - onmouseleave: |_| { + onmouseleave: move |_| { hovered.set(false); }, justify_content: "center", @@ -48,15 +48,15 @@ fn Button(cx: Scope) -> Element { display: "flex", flex_direction: "column", - p { "{cx.props.layer}" } + p { "{props.layer}" } } - }) + } } -fn app(cx: Scope) -> Element { - let count = use_state(cx, || 10); - let current_count = **count; - cx.render(rsx! { +fn app(_: ()) -> Element { + let mut count = use_signal(|| 10); + let current_count = count(); + rsx! { div { display: "flex", flex_direction: "column", width: "100%", height: "100%", div { display: "flex", @@ -68,8 +68,8 @@ fn app(cx: Scope) -> Element { height: "10%", background_color: "green", tabindex: "0", - onmouseup: |_| { - count.modify(|c| *c + 10); + onmouseup: move |_| { + count += 10; }, "grid: {current_count}x{current_count} = {current_count*current_count} tiles - Click to add more" } @@ -81,32 +81,27 @@ fn app(cx: Scope) -> Element { text_align: "center", width: "100%", height: "90%", - (0..current_count).map(|y| - rsx! { - div { display: "flex", flex_direction: "row", width: "100%", height: "100%", - (0..current_count).map(|x| { - if (x + y) % 2 == 0 { - rsx! { - div { - border_width: "0px", - width: "100%", - height: "100%", - background_color: "rgb(100, 100, 100)" - } - } - } else { - rsx! { - Button { - color_offset: x * y, - layer: ((x + y) % 3) as u16 - } - } + for y in (0..current_count) { + + div { display: "flex", flex_direction: "row", width: "100%", height: "100%", + for x in (0..current_count) { + if (x + y) % 2 == 0 { + div { + border_width: "0px", + width: "100%", + height: "100%", + background_color: "rgb(100, 100, 100)" + } + } else { + Button { + color_offset: x * y, + layer: ((x + y) % 3) as u16 } - }) + } } } - ) + } } } - }) + } } diff --git a/packages/blitz/src/lib.rs b/packages/blitz/src/lib.rs index 038de9231..abb87795d 100644 --- a/packages/blitz/src/lib.rs +++ b/packages/blitz/src/lib.rs @@ -2,6 +2,7 @@ use std::ops::Deref; use std::sync::Arc; use dioxus::dioxus_core::{Component, VirtualDom}; +use dioxus_html::SerializedHtmlEventConverter; use dioxus_native_core::prelude::*; use blitz_core::EventData; @@ -20,6 +21,9 @@ pub async fn launch_cfg_with_props( props: Props, cfg: Config, ) { + // Set the event converter + dioxus_html::set_event_converter(Box::new(SerializedHtmlEventConverter)); + render( move |rdom, _| { let mut vdom = VirtualDom::new_with_props(app, props); diff --git a/packages/plasmo/src/hooks.rs b/packages/plasmo/src/hooks.rs index 0c0ca1c21..fb7bd9d2f 100644 --- a/packages/plasmo/src/hooks.rs +++ b/packages/plasmo/src/hooks.rs @@ -66,7 +66,7 @@ impl EventData { pub struct FormData { pub(crate) value: String, - pub values: HashMap, + pub values: HashMap, pub(crate) files: Option, } @@ -76,7 +76,7 @@ impl HasFormData for FormData { self.value.clone() } - fn values(&self) -> HashMap { + fn values(&self) -> HashMap { self.values.clone() }