Markerless placeholders/Portals/Multiwindow/const builder/optimized templates

Cargo.toml

@@ -3,6 +3,9 @@ resolver = "2"
 members = [
     "packages/dioxus",
     "packages/core",
+    "packages/core-template",
+    "packages/oracle",
+    "packages/fuzz",
     "packages/core-types",
     "packages/cli",
     "packages/cli-config",
@@ -37,6 +40,7 @@ members = [
     "packages/signals",
     "packages/stores",
     "packages/stores-macro",
+    "packages/dioxus-const-vec",
     "packages/const-serialize",
     "packages/const-serialize-macro",
     "packages/dx-wire-format",
@@ -63,6 +67,7 @@ members = [
     "packages/playwright-tests/fullstack-spread",
     "packages/playwright-tests/fullstack-routing",
     "packages/playwright-tests/fullstack-hydration-order",
+    "packages/playwright-tests/markerless-hydration-edges",
     "packages/playwright-tests/suspense-carousel",
     "packages/playwright-tests/nested-suspense",
     "packages/playwright-tests/cli-optimization",
@@ -120,6 +125,8 @@ version = "0.8.0-alpha.0"
 [workspace.dependencies]
 dioxus = { path = "packages/dioxus", version = "0.8.0-alpha.0" }
 dioxus-core = { path = "packages/core", version = "0.8.0-alpha.0" }
+dioxus-core-template = { path = "packages/core-template", version = "0.8.0-alpha.0" }
+dioxus-renderer-oracle = { path = "packages/oracle", version = "0.8.0-alpha.0" }
 dioxus-core-types = { path = "packages/core-types", version = "0.8.0-alpha.0" }
 dioxus-core-macro = { path = "packages/core-macro", version = "0.8.0-alpha.0" }
 dioxus-config-macro = { path = "packages/config-macro", version = "0.8.0-alpha.0" }
@@ -181,6 +188,7 @@ manganis-core = { path = "packages/manganis/manganis-core", version = "0.8.0-alp
 manganis-macro = { path = "packages/manganis/manganis-macro", version = "0.8.0-alpha.0" }
 
 # const-serialize
+dioxus-const-vec = { path = "packages/dioxus-const-vec", version = "0.8.0-alpha.0" }
 const-serialize = { path = "packages/const-serialize", version = "0.8.0-alpha.0" }
 const-serialize-macro = { path = "packages/const-serialize-macro", version = "0.8.0-alpha.0" }
 
@@ -397,6 +405,12 @@ incremental = true
 [profile.dev.package.walrus]
 opt-level = 3
 
+# Keep debug assertions for fuzzing, but compile the reusable fuzzer crate
+# with release-style optimizations. (The libFuzzer binary `dioxus-fuzz` lives
+# in its own sub-workspace under packages/fuzz/fuzz and sets its own profile.)
+[profile.dev.package.dioxus-vdom-fuzz]
+opt-level = 3
+
 # ensure we have adversarial setup for tls
 [profile.dev.package.cross-tls-crate]
 opt-level = 2
@@ -1070,6 +1084,11 @@ name = "web_component"
 path = "examples/09-reference/web_component.rs"
 doc-scrape-examples = true
 
+[[example]]
+name = "custom_element"
+path = "examples/09-reference/custom_element.rs"
+doc-scrape-examples = true
+
 [[example]]
 name = "generic_component"
 path = "examples/09-reference/generic_component.rs"
@@ -1090,6 +1109,11 @@ name = "optional_props"
 path = "examples/09-reference/optional_props.rs"
 doc-scrape-examples = true
 
+[[example]]
+name = "html_builder"
+path = "examples/09-reference/html_builder.rs"
+doc-scrape-examples = true
+
 [[example]]
 name = "rsx_usage"
 path = "examples/09-reference/rsx_usage.rs"

examples/01-app-demos/hackernews/src/main.rs

@@ -8,7 +8,6 @@ use std::{
     num::ParseIntError,
     str::FromStr,
 };
-use svg_attributes::to;
 
 fn main() {
     LaunchBuilder::new()

examples/08-apis/multiwindow.rs

@@ -1,32 +1,71 @@
 //! Multiwindow example
 //!
 //! This example shows how to implement a simple multiwindow application using dioxus.
-//! This works by spawning a new window when the user clicks a button. We have to build a new virtualdom which has its
-//! own context, root elements, etc.
+//! The app root owns each native window explicitly.
 
+use dioxus::desktop::{Config, WindowBuilder, WindowConfig};
 use dioxus::prelude::*;
 
 fn main() {
-    dioxus::launch(app);
+    dioxus::LaunchBuilder::desktop()
+        .with_cfg(Config::new().with_headless_root(true))
+        .launch(app);
 }
 
 fn app() -> Element {
-    let onclick = move |_| {
-        dioxus::desktop::window().new_window(VirtualDom::new(popup), Default::default());
-    };
+    let mut window_state = use_store(|| WindowState {
+        windows: vec![0],
+        next_id: 1,
+        count: 0,
+    });
 
     rsx! {
-        button { onclick, "New Window" }
+        for id in window_state.windows().read().iter().copied() {
+            Window {
+                key: "{id}",
+                config: WindowConfig::new().with_window(
+                    WindowBuilder::new().with_title(format!("Window {id}"))
+                ),
+                onclose: move |_| window_state.close_window(id),
+                AppWindow { id, window_state }
+            }
+        }
+    }
+}
+
+#[derive(Store, PartialEq, Clone, Debug)]
+struct WindowState {
+    windows: Vec<usize>,
+    next_id: usize,
+    count: usize,
+}
+
+#[store]
+impl Store<WindowState> {
+    fn open_window(&mut self) {
+        let id = self.next_id().cloned();
+        self.next_id().set(id + 1);
+        self.windows().push(id);
+    }
+
+    fn close_window(&mut self, id: usize) {
+        self.windows().retain(|window_id| *window_id != id);
+    }
+
+    fn increment_count(&mut self) {
+        let count = self.count().cloned();
+        self.count().set(count + 1);
     }
 }
 
-fn popup() -> Element {
-    let mut count = use_signal(|| 0);
+#[component]
+fn AppWindow(id: usize, mut window_state: Store<WindowState>) -> Element {
     rsx! {
         div {
-            h1 { "Popup Window" }
-            p { "Count: {count}" }
-            button { onclick: move |_| count += 1, "Increment" }
+            h1 { "Window {id}" }
+            p { "Count: {window_state.count()}" }
+            button { onclick: move |_| window_state.increment_count(), "Increment" }
+            button { onclick: move |_| window_state.open_window(), "New Window" }
         }
     }
 }

examples/08-apis/multiwindow_with_tray_icon.rs

@@ -1,8 +1,7 @@
 //! Multiwindow with tray icon example
 //!
 //! This example shows how to implement a simple multiwindow application and tray icon using dioxus.
-//! This works by spawning a new window when the user clicks a button. We have to build a new virtualdom which has its
-//! own context, root elements, etc.
+//! This works by rendering a `Window` component when the user clicks a button.
 //!
 //! This is useful for apps that incorporate settings panels or persistent windows like Raycast.
 
@@ -18,6 +17,9 @@ fn main() {
 }
 
 fn app() -> Element {
+    let mut windows = use_signal(Vec::<usize>::new);
+    let mut next_id = use_signal(|| 0usize);
+
     use_hook(|| {
         // Set the close behavior for the main window
         // This will hide the window instead of closing it when the user clicks the close button
@@ -31,14 +33,24 @@ fn app() -> Element {
     rsx! {
         button {
             onclick: move |_| {
-                window().new_window(VirtualDom::new(popup), Default::default());
+                let id = next_id();
+                next_id.set(id + 1);
+                windows.write().push(id);
             },
             "New Window"
         }
+        for id in windows() {
+            Window {
+                key: "{id}",
+                onclose: move |_| windows.write().retain(|window_id| *window_id != id),
+                Popup {}
+            }
+        }
     }
 }
 
-fn popup() -> Element {
+#[component]
+fn Popup() -> Element {
     rsx! {
         div { "This is a popup window!" }
     }

examples/08-apis/on_resize.rs

@@ -5,7 +5,7 @@
 //! perform layout and painting.
 
 use dioxus::prelude::*;
-use dioxus_elements::geometry::euclid::Size2D;
+use dioxus_html::geometry::euclid::Size2D;
 
 fn main() {
     dioxus::launch(app);