Merge branch 'DioxusLabs:master' into tb/makefile_test_setup

Cargo.toml

@@ -22,6 +22,7 @@ dioxus-ssr = { path = "./packages/ssr", version = "^0.1.3", optional = true }
 
 dioxus-router = { path = "./packages/router", version = "^0.1.1", optional = true }
 dioxus-mobile = { path = "./packages/mobile", version = "^0.0.3", optional = true }
+dioxus-interpreter-js = { path = "./packages/interpreter", version = "^0.0.0", optional = true }
 # dioxus-liveview = { path = "./packages/liveview", optional = true }
 
 [features]
@@ -52,6 +53,7 @@ members = [
     "packages/ssr",
     "packages/desktop",
     "packages/mobile",
+    "packages/interpreter",
 ]
 
 [dev-dependencies]

packages/core/src/lib.rs

@@ -12,7 +12,6 @@ pub(crate) mod util;
 pub(crate) mod virtual_dom;
 
 pub(crate) mod innerlude {
-    pub(crate) use crate::diff::*;
     pub use crate::events::*;
     pub use crate::lazynodes::*;
     pub use crate::mutations::*;

packages/core/src/mutations.rs

@@ -143,6 +143,10 @@ impl<'a> Mutations<'a> {
         self.edits.push(InsertBefore { n, root });
     }
 
+    pub(crate) fn append_children(&mut self, n: u32) {
+        self.edits.push(AppendChildren { many: n });
+    }
+
     // Remove Nodes from the dom
     pub(crate) fn remove(&mut self, id: u64) {
         self.edits.push(Remove { root: id });
@@ -217,6 +221,10 @@ impl<'a> Mutations<'a> {
         let name = attribute.name;
         self.edits.push(RemoveAttribute { name, root });
     }
+
+    pub(crate) fn mark_dirty_scope(&mut self, scope: ScopeId) {
+        self.dirty_scopes.insert(scope);
+    }
 }
 
 // refs are only assigned once

packages/core/src/nodes.rs

@@ -147,13 +147,6 @@ impl<'src> VNode<'src> {
         }
     }
 
-    pub(crate) fn children(&self) -> &[VNode<'src>] {
-        match &self {
-            VNode::Fragment(f) => f.children,
-            _ => &[],
-        }
-    }
-
     // Create an "owned" version of the vnode.
     pub fn decouple(&self) -> VNode<'src> {
         match *self {
@@ -175,6 +168,7 @@ impl Debug for VNode<'_> {
                 .field("key", &el.key)
                 .field("attrs", &el.attributes)
                 .field("children", &el.children)
+                .field("id", &el.id)
                 .finish(),
             VNode::Text(t) => write!(s, "VNode::VText {{ text: {} }}", t.text),
             VNode::Placeholder(t) => write!(s, "VNode::VPlaceholder {{ id: {:?} }}", t.id),

packages/core/src/scopes.rs

@@ -13,6 +13,8 @@ use std::{
     rc::Rc,
 };
 
+/// for traceability, we use the raw fn pointer to identify the function
+/// we also get the component name, but that's not necessarily unique in the app
 pub(crate) type ComponentPtr = *mut std::os::raw::c_void;
 
 pub(crate) struct Heuristic {
@@ -94,7 +96,7 @@ impl ScopeArena {
 
         // Get the height of the scope
         let height = parent_scope
-            .map(|id| self.get_scope(id).map(|scope| scope.height))
+            .map(|id| self.get_scope(id).map(|scope| scope.height + 1))
             .flatten()
             .unwrap_or_default();
 
@@ -110,31 +112,62 @@ impl ScopeArena {
         if let Some(old_scope) = self.free_scopes.borrow_mut().pop() {
             // reuse the old scope
             let scope = unsafe { &mut *old_scope };
-            scope.props.get_mut().replace(vcomp);
+
+            scope.container = container;
+            scope.our_arena_idx = new_scope_id;
             scope.parent_scope = parent_scope;
             scope.height = height;
+            scope.fnptr = fc_ptr;
+            scope.props.get_mut().replace(vcomp);
             scope.subtree.set(subtree);
-            scope.our_arena_idx = new_scope_id;
+            scope.frames[0].reset();
-            scope.container = container;
+            scope.frames[1].reset();
+            scope.shared_contexts.get_mut().clear();
+            scope.items.get_mut().listeners.clear();
+            scope.items.get_mut().borrowed_props.clear();
+            scope.hook_idx.set(0);
+            scope.hook_vals.get_mut().clear();
+
             let any_item = self.scopes.borrow_mut().insert(new_scope_id, scope);
             debug_assert!(any_item.is_none());
         } else {
             // else create a new scope
+            let (node_capacity, hook_capacity) = self
+                .heuristics
+                .borrow()
+                .get(&fc_ptr)
+                .map(|h| (h.node_arena_size, h.hook_arena_size))
+                .unwrap_or_default();
+
             self.scopes.borrow_mut().insert(
                 new_scope_id,
-                self.bump.alloc(ScopeState::new(
+                self.bump.alloc(ScopeState {
-                    height,
                     container,
-                    new_scope_id,
+                    our_arena_idx: new_scope_id,
                     parent_scope,
-                    vcomp,
+                    height,
-                    self.tasks.clone(),
+                    fnptr: fc_ptr,
-                    self.heuristics
+                    props: RefCell::new(Some(vcomp)),
-                        .borrow()
+                    frames: [BumpFrame::new(node_capacity), BumpFrame::new(node_capacity)],
-                        .get(&fc_ptr)
+
-                        .map(|h| (h.node_arena_size, h.hook_arena_size))
+                    // todo: subtrees
-                        .unwrap_or_default(),
+                    subtree: Cell::new(0),
-                )),
+                    is_subtree_root: Cell::new(false),
+
+                    generation: 0.into(),
+
+                    tasks: self.tasks.clone(),
+                    shared_contexts: Default::default(),
+
+                    items: RefCell::new(SelfReferentialItems {
+                        listeners: Default::default(),
+                        borrowed_props: Default::default(),
+                    }),
+
+                    hook_arena: Bump::new(),
+                    hook_vals: RefCell::new(Vec::with_capacity(hook_capacity)),
+                    hook_idx: Default::default(),
+                }),
             );
         }
 
@@ -189,8 +222,6 @@ impl ScopeArena {
     /// This also makes sure that drop order is consistent and predictable. All resources that rely on being dropped will
     /// be dropped.
     pub(crate) fn ensure_drop_safety(&self, scope_id: ScopeId) {
-        log::trace!("Ensuring drop safety for scope {:?}", scope_id);
-
         if let Some(scope) = self.get_scope(scope_id) {
             let mut items = scope.items.borrow_mut();
 
@@ -201,7 +232,6 @@ impl ScopeArena {
                 if let Some(scope_id) = comp.scope.get() {
                     self.ensure_drop_safety(scope_id);
                 }
-
                 drop(comp.props.take());
             });
 
@@ -217,18 +247,18 @@ impl ScopeArena {
         // Cycle to the next frame and then reset it
         // This breaks any latent references, invalidating every pointer referencing into it.
         // Remove all the outdated listeners
-        log::trace!("Running scope {:?}", id);
         self.ensure_drop_safety(id);
 
         // todo: we *know* that this is aliased by the contents of the scope itself
         let scope = unsafe { &mut *self.get_scope_raw(id).expect("could not find scope") };
 
+        log::trace!("running scope {:?} symbol: {:?}", id, scope.fnptr);
+
         // Safety:
         // - We dropped the listeners, so no more &mut T can be used while these are held
         // - All children nodes that rely on &mut T are replaced with a new reference
         scope.hook_idx.set(0);
 
-        // book keeping to ensure safety around the borrowed data
         {
             // Safety:
             // - We've dropped all references to the wip bump frame with "ensure_drop_safety"
@@ -241,8 +271,6 @@ impl ScopeArena {
             debug_assert!(items.borrowed_props.is_empty());
         }
 
-        // safety: this is definitely not dropped
-
         /*
         If the component returns None, then we fill in a placeholder node. This will wipe what was there.
         An alternate approach is to leave the Real Dom the same, but that can lead to safety issues and a lot more checks.
@@ -284,14 +312,13 @@ impl ScopeArena {
 
         while let Some(id) = cur_el.take() {
             if let Some(el) = nodes.get(id.0) {
-                log::trace!("Found valid receiver element");
-
                 let real_el = unsafe { &**el };
+                log::debug!("looking for listener on {:?}", real_el);
+
                 if let VNode::Element(real_el) = real_el {
                     for listener in real_el.listeners.borrow().iter() {
                         if listener.event == event.name {
-                            log::trace!("Found valid receiver event");
+                            log::debug!("calling listener {:?}", listener.event);
-
                             if state.canceled.get() {
                                 // stop bubbling if canceled
                                 break;
@@ -421,6 +448,7 @@ pub struct ScopeState {
     pub(crate) container: ElementId,
     pub(crate) our_arena_idx: ScopeId,
     pub(crate) height: u32,
+    pub(crate) fnptr: ComponentPtr,
 
     // todo: subtrees
     pub(crate) is_subtree_root: Cell<bool>,
@@ -449,43 +477,6 @@ pub struct SelfReferentialItems<'a> {
 
 // Public methods exposed to libraries and components
 impl ScopeState {
-    fn new(
-        height: u32,
-        container: ElementId,
-        our_arena_idx: ScopeId,
-        parent_scope: Option<*mut ScopeState>,
-        vcomp: Box<dyn AnyProps>,
-        tasks: Rc<TaskQueue>,
-        (node_capacity, hook_capacity): (usize, usize),
-    ) -> Self {
-        ScopeState {
-            container,
-            our_arena_idx,
-            parent_scope,
-            height,
-            props: RefCell::new(Some(vcomp)),
-            frames: [BumpFrame::new(node_capacity), BumpFrame::new(node_capacity)],
-
-            // todo: subtrees
-            subtree: Cell::new(0),
-            is_subtree_root: Cell::new(false),
-
-            generation: 0.into(),
-
-            tasks,
-            shared_contexts: Default::default(),
-
-            items: RefCell::new(SelfReferentialItems {
-                listeners: Default::default(),
-                borrowed_props: Default::default(),
-            }),
-
-            hook_arena: Bump::new(),
-            hook_vals: RefCell::new(Vec::with_capacity(hook_capacity)),
-            hook_idx: Default::default(),
-        }
-    }
-
     /// Get the subtree ID that this scope belongs to.
     ///
     /// Each component has its own subtree ID - the root subtree has an ID of 0. This ID is used by the renderer to route

packages/core/src/virtual_dom.rs

@@ -2,6 +2,7 @@
 //!
 //! This module provides the primary mechanics to create a hook-based, concurrent VDOM for Rust.
 
+use crate::diff::DiffState;
 use crate::innerlude::*;
 use futures_channel::mpsc::{UnboundedReceiver, UnboundedSender};
 use futures_util::{future::poll_fn, StreamExt};
@@ -448,6 +449,7 @@ impl VirtualDom {
     ///     apply_mutations(mutations);
     /// }
     /// ```
+    #[allow(unused)]
     pub fn work_with_deadline(&mut self, mut deadline: impl FnMut() -> bool) -> Vec<Mutations> {
         let mut committed_mutations = vec![];
 
@@ -467,36 +469,41 @@ impl VirtualDom {
                 h1.cmp(&h2).reverse()
             });
 
+            log::debug!("dirty_scopes: {:?}", self.dirty_scopes);
+
             if let Some(scopeid) = self.dirty_scopes.pop() {
                 if !ran_scopes.contains(&scopeid) {
                     ran_scopes.insert(scopeid);
 
                     self.scopes.run_scope(scopeid);
 
-                    let (old, new) = (self.scopes.wip_head(scopeid), self.scopes.fin_head(scopeid));
+                    diff_state.diff_scope(scopeid);
-                    diff_state.stack.push(DiffInstruction::Diff { new, old });
-                    diff_state.stack.scope_stack.push(scopeid);
 
-                    let scope = scopes.get_scope(scopeid).unwrap();
+                    let DiffState { mutations, .. } = diff_state;
-                    diff_state.stack.element_stack.push(scope.container);
+
+                    log::debug!("succesffuly resolved scopes {:?}", mutations.dirty_scopes);
+                    for scope in &mutations.dirty_scopes {
+                        self.dirty_scopes.remove(scope);
+                    }
+
+                    committed_mutations.push(mutations);
+
+                    // todo: pause the diff machine
+                    // if diff_state.work(&mut deadline) {
+                    //     let DiffState { mutations, .. } = diff_state;
+                    //     for scope in &mutations.dirty_scopes {
+                    //         self.dirty_scopes.remove(scope);
+                    //     }
+                    //     committed_mutations.push(mutations);
+                    // } else {
+                    //     // leave the work in an incomplete state
+                    //     //
+                    //     // todo: we should store the edits and re-apply them later
+                    //     // for now, we just dump the work completely (threadsafe)
+                    //     return committed_mutations;
+                    // }
                 }
             }
-
-            if diff_state.work(&mut deadline) {
-                let DiffState { mutations, .. } = diff_state;
-
-                for scope in &mutations.dirty_scopes {
-                    self.dirty_scopes.remove(scope);
-                }
-
-                committed_mutations.push(mutations);
-            } else {
-                // leave the work in an incomplete state
-                //
-                // todo: we should store the edits and re-apply them later
-                // for now, we just dump the work completely (threadsafe)
-                return committed_mutations;
-            }
         }
 
         committed_mutations
@@ -524,13 +531,15 @@ impl VirtualDom {
         let mut diff_state = DiffState::new(&self.scopes);
 
         self.scopes.run_scope(scope_id);
-        diff_state
-            .stack
-            .create_node(self.scopes.fin_head(scope_id), MountType::Append);
 
-        diff_state.stack.element_stack.push(ElementId(0));
+        diff_state.element_stack.push(ElementId(0));
-        diff_state.stack.scope_stack.push(scope_id);
+        diff_state.scope_stack.push(scope_id);
-        diff_state.work(|| false);
+
+        let node = self.scopes.fin_head(scope_id);
+        let created = diff_state.create_node(node);
+
+        diff_state.mutations.append_children(created as u32);
+
         self.dirty_scopes.clear();
         assert!(self.dirty_scopes.is_empty());
 
@@ -577,12 +586,11 @@ impl VirtualDom {
         );
 
         diff_machine.force_diff = true;
-        diff_machine.stack.push(DiffInstruction::Diff { old, new });
+        diff_machine.scope_stack.push(scope_id);
-        diff_machine.stack.scope_stack.push(scope_id);
-
         let scope = diff_machine.scopes.get_scope(scope_id).unwrap();
-        diff_machine.stack.element_stack.push(scope.container);
+        diff_machine.element_stack.push(scope.container);
-        diff_machine.work(|| false);
+
+        diff_machine.diff_node(old, new);
 
         diff_machine.mutations
     }
@@ -621,10 +629,10 @@ impl VirtualDom {
     /// ```
     pub fn diff_vnodes<'a>(&'a self, old: &'a VNode<'a>, new: &'a VNode<'a>) -> Mutations<'a> {
         let mut machine = DiffState::new(&self.scopes);
-        machine.stack.push(DiffInstruction::Diff { new, old });
+        machine.element_stack.push(ElementId(0));
-        machine.stack.element_stack.push(ElementId(0));
+        machine.scope_stack.push(ScopeId(0));
-        machine.stack.scope_stack.push(ScopeId(0));
+        machine.diff_node(old, new);
-        machine.work(|| false);
+
         machine.mutations
     }
 
@@ -643,11 +651,11 @@ impl VirtualDom {
     /// ```
     pub fn create_vnodes<'a>(&'a self, nodes: LazyNodes<'a, '_>) -> Mutations<'a> {
         let mut machine = DiffState::new(&self.scopes);
-        machine.stack.element_stack.push(ElementId(0));
+        machine.scope_stack.push(ScopeId(0));
-        machine
+        machine.element_stack.push(ElementId(0));
-            .stack
+        let node = self.render_vnodes(nodes);
-            .create_node(self.render_vnodes(nodes), MountType::Append);
+        let created = machine.create_node(node);
-        machine.work(|| false);
+        machine.mutations.append_children(created as u32);
         machine.mutations
     }
 
@@ -672,16 +680,15 @@ impl VirtualDom {
         let (old, new) = (self.render_vnodes(left), self.render_vnodes(right));
 
         let mut create = DiffState::new(&self.scopes);
-        create.stack.scope_stack.push(ScopeId(0));
+        create.scope_stack.push(ScopeId(0));
-        create.stack.element_stack.push(ElementId(0));
+        create.element_stack.push(ElementId(0));
-        create.stack.create_node(old, MountType::Append);
+        let created = create.create_node(old);
-        create.work(|| false);
+        create.mutations.append_children(created as u32);
 
         let mut edit = DiffState::new(&self.scopes);
-        edit.stack.scope_stack.push(ScopeId(0));
+        edit.scope_stack.push(ScopeId(0));
-        edit.stack.element_stack.push(ElementId(0));
+        edit.element_stack.push(ElementId(0));
-        edit.stack.push(DiffInstruction::Diff { old, new });
+        edit.diff_node(old, new);
-        edit.work(|| false);
 
         (create.mutations, edit.mutations)
     }

packages/core/tests/diffing.rs

@@ -1,4 +1,5 @@
 #![allow(unused, non_upper_case_globals)]
+
 //! Diffing Tests
 //!
 //! These tests only verify that the diffing algorithm works properly for single components.
@@ -105,6 +106,7 @@ fn empty_fragments_create_many_anchors() {
         create.edits,
         [CreatePlaceholder { root: 1 }, AppendChildren { many: 1 }]
     );
+
     assert_eq!(
         change.edits,
         [
@@ -237,7 +239,7 @@ fn two_fragments_with_differrent_elements_are_differet() {
             // replace the divs with new h1s
             CreateElement { tag: "h1", root: 7 },
             ReplaceWith { root: 1, m: 1 },
-            CreateElement { tag: "h1", root: 8 },
+            CreateElement { tag: "h1", root: 1 }, // notice how 1 gets re-used
             ReplaceWith { root: 2, m: 1 },
         ]
     );
@@ -270,15 +272,18 @@ fn two_fragments_with_differrent_elements_are_differet_shorter() {
             AppendChildren { many: 6 },
         ]
     );
+
+    // note: key reuse is always the last node that got used
+    // slab maintains a linked list, essentially
     assert_eq!(
         change.edits,
         [
             Remove { root: 3 },
             Remove { root: 4 },
             Remove { root: 5 },
-            CreateElement { root: 7, tag: "h1" },
+            CreateElement { root: 5, tag: "h1" }, // 3 gets reused
-            ReplaceWith { root: 1, m: 1 },
+            ReplaceWith { root: 1, m: 1 },        // 1 gets deleted
-            CreateElement { root: 8, tag: "h1" },
+            CreateElement { root: 1, tag: "h1" }, // 1 gets reused
             ReplaceWith { root: 2, m: 1 },
         ]
     );
@@ -564,13 +569,13 @@ fn keyed_diffing_additions_and_moves_in_middle() {
     let dom = new_dom();
 
     let left = rsx!({
-        [/**/ 4, 5, 6, 7 /**/].iter().map(|f| {
+        [/**/ 1, 2, 3, 4 /**/].iter().map(|f| {
             rsx! { div { key: "{f}"  }}
         })
     });
 
     let right = rsx!({
-        [/**/ 7, 4, 13, 17, 5, 11, 12, 6 /**/].iter().map(|f| {
+        [/**/ 4, 1, 7, 8, 2, 5, 6, 3 /**/].iter().map(|f| {
             rsx! { div { key: "{f}"  }}
         })
     });
@@ -581,14 +586,14 @@ fn keyed_diffing_additions_and_moves_in_middle() {
     assert_eq!(
         change.edits,
         [
-            // create 13, 17
+            // create 5, 6
             CreateElement { tag: "div", root: 5 },
             CreateElement { tag: "div", root: 6 },
-            InsertBefore { root: 2, n: 2 },
+            InsertBefore { root: 3, n: 2 },
-            // create 11, 12
+            // create 7, 8
             CreateElement { tag: "div", root: 7 },
             CreateElement { tag: "div", root: 8 },
-            InsertBefore { root: 3, n: 2 },
+            InsertBefore { root: 2, n: 2 },
             // move 7
             PushRoot { root: 4 },
             InsertBefore { root: 1, n: 1 }

packages/core/tests/earlyabort.rs

@@ -59,8 +59,8 @@ fn test_early_abort() {
     assert_eq!(
         edits.edits,
         [
-            CreateElement { tag: "div", root: 2 },
+            CreateElement { tag: "div", root: 1 }, // keys get reused
-            CreateTextNode { text: "Hello, world!", root: 4 },
+            CreateTextNode { text: "Hello, world!", root: 2 }, // keys get reused
             AppendChildren { many: 1 },
             ReplaceWith { root: 3, m: 1 },
         ]

packages/core/tests/lifecycle.rs

@@ -40,7 +40,7 @@ fn manual_diffing() {
 
 #[test]
 fn events_generate() {
-    static App: Component = |cx| {
+    fn app(cx: Scope) -> Element {
         let count = cx.use_hook(|_| 0);
 
         let inner = match *count {
@@ -61,7 +61,7 @@ fn events_generate() {
         cx.render(inner)
     };
 
-    let mut dom = VirtualDom::new(App);
+    let mut dom = VirtualDom::new(app);
     let mut channel = dom.get_scheduler_channel();
     assert!(dom.has_work());
 
@@ -83,7 +83,7 @@ fn events_generate() {
 
 #[test]
 fn components_generate() {
-    static App: Component = |cx| {
+    fn app(cx: Scope) -> Element {
         let render_phase = cx.use_hook(|_| 0);
         *render_phase += 1;
 
@@ -100,13 +100,14 @@ fn components_generate() {
         })
     };
 
-    static Child: Component = |cx| {
+    fn Child(cx: Scope) -> Element {
+        log::debug!("Running child");
         cx.render(rsx! {
             h1 {}
         })
-    };
+    }
 
-    let mut dom = VirtualDom::new(App);
+    let mut dom = VirtualDom::new(app);
     let edits = dom.rebuild();
     assert_eq!(
         edits.edits,
@@ -116,72 +117,67 @@ fn components_generate() {
         ]
     );
 
-    let edits = dom.hard_diff(ScopeId(0));
     assert_eq!(
-        edits.edits,
+        dom.hard_diff(ScopeId(0)).edits,
         [
             CreateElement { tag: "div", root: 2 },
             ReplaceWith { root: 1, m: 1 },
         ]
     );
 
-    let edits = dom.hard_diff(ScopeId(0));
     assert_eq!(
-        edits.edits,
+        dom.hard_diff(ScopeId(0)).edits,
         [
-            CreateTextNode { text: "Text2", root: 3 },
+            CreateTextNode { text: "Text2", root: 1 },
             ReplaceWith { root: 2, m: 1 },
         ]
     );
 
-    let edits = dom.hard_diff(ScopeId(0));
+    // child {}
     assert_eq!(
-        edits.edits,
+        dom.hard_diff(ScopeId(0)).edits,
         [
-            CreateElement { tag: "h1", root: 4 },
+            CreateElement { tag: "h1", root: 2 },
-            ReplaceWith { root: 3, m: 1 },
+            ReplaceWith { root: 1, m: 1 },
         ]
     );
 
-    let edits = dom.hard_diff(ScopeId(0));
+    // placeholder
     assert_eq!(
-        edits.edits,
+        dom.hard_diff(ScopeId(0)).edits,
-        [CreatePlaceholder { root: 5 }, ReplaceWith { root: 4, m: 1 },]
+        [CreatePlaceholder { root: 1 }, ReplaceWith { root: 2, m: 1 },]
     );
 
-    let edits = dom.hard_diff(ScopeId(0));
     assert_eq!(
-        edits.edits,
+        dom.hard_diff(ScopeId(0)).edits,
         [
-            CreateTextNode { text: "text 3", root: 6 },
+            CreateTextNode { text: "text 3", root: 2 },
-            ReplaceWith { root: 5, m: 1 },
+            ReplaceWith { root: 1, m: 1 },
         ]
     );
 
-    let edits = dom.hard_diff(ScopeId(0));
     assert_eq!(
-        edits.edits,
+        dom.hard_diff(ScopeId(0)).edits,
         [
-            CreateTextNode { text: "text 0", root: 7 },
+            CreateTextNode { text: "text 0", root: 1 },
-            CreateTextNode { text: "text 1", root: 8 },
+            CreateTextNode { text: "text 1", root: 3 },
-            ReplaceWith { root: 6, m: 2 },
+            ReplaceWith { root: 2, m: 2 },
         ]
     );
 
-    let edits = dom.hard_diff(ScopeId(0));
     assert_eq!(
-        edits.edits,
+        dom.hard_diff(ScopeId(0)).edits,
         [
-            CreateElement { tag: "h1", root: 9 },
+            CreateElement { tag: "h1", root: 2 },
-            ReplaceWith { root: 7, m: 1 },
+            ReplaceWith { root: 1, m: 1 },
-            Remove { root: 8 },
+            Remove { root: 3 },
         ]
     );
 }
 
 #[test]
 fn component_swap() {
-    static App: Component = |cx| {
+    fn app(cx: Scope) -> Element {
         let render_phase = cx.use_hook(|_| 0);
         *render_phase += 1;
 
@@ -257,7 +253,7 @@ fn component_swap() {
         })
     };
 
-    let mut dom = VirtualDom::new(App);
+    let mut dom = VirtualDom::new(app);
     let edits = dom.rebuild();
     dbg!(&edits);
 

packages/core/tests/miri_stress.rs

@@ -314,36 +314,117 @@ fn test_pass_thru() {
     #[inline_props]
     fn Router<'a>(cx: Scope, children: Element<'a>) -> Element {
         cx.render(rsx! {
-            &cx.props.children
+            div {
+                &cx.props.children
+            }
         })
     }
 
-    fn MemoizedThing(cx: Scope) -> Element {
+    #[inline_props]
-        rsx!(cx, div { "memoized" })
+    fn NavContainer<'a>(cx: Scope, children: Element<'a>) -> Element {
+        cx.render(rsx! {
+            header {
+                nav {
+                    &cx.props.children
+                }
+            }
+        })
+    }
+
+    fn NavMenu(cx: Scope) -> Element {
+        rsx!(cx,
+            NavBrand {}
+            div {
+                NavStart {}
+                NavEnd {}
+            }
+        )
+    }
+
+    fn NavBrand(cx: Scope) -> Element {
+        rsx!(cx, div {})
+    }
+
+    fn NavStart(cx: Scope) -> Element {
+        rsx!(cx, div {})
+    }
+
+    fn NavEnd(cx: Scope) -> Element {
+        rsx!(cx, div {})
+    }
+
+    #[inline_props]
+    fn MainContainer<'a>(
+        cx: Scope,
+        nav: Element<'a>,
+        body: Element<'a>,
+        footer: Element<'a>,
+    ) -> Element {
+        cx.render(rsx! {
+            div {
+                class: "columns is-mobile",
+                div {
+                    class: "column is-full",
+                    &cx.props.nav,
+                    &cx.props.body,
+                    &cx.props.footer,
+                }
+            }
+        })
     }
 
     fn app(cx: Scope) -> Element {
-        let thing = cx.use_hook(|_| "asd");
+        let nav = cx.render(rsx! {
-        rsx!(cx,
+            NavContainer {
-            Router {
+                NavMenu {}
-                MemoizedThing {
-                }
             }
-        )
+        });
+        let body = cx.render(rsx! {
+            div {}
+        });
+        let footer = cx.render(rsx! {
+            div {}
+        });
+
+        cx.render(rsx! {
+            MainContainer {
+                nav: nav,
+                body: body,
+                footer: footer,
+            }
+        })
     }
 
     let mut dom = new_dom(app, ());
     let _ = dom.rebuild();
 
-    dom.handle_message(SchedulerMsg::Immediate(ScopeId(0)));
+    for x in 0..40 {
-    dom.work_with_deadline(|| false);
+        dom.handle_message(SchedulerMsg::Immediate(ScopeId(0)));
+        dom.work_with_deadline(|| false);
+        dom.handle_message(SchedulerMsg::Immediate(ScopeId(0)));
+        dom.work_with_deadline(|| false);
+        dom.handle_message(SchedulerMsg::Immediate(ScopeId(0)));
+        dom.work_with_deadline(|| false);
 
-    dom.handle_message(SchedulerMsg::Immediate(ScopeId(0)));
+        dom.handle_message(SchedulerMsg::Immediate(ScopeId(1)));
-    dom.work_with_deadline(|| false);
+        dom.work_with_deadline(|| false);
+        dom.handle_message(SchedulerMsg::Immediate(ScopeId(1)));
+        dom.work_with_deadline(|| false);
+        dom.handle_message(SchedulerMsg::Immediate(ScopeId(1)));
+        dom.work_with_deadline(|| false);
 
-    dom.handle_message(SchedulerMsg::Immediate(ScopeId(0)));
+        dom.handle_message(SchedulerMsg::Immediate(ScopeId(2)));
-    dom.work_with_deadline(|| false);
+        dom.work_with_deadline(|| false);
+        dom.handle_message(SchedulerMsg::Immediate(ScopeId(2)));
+        dom.work_with_deadline(|| false);
+        dom.handle_message(SchedulerMsg::Immediate(ScopeId(2)));
+        dom.work_with_deadline(|| false);
 
-    dom.handle_message(SchedulerMsg::Immediate(ScopeId(0)));
+        dom.handle_message(SchedulerMsg::Immediate(ScopeId(3)));
-    dom.work_with_deadline(|| false);
+        dom.work_with_deadline(|| false);
+        dom.handle_message(SchedulerMsg::Immediate(ScopeId(3)));
+        dom.work_with_deadline(|| false);
+        dom.handle_message(SchedulerMsg::Immediate(ScopeId(3)));
+        dom.work_with_deadline(|| false);
+    }
 }

packages/core/tests/passthru.rs

@@ -0,0 +1,108 @@
+#![allow(unused, non_upper_case_globals)]
+
+//! Diffing Tests
+//!
+//! These tests only verify that the diffing algorithm works properly for single components.
+//!
+//! It does not validated that component lifecycles work properly. This is done in another test file.
+
+use dioxus::{prelude::*, DomEdit, ScopeId};
+use dioxus_core as dioxus;
+use dioxus_core_macro::*;
+use dioxus_html as dioxus_elements;
+
+mod test_logging;
+
+fn new_dom() -> VirtualDom {
+    const IS_LOGGING_ENABLED: bool = false;
+    test_logging::set_up_logging(IS_LOGGING_ENABLED);
+    VirtualDom::new(|cx| rsx!(cx, "hi"))
+}
+
+use DomEdit::*;
+
+/// Should push the text node onto the stack and modify it
+#[test]
+fn nested_passthru_creates() {
+    fn app(cx: Scope) -> Element {
+        cx.render(rsx! {
+            Child {
+                Child {
+                    Child {
+                        div {
+                            "hi"
+                        }
+                    }
+                }
+            }
+        })
+    };
+
+    #[inline_props]
+    fn Child<'a>(cx: Scope, children: Element<'a>) -> Element {
+        cx.render(rsx! {
+                children
+        })
+    };
+
+    let mut dom = VirtualDom::new(app);
+    let mut channel = dom.get_scheduler_channel();
+    assert!(dom.has_work());
+
+    let edits = dom.rebuild();
+    assert_eq!(
+        edits.edits,
+        [
+            CreateElement { tag: "div", root: 1 },
+            CreateTextNode { text: "hi", root: 2 },
+            AppendChildren { many: 1 },
+            AppendChildren { many: 1 },
+        ]
+    )
+}
+
+/// Should push the text node onto the stack and modify it
+#[test]
+fn nested_passthru_creates_add() {
+    fn app(cx: Scope) -> Element {
+        cx.render(rsx! {
+            Child {
+                "1"
+                Child {
+                    "2"
+                    Child {
+                        "3"
+                        div {
+                            "hi"
+                        }
+                    }
+                }
+            }
+        })
+    };
+
+    #[inline_props]
+    fn Child<'a>(cx: Scope, children: Element<'a>) -> Element {
+        cx.render(rsx! {
+                children
+        })
+    };
+
+    let mut dom = VirtualDom::new(app);
+    let mut channel = dom.get_scheduler_channel();
+    assert!(dom.has_work());
+
+    let edits = dom.rebuild();
+    assert_eq!(
+        edits.edits,
+        [
+            CreateTextNode { text: "1", root: 1 },
+            CreateTextNode { text: "2", root: 2 },
+            CreateTextNode { text: "3", root: 3 },
+            CreateElement { tag: "div", root: 4 },
+            CreateTextNode { text: "hi", root: 5 },
+            AppendChildren { many: 1 },
+            AppendChildren { many: 4 },
+        ]
+    )
+}

packages/core/tests/sharedstate.rs

@@ -1,6 +1,6 @@
 #![allow(unused, non_upper_case_globals)]
 
-use dioxus::{prelude::*, DomEdit, Mutations};
+use dioxus::{prelude::*, DomEdit, Mutations, SchedulerMsg, ScopeId};
 use dioxus_core as dioxus;
 use dioxus_core_macro::*;
 use dioxus_html as dioxus_elements;
@@ -34,3 +34,97 @@ fn shared_state_test() {
         ]
     );
 }
+
+#[test]
+fn swap_test() {
+    struct MySharedState(&'static str);
+
+    fn app(cx: Scope) -> Element {
+        let val = cx.use_hook(|_| 0);
+        *val += 1;
+
+        cx.provide_context(MySharedState("world!"));
+
+        let child = match *val % 2 {
+            0 => rsx!(
+                Child1 {
+                    Child1 { }
+                    Child2 { }
+                }
+            ),
+            _ => rsx!(
+                Child2 {
+                    Child2 { }
+                    Child2 { }
+                }
+            ),
+        };
+
+        cx.render(rsx!(
+            Router {
+                div { child }
+            }
+        ))
+    }
+
+    #[inline_props]
+    fn Router<'a>(cx: Scope, children: Element<'a>) -> Element<'a> {
+        cx.render(rsx!(div { children }))
+    }
+
+    #[inline_props]
+    fn Child1<'a>(cx: Scope, children: Element<'a>) -> Element {
+        let shared = cx.consume_context::<MySharedState>().unwrap();
+        println!("Child1: {}", shared.0);
+        cx.render(rsx! {
+            div {
+                "{shared.0}",
+                children
+            }
+        })
+    }
+
+    #[inline_props]
+    fn Child2<'a>(cx: Scope, children: Element<'a>) -> Element {
+        let shared = cx.consume_context::<MySharedState>().unwrap();
+        println!("Child2: {}", shared.0);
+        cx.render(rsx! {
+            h1 {
+                "{shared.0}",
+                children
+            }
+        })
+    }
+
+    let mut dom = VirtualDom::new(app);
+    let Mutations { edits, .. } = dom.rebuild();
+
+    dom.handle_message(SchedulerMsg::Immediate(ScopeId(0)));
+    dom.work_with_deadline(|| false);
+    dom.handle_message(SchedulerMsg::Immediate(ScopeId(0)));
+    dom.work_with_deadline(|| false);
+    dom.handle_message(SchedulerMsg::Immediate(ScopeId(0)));
+    dom.work_with_deadline(|| false);
+    dom.handle_message(SchedulerMsg::Immediate(ScopeId(0)));
+    dom.work_with_deadline(|| false);
+    dom.handle_message(SchedulerMsg::Immediate(ScopeId(0)));
+    dom.work_with_deadline(|| false);
+    dom.handle_message(SchedulerMsg::Immediate(ScopeId(0)));
+    dom.work_with_deadline(|| false);
+
+    // dom.handle_message(SchedulerMsg::Immediate(ScopeId(1)));
+    // dom.work_with_deadline(|| false);
+
+    // dom.handle_message(SchedulerMsg::Immediate(ScopeId(2)));
+    // dom.work_with_deadline(|| false);
+
+    // dom.handle_message(SchedulerMsg::Immediate(ScopeId(3)));
+    // dom.work_with_deadline(|| false);
+
+    // dom.handle_message(SchedulerMsg::Immediate(ScopeId(0)));
+    // dom.work_with_deadline(|| false);
+    // dom.handle_message(SchedulerMsg::Immediate(ScopeId(0)));
+    // dom.work_with_deadline(|| false);
+    // dom.handle_message(SchedulerMsg::Immediate(ScopeId(0)));
+    // dom.work_with_deadline(|| false);
+}

packages/desktop/Cargo.toml

@@ -31,6 +31,8 @@ dioxus-core-macro = { path = "../core-macro", version = "^0.1.7" }
 dioxus-html = { path = "../html", features = ["serialize"], version = "^0.1.6" }
 webbrowser = "0.5.5"
 mime_guess = "2.0.3"
+dioxus-interpreter-js = { path = "../interpreter", version = "^0.0.0" }
+
 
 [features]
 default = ["tokio_runtime"]

packages/desktop/examples/async.rs

@@ -10,14 +10,14 @@ fn main() {
 }
 
 fn app(cx: Scope) -> Element {
-    let count = use_state(&cx, || 0);
+    let (count, set_count) = use_state(&cx, || 0);
 
     use_future(&cx, || {
-        let count = count.for_async();
+        let set_count = set_count.clone();
         async move {
             loop {
                 tokio::time::sleep(Duration::from_millis(1000)).await;
-                *count.modify() += 1;
+                set_count.modify(|f| f + 1)
             }
         }
     });
@@ -26,7 +26,7 @@ fn app(cx: Scope) -> Element {
         div {
             h1 { "High-Five counter: {count}" }
             button {
-                onclick: move |_| count.set(0),
+                onclick: move |_| set_count(0),
                 "Click me!"
             }
         }

packages/desktop/src/interpreter.js

@@ -1,550 +0,0 @@
-export function main() {
-  let root = window.document.getElementById("main");
-  if (root != null) {
-    window.interpreter = new Interpreter(root);
-    window.rpc.call("initialize");
-  }
-}
-export class Interpreter {
-  root;
-  stack;
-  listeners;
-  handlers;
-  lastNodeWasText;
-  nodes;
-  constructor(root) {
-    this.root = root;
-    this.stack = [root];
-    this.listeners = {};
-    this.handlers = {};
-    this.lastNodeWasText = false;
-    this.nodes = [root];
-  }
-  top() {
-    return this.stack[this.stack.length - 1];
-  }
-  pop() {
-    return this.stack.pop();
-  }
-  PushRoot(root) {
-    const node = this.nodes[root];
-    this.stack.push(node);
-  }
-  AppendChildren(many) {
-    let root = this.stack[this.stack.length - (1 + many)];
-    let to_add = this.stack.splice(this.stack.length - many);
-    for (let i = 0; i < many; i++) {
-      root.appendChild(to_add[i]);
-    }
-  }
-  ReplaceWith(root_id, m) {
-    let root = this.nodes[root_id];
-    let els = this.stack.splice(this.stack.length - m);
-    root.replaceWith(...els);
-  }
-  InsertAfter(root, n) {
-    let old = this.nodes[root];
-    let new_nodes = this.stack.splice(this.stack.length - n);
-    old.after(...new_nodes);
-  }
-  InsertBefore(root, n) {
-    let old = this.nodes[root];
-    let new_nodes = this.stack.splice(this.stack.length - n);
-    old.before(...new_nodes);
-  }
-  Remove(root) {
-    let node = this.nodes[root];
-    if (node !== undefined) {
-      node.remove();
-    }
-  }
-  CreateTextNode(text, root) {
-    // todo: make it so the types are okay
-    const node = document.createTextNode(text);
-    this.nodes[root] = node;
-    this.stack.push(node);
-  }
-  CreateElement(tag, root) {
-    const el = document.createElement(tag);
-    // el.setAttribute("data-dioxus-id", `${root}`);
-    this.nodes[root] = el;
-    this.stack.push(el);
-  }
-  CreateElementNs(tag, root, ns) {
-    let el = document.createElementNS(ns, tag);
-    this.stack.push(el);
-    this.nodes[root] = el;
-  }
-  CreatePlaceholder(root) {
-    let el = document.createElement("pre");
-    el.hidden = true;
-    this.stack.push(el);
-    this.nodes[root] = el;
-  }
-  NewEventListener(event_name, root, handler) {
-    const element = this.nodes[root];
-    element.setAttribute("data-dioxus-id", `${root}`);
-    if (this.listeners[event_name] === undefined) {
-      this.listeners[event_name] = 0;
-      this.handlers[event_name] = handler;
-      this.root.addEventListener(event_name, handler);
-    } else {
-      this.listeners[event_name]++;
-    }
-  }
-  RemoveEventListener(root, event_name) {
-    const element = this.nodes[root];
-    element.removeAttribute(`data-dioxus-id`);
-    this.listeners[event_name]--;
-    if (this.listeners[event_name] === 0) {
-      this.root.removeEventListener(event_name, this.handlers[event_name]);
-      delete this.listeners[event_name];
-      delete this.handlers[event_name];
-    }
-  }
-  SetText(root, text) {
-    this.nodes[root].textContent = text;
-  }
-  SetAttribute(root, field, value, ns) {
-    const name = field;
-    const 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, name) {
-    const node = this.nodes[root];
-    node.removeAttribute(name);
-    if (name === "value") {
-      node.value = "";
-    }
-    if (name === "checked") {
-      node.checked = false;
-    }
-    if (name === "selected") {
-      node.selected = false;
-    }
-  }
-  handleEdits(edits) {
-    this.stack.push(this.root);
-    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.many);
-        break;
-      case "ReplaceWith":
-        this.ReplaceWith(edit.root, edit.m);
-        break;
-      case "InsertAfter":
-        this.InsertAfter(edit.root, edit.n);
-        break;
-      case "InsertBefore":
-        this.InsertBefore(edit.root, edit.n);
-        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);
-        break;
-      case "CreateElementNs":
-        this.CreateElementNs(edit.tag, edit.root, edit.ns);
-        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") {
-              event.preventDefault();
-              if (shouldPreventDefault !== `onclick`) {
-                console.log("click", event);
-                console.log("clickeded", event.target);
-                console.log("clickeded", event.target.tagName);
-                if (target.tagName == "A") {
-                  const href = target.getAttribute("href");
-                  if (href !== "" && href !== null && href !== undefined) {
-                    window.rpc.call("browser_open", { href });
-                  }
-                }
-              }
-            }
-
-            // walk the tree to find the real element
-            while (realId == null && target.parentElement != null) {
-              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 (realId == null) {
-              return;
-            }
-            window.rpc.call("user_event", {
-              event: edit.event_name,
-              mounted_dom_id: parseInt(realId),
-              contents: contents,
-            });
-          }
-        };
-        this.NewEventListener(edit.event_name, edit.root, handler);
-        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);
-        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,
-      } = 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,
-        locale: "locale",
-      };
-    }
-    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,
-      };
-    }
-    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,
-      };
-    }
-    case "click":
-    case "contextmenu":
-    case "doubleclick":
-    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,
-        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,
-        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 {};
-    }
-  }
-}
-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,
-};

packages/desktop/src/lib.rs

@@ -224,7 +224,7 @@ pub fn launch_with_props<P: 'static + Send>(
                         } else if trimmed == "index.js" {
                             wry::http::ResponseBuilder::new()
                                 .mimetype("text/javascript")
-                                .body(include_bytes!("./interpreter.js").to_vec())
+                                .body(dioxus_interpreter_js::INTERPRTER_JS.as_bytes().to_vec())
                         } else {
                             // Read the file content from file path
                             use std::fs::read;

packages/interpreter/Cargo.toml

@@ -0,0 +1,16 @@
+[package]
+name = "dioxus-interpreter-js"
+version = "0.0.0"
+edition = "2018"
+authors = ["Jonathan Kelley"]
+description = "JS Intepreter for Dioxus - a concurrent renderer-agnostic Virtual DOM for interactive user experiences"
+license = "MIT OR Apache-2.0"
+repository = "https://github.com/DioxusLabs/dioxus/"
+homepage = "https://dioxuslabs.com"
+documentation = "https://docs.rs/dioxus"
+keywords = ["dom", "ui", "gui", "react", "wasm"]
+
+
+# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
+
+[dependencies]

packages/interpreter/README.md

@@ -4,5 +4,4 @@ After diffing old and new trees, the Dioxus VirtualDom produces patches that are
 
 In renderers with support for JavaScript, we use the interpreter from this repository - written in TypeScript - to patch the Dom. This lets us circumvent any overhead on the Rust <-> Dom boundary and keep consistency in our interpreter implementation in web/webview targets.
 
-
 For now - both Dioxus Web and Dioxus Desktop (webview) use the same interpreter code with tweaks.

packages/interpreter/build.rs

@@ -0,0 +1,16 @@
+use std::process::Command;
+
+fn main() {
+    println!("cargo:rerun-if-changed=interpreter.ts");
+
+    match Command::new("tsc").spawn() {
+        Ok(_) => println!("Was spawned :)"),
+        Err(e) => {
+            if let std::io::ErrorKind::NotFound = e.kind() {
+                println!("`tsc` was not found! Not going to generate new interpreter")
+            } else {
+                println!("Some strange error occurred :(");
+            }
+        }
+    }
+}

packages/interpreter/gen/interpreter.js

@@ -198,18 +198,30 @@ export class Interpreter {
                 this.RemoveEventListener(edit.root, edit.event_name);
                 break;
             case "NewEventListener":
-                // this handler is only provided on desktop implementations since this 
+                // 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") {
+                            event.preventDefault();
+                            if (shouldPreventDefault !== `onclick`) {
+                                if (target.tagName == "A") {
+                                    const href = target.getAttribute("href");
+                                    if (href !== "" && href !== null && href !== undefined) {
+                                        window.rpc.call("browser_open", { href });
+                                    }
+                                }
+                            }
+                        }
                         // walk the tree to find the real element
                         while (realId == null && target.parentElement != null) {
                             target = target.parentElement;
                             realId = target.getAttribute(`data-dioxus-id`);
                         }
-                        const shouldPreventDefault = target.getAttribute(`dioxus-prevent-default`);
+                        shouldPreventDefault = target.getAttribute(`dioxus-prevent-default`);
                         let contents = serialize_event(event);
                         if (shouldPreventDefault === `on${event.type}`) {
                             event.preventDefault();
@@ -217,20 +229,6 @@ export class Interpreter {
                         if (event.type == "submit") {
                             event.preventDefault();
                         }
-                        if (event.type == "click") {
-                            event.preventDefault();
-                            if (shouldPreventDefault !== `onclick`) {
-                                if (target.tagName == "A") {
-                                    const href = target.getAttribute("href");
-                                    if (href !== "" && href !== null && href !== undefined && realId != null) {
-                                        window.rpc.call("browser_open", {
-                                            mounted_dom_id: parseInt(realId),
-                                            href
-                                        });
-                                    }
-                                }
-                            }
-                        }
                         if (realId == null) {
                             return;
                         }

packages/interpreter/src/interpreter.ts

@@ -1,7 +1,3 @@
-
-
-
-
 export function main() {
   let root = window.document.getElementById("main");
   if (root != null) {
@@ -245,13 +241,26 @@ export class Interpreter {
       case "NewEventListener":
 
 
-        // this handler is only provided on desktop implementations since this 
+        // this handler is only provided on desktop implementations since this
         // method is not used by the web implementation
         let handler = (event: Event) => {
           let target = event.target as Element | null;
 
           if (target != null) {
             let realId = target.getAttribute(`data-dioxus-id`);
+            let shouldPreventDefault = target.getAttribute(`dioxus-prevent-default`);
+
+            if (event.type == "click") {
+              event.preventDefault();
+              if (shouldPreventDefault !== `onclick`) {
+                if (target.tagName == "A") {
+                  const href = target.getAttribute("href")
+                  if (href !== "" && href !== null && href !== undefined) {
+                    window.rpc.call("browser_open", { href });
+                  }
+                }
+              }
+            }
 
             // walk the tree to find the real element
             while (realId == null && target.parentElement != null) {
@@ -259,7 +268,7 @@ export class Interpreter {
               realId = target.getAttribute(`data-dioxus-id`);
             }
 
-            const shouldPreventDefault = target.getAttribute(`dioxus-prevent-default`);
+            shouldPreventDefault = target.getAttribute(`dioxus-prevent-default`);
 
             let contents = serialize_event(event);
 
@@ -271,20 +280,6 @@ export class Interpreter {
               event.preventDefault();
             }
 
-            if (event.type == "click") {
-              event.preventDefault();
-              if (shouldPreventDefault !== `onclick`) {
-                if (target.tagName == "A") {
-                  const href = target.getAttribute("href")
-                  if (href !== "" && href !== null && href !== undefined && realId != null) {
-                    window.rpc.call("browser_open", {
-                      mounted_dom_id: parseInt(realId),
-                      href
-                    });
-                  }
-                }
-              }
-            }
 
             if (realId == null) {
               return;

packages/interpreter/src/lib.rs

@@ -0,0 +1 @@
+pub static INTERPRTER_JS: &str = include_str!("../gen/interpreter.js");

packages/interpreter/tsconfig.json

@@ -8,6 +8,8 @@
             "es6",
             "dom"
         ],
+        "rootDir": "src",
         "strict": true,
+        "outDir": "gen",
     }
 }

packages/router/src/components/link.rs

@@ -41,7 +41,7 @@ pub struct LinkProps<'a> {
 }
 
 pub fn Link<'a>(cx: Scope<'a, LinkProps<'a>>) -> Element {
-    log::trace!("render Link to {}", cx.props.to);
+    // log::trace!("render Link to {}", cx.props.to);
     if let Some(service) = cx.consume_context::<RouterService>() {
         return cx.render(rsx! {
             a {

packages/router/src/components/route.rs

@@ -30,7 +30,7 @@ pub fn Route<'a>(cx: Scope<'a, RouteProps<'a>>) -> Element {
             Some(ctx) => ctx.total_route.to_string(),
             None => cx.props.to.to_string(),
         };
-        log::trace!("total route for {} is {}", cx.props.to, total_route);
+        // log::trace!("total route for {} is {}", cx.props.to, total_route);
 
         // provide our route context
         let route_context = cx.provide_context(RouteContext {
@@ -48,7 +48,7 @@ pub fn Route<'a>(cx: Scope<'a, RouteProps<'a>>) -> Element {
         Some(RouteInner {})
     });
 
-    log::trace!("Checking route {}", cx.props.to);
+    // log::trace!("Checking route {}", cx.props.to);
 
     if router_root.should_render(cx.scope_id()) {
         cx.render(rsx!(&cx.props.children))

packages/router/src/components/router.rs

@@ -17,6 +17,7 @@ pub struct RouterProps<'a> {
 
 #[allow(non_snake_case)]
 pub fn Router<'a>(cx: Scope<'a, RouterProps<'a>>) -> Element {
+    log::debug!("running router {:?}", cx.scope_id());
     let svc = cx.use_hook(|_| {
         let update = cx.schedule_update_any();
         cx.provide_context(RouterService::new(update, cx.scope_id()))

packages/router/src/platform/mod.rs

@@ -1,9 +1,4 @@
 pub trait RouterProvider {
     fn get_current_route(&self) -> String;
-    fn subscribe_to_route_changes(&self, callback: Box<dyn Fn(String)>);
+    fn listen(&self, callback: Box<dyn Fn()>);
-}
-
-enum RouteChange {
-    LinkTo(String),
-    Back(String),
 }

packages/router/src/service.rs

@@ -7,14 +7,18 @@ use std::{
 
 use dioxus_core::ScopeId;
 
+use crate::platform::RouterProvider;
+
 pub struct RouterService {
     pub(crate) regen_route: Rc<dyn Fn(ScopeId)>,
     pub(crate) pending_events: Rc<RefCell<Vec<RouteEvent>>>,
-    history: Rc<RefCell<BrowserHistory>>,
     slots: Rc<RefCell<Vec<(ScopeId, String)>>>,
     onchange_listeners: Rc<RefCell<HashSet<ScopeId>>>,
     root_found: Rc<Cell<Option<ScopeId>>>,
     cur_path_params: Rc<RefCell<HashMap<String, String>>>,
+
+    // history: Rc<dyn RouterProvider>,
+    history: Rc<RefCell<BrowserHistory>>,
     listener: HistoryListener,
 }
 
@@ -58,12 +62,10 @@ impl RouterService {
                 root_found.set(None);
                 // checking if the route is valid is cheap, so we do it
                 for (slot, root) in slots.borrow_mut().iter().rev() {
-                    log::trace!("regenerating slot {:?} for root '{}'", slot, root);
                     regen_route(*slot);
                 }
 
                 for listener in onchange_listeners.borrow_mut().iter() {
-                    log::trace!("regenerating listener {:?}", listener);
                     regen_route(*listener);
                 }
 
@@ -87,31 +89,24 @@ impl RouterService {
     }
 
     pub fn push_route(&self, route: &str) {
-        log::trace!("Pushing route: {}", route);
         self.history.borrow_mut().push(route);
     }
 
     pub fn register_total_route(&self, route: String, scope: ScopeId, fallback: bool) {
         let clean = clean_route(route);
-        log::trace!("Registered route '{}' with scope id {:?}", clean, scope);
         self.slots.borrow_mut().push((scope, clean));
     }
 
     pub fn should_render(&self, scope: ScopeId) -> bool {
-        log::trace!("Should render scope id {:?}?", scope);
         if let Some(root_id) = self.root_found.get() {
-            log::trace!("  we already found a root with scope id {:?}", root_id);
             if root_id == scope {
-                log::trace!("    yes - it's a match");
                 return true;
             }
-            log::trace!("    no - it's not a match");
             return false;
         }
 
         let location = self.history.borrow().location();
         let path = location.path();
-        log::trace!("  current path is '{}'", path);
 
         let roots = self.slots.borrow();
 
@@ -120,23 +115,15 @@ impl RouterService {
         // fallback logic
         match root {
             Some((id, route)) => {
-                log::trace!(
-                    "  matched given scope id {:?} with route root '{}'",
-                    scope,
-                    route,
-                );
                 if let Some(params) = route_matches_path(route, path) {
-                    log::trace!("    and it matches the current path '{}'", path);
                     self.root_found.set(Some(*id));
                     *self.cur_path_params.borrow_mut() = params;
                     true
                 } else {
                     if route == "" {
-                        log::trace!("    and the route is the root, so we will use that without a better match");
                         self.root_found.set(Some(*id));
                         true
                     } else {
-                        log::trace!("    and the route '{}' is not the root nor does it match the current path", route);
                         false
                     }
                 }
@@ -154,12 +141,10 @@ impl RouterService {
     }
 
     pub fn subscribe_onchange(&self, id: ScopeId) {
-        log::trace!("Subscribing onchange for scope id {:?}", id);
         self.onchange_listeners.borrow_mut().insert(id);
     }
 
     pub fn unsubscribe_onchange(&self, id: ScopeId) {
-        log::trace!("Subscribing onchange for scope id {:?}", id);
         self.onchange_listeners.borrow_mut().remove(&id);
     }
 }
@@ -182,36 +167,20 @@ fn route_matches_path(route: &str, path: &str) -> Option<HashMap<String, String>
     let route_pieces = route.split('/').collect::<Vec<_>>();
     let path_pieces = clean_path(path).split('/').collect::<Vec<_>>();
 
-    log::trace!(
-        "  checking route pieces {:?} vs path pieces {:?}",
-        route_pieces,
-        path_pieces,
-    );
-
     if route_pieces.len() != path_pieces.len() {
-        log::trace!("    the routes are different lengths");
         return None;
     }
 
     let mut matches = HashMap::new();
     for (i, r) in route_pieces.iter().enumerate() {
-        log::trace!("    checking route piece '{}' vs path", r);
         // If this is a parameter then it matches as long as there's
         // _any_thing in that spot in the path.
         if r.starts_with(':') {
-            log::trace!(
-                "      route piece '{}' starts with a colon so it matches anything",
-                r,
-            );
             let param = &r[1..];
             matches.insert(param.to_string(), path_pieces[i].to_string());
             continue;
         }
-        log::trace!(
+
-            "      route piece '{}' must be an exact match for path piece '{}'",
-            r,
-            path_pieces[i],
-        );
         if path_pieces[i] != *r {
             return None;
         }

packages/web/Cargo.toml

@@ -29,6 +29,9 @@ gloo-timers = { version = "0.2.1", features = ["futures"] }
 futures-util = "0.3.15"
 smallstr = "0.2.0"
 
+[build-dependencies]
+dioxus-interpreter-js = { path = "../interpreter", version = "^0.0.0" }
+
 [dependencies.web-sys]
 version = "0.3.51"
 features = [

packages/web/build.rs

@@ -0,0 +1,76 @@
+use std::{fs::File, io::Write};
+
+fn main() {
+    let src = format!(
+        r###"use js_sys::Function;
+use wasm_bindgen::prelude::*;
+use web_sys::{{Element, Node}};
+
+/*
+This is an autogenerated file from build.rs.
+Do not edit this file directly.
+*/
+
+#[wasm_bindgen(inline_js = r##"{}"##)]
+extern "C" {{
+    pub type Interpreter;
+
+    #[wasm_bindgen(constructor)]
+    pub fn new(arg: Element) -> Interpreter;
+
+    #[wasm_bindgen(method)]
+    pub fn set_node(this: &Interpreter, id: usize, node: Node);
+
+    #[wasm_bindgen(method)]
+    pub fn PushRoot(this: &Interpreter, root: u64);
+
+    #[wasm_bindgen(method)]
+    pub fn AppendChildren(this: &Interpreter, many: u32);
+
+    #[wasm_bindgen(method)]
+    pub fn ReplaceWith(this: &Interpreter, root: u64, m: u32);
+
+    #[wasm_bindgen(method)]
+    pub fn InsertAfter(this: &Interpreter, root: u64, n: u32);
+
+    #[wasm_bindgen(method)]
+    pub fn InsertBefore(this: &Interpreter, root: u64, n: u32);
+
+    #[wasm_bindgen(method)]
+    pub fn Remove(this: &Interpreter, root: u64);
+
+    #[wasm_bindgen(method)]
+    pub fn CreateTextNode(this: &Interpreter, text: &str, root: u64);
+
+    #[wasm_bindgen(method)]
+    pub fn CreateElement(this: &Interpreter, tag: &str, root: u64);
+
+    #[wasm_bindgen(method)]
+    pub fn CreateElementNs(this: &Interpreter, tag: &str, root: u64, ns: &str);
+
+    #[wasm_bindgen(method)]
+    pub fn CreatePlaceholder(this: &Interpreter, root: u64);
+
+    #[wasm_bindgen(method)]
+    pub fn NewEventListener(this: &Interpreter, name: &str, root: u64, handler: &Function);
+
+    #[wasm_bindgen(method)]
+    pub fn RemoveEventListener(this: &Interpreter, root: u64, name: &str);
+
+    #[wasm_bindgen(method)]
+    pub fn SetText(this: &Interpreter, root: u64, text: &str);
+
+    #[wasm_bindgen(method)]
+    pub fn SetAttribute(this: &Interpreter, root: u64, field: &str, value: &str, ns: Option<&str>);
+
+    #[wasm_bindgen(method)]
+    pub fn RemoveAttribute(this: &Interpreter, root: u64, field: &str);
+}}
+"###,
+        dioxus_interpreter_js::INTERPRTER_JS
+    );
+
+    // write the bindings to a local file
+    let mut file = File::create("src/bindings.rs").unwrap();
+    file.write_all(src.as_bytes()).unwrap();
+}

packages/web/src/bindings.rs

@@ -2,7 +2,509 @@ use js_sys::Function;
 use wasm_bindgen::prelude::*;
 use web_sys::{Element, Node};
 
-#[wasm_bindgen(module = "/src/interpreter.js")]
+/*
+This is an autogenerated file from build.rs.
+Do not edit this file directly.
+*/
+
+#[wasm_bindgen(inline_js = r##"export function main() {
+    let root = window.document.getElementById("main");
+    if (root != null) {
+        window.interpreter = new Interpreter(root);
+        window.rpc.call("initialize");
+    }
+}
+export class Interpreter {
+    root;
+    stack;
+    listeners;
+    handlers;
+    lastNodeWasText;
+    nodes;
+    constructor(root) {
+        this.root = root;
+        this.stack = [root];
+        this.listeners = {};
+        this.handlers = {};
+        this.lastNodeWasText = false;
+        this.nodes = [root];
+    }
+    top() {
+        return this.stack[this.stack.length - 1];
+    }
+    pop() {
+        return this.stack.pop();
+    }
+    PushRoot(root) {
+        const node = this.nodes[root];
+        this.stack.push(node);
+    }
+    AppendChildren(many) {
+        let root = this.stack[this.stack.length - (1 + many)];
+        let to_add = this.stack.splice(this.stack.length - many);
+        for (let i = 0; i < many; i++) {
+            root.appendChild(to_add[i]);
+        }
+    }
+    ReplaceWith(root_id, m) {
+        let root = this.nodes[root_id];
+        let els = this.stack.splice(this.stack.length - m);
+        root.replaceWith(...els);
+    }
+    InsertAfter(root, n) {
+        let old = this.nodes[root];
+        let new_nodes = this.stack.splice(this.stack.length - n);
+        old.after(...new_nodes);
+    }
+    InsertBefore(root, n) {
+        let old = this.nodes[root];
+        let new_nodes = this.stack.splice(this.stack.length - n);
+        old.before(...new_nodes);
+    }
+    Remove(root) {
+        let node = this.nodes[root];
+        if (node !== undefined) {
+            node.remove();
+        }
+    }
+    CreateTextNode(text, root) {
+        // todo: make it so the types are okay
+        const node = document.createTextNode(text);
+        this.nodes[root] = node;
+        this.stack.push(node);
+    }
+    CreateElement(tag, root) {
+        const el = document.createElement(tag);
+        // el.setAttribute("data-dioxus-id", `${root}`);
+        this.nodes[root] = el;
+        this.stack.push(el);
+    }
+    CreateElementNs(tag, root, ns) {
+        let el = document.createElementNS(ns, tag);
+        this.stack.push(el);
+        this.nodes[root] = el;
+    }
+    CreatePlaceholder(root) {
+        let el = document.createElement("pre");
+        el.hidden = true;
+        this.stack.push(el);
+        this.nodes[root] = el;
+    }
+    NewEventListener(event_name, root, handler) {
+        const element = this.nodes[root];
+        element.setAttribute("data-dioxus-id", `${root}`);
+        if (this.listeners[event_name] === undefined) {
+            this.listeners[event_name] = 0;
+            this.handlers[event_name] = handler;
+            this.root.addEventListener(event_name, handler);
+        }
+        else {
+            this.listeners[event_name]++;
+        }
+    }
+    RemoveEventListener(root, event_name) {
+        const element = this.nodes[root];
+        element.removeAttribute(`data-dioxus-id`);
+        this.listeners[event_name]--;
+        if (this.listeners[event_name] === 0) {
+            this.root.removeEventListener(event_name, this.handlers[event_name]);
+            delete this.listeners[event_name];
+            delete this.handlers[event_name];
+        }
+    }
+    SetText(root, text) {
+        this.nodes[root].textContent = text;
+    }
+    SetAttribute(root, field, value, ns) {
+        const name = field;
+        const 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, name) {
+        const node = this.nodes[root];
+        node.removeAttribute(name);
+        if (name === "value") {
+            node.value = "";
+        }
+        if (name === "checked") {
+            node.checked = false;
+        }
+        if (name === "selected") {
+            node.selected = false;
+        }
+    }
+    handleEdits(edits) {
+        this.stack.push(this.root);
+        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.many);
+                break;
+            case "ReplaceWith":
+                this.ReplaceWith(edit.root, edit.m);
+                break;
+            case "InsertAfter":
+                this.InsertAfter(edit.root, edit.n);
+                break;
+            case "InsertBefore":
+                this.InsertBefore(edit.root, edit.n);
+                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);
+                break;
+            case "CreateElementNs":
+                this.CreateElementNs(edit.tag, edit.root, edit.ns);
+                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") {
+                            event.preventDefault();
+                            if (shouldPreventDefault !== `onclick`) {
+                                if (target.tagName == "A") {
+                                    const href = target.getAttribute("href");
+                                    if (href !== "" && href !== null && href !== undefined) {
+                                        window.rpc.call("browser_open", { href });
+                                    }
+                                }
+                            }
+                        }
+                        // walk the tree to find the real element
+                        while (realId == null && target.parentElement != null) {
+                            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 (realId == null) {
+                            return;
+                        }
+                        window.rpc.call("user_event", {
+                            event: edit.event_name,
+                            mounted_dom_id: parseInt(realId),
+                            contents: contents,
+                        });
+                    }
+                };
+                this.NewEventListener(edit.event_name, edit.root, handler);
+                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);
+                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, } = 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,
+                locale: "locale",
+            };
+        }
+        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,
+            };
+        }
+        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,
+            };
+        }
+        case "click":
+        case "contextmenu":
+        case "doubleclick":
+        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, 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,
+                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 {};
+        }
+    }
+}
+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,
+};
+"##)]
 extern "C" {
     pub type Interpreter;
 

packages/web/src/interpreter.js

@@ -1,499 +0,0 @@
-export function main() {
-    let root = window.document.getElementById("main");
-    if (root != null) {
-        window.interpreter = new Interpreter(root);
-        window.rpc.call("initialize");
-    }
-}
-export class Interpreter {
-    root;
-    stack;
-    listeners;
-    handlers;
-    lastNodeWasText;
-    nodes;
-    constructor(root) {
-        this.root = root;
-        this.stack = [root];
-        this.listeners = {};
-        this.handlers = {};
-        this.lastNodeWasText = false;
-        this.nodes = [root];
-    }
-    top() {
-        return this.stack[this.stack.length - 1];
-    }
-    pop() {
-        return this.stack.pop();
-    }
-    PushRoot(root) {
-        const node = this.nodes[root];
-        this.stack.push(node);
-    }
-    AppendChildren(many) {
-        let root = this.stack[this.stack.length - (1 + many)];
-        let to_add = this.stack.splice(this.stack.length - many);
-        for (let i = 0; i < many; i++) {
-            root.appendChild(to_add[i]);
-        }
-    }
-    ReplaceWith(root_id, m) {
-        let root = this.nodes[root_id];
-        let els = this.stack.splice(this.stack.length - m);
-        root.replaceWith(...els);
-    }
-    InsertAfter(root, n) {
-        let old = this.nodes[root];
-        let new_nodes = this.stack.splice(this.stack.length - n);
-        old.after(...new_nodes);
-    }
-    InsertBefore(root, n) {
-        let old = this.nodes[root];
-        let new_nodes = this.stack.splice(this.stack.length - n);
-        old.before(...new_nodes);
-    }
-    Remove(root) {
-        let node = this.nodes[root];
-        if (node !== undefined) {
-            node.remove();
-        }
-    }
-    CreateTextNode(text, root) {
-        // todo: make it so the types are okay
-        const node = document.createTextNode(text);
-        this.nodes[root] = node;
-        this.stack.push(node);
-    }
-    CreateElement(tag, root) {
-        const el = document.createElement(tag);
-        // el.setAttribute("data-dioxus-id", `${root}`);
-        this.nodes[root] = el;
-        this.stack.push(el);
-    }
-    CreateElementNs(tag, root, ns) {
-        let el = document.createElementNS(ns, tag);
-        this.stack.push(el);
-        this.nodes[root] = el;
-    }
-    CreatePlaceholder(root) {
-        let el = document.createElement("pre");
-        el.hidden = true;
-        this.stack.push(el);
-        this.nodes[root] = el;
-    }
-    NewEventListener(event_name, root, handler) {
-        const element = this.nodes[root];
-        element.setAttribute("data-dioxus-id", `${root}`);
-        if (this.listeners[event_name] === undefined) {
-            this.listeners[event_name] = 0;
-            this.handlers[event_name] = handler;
-            this.root.addEventListener(event_name, handler);
-        }
-        else {
-            this.listeners[event_name]++;
-        }
-    }
-    RemoveEventListener(root, event_name) {
-        const element = this.nodes[root];
-        element.removeAttribute(`data-dioxus-id`);
-        this.listeners[event_name]--;
-        if (this.listeners[event_name] === 0) {
-            this.root.removeEventListener(event_name, this.handlers[event_name]);
-            delete this.listeners[event_name];
-            delete this.handlers[event_name];
-        }
-    }
-    SetText(root, text) {
-        this.nodes[root].textContent = text;
-    }
-    SetAttribute(root, field, value, ns) {
-        const name = field;
-        const 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, name) {
-        const node = this.nodes[root];
-        node.removeAttribute(name);
-        if (name === "value") {
-            node.value = "";
-        }
-        if (name === "checked") {
-            node.checked = false;
-        }
-        if (name === "selected") {
-            node.selected = false;
-        }
-    }
-    handleEdits(edits) {
-        this.stack.push(this.root);
-        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.many);
-                break;
-            case "ReplaceWith":
-                this.ReplaceWith(edit.root, edit.m);
-                break;
-            case "InsertAfter":
-                this.InsertAfter(edit.root, edit.n);
-                break;
-            case "InsertBefore":
-                this.InsertBefore(edit.root, edit.n);
-                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);
-                break;
-            case "CreateElementNs":
-                this.CreateElementNs(edit.tag, edit.root, edit.ns);
-                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`);
-                        // walk the tree to find the real element
-                        while (realId == null && target.parentElement != null) {
-                            target = target.parentElement;
-                            realId = target.getAttribute(`data-dioxus-id`);
-                        }
-                        const 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 (event.type == "click") {
-                            event.preventDefault();
-                            if (shouldPreventDefault !== `onclick`) {
-                                if (target.tagName == "A") {
-                                    const href = target.getAttribute("href");
-                                    if (href !== "" && href !== null && href !== undefined && realId != null) {
-                                        window.rpc.call("browser_open", {
-                                            mounted_dom_id: parseInt(realId),
-                                            href
-                                        });
-                                    }
-                                }
-                            }
-                        }
-                        if (realId == null) {
-                            return;
-                        }
-                        window.rpc.call("user_event", {
-                            event: edit.event_name,
-                            mounted_dom_id: parseInt(realId),
-                            contents: contents,
-                        });
-                    }
-                };
-                this.NewEventListener(edit.event_name, edit.root, handler);
-                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);
-                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, } = 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,
-                locale: "locale",
-            };
-        }
-        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,
-            };
-        }
-        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,
-            };
-        }
-        case "click":
-        case "contextmenu":
-        case "doubleclick":
-        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, 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,
-                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 {};
-        }
-    }
-}
-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,
-};