diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index 96649c903..a3bff9fc6 100644 --- a/.github/workflows/main.yml +++ b/.github/workflows/main.yml @@ -39,7 +39,7 @@ jobs: override: true - uses: Swatinem/rust-cache@v2 - run: sudo apt-get update - - run: sudo apt install libwebkit2gtk-4.0-dev libgtk-3-dev libayatana-appindicator3-dev + - run: sudo apt install libwebkit2gtk-4.1-dev libgtk-3-dev libayatana-appindicator3-dev - uses: actions/checkout@v3 - uses: actions-rs/cargo@v1 with: @@ -58,7 +58,7 @@ jobs: override: true - uses: Swatinem/rust-cache@v2 - run: sudo apt-get update - - run: sudo apt install libwebkit2gtk-4.0-dev libgtk-3-dev libayatana-appindicator3-dev + - run: sudo apt install libwebkit2gtk-4.1-dev libgtk-3-dev libayatana-appindicator3-dev - uses: davidB/rust-cargo-make@v1 - uses: browser-actions/setup-firefox@latest - uses: jetli/wasm-pack-action@v0.4.0 @@ -98,7 +98,7 @@ jobs: override: true - uses: Swatinem/rust-cache@v2 - run: sudo apt-get update - - run: sudo apt install libwebkit2gtk-4.0-dev libgtk-3-dev libayatana-appindicator3-dev + - run: sudo apt install libwebkit2gtk-4.1-dev libgtk-3-dev libayatana-appindicator3-dev - run: rustup component add clippy - uses: actions/checkout@v3 - uses: actions-rs/cargo@v1 diff --git a/docs/guide/src/en/getting_started/desktop.md b/docs/guide/src/en/getting_started/desktop.md index 311ad2c9f..b24215218 100644 --- a/docs/guide/src/en/getting_started/desktop.md +++ b/docs/guide/src/en/getting_started/desktop.md @@ -5,6 +5,7 @@ Build a standalone native desktop app that looks and feels the same across opera Apps built with Dioxus are typically <5mb in size and use existing system resources, so they won't hog extreme amounts of RAM or memory. Examples: + - [File Explorer](https://github.com/DioxusLabs/example-projects/blob/master/file-explorer) - [WiFi Scanner](https://github.com/DioxusLabs/example-projects/blob/master/wifi-scanner) @@ -12,21 +13,22 @@ Examples: ## Support -The desktop is a powerful target for Dioxus but is currently limited in capability when compared to the Web platform. Currently, desktop apps are rendered with the platform's WebView library, but your Rust code is running natively on a native thread. This means that browser APIs are *not* available, so rendering WebGL, Canvas, etc is not as easy as the Web. However, native system APIs *are* accessible, so streaming, WebSockets, filesystem, etc are all viable APIs. In the future, we plan to move to a custom web renderer-based DOM renderer with WGPU integrations. +The desktop is a powerful target for Dioxus but is currently limited in capability when compared to the Web platform. Currently, desktop apps are rendered with the platform's WebView library, but your Rust code is running natively on a native thread. This means that browser APIs are _not_ available, so rendering WebGL, Canvas, etc is not as easy as the Web. However, native system APIs _are_ accessible, so streaming, WebSockets, filesystem, etc are all viable APIs. In the future, we plan to move to a custom web renderer-based DOM renderer with WGPU integrations. Dioxus Desktop is built off [Tauri](https://tauri.app/). Right now there aren't any Dioxus abstractions over the menubar, handling, etc, so you'll want to leverage Tauri – mostly [Wry](http://github.com/tauri-apps/wry/) and [Tao](http://github.com/tauri-apps/tao)) directly. # Getting started ## Platform-Specific Dependencies + Dioxus desktop renders through a web view. Depending on your platform, you might need to install some dependancies. ### Windows -Windows Desktop apps depend on WebView2 – a library that should be installed in all modern Windows distributions. If you have Edge installed, then Dioxus will work fine. If you *don't* have Webview2, [then you can install it through Microsoft](https://developer.microsoft.com/en-us/microsoft-edge/webview2/). MS provides 3 options: +Windows Desktop apps depend on WebView2 – a library that should be installed in all modern Windows distributions. If you have Edge installed, then Dioxus will work fine. If you _don't_ have Webview2, [then you can install it through Microsoft](https://developer.microsoft.com/en-us/microsoft-edge/webview2/). MS provides 3 options: -1. A tiny "evergreen" *bootstrapper* that fetches an installer from Microsoft's CDN -2. A tiny *installer* that fetches Webview2 from Microsoft's CDN +1. A tiny "evergreen" _bootstrapper_ that fetches an installer from Microsoft's CDN +2. A tiny _installer_ that fetches Webview2 from Microsoft's CDN 3. A statically linked version of Webview2 in your final binary for offline users For development purposes, use Option 1. @@ -36,19 +38,18 @@ For development purposes, use Option 1. Webview Linux apps require WebkitGtk. When distributing, this can be part of your dependency tree in your `.rpm` or `.deb`. However, likely, your users will already have WebkitGtk. ```bash -sudo apt install libwebkit2gtk-4.0-dev libgtk-3-dev libappindicator3-dev +sudo apt install libwebkit2gtk-4.1-dev libgtk-3-dev libayatana-appindicator3-dev ``` When using Debian/bullseye `libappindicator3-dev` is no longer available but replaced by `libayatana-appindicator3-dev`. ```bash # on Debian/bullseye use: -sudo apt install libwebkit2gtk-4.0-dev libgtk-3-dev libayatana-appindicator3-dev +sudo apt install libwebkit2gtk-4.1-dev libgtk-3-dev libayatana-appindicator3-dev ``` If you run into issues, make sure you have all the basics installed, as outlined in the [Tauri docs](https://tauri.studio/v1/guides/getting-started/prerequisites#setting-up-linux). - ### MacOS Currently – everything for macOS is built right in! However, you might run into an issue if you're using nightly Rust due to some permissions issues in our Tao dependency (which have been resolved but not published). diff --git a/examples/assets/logo.png b/examples/assets/logo.png index 7d08f2af8..4ad62768f 100644 Binary files a/examples/assets/logo.png and b/examples/assets/logo.png differ diff --git a/examples/counter.rs b/examples/counter.rs new file mode 100644 index 000000000..f51083a95 --- /dev/null +++ b/examples/counter.rs @@ -0,0 +1,36 @@ +//! Comparison example with leptos' counter example +//! https://github.com/leptos-rs/leptos/blob/main/examples/counters/src/lib.rs + +use dioxus::prelude::*; + +fn main() { + dioxus_desktop::launch(app); +} + +fn app(cx: Scope) -> Element { + let counters = use_state(cx, || vec![0, 0, 0]); + let sum: usize = counters.iter().copied().sum(); + + render! { + div { + button { onclick: move |_| counters.make_mut().push(0), "Add counter" } + button { onclick: move |_| { counters.make_mut().pop(); }, "Remove counter" } + p { "Total: {sum}" } + for (i, counter) in counters.iter().enumerate() { + li { + button { onclick: move |_| counters.make_mut()[i] -= 1, "-1" } + input { + value: "{counter}", + oninput: move |e| { + if let Ok(value) = e.value.parse::() { + counters.make_mut()[i] = value; + } + } + } + button { onclick: move |_| counters.make_mut()[i] += 1, "+1" } + button { onclick: move |_| { counters.make_mut().remove(i); }, "x" } + } + } + } + } +} diff --git a/examples/custom_assets.rs b/examples/custom_assets.rs index ae37ecd4e..1253efba2 100644 --- a/examples/custom_assets.rs +++ b/examples/custom_assets.rs @@ -7,9 +7,10 @@ fn main() { fn app(cx: Scope) -> Element { cx.render(rsx! { div { - "This should show an image:" + p { + "This should show an image:" + } img { src: "examples/assets/logo.png" } - img { src: "/Users/jonkelley/Desktop/blitz.png" } } }) } diff --git a/packages/core/src/create.rs b/packages/core/src/create.rs index 113fa7ae1..80561e937 100644 --- a/packages/core/src/create.rs +++ b/packages/core/src/create.rs @@ -35,6 +35,7 @@ fn sort_bfs(paths: &[&'static [u8]]) -> Vec<(usize, &'static [u8])> { } #[test] +#[cfg(debug_assertions)] fn sorting() { let r: [(usize, &[u8]); 5] = [ (0, &[0, 1]), diff --git a/packages/core/src/diff.rs b/packages/core/src/diff.rs index 6f84b21aa..56a2d05de 100644 --- a/packages/core/src/diff.rs +++ b/packages/core/src/diff.rs @@ -148,6 +148,13 @@ impl<'b> VirtualDom { // Make sure the roots get transferred over while we're here right_template.root_ids.transfer(&left_template.root_ids); + + // Update the node refs + for i in 0..right_template.root_ids.len() { + if let Some(root_id) = right_template.root_ids.get(i) { + self.update_template(root_id, right_template); + } + } } fn diff_dynamic_node( diff --git a/packages/desktop/Cargo.toml b/packages/desktop/Cargo.toml index 7645e4de5..5722a42a2 100644 --- a/packages/desktop/Cargo.toml +++ b/packages/desktop/Cargo.toml @@ -21,7 +21,7 @@ serde = "1.0.136" serde_json = "1.0.79" thiserror = "1.0.30" log = "0.4.14" -wry = { version = "0.23.4" } +wry = { version = "0.27.2" } futures-channel = "0.3.21" tokio = { version = "1.16.1", features = [ "sync", diff --git a/packages/desktop/src/assets/default_icon.bin b/packages/desktop/src/assets/default_icon.bin index 2d4898f0c..bf78dc115 100644 Binary files a/packages/desktop/src/assets/default_icon.bin and b/packages/desktop/src/assets/default_icon.bin differ diff --git a/packages/desktop/src/assets/default_icon.png b/packages/desktop/src/assets/default_icon.png index d0742ea8a..4ad62768f 100644 Binary files a/packages/desktop/src/assets/default_icon.png and b/packages/desktop/src/assets/default_icon.png differ diff --git a/packages/desktop/src/cfg.rs b/packages/desktop/src/cfg.rs index 7b37b46d4..d7f1b5dfa 100644 --- a/packages/desktop/src/cfg.rs +++ b/packages/desktop/src/cfg.rs @@ -1,3 +1,4 @@ +use std::borrow::Cow; use std::path::PathBuf; use wry::application::window::Icon; @@ -28,7 +29,7 @@ type DropHandler = Box bool>; pub(crate) type WryProtocol = ( String, - Box>) -> WryResult>> + 'static>, + Box>) -> WryResult>> + 'static>, ); impl Config { @@ -98,7 +99,7 @@ impl Config { /// Set a custom protocol pub fn with_custom_protocol(mut self, name: String, handler: F) -> Self where - F: Fn(&HttpRequest>) -> WryResult>> + 'static, + F: Fn(&HttpRequest>) -> WryResult>> + 'static, { self.protocols.push((name, Box::new(handler))); self diff --git a/packages/desktop/src/lib.rs b/packages/desktop/src/lib.rs index 701c0e0bb..32a2dffbd 100644 --- a/packages/desktop/src/lib.rs +++ b/packages/desktop/src/lib.rs @@ -40,8 +40,8 @@ use tao::{ }; pub use wry; pub use wry::application as tao; -use wry::application::window::WindowId; use wry::webview::WebView; +use wry::{application::window::WindowId, webview::WebContext}; /// Launch the WebView and run the event loop. /// @@ -311,7 +311,7 @@ fn create_new_window( event_handlers: &WindowEventHandlers, shortcut_manager: ShortcutRegistry, ) -> WebviewHandler { - let webview = webview::build(&mut cfg, event_loop, proxy.clone()); + let (webview, web_context) = webview::build(&mut cfg, event_loop, proxy.clone()); dom.base_scope().provide_context(DesktopContext::new( webview.clone(), @@ -329,6 +329,7 @@ fn create_new_window( webview, dom, waker: waker::tao_waker(proxy, id), + web_context, } } @@ -336,6 +337,9 @@ struct WebviewHandler { dom: VirtualDom, webview: Rc, waker: Waker, + // This is nessisary because of a bug in wry. Wry assumes the webcontext is alive for the lifetime of the webview. We need to keep the webcontext alive, otherwise the webview will crash + #[allow(dead_code)] + web_context: WebContext, } /// Poll the virtualdom until it's pending diff --git a/packages/desktop/src/protocol.rs b/packages/desktop/src/protocol.rs index f8c002a6a..efdc849a5 100644 --- a/packages/desktop/src/protocol.rs +++ b/packages/desktop/src/protocol.rs @@ -1,5 +1,8 @@ use dioxus_interpreter_js::INTERPRETER_JS; -use std::path::{Path, PathBuf}; +use std::{ + borrow::Cow, + path::{Path, PathBuf}, +}; use wry::{ http::{status::StatusCode, Request, Response}, Result, @@ -27,7 +30,7 @@ pub(super) fn desktop_handler( custom_head: Option, custom_index: Option, root_name: &str, -) -> Result>> { +) -> Result>> { // If the request is for the root, we'll serve the index.html file. if request.uri().path() == "/" { // If a custom index is provided, just defer to that, expecting the user to know what they're doing. @@ -53,7 +56,7 @@ pub(super) fn desktop_handler( return Response::builder() .header("Content-Type", "text/html") - .body(body) + .body(Cow::from(body)) .map_err(From::from); } @@ -72,13 +75,13 @@ pub(super) fn desktop_handler( if asset.exists() { return Response::builder() .header("Content-Type", get_mime_from_path(&asset)?) - .body(std::fs::read(asset)?) + .body(Cow::from(std::fs::read(asset)?)) .map_err(From::from); } Response::builder() .status(StatusCode::NOT_FOUND) - .body(String::from("Not Found").into_bytes()) + .body(Cow::from(String::from("Not Found").into_bytes())) .map_err(From::from) } diff --git a/packages/desktop/src/webview.rs b/packages/desktop/src/webview.rs index c5d8b4b42..5d3acf44f 100644 --- a/packages/desktop/src/webview.rs +++ b/packages/desktop/src/webview.rs @@ -13,7 +13,7 @@ pub fn build( cfg: &mut Config, event_loop: &EventLoopWindowTarget, proxy: EventLoopProxy, -) -> Rc { +) -> (Rc, WebContext) { let builder = cfg.window.clone(); let window = builder.build(event_loop).unwrap(); let file_handler = cfg.file_drop_handler.take(); @@ -57,6 +57,17 @@ pub fn build( }) .with_web_context(&mut web_context); + #[cfg(windows)] + { + // Windows has a platform specific settings to disable the browser shortcut keys + use wry::webview::WebViewBuilderExtWindows; + webview = webview.with_browser_accelerator_keys(false); + } + + // These are commented out because wry is currently broken in wry + // let mut web_context = WebContext::new(cfg.data_dir.clone()); + // .with_web_context(&mut web_context); + for (name, handler) in cfg.protocols.drain(..) { webview = webview.with_custom_protocol(name, handler) } @@ -81,5 +92,5 @@ pub fn build( webview = webview.with_devtools(true); } - Rc::new(webview.build().unwrap()) + (Rc::new(webview.build().unwrap()), web_context) } diff --git a/packages/html/src/events/keyboard.rs b/packages/html/src/events/keyboard.rs index ee803d948..d00dcf8d2 100644 --- a/packages/html/src/events/keyboard.rs +++ b/packages/html/src/events/keyboard.rs @@ -5,6 +5,16 @@ use std::convert::TryInto; use std::fmt::{Debug, Formatter}; use std::str::FromStr; +#[cfg(feature = "serialize")] +fn resilient_deserialize_code<'de, D>(deserializer: D) -> Result +where + D: serde::Deserializer<'de>, +{ + use serde::Deserialize; + // If we fail to deserialize the code for any reason, just return Unidentified instead of failing. + Ok(Code::deserialize(deserializer).unwrap_or(Code::Unidentified)) +} + pub type KeyboardEvent = Event; #[cfg_attr(feature = "serialize", derive(serde::Serialize, serde::Deserialize))] #[derive(Clone, PartialEq, Eq)] @@ -27,6 +37,10 @@ pub struct KeyboardData { pub key_code: KeyCode, /// the physical key on the keyboard + #[cfg_attr( + feature = "serialize", + serde(deserialize_with = "resilient_deserialize_code") + )] code: Code, /// Indicate if the `alt` modifier key was pressed during this keyboard event @@ -102,7 +116,7 @@ impl KeyboardData { /// The value of the key pressed by the user, taking into consideration the state of modifier keys such as Shift as well as the keyboard locale and layout. pub fn key(&self) -> Key { #[allow(deprecated)] - FromStr::from_str(&self.key).expect("could not parse") + FromStr::from_str(&self.key).unwrap_or(Key::Unidentified) } /// A physical key on the keyboard (as opposed to the character generated by pressing the key). In other words, this property returns a value that isn't altered by keyboard layout or the state of the modifier keys. @@ -158,10 +172,24 @@ impl Debug for KeyboardData { } } -#[cfg_attr( - feature = "serialize", - derive(serde_repr::Serialize_repr, serde_repr::Deserialize_repr) -)] +#[cfg(feature = "serialize")] +impl<'de> serde::Deserialize<'de> for KeyCode { + fn deserialize(deserializer: D) -> Result + where + D: serde::Deserializer<'de>, + { + // We could be deserializing a unicode character, so we need to use u64 even if the output only takes u8 + let value = u64::deserialize(deserializer)?; + + if let Ok(smaller_uint) = value.try_into() { + Ok(KeyCode::from_raw_code(smaller_uint)) + } else { + Ok(KeyCode::Unknown) + } + } +} + +#[cfg_attr(feature = "serialize", derive(serde_repr::Serialize_repr))] #[derive(Clone, Copy, Debug, Eq, PartialEq)] #[repr(u8)] pub enum KeyCode { @@ -525,7 +553,6 @@ pub enum KeyCode { // kanji, = 244 // unlock trackpad (Chrome/Edge), = 251 // toggle touchpad, = 255 - #[cfg_attr(feature = "serialize", serde(other))] Unknown, } diff --git a/packages/interpreter/Cargo.toml b/packages/interpreter/Cargo.toml index bb8f7ec60..cf9a4bc3f 100644 --- a/packages/interpreter/Cargo.toml +++ b/packages/interpreter/Cargo.toml @@ -10,15 +10,14 @@ 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] wasm-bindgen = { version = "0.2.79", optional = true } js-sys = { version = "0.3.56", optional = true } web-sys = { version = "0.3.56", optional = true, features = ["Element", "Node"] } -sledgehammer_bindgen = { version = "0.1.3", optional = true } -sledgehammer_utils = { version = "0.1.0", optional = true } +sledgehammer_bindgen = { version = "0.2.1", optional = true } +sledgehammer_utils = { version = "0.1.1", optional = true } serde = { version = "1.0", features = ["derive"], optional = true } [features] diff --git a/packages/interpreter/src/sledgehammer_bindings.rs b/packages/interpreter/src/sledgehammer_bindings.rs index 650e721ef..a15d7bc81 100644 --- a/packages/interpreter/src/sledgehammer_bindings.rs +++ b/packages/interpreter/src/sledgehammer_bindings.rs @@ -108,6 +108,7 @@ mod js { const listeners = new ListenerMap(); let nodes = []; let stack = []; + let root; const templates = {}; let node, els, end, ptr_end, k; export function save_template(nodes, tmpl_id) { diff --git a/packages/native-core-macro/src/lib.rs b/packages/native-core-macro/src/lib.rs index fd25c3868..2c8cef835 100644 --- a/packages/native-core-macro/src/lib.rs +++ b/packages/native-core-macro/src/lib.rs @@ -325,7 +325,7 @@ pub fn partial_derive_state(_: TokenStream, input: TokenStream) -> TokenStream { #(#items)* - fn workload_system(type_id: std::any::TypeId, dependants: dioxus_native_core::exports::FxHashSet, pass_direction: dioxus_native_core::prelude::PassDirection) -> dioxus_native_core::exports::shipyard::WorkloadSystem { + fn workload_system(type_id: std::any::TypeId, dependants: std::sync::Arc, pass_direction: dioxus_native_core::prelude::PassDirection) -> dioxus_native_core::exports::shipyard::WorkloadSystem { use dioxus_native_core::exports::shipyard::{IntoWorkloadSystem, Get, AddComponent}; use dioxus_native_core::tree::TreeRef; use dioxus_native_core::prelude::{NodeType, NodeView}; diff --git a/packages/native-core/examples/font_size.rs b/packages/native-core/examples/font_size.rs new file mode 100644 index 000000000..937db0c17 --- /dev/null +++ b/packages/native-core/examples/font_size.rs @@ -0,0 +1,175 @@ +use dioxus_native_core::exports::shipyard::Component; +use dioxus_native_core::node_ref::*; +use dioxus_native_core::prelude::*; +use dioxus_native_core::real_dom::NodeTypeMut; +use dioxus_native_core_macro::partial_derive_state; + +// All states need to derive Component +#[derive(Default, Debug, Copy, Clone, Component)] +struct Size(f64, f64); + +/// Derive some of the boilerplate for the State implementation +#[partial_derive_state] +impl State for Size { + type ParentDependencies = (); + + // The size of the current node depends on the size of its children + type ChildDependencies = (Self,); + + type NodeDependencies = (FontSize,); + + // Size only cares about the width, height, and text parts of the current node + const NODE_MASK: NodeMaskBuilder<'static> = NodeMaskBuilder::new() + // Get access to the width and height attributes + .with_attrs(AttributeMaskBuilder::Some(&["width", "height"])) + // Get access to the text of the node + .with_text(); + + fn update<'a>( + &mut self, + node_view: NodeView<()>, + (font_size,): ::ElementBorrowed<'a>, + _parent: Option<::ElementBorrowed<'a>>, + children: Vec<::ElementBorrowed<'a>>, + _: &SendAnyMap, + ) -> bool { + let font_size = font_size.size; + let mut width; + let mut height; + if let Some(text) = node_view.text() { + // if the node has text, use the text to size our object + width = text.len() as f64 * font_size; + height = font_size; + } else { + // otherwise, the size is the maximum size of the children + width = children + .iter() + .map(|(item,)| item.0) + .reduce(|accum, item| if accum >= item { accum } else { item }) + .unwrap_or(0.0); + + height = children + .iter() + .map(|(item,)| item.1) + .reduce(|accum, item| if accum >= item { accum } else { item }) + .unwrap_or(0.0); + } + // if the node contains a width or height attribute it overrides the other size + for a in node_view.attributes().into_iter().flatten() { + match &*a.attribute.name { + "width" => width = a.value.as_float().unwrap(), + "height" => height = a.value.as_float().unwrap(), + // because Size only depends on the width and height, no other attributes will be passed to the member + _ => panic!(), + } + } + // to determine what other parts of the dom need to be updated we return a boolean that marks if this member changed + let changed = (width != self.0) || (height != self.1); + *self = Self(width, height); + changed + } +} + +#[derive(Debug, Clone, Copy, PartialEq, Component)] +struct FontSize { + size: f64, +} + +impl Default for FontSize { + fn default() -> Self { + Self { size: 16.0 } + } +} + +#[partial_derive_state] +impl State for FontSize { + // TextColor depends on the TextColor part of the parent + type ParentDependencies = (Self,); + + type ChildDependencies = (); + + type NodeDependencies = (); + + // TextColor only cares about the color attribute of the current node + const NODE_MASK: NodeMaskBuilder<'static> = + // Get access to the color attribute + NodeMaskBuilder::new().with_attrs(AttributeMaskBuilder::Some(&["font-size"])); + + fn update<'a>( + &mut self, + node_view: NodeView<()>, + _node: ::ElementBorrowed<'a>, + parent: Option<::ElementBorrowed<'a>>, + _children: Vec<::ElementBorrowed<'a>>, + _context: &SendAnyMap, + ) -> bool { + let mut new = None; + for attr in node_view.attributes().into_iter().flatten() { + if attr.attribute.name == "font-size" { + new = Some(FontSize { + size: attr.value.as_float().unwrap(), + }); + } + } + let new = new.unwrap_or(parent.map(|(p,)| *p).unwrap_or_default()); + // check if the member has changed + let changed = new != *self; + *self = new; + changed + } +} + +fn main() -> Result<(), Box> { + let mut rdom: RealDom = RealDom::new([FontSize::to_type_erased(), Size::to_type_erased()]); + + let mut count = 0; + + // intial render + let text_id = rdom.create_node(format!("Count: {count}")).id(); + let mut root = rdom.get_mut(rdom.root_id()).unwrap(); + // set the color to red + if let NodeTypeMut::Element(mut element) = root.node_type_mut() { + element.set_attribute(("color", "style"), "red".to_string()); + element.set_attribute(("font-size", "style"), 1.); + } + root.add_child(text_id); + + let ctx = SendAnyMap::new(); + // update the State for nodes in the real_dom tree + let _to_rerender = rdom.update_state(ctx); + + // we need to run the vdom in a async runtime + tokio::runtime::Builder::new_current_thread() + .enable_all() + .build()? + .block_on(async { + loop { + // update the count and font size + count += 1; + let mut text = rdom.get_mut(text_id).unwrap(); + if let NodeTypeMut::Text(mut text) = text.node_type_mut() { + *text = format!("Count: {count}"); + } + if let NodeTypeMut::Element(mut element) = + rdom.get_mut(rdom.root_id()).unwrap().node_type_mut() + { + element.set_attribute(("font-size", "style"), count as f64); + } + + let ctx = SendAnyMap::new(); + let _to_rerender = rdom.update_state(ctx); + + // render... + rdom.traverse_depth_first(|node| { + let indent = " ".repeat(node.height() as usize); + let font_size = *node.get::().unwrap(); + let size = *node.get::().unwrap(); + let id = node.id(); + println!("{indent}{id:?} {font_size:?} {size:?}"); + }); + + // wait 1 second + tokio::time::sleep(std::time::Duration::from_secs(1)).await; + } + }) +} diff --git a/packages/native-core/src/lib.rs b/packages/native-core/src/lib.rs index ca8e8e5ee..0740d881a 100644 --- a/packages/native-core/src/lib.rs +++ b/packages/native-core/src/lib.rs @@ -35,7 +35,7 @@ pub mod prelude { pub use crate::node::{ElementNode, FromAnyValue, NodeType, OwnedAttributeView, TextNode}; pub use crate::node_ref::{AttributeMaskBuilder, NodeMaskBuilder, NodeView}; pub use crate::passes::{run_pass, PassDirection, RunPassView, TypeErasedState}; - pub use crate::passes::{Dependancy, DependancyView, State}; + pub use crate::passes::{Dependancy, DependancyView, Dependants, State}; pub use crate::real_dom::{NodeImmutable, NodeMut, NodeRef, RealDom}; pub use crate::NodeId; pub use crate::SendAnyMap; diff --git a/packages/native-core/src/passes.rs b/packages/native-core/src/passes.rs index 2a84e6df4..b453e32dd 100644 --- a/packages/native-core/src/passes.rs +++ b/packages/native-core/src/passes.rs @@ -126,7 +126,7 @@ pub trait State: Any + Send + Sync { /// Create a workload system for this state fn workload_system( type_id: TypeId, - dependants: FxHashSet, + dependants: Arc, pass_direction: PassDirection, ) -> WorkloadSystem; @@ -138,10 +138,16 @@ pub trait State: Any + Send + Sync { let node_mask = Self::NODE_MASK.build(); TypeErasedState { this_type_id: TypeId::of::(), - combined_dependancy_type_ids: all_dependanices::().iter().copied().collect(), - parent_dependant: !Self::ParentDependencies::type_ids().is_empty(), - child_dependant: !Self::ChildDependencies::type_ids().is_empty(), - dependants: FxHashSet::default(), + parent_dependancies_ids: Self::ParentDependencies::type_ids() + .iter() + .copied() + .collect(), + child_dependancies_ids: Self::ChildDependencies::type_ids() + .iter() + .copied() + .collect(), + node_dependancies_ids: Self::NodeDependencies::type_ids().iter().copied().collect(), + dependants: Default::default(), mask: node_mask, pass_direction: pass_direction::(), workload: Self::workload_system, @@ -166,13 +172,6 @@ fn pass_direction>() -> PassDirection } } -fn all_dependanices>() -> Box<[TypeId]> { - let mut dependencies = S::ParentDependencies::type_ids().to_vec(); - dependencies.extend(S::ChildDependencies::type_ids().iter()); - dependencies.extend(S::NodeDependencies::type_ids().iter()); - dependencies.into_boxed_slice() -} - #[doc(hidden)] #[derive(Borrow, BorrowInfo)] pub struct RunPassView<'a, V: FromAnyValue + Send + Sync = ()> { @@ -188,7 +187,7 @@ pub struct RunPassView<'a, V: FromAnyValue + Send + Sync = ()> { #[doc(hidden)] pub fn run_pass( type_id: TypeId, - dependants: FxHashSet, + dependants: Arc, pass_direction: PassDirection, view: RunPassView, mut update_node: impl FnMut(NodeId, &SendAnyMap) -> bool, @@ -206,11 +205,7 @@ pub fn run_pass( while let Some((height, id)) = dirty.pop_front(type_id) { if (update_node)(id, ctx) { nodes_updated.insert(id); - for id in tree.children_ids(id) { - for dependant in &dependants { - dirty.insert(*dependant, id, height + 1); - } - } + dependants.mark_dirty(&dirty, id, &tree, height); } } } @@ -218,11 +213,7 @@ pub fn run_pass( while let Some((height, id)) = dirty.pop_back(type_id) { if (update_node)(id, ctx) { nodes_updated.insert(id); - if let Some(id) = tree.parent_id(id) { - for dependant in &dependants { - dirty.insert(*dependant, id, height - 1); - } - } + dependants.mark_dirty(&dirty, id, &tree, height); } } } @@ -230,24 +221,53 @@ pub fn run_pass( while let Some((height, id)) = dirty.pop_back(type_id) { if (update_node)(id, ctx) { nodes_updated.insert(id); - for dependant in &dependants { - dirty.insert(*dependant, id, height); - } + dependants.mark_dirty(&dirty, id, &tree, height); } } } } } +/// The states that depend on this state +#[derive(Default, Debug, Clone, PartialEq, Eq)] +pub struct Dependants { + /// The states in the parent direction that should be invalidated when this state is invalidated + pub parent: Vec, + /// The states in the child direction that should be invalidated when this state is invalidated + pub child: Vec, + /// The states in the node direction that should be invalidated when this state is invalidated + pub node: Vec, +} + +impl Dependants { + fn mark_dirty(&self, dirty: &DirtyNodeStates, id: NodeId, tree: &impl TreeRef, height: u16) { + for dependant in &self.child { + for id in tree.children_ids(id) { + dirty.insert(*dependant, id, height + 1); + } + } + + for dependant in &self.parent { + if let Some(id) = tree.parent_id(id) { + dirty.insert(*dependant, id, height - 1); + } + } + + for dependant in &self.node { + dirty.insert(*dependant, id, height); + } + } +} + /// A type erased version of [`State`] that can be added to the [`crate::prelude::RealDom`] with [`crate::prelude::RealDom::new`] pub struct TypeErasedState { pub(crate) this_type_id: TypeId, - pub(crate) parent_dependant: bool, - pub(crate) child_dependant: bool, - pub(crate) combined_dependancy_type_ids: FxHashSet, - pub(crate) dependants: FxHashSet, + pub(crate) parent_dependancies_ids: FxHashSet, + pub(crate) child_dependancies_ids: FxHashSet, + pub(crate) node_dependancies_ids: FxHashSet, + pub(crate) dependants: Arc, pub(crate) mask: NodeMask, - pub(crate) workload: fn(TypeId, FxHashSet, PassDirection) -> WorkloadSystem, + pub(crate) workload: fn(TypeId, Arc, PassDirection) -> WorkloadSystem, pub(crate) pass_direction: PassDirection, phantom: PhantomData, } @@ -260,10 +280,18 @@ impl TypeErasedState { self.pass_direction, ) } + + pub(crate) fn combined_dependancy_type_ids(&self) -> impl Iterator + '_ { + self.parent_dependancies_ids + .iter() + .chain(self.child_dependancies_ids.iter()) + .chain(self.node_dependancies_ids.iter()) + .copied() + } } /// The direction that a pass should be run in -#[derive(Debug, Clone, Copy)] +#[derive(Debug, Clone, Copy, Hash, PartialEq, Eq)] pub enum PassDirection { /// The pass should be run from the root to the leaves ParentToChild, diff --git a/packages/native-core/src/real_dom.rs b/packages/native-core/src/real_dom.rs index 25d1ed9fe..c344b9041 100644 --- a/packages/native-core/src/real_dom.rs +++ b/packages/native-core/src/real_dom.rs @@ -15,7 +15,7 @@ use crate::node::{ }; use crate::node_ref::{NodeMask, NodeMaskBuilder}; use crate::node_watcher::NodeWatcher; -use crate::passes::{DirtyNodeStates, TypeErasedState}; +use crate::passes::{DirtyNodeStates, PassDirection, TypeErasedState}; use crate::prelude::AttributeMaskBuilder; use crate::tree::{TreeMut, TreeMutView, TreeRef, TreeRefView}; use crate::NodeId; @@ -68,12 +68,13 @@ impl NodesDirty { } } - /// Mark a node as added or removed from the tree + /// Mark a node that has had a parent changed fn mark_parent_added_or_removed(&mut self, node_id: NodeId) { let hm = self.passes_updated.entry(node_id).or_default(); for pass in &*self.passes { - if pass.parent_dependant { - hm.insert(pass.this_type_id); + // If any of the states in this node depend on the parent then mark them as dirty + for &pass in &pass.parent_dependancies_ids { + hm.insert(pass); } } } @@ -82,8 +83,9 @@ impl NodesDirty { fn mark_child_changed(&mut self, node_id: NodeId) { let hm = self.passes_updated.entry(node_id).or_default(); for pass in &*self.passes { - if pass.child_dependant { - hm.insert(pass.this_type_id); + // If any of the states in this node depend on the children then mark them as dirty + for &pass in &pass.child_dependancies_ids { + hm.insert(pass); } } } @@ -116,16 +118,46 @@ impl RealDom { pub fn new(tracked_states: impl Into]>>) -> RealDom { let mut tracked_states = tracked_states.into(); // resolve dependants for each pass - for i in 1..tracked_states.len() { + for i in 1..=tracked_states.len() { let (before, after) = tracked_states.split_at_mut(i); let (current, before) = before.split_last_mut().unwrap(); - for pass in before.iter_mut().chain(after.iter_mut()) { + for state in before.iter_mut().chain(after.iter_mut()) { + let dependants = Arc::get_mut(&mut state.dependants).unwrap(); + // If this node depends on the other state as a parent, then the other state should update its children of the current type when it is invalidated if current - .combined_dependancy_type_ids - .contains(&pass.this_type_id) + .parent_dependancies_ids + .contains(&state.this_type_id) + && !dependants.child.contains(¤t.this_type_id) { - pass.dependants.insert(current.this_type_id); + dependants.child.push(current.this_type_id); } + // If this node depends on the other state as a child, then the other state should update its parent of the current type when it is invalidated + if current.child_dependancies_ids.contains(&state.this_type_id) + && !dependants.parent.contains(¤t.this_type_id) + { + dependants.parent.push(current.this_type_id); + } + // If this node depends on the other state as a sibling, then the other state should update its siblings of the current type when it is invalidated + if current.node_dependancies_ids.contains(&state.this_type_id) + && !dependants.node.contains(¤t.this_type_id) + { + dependants.node.push(current.this_type_id); + } + } + // If the current state depends on itself, then it should update itself when it is invalidated + let dependants = Arc::get_mut(&mut current.dependants).unwrap(); + match current.pass_direction { + PassDirection::ChildToParent => { + if !dependants.parent.contains(¤t.this_type_id) { + dependants.parent.push(current.this_type_id); + } + } + PassDirection::ParentToChild => { + if !dependants.child.contains(¤t.this_type_id) { + dependants.child.push(current.this_type_id); + } + } + _ => {} } } let workload = construct_workload(&mut tracked_states); @@ -1011,7 +1043,8 @@ fn construct_workload( // mark any dependancies for i in 0..unresloved_workloads.len() { let (_, pass, _) = &unresloved_workloads[i]; - for ty_id in pass.combined_dependancy_type_ids.clone() { + let all_dependancies: Vec<_> = pass.combined_dependancy_type_ids().collect(); + for ty_id in all_dependancies { let &(dependancy_id, _, _) = unresloved_workloads .iter() .find(|(_, pass, _)| pass.this_type_id == ty_id) diff --git a/packages/ssr/src/cache.rs b/packages/ssr/src/cache.rs index e261d3b65..a67fd5f22 100644 --- a/packages/ssr/src/cache.rs +++ b/packages/ssr/src/cache.rs @@ -23,6 +23,8 @@ pub enum Segment { // This will be true if there are static styles inside_style_tag: bool, }, + /// A marker for where to insert a dynamic inner html + InnerHtmlMarker, } impl std::fmt::Write for StringChain { @@ -69,6 +71,9 @@ impl StringCache { write!(chain, "<{tag}")?; // we need to collect the styles and write them at the end let mut styles = Vec::new(); + // we need to collect the inner html and write it at the end + let mut inner_html = None; + // we need to keep track of if we have dynamic attrs to know if we need to insert a style and inner_html marker let mut has_dynamic_attrs = false; for attr in *attrs { match attr { @@ -77,7 +82,9 @@ impl StringCache { value, namespace, } => { - if let Some("style") = namespace { + if *name == "dangerous_inner_html" { + inner_html = Some(value); + } else if let Some("style") = namespace { styles.push((name, value)); } else { write!(chain, " {name}=\"{value}\"")?; @@ -110,6 +117,13 @@ impl StringCache { write!(chain, "/>")?; } else { write!(chain, ">")?; + // Write the static inner html, or insert a marker if dynamic inner html is possible + if let Some(inner_html) = inner_html { + chain.write_str(inner_html)?; + } else if has_dynamic_attrs { + chain.segments.push(Segment::InnerHtmlMarker); + } + for child in *children { Self::recurse(child, cur_path, root_idx, chain)?; } diff --git a/packages/ssr/src/renderer.rs b/packages/ssr/src/renderer.rs index be4025dba..6f6808c74 100644 --- a/packages/ssr/src/renderer.rs +++ b/packages/ssr/src/renderer.rs @@ -70,6 +70,8 @@ impl Renderer { .or_insert_with(|| Rc::new(StringCache::from_template(template).unwrap())) .clone(); + let mut inner_html = None; + // We need to keep track of the dynamic styles so we can insert them into the right place let mut accumulated_dynamic_styles = Vec::new(); @@ -77,7 +79,9 @@ impl Renderer { match segment { Segment::Attr(idx) => { let attr = &template.dynamic_attrs[*idx]; - if attr.namespace == Some("style") { + if attr.name == "dangerous_inner_html" { + inner_html = Some(attr); + } else if attr.namespace == Some("style") { accumulated_dynamic_styles.push(attr); } else { match attr.value { @@ -85,6 +89,10 @@ impl Renderer { write!(buf, " {}=\"{}\"", attr.name, value)? } AttributeValue::Bool(value) => write!(buf, " {}={}", attr.name, value)?, + AttributeValue::Int(value) => write!(buf, " {}={}", attr.name, value)?, + AttributeValue::Float(value) => { + write!(buf, " {}={}", attr.name, value)? + } _ => {} }; } @@ -165,6 +173,19 @@ impl Renderer { accumulated_dynamic_styles.clear(); } } + + Segment::InnerHtmlMarker => { + if let Some(inner_html) = inner_html.take() { + let inner_html = &inner_html.value; + match inner_html { + AttributeValue::Text(value) => write!(buf, "{}", value)?, + AttributeValue::Bool(value) => write!(buf, "{}", value)?, + AttributeValue::Float(f) => write!(buf, "{}", f)?, + AttributeValue::Int(i) => write!(buf, "{}", i)?, + _ => {} + } + } + } } } @@ -208,7 +229,9 @@ fn to_string_works() { StyleMarker { inside_style_tag: false, }, - PreRendered(">Hello world 1 -->".into(),), + PreRendered(">".into()), + InnerHtmlMarker, + PreRendered("Hello world 1 -->".into(),), Node(0,), PreRendered( "<-- Hello world 2
nest 1
nest 2
".into(), diff --git a/packages/ssr/tests/inner_html.rs b/packages/ssr/tests/inner_html.rs new file mode 100644 index 000000000..11fb94746 --- /dev/null +++ b/packages/ssr/tests/inner_html.rs @@ -0,0 +1,26 @@ +use dioxus::prelude::*; + +#[test] +fn static_inner_html() { + fn app(cx: Scope) -> Element { + render! { div { dangerous_inner_html: "
1234
" } } + } + + let mut dom = VirtualDom::new(app); + _ = dom.rebuild(); + + assert_eq!(dioxus_ssr::render(&dom), r#"
1234
"#); +} + +#[test] +fn dynamic_inner_html() { + fn app(cx: Scope) -> Element { + let inner_html = "
1234
"; + render! { div { dangerous_inner_html: "{inner_html}" } } + } + + let mut dom = VirtualDom::new(app); + _ = dom.rebuild(); + + assert_eq!(dioxus_ssr::render(&dom), r#"
1234
"#); +} diff --git a/packages/web/src/cfg.rs b/packages/web/src/cfg.rs index 7e47ed461..7483a7a8b 100644 --- a/packages/web/src/cfg.rs +++ b/packages/web/src/cfg.rs @@ -49,15 +49,16 @@ impl Config { /// Set the name of the element that Dioxus will use as the root. /// - /// This is akint to calling React.render() on the element with the specified name. + /// This is akin to calling React.render() on the element with the specified name. pub fn rootname(mut self, name: impl Into) -> Self { self.rootname = name.into(); self } - /// Set the name of the element that Dioxus will use as the root. + /// Sets a string cache for wasm bindgen to [intern](https://docs.rs/wasm-bindgen/0.2.84/wasm_bindgen/fn.intern.html). This can help reduce the time it takes for wasm bindgen to pass + /// strings from rust to javascript. This can significantly improve pefromance when passing strings to javascript, but can have a negative impact on startup time. /// - /// This is akint to calling React.render() on the element with the specified name. + /// > Currently this cache is only used when creating static elements and attributes. pub fn with_string_cache(mut self, cache: Vec) -> Self { self.cached_strings = cache; self diff --git a/packages/web/src/rehydrate.rs b/packages/web/src/rehydrate.rs index d6afffea1..9af23534b 100644 --- a/packages/web/src/rehydrate.rs +++ b/packages/web/src/rehydrate.rs @@ -128,10 +128,11 @@ impl WebsysDom { mounted_id = Some(id); let name = attribute.name; if let AttributeValue::Listener(_) = value { + let event_name = &name[2..]; self.interpreter.new_event_listener( - &name[2..], + event_name, id.0 as u32, - event_bubbles(name) as u8, + event_bubbles(event_name) as u8, ); } }