Mirrors/dioxus
2
0
Fork 0
mirror of https://github.com/DioxusLabs/dioxus synced 2024-11-26 22:20:19 +00:00
Code Issues Projects Releases Packages Wiki Activity

Merge branch 'upstream' into fix-hot-reloading

Browse source
This commit is contained in:
Evan Almloff 2022-12-19 21:17:22 -06:00
commit 493ee1cb3f
42 changed files with 2012 additions and 931 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
examples/crm.rs
View file

@ -45,7 +45,7 @@ fn app(cx: Scope) -> Element {
)
}
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",

7
examples/flat_router.rs
View file

@ -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,15 +16,14 @@ fn main() {
fn app(cx: Scope) -> Element {
cx.render(rsx! {
div {
Router {
Route { to: "/", "Home" }
Route { to: "/games", "Games" }
Route { to: "/play", "Play" }
Route { to: "/settings", "Settings" }
p {
"----"
}
p { "----" }
nav {
ul {
Link { to: "/", li { "Home" } }
@ -35,5 +33,6 @@ fn app(cx: Scope) -> Element {
}
}
}
}
})
}

55
packages/core/src/arena.rs
View file

@ -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);
// 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());
});
// 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();
}
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();
}
DynamicNode::Fragment(f) => f
.iter()
.for_each(|node| self.ensure_drop_safety_inner(node)),
_ => {}
});
}
}

12
packages/core/src/create.rs
View file

@ -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<dyn AnyProps> = unsafe { std::mem::transmute(props) };
let scope = self.new_scope(unbounded_props, component.name);
scope.id
}

405
packages/core/src/diff.rs
View file

@ -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<dyn AnyProps> = right.props.take().unwrap();
let new: Box<dyn AnyProps> = 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<Item = &'b VNode<'b>>) -> 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<Item = &'b VNode<'b>>) {
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?

11
packages/core/src/lazynodes.rs
View file

@ -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<dyn FnMut(&'a ScopeState) -> VNode<'a> + 'b, S16>,
#[cfg(miri)]
inner: Box<dyn FnMut(&'a ScopeState) -> 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)
}),
}
}

6
packages/core/src/scheduler/wait.rs
View file

@ -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);

8
packages/core/src/scope_arena.rs
View file

@ -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()
};

23
packages/core/src/scopes.rs
View file

@ -87,6 +87,9 @@ pub struct ScopeState {
pub(crate) tasks: Rc<Scheduler>,
pub(crate) spawned_tasks: FxHashSet<TaskId>,
pub(crate) borrowed_props: RefCell<Vec<*const VComponent<'static>>>,
pub(crate) listeners: RefCell<Vec<*const Attribute<'static>>>,
pub(crate) props: Option<Box<dyn AnyProps<'static>>>,
pub(crate) placeholder: Cell<Option<ElementId>>,
}
@ -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

9
packages/core/src/virtual_dom.rs
View file

@ -279,9 +279,11 @@ 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;
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;

6
packages/core/tests/miri_simple.rs
View file

@ -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! {

18
packages/desktop/src/controller.rs
View file

@ -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<AtomicBool>,
pub(super) proxy: EventLoopProxy<UserWindowEvent>,
pub(super) event_tx: UnboundedSender<HtmlEvent>,
pub(super) event_tx: UnboundedSender<serde_json::Value>,
#[cfg(debug_assertions)]
pub(super) templates_tx: UnboundedSender<Template<'static>>,
@ -42,7 +44,7 @@ impl DesktopController {
proxy: EventLoopProxy<UserWindowEvent>,
) -> Self {
let edit_queue = Arc::new(Mutex::new(Vec::new()));
let (event_tx, mut event_rx) = unbounded::<HtmlEvent>();
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::<EventMessage>(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));
}
}
}
}

60
packages/desktop/src/events.rs
View file

@ -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<IpcMessage> {
}
}
}
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<dyn Any>
})*
_ => 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<Rc<dyn Any>> {
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)
}

7
packages/desktop/src/lib.rs
View file

@ -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<AtomicBool>,
proxy: tao::event_loop::EventLoopProxy<UserWindowEvent>,
eval_sender: tokio::sync::mpsc::UnboundedSender<serde_json::Value>,
event_tx: UnboundedSender<HtmlEvent>,
event_tx: UnboundedSender<serde_json::Value>,
) -> 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);

7
packages/desktop/src/main.js
View file

@ -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"));
}
}

9
packages/desktop/src/protocol.rs
View file

@ -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

7
packages/html/Cargo.toml
View file

@ -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"]

5
packages/html/src/events/drag.rs
View file

@ -8,11 +8,12 @@ pub type DragEvent = Event<DragData>;
/// 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<dyn Any>,
}
impl_event! {

5
packages/html/src/events/form.rs
View file

@ -11,8 +11,9 @@ pub struct FormData {
pub value: String,
pub values: HashMap<String, String>,
// #[cfg_attr(feature = "serialize", serde(skip))]
// pub files: Option<Arc<dyn FileEngine>>,
#[cfg_attr(feature = "serialize", serde(skip))]
pub files: Option<Arc<dyn FileEngine>>,
}
impl Debug for FormData {

6
packages/html/src/lib.rs
View file

@ -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::*;

152
packages/html/src/transit.rs
View file

@ -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<dyn Any>
// })*
// _ => 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<dyn Any> {
match self {
EventData::Mouse(data) => Rc::new(data) as Rc<dyn Any>,
EventData::Clipboard(data) => Rc::new(data) as Rc<dyn Any>,
EventData::Composition(data) => Rc::new(data) as Rc<dyn Any>,
EventData::Keyboard(data) => Rc::new(data) as Rc<dyn Any>,
EventData::Focus(data) => Rc::new(data) as Rc<dyn Any>,
EventData::Form(data) => Rc::new(data) as Rc<dyn Any>,
EventData::Drag(data) => Rc::new(data) as Rc<dyn Any>,
EventData::Pointer(data) => Rc::new(data) as Rc<dyn Any>,
EventData::Selection(data) => Rc::new(data) as Rc<dyn Any>,
EventData::Touch(data) => Rc::new(data) as Rc<dyn Any>,
EventData::Scroll(data) => Rc::new(data) as Rc<dyn Any>,
EventData::Wheel(data) => Rc::new(data) as Rc<dyn Any>,
EventData::Media(data) => Rc::new(data) as Rc<dyn Any>,
EventData::Animation(data) => Rc::new(data) as Rc<dyn Any>,
EventData::Transition(data) => Rc::new(data) as Rc<dyn Any>,
EventData::Toggle(data) => Rc::new(data) as Rc<dyn Any>,
}
}
}
#[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<Rc<dyn Any>> {
// 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)
// }

26
packages/interpreter/src/interpreter.js
View file

@ -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":

20
packages/liveview/Cargo.toml
View file

@ -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 = []

49
packages/liveview/examples/axum.rs
View file

@ -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("<title>Dioxus Liveview</title>");
let app = Router::new()
.route("/", get(move || async { Html(body) }))
.route(
"/",
get(move || async move {
Html(format!(
r#"
<!DOCTYPE html>
<html>
<head> <title>Dioxus LiveView with Warp</title> </head>
<body> <div id="main"></div> </body>
{glue}
</html>
"#,
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

66
packages/liveview/examples/salvo.rs
View file

@ -1,55 +1,39 @@
use dioxus::prelude::*;
#[cfg(not(feature = "salvo"))]
fn main() {}
use dioxus_liveview::LiveViewPool;
#[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::*;
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" }
}
})
cx.render(LazyNodes::new(|f| f.text(format_args!("hello world!"))))
}
#[tokio::main]
async fn main() {
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#"
<!DOCTYPE html>
<html>
<head> <title>Dioxus LiveView with Warp</title> </head>
<body> <div id="main"></div> </body>
{glue}
</html>
"#,
glue = dioxus_liveview::interpreter_glue(&format!("ws://{addr}/ws"))
)));
fn index(depot: &mut Depot, res: &mut Response) {
let view = depot.obtain::<Arc<Liveview>>().unwrap();
let body = view.body("<title>Dioxus LiveView</title>");
res.render(Text::Html(body));
}
#[handler]
@ -58,14 +42,14 @@ async fn connect(
depot: &mut Depot,
res: &mut Response,
) -> Result<(), StatusError> {
let view = depot.obtain::<Arc<LiveViewPool>>().unwrap().clone();
let view = depot.obtain::<Arc<Liveview>>().unwrap().clone();
let fut = WsHandler::new().handle(req, res)?;
tokio::spawn(async move {
let fut = async move {
if let Some(ws) = fut.await {
_ = view.launch(dioxus_liveview::salvo_socket(ws), app).await;
view.upgrade_salvo(ws, app).await;
}
});
};
tokio::task::spawn(fut);
Ok(())
}
}

65
packages/liveview/examples/warp.rs
View file

@ -1,56 +1,35 @@
use dioxus::prelude::*;
use dioxus_liveview::adapters::warp_adapter::warp_socket;
use dioxus_liveview::LiveViewPool;
use std::net::SocketAddr;
#[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 {
let mut num = use_state(cx, || 0);
cx.render(rsx! {
div {
"hello warp! {num}"
button {
onclick: move |_| num += 1,
"Increment"
}
}
})
cx.render(LazyNodes::new(|f| f.text(format_args!("hello world!"))))
}
#[tokio::main]
async fn main() {
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#"
<!DOCTYPE html>
<html>
<head> <title>Dioxus LiveView with Warp</title> </head>
<body> <div id="main"></div> </body>
{glue}
</html>
"#,
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("<title>Dioxus LiveView</title>");
let pool = LiveViewPool::new();
let ws = warp::path("ws")
let routes = warp::path::end()
.map(move || warp::reply::html(body.clone()))
.or(warp::path("app")
.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;
.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;
})
});
println!("Listening on http://{}", addr);
warp::serve(index.or(ws)).run(addr).await;
}));
warp::serve(routes).run(addr).await;
}

103
packages/liveview/src/adapters/axum_adapter.rs
View file

@ -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;
}
fn transform_rx(message: Result<Message, axum::Error>) -> Result<String, LiveViewError> {
message
.map_err(|_| LiveViewError::SendingFailed)?
.into_text()
.map_err(|_| LiveViewError::SendingFailed)
pub async fn upgrade_axum_with_props<T>(
&self,
ws: WebSocket,
app: fn(Scope<T>) -> Element,
props: T,
) where
T: Send + Sync + 'static,
{
connect(ws, self.pool.clone(), app, props).await;
}
}
async fn transform_tx(message: String) -> Result<Message, axum::Error> {
Ok(Message::Text(message))
pub async fn connect<T>(
socket: WebSocket,
pool: LocalPoolHandle,
app: fn(Scope<T>) -> 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();
}

117
packages/liveview/src/adapters/salvo_adapter.rs
View file

@ -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<T>(
&self,
ws: salvo::extra::ws::WebSocket,
app: fn(Scope<T>) -> Element,
props: T,
) where
T: Send + Sync + 'static,
{
connect(ws, self.pool.clone(), app, props).await;
}
}
fn transform_rx(message: Result<Message, salvo::Error>) -> Result<String, LiveViewError> {
let as_bytes = message.map_err(|_| LiveViewError::SendingFailed)?;
pub async fn connect<T>(
ws: WebSocket,
pool: LocalPoolHandle,
app: fn(Scope<T>) -> 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();
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;
}
}
}
}
async fn transform_tx(message: String) -> Result<Message, salvo::Error> {
Ok(Message::text(message))
vdom_fut.abort();
}

120
packages/liveview/src/adapters/warp_adapter.rs
View file

@ -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<T>(
&self,
ws: warp::ws::WebSocket,
app: fn(Scope<T>) -> Element,
props: T,
) where
T: Send + Sync + 'static,
{
connect(ws, self.pool.clone(), app, props).await;
}
}
fn transform_rx(message: Result<Message, warp::Error>) -> Result<String, LiveViewError> {
// destructure the message into the buffer we got from warp
let msg = message
.map_err(|_| LiveViewError::SendingFailed)?
.into_bytes();
pub async fn connect<T>(
ws: WebSocket,
pool: LocalPoolHandle,
app: fn(Scope<T>) -> 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();
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;
}
}
}
}
async fn transform_tx(message: String) -> Result<Message, warp::Error> {
Ok(Message::text(message))
vdom_fut.abort();
}

207
packages/liveview/src/events.rs Normal file
View file

@ -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<IpcMessage> {
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<dyn Any> {
match name {
"copy" | "cut" | "paste" => {
//
Arc::new(ClipboardData {})
}
"compositionend" | "compositionstart" | "compositionupdate" => {
Arc::new(serde_json::from_value::<CompositionData>(val).unwrap())
}
"keydown" | "keypress" | "keyup" => {
let evt = serde_json::from_value::<KeyboardData>(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::<FormData>(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::<MouseData>(val).unwrap())
}
"pointerdown" | "pointermove" | "pointerup" | "pointercancel" | "gotpointercapture"
| "lostpointercapture" | "pointerenter" | "pointerleave" | "pointerover" | "pointerout" => {
Arc::new(serde_json::from_value::<PointerData>(val).unwrap())
}
"select" => {
//
Arc::new(serde_json::from_value::<SelectionData>(val).unwrap())
}
"touchcancel" | "touchend" | "touchmove" | "touchstart" => {
Arc::new(serde_json::from_value::<TouchData>(val).unwrap())
}
"scroll" => Arc::new(()),
"wheel" => Arc::new(serde_json::from_value::<WheelData>(val).unwrap()),
"animationstart" | "animationend" | "animationiteration" => {
Arc::new(serde_json::from_value::<AnimationData>(val).unwrap())
}
"transitionend" => Arc::new(serde_json::from_value::<TransitionData>(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")
}
}
}

15
packages/liveview/src/index.html Normal file
View file

@ -0,0 +1,15 @@
<!DOCTYPE html>
<html>
<head>
<title>Dioxus app</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<div id="main"></div>
<script>
import("./index.js").then(function (module) {
module.main();
});
</script>
</body>
</html>

973
packages/liveview/src/interpreter.js Normal file
View file

@ -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;
}
}

67
packages/liveview/src/lib.rs
View file

@ -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<String, Error = LiveViewError> {}
impl<T> WebsocketTx for T where T: SinkExt<String, Error = LiveViewError> {}
pub trait WebsocketRx: StreamExt<Item = Result<String, LiveViewError>> {}
impl<T> WebsocketRx for T where T: StreamExt<Item = Result<String, LiveViewError>> {}
#[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");
/// 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 {
impl Liveview {
pub fn body(&self, header: &str) -> String {
format!(
r#"
<!DOCTYPE html>
<html>
<head>
{header}
</head>
<body>
<div id="main"></div>
<script>
var WS_ADDR = "{url}";
{INTERPRETER_JS}
{MAIN_JS}
var WS_ADDR = "ws://{addr}/app";
{interpreter}
main();
</script>
"#
</body>
</html>"#,
addr = self.addr,
interpreter = include_str!("../src/interpreter.js")
)
}
}
pub fn new(addr: impl Into<SocketAddr>) -> Liveview {
let addr: SocketAddr = addr.into();
Liveview {
pool: LocalPoolHandle::new(16),
addr: addr.to_string(),
}
}

36
packages/liveview/src/main.js
View file

@ -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);
}
}

123
packages/liveview/src/pool.rs
View file

@ -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<T: Send + 'static>(
&self,
ws: impl LiveViewSocket,
app: fn(Scope<T>) -> 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<String, Error = LiveViewError>
+ StreamExt<Item = Result<String, LiveViewError>>
+ Send
+ 'static
{
}
impl<S> LiveViewSocket for S where
S: SinkExt<String, Error = LiveViewError>
+ StreamExt<Item = Result<String, LiveViewError>>
+ 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<T>(
app: Component<T>,
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::<IpcMessage>(&evt) {
vdom.handle_event(&params.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?;
}
}

1
packages/tui/src/widgets/button.rs
View file

@ -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);

1
packages/tui/src/widgets/checkbox.rs
View file

@ -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);

1
packages/tui/src/widgets/number.rs
View file

@ -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,
});
}
};

1
packages/tui/src/widgets/password.rs
View file

@ -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
});
}

1
packages/tui/src/widgets/slider.rs
View file

@ -58,6 +58,7 @@ pub(crate) fn Slider<'a>(cx: Scope<'a, SliderProps>) -> Element<'a> {
oninput.call(FormData {
value,
values: HashMap::new(),
files: None,
});
}
};

1
packages/tui/src/widgets/textbox.rs
View file

@ -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
});
}

6
packages/web/src/dom.rs
View file

@ -331,7 +331,11 @@ fn read_input_to_data(target: Element) -> Rc<FormData> {
}
}
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)> {