diff --git a/packages/core/src/virtual_dom.rs b/packages/core/src/virtual_dom.rs index 8c309ccec..8b41ad951 100644 --- a/packages/core/src/virtual_dom.rs +++ b/packages/core/src/virtual_dom.rs @@ -280,6 +280,9 @@ impl VirtualDom { /// Whenever the VirtualDom "works", it will re-render this scope pub fn mark_dirty(&mut self, id: ScopeId) { let height = self.scopes[id.0].height; + + println!("marking scope {} dirty with height {}", id.0, height); + self.dirty_scopes.insert(DirtyScope { height, id }); } diff --git a/packages/desktop/src/controller.rs b/packages/desktop/src/controller.rs index c8015bc8a..9037189b1 100644 --- a/packages/desktop/src/controller.rs +++ b/packages/desktop/src/controller.rs @@ -1,7 +1,6 @@ use crate::desktop_context::{DesktopContext, UserWindowEvent}; -use crate::events::IpcMessage; +use crate::events::{decode_event, EventMessage}; use dioxus_core::*; -use dioxus_html::HtmlEvent; use futures_channel::mpsc::{unbounded, UnboundedSender}; use futures_util::StreamExt; #[cfg(target_os = "ios")] @@ -26,7 +25,7 @@ pub(super) struct DesktopController { pub(super) quit_app_on_close: bool, pub(super) is_ready: Arc, pub(super) proxy: EventLoopProxy, - pub(super) event_tx: UnboundedSender, + pub(super) event_tx: UnboundedSender, #[cfg(target_os = "ios")] pub(super) views: Vec<*mut Object>, @@ -41,7 +40,7 @@ impl DesktopController { proxy: EventLoopProxy, ) -> Self { let edit_queue = Arc::new(Mutex::new(Vec::new())); - let (event_tx, mut event_rx) = unbounded::(); + let (event_tx, mut event_rx) = unbounded(); let proxy2 = proxy.clone(); let pending_edits = edit_queue.clone(); @@ -69,8 +68,14 @@ impl DesktopController { loop { tokio::select! { _ = dom.wait_for_work() => {} - Some(value) = event_rx.next() => { - dom.handle_event(&value.name, value.data.into_any(), value.element, dioxus_html::events::event_bubbles(&value.name)); + Some(json_value) = event_rx.next() => { + if let Ok(value) = serde_json::from_value::(json_value) { + let name = value.event.clone(); + let el_id = ElementId(value.mounted_dom_id); + if let Some(evt) = decode_event(value) { + dom.handle_event(&name, evt, el_id, dioxus_html::events::event_bubbles(&name)); + } + } } } diff --git a/packages/desktop/src/events.rs b/packages/desktop/src/events.rs index 2496d6ddb..b82d6f749 100644 --- a/packages/desktop/src/events.rs +++ b/packages/desktop/src/events.rs @@ -6,7 +6,7 @@ use serde_json::from_value; use std::any::Any; use std::rc::Rc; -#[derive(Deserialize, Serialize, Debug)] +#[derive(Deserialize, Serialize)] pub(crate) struct IpcMessage { method: String, params: serde_json::Value, @@ -31,3 +31,61 @@ pub(crate) fn parse_ipc_message(payload: &str) -> Option { } } } + +macro_rules! match_data { + ( + $m:ident; + $name:ident; + $( + $tip:ty => $($mname:literal)|* ; + )* + ) => { + match $name { + $( $($mname)|* => { + let val: $tip = from_value::<$tip>($m).ok()?; + Rc::new(val) as Rc + })* + _ => return None, + } + }; +} + +#[derive(Deserialize)] +pub struct EventMessage { + pub contents: serde_json::Value, + pub event: String, + pub mounted_dom_id: usize, +} + +pub fn decode_event(value: EventMessage) -> Option> { + let val = value.contents; + let name = value.event.as_str(); + type DragData = MouseData; + + let evt = match_data! { val; name; + MouseData => "click" | "contextmenu" | "dblclick" | "doubleclick" | "mousedown" | "mouseenter" | "mouseleave" | "mousemove" | "mouseout" | "mouseover" | "mouseup"; + ClipboardData => "copy" | "cut" | "paste"; + CompositionData => "compositionend" | "compositionstart" | "compositionupdate"; + KeyboardData => "keydown" | "keypress" | "keyup"; + FocusData => "blur" | "focus" | "focusin" | "focusout"; + FormData => "change" | "input" | "invalid" | "reset" | "submit"; + DragData => "drag" | "dragend" | "dragenter" | "dragexit" | "dragleave" | "dragover" | "dragstart" | "drop"; + PointerData => "pointerlockchange" | "pointerlockerror" | "pointerdown" | "pointermove" | "pointerup" | "pointerover" | "pointerout" | "pointerenter" | "pointerleave" | "gotpointercapture" | "lostpointercapture"; + SelectionData => "selectstart" | "selectionchange" | "select"; + TouchData => "touchcancel" | "touchend" | "touchmove" | "touchstart"; + ScrollData => "scroll"; + WheelData => "wheel"; + MediaData => "abort" | "canplay" | "canplaythrough" | "durationchange" | "emptied" + | "encrypted" | "ended" | "interruptbegin" | "interruptend" | "loadeddata" + | "loadedmetadata" | "loadstart" | "pause" | "play" | "playing" | "progress" + | "ratechange" | "seeked" | "seeking" | "stalled" | "suspend" | "timeupdate" + | "volumechange" | "waiting" | "error" | "load" | "loadend" | "timeout"; + AnimationData => "animationstart" | "animationend" | "animationiteration"; + TransitionData => "transitionend"; + ToggleData => "toggle"; + // ImageData => "load" | "error"; + // OtherData => "abort" | "afterprint" | "beforeprint" | "beforeunload" | "hashchange" | "languagechange" | "message" | "offline" | "online" | "pagehide" | "pageshow" | "popstate" | "rejectionhandled" | "storage" | "unhandledrejection" | "unload" | "userproximity" | "vrdisplayactivate" | "vrdisplayblur" | "vrdisplayconnect" | "vrdisplaydeactivate" | "vrdisplaydisconnect" | "vrdisplayfocus" | "vrdisplaypointerrestricted" | "vrdisplaypointerunrestricted" | "vrdisplaypresentchange"; + }; + + Some(evt) +} diff --git a/packages/desktop/src/lib.rs b/packages/desktop/src/lib.rs index deaa93f12..a635e3f4e 100644 --- a/packages/desktop/src/lib.rs +++ b/packages/desktop/src/lib.rs @@ -18,7 +18,6 @@ use std::sync::Arc; use desktop_context::UserWindowEvent; pub use desktop_context::{use_eval, use_window, DesktopContext, EvalResult}; -use dioxus_html::HtmlEvent; use futures_channel::mpsc::UnboundedSender; pub use wry; pub use wry::application as tao; @@ -157,7 +156,7 @@ fn build_webview( is_ready: Arc, proxy: tao::event_loop::EventLoopProxy, eval_sender: tokio::sync::mpsc::UnboundedSender, - event_tx: UnboundedSender, + event_tx: UnboundedSender, ) -> wry::webview::WebView { let builder = cfg.window.clone(); let window = builder.build(event_loop).unwrap(); @@ -191,9 +190,7 @@ fn build_webview( eval_sender.send(result).unwrap(); } "user_event" => { - if let Ok(evt) = serde_json::from_value(message.params()) { - _ = event_tx.unbounded_send(evt); - } + _ = event_tx.unbounded_send(message.params()); } "initialize" => { is_ready.store(true, std::sync::atomic::Ordering::Relaxed); @@ -240,16 +237,16 @@ fn build_webview( // in release mode, we don't want to show the dev tool or reload menus webview = webview.with_initialization_script( r#" - if (document.addEventListener) { - document.addEventListener('contextmenu', function(e) { - e.preventDefault(); - }, false); - } else { - document.attachEvent('oncontextmenu', function() { - window.event.returnValue = false; - }); - } - "#, + if (document.addEventListener) { + document.addEventListener('contextmenu', function(e) { + e.preventDefault(); + }, false); + } else { + document.attachEvent('oncontextmenu', function() { + window.event.returnValue = false; + }); + } + "#, ) } else { // in debug, we are okay with the reload menu showing and dev tool diff --git a/packages/desktop/src/main.js b/packages/desktop/src/main.js deleted file mode 100644 index c1f0cf9f4..000000000 --- a/packages/desktop/src/main.js +++ /dev/null @@ -1,7 +0,0 @@ -export function main() { - let root = window.document.getElementById("main"); - if (root != null) { - window.interpreter = new Interpreter(root); - window.ipc.postMessage(serializeIpcMessage("initialize")); - } -} diff --git a/packages/desktop/src/protocol.rs b/packages/desktop/src/protocol.rs index f9c96cfea..a544aa305 100644 --- a/packages/desktop/src/protocol.rs +++ b/packages/desktop/src/protocol.rs @@ -52,14 +52,7 @@ pub(super) fn desktop_handler( } else if trimmed == "index.js" { Response::builder() .header("Content-Type", "text/javascript") - .body( - format!( - "{} {}", - dioxus_interpreter_js::INTERPRETER_JS, - include_str!("./main.js") - ) - .into_bytes(), - ) + .body(dioxus_interpreter_js::INTERPRETER_JS.as_bytes().to_vec()) .map_err(From::from) } else { let asset_root = asset_root diff --git a/packages/html/Cargo.toml b/packages/html/Cargo.toml index 434c0bf48..446da9303 100644 --- a/packages/html/Cargo.toml +++ b/packages/html/Cargo.toml @@ -39,10 +39,7 @@ features = [ "ClipboardEvent", ] -[dev-dependencies] -serde_json = "*" - [features] -default = ["serialize"] -serialize = ["serde", "serde_repr", "euclid/serde", "keyboard-types/serde", "dioxus-core/serialize"] +default = [] +serialize = ["serde", "serde_repr", "euclid/serde", "keyboard-types/serde"] wasm-bind = ["web-sys", "wasm-bindgen"] diff --git a/packages/html/src/events/drag.rs b/packages/html/src/events/drag.rs index 53c118a77..5dd7f5c71 100644 --- a/packages/html/src/events/drag.rs +++ b/packages/html/src/events/drag.rs @@ -10,11 +10,12 @@ pub type DragEvent = Event; /// placing a pointer device (such as a mouse) on the touch surface and then dragging the pointer to a new location /// (such as another DOM element). Applications are free to interpret a drag and drop interaction in an /// application-specific way. -#[cfg_attr(feature = "serialize", derive(serde::Serialize, serde::Deserialize))] -#[derive(Debug, Clone)] pub struct DragData { /// Inherit mouse data pub mouse: MouseData, + + /// And then add the rest of the drag data + pub data: Box, } impl_event! { diff --git a/packages/html/src/events/form.rs b/packages/html/src/events/form.rs index 1d995fa09..5e0b6a17e 100644 --- a/packages/html/src/events/form.rs +++ b/packages/html/src/events/form.rs @@ -11,8 +11,9 @@ pub struct FormData { pub value: String, pub values: HashMap, - // #[cfg_attr(feature = "serialize", serde(skip))] - // pub files: Option>, + + #[cfg_attr(feature = "serialize", serde(skip))] + pub files: Option>, } impl Debug for FormData { diff --git a/packages/html/src/lib.rs b/packages/html/src/lib.rs index 577899fe1..ab2e49f1e 100644 --- a/packages/html/src/lib.rs +++ b/packages/html/src/lib.rs @@ -22,12 +22,6 @@ mod render_template; #[cfg(feature = "wasm-bind")] mod web_sys_bind; -#[cfg(feature = "serialize")] -mod transit; - -#[cfg(feature = "serialize")] -pub use transit::*; - pub use elements::*; pub use events::*; pub use global_attributes::*; diff --git a/packages/html/src/transit.rs b/packages/html/src/transit.rs deleted file mode 100644 index 5e944e0ce..000000000 --- a/packages/html/src/transit.rs +++ /dev/null @@ -1,152 +0,0 @@ -use std::{any::Any, rc::Rc}; - -use crate::events::*; -use dioxus_core::ElementId; -use serde::{Deserialize, Serialize}; - -// macro_rules! match_data { -// ( -// $m:ident; -// $name:ident; -// $( -// $tip:ty => $($mname:literal)|* ; -// )* -// ) => { -// match $name { -// $( $($mname)|* => { -// let val: $tip = from_value::<$tip>($m).ok()?; -// Rc::new(val) as Rc -// })* -// _ => return None, -// } -// }; -// } - -#[derive(Serialize, Deserialize, Debug, Clone)] -pub struct HtmlEvent { - pub element: ElementId, - pub name: String, - pub data: EventData, - pub bubbles: bool, -} - -impl HtmlEvent { - pub fn bubbles(&self) -> bool { - event_bubbles(&self.name) - } -} - -#[derive(Deserialize, Serialize, Debug, Clone)] -#[serde(untagged)] -pub enum EventData { - Mouse(MouseData), - Clipboard(ClipboardData), - Composition(CompositionData), - Keyboard(KeyboardData), - Focus(FocusData), - Form(FormData), - Drag(DragData), - Pointer(PointerData), - Selection(SelectionData), - Touch(TouchData), - Scroll(ScrollData), - Wheel(WheelData), - Media(MediaData), - Animation(AnimationData), - Transition(TransitionData), - Toggle(ToggleData), -} - -impl EventData { - pub fn into_any(self) -> Rc { - match self { - EventData::Mouse(data) => Rc::new(data) as Rc, - EventData::Clipboard(data) => Rc::new(data) as Rc, - EventData::Composition(data) => Rc::new(data) as Rc, - EventData::Keyboard(data) => Rc::new(data) as Rc, - EventData::Focus(data) => Rc::new(data) as Rc, - EventData::Form(data) => Rc::new(data) as Rc, - EventData::Drag(data) => Rc::new(data) as Rc, - EventData::Pointer(data) => Rc::new(data) as Rc, - EventData::Selection(data) => Rc::new(data) as Rc, - EventData::Touch(data) => Rc::new(data) as Rc, - EventData::Scroll(data) => Rc::new(data) as Rc, - EventData::Wheel(data) => Rc::new(data) as Rc, - EventData::Media(data) => Rc::new(data) as Rc, - EventData::Animation(data) => Rc::new(data) as Rc, - EventData::Transition(data) => Rc::new(data) as Rc, - EventData::Toggle(data) => Rc::new(data) as Rc, - } - } -} - -#[test] -fn test_back_and_forth() { - let data = HtmlEvent { - element: ElementId(0), - data: EventData::Mouse(MouseData::default()), - name: "click".to_string(), - bubbles: true, - }; - - println!("{}", serde_json::to_string_pretty(&data).unwrap()); - - let o = r#" -{ - "element": 0, - "name": "click", - "bubbles": true, - "data": { - "alt_key": false, - "button": 0, - "buttons": 0, - "client_x": 0, - "client_y": 0, - "ctrl_key": false, - "meta_key": false, - "offset_x": 0, - "offset_y": 0, - "page_x": 0, - "page_y": 0, - "screen_x": 0, - "screen_y": 0, - "shift_key": false - } -} - "#; - - let p: HtmlEvent = serde_json::from_str(o).unwrap(); -} - -// pub fn decode_event(value: ) -> Option> { -// let val = value.data; -// let name = value.event.as_str(); -// type DragData = MouseData; - -// let evt = match_data! { val; name; -// MouseData => "click" | "contextmenu" | "dblclick" | "doubleclick" | "mousedown" | "mouseenter" | "mouseleave" | "mousemove" | "mouseout" | "mouseover" | "mouseup"; -// ClipboardData => "copy" | "cut" | "paste"; -// CompositionData => "compositionend" | "compositionstart" | "compositionupdate"; -// KeyboardData => "keydown" | "keypress" | "keyup"; -// FocusData => "blur" | "focus" | "focusin" | "focusout"; -// FormData => "change" | "input" | "invalid" | "reset" | "submit"; -// DragData => "drag" | "dragend" | "dragenter" | "dragexit" | "dragleave" | "dragover" | "dragstart" | "drop"; -// PointerData => "pointerlockchange" | "pointerlockerror" | "pointerdown" | "pointermove" | "pointerup" | "pointerover" | "pointerout" | "pointerenter" | "pointerleave" | "gotpointercapture" | "lostpointercapture"; -// SelectionData => "selectstart" | "selectionchange" | "select"; -// TouchData => "touchcancel" | "touchend" | "touchmove" | "touchstart"; -// ScrollData => "scroll"; -// WheelData => "wheel"; -// MediaData => "abort" | "canplay" | "canplaythrough" | "durationchange" | "emptied" -// | "encrypted" | "ended" | "interruptbegin" | "interruptend" | "loadeddata" -// | "loadedmetadata" | "loadstart" | "pause" | "play" | "playing" | "progress" -// | "ratechange" | "seeked" | "seeking" | "stalled" | "suspend" | "timeupdate" -// | "volumechange" | "waiting" | "error" | "load" | "loadend" | "timeout"; -// AnimationData => "animationstart" | "animationend" | "animationiteration"; -// TransitionData => "transitionend"; -// ToggleData => "toggle"; -// // ImageData => "load" | "error"; -// // OtherData => "abort" | "afterprint" | "beforeprint" | "beforeunload" | "hashchange" | "languagechange" | "message" | "offline" | "online" | "pagehide" | "pageshow" | "popstate" | "rejectionhandled" | "storage" | "unhandledrejection" | "unload" | "userproximity" | "vrdisplayactivate" | "vrdisplayblur" | "vrdisplayconnect" | "vrdisplaydeactivate" | "vrdisplaydisconnect" | "vrdisplayfocus" | "vrdisplaypointerrestricted" | "vrdisplaypointerunrestricted" | "vrdisplaypresentchange"; -// }; - -// Some(evt) -// } diff --git a/packages/interpreter/src/interpreter.js b/packages/interpreter/src/interpreter.js index ada1bed64..3ac52a8f1 100644 --- a/packages/interpreter/src/interpreter.js +++ b/packages/interpreter/src/interpreter.js @@ -1,3 +1,11 @@ +export function main() { + let root = window.document.getElementById("main"); + if (root != null) { + window.interpreter = new Interpreter(root); + window.ipc.postMessage(serializeIpcMessage("initialize")); + } +} + class ListenerMap { constructor(root) { // bubbling events can listen at the root element @@ -52,7 +60,7 @@ class ListenerMap { } } -class Interpreter { +export class Interpreter { constructor(root) { this.root = root; this.listeners = new ListenerMap(root); @@ -345,10 +353,7 @@ class Interpreter { break; case "NewEventListener": // this handler is only provided on desktop implementations since this - // method is not used by the web implementationa - - let bubbles = event_bubbles(edit.name); - + // method is not used by the web implementation let handler = (event) => { let target = event.target; if (target != null) { @@ -430,21 +435,20 @@ class Interpreter { } window.ipc.postMessage( serializeIpcMessage("user_event", { - name: edit.name, - element: parseInt(realId), - data: contents, - bubbles: bubbles, + event: edit.name, + mounted_dom_id: parseInt(realId), + contents: contents, }) ); } }; - this.NewEventListener(edit.name, edit.id, bubbles, handler); + this.NewEventListener(edit.name, edit.id, event_bubbles(edit.name), handler); break; } } } -function serialize_event(event) { +export function serialize_event(event) { switch (event.type) { case "copy": case "cut": diff --git a/packages/liveview/Cargo.toml b/packages/liveview/Cargo.toml index ee75f71de..90f956289 100644 --- a/packages/liveview/Cargo.toml +++ b/packages/liveview/Cargo.toml @@ -10,6 +10,7 @@ description = "Build server-side apps with Dioxus" license = "MIT/Apache-2.0" + # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html [dependencies] @@ -27,7 +28,7 @@ tokio-util = { version = "0.7.0", features = ["full"] } dioxus-html = { path = "../html", features = ["serialize"], version = "^0.2.1" } dioxus-core = { path = "../core", features = ["serialize"], version = "^0.2.1" } -dioxus-interpreter-js = { path = "../interpreter" } + # warp warp = { version = "0.3", optional = true } @@ -38,9 +39,6 @@ tower = { version = "0.4.12", optional = true } # salvo salvo = { version = "0.32.0", optional = true, features = ["ws"] } -thiserror = "1.0.37" -uuid = { version = "1.2.2", features = ["v4"] } -anyhow = "1.0.66" [dev-dependencies] tokio = { version = "1", features = ["full"] } @@ -51,16 +49,4 @@ salvo = { version = "0.32.0", features = ["affix", "ws"] } tower = "0.4.12" [features] -default = ["salvo"] - -[[example]] -name = "axum" -required-features = ["axum"] - -[[example]] -name = "salvo" -required-features = ["salvo"] - -[[example]] -name = "warp" -required-features = ["warp"] +default = [] \ No newline at end of file diff --git a/packages/liveview/examples/axum.rs b/packages/liveview/examples/axum.rs index 410c0e9a4..450af30ef 100644 --- a/packages/liveview/examples/axum.rs +++ b/packages/liveview/examples/axum.rs @@ -1,53 +1,32 @@ -use axum::{extract::ws::WebSocketUpgrade, response::Html, routing::get, Router}; -use dioxus::prelude::*; - -fn app(cx: Scope) -> Element { - let mut num = use_state(cx, || 0); - - cx.render(rsx! { - div { - "hello axum! {num}" - button { onclick: move |_| num += 1, "Increment" } - } - }) -} +#[cfg(not(feature = "axum"))] +fn main() {} +#[cfg(feature = "axum")] #[tokio::main] async fn main() { + use axum::{extract::ws::WebSocketUpgrade, response::Html, routing::get, Router}; + use dioxus_core::{Element, LazyNodes, Scope}; pretty_env_logger::init(); + fn app(cx: Scope) -> Element { + cx.render(LazyNodes::new(|f| f.text(format_args!("hello world!")))) + } + let addr: std::net::SocketAddr = ([127, 0, 0, 1], 3030).into(); - let view = dioxus_liveview::LiveViewPool::new(); + let view = dioxus_liveview::new(addr); + let body = view.body("Dioxus Liveview"); let app = Router::new() + .route("/", get(move || async { Html(body) })) .route( - "/", - get(move || async move { - Html(format!( - r#" - - - Dioxus LiveView with Warp -
- {glue} - - "#, - glue = dioxus_liveview::interpreter_glue(&format!("ws://{addr}/ws")) - )) - }), - ) - .route( - "/ws", + "/app", get(move |ws: WebSocketUpgrade| async move { ws.on_upgrade(move |socket| async move { - _ = view.launch(dioxus_liveview::axum_socket(socket), app).await; + view.upgrade_axum(socket, app).await; }) }), ); - - println!("Listening on http://{}", addr); - axum::Server::bind(&addr.to_string().parse().unwrap()) .serve(app.into_make_service()) .await diff --git a/packages/liveview/examples/salvo.rs b/packages/liveview/examples/salvo.rs index 4afd8ff7e..132a62633 100644 --- a/packages/liveview/examples/salvo.rs +++ b/packages/liveview/examples/salvo.rs @@ -1,71 +1,55 @@ -use dioxus::prelude::*; - -use dioxus_liveview::LiveViewPool; -use salvo::extra::affix; -use salvo::extra::ws::WsHandler; -use salvo::prelude::*; -use std::net::SocketAddr; -use std::sync::Arc; - -fn app(cx: Scope) -> Element { - let mut num = use_state(cx, || 0); - - cx.render(rsx! { - div { - "hello salvo! {num}" - button { onclick: move |_| num += 1, "Increment" } - } - }) -} +#[cfg(not(feature = "salvo"))] +fn main() {} +#[cfg(feature = "salvo")] #[tokio::main] async fn main() { + use std::sync::Arc; + + use dioxus_core::{Element, LazyNodes, Scope}; + use dioxus_liveview as liveview; + use dioxus_liveview::Liveview; + use salvo::extra::affix; + use salvo::extra::ws::WsHandler; + use salvo::prelude::*; + + fn app(cx: Scope) -> Element { + cx.render(LazyNodes::new(|f| f.text(format_args!("hello world!")))) + } + pretty_env_logger::init(); - let addr: SocketAddr = ([127, 0, 0, 1], 3030).into(); - - let view = LiveViewPool::new(); + let addr = ([127, 0, 0, 1], 3030); + // todo: compactify this routing under one liveview::app method + let view = liveview::new(addr); let router = Router::new() .hoop(affix::inject(Arc::new(view))) .get(index) - .push(Router::with_path("ws").get(connect)); - - println!("Listening on http://{}", addr); - + .push(Router::with_path("app").get(connect)); Server::new(TcpListener::bind(addr)).serve(router).await; -} -#[handler] -fn index(_depot: &mut Depot, res: &mut Response) { - let addr: SocketAddr = ([127, 0, 0, 1], 3030).into(); - res.render(Text::Html(format!( - r#" - - - Dioxus LiveView with Warp -
- {glue} - - "#, - glue = dioxus_liveview::interpreter_glue(&format!("ws://{addr}/ws")) - ))); -} + #[handler] + fn index(depot: &mut Depot, res: &mut Response) { + let view = depot.obtain::>().unwrap(); + let body = view.body("Dioxus LiveView"); + res.render(Text::Html(body)); + } -#[handler] -async fn connect( - req: &mut Request, - depot: &mut Depot, - res: &mut Response, -) -> Result<(), StatusError> { - let view = depot.obtain::>().unwrap().clone(); - let fut = WsHandler::new().handle(req, res)?; - - tokio::spawn(async move { - if let Some(ws) = fut.await { - _ = view.launch(dioxus_liveview::salvo_socket(ws), app).await; - } - }); - - Ok(()) + #[handler] + async fn connect( + req: &mut Request, + depot: &mut Depot, + res: &mut Response, + ) -> Result<(), StatusError> { + let view = depot.obtain::>().unwrap().clone(); + let fut = WsHandler::new().handle(req, res)?; + let fut = async move { + if let Some(ws) = fut.await { + view.upgrade_salvo(ws, app).await; + } + }; + tokio::task::spawn(fut); + Ok(()) + } } diff --git a/packages/liveview/examples/warp.rs b/packages/liveview/examples/warp.rs index 7e759ea90..7b2ddfef5 100644 --- a/packages/liveview/examples/warp.rs +++ b/packages/liveview/examples/warp.rs @@ -1,56 +1,35 @@ -use dioxus::prelude::*; -use dioxus_liveview::adapters::warp_adapter::warp_socket; -use dioxus_liveview::LiveViewPool; -use std::net::SocketAddr; -use warp::ws::Ws; -use warp::Filter; - -fn app(cx: Scope) -> Element { - let mut num = use_state(cx, || 0); - - cx.render(rsx! { - div { - "hello warp! {num}" - button { - onclick: move |_| num += 1, - "Increment" - } - } - }) -} +#[cfg(not(feature = "warp"))] +fn main() {} +#[cfg(feature = "warp")] #[tokio::main] async fn main() { + use dioxus_core::{Element, LazyNodes, Scope}; + use dioxus_liveview as liveview; + use warp::ws::Ws; + use warp::Filter; + + fn app(cx: Scope) -> Element { + cx.render(LazyNodes::new(|f| f.text(format_args!("hello world!")))) + } + pretty_env_logger::init(); - let addr: SocketAddr = ([127, 0, 0, 1], 3030).into(); + let addr = ([127, 0, 0, 1], 3030); - let index = warp::path::end().map(move || { - warp::reply::html(format!( - r#" - - - Dioxus LiveView with Warp -
- {glue} - - "#, - glue = dioxus_liveview::interpreter_glue(&format!("ws://{addr}/ws/")) - )) - }); + // todo: compactify this routing under one liveview::app method + let view = liveview::new(addr); + let body = view.body("Dioxus LiveView"); - let pool = LiveViewPool::new(); - - let ws = warp::path("ws") - .and(warp::ws()) - .and(warp::any().map(move || pool.clone())) - .map(move |ws: Ws, pool: LiveViewPool| { - ws.on_upgrade(|ws| async move { - let _ = pool.launch(warp_socket(ws), app).await; - }) - }); - - println!("Listening on http://{}", addr); - - warp::serve(index.or(ws)).run(addr).await; + let routes = warp::path::end() + .map(move || warp::reply::html(body.clone())) + .or(warp::path("app") + .and(warp::ws()) + .and(warp::any().map(move || view.clone())) + .map(|ws: Ws, view: liveview::Liveview| { + ws.on_upgrade(|socket| async move { + view.upgrade_warp(socket, app).await; + }) + })); + warp::serve(routes).run(addr).await; } diff --git a/packages/liveview/src/adapters/axum_adapter.rs b/packages/liveview/src/adapters/axum_adapter.rs index 646cde38e..c60b267ea 100644 --- a/packages/liveview/src/adapters/axum_adapter.rs +++ b/packages/liveview/src/adapters/axum_adapter.rs @@ -1,23 +1,94 @@ -use crate::{LiveViewError, LiveViewSocket}; +use crate::events; use axum::extract::ws::{Message, WebSocket}; -use futures_util::{SinkExt, StreamExt}; +use dioxus_core::prelude::*; +use futures_util::{ + future::{select, Either}, + pin_mut, SinkExt, StreamExt, +}; +use tokio::sync::mpsc; +use tokio_stream::wrappers::UnboundedReceiverStream; +use tokio_util::task::LocalPoolHandle; -/// Convert a warp websocket into a LiveViewSocket -/// -/// This is required to launch a LiveView app using the warp web framework -pub fn axum_socket(ws: WebSocket) -> impl LiveViewSocket { - ws.map(transform_rx) - .with(transform_tx) - .sink_map_err(|_| LiveViewError::SendingFailed) +impl crate::Liveview { + pub async fn upgrade_axum(&self, ws: WebSocket, app: fn(Scope) -> Element) { + connect(ws, self.pool.clone(), app, ()).await; + } + + pub async fn upgrade_axum_with_props( + &self, + ws: WebSocket, + app: fn(Scope) -> Element, + props: T, + ) where + T: Send + Sync + 'static, + { + connect(ws, self.pool.clone(), app, props).await; + } } -fn transform_rx(message: Result) -> Result { - message - .map_err(|_| LiveViewError::SendingFailed)? - .into_text() - .map_err(|_| LiveViewError::SendingFailed) -} - -async fn transform_tx(message: String) -> Result { - Ok(Message::Text(message)) +pub async fn connect( + socket: WebSocket, + pool: LocalPoolHandle, + app: fn(Scope) -> Element, + props: T, +) where + T: Send + Sync + 'static, +{ + let (mut user_ws_tx, mut user_ws_rx) = socket.split(); + let (event_tx, event_rx) = mpsc::unbounded_channel(); + let (edits_tx, edits_rx) = mpsc::unbounded_channel(); + let mut edits_rx = UnboundedReceiverStream::new(edits_rx); + let mut event_rx = UnboundedReceiverStream::new(event_rx); + let vdom_fut = pool.clone().spawn_pinned(move || async move { + let mut vdom = VirtualDom::new_with_props(app, props); + let edits = vdom.rebuild(); + let serialized = serde_json::to_string(&edits.edits).unwrap(); + edits_tx.send(serialized).unwrap(); + loop { + let new_event = { + let vdom_fut = vdom.wait_for_work(); + pin_mut!(vdom_fut); + match select(event_rx.next(), vdom_fut).await { + Either::Left((l, _)) => l, + Either::Right((_, _)) => None, + } + }; + if let Some(new_event) = new_event { + vdom.handle_message(dioxus_core::SchedulerMsg::Event(new_event)); + } else { + let mutations = vdom.work_with_deadline(|| false); + for mutation in mutations { + let edits = serde_json::to_string(&mutation.edits).unwrap(); + edits_tx.send(edits).unwrap(); + } + } + } + }); + loop { + match select(user_ws_rx.next(), edits_rx.next()).await { + Either::Left((l, _)) => { + if let Some(Ok(msg)) = l { + if let Ok(Some(msg)) = msg.to_text().map(events::parse_ipc_message) { + let user_event = events::trigger_from_serialized(msg.params); + event_tx.send(user_event).unwrap(); + } else { + break; + } + } else { + break; + } + } + Either::Right((edits, _)) => { + if let Some(edits) = edits { + // send the edits to the client + if user_ws_tx.send(Message::Text(edits)).await.is_err() { + break; + } + } else { + break; + } + } + } + } + vdom_fut.abort(); } diff --git a/packages/liveview/src/adapters/salvo_adapter.rs b/packages/liveview/src/adapters/salvo_adapter.rs index 19cb528c7..8a28784b8 100644 --- a/packages/liveview/src/adapters/salvo_adapter.rs +++ b/packages/liveview/src/adapters/salvo_adapter.rs @@ -1,25 +1,110 @@ -use futures_util::{SinkExt, StreamExt}; +use crate::events; +use dioxus_core::prelude::*; +use futures_util::{pin_mut, SinkExt, StreamExt}; use salvo::extra::ws::{Message, WebSocket}; +use tokio::sync::mpsc; +use tokio_stream::wrappers::UnboundedReceiverStream; +use tokio_util::task::LocalPoolHandle; -use crate::{LiveViewError, LiveViewSocket}; - -/// Convert a salvo websocket into a LiveViewSocket -/// -/// This is required to launch a LiveView app using the warp web framework -pub fn salvo_socket(ws: WebSocket) -> impl LiveViewSocket { - ws.map(transform_rx) - .with(transform_tx) - .sink_map_err(|_| LiveViewError::SendingFailed) +impl crate::Liveview { + pub async fn upgrade_salvo(&self, ws: salvo::extra::ws::WebSocket, app: fn(Scope) -> Element) { + connect(ws, self.pool.clone(), app, ()).await; + } + pub async fn upgrade_salvo_with_props( + &self, + ws: salvo::extra::ws::WebSocket, + app: fn(Scope) -> Element, + props: T, + ) where + T: Send + Sync + 'static, + { + connect(ws, self.pool.clone(), app, props).await; + } } -fn transform_rx(message: Result) -> Result { - let as_bytes = message.map_err(|_| LiveViewError::SendingFailed)?; +pub async fn connect( + ws: WebSocket, + pool: LocalPoolHandle, + app: fn(Scope) -> Element, + props: T, +) where + T: Send + Sync + 'static, +{ + // Use a counter to assign a new unique ID for this user. - let msg = String::from_utf8(as_bytes.into_bytes()).map_err(|_| LiveViewError::SendingFailed)?; + // Split the socket into a sender and receive of messages. + let (mut user_ws_tx, mut user_ws_rx) = ws.split(); - Ok(msg) -} + let (event_tx, event_rx) = mpsc::unbounded_channel(); + let (edits_tx, edits_rx) = mpsc::unbounded_channel(); -async fn transform_tx(message: String) -> Result { - Ok(Message::text(message)) + let mut edits_rx = UnboundedReceiverStream::new(edits_rx); + let mut event_rx = UnboundedReceiverStream::new(event_rx); + + let vdom_fut = pool.spawn_pinned(move || async move { + let mut vdom = VirtualDom::new_with_props(app, props); + + let edits = vdom.rebuild(); + + let serialized = serde_json::to_string(&edits.edits).unwrap(); + edits_tx.send(serialized).unwrap(); + + loop { + use futures_util::future::{select, Either}; + + let new_event = { + let vdom_fut = vdom.wait_for_work(); + + pin_mut!(vdom_fut); + + match select(event_rx.next(), vdom_fut).await { + Either::Left((l, _)) => l, + Either::Right((_, _)) => None, + } + }; + + if let Some(new_event) = new_event { + vdom.handle_message(dioxus_core::SchedulerMsg::Event(new_event)); + } else { + let mutations = vdom.work_with_deadline(|| false); + for mutation in mutations { + let edits = serde_json::to_string(&mutation.edits).unwrap(); + edits_tx.send(edits).unwrap(); + } + } + } + }); + + loop { + use futures_util::future::{select, Either}; + + match select(user_ws_rx.next(), edits_rx.next()).await { + Either::Left((l, _)) => { + if let Some(Ok(msg)) = l { + if let Ok(Some(msg)) = msg.to_str().map(events::parse_ipc_message) { + if msg.method == "user_event" { + let user_event = events::trigger_from_serialized(msg.params); + event_tx.send(user_event).unwrap(); + } + } else { + break; + } + } else { + break; + } + } + Either::Right((edits, _)) => { + if let Some(edits) = edits { + // send the edits to the client + if user_ws_tx.send(Message::text(edits)).await.is_err() { + break; + } + } else { + break; + } + } + } + } + + vdom_fut.abort(); } diff --git a/packages/liveview/src/adapters/warp_adapter.rs b/packages/liveview/src/adapters/warp_adapter.rs index e5c821ce3..398c7cdd9 100644 --- a/packages/liveview/src/adapters/warp_adapter.rs +++ b/packages/liveview/src/adapters/warp_adapter.rs @@ -1,28 +1,110 @@ -use crate::{LiveViewError, LiveViewSocket}; -use futures_util::{SinkExt, StreamExt}; +use crate::events; +use dioxus_core::prelude::*; +use futures_util::{pin_mut, SinkExt, StreamExt}; +use tokio::sync::mpsc; +use tokio_stream::wrappers::UnboundedReceiverStream; +use tokio_util::task::LocalPoolHandle; use warp::ws::{Message, WebSocket}; -/// Convert a warp websocket into a LiveViewSocket -/// -/// This is required to launch a LiveView app using the warp web framework -pub fn warp_socket(ws: WebSocket) -> impl LiveViewSocket { - ws.map(transform_rx) - .with(transform_tx) - .sink_map_err(|_| LiveViewError::SendingFailed) +impl crate::Liveview { + pub async fn upgrade_warp(&self, ws: warp::ws::WebSocket, app: fn(Scope) -> Element) { + connect(ws, self.pool.clone(), app, ()).await; + } + pub async fn upgrade_warp_with_props( + &self, + ws: warp::ws::WebSocket, + app: fn(Scope) -> Element, + props: T, + ) where + T: Send + Sync + 'static, + { + connect(ws, self.pool.clone(), app, props).await; + } } -fn transform_rx(message: Result) -> Result { - // destructure the message into the buffer we got from warp - let msg = message - .map_err(|_| LiveViewError::SendingFailed)? - .into_bytes(); +pub async fn connect( + ws: WebSocket, + pool: LocalPoolHandle, + app: fn(Scope) -> Element, + props: T, +) where + T: Send + Sync + 'static, +{ + // Use a counter to assign a new unique ID for this user. - // transform it back into a string, saving us the allocation - let msg = String::from_utf8(msg).map_err(|_| LiveViewError::SendingFailed)?; + // Split the socket into a sender and receive of messages. + let (mut user_ws_tx, mut user_ws_rx) = ws.split(); - Ok(msg) -} + let (event_tx, event_rx) = mpsc::unbounded_channel(); + let (edits_tx, edits_rx) = mpsc::unbounded_channel(); -async fn transform_tx(message: String) -> Result { - Ok(Message::text(message)) + let mut edits_rx = UnboundedReceiverStream::new(edits_rx); + let mut event_rx = UnboundedReceiverStream::new(event_rx); + + let vdom_fut = pool.spawn_pinned(move || async move { + let mut vdom = VirtualDom::new_with_props(app, props); + + let edits = vdom.rebuild(); + + let serialized = serde_json::to_string(&edits.edits).unwrap(); + edits_tx.send(serialized).unwrap(); + + loop { + use futures_util::future::{select, Either}; + + let new_event = { + let vdom_fut = vdom.wait_for_work(); + + pin_mut!(vdom_fut); + + match select(event_rx.next(), vdom_fut).await { + Either::Left((l, _)) => l, + Either::Right((_, _)) => None, + } + }; + + if let Some(new_event) = new_event { + vdom.handle_message(dioxus_core::SchedulerMsg::Event(new_event)); + } else { + let mutations = vdom.work_with_deadline(|| false); + for mutation in mutations { + let edits = serde_json::to_string(&mutation.edits).unwrap(); + edits_tx.send(edits).unwrap(); + } + } + } + }); + + loop { + use futures_util::future::{select, Either}; + + match select(user_ws_rx.next(), edits_rx.next()).await { + Either::Left((l, _)) => { + if let Some(Ok(msg)) = l { + if let Ok(Some(msg)) = msg.to_str().map(events::parse_ipc_message) { + if msg.method == "user_event" { + let user_event = events::trigger_from_serialized(msg.params); + event_tx.send(user_event).unwrap(); + } + } else { + break; + } + } else { + break; + } + } + Either::Right((edits, _)) => { + if let Some(edits) = edits { + // send the edits to the client + if user_ws_tx.send(Message::text(edits)).await.is_err() { + break; + } + } else { + break; + } + } + } + } + + vdom_fut.abort(); } diff --git a/packages/liveview/src/events.rs b/packages/liveview/src/events.rs new file mode 100644 index 000000000..2c5f97cc7 --- /dev/null +++ b/packages/liveview/src/events.rs @@ -0,0 +1,207 @@ +#![allow(dead_code)] + +//! Convert a serialized event to an event trigger + +use std::any::Any; +use std::sync::Arc; + +use dioxus_core::ElementId; +// use dioxus_html::event_bubbles; +use dioxus_html::events::*; + +#[derive(serde::Serialize, serde::Deserialize)] +pub(crate) struct IpcMessage { + pub method: String, + pub params: serde_json::Value, +} + +pub(crate) fn parse_ipc_message(payload: &str) -> Option { + match serde_json::from_str(payload) { + Ok(message) => Some(message), + Err(_) => None, + } +} + +#[derive(serde::Serialize, serde::Deserialize)] +struct ImEvent { + event: String, + mounted_dom_id: ElementId, + contents: serde_json::Value, +} + +pub fn trigger_from_serialized(_val: serde_json::Value) { + todo!() + // let ImEvent { + // event, + // mounted_dom_id, + // contents, + // } = serde_json::from_value(val).unwrap(); + + // let mounted_dom_id = Some(mounted_dom_id); + + // let name = event_name_from_type(&event); + // let event = make_synthetic_event(&event, contents); + + // UserEvent { + // name, + // scope_id: None, + // element: mounted_dom_id, + // data: event, + // bubbles: event_bubbles(name), + // } +} + +fn make_synthetic_event(name: &str, val: serde_json::Value) -> Arc { + match name { + "copy" | "cut" | "paste" => { + // + Arc::new(ClipboardData {}) + } + "compositionend" | "compositionstart" | "compositionupdate" => { + Arc::new(serde_json::from_value::(val).unwrap()) + } + "keydown" | "keypress" | "keyup" => { + let evt = serde_json::from_value::(val).unwrap(); + Arc::new(evt) + } + "focus" | "blur" | "focusout" | "focusin" => { + // + Arc::new(FocusData {}) + } + + // todo: these handlers might get really slow if the input box gets large and allocation pressure is heavy + // don't have a good solution with the serialized event problem + "change" | "input" | "invalid" | "reset" | "submit" => { + Arc::new(serde_json::from_value::(val).unwrap()) + } + + "click" | "contextmenu" | "doubleclick" | "drag" | "dragend" | "dragenter" | "dragexit" + | "dragleave" | "dragover" | "dragstart" | "drop" | "mousedown" | "mouseenter" + | "mouseleave" | "mousemove" | "mouseout" | "mouseover" | "mouseup" => { + Arc::new(serde_json::from_value::(val).unwrap()) + } + "pointerdown" | "pointermove" | "pointerup" | "pointercancel" | "gotpointercapture" + | "lostpointercapture" | "pointerenter" | "pointerleave" | "pointerover" | "pointerout" => { + Arc::new(serde_json::from_value::(val).unwrap()) + } + "select" => { + // + Arc::new(serde_json::from_value::(val).unwrap()) + } + + "touchcancel" | "touchend" | "touchmove" | "touchstart" => { + Arc::new(serde_json::from_value::(val).unwrap()) + } + + "scroll" => Arc::new(()), + + "wheel" => Arc::new(serde_json::from_value::(val).unwrap()), + + "animationstart" | "animationend" | "animationiteration" => { + Arc::new(serde_json::from_value::(val).unwrap()) + } + + "transitionend" => Arc::new(serde_json::from_value::(val).unwrap()), + + "abort" | "canplay" | "canplaythrough" | "durationchange" | "emptied" | "encrypted" + | "ended" | "error" | "loadeddata" | "loadedmetadata" | "loadstart" | "pause" | "play" + | "playing" | "progress" | "ratechange" | "seeked" | "seeking" | "stalled" | "suspend" + | "timeupdate" | "volumechange" | "waiting" => { + // + Arc::new(MediaData {}) + } + + "toggle" => Arc::new(ToggleData {}), + + _ => Arc::new(()), + } +} + +fn event_name_from_type(typ: &str) -> &'static str { + match typ { + "copy" => "copy", + "cut" => "cut", + "paste" => "paste", + "compositionend" => "compositionend", + "compositionstart" => "compositionstart", + "compositionupdate" => "compositionupdate", + "keydown" => "keydown", + "keypress" => "keypress", + "keyup" => "keyup", + "focus" => "focus", + "focusout" => "focusout", + "focusin" => "focusin", + "blur" => "blur", + "change" => "change", + "input" => "input", + "invalid" => "invalid", + "reset" => "reset", + "submit" => "submit", + "click" => "click", + "contextmenu" => "contextmenu", + "doubleclick" => "doubleclick", + "drag" => "drag", + "dragend" => "dragend", + "dragenter" => "dragenter", + "dragexit" => "dragexit", + "dragleave" => "dragleave", + "dragover" => "dragover", + "dragstart" => "dragstart", + "drop" => "drop", + "mousedown" => "mousedown", + "mouseenter" => "mouseenter", + "mouseleave" => "mouseleave", + "mousemove" => "mousemove", + "mouseout" => "mouseout", + "mouseover" => "mouseover", + "mouseup" => "mouseup", + "pointerdown" => "pointerdown", + "pointermove" => "pointermove", + "pointerup" => "pointerup", + "pointercancel" => "pointercancel", + "gotpointercapture" => "gotpointercapture", + "lostpointercapture" => "lostpointercapture", + "pointerenter" => "pointerenter", + "pointerleave" => "pointerleave", + "pointerover" => "pointerover", + "pointerout" => "pointerout", + "select" => "select", + "touchcancel" => "touchcancel", + "touchend" => "touchend", + "touchmove" => "touchmove", + "touchstart" => "touchstart", + "scroll" => "scroll", + "wheel" => "wheel", + "animationstart" => "animationstart", + "animationend" => "animationend", + "animationiteration" => "animationiteration", + "transitionend" => "transitionend", + "abort" => "abort", + "canplay" => "canplay", + "canplaythrough" => "canplaythrough", + "durationchange" => "durationchange", + "emptied" => "emptied", + "encrypted" => "encrypted", + "ended" => "ended", + "error" => "error", + "loadeddata" => "loadeddata", + "loadedmetadata" => "loadedmetadata", + "loadstart" => "loadstart", + "pause" => "pause", + "play" => "play", + "playing" => "playing", + "progress" => "progress", + "ratechange" => "ratechange", + "seeked" => "seeked", + "seeking" => "seeking", + "stalled" => "stalled", + "suspend" => "suspend", + "timeupdate" => "timeupdate", + "volumechange" => "volumechange", + "waiting" => "waiting", + "toggle" => "toggle", + _ => { + panic!("unsupported event type") + } + } +} diff --git a/packages/liveview/src/index.html b/packages/liveview/src/index.html new file mode 100644 index 000000000..292a1ae6a --- /dev/null +++ b/packages/liveview/src/index.html @@ -0,0 +1,15 @@ + + + + Dioxus app + + + +
+ + + diff --git a/packages/liveview/src/interpreter.js b/packages/liveview/src/interpreter.js new file mode 100644 index 000000000..7e99745f2 --- /dev/null +++ b/packages/liveview/src/interpreter.js @@ -0,0 +1,973 @@ +function main() { + let root = window.document.getElementById("main"); + + if (root != null) { + // create a new ipc + window.ipc = new IPC(root); + + window.ipc.send(serializeIpcMessage("initialize")); + } +} + +class IPC { + constructor(root) { + // connect to the websocket + window.interpreter = new Interpreter(root); + + this.ws = new WebSocket(WS_ADDR); + + this.ws.onopen = () => { + console.log("Connected to the websocket"); + }; + + this.ws.onerror = (err) => { + console.error("Error: ", err); + }; + + this.ws.onmessage = (event) => { + let edits = JSON.parse(event.data); + window.interpreter.handleEdits(edits); + }; + } + + send(msg) { + this.ws.send(msg); + } +} + +class ListenerMap { + constructor(root) { + // bubbling events can listen at the root element + this.global = {}; + // non bubbling events listen at the element the listener was created at + this.local = {}; + this.root = root; + } + + create(event_name, element, handler, bubbles) { + if (bubbles) { + if (this.global[event_name] === undefined) { + this.global[event_name] = {}; + this.global[event_name].active = 1; + this.global[event_name].callback = handler; + this.root.addEventListener(event_name, handler); + } else { + this.global[event_name].active++; + } + } + else { + const id = element.getAttribute("data-dioxus-id"); + if (!this.local[id]) { + this.local[id] = {}; + } + this.local[id][event_name] = handler; + element.addEventListener(event_name, handler); + } + } + + remove(element, event_name, bubbles) { + if (bubbles) { + this.global[event_name].active--; + if (this.global[event_name].active === 0) { + this.root.removeEventListener(event_name, this.global[event_name].callback); + delete this.global[event_name]; + } + } + else { + const id = element.getAttribute("data-dioxus-id"); + delete this.local[id][event_name]; + if (this.local[id].length === 0) { + delete this.local[id]; + } + element.removeEventListener(event_name, handler); + } + } +} + +class Interpreter { + constructor(root) { + this.root = root; + this.lastNode = root; + this.listeners = new ListenerMap(root); + this.handlers = {}; + this.nodes = [root]; + this.parents = []; + } + checkAppendParent() { + if (this.parents.length > 0) { + const lastParent = this.parents[this.parents.length - 1]; + lastParent[1]--; + if (lastParent[1] === 0) { + this.parents.pop(); + } + lastParent[0].appendChild(this.lastNode); + } + } + AppendChildren(root, children) { + let node; + if (root == null) { + node = this.lastNode; + } else { + node = this.nodes[root]; + } + for (let i = 0; i < children.length; i++) { + node.appendChild(this.nodes[children[i]]); + } + } + ReplaceWith(root, nodes) { + let node; + if (root == null) { + node = this.lastNode; + } else { + node = this.nodes[root]; + } + let els = []; + for (let i = 0; i < nodes.length; i++) { + els.push(this.nodes[nodes[i]]) + } + node.replaceWith(...els); + } + InsertAfter(root, nodes) { + let node; + if (root == null) { + node = this.lastNode; + } else { + node = this.nodes[root]; + } + let els = []; + for (let i = 0; i < nodes.length; i++) { + els.push(this.nodes[nodes[i]]) + } + node.after(...els); + } + InsertBefore(root, nodes) { + let node; + if (root == null) { + node = this.lastNode; + } else { + node = this.nodes[root]; + } + let els = []; + for (let i = 0; i < nodes.length; i++) { + els.push(this.nodes[nodes[i]]) + } + node.before(...els); + } + Remove(root) { + let node; + if (root == null) { + node = this.lastNode; + } else { + node = this.nodes[root]; + } + if (node !== undefined) { + node.remove(); + } + } + CreateTextNode(text, root) { + this.lastNode = document.createTextNode(text); + this.checkAppendParent(); + if (root != null) { + this.nodes[root] = this.lastNode; + } + } + CreateElement(tag, root, children) { + this.lastNode = document.createElement(tag); + this.checkAppendParent(); + if (root != null) { + this.nodes[root] = this.lastNode; + } + if (children > 0) { + this.parents.push([this.lastNode, children]); + } + } + CreateElementNs(tag, root, ns, children) { + this.lastNode = document.createElementNS(ns, tag); + this.checkAppendParent(); + if (root != null) { + this.nodes[root] = this.lastNode; + } + if (children > 0) { + this.parents.push([this.lastNode, children]); + } + } + CreatePlaceholder(root) { + this.lastNode = document.createElement("pre"); + this.lastNode.hidden = true; + this.checkAppendParent(); + if (root != null) { + this.nodes[root] = this.lastNode; + } + } + NewEventListener(event_name, root, handler, bubbles) { + let node; + if (root == null) { + node = this.lastNode; + } else { + node = this.nodes[root]; + } + node.setAttribute("data-dioxus-id", `${root}`); + this.listeners.create(event_name, node, handler, bubbles); + } + RemoveEventListener(root, event_name, bubbles) { + let node; + if (root == null) { + node = this.lastNode; + } else { + node = this.nodes[root]; + } + node.removeAttribute(`data-dioxus-id`); + this.listeners.remove(node, event_name, bubbles); + } + SetText(root, text) { + let node; + if (root == null) { + node = this.lastNode; + } else { + node = this.nodes[root]; + } + node.data = text; + } + SetAttribute(root, field, value, ns) { + const name = field; + let node; + if (root == null) { + node = this.lastNode; + } else { + node = this.nodes[root]; + } + if (ns === "style") { + // @ts-ignore + node.style[name] = value; + } else if (ns != null || ns != undefined) { + node.setAttributeNS(ns, name, value); + } else { + switch (name) { + case "value": + if (value !== node.value) { + node.value = value; + } + break; + case "checked": + node.checked = value === "true"; + break; + case "selected": + node.selected = value === "true"; + break; + case "dangerous_inner_html": + node.innerHTML = value; + break; + default: + // https://github.com/facebook/react/blob/8b88ac2592c5f555f315f9440cbb665dd1e7457a/packages/react-dom/src/shared/DOMProperty.js#L352-L364 + if (value === "false" && bool_attrs.hasOwnProperty(name)) { + node.removeAttribute(name); + } else { + node.setAttribute(name, value); + } + } + } + } + RemoveAttribute(root, field, ns) { + const name = field; + let node; + if (root == null) { + node = this.lastNode; + } else { + node = this.nodes[root]; + } + if (ns == "style") { + node.style.removeProperty(name); + } else if (ns !== null || ns !== undefined) { + node.removeAttributeNS(ns, name); + } else if (name === "value") { + node.value = ""; + } else if (name === "checked") { + node.checked = false; + } else if (name === "selected") { + node.selected = false; + } else if (name === "dangerous_inner_html") { + node.innerHTML = ""; + } else { + node.removeAttribute(name); + } + } + CloneNode(old, new_id) { + let node; + if (old === null) { + node = this.lastNode; + } else { + node = this.nodes[old]; + } + this.nodes[new_id] = node.cloneNode(true); + } + CloneNodeChildren(old, new_ids) { + let node; + if (old === null) { + node = this.lastNode; + } else { + node = this.nodes[old]; + } + const old_node = node.cloneNode(true); + let i = 0; + for (let node = old_node.firstChild; i < new_ids.length; node = node.nextSibling) { + this.nodes[new_ids[i++]] = node; + } + } + FirstChild() { + this.lastNode = this.lastNode.firstChild; + } + NextSibling() { + this.lastNode = this.lastNode.nextSibling; + } + ParentNode() { + this.lastNode = this.lastNode.parentNode; + } + StoreWithId(id) { + this.nodes[id] = this.lastNode; + } + SetLastNode(root) { + this.lastNode = this.nodes[root]; + } + handleEdits(edits) { + for (let edit of edits) { + this.handleEdit(edit); + } + } + handleEdit(edit) { + switch (edit.type) { + case "PushRoot": + this.PushRoot(edit.root); + break; + case "AppendChildren": + this.AppendChildren(edit.root, edit.children); + break; + case "ReplaceWith": + this.ReplaceWith(edit.root, edit.nodes); + break; + case "InsertAfter": + this.InsertAfter(edit.root, edit.nodes); + break; + case "InsertBefore": + this.InsertBefore(edit.root, edit.nodes); + break; + case "Remove": + this.Remove(edit.root); + break; + case "CreateTextNode": + this.CreateTextNode(edit.text, edit.root); + break; + case "CreateElement": + this.CreateElement(edit.tag, edit.root, edit.children); + break; + case "CreateElementNs": + this.CreateElementNs(edit.tag, edit.root, edit.ns, edit.children); + break; + case "CreatePlaceholder": + this.CreatePlaceholder(edit.root); + break; + case "RemoveEventListener": + this.RemoveEventListener(edit.root, edit.event_name); + break; + case "NewEventListener": + // this handler is only provided on desktop implementations since this + // method is not used by the web implementation + let handler = (event) => { + let target = event.target; + if (target != null) { + let realId = target.getAttribute(`data-dioxus-id`); + let shouldPreventDefault = target.getAttribute( + `dioxus-prevent-default` + ); + + if (event.type === "click") { + // todo call prevent default if it's the right type of event + if (shouldPreventDefault !== `onclick`) { + if (target.tagName === "A") { + event.preventDefault(); + const href = target.getAttribute("href"); + if (href !== "" && href !== null && href !== undefined) { + window.ipc.postMessage( + serializeIpcMessage("browser_open", { href }) + ); + } + } + } + + // also prevent buttons from submitting + if (target.tagName === "BUTTON" && event.type == "submit") { + event.preventDefault(); + } + } + // walk the tree to find the real element + while (realId == null) { + // we've reached the root we don't want to send an event + if (target.parentElement === null) { + return; + } + + target = target.parentElement; + realId = target.getAttribute(`data-dioxus-id`); + } + + shouldPreventDefault = target.getAttribute( + `dioxus-prevent-default` + ); + + let contents = serialize_event(event); + + if (shouldPreventDefault === `on${event.type}`) { + event.preventDefault(); + } + + if (event.type === "submit") { + event.preventDefault(); + } + + if ( + target.tagName === "FORM" && + (event.type === "submit" || event.type === "input") + ) { + for (let x = 0; x < target.elements.length; x++) { + let element = target.elements[x]; + let name = element.getAttribute("name"); + if (name != null) { + if (element.getAttribute("type") === "checkbox") { + // @ts-ignore + contents.values[name] = element.checked ? "true" : "false"; + } else if (element.getAttribute("type") === "radio") { + if (element.checked) { + contents.values[name] = element.value; + } + } else { + // @ts-ignore + contents.values[name] = + element.value ?? element.textContent; + } + } + } + } + + if (realId === null) { + return; + } + realId = parseInt(realId); + window.ipc.send( + serializeIpcMessage("user_event", { + event: edit.event_name, + mounted_dom_id: realId, + contents: contents, + }) + ); + } + }; + this.NewEventListener(edit.event_name, edit.root, handler, event_bubbles(edit.event_name)); + + break; + case "SetText": + this.SetText(edit.root, edit.text); + break; + case "SetAttribute": + this.SetAttribute(edit.root, edit.field, edit.value, edit.ns); + break; + case "RemoveAttribute": + this.RemoveAttribute(edit.root, edit.name, edit.ns); + break; + case "CloneNode": + this.CloneNode(edit.id, edit.new_id); + break; + case "CloneNodeChildren": + this.CloneNodeChildren(edit.id, edit.new_ids); + break; + case "FirstChild": + this.FirstChild(); + break; + case "NextSibling": + this.NextSibling(); + break; + case "ParentNode": + this.ParentNode(); + break; + case "StoreWithId": + this.StoreWithId(BigInt(edit.id)); + break; + case "SetLastNode": + this.SetLastNode(BigInt(edit.id)); + break; + } + } +} + +function serialize_event(event) { + switch (event.type) { + case "copy": + case "cut": + case "past": { + return {}; + } + case "compositionend": + case "compositionstart": + case "compositionupdate": { + let { data } = event; + return { + data, + }; + } + case "keydown": + case "keypress": + case "keyup": { + let { + charCode, + key, + altKey, + ctrlKey, + metaKey, + keyCode, + shiftKey, + location, + repeat, + which, + code, + } = event; + return { + char_code: charCode, + key: key, + alt_key: altKey, + ctrl_key: ctrlKey, + meta_key: metaKey, + key_code: keyCode, + shift_key: shiftKey, + location: location, + repeat: repeat, + which: which, + code, + }; + } + case "focus": + case "blur": { + return {}; + } + case "change": { + let target = event.target; + let value; + if (target.type === "checkbox" || target.type === "radio") { + value = target.checked ? "true" : "false"; + } else { + value = target.value ?? target.textContent; + } + return { + value: value, + values: {}, + }; + } + case "input": + case "invalid": + case "reset": + case "submit": { + let target = event.target; + let value = target.value ?? target.textContent; + + if (target.type === "checkbox") { + value = target.checked ? "true" : "false"; + } + + return { + value: value, + values: {}, + }; + } + case "click": + case "contextmenu": + case "doubleclick": + case "dblclick": + case "drag": + case "dragend": + case "dragenter": + case "dragexit": + case "dragleave": + case "dragover": + case "dragstart": + case "drop": + case "mousedown": + case "mouseenter": + case "mouseleave": + case "mousemove": + case "mouseout": + case "mouseover": + case "mouseup": { + const { + altKey, + button, + buttons, + clientX, + clientY, + ctrlKey, + metaKey, + offsetX, + offsetY, + pageX, + pageY, + screenX, + screenY, + shiftKey, + } = event; + return { + alt_key: altKey, + button: button, + buttons: buttons, + client_x: clientX, + client_y: clientY, + ctrl_key: ctrlKey, + meta_key: metaKey, + offset_x: offsetX, + offset_y: offsetY, + page_x: pageX, + page_y: pageY, + screen_x: screenX, + screen_y: screenY, + shift_key: shiftKey, + }; + } + case "pointerdown": + case "pointermove": + case "pointerup": + case "pointercancel": + case "gotpointercapture": + case "lostpointercapture": + case "pointerenter": + case "pointerleave": + case "pointerover": + case "pointerout": { + const { + altKey, + button, + buttons, + clientX, + clientY, + ctrlKey, + metaKey, + pageX, + pageY, + screenX, + screenY, + shiftKey, + pointerId, + width, + height, + pressure, + tangentialPressure, + tiltX, + tiltY, + twist, + pointerType, + isPrimary, + } = event; + return { + alt_key: altKey, + button: button, + buttons: buttons, + client_x: clientX, + client_y: clientY, + ctrl_key: ctrlKey, + meta_key: metaKey, + page_x: pageX, + page_y: pageY, + screen_x: screenX, + screen_y: screenY, + shift_key: shiftKey, + pointer_id: pointerId, + width: width, + height: height, + pressure: pressure, + tangential_pressure: tangentialPressure, + tilt_x: tiltX, + tilt_y: tiltY, + twist: twist, + pointer_type: pointerType, + is_primary: isPrimary, + }; + } + case "select": { + return {}; + } + case "touchcancel": + case "touchend": + case "touchmove": + case "touchstart": { + const { altKey, ctrlKey, metaKey, shiftKey } = event; + return { + // changed_touches: event.changedTouches, + // target_touches: event.targetTouches, + // touches: event.touches, + alt_key: altKey, + ctrl_key: ctrlKey, + meta_key: metaKey, + shift_key: shiftKey, + }; + } + case "scroll": { + return {}; + } + case "wheel": { + const { deltaX, deltaY, deltaZ, deltaMode } = event; + return { + delta_x: deltaX, + delta_y: deltaY, + delta_z: deltaZ, + delta_mode: deltaMode, + }; + } + case "animationstart": + case "animationend": + case "animationiteration": { + const { animationName, elapsedTime, pseudoElement } = event; + return { + animation_name: animationName, + elapsed_time: elapsedTime, + pseudo_element: pseudoElement, + }; + } + case "transitionend": { + const { propertyName, elapsedTime, pseudoElement } = event; + return { + property_name: propertyName, + elapsed_time: elapsedTime, + pseudo_element: pseudoElement, + }; + } + case "abort": + case "canplay": + case "canplaythrough": + case "durationchange": + case "emptied": + case "encrypted": + case "ended": + case "error": + case "loadeddata": + case "loadedmetadata": + case "loadstart": + case "pause": + case "play": + case "playing": + case "progress": + case "ratechange": + case "seeked": + case "seeking": + case "stalled": + case "suspend": + case "timeupdate": + case "volumechange": + case "waiting": { + return {}; + } + case "toggle": { + return {}; + } + default: { + return {}; + } + } +} +function serializeIpcMessage(method, params = {}) { + return JSON.stringify({ method, params }); +} +const bool_attrs = { + allowfullscreen: true, + allowpaymentrequest: true, + async: true, + autofocus: true, + autoplay: true, + checked: true, + controls: true, + default: true, + defer: true, + disabled: true, + formnovalidate: true, + hidden: true, + ismap: true, + itemscope: true, + loop: true, + multiple: true, + muted: true, + nomodule: true, + novalidate: true, + open: true, + playsinline: true, + readonly: true, + required: true, + reversed: true, + selected: true, + truespeed: true, +}; + +function is_element_node(node) { + return node.nodeType == 1; +} + +function event_bubbles(event) { + switch (event) { + case "copy": + return true; + case "cut": + return true; + case "paste": + return true; + case "compositionend": + return true; + case "compositionstart": + return true; + case "compositionupdate": + return true; + case "keydown": + return true; + case "keypress": + return true; + case "keyup": + return true; + case "focus": + return false; + case "focusout": + return true; + case "focusin": + return true; + case "blur": + return false; + case "change": + return true; + case "input": + return true; + case "invalid": + return true; + case "reset": + return true; + case "submit": + return true; + case "click": + return true; + case "contextmenu": + return true; + case "doubleclick": + return true; + case "dblclick": + return true; + case "drag": + return true; + case "dragend": + return true; + case "dragenter": + return false; + case "dragexit": + return false; + case "dragleave": + return true; + case "dragover": + return true; + case "dragstart": + return true; + case "drop": + return true; + case "mousedown": + return true; + case "mouseenter": + return false; + case "mouseleave": + return false; + case "mousemove": + return true; + case "mouseout": + return true; + case "scroll": + return false; + case "mouseover": + return true; + case "mouseup": + return true; + case "pointerdown": + return true; + case "pointermove": + return true; + case "pointerup": + return true; + case "pointercancel": + return true; + case "gotpointercapture": + return true; + case "lostpointercapture": + return true; + case "pointerenter": + return false; + case "pointerleave": + return false; + case "pointerover": + return true; + case "pointerout": + return true; + case "select": + return true; + case "touchcancel": + return true; + case "touchend": + return true; + case "touchmove": + return true; + case "touchstart": + return true; + case "wheel": + return true; + case "abort": + return false; + case "canplay": + return false; + case "canplaythrough": + return false; + case "durationchange": + return false; + case "emptied": + return false; + case "encrypted": + return true; + case "ended": + return false; + case "error": + return false; + case "loadeddata": + return false; + case "loadedmetadata": + return false; + case "loadstart": + return false; + case "pause": + return false; + case "play": + return false; + case "playing": + return false; + case "progress": + return false; + case "ratechange": + return false; + case "seeked": + return false; + case "seeking": + return false; + case "stalled": + return false; + case "suspend": + return false; + case "timeupdate": + return false; + case "volumechange": + return false; + case "waiting": + return false; + case "animationstart": + return true; + case "animationend": + return true; + case "animationiteration": + return true; + case "transitionend": + return true; + case "toggle": + return true; + } +} \ No newline at end of file diff --git a/packages/liveview/src/lib.rs b/packages/liveview/src/lib.rs index ffddf0272..540d29974 100644 --- a/packages/liveview/src/lib.rs +++ b/packages/liveview/src/lib.rs @@ -1,55 +1,56 @@ +#![allow(dead_code)] + +pub(crate) mod events; pub mod adapters { #[cfg(feature = "warp")] pub mod warp_adapter; - #[cfg(feature = "warp")] - pub use warp_adapter::*; #[cfg(feature = "axum")] pub mod axum_adapter; - #[cfg(feature = "axum")] - pub use axum_adapter::*; #[cfg(feature = "salvo")] pub mod salvo_adapter; - - #[cfg(feature = "salvo")] - pub use salvo_adapter::*; } -pub use adapters::*; +use std::net::SocketAddr; -pub mod pool; -use futures_util::{SinkExt, StreamExt}; -pub use pool::*; +use tokio_util::task::LocalPoolHandle; -pub trait WebsocketTx: SinkExt {} -impl WebsocketTx for T where T: SinkExt {} - -pub trait WebsocketRx: StreamExt> {} -impl WebsocketRx for T where T: StreamExt> {} - -#[derive(Debug, thiserror::Error)] -pub enum LiveViewError { - #[error("warp error")] - SendingFailed, +#[derive(Clone)] +pub struct Liveview { + pool: LocalPoolHandle, + addr: String, } -use dioxus_interpreter_js::INTERPRETER_JS; -static MAIN_JS: &str = include_str!("./main.js"); +impl Liveview { + pub fn body(&self, header: &str) -> String { + format!( + r#" + + + + {header} + + +
+ + +"#, + addr = self.addr, + interpreter = include_str!("../src/interpreter.js") + ) + } +} -/// This script that gets injected into your app connects this page to the websocket endpoint -/// -/// Once the endpoint is connected, it will send the initial state of the app, and then start -/// processing user events and returning edits to the liveview instance -pub fn interpreter_glue(url: &str) -> String { - format!( - r#" - - "# - ) +pub fn new(addr: impl Into) -> Liveview { + let addr: SocketAddr = addr.into(); + + Liveview { + pool: LocalPoolHandle::new(16), + addr: addr.to_string(), + } } diff --git a/packages/liveview/src/main.js b/packages/liveview/src/main.js deleted file mode 100644 index e37ac7b67..000000000 --- a/packages/liveview/src/main.js +++ /dev/null @@ -1,36 +0,0 @@ -function main() { - let root = window.document.getElementById("main"); - - if (root != null) { - // create a new ipc - window.ipc = new IPC(root); - window.ipc.postMessage(serializeIpcMessage("initialize")); - } -} - -class IPC { - constructor(root) { - // connect to the websocket - window.interpreter = new Interpreter(root); - - this.ws = new WebSocket(WS_ADDR); - - this.ws.onopen = () => { - console.log("Connected to the websocket"); - }; - - this.ws.onerror = (err) => { - console.error("Error: ", err); - }; - - this.ws.onmessage = (event) => { - console.log("Received message: ", event.data); - let edits = JSON.parse(event.data); - window.interpreter.handleEdits(edits); - }; - } - - postMessage(msg) { - this.ws.send(msg); - } -} diff --git a/packages/liveview/src/pool.rs b/packages/liveview/src/pool.rs deleted file mode 100644 index c769e1371..000000000 --- a/packages/liveview/src/pool.rs +++ /dev/null @@ -1,123 +0,0 @@ -use crate::LiveViewError; -use dioxus_core::prelude::*; -use dioxus_html::HtmlEvent; -use futures_util::{pin_mut, SinkExt, StreamExt}; -use std::time::Duration; -use tokio_util::task::LocalPoolHandle; - -#[derive(Clone)] -pub struct LiveViewPool { - pub(crate) pool: LocalPoolHandle, -} - -impl Default for LiveViewPool { - fn default() -> Self { - Self::new() - } -} - -impl LiveViewPool { - pub fn new() -> Self { - LiveViewPool { - pool: LocalPoolHandle::new(16), - } - } - - pub async fn launch( - &self, - ws: impl LiveViewSocket, - app: fn(Scope<()>) -> Element, - ) -> Result<(), LiveViewError> { - self.launch_with_props(ws, app, ()).await - } - - pub async fn launch_with_props( - &self, - ws: impl LiveViewSocket, - app: fn(Scope) -> Element, - props: T, - ) -> Result<(), LiveViewError> { - match self.pool.spawn_pinned(move || run(app, props, ws)).await { - Ok(Ok(_)) => Ok(()), - Ok(Err(e)) => Err(e), - Err(_) => Err(LiveViewError::SendingFailed), - } - } -} - -/// A LiveViewSocket is a Sink and Stream of Strings that Dioxus uses to communicate with the client -pub trait LiveViewSocket: - SinkExt - + StreamExt> - + Send - + 'static -{ -} - -impl LiveViewSocket for S where - S: SinkExt - + StreamExt> - + Send - + 'static -{ -} - -/// The primary event loop for the VirtualDom waiting for user input -/// -/// This function makes it easy to integrate Dioxus LiveView with any socket-based framework. -/// -/// As long as your framework can provide a Sink and Stream of Strings, you can use this function. -/// -/// You might need to transform the error types of the web backend into the LiveView error type. -pub async fn run( - app: Component, - props: T, - ws: impl LiveViewSocket, -) -> Result<(), LiveViewError> -where - T: Send + 'static, -{ - let mut vdom = VirtualDom::new_with_props(app, props); - - // todo: use an efficient binary packed format for this - let edits = serde_json::to_string(&vdom.rebuild()).unwrap(); - - // pin the futures so we can use select! - pin_mut!(ws); - - // send the initial render to the client - ws.send(edits).await?; - - // desktop uses this wrapper struct thing around the actual event itself - // this is sorta driven by tao/wry - #[derive(serde::Deserialize)] - struct IpcMessage { - params: HtmlEvent, - } - - loop { - tokio::select! { - // poll any futures or suspense - _ = vdom.wait_for_work() => {} - - evt = ws.next() => { - match evt { - Some(Ok(evt)) => { - if let Ok(IpcMessage { params }) = serde_json::from_str::(&evt) { - vdom.handle_event(¶ms.name, params.data.into_any(), params.element, params.bubbles); - } - } - // log this I guess? when would we get an error here? - Some(Err(_e)) => {}, - None => return Ok(()), - } - } - } - - let edits = vdom - .render_with_deadline(tokio::time::sleep(Duration::from_millis(10))) - .await; - - ws.send(serde_json::to_string(&edits).unwrap()).await?; - } -} diff --git a/packages/tui/src/widgets/button.rs b/packages/tui/src/widgets/button.rs index 845a60c08..f3ebc7901 100644 --- a/packages/tui/src/widgets/button.rs +++ b/packages/tui/src/widgets/button.rs @@ -32,6 +32,7 @@ pub(crate) fn Button<'a>(cx: Scope<'a, ButtonProps>) -> Element<'a> { callback.call(FormData { value: text.to_string(), values: HashMap::new(), + files: None, }); } state.set(new_state); diff --git a/packages/tui/src/widgets/checkbox.rs b/packages/tui/src/widgets/checkbox.rs index 90c7212e9..483117212 100644 --- a/packages/tui/src/widgets/checkbox.rs +++ b/packages/tui/src/widgets/checkbox.rs @@ -56,6 +56,7 @@ pub(crate) fn CheckBox<'a>(cx: Scope<'a, CheckBoxProps>) -> Element<'a> { "on".to_string() }, values: HashMap::new(), + files: None, }); } state.set(new_state); diff --git a/packages/tui/src/widgets/number.rs b/packages/tui/src/widgets/number.rs index 93f9edd94..05cb2d678 100644 --- a/packages/tui/src/widgets/number.rs +++ b/packages/tui/src/widgets/number.rs @@ -84,6 +84,7 @@ pub(crate) fn NumbericInput<'a>(cx: Scope<'a, NumbericInputProps>) -> Element<'a input_handler.call(FormData { value: text, values: HashMap::new(), + files: None, }); } }; diff --git a/packages/tui/src/widgets/password.rs b/packages/tui/src/widgets/password.rs index c881404b3..7f8455d71 100644 --- a/packages/tui/src/widgets/password.rs +++ b/packages/tui/src/widgets/password.rs @@ -84,7 +84,7 @@ pub(crate) fn Password<'a>(cx: Scope<'a, PasswordProps>) -> Element<'a> { }; render! { - div { + div{ width: "{width}", height: "{height}", border_style: "{border}", @@ -99,6 +99,7 @@ pub(crate) fn Password<'a>(cx: Scope<'a, PasswordProps>) -> Element<'a> { input_handler.call(FormData{ value: text.clone(), values: HashMap::new(), + files: None }); } diff --git a/packages/tui/src/widgets/slider.rs b/packages/tui/src/widgets/slider.rs index 257c765d0..43f0ac77e 100644 --- a/packages/tui/src/widgets/slider.rs +++ b/packages/tui/src/widgets/slider.rs @@ -58,6 +58,7 @@ pub(crate) fn Slider<'a>(cx: Scope<'a, SliderProps>) -> Element<'a> { oninput.call(FormData { value, values: HashMap::new(), + files: None, }); } }; diff --git a/packages/tui/src/widgets/textbox.rs b/packages/tui/src/widgets/textbox.rs index ce0ffcc99..8628fca29 100644 --- a/packages/tui/src/widgets/textbox.rs +++ b/packages/tui/src/widgets/textbox.rs @@ -95,6 +95,7 @@ pub(crate) fn TextBox<'a>(cx: Scope<'a, TextBoxProps>) -> Element<'a> { input_handler.call(FormData{ value: text.clone(), values: HashMap::new(), + files: None }); } diff --git a/packages/web/src/dom.rs b/packages/web/src/dom.rs index 5037c4d27..7fa3d202d 100644 --- a/packages/web/src/dom.rs +++ b/packages/web/src/dom.rs @@ -331,7 +331,11 @@ fn read_input_to_data(target: Element) -> Rc { } } - Rc::new(FormData { value, values }) + Rc::new(FormData { + value, + values, + files: None, + }) } fn walk_event_for_id(event: &web_sys::Event) -> Option<(ElementId, web_sys::Element)> {