Suspense boundaries/out of order streaming/anyhow like error handling (#2365)

* create static site generation helpers in the router crate

* work on integrating static site generation into fullstack

* move ssg into a separate crate

* integrate ssg with the launch builder

* simplify ssg example

* fix static_routes for child routes

* move CLI hot reloading websocket code into dioxus-hot-reload

* fix some unused imports

* use the same hot reloading websocket code for fullstack

* fix fullstack hot reloading

* move cli hot reloading logic into the hot reload crate

* ssg example working with dx serve

* add more examples

* fix clippy

* switch to a result for Element

* fix formatting

* fix hot reload doctest imports

* fix axum imports

* add show method to error context

* implement retaining nodes during suspense

* fix unterminated if statements

* communicate between tasks and suspense boundaries

* make suspense placeholders easier to use

* implement IntoDynNode and IntoVNode for more wrappers

* fix clippy examples

* fix rsx tests

* add streaming html utilities to the ssr package

* unify hydration and non-hydration ssr cache

* fix router with Result Element

* don't run server doc tests

* Fix hot reload websocket doc examples

* simple apps working with fullstack streaming

* fix preloading wasm

* Report errors encountered while streaming

* remove async from incremental renderer

* document new VirtualDom suspense methods

* make streaming work with incremental rendering

* fix static site generation

* document suspense structs

* create closure type; allow async event handlers in props; allow shorthand event handlers

* test forwarding event handlers with the shorthand syntax

* fix clippy

* fix imports in spawn async doctest

* fix empty rsx

* fix async result event handlers

* fix mounting router in multiple places

* Fix task dead cancel race condition

* simplify diffing before adding suspense

* fix binary size increase

* fix attribute diffing

* more diffing fixes

* create minimal fullstack feature

* smaller fullstack bundles

* allow mounting nodes that are already created and creating nodes without mounting them

* fix hot reload feature

* fix replacing components

* don't reclaim virtual nodes

* client side suspense working!

* fix CLI

* slightly smaller fullstack builds

* fix multiple suspended scopes

* fix merge errors

* yield back to tokio every few polls to fix suspending on many tasks at once

* remove logs

* document suspense boundary and update suspense example

* fix ssg

* make streaming optional

* fix some router and core tests

* fix suspense example

* fix serialization with out of order server futures

* add incremental streaming hackernews demo

* fix hackernews demo

* fix root hackernews redirect

* fix formatting

* add tests for suspense cases

* slightly smaller binaries

* slightly smaller

* improve error handling docs

* fix errors example link

* fix doc tests

* remove log file

* fix ssr cache type inference

* remove index.html

* fix ssg render template

* fix assigning ids on elements with dynamic attributes

* add desktop feature to the workspace examples

* remove router static generation example; ssg lives in the dioxus-static-generation package

* add a test for effects during suspense

* only run effects on mounted nodes

* fix multiple suspense roots

* fix node iterator

* fix closures without arguments

* fix dioxus-core readme doctest

* remove suspense logs

* fix scope stack

* fix clippy

* remove unused suspense boundary from hackernews

* assert that launch never returns for better compiler errors

* fix static generation launch function

* fix web renderer

* pass context providers into server functions

* add an example for FromContext

* clean up DioxusRouterExt

* fix server function context

* fix fullstack desktop example

* forward CLI serve settings to fullstack

* re-export serve config at the root of fullstack

* forward env directly instead of using a guard

* just set the port in the CLI for fullstack playwright tests

* fix fullstack dioxus-cli-config feature

* fix launch server merge conflicts

* fix fullstack launch context

* Merge branch 'main' into suspense-2.0

* fix fullstack html data

* remove drop virtual dom feature

* add a comment about only_write_templates binary size workaround

* remove explicit dependencies from use_server_future

* make ErrorContext and SuspenseContext more similar

* Tweak: small tweaks to tomls to make diff smaller

* only rerun components under suspense after the initial placeholders are sent to the client

* add module docs for suspense

* keep track of when suspense boundaries are resolved

* start implementing JS out of order streaming

* fix core tests

* implement the server side of suspense with js

* fix streaming ssr with nested suspense

* move streaming ssr code into fullstack

* revert minification changes

* serialize server future data as the html streams

* start loading scripts wasm immediately instead of defering the script

* very basic nested suspense example working with minimal html updates

* clean up some suspense/error docs

* fix hydrating nested pending server futures

* sort resolved boundaries by height

* Fix disconnecting clients while streaming

* fix static generation crate

* don't insert extra divs when hydrating streamed chunks

* wait to swap in the elements until they are hydrated

* remove inline streaming script

* hackernews partially working

* fix spa mode

* banish the open shadow dom

* fix removing placeholder

* set up streaming playwright test

* run web playwright tests on 9999 to avoid port conflicts with other local servers

* remove suspense nodes if the suspense boundary is replaced before the suspense resolves on the server

* ignore hydration of removed suspense boundaries

* use path based indexing to fix hydrating suspense after parent suspense with child is removed

* re-export dioxus error

* remove resolved suspense divs if the suspense boundary has been removed

* Fix client side initialized server futures

* ignore comment nodes while traversing nodes in core to avoid lists getting swapped out with suspense

* Pass initial hydration data to the client

* hide pre nodes

* don't panic if reclaiming an element fails

* fix scope stack when polling tasks

* improve deserialization out of length message

* Ok(VNode::placeholder()) -> VNode::empty()

* fix typo in rsx usage

* restore testing changes from suspense example

* clean up some logs and comments

* fix playwright tests

* clean up more changes in core

* clean up core tests

* remove anymap dependency

* clean up changes to hooks

* clean up changes in the router, rsx, and web

* revert changes to axum-hello-world

* fix use_server_future

* fix clippy in dioxus-core

* check that the next or previous node exist before checking if we should ignore them

* fix formatting

* fix suspense playwright test

* remove unused suspense code

* add more suspense playwright tests

* add more docs for error boundaries

* fix suspense core tests

* fix ErrorBoundary example

* remove a bunch of debug logging in js

* fix router failure_external_navigation

* use absolute paths in the interpreter build.rs

* strip '\r' while hashing ts files

* add a wrapper with a default error boundary and suspense boundary

* restore hot reloading

* ignore non-ts files when hashing

* sort ts files before hashing them

* fix rsx tests

* fix fullstack doc tests

* fix core tests

* fix axum auth example

* update suspense hydration diagram

* longer playwright build limit

* tiny fixes - spelling, formatting

* update diagram link

* remove comment and template nodes for suspense placeholders

* remove comment nodes as we hydrate text

* simplify hackernews example

* clean up hydrating text nodes

* switch to a separate environment variable for the base path for smaller binaries

* clean up file system html trait

* fix form data

* move streaming code into fullstack

* implement serialize and deserialize for CapturedError

* remove waits in the nested suspense playwright spec

* force sequential fullstack builds for CI

* longer nested suspense delay for CI

* fix --force-sequential flag

* wait to launch server until client build is done

---------

Co-authored-by: Jonathan Kelley <jkelleyrtp@gmail.com>

Cargo.lock

@@ -64,7 +64,7 @@ version = "0.7.8"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "891477e0c6a8957309ee5c45a6368af3ae14bb510732d2684ffa19af310920f9"
 dependencies = [
- "getrandom 0.2.14",
+ "getrandom 0.2.15",
  "once_cell",
  "version_check",
 ]
@@ -77,7 +77,7 @@ checksum = "e89da841a80418a9b391ebaea17f5c112ffaaa96f621d2c285b5174da76b9011"
 dependencies = [
  "cfg-if",
  "const-random",
- "getrandom 0.2.14",
+ "getrandom 0.2.15",
  "once_cell",
  "version_check",
  "zerocopy",
@@ -320,6 +320,17 @@ dependencies = [
  "pin-project-lite",
 ]
 
+[[package]]
+name = "async-channel"
+version = "1.9.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "81953c529336010edd6d8e358f886d9581267795c61b19475b71314bffa46d35"
+dependencies = [
+ "concurrent-queue",
+ "event-listener 2.5.3",
+ "futures-core",
+]
+
 [[package]]
 name = "async-channel"
 version = "2.2.1"
@@ -357,8 +368,8 @@ checksum = "b10202063978b3351199d68f8b22c4e47e4b1b822f8d43fd862d5ea8c006b29a"
 dependencies = [
  "async-task",
  "concurrent-queue",
- "fastrand",
- "futures-lite",
+ "fastrand 2.0.2",
+ "futures-lite 2.3.0",
  "slab",
 ]
 
@@ -368,9 +379,44 @@ version = "2.1.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "bc19683171f287921f2405677dd2ed2549c3b3bda697a563ebc3a121ace2aba1"
 dependencies = [
- "async-lock",
+ "async-lock 3.3.0",
+ "blocking",
+ "futures-lite 2.3.0",
+]
+
+[[package]]
+name = "async-global-executor"
+version = "2.4.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "05b1b633a2115cd122d73b955eadd9916c18c8f510ec9cd1686404c60ad1c29c"
+dependencies = [
+ "async-channel 2.2.1",
+ "async-executor",
+ "async-io 2.3.2",
+ "async-lock 3.3.0",
  "blocking",
- "futures-lite",
+ "futures-lite 2.3.0",
+ "once_cell",
+]
+
+[[package]]
+name = "async-io"
+version = "1.13.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0fc5b45d93ef0529756f812ca52e44c221b35341892d3dcc34132ac02f3dd2af"
+dependencies = [
+ "async-lock 2.8.0",
+ "autocfg",
+ "cfg-if",
+ "concurrent-queue",
+ "futures-lite 1.13.0",
+ "log",
+ "parking",
+ "polling 2.8.0",
+ "rustix 0.37.27",
+ "slab",
+ "socket2 0.4.10",
+ "waker-fn",
 ]
 
 [[package]]
@@ -379,19 +425,28 @@ version = "2.3.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "dcccb0f599cfa2f8ace422d3555572f47424da5648a4382a9dd0310ff8210884"
 dependencies = [
- "async-lock",
+ "async-lock 3.3.0",
  "cfg-if",
  "concurrent-queue",
  "futures-io",
- "futures-lite",
+ "futures-lite 2.3.0",
  "parking",
- "polling",
- "rustix",
+ "polling 3.7.0",
+ "rustix 0.38.34",
  "slab",
  "tracing",
  "windows-sys 0.52.0",
 ]
 
+[[package]]
+name = "async-lock"
+version = "2.8.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "287272293e9d8c41773cec55e365490fe034813a2f172f502d6ddcf75b2f582b"
+dependencies = [
+ "event-listener 2.5.3",
+]
+
 [[package]]
 name = "async-lock"
 version = "3.3.0"
@@ -409,9 +464,9 @@ version = "2.0.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "b948000fad4873c1c9339d60f2623323a0cfd3816e5181033c6a5cb68b2accf7"
 dependencies = [
- "async-io",
+ "async-io 2.3.2",
  "blocking",
- "futures-lite",
+ "futures-lite 2.3.0",
 ]
 
 [[package]]
@@ -420,16 +475,16 @@ version = "2.2.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "a53fc6301894e04a92cb2584fedde80cb25ba8e02d9dc39d4a87d036e22f397d"
 dependencies = [
- "async-channel",
- "async-io",
- "async-lock",
+ "async-channel 2.2.1",
+ "async-io 2.3.2",
+ "async-lock 3.3.0",
  "async-signal",
  "async-task",
  "blocking",
  "cfg-if",
  "event-listener 5.3.0",
- "futures-lite",
- "rustix",
+ "futures-lite 2.3.0",
+ "rustix 0.38.34",
  "tracing",
  "windows-sys 0.52.0",
 ]
@@ -451,18 +506,44 @@ version = "0.2.6"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "afe66191c335039c7bb78f99dc7520b0cbb166b3a1cb33a03f53d8a1c6f2afda"
 dependencies = [
- "async-io",
- "async-lock",
+ "async-io 2.3.2",
+ "async-lock 3.3.0",
  "atomic-waker",
  "cfg-if",
  "futures-core",
  "futures-io",
- "rustix",
+ "rustix 0.38.34",
  "signal-hook-registry",
  "slab",
  "windows-sys 0.52.0",
 ]
 
+[[package]]
+name = "async-std"
+version = "1.12.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "62565bb4402e926b29953c785397c6dc0391b7b446e45008b0049eb43cec6f5d"
+dependencies = [
+ "async-channel 1.9.0",
+ "async-global-executor",
+ "async-io 1.13.0",
+ "async-lock 2.8.0",
+ "crossbeam-utils",
+ "futures-channel",
+ "futures-core",
+ "futures-io",
+ "futures-lite 1.13.0",
+ "gloo-timers",
+ "kv-log-macro",
+ "log",
+ "memchr",
+ "once_cell",
+ "pin-project-lite",
+ "pin-utils",
+ "slab",
+ "wasm-bindgen-futures",
+]
+
 [[package]]
 name = "async-task"
 version = "4.7.0"
@@ -689,7 +770,7 @@ name = "axum-hello-world"
 version = "0.1.0"
 dependencies = [
  "dioxus",
- "reqwest",
+ "reqwest 0.11.27",
  "serde",
  "simple_logger",
  "tracing",
@@ -942,12 +1023,12 @@ version = "1.5.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "6a37913e8dc4ddcc604f0c6d3bf2887c995153af3611de9e23c352b44c1b9118"
 dependencies = [
- "async-channel",
- "async-lock",
+ "async-channel 2.2.1",
+ "async-lock 3.3.0",
  "async-task",
- "fastrand",
+ "fastrand 2.0.2",
  "futures-io",
- "futures-lite",
+ "futures-lite 2.3.0",
  "piper",
  "tracing",
 ]
@@ -1535,7 +1616,7 @@ version = "0.1.16"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "f9d839f2a20b0aee515dc581a6172f2321f96cab76c1a38a4c584a194955390e"
 dependencies = [
- "getrandom 0.2.14",
+ "getrandom 0.2.15",
  "once_cell",
  "tiny-keccak",
 ]
@@ -2223,7 +2304,7 @@ dependencies = [
  "openssl",
  "prettyplease",
  "rayon",
- "reqwest",
+ "reqwest 0.11.27",
  "rsx-rosetta",
  "serde",
  "serde_json",
@@ -2291,6 +2372,7 @@ name = "dioxus-core"
 version = "0.5.2"
 dependencies = [
  "dioxus",
+ "dioxus-html",
  "dioxus-ssr",
  "futures-channel",
  "futures-util",
@@ -2298,7 +2380,7 @@ dependencies = [
  "longest-increasing-subsequence",
  "pretty_assertions",
  "rand 0.8.5",
- "reqwest",
+ "reqwest 0.11.27",
  "rustc-hash",
  "rustversion",
  "serde",
@@ -2327,12 +2409,6 @@ dependencies = [
  "trybuild",
 ]
 
-[[package]]
-name = "dioxus-debug-cell"
-version = "0.1.1"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "2ea539174bb236e0e7dc9c12b19b88eae3cb574dedbd0252a2d43ea7e6de13e2"
-
 [[package]]
 name = "dioxus-desktop"
 version = "0.5.2"
@@ -2360,7 +2436,7 @@ dependencies = [
  "objc",
  "objc_id",
  "rand 0.8.5",
- "reqwest",
+ "reqwest 0.11.27",
  "rfd",
  "rustc-hash",
  "separator",
@@ -2387,11 +2463,11 @@ dependencies = [
  "dioxus-ssr",
  "form_urlencoded",
  "futures-util",
- "getrandom 0.2.14",
+ "getrandom 0.2.15",
  "http-range",
  "manganis",
  "rand 0.8.5",
- "reqwest",
+ "reqwest 0.11.27",
  "separator",
  "serde",
  "serde_json",
@@ -2422,18 +2498,20 @@ dependencies = [
  "dioxus-cli-config",
  "dioxus-desktop",
  "dioxus-hot-reload",
+ "dioxus-interpreter-js",
  "dioxus-lib",
  "dioxus-mobile",
  "dioxus-ssr",
  "dioxus-web",
  "dioxus_server_macro",
+ "futures-channel",
  "futures-util",
  "http 1.1.0",
  "hyper 1.3.1",
  "once_cell",
+ "parking_lot",
  "pin-project",
  "serde",
- "serde_json",
  "server_fn",
  "thiserror",
  "tokio",
@@ -2447,21 +2525,32 @@ dependencies = [
  "web-sys",
 ]
 
+[[package]]
+name = "dioxus-hackernews"
+version = "0.1.0"
+dependencies = [
+ "chrono",
+ "dioxus",
+ "reqwest 0.12.4",
+ "serde",
+ "tracing",
+ "tracing-subscriber",
+ "tracing-wasm",
+]
+
 [[package]]
 name = "dioxus-hooks"
 version = "0.5.2"
 dependencies = [
  "dioxus",
  "dioxus-core 0.5.2",
- "dioxus-debug-cell",
  "dioxus-signals",
  "futures-channel",
  "futures-util",
  "generational-box 0.5.2",
- "reqwest",
+ "reqwest 0.11.27",
  "rustversion",
  "slab",
- "thiserror",
  "tokio",
  "tracing",
  "web-sys",
@@ -2503,6 +2592,7 @@ dependencies = [
  "euclid",
  "futures-channel",
  "generational-box 0.5.2",
+ "js-sys",
  "keyboard-types",
  "rfd",
  "rustversion",
@@ -2700,7 +2790,7 @@ dependencies = [
  "once_cell",
  "parking_lot",
  "rand 0.8.5",
- "reqwest",
+ "reqwest 0.11.27",
  "rustc-hash",
  "serde",
  "simple_logger",
@@ -2722,6 +2812,7 @@ dependencies = [
  "dioxus-cli-config",
  "dioxus-core 0.5.2",
  "dioxus-html",
+ "dioxus-interpreter-js",
  "dioxus-signals",
  "fern",
  "fs_extra",
@@ -2768,7 +2859,7 @@ dependencies = [
 name = "dioxus-web"
 version = "0.5.2"
 dependencies = [
- "async-trait",
+ "ciborium",
  "console_error_panic_hook",
  "dioxus",
  "dioxus-core 0.5.2",
@@ -3191,6 +3282,15 @@ version = "0.9.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "a2a2b11eda1d40935b26cf18f6833c526845ae8c41e58d09af6adeb6f0269183"
 
+[[package]]
+name = "fastrand"
+version = "1.9.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e51093e27b0797c359783294ca4f0a911c270184cb10f85783b118614a1501be"
+dependencies = [
+ "instant",
+]
+
 [[package]]
 name = "fastrand"
 version = "2.0.2"
@@ -3451,13 +3551,28 @@ version = "0.3.30"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "a44623e20b9681a318efdd71c299b6b222ed6f231972bfe2f224ebad6311f0c1"
 
+[[package]]
+name = "futures-lite"
+version = "1.13.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "49a9d51ce47660b1e808d3c990b4709f2f415d928835a17dfd16991515c46bce"
+dependencies = [
+ "fastrand 1.9.0",
+ "futures-core",
+ "futures-io",
+ "memchr",
+ "parking",
+ "pin-project-lite",
+ "waker-fn",
+]
+
 [[package]]
 name = "futures-lite"
 version = "2.3.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "52527eb5074e35e9339c6b4e8d12600c7128b68fb25dcb9fa9dec18f7c25f3a5"
 dependencies = [
- "fastrand",
+ "fastrand 2.0.2",
  "futures-core",
  "futures-io",
  "parking",
@@ -3663,9 +3778,9 @@ dependencies = [
 
 [[package]]
 name = "getrandom"
-version = "0.2.14"
+version = "0.2.15"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "94b22e06ecb0110981051723910cbf0b5f5e09a2062dd7663334ee79a9d1286c"
+checksum = "c4567c8db10ae91089c99af84c68c38da3ec2f087c3f82960bcdbf3656b6f4d7"
 dependencies = [
  "cfg-if",
  "js-sys",
@@ -3976,7 +4091,7 @@ version = "0.1.12"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "35192df7fd0fa112263bad8021e2df7167df4cc2a6e6d15892e1e55621d3d4dc"
 dependencies = [
- "fastrand",
+ "fastrand 2.0.2",
  "unicode-normalization",
 ]
 
@@ -4226,6 +4341,8 @@ version = "0.2.6"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "9b995a66bb87bebce9a0f4a95aed01daca4872c050bfcb21653361c03bc35e5c"
 dependencies = [
+ "futures-channel",
+ "futures-core",
  "js-sys",
  "wasm-bindgen",
 ]
@@ -4740,7 +4857,7 @@ dependencies = [
  "httpdate",
  "itoa 1.0.11",
  "pin-project-lite",
- "socket2",
+ "socket2 0.5.6",
  "tokio",
  "tower-service",
  "tracing",
@@ -4814,6 +4931,22 @@ dependencies = [
  "tokio-native-tls",
 ]
 
+[[package]]
+name = "hyper-tls"
+version = "0.6.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "70206fc6890eaca9fde8a0bf71caa2ddfc9fe045ac9e5c70df101a7dbde866e0"
+dependencies = [
+ "bytes",
+ "http-body-util",
+ "hyper 1.3.1",
+ "hyper-util",
+ "native-tls",
+ "tokio",
+ "tokio-native-tls",
+ "tower-service",
+]
+
 [[package]]
 name = "hyper-util"
 version = "0.1.3"
@@ -4827,7 +4960,7 @@ dependencies = [
  "http-body 1.0.0",
  "hyper 1.3.1",
  "pin-project-lite",
- "socket2",
+ "socket2 0.5.6",
  "tokio",
  "tower",
  "tower-service",
@@ -5137,16 +5270,27 @@ version = "0.3.15"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "f958d3d68f4167080a18141e10381e7634563984a537f2a49a30fd8e53ac5767"
 
+[[package]]
+name = "io-lifetimes"
+version = "1.0.11"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "eae7b9aee968036d54dce06cebaefd919e4472e753296daccd6d344e3e2df0c2"
+dependencies = [
+ "hermit-abi 0.3.9",
+ "libc",
+ "windows-sys 0.48.0",
+]
+
 [[package]]
 name = "ipconfig"
 version = "0.3.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "b58db92f96b720de98181bbbe63c831e87005ab460c1bf306eb2622b4707997f"
 dependencies = [
- "socket2",
+ "socket2 0.5.6",
  "widestring",
  "windows-sys 0.48.0",
- "winreg",
+ "winreg 0.50.0",
 ]
 
 [[package]]
@@ -5391,6 +5535,15 @@ dependencies = [
  "selectors",
 ]
 
+[[package]]
+name = "kv-log-macro"
+version = "1.0.7"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0de8b303297635ad57c9f5059fd9cee7a47f8e8daa09df0fcd07dd39fb22977f"
+dependencies = [
+ "log",
+]
+
 [[package]]
 name = "lazy_static"
 version = "1.4.0"
@@ -5414,9 +5567,9 @@ checksum = "03087c2bad5e1034e8cace5926dec053fb3790248370865f5117a7d0213354c8"
 
 [[package]]
 name = "libc"
-version = "0.2.153"
+version = "0.2.155"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "9c198f91728a82281a64e1f4f9eeb25d82cb32a5de251c6bd1b5154d63a8e7bd"
+checksum = "97b3888a4aecf77e811145cadf6eef5901f4782c53886191b2f693f24761847c"
 
 [[package]]
 name = "libflate"
@@ -5548,7 +5701,7 @@ dependencies = [
  "cssparser-color",
  "dashmap",
  "data-encoding",
- "getrandom 0.2.14",
+ "getrandom 0.2.15",
  "itertools 0.10.5",
  "lazy_static",
  "parcel_selectors",
@@ -5587,6 +5740,12 @@ version = "0.5.6"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "0717cef1bc8b636c6e1c1bbdefc09e6322da8a9321966e8928ef80d20f7f770f"
 
+[[package]]
+name = "linux-raw-sys"
+version = "0.3.8"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ef53942eb7bf7ff43a617b3e2c1c4a5ecf5944a7c1bc12d7ee39bbb15e5c1519"
+
 [[package]]
 name = "linux-raw-sys"
 version = "0.4.13"
@@ -5776,7 +5935,7 @@ dependencies = [
  "railwind",
  "ravif",
  "rayon",
- "reqwest",
+ "reqwest 0.11.27",
  "rustc-hash",
  "serde",
  "toml 0.7.8",
@@ -5794,7 +5953,7 @@ dependencies = [
  "base64 0.21.7",
  "home",
  "infer 0.11.0",
- "reqwest",
+ "reqwest 0.11.27",
  "serde",
  "toml 0.7.8",
  "tracing",
@@ -6109,6 +6268,15 @@ dependencies = [
  "jni-sys",
 ]
 
+[[package]]
+name = "nested-suspense"
+version = "0.1.0"
+dependencies = [
+ "dioxus",
+ "serde",
+ "tokio",
+]
+
 [[package]]
 name = "new_debug_unreachable"
 version = "1.0.6"
@@ -6905,7 +7073,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "668d31b1c4eba19242f2088b2bf3316b82ca31082a8335764db4e083db7485d4"
 dependencies = [
  "atomic-waker",
- "fastrand",
+ "fastrand 2.0.2",
  "futures-io",
 ]
 
@@ -6991,6 +7159,22 @@ dependencies = [
  "miniz_oxide",
 ]
 
+[[package]]
+name = "polling"
+version = "2.8.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "4b2d323e8ca7996b3e23126511a523f7e62924d93ecd5ae73b333815b0eb3dce"
+dependencies = [
+ "autocfg",
+ "bitflags 1.3.2",
+ "cfg-if",
+ "concurrent-queue",
+ "libc",
+ "log",
+ "pin-project-lite",
+ "windows-sys 0.48.0",
+]
+
 [[package]]
 name = "polling"
 version = "3.7.0"
@@ -7001,7 +7185,7 @@ dependencies = [
  "concurrent-queue",
  "hermit-abi 0.3.9",
  "pin-project-lite",
- "rustix",
+ "rustix 0.38.34",
  "tracing",
  "windows-sys 0.52.0",
 ]
@@ -7311,7 +7495,7 @@ version = "0.6.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "ec0be4795e2f6a28069bec0b5ff3e2ac9bafc99e6a9a7dc3547996c5c816922c"
 dependencies = [
- "getrandom 0.2.14",
+ "getrandom 0.2.15",
 ]
 
 [[package]]
@@ -7438,7 +7622,7 @@ version = "0.4.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "bd283d9651eeda4b2a83a43c1c91b266c40fd76ecd39a50a8c630ae69dc72891"
 dependencies = [
- "getrandom 0.2.14",
+ "getrandom 0.2.15",
  "libredox",
  "thiserror",
 ]
@@ -7529,7 +7713,7 @@ dependencies = [
  "http-body 0.4.6",
  "hyper 0.14.28",
  "hyper-rustls 0.24.2",
- "hyper-tls",
+ "hyper-tls 0.5.0",
  "ipnet",
  "js-sys",
  "log",
@@ -7557,7 +7741,49 @@ dependencies = [
  "wasm-streams",
  "web-sys",
  "webpki-roots 0.25.4",
- "winreg",
+ "winreg 0.50.0",
+]
+
+[[package]]
+name = "reqwest"
+version = "0.12.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "566cafdd92868e0939d3fb961bd0dc25fcfaaed179291093b3d43e6b3150ea10"
+dependencies = [
+ "base64 0.22.0",
+ "bytes",
+ "encoding_rs",
+ "futures-core",
+ "futures-util",
+ "h2 0.4.4",
+ "http 1.1.0",
+ "http-body 1.0.0",
+ "http-body-util",
+ "hyper 1.3.1",
+ "hyper-tls 0.6.0",
+ "hyper-util",
+ "ipnet",
+ "js-sys",
+ "log",
+ "mime",
+ "native-tls",
+ "once_cell",
+ "percent-encoding",
+ "pin-project-lite",
+ "rustls-pemfile 2.1.2",
+ "serde",
+ "serde_json",
+ "serde_urlencoded",
+ "sync_wrapper 0.1.2",
+ "system-configuration",
+ "tokio",
+ "tokio-native-tls",
+ "tower-service",
+ "url",
+ "wasm-bindgen",
+ "wasm-bindgen-futures",
+ "web-sys",
+ "winreg 0.52.0",
 ]
 
 [[package]]
@@ -7638,7 +7864,7 @@ checksum = "c17fa4cb658e3583423e915b9f3acc01cceaee1860e33d59ebae66adc3a2dc0d"
 dependencies = [
  "cc",
  "cfg-if",
- "getrandom 0.2.14",
+ "getrandom 0.2.15",
  "libc",
  "spin 0.9.8",
  "untrusted",
@@ -7773,6 +7999,20 @@ dependencies = [
  "semver",
 ]
 
+[[package]]
+name = "rustix"
+version = "0.37.27"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "fea8ca367a3a01fe35e6943c400addf443c0f57670e6ec51196f71a4b8762dd2"
+dependencies = [
+ "bitflags 1.3.2",
+ "errno",
+ "io-lifetimes",
+ "libc",
+ "linux-raw-sys 0.3.8",
+ "windows-sys 0.48.0",
+]
+
 [[package]]
 name = "rustix"
 version = "0.38.34"
@@ -7782,7 +8022,7 @@ dependencies = [
  "bitflags 2.5.0",
  "errno",
  "libc",
- "linux-raw-sys",
+ "linux-raw-sys 0.4.13",
  "windows-sys 0.52.0",
 ]
 
@@ -8185,7 +8425,7 @@ dependencies = [
  "inventory",
  "js-sys",
  "once_cell",
- "reqwest",
+ "reqwest 0.11.27",
  "send_wrapper",
  "serde",
  "serde_json",
@@ -8437,6 +8677,16 @@ dependencies = [
  "version_check",
 ]
 
+[[package]]
+name = "socket2"
+version = "0.4.10"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9f7916fc008ca5542385b89a3d3ce689953c143e9304a9bf8beec1de48994c0d"
+dependencies = [
+ "libc",
+ "winapi",
+]
+
 [[package]]
 name = "socket2"
 version = "0.5.6"
@@ -8846,6 +9096,15 @@ dependencies = [
  "is_ci",
 ]
 
+[[package]]
+name = "suspense-carousel"
+version = "0.5.2"
+dependencies = [
+ "async-std",
+ "dioxus",
+ "serde",
+]
+
 [[package]]
 name = "syn"
 version = "1.0.109"
@@ -9036,7 +9295,7 @@ dependencies = [
  "uuid",
  "walkdir",
  "windows-sys 0.48.0",
- "winreg",
+ "winreg 0.50.0",
  "zip",
 ]
 
@@ -9084,8 +9343,8 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "85b77fafb263dd9d05cbeac119526425676db3784113aa9295c88498cbf8bff1"
 dependencies = [
  "cfg-if",
- "fastrand",
- "rustix",
+ "fastrand 2.0.2",
+ "rustix 0.38.34",
  "windows-sys 0.52.0",
 ]
 
@@ -9268,7 +9527,7 @@ dependencies = [
  "parking_lot",
  "pin-project-lite",
  "signal-hook-registry",
- "socket2",
+ "socket2 0.5.6",
  "tokio-macros",
  "windows-sys 0.48.0",
 ]
@@ -9792,7 +10051,7 @@ version = "1.8.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "a183cf7feeba97b4dd1c0d46788634f6221d87fa961b305bed08c851829efcc0"
 dependencies = [
- "getrandom 0.2.14",
+ "getrandom 0.2.15",
  "serde",
  "sha1_smol",
 ]
@@ -9844,6 +10103,12 @@ version = "0.5.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "65dd7eed29412da847b0f78bcec0ac98588165988a8cfe41d4ea1d429f8ccfff"
 
+[[package]]
+name = "waker-fn"
+version = "1.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "317211a0dc0ceedd78fb2ca9a44aed3d7b9b26f81870d485c07122b4350673b7"
+
 [[package]]
 name = "walkdir"
 version = "2.5.0"
@@ -10291,7 +10556,7 @@ dependencies = [
  "either",
  "home",
  "once_cell",
- "rustix",
+ "rustix 0.38.34",
 ]
 
 [[package]]
@@ -10679,6 +10944,16 @@ dependencies = [
  "windows-sys 0.48.0",
 ]
 
+[[package]]
+name = "winreg"
+version = "0.52.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a277a57398d4bfa075df44f501a17cfdf8542d224f0d36095a2adc7aee4ef0a5"
+dependencies = [
+ "cfg-if",
+ "windows-sys 0.48.0",
+]
+
 [[package]]
 name = "wry"
 version = "0.37.0"
@@ -10761,8 +11036,8 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "8da84f1a25939b27f6820d92aed108f83ff920fdf11a7b19366c27c4cda81d4f"
 dependencies = [
  "libc",
- "linux-raw-sys",
- "rustix",
+ "linux-raw-sys 0.4.13",
+ "rustix 0.38.34",
 ]
 
 [[package]]
@@ -10796,8 +11071,8 @@ dependencies = [
  "async-broadcast",
  "async-executor",
  "async-fs",
- "async-io",
- "async-lock",
+ "async-io 2.3.2",
+ "async-lock 3.3.0",
  "async-process",
  "async-recursion",
  "async-task",

Cargo.toml

@@ -35,6 +35,7 @@ members = [
     "packages/fullstack/examples/axum-streaming",
     "packages/fullstack/examples/axum-desktop",
     "packages/fullstack/examples/axum-auth",
+    "packages/fullstack/examples/hackernews",
     "packages/static-generation/examples/simple",
     "packages/static-generation/examples/router",
     "packages/static-generation/examples/github-pages",
@@ -46,6 +47,8 @@ members = [
     "packages/playwright-tests/liveview",
     "packages/playwright-tests/web",
     "packages/playwright-tests/fullstack",
+    "packages/playwright-tests/suspense-carousel",
+    "packages/playwright-tests/nested-suspense",
 ]
 exclude = ["examples/mobile_demo", "examples/openid_connect_demo"]
 
@@ -61,10 +64,10 @@ dioxus-core-macro = { path = "packages/core-macro", version = "0.5.0" }
 dioxus-config-macro = { path = "packages/config-macro", version = "0.5.0" }
 dioxus-router = { path = "packages/router", version = "0.5.0" }
 dioxus-router-macro = { path = "packages/router-macro", version = "0.5.0" }
-dioxus-html = { path = "packages/html", version = "0.5.0" }
+dioxus-html = { path = "packages/html", default-features = false, version = "0.5.0" }
 dioxus-html-internal-macro = { path = "packages/html-internal-macro", version = "0.5.0" }
 dioxus-hooks = { path = "packages/hooks", version = "0.5.0" }
-dioxus-web = { path = "packages/web", version = "0.5.0" }
+dioxus-web = { path = "packages/web", default-features = false, version = "0.5.0" }
 dioxus-ssr = { path = "packages/ssr", version = "0.5.0", default-features = false }
 dioxus-desktop = { path = "packages/desktop", version = "0.5.0", default-features = false }
 dioxus-mobile = { path = "packages/mobile", version = "0.5.0" }
@@ -118,6 +121,9 @@ axum_session_auth = "0.12.1"
 axum-extra = "0.9.2"
 reqwest = "0.11.24"
 owo-colors = "4.0.0"
+ciborium = "0.2.1"
+base64 = "0.21.0"
+once_cell = "1.17.1"
 
 # speed up some macros by optimizing them
 [profile.dev.package.insta]
@@ -275,7 +281,7 @@ required-features = ["desktop"]
 doc-scrape-examples = true
 
 [[example]]
-name = "error_handle"
+name = "errors"
 required-features = ["desktop"]
 doc-scrape-examples = true
 

examples/README.md

@@ -74,7 +74,7 @@ cargo run --example hello_world
 
 [disabled](./disabled.rs) - Disable buttons conditionally
 
-[error_handle](./error_handle.rs) - Handle errors with early return
+[errors](./errors.rs) - Handle errors with early return
 
 ## Routing
 

examples/error_handle.rs

@@ -1,55 +0,0 @@
-//! This example showcases how to use the ErrorBoundary component to handle errors in your app.
-//!
-//! The ErrorBoundary component is a special component that can be used to catch panics and other errors that occur.
-//! By default, Dioxus will catch panics during rendering, async, and handlers, and bubble them up to the nearest
-//! error boundary. If no error boundary is present, it will be caught by the root error boundary and the app will
-//! render the error message as just a string.
-
-use dioxus::{dioxus_core::CapturedError, prelude::*};
-
-fn main() {
-    launch_desktop(app);
-}
-
-fn app() -> Element {
-    rsx! {
-        ErrorBoundary {
-            handle_error: |error: CapturedError| rsx! {
-                h1 { "An error occurred" }
-                pre { "{error:#?}" }
-            },
-            DemoC { x: 1 }
-        }
-
-        ErrorBoundary {
-            handle_error: |error: CapturedError| rsx! {
-                h1 { "Another error occurred" }
-                pre { "{error:#?}" }
-            },
-            ComponentPanic {}
-        }
-    }
-}
-
-#[component]
-fn DemoC(x: i32) -> Element {
-    rsx! {
-        h1 { "Error handler demo" }
-        button {
-            onclick: move |_| {
-                // Create an error
-                let result: Result<Element, &str> = Err("Error");
-
-                // And then call `throw` on it. The `throw` method is given by the `Throw` trait which is automatically
-                // imported via the prelude.
-                _ = result.throw();
-            },
-            "Click to throw an error"
-        }
-    }
-}
-
-#[component]
-fn ComponentPanic() -> Element {
-    panic!("This component panics")
-}

examples/errors.rs

@@ -0,0 +1,161 @@
+//! This example showcases how to use the ErrorBoundary component to handle errors in your app.
+//!
+//! The ErrorBoundary component is a special component that can be used to catch panics and other errors that occur.
+//! By default, Dioxus will catch panics during rendering, async, and handlers, and bubble them up to the nearest
+//! error boundary. If no error boundary is present, it will be caught by the root error boundary and the app will
+//! render the error message as just a string.
+//!
+//! NOTE: In wasm, panics can currently not be caught by the error boundary. This is a limitation of WASM in rust.
+#![allow(non_snake_case)]
+
+use dioxus::prelude::*;
+
+fn main() {
+    launch(|| rsx! { Router::<Route> {} });
+}
+
+/// You can use an ErrorBoundary to catch errors in children and display a warning
+fn Simple() -> Element {
+    rsx! {
+        GoBackButton { "Home" }
+        ErrorBoundary {
+            handle_error: |error: ErrorContext| rsx! {
+                h1 { "An error occurred" }
+                pre { "{error:#?}" }
+            },
+            ParseNumber {}
+        }
+    }
+}
+
+#[component]
+fn ParseNumber() -> Element {
+    rsx! {
+        h1 { "Error handler demo" }
+        button {
+            onclick: move |_| {
+                // You can return a result from an event handler which lets you easily quit rendering early if something fails
+                let data: i32 = "0.5".parse()?;
+
+                println!("parsed {data}");
+
+                Ok(())
+            },
+            "Click to throw an error"
+        }
+    }
+}
+
+// You can provide additional context for the Error boundary to visualize
+fn Show() -> Element {
+    rsx! {
+        GoBackButton { "Home" }
+        div {
+            ErrorBoundary {
+                handle_error: |errors: ErrorContext| {
+                    rsx! {
+                        for error in errors.errors() {
+                            if let Some(error) = error.show() {
+                                {error}
+                            } else {
+                                pre {
+                                    color: "red",
+                                    "{error}"
+                                }
+                            }
+                        }
+                    }
+                },
+                ParseNumberWithShow {}
+            }
+        }
+    }
+}
+
+#[component]
+fn ParseNumberWithShow() -> Element {
+    rsx! {
+        h1 { "Error handler demo" }
+        button {
+            onclick: move |_| {
+                let request_data = "0.5";
+                let data: i32 = request_data.parse()
+                    // You can attach rsx to results that can be displayed in the Error Boundary
+                    .show(|_| rsx!{
+                        div {
+                            background_color: "red",
+                            border: "black",
+                            border_width: "2px",
+                            border_radius: "5px",
+                            p { "Failed to parse data" }
+                            Link {
+                                to: Route::Home {},
+                                "Go back to the homepage"
+                            }
+                        }
+                    })?;
+
+                println!("parsed {data}");
+
+                Ok(())
+            },
+            "Click to throw an error"
+        }
+    }
+}
+
+// On desktop, dioxus will catch panics in components and insert an error automatically
+fn Panic() -> Element {
+    rsx! {
+        GoBackButton { "Home" }
+        ErrorBoundary {
+            handle_error: |errors: ErrorContext| rsx! {
+                h1 { "Another error occurred" }
+                pre { "{errors:#?}" }
+            },
+            ComponentPanic {}
+        }
+    }
+}
+
+#[component]
+fn ComponentPanic() -> Element {
+    panic!("This component panics")
+}
+
+#[derive(Routable, Clone, Debug, PartialEq)]
+enum Route {
+    #[route("/")]
+    Home {},
+    #[route("/simple")]
+    Simple {},
+    #[route("/panic")]
+    Panic {},
+    #[route("/show")]
+    Show {},
+}
+
+fn Home() -> Element {
+    rsx! {
+        ul {
+            li {
+                Link {
+                    to: Route::Simple {},
+                    "Simple errors"
+                }
+            }
+            li {
+                Link {
+                    to: Route::Panic {},
+                    "Capture panics"
+                }
+            }
+            li {
+                Link {
+                    to: Route::Show {},
+                    "Show errors"
+                }
+            }
+        }
+    }
+}

examples/rsx_usage.rs

@@ -170,13 +170,13 @@ fn app() -> Element {
 
             // Can pass in props directly as an expression
             {
-                let props = TallerProps {a: "hello", children: None };
+                let props = TallerProps {a: "hello", children: VNode::empty() };
                 rsx!(Taller { ..props })
             }
 
             // Spreading can also be overridden manually
             Taller {
-                ..TallerProps { a: "ballin!", children: None },
+                ..TallerProps { a: "ballin!", children: VNode::empty() },
                 a: "not ballin!"
             }
 
@@ -193,8 +193,8 @@ fn app() -> Element {
             // Type inference can be used too
             TypedInput { initial: 10.0 }
 
-            // geneircs with the `inline_props` macro
-            Label { text: "hello geneirc world!" }
+            // generic with the `inline_props` macro
+            Label { text: "hello generic world!" }
             Label { text: 99.9 }
 
             // Lowercase components work too, as long as they are access using a path
@@ -283,7 +283,7 @@ where
         return rsx! { "{props}" };
     }
 
-    None
+    VNode::empty()
 }
 
 #[component]

examples/shorthand.rs

@@ -22,7 +22,7 @@ fn app() -> Element {
     rsx! {
         div { class, id, {&children} }
         Component { a, b, c, children, onclick }
-        Component { a, ..ComponentProps { a: 1, b: 2, c: 3, children: None, onclick: Default::default() } }
+        Component { a, ..ComponentProps { a: 1, b: 2, c: 3, children: VNode::empty(), onclick: Default::default() } }
     }
 }
 

examples/suspense.rs

@@ -39,7 +39,14 @@ fn app() -> Element {
             }
 
             h3 { "Illustrious Dog Photo" }
-            Doggo {}
+            SuspenseBoundary {
+                fallback: move |suspense: SuspenseContext| suspense.suspense_placeholder().unwrap_or_else(|| rsx! {
+                    div {
+                        "Loading..."
+                    }
+                }),
+                Doggo {}
+            }
         }
     }
 }
@@ -49,7 +56,7 @@ fn app() -> Element {
 /// actually renders the data.
 #[component]
 fn Doggo() -> Element {
-    let mut fut = use_resource(move || async move {
+    let mut resource = use_resource(move || async move {
         #[derive(serde::Deserialize)]
         struct DogApi {
             message: String,
@@ -62,12 +69,26 @@ fn Doggo() -> Element {
             .await
     });
 
-    match fut.read_unchecked().as_ref() {
-        Some(Ok(resp)) => rsx! {
-            button { onclick: move |_| fut.restart(), "Click to fetch another doggo" }
+    // You can suspend the future and only continue rendering when it's ready
+    let value = resource.suspend().with_loading_placeholder(|| {
+        rsx! {
+            div {
+                "Loading doggos..."
+            }
+        }
+    })?;
+
+    match value.read_unchecked().as_ref() {
+        Ok(resp) => rsx! {
+            button { onclick: move |_| resource.restart(), "Click to fetch another doggo" }
             div { img { max_width: "500px", max_height: "500px", src: "{resp.message}" } }
         },
-        Some(Err(_)) => rsx! { div { "loading dogs failed" } },
-        None => rsx! { div { "loading dogs..." } },
+        Err(_) => rsx! {
+            div { "loading dogs failed" }
+            button {
+                onclick: move |_| resource.restart(),
+                "retry"
+            }
+        },
     }
 }

packages/cli-config/src/lib.rs

@@ -17,10 +17,21 @@ pub use serve::*;
 pub mod __private {
     use crate::CrateConfig;
 
-    pub const CONFIG_ENV: &str = "DIOXUS_CONFIG";
+    pub(crate) const CONFIG_ENV: &str = "DIOXUS_CONFIG";
+    pub(crate) const CONFIG_BASE_PATH_ENV: &str = "DIOXUS_CONFIG_BASE_PATH";
 
     pub fn save_config(config: &CrateConfig) -> CrateConfigDropGuard {
         std::env::set_var(CONFIG_ENV, serde_json::to_string(config).unwrap());
+        std::env::set_var(
+            CONFIG_BASE_PATH_ENV,
+            config
+                .dioxus_config
+                .web
+                .app
+                .base_path
+                .clone()
+                .unwrap_or_default(),
+        );
         CrateConfigDropGuard
     }
 
@@ -30,6 +41,7 @@ pub mod __private {
     impl Drop for CrateConfigDropGuard {
         fn drop(&mut self) {
             std::env::remove_var(CONFIG_ENV);
+            std::env::remove_var(CONFIG_BASE_PATH_ENV);
         }
     }
 
@@ -67,3 +79,7 @@ pub static CURRENT_CONFIG: once_cell::sync::Lazy<
 #[cfg(feature = "read-config")]
 /// The current crate's configuration.
 pub const CURRENT_CONFIG_JSON: Option<&str> = std::option_env!("DIOXUS_CONFIG");
+
+#[cfg(feature = "read-config")]
+/// The current crate's configuration.
+pub const BASE_PATH: Option<&str> = std::option_env!("DIOXUS_CONFIG_BASE_PATH");

packages/cli/src/assets.rs

@@ -105,13 +105,16 @@ fn copy_dir_to(src_dir: PathBuf, dest_dir: PathBuf, pre_compress: bool) -> std::
 
                 // Then pre-compress the file if needed
                 if pre_compress {
-                    if let Err(err) = pre_compress_file(&entry_path.clone()) {
+                    if let Err(err) = pre_compress_file(&output_file_location) {
                         tracing::error!(
                             "Failed to pre-compress static assets {}: {}",
-                            entry_path.display(),
+                            output_file_location.display(),
                             err
                         );
                     }
+                    // If pre-compression isn't enabled, we should remove the old compressed file if it exists
+                } else if let Some(compressed_path) = compressed_path(&output_file_location) {
+                    _ = std::fs::remove_file(compressed_path);
                 }
             }
 
@@ -124,12 +127,12 @@ fn copy_dir_to(src_dir: PathBuf, dest_dir: PathBuf, pre_compress: bool) -> std::
     Ok(())
 }
 
-/// pre-compress a file with brotli
-pub(crate) fn pre_compress_file(path: &Path) -> std::io::Result<()> {
+/// Get the path to the compressed version of a file
+fn compressed_path(path: &Path) -> Option<PathBuf> {
     let new_extension = match path.extension() {
         Some(ext) => {
             if ext.to_string_lossy().to_lowercase().ends_with("br") {
-                return Ok(());
+                return None;
             }
             let mut ext = ext.to_os_string();
             ext.push(".br");
@@ -137,22 +140,37 @@ pub(crate) fn pre_compress_file(path: &Path) -> std::io::Result<()> {
         }
         None => OsString::from("br"),
     };
+    Some(path.with_extension(new_extension))
+}
+
+/// pre-compress a file with brotli
+pub(crate) fn pre_compress_file(path: &Path) -> std::io::Result<()> {
+    let Some(compressed_path) = compressed_path(path) else {
+        return Ok(());
+    };
     let file = std::fs::File::open(path)?;
     let mut stream = std::io::BufReader::new(file);
-    let output = path.with_extension(new_extension);
-    let mut buffer = std::fs::File::create(output)?;
+    let mut buffer = std::fs::File::create(compressed_path)?;
     let params = BrotliEncoderParams::default();
     brotli::BrotliCompress(&mut stream, &mut buffer, &params)?;
     Ok(())
 }
 
 /// pre-compress all files in a folder
-pub(crate) fn pre_compress_folder(path: &Path) -> std::io::Result<()> {
+pub(crate) fn pre_compress_folder(path: &Path, pre_compress: bool) -> std::io::Result<()> {
     let walk_dir = WalkDir::new(path);
     for entry in walk_dir.into_iter().filter_map(|e| e.ok()) {
         let entry_path = entry.path();
         if entry_path.is_file() {
-            pre_compress_file(entry_path)?;
+            if pre_compress {
+                if let Err(err) = pre_compress_file(entry_path) {
+                    tracing::error!("Failed to pre-compress file {entry_path:?}: {err}");
+                }
+            }
+            // If pre-compression isn't enabled, we should remove the old compressed file if it exists
+            else if let Some(compressed_path) = compressed_path(entry_path) {
+                _ = std::fs::remove_file(compressed_path);
+            }
         }
     }
     Ok(())

packages/cli/src/assets/index.html

@@ -1,22 +1,38 @@
 <!DOCTYPE html>
 <html>
-<head>
-  <title>{app_title}</title>
-  <meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <meta charset="UTF-8" />
-  {style_include}
-</head>
-<body>
-  <div id="main"></div>
-  <script type="module">
-    import init from "/{base_path}/assets/dioxus/{app_name}.js";
-    init("/{base_path}/assets/dioxus/{app_name}_bg.wasm").then(wasm => {
-      if (wasm.__wbindgen_start == undefined) {
-        wasm.main();
-      }
-    });
-  </script>
-  {script_include}
-</body>
-</html>
+  <head>
+    <title>{app_title}</title>
+    <meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta charset="UTF-8" />
+    <link
+      rel="preload"
+      href="/{base_path}/assets/dioxus/{app_name}.js"
+      as="style"
+    />
+    <link
+      rel="preload"
+      href="/{base_path}/assets/dioxus/{app_name}_bg.wasm"
+      as="fetch"
+      type="application/wasm"
+      crossorigin=""
+    />
+    {style_include}
+  </head>
+  <body>
+    <div id="main"></div>
+    <script>
+      // We can't use a module script here because we need to start the script immediately when streaming
+      import("/{base_path}/assets/dioxus/{app_name}.js").then(
+        ({ default: init }) => {
+          init("/{base_path}/assets/dioxus/{app_name}_bg.wasm").then((wasm) => {
+            if (wasm.__wbindgen_start == undefined) {
+              wasm.main();
+            }
+          });
+        }
+      );
+    </script>
+    {script_include}
+  </body>
+</html>

packages/cli/src/builder.rs

@@ -230,9 +230,7 @@ pub fn build_web(
     }
 
     // If pre-compressing is enabled, we can pre_compress the wasm-bindgen output
-    if config.should_pre_compress_web_assets() {
-        pre_compress_folder(&bindgen_outdir)?;
-    }
+    pre_compress_folder(&bindgen_outdir, config.should_pre_compress_web_assets())?;
 
     // [5][OPTIONAL] If tailwind is enabled and installed we run it to generate the CSS
     let dioxus_tools = dioxus_config.application.tools.clone();
@@ -624,6 +622,16 @@ pub fn gen_page(config: &CrateConfig, manifest: Option<&AssetManifest>, serve: b
     </body"#
             ),
         );
+
+        // And try to insert preload links for the wasm and js files
+        html = html.replace(
+            "</head",
+            &format!(
+                r#"<link rel="preload" href="/{base_path}/assets/dioxus/{app_name}_bg.wasm" as="fetch" type="application/wasm" crossorigin="">
+                    <link rel="preload" href="/{base_path}/assets/dioxus/{app_name}.js" as="script">
+    </head"#
+            ),
+        );
     }
 
     let title = config.dioxus_config.web.app.title.clone();

packages/cli/src/cli/cfg.rs

@@ -16,6 +16,11 @@ pub struct ConfigOptsBuild {
     #[serde(default)]
     pub force_debug: bool,
 
+    /// This flag only applies to fullstack builds. By default fullstack builds will run the server and client builds in parallel. This flag will force the build to run the server build first, then the client build. [default: false]
+    #[clap(long)]
+    #[serde(default)]
+    pub force_sequential: bool,
+
     // Use verbose output [default: false]
     #[clap(long)]
     #[serde(default)]
@@ -73,6 +78,7 @@ impl From<ConfigOptsServe> for ConfigOptsBuild {
             server_feature: serve.server_feature,
             skip_assets: serve.skip_assets,
             force_debug: serve.force_debug,
+            force_sequential: serve.force_sequential,
             cargo_args: serve.cargo_args,
         }
     }
@@ -104,6 +110,11 @@ pub struct ConfigOptsServe {
     #[serde(default)]
     pub force_debug: bool,
 
+    /// This flag only applies to fullstack builds. By default fullstack builds will run the server and client builds in parallel. This flag will force the build to run the server build first, then the client build. [default: false]
+    #[clap(long)]
+    #[serde(default)]
+    pub force_sequential: bool,
+
     // Use verbose output [default: false]
     #[clap(long)]
     #[serde(default)]

packages/cli/src/server/desktop/mod.rs

@@ -240,17 +240,11 @@ fn send_msg(msg: HotReloadMsg, channel: &mut impl std::io::Write) -> bool {
     }
 }
 
-fn start_desktop(
-    config: &CrateConfig,
-    skip_assets: bool,
-    rust_flags: Option<String>,
+fn run_desktop(
     args: &Vec<String>,
     env: Vec<(String, String)>,
+    result: BuildResult,
 ) -> Result<(RAIIChild, BuildResult)> {
-    // Run the desktop application
-    // Only used for the fullstack platform,
-    let result = crate::builder::build_desktop(config, true, skip_assets, rust_flags)?;
-
     let active = "DIOXUS_ACTIVE";
     let child = RAIIChild(
         Command::new(
@@ -278,13 +272,12 @@ impl DesktopPlatform {
     /// `rust_flags` argument is added because it is used by the
     /// `DesktopPlatform`'s implementation of the `Platform::start()`.
     pub fn start_with_options(
+        build_result: BuildResult,
         config: &CrateConfig,
         serve: &ConfigOptsServe,
-        rust_flags: Option<String>,
         env: Vec<(String, String)>,
     ) -> Result<Self> {
-        let (child, first_build_result) =
-            start_desktop(config, serve.skip_assets, rust_flags, &serve.args, env)?;
+        let (child, first_build_result) = run_desktop(&serve.args, env, build_result)?;
 
         tracing::info!("🚀 Starting development server...");
 
@@ -337,7 +330,9 @@ impl DesktopPlatform {
         // Todo: add a timeout here to kill the process if it doesn't shut down within a reasonable time
         self.currently_running_child.0.wait()?;
 
-        let (child, result) = start_desktop(config, self.skip_assets, rust_flags, &self.args, env)?;
+        let build_result =
+            crate::builder::build_desktop(config, true, self.skip_assets, rust_flags)?;
+        let (child, result) = run_desktop(&self.args, env, build_result)?;
         self.currently_running_child = child;
         Ok(result)
     }
@@ -349,11 +344,8 @@ impl Platform for DesktopPlatform {
         serve: &ConfigOptsServe,
         env: Vec<(String, String)>,
     ) -> Result<Self> {
-        // See `start_with_options()`'s docs for the explanation why the code
-        // was moved there.
-        // Since desktop platform doesn't use `rust_flags`, this argument is
-        // explicitly set to `None`.
-        DesktopPlatform::start_with_options(config, serve, None, env)
+        let build_result = crate::builder::build_desktop(config, true, serve.skip_assets, None)?;
+        DesktopPlatform::start_with_options(build_result, config, serve, env)
     }
 
     fn rebuild(

packages/cli/src/server/fullstack/mod.rs

@@ -5,7 +5,10 @@ use crate::{
     BuildResult, Result,
 };
 
-use super::{desktop, Platform};
+use super::{
+    desktop::{self, DesktopPlatform},
+    Platform,
+};
 
 static CLIENT_RUST_FLAGS: &str = "-C debuginfo=none -C strip=debuginfo";
 // The `opt-level=2` increases build times, but can noticeably decrease time
@@ -49,7 +52,9 @@ fn start_web_build_thread(
 
 fn make_desktop_config(config: &CrateConfig, serve: &ConfigOptsServe) -> CrateConfig {
     let mut desktop_config = config.clone();
-    desktop_config.target_dir = config.server_target_dir();
+    if !serve.force_sequential {
+        desktop_config.target_dir = config.server_target_dir();
+    }
     let desktop_feature = serve.server_feature.clone();
     let features = &mut desktop_config.features;
     match features {
@@ -89,16 +94,20 @@ impl Platform for FullstackPlatform {
         let server_rust_flags = server_rust_flags(&serve.clone().into());
         let mut desktop_env = env.clone();
         add_serve_options_to_env(serve, &mut desktop_env);
-        let desktop = desktop::DesktopPlatform::start_with_options(
+        let build_result = crate::builder::build_desktop(
             &desktop_config,
-            serve,
+            true,
+            serve.skip_assets,
             Some(server_rust_flags.clone()),
-            desktop_env,
         )?;
         thread_handle
             .join()
             .map_err(|_| anyhow::anyhow!("Failed to join thread"))??;
 
+        // Only start the server after the web build is finished
+        let desktop =
+            DesktopPlatform::start_with_options(build_result, &desktop_config, serve, desktop_env)?;
+
         if serve.open {
             crate::server::web::open_browser(
                 config,
@@ -157,7 +166,7 @@ fn build_web(serve: ConfigOptsServe, target_directory: &std::path::Path) -> Resu
     }
     .build(
         None,
-        Some(target_directory),
+        (!web_config.force_sequential).then_some(target_directory),
         Some(client_rust_flags(&web_config)),
     )
 }

packages/core-macro/src/props/mod.rs

@@ -201,9 +201,8 @@ mod field_info {
 
                 // children field is automatically defaulted to None
                 if name == "children" {
-                    builder_attr.default = Some(
-                        syn::parse(quote!(::core::default::Default::default()).into()).unwrap(),
-                    );
+                    builder_attr.default =
+                        Some(syn::parse(quote!(dioxus_core::VNode::empty()).into()).unwrap());
                 }
 
                 // String fields automatically use impl Display
@@ -1046,7 +1045,6 @@ Finally, call `.build()` to create the instance of `{name}`.
                 ty: field_type,
                 ..
             } = field;
-            // Add the bump lifetime to the generics
             let mut ty_generics: Vec<syn::GenericArgument> = self
                 .generics
                 .params
@@ -1198,7 +1196,6 @@ Finally, call `.build()` to create the instance of `{name}`.
                 name: ref field_name,
                 ..
             } = field;
-            // Add a bump lifetime to the generics
             let mut builder_generics: Vec<syn::GenericArgument> = self
                 .generics
                 .params

packages/core-macro/tests/values_memoize_in_place.rs

@@ -23,7 +23,7 @@ async fn values_memoize_in_place() {
         use_hook(|| {
             spawn(async move {
                 for _ in 0..15 {
-                    tokio::time::sleep(std::time::Duration::from_millis(10)).await;
+                    tokio::time::sleep(std::time::Duration::from_millis(1)).await;
                     count += 1;
                 }
             });
@@ -36,8 +36,9 @@ async fn values_memoize_in_place() {
                     let _ = &x;
                     println!("num is {num}");
                 },
-                children: count() / 2
+                number: count() / 2
             }
+            TakesSignal { sig: count(), number: count() / 2 }
         }
     }
 
@@ -46,8 +47,8 @@ async fn values_memoize_in_place() {
 
     let mutations = dom.rebuild_to_vec();
     println!("{:#?}", mutations);
-    dom.mark_dirty(ScopeId::ROOT);
-    for _ in 0..20 {
+    dom.mark_dirty(ScopeId::APP);
+    for _ in 0..40 {
         dom.handle_event(
             "click",
             Rc::new(PlatformEventData::new(Box::<SerializedMouseData>::default())),
@@ -74,7 +75,8 @@ fn cloning_event_handler_components_work() {
             TakesEventHandler {
                 click: move |evt| {
                     println!("Clicked {evt:?}!");
-                }
+                },
+                number: 0
             }
         };
 
@@ -91,7 +93,7 @@ fn cloning_event_handler_components_work() {
 
     let mutations = dom.rebuild_to_vec();
     println!("{:#?}", mutations);
-    dom.mark_dirty(ScopeId::ROOT);
+    dom.mark_dirty(ScopeId::APP);
     for _ in 0..20 {
         dom.handle_event(
             "click",
@@ -105,24 +107,23 @@ fn cloning_event_handler_components_work() {
 }
 
 #[component]
-fn TakesEventHandler(click: EventHandler<usize>, children: usize) -> Element {
-    println!("children is{children}");
+fn TakesEventHandler(click: EventHandler<usize>, number: usize) -> Element {
     let first_render_click = use_hook(move || click);
     if generation() > 0 {
         // Make sure the event handler is memoized in place and never gets dropped
-        first_render_click(children);
+        first_render_click(number);
     }
 
     rsx! {
         button {
-            onclick: move |_| click(children),
-            "{children}"
+            onclick: move |_| click(number),
+            "{number}"
         }
     }
 }
 
 #[component]
-fn TakesSignal(sig: ReadOnlySignal<usize>, children: usize) -> Element {
+fn TakesSignal(sig: ReadOnlySignal<usize>, number: usize) -> Element {
     let first_render_sig = use_hook(move || sig);
     if generation() > 0 {
         // Make sure the signal is memoized in place and never gets dropped
@@ -130,6 +131,6 @@ fn TakesSignal(sig: ReadOnlySignal<usize>, children: usize) -> Element {
     }
 
     rsx! {
-        button { "{children}" }
+        button { "{number}" }
     }
 }

packages/core/Cargo.toml

@@ -21,7 +21,6 @@ slotmap = { workspace = true }
 futures-channel = { workspace = true }
 tracing = { workspace = true }
 serde = { version = "1", features = ["derive"], optional = true }
-tracing-subscriber = "0.3.18"
 generational-box = { workspace = true }
 rustversion = "1.0.17"
 
@@ -29,20 +28,22 @@ rustversion = "1.0.17"
 tokio = { workspace = true, features = ["full"] }
 tracing-fluent-assertions = "0.3.0"
 dioxus = { workspace = true }
+dioxus-html = { workspace = true, features = ["serialize"] }
 pretty_assertions = "1.3.0"
 rand = "0.8.5"
 dioxus-ssr = { workspace = true }
 reqwest = { workspace = true}
+tracing-subscriber = "0.3.18"
 
 [dev-dependencies.web-sys]
 version = "0.3.56"
 features = [
     "Document",
     "HtmlElement",
+    "Window"
 ]
 
 [features]
-default = []
 serialize = ["dep:serde"]
 
 [package.metadata.docs.rs]

packages/core/README.md

@@ -18,7 +18,7 @@ loop {
     vdom.render_immediate(&mut real_dom.apply())
 }
 
-# fn app() -> Element { None }
+# fn app() -> Element { VNode::empty() }
 # struct SomeRenderer; impl SomeRenderer { fn new() -> SomeRenderer { SomeRenderer } async fn event(&self) -> std::rc::Rc<dyn std::any::Any> { unimplemented!() } fn apply(&self) -> Mutations { Mutations::default() } }
 # });
 ```

packages/core/src/any_props.rs

@@ -1,8 +1,4 @@
-use crate::{
-    innerlude::{throw_error, CapturedPanic},
-    nodes::RenderReturn,
-    ComponentFunction,
-};
+use crate::{innerlude::CapturedPanic, nodes::RenderReturn, ComponentFunction};
 use std::{any::Any, panic::AssertUnwindSafe};
 
 pub(crate) type BoxedAnyProps = Box<dyn AnyProps>;
@@ -15,6 +11,8 @@ pub(crate) trait AnyProps: 'static {
     fn memoize(&mut self, other: &dyn Any) -> bool;
     /// Get the props as a type erased `dyn Any`.
     fn props(&self) -> &dyn Any;
+    /// Get the props as a type erased `dyn Any`.
+    fn props_mut(&mut self) -> &mut dyn Any;
     /// Duplicate this component into a new boxed component.
     fn duplicate(&self) -> BoxedAnyProps;
 }
@@ -72,19 +70,24 @@ impl<F: ComponentFunction<P, M> + Clone, P: Clone + 'static, M: 'static> AnyProp
         &self.props
     }
 
+    fn props_mut(&mut self) -> &mut dyn Any {
+        &mut self.props
+    }
+
     fn render(&self) -> RenderReturn {
         let res = std::panic::catch_unwind(AssertUnwindSafe(move || {
             self.render_fn.rebuild(self.props.clone())
         }));
 
         match res {
-            Ok(Some(e)) => RenderReturn::Ready(e),
-            Ok(None) => RenderReturn::default(),
+            Ok(node) => RenderReturn { node },
             Err(err) => {
                 let component_name = self.name;
                 tracing::error!("Error while rendering component `{component_name}`: {err:?}");
-                throw_error::<()>(CapturedPanic { error: err });
-                RenderReturn::default()
+                let panic = CapturedPanic { error: err };
+                RenderReturn {
+                    node: Err(panic.into()),
+                }
             }
         }
     }

packages/core/src/arena.rs

@@ -19,18 +19,25 @@ pub(crate) struct MountId(pub(crate) usize);
 
 impl Default for MountId {
     fn default() -> Self {
-        Self(usize::MAX)
+        Self::PLACEHOLDER
     }
 }
 
 impl MountId {
+    pub(crate) const PLACEHOLDER: Self = Self(usize::MAX);
+
     pub(crate) fn as_usize(self) -> Option<usize> {
-        if self.0 == usize::MAX {
+        if self == Self::PLACEHOLDER {
             None
         } else {
             Some(self.0)
         }
     }
+
+    #[allow(unused)]
+    pub(crate) fn mounted(self) -> bool {
+        self != Self::PLACEHOLDER
+    }
 }
 
 #[derive(Debug, Clone, Copy)]
@@ -53,16 +60,18 @@ impl VirtualDom {
     }
 
     pub(crate) fn reclaim(&mut self, el: ElementId) {
-        self.try_reclaim(el)
-            .unwrap_or_else(|| panic!("cannot reclaim {:?}", el));
+        if !self.try_reclaim(el) {
+            tracing::error!("cannot reclaim {:?}", el);
+        }
     }
 
-    pub(crate) fn try_reclaim(&mut self, el: ElementId) -> Option<()> {
-        if el.0 == 0 {
-            panic!("Cannot reclaim the root element",);
+    pub(crate) fn try_reclaim(&mut self, el: ElementId) -> bool {
+        // We never reclaim the unmounted elements or the root element
+        if el.0 == 0 || el.0 == usize::MAX {
+            return true;
         }
 
-        self.elements.try_remove(el.0).map(|_| ())
+        self.elements.try_remove(el.0).is_some()
     }
 
     // Drop a scope without dropping its children

packages/core/src/diff/component.rs

@@ -1,56 +1,125 @@
-use std::ops::{Deref, DerefMut};
+use std::{
+    any::TypeId,
+    ops::{Deref, DerefMut},
+};
 
 use crate::{
     any_props::AnyProps,
-    innerlude::{ElementRef, MountId, ScopeOrder, VComponent, WriteMutations},
-    nodes::RenderReturn,
+    innerlude::{
+        ElementRef, MountId, ScopeOrder, SuspenseBoundaryProps, SuspenseBoundaryPropsWithOwner,
+        VComponent, WriteMutations,
+    },
     nodes::VNode,
     scopes::ScopeId,
     virtual_dom::VirtualDom,
+    RenderReturn,
 };
 
 impl VirtualDom {
-    pub(crate) fn diff_scope(
+    pub(crate) fn run_and_diff_scope<M: WriteMutations>(
         &mut self,
-        to: &mut impl WriteMutations,
+        to: Option<&mut M>,
+        scope_id: ScopeId,
+    ) {
+        let scope = &mut self.scopes[scope_id.0];
+        if SuspenseBoundaryProps::downcast_mut_from_props(&mut *scope.props).is_some() {
+            SuspenseBoundaryProps::diff(scope_id, self, to)
+        } else {
+            let new_nodes = self.run_scope(scope_id);
+            self.diff_scope(to, scope_id, new_nodes);
+        }
+    }
+
+    #[tracing::instrument(skip(self, to), level = "trace", name = "VirtualDom::diff_scope")]
+    fn diff_scope<M: WriteMutations>(
+        &mut self,
+        to: Option<&mut M>,
         scope: ScopeId,
         new_nodes: RenderReturn,
     ) {
-        self.runtime.scope_stack.borrow_mut().push(scope);
+        // We don't diff the nodes if the scope is suspended or has an error
+        let Ok(new_real_nodes) = &new_nodes.node else {
+            return;
+        };
+
+        self.runtime.push_scope(scope);
         let scope_state = &mut self.scopes[scope.0];
-        // Load the old and new bump arenas
-        let new = &new_nodes;
+        // Load the old and new rendered nodes
         let old = scope_state.last_rendered_node.take().unwrap();
 
-        old.diff_node(new, self, to);
+        // If there are suspended scopes, we need to check if the scope is suspended before we diff it
+        // If it is suspended, we need to diff it but write the mutations nothing
+        // Note: It is important that we still diff the scope even if it is suspended, because the scope may render other child components which may change between renders
+        let mut render_to = to.filter(|_| self.runtime.scope_should_render(scope));
+        old.diff_node(new_real_nodes, self, render_to.as_deref_mut());
 
-        let scope_state = &mut self.scopes[scope.0];
-        scope_state.last_rendered_node = Some(new_nodes);
+        self.scopes[scope.0].last_rendered_node = Some(new_nodes);
+
+        if render_to.is_some() {
+            self.runtime.get_state(scope).unwrap().mount(&self.runtime);
+        }
 
-        self.runtime.scope_stack.borrow_mut().pop();
+        self.runtime.pop_scope();
     }
 
-    /// Create a new template [`VNode`] and write it to the [`Mutations`] buffer.
+    /// Create a new [`ScopeState`] for a component that has been created with [`VirtualDom::create_scope`]
     ///
-    /// This method pushes the ScopeID to the internal scopestack and returns the number of nodes created.
-    pub(crate) fn create_scope(
+    /// Returns the number of nodes created on the stack
+    #[tracing::instrument(skip(self, to), level = "trace", name = "VirtualDom::create_scope")]
+    pub(crate) fn create_scope<M: WriteMutations>(
         &mut self,
-        to: &mut impl WriteMutations,
+        to: Option<&mut M>,
         scope: ScopeId,
-        new_node: RenderReturn,
+        new_nodes: RenderReturn,
         parent: Option<ElementRef>,
     ) -> usize {
-        self.runtime.scope_stack.borrow_mut().push(scope);
+        self.runtime.push_scope(scope);
+
+        // If there are suspended scopes, we need to check if the scope is suspended before we diff it
+        // If it is suspended, we need to diff it but write the mutations nothing
+        // Note: It is important that we still diff the scope even if it is suspended, because the scope may render other child components which may change between renders
+        let mut render_to = to.filter(|_| self.runtime.scope_should_render(scope));
 
         // Create the node
-        let nodes = new_node.create(self, to, parent);
+        let nodes = new_nodes.create(self, parent, render_to.as_deref_mut());
 
         // Then set the new node as the last rendered node
-        self.scopes[scope.0].last_rendered_node = Some(new_node);
+        self.scopes[scope.0].last_rendered_node = Some(new_nodes);
+
+        if render_to.is_some() {
+            self.runtime.get_state(scope).unwrap().mount(&self.runtime);
+        }
 
-        self.runtime.scope_stack.borrow_mut().pop();
+        self.runtime.pop_scope();
         nodes
     }
+
+    pub(crate) fn remove_component_node<M: WriteMutations>(
+        &mut self,
+        to: Option<&mut M>,
+        destroy_component_state: bool,
+        scope_id: ScopeId,
+        replace_with: Option<usize>,
+    ) {
+        // If this is a suspense boundary, remove the suspended nodes as well
+        if let Some(mut suspense) =
+            SuspenseBoundaryProps::downcast_mut_from_props(&mut *self.scopes[scope_id.0].props)
+                .cloned()
+        {
+            suspense.remove_suspended_nodes::<M>(self, destroy_component_state);
+        }
+
+        // Remove the component from the dom
+        if let Some(node) = self.scopes[scope_id.0].last_rendered_node.as_ref() {
+            node.clone_mounted()
+                .remove_node_inner(self, to, destroy_component_state, replace_with)
+        };
+
+        if destroy_component_state {
+            // Now drop all the resources
+            self.drop_scope(scope_id);
+        }
+    }
 }
 
 impl VNode {
@@ -63,7 +132,7 @@ impl VNode {
         scope_id: ScopeId,
         parent: Option<ElementRef>,
         dom: &mut VirtualDom,
-        to: &mut impl WriteMutations,
+        to: Option<&mut impl WriteMutations>,
     ) {
         // Replace components that have different render fns
         if old.render_fn != new.render_fn {
@@ -83,9 +152,8 @@ impl VNode {
             return;
         }
 
-        // Now run the component and diff it
-        let new = dom.run_scope(scope_id);
-        dom.diff_scope(to, scope_id, new);
+        // Now diff the scope
+        dom.run_and_diff_scope(to, scope_id);
 
         let height = dom.runtime.get_state(scope_id).unwrap().height;
         dom.dirty_scopes.remove(&ScopeOrder::new(height, scope_id));
@@ -98,16 +166,21 @@ impl VNode {
         new: &VComponent,
         parent: Option<ElementRef>,
         dom: &mut VirtualDom,
-        to: &mut impl WriteMutations,
+        mut to: Option<&mut impl WriteMutations>,
     ) {
         let scope = ScopeId(dom.mounts[mount.0].mounted_dynamic_nodes[idx]);
 
-        let m = self.create_component_node(mount, idx, new, parent, dom, to);
+        // Remove the scope id from the mount
+        dom.mounts[mount.0].mounted_dynamic_nodes[idx] = ScopeId::PLACEHOLDER.0;
+        let m = self.create_component_node(mount, idx, new, parent, dom, to.as_deref_mut());
 
         // Instead of *just* removing it, we can use the replace mutation
-        dom.remove_component_node(to, scope, Some(m), true);
+        dom.remove_component_node(to, true, scope, Some(m));
     }
 
+    /// Create a new component (if it doesn't already exist) node and then mount the [`ScopeState`] for a component
+    ///
+    /// Returns the number of nodes created on the stack
     pub(super) fn create_component_node(
         &self,
         mount: MountId,
@@ -115,19 +188,40 @@ impl VNode {
         component: &VComponent,
         parent: Option<ElementRef>,
         dom: &mut VirtualDom,
-        to: &mut impl WriteMutations,
+        to: Option<&mut impl WriteMutations>,
     ) -> usize {
-        // Load up a ScopeId for this vcomponent. If it's already mounted, then we can just use that
-        let scope = dom
-            .new_scope(component.props.duplicate(), component.name)
-            .state()
-            .id;
+        // If this is a suspense boundary, run our suspense creation logic instead of running the component
+        if component.props.props().type_id() == TypeId::of::<SuspenseBoundaryPropsWithOwner>() {
+            return SuspenseBoundaryProps::create(mount, idx, component, parent, dom, to);
+        }
+
+        let mut scope_id = ScopeId(dom.mounts[mount.0].mounted_dynamic_nodes[idx]);
+
+        // If the scopeid is a placeholder, we need to load up a new scope for this vcomponent. If it's already mounted, then we can just use that
+        if scope_id.is_placeholder() {
+            scope_id = dom
+                .new_scope(component.props.duplicate(), component.name)
+                .state()
+                .id;
+
+            // Store the scope id for the next render
+            dom.mounts[mount.0].mounted_dynamic_nodes[idx] = scope_id.0;
 
-        // Store the scope id for the next render
-        dom.mounts[mount.0].mounted_dynamic_nodes[idx] = scope.0;
+            // If this is a new scope, we also need to run it once to get the initial state
+            let new = dom.run_scope(scope_id);
+
+            // Then set the new node as the last rendered node
+            dom.scopes[scope_id.0].last_rendered_node = Some(new);
+        }
+
+        let scope = ScopeId(dom.mounts[mount.0].mounted_dynamic_nodes[idx]);
 
-        let new = dom.run_scope(scope);
+        let new_node = dom.scopes[scope.0]
+            .last_rendered_node
+            .as_ref()
+            .expect("Component to be mounted")
+            .clone();
 
-        dom.create_scope(to, scope, new, parent)
+        dom.create_scope(to, scope, new_node, parent)
     }
 }

packages/core/src/diff/iterator.rs

@@ -1,7 +1,7 @@
 use crate::{
     innerlude::{ElementRef, WriteMutations},
     nodes::VNode,
-    DynamicNode, ScopeId, TemplateNode, VirtualDom,
+    DynamicNode, ScopeId, VirtualDom,
 };
 
 use rustc_hash::{FxHashMap, FxHashSet};
@@ -9,7 +9,7 @@ use rustc_hash::{FxHashMap, FxHashSet};
 impl VirtualDom {
     pub(crate) fn diff_non_empty_fragment(
         &mut self,
-        to: &mut impl WriteMutations,
+        to: Option<&mut impl WriteMutations>,
         old: &[VNode],
         new: &[VNode],
         parent: Option<ElementRef>,
@@ -42,7 +42,7 @@ impl VirtualDom {
     // the change list stack is in the same state when this function returns.
     fn diff_non_keyed_children(
         &mut self,
-        to: &mut impl WriteMutations,
+        mut to: Option<&mut impl WriteMutations>,
         old: &[VNode],
         new: &[VNode],
         parent: Option<ElementRef>,
@@ -54,15 +54,18 @@ impl VirtualDom {
         debug_assert!(!old.is_empty());
 
         match old.len().cmp(&new.len()) {
-            Ordering::Greater => self.remove_nodes(to, &old[new.len()..], None),
-            Ordering::Less => {
-                self.create_and_insert_after(to, &new[old.len()..], old.last().unwrap(), parent)
-            }
+            Ordering::Greater => self.remove_nodes(to.as_deref_mut(), &old[new.len()..], None),
+            Ordering::Less => self.create_and_insert_after(
+                to.as_deref_mut(),
+                &new[old.len()..],
+                old.last().unwrap(),
+                parent,
+            ),
             Ordering::Equal => {}
         }
 
         for (new, old) in new.iter().zip(old.iter()) {
-            old.diff_node(new, self, to);
+            old.diff_node(new, self, to.as_deref_mut());
         }
     }
 
@@ -84,7 +87,7 @@ impl VirtualDom {
     // The stack is empty upon entry.
     fn diff_keyed_children(
         &mut self,
-        to: &mut impl WriteMutations,
+        mut to: Option<&mut impl WriteMutations>,
         old: &[VNode],
         new: &[VNode],
         parent: Option<ElementRef>,
@@ -116,10 +119,11 @@ impl VirtualDom {
         //
         // `shared_prefix_count` is the count of how many nodes at the start of
         // `new` and `old` share the same keys.
-        let (left_offset, right_offset) = match self.diff_keyed_ends(to, old, new, parent) {
-            Some(count) => count,
-            None => return,
-        };
+        let (left_offset, right_offset) =
+            match self.diff_keyed_ends(to.as_deref_mut(), old, new, parent) {
+                Some(count) => count,
+                None => return,
+            };
 
         // Ok, we now hopefully have a smaller range of children in the middle
         // within which to re-order nodes with the same keys, remove old nodes with
@@ -164,7 +168,7 @@ impl VirtualDom {
     /// If there is no offset, then this function returns None and the diffing is complete.
     fn diff_keyed_ends(
         &mut self,
-        to: &mut impl WriteMutations,
+        mut to: Option<&mut impl WriteMutations>,
         old: &[VNode],
         new: &[VNode],
         parent: Option<ElementRef>,
@@ -176,7 +180,7 @@ impl VirtualDom {
             if old.key != new.key {
                 break;
             }
-            old.diff_node(new, self, to);
+            old.diff_node(new, self, to.as_deref_mut());
             left_offset += 1;
         }
 
@@ -201,7 +205,7 @@ impl VirtualDom {
             if old.key != new.key {
                 break;
             }
-            old.diff_node(new, self, to);
+            old.diff_node(new, self, to.as_deref_mut());
             right_offset += 1;
         }
 
@@ -224,7 +228,7 @@ impl VirtualDom {
     #[allow(clippy::too_many_lines)]
     fn diff_keyed_middle(
         &mut self,
-        to: &mut impl WriteMutations,
+        mut to: Option<&mut impl WriteMutations>,
         old: &[VNode],
         new: &[VNode],
         parent: Option<ElementRef>,
@@ -236,7 +240,7 @@ impl VirtualDom {
             - IE if we have ABCD becomes BACD, our sequence would be 1,0,2,3
             - if we have ABCD to ABDE, our sequence would be 0,1,3,MAX because E doesn't exist
 
-        now, we should have a list of integers that indicates where in the old list the new items mapto.
+        now, we should have a list of integers that indicates where in the old list the new items map to.
 
         4. Compute the LIS of this list
             - this indicates the longest list of new children that won't need to be moved.
@@ -257,11 +261,11 @@ impl VirtualDom {
 
         // 1. Map the old keys into a numerical ordering based on indices.
         // 2. Create a map of old key to its index
-        // IE if the keys were A B C, then we would have (A, 1) (B, 2) (C, 3).
+        // IE if the keys were A B C, then we would have (A, 0) (B, 1) (C, 2).
         let old_key_to_old_index = old
             .iter()
             .enumerate()
-            .map(|(i, o)| (o.key.as_ref().unwrap(), i))
+            .map(|(i, o)| (o.key.as_ref().unwrap().as_str(), i))
             .collect::<FxHashMap<_, _>>();
 
         let mut shared_keys = FxHashSet::default();
@@ -271,163 +275,194 @@ impl VirtualDom {
             .iter()
             .map(|node| {
                 let key = node.key.as_ref().unwrap();
-                if let Some(&index) = old_key_to_old_index.get(&key) {
+                if let Some(&index) = old_key_to_old_index.get(key.as_str()) {
                     shared_keys.insert(key);
                     index
                 } else {
-                    u32::MAX as usize
+                    usize::MAX
                 }
             })
-            .collect::<Vec<_>>();
+            .collect::<Box<[_]>>();
 
         // If none of the old keys are reused by the new children, then we remove all the remaining old children and
         // create the new children afresh.
         if shared_keys.is_empty() {
-            if !old.is_empty() {
-                let m = self.create_children(to, new, parent);
-                self.remove_nodes(to, old, Some(m));
-            } else {
-                // I think this is wrong - why are we appending?
-                // only valid of the if there are no trailing elements
-                // self.create_and_append_children(new);
+            debug_assert!(
+                !old.is_empty(),
+                "we should never be appending - just creating N"
+            );
+
+            let m = self.create_children(to.as_deref_mut(), new, parent);
+            self.remove_nodes(to, old, Some(m));
 
-                todo!("we should never be appending - just creating N");
-            }
             return;
         }
 
         // remove any old children that are not shared
-        // todo: make this an iterator
-        for child in old {
-            let key = child.key.as_ref().unwrap();
-            if !shared_keys.contains(&key) {
-                child.remove_node(self, to, None, true);
-            }
+        for child_to_remove in old
+            .iter()
+            .filter(|child| !shared_keys.contains(child.key.as_ref().unwrap()))
+        {
+            child_to_remove.remove_node(self, to.as_deref_mut(), None);
         }
 
         // 4. Compute the LIS of this list
         let mut lis_sequence = Vec::with_capacity(new_index_to_old_index.len());
 
-        let mut predecessors = vec![0; new_index_to_old_index.len()];
-        let mut starts = vec![0; new_index_to_old_index.len()];
+        let mut allocation = vec![0; new_index_to_old_index.len() * 2];
+        let (predecessors, starts) = allocation.split_at_mut(new_index_to_old_index.len());
 
         longest_increasing_subsequence::lis_with(
             &new_index_to_old_index,
             &mut lis_sequence,
             |a, b| a < b,
-            &mut predecessors,
-            &mut starts,
+            predecessors,
+            starts,
         );
 
-        // the lis comes out backwards, I think. can't quite tell.
-        lis_sequence.sort_unstable();
-
         // if a new node gets u32 max and is at the end, then it might be part of our LIS (because u32 max is a valid LIS)
-        if lis_sequence.last().map(|f| new_index_to_old_index[*f]) == Some(u32::MAX as usize) {
-            lis_sequence.pop();
+        if lis_sequence.first().map(|f| new_index_to_old_index[*f]) == Some(usize::MAX) {
+            lis_sequence.remove(0);
         }
 
+        // Diff each nod in the LIS
         for idx in &lis_sequence {
-            old[new_index_to_old_index[*idx]].diff_node(&new[*idx], self, to);
+            old[new_index_to_old_index[*idx]].diff_node(&new[*idx], self, to.as_deref_mut());
         }
 
-        let mut nodes_created = 0;
+        /// Create or diff each node in a range depending on whether it is in the LIS or not
+        /// Returns the number of nodes created on the stack
+        fn create_or_diff(
+            vdom: &mut VirtualDom,
+            new: &[VNode],
+            old: &[VNode],
+            mut to: Option<&mut impl WriteMutations>,
+            parent: Option<ElementRef>,
+            new_index_to_old_index: &[usize],
+            range: std::ops::Range<usize>,
+        ) -> usize {
+            let range_start = range.start;
+            new[range]
+                .iter()
+                .enumerate()
+                .map(|(idx, new_node)| {
+                    let new_idx = range_start + idx;
+                    let old_index = new_index_to_old_index[new_idx];
+                    // If the node existed in the old list, diff it
+                    if let Some(old_node) = old.get(old_index) {
+                        old_node.diff_node(new_node, vdom, to.as_deref_mut());
+                        if let Some(to) = to.as_deref_mut() {
+                            new_node.push_all_root_nodes(vdom, to)
+                        } else {
+                            0
+                        }
+                    } else {
+                        // Otherwise, just add it to the stack
+                        new_node.create(vdom, parent, to.as_deref_mut())
+                    }
+                })
+                .sum()
+        }
 
-        // add mount instruction for the first items not covered by the lis
-        let last = *lis_sequence.last().unwrap();
+        // add mount instruction for the items before the LIS
+        let last = *lis_sequence.first().unwrap();
         if last < (new.len() - 1) {
-            for (idx, new_node) in new[(last + 1)..].iter().enumerate() {
-                let new_idx = idx + last + 1;
-                let old_index = new_index_to_old_index[new_idx];
-                if old_index == u32::MAX as usize {
-                    nodes_created += new_node.create(self, to, parent);
-                } else {
-                    old[old_index].diff_node(new_node, self, to);
-                    nodes_created += new_node.push_all_real_nodes(self, to);
-                }
-            }
-
-            let id = new[last].find_last_element(self);
-            if nodes_created > 0 {
-                to.insert_nodes_after(id, nodes_created)
-            }
-            nodes_created = 0;
+            let nodes_created = create_or_diff(
+                self,
+                new,
+                old,
+                to.as_deref_mut(),
+                parent,
+                &new_index_to_old_index,
+                (last + 1)..new.len(),
+            );
+
+            // Insert all the nodes that we just created after the last node in the LIS
+            self.insert_after(to.as_deref_mut(), nodes_created, &new[last]);
         }
 
-        // for each spacing, generate a mount instruction
-        let mut lis_iter = lis_sequence.iter().rev();
+        // For each node inside of the LIS, but not included in the LIS, generate a mount instruction
+        // We loop over the LIS in reverse order and insert any nodes we find in the gaps between indexes
+        let mut lis_iter = lis_sequence.iter();
         let mut last = *lis_iter.next().unwrap();
         for next in lis_iter {
             if last - next > 1 {
-                for (idx, new_node) in new[(next + 1)..last].iter().enumerate() {
-                    let new_idx = idx + next + 1;
-                    let old_index = new_index_to_old_index[new_idx];
-                    if old_index == u32::MAX as usize {
-                        nodes_created += new_node.create(self, to, parent);
-                    } else {
-                        old[old_index].diff_node(new_node, self, to);
-                        nodes_created += new_node.push_all_real_nodes(self, to);
-                    }
-                }
-
-                let id = new[last].find_first_element(self);
-                if nodes_created > 0 {
-                    to.insert_nodes_before(id, nodes_created);
-                }
+                let nodes_created = create_or_diff(
+                    self,
+                    new,
+                    old,
+                    to.as_deref_mut(),
+                    parent,
+                    &new_index_to_old_index,
+                    (next + 1)..last,
+                );
 
-                nodes_created = 0;
+                self.insert_before(to.as_deref_mut(), nodes_created, &new[last]);
             }
             last = *next;
         }
 
-        // add mount instruction for the last items not covered by the lis
-        let first_lis = *lis_sequence.first().unwrap();
+        // add mount instruction for the items after the LIS
+        let first_lis = *lis_sequence.last().unwrap();
         if first_lis > 0 {
-            for (idx, new_node) in new[..first_lis].iter().enumerate() {
-                let old_index = new_index_to_old_index[idx];
-                if old_index == u32::MAX as usize {
-                    nodes_created += new_node.create(self, to, parent);
-                } else {
-                    old[old_index].diff_node(new_node, self, to);
-                    nodes_created += new_node.push_all_real_nodes(self, to);
-                }
-            }
-
-            let id = new[first_lis].find_first_element(self);
-            if nodes_created > 0 {
-                to.insert_nodes_before(id, nodes_created);
-            }
+            let nodes_created = create_or_diff(
+                self,
+                new,
+                old,
+                to.as_deref_mut(),
+                parent,
+                &new_index_to_old_index,
+                0..first_lis,
+            );
+
+            self.insert_before(to, nodes_created, &new[first_lis]);
         }
     }
 
     fn create_and_insert_before(
         &mut self,
-        to: &mut impl WriteMutations,
+        mut to: Option<&mut impl WriteMutations>,
         new: &[VNode],
         before: &VNode,
         parent: Option<ElementRef>,
     ) {
-        let m = self.create_children(to, new, parent);
-        let id = before.find_first_element(self);
-        to.insert_nodes_before(id, m);
+        let m = self.create_children(to.as_deref_mut(), new, parent);
+        self.insert_before(to, m, before);
+    }
+
+    fn insert_before(&mut self, to: Option<&mut impl WriteMutations>, new: usize, before: &VNode) {
+        if let Some(to) = to {
+            if new > 0 {
+                let id = before.find_first_element(self);
+                to.insert_nodes_before(id, new);
+            }
+        }
     }
 
     fn create_and_insert_after(
         &mut self,
-        to: &mut impl WriteMutations,
+        mut to: Option<&mut impl WriteMutations>,
         new: &[VNode],
         after: &VNode,
         parent: Option<ElementRef>,
     ) {
-        let m = self.create_children(to, new, parent);
-        let id = after.find_last_element(self);
-        to.insert_nodes_after(id, m);
+        let m = self.create_children(to.as_deref_mut(), new, parent);
+        self.insert_after(to, m, after);
+    }
+
+    fn insert_after(&mut self, to: Option<&mut impl WriteMutations>, new: usize, after: &VNode) {
+        if let Some(to) = to {
+            if new > 0 {
+                let id = after.find_last_element(self);
+                to.insert_nodes_after(id, new);
+            }
+        }
     }
 }
 
 impl VNode {
-    /// Push all the real nodes on the stack
-    pub(crate) fn push_all_real_nodes(
+    /// Push all the root nodes on the stack
+    pub(crate) fn push_all_root_nodes(
         &self,
         dom: &VirtualDom,
         to: &mut impl WriteMutations,
@@ -440,30 +475,27 @@ impl VNode {
             .roots
             .iter()
             .enumerate()
-            .map(|(root_idx, _)| match &self.template.get().roots[root_idx] {
-                TemplateNode::Dynamic { id: idx } => match &self.dynamic_nodes[*idx] {
-                    DynamicNode::Placeholder(_) | DynamicNode::Text(_) => {
-                        to.push_root(mount.root_ids[root_idx]);
-                        1
-                    }
-                    DynamicNode::Fragment(nodes) => {
+            .map(
+                |(root_idx, _)| match self.get_dynamic_root_node_and_id(root_idx) {
+                    Some((_, DynamicNode::Fragment(nodes))) => {
                         let mut accumulated = 0;
                         for node in nodes {
-                            accumulated += node.push_all_real_nodes(dom, to);
+                            accumulated += node.push_all_root_nodes(dom, to);
                         }
                         accumulated
                     }
-                    DynamicNode::Component(_) => {
-                        let scope = ScopeId(mount.mounted_dynamic_nodes[*idx]);
+                    Some((idx, DynamicNode::Component(_))) => {
+                        let scope = ScopeId(mount.mounted_dynamic_nodes[idx]);
                         let node = dom.get_scope(scope).unwrap().root_node();
-                        node.push_all_real_nodes(dom, to)
+                        node.push_all_root_nodes(dom, to)
+                    }
+                    // This is a static root node or a single dynamic node, just push it
+                    None | Some((_, DynamicNode::Placeholder(_) | DynamicNode::Text(_))) => {
+                        to.push_root(mount.root_ids[root_idx]);
+                        1
                     }
                 },
-                _ => {
-                    to.push_root(mount.root_ids[root_idx]);
-                    1
-                }
-            })
+            )
             .sum()
     }
 }

packages/core/src/diff/mod.rs

@@ -1,10 +1,18 @@
+//! This module contains all the code for creating and diffing nodes.
+//!
+//! For suspense there are three different cases we need to handle:
+//! - Creating nodes/scopes without mounting them
+//! - Diffing nodes that are not mounted
+//! - Mounted nodes that have already been created
+//!
+//! To support those cases, we lazily create components and only optionally write to the real dom while diffing with Option<&mut impl WriteMutations>
+
 #![allow(clippy::too_many_arguments)]
 
 use crate::{
     arena::ElementId,
     innerlude::{ElementRef, MountId, WriteMutations},
     nodes::VNode,
-    scopes::ScopeId,
     virtual_dom::VirtualDom,
     Template, TemplateNode,
 };
@@ -14,34 +22,36 @@ mod iterator;
 mod node;
 
 impl VirtualDom {
-    pub(crate) fn create_children<'a>(
+    pub(crate) fn create_children(
         &mut self,
-        to: &mut impl WriteMutations,
-        nodes: impl IntoIterator<Item = &'a VNode>,
+        mut to: Option<&mut impl WriteMutations>,
+        nodes: &[VNode],
         parent: Option<ElementRef>,
     ) -> usize {
         nodes
-            .into_iter()
-            .map(|child| child.create(self, to, parent))
+            .iter()
+            .map(|child| child.create(self, parent, to.as_deref_mut()))
             .sum()
     }
 
     /// Simply replace a placeholder with a list of nodes
-    fn replace_placeholder<'a>(
+    fn replace_placeholder(
         &mut self,
-        to: &mut impl WriteMutations,
+        mut to: Option<&mut impl WriteMutations>,
         placeholder_id: ElementId,
-        r: impl IntoIterator<Item = &'a VNode>,
+        r: &[VNode],
         parent: Option<ElementRef>,
     ) {
-        let m = self.create_children(to, r, parent);
-        to.replace_node_with(placeholder_id, m);
-        self.reclaim(placeholder_id);
+        let m = self.create_children(to.as_deref_mut(), r, parent);
+        if let Some(to) = to {
+            to.replace_node_with(placeholder_id, m);
+            self.reclaim(placeholder_id);
+        }
     }
 
     fn nodes_to_placeholder(
         &mut self,
-        to: &mut impl WriteMutations,
+        mut to: Option<&mut impl WriteMutations>,
         mount: MountId,
         dyn_node_idx: usize,
         old_nodes: &[VNode],
@@ -52,13 +62,15 @@ impl VirtualDom {
         // Set the id of the placeholder
         self.mounts[mount.0].mounted_dynamic_nodes[dyn_node_idx] = placeholder.0;
 
-        to.create_placeholder(placeholder);
+        if let Some(to) = to.as_deref_mut() {
+            to.create_placeholder(placeholder);
+        }
 
         self.replace_nodes(to, old_nodes, 1);
     }
 
     /// Replace many nodes with a number of nodes on the stack
-    fn replace_nodes(&mut self, to: &mut impl WriteMutations, nodes: &[VNode], m: usize) {
+    fn replace_nodes(&mut self, to: Option<&mut impl WriteMutations>, nodes: &[VNode], m: usize) {
         debug_assert!(
             !nodes.is_empty(),
             "replace_nodes must have at least one node"
@@ -73,32 +85,16 @@ impl VirtualDom {
     /// Wont generate mutations for the inner nodes
     fn remove_nodes(
         &mut self,
-        to: &mut impl WriteMutations,
+        mut to: Option<&mut impl WriteMutations>,
         nodes: &[VNode],
         replace_with: Option<usize>,
     ) {
         for (i, node) in nodes.iter().rev().enumerate() {
             let last_node = i == nodes.len() - 1;
-            node.remove_node(self, to, replace_with.filter(|_| last_node), true);
+            node.remove_node(self, to.as_deref_mut(), replace_with.filter(|_| last_node));
         }
     }
 
-    pub(crate) fn remove_component_node(
-        &mut self,
-        to: &mut impl WriteMutations,
-        scope: ScopeId,
-        replace_with: Option<usize>,
-        gen_muts: bool,
-    ) {
-        // Remove the component from the dom
-        if let Some(node) = self.scopes[scope.0].last_rendered_node.take() {
-            node.remove_node(self, to, replace_with, gen_muts)
-        };
-
-        // Now drop all the resources
-        self.drop_scope(scope);
-    }
-
     /// Insert a new template into the VirtualDom's template registry
     // used in conditional compilation
     #[allow(unused_mut)]
@@ -107,40 +103,37 @@ impl VirtualDom {
         to: &mut impl WriteMutations,
         mut template: Template,
     ) {
-        let (path, byte_index) = template.name.rsplit_once(':').unwrap();
-
-        let byte_index = byte_index.parse::<usize>().unwrap();
-        // First, check if we've already seen this template
-        if self
-            .templates
-            .get(&path)
-            .filter(|set| set.contains_key(&byte_index))
-            .is_none()
+        // In debug mode, we check the more complete hashmap by byte index
+        #[cfg(debug_assertions)]
         {
-            // if hot reloading is enabled, then we need to check for a template that has overriten this one
-            #[cfg(debug_assertions)]
-            if let Some(mut new_template) = self
-                .templates
-                .get_mut(path)
-                .and_then(|map| map.remove(&usize::MAX))
-            {
-                // the byte index of the hot reloaded template could be different
-                new_template.name = template.name;
-                template = new_template;
+            let (path, byte_index) = template.name.rsplit_once(':').unwrap();
+
+            let byte_index = byte_index.parse::<usize>().unwrap();
+            let mut entry = self.templates.entry(path);
+            // If we've already seen this template, just return
+            if let std::collections::hash_map::Entry::Occupied(occupied) = &entry {
+                if occupied.get().contains_key(&byte_index) {
+                    return;
+                }
             }
 
-            self.templates
-                .entry(path)
-                .or_default()
-                .insert(byte_index, template);
+            // Otherwise, insert it and register it
+            entry.or_default().insert(byte_index, template);
+        }
 
-            // If it's all dynamic nodes, then we don't need to register it
-            if !template.is_completely_dynamic() {
-                to.register_template(template)
-            }
+        // In release mode, everything is built into the &'static str
+        #[cfg(not(debug_assertions))]
+        if !self.templates.insert(template.name) {
+            return;
+        }
+
+        // If it's all dynamic nodes, then we don't need to register it
+        if !template.is_completely_dynamic() {
+            to.register_template(template)
         }
     }
 
+    #[cfg(debug_assertions)]
     /// Insert a new template into the VirtualDom's template registry
     pub(crate) fn register_template_first_byte_index(&mut self, mut template: Template) {
         // First, make sure we mark the template as seen, regardless if we process it

packages/core/src/diff/node.rs

@@ -1,5 +1,5 @@
 use crate::innerlude::MountId;
-use crate::{Attribute, AttributeValue, DynamicNode::*};
+use crate::{Attribute, AttributeValue, DynamicNode::*, Template};
 use crate::{VNode, VirtualDom, WriteMutations};
 use core::iter::Peekable;
 
@@ -9,7 +9,6 @@ use crate::{
     nodes::DynamicNode,
     scopes::ScopeId,
     TemplateNode,
-    TemplateNode::*,
 };
 
 impl VNode {
@@ -17,10 +16,10 @@ impl VNode {
         &self,
         new: &VNode,
         dom: &mut VirtualDom,
-        to: &mut impl WriteMutations,
+        mut to: Option<&mut impl WriteMutations>,
     ) {
         // The node we are diffing from should always be mounted
-        debug_assert!(dom.mounts.get(self.mount.get().0).is_some());
+        debug_assert!(dom.mounts.get(self.mount.get().0).is_some() || to.is_none());
 
         // If hot reloading is enabled, we need to make sure we're using the latest template
         #[cfg(debug_assertions)]
@@ -33,7 +32,7 @@ impl VNode {
                     if template != self.template.get() {
                         let mount_id = self.mount.get();
                         let parent = dom.mounts[mount_id.0].parent;
-                        self.replace([new], parent, dom, to);
+                        self.replace(std::slice::from_ref(new), parent, dom, to);
                         return;
                     }
                 }
@@ -56,16 +55,20 @@ impl VNode {
 
         // If the templates are the same, we can diff the attributes and children
         // Start with the attributes
-        self.diff_attributes(new, dom, to);
+        // Since the attributes are only side effects, we can skip diffing them entirely if the node is suspended and we aren't outputting mutations
+        if let Some(to) = to.as_deref_mut() {
+            self.diff_attributes(new, dom, to);
+        }
 
         // Now diff the dynamic nodes
-        self.dynamic_nodes
+        for (dyn_node_idx, (old, new)) in self
+            .dynamic_nodes
             .iter()
             .zip(new.dynamic_nodes.iter())
             .enumerate()
-            .for_each(|(dyn_node_idx, (old, new))| {
-                self.diff_dynamic_node(mount_id, dyn_node_idx, old, new, dom, to)
-            });
+        {
+            self.diff_dynamic_node(mount_id, dyn_node_idx, old, new, dom, to.as_deref_mut())
+        }
     }
 
     fn move_mount_to(&self, new: &VNode, dom: &mut VirtualDom) {
@@ -73,10 +76,12 @@ impl VNode {
         let mount_id = self.mount.get();
         new.mount.set(mount_id);
 
-        let mount = &mut dom.mounts[mount_id.0];
+        if mount_id.mounted() {
+            let mount = &mut dom.mounts[mount_id.0];
 
-        // Update the reference to the node for bubbling events
-        mount.node = new.clone_mounted();
+            // Update the reference to the node for bubbling events
+            mount.node = new.clone_mounted();
+        }
     }
 
     fn diff_dynamic_node(
@@ -86,28 +91,26 @@ impl VNode {
         old_node: &DynamicNode,
         new_node: &DynamicNode,
         dom: &mut VirtualDom,
-        to: &mut impl WriteMutations,
+        to: Option<&mut impl WriteMutations>,
     ) {
-        let parent = || ElementRef {
-            mount,
-            path: ElementPath {
-                path: self.template.get().node_paths[idx],
-            },
-        };
+        tracing::trace!("diffing dynamic node from {old_node:?} to {new_node:?}");
         match (old_node, new_node) {
             (Text(old), Text(new)) => {
-                let mount = &dom.mounts[mount.0];
-                self.diff_vtext( to, mount, idx, old, new)
+                // Diffing text is just a side effect, if we are diffing suspended nodes and are not outputting mutations, we can skip it
+                if let Some(to) = to{
+                    let mount = &dom.mounts[mount.0];
+                    self.diff_vtext(to, mount, idx, old, new)
+                }
             },
             (Placeholder(_), Placeholder(_)) => {},
-            (Fragment(old), Fragment(new)) => dom.diff_non_empty_fragment(to, old, new, Some(parent())),
+            (Fragment(old), Fragment(new)) => dom.diff_non_empty_fragment(to, old, new, Some(self.reference_to_dynamic_node(mount, idx))),
             (Component(old), Component(new)) => {
 				let scope_id = ScopeId(dom.mounts[mount.0].mounted_dynamic_nodes[idx]);
-                self.diff_vcomponent(mount, idx, new, old, scope_id, Some(parent()), dom, to)
+                self.diff_vcomponent(mount, idx, new, old, scope_id, Some(self.reference_to_dynamic_node(mount, idx)), dom, to)
             },
             (Placeholder(_), Fragment(right)) => {
                 let placeholder_id = ElementId(dom.mounts[mount.0].mounted_dynamic_nodes[idx]);
-                dom.replace_placeholder(to, placeholder_id, right, Some(parent()))},
+                dom.replace_placeholder(to, placeholder_id, right, Some(self.reference_to_dynamic_node(mount, idx)))},
             (Fragment(left), Placeholder(_)) => {
                 dom.nodes_to_placeholder(to, mount, idx, left,)
             },
@@ -115,47 +118,55 @@ impl VNode {
         };
     }
 
+    /// Try to get the dynamic node and its index for a root node
+    pub(crate) fn get_dynamic_root_node_and_id(
+        &self,
+        root_idx: usize,
+    ) -> Option<(usize, &DynamicNode)> {
+        self.template.get().roots[root_idx]
+            .dynamic_id()
+            .map(|id| (id, &self.dynamic_nodes[id]))
+    }
+
     pub(crate) fn find_first_element(&self, dom: &VirtualDom) -> ElementId {
         let mount = &dom.mounts[self.mount.get().0];
-        match &self.template.get().roots[0] {
-            TemplateNode::Element { .. } | TemplateNode::Text { text: _ } => mount.root_ids[0],
-            TemplateNode::Dynamic { id } | TemplateNode::DynamicText { id } => {
-                match &self.dynamic_nodes[*id] {
-                    Placeholder(_) | Text(_) => ElementId(mount.mounted_dynamic_nodes[*id]),
-                    Fragment(children) => {
-                        let child = children.first().unwrap();
-                        child.find_first_element(dom)
-                    }
-                    Component(_comp) => {
-                        let scope = ScopeId(mount.mounted_dynamic_nodes[*id]);
-                        dom.get_scope(scope)
-                            .unwrap()
-                            .root_node()
-                            .find_first_element(dom)
-                    }
-                }
+        match self.get_dynamic_root_node_and_id(0) {
+            // This node is static, just get the root id
+            None | Some((_, Placeholder(_) | Text(_))) => mount.root_ids[0],
+            // The node is a fragment, so we need to find the first element in the fragment
+            Some((_, Fragment(children))) => {
+                let child = children.first().unwrap();
+                child.find_first_element(dom)
+            }
+            // The node is a component, so we need to find the first element in the component
+            Some((id, Component(_))) => {
+                let scope = ScopeId(mount.mounted_dynamic_nodes[id]);
+                dom.get_scope(scope)
+                    .unwrap()
+                    .root_node()
+                    .find_first_element(dom)
             }
         }
     }
 
     pub(crate) fn find_last_element(&self, dom: &VirtualDom) -> ElementId {
         let mount = &dom.mounts[self.mount.get().0];
-        match &self.template.get().roots.last().unwrap() {
-            TemplateNode::Element { .. } | TemplateNode::Text { text: _ } => {
-                *mount.root_ids.last().unwrap()
+        let last_root_index = self.template.get().roots.len() - 1;
+        match self.get_dynamic_root_node_and_id(last_root_index) {
+            // This node is static, just get the root id
+            None | Some((_, Placeholder(_) | Text(_))) => mount.root_ids[last_root_index],
+            // The node is a fragment, so we need to find the first element in the fragment
+            Some((_, Fragment(children))) => {
+                let child = children.first().unwrap();
+                child.find_first_element(dom)
             }
-            TemplateNode::Dynamic { id } | TemplateNode::DynamicText { id } => {
-                match &self.dynamic_nodes[*id] {
-                    Placeholder(_) | Text(_) => ElementId(mount.mounted_dynamic_nodes[*id]),
-                    Fragment(t) => t.last().unwrap().find_last_element(dom),
-                    Component(_comp) => {
-                        let scope = ScopeId(mount.mounted_dynamic_nodes[*id]);
-                        dom.get_scope(scope)
-                            .unwrap()
-                            .root_node()
-                            .find_last_element(dom)
-                    }
-                }
+            // The node is a component, so we need to find the first element in the component
+            Some((id, Component(_))) => {
+                let scope = ScopeId(mount.mounted_dynamic_nodes[id]);
+                dom.get_scope(scope)
+                    .unwrap()
+                    .root_node()
+                    .find_last_element(dom)
             }
         }
     }
@@ -177,27 +188,65 @@ impl VNode {
         }
     }
 
-    pub(crate) fn replace<'a>(
+    pub(crate) fn replace(
         &self,
-        right: impl IntoIterator<Item = &'a VNode>,
+        right: &[VNode],
         parent: Option<ElementRef>,
         dom: &mut VirtualDom,
-        to: &mut impl WriteMutations,
+        to: Option<&mut impl WriteMutations>,
+    ) {
+        self.replace_inner(right, parent, dom, to, true)
+    }
+
+    /// Replace this node with new children, but *don't destroy* the old node's component state
+    ///
+    /// This is useful for moving a node from the rendered nodes into a suspended node
+    pub(crate) fn move_node_to_background(
+        &self,
+        right: &[VNode],
+        parent: Option<ElementRef>,
+        dom: &mut VirtualDom,
+        to: Option<&mut impl WriteMutations>,
     ) {
-        let m = dom.create_children(to, right, parent);
+        self.replace_inner(right, parent, dom, to, false)
+    }
+
+    pub(crate) fn replace_inner(
+        &self,
+        right: &[VNode],
+        parent: Option<ElementRef>,
+        dom: &mut VirtualDom,
+        mut to: Option<&mut impl WriteMutations>,
+        destroy_component_state: bool,
+    ) {
+        let m = dom.create_children(to.as_deref_mut(), right, parent);
 
         // Instead of *just* removing it, we can use the replace mutation
-        self.remove_node(dom, to, Some(m), true)
+        self.remove_node_inner(dom, to, destroy_component_state, Some(m))
     }
 
-    pub(crate) fn remove_node(
+    /// Remove a node from the dom and potentially replace it with the top m nodes from the stack
+    pub(crate) fn remove_node<M: WriteMutations>(
         &self,
         dom: &mut VirtualDom,
-        to: &mut impl WriteMutations,
+        to: Option<&mut M>,
+        replace_with: Option<usize>,
+    ) {
+        self.remove_node_inner(dom, to, true, replace_with)
+    }
+
+    /// Remove a node, but only maybe destroy the component state of that node. During suspense, we need to remove a node from the real dom without wiping the component state
+    pub(crate) fn remove_node_inner<M: WriteMutations>(
+        &self,
+        dom: &mut VirtualDom,
+        to: Option<&mut M>,
+        destroy_component_state: bool,
         replace_with: Option<usize>,
-        gen_muts: bool,
     ) {
         let mount = self.mount.get();
+        if !mount.mounted() {
+            return;
+        }
 
         // Clean up any attributes that have claimed a static node as dynamic for mount/unmounts
         // Will not generate mutations!
@@ -206,25 +255,25 @@ impl VNode {
         // Remove the nested dynamic nodes
         // We don't generate mutations for these, as they will be removed by the parent (in the next line)
         // But we still need to make sure to reclaim them from the arena and drop their hooks, etc
-        self.remove_nested_dyn_nodes(mount, dom, to);
+        self.remove_nested_dyn_nodes::<M>(mount, dom, destroy_component_state);
 
         // Clean up the roots, assuming we need to generate mutations for these
         // This is done last in order to preserve Node ID reclaim order (reclaim in reverse order of claim)
-        self.reclaim_roots(mount, dom, to, replace_with, gen_muts);
+        self.reclaim_roots(mount, dom, to, destroy_component_state, replace_with);
 
-        // Remove the mount information
-        dom.mounts.remove(mount.0);
-
-        tracing::trace!(?self, "removed node");
+        if destroy_component_state {
+            // Remove the mount information
+            dom.mounts.remove(mount.0);
+        }
     }
 
     fn reclaim_roots(
         &self,
         mount: MountId,
         dom: &mut VirtualDom,
-        to: &mut impl WriteMutations,
+        mut to: Option<&mut impl WriteMutations>,
+        destroy_component_state: bool,
         replace_with: Option<usize>,
-        gen_muts: bool,
     ) {
         let roots = self.template.get().roots;
         for (idx, node) in roots.iter().enumerate() {
@@ -234,39 +283,45 @@ impl VNode {
                 self.remove_dynamic_node(
                     mount,
                     dom,
-                    to,
+                    to.as_deref_mut(),
+                    destroy_component_state,
                     id,
                     dynamic_node,
                     replace_with.filter(|_| last_node),
-                    gen_muts,
                 );
-            } else {
+            } else if let Some(to) = to.as_deref_mut() {
                 let mount = &dom.mounts[mount.0];
                 let id = mount.root_ids[idx];
-                if gen_muts {
-                    if let (true, Some(replace_with)) = (last_node, replace_with) {
-                        to.replace_node_with(id, replace_with);
-                    } else {
-                        to.remove_node(id);
-                    }
+                if let (true, Some(replace_with)) = (last_node, replace_with) {
+                    to.replace_node_with(id, replace_with);
+                } else {
+                    to.remove_node(id);
                 }
                 dom.reclaim(id);
             }
         }
     }
 
-    fn remove_nested_dyn_nodes(
+    fn remove_nested_dyn_nodes<M: WriteMutations>(
         &self,
         mount: MountId,
         dom: &mut VirtualDom,
-        to: &mut impl WriteMutations,
+        destroy_component_state: bool,
     ) {
         let template = self.template.get();
         for (idx, dyn_node) in self.dynamic_nodes.iter().enumerate() {
             let path_len = template.node_paths.get(idx).map(|path| path.len());
             // Roots are cleaned up automatically above and nodes with a empty path are placeholders
             if let Some(2..) = path_len {
-                self.remove_dynamic_node(mount, dom, to, idx, dyn_node, None, false)
+                self.remove_dynamic_node(
+                    mount,
+                    dom,
+                    Option::<&mut M>::None,
+                    destroy_component_state,
+                    idx,
+                    dyn_node,
+                    None,
+                )
             }
         }
     }
@@ -275,57 +330,59 @@ impl VNode {
         &self,
         mount: MountId,
         dom: &mut VirtualDom,
-        to: &mut impl WriteMutations,
+        mut to: Option<&mut impl WriteMutations>,
+        destroy_component_state: bool,
         idx: usize,
         node: &DynamicNode,
         replace_with: Option<usize>,
-        gen_muts: bool,
     ) {
         match node {
             Component(_comp) => {
                 let scope_id = ScopeId(dom.mounts[mount.0].mounted_dynamic_nodes[idx]);
-                dom.remove_component_node(to, scope_id, replace_with, gen_muts);
+                dom.remove_component_node(to, destroy_component_state, scope_id, replace_with);
             }
             Text(_) | Placeholder(_) => {
                 let id = ElementId(dom.mounts[mount.0].mounted_dynamic_nodes[idx]);
-                if gen_muts {
+                if let Some(to) = to {
                     if let Some(replace_with) = replace_with {
                         to.replace_node_with(id, replace_with);
                     } else {
                         to.remove_node(id);
                     }
+                    dom.reclaim(id)
                 }
-                dom.reclaim(id)
             }
             Fragment(nodes) => {
                 for node in &nodes[..nodes.len() - 1] {
-                    node.remove_node(dom, to, None, gen_muts)
+                    node.remove_node_inner(dom, to.as_deref_mut(), destroy_component_state, None)
                 }
                 if let Some(last_node) = nodes.last() {
-                    last_node.remove_node(dom, to, replace_with, gen_muts)
+                    last_node.remove_node_inner(dom, to, destroy_component_state, replace_with)
                 }
             }
         };
     }
 
     fn templates_are_different(&self, other: &VNode) -> bool {
-        let self_node_name = self.template.get().name;
-        let other_node_name = other.template.get().name;
-        // we want to re-create the node if the template name is different by pointer even if the value is the same so that we can detect when hot reloading changes the template
-        !std::ptr::eq(self_node_name, other_node_name)
+        let self_node_name = self.template.get().id();
+        let other_node_name = other.template.get().id();
+        self_node_name != other_node_name
     }
 
     pub(super) fn reclaim_attributes(&self, mount: MountId, dom: &mut VirtualDom) {
+        let mut next_id = None;
         for (idx, path) in self.template.get().attr_paths.iter().enumerate() {
             // We clean up the roots in the next step, so don't worry about them here
             if path.len() <= 1 {
                 continue;
             }
 
-            let next_id = dom.mounts[mount.0].mounted_attributes[idx];
-
             // only reclaim the new element if it's different from the previous one
-            _ = dom.try_reclaim(next_id);
+            let new_id = dom.mounts[mount.0].mounted_attributes[idx];
+            if Some(new_id) != next_id {
+                dom.reclaim(new_id);
+                next_id = Some(new_id);
+            }
         }
     }
 
@@ -484,13 +541,13 @@ impl VNode {
         &self,
         new: &VNode,
         dom: &mut VirtualDom,
-        to: &mut impl WriteMutations,
+        mut to: Option<&mut impl WriteMutations>,
     ) {
         let mount_id = self.mount.get();
         let mount = &dom.mounts[mount_id.0];
         let parent = mount.parent;
         match matching_components(self, new) {
-            None => self.replace([new], parent, dom, to),
+            None => self.replace(std::slice::from_ref(new), parent, dom, to),
             Some(components) => {
                 self.move_mount_to(new, dom);
 
@@ -505,20 +562,16 @@ impl VNode {
                         scope_id,
                         parent,
                         dom,
-                        to,
+                        to.as_deref_mut(),
                     )
                 }
             }
         }
     }
 
-    /// Create this template and write its mutations
-    pub(crate) fn create(
-        &self,
-        dom: &mut VirtualDom,
-        to: &mut impl WriteMutations,
-        parent: Option<ElementRef>,
-    ) -> usize {
+    /// Get the most up to date template for this rsx block
+    #[allow(unused)]
+    pub(crate) fn template(&self, dom: &VirtualDom) -> Template {
         // check for a overridden template
         #[cfg(debug_assertions)]
         {
@@ -533,189 +586,170 @@ impl VNode {
             }
         };
 
-        let template = self.template.get();
+        self.template.get()
+    }
 
-        // The best renderers will have templates pre-hydrated and registered
-        // Just in case, let's create the template using instructions anyways
-        dom.register_template(to, template);
-
-        // Initialize the mount information for this template
-        let entry = dom.mounts.vacant_entry();
-        let mount = MountId(entry.key());
-        self.mount.set(mount);
-        tracing::trace!(?self, ?mount, "creating template");
-        entry.insert(VNodeMount {
-            node: self.clone_mounted(),
-            parent,
-            root_ids: vec![ElementId(0); template.roots.len()].into_boxed_slice(),
-            mounted_attributes: vec![ElementId(0); template.attr_paths.len()].into_boxed_slice(),
-            mounted_dynamic_nodes: vec![0; template.node_paths.len()].into_boxed_slice(),
-        });
+    /// Create this rsx block. This will create scopes from components that this rsx block contains, but it will not write anything to the DOM.
+    pub(crate) fn create(
+        &self,
+        dom: &mut VirtualDom,
+        parent: Option<ElementRef>,
+        mut to: Option<&mut impl WriteMutations>,
+    ) -> usize {
+        // Get the most up to date template
+        let template = self.template(dom);
+
+        // Initialize the mount information for this vnode if it isn't already mounted
+        if !self.mount.get().mounted() {
+            let entry = dom.mounts.vacant_entry();
+            let mount = MountId(entry.key());
+            self.mount.set(mount);
+            tracing::trace!(?self, ?mount, "creating template");
+            entry.insert(VNodeMount {
+                node: self.clone_mounted(),
+                parent,
+                root_ids: vec![ElementId(0); template.roots.len()].into_boxed_slice(),
+                mounted_attributes: vec![ElementId(0); template.attr_paths.len()]
+                    .into_boxed_slice(),
+                mounted_dynamic_nodes: vec![usize::MAX; template.node_paths.len()]
+                    .into_boxed_slice(),
+            });
+        }
+
+        // If we are outputting mutations, mount the node as well
+        if let Some(to) = to.as_deref_mut() {
+            // The best renderers will have templates pre-hydrated and registered
+            // Just in case, let's create the template using instructions anyways
+            dom.register_template(to, template);
+        }
 
         // Walk the roots, creating nodes and assigning IDs
-        // nodes in an iterator of ((dynamic_node_index, sorted_index), path)
-        // todo: adjust dynamic nodes to be in the order of roots and then leaves (ie BFS)
-        #[cfg(not(debug_assertions))]
-        let (mut attrs, mut nodes) = (
-            template.attr_paths.iter().copied().enumerate().peekable(),
-            template
-                .node_paths
-                .iter()
-                .copied()
-                .enumerate()
-                .map(|(i, path)| ((i, i), path))
-                .peekable(),
+        // nodes in an iterator of (dynamic_node_index, path)
+        let nodes_sorted = template.breadth_first_node_paths();
+        let attrs_sorted = template.breadth_first_attribute_paths();
+
+        let mut nodes = nodes_sorted.peekable();
+        let mut attrs = attrs_sorted.peekable();
+
+        // Get the mounted id of this block
+        // At this point, we should have already mounted the block
+        debug_assert!(
+            dom.mounts.contains(
+                self.mount
+                    .get()
+                    .as_usize()
+                    .expect("node should already be mounted"),
+            ),
+            "Node mount should be valid"
         );
+        let mount = self.mount.get();
 
-        // If this is a debug build, we need to check that the paths are in the correct order because hot reloading can cause scrambled states
-        #[cfg(debug_assertions)]
-        let (attrs_sorted, nodes_sorted) = {
-            (
-                crate::nodes::sort_bfo(template.attr_paths),
-                crate::nodes::sort_bfo(template.node_paths),
-            )
-        };
-        #[cfg(debug_assertions)]
-        let (mut attrs, mut nodes) = {
-            (
-                attrs_sorted.into_iter().peekable(),
-                nodes_sorted
-                    .iter()
-                    .copied()
-                    .enumerate()
-                    .map(|(i, (id, path))| ((id, i), path))
-                    .peekable(),
-            )
-        };
-
-        template
+        // Go through each root node and create the node, adding it to the stack.
+        // Each node already exists in the template, so we can just clone it from the template
+        let nodes_created = template
             .roots
             .iter()
             .enumerate()
-            .map(|(idx, root)| match root {
-                DynamicText { id } | Dynamic { id } => {
-                    nodes.next().unwrap();
-                    self.write_dynamic_root(mount, *id, dom, to)
-                }
-                Element { .. } => {
-                    #[cfg(not(debug_assertions))]
-                    let id =
-                        self.write_element_root(mount, idx, &mut attrs, &mut nodes, &[], dom, to);
-                    #[cfg(debug_assertions)]
-                    let id = self.write_element_root(
-                        mount,
-                        idx,
-                        &mut attrs,
-                        &mut nodes,
-                        &nodes_sorted,
-                        dom,
-                        to,
-                    );
-                    id
+            .map(|(root_idx, root)| {
+                match root {
+                    TemplateNode::Dynamic { id } => {
+                        // Take a dynamic node off the depth first iterator
+                        nodes.next().unwrap();
+                        // Then mount the node
+                        self.create_dynamic_node(mount, *id, dom, to.as_deref_mut())
+                    }
+                    // For static text and element nodes, just load the template root. This may be a placeholder or just a static node. We now know that each root node has a unique id
+                    TemplateNode::Text { .. } | TemplateNode::Element { .. } => {
+                        if let Some(to) = to.as_deref_mut() {
+                            self.load_template_root(mount, root_idx, dom, to);
+                        }
+
+                        // If this is an element, load in all of the placeholder or dynamic content under this root element too
+                        if matches!(root, TemplateNode::Element { .. }) {
+                            // This operation relies on the fact that the root node is the top node on the stack so we need to do it here
+                            self.load_placeholders(
+                                mount,
+                                &mut nodes,
+                                root_idx as u8,
+                                dom,
+                                to.as_deref_mut(),
+                            );
+                            // Now write out any attributes we need
+                            if let Some(to) = to.as_deref_mut() {
+                                self.write_attrs(mount, &mut attrs, root_idx as u8, dom, to);
+                            }
+                        }
+
+                        // This creates one node on the stack
+                        1
+                    }
                 }
-                TemplateNode::Text { .. } => self.write_static_text_root(mount, idx, dom, to),
             })
-            .sum()
+            .sum();
+
+        // And return the number of nodes we created on the stack
+        nodes_created
     }
 }
 
 impl VNode {
-    fn write_static_text_root(
-        &self,
-        mount: MountId,
-        idx: usize,
-        dom: &mut VirtualDom,
-        to: &mut impl WriteMutations,
-    ) -> usize {
-        // Simply just load the template root, no modifications needed
-        self.load_template_root(mount, idx, dom, to);
-
-        // Text produces just one node on the stack
-        1
+    /// Get a reference back into a dynamic node
+    fn reference_to_dynamic_node(&self, mount: MountId, dynamic_node_id: usize) -> ElementRef {
+        ElementRef {
+            path: ElementPath {
+                path: self.template.get().node_paths[dynamic_node_id],
+            },
+            mount,
+        }
     }
 
-    fn write_dynamic_root(
+    pub(crate) fn create_dynamic_node(
         &self,
         mount: MountId,
-        idx: usize,
+        dynamic_node_id: usize,
         dom: &mut VirtualDom,
-        to: &mut impl WriteMutations,
+        to: Option<&mut impl WriteMutations>,
     ) -> usize {
         use DynamicNode::*;
-        match &self.dynamic_nodes[idx] {
+        let node = &self.dynamic_nodes[dynamic_node_id];
+        match node {
             Component(component) => {
-                let parent = Some(ElementRef {
-                    path: ElementPath {
-                        path: self.template.get().node_paths[idx],
-                    },
-                    mount,
-                });
-                self.create_component_node(mount, idx, component, parent, dom, to)
+                let parent = Some(self.reference_to_dynamic_node(mount, dynamic_node_id));
+                self.create_component_node(mount, dynamic_node_id, component, parent, dom, to)
             }
             Fragment(frag) => {
-                let parent = Some(ElementRef {
-                    path: ElementPath {
-                        path: self.template.get().node_paths[idx],
-                    },
-                    mount,
-                });
+                let parent = Some(self.reference_to_dynamic_node(mount, dynamic_node_id));
                 dom.create_children(to, frag, parent)
             }
-            Placeholder(_) => {
-                let id = mount.mount_node(idx, dom);
-                to.create_placeholder(id);
-                1
+            Text(text) => {
+                // If we are diffing suspended nodes and are not outputting mutations, we can skip it
+                if let Some(to) = to {
+                    self.create_dynamic_text(mount, dynamic_node_id, text, dom, to)
+                } else {
+                    0
+                }
             }
-            Text(VText { value }) => {
-                let id = mount.mount_node(idx, dom);
-                to.create_text_node(value, id);
-                1
+            Placeholder(_) => {
+                // If we are diffing suspended nodes and are not outputting mutations, we can skip it
+                if let Some(to) = to {
+                    tracing::trace!("creating placeholder");
+                    self.create_placeholder(mount, dynamic_node_id, dom, to)
+                } else {
+                    tracing::trace!("skipping creating placeholder");
+                    0
+                }
             }
         }
     }
 
-    /// We write all the descendent 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(
-        &self,
-        mount: MountId,
-        root_idx: usize,
-        dynamic_attrs: &mut Peekable<impl Iterator<Item = (usize, &'static [u8])>>,
-        dynamic_nodes_iter: &mut Peekable<impl Iterator<Item = ((usize, usize), &'static [u8])>>,
-        dynamic_nodes: &[(usize, &'static [u8])],
-        dom: &mut VirtualDom,
-        to: &mut impl WriteMutations,
-    ) -> usize {
-        // Load the template root and get the ID for the node on the stack
-        let root_on_stack = self.load_template_root(mount, root_idx, dom, to);
-
-        // Write all the attributes below this root
-        self.write_attrs_on_root(mount, dynamic_attrs, root_idx as u8, root_on_stack, dom, to);
-
-        // Load in all of the placeholder or dynamic content under this root too
-        self.load_placeholders(
-            mount,
-            dynamic_nodes_iter,
-            dynamic_nodes,
-            root_idx as u8,
-            dom,
-            to,
-        );
-
-        1
-    }
-
-    /// Load all of the placeholder nodes for descendents of this root node
+    /// Load all of the placeholder nodes for descendent of this root node
     ///
     /// ```rust, no_run
     /// # use dioxus::prelude::*;
     /// # let some_text = "hello world";
     /// # let some_value = "123";
     /// rsx! {
-    ///     div {
+    ///     div { // We just wrote this node
     ///         // This is a placeholder
     ///         {some_value}
     ///
@@ -724,64 +758,73 @@ impl VNode {
     ///     }
     /// };
     /// ```
-    #[allow(unused)]
+    ///
+    /// IMPORTANT: This function assumes that root node is the top node on the stack
     fn load_placeholders(
         &self,
         mount: MountId,
-        dynamic_nodes_iter: &mut Peekable<impl Iterator<Item = ((usize, usize), &'static [u8])>>,
-        dynamic_nodes: &[(usize, &'static [u8])],
+        dynamic_nodes_iter: &mut Peekable<impl Iterator<Item = (usize, &'static [u8])>>,
         root_idx: u8,
         dom: &mut VirtualDom,
-        to: &mut impl WriteMutations,
+        mut to: Option<&mut impl WriteMutations>,
     ) {
-        let (start, end) = match collect_dyn_node_range(dynamic_nodes_iter, root_idx) {
-            Some((a, b)) => (a, b),
-            None => return,
-        };
-
-        // If hot reloading is enabled, we need to map the sorted index to the original index of the dynamic node. If it is disabled, we can just use the sorted index
-        #[cfg(not(debug_assertions))]
-        let reversed_iter = (start..=end).rev();
-        #[cfg(debug_assertions)]
-        let reversed_iter = (start..=end)
-            .rev()
-            .map(|sorted_index| dynamic_nodes[sorted_index].0);
-
-        for idx in reversed_iter {
-            let m = self.create_dynamic_node(mount, idx, dom, to);
-            if m > 0 {
-                // The path is one shorter because the top node is the root
-                let path = &self.template.get().node_paths[idx][1..];
-                to.replace_placeholder_with_nodes(path, m);
+        // Only take nodes that are under this root node
+        let from_root_node = |(_, path): &(usize, &[u8])| path.first() == Some(&root_idx);
+        while let Some((dynamic_node_id, path)) = dynamic_nodes_iter.next_if(from_root_node) {
+            let m = self.create_dynamic_node(mount, dynamic_node_id, dom, to.as_deref_mut());
+            if let Some(to) = to.as_deref_mut() {
+                // If we actually created real new nodes, we need to replace the placeholder for this dynamic node with the new dynamic nodes
+                if m > 0 {
+                    // The path is one shorter because the top node is the root
+                    let path = &path[1..];
+                    to.replace_placeholder_with_nodes(path, m);
+                }
             }
         }
     }
 
-    fn write_attrs_on_root(
+    /// After we have written a root element, we need to write all the attributes that are on the root node
+    ///
+    /// ```rust, ignore
+    /// rsx! {
+    ///     div { // We just wrote this node
+    ///         class: "{class}", // We need to set these attributes
+    ///         id: "{id}",
+    ///         style: "{style}",
+    ///     }
+    /// }
+    /// ```
+    ///
+    /// IMPORTANT: This function assumes that root node is the top node on the stack
+    fn write_attrs(
         &self,
         mount: MountId,
-        attrs: &mut Peekable<impl Iterator<Item = (usize, &'static [u8])>>,
+        dynamic_attrbiutes_iter: &mut Peekable<impl Iterator<Item = (usize, &'static [u8])>>,
         root_idx: u8,
-        root: ElementId,
         dom: &mut VirtualDom,
         to: &mut impl WriteMutations,
     ) {
-        while let Some((mut attr_id, path)) =
-            attrs.next_if(|(_, p)| p.first().copied() == Some(root_idx))
+        let mut last_path = None;
+        // Only take nodes that are under this root node
+        let from_root_node = |(_, path): &(usize, &[u8])| path.first() == Some(&root_idx);
+        while let Some((attribute_idx, attribute_path)) =
+            dynamic_attrbiutes_iter.next_if(from_root_node)
         {
-            let id = self.assign_static_node_as_dynamic(path, root, dom, to);
-
-            loop {
-                for attr in &*self.dynamic_attrs[attr_id] {
-                    self.write_attribute(path, attr, id, mount, dom, to);
-                    dom.mounts[mount.0].mounted_attributes[attr_id] = id;
+            let attribute = &self.dynamic_attrs[attribute_idx];
+            let id = match last_path {
+                // If the last path was exactly the same, we can reuse the id
+                Some((path, id)) if path == attribute_path => id,
+                // Otherwise, we need to create a new id
+                _ => {
+                    let id = self.assign_static_node_as_dynamic(mount, attribute_path, dom, to);
+                    last_path = Some((attribute_path, id));
+                    id
                 }
+            };
 
-                // 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,
-                }
+            for attr in &**attribute {
+                self.write_attribute(attribute_path, attr, id, mount, dom, to);
+                dom.mounts[mount.0].mounted_attributes[attribute_idx] = id;
             }
         }
     }
@@ -806,22 +849,22 @@ impl VNode {
     ///
     /// 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 in question is the root node, we just return the 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(
         &self,
+        mount: MountId,
         path: &'static [u8],
-        this_id: ElementId,
         dom: &mut VirtualDom,
         to: &mut impl WriteMutations,
     ) -> ElementId {
-        if path.len() == 1 {
-            return this_id;
+        // This is just the root node. We already know it's id
+        if let [root_idx] = path {
+            return dom.mounts[mount.0].root_ids[*root_idx as usize];
         }
 
-        // 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
+        // The node is deeper in the template and we should create a new id for it
         let id = dom.next_element();
 
         to.assign_node_id(&path[1..], id);
@@ -829,41 +872,8 @@ impl VNode {
         id
     }
 
-    pub(crate) fn create_dynamic_node(
-        &self,
-        mount: MountId,
-        index: usize,
-        dom: &mut VirtualDom,
-        to: &mut impl WriteMutations,
-    ) -> usize {
-        use DynamicNode::*;
-        let node = &self.dynamic_nodes[index];
-        match node {
-            Text(text) => self.create_dynamic_text(mount, index, text, dom, to),
-            Placeholder(_) => self.create_placeholder(mount, index, dom, to),
-            Component(component) => {
-                let parent = Some(ElementRef {
-                    path: ElementPath {
-                        path: self.template.get().node_paths[index],
-                    },
-                    mount,
-                });
-                self.create_component_node(mount, index, component, parent, dom, to)
-            }
-            Fragment(frag) => {
-                let parent = Some(ElementRef {
-                    path: ElementPath {
-                        path: self.template.get().node_paths[index],
-                    },
-                    mount,
-                });
-                dom.create_children(to, frag, parent)
-            }
-        }
-    }
-
     /// Mount a root node and return its ID and the path to the node
-    fn mount_dynamic_node_with_path(
+    fn create_dynamic_node_with_path(
         &self,
         mount: MountId,
         idx: usize,
@@ -886,13 +896,19 @@ impl VNode {
         dom: &mut VirtualDom,
         to: &mut impl WriteMutations,
     ) -> usize {
-        let (new_id, path) = self.mount_dynamic_node_with_path(mount, idx, dom);
-
-        // Hydrate the text node
-        to.hydrate_text_node(path, &text.value, new_id);
-
-        // Since we're hydrating an existing node, we don't create any new nodes
-        0
+        let (new_id, path) = self.create_dynamic_node_with_path(mount, idx, dom);
+
+        // If this is a root node, the path is empty and we need to create a new text node
+        if path.is_empty() {
+            to.create_text_node(&text.value, new_id);
+            // We create one node on the stack
+            1
+        } else {
+            // Dynamic text nodes always exist as a placeholder text node in the template, we can just hydrate that text node instead of creating a new one
+            to.hydrate_text_node(path, &text.value, new_id);
+            // Since we're hydrating an existing node, we don't create any new nodes
+            0
+        }
     }
 
     pub(crate) fn create_placeholder(
@@ -902,13 +918,19 @@ impl VNode {
         dom: &mut VirtualDom,
         to: &mut impl WriteMutations,
     ) -> usize {
-        let (id, path) = self.mount_dynamic_node_with_path(mount, idx, dom);
-
-        // Assign the ID to the existing node in the template
-        to.assign_node_id(path, id);
-
-        // Since the placeholder is already in the DOM, we don't create any new nodes
-        0
+        let (id, path) = self.create_dynamic_node_with_path(mount, idx, dom);
+
+        // If this is a root node, the path is empty and we need to create a new text node
+        if path.is_empty() {
+            to.create_placeholder(id);
+            // We create one node on the stack
+            1
+        } else {
+            // Assign the ID to the existing node in the template
+            to.assign_node_id(path, id);
+            // Since the placeholder is already in the DOM, we don't create any new nodes
+            0
+        }
     }
 }
 
@@ -920,30 +942,6 @@ impl MountId {
     }
 }
 
-fn collect_dyn_node_range(
-    dynamic_nodes: &mut Peekable<impl Iterator<Item = ((usize, usize), &'static [u8])>>,
-    root_idx: u8,
-) -> Option<(usize, usize)> {
-    let start = match dynamic_nodes.peek() {
-        Some(((_, idx), [first, ..])) if *first == root_idx => *idx,
-        _ => return None,
-    };
-
-    let mut end = start;
-
-    while let Some(((_, idx), p)) =
-        dynamic_nodes.next_if(|(_, p)| matches!(p, [idx, ..] if *idx == root_idx))
-    {
-        if p.len() == 1 {
-            continue;
-        }
-
-        end = idx;
-    }
-
-    Some((start, end))
-}
-
 fn matching_components<'a>(
     left: &'a VNode,
     right: &'a VNode,

packages/core/src/effect.rs

@@ -16,9 +16,9 @@ pub(crate) struct Effect {
 }
 
 impl Effect {
-    pub(crate) fn new(order: ScopeOrder, f: impl FnOnce() + 'static) -> Self {
+    pub(crate) fn new(order: ScopeOrder, f: Box<dyn FnOnce() + 'static>) -> Self {
         let mut effect = VecDeque::new();
-        effect.push_back(Box::new(f) as Box<dyn FnOnce() + 'static>);
+        effect.push_back(f);
         Self {
             order,
             effect: RefCell::new(effect),

packages/core/src/error_boundary.rs

@@ -1,21 +1,24 @@
 use crate::{
-    global_context::{current_scope_id, try_consume_context},
-    innerlude::provide_context,
-    use_hook, Element, IntoDynNode, Properties, ScopeId, Template, TemplateAttribute, TemplateNode,
-    VNode,
+    global_context::current_scope_id, innerlude::provide_context, use_hook, Element, IntoDynNode,
+    Properties, ScopeId, Template, TemplateAttribute, TemplateNode, VNode,
 };
 use std::{
     any::{Any, TypeId},
     backtrace::Backtrace,
-    cell::RefCell,
+    cell::{Ref, RefCell},
     error::Error,
     fmt::{Debug, Display},
     rc::Rc,
+    str::FromStr,
 };
 
 /// A panic in a component that was caught by an error boundary.
 ///
-/// NOTE: WASM currently does not support caching unwinds, so this struct will not be created in WASM.
+/// <div class="warning">
+///
+/// WASM currently does not support caching unwinds, so this struct will not be created in WASM.
+///
+/// </div>
 pub struct CapturedPanic {
     #[allow(dead_code)]
     /// The error that was caught
@@ -28,288 +31,539 @@ impl Debug for CapturedPanic {
     }
 }
 
+impl Display for CapturedPanic {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        f.write_fmt(format_args!("Encountered panic: {:?}", self.error))
+    }
+}
+
+impl Error for CapturedPanic {}
+
 /// Provide an error boundary to catch errors from child components
-pub fn use_error_boundary() -> ErrorBoundary {
-    use_hook(|| provide_context(ErrorBoundary::new()))
+pub fn use_error_boundary() -> ErrorContext {
+    use_hook(|| provide_context(ErrorContext::new(Vec::new(), current_scope_id().unwrap())))
 }
 
-/// A boundary that will capture any errors from child components
-#[derive(Debug, Clone, Default)]
-pub struct ErrorBoundary {
-    inner: Rc<ErrorBoundaryInner>,
+/// A trait for any type that can be downcast to a concrete type and implements Debug. This is automatically implemented for all types that implement Any + Debug.
+pub trait AnyError {
+    fn as_any(&self) -> &dyn Any;
+    fn as_error(&self) -> &dyn Error;
 }
 
-/// A boundary that will capture any errors from child components
-pub struct ErrorBoundaryInner {
-    error: RefCell<Option<CapturedError>>,
-    _id: ScopeId,
+/// An wrapper error type for types that only implement Display. We use a inner type here to avoid overlapping implementations for DisplayError and impl Error
+struct DisplayError(DisplayErrorInner);
+
+impl<E: Display + 'static> From<E> for DisplayError {
+    fn from(e: E) -> Self {
+        Self(DisplayErrorInner(Box::new(e)))
+    }
 }
 
-impl Debug for ErrorBoundaryInner {
+struct DisplayErrorInner(Box<dyn Display>);
+impl Display for DisplayErrorInner {
     fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
-        f.debug_struct("ErrorBoundaryInner")
-            .field("error", &self.error)
-            .finish()
+        self.0.fmt(f)
     }
 }
 
-/// A trait for any type that can be downcast to a concrete type and implements Debug. This is automatically implemented for all types that implement Any + Debug.
-pub trait AnyDebug: Any + Debug {
-    fn as_any(&self) -> &dyn Any;
+impl Debug for DisplayErrorInner {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        self.0.fmt(f)
+    }
 }
 
-impl<T: Any + Debug> AnyDebug for T {
+impl Error for DisplayErrorInner {}
+
+impl AnyError for DisplayError {
     fn as_any(&self) -> &dyn Any {
-        self
+        &self.0 .0
+    }
+
+    fn as_error(&self) -> &dyn Error {
+        &self.0
     }
 }
 
-#[derive(Debug)]
-/// An instance of an error captured by a descendant component.
-pub struct CapturedError {
-    /// The error captured by the error boundary
-    pub error: Box<dyn AnyDebug + 'static>,
+/// Provides context methods to [`Result`] and [`Option`] types that are compatible with [`CapturedError`]
+///
+/// This trait is sealed and cannot be implemented outside of dioxus-core
+pub trait Context<T, E>: private::Sealed {
+    /// Add a visual representation of the error that the [`ErrorBoundary`] may render
+    ///
+    /// # Example
+    /// ```rust
+    /// # use dioxus::prelude::*;
+    /// fn Component() -> Element {
+    ///     // You can bubble up errors with `?` inside components, and event handlers
+    ///     // Along with the error itself, you can provide a way to display the error by calling `show`
+    ///     let number = "1234".parse::<usize>().show(|error| rsx! {
+    ///         div {
+    ///             background_color: "red",
+    ///             color: "white",
+    ///             "Error parsing number: {error}"
+    ///         }
+    ///     })?;
+    ///     todo!()
+    /// }
+    /// ```
+    fn show(self, display_error: impl FnOnce(&E) -> Element) -> Result<T>;
 
-    /// The backtrace of the error
-    pub backtrace: Backtrace,
+    /// Wrap the result additional context about the error that occurred.
+    ///
+    /// # Example
+    /// ```rust
+    /// # use dioxus::prelude::*;
+    /// fn NumberParser() -> Element {
+    ///     // You can bubble up errors with `?` inside components, and event handlers
+    ///     // Along with the error itself, you can provide a way to display the error by calling `context`
+    ///     let number = "-1234".parse::<usize>().context("Parsing number inside of the NumberParser")?;
+    ///     todo!()
+    /// }
+    /// ```
+    fn context<C: Display + 'static>(self, context: C) -> Result<T>;
 
-    /// The scope that threw the error
-    pub scope: ScopeId,
+    /// Wrap the result with additional context about the error that occurred. The closure will only be run if the Result is an error.
+    ///
+    /// # Example
+    /// ```rust
+    /// # use dioxus::prelude::*;
+    /// fn NumberParser() -> Element {
+    ///     // You can bubble up errors with `?` inside components, and event handlers
+    ///     // Along with the error itself, you can provide a way to display the error by calling `context`
+    ///     let number = "-1234".parse::<usize>().with_context(|| format!("Timestamp: {:?}", std::time::Instant::now()))?;
+    ///     todo!()
+    /// }
+    /// ```
+    fn with_context<C: Display + 'static>(self, context: impl FnOnce() -> C) -> Result<T>;
 }
 
-impl Display for CapturedError {
-    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
-        f.write_fmt(format_args!(
-            "Encountered error: {:?}\nIn scope: {:?}\nBacktrace: {}",
-            self.error, self.scope, self.backtrace
-        ))
+impl<T, E> Context<T, E> for std::result::Result<T, E>
+where
+    E: Error + 'static,
+{
+    fn show(self, display_error: impl FnOnce(&E) -> Element) -> Result<T> {
+        // We don't use result mapping to avoid extra frames
+        match self {
+            std::result::Result::Ok(value) => Ok(value),
+            Err(error) => {
+                let render = display_error(&error).unwrap_or_default();
+                let mut error: CapturedError = error.into();
+                error.render = render;
+                Err(error)
+            }
+        }
     }
-}
 
-impl Error for CapturedError {}
+    fn context<C: Display + 'static>(self, context: C) -> Result<T> {
+        self.with_context(|| context)
+    }
 
-impl CapturedError {
-    /// Downcast the error type into a concrete error type
-    pub fn downcast<T: 'static>(&self) -> Option<&T> {
-        if TypeId::of::<T>() == (*self.error).type_id() {
-            self.error.as_any().downcast_ref::<T>()
-        } else {
-            None
+    fn with_context<C: Display + 'static>(self, context: impl FnOnce() -> C) -> Result<T> {
+        // We don't use result mapping to avoid extra frames
+        match self {
+            std::result::Result::Ok(value) => Ok(value),
+            Err(error) => {
+                let mut error: CapturedError = error.into();
+                error.context.push(Rc::new(AdditionalErrorContext {
+                    backtrace: Backtrace::capture(),
+                    context: Box::new(context()),
+                    scope: current_scope_id(),
+                }));
+                Err(error)
+            }
         }
     }
 }
 
-impl Default for ErrorBoundaryInner {
-    fn default() -> Self {
-        Self {
-            error: RefCell::new(None),
-            _id: current_scope_id()
-                .expect("Cannot create an error boundary outside of a component's scope."),
+impl<T> Context<T, CapturedError> for Option<T> {
+    fn show(self, display_error: impl FnOnce(&CapturedError) -> Element) -> Result<T> {
+        // We don't use result mapping to avoid extra frames
+        match self {
+            Some(value) => Ok(value),
+            None => {
+                let mut error = CapturedError::from_display("Value was none");
+                let render = display_error(&error).unwrap_or_default();
+                error.render = render;
+                Err(error)
+            }
+        }
+    }
+
+    fn context<C: Display + 'static>(self, context: C) -> Result<T> {
+        self.with_context(|| context)
+    }
+
+    fn with_context<C: Display + 'static>(self, context: impl FnOnce() -> C) -> Result<T> {
+        // We don't use result mapping to avoid extra frames
+        match self {
+            Some(value) => Ok(value),
+            None => {
+                let error = CapturedError::from_display(context());
+                Err(error)
+            }
         }
     }
 }
 
-impl ErrorBoundary {
-    /// Create a new error boundary
-    pub fn new() -> Self {
-        Self::default()
+pub(crate) mod private {
+    use super::*;
+
+    pub trait Sealed {}
+
+    impl<T, E> Sealed for std::result::Result<T, E> where E: Error {}
+    impl<T> Sealed for Option<T> {}
+}
+
+impl<T: Any + Error> AnyError for T {
+    fn as_any(&self) -> &dyn Any {
+        self
+    }
+
+    fn as_error(&self) -> &dyn Error {
+        self
+    }
+}
+
+/// A context with information about suspended components
+#[derive(Debug, Clone)]
+pub struct ErrorContext {
+    errors: Rc<RefCell<Vec<CapturedError>>>,
+    id: ScopeId,
+}
+
+impl PartialEq for ErrorContext {
+    fn eq(&self, other: &Self) -> bool {
+        Rc::ptr_eq(&self.errors, &other.errors)
     }
+}
 
-    /// Create a new error boundary in the current scope
-    pub(crate) fn new_in_scope(scope: ScopeId) -> Self {
+impl ErrorContext {
+    /// Create a new suspense boundary in a specific scope
+    pub(crate) fn new(errors: Vec<CapturedError>, id: ScopeId) -> Self {
         Self {
-            inner: Rc::new(ErrorBoundaryInner {
-                error: RefCell::new(None),
-                _id: scope,
-            }),
+            errors: Rc::new(RefCell::new(errors)),
+            id,
         }
     }
 
+    /// Get all errors thrown from child components
+    pub fn errors(&self) -> Ref<[CapturedError]> {
+        Ref::map(self.errors.borrow(), |errors| errors.as_slice())
+    }
+
+    /// Get the Element from the first error that can be shown
+    pub fn show(&self) -> Option<Element> {
+        self.errors.borrow().iter().find_map(|task| task.show())
+    }
+
     /// Push an error into this Error Boundary
-    pub fn insert_error(&self, scope: ScopeId, error: impl Debug + 'static, backtrace: Backtrace) {
-        self.inner.error.replace(Some(CapturedError {
-            error: Box::new(error),
-            scope,
+    pub fn insert_error(&self, error: CapturedError) {
+        self.errors.borrow_mut().push(error);
+        self.id.needs_update();
+    }
+
+    /// Clear all errors from this Error Boundary
+    pub fn clear_errors(&self) {
+        self.errors.borrow_mut().clear();
+    }
+}
+
+/// Errors can have additional context added as they bubble up the render tree
+/// This context can be used to provide additional information to the user
+struct AdditionalErrorContext {
+    backtrace: Backtrace,
+    context: Box<dyn Display>,
+    scope: Option<ScopeId>,
+}
+
+impl Debug for AdditionalErrorContext {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        f.debug_struct("ErrorContext")
+            .field("backtrace", &self.backtrace)
+            .field("context", &self.context.to_string())
+            .finish()
+    }
+}
+
+impl Display for AdditionalErrorContext {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        let AdditionalErrorContext {
             backtrace,
-        }));
-        if self.inner._id != ScopeId::ROOT {
-            self.inner._id.needs_update();
+            context,
+            scope,
+        } = self;
+
+        write!(f, "{context} (from ")?;
+
+        if let Some(scope) = scope {
+            write!(f, "scope {scope:?} ")?;
         }
-    }
 
-    /// Take any error that has been captured by this error boundary
-    pub fn take_error(&self) -> Option<CapturedError> {
-        self.inner.error.take()
+        write!(f, "at {backtrace:?})")
     }
 }
 
-/// A trait to allow results to be thrown upwards to the nearest Error Boundary
-///
-/// The canonical way of using this trait is to throw results from hooks, aborting rendering
-/// through question mark syntax. The throw method returns an option that evaluates to None
-/// if there is an error, injecting the error to the nearest error boundary.
-///
-/// If the value is `Ok`, then throw returns the value, not aborting the rendering process.
-///
-/// The call stack is saved for this component and provided to the error boundary
-///
-/// ```rust
-/// use dioxus::prelude::*;
-///
-/// #[component]
-/// fn app(count: String) -> Element {
-///     let count: i32 = count.parse().throw()?;
-///
-///     rsx! {
-///         div { "Count {count}" }
-///     }
-/// }
-/// ```
-pub trait Throw<S = ()>: Sized {
-    /// The value that will be returned in if the given value is `Ok`.
-    type Out;
+/// A type alias for a result that can be either a boxed error or a value
+/// This is useful to avoid having to use `Result<T, CapturedError>` everywhere
+pub type Result<T = ()> = std::result::Result<T, CapturedError>;
 
-    /// Returns an option that evaluates to None if there is an error, injecting the error to the nearest error boundary.
-    ///
-    /// If the value is `Ok`, then throw returns the value, not aborting the rendering process.
-    ///
-    /// The call stack is saved for this component and provided to the error boundary
-    ///
-    ///
-    /// Note that you can also manually throw errors using the throw method on `ScopeState` directly,
-    /// which is what this trait shells out to.
-    ///
-    ///
-    /// ```rust
-    /// use dioxus::prelude::*;
-    ///
-    /// #[component]
-    /// fn app( count: String) -> Element {
-    ///     let count: i32 = count.parse().throw()?;
-    ///
-    ///     rsx! {
-    ///         div { "Count {count}" }
-    ///     }
-    /// }
-    /// ```
-    fn throw(self) -> Option<Self::Out>;
+/// A helper function for an Ok result that can be either a boxed error or a value
+/// This is useful to avoid having to use `Ok<T, CapturedError>` everywhere
+#[allow(non_snake_case)]
+pub fn Ok<T>(value: T) -> Result<T> {
+    Result::Ok(value)
+}
 
-    /// Returns an option that evaluates to None if there is an error, injecting the error to the nearest error boundary.
-    ///
-    /// If the value is `Ok`, then throw returns the value, not aborting the rendering process.
-    ///
-    /// The call stack is saved for this component and provided to the error boundary
-    ///
-    ///
-    /// Note that you can also manually throw errors using the throw method on `ScopeState` directly,
-    /// which is what this trait shells out to.
-    ///
-    ///
-    /// ```rust
-    /// use dioxus::prelude::*;
-    ///
-    /// #[component]
-    /// fn app( count: String) -> Element {
-    ///     let count: i32 = count.parse().throw()?;
-    ///
-    ///     rsx! {
-    ///         div { "Count {count}" }
-    ///     }
-    /// }
-    /// ```
-    fn throw_with<D: Debug + 'static>(self, e: impl FnOnce() -> D) -> Option<Self::Out> {
-        self.throw().or_else(|| throw_error(e()))
+#[derive(Clone)]
+/// An instance of an error captured by a descendant component.
+pub struct CapturedError {
+    /// The error captured by the error boundary
+    error: Rc<dyn AnyError + 'static>,
+
+    /// The backtrace of the error
+    backtrace: Rc<Backtrace>,
+
+    /// The scope that threw the error
+    scope: ScopeId,
+
+    /// An error message that can be displayed to the user
+    pub(crate) render: VNode,
+
+    /// Additional context that was added to the error
+    context: Vec<Rc<AdditionalErrorContext>>,
+}
+
+impl FromStr for CapturedError {
+    type Err = std::convert::Infallible;
+
+    fn from_str(s: &str) -> std::result::Result<Self, Self::Err> {
+        std::result::Result::Ok(Self::from_display(s.to_string()))
     }
 }
 
-pub(crate) fn throw_error<T>(e: impl Debug + 'static) -> Option<T> {
-    if let Some(cx) = try_consume_context::<ErrorBoundary>() {
-        match current_scope_id() {
-            Some(id) => cx.insert_error(id, Box::new(e), Backtrace::capture()),
-            None => {
-                tracing::error!("Cannot throw error outside of a component's scope.")
-            }
-        }
+#[cfg(feature = "serialize")]
+#[derive(serde::Serialize, serde::Deserialize)]
+struct SerializedCapturedError {
+    error: String,
+    context: Vec<String>,
+}
+
+#[cfg(feature = "serialize")]
+impl serde::Serialize for CapturedError {
+    fn serialize<S: serde::Serializer>(
+        &self,
+        serializer: S,
+    ) -> std::result::Result<S::Ok, S::Error> {
+        let serialized = SerializedCapturedError {
+            error: self.error.as_error().to_string(),
+            context: self
+                .context
+                .iter()
+                .map(|context| context.to_string())
+                .collect(),
+        };
+        serialized.serialize(serializer)
     }
+}
 
-    None
+#[cfg(feature = "serialize")]
+impl<'de> serde::Deserialize<'de> for CapturedError {
+    fn deserialize<D: serde::Deserializer<'de>>(
+        deserializer: D,
+    ) -> std::result::Result<Self, D::Error> {
+        let serialized = SerializedCapturedError::deserialize(deserializer)?;
+
+        let error = DisplayError::from(serialized.error);
+        let context = serialized
+            .context
+            .into_iter()
+            .map(|context| {
+                Rc::new(AdditionalErrorContext {
+                    scope: None,
+                    backtrace: Backtrace::disabled(),
+                    context: Box::new(context),
+                })
+            })
+            .collect();
+
+        std::result::Result::Ok(Self {
+            error: Rc::new(error),
+            context,
+            backtrace: Rc::new(Backtrace::disabled()),
+            scope: ScopeId::ROOT,
+            render: VNode::placeholder(),
+        })
+    }
 }
 
-/// We call clone on any errors that can be owned out of a reference
-impl<'a, T, O: Debug + 'static, E: ToOwned<Owned = O>> Throw for &'a Result<T, E> {
-    type Out = &'a T;
+impl Debug for CapturedError {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        f.debug_struct("CapturedError")
+            .field("error", &self.error.as_error())
+            .field("backtrace", &self.backtrace)
+            .field("scope", &self.scope)
+            .finish()
+    }
+}
 
-    fn throw(self) -> Option<Self::Out> {
-        match self {
-            Ok(t) => Some(t),
-            Err(e) => throw_error(e.to_owned()),
+impl<E: AnyError + 'static> From<E> for CapturedError {
+    fn from(error: E) -> Self {
+        Self {
+            error: Rc::new(error),
+            backtrace: Rc::new(Backtrace::capture()),
+            scope: current_scope_id()
+                .expect("Cannot create an error boundary outside of a component's scope."),
+            render: Default::default(),
+            context: Default::default(),
         }
     }
+}
 
-    fn throw_with<D: Debug + 'static>(self, err: impl FnOnce() -> D) -> Option<Self::Out> {
-        match self {
-            Ok(t) => Some(t),
-            Err(_e) => throw_error(err()),
+impl CapturedError {
+    /// Create a new captured error
+    pub fn new(error: impl AnyError + 'static) -> Self {
+        Self {
+            error: Rc::new(error),
+            backtrace: Rc::new(Backtrace::capture()),
+            scope: current_scope_id().unwrap_or(ScopeId::ROOT),
+            render: Default::default(),
+            context: Default::default(),
         }
     }
-}
 
-/// Or just throw errors we know about
-impl<T, E: Debug + 'static> Throw for Result<T, E> {
-    type Out = T;
+    /// Create a new error from a type that only implements [`Display`]. If your type implements [`Error`], you can use [`CapturedError::from`] instead.
+    pub fn from_display(error: impl Display + 'static) -> Self {
+        Self {
+            error: Rc::new(DisplayError::from(error)),
+            backtrace: Rc::new(Backtrace::capture()),
+            scope: current_scope_id().unwrap_or(ScopeId::ROOT),
+            render: Default::default(),
+            context: Default::default(),
+        }
+    }
 
-    fn throw(self) -> Option<T> {
-        match self {
-            Ok(t) => Some(t),
-            Err(e) => throw_error(e),
+    /// Mark the error as being thrown from a specific scope
+    pub fn with_origin(mut self, scope: ScopeId) -> Self {
+        self.scope = scope;
+        self
+    }
+
+    /// Clone the error while retaining the mounted information of the error
+    pub(crate) fn clone_mounted(&self) -> Self {
+        Self {
+            error: self.error.clone(),
+            backtrace: self.backtrace.clone(),
+            scope: self.scope,
+            render: self.render.clone_mounted(),
+            context: self.context.clone(),
+        }
+    }
+
+    /// Get a VNode representation of the error if the error provides one
+    pub fn show(&self) -> Option<Element> {
+        if self.render == VNode::placeholder() {
+            None
+        } else {
+            Some(std::result::Result::Ok(self.render.clone()))
         }
     }
+}
 
-    fn throw_with<D: Debug + 'static>(self, error: impl FnOnce() -> D) -> Option<Self::Out> {
-        self.ok().or_else(|| throw_error(error()))
+impl PartialEq for CapturedError {
+    fn eq(&self, other: &Self) -> bool {
+        format!("{:?}", self) == format!("{:?}", other)
     }
 }
 
-/// Or just throw errors we know about
-impl<T> Throw for Option<T> {
-    type Out = T;
+impl Display for CapturedError {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        f.write_fmt(format_args!(
+            "Encountered error: {:?}\nIn scope: {:?}\nBacktrace: {}\nContext: ",
+            self.error.as_error(),
+            self.scope,
+            self.backtrace
+        ))?;
+        for context in &*self.context {
+            f.write_fmt(format_args!("{}\n", context))?;
+        }
+        std::result::Result::Ok(())
+    }
+}
 
-    fn throw(self) -> Option<T> {
-        self.or_else(|| throw_error("Attempted to unwrap a None value."))
+impl CapturedError {
+    /// Downcast the error type into a concrete error type
+    pub fn downcast<T: 'static>(&self) -> Option<&T> {
+        if TypeId::of::<T>() == (*self.error).type_id() {
+            self.error.as_any().downcast_ref::<T>()
+        } else {
+            None
+        }
     }
+}
 
-    fn throw_with<D: Debug + 'static>(self, error: impl FnOnce() -> D) -> Option<Self::Out> {
-        self.or_else(|| throw_error(error()))
+pub(crate) fn throw_into(error: impl Into<CapturedError>, scope: ScopeId) {
+    let error = error.into();
+    if let Some(cx) = scope.consume_context::<ErrorContext>() {
+        cx.insert_error(error)
+    } else {
+        tracing::error!(
+            "Tried to throw an error into an error boundary, but failed to locate a boundary: {:?}",
+            error
+        )
     }
 }
 
+#[allow(clippy::type_complexity)]
 #[derive(Clone)]
-pub struct ErrorHandler(Rc<dyn Fn(CapturedError) -> Element>);
-impl<F: Fn(CapturedError) -> Element + 'static> From<F> for ErrorHandler {
+pub struct ErrorHandler(Rc<dyn Fn(ErrorContext) -> Element>);
+impl<F: Fn(ErrorContext) -> Element + 'static> From<F> for ErrorHandler {
     fn from(value: F) -> Self {
         Self(Rc::new(value))
     }
 }
-fn default_handler(error: CapturedError) -> Element {
+
+fn default_handler(errors: ErrorContext) -> Element {
     static TEMPLATE: Template = Template {
         name: "error_handle.rs:42:5:884",
         roots: &[TemplateNode::Element {
-            tag: "pre",
+            tag: "div",
             namespace: None,
             attrs: &[TemplateAttribute::Static {
                 name: "color",
                 namespace: Some("style"),
                 value: "red",
             }],
-            children: &[TemplateNode::DynamicText { id: 0usize }],
+            children: &[TemplateNode::Dynamic { id: 0usize }],
         }],
         node_paths: &[&[0u8, 0u8]],
         attr_paths: &[],
     };
-    Some(VNode::new(
+    std::result::Result::Ok(VNode::new(
         None,
         TEMPLATE,
-        Box::new([error.to_string().into_dyn_node()]),
+        Box::new([errors
+            .errors()
+            .iter()
+            .map(|e| {
+                static TEMPLATE: Template = Template {
+                    name: "error_handle.rs:43:5:884",
+                    roots: &[TemplateNode::Element {
+                        tag: "pre",
+                        namespace: None,
+                        attrs: &[],
+                        children: &[TemplateNode::Dynamic { id: 0usize }],
+                    }],
+                    node_paths: &[&[0u8, 0u8]],
+                    attr_paths: &[],
+                };
+                VNode::new(
+                    None,
+                    TEMPLATE,
+                    Box::new([e.to_string().into_dyn_node()]),
+                    Default::default(),
+                )
+            })
+            .into_dyn_node()]),
         Default::default(),
     ))
 }
@@ -433,9 +687,7 @@ impl<
 {
     pub fn build(self) -> ErrorBoundaryProps {
         let (children, handle_error) = self.fields;
-        let children = ErrorBoundaryPropsBuilder_Optional::into_value(children, || {
-            ::core::default::Default::default()
-        });
+        let children = ErrorBoundaryPropsBuilder_Optional::into_value(children, VNode::empty);
         let handle_error = ErrorBoundaryPropsBuilder_Optional::into_value(handle_error, || {
             ErrorHandler(Rc::new(default_handler))
         });
@@ -445,23 +697,45 @@ impl<
         }
     }
 }
-/// Create a new error boundary component.
+
+/// Create a new error boundary component that catches any errors thrown from child components
 ///
 /// ## Details
 ///
-/// Error boundaries handle errors within a specific part of your application. Any errors passed in a child with [`Throw`] will be caught by the nearest error boundary.
+/// Error boundaries handle errors within a specific part of your application. Any errors passed up from a child will be caught by the nearest error boundary.
 ///
 /// ## Example
 ///
-/// ```rust
+/// ```rust, no_run
 /// # use dioxus::prelude::*;
-/// # fn ThrowsError() -> Element { unimplemented!() }
-/// rsx! {
-///     ErrorBoundary {
-///         handle_error: |error| rsx! { "Oops, we encountered an error. Please report {error} to the developer of this application" },
-///         ThrowsError {}
+/// fn App() -> Element {
+///     rsx! {
+///         ErrorBoundary {
+///             handle_error: |errors: ErrorContext| rsx! { "Oops, we encountered an error. Please report {errors:?} to the developer of this application" },
+///             Counter {
+///                 multiplier: "1234"
+///             }
+///         }
 ///     }
-/// };
+/// }
+///
+/// #[component]
+/// fn Counter(multiplier: String) -> Element {
+///     // You can bubble up errors with `?` inside components
+///     let multiplier_parsed = multiplier.parse::<usize>()?;
+///     let mut count = use_signal(|| multiplier_parsed);
+///     rsx! {
+///         button {
+///             // Or inside event handlers
+///             onclick: move |_| {
+///                 let multiplier_parsed = multiplier.parse::<usize>()?;
+///                 *count.write() *= multiplier_parsed;
+///                 Ok(())
+///             },
+///             "{count}x{multiplier}"
+///         }
+///     }
+/// }
 /// ```
 ///
 /// ## Usage
@@ -472,9 +746,9 @@ impl<
 #[allow(non_upper_case_globals, non_snake_case)]
 pub fn ErrorBoundary(props: ErrorBoundaryProps) -> Element {
     let error_boundary = use_error_boundary();
-    match error_boundary.take_error() {
-        Some(error) => (props.handle_error.0)(error),
-        None => Some({
+    let errors = error_boundary.errors();
+    if errors.is_empty() {
+        std::result::Result::Ok({
             static TEMPLATE: Template = Template {
                 name: "examples/error_handle.rs:81:17:2342",
                 roots: &[TemplateNode::Dynamic { id: 0usize }],
@@ -487,6 +761,8 @@ pub fn ErrorBoundary(props: ErrorBoundaryProps) -> Element {
                 Box::new([(props.children).into_dyn_node()]),
                 Default::default(),
             )
-        }),
+        })
+    } else {
+        (props.handle_error.0)(error_boundary.clone())
     }
 }

packages/core/src/events.rs

@@ -209,7 +209,7 @@ pub struct Callback<Args = (), Ret = ()> {
     /// fn Child(onclick: EventHandler<MouseEvent>) -> Element {
     ///     rsx!{
     ///         button {
-    ///             // Diffing Child will not rerun this component, it will just update the EventHandler in place so that if this callback is called, it will run the latest version of the callback
+    ///             // Diffing Child will not rerun this component, it will just update the callback in place so that if this callback is called, it will run the latest version of the callback
     ///             onclick: move |evt| onclick(evt),
     ///         }
     ///     }
@@ -270,10 +270,10 @@ impl<Ret> SpawnIfAsync<(), Ret> for Ret {
     }
 }
 
-// Support for FnMut -> async { anything } for the unit return type
+// Support for FnMut -> async { unit } for the unit return type
 #[doc(hidden)]
-pub struct AsyncMarker<O>(PhantomData<O>);
-impl<F: std::future::Future<Output = O> + 'static, O> SpawnIfAsync<AsyncMarker<O>, ()> for F {
+pub struct AsyncMarker;
+impl<F: std::future::Future<Output = ()> + 'static> SpawnIfAsync<AsyncMarker> for F {
     fn spawn(self) {
         crate::prelude::spawn(async move {
             self.await;
@@ -281,6 +281,34 @@ impl<F: std::future::Future<Output = O> + 'static, O> SpawnIfAsync<AsyncMarker<O
     }
 }
 
+// Support for FnMut -> async { Result(()) } for the unit return type
+#[doc(hidden)]
+pub struct AsyncResultMarker;
+
+impl<T> SpawnIfAsync<AsyncResultMarker> for T
+where
+    T: std::future::Future<Output = crate::Result<()>> + 'static,
+{
+    #[inline]
+    fn spawn(self) {
+        crate::prelude::spawn(async move {
+            if let Err(err) = self.await {
+                crate::prelude::throw_error(err)
+            }
+        });
+    }
+}
+
+// Support for FnMut -> Result(()) for the unit return type
+impl SpawnIfAsync<()> for crate::Result<()> {
+    #[inline]
+    fn spawn(self) {
+        if let Err(err) = self {
+            crate::prelude::throw_error(err)
+        }
+    }
+}
+
 // We can't directly forward the marker because it would overlap with a bunch of other impls, so we wrap it in another type instead
 #[doc(hidden)]
 pub struct MarkerWrapper<T>(PhantomData<T>);
@@ -299,6 +327,22 @@ impl<
     }
 }
 
+#[doc(hidden)]
+pub struct UnitClosure<Marker>(PhantomData<Marker>);
+
+// Closure can be created from FnMut -> async { () } or FnMut -> Ret
+impl<
+        Function: FnMut() -> Spawn + 'static,
+        Spawn: SpawnIfAsync<Marker, Ret> + 'static,
+        Ret: 'static,
+        Marker,
+    > SuperFrom<Function, UnitClosure<Marker>> for Callback<(), Ret>
+{
+    fn super_from(mut input: Function) -> Self {
+        Callback::new(move |()| input())
+    }
+}
+
 #[test]
 fn closure_types_infer() {
     #[allow(unused)]
@@ -315,6 +359,11 @@ fn closure_types_infer() {
         let callback: Callback<u32, ()> = Callback::new(|value: u32| async move {
             println!("{}", value);
         });
+
+        // Unit closures shouldn't require an argument
+        let callback: Callback<(), ()> = Callback::super_from(|| async move {
+            println!("hello world");
+        });
     }
 }
 
@@ -369,12 +418,12 @@ impl<Args: 'static, Ret: 'static> Callback<Args, Ret> {
     /// This borrows the callback using a RefCell. Recursively calling a callback will cause a panic.
     pub fn call(&self, arguments: Args) -> Ret {
         if let Some(callback) = self.callback.read().as_ref() {
-            Runtime::with(|rt| rt.scope_stack.borrow_mut().push(self.origin));
+            Runtime::with(|rt| rt.push_scope(self.origin));
             let value = {
                 let mut callback = callback.borrow_mut();
                 callback(arguments)
             };
-            Runtime::with(|rt| rt.scope_stack.borrow_mut().pop());
+            Runtime::with(|rt| rt.pop_scope());
             value
         } else {
             panic!("Callback was manually dropped")

packages/core/src/fragment.rs

@@ -33,7 +33,7 @@ pub fn Fragment(cx: FragmentProps) -> Element {
 }
 
 #[derive(Clone, PartialEq)]
-pub struct FragmentProps(Element);
+pub struct FragmentProps(pub(crate) Element);
 
 pub struct FragmentBuilder<const BUILT: bool>(Element);
 impl FragmentBuilder<false> {
@@ -66,7 +66,7 @@ impl<const A: bool> FragmentBuilder<A> {
 /// ```rust
 /// # use dioxus::prelude::*;
 /// fn app() -> Element {
-///     rsx!{
+///     rsx! {
 ///         CustomCard {
 ///             h1 {}
 ///             p {}
@@ -87,7 +87,7 @@ impl<const A: bool> FragmentBuilder<A> {
 impl Properties for FragmentProps {
     type Builder = FragmentBuilder<false>;
     fn builder() -> Self::Builder {
-        FragmentBuilder(None)
+        FragmentBuilder(VNode::empty())
     }
     fn memoize(&mut self, new: &Self) -> bool {
         let equal = self == new;

packages/core/src/global_context.rs

@@ -1,5 +1,5 @@
-use crate::{runtime::Runtime, Element, ScopeId, Task};
-use futures_util::Future;
+use crate::{innerlude::SuspendedFuture, runtime::Runtime, CapturedError, Element, ScopeId, Task};
+use std::future::Future;
 use std::sync::Arc;
 
 /// Get the current scope id
@@ -13,6 +13,29 @@ pub fn vdom_is_rendering() -> bool {
     Runtime::with(|rt| rt.rendering.get()).unwrap_or_default()
 }
 
+/// Throw a [`CapturedError`] into the current scope. The error will bubble up to the nearest [`crate::prelude::ErrorBoundary()`] or the root of the app.
+///
+/// # Examples
+/// ```rust, no_run
+/// # use dioxus::prelude::*;
+/// fn Component() -> Element {
+///     let request = spawn(async move {
+///         match reqwest::get("https://api.example.com").await {
+///             Ok(_) => todo!(),
+///             // You can explicitly throw an error into a scope with throw_error
+///             Err(err) => ScopeId::APP.throw_error(err)
+///         }
+///     });
+///
+///     todo!()
+/// }
+/// ```
+pub fn throw_error(error: impl Into<CapturedError> + 'static) {
+    current_scope_id()
+        .expect("to be in a dioxus runtime")
+        .throw_error(error)
+}
+
 /// Consume context from the current scope
 pub fn try_consume_context<T: 'static + Clone>() -> Option<T> {
     Runtime::with_current_scope(|cx| cx.consume_context::<T>()).flatten()
@@ -52,8 +75,9 @@ pub fn provide_root_context<T: 'static + Clone>(value: T) -> T {
 
 /// Suspended the current component on a specific task and then return None
 pub fn suspend(task: Task) -> Element {
-    Runtime::with_current_scope(|cx| cx.suspend(task));
-    None
+    Err(crate::innerlude::RenderError::Suspended(
+        SuspendedFuture::new(task),
+    ))
 }
 
 /// Start a new future on the same thread as the rest of the VirtualDom.
@@ -191,7 +215,7 @@ pub fn remove_future(id: Task) {
 ///
 /// # Example
 ///
-/// ```rust
+/// ```rust, no_run
 /// use dioxus::prelude::*;
 ///
 /// // prints a greeting on the initial render
@@ -202,7 +226,7 @@ pub fn remove_future(id: Task) {
 ///
 /// # Custom Hook Example
 ///
-/// ```rust
+/// ```rust, no_run
 /// use dioxus::prelude::*;
 ///
 /// pub struct InnerCustomState(usize);
@@ -377,21 +401,6 @@ pub fn after_render(f: impl FnMut() + 'static) {
     Runtime::with_current_scope(|cx| cx.push_after_render(f));
 }
 
-/// Wait for the next render to complete
-///
-/// This is useful if you've just triggered an update and want to wait for it to finish before proceeding with valid
-/// DOM nodes.
-///
-/// Effects rely on this to ensure that they only run effects after the DOM has been updated. Without wait_for_next_render effects
-/// are run immediately before diffing the DOM, which causes all sorts of out-of-sync weirdness.
-pub async fn wait_for_next_render() {
-    // Wait for the flush lock to be available
-    // We release it immediately, so it's impossible for the lock to be held longer than this function
-    Runtime::with(|rt| rt.render_signal.subscribe())
-        .unwrap()
-        .await;
-}
-
 /// Use a hook with a cleanup function
 pub fn use_hook_with_cleanup<T: Clone + 'static>(
     hook: impl FnOnce() -> T,

packages/core/src/lib.rs

@@ -16,12 +16,14 @@ mod mutations;
 mod nodes;
 mod properties;
 mod reactive_context;
-mod render_signal;
+mod render_error;
+mod root_wrapper;
 mod runtime;
 mod scheduler;
 mod scope_arena;
 mod scope_context;
 mod scopes;
+mod suspense;
 mod tasks;
 mod virtual_dom;
 
@@ -44,16 +46,18 @@ pub(crate) mod innerlude {
     pub use crate::nodes::*;
     pub use crate::properties::*;
     pub use crate::reactive_context::*;
+    pub use crate::render_error::*;
     pub use crate::runtime::{Runtime, RuntimeGuard};
     pub use crate::scheduler::*;
     pub use crate::scopes::*;
+    pub use crate::suspense::*;
     pub use crate::tasks::*;
     pub use crate::virtual_dom::*;
 
     /// An [`Element`] is a possibly-none [`VNode`] created by calling `render` on [`ScopeId`] or [`ScopeState`].
     ///
     /// An Errored [`Element`] will propagate the error to the nearest error boundary.
-    pub type Element = Option<VNode>;
+    pub type Element = std::result::Result<VNode, RenderError>;
 
     /// A [`Component`] is a function that takes [`Properties`] and returns an [`Element`].
     pub type Component<P = ()> = fn(P) -> Element;
@@ -63,9 +67,9 @@ pub use crate::innerlude::{
     fc_to_builder, generation, schedule_update, schedule_update_any, use_hook, vdom_is_rendering,
     AnyValue, Attribute, AttributeValue, CapturedError, Component, ComponentFunction, DynamicNode,
     Element, ElementId, Event, Fragment, HasAttributes, IntoDynNode, MarkerWrapper, Mutation,
-    Mutations, NoOpMutations, Properties, RenderReturn, Runtime, ScopeId, ScopeState, SpawnIfAsync,
-    Task, Template, TemplateAttribute, TemplateNode, VComponent, VNode, VNodeInner, VPlaceholder,
-    VText, VirtualDom, WriteMutations,
+    Mutations, NoOpMutations, Ok, Properties, RenderReturn, Result, Runtime, ScopeId, ScopeState,
+    SpawnIfAsync, Task, Template, TemplateAttribute, TemplateNode, VComponent, VNode, VNodeInner,
+    VPlaceholder, VText, VirtualDom, WriteMutations,
 };
 
 /// The purpose of this module is to alleviate imports of many common types
@@ -76,12 +80,14 @@ pub mod prelude {
         consume_context, consume_context_from_scope, current_owner, current_scope_id,
         fc_to_builder, generation, has_context, needs_update, needs_update_any, parent_scope,
         provide_context, provide_root_context, queue_effect, remove_future, schedule_update,
-        schedule_update_any, spawn, spawn_forever, spawn_isomorphic, suspend, try_consume_context,
-        use_after_render, use_before_render, use_drop, use_error_boundary, use_hook,
-        use_hook_with_cleanup, wait_for_next_render, with_owner, AnyValue, Attribute, Callback,
-        Component, ComponentFunction, Element, ErrorBoundary, Event, EventHandler, Fragment,
-        HasAttributes, IntoAttributeValue, IntoDynNode, OptionStringFromMarker, Properties,
-        ReactiveContext, Runtime, RuntimeGuard, ScopeId, ScopeState, SuperFrom, SuperInto, Task,
-        Template, TemplateAttribute, TemplateNode, Throw, VNode, VNodeInner, VirtualDom,
+        schedule_update_any, spawn, spawn_forever, spawn_isomorphic, suspend, throw_error,
+        try_consume_context, use_after_render, use_before_render, use_drop, use_error_boundary,
+        use_hook, use_hook_with_cleanup, with_owner, AnyValue, Attribute, Callback, CapturedError,
+        Component, ComponentFunction, Context, Element, ErrorBoundary, ErrorContext, Event,
+        EventHandler, Fragment, HasAttributes, IntoAttributeValue, IntoDynNode,
+        OptionStringFromMarker, Properties, ReactiveContext, RenderError, Runtime, RuntimeGuard,
+        ScopeId, ScopeState, SuperFrom, SuperInto, SuspendedFuture, SuspenseBoundary,
+        SuspenseBoundaryProps, SuspenseContext, SuspenseExtension, Task, Template,
+        TemplateAttribute, TemplateNode, VNode, VNodeInner, VirtualDom,
     };
 }

packages/core/src/nodes.rs

@@ -1,13 +1,13 @@
-use crate::innerlude::VProps;
+use crate::innerlude::{RenderError, VProps};
 use crate::{any_props::BoxedAnyProps, innerlude::ScopeState};
 use crate::{arena::ElementId, Element, Event};
 use crate::{
     innerlude::{ElementRef, EventHandler, MountId},
     properties::ComponentFunction,
 };
-use crate::{Properties, VirtualDom};
+use crate::{Properties, ScopeId, VirtualDom};
 use core::panic;
-use std::ops::Deref;
+use std::ops::{Deref, DerefMut};
 use std::rc::Rc;
 use std::vec;
 use std::{
@@ -21,28 +21,49 @@ pub type TemplateId = &'static str;
 /// The actual state of the component's most recent computation
 ///
 /// If the component returned early (e.g. `return None`), this will be Aborted(None)
-pub enum RenderReturn {
-    /// A currently-available element
-    Ready(VNode),
+#[derive(Debug)]
+pub struct RenderReturn {
+    /// The node that was rendered
+    pub(crate) node: Element,
+}
 
-    /// The component aborted rendering early. It might've thrown an error.
-    ///
-    /// In its place we've produced a placeholder to locate its spot in the dom when it recovers.
-    Aborted(VNode),
+impl From<RenderReturn> for VNode {
+    fn from(val: RenderReturn) -> Self {
+        match val.node {
+            Ok(node) => node,
+            Err(RenderError::Aborted(e)) => e.render,
+            Err(RenderError::Suspended(fut)) => fut.placeholder,
+        }
+    }
+}
+
+impl From<Element> for RenderReturn {
+    fn from(node: Element) -> Self {
+        RenderReturn { node }
+    }
 }
 
 impl Clone for RenderReturn {
     fn clone(&self) -> Self {
-        match self {
-            RenderReturn::Ready(node) => RenderReturn::Ready(node.clone_mounted()),
-            RenderReturn::Aborted(node) => RenderReturn::Aborted(node.clone_mounted()),
+        match &self.node {
+            Ok(node) => RenderReturn {
+                node: Ok(node.clone_mounted()),
+            },
+            Err(RenderError::Aborted(err)) => RenderReturn {
+                node: Err(RenderError::Aborted(err.clone_mounted())),
+            },
+            Err(RenderError::Suspended(fut)) => RenderReturn {
+                node: Err(RenderError::Suspended(fut.clone_mounted())),
+            },
         }
     }
 }
 
 impl Default for RenderReturn {
     fn default() -> Self {
-        RenderReturn::Aborted(VNode::placeholder())
+        RenderReturn {
+            node: Ok(VNode::placeholder()),
+        }
     }
 }
 
@@ -50,8 +71,20 @@ impl Deref for RenderReturn {
     type Target = VNode;
 
     fn deref(&self) -> &Self::Target {
-        match self {
-            RenderReturn::Ready(node) | RenderReturn::Aborted(node) => node,
+        match &self.node {
+            Ok(node) => node,
+            Err(RenderError::Aborted(err)) => &err.render,
+            Err(RenderError::Suspended(fut)) => &fut.placeholder,
+        }
+    }
+}
+
+impl DerefMut for RenderReturn {
+    fn deref_mut(&mut self) -> &mut Self::Target {
+        match &mut self.node {
+            Ok(node) => node,
+            Err(RenderError::Aborted(err)) => &mut err.render,
+            Err(RenderError::Suspended(fut)) => &mut fut.placeholder,
         }
     }
 }
@@ -149,6 +182,12 @@ impl Clone for VNode {
     }
 }
 
+impl Default for VNode {
+    fn default() -> Self {
+        Self::placeholder()
+    }
+}
+
 impl Drop for VNode {
     fn drop(&mut self) {
         // FIXME:
@@ -197,31 +236,7 @@ impl VNode {
 
     /// Create a template with no nodes that will be skipped over during diffing
     pub fn empty() -> Element {
-        use std::cell::OnceCell;
-        // We can reuse all placeholders across the same thread to save memory
-        thread_local! {
-            static EMPTY_VNODE: OnceCell<Rc<VNodeInner>> = const { OnceCell::new() };
-        }
-        let vnode = EMPTY_VNODE.with(|cell| {
-            cell.get_or_init(move || {
-                Rc::new(VNodeInner {
-                    key: None,
-                    dynamic_nodes: Box::new([]),
-                    dynamic_attrs: Box::new([]),
-                    template: Cell::new(Template {
-                        name: "packages/core/nodes.rs:180:0:0",
-                        roots: &[],
-                        node_paths: &[],
-                        attr_paths: &[],
-                    }),
-                })
-            })
-            .clone()
-        });
-        Some(Self {
-            vnode,
-            mount: Default::default(),
-        })
+        Ok(Self::default())
     }
 
     /// Create a template with a single placeholder node
@@ -240,7 +255,7 @@ impl VNode {
                     template: Cell::new(Template {
                         name: "packages/core/nodes.rs:198:0:0",
                         roots: &[TemplateNode::Dynamic { id: 0 }],
-                        node_paths: &[&[]],
+                        node_paths: &[&[0]],
                         attr_paths: &[],
                     }),
                 })
@@ -275,12 +290,9 @@ impl VNode {
     ///
     /// Returns [`None`] if the root is actually a static node (Element/Text)
     pub fn dynamic_root(&self, idx: usize) -> Option<&DynamicNode> {
-        match &self.template.get().roots[idx] {
-            TemplateNode::Element { .. } | TemplateNode::Text { text: _ } => None,
-            TemplateNode::Dynamic { id } | TemplateNode::DynamicText { id } => {
-                Some(&self.dynamic_nodes[*id])
-            }
-        }
+        self.template.get().roots[idx]
+            .dynamic_id()
+            .map(|id| &self.dynamic_nodes[id])
     }
 
     /// Get the mounted id for a dynamic node index
@@ -427,9 +439,14 @@ impl Template {
     /// 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 { .. }))
+        self.roots.iter().all(|root| matches!(root, Dynamic { .. }))
+    }
+
+    /// Get a unique id for this template. If the id between two templates are different, the contents of the template may be different.
+    pub fn id(&self) -> usize {
+        // We compare the template name by pointer so that the id is different after hot reloading even if the name is the same
+        let ptr: *const str = self.name;
+        ptr as *const () as usize
     }
 
     /// Iterate over the attribute paths in order along with the original indexes for each path
@@ -447,6 +464,20 @@ impl Template {
             sort_bfo(self.attr_paths).into_iter()
         }
     }
+
+    /// Iterate over the node paths in order along with the original indexes for each path
+    pub(crate) fn breadth_first_node_paths(&self) -> impl Iterator<Item = (usize, &'static [u8])> {
+        // In release mode, hot reloading is disabled and everything is in breadth first order already
+        #[cfg(not(debug_assertions))]
+        {
+            self.node_paths.iter().copied().enumerate()
+        }
+        // If we are in debug mode, hot reloading may have messed up the order of the paths. We need to sort them
+        #[cfg(debug_assertions)]
+        {
+            sort_bfo(self.node_paths).into_iter()
+        }
+    }
 }
 
 /// A statically known node in a layout.
@@ -500,14 +531,6 @@ pub enum TemplateNode {
         /// The index of the dynamic node in the VNode's dynamic_nodes list
         id: usize,
     },
-
-    /// This template node is known to be some text, but needs to be created at runtime
-    ///
-    /// This is separate from the pure Dynamic variant for various optimizations
-    DynamicText {
-        /// The index of the dynamic node in the VNode's dynamic_nodes list
-        id: usize,
-    },
 }
 
 impl TemplateNode {
@@ -515,7 +538,7 @@ impl TemplateNode {
     pub fn dynamic_id(&self) -> Option<usize> {
         use TemplateNode::*;
         match self {
-            Dynamic { id } | DynamicText { id } => Some(*id),
+            Dynamic { id } => Some(*id),
             _ => None,
         }
     }
@@ -575,9 +598,20 @@ pub struct VComponent {
     /// It is possible that components get folded at compile time, so these shouldn't be really used as a key
     pub(crate) render_fn: TypeId,
 
+    /// The props for this component
     pub(crate) props: BoxedAnyProps,
 }
 
+impl Clone for VComponent {
+    fn clone(&self) -> Self {
+        Self {
+            name: self.name,
+            render_fn: self.render_fn,
+            props: self.props.duplicate(),
+        }
+    }
+}
+
 impl VComponent {
     /// Create a new [`VComponent`] variant
     pub fn new<P, M: 'static>(
@@ -603,6 +637,24 @@ impl VComponent {
         }
     }
 
+    /// Get the [`ScopeId`] this node is mounted to if it's mounted
+    ///
+    /// This is useful for rendering nodes outside of the VirtualDom, such as in SSR
+    ///
+    /// Returns [`None`] if the node is not mounted
+    pub fn mounted_scope_id(
+        &self,
+        dynamic_node_index: usize,
+        vnode: &VNode,
+        dom: &VirtualDom,
+    ) -> Option<ScopeId> {
+        let mount = vnode.mount.get().as_usize()?;
+
+        let scope_id = dom.mounts.get(mount)?.mounted_dynamic_nodes[dynamic_node_index];
+
+        Some(ScopeId(scope_id))
+    }
+
     /// Get the scope this node is mounted to if it's mounted
     ///
     /// This is useful for rendering nodes outside of the VirtualDom, such as in SSR
@@ -844,9 +896,7 @@ impl<T: Any + PartialEq + 'static> AnyValue for T {
 
 /// A trait that allows various items to be converted into a dynamic node for the rsx macro
 pub trait IntoDynNode<A = ()> {
-    /// Consume this item along with a scopestate and produce a DynamicNode
-    ///
-    /// You can use the bump alloactor of the scopestate to creat the dynamic node
+    /// Consume this item and produce a DynamicNode
     fn into_dyn_node(self) -> DynamicNode;
 }
 
@@ -860,13 +910,11 @@ impl IntoDynNode for VNode {
         DynamicNode::Fragment(vec![self])
     }
 }
-
 impl IntoDynNode for DynamicNode {
     fn into_dyn_node(self) -> DynamicNode {
         self
     }
 }
-
 impl<T: IntoDynNode> IntoDynNode for Option<T> {
     fn into_dyn_node(self) -> DynamicNode {
         match self {
@@ -875,8 +923,23 @@ impl<T: IntoDynNode> IntoDynNode for Option<T> {
         }
     }
 }
-
 impl IntoDynNode for &Element {
+    fn into_dyn_node(self) -> DynamicNode {
+        match self.as_ref() {
+            Ok(val) => val.into_dyn_node(),
+            _ => DynamicNode::default(),
+        }
+    }
+}
+impl IntoDynNode for Element {
+    fn into_dyn_node(self) -> DynamicNode {
+        match self {
+            Ok(val) => val.into_dyn_node(),
+            _ => DynamicNode::default(),
+        }
+    }
+}
+impl IntoDynNode for &Option<VNode> {
     fn into_dyn_node(self) -> DynamicNode {
         match self.as_ref() {
             Some(val) => val.clone().into_dyn_node(),
@@ -884,7 +947,6 @@ impl IntoDynNode for &Element {
         }
     }
 }
-
 impl IntoDynNode for &str {
     fn into_dyn_node(self) -> DynamicNode {
         DynamicNode::Text(VText {
@@ -892,13 +954,11 @@ impl IntoDynNode for &str {
         })
     }
 }
-
 impl IntoDynNode for String {
     fn into_dyn_node(self) -> DynamicNode {
         DynamicNode::Text(VText { value: self })
     }
 }
-
 impl IntoDynNode for Arguments<'_> {
     fn into_dyn_node(self) -> DynamicNode {
         DynamicNode::Text(VText {
@@ -906,7 +966,6 @@ impl IntoDynNode for Arguments<'_> {
         })
     }
 }
-
 impl IntoDynNode for &VNode {
     fn into_dyn_node(self) -> DynamicNode {
         DynamicNode::Fragment(vec![self.clone()])
@@ -929,12 +988,36 @@ impl IntoVNode for &VNode {
 impl IntoVNode for Element {
     fn into_vnode(self) -> VNode {
         match self {
-            Some(val) => val.into_vnode(),
+            Ok(val) => val.into_vnode(),
             _ => VNode::empty().unwrap(),
         }
     }
 }
 impl IntoVNode for &Element {
+    fn into_vnode(self) -> VNode {
+        match self {
+            Ok(val) => val.into_vnode(),
+            _ => VNode::empty().unwrap(),
+        }
+    }
+}
+impl IntoVNode for Option<VNode> {
+    fn into_vnode(self) -> VNode {
+        match self {
+            Some(val) => val.into_vnode(),
+            _ => VNode::empty().unwrap(),
+        }
+    }
+}
+impl IntoVNode for &Option<VNode> {
+    fn into_vnode(self) -> VNode {
+        match self.as_ref() {
+            Some(val) => val.clone().into_vnode(),
+            _ => VNode::empty().unwrap(),
+        }
+    }
+}
+impl IntoVNode for Option<Element> {
     fn into_vnode(self) -> VNode {
         match self {
             Some(val) => val.into_vnode(),
@@ -942,6 +1025,14 @@ impl IntoVNode for &Element {
         }
     }
 }
+impl IntoVNode for &Option<Element> {
+    fn into_vnode(self) -> VNode {
+        match self.as_ref() {
+            Some(val) => val.clone().into_vnode(),
+            _ => VNode::empty().unwrap(),
+        }
+    }
+}
 
 // Note that we're using the E as a generic but this is never crafted anyways.
 pub struct FromNodeIterator;

packages/core/src/render_error.rs

@@ -0,0 +1,52 @@
+use std::fmt::{Debug, Display};
+
+use crate::innerlude::*;
+
+/// An error that can occur while rendering a component
+#[derive(Clone, PartialEq, Debug)]
+pub enum RenderError {
+    /// The render function returned early
+    Aborted(CapturedError),
+
+    /// The component was suspended
+    Suspended(SuspendedFuture),
+}
+
+impl Default for RenderError {
+    fn default() -> Self {
+        struct RenderAbortedEarly;
+        impl Debug for RenderAbortedEarly {
+            fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+                f.write_str("Render aborted early")
+            }
+        }
+        impl Display for RenderAbortedEarly {
+            fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+                f.write_str("Render aborted early")
+            }
+        }
+        impl std::error::Error for RenderAbortedEarly {}
+        Self::Aborted(RenderAbortedEarly.into())
+    }
+}
+
+impl Display for RenderError {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        match self {
+            Self::Aborted(e) => write!(f, "Render aborted: {e}"),
+            Self::Suspended(e) => write!(f, "Component suspended: {e:?}"),
+        }
+    }
+}
+
+impl<E: std::error::Error + 'static> From<E> for RenderError {
+    fn from(e: E) -> Self {
+        Self::Aborted(CapturedError::from(e))
+    }
+}
+
+impl From<CapturedError> for RenderError {
+    fn from(e: CapturedError) -> Self {
+        RenderError::Aborted(e)
+    }
+}

packages/core/src/render_signal.rs

@@ -1,62 +0,0 @@
-//! TODO: We no longer run effects with async tasks. Effects are now their own type of task. We should remove this next breaking release.
-
-use std::cell::RefCell;
-use std::future::Future;
-use std::pin::Pin;
-use std::rc::Rc;
-use std::task::Context;
-use std::task::Poll;
-use std::task::Waker;
-
-/// A signal is a message that can be sent to all listening tasks at once
-#[derive(Default)]
-pub struct RenderSignal {
-    wakers: Rc<RefCell<Vec<Rc<RefCell<RenderSignalFutureInner>>>>>,
-}
-
-impl RenderSignal {
-    /// Send the signal to all listening tasks
-    pub fn send(&self) {
-        let mut wakers = self.wakers.borrow_mut();
-        for waker in wakers.drain(..) {
-            let mut inner = waker.borrow_mut();
-            inner.resolved = true;
-            if let Some(waker) = inner.waker.take() {
-                waker.wake();
-            }
-        }
-    }
-
-    /// Create a future that resolves when the signal is sent
-    pub fn subscribe(&self) -> RenderSignalFuture {
-        let inner = Rc::new(RefCell::new(RenderSignalFutureInner {
-            resolved: false,
-            waker: None,
-        }));
-        self.wakers.borrow_mut().push(inner.clone());
-        RenderSignalFuture { inner }
-    }
-}
-
-struct RenderSignalFutureInner {
-    resolved: bool,
-    waker: Option<Waker>,
-}
-
-pub(crate) struct RenderSignalFuture {
-    inner: Rc<RefCell<RenderSignalFutureInner>>,
-}
-
-impl Future for RenderSignalFuture {
-    type Output = ();
-
-    fn poll(self: Pin<&mut Self>, cx: &mut Context<'_>) -> Poll<()> {
-        let mut inner = self.inner.borrow_mut();
-        if inner.resolved {
-            Poll::Ready(())
-        } else {
-            inner.waker = Some(cx.waker().clone());
-            Poll::Pending
-        }
-    }
-}

packages/core/src/root_wrapper.rs

@@ -0,0 +1,41 @@
+use crate::{prelude::*, properties::RootProps, DynamicNode, VComponent};
+
+// We wrap the root scope in a component that renders it inside a default ErrorBoundary and SuspenseBoundary
+#[allow(non_snake_case)]
+#[allow(clippy::let_and_return)]
+pub(crate) fn RootScopeWrapper(props: RootProps<VComponent>) -> Element {
+    static TEMPLATE: Template = Template {
+        name: "root_wrapper.rs:16:5:561",
+        roots: &[TemplateNode::Dynamic { id: 0usize }],
+        node_paths: &[&[0u8]],
+        attr_paths: &[],
+    };
+    Element::Ok(VNode::new(
+        None,
+        TEMPLATE,
+        Box::new([DynamicNode::Component(
+            fc_to_builder(ErrorBoundary)
+                .children(Element::Ok(VNode::new(
+                    None,
+                    TEMPLATE,
+                    Box::new([DynamicNode::Component({
+                        #[allow(unused_imports)]
+                        fc_to_builder(SuspenseBoundary)
+                            .fallback(|_| Element::Ok(VNode::placeholder()))
+                            .children(Ok(VNode::new(
+                                None,
+                                TEMPLATE,
+                                Box::new([DynamicNode::Component(props.0)]),
+                                Box::new([]),
+                            )))
+                            .build()
+                            .into_vcomponent(SuspenseBoundary, "SuspenseBoundary")
+                    })]),
+                    Box::new([]),
+                )))
+                .build()
+                .into_vcomponent(ErrorBoundary, "ErrorBoundary"),
+        )]),
+        Box::new([]),
+    ))
+}

packages/core/src/runtime.rs

@@ -1,13 +1,12 @@
-use slotmap::DefaultKey;
-
-use crate::innerlude::Effect;
+use crate::innerlude::{DirtyTasks, Effect};
+use crate::scope_context::SuspenseLocation;
 use crate::{
     innerlude::{LocalTask, SchedulerMsg},
-    render_signal::RenderSignal,
     scope_context::Scope,
     scopes::ScopeId,
     Task,
 };
+use slotmap::DefaultKey;
 use std::collections::BTreeSet;
 use std::{
     cell::{Cell, Ref, RefCell},
@@ -25,6 +24,9 @@ pub struct Runtime {
     // We use this to track the current scope
     pub(crate) scope_stack: RefCell<Vec<ScopeId>>,
 
+    // We use this to track the current suspense location. Generally this lines up with the scope stack, but it may be different for children of a suspense boundary
+    pub(crate) suspense_stack: RefCell<Vec<SuspenseLocation>>,
+
     // We use this to track the current task
     pub(crate) current_task: Cell<Option<Task>>,
 
@@ -38,25 +40,26 @@ pub struct Runtime {
 
     pub(crate) sender: futures_channel::mpsc::UnboundedSender<SchedulerMsg>,
 
-    // Synchronous tasks need to be run after the next render. The virtual dom stores a list of those tasks to send a signal to them when the next render is done.
-    pub(crate) render_signal: RenderSignal,
-
     // The effects that need to be run after the next render
     pub(crate) pending_effects: RefCell<BTreeSet<Effect>>,
+
+    // Tasks that are waiting to be polled
+    pub(crate) dirty_tasks: RefCell<BTreeSet<DirtyTasks>>,
 }
 
 impl Runtime {
     pub(crate) fn new(sender: futures_channel::mpsc::UnboundedSender<SchedulerMsg>) -> Rc<Self> {
         Rc::new(Self {
             sender,
-            render_signal: RenderSignal::default(),
             rendering: Cell::new(true),
             scope_states: Default::default(),
             scope_stack: Default::default(),
+            suspense_stack: Default::default(),
             current_task: Default::default(),
             tasks: Default::default(),
             suspended_tasks: Default::default(),
             pending_effects: Default::default(),
+            dirty_tasks: Default::default(),
         })
     }
 
@@ -111,15 +114,34 @@ impl Runtime {
     /// Useful in a limited number of scenarios
     pub fn on_scope<O>(&self, id: ScopeId, f: impl FnOnce() -> O) -> O {
         {
-            self.scope_stack.borrow_mut().push(id);
+            self.push_scope(id);
         }
         let o = f();
         {
-            self.scope_stack.borrow_mut().pop();
+            self.pop_scope();
         }
         o
     }
 
+    /// Push a scope onto the stack
+    pub(crate) fn push_scope(&self, scope: ScopeId) {
+        let suspense_location = self
+            .scope_states
+            .borrow()
+            .get(scope.0)
+            .and_then(|s| s.as_ref())
+            .map(|s| s.suspense_boundary())
+            .unwrap_or_default();
+        self.suspense_stack.borrow_mut().push(suspense_location);
+        self.scope_stack.borrow_mut().push(scope);
+    }
+
+    /// Pop a scope off the stack
+    pub(crate) fn pop_scope(&self) {
+        self.scope_stack.borrow_mut().pop();
+        self.suspense_stack.borrow_mut().pop();
+    }
+
     /// Get the state for any scope given its ID
     ///
     /// This is useful for inserting or removing contexts from a scope, or rendering out its root node
@@ -167,9 +189,18 @@ impl Runtime {
                 .unbounded_send(SchedulerMsg::EffectQueued)
                 .expect("Scheduler should exist");
         }
+    }
 
-        // And send the render signal
-        self.render_signal.send();
+    /// Check if we should render a scope
+    pub(crate) fn scope_should_render(&self, scope_id: ScopeId) -> bool {
+        // If there are no suspended futures, we know the scope is not  and we can skip context checks
+        if self.suspended_tasks.get() == 0 {
+            return true;
+        }
+        // If this is not a suspended scope, and we are under a frozen context, then we should
+        let scopes = self.scope_states.borrow();
+        let scope = &scopes[scope_id.0].as_ref().unwrap();
+        !matches!(scope.suspense_boundary(), SuspenseLocation::UnderSuspense(suspense) if suspense.suspended())
     }
 }
 

packages/core/src/scheduler.rs

@@ -124,12 +124,13 @@ impl Hash for ScopeOrder {
 impl VirtualDom {
     /// Queue a task to be polled
     pub(crate) fn queue_task(&mut self, task: Task, order: ScopeOrder) {
-        match self.dirty_tasks.get(&order) {
+        let mut dirty_tasks = self.runtime.dirty_tasks.borrow_mut();
+        match dirty_tasks.get(&order) {
             Some(scope) => scope.queue_task(task),
             None => {
                 let scope = DirtyTasks::from(order);
                 scope.queue_task(task);
-                self.dirty_tasks.insert(scope);
+                dirty_tasks.insert(scope);
             }
         }
     }
@@ -144,15 +145,23 @@ impl VirtualDom {
         !self.dirty_scopes.is_empty()
     }
 
-    /// Take any tasks from the highest scope
-    pub(crate) fn pop_task(&mut self) -> Option<DirtyTasks> {
-        let mut task = self.dirty_tasks.pop_first()?;
+    /// Take the top task from the highest scope
+    pub(crate) fn pop_task(&mut self) -> Option<Task> {
+        let mut dirty_tasks = self.runtime.dirty_tasks.borrow_mut();
+        let mut tasks = dirty_tasks.first()?;
 
         // If the scope doesn't exist for whatever reason, then we should skip it
-        while !self.scopes.contains(task.order.id.0) {
-            task = self.dirty_tasks.pop_first()?;
+        while !self.scopes.contains(tasks.order.id.0) {
+            dirty_tasks.pop_first();
+            tasks = dirty_tasks.first()?;
         }
 
+        let mut tasks = tasks.tasks_queued.borrow_mut();
+        let task = tasks.pop_front()?;
+        if tasks.is_empty() {
+            drop(tasks);
+            dirty_tasks.pop_first();
+        }
         Some(task)
     }
 
@@ -182,16 +191,21 @@ impl VirtualDom {
             }
         }
 
-        let mut dirty_task = self.dirty_tasks.first();
-        // Pop any invalid tasks off of each dirty scope;
-        while let Some(task) = dirty_task {
-            if !self.scopes.contains(task.order.id.0) {
-                self.dirty_tasks.pop_first();
-                dirty_task = self.dirty_tasks.first();
-            } else {
-                break;
+        // Find the height of the highest dirty scope
+        let dirty_task = {
+            let mut dirty_tasks = self.runtime.dirty_tasks.borrow_mut();
+            let mut dirty_task = dirty_tasks.first();
+            // Pop any invalid tasks off of each dirty scope;
+            while let Some(task) = dirty_task {
+                if task.tasks_queued.borrow().is_empty() || !self.scopes.contains(task.order.id.0) {
+                    dirty_tasks.pop_first();
+                    dirty_task = dirty_tasks.first()
+                } else {
+                    break;
+                }
             }
-        }
+            dirty_task.map(|task| task.order)
+        };
 
         match (dirty_scope, dirty_task) {
             (Some(scope), Some(task)) => {
@@ -199,57 +213,27 @@ impl VirtualDom {
                 match scope.cmp(tasks_order) {
                     std::cmp::Ordering::Less => {
                         let scope = self.dirty_scopes.pop_first().unwrap();
-                        Some(Work {
-                            scope,
-                            rerun_scope: true,
-                            tasks: Default::default(),
-                        })
+                        Some(Work::RerunScope(scope))
                     }
-                    std::cmp::Ordering::Greater => {
-                        let task = self.dirty_tasks.pop_first().unwrap();
-                        Some(Work {
-                            scope: task.order,
-                            rerun_scope: false,
-                            tasks: task.tasks_queued.into_inner(),
-                        })
-                    }
-                    std::cmp::Ordering::Equal => {
-                        let scope = self.dirty_scopes.pop_first().unwrap();
-                        let task = self.dirty_tasks.pop_first().unwrap();
-                        Some(Work {
-                            scope,
-                            rerun_scope: true,
-                            tasks: task.tasks_queued.into_inner(),
-                        })
+                    std::cmp::Ordering::Equal | std::cmp::Ordering::Greater => {
+                        Some(Work::PollTask(self.pop_task().unwrap()))
                     }
                 }
             }
             (Some(_), None) => {
                 let scope = self.dirty_scopes.pop_first().unwrap();
-                Some(Work {
-                    scope,
-                    rerun_scope: true,
-                    tasks: Default::default(),
-                })
-            }
-            (None, Some(_)) => {
-                let task = self.dirty_tasks.pop_first().unwrap();
-                Some(Work {
-                    scope: task.order,
-                    rerun_scope: false,
-                    tasks: task.tasks_queued.into_inner(),
-                })
+                Some(Work::RerunScope(scope))
             }
+            (None, Some(_)) => Some(Work::PollTask(self.pop_task().unwrap())),
             (None, None) => None,
         }
     }
 }
 
 #[derive(Debug)]
-pub struct Work {
-    pub scope: ScopeOrder,
-    pub rerun_scope: bool,
-    pub tasks: VecDeque<Task>,
+pub enum Work {
+    RerunScope(ScopeOrder),
+    PollTask(Task),
 }
 
 #[derive(Debug, Clone, Eq)]
@@ -269,7 +253,16 @@ impl From<ScopeOrder> for DirtyTasks {
 
 impl DirtyTasks {
     pub fn queue_task(&self, task: Task) {
-        self.tasks_queued.borrow_mut().push_back(task);
+        let mut borrow_mut = self.tasks_queued.borrow_mut();
+        // If the task is already queued, we don't need to do anything
+        if borrow_mut.contains(&task) {
+            return;
+        }
+        borrow_mut.push_back(task);
+    }
+
+    pub(crate) fn remove(&self, id: Task) {
+        self.tasks_queued.borrow_mut().retain(|task| *task != id);
     }
 }
 

packages/core/src/scope_arena.rs

@@ -1,26 +1,38 @@
-use crate::innerlude::ScopeOrder;
-use crate::reactive_context::ReactiveContext;
+use crate::innerlude::{throw_error, RenderError, RenderReturn, ScopeOrder};
+use crate::prelude::ReactiveContext;
+use crate::scope_context::SuspenseLocation;
 use crate::{
     any_props::{AnyProps, BoxedAnyProps},
     innerlude::ScopeState,
-    nodes::RenderReturn,
     scope_context::Scope,
     scopes::ScopeId,
     virtual_dom::VirtualDom,
 };
+use crate::{Element, VNode};
 
 impl VirtualDom {
-    pub(super) fn new_scope(&mut self, props: BoxedAnyProps, name: &'static str) -> &ScopeState {
+    pub(super) fn new_scope(
+        &mut self,
+        props: BoxedAnyProps,
+        name: &'static str,
+    ) -> &mut ScopeState {
         let parent_id = self.runtime.current_scope_id();
-        let height = parent_id
-            .and_then(|parent_id| self.runtime.get_state(parent_id).map(|f| f.height + 1))
-            .unwrap_or(0);
+        let height = match parent_id.and_then(|id| self.runtime.get_state(id)) {
+            Some(parent) => parent.height() + 1,
+            None => 0,
+        };
+        let suspense_boundary = self
+            .runtime
+            .suspense_stack
+            .borrow()
+            .last()
+            .cloned()
+            .unwrap_or(SuspenseLocation::NotSuspended);
         let entry = self.scopes.vacant_entry();
         let id = ScopeId(entry.key());
 
-        let scope_runtime = Scope::new(name, id, parent_id, height);
+        let scope_runtime = Scope::new(name, id, parent_id, height, suspense_boundary);
         let reactive_context = ReactiveContext::new_for_scope(&scope_runtime, &self.runtime);
-        self.runtime.create_scope(scope_runtime);
 
         let scope = entry.insert(ScopeState {
             runtime: self.runtime.clone(),
@@ -30,60 +42,104 @@ impl VirtualDom {
             reactive_context,
         });
 
+        self.runtime.create_scope(scope_runtime);
+        tracing::trace!("created scope {id:?} with parent {parent_id:?}");
+
         scope
     }
 
+    /// Run a scope and return the rendered nodes. This will not modify the DOM or update the last rendered node of the scope.
+    #[tracing::instrument(skip(self), level = "trace", name = "VirtualDom::run_scope")]
     pub(crate) fn run_scope(&mut self, scope_id: ScopeId) -> RenderReturn {
         debug_assert!(
             crate::Runtime::current().is_some(),
             "Must be in a dioxus runtime"
         );
+        self.runtime.push_scope(scope_id);
 
-        self.runtime.scope_stack.borrow_mut().push(scope_id);
         let scope = &self.scopes[scope_id.0];
-        let new_nodes = {
-            let context = scope.state();
+        let output = {
+            let scope_state = scope.state();
 
-            context.hook_index.set(0);
+            scope_state.hook_index.set(0);
 
             // Run all pre-render hooks
-            for pre_run in context.before_render.borrow_mut().iter_mut() {
+            for pre_run in scope_state.before_render.borrow_mut().iter_mut() {
                 pre_run();
             }
 
-            // safety: due to how we traverse the tree, we know that the scope is not currently aliased
             let props: &dyn AnyProps = &*scope.props;
 
             let span = tracing::trace_span!("render", scope = %scope.state().name);
-            span.in_scope(|| scope.reactive_context.reset_and_run_in(|| props.render()))
+            span.in_scope(|| {
+                scope.reactive_context.reset_and_run_in(|| {
+                    let mut render_return = props.render();
+                    self.handle_element_return(&mut render_return.node, scope_id, &scope.state());
+                    render_return
+                })
+            })
         };
 
-        let context = scope.state();
+        let scope_state = scope.state();
 
         // Run all post-render hooks
-        for post_run in context.after_render.borrow_mut().iter_mut() {
+        for post_run in scope_state.after_render.borrow_mut().iter_mut() {
             post_run();
         }
 
-        // And move the render generation forward by one
-        context.render_count.set(context.render_count.get() + 1);
-
         // remove this scope from dirty scopes
         self.dirty_scopes
-            .remove(&ScopeOrder::new(context.height, scope_id));
-
-        if let Some(task) = context.last_suspendable_task.take() {
-            if matches!(new_nodes, RenderReturn::Aborted(_)) {
-                tracing::trace!("Suspending {:?} on {:?}", scope_id, task);
-                self.runtime.tasks.borrow().get(task.0).unwrap().suspend();
-                self.runtime
-                    .suspended_tasks
-                    .set(self.runtime.suspended_tasks.get() + 1);
-            }
-        }
+            .remove(&ScopeOrder::new(scope_state.height, scope_id));
 
-        self.runtime.scope_stack.borrow_mut().pop();
+        self.runtime.pop_scope();
 
-        new_nodes
+        output
+    }
+
+    /// Insert any errors, or suspended tasks from an element return into the runtime
+    fn handle_element_return(&self, node: &mut Element, scope_id: ScopeId, scope_state: &Scope) {
+        match node {
+            Err(RenderError::Aborted(e)) => {
+                tracing::error!(
+                    "Error while rendering component `{}`: {e:?}",
+                    scope_state.name
+                );
+                throw_error(e.clone_mounted());
+                e.render = VNode::placeholder();
+            }
+            Err(RenderError::Suspended(e)) => {
+                let task = e.task();
+                // Insert the task into the nearest suspense boundary if it exists
+                let boundary = self
+                    .runtime
+                    .get_state(scope_id)
+                    .unwrap()
+                    .suspense_boundary();
+                let already_suspended = self
+                    .runtime
+                    .tasks
+                    .borrow()
+                    .get(task.id)
+                    .expect("Suspended on a task that no longer exists")
+                    .suspend(boundary.clone());
+                if !already_suspended {
+                    tracing::trace!("Suspending {:?} on {:?}", scope_id, task);
+                    // Add this task to the suspended tasks list of the boundary
+                    if let SuspenseLocation::UnderSuspense(boundary) = &boundary {
+                        boundary.add_suspended_task(e.clone());
+                    }
+                    self.runtime
+                        .suspended_tasks
+                        .set(self.runtime.suspended_tasks.get() + 1);
+                }
+                e.placeholder = VNode::placeholder();
+            }
+            Ok(_) => {
+                // If the render was successful, we can move the render generation forward by one
+                scope_state
+                    .render_count
+                    .set(scope_state.render_count.get() + 1);
+            }
+        }
     }
 }

packages/core/src/scope_context.rs

@@ -1,4 +1,8 @@
-use crate::{innerlude::SchedulerMsg, Element, Runtime, ScopeId, Task};
+use crate::{innerlude::SchedulerMsg, Runtime, ScopeId, Task};
+use crate::{
+    innerlude::{throw_into, CapturedError},
+    prelude::SuspenseContext,
+};
 use generational_box::{AnyStorage, Owner};
 use rustc_hash::FxHashSet;
 use std::{
@@ -8,6 +12,32 @@ use std::{
     sync::Arc,
 };
 
+pub(crate) enum ScopeStatus {
+    Mounted,
+    Unmounted {
+        // Before the component is mounted, we need to keep track of effects that need to be run once the scope is mounted
+        effects_queued: Vec<Box<dyn FnOnce() + 'static>>,
+    },
+}
+
+#[derive(Debug, Clone, Default)]
+pub(crate) enum SuspenseLocation {
+    #[default]
+    NotSuspended,
+    InSuspensePlaceholder(SuspenseContext),
+    UnderSuspense(SuspenseContext),
+}
+
+impl SuspenseLocation {
+    pub(crate) fn suspense_context(&self) -> Option<&SuspenseContext> {
+        match self {
+            SuspenseLocation::InSuspensePlaceholder(context) => Some(context),
+            SuspenseLocation::UnderSuspense(context) => Some(context),
+            _ => None,
+        }
+    }
+}
+
 /// A component's state separate from its props.
 ///
 /// This struct exists to provide a common interface for all scopes without relying on generics.
@@ -23,10 +53,13 @@ pub(crate) struct Scope {
     pub(crate) hook_index: Cell<usize>,
     pub(crate) shared_contexts: RefCell<Vec<Box<dyn Any>>>,
     pub(crate) spawned_tasks: RefCell<FxHashSet<Task>>,
-    /// The task that was last spawned that may suspend. We use this task to check what task to suspend in the event of an early None return from a component
-    pub(crate) last_suspendable_task: Cell<Option<Task>>,
     pub(crate) before_render: RefCell<Vec<Box<dyn FnMut()>>>,
     pub(crate) after_render: RefCell<Vec<Box<dyn FnMut()>>>,
+
+    /// The suspense boundary that this scope is currently in (if any)
+    suspense_boundary: SuspenseLocation,
+
+    pub(crate) status: RefCell<ScopeStatus>,
 }
 
 impl Scope {
@@ -35,6 +68,7 @@ impl Scope {
         id: ScopeId,
         parent_id: Option<ScopeId>,
         height: u32,
+        suspense_boundary: SuspenseLocation,
     ) -> Self {
         Self {
             name,
@@ -44,11 +78,14 @@ impl Scope {
             render_count: Cell::new(0),
             shared_contexts: RefCell::new(vec![]),
             spawned_tasks: RefCell::new(FxHashSet::default()),
-            last_suspendable_task: Cell::new(None),
             hooks: RefCell::new(vec![]),
             hook_index: Cell::new(0),
             before_render: RefCell::new(vec![]),
             after_render: RefCell::new(vec![]),
+            status: RefCell::new(ScopeStatus::Unmounted {
+                effects_queued: Vec::new(),
+            }),
+            suspense_boundary,
         }
     }
 
@@ -60,6 +97,30 @@ impl Scope {
         Runtime::with(|rt| rt.sender.clone()).unwrap()
     }
 
+    /// Mount the scope and queue any pending effects if it is not already mounted
+    pub(crate) fn mount(&self, runtime: &Runtime) {
+        let mut status = self.status.borrow_mut();
+        if let ScopeStatus::Unmounted { effects_queued } = &mut *status {
+            for f in effects_queued.drain(..) {
+                runtime.queue_effect_on_mounted_scope(self.id, f);
+            }
+            *status = ScopeStatus::Mounted;
+        }
+    }
+
+    /// Get the suspense boundary this scope is currently in (if any)
+    pub(crate) fn suspense_boundary(&self) -> SuspenseLocation {
+        self.suspense_boundary.clone()
+    }
+
+    /// Check if a node should run during suspense
+    pub(crate) fn should_run_during_suspense(&self) -> bool {
+        matches!(
+            self.suspense_boundary,
+            SuspenseLocation::UnderSuspense(_) | SuspenseLocation::InSuspensePlaceholder(_)
+        )
+    }
+
     /// Mark this scope as dirty, and schedule a render for it.
     pub fn needs_update(&self) {
         self.needs_update_any(self.id)
@@ -129,18 +190,18 @@ impl Scope {
         let mut search_parent = self.parent_id;
         let cur_runtime = Runtime::with(|runtime| {
             while let Some(parent_id) = search_parent {
-                let parent = runtime.get_state(parent_id).unwrap();
+                let Some(parent) = runtime.get_state(parent_id) else {
+                    tracing::error!("Parent scope {:?} not found", parent_id);
+                    return None;
+                };
                 tracing::trace!(
                     "looking for context {} ({:?}) in {}",
                     std::any::type_name::<T>(),
                     std::any::TypeId::of::<T>(),
                     parent.name
                 );
-                if let Some(shared) = parent.shared_contexts.borrow().iter().find_map(|any| {
-                    tracing::trace!("found context {:?}", (**any).type_id());
-                    any.downcast_ref::<T>()
-                }) {
-                    return Some(shared.clone());
+                if let Some(shared) = parent.has_context() {
+                    return Some(shared);
                 }
                 search_parent = parent.parent_id;
             }
@@ -286,12 +347,6 @@ impl Scope {
         Runtime::with(|rt| rt.queue_effect(self.id, f)).expect("Runtime to exist");
     }
 
-    /// Mark this component as suspended on a specific task and then return None
-    pub fn suspend(&self, task: Task) -> Option<Element> {
-        self.last_suspendable_task.set(Some(task));
-        None
-    }
-
     /// Store a value between renders. The foundational hook for all other hooks.
     ///
     /// Accepts an `initializer` closure, which is run on the first use of the hook (typically the initial render).
@@ -413,14 +468,6 @@ impl ScopeId {
             .expect("to be in a dioxus runtime")
     }
 
-    /// Suspended a component on a specific task and then return None
-    pub fn suspend(self, task: Task) -> Option<Element> {
-        Runtime::with_scope(self, |cx| {
-            cx.suspend(task);
-        });
-        None
-    }
-
     /// Pushes the future onto the poll queue to be polled after the component renders.
     pub fn push_future(self, fut: impl Future<Output = ()> + 'static) -> Option<Task> {
         Runtime::with_scope(self, |cx| cx.spawn(fut))
@@ -466,4 +513,25 @@ impl ScopeId {
             .expect("to be in a dioxus runtime")
             .on_scope(self, f)
     }
+
+    /// Throw a [`CapturedError`] into a scope. The error will bubble up to the nearest [`ErrorBoundary`] or the root of the app.
+    ///
+    /// # Examples
+    /// ```rust, no_run
+    /// # use dioxus::prelude::*;
+    /// fn Component() -> Element {
+    ///     let request = spawn(async move {
+    ///         match reqwest::get("https://api.example.com").await {
+    ///             Ok(_) => todo!(),
+    ///             // You can explicitly throw an error into a scope with throw_error
+    ///             Err(err) => ScopeId::APP.throw_error(err)
+    ///         }
+    ///     });
+    ///
+    ///     todo!()
+    /// }
+    /// ```
+    pub fn throw_error(self, error: impl Into<CapturedError> + 'static) {
+        throw_into(error, self)
+    }
 }

packages/core/src/scopes.rs

@@ -1,6 +1,6 @@
 use crate::{
     any_props::BoxedAnyProps, nodes::RenderReturn, reactive_context::ReactiveContext,
-    runtime::Runtime, scope_context::Scope,
+    scope_context::Scope, Runtime, VNode,
 };
 use std::{cell::Ref, rc::Rc};
 
@@ -32,7 +32,7 @@ impl std::fmt::Debug for ScopeId {
 }
 
 impl ScopeId {
-    /// The root ScopeId.
+    /// The ScopeId of the main scope passed into [`VirtualDom::new`].
     ///
     /// This scope will last for the entire duration of your app, making it convenient for long-lived state
     /// that is created dynamically somewhere down the component tree.
@@ -41,9 +41,24 @@ impl ScopeId {
     ///
     /// ```rust, no_run
     /// use dioxus::prelude::*;
-    /// let my_persistent_state = Signal::new_in_scope(String::new(), ScopeId::ROOT);
+    /// let my_persistent_state = Signal::new_in_scope(String::new(), ScopeId::APP);
     /// ```
+    // ScopeId(0) is the root scope wrapper
+    // ScopeId(1) is the default error boundary
+    // ScopeId(2) is the default suspense boundary
+    // ScopeId(3) is the users root scope
+    pub const APP: ScopeId = ScopeId(3);
+
+    /// The ScopeId of the topmost scope in the tree.
+    /// This will be higher up in the tree than [`ScopeId::APP`] because dioxus inserts a default [`SuspenseBoundary`] and [`ErrorBoundary`] at the root of the tree.
+    // ScopeId(0) is the root scope wrapper
     pub const ROOT: ScopeId = ScopeId(0);
+
+    pub(crate) const PLACEHOLDER: ScopeId = ScopeId(usize::MAX);
+
+    pub(crate) fn is_placeholder(&self) -> bool {
+        *self == Self::PLACEHOLDER
+    }
 }
 
 /// A component's rendered state.
@@ -52,6 +67,8 @@ impl ScopeId {
 pub struct ScopeState {
     pub(crate) runtime: Rc<Runtime>,
     pub(crate) context_id: ScopeId,
+    /// The last node that has been rendered for this component. This node may not ben mounted
+    /// During suspense, this component can be rendered in the background multiple times
     pub(crate) last_rendered_node: Option<RenderReturn>,
     pub(crate) props: BoxedAnyProps,
     pub(crate) reactive_context: ReactiveContext,
@@ -69,7 +86,7 @@ impl ScopeState {
     /// This is useful for traversing the tree outside of the VirtualDom, such as in a custom renderer or in SSR.
     ///
     /// Panics if the tree has not been built yet.
-    pub fn root_node(&self) -> &RenderReturn {
+    pub fn root_node(&self) -> &VNode {
         self.try_root_node()
             .expect("The tree has not been built yet. Make sure to call rebuild on the tree before accessing its nodes.")
     }
@@ -79,8 +96,13 @@ impl ScopeState {
     /// This is useful for traversing the tree outside of the VirtualDom, such as in a custom renderer or in SSR.
     ///
     /// Returns [`None`] if the tree has not been built yet.
-    pub fn try_root_node(&self) -> Option<&RenderReturn> {
-        self.last_rendered_node.as_ref()
+    pub fn try_root_node(&self) -> Option<&VNode> {
+        self.last_rendered_node.as_deref()
+    }
+
+    /// Returns the scope id of this [`ScopeState`].
+    pub fn id(&self) -> ScopeId {
+        self.context_id
     }
 
     pub(crate) fn state(&self) -> Ref<'_, Scope> {

packages/core/src/suspense/component.rs

@@ -0,0 +1,607 @@
+use crate::innerlude::*;
+
+/// Properties for the [`SuspenseBoundary()`] component.
+#[allow(non_camel_case_types)]
+pub struct SuspenseBoundaryProps {
+    fallback: Callback<SuspenseContext, Element>,
+    /// The children of the suspense boundary
+    children: Element,
+    /// THe nodes that are suspended under this boundary
+    pub suspended_nodes: Option<VNode>,
+}
+
+impl Clone for SuspenseBoundaryProps {
+    fn clone(&self) -> Self {
+        Self {
+            fallback: self.fallback,
+            children: self.children.clone(),
+            suspended_nodes: self
+                .suspended_nodes
+                .as_ref()
+                .map(|node| node.clone_mounted()),
+        }
+    }
+}
+
+impl SuspenseBoundaryProps {
+    /**
+    Create a builder for building `SuspenseBoundaryProps`.
+    On the builder, call `.fallback(...)`, `.children(...)`(optional) to set the values of the fields.
+    Finally, call `.build()` to create the instance of `SuspenseBoundaryProps`.
+                        */
+    #[allow(dead_code, clippy::type_complexity)]
+    fn builder() -> SuspenseBoundaryPropsBuilder<((), ())> {
+        SuspenseBoundaryPropsBuilder {
+            owner: Owner::default(),
+            fields: ((), ()),
+            _phantom: ::core::default::Default::default(),
+        }
+    }
+}
+#[must_use]
+#[doc(hidden)]
+#[allow(dead_code, non_camel_case_types, non_snake_case)]
+pub struct SuspenseBoundaryPropsBuilder<TypedBuilderFields> {
+    owner: Owner,
+    fields: TypedBuilderFields,
+    _phantom: (),
+}
+impl Properties for SuspenseBoundaryProps
+where
+    Self: Clone,
+{
+    type Builder = SuspenseBoundaryPropsBuilder<((), ())>;
+    fn builder() -> Self::Builder {
+        SuspenseBoundaryProps::builder()
+    }
+    fn memoize(&mut self, new: &Self) -> bool {
+        let equal = self == new;
+        self.fallback.__set(new.fallback.__take());
+        if !equal {
+            let new_clone = new.clone();
+            self.children = new_clone.children;
+        }
+        equal
+    }
+}
+#[doc(hidden)]
+#[allow(dead_code, non_camel_case_types, non_snake_case)]
+pub trait SuspenseBoundaryPropsBuilder_Optional<T> {
+    fn into_value<F: FnOnce() -> T>(self, default: F) -> T;
+}
+impl<T> SuspenseBoundaryPropsBuilder_Optional<T> for () {
+    fn into_value<F: FnOnce() -> T>(self, default: F) -> T {
+        default()
+    }
+}
+impl<T> SuspenseBoundaryPropsBuilder_Optional<T> for (T,) {
+    fn into_value<F: FnOnce() -> T>(self, _: F) -> T {
+        self.0
+    }
+}
+#[allow(dead_code, non_camel_case_types, missing_docs)]
+impl<__children> SuspenseBoundaryPropsBuilder<((), __children)> {
+    #[allow(clippy::type_complexity)]
+    pub fn fallback<__Marker>(
+        self,
+        fallback: impl SuperInto<Callback<SuspenseContext, Element>, __Marker>,
+    ) -> SuspenseBoundaryPropsBuilder<((Callback<SuspenseContext, Element>,), __children)> {
+        let fallback = (with_owner(self.owner.clone(), move || {
+            SuperInto::super_into(fallback)
+        }),);
+        let (_, children) = self.fields;
+        SuspenseBoundaryPropsBuilder {
+            owner: self.owner,
+            fields: (fallback, children),
+            _phantom: self._phantom,
+        }
+    }
+}
+#[doc(hidden)]
+#[allow(dead_code, non_camel_case_types, non_snake_case)]
+pub enum SuspenseBoundaryPropsBuilder_Error_Repeated_field_fallback {}
+#[doc(hidden)]
+#[allow(dead_code, non_camel_case_types, missing_docs)]
+impl<__children> SuspenseBoundaryPropsBuilder<((Callback<SuspenseContext, Element>,), __children)> {
+    #[deprecated(note = "Repeated field fallback")]
+    #[allow(clippy::type_complexity)]
+    pub fn fallback(
+        self,
+        _: SuspenseBoundaryPropsBuilder_Error_Repeated_field_fallback,
+    ) -> SuspenseBoundaryPropsBuilder<((Callback<SuspenseContext, Element>,), __children)> {
+        self
+    }
+}
+#[allow(dead_code, non_camel_case_types, missing_docs)]
+impl<__fallback> SuspenseBoundaryPropsBuilder<(__fallback, ())> {
+    #[allow(clippy::type_complexity)]
+    pub fn children(
+        self,
+        children: Element,
+    ) -> SuspenseBoundaryPropsBuilder<(__fallback, (Element,))> {
+        let children = (children,);
+        let (fallback, _) = self.fields;
+        SuspenseBoundaryPropsBuilder {
+            owner: self.owner,
+            fields: (fallback, children),
+            _phantom: self._phantom,
+        }
+    }
+}
+#[doc(hidden)]
+#[allow(dead_code, non_camel_case_types, non_snake_case)]
+pub enum SuspenseBoundaryPropsBuilder_Error_Repeated_field_children {}
+#[doc(hidden)]
+#[allow(dead_code, non_camel_case_types, missing_docs)]
+impl<__fallback> SuspenseBoundaryPropsBuilder<(__fallback, (Element,))> {
+    #[deprecated(note = "Repeated field children")]
+    #[allow(clippy::type_complexity)]
+    pub fn children(
+        self,
+        _: SuspenseBoundaryPropsBuilder_Error_Repeated_field_children,
+    ) -> SuspenseBoundaryPropsBuilder<(__fallback, (Element,))> {
+        self
+    }
+}
+#[doc(hidden)]
+#[allow(dead_code, non_camel_case_types, non_snake_case)]
+pub enum SuspenseBoundaryPropsBuilder_Error_Missing_required_field_fallback {}
+#[doc(hidden)]
+#[allow(dead_code, non_camel_case_types, missing_docs, clippy::panic)]
+impl<__children> SuspenseBoundaryPropsBuilder<((), __children)> {
+    #[deprecated(note = "Missing required field fallback")]
+    pub fn build(
+        self,
+        _: SuspenseBoundaryPropsBuilder_Error_Missing_required_field_fallback,
+    ) -> SuspenseBoundaryProps {
+        panic!()
+    }
+}
+#[doc(hidden)]
+#[allow(dead_code, non_camel_case_types, missing_docs)]
+pub struct SuspenseBoundaryPropsWithOwner {
+    inner: SuspenseBoundaryProps,
+    owner: Owner,
+}
+#[automatically_derived]
+#[allow(dead_code, non_camel_case_types, missing_docs)]
+impl ::core::clone::Clone for SuspenseBoundaryPropsWithOwner {
+    #[inline]
+    fn clone(&self) -> SuspenseBoundaryPropsWithOwner {
+        SuspenseBoundaryPropsWithOwner {
+            inner: ::core::clone::Clone::clone(&self.inner),
+            owner: ::core::clone::Clone::clone(&self.owner),
+        }
+    }
+}
+impl PartialEq for SuspenseBoundaryPropsWithOwner {
+    fn eq(&self, other: &Self) -> bool {
+        self.inner.eq(&other.inner)
+    }
+}
+impl SuspenseBoundaryPropsWithOwner {
+    /// Create a component from the props.
+    pub fn into_vcomponent<M: 'static>(
+        self,
+        render_fn: impl ComponentFunction<SuspenseBoundaryProps, M>,
+        component_name: &'static str,
+    ) -> VComponent {
+        VComponent::new(
+            move |wrapper: Self| render_fn.rebuild(wrapper.inner),
+            self,
+            component_name,
+        )
+    }
+}
+impl Properties for SuspenseBoundaryPropsWithOwner {
+    type Builder = ();
+    fn builder() -> Self::Builder {
+        unreachable!()
+    }
+    fn memoize(&mut self, new: &Self) -> bool {
+        self.inner.memoize(&new.inner)
+    }
+}
+#[allow(dead_code, non_camel_case_types, missing_docs)]
+impl<__children: SuspenseBoundaryPropsBuilder_Optional<Element>>
+    SuspenseBoundaryPropsBuilder<((Callback<SuspenseContext, Element>,), __children)>
+{
+    pub fn build(self) -> SuspenseBoundaryPropsWithOwner {
+        let (fallback, children) = self.fields;
+        let fallback = fallback.0;
+        let children = SuspenseBoundaryPropsBuilder_Optional::into_value(children, VNode::empty);
+        SuspenseBoundaryPropsWithOwner {
+            inner: SuspenseBoundaryProps {
+                fallback,
+                children,
+                suspended_nodes: None,
+            },
+            owner: self.owner,
+        }
+    }
+}
+#[automatically_derived]
+#[allow(non_camel_case_types)]
+impl ::core::cmp::PartialEq for SuspenseBoundaryProps {
+    #[inline]
+    fn eq(&self, other: &SuspenseBoundaryProps) -> bool {
+        self.fallback == other.fallback && self.children == other.children
+    }
+}
+
+/// Suspense Boundaries let you render a fallback UI while a child component is suspended.
+///
+/// # Example
+///
+/// ```rust
+/// # use dioxus::prelude::*;
+/// # fn Article() -> Element { rsx! { "Article" } }
+/// fn App() -> Element {
+///     rsx! {
+///         SuspenseBoundary {
+///             fallback: |context: SuspenseContext| rsx! {
+///                 if let Some(placeholder) = context.suspense_placeholder() {
+///                     {placeholder}
+///                 } else {
+///                     "Loading..."
+///                 }
+///             },
+///             Article {}
+///         }
+///     }
+/// }
+/// ```
+#[allow(non_snake_case)]
+pub fn SuspenseBoundary(mut __props: SuspenseBoundaryProps) -> Element {
+    unreachable!("SuspenseBoundary should not be called directly")
+}
+#[allow(non_snake_case)]
+#[doc(hidden)]
+mod SuspenseBoundary_completions {
+    #[doc(hidden)]
+    #[allow(non_camel_case_types)]
+    /// This enum is generated to help autocomplete the braces after the component. It does nothing
+    pub enum Component {
+        SuspenseBoundary {},
+    }
+}
+use generational_box::Owner;
+#[allow(unused)]
+pub use SuspenseBoundary_completions::Component::SuspenseBoundary;
+
+/// Suspense has a custom diffing algorithm that diffs the suspended nodes in the background without rendering them
+impl SuspenseBoundaryProps {
+    /// Try to downcast [`AnyProps`] to [`SuspenseBoundaryProps`]
+    pub(crate) fn downcast_mut_from_props(props: &mut dyn AnyProps) -> Option<&mut Self> {
+        let inner: Option<&mut SuspenseBoundaryPropsWithOwner> = props.props_mut().downcast_mut();
+        inner.map(|inner| &mut inner.inner)
+    }
+
+    /// Try to downcast [`AnyProps`] to [`SuspenseBoundaryProps`]
+    pub(crate) fn downcast_ref_from_props(props: &dyn AnyProps) -> Option<&Self> {
+        let inner: Option<&SuspenseBoundaryPropsWithOwner> = props.props().downcast_ref();
+        inner.map(|inner| &inner.inner)
+    }
+
+    /// Try to extract [`SuspenseBoundaryProps`] from  [`ScopeState`]
+    pub fn downcast_from_scope(scope_state: &ScopeState) -> Option<&Self> {
+        let inner: Option<&SuspenseBoundaryPropsWithOwner> =
+            scope_state.props.props().downcast_ref();
+        inner.map(|inner| &inner.inner)
+    }
+
+    /// Check if the suspense boundary is currently holding its children in suspense
+    pub fn suspended(&self) -> bool {
+        self.suspended_nodes.is_some()
+    }
+
+    pub(crate) fn create<M: WriteMutations>(
+        mount: MountId,
+        idx: usize,
+        component: &VComponent,
+        parent: Option<ElementRef>,
+        dom: &mut VirtualDom,
+        to: Option<&mut M>,
+    ) -> usize {
+        let mut scope_id = ScopeId(dom.mounts[mount.0].mounted_dynamic_nodes[idx]);
+
+        // If the ScopeId is a placeholder, we need to load up a new scope for this vcomponent. If it's already mounted, then we can just use that
+        if scope_id.is_placeholder() {
+            {
+                let suspense_context = SuspenseContext::new();
+
+                dom.runtime.suspense_stack.borrow_mut().push(
+                    crate::scope_context::SuspenseLocation::UnderSuspense(suspense_context.clone()),
+                );
+                {
+                    let scope_state = dom
+                        .new_scope(component.props.duplicate(), component.name)
+                        .state();
+                    suspense_context.mount(scope_state.id);
+                    scope_id = scope_state.id;
+                }
+                dom.runtime.suspense_stack.borrow_mut().pop();
+            }
+
+            // Store the scope id for the next render
+            dom.mounts[mount.0].mounted_dynamic_nodes[idx] = scope_id.0;
+        }
+
+        let scope_state = &mut dom.scopes[scope_id.0];
+        let props = Self::downcast_mut_from_props(&mut *scope_state.props).unwrap();
+
+        let children = RenderReturn {
+            node: props
+                .children
+                .as_ref()
+                .map(|node| node.clone_mounted())
+                .map_err(Clone::clone),
+        };
+
+        // First always render the children in the background. Rendering the children may cause this boundary to suspend
+        dom.runtime.push_scope(scope_id);
+        children.create(dom, parent, None::<&mut M>);
+        dom.runtime.pop_scope();
+
+        // Store the (now mounted) children back into the scope state
+        let scope_state = &mut dom.scopes[scope_id.0];
+        let props = Self::downcast_mut_from_props(&mut *scope_state.props).unwrap();
+        props.children = children.clone().node;
+
+        let scope_state = &mut dom.scopes[scope_id.0];
+        let suspense_context = scope_state
+            .state()
+            .suspense_boundary()
+            .suspense_context()
+            .unwrap()
+            .clone();
+        // If there are suspended futures, render the fallback
+        let nodes_created = if !suspense_context.suspended_futures().is_empty() {
+            let props = Self::downcast_mut_from_props(&mut *scope_state.props).unwrap();
+            props.suspended_nodes = Some(children.into());
+
+            dom.runtime.suspense_stack.borrow_mut().push(
+                crate::scope_context::SuspenseLocation::InSuspensePlaceholder(
+                    suspense_context.clone(),
+                ),
+            );
+            let suspense_placeholder = props.fallback.call(suspense_context);
+            let node = RenderReturn {
+                node: suspense_placeholder,
+            };
+            let nodes_created = node.create(dom, parent, to);
+            dom.runtime.suspense_stack.borrow_mut().pop();
+
+            let scope_state = &mut dom.scopes[scope_id.0];
+            scope_state.last_rendered_node = Some(node);
+
+            nodes_created
+        } else {
+            // Otherwise just render the children in the real dom
+            dom.runtime.push_scope(scope_id);
+            debug_assert!(children.mount.get().mounted());
+            let nodes_created = children.create(dom, parent, to);
+            dom.runtime.pop_scope();
+            let scope_state = &mut dom.scopes[scope_id.0];
+            scope_state.last_rendered_node = Some(children);
+            let props = Self::downcast_mut_from_props(&mut *dom.scopes[scope_id.0].props).unwrap();
+            props.suspended_nodes = None;
+            nodes_created
+        };
+
+        nodes_created
+    }
+
+    #[doc(hidden)]
+    /// Manually rerun the children of this suspense boundary without diffing against the old nodes.
+    ///
+    /// This should only be called by dioxus-web after the suspense boundary has been streamed in from the server.
+    pub fn resolve_suspense<M: WriteMutations>(
+        scope_id: ScopeId,
+        dom: &mut VirtualDom,
+        to: &mut M,
+        only_write_templates: impl FnOnce(&mut M),
+        replace_with: usize,
+    ) {
+        let _runtime = RuntimeGuard::new(dom.runtime.clone());
+        let Some(scope_state) = dom.scopes.get_mut(scope_id.0) else {
+            return;
+        };
+
+        // Reset the suspense context
+        let suspense_context = scope_state
+            .state()
+            .suspense_boundary()
+            .suspense_context()
+            .unwrap()
+            .clone();
+        suspense_context.inner.suspended_tasks.borrow_mut().clear();
+
+        // Get the parent of the suspense boundary to later create children with the right parent
+        let currently_rendered = scope_state.last_rendered_node.as_ref().unwrap().clone();
+        let mount = currently_rendered.mount.get();
+        let parent = dom
+            .mounts
+            .get(mount.0)
+            .expect("suspense placeholder is not mounted")
+            .parent;
+
+        let props = Self::downcast_mut_from_props(&mut *scope_state.props).unwrap();
+
+        // Unmount any children to reset any scopes under this suspense boundary
+        let children = props
+            .children
+            .as_ref()
+            .map(|node| node.clone_mounted())
+            .map_err(Clone::clone);
+        let suspended = props
+            .suspended_nodes
+            .as_ref()
+            .map(|node| node.clone_mounted());
+        if let Some(node) = suspended {
+            node.remove_node(&mut *dom, None::<&mut M>, None);
+        }
+        // Replace the rendered nodes with resolved nodes
+        currently_rendered.remove_node(&mut *dom, Some(to), Some(replace_with));
+
+        // Switch to only writing templates
+        only_write_templates(to);
+
+        let children = RenderReturn { node: children };
+        children.mount.take();
+
+        // First always render the children in the background. Rendering the children may cause this boundary to suspend
+        dom.runtime.push_scope(scope_id);
+        children.create(dom, parent, Some(to));
+        dom.runtime.pop_scope();
+
+        // Store the (now mounted) children back into the scope state
+        let scope_state = &mut dom.scopes[scope_id.0];
+        let props = Self::downcast_mut_from_props(&mut *scope_state.props).unwrap();
+        props.children = children.clone().node;
+        scope_state.last_rendered_node = Some(children);
+        props.suspended_nodes = None;
+    }
+
+    pub(crate) fn diff<M: WriteMutations>(
+        scope_id: ScopeId,
+        dom: &mut VirtualDom,
+        to: Option<&mut M>,
+    ) {
+        let scope = &mut dom.scopes[scope_id.0];
+        let myself = Self::downcast_mut_from_props(&mut *scope.props)
+            .unwrap()
+            .clone();
+
+        let last_rendered_node = scope.last_rendered_node.as_ref().unwrap().clone_mounted();
+
+        let Self {
+            fallback,
+            children,
+            suspended_nodes,
+            ..
+        } = myself;
+
+        let suspense_context = scope
+            .state()
+            .suspense_boundary()
+            .suspense_context()
+            .unwrap()
+            .clone();
+        let suspended = !suspense_context.suspended_futures().is_empty();
+        match (suspended_nodes, suspended) {
+            // We already have suspended nodes that still need to be suspended
+            // Just diff the normal and suspended nodes
+            (Some(suspended_nodes), true) => {
+                let new_suspended_nodes: VNode = RenderReturn { node: children }.into();
+
+                // Diff the placeholder nodes in the dom
+                dom.runtime.suspense_stack.borrow_mut().push(
+                    crate::scope_context::SuspenseLocation::InSuspensePlaceholder(
+                        suspense_context.clone(),
+                    ),
+                );
+                let old_placeholder = last_rendered_node;
+                let new_placeholder = RenderReturn {
+                    node: fallback.call(suspense_context),
+                };
+
+                old_placeholder.diff_node(&new_placeholder, dom, to);
+                dom.runtime.suspense_stack.borrow_mut().pop();
+
+                // Set the last rendered node to the placeholder
+                dom.scopes[scope_id.0].last_rendered_node = Some(new_placeholder);
+
+                // Diff the suspended nodes in the background
+                dom.runtime.push_scope(scope_id);
+                suspended_nodes.diff_node(&new_suspended_nodes, dom, None::<&mut M>);
+                dom.runtime.pop_scope();
+
+                let props =
+                    Self::downcast_mut_from_props(&mut *dom.scopes[scope_id.0].props).unwrap();
+                props.suspended_nodes = Some(new_suspended_nodes);
+            }
+            // We have no suspended nodes, and we are not suspended. Just diff the children like normal
+            (None, false) => {
+                let old_children = last_rendered_node;
+                let new_children = RenderReturn { node: children };
+
+                dom.runtime.push_scope(scope_id);
+                old_children.diff_node(&new_children, dom, to);
+                dom.runtime.pop_scope();
+
+                // Set the last rendered node to the new children
+                dom.scopes[scope_id.0].last_rendered_node = Some(new_children);
+            }
+            // We have no suspended nodes, but we just became suspended. Move the children to the background
+            (None, true) => {
+                let old_children = last_rendered_node;
+                let new_children: VNode = RenderReturn { node: children }.into();
+
+                let new_placeholder = RenderReturn {
+                    node: fallback.call(suspense_context.clone()),
+                };
+
+                // Move the children to the background
+                let mount = old_children.mount.get();
+                let mount = dom.mounts.get(mount.0).expect("mount should exist");
+                let parent = mount.parent;
+                dom.runtime.push_scope(scope_id);
+                dom.runtime.suspense_stack.borrow_mut().push(
+                    crate::scope_context::SuspenseLocation::InSuspensePlaceholder(suspense_context),
+                );
+                old_children.move_node_to_background(
+                    std::slice::from_ref(&*new_placeholder),
+                    parent,
+                    dom,
+                    to,
+                );
+                dom.runtime.suspense_stack.borrow_mut().pop();
+
+                // Then diff the new children in the background
+                old_children.diff_node(&new_children, dom, None::<&mut M>);
+                dom.runtime.pop_scope();
+
+                // Set the last rendered node to the new suspense placeholder
+                dom.scopes[scope_id.0].last_rendered_node = Some(new_placeholder);
+
+                let props =
+                    Self::downcast_mut_from_props(&mut *dom.scopes[scope_id.0].props).unwrap();
+                props.suspended_nodes = Some(new_children);
+            } // We have suspended nodes, but we just got out of suspense. Move the suspended nodes to the foreground
+            (Some(old_suspended_nodes), false) => {
+                let old_placeholder = last_rendered_node;
+                let new_children = RenderReturn { node: children };
+
+                // First diff the two children nodes in the background
+                dom.runtime.push_scope(scope_id);
+                old_suspended_nodes.diff_node(&new_children, dom, None::<&mut M>);
+
+                // Then replace the placeholder with the new children
+                let mount = old_placeholder.mount.get();
+                let mount = dom.mounts.get(mount.0).expect("mount should exist");
+                let parent = mount.parent;
+                old_placeholder.replace(std::slice::from_ref(&*new_children), parent, dom, to);
+                dom.runtime.pop_scope();
+
+                // Set the last rendered node to the new children
+                dom.scopes[scope_id.0].last_rendered_node = Some(new_children);
+
+                let props =
+                    Self::downcast_mut_from_props(&mut *dom.scopes[scope_id.0].props).unwrap();
+                props.suspended_nodes = None;
+            }
+        }
+    }
+
+    pub(crate) fn remove_suspended_nodes<M: WriteMutations>(
+        &mut self,
+        dom: &mut VirtualDom,
+        destroy_component_state: bool,
+    ) {
+        // Remove the suspended nodes
+        if let Some(node) = self.suspended_nodes.take() {
+            node.remove_node_inner(dom, None::<&mut M>, destroy_component_state, None)
+        }
+    }
+}

packages/core/src/suspense/mod.rs

@@ -0,0 +1,189 @@
+//! Suspense allows you to render a placeholder while nodes are waiting for data in the background
+//!
+//! During suspense on the server:
+//! - Rebuild once
+//! - Send page with loading placeholders down to the client
+//! - loop
+//!   - Poll (only) suspended futures
+//!   - If a scope is marked as dirty and that scope is a suspense boundary, under a suspended boundary, or the suspense placeholder, rerun the scope
+//!     - If it is a different scope, ignore it and warn the user
+//!   - Rerender the scope on the server and send down the nodes under a hidden div with serialized data
+//!
+//! During suspense on the web:
+//! - Rebuild once without running server futures
+//! - Rehydrate the placeholders that were initially sent down. At this point, no suspense nodes are resolved so the client and server pages should be the same
+//! - loop
+//!   - Wait for work or suspense data
+//!   - If suspense data comes in
+//!     - replace the suspense placeholder
+//!     - get any data associated with the suspense placeholder and rebuild nodes under the suspense that was resolved
+//!     - rehydrate the suspense placeholders that were at that node
+//!   - If work comes in
+//!     - Just do the work; this may remove suspense placeholders that the server hasn't yet resolved. If we see new data come in from the server about that node, ignore it
+//!
+//! Generally suspense placeholders should not be stateful because they are driven from the server. If they are stateful and the client renders something different, hydration will fail.
+
+mod component;
+pub use component::*;
+
+use crate::innerlude::*;
+use std::{
+    cell::{Cell, Ref, RefCell},
+    fmt::Debug,
+    rc::Rc,
+};
+
+/// A task that has been suspended which may have an optional loading placeholder
+#[derive(Clone, PartialEq, Debug)]
+pub struct SuspendedFuture {
+    origin: ScopeId,
+    task: Task,
+    pub(crate) placeholder: VNode,
+}
+
+impl SuspendedFuture {
+    /// Create a new suspended future
+    pub fn new(task: Task) -> Self {
+        Self {
+            task,
+            origin: current_scope_id().expect("to be in a dioxus runtime"),
+            placeholder: VNode::placeholder(),
+        }
+    }
+
+    /// Get a placeholder to display while the future is suspended
+    pub fn suspense_placeholder(&self) -> Option<VNode> {
+        if self.placeholder == VNode::placeholder() {
+            None
+        } else {
+            Some(self.placeholder.clone())
+        }
+    }
+
+    /// Set a new placeholder the SuspenseBoundary may use to display while the future is suspended
+    pub fn with_placeholder(mut self, placeholder: VNode) -> Self {
+        self.placeholder = placeholder;
+        self
+    }
+
+    /// Get the task that was suspended
+    pub fn task(&self) -> Task {
+        self.task
+    }
+
+    /// Clone the future while retaining the mounted information of the future
+    pub(crate) fn clone_mounted(&self) -> Self {
+        Self {
+            task: self.task,
+            origin: self.origin,
+            placeholder: self.placeholder.clone_mounted(),
+        }
+    }
+}
+
+/// A context with information about suspended components
+#[derive(Debug, Clone)]
+pub struct SuspenseContext {
+    inner: Rc<SuspenseBoundaryInner>,
+}
+
+impl PartialEq for SuspenseContext {
+    fn eq(&self, other: &Self) -> bool {
+        Rc::ptr_eq(&self.inner, &other.inner)
+    }
+}
+
+impl SuspenseContext {
+    /// Create a new suspense boundary in a specific scope
+    pub(crate) fn new() -> Self {
+        Self {
+            inner: Rc::new(SuspenseBoundaryInner {
+                suspended_tasks: RefCell::new(vec![]),
+                id: Cell::new(ScopeId::ROOT),
+            }),
+        }
+    }
+
+    /// Mount the context in a specific scope
+    pub(crate) fn mount(&self, scope: ScopeId) {
+        self.inner.id.set(scope);
+    }
+
+    /// Check if there are any suspended tasks
+    pub fn suspended(&self) -> bool {
+        !self.inner.suspended_tasks.borrow().is_empty()
+    }
+
+    /// Add a suspended task
+    pub(crate) fn add_suspended_task(&self, task: SuspendedFuture) {
+        self.inner.suspended_tasks.borrow_mut().push(task);
+        self.inner.id.get().needs_update();
+    }
+
+    /// Remove a suspended task
+    pub(crate) fn remove_suspended_task(&self, task: Task) {
+        self.inner
+            .suspended_tasks
+            .borrow_mut()
+            .retain(|t| t.task != task);
+        self.inner.id.get().needs_update();
+    }
+
+    /// Get all suspended tasks
+    pub fn suspended_futures(&self) -> Ref<[SuspendedFuture]> {
+        Ref::map(self.inner.suspended_tasks.borrow(), |tasks| {
+            tasks.as_slice()
+        })
+    }
+
+    /// Get the first suspended task with a loading placeholder
+    pub fn suspense_placeholder(&self) -> Option<Element> {
+        self.inner
+            .suspended_tasks
+            .borrow()
+            .iter()
+            .find_map(|task| task.suspense_placeholder())
+            .map(std::result::Result::Ok)
+    }
+}
+
+/// A boundary that will capture any errors from child components
+#[derive(Debug)]
+pub struct SuspenseBoundaryInner {
+    suspended_tasks: RefCell<Vec<SuspendedFuture>>,
+    id: Cell<ScopeId>,
+}
+
+/// Provides context methods to [`Result<T, RenderError>`] to show loading indicators for suspended results
+///
+/// This trait is sealed and cannot be implemented outside of dioxus-core
+pub trait SuspenseExtension<T>: private::Sealed {
+    /// Add a loading indicator if the result is suspended
+    fn with_loading_placeholder(
+        self,
+        display_placeholder: impl FnOnce() -> Element,
+    ) -> std::result::Result<T, RenderError>;
+}
+
+impl<T> SuspenseExtension<T> for std::result::Result<T, RenderError> {
+    fn with_loading_placeholder(
+        self,
+        display_placeholder: impl FnOnce() -> Element,
+    ) -> std::result::Result<T, RenderError> {
+        if let Err(RenderError::Suspended(suspense)) = self {
+            Err(RenderError::Suspended(suspense.with_placeholder(
+                display_placeholder().unwrap_or_default(),
+            )))
+        } else {
+            self
+        }
+    }
+}
+
+pub(crate) mod private {
+    use super::*;
+
+    pub trait Sealed {}
+
+    impl<T> Sealed for std::result::Result<T, RenderError> {}
+}

packages/core/src/tasks.rs

@@ -1,9 +1,12 @@
 use crate::innerlude::Effect;
 use crate::innerlude::ScopeOrder;
 use crate::innerlude::{remove_future, spawn, Runtime};
+use crate::scope_context::ScopeStatus;
+use crate::scope_context::SuspenseLocation;
 use crate::ScopeId;
 use futures_util::task::ArcWake;
 use slotmap::DefaultKey;
+use std::marker::PhantomData;
 use std::sync::Arc;
 use std::task::Waker;
 use std::{cell::Cell, future::Future};
@@ -15,9 +18,21 @@ use std::{pin::Pin, task::Poll};
 /// `Task` is a unique identifier for a task that has been spawned onto the runtime. It can be used to cancel the task
 #[cfg_attr(feature = "serialize", derive(serde::Serialize, serde::Deserialize))]
 #[derive(Copy, Clone, PartialEq, Eq, Hash, Debug)]
-pub struct Task(pub(crate) slotmap::DefaultKey);
+pub struct Task {
+    pub(crate) id: slotmap::DefaultKey,
+    // We add a raw pointer to make this !Send + !Sync
+    unsend: PhantomData<*const ()>,
+}
 
 impl Task {
+    /// Create a task from a raw id
+    pub(crate) const fn from_id(id: slotmap::DefaultKey) -> Self {
+        Self {
+            id,
+            unsend: PhantomData,
+        }
+    }
+
     /// Start a new future on the same thread as the rest of the VirtualDom.
     ///
     /// This future will not contribute to suspense resolving, so you should primarily use this for reacting to changes
@@ -51,7 +66,7 @@ impl Task {
     /// Check if the task is paused.
     pub fn paused(&self) -> bool {
         Runtime::with(|rt| {
-            if let Some(task) = rt.tasks.borrow().get(self.0) {
+            if let Some(task) = rt.tasks.borrow().get(self.id) {
                 !task.active.get()
             } else {
                 false
@@ -62,7 +77,11 @@ impl Task {
 
     /// Wake the task.
     pub fn wake(&self) {
-        Runtime::with(|rt| _ = rt.sender.unbounded_send(SchedulerMsg::TaskNotified(*self)));
+        Runtime::with(|rt| {
+            _ = rt
+                .sender
+                .unbounded_send(SchedulerMsg::TaskNotified(self.id))
+        });
     }
 
     /// Poll the task immediately.
@@ -73,10 +92,12 @@ impl Task {
     /// Set the task as active or paused.
     pub fn set_active(&self, active: bool) {
         Runtime::with(|rt| {
-            if let Some(task) = rt.tasks.borrow().get(self.0) {
+            if let Some(task) = rt.tasks.borrow().get(self.id) {
                 let was_active = task.active.replace(active);
                 if !was_active && active {
-                    _ = rt.sender.unbounded_send(SchedulerMsg::TaskNotified(*self));
+                    _ = rt
+                        .sender
+                        .unbounded_send(SchedulerMsg::TaskNotified(self.id));
                 }
             }
         });
@@ -140,10 +161,10 @@ impl Runtime {
         let (task, task_id) = {
             let mut tasks = self.tasks.borrow_mut();
 
-            let mut task_id = Task(DefaultKey::default());
+            let mut task_id = Task::from_id(DefaultKey::default());
             let mut local_task = None;
             tasks.insert_with_key(|key| {
-                task_id = Task(key);
+                task_id = Task::from_id(key);
 
                 let new_task = Rc::new(LocalTask {
                     scope,
@@ -151,10 +172,10 @@ impl Runtime {
                     parent: self.current_task(),
                     task: RefCell::new(Box::pin(task)),
                     waker: futures_util::task::waker(Arc::new(LocalTaskHandle {
-                        id: task_id,
+                        id: task_id.id,
                         tx: self.sender.clone(),
                     })),
-                    ty: Cell::new(ty),
+                    ty: RefCell::new(ty),
                 });
 
                 local_task = Some(new_task.clone());
@@ -170,7 +191,7 @@ impl Runtime {
         debug_assert!(task.task.try_borrow_mut().is_ok());
 
         self.sender
-            .unbounded_send(SchedulerMsg::TaskNotified(task_id))
+            .unbounded_send(SchedulerMsg::TaskNotified(task_id.id))
             .expect("Scheduler should exist");
 
         task_id
@@ -178,11 +199,32 @@ impl Runtime {
 
     /// Queue an effect to run after the next render
     pub(crate) fn queue_effect(&self, id: ScopeId, f: impl FnOnce() + 'static) {
+        let effect = Box::new(f) as Box<dyn FnOnce() + 'static>;
+        let Some(scope) = self.get_state(id) else {
+            return;
+        };
+        let mut status = scope.status.borrow_mut();
+        match &mut *status {
+            ScopeStatus::Mounted => {
+                self.queue_effect_on_mounted_scope(id, effect);
+            }
+            ScopeStatus::Unmounted { effects_queued, .. } => {
+                effects_queued.push(effect);
+            }
+        }
+    }
+
+    /// Queue an effect to run after the next render without checking if the scope is mounted
+    pub(crate) fn queue_effect_on_mounted_scope(
+        &self,
+        id: ScopeId,
+        f: Box<dyn FnOnce() + 'static>,
+    ) {
         // Add the effect to the queue of effects to run after the next render for the given scope
         let mut effects = self.pending_effects.borrow_mut();
         let scope_order = ScopeOrder::new(id.height(), id);
         match effects.get(&scope_order) {
-            Some(effects) => effects.push_back(Box::new(f)),
+            Some(effects) => effects.push_back(f),
             None => {
                 effects.insert(Effect::new(scope_order, f));
             }
@@ -196,17 +238,17 @@ impl Runtime {
 
     /// Get the parent task of the given task, if it exists
     pub fn parent_task(&self, task: Task) -> Option<Task> {
-        self.tasks.borrow().get(task.0)?.parent
+        self.tasks.borrow().get(task.id)?.parent
     }
 
     pub(crate) fn task_scope(&self, task: Task) -> Option<ScopeId> {
-        self.tasks.borrow().get(task.0).map(|t| t.scope)
+        self.tasks.borrow().get(task.id).map(|t| t.scope)
     }
 
     pub(crate) fn handle_task_wakeup(&self, id: Task) -> Poll<()> {
         debug_assert!(Runtime::current().is_some(), "Must be in a dioxus runtime");
 
-        let task = self.tasks.borrow().get(id.0).cloned();
+        let task = self.tasks.borrow().get(id.id).cloned();
 
         // The task was removed from the scheduler, so we can just ignore it
         let Some(task) = task else {
@@ -221,7 +263,7 @@ impl Runtime {
         let mut cx = std::task::Context::from_waker(&task.waker);
 
         // update the scope stack
-        self.scope_stack.borrow_mut().push(task.scope);
+        self.push_scope(task.scope);
         self.rendering.set(false);
         self.current_task.set(Some(id));
 
@@ -239,7 +281,7 @@ impl Runtime {
         }
 
         // Remove the scope from the stack
-        self.scope_stack.borrow_mut().pop();
+        self.pop_scope();
         self.rendering.set(true);
         self.current_task.set(None);
 
@@ -250,20 +292,35 @@ impl Runtime {
     ///
     /// This does not abort the task, so you'll want to wrap it in an abort handle if that's important to you
     pub(crate) fn remove_task(&self, id: Task) -> Option<Rc<LocalTask>> {
-        let task = self.tasks.borrow_mut().remove(id.0);
+        // Remove the task from the task list
+        let task = self.tasks.borrow_mut().remove(id.id);
+
         if let Some(task) = &task {
-            if task.suspended() {
+            // Remove the task from suspense
+            if let TaskType::Suspended { boundary } = &*task.ty.borrow() {
                 self.suspended_tasks.set(self.suspended_tasks.get() - 1);
+                if let SuspenseLocation::UnderSuspense(boundary) = boundary {
+                    boundary.remove_suspended_task(id);
+                }
+            }
+
+            // Remove the task from pending work. We could reuse the slot before the task is polled and discarded so we need to remove it from pending work instead of filtering out dead tasks when we try to poll them
+            if let Some(scope) = self.get_state(task.scope) {
+                let order = ScopeOrder::new(scope.height(), scope.id);
+                if let Some(dirty_tasks) = self.dirty_tasks.borrow_mut().get(&order) {
+                    dirty_tasks.remove(id);
+                }
             }
         }
+
         task
     }
 
     /// Check if a task should be run during suspense
     pub(crate) fn task_runs_during_suspense(&self, task: Task) -> bool {
         let borrow = self.tasks.borrow();
-        let task: Option<&LocalTask> = borrow.get(task.0).map(|t| &**t);
-        matches!(task, Some(LocalTask { ty, .. }) if ty.get().runs_during_suspense())
+        let task: Option<&LocalTask> = borrow.get(task.id).map(|t| &**t);
+        matches!(task, Some(LocalTask { ty, .. }) if ty.borrow().runs_during_suspense())
     }
 }
 
@@ -273,49 +330,49 @@ pub(crate) struct LocalTask {
     parent: Option<Task>,
     task: RefCell<Pin<Box<dyn Future<Output = ()> + 'static>>>,
     waker: Waker,
-    ty: Cell<TaskType>,
+    ty: RefCell<TaskType>,
     active: Cell<bool>,
 }
 
 impl LocalTask {
-    pub(crate) fn suspend(&self) {
-        self.ty.set(TaskType::Suspended);
-    }
-
-    pub(crate) fn suspended(&self) -> bool {
-        matches!(self.ty.get(), TaskType::Suspended)
+    /// Suspend the task, returns true if the task was already suspended
+    pub(crate) fn suspend(&self, boundary: SuspenseLocation) -> bool {
+        // Make this a suspended task so it runs during suspense
+        let old_type = self.ty.replace(TaskType::Suspended { boundary });
+        matches!(old_type, TaskType::Suspended { .. })
     }
 }
 
-#[derive(Clone, Copy)]
+#[derive(Clone)]
 enum TaskType {
     ClientOnly,
-    Suspended,
+    Suspended { boundary: SuspenseLocation },
     Isomorphic,
 }
 
 impl TaskType {
-    fn runs_during_suspense(self) -> bool {
-        matches!(self, TaskType::Isomorphic | TaskType::Suspended)
+    fn runs_during_suspense(&self) -> bool {
+        matches!(self, TaskType::Isomorphic | TaskType::Suspended { .. })
     }
 }
 
 /// The type of message that can be sent to the scheduler.
 ///
 /// These messages control how the scheduler will process updates to the UI.
+#[derive(Debug)]
 pub(crate) enum SchedulerMsg {
     /// Immediate updates from Components that mark them as dirty
     Immediate(ScopeId),
 
     /// A task has woken and needs to be progressed
-    TaskNotified(Task),
+    TaskNotified(slotmap::DefaultKey),
 
     /// An effect has been queued to run after the next render
     EffectQueued,
 }
 
 struct LocalTaskHandle {
-    id: Task,
+    id: slotmap::DefaultKey,
     tx: futures_channel::mpsc::UnboundedSender<SchedulerMsg>,
 }
 

packages/core/src/virtual_dom.rs

@@ -2,22 +2,22 @@
 //!
 //! This module provides the primary mechanics to create a hook-based, concurrent VDOM for Rust.
 
-use crate::Task;
+use crate::innerlude::{SuspenseBoundaryProps, Work};
+use crate::properties::RootProps;
+use crate::root_wrapper::RootScopeWrapper;
 use crate::{
-    any_props::AnyProps,
     arena::ElementId,
     innerlude::{
-        DirtyTasks, ElementRef, ErrorBoundary, NoOpMutations, SchedulerMsg, ScopeOrder, ScopeState,
-        VNodeMount, VProps, WriteMutations,
+        ElementRef, NoOpMutations, SchedulerMsg, ScopeOrder, ScopeState, VNodeMount, VProps,
+        WriteMutations,
     },
-    nodes::RenderReturn,
     nodes::{Template, TemplateId},
     runtime::{Runtime, RuntimeGuard},
     scopes::ScopeId,
-    AttributeValue, ComponentFunction, Element, Event, Mutations, VNode,
+    AttributeValue, ComponentFunction, Element, Event, Mutations,
 };
+use crate::{Task, VComponent};
 use futures_util::StreamExt;
-use rustc_hash::FxHashMap;
 use slab::Slab;
 use std::collections::BTreeSet;
 use std::{any::Any, rc::Rc};
@@ -206,18 +206,25 @@ pub struct VirtualDom {
     pub(crate) scopes: Slab<ScopeState>,
 
     pub(crate) dirty_scopes: BTreeSet<ScopeOrder>,
-    pub(crate) dirty_tasks: BTreeSet<DirtyTasks>,
 
     // Maps a template path to a map of byte indexes to templates
-    pub(crate) templates: FxHashMap<TemplateId, FxHashMap<usize, Template>>,
+    // if hot reload is enabled, we need to keep track of template overrides
+    #[cfg(debug_assertions)]
+    pub(crate) templates: rustc_hash::FxHashMap<TemplateId, rustc_hash::FxHashMap<usize, Template>>,
+    // Otherwise, we just need to keep track of what templates we have registered
+    #[cfg(not(debug_assertions))]
+    pub(crate) templates: rustc_hash::FxHashSet<TemplateId>,
 
     // Templates changes that are queued for the next render
     pub(crate) queued_templates: Vec<Template>,
 
     // The element ids that are used in the renderer
+    // These mark a specific place in a whole rsx block
     pub(crate) elements: Slab<Option<ElementRef>>,
 
     // Once nodes are mounted, the information about where they are mounted is stored here
+    // We need to store this information on the virtual dom so that we know what nodes are mounted where when we bubble events
+    // Each mount is associated with a whole rsx block. [`VirtualDom::elements`] link to a specific node in the block
     pub(crate) mounts: Slab<VNodeMount>,
 
     pub(crate) runtime: Rc<Runtime>,
@@ -297,7 +304,13 @@ impl VirtualDom {
         root: impl ComponentFunction<P, M>,
         root_props: P,
     ) -> Self {
-        Self::new_with_component(VProps::new(root, |_, _| true, root_props, "root"))
+        let render_fn = root.id();
+        let props = VProps::new(root, |_, _| true, root_props, "Root");
+        Self::new_with_component(VComponent {
+            name: "root",
+            render_fn,
+            props: Box::new(props),
+        })
     }
 
     /// Create a new virtualdom and build it immediately
@@ -309,7 +322,7 @@ impl VirtualDom {
 
     /// Create a new VirtualDom from something that implements [`AnyProps`]
     #[instrument(skip(root), level = "trace", name = "VirtualDom::new")]
-    pub(crate) fn new_with_component(root: impl AnyProps + 'static) -> Self {
+    pub(crate) fn new_with_component(root: VComponent) -> Self {
         let (tx, rx) = futures_channel::mpsc::unbounded();
 
         let mut dom = Self {
@@ -317,18 +330,19 @@ impl VirtualDom {
             runtime: Runtime::new(tx),
             scopes: Default::default(),
             dirty_scopes: Default::default(),
-            dirty_tasks: Default::default(),
             templates: Default::default(),
             queued_templates: Default::default(),
             elements: Default::default(),
             mounts: Default::default(),
         };
 
-        let root = dom.new_scope(Box::new(root), "app");
-
-        // Unlike react, we provide a default error boundary that just renders the error as a string
-        root.state()
-            .provide_context(Rc::new(ErrorBoundary::new_in_scope(ScopeId::ROOT)));
+        let root = VProps::new(
+            RootScopeWrapper,
+            |_, _| true,
+            RootProps(root),
+            "RootWrapper",
+        );
+        dom.new_scope(Box::new(root), "app");
 
         // the root element is always given element ID 0 since it's the container for the entire tree
         dom.elements.insert(None);
@@ -404,7 +418,7 @@ impl VirtualDom {
             tracing::Level::TRACE,
             "Marking task {:?} (spawned in {:?}) as dirty",
             task,
-            scope.id
+            scope.id,
         );
 
         let order = ScopeOrder::new(scope.height(), scope.id);
@@ -485,7 +499,7 @@ impl VirtualDom {
             SchedulerMsg::TaskNotified(id) => {
                 // Instead of running the task immediately, we insert it into the runtime's task queue.
                 // The task may be marked dirty at the same time as the scope that owns the task is dropped.
-                self.mark_task_dirty(id);
+                self.mark_task_dirty(Task::from_id(id));
             }
             SchedulerMsg::EffectQueued => {}
         };
@@ -497,7 +511,7 @@ impl VirtualDom {
         while let Ok(Some(msg)) = self.rx.try_next() {
             match msg {
                 SchedulerMsg::Immediate(id) => self.mark_dirty(id),
-                SchedulerMsg::TaskNotified(task) => self.mark_task_dirty(task),
+                SchedulerMsg::TaskNotified(task) => self.mark_task_dirty(Task::from_id(task)),
                 SchedulerMsg::EffectQueued => {}
             }
         }
@@ -524,24 +538,18 @@ impl VirtualDom {
 
         // Keep polling tasks until there are no more effects or tasks to run
         // Or until we have no more dirty scopes
-        while !self.dirty_tasks.is_empty() || !self.runtime.pending_effects.borrow().is_empty() {
+        while !self.runtime.dirty_tasks.borrow().is_empty()
+            || !self.runtime.pending_effects.borrow().is_empty()
+        {
             // Next, run any queued tasks
             // We choose not to poll the deadline since we complete pretty quickly anyways
             while let Some(task) = self.pop_task() {
-                // Then poll any tasks that might be pending
-                let mut tasks = task.tasks_queued.into_inner();
-                while let Some(task) = tasks.pop_front() {
-                    let _ = self.runtime.handle_task_wakeup(task);
+                let _ = self.runtime.handle_task_wakeup(task);
 
-                    // Running that task, may mark a scope higher up as dirty. If it does, return from the function early
-                    self.queue_events();
-                    if self.has_dirty_scopes() {
-                        // requeue any remaining tasks
-                        for task in tasks {
-                            self.mark_task_dirty(task);
-                        }
-                        return;
-                    }
+                // Running that task, may mark a scope higher up as dirty. If it does, return from the function early
+                self.queue_events();
+                if self.has_dirty_scopes() {
+                    return;
                 }
             }
 
@@ -565,41 +573,45 @@ impl VirtualDom {
     /// This will only replace the parent template, not any nested templates.
     #[instrument(skip(self), level = "trace", name = "VirtualDom::replace_template")]
     pub fn replace_template(&mut self, template: Template) {
-        self.register_template_first_byte_index(template);
-
-        // iterating a slab is very inefficient, but this is a rare operation that will only happen during development so it's fine
-        let mut dirty = Vec::new();
-        for (id, scope) in self.scopes.iter() {
-            // Recurse into the dynamic nodes of the existing mounted node to see if the template is alive in the tree
-            fn check_node_for_templates(node: &VNode, template: Template) -> bool {
-                let this_template_name = node.template.get().name.rsplit_once(':').unwrap().0;
-
-                if this_template_name == template.name.rsplit_once(':').unwrap().0 {
-                    return true;
-                }
+        // we only replace templates if hot reloading is enabled
+        #[cfg(debug_assertions)]
+        {
+            self.register_template_first_byte_index(template);
+
+            // iterating a slab is very inefficient, but this is a rare operation that will only happen during development so it's fine
+            let mut dirty = Vec::new();
+            for (id, scope) in self.scopes.iter() {
+                // Recurse into the dynamic nodes of the existing mounted node to see if the template is alive in the tree
+                fn check_node_for_templates(node: &crate::VNode, template: Template) -> bool {
+                    let this_template_name = node.template.get().name.rsplit_once(':').unwrap().0;
+
+                    if this_template_name == template.name.rsplit_once(':').unwrap().0 {
+                        return true;
+                    }
 
-                for dynamic in node.dynamic_nodes.iter() {
-                    if let crate::DynamicNode::Fragment(nodes) = dynamic {
-                        for node in nodes {
-                            if check_node_for_templates(node, template) {
-                                return true;
+                    for dynamic in node.dynamic_nodes.iter() {
+                        if let crate::DynamicNode::Fragment(nodes) = dynamic {
+                            for node in nodes {
+                                if check_node_for_templates(node, template) {
+                                    return true;
+                                }
                             }
                         }
                     }
-                }
 
-                false
-            }
+                    false
+                }
 
-            if let Some(RenderReturn::Ready(sync)) = scope.try_root_node() {
-                if check_node_for_templates(sync, template) {
-                    dirty.push(ScopeId(id));
+                if let Some(sync) = scope.try_root_node() {
+                    if check_node_for_templates(sync, template) {
+                        dirty.push(ScopeId(id));
+                    }
                 }
             }
-        }
 
-        for dirty in dirty {
-            self.mark_dirty(dirty);
+            for dirty in dirty {
+                self.mark_dirty(dirty);
+            }
         }
     }
 
@@ -647,8 +659,10 @@ impl VirtualDom {
         let _runtime = RuntimeGuard::new(self.runtime.clone());
         let new_nodes = self.run_scope(ScopeId::ROOT);
 
+        self.scopes[ScopeId::ROOT.0].last_rendered_node = Some(new_nodes.clone());
+
         // Rebuilding implies we append the created elements to the root
-        let m = self.create_scope(to, ScopeId::ROOT, new_nodes, None);
+        let m = self.create_scope(Some(to), ScopeId::ROOT, new_nodes, None);
 
         to.append_children(ElementId(0), m);
     }
@@ -666,22 +680,17 @@ impl VirtualDom {
 
         // Next, diff any dirty scopes
         // We choose not to poll the deadline since we complete pretty quickly anyways
+        let _runtime = RuntimeGuard::new(self.runtime.clone());
         while let Some(work) = self.pop_work() {
-            {
-                let _runtime = RuntimeGuard::new(self.runtime.clone());
-
-                // Then, poll any tasks that might be pending in the scope
-                for task in work.tasks {
-                    let _ = self.runtime.handle_task_wakeup(task);
+            match work {
+                Work::PollTask(task) => {
+                    _ = self.runtime.handle_task_wakeup(task);
+                    // Make sure we process any new events
+                    self.queue_events();
                 }
-
-                self.queue_events();
-
-                // If the scope is dirty, run the scope and get the mutations
-                if work.rerun_scope {
-                    let new_nodes = self.run_scope(work.scope.id);
-
-                    self.diff_scope(to, work.scope.id, new_nodes);
+                Work::RerunScope(scope) => {
+                    // If the scope is dirty, run the scope and get the mutations
+                    self.run_and_diff_scope(Some(to), scope.id);
                 }
             }
         }
@@ -705,70 +714,127 @@ impl VirtualDom {
     #[instrument(skip(self), level = "trace", name = "VirtualDom::wait_for_suspense")]
     pub async fn wait_for_suspense(&mut self) {
         loop {
-            if self.runtime.suspended_tasks.get() == 0 {
+            if !self.suspended_tasks_remaining() {
                 break;
             }
 
-            // Wait for a work to be ready (IE new suspense leaves to pop up)
-            'wait_for_work: loop {
-                // Process all events - Scopes are marked dirty, etc
-                // Sometimes when wakers fire we get a slew of updates at once, so its important that we drain this completely
-                self.queue_events();
+            self.wait_for_suspense_work().await;
 
-                // Now that we have collected all queued work, we should check if we have any dirty scopes. If there are not, then we can poll any queued futures
-                if self.has_dirty_scopes() {
-                    break;
-                }
+            self.render_suspense_immediate().await;
+        }
+    }
 
-                {
-                    // Make sure we set the runtime since we're running user code
-                    let _runtime = RuntimeGuard::new(self.runtime.clone());
-                    // Next, run any queued tasks
-                    // We choose not to poll the deadline since we complete pretty quickly anyways
-                    while let Some(task) = self.pop_task() {
-                        // Then poll any tasks that might be pending
-                        let mut tasks = task.tasks_queued.into_inner();
-                        while let Some(task) = tasks.pop_front() {
-                            if self.runtime.task_runs_during_suspense(task) {
-                                let _ = self.runtime.handle_task_wakeup(task);
-                                // Running that task, may mark a scope higher up as dirty. If it does, return from the function early
-                                self.queue_events();
-                                if self.has_dirty_scopes() {
-                                    // requeue any remaining tasks
-                                    for task in tasks {
-                                        self.mark_task_dirty(task);
-                                    }
-                                    break 'wait_for_work;
-                                }
-                            }
-                        }
-                    }
-                }
+    /// Check if there are any suspended tasks remaining
+    pub fn suspended_tasks_remaining(&self) -> bool {
+        self.runtime.suspended_tasks.get() > 0
+    }
 
-                self.wait_for_event().await;
+    /// Wait for the scheduler to have any work that should be run during suspense.
+    pub async fn wait_for_suspense_work(&mut self) {
+        // Wait for a work to be ready (IE new suspense leaves to pop up)
+        loop {
+            // Process all events - Scopes are marked dirty, etc
+            // Sometimes when wakers fire we get a slew of updates at once, so its important that we drain this completely
+            self.queue_events();
+
+            // Now that we have collected all queued work, we should check if we have any dirty scopes. If there are not, then we can poll any queued futures
+            if self.has_dirty_scopes() {
+                break;
             }
 
-            // Render whatever work needs to be rendered, unlocking new futures and suspense leaves
-            let _runtime = RuntimeGuard::new(self.runtime.clone());
-            while let Some(work) = self.pop_work() {
-                // Then, poll any tasks that might be pending in the scope
-                for task in work.tasks {
-                    // During suspense, we only want to run tasks that are suspended
+            {
+                // Make sure we set the runtime since we're running user code
+                let _runtime = RuntimeGuard::new(self.runtime.clone());
+                // Next, run any queued tasks
+                // We choose not to poll the deadline since we complete pretty quickly anyways
+                let mut tasks_polled = 0;
+                while let Some(task) = self.pop_task() {
                     if self.runtime.task_runs_during_suspense(task) {
                         let _ = self.runtime.handle_task_wakeup(task);
+                        // Running that task, may mark a scope higher up as dirty. If it does, return from the function early
+                        self.queue_events();
+                        if self.has_dirty_scopes() {
+                            return;
+                        }
+                    }
+                    tasks_polled += 1;
+                    // Once we have polled a few tasks, we manually yield to the scheduler to give it a chance to run other pending work
+                    if tasks_polled > 32 {
+                        yield_now().await;
+                        tasks_polled = 0;
                     }
                 }
+            }
 
-                self.queue_events();
+            self.wait_for_event().await;
+        }
+    }
+
+    /// Render any dirty scopes immediately, but don't poll any futures that are client only on that scope
+    /// Returns a list of suspense boundaries that were resolved
+    pub async fn render_suspense_immediate(&mut self) -> Vec<ScopeId> {
+        // Queue any new events before we start working
+        self.queue_events();
 
-                // If the scope is dirty, run the scope and get the mutations
-                if work.rerun_scope {
-                    let new_nodes = self.run_scope(work.scope.id);
+        let mut resolved_scopes = Vec::new();
 
-                    self.diff_scope(&mut NoOpMutations, work.scope.id, new_nodes);
+        // Render whatever work needs to be rendered, unlocking new futures and suspense leaves
+        let _runtime = RuntimeGuard::new(self.runtime.clone());
+
+        let mut work_done = 0;
+        while let Some(work) = self.pop_work() {
+            match work {
+                Work::PollTask(task) => {
+                    // During suspense, we only want to run tasks that are suspended
+                    if self.runtime.task_runs_during_suspense(task) {
+                        let _ = self.runtime.handle_task_wakeup(task);
+                    }
+                }
+                Work::RerunScope(scope) => {
+                    if self
+                        .runtime
+                        .get_state(scope.id)
+                        .filter(|scope| scope.should_run_during_suspense())
+                        .is_some()
+                    {
+                        let scope_state = self.get_scope(scope.id).unwrap();
+                        let was_suspended =
+                            SuspenseBoundaryProps::downcast_ref_from_props(&*scope_state.props)
+                                .filter(|props| props.suspended())
+                                .is_some();
+                        // If the scope is dirty, run the scope and get the mutations
+                        self.run_and_diff_scope(None::<&mut NoOpMutations>, scope.id);
+                        let scope_state = self.get_scope(scope.id).unwrap();
+                        let is_now_suspended =
+                            SuspenseBoundaryProps::downcast_ref_from_props(&*scope_state.props)
+                                .filter(|props| props.suspended())
+                                .is_some();
+
+                        if is_now_suspended {
+                            resolved_scopes.retain(|&id| id != scope.id);
+                        } else if was_suspended {
+                            resolved_scopes.push(scope.id);
+                        }
+                    } else {
+                        tracing::warn!(
+                            "Scope {:?} was marked as dirty, but will not rerun during suspense. Only nodes that are under a suspense boundary rerun during suspense",
+                            scope.id
+                        );
+                    }
                 }
             }
+            // Queue any new events
+            self.queue_events();
+            work_done += 1;
+            // Once we have polled a few tasks, we manually yield to the scheduler to give it a chance to run other pending work
+            if work_done > 32 {
+                yield_now().await;
+                work_done = 0;
+            }
         }
+
+        resolved_scopes.sort_by_key(|&id| self.runtime.get_state(id).unwrap().height);
+        resolved_scopes
     }
 
     /// Get the current runtime
@@ -817,7 +883,11 @@ impl VirtualDom {
         while let Some(path) = parent {
             let mut listeners = vec![];
 
-            let el_ref = &self.mounts[path.mount.0].node;
+            let Some(mount) = self.mounts.get(path.mount.0) else {
+                // If the node is suspended and not mounted, we can just ignore the event
+                return;
+            };
+            let el_ref = &mount.node;
             let node_template = el_ref.template.get();
             let target_path = path.path;
 
@@ -827,9 +897,7 @@ impl VirtualDom {
 
                 for attr in attrs.iter() {
                     // Remove the "on" prefix if it exists, TODO, we should remove this and settle on one
-                    if attr.name.trim_start_matches("on") == name
-                        && target_path.is_decendant(this_path)
-                    {
+                    if attr.name.get(2..) == Some(name) && target_path.is_decendant(this_path) {
                         listeners.push(&attr.value);
 
                         // Break if this is the exact target element.
@@ -874,7 +942,11 @@ impl VirtualDom {
         name = "VirtualDom::handle_non_bubbling_event"
     )]
     fn handle_non_bubbling_event(&mut self, node: ElementRef, name: &str, uievent: Event<dyn Any>) {
-        let el_ref = &self.mounts[node.mount.0].node;
+        let Some(mount) = self.mounts.get(node.mount.0) else {
+            // If the node is suspended and not mounted, we can just ignore the event
+            return;
+        };
+        let el_ref = &mount.node;
         let node_template = el_ref.template.get();
         let target_path = node.path;
 
@@ -884,7 +956,7 @@ impl VirtualDom {
             for attr in attrs.iter() {
                 // Remove the "on" prefix if it exists, TODO, we should remove this and settle on one
                 // Only call the listener if this is the exact target element.
-                if attr.name.trim_start_matches("on") == name && target_path == this_path {
+                if attr.name.get(2..) == Some(name) && target_path == this_path {
                     if let AttributeValue::Listener(listener) = &attr.value {
                         self.runtime.rendering.set(false);
                         listener.call(uievent.clone());
@@ -907,3 +979,18 @@ impl Drop for VirtualDom {
         }
     }
 }
+
+/// Yield control back to the async scheduler. This is used to give the scheduler a chance to run other pending work. Or cancel the task if the client has disconnected.
+async fn yield_now() {
+    let mut yielded = false;
+    std::future::poll_fn::<(), _>(move |cx| {
+        if !yielded {
+            cx.waker().wake_by_ref();
+            yielded = true;
+            std::task::Poll::Pending
+        } else {
+            std::task::Poll::Ready(())
+        }
+    })
+    .await;
+}

packages/core/tests/attr_cleanup.rs

@@ -7,6 +7,8 @@ use dioxus::prelude::*;
 
 #[test]
 fn attrs_cycle() {
+    tracing_subscriber::fmt::init();
+
     let mut dom = VirtualDom::new(|| {
         let id = generation();
         match id % 2 {
@@ -26,7 +28,7 @@ fn attrs_cycle() {
         ]
     );
 
-    dom.mark_dirty(ScopeId::ROOT);
+    dom.mark_dirty(ScopeId::APP);
     assert_eq!(
         dom.render_immediate_to_vec().santize().edits,
         [
@@ -38,7 +40,7 @@ fn attrs_cycle() {
         ]
     );
 
-    dom.mark_dirty(ScopeId::ROOT);
+    dom.mark_dirty(ScopeId::APP);
     assert_eq!(
         dom.render_immediate_to_vec().santize().edits,
         [
@@ -47,7 +49,7 @@ fn attrs_cycle() {
         ]
     );
 
-    dom.mark_dirty(ScopeId::ROOT);
+    dom.mark_dirty(ScopeId::APP);
     assert_eq!(
         dom.render_immediate_to_vec().santize().edits,
         [
@@ -70,7 +72,7 @@ fn attrs_cycle() {
     );
 
     // we take the node taken by attributes since we reused it
-    dom.mark_dirty(ScopeId::ROOT);
+    dom.mark_dirty(ScopeId::APP);
     assert_eq!(
         dom.render_immediate_to_vec().santize().edits,
         [

packages/core/tests/bubble_error.rs

@@ -22,7 +22,7 @@ fn bubbles_error() {
         let _edits = dom.rebuild_to_vec().santize();
     }
 
-    dom.mark_dirty(ScopeId::ROOT);
+    dom.mark_dirty(ScopeId::APP);
 
     _ = dom.render_immediate_to_vec();
 }

packages/core/tests/children_drop_futures.rs

@@ -34,7 +34,7 @@ async fn child_futures_drop_first() {
     dom.rebuild(&mut dioxus_core::NoOpMutations);
 
     // Here the parent and task could resolve at the same time, but because the task is in the child, dioxus should run the parent first because the child might be dropped
-    dom.mark_dirty(ScopeId::ROOT);
+    dom.mark_dirty(ScopeId::APP);
 
     tokio::select! {
         _ = dom.wait_for_work() => {}

packages/core/tests/context_api.rs

@@ -27,26 +27,26 @@ fn state_shares() {
         ]
     );
 
-    dom.mark_dirty(ScopeId::ROOT);
+    dom.mark_dirty(ScopeId::APP);
     _ = dom.render_immediate_to_vec();
     dom.in_runtime(|| {
-        assert_eq!(ScopeId::ROOT.consume_context::<i32>().unwrap(), 1);
+        assert_eq!(ScopeId::APP.consume_context::<i32>().unwrap(), 1);
     });
 
-    dom.mark_dirty(ScopeId::ROOT);
+    dom.mark_dirty(ScopeId::APP);
     _ = dom.render_immediate_to_vec();
     dom.in_runtime(|| {
-        assert_eq!(ScopeId::ROOT.consume_context::<i32>().unwrap(), 2);
+        assert_eq!(ScopeId::APP.consume_context::<i32>().unwrap(), 2);
     });
 
-    dom.mark_dirty(ScopeId(2));
+    dom.mark_dirty(ScopeId(ScopeId::APP.0 + 2));
     assert_eq!(
         dom.render_immediate_to_vec().santize().edits,
         [SetText { value: "Value is 2".to_string(), id: ElementId(1,) },]
     );
 
-    dom.mark_dirty(ScopeId::ROOT);
-    dom.mark_dirty(ScopeId(2));
+    dom.mark_dirty(ScopeId::APP);
+    dom.mark_dirty(ScopeId(ScopeId::APP.0 + 2));
     let edits = dom.render_immediate_to_vec();
     assert_eq!(
         edits.santize().edits,

packages/core/tests/cycle.rs

@@ -21,7 +21,7 @@ fn cycling_elements() {
         );
     }
 
-    dom.mark_dirty(ScopeId::ROOT);
+    dom.mark_dirty(ScopeId::APP);
     assert_eq!(
         dom.render_immediate_to_vec().santize().edits,
         [
@@ -31,7 +31,7 @@ fn cycling_elements() {
     );
 
     // notice that the IDs cycle back to ElementId(1), preserving a minimal memory footprint
-    dom.mark_dirty(ScopeId::ROOT);
+    dom.mark_dirty(ScopeId::APP);
     assert_eq!(
         dom.render_immediate_to_vec().santize().edits,
         [
@@ -40,7 +40,7 @@ fn cycling_elements() {
         ]
     );
 
-    dom.mark_dirty(ScopeId::ROOT);
+    dom.mark_dirty(ScopeId::APP);
     assert_eq!(
         dom.render_immediate_to_vec().santize().edits,
         [

packages/core/tests/diff_component.rs

@@ -72,7 +72,7 @@ fn component_swap() {
         );
     }
 
-    dom.mark_dirty(ScopeId::ROOT);
+    dom.mark_dirty(ScopeId::APP);
     assert_eq!(
         dom.render_immediate_to_vec().santize().edits,
         [
@@ -81,7 +81,7 @@ fn component_swap() {
         ]
     );
 
-    dom.mark_dirty(ScopeId::ROOT);
+    dom.mark_dirty(ScopeId::APP);
     assert_eq!(
         dom.render_immediate_to_vec().santize().edits,
         [
@@ -90,7 +90,7 @@ fn component_swap() {
         ]
     );
 
-    dom.mark_dirty(ScopeId::ROOT);
+    dom.mark_dirty(ScopeId::APP);
     assert_eq!(
         dom.render_immediate_to_vec().santize().edits,
         [

packages/core/tests/diff_element.rs

@@ -12,19 +12,19 @@ fn text_diff() {
     let mut vdom = VirtualDom::new(app);
     vdom.rebuild(&mut NoOpMutations);
 
-    vdom.mark_dirty(ScopeId::ROOT);
+    vdom.mark_dirty(ScopeId::APP);
     assert_eq!(
         vdom.render_immediate_to_vec().edits,
         [SetText { value: "hello 1".to_string(), id: ElementId(2) }]
     );
 
-    vdom.mark_dirty(ScopeId::ROOT);
+    vdom.mark_dirty(ScopeId::APP);
     assert_eq!(
         vdom.render_immediate_to_vec().edits,
         [SetText { value: "hello 2".to_string(), id: ElementId(2) }]
     );
 
-    vdom.mark_dirty(ScopeId::ROOT);
+    vdom.mark_dirty(ScopeId::APP);
     assert_eq!(
         vdom.render_immediate_to_vec().edits,
         [SetText { value: "hello 3".to_string(), id: ElementId(2) }]
@@ -46,7 +46,7 @@ fn element_swap() {
     let mut vdom = VirtualDom::new(app);
     vdom.rebuild(&mut NoOpMutations);
 
-    vdom.mark_dirty(ScopeId::ROOT);
+    vdom.mark_dirty(ScopeId::APP);
     assert_eq!(
         vdom.render_immediate_to_vec().santize().edits,
         [
@@ -55,7 +55,7 @@ fn element_swap() {
         ]
     );
 
-    vdom.mark_dirty(ScopeId::ROOT);
+    vdom.mark_dirty(ScopeId::APP);
     assert_eq!(
         vdom.render_immediate_to_vec().santize().edits,
         [
@@ -64,7 +64,7 @@ fn element_swap() {
         ]
     );
 
-    vdom.mark_dirty(ScopeId::ROOT);
+    vdom.mark_dirty(ScopeId::APP);
     assert_eq!(
         vdom.render_immediate_to_vec().santize().edits,
         [
@@ -73,7 +73,7 @@ fn element_swap() {
         ]
     );
 
-    vdom.mark_dirty(ScopeId::ROOT);
+    vdom.mark_dirty(ScopeId::APP);
     assert_eq!(
         vdom.render_immediate_to_vec().santize().edits,
         [
@@ -126,7 +126,7 @@ fn attribute_diff() {
     let mut vdom = VirtualDom::new(app);
     vdom.rebuild(&mut NoOpMutations);
 
-    vdom.mark_dirty(ScopeId::ROOT);
+    vdom.mark_dirty(ScopeId::APP);
     assert_eq!(
         vdom.render_immediate_to_vec().santize().edits,
         [
@@ -145,7 +145,7 @@ fn attribute_diff() {
         ]
     );
 
-    vdom.mark_dirty(ScopeId::ROOT);
+    vdom.mark_dirty(ScopeId::APP);
     assert_eq!(
         vdom.render_immediate_to_vec().santize().edits,
         [
@@ -166,7 +166,7 @@ fn attribute_diff() {
         ]
     );
 
-    vdom.mark_dirty(ScopeId::ROOT);
+    vdom.mark_dirty(ScopeId::APP);
     assert_eq!(
         vdom.render_immediate_to_vec().santize().edits,
         [
@@ -195,7 +195,7 @@ fn diff_empty() {
     let mut vdom = VirtualDom::new(app);
     vdom.rebuild(&mut NoOpMutations);
 
-    vdom.mark_dirty(ScopeId::ROOT);
+    vdom.mark_dirty(ScopeId::APP);
     let edits = vdom.render_immediate_to_vec().santize().edits;
 
     assert_eq!(

packages/core/tests/diff_keyed_list.rs

@@ -39,7 +39,7 @@ fn keyed_diffing_out_of_order() {
         );
     }
 
-    dom.mark_dirty(ScopeId::ROOT);
+    dom.mark_dirty(ScopeId::APP);
     assert_eq!(
         dom.render_immediate_to_vec().edits,
         [
@@ -64,7 +64,7 @@ fn keyed_diffing_out_of_order_adds() {
 
     dom.rebuild(&mut dioxus_core::NoOpMutations);
 
-    dom.mark_dirty(ScopeId::ROOT);
+    dom.mark_dirty(ScopeId::APP);
     assert_eq!(
         dom.render_immediate_to_vec().edits,
         [
@@ -90,7 +90,7 @@ fn keyed_diffing_out_of_order_adds_3() {
 
     dom.rebuild(&mut dioxus_core::NoOpMutations);
 
-    dom.mark_dirty(ScopeId::ROOT);
+    dom.mark_dirty(ScopeId::APP);
     assert_eq!(
         dom.render_immediate_to_vec().edits,
         [
@@ -116,7 +116,7 @@ fn keyed_diffing_out_of_order_adds_4() {
 
     dom.rebuild(&mut dioxus_core::NoOpMutations);
 
-    dom.mark_dirty(ScopeId::ROOT);
+    dom.mark_dirty(ScopeId::APP);
     assert_eq!(
         dom.render_immediate_to_vec().edits,
         [
@@ -142,7 +142,7 @@ fn keyed_diffing_out_of_order_adds_5() {
 
     dom.rebuild(&mut dioxus_core::NoOpMutations);
 
-    dom.mark_dirty(ScopeId::ROOT);
+    dom.mark_dirty(ScopeId::APP);
     assert_eq!(
         dom.render_immediate_to_vec().edits,
         [
@@ -167,7 +167,7 @@ fn keyed_diffing_additions() {
 
     dom.rebuild(&mut dioxus_core::NoOpMutations);
 
-    dom.mark_dirty(ScopeId::ROOT);
+    dom.mark_dirty(ScopeId::APP);
     assert_eq!(
         dom.render_immediate_to_vec().santize().edits,
         [
@@ -192,7 +192,7 @@ fn keyed_diffing_additions_and_moves_on_ends() {
 
     dom.rebuild(&mut dioxus_core::NoOpMutations);
 
-    dom.mark_dirty(ScopeId::ROOT);
+    dom.mark_dirty(ScopeId::APP);
     assert_eq!(
         dom.render_immediate_to_vec().santize().edits,
         [
@@ -222,7 +222,7 @@ fn keyed_diffing_additions_and_moves_in_middle() {
     dom.rebuild(&mut dioxus_core::NoOpMutations);
 
     // LIS: 4, 5, 6
-    dom.mark_dirty(ScopeId::ROOT);
+    dom.mark_dirty(ScopeId::APP);
     assert_eq!(
         dom.render_immediate_to_vec().santize().edits,
         [
@@ -256,7 +256,7 @@ fn controlled_keyed_diffing_out_of_order() {
     dom.rebuild(&mut dioxus_core::NoOpMutations);
 
     // LIS: 5, 6
-    dom.mark_dirty(ScopeId::ROOT);
+    dom.mark_dirty(ScopeId::APP);
     assert_eq!(
         dom.render_immediate_to_vec().santize().edits,
         [
@@ -289,7 +289,7 @@ fn controlled_keyed_diffing_out_of_order_max_test() {
 
     dom.rebuild(&mut dioxus_core::NoOpMutations);
 
-    dom.mark_dirty(ScopeId::ROOT);
+    dom.mark_dirty(ScopeId::APP);
     assert_eq!(
         dom.render_immediate_to_vec().santize().edits,
         [
@@ -318,7 +318,7 @@ fn remove_list() {
 
     dom.rebuild(&mut dioxus_core::NoOpMutations);
 
-    dom.mark_dirty(ScopeId::ROOT);
+    dom.mark_dirty(ScopeId::APP);
     assert_eq!(
         dom.render_immediate_to_vec().santize().edits,
         [
@@ -343,7 +343,7 @@ fn no_common_keys() {
 
     dom.rebuild(&mut dioxus_core::NoOpMutations);
 
-    dom.mark_dirty(ScopeId::ROOT);
+    dom.mark_dirty(ScopeId::APP);
     assert_eq!(
         dom.render_immediate_to_vec().santize().edits,
         [

packages/core/tests/diff_unkeyed_list.rs

@@ -27,7 +27,7 @@ fn list_creates_one_by_one() {
     );
 
     // Rendering the first item should replace the placeholder with an element
-    dom.mark_dirty(ScopeId::ROOT);
+    dom.mark_dirty(ScopeId::APP);
     assert_eq!(
         dom.render_immediate_to_vec().santize().edits,
         [
@@ -38,7 +38,7 @@ fn list_creates_one_by_one() {
     );
 
     // Rendering the next item should insert after the previous
-    dom.mark_dirty(ScopeId::ROOT);
+    dom.mark_dirty(ScopeId::APP);
     assert_eq!(
         dom.render_immediate_to_vec().santize().edits,
         [
@@ -49,7 +49,7 @@ fn list_creates_one_by_one() {
     );
 
     // ... and again!
-    dom.mark_dirty(ScopeId::ROOT);
+    dom.mark_dirty(ScopeId::APP);
     assert_eq!(
         dom.render_immediate_to_vec().santize().edits,
         [
@@ -60,7 +60,7 @@ fn list_creates_one_by_one() {
     );
 
     // once more
-    dom.mark_dirty(ScopeId::ROOT);
+    dom.mark_dirty(ScopeId::APP);
     assert_eq!(
         dom.render_immediate_to_vec().santize().edits,
         [
@@ -107,14 +107,14 @@ fn removes_one_by_one() {
 
     // Remove div(3)
     // Rendering the first item should replace the placeholder with an element
-    dom.mark_dirty(ScopeId::ROOT);
+    dom.mark_dirty(ScopeId::APP);
     assert_eq!(
         dom.render_immediate_to_vec().santize().edits,
         [Remove { id: ElementId(6) }]
     );
 
     // Remove div(2)
-    dom.mark_dirty(ScopeId::ROOT);
+    dom.mark_dirty(ScopeId::APP);
     assert_eq!(
         dom.render_immediate_to_vec().santize().edits,
         [Remove { id: ElementId(4) }]
@@ -122,7 +122,7 @@ fn removes_one_by_one() {
 
     // Remove div(1) and replace with a placeholder
     // todo: this should just be a remove with no placeholder
-    dom.mark_dirty(ScopeId::ROOT);
+    dom.mark_dirty(ScopeId::APP);
     assert_eq!(
         dom.render_immediate_to_vec().santize().edits,
         [
@@ -133,16 +133,16 @@ fn removes_one_by_one() {
 
     // load the 3 and replace the placeholder
     // todo: this should actually be append to, but replace placeholder is fine for now
-    dom.mark_dirty(ScopeId::ROOT);
+    dom.mark_dirty(ScopeId::APP);
     assert_eq!(
         dom.render_immediate_to_vec().santize().edits,
         [
             LoadTemplate { name: "template", index: 0, id: ElementId(2) },
-            HydrateText { path: &[0], value: "0".to_string(), id: ElementId(3) },
-            LoadTemplate { name: "template", index: 0, id: ElementId(5) },
-            HydrateText { path: &[0], value: "1".to_string(), id: ElementId(6) },
-            LoadTemplate { name: "template", index: 0, id: ElementId(7) },
-            HydrateText { path: &[0], value: "2".to_string(), id: ElementId(8) },
+            HydrateText { path: &[0], value: "0".to_string(), id: ElementId(6) },
+            LoadTemplate { name: "template", index: 0, id: ElementId(8) },
+            HydrateText { path: &[0], value: "1".to_string(), id: ElementId(9) },
+            LoadTemplate { name: "template", index: 0, id: ElementId(10) },
+            HydrateText { path: &[0], value: "2".to_string(), id: ElementId(11) },
             ReplaceWith { id: ElementId(4), m: 3 }
         ]
     );
@@ -170,7 +170,7 @@ fn list_shrink_multiroot() {
         ]
     );
 
-    dom.mark_dirty(ScopeId::ROOT);
+    dom.mark_dirty(ScopeId::APP);
     assert_eq!(
         dom.render_immediate_to_vec().santize().edits,
         [
@@ -182,7 +182,7 @@ fn list_shrink_multiroot() {
         ]
     );
 
-    dom.mark_dirty(ScopeId::ROOT);
+    dom.mark_dirty(ScopeId::APP);
     assert_eq!(
         dom.render_immediate_to_vec().santize().edits,
         [
@@ -194,7 +194,7 @@ fn list_shrink_multiroot() {
         ]
     );
 
-    dom.mark_dirty(ScopeId::ROOT);
+    dom.mark_dirty(ScopeId::APP);
     assert_eq!(
         dom.render_immediate_to_vec().santize().edits,
         [
@@ -249,19 +249,19 @@ fn removes_one_by_one_multiroot() {
         ]
     );
 
-    dom.mark_dirty(ScopeId::ROOT);
+    dom.mark_dirty(ScopeId::APP);
     assert_eq!(
         dom.render_immediate_to_vec().santize().edits,
         [Remove { id: ElementId(10) }, Remove { id: ElementId(12) }]
     );
 
-    dom.mark_dirty(ScopeId::ROOT);
+    dom.mark_dirty(ScopeId::APP);
     assert_eq!(
         dom.render_immediate_to_vec().santize().edits,
         [Remove { id: ElementId(6) }, Remove { id: ElementId(8) }]
     );
 
-    dom.mark_dirty(ScopeId::ROOT);
+    dom.mark_dirty(ScopeId::APP);
     assert_eq!(
         dom.render_immediate_to_vec().santize().edits,
         [
@@ -330,7 +330,7 @@ fn remove_many() {
     }
 
     {
-        dom.mark_dirty(ScopeId::ROOT);
+        dom.mark_dirty(ScopeId::APP);
         let edits = dom.render_immediate_to_vec().santize();
         assert_eq!(
             edits.edits,
@@ -343,7 +343,7 @@ fn remove_many() {
     }
 
     {
-        dom.mark_dirty(ScopeId::ROOT);
+        dom.mark_dirty(ScopeId::APP);
         let edits = dom.render_immediate_to_vec().santize();
         assert_eq!(
             edits.edits,
@@ -362,7 +362,7 @@ fn remove_many() {
     }
 
     {
-        dom.mark_dirty(ScopeId::ROOT);
+        dom.mark_dirty(ScopeId::APP);
         let edits = dom.render_immediate_to_vec().santize();
         assert_eq!(
             edits.edits,
@@ -378,13 +378,13 @@ fn remove_many() {
     }
 
     {
-        dom.mark_dirty(ScopeId::ROOT);
+        dom.mark_dirty(ScopeId::APP);
         let edits = dom.render_immediate_to_vec().santize();
         assert_eq!(
             edits.edits,
             [
                 LoadTemplate { name: "template", index: 0, id: ElementId(2,) },
-                HydrateText { path: &[0,], value: "hello 0".to_string(), id: ElementId(3,) },
+                HydrateText { path: &[0,], value: "hello 0".to_string(), id: ElementId(1,) },
                 ReplaceWith { id: ElementId(11,), m: 1 },
             ]
         )

packages/core/tests/error_boundary.rs

@@ -20,13 +20,13 @@ fn app() -> Element {
 }
 
 fn NoneChild() -> Element {
-    None
+    VNode::empty()
 }
 
 fn ThrowChild() -> Element {
-    Err(std::io::Error::new(std::io::ErrorKind::AddrInUse, "asd")).throw()?;
+    Err(std::io::Error::new(std::io::ErrorKind::AddrInUse, "asd"))?;
 
-    let _g: i32 = "123123".parse().throw()?;
+    let _g: i32 = "123123".parse()?;
 
     rsx! { div {} }
 }

packages/core/tests/fuzzing.rs

@@ -75,7 +75,7 @@ fn create_random_template_node(
         1 => TemplateNode::Text {
             text: Box::leak(format!("{}", rand::random::<usize>()).into_boxed_str()),
         },
-        2 => TemplateNode::DynamicText {
+        2 => TemplateNode::Dynamic {
             id: {
                 let old_idx = *template_idx;
                 *template_idx += 1;
@@ -118,9 +118,6 @@ fn generate_paths(
             }
         }
         TemplateNode::Text { .. } => {}
-        TemplateNode::DynamicText { .. } => {
-            node_paths.push(current_path.to_vec());
-        }
         TemplateNode::Dynamic { .. } => {
             node_paths.push(current_path.to_vec());
         }
@@ -265,12 +262,11 @@ fn create_random_element(cx: DepthProps) -> Element {
                     .map(|_| Box::new([create_random_dynamic_attr()]) as Box<[Attribute]>)
                     .collect(),
             );
-            Some(node)
+            node
         }
-        _ => None,
+        _ => VNode::default(),
     };
-    // println!("{node:#?}");
-    node
+    Element::Ok(node)
 }
 
 // test for panics when creating random nodes and templates

packages/core/tests/kitchen_sink.rs

@@ -37,6 +37,7 @@ fn dual_stream() {
     assert_eq!(edits.edits, {
         [
             LoadTemplate { name: "template", index: 0, id: ElementId(1) },
+            HydrateText { path: &[0, 0], value: "123".to_string(), id: ElementId(2) },
             SetAttribute {
                 name: "class",
                 value: "asd 123 123".into_value(),
@@ -44,7 +45,6 @@ fn dual_stream() {
                 ns: None,
             },
             NewEventListener { name: "click".to_string(), id: ElementId(1) },
-            HydrateText { path: &[0, 0], value: "123".to_string(), id: ElementId(2) },
             AppendChildren { id: ElementId(0), m: 1 },
         ]
     });

packages/core/tests/lifecycle.rs

@@ -52,7 +52,7 @@ fn events_generate() {
                     "Click me!"
                 }
             },
-            _ => None,
+            _ => VNode::empty(),
         }
     };
 
@@ -66,7 +66,7 @@ fn events_generate() {
         true,
     );
 
-    dom.mark_dirty(ScopeId::ROOT);
+    dom.mark_dirty(ScopeId::APP);
     let edits = dom.render_immediate_to_vec();
 
     assert_eq!(

packages/core/tests/miri_simple.rs

@@ -9,7 +9,7 @@ fn app_drops() {
     let mut dom = VirtualDom::new(app);
 
     dom.rebuild(&mut dioxus_core::NoOpMutations);
-    dom.mark_dirty(ScopeId::ROOT);
+    dom.mark_dirty(ScopeId::APP);
     _ = dom.render_immediate_to_vec();
 }
 
@@ -27,7 +27,7 @@ fn hooks_drop() {
     let mut dom = VirtualDom::new(app);
 
     dom.rebuild(&mut dioxus_core::NoOpMutations);
-    dom.mark_dirty(ScopeId::ROOT);
+    dom.mark_dirty(ScopeId::APP);
     _ = dom.render_immediate_to_vec();
 }
 
@@ -51,7 +51,7 @@ fn contexts_drop() {
     let mut dom = VirtualDom::new(app);
 
     dom.rebuild(&mut dioxus_core::NoOpMutations);
-    dom.mark_dirty(ScopeId::ROOT);
+    dom.mark_dirty(ScopeId::APP);
     _ = dom.render_immediate_to_vec();
 }
 
@@ -68,7 +68,7 @@ fn tasks_drop() {
     let mut dom = VirtualDom::new(app);
 
     dom.rebuild(&mut dioxus_core::NoOpMutations);
-    dom.mark_dirty(ScopeId::ROOT);
+    dom.mark_dirty(ScopeId::APP);
     _ = dom.render_immediate_to_vec();
 }
 
@@ -83,7 +83,7 @@ fn root_props_drop() {
     );
 
     dom.rebuild(&mut dioxus_core::NoOpMutations);
-    dom.mark_dirty(ScopeId::ROOT);
+    dom.mark_dirty(ScopeId::APP);
     _ = dom.render_immediate_to_vec();
 }
 
@@ -113,7 +113,7 @@ fn diffing_drops_old() {
 
     let mut dom = VirtualDom::new(app);
     dom.rebuild(&mut dioxus_core::NoOpMutations);
-    dom.mark_dirty(ScopeId::ROOT);
+    dom.mark_dirty(ScopeId::APP);
 
     _ = dom.render_immediate_to_vec();
 }
@@ -141,6 +141,6 @@ fn hooks_drop_before_contexts() {
     let mut dom = VirtualDom::new(app);
 
     dom.rebuild(&mut dioxus_core::NoOpMutations);
-    dom.mark_dirty(ScopeId::ROOT);
+    dom.mark_dirty(ScopeId::APP);
     _ = dom.render_immediate_to_vec();
 }

packages/core/tests/miri_stress.rs

@@ -63,7 +63,7 @@ fn test_memory_leak() {
     dom.rebuild(&mut dioxus_core::NoOpMutations);
 
     for _ in 0..5 {
-        dom.mark_dirty(ScopeId::ROOT);
+        dom.mark_dirty(ScopeId::APP);
         _ = dom.render_immediate_to_vec();
     }
 }
@@ -74,7 +74,7 @@ fn memo_works_properly() {
         let val = generation();
 
         if val == 2 || val == 4 {
-            return None;
+            return Element::Ok(VNode::default());
         }
 
         let name = use_hook(|| String::from("asd"));
@@ -123,7 +123,7 @@ fn free_works_on_root_hooks() {
     dom.rebuild(&mut dioxus_core::NoOpMutations);
 
     // ptr gets cloned into props and then into the hook
-    assert_eq!(Rc::strong_count(&ptr), 5);
+    assert!(Rc::strong_count(&ptr) > 1);
 
     drop(dom);
 

packages/core/tests/suspense.rs

@@ -2,6 +2,22 @@ use dioxus::prelude::*;
 use std::future::poll_fn;
 use std::task::Poll;
 
+async fn poll_three_times() {
+    // Poll each task 3 times
+    let mut count = 0;
+    poll_fn(|cx| {
+        println!("polling... {}", count);
+        if count < 3 {
+            count += 1;
+            cx.waker().wake_by_ref();
+            Poll::Pending
+        } else {
+            Poll::Ready(())
+        }
+    })
+    .await;
+}
+
 #[test]
 fn suspense_resolves() {
     // wait just a moment, not enough time for the boundary to resolve
@@ -15,8 +31,6 @@ fn suspense_resolves() {
             let out = dioxus_ssr::render(&dom);
 
             assert_eq!(out, "<div>Waiting for... child</div>");
-
-            dbg!(out);
         });
 }
 
@@ -24,7 +38,10 @@ fn app() -> Element {
     rsx!(
         div {
             "Waiting for... "
-            suspended_child {}
+            SuspenseBoundary {
+                fallback: |_| rsx! { "fallback" },
+                suspended_child {}
+            }
         }
     )
 }
@@ -43,20 +60,7 @@ fn suspended_child() -> Element {
 
     if val() < 3 {
         let task = spawn(async move {
-            // Poll each task 3 times
-            let mut count = 0;
-            poll_fn(|cx| {
-                println!("polling... {}", count);
-                if count < 3 {
-                    count += 1;
-                    cx.waker().wake_by_ref();
-                    Poll::Pending
-                } else {
-                    Poll::Ready(())
-                }
-            })
-            .await;
-
+            poll_three_times().await;
             println!("waiting... {}", val);
             val += 1;
         });
@@ -65,3 +69,306 @@ fn suspended_child() -> Element {
 
     rsx!("child")
 }
+
+/// When switching from a suspense fallback to the real child, the state of that component must be kept
+#[test]
+fn suspense_keeps_state() {
+    tokio::runtime::Builder::new_current_thread()
+        .enable_time()
+        .build()
+        .unwrap()
+        .block_on(async {
+            let mut dom = VirtualDom::new(app);
+            dom.rebuild(&mut dioxus_core::NoOpMutations);
+            dom.render_suspense_immediate().await;
+
+            let out = dioxus_ssr::render(&dom);
+
+            assert_eq!(out, "fallback");
+
+            dom.wait_for_suspense().await;
+            let out = dioxus_ssr::render(&dom);
+
+            assert_eq!(out, "<div>child with future resolved</div>");
+        });
+
+    fn app() -> Element {
+        rsx! {
+            SuspenseBoundary {
+                fallback: |_| rsx! { "fallback" },
+                Child {}
+            }
+        }
+    }
+
+    #[component]
+    fn Child() -> Element {
+        let mut future_resolved = use_signal(|| false);
+
+        let task = use_hook(|| {
+            spawn(async move {
+                tokio::time::sleep(std::time::Duration::from_millis(100)).await;
+                future_resolved.set(true);
+            })
+        });
+        if !future_resolved() {
+            suspend(task)?;
+        }
+
+        println!("future resolved: {future_resolved:?}");
+
+        if future_resolved() {
+            rsx! {
+                div { "child with future resolved" }
+            }
+        } else {
+            rsx! {
+                div { "this should never be rendered" }
+            }
+        }
+    }
+}
+
+/// spawn doesn't run in suspense
+#[test]
+fn suspense_does_not_poll_spawn() {
+    tokio::runtime::Builder::new_current_thread()
+        .enable_time()
+        .build()
+        .unwrap()
+        .block_on(async {
+            let mut dom = VirtualDom::new(app);
+            dom.rebuild(&mut dioxus_core::NoOpMutations);
+
+            dom.wait_for_suspense().await;
+            let out = dioxus_ssr::render(&dom);
+
+            assert_eq!(out, "<div>child with future resolved</div>");
+        });
+
+    fn app() -> Element {
+        rsx! {
+            SuspenseBoundary {
+                fallback: |_| rsx! { "fallback" },
+                Child {}
+            }
+        }
+    }
+
+    #[component]
+    fn Child() -> Element {
+        let mut future_resolved = use_signal(|| false);
+
+        // futures that are spawned, but not suspended should never be polled
+        use_hook(|| {
+            spawn(async move {
+                panic!("Non-suspended task was polled");
+            });
+        });
+
+        let task = use_hook(|| {
+            spawn(async move {
+                tokio::time::sleep(std::time::Duration::from_millis(100)).await;
+                future_resolved.set(true);
+            })
+        });
+        if !future_resolved() {
+            suspend(task)?;
+        }
+
+        rsx! {
+            div { "child with future resolved" }
+        }
+    }
+}
+
+/// suspended nodes are not mounted, so they should not run effects
+#[test]
+fn suspended_nodes_dont_trigger_effects() {
+    tokio::runtime::Builder::new_current_thread()
+        .enable_time()
+        .build()
+        .unwrap()
+        .block_on(async {
+            let mut dom = VirtualDom::new(app);
+            dom.rebuild(&mut dioxus_core::NoOpMutations);
+
+            let work = async move {
+                loop {
+                    dom.wait_for_work().await;
+                    dom.render_immediate(&mut dioxus_core::NoOpMutations);
+                }
+            };
+            tokio::select! {
+                _ = work => {},
+                _ = tokio::time::sleep(std::time::Duration::from_millis(100)) => {}
+            }
+        });
+
+    fn app() -> Element {
+        rsx! {
+            SuspenseBoundary {
+                fallback: |_| rsx! { "fallback" },
+                Child {}
+            }
+        }
+    }
+
+    #[component]
+    fn RerendersFrequently() -> Element {
+        let mut count = use_signal(|| 0);
+
+        use_future(move || async move {
+            for _ in 0..100 {
+                tokio::time::sleep(std::time::Duration::from_millis(10)).await;
+                count.set(count() + 1);
+            }
+        });
+
+        rsx! {
+            div { "rerenders frequently" }
+        }
+    }
+
+    #[component]
+    fn Child() -> Element {
+        let mut future_resolved = use_signal(|| false);
+
+        use_effect(|| panic!("effects should not run during suspense"));
+
+        let task = use_hook(|| {
+            spawn(async move {
+                tokio::time::sleep(std::time::Duration::from_millis(500)).await;
+                future_resolved.set(true);
+            })
+        });
+        if !future_resolved() {
+            suspend(task)?;
+        }
+
+        rsx! {
+            div { "child with future resolved" }
+        }
+    }
+}
+
+/// Make sure we keep any state of components when we switch from a resolved future to a suspended future
+#[test]
+fn resolved_to_suspended() {
+    tracing_subscriber::fmt::SubscriberBuilder::default()
+        .with_max_level(tracing::Level::INFO)
+        .init();
+
+    static SUSPENDED: GlobalSignal<bool> = Signal::global(|| false);
+
+    tokio::runtime::Builder::new_current_thread()
+        .enable_time()
+        .build()
+        .unwrap()
+        .block_on(async {
+            let mut dom = VirtualDom::new(app);
+            dom.rebuild(&mut dioxus_core::NoOpMutations);
+
+            let out = dioxus_ssr::render(&dom);
+
+            assert_eq!(out, "rendered 1 times");
+
+            dom.in_runtime(|| ScopeId::APP.in_runtime(|| *SUSPENDED.write() = true));
+
+            dom.render_suspense_immediate().await;
+            let out = dioxus_ssr::render(&dom);
+
+            assert_eq!(out, "fallback");
+
+            dom.wait_for_suspense().await;
+            let out = dioxus_ssr::render(&dom);
+
+            assert_eq!(out, "rendered 3 times");
+        });
+
+    fn app() -> Element {
+        rsx! {
+            SuspenseBoundary {
+                fallback: |_| rsx! { "fallback" },
+                Child {}
+            }
+        }
+    }
+
+    #[component]
+    fn Child() -> Element {
+        let mut render_count = use_signal(|| 0);
+        render_count += 1;
+
+        let mut task = use_hook(|| CopyValue::new(None));
+
+        tracing::info!("render_count: {}", render_count.peek());
+
+        if SUSPENDED() {
+            if task().is_none() {
+                task.set(Some(spawn(async move {
+                    tokio::time::sleep(std::time::Duration::from_millis(100)).await;
+                    tracing::info!("task finished");
+                    *SUSPENDED.write() = false;
+                })));
+            }
+            suspend(task().unwrap())?;
+        }
+
+        rsx! {
+            "rendered {render_count.peek()} times"
+        }
+    }
+}
+
+/// Make sure suspense tells the renderer that a suspense boundary was resolved
+#[test]
+fn suspense_tracks_resolved() {
+    tokio::runtime::Builder::new_current_thread()
+        .enable_time()
+        .build()
+        .unwrap()
+        .block_on(async {
+            let mut dom = VirtualDom::new(app);
+            dom.rebuild(&mut dioxus_core::NoOpMutations);
+
+            dom.render_suspense_immediate().await;
+            dom.wait_for_suspense_work().await;
+            assert_eq!(
+                dom.render_suspense_immediate().await,
+                vec![ScopeId(ScopeId::APP.0 + 1)]
+            );
+        });
+
+    fn app() -> Element {
+        rsx! {
+            SuspenseBoundary {
+                fallback: |_| rsx! { "fallback" },
+                Child {}
+            }
+        }
+    }
+
+    #[component]
+    fn Child() -> Element {
+        let mut resolved = use_signal(|| false);
+        let task = use_hook(|| {
+            spawn(async move {
+                tokio::time::sleep(std::time::Duration::from_millis(100)).await;
+                tracing::info!("task finished");
+                resolved.set(true);
+            })
+        });
+
+        if resolved() {
+            println!("suspense is resolved");
+        } else {
+            println!("suspense is not resolved");
+            suspend(task)?;
+        }
+
+        rsx! {
+            "child"
+        }
+    }
+}

packages/core/tests/task.rs

@@ -126,95 +126,3 @@ async fn yield_now_works() {
 
     SEQUENCE.with(|s| assert_eq!(s.borrow().len(), 20));
 }
-
-/// Ensure that calling wait_for_flush waits for dioxus to finish its synchronous work
-#[tokio::test]
-async fn flushing() {
-    thread_local! {
-        static SEQUENCE: std::cell::RefCell<Vec<usize>> = const { std::cell::RefCell::new(Vec::new()) };
-        static BROADCAST: (tokio::sync::broadcast::Sender<()>, tokio::sync::broadcast::Receiver<()>) = tokio::sync::broadcast::channel(1);
-    }
-
-    fn app() -> Element {
-        if generation() > 0 {
-            println!("App");
-            SEQUENCE.with(|s| s.borrow_mut().push(0));
-        }
-
-        // The next two tasks mimic effects. They should only be run after the app has been rendered
-        use_hook(|| {
-            spawn(async move {
-                let mut channel = BROADCAST.with(|b| b.1.resubscribe());
-                for _ in 0..10 {
-                    wait_for_next_render().await;
-                    println!("Task 1 recved");
-                    channel.recv().await.unwrap();
-                    println!("Task 1");
-                    SEQUENCE.with(|s| s.borrow_mut().push(1));
-                }
-            })
-        });
-
-        use_hook(|| {
-            spawn(async move {
-                let mut channel = BROADCAST.with(|b| b.1.resubscribe());
-                for _ in 0..10 {
-                    wait_for_next_render().await;
-                    println!("Task 2 recved");
-                    channel.recv().await.unwrap();
-                    println!("Task 2");
-                    SEQUENCE.with(|s| s.borrow_mut().push(2));
-                }
-            })
-        });
-
-        rsx! {}
-    }
-
-    let mut dom = VirtualDom::new(app);
-
-    dom.rebuild(&mut dioxus_core::NoOpMutations);
-
-    let fut = async {
-        // Trigger the flush by waiting for work
-        for i in 0..10 {
-            BROADCAST.with(|b| b.0.send(()).unwrap());
-            dom.mark_dirty(ScopeId(0));
-            dom.wait_for_work().await;
-            dom.render_immediate(&mut dioxus_core::NoOpMutations);
-            println!("Flushed {}", i);
-        }
-        BROADCAST.with(|b| b.0.send(()).unwrap());
-        dom.wait_for_work().await;
-    };
-
-    tokio::select! {
-        _ = fut => {}
-        _ = tokio::time::sleep(Duration::from_millis(500)) => {
-            println!("Aborting due to timeout");
-        }
-    };
-
-    SEQUENCE.with(|s| {
-        let s = s.borrow();
-        println!("{:?}", s);
-        assert_eq!(s.len(), 30);
-        // We need to check if every three elements look like [0, 1, 2] or [0, 2, 1]
-        let mut has_seen_1 = false;
-        for (i, &x) in s.iter().enumerate() {
-            let stage = i % 3;
-            if stage == 0 {
-                assert_eq!(x, 0);
-            } else if stage == 1 {
-                assert!(x == 1 || x == 2);
-                has_seen_1 = x == 1;
-            } else if stage == 2 {
-                if has_seen_1 {
-                    assert_eq!(x, 2);
-                } else {
-                    assert_eq!(x, 1);
-                }
-            }
-        }
-    });
-}

packages/desktop/Cargo.toml

@@ -155,8 +155,8 @@ path = "../../examples/dynamic_asset.rs"
 doc-scrape-examples = true
 
 [[example]]
-name = "error_handle"
-path = "../../examples/error_handle.rs"
+name = "errors"
+path = "../../examples/errors.rs"
 doc-scrape-examples = true
 
 [[example]]

packages/desktop/headless_tests/eval.rs

@@ -61,5 +61,5 @@ fn app() -> Element {
         }
     });
 
-    None
+    VNode::empty()
 }

packages/dioxus/Cargo.toml

@@ -12,16 +12,16 @@ rust-version = "1.65.0"
 
 [dependencies]
 dioxus-core = { workspace = true }
-dioxus-html = { workspace = true, optional = true }
+dioxus-html = { workspace = true, default-features = false, optional = true }
 dioxus-core-macro = { workspace = true, optional = true }
 dioxus-config-macro = { workspace = true, optional = true }
 dioxus-hooks = { workspace = true, optional = true }
 dioxus-signals = { workspace = true, optional = true }
 dioxus-router = { workspace = true, optional = true }
-dioxus-web = { workspace = true, optional = true }
+dioxus-web = { workspace = true, default-features = false, optional = true }
 dioxus-mobile = { workspace = true, optional = true }
 dioxus-desktop = { workspace = true, default-features = true, optional = true }
-dioxus-fullstack = { workspace = true, optional = true }
+dioxus-fullstack = { workspace = true, default-features = true, optional = true }
 dioxus-static-site-generation = { workspace = true, optional = true }
 dioxus-liveview = { workspace = true, optional = true }
 dioxus-ssr ={ workspace = true, optional = true }
@@ -33,12 +33,16 @@ axum = { workspace = true, optional = true }
 dioxus-hot-reload = { workspace = true, optional = true }
 
 [features]
-default = ["macro", "html", "hot-reload", "signals", "hooks", "launch"]
+default = ["macro", "html", "hot-reload", "signals", "hooks", "launch", "mounted", "file_engine", "eval"]
+minimal = ["macro", "html", "signals", "hooks", "launch"]
 signals = ["dep:dioxus-signals"]
 macro = ["dep:dioxus-core-macro"]
 html = ["dep:dioxus-html"]
 hooks = ["dep:dioxus-hooks"]
-hot-reload = ["dep:dioxus-hot-reload"]
+hot-reload = ["dep:dioxus-hot-reload", "dioxus-web?/hot_reload", "dioxus-fullstack?/hot-reload"]
+mounted = ["dioxus-web?/mounted", "dioxus-html?/mounted"]
+file_engine = ["dioxus-web?/file_engine"]
+eval = ["dioxus-web?/eval", "dioxus-html?/eval"]
 
 launch = ["dep:dioxus-config-macro"]
 router = ["dep:dioxus-router"]

packages/dioxus/src/lib.rs

@@ -26,6 +26,7 @@
 #![cfg_attr(docsrs, feature(doc_cfg))]
 
 pub use dioxus_core;
+pub use dioxus_core::{CapturedError, Ok, Result};
 
 #[cfg(feature = "launch")]
 #[cfg_attr(docsrs, doc(cfg(feature = "launch")))]

packages/fullstack/Cargo.toml

@@ -27,7 +27,8 @@ hyper = { workspace = true, optional = true }
 http = { workspace = true, optional = true }
 
 # Web Integration
-dioxus-web = { workspace = true, features = ["hydrate"], optional = true }
+dioxus-web = { workspace = true, features = ["hydrate"], default-features = false, optional = true }
+dioxus-interpreter-js = { workspace = true, optional = true }
 
 # Desktop Integration
 dioxus-desktop = { workspace = true, optional = true }
@@ -37,22 +38,23 @@ dioxus-mobile = { workspace = true, optional = true }
 
 tracing = { workspace = true }
 tracing-futures = { workspace = true, optional = true }
-once_cell = "1.17.1"
+once_cell = { workspace = true }
 tokio-util = { version = "0.7.8", features = ["rt"], optional = true }
+async-trait = { version = "0.1.58", optional = true }
 
 serde = "1.0.159"
-serde_json = { version = "1.0.95", optional = true }
 tokio-stream = { version = "0.1.12", features = ["sync"], optional = true }
 futures-util = { workspace = true }
-ciborium = "0.2.1"
-base64 = "0.21.0"
+futures-channel = { workspace = true }
+ciborium = { workspace = true }
+base64 = { workspace = true }
 
 pin-project = { version = "1.1.2", optional = true }
 thiserror = { workspace = true, optional = true }
-async-trait = "0.1.71"
 bytes = "1.4.0"
 tower = { workspace = true, features = ["util"], optional = true }
 tower-layer = { version = "0.3.2", optional = true }
+parking_lot = { version = "0.12.1", features = ["send_guard"], optional = true }
 web-sys = { version = "0.3.61", optional = true, features = ["Window", "Document", "Element", "HtmlDocument", "Storage", "console"] }
 
 dioxus-cli-config = { workspace = true, features = ["read-config"], optional = true }
@@ -69,14 +71,18 @@ tokio = { workspace = true, features = ["rt", "sync", "rt-multi-thread"], option
 dioxus = { workspace = true, features = ["fullstack"] }
 
 [features]
-default = ["hot-reload"]
-hot-reload = ["dep:serde_json", "dioxus-hot-reload/serve"]
+default = ["hot-reload", "panic_hook"]
+panic_hook = ["dioxus-web?/panic_hook"]
+hot-reload = ["dioxus-web?/hot_reload", "dioxus-hot-reload/serve"]
+mounted = ["dioxus-web?/mounted"]
+file_engine = ["dioxus-web?/file_engine"]
+eval = ["dioxus-web?/eval"]
 web = ["dep:dioxus-web", "dep:web-sys"]
-desktop = ["dep:dioxus-desktop", "server_fn/reqwest", "dioxus_server_macro/reqwest"] 
+desktop = ["dep:dioxus-desktop", "server_fn/reqwest", "dioxus_server_macro/reqwest"]
 mobile = ["dep:dioxus-mobile"]
 default-tls = ["server_fn/default-tls"]
 rustls = ["server_fn/rustls"]
-axum = ["dep:axum", "dep:tower-http", "server", "server_fn/axum", "dioxus_server_macro/axum"]
+axum = ["dep:axum", "dep:tower-http", "server", "server_fn/axum", "dioxus_server_macro/axum", "default-tls"]
 static-site-generation = []
 server = [
     "server_fn/ssr",
@@ -94,6 +100,9 @@ server = [
     "dep:pin-project",
     "dep:thiserror",
     "dep:dioxus-cli-config",
+    "dep:async-trait",
+    "dep:parking_lot",
+    "dioxus-interpreter-js",
     "dep:clap",
     "dioxus-cli-config/cli"
 ]

packages/fullstack/examples/axum-auth/src/main.rs

@@ -50,7 +50,6 @@ fn main() {
                 let app = Router::new()
                     // Server side render the application, serve static assets, and register server functions
                     .serve_dioxus_application(ServeConfig::default(), app)
-                    .await
                     .layer(
                         axum_session_auth::AuthSessionLayer::<
                             crate::auth::User,

packages/fullstack/examples/axum-hello-world/Cargo.toml

@@ -18,4 +18,4 @@ reqwest = "0.11.18"
 [features]
 default = []
 server = ["dioxus/axum"]
-web = ["dioxus/web"]
+web = ["dioxus/web"]

packages/fullstack/examples/axum-hello-world/src/main.rs

@@ -28,7 +28,6 @@ fn app() -> Element {
             "Run a server function!"
         }
         "Server said: {text}"
-        "{server_future.state():?}"
     }
 }
 

packages/fullstack/examples/hackernews/.gitignore

@@ -0,0 +1,2 @@
+/static
+/dist

packages/fullstack/examples/hackernews/Cargo.toml

@@ -0,0 +1,21 @@
+[package]
+name = "dioxus-hackernews"
+version = "0.1.0"
+authors = ["Evan Almloff <evanalmloff@gmail.com>"]
+edition = "2021"
+
+# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
+
+[dependencies]
+dioxus = { workspace = true, features = ["fullstack", "router"] }
+chrono = { version = "0.4.38", features = ["serde"] }
+reqwest = { version = "0.12.4", features = ["json"] }
+serde = { version = "1.0.203", features = ["derive"] }
+tracing-wasm = "0.2.1"
+tracing = { workspace = true }
+tracing-subscriber = "0.3.17"
+
+[features]
+default = []
+server = ["dioxus/axum"]
+web = ["dioxus/web"]

packages/fullstack/examples/hackernews/src/main.rs

@@ -0,0 +1,326 @@
+#![allow(non_snake_case, unused)]
+use dioxus::prelude::*;
+// Define the Hackernews API and types
+use chrono::{DateTime, Utc};
+use serde::{Deserialize, Serialize};
+use std::{
+    fmt::{Display, Formatter},
+    num::ParseIntError,
+    str::FromStr,
+};
+use svg_attributes::to;
+
+fn main() {
+    #[cfg(feature = "web")]
+    tracing_wasm::set_as_global_default();
+
+    #[cfg(feature = "server")]
+    tracing_subscriber::fmt::init();
+
+    launch(|| rsx! { Router::<Route> {} });
+}
+
+#[derive(Clone, Routable)]
+enum Route {
+    #[redirect("/", || Route::Homepage { story: PreviewState { active_story: None } })]
+    #[route("/:story")]
+    Homepage { story: PreviewState },
+}
+
+pub fn App() -> Element {
+    rsx! {
+        Router::<Route> {}
+    }
+}
+
+const STYLE: &str = r#"@keyframes spin {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}
+.spinner {
+    width: 10px;
+    height: 10px;
+    border: 4px solid #f3f3f3;
+    border-top: 4px solid #3498db;
+    border-radius: 50%;
+    animation: spin 2s linear infinite;
+}"#;
+
+#[component]
+fn Homepage(story: ReadOnlySignal<PreviewState>) -> Element {
+    rsx! {
+        style {
+            {STYLE}
+        }
+        div { display: "flex", flex_direction: "row", width: "100%",
+            div {
+                width: "50%",
+                SuspenseBoundary {
+                    fallback: |context: SuspenseContext| rsx! {
+                        "Loading..."
+                    },
+                    Stories {}
+                }
+            }
+            div { width: "50%",
+                SuspenseBoundary {
+                    fallback: |context: SuspenseContext| rsx! {
+                        "Loading preview..."
+                    },
+                    Preview {
+                        story
+                    }
+                }
+            }
+        }
+    }
+}
+
+#[component]
+fn Stories() -> Element {
+    let stories: Resource<dioxus::Result<Vec<i64>>> = use_server_future(move || async move {
+        let url = format!("{}topstories.json", BASE_API_URL);
+        let mut stories_ids = reqwest::get(&url).await?.json::<Vec<i64>>().await?;
+        stories_ids.truncate(30);
+        Ok(stories_ids)
+    })?;
+
+    match stories().unwrap() {
+        Ok(list) => rsx! {
+            div {
+                for story in list {
+                    ChildrenOrLoading {
+                        key: "{story}",
+                        StoryListing { story }
+                    }
+                }
+            }
+        },
+        Err(err) => rsx! {"An error occurred while fetching stories {err}"},
+    }
+}
+
+#[component]
+fn StoryListing(story: ReadOnlySignal<i64>) -> Element {
+    let story = use_server_future(move || get_story(story()))?;
+
+    let StoryItem {
+        title,
+        url,
+        by,
+        score,
+        time,
+        kids,
+        id,
+        ..
+    } = story().unwrap()?.item;
+
+    let url = url.as_deref().unwrap_or_default();
+    let hostname = url
+        .trim_start_matches("https://")
+        .trim_start_matches("http://")
+        .trim_start_matches("www.");
+    let score = format!("{score} {}", if score == 1 { " point" } else { " points" });
+    let comments = format!(
+        "{} {}",
+        kids.len(),
+        if kids.len() == 1 {
+            " comment"
+        } else {
+            " comments"
+        }
+    );
+    let time = time.format("%D %l:%M %p");
+
+    rsx! {
+        div {
+            padding: "0.5rem",
+            position: "relative",
+            div { font_size: "1.5rem",
+                Link {
+                    to: Route::Homepage { story: PreviewState { active_story: Some(id) } },
+                    "{title}"
+                }
+                a {
+                    color: "gray",
+                    href: "https://news.ycombinator.com/from?site={hostname}",
+                    text_decoration: "none",
+                    " ({hostname})"
+                }
+            }
+            div { display: "flex", flex_direction: "row", color: "gray",
+                div { "{score}" }
+                div { padding_left: "0.5rem", "by {by}" }
+                div { padding_left: "0.5rem", "{time}" }
+                div { padding_left: "0.5rem", "{comments}" }
+            }
+        }
+    }
+}
+
+#[derive(Clone, Debug, Default)]
+struct PreviewState {
+    active_story: Option<i64>,
+}
+
+impl FromStr for PreviewState {
+    type Err = ParseIntError;
+
+    fn from_str(s: &str) -> Result<Self, Self::Err> {
+        let state = i64::from_str(s)?;
+        Ok(PreviewState {
+            active_story: Some(state),
+        })
+    }
+}
+
+impl Display for PreviewState {
+    fn fmt(&self, f: &mut Formatter<'_>) -> std::fmt::Result {
+        if let Some(id) = &self.active_story {
+            write!(f, "{id}")?;
+        }
+        Ok(())
+    }
+}
+
+#[component]
+fn Preview(story: ReadOnlySignal<PreviewState>) -> Element {
+    let PreviewState {
+        active_story: Some(id),
+    } = story()
+    else {
+        return rsx! {"Hover over a story to preview it here"};
+    };
+
+    let story = use_server_future(use_reactive!(|id| get_story(id)))?;
+
+    let story = story().unwrap()?;
+
+    rsx! {
+        div { padding: "0.5rem",
+            div { font_size: "1.5rem", a { href: story.item.url, "{story.item.title}" } }
+            if let Some(text) = &story.item.text { div { dangerous_inner_html: "{text}" } }
+            for comment in story.item.kids.iter().copied() {
+                ChildrenOrLoading {
+                    key: "{comment}",
+                    Comment { comment }
+                }
+            }
+        }
+    }
+}
+
+#[component]
+fn Comment(comment: i64) -> Element {
+    let comment: Resource<dioxus::Result<CommentData>> =
+        use_server_future(use_reactive!(|comment| async move {
+            let url = format!("{}{}{}.json", BASE_API_URL, ITEM_API, comment);
+            let mut comment = reqwest::get(&url).await?.json::<CommentData>().await?;
+            Ok(comment)
+        }))?;
+
+    let CommentData {
+        by,
+        time,
+        text,
+        id,
+        kids,
+        ..
+    } = comment().unwrap()?;
+
+    rsx! {
+        div { padding: "0.5rem",
+            div { color: "gray", "by {by}" }
+            div { dangerous_inner_html: "{text}" }
+            for comment in kids.iter().copied() {
+                ChildrenOrLoading {
+                    key: "{comment}",
+                    Comment { comment }
+                }
+            }
+        }
+    }
+}
+
+pub static BASE_API_URL: &str = "https://hacker-news.firebaseio.com/v0/";
+pub static ITEM_API: &str = "item/";
+pub static USER_API: &str = "user/";
+const COMMENT_DEPTH: i64 = 1;
+
+#[derive(Clone, Debug, PartialEq, Serialize, Deserialize)]
+pub struct StoryPageData {
+    #[serde(flatten)]
+    pub item: StoryItem,
+    #[serde(default)]
+    pub comments: Vec<CommentData>,
+}
+
+#[derive(Clone, Debug, PartialEq, Serialize, Deserialize)]
+pub struct CommentData {
+    pub id: i64,
+    /// there will be no by field if the comment was deleted
+    #[serde(default)]
+    pub by: String,
+    #[serde(default)]
+    pub text: String,
+    #[serde(with = "chrono::serde::ts_seconds")]
+    pub time: DateTime<Utc>,
+    #[serde(default)]
+    pub kids: Vec<i64>,
+    pub r#type: String,
+}
+
+#[derive(Clone, Debug, PartialEq, Serialize, Deserialize)]
+pub struct StoryItem {
+    pub id: i64,
+    pub title: String,
+    pub url: Option<String>,
+    pub text: Option<String>,
+    #[serde(default)]
+    pub by: String,
+    #[serde(default)]
+    pub score: i64,
+    #[serde(default)]
+    pub descendants: i64,
+    #[serde(with = "chrono::serde::ts_seconds")]
+    pub time: DateTime<Utc>,
+    #[serde(default)]
+    pub kids: Vec<i64>,
+    pub r#type: String,
+}
+
+pub async fn get_story(id: i64) -> dioxus::Result<StoryPageData> {
+    let url = format!("{}{}{}.json", BASE_API_URL, ITEM_API, id);
+    Ok(reqwest::get(&url).await?.json::<StoryPageData>().await?)
+}
+
+#[component]
+fn ChildrenOrLoading(children: Element) -> Element {
+    rsx! {
+        SuspenseBoundary {
+            fallback: |context: SuspenseContext| {
+                rsx! {
+                    if let Some(placeholder) = context.suspense_placeholder() {
+                        {placeholder}
+                    } else {
+                        LoadingIndicator {}
+                    }
+                }
+            },
+            children
+        }
+    }
+}
+
+fn LoadingIndicator() -> Element {
+    rsx! {
+        div {
+            class: "spinner",
+        }
+    }
+}

packages/fullstack/src/axum_adapter.rs

@@ -1,15 +1,14 @@
 //! Dioxus utilities for the [Axum](https://docs.rs/axum/latest/axum/index.html) server framework.
 //!
 //! # Example
-//! ```rust
+//! ```rust, no_run
 //! #![allow(non_snake_case)]
-//! use dioxus_lib::prelude::*;
-//! use dioxus_fullstack::prelude::*;
+//! use dioxus::prelude::*;
 //!
 //! fn main() {
 //!     #[cfg(feature = "web")]
 //!     // Hydrate the application on the client
-//!     dioxus_web::launch_cfg(app, dioxus_web::Config::new().hydrate(true));
+//!     launch(app);
 //!     #[cfg(feature = "server")]
 //!     {
 //!         tokio::runtime::Runtime::new()
@@ -22,7 +21,7 @@
 //!                         listener,
 //!                         axum::Router::new()
 //!                             // Server side render the application, serve static assets, and register server functions
-//!                             .serve_dioxus_application(ServerConfig::new(), app)
+//!                             .serve_dioxus_application(ServeConfig::default(), app)
 //!                             .into_make_service(),
 //!                     )
 //!                     .await
@@ -44,7 +43,7 @@
 //!             "Run a server function"
 //!         }
 //!         "Server said: {text}"
-//!     })
+//!     }
 //! }
 //!
 //! #[server(GetServerData)]
@@ -61,7 +60,6 @@ use axum::{
     response::IntoResponse,
 };
 use dioxus_lib::prelude::{Element, VirtualDom};
-use futures_util::Future;
 use http::header::*;
 
 use std::sync::Arc;
@@ -74,21 +72,18 @@ pub trait DioxusRouterExt<S> {
     /// Registers server functions with the default handler. This handler function will pass an empty [`DioxusServerContext`] to your server functions.
     ///
     /// # Example
-    /// ```rust
+    /// ```rust, no_run
     /// # use dioxus_lib::prelude::*;
     /// # use dioxus_fullstack::prelude::*;
     /// #[tokio::main]
     /// async fn main() {
     ///     let addr = std::net::SocketAddr::from(([127, 0, 0, 1], 8080));
-    ///     axum::Server::bind(&addr)
-    ///         .serve(
-    ///             axum::Router::new()
-    ///                 // Register server functions routes with the default handler
-    ///                 .register_server_functions()
-    ///                 .into_make_service(),
-    ///         )
-    ///         .await
-    ///         .unwrap();
+    ///     let router = axum::Router::new()
+    ///         // Register server functions routes with the default handler
+    ///         .register_server_functions()
+    ///         .into_make_service();
+    ///     let listener = tokio::net::TcpListener::bind(addr).await.unwrap();
+    ///     axum::serve(listener, router).await.unwrap();
     /// }
     /// ```
     fn register_server_functions(self) -> Self
@@ -101,21 +96,19 @@ pub trait DioxusRouterExt<S> {
     /// Registers server functions with some additional context to insert into the [`DioxusServerContext`] for that handler.
     ///
     /// # Example
-    /// ```rust
+    /// ```rust, no_run
     /// # use dioxus_lib::prelude::*;
     /// # use dioxus_fullstack::prelude::*;
+    /// # use std::sync::Arc;
     /// #[tokio::main]
     /// async fn main() {
     ///     let addr = std::net::SocketAddr::from(([127, 0, 0, 1], 8080));
-    ///     axum::Server::bind(&addr)
-    ///         .serve(
-    ///             axum::Router::new()
-    ///                 // Register server functions routes with the default handler
-    ///                 .register_server_functions_with_context(vec![Box::new(|| 1234567890u32)])
-    ///                 .into_make_service(),
-    ///         )
-    ///         .await
-    ///         .unwrap();
+    ///     let router = axum::Router::new()
+    ///         // Register server functions routes with the default handler
+    ///         .register_server_functions_with_context(Arc::new(vec![Box::new(|| Box::new(1234567890u32))]))
+    ///         .into_make_service();
+    ///     let listener = tokio::net::TcpListener::bind(addr).await.unwrap();
+    ///     axum::serve(listener, router).await.unwrap();
     /// }
     /// ```
     fn register_server_functions_with_context(self, context_providers: ContextProviders) -> Self;
@@ -123,34 +116,24 @@ pub trait DioxusRouterExt<S> {
     /// Serves the static WASM for your Dioxus application (except the generated index.html).
     ///
     /// # Example
-    /// ```rust
+    /// ```rust, no_run
     /// # #![allow(non_snake_case)]
     /// # use dioxus_lib::prelude::*;
     /// # use dioxus_fullstack::prelude::*;
     /// #[tokio::main]
     /// async fn main() {
     ///     let addr = std::net::SocketAddr::from(([127, 0, 0, 1], 8080));
-    ///     axum::Server::bind(&addr)
-    ///         .serve(
-    ///             axum::Router::new()
-    ///                 // Server side render the application, serve static assets, and register server functions
-    ///                 .serve_static_assets("dist")
-    ///                 // Server render the application
-    ///                 // ...
-    ///                 .into_make_service(),
-    ///         )
-    ///         .await
-    ///         .unwrap();
-    /// }
-    ///
-    /// fn app() -> Element {
-    ///     unimplemented!()
+    ///     let router = axum::Router::new()
+    ///         // Server side render the application, serve static assets, and register server functions
+    ///         .serve_static_assets("dist")
+    ///         // Server render the application
+    ///         // ...
+    ///         .into_make_service();
+    ///     let listener = tokio::net::TcpListener::bind(addr).await.unwrap();
+    ///     axum::serve(listener, router).await.unwrap();
     /// }
     /// ```
-    fn serve_static_assets(
-        self,
-        assets_path: impl Into<std::path::PathBuf>,
-    ) -> impl Future<Output = Self> + Send + Sync
+    fn serve_static_assets(self, assets_path: impl Into<std::path::PathBuf>) -> Self
     where
         Self: Sized;
 
@@ -158,33 +141,26 @@ pub trait DioxusRouterExt<S> {
     /// This will serve static assets, server render the application, register server functions, and integrate with hot reloading.
     ///
     /// # Example
-    /// ```rust
+    /// ```rust, no_run
     /// # #![allow(non_snake_case)]
     /// # use dioxus_lib::prelude::*;
     /// # use dioxus_fullstack::prelude::*;
     /// #[tokio::main]
     /// async fn main() {
     ///     let addr = std::net::SocketAddr::from(([127, 0, 0, 1], 8080));
-    ///     axum::Server::bind(&addr)
-    ///         .serve(
-    ///             axum::Router::new()
-    ///                 // Server side render the application, serve static assets, and register server functions
-    ///                 .serve_dioxus_application(ServeConfig::new(), )
-    ///                 .into_make_service(),
-    ///         )
-    ///         .await
-    ///         .unwrap();
+    ///     let router = axum::Router::new()
+    ///         // Server side render the application, serve static assets, and register server functions
+    ///         .serve_dioxus_application(ServeConfig::default(), app)
+    ///         .into_make_service();
+    ///     let listener = tokio::net::TcpListener::bind(addr).await.unwrap();
+    ///     axum::serve(listener, router).await.unwrap();
     /// }
     ///
     /// fn app() -> Element {
-    ///     unimplemented!()
+    ///     rsx! { "Hello World" }
     /// }
     /// ```
-    fn serve_dioxus_application(
-        self,
-        cfg: impl Into<ServeConfig>,
-        app: fn() -> Element,
-    ) -> impl Future<Output = Self> + Send + Sync
+    fn serve_dioxus_application(self, cfg: impl Into<ServeConfig>, app: fn() -> Element) -> Self
     where
         Self: Sized;
 }
@@ -210,7 +186,7 @@ where
                     move |server_context| {
                         for context_provider in context_providers.iter() {
                             let context = context_provider();
-                            _ = server_context.insert_any(context);
+                            server_context.insert_any(context);
                         }
                     },
                     req,
@@ -229,77 +205,70 @@ where
 
     // TODO: This is a breaking change, but we should probably serve static assets from a different directory than dist where the server executable is located
     // This would prevent issues like https://github.com/DioxusLabs/dioxus/issues/2327
-    fn serve_static_assets(
-        mut self,
-        assets_path: impl Into<std::path::PathBuf>,
-    ) -> impl Future<Output = Self> + Send + Sync {
+    fn serve_static_assets(mut self, assets_path: impl Into<std::path::PathBuf>) -> Self {
         use tower_http::services::{ServeDir, ServeFile};
 
         let assets_path = assets_path.into();
-        async move {
-            // Serve all files in dist folder except index.html
-            let dir = std::fs::read_dir(&assets_path).unwrap_or_else(|e| {
-                panic!(
-                    "Couldn't read assets directory at {:?}: {}",
-                    &assets_path, e
-                )
-            });
 
-            for entry in dir.flatten() {
-                let path = entry.path();
-                if path.ends_with("index.html") {
-                    continue;
-                }
-                let route = path
-                    .strip_prefix(&assets_path)
-                    .unwrap()
-                    .iter()
-                    .map(|segment| {
-                        segment.to_str().unwrap_or_else(|| {
-                            panic!("Failed to convert path segment {:?} to string", segment)
-                        })
+        // Serve all files in dist folder except index.html
+        let dir = std::fs::read_dir(&assets_path).unwrap_or_else(|e| {
+            panic!(
+                "Couldn't read assets directory at {:?}: {}",
+                &assets_path, e
+            )
+        });
+
+        for entry in dir.flatten() {
+            let path = entry.path();
+            if path.ends_with("index.html") {
+                continue;
+            }
+            let route = path
+                .strip_prefix(&assets_path)
+                .unwrap()
+                .iter()
+                .map(|segment| {
+                    segment.to_str().unwrap_or_else(|| {
+                        panic!("Failed to convert path segment {:?} to string", segment)
                     })
-                    .collect::<Vec<_>>()
-                    .join("/");
-                let route = format!("/{}", route);
-                if path.is_dir() {
-                    self = self.nest_service(&route, ServeDir::new(path).precompressed_br());
-                } else {
-                    self = self.nest_service(&route, ServeFile::new(path).precompressed_br());
-                }
+                })
+                .collect::<Vec<_>>()
+                .join("/");
+            let route = format!("/{}", route);
+            if path.is_dir() {
+                self = self.nest_service(&route, ServeDir::new(path).precompressed_br());
+            } else {
+                self = self.nest_service(&route, ServeFile::new(path).precompressed_br());
             }
-
-            self
         }
+
+        self
     }
 
-    fn serve_dioxus_application(
-        self,
-        cfg: impl Into<ServeConfig>,
-        app: fn() -> Element,
-    ) -> impl Future<Output = Self> + Send + Sync {
+    fn serve_dioxus_application(self, cfg: impl Into<ServeConfig>, app: fn() -> Element) -> Self {
         let cfg = cfg.into();
-        async move {
-            let ssr_state = SSRState::new(&cfg);
-
-            // Add server functions and render index.html
-            let mut server = self
-                .serve_static_assets(cfg.assets_path.clone())
-                .await
-                .register_server_functions();
-
-            #[cfg(all(feature = "hot-reload", debug_assertions))]
-            {
-                use dioxus_hot_reload::HotReloadRouterExt;
-                server = server.forward_cli_hot_reloading();
-            }
 
-            server.fallback(get(render_handler).with_state((
-                cfg,
-                Arc::new(move || VirtualDom::new(app)),
-                ssr_state,
-            )))
+        let ssr_state = SSRState::new(&cfg);
+
+        // Add server functions and render index.html
+        #[allow(unused_mut)]
+        let mut server = self
+            .serve_static_assets(cfg.assets_path.clone())
+            .register_server_functions();
+
+        #[cfg(all(feature = "hot-reload", debug_assertions))]
+        {
+            use dioxus_hot_reload::HotReloadRouterExt;
+            server = server.forward_cli_hot_reloading();
         }
+
+        server.fallback(
+            get(render_handler).with_state(
+                RenderHandleState::new(app)
+                    .with_config(cfg)
+                    .with_ssr_state(ssr_state),
+            ),
+        )
     }
 }
 
@@ -313,12 +282,54 @@ fn apply_request_parts_to_response<B>(
     }
 }
 
-type AxumHandler<F> = (
-    F,
-    ServeConfig,
-    SSRState,
-    Arc<dyn Fn() -> VirtualDom + Send + Sync>,
-);
+/// State used by [`render_handler`] to render a dioxus component with axum
+#[derive(Clone)]
+pub struct RenderHandleState {
+    config: ServeConfig,
+    build_virtual_dom: Arc<dyn Fn() -> VirtualDom + Send + Sync>,
+    ssr_state: once_cell::sync::OnceCell<SSRState>,
+}
+
+impl RenderHandleState {
+    /// Create a new [`RenderHandleState`]
+    pub fn new(root: fn() -> Element) -> Self {
+        Self {
+            config: ServeConfig::default(),
+            build_virtual_dom: Arc::new(move || VirtualDom::new(root)),
+            ssr_state: Default::default(),
+        }
+    }
+
+    /// Create a new [`RenderHandleState`] with a custom [`VirtualDom`] factory. This method can be used to pass context into the root component of your application.
+    pub fn new_with_virtual_dom_factory(
+        build_virtual_dom: impl Fn() -> VirtualDom + Send + Sync + 'static,
+    ) -> Self {
+        Self {
+            config: ServeConfig::default(),
+            build_virtual_dom: Arc::new(build_virtual_dom),
+            ssr_state: Default::default(),
+        }
+    }
+
+    /// Set the [`ServeConfig`] for this [`RenderHandleState`]
+    pub fn with_config(mut self, config: ServeConfig) -> Self {
+        self.config = config;
+        self
+    }
+
+    /// Set the [`SSRState`] for this [`RenderHandleState`]. Sharing a [`SSRState`] between multiple [`RenderHandleState`]s is more efficient than creating a new [`SSRState`] for each [`RenderHandleState`].
+    pub fn with_ssr_state(mut self, ssr_state: SSRState) -> Self {
+        self.ssr_state = once_cell::sync::OnceCell::new();
+        if self.ssr_state.set(ssr_state).is_err() {
+            panic!("SSRState already set");
+        }
+        self
+    }
+
+    fn ssr_state(&self) -> &SSRState {
+        self.ssr_state.get_or_init(|| SSRState::new(&self.config))
+    }
+}
 
 /// SSR renderer handler for Axum with added context injection.
 ///
@@ -328,8 +339,7 @@ type AxumHandler<F> = (
 /// use std::sync::{Arc, Mutex};
 ///
 /// use axum::routing::get;
-/// use dioxus_lib::prelude::*;
-/// use dioxus_fullstack::{axum_adapter::render_handler_with_context, prelude::*};
+/// use dioxus::prelude::*;
 ///
 /// fn app() -> Element {
 ///     rsx! {
@@ -339,82 +349,61 @@ type AxumHandler<F> = (
 ///
 /// #[tokio::main]
 /// async fn main() {
-///     let cfg = ServerConfig::new(app, ())
-///         .assets_path("dist")
-///         .build();
-///     let ssr_state = SSRState::new(&cfg);
-///
-///     // This could be any state you want to be accessible from your server
-///     // functions using `[DioxusServerContext::get]`.
-///     let state = Arc::new(Mutex::new("state".to_string()));
-///
 ///     let addr = std::net::SocketAddr::from(([127, 0, 0, 1], 8080));
-///     axum::Server::bind(&addr)
-///         .serve(
-///             axum::Router::new()
-///                 // Register server functions, etc.
-///                 // Note you can use `register_server_functions_with_context`
-///                 // to inject the context into server functions running outside
-///                 // of an SSR render context.
-///                 .fallback(get(render_handler_with_context).with_state((
-///                     move |ctx| ctx.insert(state.clone()).unwrap(),
-///                     cfg,
-///                     ssr_state,
-///                 )))
-///                 .into_make_service(),
+///     let router = axum::Router::new()
+///         // Register server functions, etc.
+///         // Note you can use `register_server_functions_with_context`
+///         // to inject the context into server functions running outside
+///         // of an SSR render context.
+///         .fallback(get(render_handler)
+///             .with_state(RenderHandleState::new(app))
 ///         )
-///         .await
-///         .unwrap();
+///         .into_make_service();
+///     let listener = tokio::net::TcpListener::bind(addr).await.unwrap();
+///     axum::serve(listener, router).await.unwrap();
 /// }
 /// ```
-pub async fn render_handler_with_context<F: FnMut(&mut DioxusServerContext)>(
-    State((mut inject_context, cfg, ssr_state, virtual_dom_factory)): State<AxumHandler<F>>,
+pub async fn render_handler(
+    State(state): State<RenderHandleState>,
     request: Request<Body>,
 ) -> impl IntoResponse {
+    // Only respond to requests for HTML
+    if let Some(mime) = request.headers().get("Accept") {
+        let mime = mime.to_str().map(|mime| mime.to_ascii_lowercase());
+        match mime {
+            Ok(accepts) if accepts.contains("text/html") => {}
+            _ => return Err(StatusCode::NOT_ACCEPTABLE),
+        }
+    }
+
+    let cfg = &state.config;
+    let ssr_state = state.ssr_state();
+    let build_virtual_dom = state.build_virtual_dom.clone();
+
     let (parts, _) = request.into_parts();
     let url = parts.uri.path_and_query().unwrap().to_string();
-    let parts: Arc<tokio::sync::RwLock<http::request::Parts>> =
-        Arc::new(tokio::sync::RwLock::new(parts));
-    let mut server_context = DioxusServerContext::new(parts.clone());
-    inject_context(&mut server_context);
+    let parts: Arc<parking_lot::RwLock<http::request::Parts>> =
+        Arc::new(parking_lot::RwLock::new(parts));
+    let server_context = DioxusServerContext::from_shared_parts(parts.clone());
 
     match ssr_state
-        .render(url, &cfg, move || virtual_dom_factory(), &server_context)
+        .render(url, cfg, move || build_virtual_dom(), &server_context)
         .await
     {
-        Ok(rendered) => {
-            let crate::render::RenderResponse { html, freshness } = rendered;
-            let mut response = axum::response::Html::from(html).into_response();
+        Ok((freshness, rx)) => {
+            let mut response = axum::response::Html::from(Body::from_stream(rx)).into_response();
             freshness.write(response.headers_mut());
-            let headers = server_context.response_parts().unwrap().headers.clone();
+            let headers = server_context.response_parts().headers.clone();
             apply_request_parts_to_response(headers, &mut response);
-            response
+            Ok(response)
         }
         Err(e) => {
             tracing::error!("Failed to render page: {}", e);
-            report_err(e).into_response()
+            Ok(report_err(e).into_response())
         }
     }
 }
 
-type RenderHandlerExtractor = (
-    ServeConfig,
-    Arc<dyn Fn() -> VirtualDom + Send + Sync>,
-    SSRState,
-);
-
-/// SSR renderer handler for Axum
-pub async fn render_handler(
-    State((cfg, virtual_dom_factory, ssr_state)): State<RenderHandlerExtractor>,
-    request: Request<Body>,
-) -> impl IntoResponse {
-    render_handler_with_context(
-        State((|_: &mut _| (), cfg, ssr_state, virtual_dom_factory)),
-        request,
-    )
-    .await
-}
-
 fn report_err<E: std::fmt::Display>(e: E) -> Response<axum::body::Body> {
     Response::builder()
         .status(StatusCode::INTERNAL_SERVER_ERROR)
@@ -439,7 +428,7 @@ async fn handle_server_fns_inner(
         if let Some(mut service) =
             server_fn::axum::get_server_fn_service(&path_string)
         {
-            let server_context = DioxusServerContext::new(Arc::new(tokio::sync::RwLock::new(parts)));
+            let server_context = DioxusServerContext::new(parts);
             additional_context(&server_context);
 
             // store Accepts and Referrer in case we need them for redirect (below)
@@ -467,7 +456,7 @@ async fn handle_server_fns_inner(
             }
 
             // apply the response parts from the server context to the response
-            let mut res_options = server_context.response_parts_mut().unwrap();
+            let mut res_options = server_context.response_parts_mut();
             res.headers_mut().extend(res_options.headers.drain());
 
             Ok(res)

packages/fullstack/src/hooks/server_cached.rs

@@ -1,3 +1,4 @@
+use dioxus_lib::prelude::use_hook;
 use serde::{de::DeserializeOwned, Serialize};
 
 /// This allows you to send data from the server to the client. The data is serialized into the HTML on the server and hydrated on the client.
@@ -12,25 +13,36 @@ use serde::{de::DeserializeOwned, Serialize};
 /// use dioxus_fullstack::prelude::*;
 ///
 /// fn app() -> Element {
-///    let state1 = server_cached(|| {
+///    let state1 = use_server_cached(|| {
 ///       1234
 ///    });
 ///
-///    None
+///    todo!()
 /// }
 /// ```
-pub fn server_cached<O: 'static + Serialize + DeserializeOwned>(server_fn: impl Fn() -> O) -> O {
+pub fn use_server_cached<O: 'static + Clone + Serialize + DeserializeOwned>(
+    server_fn: impl Fn() -> O,
+) -> O {
     #[cfg(feature = "server")]
     {
-        let data = server_fn();
-        let sc = crate::prelude::server_context();
-        if let Err(err) = sc.push_html_data(&data) {
-            tracing::error!("Failed to push HTML data: {}", err);
-        }
-        data
+        let serialize = crate::html_storage::use_serialize_context();
+        use_hook(|| {
+            let data = server_fn();
+            serialize.push(&data);
+            data
+        })
     }
-    #[cfg(not(feature = "server"))]
+    #[cfg(all(not(feature = "server"), feature = "web"))]
     {
-        crate::html_storage::deserialize::take_server_data().unwrap_or_else(server_fn)
+        use_hook(|| {
+            dioxus_web::take_server_data()
+                .ok()
+                .flatten()
+                .unwrap_or_else(server_fn)
+        })
+    }
+    #[cfg(not(any(feature = "server", feature = "web")))]
+    {
+        use_hook(server_fn)
     }
 }

packages/fullstack/src/hooks/server_future.rs

@@ -2,46 +2,121 @@ use dioxus_lib::prelude::*;
 use serde::{de::DeserializeOwned, Serialize};
 use std::future::Future;
 
-/// A future that resolves to a value.
+/// Runs a future with a manual list of dependencies and returns a resource with the result if the future is finished or a suspended error if it is still running.
+///
+///
+/// On the server, this will wait until the future is resolved before continuing to render. When the future is resolved, the result will be serialized into the page and hydrated on the client without rerunning the future.
+///
+///
+/// <div class="warning">
+///
+/// Unlike [`use_resource`] dependencies are only tracked inside the function that spawns the async block, not the async block itself.
+///
+/// ```rust, no_run
+/// # use dioxus::prelude::*;
+/// // ❌ The future inside of use_server_future is not reactive
+/// let id = use_signal(|| 0);
+/// use_server_future(move || {
+///     async move {
+///          // But the future is not reactive which means that the future will not subscribe to any reads here
+///          println!("{id}");
+///     }
+/// });
+/// // ✅ The closure that creates the future for use_server_future is reactive
+/// let id = use_signal(|| 0);
+/// use_server_future(move || {
+///     // The closure itself is reactive which means the future will subscribe to any signals you read here
+///     let cloned_id = id();
+///     async move {
+///          // But the future is not reactive which means that the future will not subscribe to any reads here
+///          println!("{cloned_id}");
+///     }
+/// });
+/// ```
+///
+/// </div>
+///
+/// # Example
+///
+/// ```rust, no_run
+/// # use dioxus::prelude::*;
+/// # async fn fetch_article(id: u32) -> String { todo!() }
+/// use dioxus::prelude::*;
+///
+/// fn App() -> Element {
+///     let mut article_id = use_signal(|| 0);
+///     // `use_server_future` will spawn a task that runs on the server and serializes the result to send to the client.
+///     // The future will rerun any time the
+///     // Since we bubble up the suspense with `?`, the server will wait for the future to resolve before rendering
+///     let article = use_server_future(move || fetch_article(article_id()))?;
+///
+///     rsx! {
+///         "{article().unwrap()}"
+///     }
+/// }
+/// ```
 #[must_use = "Consider using `cx.spawn` to run a future without reading its value"]
-pub fn use_server_future<T, F>(_future: impl FnMut() -> F + 'static) -> Option<Resource<T>>
+pub fn use_server_future<T, F>(
+    mut future: impl FnMut() -> F + 'static,
+) -> Result<Resource<T>, RenderError>
 where
     T: Serialize + DeserializeOwned + 'static,
     F: Future<Output = T> + 'static,
 {
-    let cb = use_callback(_future);
-    let mut first_run = use_hook(|| CopyValue::new(true));
+    #[cfg(feature = "server")]
+    let serialize_context = crate::html_storage::use_serialize_context();
+    // We always create a storage entry, even if the data isn't ready yet to make it possible to deserialize pending server futures on the client
+    #[cfg(feature = "server")]
+    let server_storage_entry = use_hook(|| serialize_context.create_entry());
 
-    let resource = use_resource(move || {
-        async move {
-            let user_fut = cb.call();
+    // If this is the first run and we are on the web client, the data might be cached
+    #[cfg(feature = "web")]
+    let initial_web_result = use_hook(|| {
+        tracing::info!("First run of use_server_future");
 
-            let currently_in_first_run = first_run.cloned();
-
-            // If this is the first run and we are on the web client, the data might be cached
-            if currently_in_first_run {
-                tracing::info!("First run of use_server_future");
-                // This is no longer the first run
-                first_run.set(false);
+        std::rc::Rc::new(std::cell::RefCell::new(Some(
+            dioxus_web::take_server_data::<T>(),
+        )))
+    });
 
-                #[cfg(feature = "web")]
-                if let Some(o) = crate::html_storage::deserialize::take_server_data::<T>() {
-                    // this is going to subscribe this resource to any reactivity given to use in the callback
-                    // We're doing this regardless so inputs get tracked, even if we drop the future before polling it
-                    kick_future(user_fut);
+    let resource = use_resource(move || {
+        #[cfg(feature = "server")]
+        let serialize_context = serialize_context.clone();
+        let user_fut = future();
+        #[cfg(feature = "web")]
+        let initial_web_result = initial_web_result.clone();
 
-                    return o;
+        async move {
+            // If this is the first run and we are on the web client, the data might be cached
+            #[cfg(feature = "web")]
+            {
+                let initial = initial_web_result.borrow_mut().take();
+                match initial {
+                    // This isn't the first run
+                    None => {}
+                    // This is the first run
+                    Some(first_run) => {
+                        match first_run {
+                            // THe data was deserialized successfully from the server
+                            Ok(Some(o)) => return o,
+                            // The data is still pending from the server. Don't try to resolve it on the client
+                            Ok(None) => {
+                                tracing::trace!("Waiting for server data");
+                                std::future::pending::<()>().await;
+                            }
+                            // The data was not available on the server, rerun the future
+                            Err(_) => {}
+                        }
+                    }
                 }
             }
 
             // Otherwise just run the future itself
             let out = user_fut.await;
 
-            // If this is the first run and we are on the server, cache the data
+            // If this is the first run and we are on the server, cache the data in the slot we reserved for it
             #[cfg(feature = "server")]
-            if currently_in_first_run {
-                let _ = crate::server_context::server_context().push_html_data(&out);
-            }
+            serialize_context.insert(server_storage_entry, &out);
 
             #[allow(clippy::let_and_return)]
             out
@@ -56,24 +131,12 @@ where
     // Suspend if the value isn't ready
     match resource.state().cloned() {
         UseResourceState::Pending => {
-            suspend(resource.task());
-            None
+            let task = resource.task();
+            if !task.paused() {
+                return Err(suspend(task).unwrap_err());
+            }
+            Ok(resource)
         }
-        _ => Some(resource),
+        _ => Ok(resource),
     }
 }
-
-#[cfg(feature = "web")]
-#[inline]
-fn kick_future<F, T>(user_fut: F)
-where
-    F: Future<Output = T> + 'static,
-{
-    // Kick the future to subscribe its dependencies
-    use futures_util::future::FutureExt;
-    let waker = futures_util::task::noop_waker();
-    let mut cx = std::task::Context::from_waker(&waker);
-    futures_util::pin_mut!(user_fut);
-
-    let _ = user_fut.poll_unpin(&mut cx);
-}

packages/fullstack/src/html_storage/deserialize.rs

@@ -1,59 +0,0 @@
-use serde::de::DeserializeOwned;
-
-use base64::engine::general_purpose::STANDARD;
-use base64::Engine;
-
-use super::HTMLDataCursor;
-
-#[allow(unused)]
-pub(crate) fn serde_from_bytes<T: DeserializeOwned>(string: &[u8]) -> Option<T> {
-    let decompressed = match STANDARD.decode(string) {
-        Ok(bytes) => bytes,
-        Err(err) => {
-            tracing::error!("Failed to decode base64: {}", err);
-            return None;
-        }
-    };
-
-    match ciborium::from_reader(std::io::Cursor::new(decompressed)) {
-        Ok(data) => Some(data),
-        Err(err) => {
-            tracing::error!("Failed to deserialize: {}", err);
-            None
-        }
-    }
-}
-
-static SERVER_DATA: once_cell::sync::Lazy<Option<HTMLDataCursor>> =
-    once_cell::sync::Lazy::new(|| {
-        #[cfg(all(feature = "web", target_arch = "wasm32"))]
-        {
-            let window = web_sys::window()?.document()?;
-            let element = match window.get_element_by_id("dioxus-storage-data") {
-                Some(element) => element,
-                None => {
-                    tracing::error!("Failed to get element by id: dioxus-storage-data");
-                    return None;
-                }
-            };
-            let attribute = match element.get_attribute("data-serialized") {
-                Some(attribute) => attribute,
-                None => {
-                    tracing::error!("Failed to get attribute: data-serialized");
-                    return None;
-                }
-            };
-
-            let data: super::HTMLData = serde_from_bytes(attribute.as_bytes())?;
-
-            Some(data.cursor())
-        }
-        #[cfg(not(all(feature = "web", target_arch = "wasm32")))]
-        {
-            None
-        }
-    });
-
-pub(crate) fn take_server_data<T: DeserializeOwned>() -> Option<T> {
-    SERVER_DATA.as_ref()?.take()
-}

packages/fullstack/src/html_storage/mod.rs

@@ -1,112 +1,65 @@
 #![allow(unused)]
 use base64::Engine;
-use std::{io::Cursor, sync::atomic::AtomicUsize};
+use dioxus_lib::prelude::{has_context, provide_context, use_hook};
+use serialize::serde_to_writable;
+use std::{cell::RefCell, io::Cursor, rc::Rc, sync::atomic::AtomicUsize};
 
 use base64::engine::general_purpose::STANDARD;
 use serde::{de::DeserializeOwned, Serialize};
 
-pub(crate) mod deserialize;
-
 pub(crate) mod serialize;
 
-#[derive(serde::Serialize, serde::Deserialize, Default)]
-pub(crate) struct HTMLData {
-    pub data: Vec<Vec<u8>>,
+#[derive(Default, Clone)]
+pub(crate) struct SerializeContext {
+    data: Rc<RefCell<HTMLData>>,
 }
 
-impl HTMLData {
-    pub(crate) fn push<T: Serialize>(&mut self, value: &T) {
-        let mut serialized = Vec::new();
-        serialize::serde_to_writable(value, &mut serialized).unwrap();
-        self.data.push(serialized);
+impl SerializeContext {
+    /// Create a new entry in the data that will be sent to the client without inserting any data. Returns an id that can be used to insert data into the entry once it is ready.
+    pub(crate) fn create_entry(&self) -> usize {
+        self.data.borrow_mut().create_entry()
     }
 
-    pub(crate) fn cursor(self) -> HTMLDataCursor {
-        HTMLDataCursor {
-            data: self.data,
-            index: AtomicUsize::new(0),
-        }
+    /// Insert data into an entry that was created with [`Self::create_entry`]
+    pub(crate) fn insert<T: Serialize>(&self, id: usize, value: &T) {
+        self.data.borrow_mut().insert(id, value);
     }
-}
 
-pub(crate) struct HTMLDataCursor {
-    data: Vec<Vec<u8>>,
-    index: AtomicUsize,
+    /// Push resolved data into the serialized server data
+    pub(crate) fn push<T: Serialize>(&self, data: &T) {
+        self.data.borrow_mut().push(data);
+    }
 }
 
-impl HTMLDataCursor {
-    pub fn take<T: DeserializeOwned>(&self) -> Option<T> {
-        let current = self.index.load(std::sync::atomic::Ordering::SeqCst);
-        if current >= self.data.len() {
-            tracing::error!(
-                "Tried to take more data than was available, len: {}, index: {}",
-                self.data.len(),
-                current
-            );
-            return None;
-        }
-        let mut cursor = &self.data[current];
-        let mut decoded = STANDARD.decode(cursor).unwrap();
-        self.index.fetch_add(1, std::sync::atomic::Ordering::SeqCst);
-        match ciborium::from_reader(Cursor::new(decoded)) {
-            Ok(x) => Some(x),
-            Err(e) => {
-                tracing::error!("Error deserializing data: {:?}", e);
-                None
-            }
-        }
-    }
+pub(crate) fn use_serialize_context() -> SerializeContext {
+    use_hook(|| has_context().unwrap_or_else(|| provide_context(SerializeContext::default())))
 }
 
-#[test]
-fn serialized_and_deserializes() {
-    use ciborium::{from_reader, into_writer};
+#[derive(serde::Serialize, serde::Deserialize, Default)]
+#[serde(transparent)]
+pub(crate) struct HTMLData {
+    pub data: Vec<Option<Vec<u8>>>,
+}
 
-    #[derive(serde::Serialize, serde::Deserialize, Debug, PartialEq, Clone)]
-    struct Data {
-        a: u32,
-        b: String,
-        bytes: Vec<u8>,
-        nested: Nested,
+impl HTMLData {
+    /// Create a new entry in the data that will be sent to the client without inserting any data. Returns an id that can be used to insert data into the entry once it is ready.
+    pub(crate) fn create_entry(&mut self) -> usize {
+        let id = self.data.len();
+        self.data.push(None);
+        id
     }
 
-    #[derive(serde::Serialize, serde::Deserialize, Debug, PartialEq, Clone)]
-    struct Nested {
-        a: u32,
-        b: u16,
-        c: u8,
+    /// Insert data into an entry that was created with [`Self::create_entry`]
+    pub(crate) fn insert<T: Serialize>(&mut self, id: usize, value: &T) {
+        let mut serialized = Vec::new();
+        ciborium::into_writer(value, &mut serialized).unwrap();
+        self.data[id] = Some(serialized);
     }
 
-    for x in 0..10usize {
-        for y in 0..10 {
-            let mut as_string: Vec<u8> = Vec::new();
-            let data = vec![
-                Data {
-                    a: x as u32,
-                    b: "hello".to_string(),
-                    bytes: vec![0; x],
-                    nested: Nested {
-                        a: 1,
-                        b: x as u16,
-                        c: 3
-                    },
-                };
-                y
-            ];
-            serialize::serde_to_writable(&data, &mut as_string).unwrap();
-
-            println!("{:?}", as_string);
-            println!(
-                "original size: {}",
-                std::mem::size_of::<Data>() * data.len()
-            );
-            let mut bytes = Vec::new();
-            into_writer(&data, &mut bytes).unwrap();
-            println!("serialized size: {}", bytes.len());
-            println!("compressed size: {}", as_string.len());
-
-            let decoded: Vec<Data> = deserialize::serde_from_bytes(&as_string).unwrap();
-            assert_eq!(data, decoded);
-        }
+    /// Push resolved data into the serialized server data
+    pub(crate) fn push<T: Serialize>(&mut self, data: &T) {
+        let mut serialized = Vec::new();
+        ciborium::into_writer(data, &mut serialized).unwrap();
+        self.data.push(Some(serialized));
     }
 }

packages/fullstack/src/html_storage/serialize.rs

@@ -1,28 +1,88 @@
+use dioxus_lib::prelude::dioxus_core::DynamicNode;
+use dioxus_lib::prelude::{
+    has_context, try_consume_context, ScopeId, SuspenseBoundaryProps, VNode, VirtualDom,
+};
 use serde::Serialize;
 
 use base64::engine::general_purpose::STANDARD;
 use base64::Engine;
 
+use super::SerializeContext;
+
 #[allow(unused)]
 pub(crate) fn serde_to_writable<T: Serialize>(
     value: &T,
-    write_to: &mut impl std::io::Write,
-) -> Result<(), ciborium::ser::Error<std::io::Error>> {
+    write_to: &mut impl std::fmt::Write,
+) -> Result<(), ciborium::ser::Error<std::fmt::Error>> {
     let mut serialized = Vec::new();
-    ciborium::into_writer(value, &mut serialized)?;
-    write_to.write_all(STANDARD.encode(serialized).as_bytes())?;
+    ciborium::into_writer(value, &mut serialized).unwrap();
+    write_to.write_str(STANDARD.encode(serialized).as_str())?;
     Ok(())
 }
 
-#[cfg(feature = "server")]
-/// Encode data into a element. This is inteded to be used in the server to send data to the client.
-pub(crate) fn encode_in_element(
-    data: &super::HTMLData,
-    write_to: &mut impl std::io::Write,
-) -> Result<(), ciborium::ser::Error<std::io::Error>> {
-    write_to.write_all(
-        r#"<meta hidden="true" id="dioxus-storage-data" data-serialized=""#.as_bytes(),
-    )?;
-    serde_to_writable(&data, write_to)?;
-    Ok(write_to.write_all(r#"" />"#.as_bytes())?)
+impl super::HTMLData {
+    /// Walks through the suspense boundary in a depth first order and extracts the data from the context API.
+    /// We use depth first order instead of relying on the order the hooks are called in because during suspense on the server, the order that futures are run in may be non deterministic.
+    pub(crate) fn extract_from_suspense_boundary(vdom: &VirtualDom, scope: ScopeId) -> Self {
+        let mut data = Self::default();
+        data.take_from_scope(vdom, scope);
+        data
+    }
+
+    fn take_from_virtual_dom(&mut self, vdom: &VirtualDom) {
+        self.take_from_scope(vdom, ScopeId::ROOT)
+    }
+
+    fn take_from_scope(&mut self, vdom: &VirtualDom, scope: ScopeId) {
+        vdom.in_runtime(|| {
+            scope.in_runtime(|| {
+                // Grab any serializable server context from this scope
+                let context: Option<SerializeContext> = has_context();
+                if let Some(context) = context {
+                    let borrow = context.data.borrow();
+                    let mut data = borrow.data.iter().cloned();
+                    self.data.extend(data)
+                }
+            });
+        });
+
+        // then continue to any children
+        if let Some(scope) = vdom.get_scope(scope) {
+            // If this is a suspense boundary, move into the children first (even if they are suspended) because that will be run first on the client
+            if let Some(suspense_boundary) = SuspenseBoundaryProps::downcast_from_scope(scope) {
+                if let Some(node) = suspense_boundary.suspended_nodes.as_ref() {
+                    self.take_from_vnode(vdom, node);
+                }
+            }
+            if let Some(node) = scope.try_root_node() {
+                self.take_from_vnode(vdom, node);
+            }
+        }
+    }
+
+    fn take_from_vnode(&mut self, vdom: &VirtualDom, vnode: &VNode) {
+        for (dynamic_node_index, dyn_node) in vnode.dynamic_nodes.iter().enumerate() {
+            match dyn_node {
+                DynamicNode::Component(comp) => {
+                    if let Some(scope) = comp.mounted_scope(dynamic_node_index, vnode, vdom) {
+                        self.take_from_scope(vdom, scope.id());
+                    }
+                }
+                DynamicNode::Fragment(nodes) => {
+                    for node in nodes {
+                        self.take_from_vnode(vdom, node);
+                    }
+                }
+                _ => {}
+            }
+        }
+    }
+
+    #[cfg(feature = "server")]
+    /// Encode data as base64. This is intended to be used in the server to send data to the client.
+    pub(crate) fn serialized(&self) -> String {
+        let mut serialized = Vec::new();
+        ciborium::into_writer(&self.data, &mut serialized).unwrap();
+        base64::engine::general_purpose::STANDARD.encode(serialized)
+    }
 }

packages/fullstack/src/launch.rs

@@ -5,10 +5,13 @@ use std::{any::Any, sync::Arc};
 use dioxus_lib::prelude::{Element, VirtualDom};
 
 pub use crate::Config;
+
+#[allow(unused)]
 pub(crate) type ContextProviders = Arc<
     Vec<Box<dyn Fn() -> Box<dyn std::any::Any + Send + Sync + 'static> + Send + Sync + 'static>>,
 >;
 
+#[allow(unused)]
 fn virtual_dom_factory(
     root: fn() -> Element,
     contexts: ContextProviders,
@@ -87,6 +90,22 @@ pub fn launch(
     dioxus_mobile::launch::launch_virtual_dom(factory(), cfg)
 }
 
+#[cfg(not(any(
+    feature = "server",
+    feature = "web",
+    feature = "desktop",
+    feature = "mobile"
+)))]
+/// Launch a fullstack app with the given root component, contexts, and config.
+#[allow(unused)]
+pub fn launch(
+    root: fn() -> Element,
+    contexts: Vec<Box<dyn Fn() -> Box<dyn Any + Send + Sync> + Send + Sync>>,
+    platform_config: Config,
+) -> ! {
+    panic!("No platform feature enabled. Please enable one of the following features: axum, desktop, or web to use the launch API.")
+}
+
 #[cfg(feature = "server")]
 #[allow(unused)]
 /// Launch a server application
@@ -97,6 +116,8 @@ async fn launch_server(
 ) {
     use clap::Parser;
 
+    use crate::prelude::RenderHandleState;
+
     let args = dioxus_cli_config::ServeArguments::from_cli()
         .unwrap_or_else(dioxus_cli_config::ServeArguments::parse);
     let addr = args
@@ -116,8 +137,7 @@ async fn launch_server(
 
             let cfg = platform_config.server_cfg.build();
 
-            let ssr_state = SSRState::new(&cfg);
-            let mut router = router.serve_static_assets(cfg.assets_path.clone()).await;
+            let mut router = router.serve_static_assets(cfg.assets_path.clone());
 
             #[cfg(all(feature = "hot-reload", debug_assertions))]
             {
@@ -126,11 +146,10 @@ async fn launch_server(
             }
 
             router.fallback(
-                axum::routing::get(crate::axum_adapter::render_handler).with_state((
-                    cfg,
-                    Arc::new(build_virtual_dom),
-                    ssr_state,
-                )),
+                axum::routing::get(crate::axum_adapter::render_handler).with_state(
+                    RenderHandleState::new_with_virtual_dom_factory(build_virtual_dom)
+                        .with_config(cfg),
+                ),
             )
         };
         let router = router.into_make_service();

packages/fullstack/src/lib.rs

@@ -20,6 +20,8 @@ pub use config::*;
 
 #[cfg(feature = "server")]
 mod render;
+#[cfg(feature = "server")]
+mod streaming;
 
 #[cfg(feature = "server")]
 mod serve_config;
@@ -32,7 +34,7 @@ mod server_context;
 /// A prelude of commonly used items in dioxus-fullstack.
 pub mod prelude {
     use crate::hooks;
-    pub use hooks::{server_cached::server_cached, server_future::use_server_future};
+    pub use hooks::{server_cached::use_server_cached, server_future::use_server_future};
 
     #[cfg(feature = "axum")]
     #[cfg_attr(docsrs, doc(cfg(feature = "axum")))]
@@ -42,10 +44,6 @@ pub mod prelude {
     #[cfg_attr(docsrs, doc(cfg(feature = "server")))]
     pub use crate::render::{FullstackHTMLTemplate, SSRState};
 
-    #[cfg(feature = "router")]
-    #[cfg_attr(docsrs, doc(cfg(feature = "router")))]
-    pub use crate::router::FullstackRouterConfig;
-
     #[cfg(feature = "server")]
     #[cfg_attr(docsrs, doc(cfg(feature = "server")))]
     pub use crate::serve_config::{ServeConfig, ServeConfigBuilder};

packages/fullstack/src/render.rs

@@ -1,13 +1,15 @@
 //! A shared pool of renderers for efficient server side rendering.
-use crate::render::dioxus_core::NoOpMutations;
+use crate::streaming::StreamingRenderer;
+use dioxus_interpreter_js::INITIALIZE_STREAMING_JS;
 use dioxus_ssr::{
-    incremental::{RenderFreshness, WrapBody},
+    incremental::{CachedRender, RenderFreshness},
     Renderer,
 };
-use std::future::Future;
-use std::sync::Arc;
+use futures_channel::mpsc::Sender;
+use futures_util::{Stream, StreamExt};
 use std::sync::RwLock;
-use tokio::task::block_in_place;
+use std::{collections::HashMap, future::Future};
+use std::{fmt::Write, sync::Arc};
 use tokio::task::JoinHandle;
 
 use crate::prelude::*;
@@ -20,11 +22,16 @@ where
 {
     #[cfg(not(target_arch = "wasm32"))]
     {
-        tokio::task::spawn_blocking(move || {
-            tokio::runtime::Runtime::new()
-                .expect("couldn't spawn runtime")
-                .block_on(f())
-        })
+        use tokio_util::task::LocalPoolHandle;
+        static TASK_POOL: std::sync::OnceLock<LocalPoolHandle> = std::sync::OnceLock::new();
+
+        let pool = TASK_POOL.get_or_init(|| {
+            let threads = std::thread::available_parallelism()
+                .unwrap_or(std::num::NonZeroUsize::new(1).unwrap());
+            LocalPoolHandle::new(threads.into())
+        });
+
+        pool.spawn_pinned(f)
     }
     #[cfg(target_arch = "wasm32")]
     {
@@ -32,134 +39,281 @@ where
     }
 }
 
-enum SsrRendererPool {
-    Renderer(RwLock<Vec<Renderer>>),
-    Incremental(RwLock<Vec<dioxus_ssr::incremental::IncrementalRenderer>>),
+struct SsrRendererPool {
+    renderers: RwLock<Vec<Renderer>>,
+    incremental_cache: Option<RwLock<dioxus_ssr::incremental::IncrementalRenderer>>,
 }
 
 impl SsrRendererPool {
-    async fn render_to(
+    fn new(
+        initial_size: usize,
+        incremental: Option<dioxus_ssr::incremental::IncrementalRendererConfig>,
+    ) -> Self {
+        let renderers = RwLock::new((0..initial_size).map(|_| pre_renderer()).collect());
+        Self {
+            renderers,
+            incremental_cache: incremental.map(|cache| RwLock::new(cache.build())),
+        }
+    }
+
+    fn check_cached_route(
         &self,
+        route: &str,
+        render_into: &mut Sender<Result<String, dioxus_ssr::incremental::IncrementalRendererError>>,
+    ) -> Option<RenderFreshness> {
+        if let Some(incremental) = &self.incremental_cache {
+            if let Ok(mut incremental) = incremental.write() {
+                match incremental.get(route) {
+                    Ok(Some(cached_render)) => {
+                        let CachedRender {
+                            freshness,
+                            response,
+                            ..
+                        } = cached_render;
+                        _ = render_into.start_send(String::from_utf8(response.to_vec()).map_err(
+                            |err| {
+                                dioxus_ssr::incremental::IncrementalRendererError::Other(Box::new(
+                                    err,
+                                ))
+                            },
+                        ));
+                        return Some(freshness);
+                    }
+                    Err(e) => {
+                        tracing::error!(
+                            "Failed to get route \"{route}\" from incremental cache: {e}"
+                        );
+                    }
+                    _ => {}
+                }
+            }
+        }
+        None
+    }
+
+    async fn render_to(
+        self: Arc<Self>,
         cfg: &ServeConfig,
         route: String,
         virtual_dom_factory: impl FnOnce() -> VirtualDom + Send + Sync + 'static,
         server_context: &DioxusServerContext,
-    ) -> Result<(RenderFreshness, String), dioxus_ssr::incremental::IncrementalRendererError> {
-        let wrapper = FullstackHTMLTemplate {
-            cfg: cfg.clone(),
-            server_context: server_context.clone(),
-        };
-        match self {
-            Self::Renderer(pool) => {
-                let server_context = server_context.clone();
-                let mut renderer = pool.write().unwrap().pop().unwrap_or_else(pre_renderer);
-
-                let (tx, rx) = tokio::sync::oneshot::channel();
-
-                spawn_platform(move || async move {
-                    let mut vdom = virtual_dom_factory();
-                    let mut to = WriteBuffer { buffer: Vec::new() };
-                    // poll the future, which may call server_context()
-                    tracing::info!("Rebuilding vdom");
-                    with_server_context(server_context.clone(), || {
-                        block_in_place(|| vdom.rebuild(&mut NoOpMutations));
-                    });
-                    ProvideServerContext::new(vdom.wait_for_suspense(), server_context).await;
-                    tracing::info!("Suspense resolved");
-
-                    if let Err(err) = wrapper.render_before_body(&mut *to) {
-                        let _ = tx.send(Err(err));
-                        return;
-                    }
-                    if let Err(err) = renderer.render_to(&mut to, &vdom) {
-                        let _ = tx.send(Err(
-                            dioxus_ssr::incremental::IncrementalRendererError::RenderError(err),
-                        ));
-                        return;
-                    }
-                    if let Err(err) = wrapper.render_after_body(&mut *to) {
-                        let _ = tx.send(Err(err));
-                        return;
-                    }
-                    match String::from_utf8(to.buffer) {
-                        Ok(html) => {
-                            let _ = tx.send(Ok((renderer, RenderFreshness::now(None), html)));
-                        }
-                        Err(err) => {
-                            _ = tx.send(Err(
-                                dioxus_ssr::incremental::IncrementalRendererError::Other(Box::new(
-                                    err,
-                                )),
-                            ));
-                        }
-                    }
-                });
-                let (renderer, freshness, html) = rx.await.unwrap()?;
-                pool.write().unwrap().push(renderer);
-                Ok((freshness, html))
+    ) -> Result<
+        (
+            RenderFreshness,
+            impl Stream<Item = Result<String, dioxus_ssr::incremental::IncrementalRendererError>>,
+        ),
+        dioxus_ssr::incremental::IncrementalRendererError,
+    > {
+        struct ReceiverWithDrop {
+            receiver: futures_channel::mpsc::Receiver<
+                Result<String, dioxus_ssr::incremental::IncrementalRendererError>,
+            >,
+            cancel_task: Option<tokio::task::JoinHandle<()>>,
+        }
+
+        impl Stream for ReceiverWithDrop {
+            type Item = Result<String, dioxus_ssr::incremental::IncrementalRendererError>;
+
+            fn poll_next(
+                mut self: std::pin::Pin<&mut Self>,
+                cx: &mut std::task::Context<'_>,
+            ) -> std::task::Poll<Option<Self::Item>> {
+                self.receiver.poll_next_unpin(cx)
             }
-            Self::Incremental(pool) => {
-                let mut renderer =
-                    pool.write().unwrap().pop().unwrap_or_else(|| {
-                        incremental_pre_renderer(cfg.incremental.as_ref().unwrap())
-                    });
-
-                let (tx, rx) = tokio::sync::oneshot::channel();
-
-                let server_context = server_context.clone();
-                spawn_platform(move || async move {
-                    let mut to = WriteBuffer { buffer: Vec::new() };
-                    match renderer
-                        .render(
-                            route,
-                            virtual_dom_factory,
+        }
+
+        // When we drop the stream, we need to cancel the task that is feeding values to the stream
+        impl Drop for ReceiverWithDrop {
+            fn drop(&mut self) {
+                if let Some(cancel_task) = self.cancel_task.take() {
+                    cancel_task.abort();
+                }
+            }
+        }
+
+        let (mut into, rx) = futures_channel::mpsc::channel::<
+            Result<String, dioxus_ssr::incremental::IncrementalRendererError>,
+        >(1000);
+
+        // before we even spawn anything, we can check synchronously if we have the route cached
+        if let Some(freshness) = self.check_cached_route(&route, &mut into) {
+            return Ok((
+                freshness,
+                ReceiverWithDrop {
+                    receiver: rx,
+                    cancel_task: None,
+                },
+            ));
+        }
+
+        let wrapper = FullstackHTMLTemplate { cfg: cfg.clone() };
+
+        let server_context = server_context.clone();
+        let mut renderer = self
+            .renderers
+            .write()
+            .unwrap()
+            .pop()
+            .unwrap_or_else(pre_renderer);
+
+        let myself = self.clone();
+
+        let join_handle = spawn_platform(move || async move {
+            let mut virtual_dom = virtual_dom_factory();
+
+            let mut pre_body = String::new();
+            if let Err(err) = wrapper.render_before_body(&mut pre_body) {
+                _ = into.start_send(Err(err));
+                return;
+            }
+            if let Err(err) = write!(&mut pre_body, "<script>{INITIALIZE_STREAMING_JS}</script>") {
+                _ = into.start_send(Err(
+                    dioxus_ssr::incremental::IncrementalRendererError::RenderError(err),
+                ));
+                return;
+            }
+
+            let stream = Arc::new(StreamingRenderer::new(pre_body, into));
+            let scope_to_mount_mapping = Arc::new(RwLock::new(HashMap::new()));
+
+            renderer.pre_render = true;
+            {
+                let scope_to_mount_mapping = scope_to_mount_mapping.clone();
+                let stream = stream.clone();
+                renderer.set_render_components(move |renderer, to, vdom, scope| {
+                    let is_suspense_boundary = vdom
+                        .get_scope(scope)
+                        .and_then(|s| SuspenseBoundaryProps::downcast_from_scope(s))
+                        .filter(|s| s.suspended())
+                        .is_some();
+                    if is_suspense_boundary {
+                        let mount = stream.render_placeholder(
+                            |to| renderer.render_scope(to, vdom, scope),
                             &mut *to,
-                            |vdom| {
-                                Box::pin(async move {
-                                    // poll the future, which may call server_context()
-                                    tracing::info!("Rebuilding vdom");
-                                    with_server_context(server_context.clone(), || {
-                                        block_in_place(|| vdom.rebuild(&mut NoOpMutations));
-                                    });
-                                    ProvideServerContext::new(
-                                        vdom.wait_for_suspense(),
-                                        server_context,
-                                    )
-                                    .await;
-                                    tracing::info!("Suspense resolved");
-                                })
-                            },
-                            &wrapper,
-                        )
-                        .await
-                    {
-                        Ok(freshness) => {
-                            match String::from_utf8(to.buffer).map_err(|err| {
-                                dioxus_ssr::incremental::IncrementalRendererError::Other(Box::new(
-                                    err,
-                                ))
-                            }) {
-                                Ok(html) => {
-                                    let _ = tx.send(Ok((freshness, html)));
-                                }
-                                Err(err) => {
-                                    let _ = tx.send(Err(err));
-                                }
-                            }
-                        }
-                        Err(err) => {
-                            let _ = tx.send(Err(err));
-                        }
+                        )?;
+                        scope_to_mount_mapping.write().unwrap().insert(scope, mount);
+                    } else {
+                        renderer.render_scope(to, vdom, scope)?
                     }
+                    Ok(())
                 });
-                let (freshness, html) = rx.await.unwrap()?;
+            }
 
-                Ok((freshness, html))
+            macro_rules! throw_error {
+                ($e:expr) => {
+                    stream.close_with_error($e);
+                    return;
+                };
             }
-        }
+
+            // poll the future, which may call server_context()
+            tracing::info!("Rebuilding vdom");
+            with_server_context(server_context.clone(), || virtual_dom.rebuild_in_place());
+
+            // Render the initial frame with loading placeholders
+            let mut initial_frame = renderer.render(&virtual_dom);
+
+            // Collect the initial server data from the root node. For most apps, no use_server_futures will be resolved initially, so this will be full on `None`s.
+            // Sending down those Nones are still important to tell the client not to run the use_server_futures that are already running on the backend
+            let resolved_data = serialize_server_data(&virtual_dom, ScopeId::ROOT);
+            initial_frame.push_str(&format!(
+                r#"<script>window.initial_dioxus_hydration_data="{resolved_data}";</script>"#,
+            ));
+
+            // Along with the initial frame, we render the html after the main element, but before the body tag closes. This should include the script that starts loading the wasm bundle.
+            if let Err(err) = wrapper.render_after_main(&mut initial_frame) {
+                throw_error!(err);
+            }
+            stream.render(initial_frame);
+
+            // After the initial render, we need to resolve suspense
+            while virtual_dom.suspended_tasks_remaining() {
+                ProvideServerContext::new(
+                    virtual_dom.wait_for_suspense_work(),
+                    server_context.clone(),
+                )
+                .await;
+                let resolved_suspense_nodes = ProvideServerContext::new(
+                    virtual_dom.render_suspense_immediate(),
+                    server_context.clone(),
+                )
+                .await;
+
+                // Just rerender the resolved nodes
+                for scope in resolved_suspense_nodes {
+                    let mount = {
+                        let mut lock = scope_to_mount_mapping.write().unwrap();
+                        lock.remove(&scope).unwrap()
+                    };
+                    let mut resolved_chunk = String::new();
+                    // After we replace the placeholder in the dom with javascript, we need to send down the resolved data so that the client can hydrate the node
+                    let render_suspense = |into: &mut String| {
+                        renderer.reset_hydration();
+                        renderer.render_scope(into, &virtual_dom, scope)
+                    };
+                    let resolved_data = serialize_server_data(&virtual_dom, scope);
+                    if let Err(err) = stream.replace_placeholder(
+                        mount,
+                        render_suspense,
+                        resolved_data,
+                        &mut resolved_chunk,
+                    ) {
+                        throw_error!(
+                            dioxus_ssr::incremental::IncrementalRendererError::RenderError(err)
+                        );
+                    }
+
+                    stream.render(resolved_chunk);
+                }
+            }
+            tracing::info!("Suspense resolved");
+
+            // After suspense is done, we render the html after the body
+            let mut post_streaming = String::new();
+
+            if let Err(err) = wrapper.render_after_body(&mut post_streaming) {
+                throw_error!(err);
+            }
+
+            // If incremental rendering is enabled, add the new render to the cache without the streaming bits
+            if let Some(incremental) = &self.incremental_cache {
+                let mut cached_render = String::new();
+                if let Err(err) = wrapper.render_before_body(&mut cached_render) {
+                    throw_error!(err);
+                }
+                cached_render.push_str(&post_streaming);
+
+                if let Ok(mut incremental) = incremental.write() {
+                    let _ = incremental.cache(route, cached_render);
+                }
+            }
+
+            stream.render(post_streaming);
+
+            renderer.reset_render_components();
+            myself.renderers.write().unwrap().push(renderer);
+        });
+
+        Ok((
+            RenderFreshness::now(None),
+            ReceiverWithDrop {
+                receiver: rx,
+                cancel_task: Some(join_handle),
+            },
+        ))
     }
 }
 
+fn serialize_server_data(virtual_dom: &VirtualDom, scope: ScopeId) -> String {
+    // After we replace the placeholder in the dom with javascript, we need to send down the resolved data so that the client can hydrate the node
+    // Extract any data we serialized for hydration (from server futures)
+    let html_data =
+        crate::html_storage::HTMLData::extract_from_suspense_boundary(virtual_dom, scope);
+
+    // serialize the server state into a base64 string
+    html_data.serialized()
+}
+
 /// State used in server side rendering. This utilizes a pool of [`dioxus_ssr::Renderer`]s to cache static templates between renders.
 #[derive(Clone)]
 pub struct SSRState {
@@ -170,24 +324,8 @@ pub struct SSRState {
 impl SSRState {
     /// Create a new [`SSRState`].
     pub fn new(cfg: &ServeConfig) -> Self {
-        if cfg.incremental.is_some() {
-            return Self {
-                renderers: Arc::new(SsrRendererPool::Incremental(RwLock::new(vec![
-                    incremental_pre_renderer(cfg.incremental.as_ref().unwrap()),
-                    incremental_pre_renderer(cfg.incremental.as_ref().unwrap()),
-                    incremental_pre_renderer(cfg.incremental.as_ref().unwrap()),
-                    incremental_pre_renderer(cfg.incremental.as_ref().unwrap()),
-                ]))),
-            };
-        }
-
         Self {
-            renderers: Arc::new(SsrRendererPool::Renderer(RwLock::new(vec![
-                pre_renderer(),
-                pre_renderer(),
-                pre_renderer(),
-                pre_renderer(),
-            ]))),
+            renderers: Arc::new(SsrRendererPool::new(4, cfg.incremental.clone())),
         }
     }
 
@@ -198,15 +336,17 @@ impl SSRState {
         cfg: &'a ServeConfig,
         virtual_dom_factory: impl FnOnce() -> VirtualDom + Send + Sync + 'static,
         server_context: &'a DioxusServerContext,
-    ) -> Result<RenderResponse, dioxus_ssr::incremental::IncrementalRendererError> {
-        let ServeConfig { .. } = cfg;
-
-        let (freshness, html) = self
-            .renderers
+    ) -> Result<
+        (
+            RenderFreshness,
+            impl Stream<Item = Result<String, dioxus_ssr::incremental::IncrementalRendererError>>,
+        ),
+        dioxus_ssr::incremental::IncrementalRendererError,
+    > {
+        self.renderers
+            .clone()
             .render_to(cfg, route, virtual_dom_factory, server_context)
-            .await?;
-
-        Ok(RenderResponse { html, freshness })
+            .await
     }
 }
 
@@ -214,93 +354,60 @@ impl SSRState {
 #[derive(Default)]
 pub struct FullstackHTMLTemplate {
     cfg: ServeConfig,
-    server_context: DioxusServerContext,
 }
 
 impl FullstackHTMLTemplate {
     /// Create a new [`FullstackHTMLTemplate`].
-    pub fn new(cfg: &ServeConfig, server_context: &DioxusServerContext) -> Self {
-        Self {
-            cfg: cfg.clone(),
-            server_context: server_context.clone(),
-        }
+    pub fn new(cfg: &ServeConfig) -> Self {
+        Self { cfg: cfg.clone() }
     }
 }
 
-impl dioxus_ssr::incremental::WrapBody for FullstackHTMLTemplate {
-    fn render_before_body<R: std::io::Write>(
+impl FullstackHTMLTemplate {
+    /// Render any content before the body of the page.
+    pub fn render_before_body<R: std::fmt::Write>(
         &self,
         to: &mut R,
     ) -> Result<(), dioxus_ssr::incremental::IncrementalRendererError> {
         let ServeConfig { index, .. } = &self.cfg;
 
-        to.write_all(index.pre_main.as_bytes())?;
+        to.write_str(&index.pre_main)?;
 
         Ok(())
     }
 
-    fn render_after_body<R: std::io::Write>(
+    /// Render all content after the main element of the page.
+    pub fn render_after_main<R: std::fmt::Write>(
         &self,
         to: &mut R,
     ) -> Result<(), dioxus_ssr::incremental::IncrementalRendererError> {
-        // serialize the server state
-        crate::html_storage::serialize::encode_in_element(
-            &*self.server_context.html_data().map_err(|_| {
-                dioxus_ssr::incremental::IncrementalRendererError::Other(Box::new({
-                    #[derive(Debug)]
-                    struct HTMLDataReadError;
-
-                    impl std::fmt::Display for HTMLDataReadError {
-                        fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
-                            f.write_str(
-                                "Failed to read the server data to serialize it into the HTML",
-                            )
-                        }
-                    }
-
-                    impl std::error::Error for HTMLDataReadError {}
-
-                    HTMLDataReadError
-                }))
-            })?,
-            to,
-        )
-        .map_err(|err| dioxus_ssr::incremental::IncrementalRendererError::Other(Box::new(err)))?;
-
         #[cfg(all(debug_assertions, feature = "hot-reload"))]
         {
             // In debug mode, we need to add a script to the page that will reload the page if the websocket disconnects to make full recompile hot reloads work
             let disconnect_js = dioxus_hot_reload::RECONNECT_SCRIPT;
 
-            to.write_all(r#"<script>"#.as_bytes())?;
-            to.write_all(disconnect_js.as_bytes())?;
-            to.write_all(r#"</script>"#.as_bytes())?;
+            to.write_str(r#"<script>"#)?;
+            to.write_str(disconnect_js)?;
+            to.write_str(r#"</script>"#)?;
         }
 
         let ServeConfig { index, .. } = &self.cfg;
 
-        to.write_all(index.post_main.as_bytes())?;
+        to.write_str(&index.post_main)?;
 
         Ok(())
     }
-}
 
-/// A rendered response from the server.
-#[derive(Debug)]
-pub struct RenderResponse {
-    pub(crate) html: String,
-    pub(crate) freshness: RenderFreshness,
-}
+    /// Render all content after the body of the page.
+    pub fn render_after_body<R: std::fmt::Write>(
+        &self,
+        to: &mut R,
+    ) -> Result<(), dioxus_ssr::incremental::IncrementalRendererError> {
+        let ServeConfig { index, .. } = &self.cfg;
 
-impl RenderResponse {
-    /// Get the rendered HTML.
-    pub fn html(&self) -> &str {
-        &self.html
-    }
+        to.write_str(&index.after_closing_body_tag)?;
 
-    /// Get the freshness of the rendered HTML.
-    pub fn freshness(&self) -> RenderFreshness {
-        self.freshness
+        Ok(())
     }
 }
 
@@ -309,36 +416,3 @@ fn pre_renderer() -> Renderer {
     renderer.pre_render = true;
     renderer
 }
-
-fn incremental_pre_renderer(
-    cfg: &IncrementalRendererConfig,
-) -> dioxus_ssr::incremental::IncrementalRenderer {
-    let mut renderer = cfg.clone().build();
-    renderer.renderer_mut().pre_render = true;
-    renderer
-}
-
-struct WriteBuffer {
-    buffer: Vec<u8>,
-}
-
-impl std::fmt::Write for WriteBuffer {
-    fn write_str(&mut self, s: &str) -> std::fmt::Result {
-        self.buffer.extend_from_slice(s.as_bytes());
-        Ok(())
-    }
-}
-
-impl std::ops::Deref for WriteBuffer {
-    type Target = Vec<u8>;
-
-    fn deref(&self) -> &Self::Target {
-        &self.buffer
-    }
-}
-
-impl std::ops::DerefMut for WriteBuffer {
-    fn deref_mut(&mut self) -> &mut Self::Target {
-        &mut self.buffer
-    }
-}

packages/fullstack/src/serve_config.rs

@@ -12,8 +12,7 @@ pub struct ServeConfigBuilder {
     pub(crate) index_html: Option<String>,
     pub(crate) index_path: Option<PathBuf>,
     pub(crate) assets_path: Option<PathBuf>,
-    pub(crate) incremental:
-        Option<std::sync::Arc<dioxus_ssr::incremental::IncrementalRendererConfig>>,
+    pub(crate) incremental: Option<dioxus_ssr::incremental::IncrementalRendererConfig>,
 }
 
 impl ServeConfigBuilder {
@@ -30,7 +29,7 @@ impl ServeConfigBuilder {
 
     /// Enable incremental static generation
     pub fn incremental(mut self, cfg: dioxus_ssr::incremental::IncrementalRendererConfig) -> Self {
-        self.incremental = Some(std::sync::Arc::new(cfg));
+        self.incremental = Some(cfg);
         self
     }
 
@@ -108,9 +107,15 @@ fn load_index_html(contents: String, root_id: &'static str) -> IndexHtml {
         post_main.1.to_string(),
     );
 
+    let (post_main, after_closing_body_tag) =
+        post_main.split_once("</body>").unwrap_or_else(|| {
+            panic!("Failed to find closing </body> tag after id=\"{root_id}\" in index.html.")
+        });
+
     IndexHtml {
         pre_main,
-        post_main,
+        post_main: post_main.to_string(),
+        after_closing_body_tag: "</body>".to_string() + after_closing_body_tag,
     }
 }
 
@@ -118,6 +123,7 @@ fn load_index_html(contents: String, root_id: &'static str) -> IndexHtml {
 pub(crate) struct IndexHtml {
     pub(crate) pre_main: String,
     pub(crate) post_main: String,
+    pub(crate) after_closing_body_tag: String,
 }
 
 /// Used to configure how to serve a Dioxus application. It contains information about how to serve static assets, and what content to render with [`dioxus-ssr`].
@@ -127,8 +133,7 @@ pub struct ServeConfig {
     pub(crate) index: IndexHtml,
     #[allow(dead_code)]
     pub(crate) assets_path: PathBuf,
-    pub(crate) incremental:
-        Option<std::sync::Arc<dioxus_ssr::incremental::IncrementalRendererConfig>>,
+    pub(crate) incremental: Option<dioxus_ssr::incremental::IncrementalRendererConfig>,
 }
 
 impl Default for ServeConfig {

packages/fullstack/src/server_context.rs

@@ -1,8 +1,7 @@
-use crate::html_storage::HTMLData;
+use parking_lot::RwLock;
 use std::any::Any;
 use std::collections::HashMap;
 use std::sync::Arc;
-use std::sync::RwLock;
 
 type SendSyncAnyMap =
     std::collections::HashMap<std::any::TypeId, Box<dyn Any + Send + Sync + 'static>>;
@@ -13,44 +12,50 @@ type SendSyncAnyMap =
 /// You should not construct this directly inside components. Instead use the `HasServerContext` trait to get the server context from the scope.
 #[derive(Clone)]
 pub struct DioxusServerContext {
-    shared_context: std::sync::Arc<std::sync::RwLock<SendSyncAnyMap>>,
-    response_parts: std::sync::Arc<std::sync::RwLock<http::response::Parts>>,
-    pub(crate) parts: Arc<tokio::sync::RwLock<http::request::Parts>>,
-    html_data: Arc<RwLock<HTMLData>>,
+    shared_context: std::sync::Arc<RwLock<SendSyncAnyMap>>,
+    response_parts: std::sync::Arc<RwLock<http::response::Parts>>,
+    pub(crate) parts: Arc<RwLock<http::request::Parts>>,
 }
 
 #[allow(clippy::derivable_impls)]
 impl Default for DioxusServerContext {
     fn default() -> Self {
         Self {
-            shared_context: std::sync::Arc::new(std::sync::RwLock::new(HashMap::new())),
+            shared_context: std::sync::Arc::new(RwLock::new(HashMap::new())),
             response_parts: std::sync::Arc::new(RwLock::new(
                 http::response::Response::new(()).into_parts().0,
             )),
-            parts: std::sync::Arc::new(tokio::sync::RwLock::new(
-                http::request::Request::new(()).into_parts().0,
-            )),
-            html_data: Arc::new(RwLock::new(HTMLData::default())),
+            parts: std::sync::Arc::new(RwLock::new(http::request::Request::new(()).into_parts().0)),
         }
     }
 }
 
 mod server_fn_impl {
     use super::*;
+    use parking_lot::{RwLockReadGuard, RwLockWriteGuard};
     use std::any::{Any, TypeId};
-    use std::sync::LockResult;
-    use std::sync::{PoisonError, RwLockReadGuard, RwLockWriteGuard};
 
     impl DioxusServerContext {
         /// Create a new server context from a request
-        pub fn new(parts: impl Into<Arc<tokio::sync::RwLock<http::request::Parts>>>) -> Self {
+        pub fn new(parts: http::request::Parts) -> Self {
+            Self {
+                parts: Arc::new(RwLock::new(parts)),
+                shared_context: Arc::new(RwLock::new(SendSyncAnyMap::new())),
+                response_parts: std::sync::Arc::new(RwLock::new(
+                    http::response::Response::new(()).into_parts().0,
+                )),
+            }
+        }
+
+        /// Create a server context from a shared parts
+        #[allow(unused)]
+        pub(crate) fn from_shared_parts(parts: Arc<RwLock<http::request::Parts>>) -> Self {
             Self {
-                parts: parts.into(),
+                parts,
                 shared_context: Arc::new(RwLock::new(SendSyncAnyMap::new())),
                 response_parts: std::sync::Arc::new(RwLock::new(
                     http::response::Response::new(()).into_parts().0,
                 )),
-                html_data: Arc::new(RwLock::new(HTMLData::default())),
             }
         }
 
@@ -58,79 +63,46 @@ mod server_fn_impl {
         pub fn get<T: Any + Send + Sync + Clone + 'static>(&self) -> Option<T> {
             self.shared_context
                 .read()
-                .ok()?
                 .get(&TypeId::of::<T>())
                 .map(|v| v.downcast_ref::<T>().unwrap().clone())
         }
 
         /// Insert a value into the shared server context
-        pub fn insert<T: Any + Send + Sync + 'static>(
-            &self,
-            value: T,
-        ) -> Result<(), PoisonError<RwLockWriteGuard<'_, SendSyncAnyMap>>> {
+        pub fn insert<T: Any + Send + Sync + 'static>(&self, value: T) {
             self.shared_context
                 .write()
-                .map(|mut map| map.insert(TypeId::of::<T>(), Box::new(value)))
-                .map(|_| ())
+                .insert(TypeId::of::<T>(), Box::new(value));
         }
 
         /// Insert a Boxed `Any` value into the shared server context
-        pub fn insert_any(
-            &self,
-            value: Box<dyn Any + Send + Sync>,
-        ) -> Result<(), PoisonError<RwLockWriteGuard<'_, SendSyncAnyMap>>> {
+        pub fn insert_any(&self, value: Box<dyn Any + Send + Sync>) {
             self.shared_context
                 .write()
-                .map(|mut map| map.insert((*value).type_id(), value))
-                .map(|_| ())
+                .insert((*value).type_id(), value);
         }
 
         /// Get the response parts from the server context
-        pub fn response_parts(&self) -> LockResult<RwLockReadGuard<'_, http::response::Parts>> {
+        pub fn response_parts(&self) -> RwLockReadGuard<'_, http::response::Parts> {
             self.response_parts.read()
         }
 
         /// Get the response parts from the server context
-        pub fn response_parts_mut(
-            &self,
-        ) -> LockResult<RwLockWriteGuard<'_, http::response::Parts>> {
+        pub fn response_parts_mut(&self) -> RwLockWriteGuard<'_, http::response::Parts> {
             self.response_parts.write()
         }
 
         /// Get the request that triggered:
         /// - The initial SSR render if called from a ScopeState or ServerFn
         /// - The server function to be called if called from a server function after the initial render
-        pub async fn request_parts(
-            &self,
-        ) -> tokio::sync::RwLockReadGuard<'_, http::request::Parts> {
-            self.parts.read().await
+        pub fn request_parts(&self) -> parking_lot::RwLockReadGuard<'_, http::request::Parts> {
+            self.parts.read()
         }
 
         /// Get the request that triggered:
         /// - The initial SSR render if called from a ScopeState or ServerFn
         /// - The server function to be called if called from a server function after the initial render
-        pub fn request_parts_blocking(
-            &self,
-        ) -> tokio::sync::RwLockReadGuard<'_, http::request::Parts> {
-            self.parts.blocking_read()
-        }
-
-        /// Get the request that triggered:
-        /// - The initial SSR render if called from a ScopeState or ServerFn
-        /// - The server function to be called if called from a server function after the initial render
-        pub async fn request_parts_mut(
-            &self,
-        ) -> tokio::sync::RwLockWriteGuard<'_, http::request::Parts> {
-            self.parts.write().await
-        }
-
-        /// Get the request that triggered:
-        /// - The initial SSR render if called from a ScopeState or ServerFn
-        /// - The server function to be called if called from a server function after the initial render
-        pub fn request_parts_mut_blocking(
-            &self,
-        ) -> tokio::sync::RwLockWriteGuard<'_, http::request::Parts> {
-            self.parts.blocking_write()
+        pub fn request_parts_mut(&self) -> parking_lot::RwLockWriteGuard<'_, http::request::Parts> {
+            self.parts.write()
         }
 
         /// Extract some part from the request
@@ -139,21 +111,6 @@ mod server_fn_impl {
         ) -> Result<T, R> {
             T::from_request(self).await
         }
-
-        /// Insert some data into the html data store
-        pub(crate) fn push_html_data<T: serde::Serialize>(
-            &self,
-            value: &T,
-        ) -> Result<(), PoisonError<RwLockWriteGuard<'_, HTMLData>>> {
-            self.html_data.write().map(|mut map| {
-                map.push(value);
-            })
-        }
-
-        /// Get the html data store
-        pub(crate) fn html_data(&self) -> LockResult<RwLockReadGuard<'_, HTMLData>> {
-            self.html_data.read()
-        }
     }
 }
 
@@ -189,7 +146,7 @@ pub fn with_server_context<O>(context: DioxusServerContext, f: impl FnOnce() ->
 /// A future that provides the server context to the inner future
 #[pin_project::pin_project]
 pub struct ProvideServerContext<F: std::future::Future> {
-    context: Option<DioxusServerContext>,
+    context: DioxusServerContext,
     #[pin]
     f: F,
 }
@@ -197,10 +154,7 @@ pub struct ProvideServerContext<F: std::future::Future> {
 impl<F: std::future::Future> ProvideServerContext<F> {
     /// Create a new future that provides the server context to the inner future
     pub fn new(f: F, context: DioxusServerContext) -> Self {
-        Self {
-            context: Some(context),
-            f,
-        }
+        Self { f, context }
     }
 }
 
@@ -212,10 +166,8 @@ impl<F: std::future::Future> std::future::Future for ProvideServerContext<F> {
         cx: &mut std::task::Context<'_>,
     ) -> std::task::Poll<Self::Output> {
         let this = self.project();
-        let context = this.context.take().unwrap();
-        let result = with_server_context(context.clone(), || this.f.poll(cx));
-        *this.context = Some(context);
-        result
+        let context = this.context.clone();
+        with_server_context(context, || this.f.poll(cx))
     }
 }
 
@@ -302,7 +254,9 @@ impl<
 {
     type Rejection = R;
 
+    #[allow(clippy::all)]
     async fn from_request(req: &DioxusServerContext) -> Result<Self, Self::Rejection> {
-        Ok(I::from_request_parts(&mut *req.request_parts_mut().await, &()).await?)
+        let mut lock = req.request_parts_mut();
+        I::from_request_parts(&mut lock, &()).await
     }
 }

packages/fullstack/src/streaming.rs

@@ -0,0 +1,144 @@
+//! There are two common ways to render suspense:
+//! 1. Stream the HTML in order - this will work even if javascript is disabled, but if there is something slow at the top of your page, and fast at the bottom, nothing will render until the slow part is done
+//! 2. Render placeholders and stream the HTML out of order - this will only work if javascript is enabled. This lets you render any parts of your page that resolve quickly, and then render the rest of the page as it becomes available
+//!
+//! Dioxus currently uses a the second out of order streaming approach which requires javascript. The rendering structure is as follows:
+//! ```html
+//! // Initial content is sent down with placeholders
+//! <div>
+//!     Header
+//!     <div class="flex flex-col">
+//!         // If we reach a suspense placeholder that may be replaced later, we insert a template node with a unique id to replace later
+//!         <div>Loading user info...</div>
+//!     </div>
+//!     Footer
+//! </div>
+//! // After the initial render is done, we insert divs that are hidden with new content.
+//! // We use divs instead of templates for better SEO
+//! <script>
+//!     // Code to hook up hydration replacement
+//! </script>
+//! <div hidden id="ds-1-r">
+//!     <div>Final HTML</div>
+//! </div>
+//! <script>
+//!     window.dx_hydrate(2, "suspenseboundarydata");
+//! </script>
+//! ```
+
+use futures_channel::mpsc::Sender;
+
+use std::{
+    fmt::{Display, Write},
+    sync::{Arc, RwLock},
+};
+
+/// Sections are identified by a unique id based on the suspense path. We only track the path of suspense boundaries because the client may render different components than the server.
+#[derive(Clone, Debug, Default)]
+struct MountPath {
+    parent: Option<Arc<MountPath>>,
+    id: usize,
+}
+
+impl MountPath {
+    fn child(&self) -> Self {
+        Self {
+            parent: Some(Arc::new(self.clone())),
+            id: 0,
+        }
+    }
+}
+
+impl Display for MountPath {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        if let Some(parent) = &self.parent {
+            write!(f, "{},", parent)?;
+        }
+        write!(f, "{}", self.id)
+    }
+}
+
+pub(crate) struct StreamingRenderer<E = std::convert::Infallible> {
+    channel: RwLock<Sender<Result<String, E>>>,
+    current_path: RwLock<MountPath>,
+}
+
+impl<E> StreamingRenderer<E> {
+    /// Create a new streaming renderer with the given head that renders into a channel
+    pub(crate) fn new(
+        before_body: impl Display,
+        mut render_into: Sender<Result<String, E>>,
+    ) -> Self {
+        let start_html = before_body.to_string();
+        _ = render_into.start_send(Ok(start_html));
+
+        Self {
+            channel: render_into.into(),
+            current_path: Default::default(),
+        }
+    }
+
+    /// Render a new chunk of html that will never change
+    pub(crate) fn render(&self, html: impl Display) {
+        _ = self
+            .channel
+            .write()
+            .unwrap()
+            .start_send(Ok(html.to_string()));
+    }
+
+    /// Render a new chunk of html that may change
+    pub(crate) fn render_placeholder<W: Write + ?Sized>(
+        &self,
+        html: impl FnOnce(&mut W) -> std::fmt::Result,
+        into: &mut W,
+    ) -> Result<Mount, std::fmt::Error> {
+        let id = self.current_path.read().unwrap().clone();
+        // Increment the id for the next placeholder
+        self.current_path.write().unwrap().id += 1;
+        // While we are inside the placeholder, set the suspense path to the suspense boundary that we are rendering
+        let old_path = std::mem::replace(&mut *self.current_path.write().unwrap(), id.child());
+        html(into)?;
+        // Restore the old path
+        *self.current_path.write().unwrap() = old_path;
+        Ok(Mount { id })
+    }
+
+    /// Replace a placeholder that was rendered previously
+    pub(crate) fn replace_placeholder<W: Write + ?Sized>(
+        &self,
+        id: Mount,
+        html: impl FnOnce(&mut W) -> std::fmt::Result,
+        data: impl Display,
+        into: &mut W,
+    ) -> std::fmt::Result {
+        // Then replace the suspense placeholder with the new content
+        write!(into, r#"<div id="ds-{id}-r" hidden>"#)?;
+        // While we are inside the placeholder, set the suspense path to the suspense boundary that we are rendering
+        let old_path = std::mem::replace(&mut *self.current_path.write().unwrap(), id.id.child());
+        html(into)?;
+        // Restore the old path
+        *self.current_path.write().unwrap() = old_path;
+        write!(
+            into,
+            r#"</div><script>window.dx_hydrate([{id}], "{data}")</script>"#
+        )
+    }
+
+    /// Close the stream with an error
+    pub(crate) fn close_with_error(&self, error: E) {
+        _ = self.channel.write().unwrap().start_send(Err(error));
+    }
+}
+
+/// A mounted placeholder in the dom that may change in the future
+#[derive(Clone, Debug)]
+pub(crate) struct Mount {
+    id: MountPath,
+}
+
+impl Display for Mount {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        write!(f, "{}", self.id)
+    }
+}

packages/hooks/Cargo.toml

@@ -18,9 +18,7 @@ dioxus-core = { workspace = true }
 dioxus-signals = { workspace = true }
 futures-channel = { workspace = true }
 tracing = { workspace = true }
-thiserror = { workspace = true }
 slab = { workspace = true }
-dioxus-debug-cell = "0.1.1"
 futures-util = { workspace = true}
 generational-box.workspace = true
 rustversion = "1.0.17"

packages/hooks/src/lib.rs

@@ -26,7 +26,7 @@
 ///     });
 /// };
 /// # handle_thing(());
-/// # None }
+/// # VNode::empty() }
 /// ```
 macro_rules! to_owned {
     // Rule matching simple symbols without a path

packages/hooks/src/use_resource.rs

@@ -149,8 +149,7 @@ pub enum UseResourceState {
 impl<T> Resource<T> {
     /// Restart the resource's future.
     ///
-    /// Will not cancel the previous future, but will ignore any values that it
-    /// generates.
+    /// This will cancel the current future and start a new one.
     ///
     /// ## Example
     /// ```rust, no_run
@@ -407,6 +406,21 @@ impl<T> Resource<T> {
     pub fn value(&self) -> ReadOnlySignal<Option<T>> {
         self.value.into()
     }
+
+    /// Suspend the resource's future and only continue rendering when the future is ready
+    pub fn suspend(&self) -> std::result::Result<MappedSignal<T>, RenderError> {
+        match self.state.cloned() {
+            UseResourceState::Stopped | UseResourceState::Paused | UseResourceState::Pending => {
+                let task = self.task();
+                if task.paused() {
+                    Ok(self.value.map(|v| v.as_ref().unwrap()))
+                } else {
+                    Err(RenderError::Suspended(SuspendedFuture::new(task)))
+                }
+            }
+            _ => Ok(self.value.map(|v| v.as_ref().unwrap())),
+        }
+    }
 }
 
 impl<T> From<Resource<T>> for ReadOnlySignal<Option<T>> {

packages/hot-reload/Cargo.toml

@@ -34,9 +34,9 @@ tracing.workspace = true
 tokio = { workspace = true, features = ["full"] }
 
 [features]
-default = ["dep:dioxus-html"]
+default = ["dioxus-html"]
 custom_file_watcher = ["dep:ignore", "dep:chrono", "dep:notify", "dep:execute", "dep:once_cell", "dep:ignore"]
-file_watcher = ["custom_file_watcher", "dioxus-html/hot-reload-context"]
+file_watcher = ["custom_file_watcher", "dioxus-html/hot-reload-context", "dioxus-rsx/hot_reload"]
 serve = ["dep:axum", "dep:tokio-stream", "dep:futures-util", "dep:tokio", "file_watcher"]
 
 [package.metadata.docs.rs]

packages/hot-reload/src/assets/autoreload.js

@@ -31,8 +31,6 @@
   var ws = new WebSocket(url);
 
   ws.onmessage = (ev) => {
-    console.log("Received message: ", ev, ev.data);
-
     if (ev.data == "reload") {
       window.location.reload();
     }

packages/html/Cargo.toml

@@ -11,16 +11,17 @@ keywords = ["dom", "ui", "gui", "react"]
 
 [dependencies]
 dioxus-core = { workspace = true }
-dioxus-rsx = { workspace = true, features = ["hot_reload"], optional = true }
+dioxus-rsx = { workspace = true, optional = true }
 dioxus-html-internal-macro = { workspace = true }
 generational-box = { workspace = true }
 serde = { version = "1", features = ["derive"], optional = true }
 serde_repr = { version = "0.1", optional = true }
 wasm-bindgen = { workspace = true, optional = true }
+js-sys = { version = "0.3.56", optional = true }
 euclid = "0.22.7"
 enumset = "1.1.2"
-keyboard-types = "0.7"
-async-trait = "0.1.58"
+keyboard-types = { version = "0.7", default-features = false }
+async-trait = { version = "0.1.58", optional = true }
 serde-value = { version = "0.7.0", optional = true }
 tokio = { workspace = true, features = ["fs", "io-util"], optional = true }
 rfd = { version = "0.14", optional = true }
@@ -39,6 +40,7 @@ features = [
     "MouseEvent",
     "DragEvent",
     "InputEvent",
+    "HtmlInputElement",
     "ClipboardEvent",
     "KeyboardEvent",
     "WheelEvent",
@@ -56,7 +58,7 @@ dioxus-web = { workspace = true }
 tokio = { workspace = true, features = ["time"] }
 
 [features]
-default = ["serialize", "mounted", "eval"]
+default = ["serialize", "mounted", "eval", "file-engine"]
 serialize = [
     "dep:serde",
     "dep:serde_json",
@@ -78,9 +80,16 @@ eval = [
     "dep:serde",
     "dep:serde_json"
 ]
+file-engine = [
+    "dep:async-trait",
+    "dep:js-sys",
+    "web-sys?/File",
+    "web-sys?/FileList",
+    "web-sys?/FileReader"
+]
 wasm-bind = ["dep:web-sys", "dep:wasm-bindgen"]
-native-bind = ["dep:tokio"]
-hot-reload-context = ["dep:dioxus-rsx"]
+native-bind = ["dep:tokio", "file-engine"]
+hot-reload-context = ["dep:dioxus-rsx", "dioxus-rsx/hot_reload_traits"]
 html-to-rsx = []
 
 [package.metadata.docs.rs]

packages/html/src/events/drag.rs

@@ -1,4 +1,3 @@
-use crate::file_data::{FileEngine, HasFileData};
 use crate::geometry::{ClientPoint, Coordinates, ElementPoint, PagePoint, ScreenPoint};
 use crate::input_data::{MouseButton, MouseButtonSet};
 use crate::prelude::*;
@@ -58,8 +57,9 @@ impl DragData {
     }
 }
 
-impl HasFileData for DragData {
-    fn files(&self) -> Option<std::sync::Arc<dyn FileEngine>> {
+impl crate::HasFileData for DragData {
+    #[cfg(feature = "file-engine")]
+    fn files(&self) -> Option<std::sync::Arc<dyn crate::file_data::FileEngine>> {
         self.inner.files()
     }
 }
@@ -111,16 +111,18 @@ impl PointerInteraction for DragData {
 pub struct SerializedDragData {
     pub mouse: crate::point_interaction::SerializedPointInteraction,
 
+    #[cfg(feature = "file-engine")]
     #[serde(default)]
     files: Option<crate::file_data::SerializedFileEngine>,
 }
 
 #[cfg(feature = "serialize")]
 impl SerializedDragData {
-    fn new(drag: &DragData, files: Option<crate::file_data::SerializedFileEngine>) -> Self {
+    fn new(drag: &DragData) -> Self {
         Self {
             mouse: crate::point_interaction::SerializedPointInteraction::from(drag),
-            files,
+            #[cfg(feature = "file-engine")]
+            files: None,
         }
     }
 }
@@ -133,8 +135,9 @@ impl HasDragData for SerializedDragData {
 }
 
 #[cfg(feature = "serialize")]
-impl HasFileData for SerializedDragData {
-    fn files(&self) -> Option<std::sync::Arc<dyn FileEngine>> {
+impl crate::file_data::HasFileData for SerializedDragData {
+    #[cfg(feature = "file-engine")]
+    fn files(&self) -> Option<std::sync::Arc<dyn crate::file_data::FileEngine>> {
         self.files
             .as_ref()
             .map(|files| std::sync::Arc::new(files.clone()) as _)
@@ -195,7 +198,7 @@ impl PointerInteraction for SerializedDragData {
 #[cfg(feature = "serialize")]
 impl serde::Serialize for DragData {
     fn serialize<S: serde::Serializer>(&self, serializer: S) -> Result<S::Ok, S::Error> {
-        SerializedDragData::new(self, None).serialize(serializer)
+        SerializedDragData::new(self).serialize(serializer)
     }
 }
 
@@ -210,7 +213,7 @@ impl<'de> serde::Deserialize<'de> for DragData {
 }
 
 /// A trait for any object that has the data for a drag event
-pub trait HasDragData: HasMouseData + HasFileData {
+pub trait HasDragData: HasMouseData + crate::HasFileData {
     /// return self as Any
     fn as_any(&self) -> &dyn std::any::Any;
 }

packages/html/src/events/form.rs

@@ -1,4 +1,3 @@
-use crate::file_data::FileEngine;
 use crate::file_data::HasFileData;
 use std::{collections::HashMap, fmt::Debug, ops::Deref};
 
@@ -106,7 +105,8 @@ impl FormData {
     }
 
     /// Get the files of the form event
-    pub fn files(&self) -> Option<std::sync::Arc<dyn FileEngine>> {
+    #[cfg(feature = "file-engine")]
+    pub fn files(&self) -> Option<std::sync::Arc<dyn crate::file_data::FileEngine>> {
         self.inner.files()
     }
 
@@ -176,6 +176,7 @@ pub struct SerializedFormData {
     #[serde(default)]
     valid: bool,
 
+    #[cfg(feature = "file-engine")]
     #[serde(default)]
     files: Option<crate::file_data::SerializedFileEngine>,
 }
@@ -183,39 +184,46 @@ pub struct SerializedFormData {
 #[cfg(feature = "serialize")]
 impl SerializedFormData {
     /// Create a new serialized form data object
-    pub fn new(
-        value: String,
-        values: HashMap<String, FormValue>,
-        files: Option<crate::file_data::SerializedFileEngine>,
-    ) -> Self {
+    pub fn new(value: String, values: HashMap<String, FormValue>) -> Self {
         Self {
             value,
             values,
-            files,
             valid: true,
+            #[cfg(feature = "file-engine")]
+            files: None,
         }
     }
 
+    #[cfg(feature = "file-engine")]
+    /// Add files to the serialized form data object
+    pub fn with_files(mut self, files: crate::file_data::SerializedFileEngine) -> Self {
+        self.files = Some(files);
+        self
+    }
+
     /// Create a new serialized form data object from a traditional form data object
     pub async fn async_from(data: &FormData) -> Self {
         Self {
             value: data.value(),
             values: data.values(),
             valid: data.valid(),
-            files: match data.files() {
-                Some(files) => {
-                    let mut resolved_files = HashMap::new();
-
-                    for file in files.files() {
-                        let bytes = files.read_file(&file).await;
-                        resolved_files.insert(file, bytes.unwrap_or_default());
+            #[cfg(feature = "file-engine")]
+            files: {
+                match data.files() {
+                    Some(files) => {
+                        let mut resolved_files = HashMap::new();
+
+                        for file in files.files() {
+                            let bytes = files.read_file(&file).await;
+                            resolved_files.insert(file, bytes.unwrap_or_default());
+                        }
+
+                        Some(crate::file_data::SerializedFileEngine {
+                            files: resolved_files,
+                        })
                     }
-
-                    Some(crate::file_data::SerializedFileEngine {
-                        files: resolved_files,
-                    })
+                    None => None,
                 }
-                None => None,
             },
         }
     }
@@ -225,6 +233,7 @@ impl SerializedFormData {
             value: data.value(),
             values: data.values(),
             valid: data.valid(),
+            #[cfg(feature = "file-engine")]
             files: None,
         }
     }
@@ -251,15 +260,17 @@ impl HasFormData for SerializedFormData {
 
 #[cfg(feature = "serialize")]
 impl HasFileData for SerializedFormData {
-    fn files(&self) -> Option<std::sync::Arc<dyn FileEngine>> {
+    #[cfg(feature = "file-engine")]
+    fn files(&self) -> Option<std::sync::Arc<dyn crate::FileEngine>> {
         self.files
             .as_ref()
             .map(|files| std::sync::Arc::new(files.clone()) as _)
     }
 }
 
+#[cfg(feature = "file-engine")]
 impl HasFileData for FormData {
-    fn files(&self) -> Option<std::sync::Arc<dyn FileEngine>> {
+    fn files(&self) -> Option<std::sync::Arc<dyn crate::FileEngine>> {
         self.inner.files()
     }
 }

packages/html/src/file_data.rs

@@ -1,12 +1,15 @@
-use std::any::Any;
-
 pub trait HasFileData: std::any::Any {
+    // NOTE: The methods of this trait are config'ed out instead of the trait
+    // itself because several other traits inherit from this trait and there isn't a clean way to
+    // conditionally inherit from a trait based on a config.
+    #[cfg(feature = "file-engine")]
     fn files(&self) -> Option<std::sync::Arc<dyn FileEngine>> {
         None
     }
 }
 
 #[cfg(feature = "serialize")]
+#[cfg(feature = "file-engine")]
 /// A file engine that serializes files to bytes
 #[derive(serde::Serialize, serde::Deserialize, Debug, PartialEq, Clone)]
 pub struct SerializedFileEngine {
@@ -14,6 +17,7 @@ pub struct SerializedFileEngine {
 }
 
 #[cfg(feature = "serialize")]
+#[cfg(feature = "file-engine")]
 #[async_trait::async_trait(?Send)]
 impl FileEngine for SerializedFileEngine {
     fn files(&self) -> Vec<String> {
@@ -35,13 +39,14 @@ impl FileEngine for SerializedFileEngine {
             .map(|bytes| String::from_utf8_lossy(&bytes).to_string())
     }
 
-    async fn get_native_file(&self, file: &str) -> Option<Box<dyn Any>> {
+    async fn get_native_file(&self, file: &str) -> Option<Box<dyn std::any::Any>> {
         self.read_file(file)
             .await
-            .map(|val| Box::new(val) as Box<dyn Any>)
+            .map(|val| Box::new(val) as Box<dyn std::any::Any>)
     }
 }
 
+#[cfg(feature = "file-engine")]
 #[async_trait::async_trait(?Send)]
 pub trait FileEngine {
     // get a list of file names
@@ -57,5 +62,5 @@ pub trait FileEngine {
     async fn read_file_to_string(&self, file: &str) -> Option<String>;
 
     // returns a file in platform's native representation
-    async fn get_native_file(&self, file: &str) -> Option<Box<dyn Any>>;
+    async fn get_native_file(&self, file: &str) -> Option<Box<dyn std::any::Any>>;
 }

packages/html/src/lib.rs

@@ -33,6 +33,8 @@ pub mod point_interaction;
 mod render_template;
 #[cfg(feature = "wasm-bind")]
 mod web_sys_bind;
+#[cfg(feature = "wasm-bind")]
+pub use web_sys_bind::*;
 
 #[cfg(feature = "serialize")]
 mod transit;

packages/html/src/native_bind/native_file_engine.rs

@@ -16,6 +16,7 @@ impl NativeFileEngine {
     }
 }
 
+#[cfg(feature = "file-engine")]
 #[async_trait::async_trait(?Send)]
 impl FileEngine for NativeFileEngine {
     fn files(&self) -> Vec<String> {

packages/html/src/render_template.rs

@@ -35,7 +35,6 @@ fn render_template_node(node: &TemplateNode, out: &mut String) -> std::fmt::Resu
         }
         TemplateNode::Text { text: t } => write!(out, "{t}")?,
         TemplateNode::Dynamic { id: _ } => write!(out, "<pre hidden />")?,
-        TemplateNode::DynamicText { id: t } => write!(out, "<!-- --> {t} <!-- -->")?,
     };
     Ok(())
 }

packages/html/src/web_sys_bind/events.rs

@@ -3,15 +3,13 @@ use crate::events::{
     AnimationData, CompositionData, KeyboardData, MouseData, PointerData, TouchData,
     TransitionData, WheelData,
 };
-use crate::file_data::{FileEngine, HasFileData};
-use crate::geometry::{
-    ClientPoint, ElementPoint, PagePoint, PixelsRect, PixelsSize, PixelsVector2D, ScreenPoint,
-};
+use crate::file_data::HasFileData;
+use crate::geometry::{ClientPoint, ElementPoint, PagePoint, ScreenPoint};
 use crate::input_data::{decode_key_location, decode_mouse_button_set, MouseButton};
 use crate::prelude::*;
 use keyboard_types::{Code, Key, Modifiers};
 use std::str::FromStr;
-use wasm_bindgen::{JsCast, JsValue};
+use wasm_bindgen::JsCast;
 use web_sys::{
     AnimationEvent, CompositionEvent, Event, KeyboardEvent, MouseEvent, PointerEvent, Touch,
     TouchEvent, TransitionEvent, WheelEvent,
@@ -427,30 +425,41 @@ impl From<&web_sys::Element> for MountedData {
 impl crate::RenderedElementBacking for web_sys::Element {
     fn get_scroll_offset(
         &self,
-    ) -> std::pin::Pin<Box<dyn std::future::Future<Output = crate::MountedResult<PixelsVector2D>>>>
-    {
+    ) -> std::pin::Pin<
+        Box<
+            dyn std::future::Future<Output = crate::MountedResult<crate::geometry::PixelsVector2D>>,
+        >,
+    > {
         let left = self.scroll_left();
         let top = self.scroll_top();
-        let result = Ok(PixelsVector2D::new(left as f64, top as f64));
+        let result = Ok(crate::geometry::PixelsVector2D::new(
+            left as f64,
+            top as f64,
+        ));
         Box::pin(async { result })
     }
 
     fn get_scroll_size(
         &self,
-    ) -> std::pin::Pin<Box<dyn std::future::Future<Output = crate::MountedResult<PixelsSize>>>>
-    {
+    ) -> std::pin::Pin<
+        Box<dyn std::future::Future<Output = crate::MountedResult<crate::geometry::PixelsSize>>>,
+    > {
         let width = self.scroll_width();
         let height = self.scroll_height();
-        let result = Ok(PixelsSize::new(width as f64, height as f64));
+        let result = Ok(crate::geometry::PixelsSize::new(
+            width as f64,
+            height as f64,
+        ));
         Box::pin(async { result })
     }
 
     fn get_client_rect(
         &self,
-    ) -> std::pin::Pin<Box<dyn std::future::Future<Output = crate::MountedResult<PixelsRect>>>>
-    {
+    ) -> std::pin::Pin<
+        Box<dyn std::future::Future<Output = crate::MountedResult<crate::geometry::PixelsRect>>>,
+    > {
         let rect = self.get_bounding_client_rect();
-        let result = Ok(PixelsRect::new(
+        let result = Ok(crate::geometry::PixelsRect::new(
             euclid::Point2D::new(rect.left(), rect.top()),
             euclid::Size2D::new(rect.width(), rect.height()),
         ));
@@ -481,6 +490,17 @@ impl crate::RenderedElementBacking for web_sys::Element {
         &self,
         focus: bool,
     ) -> std::pin::Pin<Box<dyn std::future::Future<Output = crate::MountedResult<()>>>> {
+        #[derive(Debug)]
+        struct FocusError(wasm_bindgen::JsValue);
+
+        impl std::fmt::Display for FocusError {
+            fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+                write!(f, "failed to focus element {:?}", self.0)
+            }
+        }
+
+        impl std::error::Error for FocusError {}
+
         let result = self
             .dyn_ref::<web_sys::HtmlElement>()
             .ok_or_else(|| crate::MountedError::OperationFailed(Box::new(FocusError(self.into()))))
@@ -492,17 +512,6 @@ impl crate::RenderedElementBacking for web_sys::Element {
     }
 }
 
-#[derive(Debug)]
-struct FocusError(JsValue);
-
-impl std::fmt::Display for FocusError {
-    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
-        write!(f, "failed to focus element {:?}", self.0)
-    }
-}
-
-impl std::error::Error for FocusError {}
-
 impl HasScrollData for Event {
     fn as_any(&self) -> &dyn std::any::Any {
         self
@@ -546,18 +555,15 @@ impl HasMediaData for web_sys::Event {
 }
 
 impl HasFileData for web_sys::Event {
-    fn files(&self) -> Option<std::sync::Arc<dyn FileEngine>> {
-        #[cfg(not(feature = "file_engine"))]
-        let files = None;
-        #[cfg(feature = "file_engine")]
-        let files = element
+    #[cfg(feature = "file-engine")]
+    fn files(&self) -> Option<std::sync::Arc<dyn crate::file_data::FileEngine>> {
+        let files = self
             .dyn_ref()
             .and_then(|input: &web_sys::HtmlInputElement| {
                 input.files().and_then(|files| {
                     #[allow(clippy::arc_with_non_send_sync)]
-                    crate::file_engine::WebFileEngine::new(files).map(|f| {
-                        std::sync::Arc::new(f) as std::sync::Arc<dyn dioxus_html::FileEngine>
-                    })
+                    crate::web_sys_bind::file_engine::WebFileEngine::new(files)
+                        .map(|f| std::sync::Arc::new(f) as std::sync::Arc<dyn crate::FileEngine>)
                 })
             });
 

packages/web/src/file_engine.rs → packages/html/src/web_sys_bind/file_engine.rs

@@ -1,17 +1,19 @@
 use std::any::Any;
 
-use dioxus_html::FileEngine;
+use crate::FileEngine;
 use futures_channel::oneshot;
 use js_sys::Uint8Array;
 use wasm_bindgen::{prelude::Closure, JsCast};
 use web_sys::{File, FileList, FileReader};
 
-pub(crate) struct WebFileEngine {
+/// A file engine for the web platform
+pub struct WebFileEngine {
     file_reader: FileReader,
     file_list: FileList,
 }
 
 impl WebFileEngine {
+    /// Create a new file engine from a file list
     pub fn new(file_list: FileList) -> Option<Self> {
         Some(Self {
             file_list,

packages/html/src/web_sys_bind/mod.rs

@@ -1 +1,5 @@
 mod events;
+#[cfg(feature = "file-engine")]
+mod file_engine;
+#[cfg(feature = "file-engine")]
+pub use file_engine::*;

packages/interpreter/build.rs

@@ -1,21 +1,29 @@
 use std::collections::hash_map::DefaultHasher;
+use std::path::PathBuf;
 use std::{hash::Hasher, process::Command};
 
 fn main() {
     // If any TS changes, re-run the build script
-    println!("cargo:rerun-if-changed=src/ts/form.ts");
-    println!("cargo:rerun-if-changed=src/ts/core.ts");
-    println!("cargo:rerun-if-changed=src/ts/serialize.ts");
-    println!("cargo:rerun-if-changed=src/ts/set_attribute.ts");
-    println!("cargo:rerun-if-changed=src/ts/common.ts");
-    println!("cargo:rerun-if-changed=src/ts/eval.ts");
-    println!("cargo:rerun-if-changed=src/ts/native_eval.ts");
+    let watching = std::fs::read_dir("./src/ts").unwrap();
+    let ts_paths: Vec<_> = watching
+        .into_iter()
+        .flatten()
+        .map(|entry| entry.path())
+        .filter(|path| path.extension().map(|ext| ext == "ts").unwrap_or(false))
+        .collect();
+    for path in &ts_paths {
+        println!("cargo:rerun-if-changed={}", path.display());
+    }
 
     // Compute the hash of the ts files
-    let hash = hash_ts_files();
+    let hash = hash_ts_files(ts_paths);
 
     // If the hash matches the one on disk, we're good and don't need to update bindings
-    let expected = include_str!("src/js/hash.txt").trim();
+    let fs_hash_string = std::fs::read_to_string("src/js/hash.txt");
+    let expected = fs_hash_string
+        .as_ref()
+        .map(|s| s.trim())
+        .unwrap_or_default();
     if expected == hash.to_string() {
         return;
     }
@@ -27,24 +35,21 @@ fn main() {
     gen_bindings("core", "core");
     gen_bindings("eval", "eval");
     gen_bindings("native_eval", "native_eval");
+    gen_bindings("hydrate", "hydrate");
+    gen_bindings("initialize_streaming", "initialize_streaming");
 
     std::fs::write("src/js/hash.txt", hash.to_string()).unwrap();
 }
 
 /// Hashes the contents of a directory
-fn hash_ts_files() -> u64 {
-    let files = [
-        include_str!("src/ts/common.ts"),
-        include_str!("src/ts/native.ts"),
-        include_str!("src/ts/core.ts"),
-        include_str!("src/ts/eval.ts"),
-        include_str!("src/ts/native_eval.ts"),
-    ];
-
+fn hash_ts_files(mut files: Vec<PathBuf>) -> u64 {
+    // Different systems will read the files in different orders, so we sort them to make sure the hash is consistent
+    files.sort();
     let mut hash = DefaultHasher::new();
     for file in files {
+        let contents = std::fs::read_to_string(file).unwrap();
         // windows + git does a weird thing with line endings, so we need to normalize them
-        for line in file.lines() {
+        for line in contents.lines() {
             hash.write(line.as_bytes());
         }
     }