diff --git a/.github/workflows/docs.yml b/.github/workflows/docs.yml index 0d8e9f3b4..968d5f103 100644 --- a/.github/workflows/docs.yml +++ b/.github/workflows/docs.yml @@ -13,7 +13,6 @@ jobs: runs-on: ubuntu-latest environment: docs steps: - - uses: actions/checkout@v3 # NOTE: Comment out when https://github.com/rust-lang/mdBook/pull/1306 is merged and released # - name: Setup mdBook @@ -25,6 +24,7 @@ jobs: - name: Setup mdBook run: | cargo install mdbook --git https://github.com/Ruin0x11/mdBook.git --branch localization --rev e74fdb1 + - uses: actions/checkout@v3 - name: Build run: cd docs && diff --git a/.github/workflows/macos.yml b/.github/workflows/macos.yml index f6c06cd8c..c5616322e 100644 --- a/.github/workflows/macos.yml +++ b/.github/workflows/macos.yml @@ -30,13 +30,13 @@ jobs: name: Test Suite runs-on: macos-latest steps: - - uses: actions/checkout@v3 - uses: actions-rs/toolchain@v1 with: profile: minimal toolchain: stable override: true - uses: Swatinem/rust-cache@v2 + - uses: actions/checkout@v3 - uses: actions-rs/cargo@v1 with: command: test diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index b5e87ab71..de6b34274 100644 --- a/.github/workflows/main.yml +++ b/.github/workflows/main.yml @@ -32,7 +32,6 @@ jobs: name: Check runs-on: ubuntu-latest steps: - - uses: actions/checkout@v3 - uses: actions-rs/toolchain@v1 with: profile: minimal @@ -41,6 +40,7 @@ jobs: - uses: Swatinem/rust-cache@v2 - run: sudo apt-get update - run: sudo apt install libwebkit2gtk-4.0-dev libgtk-3-dev libayatana-appindicator3-dev + - uses: actions/checkout@v3 - uses: actions-rs/cargo@v1 with: command: check @@ -51,7 +51,6 @@ jobs: name: Test Suite runs-on: ubuntu-latest steps: - - uses: actions/checkout@v3 - uses: actions-rs/toolchain@v1 with: profile: minimal @@ -63,6 +62,7 @@ jobs: - uses: davidB/rust-cargo-make@v1 - uses: browser-actions/setup-firefox@latest - uses: jetli/wasm-pack-action@v0.4.0 + - uses: actions/checkout@v3 - uses: actions-rs/cargo@v1 with: command: make @@ -73,7 +73,6 @@ jobs: name: Rustfmt runs-on: ubuntu-latest steps: - - uses: actions/checkout@v3 - uses: actions-rs/toolchain@v1 with: profile: minimal @@ -81,6 +80,7 @@ jobs: override: true - uses: Swatinem/rust-cache@v2 - run: rustup component add rustfmt + - uses: actions/checkout@v3 - uses: actions-rs/cargo@v1 with: command: fmt @@ -91,7 +91,6 @@ jobs: name: Clippy runs-on: ubuntu-latest steps: - - uses: actions/checkout@v3 - uses: actions-rs/toolchain@v1 with: profile: minimal @@ -101,6 +100,7 @@ jobs: - run: sudo apt-get update - run: sudo apt install libwebkit2gtk-4.0-dev libgtk-3-dev libayatana-appindicator3-dev - run: rustup component add clippy + - uses: actions/checkout@v3 - uses: actions-rs/cargo@v1 with: command: clippy diff --git a/.github/workflows/windows.yml b/.github/workflows/windows.yml index edfda431d..6ae99612f 100644 --- a/.github/workflows/windows.yml +++ b/.github/workflows/windows.yml @@ -47,8 +47,6 @@ jobs: # which causes failures for some of rustfmt's line-ending sensitive tests - name: disable git eol translation run: git config --global core.autocrlf false - - name: checkout - uses: actions/checkout@v3 # Run build - name: Install Rustup using win.rustup.rs @@ -66,6 +64,9 @@ jobs: if: matrix.target == 'x86_64-pc-windows-gnu' && matrix.channel == 'nightly' shell: bash + - name: checkout + uses: actions/checkout@v3 + - name: test run: | rustc -Vv diff --git a/Cargo.toml b/Cargo.toml index 11ea7546b..8f3a33d96 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -57,6 +57,7 @@ reqwest = { version = "0.11.9", features = ["json"] } fern = { version = "0.6.0", features = ["colored"] } thiserror = "1.0.30" env_logger = "0.9.0" +simple_logger = "4.0.0" [profile.release] opt-level = 3 diff --git a/examples/crm.rs b/examples/crm.rs index 724010177..e99cfe241 100644 --- a/examples/crm.rs +++ b/examples/crm.rs @@ -30,7 +30,7 @@ fn app(cx: Scope) -> Element { integrity: "sha384-Uu6IeWbM+gzNVXJcM9XV3SohHtmWE+3VGi496jvgX1jyvDTXfdK+rfZc8C1Aehk5", crossorigin: "anonymous", } - h1 {"Dioxus CRM Example"} + h1 { "Dioxus CRM Example" } Router { Route { to: "/", div { class: "crm", @@ -40,12 +40,12 @@ fn app(cx: Scope) -> Element { div { class: "client", style: "margin-bottom: 50px", p { "First Name: {client.first_name}" } p { "Last Name: {client.last_name}" } - p {"Description: {client.description}"} + p { "Description: {client.description}" } }) ) } Link { to: "/new", class: "pure-button pure-button-primary", "Add New" } - Link { to: "/new", class: "pure-button", "Settings" } + Link { to: "/settings", class: "pure-button", "Settings" } } } Route { to: "/new", diff --git a/examples/custom_element.rs b/examples/custom_element.rs index 87b1fac3f..6ed2e64cd 100644 --- a/examples/custom_element.rs +++ b/examples/custom_element.rs @@ -16,6 +16,12 @@ fn main() { } fn app(cx: Scope) -> Element { + let g = cx.component(component, (), "component"); + let c = cx.make_node(g); + cx.render(rsx! { + div { c } + }) + // let nf = NodeFactory::new(cx); // let mut attrs = dioxus::core::exports::bumpalo::collections::Vec::new_in(nf.bump()); @@ -27,6 +33,8 @@ fn app(cx: Scope) -> Element { // attrs.push(nf.attr("age", format_args!("47"), None, false)); // Some(nf.raw_element("my-element", None, &[], attrs.into_bump_slice(), &[], None)) +} +fn component(cx: Scope) -> Element { todo!() } diff --git a/examples/flat_router.rs b/examples/flat_router.rs index 752b58760..4de9e7a7d 100644 --- a/examples/flat_router.rs +++ b/examples/flat_router.rs @@ -7,7 +7,6 @@ fn main() { let cfg = Config::new().with_window( WindowBuilder::new() - .with_title("Spinsense Client") .with_inner_size(LogicalSize::new(600, 1000)) .with_resizable(false), ); @@ -17,21 +16,21 @@ fn main() { fn app(cx: Scope) -> Element { cx.render(rsx! { - Router { - Route { to: "/", "Home" } - Route { to: "/games", "Games" } - Route { to: "/play", "Play" } - Route { to: "/settings", "Settings" } + div { + Router { + Route { to: "/", "Home" } + Route { to: "/games", "Games" } + Route { to: "/play", "Play" } + Route { to: "/settings", "Settings" } - p { - "----" - } - nav { - ul { - Link { to: "/", li { "Home" } } - Link { to: "/games", li { "Games" } } - Link { to: "/play", li { "Play" } } - Link { to: "/settings", li { "Settings" } } + p { "----" } + nav { + ul { + Link { to: "/", li { "Home" } } + Link { to: "/games", li { "Games" } } + Link { to: "/play", li { "Play" } } + Link { to: "/settings", li { "Settings" } } + } } } } diff --git a/examples/simple_desktop.rs b/examples/simple_desktop.rs new file mode 100644 index 000000000..d8c00afac --- /dev/null +++ b/examples/simple_desktop.rs @@ -0,0 +1,60 @@ +use dioxus::prelude::*; +use dioxus_router::*; + +fn main() { + simple_logger::SimpleLogger::new() + .with_level(log::LevelFilter::Debug) + .with_module_level("dioxus_router", log::LevelFilter::Trace) + .with_module_level("dioxus", log::LevelFilter::Trace) + .init() + .unwrap(); + dioxus_desktop::launch(app); +} + +fn app(cx: Scope) -> Element { + cx.render(rsx! { + Router { + h1 { "Your app here" } + ul { + Link { to: "/", li { "home" } } + Link { to: "/blog", li { "blog" } } + Link { to: "/blog/tim", li { "tims' blog" } } + Link { to: "/blog/bill", li { "bills' blog" } } + Link { to: "/blog/james", + li { "james amazing' blog" } + } + Link { to: "/apples", li { "go to apples" } } + } + Route { to: "/", Home {} } + Route { to: "/blog/", BlogList {} } + Route { to: "/blog/:id/", BlogPost {} } + Route { to: "/oranges", "Oranges are not apples!" } + Redirect { from: "/apples", to: "/oranges" } + } + }) +} + +fn Home(cx: Scope) -> Element { + log::debug!("rendering home {:?}", cx.scope_id()); + cx.render(rsx! { h1 { "Home" } }) +} + +fn BlogList(cx: Scope) -> Element { + log::debug!("rendering blog list {:?}", cx.scope_id()); + cx.render(rsx! { div { "Blog List" } }) +} + +fn BlogPost(cx: Scope) -> Element { + let Some(id) = use_route(cx).segment("id") else { + return cx.render(rsx! { div { "No blog post id" } }) + }; + + log::debug!("rendering blog post {}", id); + + cx.render(rsx! { + div { + h3 { "blog post: {id:?}" } + Link { to: "/blog/", "back to blog list" } + } + }) +} diff --git a/examples/svg_basic.rs b/examples/svg_basic.rs index e950eb339..1264aa001 100644 --- a/examples/svg_basic.rs +++ b/examples/svg_basic.rs @@ -67,6 +67,12 @@ fn app(cx: Scope) -> Element { stroke: "blue", stroke_width: "5", } + path { + d: "M9.00001 9C9 62 103.5 124 103.5 178", + stroke: "#3CC4DC", + "stroke-linecap": "square", + "stroke-width": "square", + } })) } diff --git a/packages/core/Cargo.toml b/packages/core/Cargo.toml index b4ce6010e..69e460044 100644 --- a/packages/core/Cargo.toml +++ b/packages/core/Cargo.toml @@ -36,6 +36,7 @@ serde = { version = "1", features = ["derive"], optional = true } anyhow = "1.0.66" smallbox = "0.8.1" +log = "0.4.17" [dev-dependencies] tokio = { version = "*", features = ["full"] } diff --git a/packages/core/src/arena.rs b/packages/core/src/arena.rs index 98960fca7..e876f09e1 100644 --- a/packages/core/src/arena.rs +++ b/packages/core/src/arena.rs @@ -1,4 +1,7 @@ -use crate::{nodes::RenderReturn, nodes::VNode, virtual_dom::VirtualDom, DynamicNode, ScopeId}; +use crate::{ + nodes::RenderReturn, nodes::VNode, virtual_dom::VirtualDom, AttributeValue, DynamicNode, + ScopeId, +}; use bumpalo::boxed::Box as BumpBox; /// An Element's unique identifier. @@ -34,14 +37,14 @@ impl ElementRef { impl VirtualDom { pub(crate) fn next_element(&mut self, template: &VNode, path: &'static [u8]) -> ElementId { - self.next(template, ElementPath::Deep(path)) + self.next_reference(template, ElementPath::Deep(path)) } pub(crate) fn next_root(&mut self, template: &VNode, path: usize) -> ElementId { - self.next(template, ElementPath::Root(path)) + self.next_reference(template, ElementPath::Root(path)) } - fn next(&mut self, template: &VNode, path: ElementPath) -> ElementId { + fn next_reference(&mut self, template: &VNode, path: ElementPath) -> ElementId { let entry = self.elements.vacant_entry(); let id = entry.key(); @@ -75,11 +78,18 @@ impl VirtualDom { // Drop a scope and all its children pub(crate) fn drop_scope(&mut self, id: ScopeId) { + self.ensure_drop_safety(id); + if let Some(root) = self.scopes[id.0].as_ref().try_root_node() { if let RenderReturn::Sync(Ok(node)) = unsafe { root.extend_lifetime_ref() } { self.drop_scope_inner(node) } } + if let Some(root) = unsafe { self.scopes[id.0].as_ref().previous_frame().try_load_node() } { + if let RenderReturn::Sync(Ok(node)) = unsafe { root.extend_lifetime_ref() } { + self.drop_scope_inner(node) + } + } self.scopes[id.0].props.take(); @@ -95,51 +105,55 @@ impl VirtualDom { fn drop_scope_inner(&mut self, node: &VNode) { node.clear_listeners(); node.dynamic_nodes.iter().for_each(|node| match node { - DynamicNode::Component(c) => self.drop_scope(c.scope.get().unwrap()), + DynamicNode::Component(c) => { + if let Some(f) = c.scope.get() { + self.drop_scope(f); + } + c.props.take(); + } DynamicNode::Fragment(nodes) => { nodes.iter().for_each(|node| self.drop_scope_inner(node)) } DynamicNode::Placeholder(t) => { - self.try_reclaim(t.get()); + self.try_reclaim(t.id.get().unwrap()); } DynamicNode::Text(t) => { - self.try_reclaim(t.id.get()); + self.try_reclaim(t.id.get().unwrap()); } }); for root in node.root_ids { - let id = root.get(); - if id.0 != 0 { - self.try_reclaim(id); + if let Some(id) = root.get() { + if id.0 != 0 { + self.try_reclaim(id); + } } } } /// Descend through the tree, removing any borrowed props and listeners pub(crate) fn ensure_drop_safety(&self, scope: ScopeId) { - let node = unsafe { self.scopes[scope.0].previous_frame().try_load_node() }; + let scope = &self.scopes[scope.0]; - // And now we want to make sure the previous frame has dropped anything that borrows self - if let Some(RenderReturn::Sync(Ok(node))) = node { - self.ensure_drop_safety_inner(node); - } - } - - fn ensure_drop_safety_inner(&self, node: &VNode) { - node.clear_listeners(); - - node.dynamic_nodes.iter().for_each(|child| match child { - // Only descend if the props are borrowed - DynamicNode::Component(c) if !c.static_props => { - self.ensure_drop_safety(c.scope.get().unwrap()); - c.props.set(None); + // make sure we drop all borrowed props manually to guarantee that their drop implementation is called before we + // run the hooks (which hold an &mut Reference) + // recursively call ensure_drop_safety on all children + let mut props = scope.borrowed_props.borrow_mut(); + props.drain(..).for_each(|comp| { + let comp = unsafe { &*comp }; + if let Some(scope_id) = comp.scope.get() { + self.ensure_drop_safety(scope_id); } + drop(comp.props.take()); + }); - DynamicNode::Fragment(f) => f - .iter() - .for_each(|node| self.ensure_drop_safety_inner(node)), - - _ => {} + // Now that all the references are gone, we can safely drop our own references in our listeners. + let mut listeners = scope.listeners.borrow_mut(); + listeners.drain(..).for_each(|listener| { + let listener = unsafe { &*listener }; + if let AttributeValue::Listener(l) = &listener.value { + _ = l.take(); + } }); } } diff --git a/packages/core/src/create.rs b/packages/core/src/create.rs index 3e3315980..9fe33a52e 100644 --- a/packages/core/src/create.rs +++ b/packages/core/src/create.rs @@ -1,13 +1,16 @@ -use std::cell::Cell; -use std::rc::Rc; - -use crate::innerlude::{VComponent, VText}; +use crate::any_props::AnyProps; +use crate::innerlude::{VComponent, VPlaceholder, VText}; use crate::mutations::Mutation; use crate::mutations::Mutation::*; use crate::nodes::VNode; use crate::nodes::{DynamicNode, TemplateNode}; use crate::virtual_dom::VirtualDom; use crate::{AttributeValue, ElementId, RenderReturn, ScopeId, SuspenseContext}; +use std::cell::Cell; +use std::iter::{Enumerate, Peekable}; +use std::rc::Rc; +use std::slice; +use TemplateNode::*; impl<'b> VirtualDom { /// Create a new template [`VNode`] and write it to the [`Mutations`] buffer. @@ -17,181 +20,248 @@ impl<'b> VirtualDom { self.scope_stack.push(scope); let out = self.create(template); self.scope_stack.pop(); - out } /// Create this template and write its mutations - pub(crate) fn create(&mut self, template: &'b VNode<'b>) -> usize { + pub(crate) fn create(&mut self, node: &'b VNode<'b>) -> usize { // The best renderers will have templates prehydrated and registered // Just in case, let's create the template using instructions anyways - if !self.templates.contains_key(&template.template.name) { - self.register_template(template); + if !self.templates.contains_key(&node.template.name) { + self.register_template(node); } + // we know that this will generate at least one mutation per node + self.mutations.edits.reserve(node.template.roots.len()); + // Walk the roots, creating nodes and assigning IDs // todo: adjust dynamic nodes to be in the order of roots and then leaves (ie BFS) - let mut dynamic_attrs = template.template.attr_paths.iter().enumerate().peekable(); - let mut dynamic_nodes = template.template.node_paths.iter().enumerate().peekable(); + let mut attrs = node.template.attr_paths.iter().enumerate().peekable(); + let mut nodes = node.template.node_paths.iter().enumerate().peekable(); - let cur_scope = self.scope_stack.last().copied().unwrap(); - - // we know that this will generate at least one mutation per node - self.mutations.edits.reserve(template.template.roots.len()); - - let mut on_stack = 0; - for (root_idx, root) in template.template.roots.iter().enumerate() { - // We might need to generate an ID for the root node - on_stack += match root { - TemplateNode::DynamicText { id } | TemplateNode::Dynamic { id } => { - match &template.dynamic_nodes[*id] { - // a dynamic text node doesn't replace a template node, instead we create it on the fly - DynamicNode::Text(VText { id: slot, value }) => { - let id = self.next_element(template, template.template.node_paths[*id]); - slot.set(id); - - // Safety: we promise not to re-alias this text later on after committing it to the mutation - let unbounded_text = unsafe { std::mem::transmute(*value) }; - self.mutations.push(CreateTextNode { - value: unbounded_text, - id, - }); - - 1 - } - - DynamicNode::Placeholder(slot) => { - let id = self.next_element(template, template.template.node_paths[*id]); - slot.set(id); - self.mutations.push(CreatePlaceholder { id }); - 1 - } - - DynamicNode::Fragment(_) | DynamicNode::Component { .. } => { - self.create_dynamic_node(template, &template.dynamic_nodes[*id], *id) - } - } + node.template + .roots + .iter() + .enumerate() + .map(|(idx, root)| match root { + DynamicText { id } | Dynamic { id } => { + nodes.next().unwrap(); + self.write_dynamic_root(node, *id) } + Element { .. } => self.write_element_root(node, idx, &mut attrs, &mut nodes), + Text { .. } => self.write_static_text_root(node, idx), + }) + .sum() + } - TemplateNode::Element { .. } | TemplateNode::Text { .. } => { - let this_id = self.next_root(template, root_idx); + fn write_static_text_root(&mut self, node: &VNode, idx: usize) -> usize { + // Simply just load the template root, no modifications needed + self.load_template_root(node, idx); - template.root_ids[root_idx].set(this_id); - self.mutations.push(LoadTemplate { - name: template.template.name, - index: root_idx, - id: this_id, - }); + // Text producs just one node on the stack + 1 + } - // we're on top of a node that has a dynamic attribute for a descendant - // Set that attribute now before the stack gets in a weird state - while let Some((mut attr_id, path)) = - dynamic_attrs.next_if(|(_, p)| p[0] == root_idx as u8) - { - // if attribute is on a root node, then we've already created the element - // Else, it's deep in the template and we should create a new id for it - let id = match path.len() { - 1 => this_id, - _ => { - let id = self - .next_element(template, template.template.attr_paths[attr_id]); - self.mutations.push(Mutation::AssignId { - path: &path[1..], - id, - }); - id - } - }; + fn write_dynamic_root(&mut self, template: &'b VNode<'b>, idx: usize) -> usize { + use DynamicNode::*; + match &template.dynamic_nodes[idx] { + node @ Fragment(_) => self.create_dynamic_node(template, node, idx), + node @ Component { .. } => self.create_dynamic_node(template, node, idx), + Placeholder(VPlaceholder { id }) => { + let id = self.set_slot(template, id, idx); + self.mutations.push(CreatePlaceholder { id }); + 1 + } + Text(VText { id, value }) => { + let id = self.set_slot(template, id, idx); + self.create_static_text(value, id); + 1 + } + } + } - loop { - let attribute = template.dynamic_attrs.get(attr_id).unwrap(); - attribute.mounted_element.set(id); + fn create_static_text(&mut self, value: &str, id: ElementId) { + // Safety: we promise not to re-alias this text later on after committing it to the mutation + let unbounded_text: &str = unsafe { std::mem::transmute(value) }; + self.mutations.push(CreateTextNode { + value: unbounded_text, + id, + }); + } - // Safety: we promise not to re-alias this text later on after committing it to the mutation - let unbounded_name: &str = - unsafe { std::mem::transmute(attribute.name) }; + /// We write all the descndent data for this element + /// + /// Elements can contain other nodes - and those nodes can be dynamic or static + /// + /// We want to make sure we write these nodes while on top of the root + fn write_element_root( + &mut self, + template: &'b VNode<'b>, + root_idx: usize, + dynamic_attrs: &mut Peekable>>, + dynamic_nodes: &mut Peekable>>, + ) -> usize { + // Load the template root and get the ID for the node on the stack + let root_on_stack = self.load_template_root(template, root_idx); - match &attribute.value { - AttributeValue::Listener(_) => { - self.mutations.push(NewEventListener { - // all listeners start with "on" - name: &unbounded_name[2..], - scope: cur_scope, - id, - }) - } - _ => { - // Safety: we promise not to re-alias this text later on after committing it to the mutation - let unbounded_value = - unsafe { std::mem::transmute(attribute.value.clone()) }; + // Write all the attributes below this root + self.write_attrs_on_root(dynamic_attrs, root_idx, root_on_stack, template); - self.mutations.push(SetAttribute { - name: unbounded_name, - value: unbounded_value, - ns: attribute.namespace, - id, - }) - } - } + // Load in all of the placeholder or dynamic content under this root too + self.load_placeholders(dynamic_nodes, root_idx, template); - // Only push the dynamic attributes forward if they match the current path (same element) - match dynamic_attrs.next_if(|(_, p)| *p == path) { - Some((next_attr_id, _)) => attr_id = next_attr_id, - None => break, - } - } - } + 1 + } - // We're on top of a node that has a dynamic child for a descendant - // Skip any node that's a root - let mut start = None; - let mut end = None; + /// Load all of the placeholder nodes for descendents of this root node + /// + /// ```rust, ignore + /// rsx! { + /// div { + /// // This is a placeholder + /// some_value, + /// + /// // Load this too + /// "{some_text}" + /// } + /// } + /// ``` + fn load_placeholders( + &mut self, + dynamic_nodes: &mut Peekable>>, + root_idx: usize, + template: &'b VNode<'b>, + ) { + let (start, end) = match collect_dyn_node_range(dynamic_nodes, root_idx) { + Some((a, b)) => (a, b), + None => return, + }; - // Collect all the dynamic nodes below this root - // We assign the start and end of the range of dynamic nodes since they area ordered in terms of tree path - // - // [0] - // [1, 1] <---| - // [1, 1, 1] <---| these are the range of dynamic nodes below root 1 - // [1, 1, 2] <---| - // [2] - // - // We collect each range and then create them and replace the placeholder in the template - while let Some((idx, p)) = - dynamic_nodes.next_if(|(_, p)| p[0] == root_idx as u8) - { - if p.len() == 1 { - continue; - } + for idx in (start..=end).rev() { + let m = self.create_dynamic_node(template, &template.dynamic_nodes[idx], idx); + if m > 0 { + // The path is one shorter because the top node is the root + let path = &template.template.node_paths[idx][1..]; + self.mutations.push(ReplacePlaceholder { m, path }); + } + } + } - if start.is_none() { - start = Some(idx); - } + fn write_attrs_on_root( + &mut self, + attrs: &mut Peekable>>, + root_idx: usize, + root: ElementId, + node: &VNode, + ) { + while let Some((mut attr_id, path)) = attrs.next_if(|(_, p)| p[0] == root_idx as u8) { + let id = self.assign_static_node_as_dynamic(path, root, node, attr_id); - end = Some(idx); - } + loop { + self.write_attribute(&node.dynamic_attrs[attr_id], id); - // - if let (Some(start), Some(end)) = (start, end) { - for idx in start..=end { - let node = &template.dynamic_nodes[idx]; - let m = self.create_dynamic_node(template, node, idx); - if m > 0 { - self.mutations.push(ReplacePlaceholder { - m, - path: &template.template.node_paths[idx][1..], - }); - } - } - } - - // elements create only one node :-) - 1 + // Only push the dynamic attributes forward if they match the current path (same element) + match attrs.next_if(|(_, p)| *p == path) { + Some((next_attr_id, _)) => attr_id = next_attr_id, + None => break, } - }; + } + } + } + + fn write_attribute(&mut self, attribute: &crate::Attribute, id: ElementId) { + // Make sure we set the attribute's associated id + attribute.mounted_element.set(id); + + // Safety: we promise not to re-alias this text later on after committing it to the mutation + let unbounded_name: &str = unsafe { std::mem::transmute(attribute.name) }; + + // match &attribute.value { + // AttributeValue::Text(value) => { + // // Safety: we promise not to re-alias this text later on after committing it to the mutation + // let unbounded_value: &str = unsafe { std::mem::transmute(*value) }; + + // self.mutations.push(SetAttribute { + // name: unbounded_name, + // value: unbounded_value, + // ns: attribute.namespace, + // id, + // }) + // } + // AttributeValue::Bool(value) => self.mutations.push(SetBoolAttribute { + // name: unbounded_name, + // value: *value, + // id, + // }), + // AttributeValue::Listener(_) => { + // self.mutations.push(NewEventListener { + // // all listeners start with "on" + // name: &unbounded_name[2..], + // id, + // }) + // } + // _ => { + + // } + // AttributeValue::Float(_) => todo!(), + // AttributeValue::Int(_) => todo!(), + // AttributeValue::Any() => todo!(), + // AttributeValue::None => todo!(), + // } + + // Safety: we promise not to re-alias this text later on after committing it to the mutation + let unbounded_value = unsafe { std::mem::transmute(attribute.value.clone()) }; + + self.mutations.push(SetAttribute { + name: unbounded_name, + value: unbounded_value, + ns: attribute.namespace, + id, + }); + } + + fn load_template_root(&mut self, template: &VNode, root_idx: usize) -> ElementId { + // Get an ID for this root since it's a real root + let this_id = self.next_root(template, root_idx); + template.root_ids[root_idx].set(Some(this_id)); + + self.mutations.push(LoadTemplate { + name: template.template.name, + index: root_idx, + id: this_id, + }); + + this_id + } + + /// We have some dynamic attributes attached to a some node + /// + /// That node needs to be loaded at runtime, so we need to give it an ID + /// + /// If the node in question is on the stack, we just return that ID + /// + /// If the node is not on the stack, we create a new ID for it and assign it + fn assign_static_node_as_dynamic( + &mut self, + path: &'static [u8], + this_id: ElementId, + template: &VNode, + attr_id: usize, + ) -> ElementId { + if path.len() == 1 { + return this_id; } - on_stack + // if attribute is on a root node, then we've already created the element + // Else, it's deep in the template and we should create a new id for it + let id = self.next_element(template, template.template.attr_paths[attr_id]); + + self.mutations.push(Mutation::AssignId { + path: &path[1..], + id, + }); + + id } /// Insert a new template into the VirtualDom's template registry @@ -201,17 +271,9 @@ impl<'b> VirtualDom { .insert(template.template.name, template.template); // If it's all dynamic nodes, then we don't need to register it - // Quickly run through and see if it's all just dynamic nodes - if template.template.roots.iter().all(|root| { - matches!( - root, - TemplateNode::Dynamic { .. } | TemplateNode::DynamicText { .. } - ) - }) { - return; + if !template.template.is_completely_dynamic() { + self.mutations.templates.push(template.template); } - - self.mutations.templates.push(template.template); } pub(crate) fn create_dynamic_node( @@ -239,7 +301,7 @@ impl<'b> VirtualDom { let new_id = self.next_element(template, template.template.node_paths[idx]); // Make sure the text node is assigned to the correct element - text.id.set(new_id); + text.id.set(Some(new_id)); // Safety: we promise not to re-alias this text later on after committing it to the mutation let value = unsafe { std::mem::transmute(text.value) }; @@ -257,7 +319,7 @@ impl<'b> VirtualDom { pub(crate) fn create_placeholder( &mut self, - slot: &Cell, + placeholder: &VPlaceholder, template: &'b VNode<'b>, idx: usize, ) -> usize { @@ -265,7 +327,7 @@ impl<'b> VirtualDom { let id = self.next_element(template, template.template.node_paths[idx]); // Make sure the text node is assigned to the correct element - slot.set(id); + placeholder.id.set(Some(id)); // Assign the ID to the existing node in the template self.mutations.push(AssignId { @@ -287,15 +349,17 @@ impl<'b> VirtualDom { component: &'b VComponent<'b>, idx: usize, ) -> usize { - let props = component - .props - .take() - .expect("Props to always exist when a component is being created"); + let scope = match component.props.take() { + Some(props) => { + let unbounded_props: Box = unsafe { std::mem::transmute(props) }; + let scope = self.new_scope(unbounded_props, component.name); + scope.id + } - let unbounded_props = unsafe { std::mem::transmute(props) }; + // Component is coming back, it probably still exists, right? + None => component.scope.get().unwrap(), + }; - let scope = self.new_scope(unbounded_props, component.name); - let scope = scope.id; component.scope.set(Some(scope)); let return_nodes = unsafe { self.run_scope(scope).extend_lifetime_ref() }; @@ -385,4 +449,37 @@ impl<'b> VirtualDom { 0 } + + fn set_slot( + &mut self, + template: &'b VNode<'b>, + slot: &'b Cell>, + id: usize, + ) -> ElementId { + let id = self.next_element(template, template.template.node_paths[id]); + slot.set(Some(id)); + id + } +} + +fn collect_dyn_node_range( + dynamic_nodes: &mut Peekable>>, + root_idx: usize, +) -> Option<(usize, usize)> { + let start = match dynamic_nodes.peek() { + Some((idx, p)) if p[0] == root_idx as u8 => *idx, + _ => return None, + }; + + let mut end = start; + + while let Some((idx, p)) = dynamic_nodes.next_if(|(_, p)| p[0] == root_idx as u8) { + if p.len() == 1 { + continue; + } + + end = idx; + } + + Some((start, end)) } diff --git a/packages/core/src/diff.rs b/packages/core/src/diff.rs index cc6c71ed4..5e0ec299f 100644 --- a/packages/core/src/diff.rs +++ b/packages/core/src/diff.rs @@ -1,14 +1,13 @@ -use std::cell::Cell; - use crate::{ + any_props::AnyProps, arena::ElementId, - innerlude::{DirtyScope, VComponent, VText}, + innerlude::{DirtyScope, VComponent, VPlaceholder, VText}, mutations::Mutation, nodes::RenderReturn, nodes::{DynamicNode, VNode}, scopes::ScopeId, virtual_dom::VirtualDom, - AttributeValue, TemplateNode, + Attribute, AttributeValue, TemplateNode, }; use rustc_hash::{FxHashMap, FxHashSet}; @@ -56,99 +55,85 @@ impl<'b> VirtualDom { fn diff_err_to_ok(&mut self, _e: &anyhow::Error, _l: &'b VNode<'b>) {} fn diff_node(&mut self, left_template: &'b VNode<'b>, right_template: &'b VNode<'b>) { - if !std::ptr::eq(left_template.template.name, right_template.template.name) - && left_template.template.name != right_template.template.name - { + // If the templates are the same, we don't need to do anything, nor do we want to + if templates_are_the_same(left_template, right_template) { + return; + } + + // If the templates are different by name, we need to replace the entire template + if templates_are_different(left_template, right_template) { return self.light_diff_templates(left_template, right_template); } - for (left_attr, right_attr) in left_template + // If the templates are the same, we can diff the attributes and children + // Start with the attributes + left_template .dynamic_attrs .iter() .zip(right_template.dynamic_attrs.iter()) - { - // Move over the ID from the old to the new - right_attr - .mounted_element - .set(left_attr.mounted_element.get()); + .for_each(|(left_attr, right_attr)| { + // Move over the ID from the old to the new + right_attr + .mounted_element + .set(left_attr.mounted_element.get()); - // We want to make sure anything listener that gets pulled is valid - if let AttributeValue::Listener(_) = right_attr.value { - self.update_template(left_attr.mounted_element.get(), right_template); - } + // We want to make sure anything listener that gets pulled is valid + if let AttributeValue::Listener(_) = right_attr.value { + self.update_template(left_attr.mounted_element.get(), right_template); + } - if left_attr.value != right_attr.value || left_attr.volatile { - // todo: add more types of attribute values - let name = unsafe { std::mem::transmute(left_attr.name) }; - let value = unsafe { std::mem::transmute(right_attr.value.clone()) }; - self.mutations.push(Mutation::SetAttribute { - id: left_attr.mounted_element.get(), - ns: right_attr.namespace, - name, - value, - }); - } - } + // If the attributes are different (or volatile), we need to update them + if left_attr.value != right_attr.value || left_attr.volatile { + self.update_attribute(right_attr, left_attr); + } + }); - for (idx, (left_node, right_node)) in left_template + // Now diff the dynamic nodes + left_template .dynamic_nodes .iter() .zip(right_template.dynamic_nodes.iter()) .enumerate() - { - match (left_node, right_node) { - (Text(left), Text(right)) => self.diff_vtext(left, right), - (Fragment(left), Fragment(right)) => self.diff_non_empty_fragment(left, right), - (Placeholder(left), Placeholder(right)) => { - right.set(left.get()); - } - (Component(left), Component(right)) => { - self.diff_vcomponent(left, right, right_template, idx) - } - (Placeholder(left), Fragment(right)) => { - self.replace_placeholder_with_nodes(left, right) - } - (Fragment(left), Placeholder(right)) => { - self.replace_nodes_with_placeholder(left, right) - } - _ => todo!(), - }; - } + .for_each(|(idx, (left_node, right_node))| { + self.diff_dynamic_node(left_node, right_node, right_template, idx); + }); - // Make sure the roots get transferred over - for (left, right) in left_template + // Make sure the roots get transferred over while we're here + left_template .root_ids .iter() .zip(right_template.root_ids.iter()) - { - right.set(left.get()); - } + .for_each(|(left, right)| right.set(left.get())); } - fn replace_placeholder_with_nodes(&mut self, l: &'b Cell, r: &'b [VNode<'b>]) { - let m = self.create_children(r); - let id = l.get(); - self.mutations.push(Mutation::ReplaceWith { id, m }); - self.reclaim(id); + fn diff_dynamic_node( + &mut self, + left_node: &'b DynamicNode<'b>, + right_node: &'b DynamicNode<'b>, + node: &'b VNode<'b>, + idx: usize, + ) { + match (left_node, right_node) { + (Text(left), Text(right)) => self.diff_vtext(left, right, node), + (Fragment(left), Fragment(right)) => self.diff_non_empty_fragment(left, right), + (Placeholder(left), Placeholder(right)) => right.id.set(left.id.get()), + (Component(left), Component(right)) => self.diff_vcomponent(left, right, node, idx), + (Placeholder(left), Fragment(right)) => self.replace_placeholder(left, right), + (Fragment(left), Placeholder(right)) => self.node_to_placeholder(left, right), + _ => todo!("This is an usual custom case for dynamic nodes. We don't know how to handle it yet."), + }; } - fn replace_nodes_with_placeholder(&mut self, l: &'b [VNode<'b>], r: &'b Cell) { - // Remove the old nodes, except for one - self.remove_nodes(&l[1..]); - - // Now create the new one - let first = self.replace_inner(&l[0]); - - // Create the placeholder first, ensuring we get a dedicated ID for the placeholder - let placeholder = self.next_element(&l[0], &[]); - r.set(placeholder); - self.mutations - .push(Mutation::CreatePlaceholder { id: placeholder }); - - self.mutations - .push(Mutation::ReplaceWith { id: first, m: 1 }); - - self.try_reclaim(first); + fn update_attribute(&mut self, right_attr: &Attribute, left_attr: &Attribute) { + // todo: add more types of attribute values + let name = unsafe { std::mem::transmute(left_attr.name) }; + let value = unsafe { std::mem::transmute(right_attr.value.clone()) }; + self.mutations.push(Mutation::SetAttribute { + id: left_attr.mounted_element.get(), + ns: right_attr.namespace, + name, + value, + }); } fn diff_vcomponent( @@ -158,6 +143,10 @@ impl<'b> VirtualDom { right_template: &'b VNode<'b>, idx: usize, ) { + if std::ptr::eq(left, right) { + return; + } + // Replace components that have different render fns if left.render_fn != right.render_fn { let created = self.create_component_node(right_template, right, idx); @@ -166,23 +155,27 @@ impl<'b> VirtualDom { .root_node() .extend_lifetime_ref() }; - let id = match head { - RenderReturn::Sync(Ok(node)) => self.replace_inner(node), + let last = match head { + RenderReturn::Sync(Ok(node)) => self.find_last_element(node), _ => todo!(), }; - self.mutations - .push(Mutation::ReplaceWith { id, m: created }); - self.drop_scope(left.scope.get().unwrap()); + self.mutations.push(Mutation::InsertAfter { + id: last, + m: created, + }); + self.remove_component_node(left, true); return; } // Make sure the new vcomponent has the right scopeid associated to it let scope_id = left.scope.get().unwrap(); + right.scope.set(Some(scope_id)); // copy out the box for both let old = self.scopes[scope_id.0].props.as_ref(); - let new = right.props.replace(None).unwrap(); + let new: Box = right.props.take().unwrap(); + let new: Box = unsafe { std::mem::transmute(new) }; // If the props are static, then we try to memoize by setting the new with the old // The target scopestate still has the reference to the old props, so there's no need to update anything @@ -192,11 +185,16 @@ impl<'b> VirtualDom { } // First, move over the props from the old to the new, dropping old props in the process - self.scopes[scope_id.0].props = unsafe { std::mem::transmute(new) }; + self.scopes[scope_id.0].props = Some(new); // Now run the component and diff it self.run_scope(scope_id); self.diff_scope(scope_id); + + self.dirty_scopes.remove(&DirtyScope { + height: self.scopes[scope_id.0].height, + id: scope_id, + }); } /// Lightly diff the two templates, checking only their roots. @@ -238,7 +236,7 @@ impl<'b> VirtualDom { /// ``` fn light_diff_templates(&mut self, left: &'b VNode<'b>, right: &'b VNode<'b>) { match matching_components(left, right) { - None => self.replace(left, right), + None => self.replace(left, [right]), Some(components) => components .into_iter() .enumerate() @@ -250,121 +248,19 @@ impl<'b> VirtualDom { /// /// This just moves the ID of the old node over to the new node, and then sets the text of the new node if it's /// different. - fn diff_vtext(&mut self, left: &'b VText<'b>, right: &'b VText<'b>) { - let id = left.id.get(); + fn diff_vtext(&mut self, left: &'b VText<'b>, right: &'b VText<'b>, node: &'b VNode<'b>) { + let id = left + .id + .get() + .unwrap_or_else(|| self.next_element(node, &[0])); - right.id.set(id); + right.id.set(Some(id)); if left.value != right.value { let value = unsafe { std::mem::transmute(right.value) }; self.mutations.push(Mutation::SetText { id, value }); } } - /// Remove all the top-level nodes, returning the firstmost root ElementId - /// - /// All IDs will be garbage collected - fn replace_inner(&mut self, node: &'b VNode<'b>) -> ElementId { - let id = match node.dynamic_root(0) { - None => node.root_ids[0].get(), - Some(Text(t)) => t.id.get(), - Some(Placeholder(e)) => e.get(), - Some(Fragment(nodes)) => { - let id = self.replace_inner(&nodes[0]); - self.remove_nodes(&nodes[1..]); - id - } - Some(Component(comp)) => { - let scope = comp.scope.get().unwrap(); - match unsafe { self.scopes[scope.0].root_node().extend_lifetime_ref() } { - RenderReturn::Sync(Ok(t)) => self.replace_inner(t), - _ => todo!("cannot handle nonstandard nodes"), - } - } - }; - - // Just remove the rest from the dom - for (idx, _) in node.template.roots.iter().enumerate().skip(1) { - self.remove_root_node(node, idx); - } - - // Garabge collect all of the nodes since this gets used in replace - self.clean_up_node(node); - - id - } - - /// Clean up the node, not generating mutations - /// - /// Simply walks through the dynamic nodes - fn clean_up_node(&mut self, node: &'b VNode<'b>) { - for (idx, dyn_node) in node.dynamic_nodes.iter().enumerate() { - // Roots are cleaned up automatically? - if node.template.node_paths[idx].len() == 1 { - continue; - } - - match dyn_node { - Component(comp) => { - let scope = comp.scope.get().unwrap(); - match unsafe { self.scopes[scope.0].root_node().extend_lifetime_ref() } { - RenderReturn::Sync(Ok(t)) => self.clean_up_node(t), - _ => todo!("cannot handle nonstandard nodes"), - }; - } - Text(t) => self.reclaim(t.id.get()), - Placeholder(t) => self.reclaim(t.get()), - Fragment(nodes) => nodes.iter().for_each(|node| self.clean_up_node(node)), - }; - } - - // we clean up nodes with dynamic attributes, provided the node is unique and not a root node - let mut id = None; - for (idx, attr) in node.dynamic_attrs.iter().enumerate() { - // We'll clean up the root nodes either way, so don't worry - if node.template.attr_paths[idx].len() == 1 { - continue; - } - - let next_id = attr.mounted_element.get(); - - if id == Some(next_id) { - continue; - } - - id = Some(next_id); - - self.reclaim(next_id); - } - } - - fn remove_root_node(&mut self, node: &'b VNode<'b>, idx: usize) { - match node.dynamic_root(idx) { - Some(Text(i)) => { - let id = i.id.get(); - self.mutations.push(Mutation::Remove { id }); - self.reclaim(id); - } - Some(Placeholder(e)) => { - let id = e.get(); - self.mutations.push(Mutation::Remove { id }); - self.reclaim(id); - } - Some(Fragment(nodes)) => self.remove_nodes(nodes), - Some(Component(comp)) => { - let scope = comp.scope.get().unwrap(); - match unsafe { self.scopes[scope.0].root_node().extend_lifetime_ref() } { - RenderReturn::Sync(Ok(t)) => self.remove_node(t), - _ => todo!("cannot handle nonstandard nodes"), - }; - } - None => { - let id = node.root_ids[idx].get(); - self.mutations.push(Mutation::Remove { id }); - self.reclaim(id); - } - }; - } - fn diff_non_empty_fragment(&mut self, old: &'b [VNode<'b>], new: &'b [VNode<'b>]) { let new_is_keyed = new[0].key.is_some(); let old_is_keyed = old[0].key.is_some(); @@ -615,7 +511,7 @@ impl<'b> VirtualDom { if shared_keys.is_empty() { if old.get(0).is_some() { self.remove_nodes(&old[1..]); - self.replace_many(&old[0], new); + self.replace(&old[0], new); } else { // I think this is wrong - why are we appending? // only valid of the if there are no trailing elements @@ -631,7 +527,7 @@ impl<'b> VirtualDom { for child in old { let key = child.key.unwrap(); if !shared_keys.contains(&key) { - self.remove_node(child); + self.remove_node(child, true); } } @@ -734,91 +630,57 @@ impl<'b> VirtualDom { } } - /// Remove these nodes from the dom - /// Wont generate mutations for the inner nodes - fn remove_nodes(&mut self, nodes: &'b [VNode<'b>]) { - // note that we iterate in reverse to unlink lists of nodes in their rough index order - nodes.iter().rev().for_each(|node| self.remove_node(node)); - } - - fn remove_node(&mut self, node: &'b VNode<'b>) { - for (idx, _) in node.template.roots.iter().enumerate() { - let id = match node.dynamic_root(idx) { - Some(Text(t)) => t.id.get(), - Some(Placeholder(t)) => t.get(), - Some(Fragment(t)) => return self.remove_nodes(t), - Some(Component(comp)) => return self.remove_component(comp.scope.get().unwrap()), - None => node.root_ids[idx].get(), - }; - - self.mutations.push(Mutation::Remove { id }) - } - - self.clean_up_node(node); - - for root in node.root_ids { - let id = root.get(); - if id.0 != 0 { - self.reclaim(id); - } - } - } - - fn remove_component(&mut self, scope_id: ScopeId) { - let height = self.scopes[scope_id.0].height; - self.dirty_scopes.remove(&DirtyScope { - height, - id: scope_id, - }); - - // I promise, since we're descending down the tree, this is safe - match unsafe { self.scopes[scope_id.0].root_node().extend_lifetime_ref() } { - RenderReturn::Sync(Ok(t)) => self.remove_node(t), - _ => todo!("cannot handle nonstandard nodes"), - } - } - /// Push all the real nodes on the stack fn push_all_real_nodes(&mut self, node: &'b VNode<'b>) -> usize { - let mut onstack = 0; - - for (idx, _) in node.template.roots.iter().enumerate() { - match node.dynamic_root(idx) { - Some(Text(t)) => { - self.mutations.push(Mutation::PushRoot { id: t.id.get() }); - onstack += 1; - } - Some(Placeholder(t)) => { - self.mutations.push(Mutation::PushRoot { id: t.get() }); - onstack += 1; - } - Some(Fragment(nodes)) => { - for node in *nodes { - onstack += self.push_all_real_nodes(node); + node.template + .roots + .iter() + .enumerate() + .map(|(idx, _)| { + let node = match node.dynamic_root(idx) { + Some(node) => node, + None => { + self.mutations.push(Mutation::PushRoot { + id: node.root_ids[idx].get().unwrap(), + }); + return 1; } - } - Some(Component(comp)) => { - let scope = comp.scope.get().unwrap(); - onstack += + }; + + match node { + Text(t) => { + self.mutations.push(Mutation::PushRoot { + id: t.id.get().unwrap(), + }); + 1 + } + Placeholder(t) => { + self.mutations.push(Mutation::PushRoot { + id: t.id.get().unwrap(), + }); + 1 + } + Fragment(nodes) => nodes + .iter() + .map(|node| self.push_all_real_nodes(node)) + .count(), + + Component(comp) => { + let scope = comp.scope.get().unwrap(); match unsafe { self.scopes[scope.0].root_node().extend_lifetime_ref() } { RenderReturn::Sync(Ok(node)) => self.push_all_real_nodes(node), _ => todo!(), } + } } - None => { - self.mutations.push(Mutation::PushRoot { - id: node.root_ids[idx].get(), - }); - onstack += 1; - } - }; - } - - onstack + }) + .count() } - fn create_children(&mut self, nodes: &'b [VNode<'b>]) -> usize { - nodes.iter().fold(0, |acc, child| acc + self.create(child)) + fn create_children(&mut self, nodes: impl IntoIterator>) -> usize { + nodes + .into_iter() + .fold(0, |acc, child| acc + self.create(child)) } fn create_and_insert_before(&mut self, new: &'b [VNode<'b>], before: &'b VNode<'b>) { @@ -833,12 +695,140 @@ impl<'b> VirtualDom { self.mutations.push(Mutation::InsertAfter { id, m }) } + /// Simply replace a placeholder with a list of nodes + fn replace_placeholder(&mut self, l: &'b VPlaceholder, r: &'b [VNode<'b>]) { + let m = self.create_children(r); + let id = l.id.get().unwrap(); + self.mutations.push(Mutation::ReplaceWith { id, m }); + self.reclaim(id); + } + + fn replace(&mut self, left: &'b VNode<'b>, right: impl IntoIterator>) { + let m = self.create_children(right); + + let id = self.find_last_element(left); + + self.mutations.push(Mutation::InsertAfter { id, m }); + + self.remove_node(left, true); + } + + fn node_to_placeholder(&mut self, l: &'b [VNode<'b>], r: &'b VPlaceholder) { + // Create the placeholder first, ensuring we get a dedicated ID for the placeholder + let placeholder = self.next_element(&l[0], &[]); + + r.id.set(Some(placeholder)); + + let id = self.find_last_element(&l[0]); + + self.mutations + .push(Mutation::CreatePlaceholder { id: placeholder }); + + self.mutations.push(Mutation::InsertAfter { id, m: 1 }); + + self.remove_nodes(l); + } + + /// Remove these nodes from the dom + /// Wont generate mutations for the inner nodes + fn remove_nodes(&mut self, nodes: &'b [VNode<'b>]) { + nodes.iter().for_each(|node| self.remove_node(node, true)); + } + + fn remove_node(&mut self, node: &'b VNode<'b>, gen_muts: bool) { + // Clean up the roots, assuming we need to generate mutations for these + for (idx, _) in node.template.roots.iter().enumerate() { + if let Some(dy) = node.dynamic_root(idx) { + self.remove_dynamic_node(dy, gen_muts); + } else { + let id = node.root_ids[idx].get().unwrap(); + if gen_muts { + self.mutations.push(Mutation::Remove { id }); + } + self.reclaim(id); + } + } + + for (idx, dyn_node) in node.dynamic_nodes.iter().enumerate() { + // Roots are cleaned up automatically above + if node.template.node_paths[idx].len() == 1 { + continue; + } + + self.remove_dynamic_node(dyn_node, false); + } + + // we clean up nodes with dynamic attributes, provided the node is unique and not a root node + let mut id = None; + for (idx, attr) in node.dynamic_attrs.iter().enumerate() { + // We'll clean up the root nodes either way, so don't worry + if node.template.attr_paths[idx].len() == 1 { + continue; + } + + let next_id = attr.mounted_element.get(); + + if id == Some(next_id) { + continue; + } + + id = Some(next_id); + + self.reclaim(next_id); + } + } + + fn remove_dynamic_node(&mut self, node: &DynamicNode, gen_muts: bool) { + match node { + Component(comp) => self.remove_component_node(comp, gen_muts), + Text(t) => self.remove_text_node(t), + Placeholder(t) => self.remove_placeholder(t), + Fragment(nodes) => nodes + .iter() + .for_each(|node| self.remove_node(node, gen_muts)), + }; + } + + fn remove_placeholder(&mut self, t: &VPlaceholder) { + if let Some(id) = t.id.take() { + self.reclaim(id) + } + } + + fn remove_text_node(&mut self, t: &VText) { + if let Some(id) = t.id.take() { + self.reclaim(id) + } + } + + fn remove_component_node(&mut self, comp: &VComponent, gen_muts: bool) { + if let Some(scope) = comp.scope.take() { + match unsafe { self.scopes[scope.0].root_node().extend_lifetime_ref() } { + RenderReturn::Sync(Ok(t)) => self.remove_node(t, gen_muts), + _ => todo!("cannot handle nonstandard nodes"), + }; + + let props = self.scopes[scope.0].props.take(); + + self.dirty_scopes.remove(&DirtyScope { + height: self.scopes[scope.0].height, + id: scope, + }); + + *comp.props.borrow_mut() = unsafe { std::mem::transmute(props) }; + + // make sure to wipe any of its props and listeners + self.ensure_drop_safety(scope); + self.scopes.remove(scope.0); + } + } + fn find_first_element(&self, node: &'b VNode<'b>) -> ElementId { match node.dynamic_root(0) { - None => node.root_ids[0].get(), - Some(Text(t)) => t.id.get(), + None => node.root_ids[0].get().unwrap(), + Some(Text(t)) => t.id.get().unwrap(), Some(Fragment(t)) => self.find_first_element(&t[0]), - Some(Placeholder(t)) => t.get(), + Some(Placeholder(t)) => t.id.get().unwrap(), Some(Component(comp)) => { let scope = comp.scope.get().unwrap(); match unsafe { self.scopes[scope.0].root_node().extend_lifetime_ref() } { @@ -851,10 +841,10 @@ impl<'b> VirtualDom { fn find_last_element(&self, node: &'b VNode<'b>) -> ElementId { match node.dynamic_root(node.template.roots.len() - 1) { - None => node.root_ids.last().unwrap().get(), - Some(Text(t)) => t.id.get(), + None => node.root_ids.last().unwrap().get().unwrap(), + Some(Text(t)) => t.id.get().unwrap(), Some(Fragment(t)) => self.find_last_element(t.last().unwrap()), - Some(Placeholder(t)) => t.get(), + Some(Placeholder(t)) => t.id.get().unwrap(), Some(Component(comp)) => { let scope = comp.scope.get().unwrap(); match unsafe { self.scopes[scope.0].root_node().extend_lifetime_ref() } { @@ -864,28 +854,21 @@ impl<'b> VirtualDom { } } } +} - fn replace(&mut self, left: &'b VNode<'b>, right: &'b VNode<'b>) { - let first = self.find_first_element(left); - let id = self.replace_inner(left); - let created = self.create(right); - self.mutations.push(Mutation::ReplaceWith { - id: first, - m: created, - }); - self.try_reclaim(id); - } +/// Are the templates the same? +/// +/// We need to check for the obvious case, and the non-obvious case where the template as cloned +/// +/// We use the pointer of the dynamic_node list in this case +fn templates_are_the_same<'b>(left_template: &'b VNode<'b>, right_template: &'b VNode<'b>) -> bool { + std::ptr::eq(left_template, right_template) + || std::ptr::eq(left_template.dynamic_nodes, right_template.dynamic_nodes) +} - fn replace_many(&mut self, left: &'b VNode<'b>, right: &'b [VNode<'b>]) { - let first = self.find_first_element(left); - let id = self.replace_inner(left); - let created = self.create_children(right); - self.mutations.push(Mutation::ReplaceWith { - id: first, - m: created, - }); - self.try_reclaim(id); - } +fn templates_are_different(left_template: &VNode, right_template: &VNode) -> bool { + !std::ptr::eq(left_template.template.name, right_template.template.name) + && left_template.template.name != right_template.template.name } fn matching_components<'a>( diff --git a/packages/core/src/dirty_scope.rs b/packages/core/src/dirty_scope.rs index 4dfbd9bd3..87fff3f45 100644 --- a/packages/core/src/dirty_scope.rs +++ b/packages/core/src/dirty_scope.rs @@ -1,19 +1,21 @@ +use std::hash::Hash; + use crate::ScopeId; -#[derive(Debug, Clone, PartialEq, Eq, Hash)] +#[derive(Debug, Clone, Eq, PartialOrd, Ord)] pub struct DirtyScope { pub height: u32, pub id: ScopeId, } -impl PartialOrd for DirtyScope { - fn partial_cmp(&self, other: &Self) -> Option { - Some(self.height.cmp(&other.height)) +impl PartialEq for DirtyScope { + fn eq(&self, other: &Self) -> bool { + self.id == other.id } } -impl Ord for DirtyScope { - fn cmp(&self, other: &Self) -> std::cmp::Ordering { - self.height.cmp(&other.height) +impl Hash for DirtyScope { + fn hash(&self, state: &mut H) { + self.id.hash(state); } } diff --git a/packages/core/src/lazynodes.rs b/packages/core/src/lazynodes.rs index eca7829dc..2b7c4feb3 100644 --- a/packages/core/src/lazynodes.rs +++ b/packages/core/src/lazynodes.rs @@ -25,7 +25,11 @@ use crate::{innerlude::VNode, ScopeState}; /// LazyNodes::new(|f| f.element("div", [], [], [] None)) /// ``` pub struct LazyNodes<'a, 'b> { + #[cfg(not(miri))] inner: SmallBox VNode<'a> + 'b, S16>, + + #[cfg(miri)] + inner: Box VNode<'a> + 'b>, } impl<'a, 'b> LazyNodes<'a, 'b> { @@ -39,10 +43,17 @@ impl<'a, 'b> LazyNodes<'a, 'b> { let mut slot = Some(val); Self { + #[cfg(not(miri))] inner: smallbox!(move |f| { let val = slot.take().expect("cannot call LazyNodes twice"); val(f) }), + + #[cfg(miri)] + inner: Box::new(move |f| { + let val = slot.take().expect("cannot call LazyNodes twice"); + val(f) + }), } } diff --git a/packages/core/src/mutations.rs b/packages/core/src/mutations.rs index 1cb57e48a..1d27769a2 100644 --- a/packages/core/src/mutations.rs +++ b/packages/core/src/mutations.rs @@ -219,9 +219,6 @@ pub enum Mutation<'a> { /// The name of the event to listen for. name: &'a str, - /// The ID of the node to attach the listener to. - scope: ScopeId, - /// The ID of the node to attach the listener to. id: ElementId, }, diff --git a/packages/core/src/nodes.rs b/packages/core/src/nodes.rs index 07f9739f6..33f2e5cf2 100644 --- a/packages/core/src/nodes.rs +++ b/packages/core/src/nodes.rs @@ -46,7 +46,7 @@ pub struct VNode<'a> { /// The IDs for the roots of this template - to be used when moving the template around and removing it from /// the actual Dom - pub root_ids: &'a [Cell], + pub root_ids: &'a [Cell>], /// The dynamic parts of the template pub dynamic_nodes: &'a [DynamicNode<'a>], @@ -128,6 +128,18 @@ pub struct Template<'a> { pub attr_paths: &'a [&'a [u8]], } +impl<'a> Template<'a> { + /// Is this template worth caching at all, since it's completely runtime? + /// + /// There's no point in saving templates that are completely dynamic, since they'll be recreated every time anyway. + pub fn is_completely_dynamic(&self) -> bool { + use TemplateNode::*; + self.roots + .iter() + .all(|root| matches!(root, Dynamic { .. } | DynamicText { .. })) + } +} + /// A statically known node in a layout. /// /// This can be created at compile time, saving the VirtualDom time when diffing the tree @@ -201,7 +213,7 @@ pub enum DynamicNode<'a> { /// Used by suspense when a node isn't ready and by fragments that don't render anything /// /// In code, this is just an ElementId whose initial value is set to 0 upon creation - Placeholder(Cell), + Placeholder(VPlaceholder), /// A list of VNodes. /// @@ -236,7 +248,7 @@ pub struct VComponent<'a> { /// It is possible that components get folded at comppile time, so these shouldn't be really used as a key pub render_fn: *const (), - pub(crate) props: Cell + 'a>>>, + pub(crate) props: RefCell + 'a>>>, } impl<'a> std::fmt::Debug for VComponent<'a> { @@ -256,7 +268,14 @@ pub struct VText<'a> { pub value: &'a str, /// The ID of this node in the real DOM - pub id: Cell, + pub id: Cell>, +} + +/// A placeholder node, used by suspense and fragments +#[derive(Debug, Default)] +pub struct VPlaceholder { + /// The ID of this node in the real DOM + pub id: Cell>, } /// An attribute of the TemplateNode, created at compile time @@ -577,6 +596,12 @@ impl<'a> IntoDynNode<'a> for VNode<'a> { } } +impl<'a> IntoDynNode<'a> for DynamicNode<'a> { + fn into_vnode(self, _cx: &'a ScopeState) -> DynamicNode<'a> { + self + } +} + // An element that's an error is currently lost into the ether impl<'a> IntoDynNode<'a> for Element<'a> { fn into_vnode(self, _cx: &'a ScopeState) -> DynamicNode<'a> { diff --git a/packages/core/src/scope_arena.rs b/packages/core/src/scope_arena.rs index db328fd93..9c0f96db3 100644 --- a/packages/core/src/scope_arena.rs +++ b/packages/core/src/scope_arena.rs @@ -32,8 +32,9 @@ impl VirtualDom { parent, id, height, - props: Some(props), name, + props: Some(props), + tasks: self.scheduler.clone(), placeholder: Default::default(), node_arena_1: BumpFrame::new(0), node_arena_2: BumpFrame::new(0), @@ -43,7 +44,8 @@ impl VirtualDom { hook_list: Default::default(), hook_idx: Default::default(), shared_contexts: Default::default(), - tasks: self.scheduler.clone(), + borrowed_props: Default::default(), + listeners: Default::default(), })) } @@ -75,7 +77,7 @@ impl VirtualDom { scope.hook_idx.set(0); // safety: due to how we traverse the tree, we know that the scope is not currently aliased - let props = scope.props.as_ref().unwrap().as_ref(); + let props: &dyn AnyProps = scope.props.as_ref().unwrap().as_ref(); let props: &dyn AnyProps = mem::transmute(props); props.render(scope).extend_lifetime() }; diff --git a/packages/core/src/scopes.rs b/packages/core/src/scopes.rs index f975d01be..84891384b 100644 --- a/packages/core/src/scopes.rs +++ b/packages/core/src/scopes.rs @@ -87,6 +87,9 @@ pub struct ScopeState { pub(crate) tasks: Rc, pub(crate) spawned_tasks: FxHashSet, + pub(crate) borrowed_props: RefCell>>, + pub(crate) listeners: RefCell>>, + pub(crate) props: Option>>, pub(crate) placeholder: Cell>, } @@ -237,7 +240,9 @@ impl<'src> ScopeState { /// This method should be used when you want to schedule an update for a component pub fn schedule_update_any(&self) -> Arc { let chan = self.tasks.sender.clone(); - Arc::new(move |id| drop(chan.unbounded_send(SchedulerMsg::Immediate(id)))) + Arc::new(move |id| { + chan.unbounded_send(SchedulerMsg::Immediate(id)).unwrap(); + }) } /// Mark this scope as dirty, and schedule a render for it. @@ -367,7 +372,25 @@ impl<'src> ScopeState { /// } ///``` pub fn render(&'src self, rsx: LazyNodes<'src, '_>) -> Element<'src> { - Ok(rsx.call(self)) + let element = rsx.call(self); + + let mut listeners = self.listeners.borrow_mut(); + for attr in element.dynamic_attrs { + if let AttributeValue::Listener(_) = attr.value { + let unbounded = unsafe { std::mem::transmute(attr as *const Attribute) }; + listeners.push(unbounded); + } + } + + let mut props = self.borrowed_props.borrow_mut(); + for node in element.dynamic_nodes { + if let DynamicNode::Component(comp) = node { + let unbounded = unsafe { std::mem::transmute(comp as *const VComponent) }; + props.push(unbounded); + } + } + + Ok(element) } /// Create a dynamic text node using [`Arguments`] and the [`ScopeState`]'s internal [`Bump`] allocator @@ -448,7 +471,7 @@ impl<'src> ScopeState { name: fn_name, render_fn: component as *const (), static_props: P::IS_STATIC, - props: Cell::new(Some(extended)), + props: RefCell::new(Some(extended)), scope: Cell::new(None), }) } diff --git a/packages/core/src/virtual_dom.rs b/packages/core/src/virtual_dom.rs index 01c0b77c6..ea6556b38 100644 --- a/packages/core/src/virtual_dom.rs +++ b/packages/core/src/virtual_dom.rs @@ -279,8 +279,10 @@ impl VirtualDom { /// /// Whenever the VirtualDom "works", it will re-render this scope pub fn mark_dirty(&mut self, id: ScopeId) { - let height = self.scopes[id.0].height; - self.dirty_scopes.insert(DirtyScope { height, id }); + if let Some(scope) = self.scopes.get(id.0) { + let height = scope.height; + self.dirty_scopes.insert(DirtyScope { height, id }); + } } /// Determine whether or not a scope is currently in a suspended state @@ -516,6 +518,8 @@ impl VirtualDom { pub async fn render_with_deadline(&mut self, deadline: impl Future) -> Mutations { pin_mut!(deadline); + self.process_events(); + loop { // first, unload any complete suspense trees for finished_fiber in self.finished_fibers.drain(..) { @@ -542,6 +546,11 @@ impl VirtualDom { if let Some(dirty) = self.dirty_scopes.iter().next().cloned() { self.dirty_scopes.remove(&dirty); + // If the scope doesn't exist for whatever reason, then we should skip it + if !self.scopes.contains(dirty.id.0) { + continue; + } + // if the scope is currently suspended, then we should skip it, ignoring any tasks calling for an update if self.is_scope_suspended(dirty.id) { continue; diff --git a/packages/core/tests/kitchen_sink.rs b/packages/core/tests/kitchen_sink.rs index 1201f4e91..22ed1f26d 100644 --- a/packages/core/tests/kitchen_sink.rs +++ b/packages/core/tests/kitchen_sink.rs @@ -40,7 +40,7 @@ fn dual_stream() { id: ElementId(1), ns: None, }, - NewEventListener { name: "click", scope: ScopeId(0), id: ElementId(1) }, + NewEventListener { name: "click", id: ElementId(1) }, HydrateText { path: &[0, 0], value: "123", id: ElementId(2) }, AppendChildren { id: ElementId(0), m: 1 }, ] diff --git a/packages/core/tests/miri_simple.rs b/packages/core/tests/miri_simple.rs index 19d3a44a0..6da2c4bf4 100644 --- a/packages/core/tests/miri_simple.rs +++ b/packages/core/tests/miri_simple.rs @@ -66,7 +66,7 @@ fn contexts_drop() { fn tasks_drop() { fn app(cx: Scope) -> Element { cx.spawn(async { - tokio::time::sleep(std::time::Duration::from_millis(100000)).await; + // tokio::time::sleep(std::time::Duration::from_millis(100000)).await; }); cx.render(rsx! { diff --git a/packages/core/tests/miri_stress.rs b/packages/core/tests/miri_stress.rs index 2d9760e5d..160baa25d 100644 --- a/packages/core/tests/miri_stress.rs +++ b/packages/core/tests/miri_stress.rs @@ -12,9 +12,7 @@ fn test_memory_leak() { fn app(cx: Scope) -> Element { let val = cx.generation(); - cx.spawn(async { - tokio::time::sleep(std::time::Duration::from_millis(100000)).await; - }); + cx.spawn(async {}); if val == 2 || val == 4 { return cx.render(rsx!(())); diff --git a/packages/desktop/Cargo.toml b/packages/desktop/Cargo.toml index 58e947574..4aaae6c64 100644 --- a/packages/desktop/Cargo.toml +++ b/packages/desktop/Cargo.toml @@ -20,7 +20,7 @@ serde = "1.0.136" serde_json = "1.0.79" thiserror = "1.0.30" log = "0.4.14" -wry = { version = "0.22.0" } +wry = { version = "0.23.4" } futures-channel = "0.3.21" tokio = { version = "1.16.1", features = [ "sync", diff --git a/packages/interpreter/src/sledgehammer_bindings.rs b/packages/interpreter/src/sledgehammer_bindings.rs index 9be487c58..a81e16235 100644 --- a/packages/interpreter/src/sledgehammer_bindings.rs +++ b/packages/interpreter/src/sledgehammer_bindings.rs @@ -210,7 +210,17 @@ mod js { "{nodes[$id$] = LoadChild($ptr$, $len$);}" } fn hydrate_text(ptr: u32, len: u8, value: &str, id: u32) { - "{node = LoadChild($ptr$, $len$); node.textContent = $value$; nodes[$id$] = node;}" + r#"{ + node = LoadChild($ptr$, $len$); + if (node.nodeType == Node.TEXT_NODE) { + node.textContent = value; + } else { + let text = document.createTextNode(value); + node.replaceWith(text); + node = text; + } + nodes[$id$] = node; + }"# } fn replace_placeholder(ptr: u32, len: u8, n: u32) { "{els = stack.splice(stack.length - $n$); node = LoadChild($ptr$, $len$); node.replaceWith(...els);}" diff --git a/packages/native-core/src/real_dom.rs b/packages/native-core/src/real_dom.rs index 5fe3113ce..526fbdc45 100644 --- a/packages/native-core/src/real_dom.rs +++ b/packages/native-core/src/real_dom.rs @@ -287,7 +287,7 @@ impl RealDom { } mark_dirty(node_id, NodeMask::new().with_text(), &mut nodes_updated); } - NewEventListener { name, scope: _, id } => { + NewEventListener { name, id } => { let node_id = self.element_to_node_id(id); let node = self.tree.get_mut(node_id).unwrap(); if let NodeType::Element { listeners, .. } = &mut node.node_data.node_type { diff --git a/packages/router/Cargo.toml b/packages/router/Cargo.toml index 0e7cf0927..5b72e8117 100644 --- a/packages/router/Cargo.toml +++ b/packages/router/Cargo.toml @@ -36,6 +36,7 @@ thiserror = "1.0.30" futures-util = "0.3.21" serde = { version = "1", optional = true } serde_urlencoded = { version = "0.7.1", optional = true } +simple_logger = "4.0.0" [features] default = ["query"] @@ -50,6 +51,9 @@ wasm-logger = "0.2.0" wasm-bindgen-test = "0.3" gloo-utils = "0.1.2" dioxus-web = { path = "../web" } +# dioxus-desktop = { path = "../desktop", optional = true } + +# not wasm [target.wasm32-unknown-unknown.dev-dependencies] dioxus-router = { path = ".", features = ["web"] } diff --git a/packages/router/examples/simple.rs b/packages/router/examples/simple.rs index 4c16c29a1..9b94c7a9d 100644 --- a/packages/router/examples/simple.rs +++ b/packages/router/examples/simple.rs @@ -16,6 +16,7 @@ fn app(cx: Scope) -> Element { Link { to: "/blog", li { "blog" } } Link { to: "/blog/tim", li { "tims' blog" } } Link { to: "/blog/bill", li { "bills' blog" } } + Link { to: "/blog/james", li { "james amazing' blog" } } Link { to: "/apples", li { "go to apples" } } } Route { to: "/", Home {} } @@ -42,5 +43,10 @@ fn BlogPost(cx: Scope) -> Element { log::trace!("rendering blog post {}", id); - cx.render(rsx! { div { "{id:?}" } }) + cx.render(rsx! { + div { + h3 { "blog post: {id:?}" } + Link { to: "/blog/", "back to blog list" } + } + }) } diff --git a/packages/router/src/components/link.rs b/packages/router/src/components/link.rs index 5098090b2..d077966eb 100644 --- a/packages/router/src/components/link.rs +++ b/packages/router/src/components/link.rs @@ -120,9 +120,17 @@ pub fn Link<'a>(cx: Scope<'a, LinkProps<'a>>) -> Element { prevent_default: "{prevent_default}", target: format_args!("{}", if * new_tab { "_blank" } else { "" }), onclick: move |_| { + log::trace!("Clicked link to {}", to); + if !outerlink { if let Some(service) = svc { + log::trace!("Pushing route to {}", to); service.push_route(to, cx.props.title.map(|f| f.to_string()), None); + + #[cfg(feature = "web")] + { + web_sys::window().unwrap().scroll_to_with_x_and_y(0.0, 0.0); + } } else { log::error!( "Attempted to create a Link to {} outside of a Router context", cx.props diff --git a/packages/router/src/components/route.rs b/packages/router/src/components/route.rs index 7bfc48993..cf665d2e1 100644 --- a/packages/router/src/components/route.rs +++ b/packages/router/src/components/route.rs @@ -45,13 +45,13 @@ pub fn Route<'a>(cx: Scope<'a, RouteProps<'a>>) -> Element { router_root.register_total_route(route_context.total_route, cx.scope_id()); }); - log::trace!("Checking Route: {:?}", cx.props.to); + log::debug!("Checking Route: {:?}", cx.props.to); if router_root.should_render(cx.scope_id()) { - log::trace!("Route should render: {:?}", cx.scope_id()); + log::debug!("Route should render: {:?}", cx.scope_id()); cx.render(rsx!(&cx.props.children)) } else { - log::trace!("Route should *not* render: {:?}", cx.scope_id()); + log::debug!("Route should *not* render: {:?}", cx.scope_id()); cx.render(rsx!(())) } } diff --git a/packages/router/src/service.rs b/packages/router/src/service.rs index 10e2d7d33..e089ca1be 100644 --- a/packages/router/src/service.rs +++ b/packages/router/src/service.rs @@ -180,6 +180,7 @@ impl RouterService { (self.regen_any_route)(self.router_id); for listener in self.onchange_listeners.borrow().iter() { + log::trace!("Regenerating scope {:?}", listener); (self.regen_any_route)(*listener); } diff --git a/packages/rsx/src/element.rs b/packages/rsx/src/element.rs index 88699b79e..f654c5ae4 100644 --- a/packages/rsx/src/element.rs +++ b/packages/rsx/src/element.rs @@ -45,7 +45,7 @@ impl Parse for Element { content.parse::()?; - if content.peek(LitStr) && content.peek2(Token![,]) { + if content.peek(LitStr) { let value = content.parse()?; attributes.push(ElementAttrNamed { el_name: el_name.clone(), @@ -53,7 +53,6 @@ impl Parse for Element { }); } else { let value = content.parse::()?; - attributes.push(ElementAttrNamed { el_name: el_name.clone(), attr: ElementAttr::CustomAttrExpression { name, value }, diff --git a/packages/rsx/src/lib.rs b/packages/rsx/src/lib.rs index 913ff8660..cd2778428 100644 --- a/packages/rsx/src/lib.rs +++ b/packages/rsx/src/lib.rs @@ -147,7 +147,8 @@ impl<'a> ToTokens for TemplateRenderer<'a> { parent: None, key: #key_tokens, template: TEMPLATE, - root_ids: std::cell::Cell::from_mut( __cx.bump().alloc([::dioxus::core::ElementId(0); #num_roots]) as &mut [::dioxus::core::ElementId]).as_slice_of_cells(), + root_ids: std::cell::Cell::from_mut( __cx.bump().alloc([None; #num_roots]) as &mut _).as_slice_of_cells(), + // root_ids: std::cell::Cell::from_mut( __cx.bump().alloc([None; #num_roots]) as &mut [::dioxus::core::ElementId]).as_slice_of_cells(), dynamic_nodes: __cx.bump().alloc([ #( #node_printer ),* ]), dynamic_attrs: __cx.bump().alloc([ #( #dyn_attr_printer ),* ]), } diff --git a/packages/tui/examples/tui_colorpicker.rs b/packages/tui/examples/tui_colorpicker.rs index edbcbdddc..951c4d1e5 100644 --- a/packages/tui/examples/tui_colorpicker.rs +++ b/packages/tui/examples/tui_colorpicker.rs @@ -17,12 +17,14 @@ fn app(cx: Scope) -> Element { width: "100%", background_color: "hsl({hue}, 70%, {brightness}%)", onmousemove: move |evt| { - if let RenderReturn::Sync(Ok(node))=cx.root_node(){ - let node = tui_query.get(node.root_ids[0].get()); - let Size{width, height} = node.size().unwrap(); - let pos = evt.inner().element_coordinates(); - hue.set((pos.x as f32/width as f32)*255.0); - brightness.set((pos.y as f32/height as f32)*100.0); + if let RenderReturn::Sync(Ok(node)) = cx.root_node() { + if let Some(id) = node.root_ids[0].get() { + let node = tui_query.get(id); + let Size{width, height} = node.size().unwrap(); + let pos = evt.inner().element_coordinates(); + hue.set((pos.x as f32/width as f32)*255.0); + brightness.set((pos.y as f32/height as f32)*100.0); + } } }, "hsl({hue}, 70%, {brightness}%)", diff --git a/packages/tui/src/widgets/mod.rs b/packages/tui/src/widgets/mod.rs index 916295e50..25201bddb 100644 --- a/packages/tui/src/widgets/mod.rs +++ b/packages/tui/src/widgets/mod.rs @@ -11,7 +11,7 @@ pub use input::*; pub(crate) fn get_root_id(cx: Scope) -> Option { if let RenderReturn::Sync(Ok(sync)) = cx.root_node() { - sync.root_ids.get(0).map(|id| id.get()) + sync.root_ids.get(0).and_then(|id| id.get()) } else { None } diff --git a/packages/web/src/dom.rs b/packages/web/src/dom.rs index 60dc6b2b1..29a73b386 100644 --- a/packages/web/src/dom.rs +++ b/packages/web/src/dom.rs @@ -7,7 +7,7 @@ //! - tests to ensure dyn_into works for various event types. //! - Partial delegation?> -use dioxus_core::{Mutation, Template, TemplateAttribute, TemplateNode}; +use dioxus_core::{ElementId, Mutation, Template, TemplateAttribute, TemplateNode}; use dioxus_html::{event_bubbles, CompositionData, FormData}; use dioxus_interpreter_js::{save_template, Channel}; use futures_channel::mpsc; @@ -25,8 +25,16 @@ pub struct WebsysDom { interpreter: Channel, } +pub struct UiEvent { + pub name: String, + pub bubbles: bool, + pub element: ElementId, + pub data: Rc, + pub event: Event, +} + impl WebsysDom { - pub fn new(cfg: Config, event_channel: mpsc::UnboundedSender) -> Self { + pub fn new(cfg: Config, event_channel: mpsc::UnboundedSender) -> Self { // eventually, we just want to let the interpreter do all the work of decoding events into our event type // a match here in order to avoid some error during runtime browser test let document = load_document(); @@ -38,7 +46,28 @@ impl WebsysDom { let handler: Closure = Closure::wrap(Box::new(move |event: &web_sys::Event| { - let _ = event_channel.unbounded_send(event.clone()); + let name = event.type_(); + let element = walk_event_for_id(event); + let bubbles = dioxus_html::event_bubbles(name.as_str()); + if let Some((element, target)) = element { + if target + .get_attribute("dioxus-prevent-default") + .as_deref() + .map(|f| f.trim_start_matches("on")) + == Some(&name) + { + event.prevent_default(); + } + + let data = virtual_event_from_websys_event(event.clone(), target); + let _ = event_channel.unbounded_send(UiEvent { + name, + bubbles, + element, + data, + event: event.clone(), + }); + } })); dioxus_interpreter_js::initilize(root.unchecked_into(), handler.as_ref().unchecked_ref()); @@ -56,8 +85,6 @@ impl WebsysDom { } pub fn load_templates(&mut self, templates: &[Template]) { - log::debug!("Loading templates {:?}", templates); - for template in templates { let mut roots = vec![]; @@ -324,3 +351,26 @@ fn read_input_to_data(target: Element) -> Rc { files: None, }) } + +fn walk_event_for_id(event: &web_sys::Event) -> Option<(ElementId, web_sys::Element)> { + use wasm_bindgen::JsCast; + + let mut target = event + .target() + .expect("missing target") + .dyn_into::() + .expect("not a valid element"); + + loop { + match target.get_attribute("data-dioxus-id").map(|f| f.parse()) { + Some(Ok(id)) => return Some((ElementId(id), target)), + Some(Err(_)) => return None, + + // walk the tree upwards until we actually find an event target + None => match target.parent_element() { + Some(parent) => target = parent, + None => return None, + }, + } + } +} diff --git a/packages/web/src/lib.rs b/packages/web/src/lib.rs index e4991fbdc..ec42eb5d5 100644 --- a/packages/web/src/lib.rs +++ b/packages/web/src/lib.rs @@ -220,13 +220,7 @@ pub async fn run_with_props(root: fn(Scope) -> Element, root_prop // Dequeue all of the events from the channel in send order // todo: we should re-order these if possible while let Some(evt) = res { - let name = evt.type_(); - let element = walk_event_for_id(&evt); - let bubbles = dioxus_html::event_bubbles(name.as_str()); - if let Some((element, target)) = element { - let data = virtual_event_from_websys_event(evt, target); - dom.handle_event(name.as_str(), data, element, bubbles); - } + dom.handle_event(evt.name.as_str(), evt.data, evt.element, evt.bubbles); res = rx.try_next().transpose().unwrap().ok(); } @@ -252,29 +246,6 @@ pub async fn run_with_props(root: fn(Scope) -> Element, root_prop } } -fn walk_event_for_id(event: &web_sys::Event) -> Option<(ElementId, web_sys::Element)> { - use wasm_bindgen::JsCast; - - let mut target = event - .target() - .expect("missing target") - .dyn_into::() - .expect("not a valid element"); - - loop { - match target.get_attribute("data-dioxus-id").map(|f| f.parse()) { - Some(Ok(id)) => return Some((ElementId(id), target)), - Some(Err(_)) => return None, - - // walk the tree upwards until we actually find an event target - None => match target.parent_element() { - Some(parent) => target = parent, - None => return None, - }, - } - } -} - // if should_hydrate { // // todo: we need to split rebuild and initialize into two phases // // it's a waste to produce edits just to get the vdom loaded