diff --git a/examples/crm.rs b/examples/crm.rs index 724010177..e99cfe241 100644 --- a/examples/crm.rs +++ b/examples/crm.rs @@ -30,7 +30,7 @@ fn app(cx: Scope) -> Element { integrity: "sha384-Uu6IeWbM+gzNVXJcM9XV3SohHtmWE+3VGi496jvgX1jyvDTXfdK+rfZc8C1Aehk5", crossorigin: "anonymous", } - h1 {"Dioxus CRM Example"} + h1 { "Dioxus CRM Example" } Router { Route { to: "/", div { class: "crm", @@ -40,12 +40,12 @@ fn app(cx: Scope) -> Element { div { class: "client", style: "margin-bottom: 50px", p { "First Name: {client.first_name}" } p { "Last Name: {client.last_name}" } - p {"Description: {client.description}"} + p { "Description: {client.description}" } }) ) } Link { to: "/new", class: "pure-button pure-button-primary", "Add New" } - Link { to: "/new", class: "pure-button", "Settings" } + Link { to: "/settings", class: "pure-button", "Settings" } } } Route { to: "/new", diff --git a/examples/flat_router.rs b/examples/flat_router.rs index 752b58760..4de9e7a7d 100644 --- a/examples/flat_router.rs +++ b/examples/flat_router.rs @@ -7,7 +7,6 @@ fn main() { let cfg = Config::new().with_window( WindowBuilder::new() - .with_title("Spinsense Client") .with_inner_size(LogicalSize::new(600, 1000)) .with_resizable(false), ); @@ -17,21 +16,21 @@ fn main() { fn app(cx: Scope) -> Element { cx.render(rsx! { - Router { - Route { to: "/", "Home" } - Route { to: "/games", "Games" } - Route { to: "/play", "Play" } - Route { to: "/settings", "Settings" } + div { + Router { + Route { to: "/", "Home" } + Route { to: "/games", "Games" } + Route { to: "/play", "Play" } + Route { to: "/settings", "Settings" } - p { - "----" - } - nav { - ul { - Link { to: "/", li { "Home" } } - Link { to: "/games", li { "Games" } } - Link { to: "/play", li { "Play" } } - Link { to: "/settings", li { "Settings" } } + p { "----" } + nav { + ul { + Link { to: "/", li { "Home" } } + Link { to: "/games", li { "Games" } } + Link { to: "/play", li { "Play" } } + Link { to: "/settings", li { "Settings" } } + } } } } diff --git a/packages/core/src/arena.rs b/packages/core/src/arena.rs index 28d182b8f..e876f09e1 100644 --- a/packages/core/src/arena.rs +++ b/packages/core/src/arena.rs @@ -1,4 +1,7 @@ -use crate::{nodes::RenderReturn, nodes::VNode, virtual_dom::VirtualDom, DynamicNode, ScopeId}; +use crate::{ + nodes::RenderReturn, nodes::VNode, virtual_dom::VirtualDom, AttributeValue, DynamicNode, + ScopeId, +}; use bumpalo::boxed::Box as BumpBox; /// An Element's unique identifier. @@ -75,11 +78,18 @@ impl VirtualDom { // Drop a scope and all its children pub(crate) fn drop_scope(&mut self, id: ScopeId) { + self.ensure_drop_safety(id); + if let Some(root) = self.scopes[id.0].as_ref().try_root_node() { if let RenderReturn::Sync(Ok(node)) = unsafe { root.extend_lifetime_ref() } { self.drop_scope_inner(node) } } + if let Some(root) = unsafe { self.scopes[id.0].as_ref().previous_frame().try_load_node() } { + if let RenderReturn::Sync(Ok(node)) = unsafe { root.extend_lifetime_ref() } { + self.drop_scope_inner(node) + } + } self.scopes[id.0].props.take(); @@ -97,8 +107,9 @@ impl VirtualDom { node.dynamic_nodes.iter().for_each(|node| match node { DynamicNode::Component(c) => { if let Some(f) = c.scope.get() { - self.drop_scope(f) + self.drop_scope(f); } + c.props.take(); } DynamicNode::Fragment(nodes) => { nodes.iter().for_each(|node| self.drop_scope_inner(node)) @@ -122,31 +133,27 @@ impl VirtualDom { /// Descend through the tree, removing any borrowed props and listeners pub(crate) fn ensure_drop_safety(&self, scope: ScopeId) { - let node = unsafe { self.scopes[scope.0].previous_frame().try_load_node() }; + let scope = &self.scopes[scope.0]; - // And now we want to make sure the previous frame has dropped anything that borrows self - if let Some(RenderReturn::Sync(Ok(node))) = node { - self.ensure_drop_safety_inner(node); - } - } - - fn ensure_drop_safety_inner(&self, node: &VNode) { - node.clear_listeners(); - - node.dynamic_nodes.iter().for_each(|child| match child { - // Only descend if the props are borrowed - DynamicNode::Component(c) if !c.static_props => { - if let Some(scope) = c.scope.get() { - self.ensure_drop_safety(scope); - } - c.props.take(); + // make sure we drop all borrowed props manually to guarantee that their drop implementation is called before we + // run the hooks (which hold an &mut Reference) + // recursively call ensure_drop_safety on all children + let mut props = scope.borrowed_props.borrow_mut(); + props.drain(..).for_each(|comp| { + let comp = unsafe { &*comp }; + if let Some(scope_id) = comp.scope.get() { + self.ensure_drop_safety(scope_id); } + drop(comp.props.take()); + }); - DynamicNode::Fragment(f) => f - .iter() - .for_each(|node| self.ensure_drop_safety_inner(node)), - - _ => {} + // Now that all the references are gone, we can safely drop our own references in our listeners. + let mut listeners = scope.listeners.borrow_mut(); + listeners.drain(..).for_each(|listener| { + let listener = unsafe { &*listener }; + if let AttributeValue::Listener(l) = &listener.value { + _ = l.take(); + } }); } } diff --git a/packages/core/src/create.rs b/packages/core/src/create.rs index c81841652..fb0eb67fd 100644 --- a/packages/core/src/create.rs +++ b/packages/core/src/create.rs @@ -1,3 +1,4 @@ +use crate::any_props::AnyProps; use crate::innerlude::{VComponent, VPlaceholder, VText}; use crate::mutations::Mutation; use crate::mutations::Mutation::*; @@ -46,7 +47,10 @@ impl<'b> VirtualDom { .iter() .enumerate() .map(|(idx, root)| match root { - DynamicText { id } | Dynamic { id } => self.write_dynamic_root(node, *id), + DynamicText { id } | Dynamic { id } => { + nodes.next().unwrap(); + self.write_dynamic_root(node, *id) + } Element { .. } => self.write_element_root(node, idx, &mut attrs, &mut nodes), Text { .. } => self.write_static_text_root(node, idx), }) @@ -173,12 +177,12 @@ impl<'b> VirtualDom { attribute.mounted_element.set(id); // Safety: we promise not to re-alias this text later on after committing it to the mutation - let unbounded_name = unsafe { std::mem::transmute(attribute.name) }; + let unbounded_name: &str = unsafe { std::mem::transmute(attribute.name) }; match &attribute.value { AttributeValue::Text(value) => { // Safety: we promise not to re-alias this text later on after committing it to the mutation - let unbounded_value = unsafe { std::mem::transmute(*value) }; + let unbounded_value: &str = unsafe { std::mem::transmute(*value) }; self.mutations.push(SetAttribute { name: unbounded_name, @@ -336,7 +340,7 @@ impl<'b> VirtualDom { ) -> usize { let scope = match component.props.take() { Some(props) => { - let unbounded_props = unsafe { std::mem::transmute(props) }; + let unbounded_props: Box = unsafe { std::mem::transmute(props) }; let scope = self.new_scope(unbounded_props, component.name); scope.id } diff --git a/packages/core/src/diff.rs b/packages/core/src/diff.rs index eb48a09bf..75b665178 100644 --- a/packages/core/src/diff.rs +++ b/packages/core/src/diff.rs @@ -1,4 +1,5 @@ use crate::{ + any_props::AnyProps, arena::ElementId, innerlude::{DirtyScope, VComponent, VPlaceholder, VText}, mutations::Mutation, @@ -147,32 +148,6 @@ impl<'b> VirtualDom { } } - fn replace_placeholder(&mut self, l: &'b VPlaceholder, r: &'b [VNode<'b>]) { - let m = self.create_children(r); - let id = l.id.get().unwrap(); - self.mutations.push(Mutation::ReplaceWith { id, m }); - self.reclaim(id); - } - - fn node_to_placeholder(&mut self, l: &'b [VNode<'b>], r: &'b VPlaceholder) { - // Remove the old nodes, except for one - self.remove_nodes(&l[1..]); - - // Now create the new one - let first = self.replace_inner(&l[0]); - - // Create the placeholder first, ensuring we get a dedicated ID for the placeholder - let placeholder = self.next_element(&l[0], &[]); - r.id.set(Some(placeholder)); - self.mutations - .push(Mutation::CreatePlaceholder { id: placeholder }); - - self.mutations - .push(Mutation::ReplaceWith { id: first, m: 1 }); - - self.try_reclaim(first); - } - fn diff_vcomponent( &mut self, left: &'b VComponent<'b>, @@ -192,33 +167,27 @@ impl<'b> VirtualDom { .root_node() .extend_lifetime_ref() }; - let id = match head { - RenderReturn::Sync(Ok(node)) => self.replace_inner(node), + let last = match head { + RenderReturn::Sync(Ok(node)) => self.find_last_element(node), _ => todo!(), }; - self.mutations - .push(Mutation::ReplaceWith { id, m: created }); - self.drop_scope(left.scope.get().unwrap()); + self.mutations.push(Mutation::InsertAfter { + id: last, + m: created, + }); + self.remove_component_node(left, true); return; } // Make sure the new vcomponent has the right scopeid associated to it - let Some(scope_id) = left.scope.get() else { - return; - }; - // let scope_id = left.scope.get().unwrap_or_else(|| { - // panic!( - // "A component should always have a scope associated to it. {:?}\n {:#?}", - // right.name, - // std::backtrace::Backtrace::force_capture() - // ) - // }); + let scope_id = left.scope.get().unwrap(); right.scope.set(Some(scope_id)); // copy out the box for both let old = self.scopes[scope_id.0].props.as_ref(); - let new = right.props.take().unwrap(); + let new: Box = right.props.take().unwrap(); + let new: Box = unsafe { std::mem::transmute(new) }; // If the props are static, then we try to memoize by setting the new with the old // The target scopestate still has the reference to the old props, so there's no need to update anything @@ -228,7 +197,7 @@ impl<'b> VirtualDom { } // First, move over the props from the old to the new, dropping old props in the process - self.scopes[scope_id.0].props = unsafe { std::mem::transmute(new) }; + self.scopes[scope_id.0].props = Some(new); // Now run the component and diff it self.run_scope(scope_id); @@ -279,7 +248,7 @@ impl<'b> VirtualDom { /// ``` fn light_diff_templates(&mut self, left: &'b VNode<'b>, right: &'b VNode<'b>) { match matching_components(left, right) { - None => self.replace(left, right), + None => self.replace(left, [right]), Some(components) => components .into_iter() .enumerate() @@ -304,120 +273,6 @@ impl<'b> VirtualDom { } } - /// Remove all the top-level nodes, returning the firstmost root ElementId - /// - /// All IDs will be garbage collected - fn replace_inner(&mut self, node: &'b VNode<'b>) -> ElementId { - let id = match node.dynamic_root(0) { - None => node.root_ids[0].get().unwrap(), - Some(Text(t)) => t.id.get().unwrap(), - Some(Placeholder(e)) => e.id.get().unwrap(), - Some(Fragment(nodes)) => { - let id = self.replace_inner(&nodes[0]); - self.remove_nodes(&nodes[1..]); - id - } - Some(Component(comp)) => { - let scope = comp.scope.get().unwrap(); - match unsafe { self.scopes[scope.0].root_node().extend_lifetime_ref() } { - RenderReturn::Sync(Ok(t)) => self.replace_inner(t), - _ => todo!("cannot handle nonstandard nodes"), - } - } - }; - - // Just remove the rest from the dom - for (idx, _) in node.template.get().roots.iter().enumerate().skip(1) { - self.remove_root_node(node, idx); - } - - // Garabge collect all of the nodes since this gets used in replace - self.clean_up_node(node); - - id - } - - /// Clean up the node, not generating mutations - /// - /// Simply walks through the dynamic nodes - fn clean_up_node(&mut self, node: &'b VNode<'b>) { - for (idx, dyn_node) in node.dynamic_nodes.iter().enumerate() { - // Roots are cleaned up automatically? - if node.template.get().node_paths[idx].len() == 1 { - continue; - } - - match dyn_node { - Component(comp) => { - if let Some(scope) = comp.scope.take() { - match unsafe { self.scopes[scope.0].root_node().extend_lifetime_ref() } { - RenderReturn::Sync(Ok(t)) => self.clean_up_node(t), - _ => todo!("cannot handle nonstandard nodes"), - }; - } - } - Text(t) => { - if let Some(id) = t.id.take() { - self.reclaim(id) - } - } - Placeholder(t) => { - if let Some(id) = t.id.take() { - self.reclaim(id) - } - } - Fragment(nodes) => nodes.iter().for_each(|node| self.clean_up_node(node)), - }; - } - - // we clean up nodes with dynamic attributes, provided the node is unique and not a root node - let mut id = None; - for (idx, attr) in node.dynamic_attrs.iter().enumerate() { - // We'll clean up the root nodes either way, so don't worry - if node.template.get().attr_paths[idx].len() == 1 { - continue; - } - - let next_id = attr.mounted_element.get(); - - if id == Some(next_id) { - continue; - } - - id = Some(next_id); - - self.reclaim(next_id); - } - } - - fn remove_root_node(&mut self, node: &'b VNode<'b>, idx: usize) { - match node.dynamic_root(idx) { - Some(Text(i)) => { - let id = i.id.take().unwrap(); - self.mutations.push(Mutation::Remove { id }); - self.reclaim(id); - } - Some(Placeholder(e)) => { - let id = e.id.take().unwrap(); - self.mutations.push(Mutation::Remove { id }); - self.reclaim(id); - } - Some(Fragment(nodes)) => self.remove_nodes(nodes), - Some(Component(comp)) => { - let scope = comp.scope.take().unwrap(); - match unsafe { self.scopes[scope.0].root_node().extend_lifetime_ref() } { - RenderReturn::Sync(Ok(t)) => self.remove_node(t), - _ => todo!("cannot handle nonstandard nodes"), - }; - } - None => { - let id = node.root_ids[idx].get().unwrap(); - self.mutations.push(Mutation::Remove { id }); - self.reclaim(id); - } - }; - } - fn diff_non_empty_fragment(&mut self, old: &'b [VNode<'b>], new: &'b [VNode<'b>]) { let new_is_keyed = new[0].key.is_some(); let old_is_keyed = old[0].key.is_some(); @@ -668,7 +523,7 @@ impl<'b> VirtualDom { if shared_keys.is_empty() { if old.get(0).is_some() { self.remove_nodes(&old[1..]); - self.replace_many(&old[0], new); + self.replace(&old[0], new); } else { // I think this is wrong - why are we appending? // only valid of the if there are no trailing elements @@ -684,7 +539,7 @@ impl<'b> VirtualDom { for child in old { let key = child.key.unwrap(); if !shared_keys.contains(&key) { - self.remove_node(child); + self.remove_node(child, true); } } @@ -787,54 +642,6 @@ impl<'b> VirtualDom { } } - /// Remove these nodes from the dom - /// Wont generate mutations for the inner nodes - fn remove_nodes(&mut self, nodes: &'b [VNode<'b>]) { - // note that we iterate in reverse to unlink lists of nodes in their rough index order - nodes.iter().rev().for_each(|node| self.remove_node(node)); - } - - fn remove_node(&mut self, node: &'b VNode<'b>) { - for (idx, _) in node.template.get().roots.iter().enumerate() { - let id = match node.dynamic_root(idx) { - Some(Text(t)) => t.id.take(), - Some(Placeholder(t)) => t.id.take(), - Some(Fragment(t)) => return self.remove_nodes(t), - Some(Component(comp)) => { - comp.scope.set(None); - return self.remove_component(comp.scope.get().unwrap()); - } - None => node.root_ids[idx].get(), - } - .unwrap(); - - self.mutations.push(Mutation::Remove { id }) - } - - self.clean_up_node(node); - - for root in node.root_ids { - let id = root.get().unwrap(); - if id.0 != 0 { - self.reclaim(id); - } - } - } - - fn remove_component(&mut self, scope_id: ScopeId) { - let height = self.scopes[scope_id.0].height; - self.dirty_scopes.remove(&DirtyScope { - height, - id: scope_id, - }); - - // I promise, since we're descending down the tree, this is safe - match unsafe { self.scopes[scope_id.0].root_node().extend_lifetime_ref() } { - RenderReturn::Sync(Ok(t)) => self.remove_node(t), - _ => todo!("cannot handle nonstandard nodes"), - } - } - /// Push all the real nodes on the stack fn push_all_real_nodes(&mut self, node: &'b VNode<'b>) -> usize { node.template @@ -843,44 +650,50 @@ impl<'b> VirtualDom { .iter() .enumerate() .map(|(idx, _)| { - match node.dynamic_root(idx) { - Some(Text(t)) => { + let node = match node.dynamic_root(idx) { + Some(node) => node, + None => { + self.mutations.push(Mutation::PushRoot { + id: node.root_ids[idx].get().unwrap(), + }); + return 1; + } + }; + + match node { + Text(t) => { self.mutations.push(Mutation::PushRoot { id: t.id.get().unwrap(), }); 1 } - Some(Placeholder(t)) => { + Placeholder(t) => { self.mutations.push(Mutation::PushRoot { id: t.id.get().unwrap(), }); 1 } - Some(Fragment(nodes)) => nodes + Fragment(nodes) => nodes .iter() .map(|node| self.push_all_real_nodes(node)) .count(), - Some(Component(comp)) => { + Component(comp) => { let scope = comp.scope.get().unwrap(); match unsafe { self.scopes[scope.0].root_node().extend_lifetime_ref() } { RenderReturn::Sync(Ok(node)) => self.push_all_real_nodes(node), _ => todo!(), } } - None => { - self.mutations.push(Mutation::PushRoot { - id: node.root_ids[idx].get().unwrap(), - }); - 1 - } - }; + } }) .count() } - fn create_children(&mut self, nodes: &'b [VNode<'b>]) -> usize { - nodes.iter().fold(0, |acc, child| acc + self.create(child)) + fn create_children(&mut self, nodes: impl IntoIterator>) -> usize { + nodes + .into_iter() + .fold(0, |acc, child| acc + self.create(child)) } fn create_and_insert_before(&mut self, new: &'b [VNode<'b>], before: &'b VNode<'b>) { @@ -895,6 +708,134 @@ impl<'b> VirtualDom { self.mutations.push(Mutation::InsertAfter { id, m }) } + /// Simply replace a placeholder with a list of nodes + fn replace_placeholder(&mut self, l: &'b VPlaceholder, r: &'b [VNode<'b>]) { + let m = self.create_children(r); + let id = l.id.get().unwrap(); + self.mutations.push(Mutation::ReplaceWith { id, m }); + self.reclaim(id); + } + + fn replace(&mut self, left: &'b VNode<'b>, right: impl IntoIterator>) { + let m = self.create_children(right); + + let id = self.find_last_element(left); + + self.mutations.push(Mutation::InsertAfter { id, m }); + + self.remove_node(left, true); + } + + fn node_to_placeholder(&mut self, l: &'b [VNode<'b>], r: &'b VPlaceholder) { + // Create the placeholder first, ensuring we get a dedicated ID for the placeholder + let placeholder = self.next_element(&l[0], &[]); + + r.id.set(Some(placeholder)); + + let id = self.find_last_element(&l[0]); + + self.mutations + .push(Mutation::CreatePlaceholder { id: placeholder }); + + self.mutations.push(Mutation::InsertAfter { id, m: 1 }); + + self.remove_nodes(l); + } + + /// Remove these nodes from the dom + /// Wont generate mutations for the inner nodes + fn remove_nodes(&mut self, nodes: &'b [VNode<'b>]) { + nodes.iter().for_each(|node| self.remove_node(node, true)); + } + + fn remove_node(&mut self, node: &'b VNode<'b>, gen_muts: bool) { + // Clean up the roots, assuming we need to generate mutations for these + for (idx, _) in node.template.roots.iter().enumerate() { + if let Some(dy) = node.dynamic_root(idx) { + self.remove_dynamic_node(dy, gen_muts); + } else { + let id = node.root_ids[idx].get().unwrap(); + if gen_muts { + self.mutations.push(Mutation::Remove { id }); + } + self.reclaim(id); + } + } + + for (idx, dyn_node) in node.dynamic_nodes.iter().enumerate() { + // Roots are cleaned up automatically above + if node.template.node_paths[idx].len() == 1 { + continue; + } + + self.remove_dynamic_node(dyn_node, false); + } + + // we clean up nodes with dynamic attributes, provided the node is unique and not a root node + let mut id = None; + for (idx, attr) in node.dynamic_attrs.iter().enumerate() { + // We'll clean up the root nodes either way, so don't worry + if node.template.attr_paths[idx].len() == 1 { + continue; + } + + let next_id = attr.mounted_element.get(); + + if id == Some(next_id) { + continue; + } + + id = Some(next_id); + + self.reclaim(next_id); + } + } + + fn remove_dynamic_node(&mut self, node: &DynamicNode, gen_muts: bool) { + match node { + Component(comp) => self.remove_component_node(comp, gen_muts), + Text(t) => self.remove_text_node(t), + Placeholder(t) => self.remove_placeholder(t), + Fragment(nodes) => nodes + .iter() + .for_each(|node| self.remove_node(node, gen_muts)), + }; + } + + fn remove_placeholder(&mut self, t: &VPlaceholder) { + if let Some(id) = t.id.take() { + self.reclaim(id) + } + } + + fn remove_text_node(&mut self, t: &VText) { + if let Some(id) = t.id.take() { + self.reclaim(id) + } + } + + fn remove_component_node(&mut self, comp: &VComponent, gen_muts: bool) { + if let Some(scope) = comp.scope.take() { + match unsafe { self.scopes[scope.0].root_node().extend_lifetime_ref() } { + RenderReturn::Sync(Ok(t)) => self.remove_node(t, gen_muts), + _ => todo!("cannot handle nonstandard nodes"), + }; + + let props = self.scopes[scope.0].props.take(); + + self.dirty_scopes.remove(&DirtyScope { + height: self.scopes[scope.0].height, + id: scope, + }); + + *comp.props.borrow_mut() = unsafe { std::mem::transmute(props) }; + + // make sure to wipe any of its props and listeners + self.ensure_drop_safety(scope); + self.scopes.remove(scope.0); + } + } + fn find_first_element(&self, node: &'b VNode<'b>) -> ElementId { match node.dynamic_root(0) { None => node.root_ids[0].get().unwrap(), @@ -926,28 +867,6 @@ impl<'b> VirtualDom { } } } - - fn replace(&mut self, left: &'b VNode<'b>, right: &'b VNode<'b>) { - let first = self.find_first_element(left); - let id = self.replace_inner(left); - let created = self.create(right); - self.mutations.push(Mutation::ReplaceWith { - id: first, - m: created, - }); - self.try_reclaim(id); - } - - fn replace_many(&mut self, left: &'b VNode<'b>, right: &'b [VNode<'b>]) { - let first = self.find_first_element(left); - let id = self.replace_inner(left); - let created = self.create_children(right); - self.mutations.push(Mutation::ReplaceWith { - id: first, - m: created, - }); - self.try_reclaim(id); - } } /// Are the templates the same? diff --git a/packages/core/src/lazynodes.rs b/packages/core/src/lazynodes.rs index eca7829dc..2b7c4feb3 100644 --- a/packages/core/src/lazynodes.rs +++ b/packages/core/src/lazynodes.rs @@ -25,7 +25,11 @@ use crate::{innerlude::VNode, ScopeState}; /// LazyNodes::new(|f| f.element("div", [], [], [] None)) /// ``` pub struct LazyNodes<'a, 'b> { + #[cfg(not(miri))] inner: SmallBox VNode<'a> + 'b, S16>, + + #[cfg(miri)] + inner: Box VNode<'a> + 'b>, } impl<'a, 'b> LazyNodes<'a, 'b> { @@ -39,10 +43,17 @@ impl<'a, 'b> LazyNodes<'a, 'b> { let mut slot = Some(val); Self { + #[cfg(not(miri))] inner: smallbox!(move |f| { let val = slot.take().expect("cannot call LazyNodes twice"); val(f) }), + + #[cfg(miri)] + inner: Box::new(move |f| { + let val = slot.take().expect("cannot call LazyNodes twice"); + val(f) + }), } } diff --git a/packages/core/src/scheduler/wait.rs b/packages/core/src/scheduler/wait.rs index 2bf6cdfa1..8ae320e70 100644 --- a/packages/core/src/scheduler/wait.rs +++ b/packages/core/src/scheduler/wait.rs @@ -19,7 +19,11 @@ impl VirtualDom { /// queue pub(crate) fn handle_task_wakeup(&mut self, id: TaskId) { let mut tasks = self.scheduler.tasks.borrow_mut(); - let task = &tasks[id.0]; + + let task = match tasks.get(id.0) { + Some(task) => task, + None => return, + }; let waker = task.waker(); let mut cx = Context::from_waker(&waker); diff --git a/packages/core/src/scope_arena.rs b/packages/core/src/scope_arena.rs index db328fd93..9c0f96db3 100644 --- a/packages/core/src/scope_arena.rs +++ b/packages/core/src/scope_arena.rs @@ -32,8 +32,9 @@ impl VirtualDom { parent, id, height, - props: Some(props), name, + props: Some(props), + tasks: self.scheduler.clone(), placeholder: Default::default(), node_arena_1: BumpFrame::new(0), node_arena_2: BumpFrame::new(0), @@ -43,7 +44,8 @@ impl VirtualDom { hook_list: Default::default(), hook_idx: Default::default(), shared_contexts: Default::default(), - tasks: self.scheduler.clone(), + borrowed_props: Default::default(), + listeners: Default::default(), })) } @@ -75,7 +77,7 @@ impl VirtualDom { scope.hook_idx.set(0); // safety: due to how we traverse the tree, we know that the scope is not currently aliased - let props = scope.props.as_ref().unwrap().as_ref(); + let props: &dyn AnyProps = scope.props.as_ref().unwrap().as_ref(); let props: &dyn AnyProps = mem::transmute(props); props.render(scope).extend_lifetime() }; diff --git a/packages/core/src/scopes.rs b/packages/core/src/scopes.rs index 0e487bfa8..14fc8c9e6 100644 --- a/packages/core/src/scopes.rs +++ b/packages/core/src/scopes.rs @@ -87,6 +87,9 @@ pub struct ScopeState { pub(crate) tasks: Rc, pub(crate) spawned_tasks: FxHashSet, + pub(crate) borrowed_props: RefCell>>, + pub(crate) listeners: RefCell>>, + pub(crate) props: Option>>, pub(crate) placeholder: Cell>, } @@ -369,7 +372,25 @@ impl<'src> ScopeState { /// } ///``` pub fn render(&'src self, rsx: LazyNodes<'src, '_>) -> Element<'src> { - Ok(rsx.call(self)) + let element = rsx.call(self); + + let mut listeners = self.listeners.borrow_mut(); + for attr in element.dynamic_attrs { + if let AttributeValue::Listener(_) = attr.value { + let unbounded = unsafe { std::mem::transmute(attr as *const Attribute) }; + listeners.push(unbounded); + } + } + + let mut props = self.borrowed_props.borrow_mut(); + for node in element.dynamic_nodes { + if let DynamicNode::Component(comp) = node { + let unbounded = unsafe { std::mem::transmute(comp as *const VComponent) }; + props.push(unbounded); + } + } + + Ok(element) } /// Create a dynamic text node using [`Arguments`] and the [`ScopeState`]'s internal [`Bump`] allocator diff --git a/packages/core/src/virtual_dom.rs b/packages/core/src/virtual_dom.rs index 3484e0d66..ab12f3155 100644 --- a/packages/core/src/virtual_dom.rs +++ b/packages/core/src/virtual_dom.rs @@ -279,8 +279,10 @@ 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; - self.dirty_scopes.insert(DirtyScope { height, id }); + if let Some(scope) = self.scopes.get(id.0) { + let height = scope.height; + self.dirty_scopes.insert(DirtyScope { height, id }); + } } /// Determine whether or not a scope is currently in a suspended state @@ -565,6 +567,11 @@ impl VirtualDom { if let Some(dirty) = self.dirty_scopes.iter().next().cloned() { self.dirty_scopes.remove(&dirty); + // If the scope doesn't exist for whatever reason, then we should skip it + if !self.scopes.contains(dirty.id.0) { + continue; + } + // if the scope is currently suspended, then we should skip it, ignoring any tasks calling for an update if self.is_scope_suspended(dirty.id) { continue; diff --git a/packages/core/tests/miri_simple.rs b/packages/core/tests/miri_simple.rs index faf783603..6da2c4bf4 100644 --- a/packages/core/tests/miri_simple.rs +++ b/packages/core/tests/miri_simple.rs @@ -62,11 +62,11 @@ fn contexts_drop() { _ = dom.render_immediate(); } -#[tokio::test] -async fn tasks_drop() { +#[test] +fn tasks_drop() { fn app(cx: Scope) -> Element { cx.spawn(async { - tokio::time::sleep(std::time::Duration::from_millis(100000)).await; + // tokio::time::sleep(std::time::Duration::from_millis(100000)).await; }); cx.render(rsx! { diff --git a/packages/desktop/src/controller.rs b/packages/desktop/src/controller.rs index b8b766f93..66b5c2647 100644 --- a/packages/desktop/src/controller.rs +++ b/packages/desktop/src/controller.rs @@ -1,7 +1,8 @@ use crate::desktop_context::{DesktopContext, UserWindowEvent}; -use dioxus_core::*; use dioxus_html::HtmlEvent; use futures_channel::mpsc::{unbounded, UnboundedReceiver, UnboundedSender}; +use crate::events::{decode_event, EventMessage}; +use dioxus_core::*; use futures_util::StreamExt; #[cfg(target_os = "ios")] use objc::runtime::Object; @@ -25,7 +26,8 @@ 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(debug_assertions)] pub(super) templates_tx: UnboundedSender>, @@ -42,7 +44,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 (templates_tx, mut templates_rx) = unbounded(); let proxy2 = proxy.clone(); @@ -83,8 +85,14 @@ impl DesktopController { dom.replace_template(template); } _ = 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 bcc77ac55..455aa0dbe 100644 --- a/packages/desktop/src/events.rs +++ b/packages/desktop/src/events.rs @@ -2,7 +2,7 @@ use serde::{Deserialize, Serialize}; -#[derive(Deserialize, Serialize, Debug)] +#[derive(Deserialize, Serialize)] pub(crate) struct IpcMessage { method: String, params: serde_json::Value, @@ -27,3 +27,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 e14cf9235..c2c53632c 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; @@ -160,7 +159,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(); @@ -194,9 +193,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); @@ -243,16 +240,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 1d785b7f1..db386a6ea 100644 --- a/packages/html/Cargo.toml +++ b/packages/html/Cargo.toml @@ -40,10 +40,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 055b998d3..49e8998a8 100644 --- a/packages/html/src/events/drag.rs +++ b/packages/html/src/events/drag.rs @@ -8,11 +8,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 2382e055e..ee7a678a8 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 7de26becc..0c810cb94 100644 --- a/packages/html/src/lib.rs +++ b/packages/html/src/lib.rs @@ -23,12 +23,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 92de515e4..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 _: 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)> {