Merge pull request #59 from DioxusLabs/fix-dioxus-updates

Update blitz to the git version of dioxus

Author: jkelleyrtp

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"

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"

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<dyn Any> {
-        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<dyn Any>,
+            EventData::Keyboard(data) => Box::new(data),
+            EventData::Focus(data) => Box::new(data),
+            EventData::Wheel(data) => Box::new(data),
+        }))
     }
 }
 

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"

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<ButtonProps>) -> 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<ButtonProps>) -> 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
                                 }
-                            })
+                            }
                         }
                     }
-                )
+                }
             }
         }
-    })
+    }
 }

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: 'static +Clone+ Send>(
     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);

packages/plasmo/src/hooks.rs

@@ -66,7 +66,7 @@ impl EventData {
 pub struct FormData {
     pub(crate) value: String,
 
-    pub values: HashMap<String, String>,
+    pub values: HashMap<String, FormValue>,
 
     pub(crate) files: Option<Files>,
 }
@@ -76,7 +76,7 @@ impl HasFormData for FormData {
         self.value.clone()
     }
 
-    fn values(&self) -> HashMap<String, String> {
+    fn values(&self) -> HashMap<String,FormValue> {
         self.values.clone()
     }