fix: use shell for SSR, and do not create a second <head>

chore: leptosfmt
fix: hackernews_js_fetch example
2025-12-28 05:32:42 -05:00 · 2024-07-12 11:32:10 -04:00 · 2024-07-11 06:56:25 -07:00 · 2024-07-11 00:48:09 -07:00 · 2024-07-10 22:04:45 -04:00 · 2024-07-10 21:03:48 -04:00
594 changed files with 52246 additions and 37656 deletions
--- a/.github/workflows/ci-semver.yml
+++ b/.github/workflows/ci-semver.yml
@@ -14,7 +14,7 @@ jobs:

  test:
    needs: [get-leptos-changed]
-    if: needs.get-leptos-changed.outputs.leptos_changed == 'true'
+    if: needs.get-leptos-changed.outputs.leptos_changed == 'true' && github.event.pull_request.labels[0].name != 'breaking'
    name: Run semver check (nightly-2024-04-14)
    runs-on: ubuntu-latest

--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -20,6 +20,11 @@ jobs:
      matrix:
        directory:
          [
+            any_error,
+            any_spawner,
+            const_str_slice_concat,
+            either_of,
+            hydration_context,
            integrations/actix,
            integrations/axum,
            integrations/utils,
@@ -28,10 +33,14 @@ jobs:
            leptos_dom,
            leptos_hot_reload,
            leptos_macro,
-            leptos_reactive,
            leptos_server,
            meta,
+            next_tuple,
+            oco,
+            or_poisoned,
+            reactive_graph,
            router,
+            router_macro,
            server_fn,
            server_fn/server_fn_macro_default,
            server_fn_macro,
--- a/.github/workflows/get-leptos-changed.yml
+++ b/.github/workflows/get-leptos-changed.yml
@@ -24,17 +24,29 @@ jobs:
        uses: tj-actions/changed-files@v43
        with:
          files: |
-            integrations/**
+            any_error/**
+            any_spawner/**
+            const_str_slice_concat/**
+            either_of/**
+            hydration_context/**
+            integrations/actix/**
+            integrations/axum/**
+            integrations/utils/**
            leptos/**
            leptos_config/**
            leptos_dom/**
            leptos_hot_reload/**
            leptos_macro/**
-            leptos_reactive/**
            leptos_server/**
            meta/**
+            next_tuple/**
+            oco/**
+            or_poisoned/**
+            reactive_graph/**
            router/**
+            router_macro/**
            server_fn/**
+            server_fn/server_fn_macro_default/**
            server_fn_macro/**

      - name: List source files that changed
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -3,18 +3,28 @@ resolver = "2"
 members = [
  # utilities
  "oco",
+  "any_spawner",
+  "const_str_slice_concat",
+  "either_of",
+  "next_tuple",
+  "oco",
+  "or_poisoned",

  # core
+  "hydration_context",
  "leptos",
  "leptos_dom",
  "leptos_config",
  "leptos_hot_reload",
  "leptos_macro",
-  "leptos_reactive",
  "leptos_server",
+  "reactive_graph",
+  "reactive_stores",
+  "reactive_stores_macro",
  "server_fn",
  "server_fn_macro",
  "server_fn/server_fn_macro_default",
+  "tachys",

  # integrations
  "integrations/actix",
@@ -24,28 +34,40 @@ members = [
  # libraries
  "meta",
  "router",
+  "router_macro",
+  "any_error",
 ]
 exclude = ["benchmarks", "examples"]

 [workspace.package]
-version = "0.6.12"
+version = "0.7.0-alpha"
 rust-version = "1.75"

 [workspace.dependencies]
-oco_ref = { path = "./oco", version = "0.1.0" }
-leptos = { path = "./leptos", version = "0.6.12" }
-leptos_dom = { path = "./leptos_dom", version = "0.6.12" }
-leptos_hot_reload = { path = "./leptos_hot_reload", version = "0.6.12" }
-leptos_macro = { path = "./leptos_macro", version = "0.6.12" }
-leptos_reactive = { path = "./leptos_reactive", version = "0.6.12" }
-leptos_server = { path = "./leptos_server", version = "0.6.12" }
-server_fn = { path = "./server_fn", version = "0.6.12" }
-server_fn_macro = { path = "./server_fn_macro", version = "0.6.12" }
-server_fn_macro_default = { path = "./server_fn/server_fn_macro_default", version = "0.6" }
-leptos_config = { path = "./leptos_config", version = "0.6.12" }
-leptos_router = { path = "./router", version = "0.6.12" }
-leptos_meta = { path = "./meta", version = "0.6.12" }
-leptos_integration_utils = { path = "./integrations/utils", version = "0.6.12" }
+throw_error = { path = "./any_error/", version = "0.1" }
+any_spawner = { path = "./any_spawner/", version = "0.1" }
+const_str_slice_concat = { path = "./const_str_slice_concat", version = "0.1" }
+either_of = { path = "./either_of/", version = "0.1" }
+hydration_context = { path = "./hydration_context", version = "0.2.0-alpha" }
+leptos = { path = "./leptos", version = "0.7.0-alpha" }
+leptos_config = { path = "./leptos_config", version = "0.7.0-alpha" }
+leptos_dom = { path = "./leptos_dom", version = "0.7.0-alpha" }
+leptos_hot_reload = { path = "./leptos_hot_reload", version = "0.7.0-alpha" }
+leptos_integration_utils = { path = "./integrations/utils", version = "0.7.0-alpha" }
+leptos_macro = { path = "./leptos_macro", version = "0.7.0-alpha" }
+leptos_router = { path = "./router", version = "0.7.0-alpha" }
+leptos_server = { path = "./leptos_server", version = "0.7.0-alpha" }
+leptos_meta = { path = "./meta", version = "0.7.0-alpha" }
+next_tuple = { path = "./next_tuple", version = "0.1.0-alpha" }
+oco_ref = { path = "./oco", version = "0.2" }
+or_poisoned = { path = "./or_poisoned", version = "0.1" }
+reactive_graph = { path = "./reactive_graph", version = "0.1.0-alpha" }
+reactive_stores = { path = "./reactive_stores", version = "0.1.0-alpha" }
+reactive_stores_macro = { path = "./reactive_stores_macro", version = "0.1.0-alpha" }
+server_fn = { path = "./server_fn", version = "0.7.0-alpha" }
+server_fn_macro = { path = "./server_fn_macro", version = "0.7.0-alpha" }
+server_fn_macro_default = { path = "./server_fn/server_fn_macro_default", version = "0.7.0-alpha" }
+tachys = { path = "./tachys", version = "0.1.0-alpha" }

 [profile.release]
 codegen-units = 1
--- a/TODO.md
+++ b/TODO.md
@@ -0,0 +1,40 @@
+- core examples
+    - [x] counter
+    - [x] counters
+    - [x] fetch
+    - [x] todomvc 
+    - [x] error_boundary
+    - [x] parent\_child
+        - [x] on: on components
+    - [ ] router
+    - [ ] slots 
+    - [ ] hackernews
+    - [ ] counter\_isomorphic
+    - [ ] todo\_app\_sqlite
+- other ssr examples
+    - [ ] error boundary SSR
+- reactivity 
+    - Signal wrappers
+    - SignalDispose implementations on all Copy types
+    - untracked access warnings
+- ErrorBoundary
+    - [ ] RenderHtml implementation 
+    - [ ] Separate component?
+- Suspense/Transition components?
+- callbacks
+    - unsync StoredValue
+- SSR
+    - escaping HTML correctly (attributes + text nodes)
+- router
+    - nested routes
+    - trailing slashes
+- \_meta package (and use in hackernews)
+- integrations
+- update tests
+- hackernews example
+  - TODOs
+  - Suspense/Transition/Await components
+  - nicer routing components
+  - async routing (waiting for data to load before navigation)
+  - `<A>` component
+  - figure out rebuilding issues: list (needs new signal IDs) vs. regular rebuild
--- a/any_error/Cargo.toml
+++ b/any_error/Cargo.toml
@@ -0,0 +1,13 @@
+[package]
+name = "throw_error"
+edition = "2021"
+version = "0.1.0"
+authors = ["Greg Johnston"]
+license = "MIT"
+readme = "../README.md"
+repository = "https://github.com/leptos-rs/leptos"
+description = "Utilities for wrapping, throwing, and catching errors."
+rust-version.workspace = true
+
+[dependencies]
+pin-project-lite = "0.2"
--- a/examples/login_with_token_csr_only/Makefile.toml
+++ b/examples/login_with_token_csr_only/Makefile.toml
--- a/any_error/README.md
+++ b/any_error/README.md
@@ -0,0 +1,2 @@
+A utility library for wrapping arbitrary errors, and for “throwing” errors in a way
+that can be caught by user-defined error hooks.
--- a/any_error/src/lib.rs
+++ b/any_error/src/lib.rs
@@ -0,0 +1,148 @@
+#![forbid(unsafe_code)]
+#![deny(missing_docs)]
+
+//! A utility library for wrapping arbitrary errors, and for “throwing” errors in a way
+//! that can be caught by user-defined error hooks.
+
+use std::{
+    cell::RefCell,
+    error,
+    fmt::{self, Display},
+    future::Future,
+    ops,
+    pin::Pin,
+    sync::Arc,
+    task::{Context, Poll},
+};
+
+/* Wrapper Types */
+
+/// This is a result type into which any error can be converted.
+///
+/// Results are stored as [`Error`].
+pub type Result<T, E = Error> = core::result::Result<T, E>;
+
+/// A generic wrapper for any error.
+#[derive(Debug, Clone)]
+#[repr(transparent)]
+pub struct Error(Arc<dyn error::Error + Send + Sync>);
+
+impl Error {
+    /// Converts the wrapper into the inner reference-counted error.
+    pub fn into_inner(self) -> Arc<dyn error::Error + Send + Sync> {
+        Arc::clone(&self.0)
+    }
+}
+
+impl ops::Deref for Error {
+    type Target = Arc<dyn error::Error + Send + Sync>;
+
+    fn deref(&self) -> &Self::Target {
+        &self.0
+    }
+}
+
+impl fmt::Display for Error {
+    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
+        write!(f, "{}", self.0)
+    }
+}
+
+impl<T> From<T> for Error
+where
+    T: error::Error + Send + Sync + 'static,
+{
+    fn from(value: T) -> Self {
+        Error(Arc::new(value))
+    }
+}
+
+/// Implements behavior that allows for global or scoped error handling.
+///
+/// This allows for both "throwing" errors to register them, and "clearing" errors when they are no
+/// longer valid. This is useful for something like a user interface, in which an error can be
+/// "thrown" on some invalid user input, and later "cleared" if the user corrects the input.
+/// Keeping a unique identifier for each error allows the UI to be updated accordingly.
+pub trait ErrorHook: Send + Sync {
+    /// Handles the given error, returning a unique identifier.
+    fn throw(&self, error: Error) -> ErrorId;
+
+    /// Clears the error associated with the given identifier.
+    fn clear(&self, id: &ErrorId);
+}
+
+/// A unique identifier for an error. This is returned when you call [`throw`], which calls a
+/// global error handler.
+#[derive(Debug, PartialEq, Eq, Hash, Clone, Default)]
+pub struct ErrorId(usize);
+
+impl Display for ErrorId {
+    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
+        Display::fmt(&self.0, f)
+    }
+}
+
+impl From<usize> for ErrorId {
+    fn from(value: usize) -> Self {
+        Self(value)
+    }
+}
+
+thread_local! {
+    static ERROR_HOOK: RefCell<Option<Arc<dyn ErrorHook>>> = RefCell::new(None);
+}
+
+/// Sets the current thread-local error hook, which will be invoked when [`throw`] is called.
+pub fn set_error_hook(hook: Arc<dyn ErrorHook>) {
+    ERROR_HOOK.with_borrow_mut(|this| *this = Some(hook))
+}
+
+/// Invokes the error hook set by [`set_error_hook`] with the given error.
+pub fn throw(error: impl Into<Error>) -> ErrorId {
+    ERROR_HOOK
+        .with_borrow(|hook| hook.as_ref().map(|hook| hook.throw(error.into())))
+        .unwrap_or_default()
+}
+
+/// Clears the given error from the current error hook.
+pub fn clear(id: &ErrorId) {
+    ERROR_HOOK
+        .with_borrow(|hook| hook.as_ref().map(|hook| hook.clear(id)))
+        .unwrap_or_default()
+}
+
+pin_project_lite::pin_project! {
+    /// A [`Future`] that reads the error hook that is set when it is created, and sets this as the
+    /// current error hook whenever it is polled.
+    pub struct ErrorHookFuture<Fut> {
+        hook: Option<Arc<dyn ErrorHook>>,
+        #[pin]
+        inner: Fut
+    }
+}
+
+impl<Fut> ErrorHookFuture<Fut> {
+    /// Reads the current hook and wraps the given [`Future`], returning a new `Future` that will
+    /// set the error hook whenever it is polled.
+    pub fn new(inner: Fut) -> Self {
+        Self {
+            hook: ERROR_HOOK.with_borrow(Clone::clone),
+            inner,
+        }
+    }
+}
+
+impl<Fut> Future for ErrorHookFuture<Fut>
+where
+    Fut: Future,
+{
+    type Output = Fut::Output;
+
+    fn poll(self: Pin<&mut Self>, cx: &mut Context<'_>) -> Poll<Self::Output> {
+        let this = self.project();
+        if let Some(hook) = &this.hook {
+            set_error_hook(Arc::clone(hook))
+        }
+        this.inner.poll(cx)
+    }
+}
--- a/any_spawner/Cargo.toml
+++ b/any_spawner/Cargo.toml
@@ -0,0 +1,30 @@
+[package]
+name = "any_spawner"
+edition = "2021"
+version = "0.1.1"
+authors = ["Greg Johnston"]
+license = "MIT"
+readme = "../README.md"
+repository = "https://github.com/leptos-rs/leptos"
+description = "Spawn asynchronous tasks in an executor-independent way."
+
+[dependencies]
+futures = "0.3"
+glib = { version = "0.19", optional = true }
+thiserror = "1"
+tokio = { version = "1", optional = true, default-features = false, features = [
+	"rt",
+] }
+tracing = { version = "0.1", optional = true }
+wasm-bindgen-futures = { version = "0.4", optional = true }
+
+[features]
+tracing = ["dep:tracing"]
+tokio = ["dep:tokio"]
+glib = ["dep:glib"]
+wasm-bindgen = ["dep:wasm-bindgen-futures"]
+futures-executor = ["futures/thread-pool", "futures/executor"]
+
+[package.metadata.docs.rs]
+all-features = true
+rustdoc-args = ["--cfg", "docsrs"]
--- a/leptos_reactive/Makefile.toml
+++ b/leptos_reactive/Makefile.toml
--- a/any_spawner/README.md
+++ b/any_spawner/README.md
@@ -0,0 +1,26 @@
+This crate makes it easier to write asynchronous code that is executor-agnostic, by providing a
+utility that can be used to spawn tasks in a variety of executors.
+
+It only supports single executor per program, but that executor can be set at runtime, anywhere
+in your crate (or an application that depends on it).
+
+This can be extended to support any executor or runtime that supports spawning [`Future`]s.
+
+This is a least common denominator implementation in many ways. Limitations include:
+
+- setting an executor is a one-time, global action
+- no "join handle" or other result is returned from the spawn
+- the `Future` must output `()`
+
+```rust
+use any_spawner::Executor;
+
+Executor::init_futures_executor()
+    .expect("executor should only be initialized once");
+
+// spawn a thread-safe Future
+Executor::spawn(async { /* ... */ });
+
+// spawn a Future that is !Send
+Executor::spawn_local(async { /* ... */ });
+```
--- a/any_spawner/src/lib.rs
+++ b/any_spawner/src/lib.rs
@@ -0,0 +1,244 @@
+//! This crate makes it easier to write asynchronous code that is executor-agnostic, by providing a
+//! utility that can be used to spawn tasks in a variety of executors.
+//!
+//! It only supports single executor per program, but that executor can be set at runtime, anywhere
+//! in your crate (or an application that depends on it).
+//!
+//! This can be extended to support any executor or runtime that supports spawning [`Future`]s.
+//!
+//! This is a least common denominator implementation in many ways. Limitations include:
+//! - setting an executor is a one-time, global action
+//! - no "join handle" or other result is returned from the spawn
+//! - the `Future` must output `()`
+//!
+//! ```rust
+//! use any_spawner::Executor;
+//!
+//! // make sure an Executor has been initialized with one of the init_ functions
+//!
+//! # if false {
+//! // spawn a thread-safe Future
+//! Executor::spawn(async { /* ... */ });
+//!
+//! // spawn a Future that is !Send
+//! Executor::spawn_local(async { /* ... */ });
+//! # }
+//! ```
+
+#![forbid(unsafe_code)]
+#![deny(missing_docs)]
+
+use std::{future::Future, pin::Pin, sync::OnceLock};
+use thiserror::Error;
+
+pub(crate) type PinnedFuture<T> = Pin<Box<dyn Future<Output = T> + Send>>;
+pub(crate) type PinnedLocalFuture<T> = Pin<Box<dyn Future<Output = T>>>;
+
+static SPAWN: OnceLock<fn(PinnedFuture<()>)> = OnceLock::new();
+static SPAWN_LOCAL: OnceLock<fn(PinnedLocalFuture<()>)> = OnceLock::new();
+
+/// Errors that can occur when using the executor.
+#[derive(Error, Debug)]
+pub enum ExecutorError {
+    /// The executor has already been set.
+    #[error("Executor has already been set.")]
+    AlreadySet,
+}
+
+/// A global async executor that can spawn tasks.
+pub struct Executor;
+
+impl Executor {
+    /// Spawns a thread-safe [`Future`].
+    /// ```rust
+    /// use any_spawner::Executor;
+    /// # if false {
+    /// // spawn a thread-safe Future
+    /// Executor::spawn(async { /* ... */ });
+    /// # }
+    /// ```
+    #[track_caller]
+    pub fn spawn(fut: impl Future<Output = ()> + Send + 'static) {
+        if let Some(spawner) = SPAWN.get() {
+            spawner(Box::pin(fut))
+        } else {
+            #[cfg(all(debug_assertions, feature = "tracing"))]
+            tracing::error!(
+                "At {}, tried to spawn a Future with Executor::spawn() before \
+                 the Executor had been set.",
+                std::panic::Location::caller()
+            );
+            #[cfg(all(debug_assertions, not(feature = "tracing")))]
+            panic!(
+                "At {}, tried to spawn a Future with Executor::spawn() before \
+                 the Executor had been set.",
+                std::panic::Location::caller()
+            );
+        }
+    }
+
+    /// Spawns a [`Future`] that cannot be sent across threads.
+    /// ```rust
+    /// use any_spawner::Executor;
+    ///
+    /// # if false {
+    /// // spawn a thread-safe Future
+    /// Executor::spawn_local(async { /* ... */ });
+    /// # }
+    /// ```
+    #[track_caller]
+    pub fn spawn_local(fut: impl Future<Output = ()> + 'static) {
+        if let Some(spawner) = SPAWN_LOCAL.get() {
+            spawner(Box::pin(fut))
+        } else {
+            #[cfg(all(debug_assertions, feature = "tracing"))]
+            tracing::error!(
+                "At {}, tried to spawn a Future with Executor::spawn_local() \
+                 before the Executor had been set.",
+                std::panic::Location::caller()
+            );
+            #[cfg(all(debug_assertions, not(feature = "tracing")))]
+            panic!(
+                "At {}, tried to spawn a Future with Executor::spawn_local() \
+                 before the Executor had been set.",
+                std::panic::Location::caller()
+            );
+        }
+    }
+
+    /// Waits until the next "tick" of the current async executor.
+    pub async fn tick() {
+        let (tx, rx) = futures::channel::oneshot::channel();
+        Executor::spawn(async move {
+            _ = tx.send(());
+        });
+        _ = rx.await;
+    }
+}
+
+impl Executor {
+    /// Globally sets the [`tokio`] runtime as the executor used to spawn tasks.
+    ///
+    /// Returns `Err(_)` if an executor has already been set.
+    ///
+    /// Requires the `tokio` feature to be activated on this crate.
+    #[cfg(feature = "tokio")]
+    #[cfg_attr(docsrs, doc(cfg(feature = "tokio")))]
+    pub fn init_tokio() -> Result<(), ExecutorError> {
+        SPAWN
+            .set(|fut| {
+                tokio::spawn(fut);
+            })
+            .map_err(|_| ExecutorError::AlreadySet)?;
+        SPAWN_LOCAL
+            .set(|fut| {
+                tokio::task::spawn_local(fut);
+            })
+            .map_err(|_| ExecutorError::AlreadySet)?;
+        Ok(())
+    }
+
+    /// Globally sets the [`wasm-bindgen-futures`] runtime as the executor used to spawn tasks.
+    ///
+    /// Returns `Err(_)` if an executor has already been set.
+    ///
+    /// Requires the `wasm-bindgen` feature to be activated on this crate.
+    #[cfg(feature = "wasm-bindgen")]
+    #[cfg_attr(docsrs, doc(cfg(feature = "wasm-bindgen")))]
+    pub fn init_wasm_bindgen() -> Result<(), ExecutorError> {
+        SPAWN
+            .set(|fut| {
+                wasm_bindgen_futures::spawn_local(fut);
+            })
+            .map_err(|_| ExecutorError::AlreadySet)?;
+        SPAWN_LOCAL
+            .set(|fut| {
+                wasm_bindgen_futures::spawn_local(fut);
+            })
+            .map_err(|_| ExecutorError::AlreadySet)?;
+        Ok(())
+    }
+
+    /// Globally sets the [`glib`] runtime as the executor used to spawn tasks.
+    ///
+    /// Returns `Err(_)` if an executor has already been set.
+    ///
+    /// Requires the `glib` feature to be activated on this crate.
+    #[cfg(feature = "glib")]
+    #[cfg_attr(docsrs, doc(cfg(feature = "glib")))]
+    pub fn init_glib() -> Result<(), ExecutorError> {
+        SPAWN
+            .set(|fut| {
+                let main_context = glib::MainContext::default();
+                main_context.spawn(fut);
+            })
+            .map_err(|_| ExecutorError::AlreadySet)?;
+        SPAWN_LOCAL
+            .set(|fut| {
+                let main_context = glib::MainContext::default();
+                main_context.spawn_local(fut);
+            })
+            .map_err(|_| ExecutorError::AlreadySet)?;
+        Ok(())
+    }
+
+    /// Globally sets the [`futures`] executor as the executor used to spawn tasks,
+    /// lazily creating a thread pool to spawn tasks into.
+    ///
+    /// Returns `Err(_)` if an executor has already been set.
+    ///
+    /// Requires the `futures-executor` feature to be activated on this crate.
+    #[cfg(feature = "futures-executor")]
+    #[cfg_attr(docsrs, doc(cfg(feature = "futures-executor")))]
+    pub fn init_futures_executor() -> Result<(), ExecutorError> {
+        use futures::{
+            executor::{LocalPool, ThreadPool},
+            task::{LocalSpawnExt, SpawnExt},
+        };
+
+        static THREAD_POOL: OnceLock<ThreadPool> = OnceLock::new();
+        thread_local! {
+            static LOCAL_POOL: LocalPool = LocalPool::new();
+        }
+
+        fn get_thread_pool() -> &'static ThreadPool {
+            THREAD_POOL.get_or_init(|| {
+                ThreadPool::new()
+                    .expect("could not create futures executor ThreadPool")
+            })
+        }
+
+        SPAWN
+            .set(|fut| {
+                get_thread_pool()
+                    .spawn(fut)
+                    .expect("failed to spawn future");
+            })
+            .map_err(|_| ExecutorError::AlreadySet)?;
+        SPAWN_LOCAL
+            .set(|fut| {
+                LOCAL_POOL.with(|pool| {
+                    let spawner = pool.spawner();
+                    spawner.spawn_local(fut).expect("failed to spawn future");
+                });
+            })
+            .map_err(|_| ExecutorError::AlreadySet)?;
+        Ok(())
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    #[cfg(feature = "futures-executor")]
+    #[test]
+    fn can_spawn_local_future() {
+        use crate::Executor;
+        use std::rc::Rc;
+        Executor::init_futures_executor().expect("couldn't set executor");
+        let rc = Rc::new(());
+        Executor::spawn_local(async {
+            _ = rc;
+        });
+        Executor::spawn(async {});
+    }
+}
--- a/const_str_slice_concat/Cargo.toml
+++ b/const_str_slice_concat/Cargo.toml
@@ -0,0 +1,12 @@
+[package]
+name = "const_str_slice_concat"
+edition = "2021"
+version = "0.1.0"
+authors = ["Greg Johnston"]
+license = "MIT"
+readme = "../README.md"
+repository = "https://github.com/leptos-rs/leptos"
+description = "Utilities for const concatenation of string slices."
+rust-version.workspace = true
+
+[dependencies]
--- a/const_str_slice_concat/Makefile.toml
+++ b/const_str_slice_concat/Makefile.toml
@@ -0,0 +1 @@
+extend = { path = "../cargo-make/main.toml" }
--- a/const_str_slice_concat/src/lib.rs
+++ b/const_str_slice_concat/src/lib.rs
@@ -0,0 +1,139 @@
+#![no_std]
+#![forbid(unsafe_code)]
+#![deny(missing_docs)]
+
+//! Utilities for const concatenation of string slices.
+
+pub(crate) const MAX_TEMPLATE_SIZE: usize = 4096;
+
+/// Converts a zero-terminated buffer of bytes into a UTF-8 string.
+pub const fn str_from_buffer(buf: &[u8; MAX_TEMPLATE_SIZE]) -> &str {
+    match core::ffi::CStr::from_bytes_until_nul(buf) {
+        Ok(cstr) => match cstr.to_str() {
+            Ok(str) => str,
+            Err(_) => panic!("TEMPLATE FAILURE"),
+        },
+        Err(_) => panic!("TEMPLATE FAILURE"),
+    }
+}
+
+/// Concatenates any number of static strings into a single array.
+// credit to Rainer Stropek, "Constant fun," Rust Linz, June 2022
+pub const fn const_concat(
+    strs: &'static [&'static str],
+) -> [u8; MAX_TEMPLATE_SIZE] {
+    let mut buffer = [0; MAX_TEMPLATE_SIZE];
+    let mut position = 0;
+    let mut remaining = strs;
+
+    while let [current, tail @ ..] = remaining {
+        let x = current.as_bytes();
+        let mut i = 0;
+
+        // have it iterate over bytes manually, because, again,
+        // no mutable refernces in const fns
+        while i < x.len() {
+            buffer[position] = x[i];
+            position += 1;
+            i += 1;
+        }
+
+        remaining = tail;
+    }
+
+    buffer
+}
+
+/// Converts a zero-terminated buffer of bytes into a UTF-8 string with the given prefix.
+pub const fn const_concat_with_prefix(
+    strs: &'static [&'static str],
+    prefix: &'static str,
+    suffix: &'static str,
+) -> [u8; MAX_TEMPLATE_SIZE] {
+    let mut buffer = [0; MAX_TEMPLATE_SIZE];
+    let mut position = 0;
+    let mut remaining = strs;
+
+    while let [current, tail @ ..] = remaining {
+        let x = current.as_bytes();
+        let mut i = 0;
+
+        // have it iterate over bytes manually, because, again,
+        // no mutable refernces in const fns
+        while i < x.len() {
+            buffer[position] = x[i];
+            position += 1;
+            i += 1;
+        }
+
+        remaining = tail;
+    }
+
+    if buffer[0] == 0 {
+        buffer
+    } else {
+        let mut new_buf = [0; MAX_TEMPLATE_SIZE];
+        let prefix = prefix.as_bytes();
+        let suffix = suffix.as_bytes();
+        let mut position = 0;
+        let mut i = 0;
+        while i < prefix.len() {
+            new_buf[position] = prefix[i];
+            position += 1;
+            i += 1;
+        }
+        i = 0;
+        while i < buffer.len() {
+            if buffer[i] == 0 {
+                break;
+            }
+            new_buf[position] = buffer[i];
+            position += 1;
+            i += 1;
+        }
+        i = 0;
+        while i < suffix.len() {
+            new_buf[position] = suffix[i];
+            position += 1;
+            i += 1;
+        }
+
+        new_buf
+    }
+}
+
+/// Converts any number of strings into a UTF-8 string, separated by the given string.
+pub const fn const_concat_with_separator(
+    strs: &[&str],
+    separator: &'static str,
+) -> [u8; MAX_TEMPLATE_SIZE] {
+    let mut buffer = [0; MAX_TEMPLATE_SIZE];
+    let mut position = 0;
+    let mut remaining = strs;
+
+    while let [current, tail @ ..] = remaining {
+        let x = current.as_bytes();
+        let mut i = 0;
+
+        // have it iterate over bytes manually, because, again,
+        // no mutable refernces in const fns
+        while i < x.len() {
+            buffer[position] = x[i];
+            position += 1;
+            i += 1;
+        }
+        if !x.is_empty() {
+            let mut position = 0;
+            let separator = separator.as_bytes();
+            while i < separator.len() {
+                buffer[position] = separator[i];
+                position += 1;
+                i += 1;
+            }
+        }
+
+        remaining = tail;
+    }
+
+    buffer
+}
--- a/either_of/Cargo.toml
+++ b/either_of/Cargo.toml
@@ -0,0 +1,13 @@
+[package]
+name = "either_of"
+edition = "2021"
+version = "0.1.0"
+authors = ["Greg Johnston"]
+license = "MIT"
+readme = "../README.md"
+repository = "https://github.com/leptos-rs/leptos"
+description = "Utilities for working with enumerated types that contain one of 2..n other types."
+rust-version.workspace = true
+
+[dependencies]
+pin-project-lite = "0.2"
--- a/either_of/Makefile.toml
+++ b/either_of/Makefile.toml
@@ -0,0 +1 @@
+extend = { path = "../cargo-make/main.toml" }
--- a/either_of/README.md
+++ b/either_of/README.md
@@ -0,0 +1 @@
+Utilities for working with enumerated types that contain one of `2..n` other types.
--- a/either_of/src/lib.rs
+++ b/either_of/src/lib.rs
@@ -0,0 +1,135 @@
+#![no_std]
+#![forbid(unsafe_code)]
+
+//! Utilities for working with enumerated types that contain one of `2..n` other types.
+
+use core::{
+    fmt::Display,
+    future::Future,
+    pin::Pin,
+    task::{Context, Poll},
+};
+use pin_project_lite::pin_project;
+
+#[derive(Debug, Clone, Copy)]
+pub enum Either<A, B> {
+    Left(A),
+    Right(B),
+}
+
+impl<Item, A, B> Iterator for Either<A, B>
+where
+    A: Iterator<Item = Item>,
+    B: Iterator<Item = Item>,
+{
+    type Item = Item;
+
+    fn next(&mut self) -> Option<Self::Item> {
+        match self {
+            Either::Left(i) => i.next(),
+            Either::Right(i) => i.next(),
+        }
+    }
+}
+
+pin_project! {
+    #[project = EitherFutureProj]
+    pub enum EitherFuture<A, B> {
+        Left { #[pin] inner: A },
+        Right { #[pin] inner: B },
+    }
+}
+
+impl<A, B> Future for EitherFuture<A, B>
+where
+    A: Future,
+    B: Future,
+{
+    type Output = Either<A::Output, B::Output>;
+
+    fn poll(self: Pin<&mut Self>, cx: &mut Context<'_>) -> Poll<Self::Output> {
+        let this = self.project();
+        match this {
+            EitherFutureProj::Left { inner } => match inner.poll(cx) {
+                Poll::Pending => Poll::Pending,
+                Poll::Ready(inner) => Poll::Ready(Either::Left(inner)),
+            },
+            EitherFutureProj::Right { inner } => match inner.poll(cx) {
+                Poll::Pending => Poll::Pending,
+                Poll::Ready(inner) => Poll::Ready(Either::Right(inner)),
+            },
+        }
+    }
+}
+
+macro_rules! tuples {
+    ($name:ident + $fut_name:ident + $fut_proj:ident => $($ty:ident),*) => {
+        #[derive(Debug, PartialEq, Eq, Clone, Copy, Hash)]
+        pub enum $name<$($ty,)*> {
+            $($ty ($ty),)*
+        }
+
+        impl<$($ty,)*> Display for $name<$($ty,)*>
+        where
+            $($ty: Display,)*
+        {
+            fn fmt(&self, f: &mut core::fmt::Formatter<'_>) -> core::fmt::Result {
+                match self {
+                    $($name::$ty(this) => this.fmt(f),)*
+                }
+            }
+        }
+
+        impl<Item, $($ty,)*> Iterator for $name<$($ty,)*>
+        where
+            $($ty: Iterator<Item = Item>,)*
+        {
+            type Item = Item;
+
+            fn next(&mut self) -> Option<Self::Item> {
+                match self {
+                    $($name::$ty(i) => i.next(),)*
+                }
+            }
+        }
+
+        pin_project! {
+            #[project = $fut_proj]
+            pub enum $fut_name<$($ty,)*> {
+                $($ty { #[pin] inner: $ty },)*
+            }
+        }
+
+        impl<$($ty,)*> Future for $fut_name<$($ty,)*>
+        where
+            $($ty: Future,)*
+        {
+            type Output = $name<$($ty::Output,)*>;
+
+            fn poll(self: Pin<&mut Self>, cx: &mut Context<'_>) -> Poll<Self::Output> {
+                let this = self.project();
+                match this {
+                    $($fut_proj::$ty { inner } => match inner.poll(cx) {
+                        Poll::Pending => Poll::Pending,
+                        Poll::Ready(inner) => Poll::Ready($name::$ty(inner)),
+                    },)*
+                }
+            }
+        }
+    }
+}
+
+tuples!(EitherOf3 + EitherOf3Future + EitherOf3FutureProj => A, B, C);
+tuples!(EitherOf4 + EitherOf4Future + EitherOf4FutureProj => A, B, C, D);
+tuples!(EitherOf5 + EitherOf5Future + EitherOf5FutureProj => A, B, C, D, E);
+tuples!(EitherOf6 + EitherOf6Future + EitherOf6FutureProj => A, B, C, D, E, F);
+tuples!(EitherOf7 + EitherOf7Future + EitherOf7FutureProj => A, B, C, D, E, F, G);
+tuples!(EitherOf8 + EitherOf8Future + EitherOf8FutureProj => A, B, C, D, E, F, G, H);
+tuples!(EitherOf9 + EitherOf9Future + EitherOf9FutureProj => A, B, C, D, E, F, G, H, I);
+tuples!(EitherOf10 + EitherOf10Future + EitherOf10FutureProj => A, B, C, D, E, F, G, H, I, J);
+tuples!(EitherOf11 + EitherOf11Future + EitherOf11FutureProj => A, B, C, D, E, F, G, H, I, J, K);
+tuples!(EitherOf12 + EitherOf12Future + EitherOf12FutureProj => A, B, C, D, E, F, G, H, I, J, K, L);
+tuples!(EitherOf13 + EitherOf13Future + EitherOf13FutureProj => A, B, C, D, E, F, G, H, I, J, K, L, M);
+tuples!(EitherOf14 + EitherOf14Future + EitherOf14FutureProj => A, B, C, D, E, F, G, H, I, J, K, L, M, N);
+tuples!(EitherOf15 + EitherOf15Future + EitherOf15FutureProj => A, B, C, D, E, F, G, H, I, J, K, L, M, N, O);
+tuples!(EitherOf16 + EitherOf16Future + EitherOf16FutureProj => A, B, C, D, E, F, G, H, I, J, K, L, M, N, O, P);
--- a/examples/action-form-error-handling/Cargo.toml
+++ b/examples/action-form-error-handling/Cargo.toml
@@ -11,7 +11,6 @@ actix-files = { version = "0.6", optional = true }
 actix-web = { version = "4", optional = true, features = ["macros"] }
 console_error_panic_hook = "0.1"
 cfg-if = "1"
-http = { version = "0.2", optional = true }
 leptos = { path = "../../leptos" }
 leptos_meta = { path = "../../meta" }
 leptos_actix = { path = "../../integrations/actix", optional = true }
@@ -20,8 +19,8 @@ wasm-bindgen = "0.2"
 serde = { version = "1", features = ["derive"] }

 [features]
-csr = ["leptos/csr", "leptos_meta/csr", "leptos_router/csr"]
-hydrate = ["leptos/hydrate", "leptos_meta/hydrate", "leptos_router/hydrate"]
+csr = ["leptos/csr"]
+hydrate = ["leptos/hydrate"]
 ssr = [
  "dep:actix-files",
  "dep:actix-web",
--- a/examples/action-form-error-handling/src/app.rs
+++ b/examples/action-form-error-handling/src/app.rs
@@ -1,27 +1,18 @@
-use leptos::*;
-use leptos_meta::*;
-use leptos_router::*;
+use leptos::{logging, prelude::*};
+use leptos_router::{
+    components::{FlatRoutes, Route, Router},
+    StaticSegment,
+};

 #[component]
 pub fn App() -> impl IntoView {
-    // Provides context that manages stylesheets, titles, meta tags, etc.
-    provide_meta_context();
-
    view! {
-        // injects a stylesheet into the document <head>
-        // id=leptos means cargo-leptos will hot-reload this stylesheet
-        <Stylesheet id="leptos" href="/pkg/leptos_start.css"/>
-
-        // sets the document title
-        <Title text="Welcome to Leptos"/>
-
        // content for this welcome page
        <Router>
            <main id="app">
-                <Routes>
-                    <Route path="" view=HomePage/>
-                    <Route path="/*any" view=NotFound/>
-                </Routes>
+                <FlatRoutes fallback=NotFound>
+                    <Route path=StaticSegment("") view=HomePage/>
+                </FlatRoutes>
            </main>
        </Router>
    }
@@ -43,7 +34,7 @@ async fn do_something(
 /// Renders the home page of your application.
 #[component]
 fn HomePage() -> impl IntoView {
-    let do_something_action = Action::<DoSomething, _>::server();
+    let do_something_action = ServerAction::<DoSomething>::new();
    let value = Signal::derive(move || {
        do_something_action
            .value()
@@ -57,17 +48,12 @@ fn HomePage() -> impl IntoView {

    view! {
        <h1>"Test the action form!"</h1>
-        <ErrorBoundary fallback=move |error| format!("{:#?}", error
-                                                     .get()
-                                                     .into_iter()
-                                                     .next()
-                                                     .unwrap()
-                                                     .1.into_inner()
-                                                     .to_string())
-            >
-            {value}
-            <ActionForm action=do_something_action class="form">
-                <label>Should error: <input type="checkbox" name="should_error"/></label>
+        <ErrorBoundary fallback=move |error| {
+            move || format!("{:#?}", error.get())
+        }>
+            <pre>{value}</pre>
+            <ActionForm action=do_something_action attr:class="form">
+                <label>"Should error: "<input type="checkbox" name="should_error"/></label>
                <button type="submit">Submit</button>
            </ActionForm>
        </ErrorBoundary>
@@ -91,7 +77,5 @@ fn NotFound() -> impl IntoView {
        resp.set_status(actix_web::http::StatusCode::NOT_FOUND);
    }

-    view! {
-        <h1>"Not Found"</h1>
-    }
+    view! { <h1>"Not Found"</h1> }
 }
--- a/examples/action-form-error-handling/src/lib.rs
+++ b/examples/action-form-error-handling/src/lib.rs
@@ -1,18 +1,11 @@
 pub mod app;
-use cfg_if::cfg_if;

-cfg_if! {
-if #[cfg(feature = "hydrate")] {
+#[cfg(feature = "hydrate")]
+#[wasm_bindgen::prelude::wasm_bindgen]
+pub fn hydrate() {
+    use app::*;

-  use wasm_bindgen::prelude::wasm_bindgen;
+    console_error_panic_hook::set_once();

-    #[wasm_bindgen]
-    pub fn hydrate() {
-      use app::*;
-
-      console_error_panic_hook::set_once();
-
-      leptos::mount_to_body(App);
-    }
-}
+    leptos::mount::hydrate_body(App);
 }
--- a/examples/action-form-error-handling/src/main.rs
+++ b/examples/action-form-error-handling/src/main.rs
@@ -4,25 +4,47 @@ async fn main() -> std::io::Result<()> {
    use action_form_error_handling::app::*;
    use actix_files::Files;
    use actix_web::*;
-    use leptos::*;
+    use leptos::prelude::*;
    use leptos_actix::{generate_route_list, LeptosRoutes};
+    use leptos_meta::MetaTags;

-    let conf = get_configuration(None).await.unwrap();
-    let addr = conf.leptos_options.site_addr;
    // Generate the list of routes in your Leptos App
-    let routes = generate_route_list(App);
+    let conf = get_configuration(None).unwrap();
+    let addr = conf.leptos_options.site_addr;
    println!("listening on http://{}", &addr);

    HttpServer::new(move || {
+        // Generate the list of routes in your Leptos App
+        let routes = generate_route_list(App);
        let leptos_options = &conf.leptos_options;
        let site_root = &leptos_options.site_root;

        App::new()
-            .route("/api/{tail:.*}", leptos_actix::handle_server_fns())
-            // serve JS/WASM/CSS from `pkg`
            .service(Files::new("/pkg", format!("{site_root}/pkg")))
-            .leptos_routes(leptos_options.to_owned(), routes.to_owned(), App)
-            .app_data(web::Data::new(leptos_options.to_owned()))
+            .leptos_routes(routes, {
+                let leptos_options = leptos_options.clone();
+                move || {
+                    use leptos::prelude::*;
+
+                    view! {
+                        <!DOCTYPE html>
+                        <html lang="en">
+                            <head>
+                                <meta charset="utf-8"/>
+                                <meta
+                                    name="viewport"
+                                    content="width=device-width, initial-scale=1"
+                                />
+                                <AutoReload options=leptos_options.clone()/>
+                                <HydrationScripts options=leptos_options.clone()/>
+                                <MetaTags/>
+                            </head>
+                            <body>
+                                <App/>
+                            </body>
+                        </html>
+                    }
+            }})
        //.wrap(middleware::Compress::default())
    })
    .bind(&addr)?
@@ -44,10 +66,9 @@ pub fn main() {
    // prefer using `cargo leptos serve` instead
    // to run: `trunk serve --open --features csr`
    use action_form_error_handling::app::*;
-    use leptos::*;
-    use wasm_bindgen::prelude::wasm_bindgen;
+    use leptos::prelude::*;

    console_error_panic_hook::set_once();

-    leptos::mount_to_body(App);
+    mount_to_body(App);
 }
--- a/examples/animated_show/Cargo.toml
+++ b/examples/animated_show/Cargo.toml
@@ -1,14 +0,0 @@
-[package]
-name = "animated-show"
-version = "0.1.0"
-edition = "2021"
-
-[profile.release]
-codegen-units = 1
-lto = true
-
-[dependencies] 
-leptos = { path = "../../leptos", features = ["csr"] }
-console_log = "1"
-log = "0.4"
-console_error_panic_hook = "0.1.7"
--- a/examples/animated_show/README.md
+++ b/examples/animated_show/README.md
@@ -1,14 +0,0 @@
-# Animated Show Example
-
-This is a very simple example of the `<AnimatedShow>` component.
-
-The `<AnimatedShow>` component is an extension for the `<Show>` component and it will not take in a fallback, but it will unmount the component from the DOM after a given duration. This makes it possible to have really easy unmount animations with just
-CSS.
-
-## Getting Started
-
-See the [Examples README](../README.md) for setup and run instructions.
-
-## Quick Start
-
-Run `trunk serve --open` to run this example.
--- a/examples/animated_show/index.html
+++ b/examples/animated_show/index.html
@@ -1,42 +0,0 @@
-<!DOCTYPE html>
-<html>
-	<head>
-		<link data-trunk rel="rust" data-wasm-opt="z"/>
-		<link data-trunk rel="icon" type="image/ico" href="/public/favicon.ico"/>
-		<style>
-			.hover-me {
-				width: 100px;
-				margin: 1rem;
-				padding: 1rem;
-				text-align: center;
-				cursor: pointer;
-				border: 1px solid grey;
-			}
-			.here-i-am {
-				width: 100px;
-				margin: 1rem;
-				padding: 1rem;
-				text-align: center;
-				color: white;
-				font-weight: bold;
-				background: black;
-			}
-
-			@keyframes fade-in {
-				from { opacity: 0; }
-				to { opacity: 1; }
-			}
-			@keyframes fade-out {
-				from { opacity: 1; }
-				to { opacity: 0; }
-			}
-			.fade-in-1000 {
-				animation: 1000ms fade-in forwards;
-			}
-			.fade-out-1000 {
-				animation: 1000ms fade-out forwards;
-			}
-		</style>
-	</head>
-	<body></body>
-</html>
--- a/examples/animated_show/src/lib.rs
+++ b/examples/animated_show/src/lib.rs
@@ -1,34 +0,0 @@
-use core::time::Duration;
-use leptos::*;
-
-#[component]
-pub fn App() -> impl IntoView {
-    let show = create_rw_signal(false);
-
-    // the CSS classes in this example are just written directly inside the `index.html`
-    view! {
-        <div
-            class="hover-me"
-            on:mouseenter=move |_| show.set(true)
-            on:mouseleave=move |_| show.set(false)
-        >
-            "Hover Me"
-        </div>
-
-        <AnimatedShow
-            when=show
-            // optional CSS class which will be applied if `when == true`
-            show_class="fade-in-1000"
-            // optional CSS class which will be applied if `when == false` and before the
-            // `hide_delay` starts -> makes CSS unmount animations really easy
-            hide_class="fade-out-1000"
-            // the given unmount delay which should match your unmount animation duration
-            hide_delay=Duration::from_millis(1000)
-        >
-            // provide any `Children` inside here
-            <div class="here-i-am">
-                "Here I Am!"
-            </div>
-        </AnimatedShow>
-    }
-}
--- a/examples/animated_show/src/main.rs
+++ b/examples/animated_show/src/main.rs
@@ -1,8 +0,0 @@
-use animated_show::App;
-use leptos::*;
-
-pub fn main() {
-    _ = console_log::init_with_level(log::Level::Debug);
-    console_error_panic_hook::set_once();
-    mount_to_body(App);
-}
--- a/examples/counter/Cargo.toml
+++ b/examples/counter/Cargo.toml
@@ -4,6 +4,7 @@ version = "0.1.0"
 edition = "2021"

 [profile.release]
+opt-level = 'z'
 codegen-units = 1
 lto = true

@@ -12,6 +13,7 @@ leptos = { path = "../../leptos", features = ["csr"] }
 console_log = "1"
 log = "0.4"
 console_error_panic_hook = "0.1.7"
+gloo-timers = { version = "0.3.0", features = ["futures"] }

 [dev-dependencies]
 wasm-bindgen = "0.2"
--- a/examples/counter/src/lib.rs
+++ b/examples/counter/src/lib.rs
@@ -1,4 +1,4 @@
-use leptos::*;
+use leptos::prelude::*;

 /// A simple counter component.
 ///
@@ -10,14 +10,33 @@ pub fn SimpleCounter(
    /// The change that should be applied each time the button is clicked.
    step: i32,
 ) -> impl IntoView {
-    let (value, set_value) = create_signal(initial_value);
+    /*let (value, set_value) = signal(initial_value);

    view! {
        <div>
            <button on:click=move |_| set_value.set(0)>"Clear"</button>
-            <button on:click=move |_| set_value.update(|value| *value -= step)>"-1"</button>
+            <button on:click=move |_| *set_value.write() -= step>"-1"</button>
            <span>"Value: " {value} "!"</span>
            <button on:click=move |_| set_value.update(|value| *value += step)>"+1"</button>
        </div>
-    }
+    }*/
+    App()
+}
+
+use gloo_timers::future::TimeoutFuture;
+use leptos::{html::Input, prelude::*};
+
+#[component]
+fn Widget() -> impl IntoView {
+    let input_ref = NodeRef::<Input>::new();
+
+    Effect::new(move |_| {
+        let Some(_) = input_ref.get() else {
+            log!("no ref");
+            return;
+        };
+        log!("ref");
+    });
+
+    view! { <input node_ref=input_ref type="text"/> }
 }
--- a/examples/counter/src/main.rs
+++ b/examples/counter/src/main.rs
@@ -1,15 +1,10 @@
 use counter::SimpleCounter;
-use leptos::*;
+use leptos::prelude::*;

 pub fn main() {
    _ = console_log::init_with_level(log::Level::Debug);
    console_error_panic_hook::set_once();
    mount_to_body(|| {
-        view! {
-            <SimpleCounter
-                initial_value=0
-                step=1
-            />
-        }
+        view! { <SimpleCounter initial_value=0 step=1/> }
    })
 }
--- a/examples/counter/tests/web.rs
+++ b/examples/counter/tests/web.rs
@@ -1,19 +1,21 @@
 use counter::*;
-use leptos::*;
+use leptos::mount::mount_to;
+use leptos::prelude::*;
+use leptos::spawn::tick;
 use wasm_bindgen::JsCast;
 use wasm_bindgen_test::*;

 wasm_bindgen_test_configure!(run_in_browser);

 #[wasm_bindgen_test]
-fn clear() {
-    let document = leptos::document();
+async fn clear() {
+    let document = document();
    let test_wrapper = document.create_element("section").unwrap();
    let _ = document.body().unwrap().append_child(&test_wrapper);

    // start by rendering our counter and mounting it to the DOM
    // note that we start at the initial value of 10
-    mount_to(
+    let _dispose = mount_to(
        test_wrapper.clone().unchecked_into(),
        || view! { <SimpleCounter initial_value=10 step=1/> },
    );
@@ -30,59 +32,63 @@ fn clear() {
    // now let's click the `clear` button
    clear.click();

+    // the reactive system is built on top of the async system, so changes are not reflected
+    // synchronously in the DOM
+    // in order to detect the changes here, we'll just yield for a brief time after each change,
+    // allowing the effects that update the view to run
+    tick().await;
+
    // now let's test the <div> against the expected value
    // we can do this by testing its `outerHTML`
-    let runtime = create_runtime();
-    assert_eq!(
-        div.outer_html(),
-        // here we spawn a mini reactive system, just to render the
-        // test case
-        {
-            // it's as if we're creating it with a value of 0, right?
-            let (value, _set_value) = create_signal(0);
+    assert_eq!(div.outer_html(), {
+        // it's as if we're creating it with a value of 0, right?
+        let (value, _set_value) = signal(0);

-            // we can remove the event listeners because they're not rendered to HTML
-            view! {
-                <div>
-                    <button>"Clear"</button>
-                    <button>"-1"</button>
-                    <span>"Value: " {value} "!"</span>
-                    <button>"+1"</button>
-                </div>
-            }
-            // the view returned an HtmlElement<Div>, which is a smart pointer for
-            // a DOM element. So we can still just call .outer_html()
-            .outer_html()
+        // we can remove the event listeners because they're not rendered to HTML
+        view! {
+            <div>
+                <button>"Clear"</button>
+                <button>"-1"</button>
+                <span>"Value: " {value} "!"</span>
+                <button>"+1"</button>
+            </div>
        }
-    );
+        // Leptos supports multiple backend renderers for HTML elements
+        // .into_view() here is just a convenient way of specifying "use the regular DOM renderer"
+        .into_view()
+        // views are lazy -- they describe a DOM tree but don't create it yet
+        // calling .build() will actually build the DOM elements
+        .build()
+        // .build() returned an ElementState, which is a smart pointer for
+        // a DOM element. So we can still just call .outer_html(), which access the outerHTML on
+        // the actual DOM element
+        .outer_html()
+    });

    // There's actually an easier way to do this...
    // We can just test against a <SimpleCounter/> with the initial value 0
    assert_eq!(test_wrapper.inner_html(), {
        let comparison_wrapper = document.create_element("section").unwrap();
-        leptos::mount_to(
+        let _dispose = mount_to(
            comparison_wrapper.clone().unchecked_into(),
            || view! { <SimpleCounter initial_value=0 step=1/>},
        );
        comparison_wrapper.inner_html()
    });
-
-    runtime.dispose();
 }

 #[wasm_bindgen_test]
-fn inc() {
-    let document = leptos::document();
+async fn inc() {
+    let document = document();
    let test_wrapper = document.create_element("section").unwrap();
    let _ = document.body().unwrap().append_child(&test_wrapper);

-    mount_to(
+    let _dispose = mount_to(
        test_wrapper.clone().unchecked_into(),
        || view! { <SimpleCounter initial_value=0 step=1/> },
    );

    // You can do testing with vanilla DOM operations
-    let _document = leptos::document();
    let div = test_wrapper.query_selector("div").unwrap().unwrap();
    let clear = div
        .first_child()
@@ -108,6 +114,8 @@ fn inc() {
    inc.click();
    inc.click();

+    tick().await;
+
    assert_eq!(text.text_content(), Some("Value: 2!".to_string()));

    dec.click();
@@ -115,19 +123,21 @@ fn inc() {
    dec.click();
    dec.click();

+    tick().await;
+
    assert_eq!(text.text_content(), Some("Value: -2!".to_string()));

    clear.click();

-    assert_eq!(text.text_content(), Some("Value: 0!".to_string()));
+    tick().await;

-    let runtime = create_runtime();
+    assert_eq!(text.text_content(), Some("Value: 0!".to_string()));

    // Or you can test against a sample view!
    assert_eq!(
        div.outer_html(),
        {
-            let (value, _) = create_signal(0);
+            let (value, _) = signal(0);
            view! {
                <div>
                    <button>"Clear"</button>
@@ -137,16 +147,20 @@ fn inc() {
                </div>
            }
        }
+        .into_view()
+        .build()
        .outer_html()
    );

    inc.click();

+    tick().await;
+
    assert_eq!(
        div.outer_html(),
        {
            // because we've clicked, it's as if the signal is starting at 1
-            let (value, _) = create_signal(1);
+            let (value, _) = signal(1);
            view! {
                <div>
                    <button>"Clear"</button>
@@ -156,8 +170,8 @@ fn inc() {
                </div>
            }
        }
+        .into_view()
+        .build()
        .outer_html()
    );
-
-    runtime.dispose();
 }
--- a/examples/counter_isomorphic/Cargo.toml
+++ b/examples/counter_isomorphic/Cargo.toml
@@ -20,7 +20,6 @@ futures = "0.3"
 lazy_static = "1"
 leptos = { path = "../../leptos" }
 leptos_actix = { path = "../../integrations/actix", optional = true }
-leptos_meta = { path = "../../meta" }
 leptos_router = { path = "../../router" }
 log = "0.4"
 once_cell = "1.18"
@@ -29,16 +28,16 @@ wasm-bindgen = "0.2"
 serde = { version = "1", features = ["derive"] }
 simple_logger = "4.3"
 tracing = { version = "0.1", optional = true }
+send_wrapper = "0.6.0"

 [features]
-hydrate = ["leptos/hydrate", "leptos_meta/hydrate", "leptos_router/hydrate"]
+hydrate = ["leptos/hydrate"]
 ssr = [
 	"dep:actix-files",
 	"dep:actix-web",
 	"dep:tracing",
 	"leptos/ssr",
 	"leptos_actix",
-	"leptos_meta/ssr",
 	"leptos_router/ssr",
 ]

--- a/examples/counter_isomorphic/src/counters.rs
+++ b/examples/counter_isomorphic/src/counters.rs
@@ -1,13 +1,14 @@
-use leptos::*;
-use leptos_meta::*;
-use leptos_router::*;
+use leptos::{prelude::*, reactive_graph::actions::Action};
+use leptos_router::{
+    components::{FlatRoutes, Route, Router, A},
+    StaticSegment,
+};
 #[cfg(feature = "ssr")]
 use tracing::instrument;

 #[cfg(feature = "ssr")]
 pub mod ssr_imports {
    pub use broadcaster::BroadcastChannel;
-    pub use once_cell::sync::OnceCell;
    pub use std::sync::atomic::{AtomicI32, Ordering};

    pub static COUNT: AtomicI32 = AtomicI32::new(0);
@@ -15,14 +16,6 @@ pub mod ssr_imports {
    lazy_static::lazy_static! {
        pub static ref COUNT_CHANNEL: BroadcastChannel<i32> = BroadcastChannel::new();
    }
-
-    static LOG_INIT: OnceCell<()> = OnceCell::new();
-
-    pub fn init_logging() {
-        LOG_INIT.get_or_init(|| {
-            simple_logger::SimpleLogger::new().env().init().unwrap();
-        });
-    }
 }

 #[server]
@@ -59,10 +52,6 @@ pub async fn clear_server_count() -> Result<i32, ServerFnError> {
 }
 #[component]
 pub fn Counters() -> impl IntoView {
-    #[cfg(feature = "ssr")]
-    ssr_imports::init_logging();
-
-    provide_meta_context();
    view! {
        <Router>
            <header>
@@ -85,28 +74,21 @@ pub fn Counters() -> impl IntoView {
                    </li>
                </ul>
            </nav>
-            <Link rel="shortcut icon" type_="image/ico" href="/favicon.ico"/>
            <main>
-                <Routes>
+                <FlatRoutes fallback=|| "Not found.">
                    <Route
-                        path=""
-                        view=|| {
-                            view! { <Counter/> }
-                        }
+                        path=StaticSegment("")
+                        view=Counter
                    />
                    <Route
-                        path="form"
-                        view=|| {
-                            view! { <FormCounter/> }
-                        }
+                        path=StaticSegment("form")
+                        view=FormCounter
                    />
                    <Route
-                        path="multi"
-                        view=|| {
-                            view! { <MultiuserCounter/> }
-                        }
+                        path=StaticSegment("multi")
+                        view=MultiuserCounter
                    />
-                </Routes>
+                </FlatRoutes>
            </main>
        </Router>
    }
@@ -118,10 +100,10 @@ pub fn Counters() -> impl IntoView {
 // This is the typical pattern for a CRUD app
 #[component]
 pub fn Counter() -> impl IntoView {
-    let dec = create_action(|_: &()| adjust_server_count(-1, "decing".into()));
-    let inc = create_action(|_: &()| adjust_server_count(1, "incing".into()));
-    let clear = create_action(|_: &()| clear_server_count());
-    let counter = create_resource(
+    let dec = Action::new(|_: &()| adjust_server_count(-1, "decing".into()));
+    let inc = Action::new(|_: &()| adjust_server_count(1, "incing".into()));
+    let clear = Action::new(|_: &()| clear_server_count());
+    let counter = Resource::new(
        move || {
            (
                dec.version().get(),
@@ -138,27 +120,17 @@ pub fn Counter() -> impl IntoView {
            <p>
                "This counter sets the value on the server and automatically reloads the new value."
            </p>
-            <div>
-                <button on:click=move |_| clear.dispatch(())>"Clear"</button>
-                <button on:click=move |_| dec.dispatch(())>"-1"</button>
-                <span>
-                    "Value: "
-                    <Suspense>
-                        {move || counter.and_then(|count| *count)} "!"
-                    </Suspense>
-                </span>
-                <button on:click=move |_| inc.dispatch(())>"+1"</button>
-            </div>
-            <Suspense>
-              {move || {
-                counter.get().and_then(|res| match res {
-                  Ok(_) => None,
-                  Err(e) => Some(e),
-                }).map(|msg| {
-                  view! { <p>"Error: " {msg.to_string()}</p> }
-                })
-              }}
-            </Suspense>
+            <ErrorBoundary fallback=|errors| move || format!("Error: {:#?}", errors.get())>
+                <div>
+                    <button on:click=move |_| clear.dispatch(())>"Clear"</button>
+                    <button on:click=move |_| dec.dispatch(())>"-1"</button>
+                    <span>
+                        "Value: "
+                        <Suspense>{counter} "!" </Suspense>
+                    </span>
+                    <button on:click=move |_| inc.dispatch(())>"+1"</button>
+                </div>
+            </ErrorBoundary>
        </div>
    }
 }
@@ -170,10 +142,10 @@ pub fn Counter() -> impl IntoView {
 pub fn FormCounter() -> impl IntoView {
    // these struct names are auto-generated by #[server]
    // they are just the PascalCased versions of the function names
-    let adjust = create_server_action::<AdjustServerCount>();
-    let clear = create_server_action::<ClearServerCount>();
+    let adjust = ServerAction::<AdjustServerCount>::new();
+    let clear = ServerAction::<ClearServerCount>::new();

-    let counter = create_resource(
+    let counter = Resource::new(
        move || (adjust.version().get(), clear.version().get()),
        |_| {
            log::debug!("FormCounter running fetcher");
@@ -204,7 +176,7 @@ pub fn FormCounter() -> impl IntoView {
                    <input type="hidden" name="msg" value="form value down"/>
                    <input type="submit" value="-1"/>
                </ActionForm>
-                <span>"Value: " <Suspense>{move || value().to_string()} "!"</Suspense></span>
+                <span>"Value: " <Suspense>{value} "!"</Suspense></span>
                <ActionForm action=adjust>
                    <input type="hidden" name="delta" value="1"/>
                    <input type="hidden" name="msg" value="form value up"/>
@@ -222,19 +194,21 @@ pub fn FormCounter() -> impl IntoView {
 #[component]
 pub fn MultiuserCounter() -> impl IntoView {
    let dec =
-        create_action(|_: &()| adjust_server_count(-1, "dec dec goose".into()));
+        Action::new(|_: &()| adjust_server_count(-1, "dec dec goose".into()));
    let inc =
-        create_action(|_: &()| adjust_server_count(1, "inc inc moose".into()));
-    let clear = create_action(|_: &()| clear_server_count());
+        Action::new(|_: &()| adjust_server_count(1, "inc inc moose".into()));
+    let clear = Action::new(|_: &()| clear_server_count());

    #[cfg(not(feature = "ssr"))]
    let multiplayer_value = {
        use futures::StreamExt;
+        use send_wrapper::SendWrapper;

-        let mut source =
+        let mut source = SendWrapper::new(
            gloo_net::eventsource::futures::EventSource::new("/api/events")
-                .expect("couldn't connect to SSE stream");
-        let s = create_signal_from_stream(
+                .expect("couldn't connect to SSE stream"),
+        );
+        let s = ReadSignal::from_stream_unsync(
            source
                .subscribe("message")
                .unwrap()
@@ -248,12 +222,12 @@ pub fn MultiuserCounter() -> impl IntoView {
                }),
        );

-        on_cleanup(move || source.close());
+        on_cleanup(move || source.take().close());
        s
    };

    #[cfg(feature = "ssr")]
-    let (multiplayer_value, _) = create_signal(None::<i32>);
+    let (multiplayer_value, _) = signal(None::<i32>);

    view! {
        <div>
--- a/examples/counter_isomorphic/src/lib.rs
+++ b/examples/counter_isomorphic/src/lib.rs
@@ -3,11 +3,10 @@ pub mod counters;
 #[cfg(feature = "hydrate")]
 #[wasm_bindgen::prelude::wasm_bindgen]
 pub fn hydrate() {
-    use crate::counters::*;
-    use leptos::*;
+    use crate::counters::Counters;

    _ = console_log::init_with_level(log::Level::Debug);
    console_error_panic_hook::set_once();

-    mount_to_body(Counters);
+    leptos::mount::hydrate_body(Counters);
 }
--- a/examples/counter_isomorphic/src/main.rs
+++ b/examples/counter_isomorphic/src/main.rs
@@ -3,7 +3,6 @@ mod counters;
 use crate::counters::*;
 use actix_files::Files;
 use actix_web::*;
-use leptos::*;
 use leptos_actix::{generate_route_list, LeptosRoutes};

 #[get("/api/events")]
@@ -27,26 +26,44 @@ async fn counter_events() -> impl Responder {

 #[actix_web::main]
 async fn main() -> std::io::Result<()> {
+    use leptos::prelude::*;
+
    // Setting this to None means we'll be using cargo-leptos and its env vars.
    // when not using cargo-leptos None must be replaced with Some("Cargo.toml")
-    let conf = get_configuration(None).await.unwrap();
-
+    let conf = get_configuration(None).unwrap();
    let addr = conf.leptos_options.site_addr;
-    let routes = generate_route_list(Counters);
+    println!("listening on http://{}", &addr);

    HttpServer::new(move || {
+        // Generate the list of routes in your Leptos App
+        let routes = generate_route_list(Counters);
        let leptos_options = &conf.leptos_options;
        let site_root = &leptos_options.site_root;

        App::new()
            .service(counter_events)
-            .leptos_routes(
-                leptos_options.to_owned(),
-                routes.to_owned(),
-                Counters,
-            )
+            .leptos_routes(routes, {
+                let leptos_options = leptos_options.clone();
+                move || {
+                    view! {
+                        <!DOCTYPE html>
+                        <html lang="en">
+                            <head>
+                                <meta charset="utf-8"/>
+                                <meta
+                                    name="viewport"
+                                    content="width=device-width, initial-scale=1"
+                                />
+                                <AutoReload options=leptos_options.clone()/>
+                                <HydrationScripts options=leptos_options.clone()/>
+                            </head>
+                            <body>
+                                <Counters/>
+                            </body>
+                        </html>
+                    }
+            }})
            .service(Files::new("/", site_root))
-        //.wrap(middleware::Compress::default())
    })
    .bind(&addr)?
    .run()
--- a/examples/counter_url_query/Cargo.toml
+++ b/examples/counter_url_query/Cargo.toml
@@ -9,9 +9,7 @@ lto = true

 [dependencies]
 leptos = { path = "../../leptos", features = ["csr"] }
-leptos_router = { path = "../../router", features = ["csr"] }
-console_log = "1"
-log = "0.4"
+leptos_router = { path = "../../router", features = [] }
 console_error_panic_hook = "0.1.7"

 [dev-dependencies]
--- a/examples/counter_url_query/src/lib.rs
+++ b/examples/counter_url_query/src/lib.rs
@@ -1,17 +1,17 @@
-use leptos::*;
-use leptos_router::*;
+use leptos::prelude::*;
+use leptos_router::hooks::query_signal;

 /// A simple counter component.
 ///
 /// You can use doc comments like this to document your component.
 #[component]
 pub fn SimpleQueryCounter() -> impl IntoView {
-    let (count, set_count) = create_query_signal::<i32>("count");
+    let (count, set_count) = query_signal::<i32>("count");
    let clear = move |_| set_count.set(None);
    let decrement = move |_| set_count.set(Some(count.get().unwrap_or(0) - 1));
    let increment = move |_| set_count.set(Some(count.get().unwrap_or(0) + 1));

-    let (msg, set_msg) = create_query_signal::<String>("message");
+    let (msg, set_msg) = query_signal::<String>("message");
    let update_msg = move |ev| {
        let new_msg = event_target_value(&ev);
        if new_msg.is_empty() {
--- a/examples/counter_url_query/src/main.rs
+++ b/examples/counter_url_query/src/main.rs
@@ -1,16 +1,13 @@
 use counter_url_query::SimpleQueryCounter;
-use leptos::*;
-use leptos_router::*;
+use leptos::prelude::*;
+use leptos_router::components::Router;

 pub fn main() {
-    _ = console_log::init_with_level(log::Level::Debug);
    console_error_panic_hook::set_once();
-    mount_to_body(|| {
+    leptos::mount::mount_to_body(|| {
        view! {
            <Router>
-                <Routes>
-                    <Route path="" view=SimpleQueryCounter />
-                </Routes>
+                <SimpleQueryCounter/>
            </Router>
        }
    })
--- a/examples/counter_without_macros/Cargo.toml
+++ b/examples/counter_without_macros/Cargo.toml
@@ -10,8 +10,6 @@ lto = true

 [dependencies]
 leptos = { path = "../../leptos", features = ["csr"] }
-console_log = "1"
-log = "0.4"
 console_error_panic_hook = "0.1.7"

 [dev-dependencies]
--- a/examples/counter_without_macros/src/lib.rs
+++ b/examples/counter_without_macros/src/lib.rs
@@ -1,9 +1,16 @@
-use leptos::{html::*, *};
+use leptos::{
+    ev,
+    html::{button, div, span},
+    prelude::*,
+};

 /// A simple counter view.
 // A component is really just a function call: it runs once to create the DOM and reactive system
 pub fn counter(initial_value: i32, step: u32) -> impl IntoView {
    let count = RwSignal::new(Count::new(initial_value, step));
+    Effect::new(move |_| {
+        leptos::logging::log!("count = {:?}", count.get());
+    });

    // the function name is the same as the HTML tag name
    div()
@@ -44,6 +51,7 @@ impl Count {
    }

    pub fn value(&self) -> i32 {
+        leptos::logging::log!("value = {}", self.value);
        self.value
    }

--- a/examples/counter_without_macros/src/main.rs
+++ b/examples/counter_without_macros/src/main.rs
@@ -1,9 +1,7 @@
 use counter_without_macros::counter;
-use leptos::*;

 /// Show the counter
 pub fn main() {
-    _ = console_log::init_with_level(log::Level::Debug);
    console_error_panic_hook::set_once();
-    mount_to_body(|| counter(0, 1))
+    leptos::mount::mount_to_body(|| counter(0, 1))
 }
--- a/examples/counter_without_macros/tests/web.rs
+++ b/examples/counter_without_macros/tests/web.rs
@@ -1,5 +1,5 @@
 use counter_without_macros::counter;
-use leptos::*;
+use leptos::{prelude::*, spawn::tick};
 use pretty_assertions::assert_eq;
 use wasm_bindgen::JsCast;
 use wasm_bindgen_test::*;
@@ -8,27 +8,32 @@ use web_sys::HtmlElement;
 wasm_bindgen_test_configure!(run_in_browser);

 #[wasm_bindgen_test]
-fn should_increment_counter() {
+async fn should_increment_counter() {
    open_counter();

    click_increment();
    click_increment();

+    // reactive changes run asynchronously, so yield briefly before observing the DOM
+    tick().await;
+
    assert_eq!(see_text(), Some("Value: 2!".to_string()));
 }

 #[wasm_bindgen_test]
-fn should_decrement_counter() {
+async fn should_decrement_counter() {
    open_counter();

    click_decrement();
    click_decrement();

+    tick().await;
+
    assert_eq!(see_text(), Some("Value: -2!".to_string()));
 }

 #[wasm_bindgen_test]
-fn should_clear_counter() {
+async fn should_clear_counter() {
    open_counter();

    click_increment();
@@ -36,18 +41,18 @@ fn should_clear_counter() {

    click_clear();

+    tick().await;
+
    assert_eq!(see_text(), Some("Value: 0!".to_string()));
 }

 fn open_counter() {
    remove_existing_counter();
-    mount_to_body(move || counter(0, 1));
+    leptos::mount::mount_to_body(move || counter(0, 1));
 }

 fn remove_existing_counter() {
-    if let Some(counter) =
-        leptos::document().query_selector("body div").unwrap()
-    {
+    if let Some(counter) = document().query_selector("body div").unwrap() {
        counter.remove();
    }
 }
@@ -74,7 +79,7 @@ fn see_text() -> Option<String> {

 fn find_by_text(text: &str) -> HtmlElement {
    let xpath = format!("//*[text()='{}']", text);
-    let document = leptos::document();
+    let document = document();
    document
        .evaluate(&xpath, &document)
        .unwrap()
--- a/examples/counters/Cargo.toml
+++ b/examples/counters/Cargo.toml
@@ -5,8 +5,6 @@ edition = "2021"

 [dependencies]
 leptos = { path = "../../leptos", features = ["csr"]  }
-log = "0.4"
-console_log = "1"
 console_error_panic_hook = "0.1.7"

 [dev-dependencies]
--- a/examples/counters/src/lib.rs
+++ b/examples/counters/src/lib.rs
@@ -1,8 +1,8 @@
-use leptos::*;
+use leptos::prelude::{signal::*, *};

 const MANY_COUNTERS: usize = 1000;

-type CounterHolder = Vec<(usize, (ReadSignal<i32>, WriteSignal<i32>))>;
+type CounterHolder = Vec<(usize, ArcRwSignal<i32>)>;

 #[derive(Copy, Clone)]
 struct CounterUpdater {
@@ -11,13 +11,13 @@ struct CounterUpdater {

 #[component]
 pub fn Counters() -> impl IntoView {
-    let (next_counter_id, set_next_counter_id) = create_signal(0);
-    let (counters, set_counters) = create_signal::<CounterHolder>(vec![]);
+    let (next_counter_id, set_next_counter_id) = signal(0);
+    let (counters, set_counters) = signal::<CounterHolder>(vec![]);
    provide_context(CounterUpdater { set_counters });

    let add_counter = move |_| {
        let id = next_counter_id.get();
-        let sig = create_signal(0);
+        let sig = ArcRwSignal::new(0);
        set_counters.update(move |counters| counters.push((id, sig)));
        set_next_counter_id.update(|id| *id += 1);
    };
@@ -25,7 +25,7 @@ pub fn Counters() -> impl IntoView {
    let add_many_counters = move |_| {
        let next_id = next_counter_id.get();
        let new_counters = (next_id..next_id + MANY_COUNTERS).map(|id| {
-            let signal = create_signal(0);
+            let signal = ArcRwSignal::new(0);
            (id, signal)
        });

@@ -39,78 +39,55 @@ pub fn Counters() -> impl IntoView {

    view! {
        <div>
-            <button on:click=add_counter>
-                "Add Counter"
-            </button>
-            <button on:click=add_many_counters>
-                {format!("Add {MANY_COUNTERS} Counters")}
-            </button>
-            <button on:click=clear_counters>
-                "Clear Counters"
-            </button>
+            <button on:click=add_counter>"Add Counter"</button>
+            <button on:click=add_many_counters>{format!("Add {MANY_COUNTERS} Counters")}</button>
+            <button on:click=clear_counters>"Clear Counters"</button>
            <p>
                "Total: "
-                <span>{move ||
-                    counters.get()
-                        .iter()
-                        .map(|(_, (count, _))| count.get())
-                        .sum::<i32>()
-                        .to_string()
-                }</span>
-                " from "
-                <span>{move || counters.get().len().to_string()}</span>
+                <span>
+                    {move || {
+                        counters.get().iter().map(|(_, count)| count.get()).sum::<i32>().to_string()
+                    }}
+
+                </span> " from " <span>{move || counters.get().len().to_string()}</span>
                " counters."
            </p>
            <ul>
                <For
                    each=move || counters.get()
                    key=|counter| counter.0
-                    children=move |(id, (value, set_value)): (usize, (ReadSignal<i32>, WriteSignal<i32>))| {
-                        view! {
-                            <Counter id value set_value/>
-                        }
+                    children=move |(id, value)| {
+                        view! { <Counter id value/> }
                    }
                />
+
            </ul>
        </div>
    }
 }

 #[component]
-fn Counter(
-    id: usize,
-    value: ReadSignal<i32>,
-    set_value: WriteSignal<i32>,
-) -> impl IntoView {
+fn Counter(id: usize, value: ArcRwSignal<i32>) -> impl IntoView {
+    let value = RwSignal::from(value);
    let CounterUpdater { set_counters } = use_context().unwrap();

-    let input = move |ev| {
-        set_value
-            .set(event_target_value(&ev).parse::<i32>().unwrap_or_default())
-    };
-
-    // this will run when the scope is disposed, i.e., when this row is deleted
-    // because the signal was created in the parent scope, it won't be disposed
-    // of until the parent scope is. but we no longer need it, so we'll dispose of
-    // it when this row is deleted, instead. if we don't dispose of it here,
-    // this memory will "leak," i.e., the signal will continue to exist until the
-    // parent component is removed. in the case of this component, where it's the
-    // root, that's the lifetime of the program.
-    on_cleanup(move || {
-        log::debug!("deleted a row");
-        value.dispose();
-    });
-
    view! {
        <li>
-            <button on:click=move |_| set_value.update(move |value| *value -= 1)>"-1"</button>
-            <input type="text"
-                prop:value={value}
-                on:input=input
+            <button on:click=move |_| value.update(move |value| *value -= 1)>"-1"</button>
+            <input
+                type="text"
+                prop:value=value
+                on:input:target=move |ev| {
+                    value.set(ev.target().value().parse::<i32>().unwrap_or_default())
+                }
            />
+
            <span>{value}</span>
-            <button on:click=move |_| set_value.update(move |value| *value += 1)>"+1"</button>
-            <button on:click=move |_| set_counters.update(move |counters| counters.retain(|(counter_id, _)| counter_id != &id))>"x"</button>
+            <button on:click=move |_| value.update(move |value| *value += 1)>"+1"</button>
+            <button on:click=move |_| {
+                set_counters
+                    .update(move |counters| counters.retain(|(counter_id, _)| counter_id != &id))
+            }>"x"</button>
        </li>
    }
 }
--- a/examples/counters/src/main.rs
+++ b/examples/counters/src/main.rs
@@ -1,8 +1,6 @@
 use counters::Counters;
-use leptos::*;

 fn main() {
-    _ = console_log::init_with_level(log::Level::Debug);
    console_error_panic_hook::set_once();
-    mount_to_body(|| view! { <Counters/> })
+    leptos::mount::mount_to_body(Counters)
 }
--- a/examples/counters/tests/web.rs
+++ b/examples/counters/tests/web.rs
@@ -3,14 +3,15 @@ use wasm_bindgen_test::*;

 wasm_bindgen_test_configure!(run_in_browser);
 use counters::Counters;
-use leptos::*;
+use leptos::prelude::*;
+use leptos::spawn::tick;
 use web_sys::HtmlElement;

 #[wasm_bindgen_test]
-fn inc() {
-    mount_to_body(|| view! { <Counters/> });
+async fn inc() {
+    mount_to_body(Counters);

-    let document = leptos::document();
+    let document = document();
    let div = document.query_selector("div").unwrap().unwrap();
    let add_counter = div
        .first_child()
@@ -18,31 +19,33 @@ fn inc() {
        .dyn_into::<HtmlElement>()
        .unwrap();

+    assert_eq!(
+        div.inner_html(),
+        "<button>Add Counter</button><button>Add 1000 \
+         Counters</button><button>Clear Counters</button><p>Total: \
+         <span>0</span> from <span>0</span> counters.</p><ul><!----></ul>"
+    );
+
    // add 3 counters
    add_counter.click();
    add_counter.click();
    add_counter.click();

+    tick().await;
+
    // check HTML
    assert_eq!(
        div.inner_html(),
        "<button>Add Counter</button><button>Add 1000 \
-         Counters</button><button>Clear Counters</button><p>Total: <span><!-- \
-         <DynChild> -->0<!-- </DynChild> --></span> from <span><!-- \
-         <DynChild> -->3<!-- </DynChild> --></span> counters.</p><ul><!-- \
-         <Each> --><!-- <EachItem> --><!-- <Counter> \
-         --><li><button>-1</button><input type=\"text\"><span><!-- <DynChild> \
-         -->0<!-- </DynChild> \
-         --></span><button>+1</button><button>x</button></li><!-- </Counter> \
-         --><!-- </EachItem> --><!-- <EachItem> --><!-- <Counter> \
-         --><li><button>-1</button><input type=\"text\"><span><!-- <DynChild> \
-         -->0<!-- </DynChild> \
-         --></span><button>+1</button><button>x</button></li><!-- </Counter> \
-         --><!-- </EachItem> --><!-- <EachItem> --><!-- <Counter> \
-         --><li><button>-1</button><input type=\"text\"><span><!-- <DynChild> \
-         -->0<!-- </DynChild> \
-         --></span><button>+1</button><button>x</button></li><!-- </Counter> \
-         --><!-- </EachItem> --><!-- </Each> --></ul>"
+         Counters</button><button>Clear Counters</button><p>Total: \
+         <span>0</span> from <span>3</span> \
+         counters.</p><ul><li><button>-1</button><input \
+         type=\"text\"><span>0</span><button>+1</button><button>x</button></\
+         li><li><button>-1</button><input \
+         type=\"text\"><span>0</span><button>+1</button><button>x</button></\
+         li><li><button>-1</button><input \
+         type=\"text\"><span>0</span><button>+1</button><button>x</button></\
+         li><!----></ul>"
    );

    let counters = div
@@ -71,25 +74,20 @@ fn inc() {
        }
    }

+    tick().await;
+
    assert_eq!(
        div.inner_html(),
        "<button>Add Counter</button><button>Add 1000 \
-         Counters</button><button>Clear Counters</button><p>Total: <span><!-- \
-         <DynChild> -->6<!-- </DynChild> --></span> from <span><!-- \
-         <DynChild> -->3<!-- </DynChild> --></span> counters.</p><ul><!-- \
-         <Each> --><!-- <EachItem> --><!-- <Counter> \
-         --><li><button>-1</button><input type=\"text\"><span><!-- <DynChild> \
-         -->1<!-- </DynChild> \
-         --></span><button>+1</button><button>x</button></li><!-- </Counter> \
-         --><!-- </EachItem> --><!-- <EachItem> --><!-- <Counter> \
-         --><li><button>-1</button><input type=\"text\"><span><!-- <DynChild> \
-         -->2<!-- </DynChild> \
-         --></span><button>+1</button><button>x</button></li><!-- </Counter> \
-         --><!-- </EachItem> --><!-- <EachItem> --><!-- <Counter> \
-         --><li><button>-1</button><input type=\"text\"><span><!-- <DynChild> \
-         -->3<!-- </DynChild> \
-         --></span><button>+1</button><button>x</button></li><!-- </Counter> \
-         --><!-- </EachItem> --><!-- </Each> --></ul>"
+         Counters</button><button>Clear Counters</button><p>Total: \
+         <span>6</span> from <span>3</span> \
+         counters.</p><ul><li><button>-1</button><input \
+         type=\"text\"><span>1</span><button>+1</button><button>x</button></\
+         li><li><button>-1</button><input \
+         type=\"text\"><span>2</span><button>+1</button><button>x</button></\
+         li><li><button>-1</button><input \
+         type=\"text\"><span>3</span><button>+1</button><button>x</button></\
+         li><!----></ul>"
    );

    // remove the first counter
@@ -101,20 +99,17 @@ fn inc() {
        .unchecked_into::<HtmlElement>()
        .click();

+    tick().await;
+
    assert_eq!(
        div.inner_html(),
        "<button>Add Counter</button><button>Add 1000 \
-         Counters</button><button>Clear Counters</button><p>Total: <span><!-- \
-         <DynChild> -->5<!-- </DynChild> --></span> from <span><!-- \
-         <DynChild> -->2<!-- </DynChild> --></span> counters.</p><ul><!-- \
-         <Each> --><!-- <EachItem> --><!-- <EachItem> --><!-- <Counter> \
-         --><li><button>-1</button><input type=\"text\"><span><!-- <DynChild> \
-         -->2<!-- </DynChild> \
-         --></span><button>+1</button><button>x</button></li><!-- </Counter> \
-         --><!-- </EachItem> --><!-- <EachItem> --><!-- <Counter> \
-         --><li><button>-1</button><input type=\"text\"><span><!-- <DynChild> \
-         -->3<!-- </DynChild> \
-         --></span><button>+1</button><button>x</button></li><!-- </Counter> \
-         --><!-- </EachItem> --><!-- </Each> --></ul>"
+         Counters</button><button>Clear Counters</button><p>Total: \
+         <span>5</span> from <span>2</span> \
+         counters.</p><ul><li><button>-1</button><input \
+         type=\"text\"><span>2</span><button>+1</button><button>x</button></\
+         li><li><button>-1</button><input \
+         type=\"text\"><span>3</span><button>+1</button><button>x</button></\
+         li><!----></ul>"
    );
 }
--- a/examples/directives/Cargo.toml
+++ b/examples/directives/Cargo.toml
@@ -13,5 +13,4 @@ web-sys = { version = "0.3", features = ["Clipboard", "Navigator"] }
 [dev-dependencies]
 wasm-bindgen-test = "0.3.0"
 wasm-bindgen = "0.2"
-web-sys = "0.3"
-gloo-timers = { version = "0.3", features = ["futures"] }
+web-sys = { version = "0.3", features = ["NodeList"] }
--- a/examples/directives/src/lib.rs
+++ b/examples/directives/src/lib.rs
@@ -1,25 +1,26 @@
-use leptos::{ev::click, html::AnyElement, *};
+use leptos::{ev::click, prelude::*};
+use web_sys::Element;

 // no extra parameter
-pub fn highlight(el: HtmlElement<AnyElement>) {
+pub fn highlight(el: Element) {
    let mut highlighted = false;

-    let _ = el.clone().on(click, move |_| {
+    let handle = el.clone().on(click, move |_| {
        highlighted = !highlighted;

        if highlighted {
-            let _ = el.clone().style("background-color", "yellow");
+            el.style(("background-color", "yellow"));
        } else {
-            let _ = el.clone().style("background-color", "transparent");
+            el.style(("background-color", "transparent"));
        }
    });
+    on_cleanup(move || drop(handle));
 }

 // one extra parameter
-pub fn copy_to_clipboard(el: HtmlElement<AnyElement>, content: &str) {
-    let content = content.to_string();
-
-    let _ = el.clone().on(click, move |evt| {
+pub fn copy_to_clipboard(el: Element, content: &str) {
+    let content = content.to_owned();
+    let handle = el.clone().on(click, move |evt| {
        evt.prevent_default();
        evt.stop_propagation();

@@ -29,8 +30,9 @@ pub fn copy_to_clipboard(el: HtmlElement<AnyElement>, content: &str) {
            .expect("navigator.clipboard to be available")
            .write_text(&content);

-        let _ = el.clone().inner_html(format!("Copied \"{}\"", &content));
+        el.set_inner_html(&format!("Copied \"{}\"", &content));
    });
+    on_cleanup(move || drop(handle));
 }

 // custom parameter
@@ -52,14 +54,18 @@ impl From<()> for Amount {
 }

 // .into() will automatically be called on the parameter
-pub fn add_dot(el: HtmlElement<AnyElement>, amount: Amount) {
-    _ = el.clone().on(click, move |_| {
+pub fn add_dot(el: Element, amount: Amount) {
+    use leptos::wasm_bindgen::JsCast;
+    let el = el.unchecked_into::<web_sys::HtmlElement>();
+
+    let handle = el.clone().on(click, move |_| {
        el.set_inner_text(&format!(
            "{}{}",
            el.inner_text(),
            ".".repeat(amount.0)
        ))
-    })
+    });
+    on_cleanup(move || drop(handle));
 }

 #[component]
--- a/examples/directives/src/main.rs
+++ b/examples/directives/src/main.rs
@@ -1,5 +1,5 @@
 use directives::App;
-use leptos::*;
+use leptos::prelude::*;

 fn main() {
    _ = console_log::init_with_level(log::Level::Debug);
--- a/examples/directives/tests/web.rs
+++ b/examples/directives/tests/web.rs
@@ -1,19 +1,16 @@
-use gloo_timers::future::sleep;
-use std::time::Duration;
+use directives::App;
+use leptos::{prelude::*, spawn::tick};
 use wasm_bindgen::JsCast;
 use wasm_bindgen_test::*;
-
-wasm_bindgen_test_configure!(run_in_browser);
-use directives::App;
-use leptos::*;
 use web_sys::HtmlElement;

+wasm_bindgen_test_configure!(run_in_browser);
 #[wasm_bindgen_test]
 async fn test_directives() {
-    mount_to_body(|| view! { <App/> });
-    sleep(Duration::ZERO).await;
+    leptos::mount::mount_to_body(App);
+    tick().await;

-    let document = leptos::document();
+    let document = document();
    let paragraphs = document.query_selector_all("p").unwrap();

    assert_eq!(paragraphs.length(), 3);
--- a/examples/error_boundary/e2e/tests/clear_number.spec.ts
+++ b/examples/error_boundary/e2e/tests/clear_number.spec.ts
@@ -8,7 +8,7 @@ test.describe("Clear Number", () => {

    await ui.clearInput();

-    await expect(ui.errorMessage).toHaveText("Not a number! Errors: ");
+    await expect(ui.errorMessage).toHaveText("Not an integer! Errors: ");
  });
  test("should see the error list", async ({ page }) => {
    const ui = new HomePage(page);
--- a/examples/error_boundary/e2e/tests/fixtures/home_page.ts
+++ b/examples/error_boundary/e2e/tests/fixtures/home_page.ts
@@ -14,7 +14,7 @@ export class HomePage {

    this.pageTitle = page.locator("h1");
    this.numberInput = page.getByLabel(
-      "Type a number (or something that's not a number!)"
+      "Type an integer (or something that's not an integer!)"
    );
    this.successMessage = page.locator("label p");
    this.errorMessage = page.locator("div p");
--- a/examples/error_boundary/src/lib.rs
+++ b/examples/error_boundary/src/lib.rs
@@ -1,38 +1,44 @@
-use leptos::*;
+use leptos::prelude::*;

 #[component]
 pub fn App() -> impl IntoView {
-    let (value, set_value) = create_signal(Ok(0));
-
-    // when input changes, try to parse a number from the input
-    let on_input =
-        move |ev| set_value.set(event_target_value(&ev).parse::<i32>());
+    let (value, set_value) = signal("".parse::<i32>());

    view! {
        <h1>"Error Handling"</h1>
        <label>
-            "Type a number (or something that's not a number!)"
-            <input type="number" on:input=on_input/>
-            // If an `Err(_) had been rendered inside the <ErrorBoundary/>,
+            "Type an integer (or something that's not an integer!)"
+            <input
+                type="number"
+                value=move || value.get().unwrap_or_default()
+                // when input changes, try to parse a number from the input
+                on:input:target=move |ev| set_value.set(ev.target().value().parse::<i32>())
+            />
+            // If an `Err(_) has been rendered inside the <ErrorBoundary/>,
            // the fallback will be displayed. Otherwise, the children of the
            // <ErrorBoundary/> will be displayed.
-            <ErrorBoundary
-                // the fallback receives a signal containing current errors
-                fallback=|errors| view! {
+            // the fallback receives a signal containing current errors
+            <ErrorBoundary fallback=|errors| {
+                let errors = errors.clone();
+                view! {
                    <div class="error">
-                        <p>"Not a number! Errors: "</p>
+                        <p>"Not an integer! Errors: "</p>
                        // we can render a list of errors
                        // as strings, if we'd like
                        <ul>
-                            {move || errors.get()
-                                .into_iter()
-                                .map(|(_, e)| view! { <li>{e.to_string()}</li>})
-                                .collect_view()
-                            }
+                            {move || {
+                                errors
+                                    .read()
+                                    .iter()
+                                    .map(|(_, e)| view! { <li>{e.to_string()}</li> })
+                                    .collect::<Vec<_>>()
+                            }}
+
                        </ul>
                    </div>
                }
-            >
+            }>
+
                <p>
                    "You entered "
                    // because `value` is `Result<i32, _>`,
--- a/examples/error_boundary/src/main.rs
+++ b/examples/error_boundary/src/main.rs
@@ -1,12 +1,8 @@
 use error_boundary::*;
-use leptos::*;
+use leptos::prelude::*;

 pub fn main() {
    _ = console_log::init_with_level(log::Level::Debug);
    console_error_panic_hook::set_once();
-    mount_to_body(|| {
-        view! {
-            <App/>
-        }
-    })
+    mount_to_body(App)
 }
--- a/examples/errors_axum/Cargo.toml
+++ b/examples/errors_axum/Cargo.toml
@@ -7,15 +7,12 @@ edition = "2021"
 crate-type = ["cdylib", "rlib"]

 [dependencies]
-console_log = "1.0"
 console_error_panic_hook = "0.1"
 leptos = { path = "../../leptos" }
 leptos_axum = { path = "../../integrations/axum", optional = true }
 leptos_meta = { path = "../../meta" }
 leptos_router = { path = "../../router" }
-log = "0.4"
 serde = { version = "1", features = ["derive"] }
-simple_logger = "4.0"
 axum = { version = "0.7", optional = true }
 tower = { version = "0.4", optional = true }
 tower-http = { version = "0.5", features = ["fs"], optional = true }
@@ -25,7 +22,7 @@ thiserror = "1.0"
 wasm-bindgen = "0.2"

 [features]
-hydrate = ["leptos/hydrate", "leptos_meta/hydrate", "leptos_router/hydrate"]
+hydrate = ["leptos/hydrate"]
 ssr = [
  "dep:axum",
  "dep:tower",
--- a/examples/errors_axum/src/error_template.rs
+++ b/examples/errors_axum/src/error_template.rs
@@ -1,5 +1,5 @@
 use crate::errors::AppError;
-use leptos::{logging::log, *};
+use leptos::{logging::log, prelude::*};
 #[cfg(feature = "ssr")]
 use leptos_axum::ResponseOptions;

@@ -7,25 +7,18 @@ use leptos_axum::ResponseOptions;
 // Feel free to do more complicated things here than just displaying them.
 #[component]
 pub fn ErrorTemplate(
-    #[prop(optional)] outside_errors: Option<Errors>,
-    #[prop(optional)] errors: Option<RwSignal<Errors>>,
+    #[prop(into)] errors: MaybeSignal<Errors>,
 ) -> impl IntoView {
-    let errors = match outside_errors {
-        Some(e) => create_rw_signal(e),
-        None => match errors {
-            Some(e) => e,
-            None => panic!("No Errors found and we expected errors!"),
-        },
-    };
-
    // Get Errors from Signal
    // Downcast lets us take a type that implements `std::error::Error`
-    let errors: Vec<AppError> = errors
-        .get_untracked()
-        .into_iter()
-        .filter_map(|(_, v)| v.downcast_ref::<AppError>().cloned())
-        .collect();
-    log!("Errors: {errors:#?}");
+    let errors = Memo::new(move |_| {
+        errors
+            .get_untracked()
+            .into_iter()
+            .filter_map(|(_, v)| v.downcast_ref::<AppError>().cloned())
+            .collect::<Vec<_>>()
+    });
+    log!("Errors: {:#?}", &*errors.read_untracked());

    // Only the response code for the first error is actually sent from the server
    // this may be customized by the specific application
@@ -33,26 +26,30 @@ pub fn ErrorTemplate(
    {
        let response = use_context::<ResponseOptions>();
        if let Some(response) = response {
-            response.set_status(errors[0].status_code());
+            response.set_status(errors.read_untracked()[0].status_code());
        }
    }

    view! {
-        <h1>{if errors.len() > 1 {"Errors"} else {"Error"}}</h1>
-        <For
-            // a function that returns the items we're iterating over; a signal is fine
-            each= move || {errors.clone().into_iter().enumerate()}
-            // a unique key for each item as a reference
-            key=|(index, _)| *index
-            // renders each item to a view
-            children=move |error| {
-                let error_string = error.1.to_string();
-                let error_code= error.1.status_code();
-                view! {
-                    <h2>{error_code.to_string()}</h2>
-                    <p>"Error: " {error_string}</p>
-                }
-            }
-        />
+        <h1>{move || {
+            if errors.read().len() > 1 {
+                "Errors"
+            } else {
+                "Error"
+            }}}
+        </h1>
+        {move || {
+            errors.get()
+                .into_iter()
+                .map(|error| {
+                    let error_string = error.to_string();
+                    let error_code= error.status_code();
+                    view! {
+                        <h2>{error_code.to_string()}</h2>
+                        <p>"Error: " {error_string}</p>
+                    }
+                })
+                .collect_view()
+        }}
    }
 }
--- a/examples/errors_axum/src/errors.rs
+++ b/examples/errors_axum/src/errors.rs
@@ -1,7 +1,7 @@
 use http::status::StatusCode;
 use thiserror::Error;

-#[derive(Debug, Clone, Error)]
+#[derive(Debug, Clone, PartialEq, Eq, Error)]
 pub enum AppError {
    #[error("Not Found")]
    NotFound,
--- a/examples/errors_axum/src/fallback.rs
+++ b/examples/errors_axum/src/fallback.rs
@@ -1,48 +0,0 @@
-use crate::landing::App;
-use axum::{
-    body::Body,
-    extract::State,
-    http::{Request, Response, StatusCode, Uri},
-    response::{IntoResponse, Response as AxumResponse},
-};
-use leptos::{view, LeptosOptions};
-use tower::ServiceExt;
-use tower_http::services::ServeDir;
-
-pub async fn file_and_error_handler(
-    uri: Uri,
-    State(options): State<LeptosOptions>,
-    req: Request<Body>,
-) -> AxumResponse {
-    let root = options.site_root.clone();
-    let res = get_static_file(uri.clone(), &root).await.unwrap();
-
-    if res.status() == StatusCode::OK {
-        res.into_response()
-    } else {
-        let handler = leptos_axum::render_app_to_stream(
-            options.to_owned(),
-            move || view! { <App/> },
-        );
-        handler(req).await.into_response()
-    }
-}
-
-async fn get_static_file(
-    uri: Uri,
-    root: &str,
-) -> Result<Response<Body>, (StatusCode, String)> {
-    let req = Request::builder()
-        .uri(uri.clone())
-        .body(Body::empty())
-        .unwrap();
-    // `ServeDir` implements `tower::Service` so we can call it with `tower::ServiceExt::oneshot`
-    // This path is relative to the cargo root
-    match ServeDir::new(root).oneshot(req).await {
-        Ok(res) => Ok(res.into_response()),
-        Err(err) => Err((
-            StatusCode::INTERNAL_SERVER_ERROR,
-            format!("Something went wrong: {err}"),
-        )),
-    }
-}
--- a/examples/errors_axum/src/landing.rs
+++ b/examples/errors_axum/src/landing.rs
@@ -1,7 +1,10 @@
 use crate::{error_template::ErrorTemplate, errors::AppError};
-use leptos::*;
+use leptos::prelude::*;
 use leptos_meta::*;
-use leptos_router::*;
+use leptos_router::{
+    components::{Route, Router, Routes},
+    StaticSegment,
+};

 #[server(CauseInternalServerError, "/api")]
 pub async fn cause_internal_server_error() -> Result<(), ServerFnError> {
@@ -13,28 +16,44 @@ pub async fn cause_internal_server_error() -> Result<(), ServerFnError> {
    ))
 }

+pub fn shell(options: LeptosOptions) -> impl IntoView {
+    view! {
+        <!DOCTYPE html>
+        <html lang="en">
+            <head>
+                <meta charset="utf-8"/>
+                <meta name="viewport" content="width=device-width, initial-scale=1"/>
+                <AutoReload options=options.clone() />
+                <HydrationScripts options/>
+                <MetaTags/>
+            </head>
+            <body>
+                <App/>
+            </body>
+        </html>
+    }
+}
+
 #[component]
 pub fn App() -> impl IntoView {
-    //let id = use_context::<String>();
    provide_meta_context();
    view! {
-
        <Link rel="shortcut icon" type_="image/ico" href="/favicon.ico"/>
        <Stylesheet id="leptos" href="/pkg/errors_axum.css"/>
-        <Router fallback=|| {
-            let mut outside_errors = Errors::default();
-            outside_errors.insert_with_default_key(AppError::NotFound);
-            view! {
-                <ErrorTemplate outside_errors/>
-            }
-            .into_view()
-        }>
+        <Router>
            <header>
                <h1>"Error Examples:"</h1>
            </header>
            <main>
-                <Routes>
-                    <Route path="" view=ExampleErrors/>
+                <Routes fallback=|| {
+                    let mut errors = Errors::default();
+                    errors.insert_with_default_key(AppError::NotFound);
+                    view! {
+                        <ErrorTemplate errors/>
+                    }
+                    .into_view()
+                }>
+                    <Route path=StaticSegment("") view=ExampleErrors/>
                </Routes>
            </main>
        </Router>
@@ -44,7 +63,7 @@ pub fn App() -> impl IntoView {
 #[component]
 pub fn ExampleErrors() -> impl IntoView {
    let generate_internal_error =
-        create_server_action::<CauseInternalServerError>();
+        ServerAction::<CauseInternalServerError>::new();

    view! {
        <p>
@@ -54,18 +73,18 @@ pub fn ExampleErrors() -> impl IntoView {
        </p>
        <p>
            "After pressing this button check browser network tools. Can be used even when WASM is blocked:"
-            <ActionForm action=generate_internal_error>
-                <input name="error1" type="submit" value="Generate Internal Server Error"/>
-            </ActionForm>
        </p>
+        <ActionForm action=generate_internal_error>
+            <input name="error1" type="submit" value="Generate Internal Server Error"/>
+        </ActionForm>
        <p>"The following <div> will always contain an error and cause this page to produce status 500. Check browser dev tools. "</p>
        <div>
-        // note that the error boundaries could be placed above in the Router or lower down
-        // in a particular route. The generated errors on the entire page contribute to the
-        // final status code sent by the server when producing ssr pages.
-        <ErrorBoundary fallback=|errors| view!{ <ErrorTemplate errors=errors/>}>
-            <ReturnsError/>
-        </ErrorBoundary>
+            // note that the error boundaries could be placed above in the Router or lower down
+            // in a particular route. The generated errors on the entire page contribute to the
+            // final status code sent by the server when producing ssr pages.
+            <ErrorBoundary fallback=|errors| view!{ <ErrorTemplate errors/>}>
+                <ReturnsError/>
+            </ErrorBoundary>
        </div>
    }
 }
--- a/examples/errors_axum/src/lib.rs
+++ b/examples/errors_axum/src/lib.rs
@@ -1,21 +1,11 @@
 pub mod error_template;
 pub mod errors;
-#[cfg(feature = "ssr")]
-pub mod fallback;
 pub mod landing;

-use wasm_bindgen::prelude::wasm_bindgen;
-
 #[cfg(feature = "hydrate")]
-#[wasm_bindgen]
+#[wasm_bindgen::prelude::wasm_bindgen]
 pub fn hydrate() {
-    use crate::landing::*;
-    use leptos::*;
-
-    _ = console_log::init_with_level(log::Level::Debug);
+    use crate::landing::App;
    console_error_panic_hook::set_once();
-
-    leptos::mount_to_body(|| {
-        view! {  <App/> }
-    });
+    leptos::mount::hydrate_body(App);
 }
--- a/examples/errors_axum/src/main.rs
+++ b/examples/errors_axum/src/main.rs
@@ -1,15 +1,17 @@
 #[cfg(feature = "ssr")]
 mod ssr_imports {
+    use axum::extract::State;
    pub use axum::{
        body::Body as AxumBody,
-        extract::{Path, State},
+        extract::Path,
        http::Request,
        response::{IntoResponse, Response},
        routing::get,
        Router,
    };
-    pub use errors_axum::{fallback::*, landing::App};
-    pub use leptos::{logging::log, *};
+    use errors_axum::landing::shell;
+    pub use errors_axum::landing::App;
+    use leptos::{config::LeptosOptions, context::provide_context};
    pub use leptos_axum::{generate_route_list, LeptosRoutes};

    // This custom handler lets us provide Axum State via context
@@ -19,11 +21,10 @@ mod ssr_imports {
        req: Request<AxumBody>,
    ) -> Response {
        let handler = leptos_axum::render_app_to_stream_with_context(
-            options.clone(),
            move || {
                provide_context(id.clone());
            },
-            App,
+            move || shell(options.clone()),
        );
        handler(req).await.into_response()
    }
@@ -32,18 +33,12 @@ mod ssr_imports {
 #[cfg(feature = "ssr")]
 #[tokio::main]
 async fn main() {
+    use errors_axum::landing::shell;
+    use leptos::config::get_configuration;
    use ssr_imports::*;

-    simple_logger::init_with_level(log::Level::Debug)
-        .expect("couldn't initialize logging");
-
-    // Explicit server function registration is no longer required
-    // on the main branch. On 0.3.0 and earlier, uncomment the lines
-    // below to register the server functions.
-    // _ = CauseInternalServerError::register();
-
    // Setting this to None means we'll be using cargo-leptos and its env vars
-    let conf = get_configuration(None).await.unwrap();
+    let conf = get_configuration(None).unwrap();
    let leptos_options = conf.leptos_options;
    let addr = leptos_options.site_addr;
    let routes = generate_route_list(App);
@@ -51,13 +46,16 @@ async fn main() {
    // build our application with a route
    let app = Router::new()
        .route("/special/:id", get(custom_handler))
-        .leptos_routes(&leptos_options, routes, App)
-        .fallback(file_and_error_handler)
+        .leptos_routes(&leptos_options, routes, {
+            let leptos_options = leptos_options.clone();
+            move || shell(leptos_options.clone())
+        })
+        .fallback(leptos_axum::file_and_error_handler(shell))
        .with_state(leptos_options);

    // run our app with hyper
    // `axum::Server` is a re-export of `hyper::Server`
-    log!("listening on http://{}", &addr);
+    println!("listening on http://{}", &addr);
    let listener = tokio::net::TcpListener::bind(&addr).await.unwrap();
    axum::serve(listener, app.into_make_service())
        .await
--- a/examples/fetch/Cargo.toml
+++ b/examples/fetch/Cargo.toml
@@ -8,13 +8,17 @@ codegen-units = 1
 lto = true

 [dependencies]
-leptos = { path = "../../leptos", features = ["csr"] }
+leptos = { path = "../../leptos", features = ["csr", "tracing"] }
 reqwasm = "0.5"
+gloo-timers = { version = "0.3", features = ["futures"] }
 serde = { version = "1", features = ["derive"] }
 log = "0.4"
 console_log = "1"
 console_error_panic_hook = "0.1"
 thiserror = "1"
+tracing = "0.1"
+tracing-subscriber = "0.3"
+tracing-subscriber-wasm = "0.1"

 [dev-dependencies]
 wasm-bindgen-test = "0.3"
--- a/examples/fetch/src/lib.rs
+++ b/examples/fetch/src/lib.rs
@@ -1,4 +1,5 @@
-use leptos::{error::Result, *};
+use leptos::prelude::*;
+use leptos::tachys::html::style::style;
 use serde::{Deserialize, Serialize};
 use thiserror::Error;

@@ -17,6 +18,7 @@ type CatCount = usize;

 async fn fetch_cats(count: CatCount) -> Result<Vec<String>> {
    if count > 0 {
+        gloo_timers::future::TimeoutFuture::new(1000).await;
        // make the request
        let res = reqwasm::http::Request::get(&format!(
            "https://api.thecatapi.com/v1/images/search?limit={count}",
@@ -33,26 +35,26 @@ async fn fetch_cats(count: CatCount) -> Result<Vec<String>> {
        .collect::<Vec<_>>();
        Ok(res)
    } else {
-        Err(CatError::NonZeroCats.into())
+        Err(CatError::NonZeroCats)?
    }
 }

 pub fn fetch_example() -> impl IntoView {
-    let (cat_count, set_cat_count) = create_signal::<CatCount>(0);
+    let (cat_count, set_cat_count) = signal::<CatCount>(1);

-    // we use local_resource here because
-    // 1) our error type isn't serializable/deserializable
-    // 2) we're not doing server-side rendering in this example anyway
-    //    (during SSR, create_resource will begin loading on the server and resolve on the client)
-    let cats = create_local_resource(move || cat_count.get(), fetch_cats);
+    // we use new_unsync here because the reqwasm request type isn't Send
+    // if we were doing SSR, then
+    // 1) we'd want to use a Resource, so the data would be serialized to the client
+    // 2) we'd need to make sure there was a thread-local spawner set up
+    let cats = AsyncDerived::new_unsync(move || fetch_cats(cat_count.get()));

-    let fallback = move |errors: RwSignal<Errors>| {
+    let fallback = move |errors: ArcRwSignal<Errors>| {
        let error_list = move || {
            errors.with(|errors| {
                errors
                    .iter()
                    .map(|(_, e)| view! { <li>{e.to_string()}</li> })
-                    .collect_view()
+                    .collect::<Vec<_>>()
            })
        };

@@ -64,17 +66,7 @@ pub fn fetch_example() -> impl IntoView {
        }
    };

-    // the renderer can handle Option<_> and Result<_> states
-    // by displaying nothing for None if the resource is still loading
-    // and by using the ErrorBoundary fallback to catch Err(_)
-    // so we'll just use `.and_then()` to map over the happy path
-    let cats_view = move || {
-        cats.and_then(|data| {
-            data.iter()
-                .map(|s| view! { <p><img src={s}/></p> })
-                .collect_view()
-        })
-    };
+    let spreadable = style(("background-color", "AliceBlue"));

    view! {
        <div>
@@ -83,19 +75,32 @@ pub fn fetch_example() -> impl IntoView {
                <input
                    type="number"
                    prop:value=move || cat_count.get().to_string()
-                    on:input=move |ev| {
-                        let val = event_target_value(&ev).parse::<CatCount>().unwrap_or(0);
+                    on:input:target=move |ev| {
+                        let val = ev.target().value().parse::<CatCount>().unwrap_or(0);
                        set_cat_count.set(val);
                    }
                />
+
            </label>
-            <Transition fallback=move || {
-                view! { <div>"Loading (Suspense Fallback)..."</div> }
-            }>
+            <Transition fallback=|| view! { <div>"Loading..."</div> } {..spreadable}>
                <ErrorBoundary fallback>
-                <div>
-                    {cats_view}
-                </div>
+                    <ul>
+                        {move || Suspend(async move {
+                            cats.await
+                                .map(|cats| {
+                                    cats.iter()
+                                        .map(|s| {
+                                            view! {
+                                                <li>
+                                                    <img src=s.clone()/>
+                                                </li>
+                                            }
+                                        })
+                                        .collect::<Vec<_>>()
+                                })
+                        })}
+
+                    </ul>
                </ErrorBoundary>
            </Transition>
        </div>
--- a/examples/fetch/src/main.rs
+++ b/examples/fetch/src/main.rs
@@ -1,8 +1,21 @@
 use fetch::fetch_example;
-use leptos::*;
+use leptos::prelude::*;

 pub fn main() {
-    _ = console_log::init_with_level(log::Level::Debug);
+    use tracing_subscriber::fmt;
+    use tracing_subscriber_wasm::MakeConsoleWriter;
+
+    fmt()
+        .with_writer(
+            // To avoide trace events in the browser from showing their
+            // JS backtrace, which is very annoying, in my opinion
+            MakeConsoleWriter::default()
+                .map_trace_level_to(tracing::Level::DEBUG),
+        )
+        // For some reason, if we don't do this in the browser, we get
+        // a runtime error.
+        .without_time()
+        .init();
    console_error_panic_hook::set_once();
    mount_to_body(fetch_example)
 }
--- a/examples/gtk/Cargo.toml
+++ b/examples/gtk/Cargo.toml
@@ -5,4 +5,14 @@ edition = "2021"

 [dependencies]
 leptos = { path = "../../leptos", features = ["csr"] }
-gtk = { version = "0.5.0", package = "gtk4" }
+throw_error = { path = "../../any_error/" }
+any_spawner = { path = "../../any_spawner/" }
+next_tuple = { path = "../../next_tuple/" }
+gtk = { version = "0.8.0", package = "gtk4", optional = true }
+paste = "1.0.14"
+
+console_error_panic_hook = { version = "0.1", optional = true }
+
+[features]
+gtk = ["dep:gtk", "any_spawner/glib"]
+wasm = ["any_spawner/wasm-bindgen", "dep:console_error_panic_hook"]
--- a/examples/gtk/index.html
+++ b/examples/gtk/index.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta name="color-scheme" content="dark">
+		<link rel="css" href="style.css" data-trunk>
+	</head>
+	<body></body>
+</html>
--- a/examples/gtk/src/leptos_gtk.rs
+++ b/examples/gtk/src/leptos_gtk.rs
@@ -0,0 +1,633 @@
+use self::properties::Connect;
+use gtk::{
+    ffi::GtkWidget,
+    glib::{
+        object::{IsA, IsClass, ObjectExt},
+        Object, Value,
+    },
+    prelude::{Cast, WidgetExt},
+    Label, Orientation, Widget,
+};
+use leptos::{
+    reactive_graph::effect::RenderEffect,
+    tachys::{
+        renderer::{CastFrom, Renderer},
+        view::{Mountable, Render},
+    },
+};
+use next_tuple::NextTuple;
+use std::{borrow::Cow, marker::PhantomData};
+
+#[derive(Debug)]
+pub struct LeptosGtk;
+
+#[derive(Debug, Clone)]
+pub struct Element(pub Widget);
+
+impl Element {
+    pub fn remove(&self) {
+        self.0.unparent();
+    }
+}
+
+#[derive(Debug, Clone)]
+pub struct Text(pub Element);
+
+impl<T> From<T> for Element
+where
+    T: Into<Widget>,
+{
+    fn from(value: T) -> Self {
+        Element(value.into())
+    }
+}
+
+impl Mountable<LeptosGtk> for Element {
+    fn unmount(&mut self) {
+        self.remove()
+    }
+
+    fn mount(
+        &mut self,
+        parent: &<LeptosGtk as Renderer>::Element,
+        marker: Option<&<LeptosGtk as Renderer>::Node>,
+    ) {
+        self.0
+            .insert_before(&parent.0, marker.as_ref().map(|m| &m.0));
+    }
+
+    fn insert_before_this(&self, 
+        child: &mut dyn Mountable<LeptosGtk>,
+    ) -> bool {
+        child.mount(parent, Some(self.as_ref()));
+        true
+    }
+}
+
+impl Mountable<LeptosGtk> for Text {
+    fn unmount(&mut self) {
+        self.0.remove()
+    }
+
+    fn mount(
+        &mut self,
+        parent: &<LeptosGtk as Renderer>::Element,
+        marker: Option<&<LeptosGtk as Renderer>::Node>,
+    ) {
+        self.0
+             .0
+            .insert_before(&parent.0, marker.as_ref().map(|m| &m.0));
+    }
+
+    fn insert_before_this(&self, 
+        child: &mut dyn Mountable<LeptosGtk>,
+    ) -> bool {
+        child.mount(parent, Some(self.as_ref()));
+        true
+    }
+}
+
+impl CastFrom<Element> for Element {
+    fn cast_from(source: Element) -> Option<Self> {
+        Some(source)
+    }
+}
+
+impl CastFrom<Element> for Text {
+    fn cast_from(source: Element) -> Option<Self> {
+        source
+            .0
+            .downcast::<Label>()
+            .ok()
+            .map(|n| Text(Element::from(n)))
+    }
+}
+
+impl AsRef<Element> for Element {
+    fn as_ref(&self) -> &Element {
+        self
+    }
+}
+
+impl AsRef<Element> for Text {
+    fn as_ref(&self) -> &Element {
+        &self.0
+    }
+}
+
+impl Renderer for LeptosGtk {
+    type Node = Element;
+    type Element = Element;
+    type Text = Text;
+    type Placeholder = Element;
+
+    fn intern(text: &str) -> &str {
+        text
+    }
+
+    fn create_text_node(text: &str) -> Self::Text {
+        Text(Element::from(Label::new(Some(text))))
+    }
+
+    fn create_placeholder() -> Self::Placeholder {
+        let label = Label::new(None);
+        label.set_visible(false);
+        Element::from(label)
+    }
+
+    fn set_text(node: &Self::Text, text: &str) {
+        let node_as_text = node.0 .0.downcast_ref::<Label>().unwrap();
+        node_as_text.set_label(text);
+    }
+
+    fn set_attribute(node: &Self::Element, name: &str, value: &str) {
+        node.0.set_property(name, value);
+    }
+
+    fn remove_attribute(node: &Self::Element, name: &str) {
+        node.0.set_property(name, None::<&str>);
+    }
+
+    fn insert_node(
+        parent: &Self::Element,
+        new_child: &Self::Node,
+        marker: Option<&Self::Node>,
+    ) {
+        new_child
+            .0
+            .insert_before(&parent.0, marker.as_ref().map(|n| &n.0));
+    }
+
+    fn remove_node(
+        parent: &Self::Element,
+        child: &Self::Node,
+    ) -> Option<Self::Node> {
+        todo!()
+    }
+
+    fn remove(node: &Self::Node) {
+        todo!()
+    }
+
+    fn get_parent(node: &Self::Node) -> Option<Self::Node> {
+        node.0.parent().map(Element::from)
+    }
+
+    fn first_child(node: &Self::Node) -> Option<Self::Node> {
+        todo!()
+    }
+
+    fn next_sibling(node: &Self::Node) -> Option<Self::Node> {
+        todo!()
+    }
+
+    fn log_node(node: &Self::Node) {
+        todo!()
+    }
+
+    fn clear_children(parent: &Self::Element) {
+        todo!()
+    }
+}
+
+pub fn root<Chil>(children: Chil) -> (Widget, impl Mountable<LeptosGtk>)
+where
+    Chil: Render<LeptosGtk>,
+{
+    let state = r#box()
+        .orientation(Orientation::Vertical)
+        .spacing(12)
+        .child(children)
+        .build();
+    (state.as_widget().clone(), state)
+}
+
+pub trait WidgetClass {
+    type Widget: Into<Widget> + IsA<Object> + IsClass;
+}
+
+pub struct LGtkWidget<Widg, Props, Chil> {
+    widget: PhantomData<Widg>,
+    properties: Props,
+    children: Chil,
+}
+
+impl<Widg, Props, Chil> LGtkWidget<Widg, Props, Chil>
+where
+    Widg: WidgetClass,
+    Chil: NextTuple,
+{
+    pub fn child<T>(
+        self,
+        child: T,
+    ) -> LGtkWidget<Widg, Props, Chil::Output<T>> {
+        let LGtkWidget {
+            widget,
+            properties,
+            children,
+        } = self;
+        LGtkWidget {
+            widget,
+            properties,
+            children: children.next_tuple(child),
+        }
+    }
+}
+impl<Widg, Props, Chil> LGtkWidget<Widg, Props, Chil>
+where
+    Widg: WidgetClass,
+    Props: NextTuple,
+    Chil: Render<LeptosGtk>,
+{
+    pub fn connect<F>(
+        self,
+        signal_name: &'static str,
+        callback: F,
+    ) -> LGtkWidget<Widg, Props::Output<Connect<F>>, Chil>
+    where
+        F: Fn(&[Value]) -> Option<Value> + Send + Sync + 'static,
+    {
+        let LGtkWidget {
+            widget,
+            properties,
+            children,
+        } = self;
+        LGtkWidget {
+            widget,
+            properties: properties.next_tuple(Connect {
+                signal_name,
+                callback,
+            }),
+            children,
+        }
+    }
+}
+
+pub struct LGtkWidgetState<Widg, Props, Chil>
+where
+    Chil: Render<LeptosGtk>,
+    Props: Property,
+    Widg: WidgetClass,
+{
+    ty: PhantomData<Widg>,
+    widget: Element,
+    properties: Props::State,
+    children: Chil::State,
+}
+
+impl<Widg, Props, Chil> LGtkWidgetState<Widg, Props, Chil>
+where
+    Chil: Render<LeptosGtk>,
+    Props: Property,
+    Widg: WidgetClass,
+{
+    pub fn as_widget(&self) -> &Widget {
+        &self.widget.0
+    }
+}
+
+impl<Widg, Props, Chil> Render<LeptosGtk> for LGtkWidget<Widg, Props, Chil>
+where
+    Widg: WidgetClass,
+    Props: Property,
+    Chil: Render<LeptosGtk>,
+{
+    type State = LGtkWidgetState<Widg, Props, Chil>;
+
+    fn build(self) -> Self::State {
+        let widget = Object::new::<Widg::Widget>();
+        let widget = Element::from(widget);
+        let properties = self.properties.build(&widget);
+        let mut children = self.children.build();
+        children.mount(&widget, None);
+        LGtkWidgetState {
+            ty: PhantomData,
+            widget,
+            properties,
+            children,
+        }
+    }
+
+    fn rebuild(self, state: &mut Self::State) {
+        self.properties
+            .rebuild(&state.widget, &mut state.properties);
+        self.children.rebuild(&mut state.children);
+    }
+}
+
+impl<Widg, Props, Chil> Mountable<LeptosGtk>
+    for LGtkWidgetState<Widg, Props, Chil>
+where
+    Widg: WidgetClass,
+    Props: Property,
+    Chil: Render<LeptosGtk>,
+{
+    fn unmount(&mut self) {
+        self.children.unmount();
+        self.widget.remove();
+    }
+
+    fn mount(
+        &mut self,
+        parent: &<LeptosGtk as Renderer>::Element,
+        marker: Option<&<LeptosGtk as Renderer>::Node>,
+    ) {
+        println!("mounting {}", std::any::type_name::<Widg>());
+        self.children.mount(&self.widget, None);
+        LeptosGtk::insert_node(parent, &self.widget, marker);
+    }
+
+    fn insert_before_this(&self, 
+        child: &mut dyn Mountable<LeptosGtk>,
+    ) -> bool {
+        child.mount(parent, Some(self.widget.as_ref()));
+        true
+    }
+}
+
+pub trait Property {
+    type State;
+
+    fn build(self, element: &Element) -> Self::State;
+
+    fn rebuild(self, element: &Element, state: &mut Self::State);
+}
+
+impl<T, F> Property for F
+where
+    T: Property,
+    T::State: 'static,
+    F: Fn() -> T + 'static,
+{
+    type State = RenderEffect<T::State>;
+
+    fn build(self, widget: &Element) -> Self::State {
+        let widget = widget.clone();
+        RenderEffect::new(move |prev| {
+            let value = self();
+            if let Some(mut prev) = prev {
+                value.rebuild(&widget, &mut prev);
+                prev
+            } else {
+                value.build(&widget)
+            }
+        })
+    }
+
+    fn rebuild(self, widget: &Element, state: &mut Self::State) {}
+}
+
+pub fn button() -> LGtkWidget<gtk::Button, (), ()> {
+    LGtkWidget {
+        widget: PhantomData,
+        properties: (),
+        children: (),
+    }
+}
+
+pub fn r#box() -> LGtkWidget<gtk::Box, (), ()> {
+    LGtkWidget {
+        widget: PhantomData,
+        properties: (),
+        children: (),
+    }
+}
+
+mod widgets {
+    use super::WidgetClass;
+
+    impl WidgetClass for gtk::Button {
+        type Widget = Self;
+    }
+
+    impl WidgetClass for gtk::Box {
+        type Widget = Self;
+    }
+}
+
+pub mod properties {
+    use super::{
+        Element, LGtkWidget, LGtkWidgetState, LeptosGtk, Property, WidgetClass,
+    };
+    use gtk::glib::{object::ObjectExt, Value};
+    use leptos::tachys::{renderer::Renderer, view::Render};
+    use next_tuple::NextTuple;
+
+    pub struct Connect<F>
+    where
+        F: Fn(&[Value]) -> Option<Value> + Send + Sync + 'static,
+    {
+        pub signal_name: &'static str,
+        pub callback: F,
+    }
+
+    impl<F> Property for Connect<F>
+    where
+        F: Fn(&[Value]) -> Option<Value> + Send + Sync + 'static,
+    {
+        type State = ();
+
+        fn build(self, element: &Element) -> Self::State {
+            element.0.connect(self.signal_name, false, self.callback);
+        }
+
+        fn rebuild(self, element: &Element, state: &mut Self::State) {}
+    }
+
+    /* examples for macro */
+    pub struct Orientation {
+        value: gtk::Orientation,
+    }
+
+    pub struct OrientationState {
+        value: gtk::Orientation,
+    }
+
+    impl Property for Orientation {
+        type State = OrientationState;
+
+        fn build(self, element: &Element) -> Self::State {
+            element.0.set_property("orientation", self.value);
+            OrientationState { value: self.value }
+        }
+
+        fn rebuild(self, element: &Element, state: &mut Self::State) {
+            if self.value != state.value {
+                element.0.set_property("orientation", self.value);
+                state.value = self.value;
+            }
+        }
+    }
+
+    impl<Widg, Props, Chil> LGtkWidget<Widg, Props, Chil>
+    where
+        Widg: WidgetClass,
+        Props: NextTuple,
+        Chil: Render<LeptosGtk>,
+    {
+        pub fn orientation(
+            self,
+            value: impl Into<gtk::Orientation>,
+        ) -> LGtkWidget<Widg, Props::Output<Orientation>, Chil> {
+            let LGtkWidget {
+                widget,
+                properties,
+                children,
+            } = self;
+            LGtkWidget {
+                widget,
+                properties: properties.next_tuple(Orientation {
+                    value: value.into(),
+                }),
+                children,
+            }
+        }
+    }
+
+    pub struct Spacing {
+        value: i32,
+    }
+
+    pub struct SpacingState {
+        value: i32,
+    }
+
+    impl Property for Spacing {
+        type State = SpacingState;
+
+        fn build(self, element: &Element) -> Self::State {
+            element.0.set_property("spacing", self.value);
+            SpacingState { value: self.value }
+        }
+
+        fn rebuild(self, element: &Element, state: &mut Self::State) {
+            if self.value != state.value {
+                element.0.set_property("spacing", self.value);
+                state.value = self.value;
+            }
+        }
+    }
+
+    impl<Widg, Props, Chil> LGtkWidget<Widg, Props, Chil>
+    where
+        Widg: WidgetClass,
+        Props: NextTuple,
+        Chil: Render<LeptosGtk>,
+    {
+        pub fn spacing(
+            self,
+            value: impl Into<i32>,
+        ) -> LGtkWidget<Widg, Props::Output<Spacing>, Chil> {
+            let LGtkWidget {
+                widget,
+                properties,
+                children,
+            } = self;
+            LGtkWidget {
+                widget,
+                properties: properties.next_tuple(Spacing {
+                    value: value.into(),
+                }),
+                children,
+            }
+        }
+    }
+
+    /* end examples for properties macro */
+
+    pub struct Label {
+        value: String,
+    }
+
+    impl Label {
+        pub fn new(value: impl Into<String>) -> Self {
+            Self {
+                value: value.into(),
+            }
+        }
+    }
+
+    pub struct LabelState {
+        value: String,
+    }
+
+    impl Property for Label {
+        type State = LabelState;
+
+        fn build(self, element: &Element) -> Self::State {
+            LeptosGtk::set_attribute(element, "label", &self.value);
+            LabelState { value: self.value }
+        }
+
+        fn rebuild(self, element: &Element, state: &mut Self::State) {
+            todo!()
+        }
+    }
+
+    impl Property for () {
+        type State = ();
+
+        fn build(self, _element: &Element) -> Self::State {}
+
+        fn rebuild(self, _element: &Element, _state: &mut Self::State) {}
+    }
+
+    macro_rules! tuples {
+        ($($ty:ident),* $(,)?) => {
+            impl<$($ty,)*> Property for ($($ty,)*)
+                where $($ty: Property,)*
+            {
+                type State = ($($ty::State,)*);
+
+                fn build(self, element: &Element) -> Self::State {
+                    #[allow(non_snake_case)]
+                    let ($($ty,)*) = self;
+                    ($($ty.build(element),)*)
+                }
+
+                fn rebuild(self, element: &Element, state: &mut Self::State) {
+                    paste::paste! {
+                        #[allow(non_snake_case)]
+                        let ($($ty,)*) = self;
+                        #[allow(non_snake_case)]
+                        let ($([<state_ $ty:lower>],)*) = state;
+                        $($ty.rebuild(element, [<state_ $ty:lower>]));*
+                    }
+                }
+            }
+        }
+    }
+
+    tuples!(A);
+    tuples!(A, B);
+    tuples!(A, B, C);
+    tuples!(A, B, C, D);
+    tuples!(A, B, C, D, E);
+    tuples!(A, B, C, D, E, F);
+    tuples!(A, B, C, D, E, F, G);
+    tuples!(A, B, C, D, E, F, G, H);
+    tuples!(A, B, C, D, E, F, G, H, I);
+    tuples!(A, B, C, D, E, F, G, H, I, J);
+    tuples!(A, B, C, D, E, F, G, H, I, J, K);
+    tuples!(A, B, C, D, E, F, G, H, I, J, K, L);
+    tuples!(A, B, C, D, E, F, G, H, I, J, K, L, M);
+    tuples!(A, B, C, D, E, F, G, H, I, J, K, L, M, N);
+    tuples!(A, B, C, D, E, F, G, H, I, J, K, L, M, N, O);
+    tuples!(A, B, C, D, E, F, G, H, I, J, K, L, M, N, O, P);
+    tuples!(A, B, C, D, E, F, G, H, I, J, K, L, M, N, O, P, Q);
+    tuples!(A, B, C, D, E, F, G, H, I, J, K, L, M, N, O, P, Q, R);
+    tuples!(A, B, C, D, E, F, G, H, I, J, K, L, M, N, O, P, Q, R, S);
+    tuples!(A, B, C, D, E, F, G, H, I, J, K, L, M, N, O, P, Q, R, S, T);
+    tuples!(A, B, C, D, E, F, G, H, I, J, K, L, M, N, O, P, Q, R, S, T, U);
+    tuples!(A, B, C, D, E, F, G, H, I, J, K, L, M, N, O, P, Q, R, S, T, U, V);
+    tuples!(
+        A, B, C, D, E, F, G, H, I, J, K, L, M, N, O, P, Q, R, S, T, U, V, W
+    );
+    tuples!(
+        A, B, C, D, E, F, G, H, I, J, K, L, M, N, O, P, Q, R, S, T, U, V, W, X
+    );
+    tuples!(
+        A, B, C, D, E, F, G, H, I, J, K, L, M, N, O, P, Q, R, S, T, U, V, W, X,
+        Y
+    );
+}
--- a/examples/gtk/src/main.rs
+++ b/examples/gtk/src/main.rs
@@ -1,59 +1,175 @@
-use gtk::{prelude::*, Application, ApplicationWindow, Button};
-use leptos::*;
+#[cfg(feature = "gtk")]
+use gtk::{
+    glib::Value, prelude::*, Application, ApplicationWindow, Orientation,
+    Widget,
+};
+#[cfg(feature = "wasm")]
+use leptos::tachys::{dom::body, html::element, html::event as ev};
+use leptos::{
+    logging,
+    prelude::*,
+    reactive_graph::{effect::Effect, owner::Owner, signal::RwSignal},
+    Executor, For, ForProps,
+};
+#[cfg(feature = "gtk")]
+use leptos_gtk::{Element, LGtkWidget, LeptosGtk};
+use std::{mem, thread, time::Duration};
+#[cfg(feature = "gtk")]
+mod leptos_gtk;

 const APP_ID: &str = "dev.leptos.Counter";

 // Basic GTK app setup from https://gtk-rs.org/gtk4-rs/stable/latest/book/hello_world.html
 fn main() {
-    let _ = create_runtime();
-    // Create a new application
-    let app = Application::builder().application_id(APP_ID).build();
+    // use the glib event loop to power the reactive system
+    #[cfg(feature = "gtk")]
+    {
+        _ = Executor::init_glib();
+        let app = Application::builder().application_id(APP_ID).build();

-    // Connect to "activate" signal of `app`
-    app.connect_activate(build_ui);
+        app.connect_startup(|_| load_css());

-    // Run the application
-    app.run();
+        app.connect_activate(|app| {
+            // Connect to "activate" signal of `app`
+            let owner = Owner::new();
+            let view = owner.with(ui);
+            let (root, state) = leptos_gtk::root(view);
+
+            let window = ApplicationWindow::builder()
+                .application(app)
+                .title("TachyGTK")
+                .child(&root)
+                .build();
+            // Present window
+            window.present();
+            mem::forget((owner, state));
+        });
+
+        app.run();
+    }
+
+    #[cfg(all(feature = "wasm", not(feature = "gtk")))]
+    {
+        console_error_panic_hook::set_once();
+        _ = Executor::init_wasm_bindgen();
+        let owner = Owner::new();
+        let view = owner.with(ui);
+        let mut state = view.build();
+        state.mount(&body().into(), None);
+        mem::forget((owner, state));
+    }
 }

-fn build_ui(app: &Application) {
-    let button = counter_button();
+#[cfg(feature = "gtk")]
+type Rndr = LeptosGtk;
+#[cfg(all(feature = "wasm", not(feature = "gtk")))]
+type Rndr = Dom;

-    // Create a window and set the title
-    let window = ApplicationWindow::builder()
-        .application(app)
-        .title("Leptos-GTK")
-        .child(&button)
-        .build();
+fn ui() -> impl Render<Rndr> {
+    let value = RwSignal::new(0);
+    let rows = RwSignal::new(vec![1, 2, 3, 4, 5]);

-    // Present window
-    window.present();
-}
-
-fn counter_button() -> Button {
-    let (value, set_value) = create_signal(0);
-
-    // Create a button with label and margins
-    let button = Button::builder()
-        .label("Count: ")
-        .margin_top(12)
-        .margin_bottom(12)
-        .margin_start(12)
-        .margin_end(12)
-        .build();
-
-    // Connect to "clicked" signal of `button`
-    button.connect_clicked(move |_| {
-        // Set the label to "Hello World!" after the button has been clicked on
-        set_value.update(|value| *value += 1);
+    Effect::new(move |_| {
+        logging::log!("value = {}", value.get());
    });

-    create_effect({
-        let button = button.clone();
-        move |_| {
-            button.set_label(&format!("Count: {}", value.get()));
-        }
+    // just an example of multithreaded reactivity
+    #[cfg(feature = "gtk")]
+    thread::spawn(move || loop {
+        thread::sleep(Duration::from_millis(250));
+        value.update(|n| *n += 1);
    });

-    button
+    vstack((
+        hstack((
+            button("-1", move || value.update(|n| *n -= 1)),
+            move || value.get().to_string(),
+            button("+1", move || value.update(|n| *n += 1)),
+        )),
+        button("Swap", move || {
+            rows.update(|items| {
+                items.swap(1, 3);
+            })
+        }),
+        hstack(For(ForProps::builder()
+            .each(move || rows.get())
+            .key(|k| *k)
+            .children(|v| v)
+            .build())),
+    ))
+}
+
+fn button(
+    label: impl Render<Rndr>,
+    callback: impl Fn() + Send + Sync + 'static,
+) -> impl Render<Rndr> {
+    #[cfg(feature = "gtk")]
+    {
+        leptos_gtk::button()
+            .child(label)
+            .connect("clicked", move |_| {
+                callback();
+                None
+            })
+    }
+    #[cfg(all(feature = "wasm", not(feature = "gtk")))]
+    {
+        element::button()
+            .on(ev::click, move |_| callback())
+            .child(label)
+    }
+}
+
+fn vstack(children: impl Render<Rndr>) -> impl Render<Rndr> {
+    #[cfg(feature = "gtk")]
+    {
+        leptos_gtk::r#box()
+            .orientation(Orientation::Vertical)
+            .spacing(12)
+            .child(children)
+    }
+    #[cfg(all(feature = "wasm", not(feature = "gtk")))]
+    {
+        element::div()
+            .style(("display", "flex"))
+            .style(("flex-direction", "column"))
+            .style(("align-items", "center"))
+            .style(("justify-content", "center"))
+            .style(("margin", "1rem"))
+            .child(children)
+    }
+}
+
+fn hstack(children: impl Render<Rndr>) -> impl Render<Rndr> {
+    #[cfg(feature = "gtk")]
+    {
+        leptos_gtk::r#box()
+            .orientation(Orientation::Horizontal)
+            .spacing(12)
+            .child(children)
+    }
+    #[cfg(all(feature = "wasm", not(feature = "gtk")))]
+    {
+        element::div()
+            .style(("display", "flex"))
+            .style(("align-items", "center"))
+            .style(("justify-content", "center"))
+            .style(("margin", "1rem"))
+            .child(children)
+    }
+}
+
+#[cfg(feature = "gtk")]
+fn load_css() {
+    use gtk::{gdk::Display, CssProvider};
+
+    let provider = CssProvider::new();
+    provider.load_from_path("style.css");
+
+    // Add the provider to the default screen
+    gtk::style_context_add_provider_for_display(
+        &Display::default().expect("Could not connect to a display."),
+        &provider,
+        gtk::STYLE_PROVIDER_PRIORITY_APPLICATION,
+    );
 }
--- a/examples/sso_auth_axum/sso.db
+++ b/examples/sso_auth_axum/sso.db
--- a/examples/hackernews/Cargo.toml
+++ b/examples/hackernews/Cargo.toml
@@ -8,6 +8,8 @@ crate-type = ["cdylib", "rlib"]

 [profile.release]
 codegen-units = 1
+opt-level = "z"
+panic = "abort"
 lto = true

 [dependencies]
@@ -23,21 +25,18 @@ log = "0.4"
 serde = { version = "1", features = ["derive"] }
 gloo-net = { version = "0.2", features = ["http"] }
 reqwest = { version = "0.11", features = ["json"] }
-tracing = "0.1"
-# openssl = { version = "0.10", features = ["v110"] }
 wasm-bindgen = "0.2"
 web-sys = { version = "0.3", features = ["AbortController", "AbortSignal"] }
+send_wrapper = "0.6.0"

 [features]
-csr = ["leptos/csr", "leptos_meta/csr", "leptos_router/csr"]
-hydrate = ["leptos/hydrate", "leptos_meta/hydrate", "leptos_router/hydrate"]
+csr = ["leptos/csr"]
+hydrate = ["leptos/hydrate"]
 ssr = [
 	"dep:actix-files",
 	"dep:actix-web",
 	"dep:leptos_actix",
 	"leptos/ssr",
-	"leptos_meta/ssr",
-	"leptos_router/ssr",
 ]

 [profile.wasm-release]
--- a/examples/hackernews/src/api.rs
+++ b/examples/hackernews/src/api.rs
@@ -1,4 +1,4 @@
-use leptos::Serializable;
+use serde::de::DeserializeOwned;
 use serde::{Deserialize, Serialize};

 pub fn story(path: &str) -> String {
@@ -10,46 +10,51 @@ pub fn user(path: &str) -> String {
 }

 #[cfg(not(feature = "ssr"))]
-pub async fn fetch_api<T>(path: &str) -> Option<T>
+pub fn fetch_api<T>(
+    path: &str,
+) -> impl std::future::Future<Output = Option<T>> + Send + '_
 where
-    T: Serializable,
+    T: Serialize + DeserializeOwned,
 {
-    let abort_controller = web_sys::AbortController::new().ok();
-    let abort_signal = abort_controller.as_ref().map(|a| a.signal());
+    use leptos::prelude::on_cleanup;
+    use send_wrapper::SendWrapper;

-    // abort in-flight requests if, e.g., we've navigated away from this page
-    leptos::on_cleanup(move || {
-        if let Some(abort_controller) = abort_controller {
-            abort_controller.abort()
-        }
-    });
+    SendWrapper::new(async move {
+        let abort_controller =
+            SendWrapper::new(web_sys::AbortController::new().ok());
+        let abort_signal = abort_controller.as_ref().map(|a| a.signal());

-    let json = gloo_net::http::Request::get(path)
-        .abort_signal(abort_signal.as_ref())
-        .send()
-        .await
-        .map_err(|e| log::error!("{e}"))
-        .ok()?
-        .text()
-        .await
-        .ok()?;
+        // abort in-flight requests if, e.g., we've navigated away from this page
+        on_cleanup(move || {
+            if let Some(abort_controller) = abort_controller.take() {
+                abort_controller.abort()
+            }
+        });

-    T::de(&json).ok()
+        gloo_net::http::Request::get(path)
+            .abort_signal(abort_signal.as_ref())
+            .send()
+            .await
+            .map_err(|e| log::error!("{e}"))
+            .ok()?
+            .json()
+            .await
+            .ok()
+    })
 }

 #[cfg(feature = "ssr")]
 pub async fn fetch_api<T>(path: &str) -> Option<T>
 where
-    T: Serializable,
+    T: Serialize + DeserializeOwned,
 {
-    let json = reqwest::get(path)
+    reqwest::get(path)
        .await
        .map_err(|e| log::error!("{e}"))
        .ok()?
-        .text()
+        .json()
        .await
-        .ok()?;
-    T::de(&json).map_err(|e| log::error!("{e}")).ok()
+        .ok()
 }

 #[derive(Debug, Deserialize, Serialize, PartialEq, Eq, Clone)]
--- a/examples/hackernews/src/lib.rs
+++ b/examples/hackernews/src/lib.rs
@@ -1,32 +1,37 @@
-use leptos::*;
-use leptos_meta::*;
-use leptos_router::*;
+use leptos::prelude::*;
 mod api;
 mod routes;
+use leptos_meta::{provide_meta_context, Link, Meta, Stylesheet};
+use leptos_router::{
+    components::{FlatRoutes, Route, Router, RoutingProgress},
+    ParamSegment, StaticSegment,
+};
 use routes::{nav::*, stories::*, story::*, users::*};
+use std::time::Duration;

 #[component]
 pub fn App() -> impl IntoView {
    provide_meta_context();
-    let (is_routing, set_is_routing) = create_signal(false);
+    let (is_routing, set_is_routing) = signal(false);

    view! {
        <Stylesheet id="leptos" href="/pkg/hackernews.css"/>
        <Link rel="shortcut icon" type_="image/ico" href="/favicon.ico"/>
        <Meta name="description" content="Leptos implementation of a HackerNews demo."/>
-        // adding `set_is_routing` causes the router to wait for async data to load on new pages
        <Router set_is_routing>
            // shows a progress bar while async data are loading
            <div class="routing-progress">
-                <RoutingProgress is_routing max_time=std::time::Duration::from_millis(250)/>
+                <RoutingProgress is_routing max_time=Duration::from_millis(250)/>
            </div>
            <Nav />
            <main>
-                <Routes>
-                    <Route path="users/:id" view=User/>
-                    <Route path="stories/:id" view=Story/>
-                    <Route path=":stories?" view=Stories/>
-                </Routes>
+                <FlatRoutes fallback=|| "Not found.">
+                    <Route path=(StaticSegment("users"), ParamSegment("id")) view=User/>
+                    <Route path=(StaticSegment("stories"), ParamSegment("id")) view=Story/>
+                    <Route path=ParamSegment("stories") view=Stories/>
+                    // TODO allow optional params without duplication
+                    <Route path=StaticSegment("") view=Stories/>
+                </FlatRoutes>
            </main>
        </Router>
    }
@@ -35,7 +40,6 @@ pub fn App() -> impl IntoView {
 #[cfg(feature = "hydrate")]
 #[wasm_bindgen::prelude::wasm_bindgen]
 pub fn hydrate() {
-    _ = console_log::init_with_level(log::Level::Debug);
    console_error_panic_hook::set_once();
-    leptos::mount_to_body(App);
+    leptos::mount::hydrate_body(App);
 }
--- a/examples/hackernews/src/main.rs
+++ b/examples/hackernews/src/main.rs
@@ -4,7 +4,6 @@ mod ssr_imports {
    pub use actix_files::Files;
    pub use actix_web::*;
    pub use hackernews::App;
-    pub use leptos_actix::{generate_route_list, LeptosRoutes};

    #[get("/style.css")]
    pub async fn css() -> impl Responder {
@@ -19,24 +18,44 @@ mod ssr_imports {
 #[cfg(feature = "ssr")]
 #[actix_web::main]
 async fn main() -> std::io::Result<()> {
-    use leptos::get_configuration;
+    use leptos::prelude::*;
+    use leptos_actix::{generate_route_list, LeptosRoutes};
+    use leptos_meta::MetaTags;
    use ssr_imports::*;

-    // Setting this to None means we'll be using cargo-leptos and its env vars.
-    let conf = get_configuration(None).await.unwrap();
-
+    let conf = get_configuration(None).unwrap();
    let addr = conf.leptos_options.site_addr;
-    // Generate the list of routes in your Leptos App
-    let routes = generate_route_list(App);

    HttpServer::new(move || {
+        // Generate the list of routes in your Leptos App
+        let routes = generate_route_list(App);
        let leptos_options = &conf.leptos_options;
        let site_root = &leptos_options.site_root;

        App::new()
            .service(css)
            .service(favicon)
-            .leptos_routes(leptos_options.to_owned(), routes.to_owned(), App)
+            .leptos_routes(routes, {
+                let leptos_options = leptos_options.clone();
+                move || {
+                    use leptos::prelude::*;
+
+                    view! {
+                        <!DOCTYPE html>
+                        <html lang="en">
+                            <head>
+                                <meta charset="utf-8"/>
+                                <meta name="viewport" content="width=device-width, initial-scale=1"/>
+                                <AutoReload options=leptos_options.clone() />
+                                <HydrationScripts options=leptos_options.clone()/>
+                                <MetaTags/>
+                            </head>
+                            <body>
+                                <App/>
+                            </body>
+                        </html>
+                    }
+            }})
            .service(Files::new("/", site_root))
        //.wrap(middleware::Compress::default())
    })
@@ -49,8 +68,6 @@ async fn main() -> std::io::Result<()> {
 #[cfg(not(feature = "ssr"))]
 fn main() {
    use hackernews::App;
-
-    _ = console_log::init_with_level(log::Level::Debug);
    console_error_panic_hook::set_once();
-    leptos::mount_to_body(App)
+    leptos::mount::mount_to_body(App)
 }
--- a/examples/hackernews/src/routes/nav.rs
+++ b/examples/hackernews/src/routes/nav.rs
@@ -1,5 +1,5 @@
-use leptos::{component, view, IntoView};
-use leptos_router::*;
+use leptos::prelude::*;
+use leptos_router::components::A;

 #[component]
 pub fn Nav() -> impl IntoView {
--- a/examples/hackernews/src/routes/stories.rs
+++ b/examples/hackernews/src/routes/stories.rs
@@ -1,6 +1,9 @@
 use crate::api;
-use leptos::*;
-use leptos_router::*;
+use leptos::{either::Either, prelude::*};
+use leptos_router::{
+    components::A,
+    hooks::{use_params_map, use_query_map},
+};

 fn category(from: &str) -> &'static str {
    match from {
@@ -18,47 +21,50 @@ pub fn Stories() -> impl IntoView {
    let params = use_params_map();
    let page = move || {
        query
-            .with(|q| q.get("page").and_then(|page| page.parse::<usize>().ok()))
+            .read()
+            .get("page")
+            .and_then(|page| page.parse::<usize>().ok())
            .unwrap_or(1)
    };
    let story_type = move || {
        params
-            .with(|p| p.get("stories").cloned())
+            .read()
+            .get("stories")
            .unwrap_or_else(|| "top".to_string())
    };
-    let stories = create_resource(
+    let stories = Resource::new(
        move || (page(), story_type()),
        move |(page, story_type)| async move {
            let path = format!("{}?page={}", category(&story_type), page);
            api::fetch_api::<Vec<api::Story>>(&api::story(&path)).await
        },
    );
-    let (pending, set_pending) = create_signal(false);
+    let (pending, set_pending) = signal(false);

-    let hide_more_link = move || {
-        stories.get().unwrap_or(None).unwrap_or_default().len() < 28
-            || pending.get()
-    };
+    let hide_more_link = move || match &*stories.read() {
+        Some(Some(stories)) => stories.len() < 28,
+        _ => true
+    } || pending.get();

    view! {
        <div class="news-view">
            <div class="news-list-nav">
                <span>
                    {move || if page() > 1 {
-                        view! {
+                        Either::Left(view! {
                            <a class="page-link"
                                href=move || format!("/{}?page={}", story_type(), page() - 1)
-                                attr:aria_label="Previous Page"
+                                aria-label="Previous Page"
                            >
                                "< prev"
                            </a>
-                        }.into_any()
+                        })
                    } else {
-                        view! {
+                        Either::Right(view! {
                            <span class="page-link disabled" aria-hidden="true">
                                "< prev"
                            </span>
-                        }.into_any()
+                        })
                    }}
                </span>
                <span>"page " {page}</span>
@@ -81,23 +87,19 @@ pub fn Stories() -> impl IntoView {
                        fallback=move || view! { <p>"Loading..."</p> }
                        set_pending
                    >
-                        {move || match stories.get() {
-                            None => None,
-                            Some(None) => Some(view! { <p>"Error loading stories."</p> }.into_any()),
-                            Some(Some(stories)) => {
-                                Some(view! {
-                                    <ul>
-                                        <For
-                                            each=move || stories.clone()
-                                            key=|story| story.id
-                                            let:story
-                                        >
-                                            <Story story/>
-                                        </For>
-                                    </ul>
-                                }.into_any())
-                            }
-                        }}
+                        <Show when=move || stories.read().as_ref().map(Option::is_none).unwrap_or(false)>
+                        >
+                            <p>"Error loading stories."</p>
+                        </Show>
+                        <ul>
+                            <For
+                                each=move || stories.get().unwrap_or_default().unwrap_or_default()
+                                key=|story| story.id
+                                let:story
+                            >
+                                <Story story/>
+                            </For>
+                        </ul>
                    </Transition>
                </div>
            </main>
@@ -112,23 +114,23 @@ fn Story(story: api::Story) -> impl IntoView {
            <span class="score">{story.points}</span>
            <span class="title">
                {if !story.url.starts_with("item?id=") {
-                    view! {
+                    Either::Left(view! {
                        <span>
                            <a href=story.url target="_blank" rel="noreferrer">
                                {story.title.clone()}
                            </a>
                            <span class="host">"("{story.domain}")"</span>
                        </span>
-                    }.into_view()
+                    })
                } else {
                    let title = story.title.clone();
-                    view! { <A href=format!("/stories/{}", story.id)>{title.clone()}</A> }.into_view()
+                    Either::Right(view! { <A href=format!("/stories/{}", story.id)>{title}</A> })
                }}
            </span>
            <br />
            <span class="meta">
                {if story.story_type != "job" {
-                    view! {
+                    Either::Left(view! {
                        <span>
                            {"by "}
                            {story.user.map(|user| view ! {  <A href=format!("/users/{user}")>{user.clone()}</A>})}
@@ -141,10 +143,10 @@ fn Story(story: api::Story) -> impl IntoView {
                                }}
                            </A>
                        </span>
-                    }.into_view()
+                    })
                } else {
                    let title = story.title.clone();
-                    view! { <A href=format!("/item/{}", story.id)>{title.clone()}</A> }.into_view()
+                    Either::Right(view! { <A href=format!("/item/{}", story.id)>{title}</A> })
                }}
            </span>
            {(story.story_type != "link").then(|| view! {
--- a/examples/hackernews/src/routes/story.rs
+++ b/examples/hackernews/src/routes/story.rs
@@ -1,13 +1,15 @@
 use crate::api;
-use leptos::*;
-use leptos_meta::*;
-use leptos_router::*;
+use leptos::either::Either;
+use leptos::prelude::*;
+use leptos_meta::Meta;
+use leptos_router::components::A;
+use leptos_router::hooks::use_params_map;

 #[component]
 pub fn Story() -> impl IntoView {
    let params = use_params_map();
-    let story = create_resource(
-        move || params.get().get("id").cloned().unwrap_or_default(),
+    let story = Resource::new(
+        move || params.read().get("id").unwrap_or_default(),
        move |id| async move {
            if id.is_empty() {
                None
@@ -17,19 +19,13 @@ pub fn Story() -> impl IntoView {
            }
        },
    );
-    let meta_description = move || {
-        story
-            .get()
-            .and_then(|story| story.map(|story| story.title))
-            .unwrap_or_else(|| "Loading story...".to_string())
-    };

-    view! {
-        <Suspense fallback=|| view! { "Loading..." }>
-            <Meta name="description" content=meta_description/>
-            {move || story.get().map(|story| match story {
-                None => view! {  <div class="item-view">"Error loading this story."</div> },
-                Some(story) => view! {
+    Suspense(SuspenseProps::builder().fallback(|| "Loading...").children(ToChildren::to_children(move || Suspend(async move {
+        match story.await.clone() {
+            None => Either::Left("Story not found."),
+            Some(story) => {
+                Either::Right(view! {
+                    <Meta name="description" content=story.title.clone()/>
                    <div class="item-view">
                        <div class="item-view-header">
                        <a href=story.url target="_blank">
@@ -46,32 +42,33 @@ pub fn Story() -> impl IntoView {
                        </p>})}
                        </div>
                        <div class="item-view-comments">
-                        <p class="item-view-comments-header">
-                            {if story.comments_count.unwrap_or_default() > 0 {
-                                format!("{} comments", story.comments_count.unwrap_or_default())
-                            } else {
-                                "No comments yet.".into()
-                            }}
-                        </p>
-                        <ul class="comment-children">
-                            <For
-                                each=move || story.comments.clone().unwrap_or_default()
-                                key=|comment| comment.id
-                                let:comment
-                            >
-                                <Comment comment />
-                            </For>
-                        </ul>
+                            <p class="item-view-comments-header">
+                                {if story.comments_count.unwrap_or_default() > 0 {
+                                    format!("{} comments", story.comments_count.unwrap_or_default())
+                                } else {
+                                    "No comments yet.".into()
+                                }}
+                            </p>
+                            <ul class="comment-children">
+                                <For
+                                    each=move || story.comments.clone().unwrap_or_default()
+                                    key=|comment| comment.id
+                                    let:comment
+                                >
+                                    <Comment comment />
+                                </For>
+                            </ul>
+                        </div>
                    </div>
-                </div>
-            }})}
-        </Suspense>
-    }
+                })
+            }
+        }
+    }))).build())
 }

 #[component]
 pub fn Comment(comment: api::Comment) -> impl IntoView {
-    let (open, set_open) = create_signal(true);
+    let (open, set_open) = signal(true);

    view! {
        <li class="comment">
@@ -113,7 +110,7 @@ pub fn Comment(comment: api::Comment) -> impl IntoView {
            }
        })}
        </li>
-    }
+    }.into_any()
 }

 fn pluralize(n: usize) -> &'static str {
--- a/examples/hackernews/src/routes/users.rs
+++ b/examples/hackernews/src/routes/users.rs
@@ -1,12 +1,13 @@
 use crate::api::{self, User};
-use leptos::*;
-use leptos_router::*;
+use leptos::server::Resource;
+use leptos::{either::Either, prelude::*};
+use leptos_router::hooks::use_params_map;

 #[component]
 pub fn User() -> impl IntoView {
    let params = use_params_map();
-    let user = create_resource(
-        move || params.get().get("id").cloned().unwrap_or_default(),
+    let user = Resource::new(
+        move || params.read().get("id").unwrap_or_default(),
        move |id| async move {
            if id.is_empty() {
                None
@@ -18,11 +19,11 @@ pub fn User() -> impl IntoView {
    view! {
        <div class="user-view">
            <Suspense fallback=|| view! { "Loading..." }>
-                {move || user.get().map(|user| match user {
-                    None => view! {  <h1>"User not found."</h1> }.into_view(),
-                    Some(user) => view! {
+                {move || Suspend(async move { match user.await.clone() {
+                    None => Either::Left(view! {  <h1>"User not found."</h1> }),
+                    Some(user) => Either::Right(view! {
                        <div>
-                            <h1>"User: " {&user.id}</h1>
+                            <h1>"User: " {user.id.clone()}</h1>
                            <ul class="meta">
                                <li>
                                    <span class="label">"Created: "</span> {user.created}
@@ -38,8 +39,8 @@ pub fn User() -> impl IntoView {
                                <a href=format!("https://news.ycombinator.com/threads?id={}", user.id)>"comments"</a>
                            </p>
                        </div>
-                    }.into_view()
-                })}
+                    })
+                }})}
            </Suspense>
        </div>
    }
--- a/examples/hackernews_axum/Cargo.toml
+++ b/examples/hackernews_axum/Cargo.toml
@@ -11,14 +11,11 @@ codegen-units = 1
 lto = true

 [dependencies]
-console_log = "1.0"
 console_error_panic_hook = "0.1"
 leptos = { path = "../../leptos" }
 leptos_axum = { path = "../../integrations/axum", optional = true }
 leptos_meta = { path = "../../meta" }
 leptos_router = { path = "../../router" }
-log = "0.4"
-simple_logger = "4.0"
 serde = { version = "1.0", features = ["derive"] }
 tracing = "0.1"
 gloo-net = { version = "0.4", features = ["http"] }
@@ -30,11 +27,12 @@ tokio = { version = "1", features = ["full"], optional = true }
 http = { version = "1.0", optional = true }
 web-sys = { version = "0.3", features = ["AbortController", "AbortSignal"] }
 wasm-bindgen = "0.2"
+send_wrapper = { version = "0.6.0", features = ["futures"] }

 [features]
 default = ["csr"]
-csr = ["leptos/csr", "leptos_meta/csr", "leptos_router/csr"]
-hydrate = ["leptos/hydrate", "leptos_meta/hydrate", "leptos_router/hydrate"]
+csr = ["leptos/csr"]
+hydrate = ["leptos/hydrate"]
 ssr = [
  "dep:axum",
  "dep:tower",
--- a/examples/hackernews_axum/src/api.rs
+++ b/examples/hackernews_axum/src/api.rs
@@ -1,4 +1,5 @@
-use leptos::Serializable;
+use leptos::logging;
+use serde::de::DeserializeOwned;
 use serde::{Deserialize, Serialize};

 pub fn story(path: &str) -> String {
@@ -10,46 +11,51 @@ pub fn user(path: &str) -> String {
 }

 #[cfg(not(feature = "ssr"))]
-pub async fn fetch_api<T>(path: &str) -> Option<T>
+pub fn fetch_api<T>(
+    path: &str,
+) -> impl std::future::Future<Output = Option<T>> + Send + '_
 where
-    T: Serializable,
+    T: Serialize + DeserializeOwned,
 {
-    let abort_controller = web_sys::AbortController::new().ok();
-    let abort_signal = abort_controller.as_ref().map(|a| a.signal());
+    use leptos::prelude::on_cleanup;
+    use send_wrapper::SendWrapper;

-    // abort in-flight requests if e.g., we've navigated away from this page
-    leptos::on_cleanup(move || {
-        if let Some(abort_controller) = abort_controller {
-            abort_controller.abort()
-        }
-    });
+    SendWrapper::new(async move {
+        let abort_controller =
+            SendWrapper::new(web_sys::AbortController::new().ok());
+        let abort_signal = abort_controller.as_ref().map(|a| a.signal());

-    let json = gloo_net::http::Request::get(path)
-        .abort_signal(abort_signal.as_ref())
-        .send()
-        .await
-        .map_err(|e| log::error!("{e}"))
-        .ok()?
-        .text()
-        .await
-        .ok()?;
+        // abort in-flight requests if, e.g., we've navigated away from this page
+        on_cleanup(move || {
+            if let Some(abort_controller) = abort_controller.take() {
+                abort_controller.abort()
+            }
+        });

-    T::de(&json).ok()
+        gloo_net::http::Request::get(path)
+            .abort_signal(abort_signal.as_ref())
+            .send()
+            .await
+            .map_err(|e| logging::error!("{e}"))
+            .ok()?
+            .json()
+            .await
+            .ok()
+    })
 }

 #[cfg(feature = "ssr")]
 pub async fn fetch_api<T>(path: &str) -> Option<T>
 where
-    T: Serializable,
+    T: Serialize + DeserializeOwned,
 {
-    let json = reqwest::get(path)
+    reqwest::get(path)
        .await
-        .map_err(|e| log::error!("{e}"))
+        .map_err(|e| logging::error!("{e}"))
        .ok()?
-        .text()
+        .json()
        .await
-        .ok()?;
-    T::de(&json).map_err(|e| log::error!("{e}")).ok()
+        .ok()
 }

 #[derive(Debug, Deserialize, Serialize, PartialEq, Eq, Clone)]
--- a/examples/hackernews_axum/src/fallback.rs
+++ b/examples/hackernews_axum/src/fallback.rs
@@ -1,48 +0,0 @@
-use crate::error_template::error_template;
-use axum::{
-    body::Body,
-    extract::State,
-    http::{Request, Response, StatusCode, Uri},
-    response::{IntoResponse, Response as AxumResponse},
-};
-use leptos::LeptosOptions;
-use tower::ServiceExt;
-use tower_http::services::ServeDir;
-
-pub async fn file_and_error_handler(
-    uri: Uri,
-    State(options): State<LeptosOptions>,
-    req: Request<Body>,
-) -> AxumResponse {
-    let root = options.site_root.clone();
-    let res = get_static_file(uri.clone(), &root).await.unwrap();
-
-    if res.status() == StatusCode::OK {
-        res.into_response()
-    } else {
-        let handler =
-            leptos_axum::render_app_to_stream(options.to_owned(), || {
-                error_template(None)
-            });
-        handler(req).await.into_response()
-    }
-}
-
-async fn get_static_file(
-    uri: Uri,
-    root: &str,
-) -> Result<Response<Body>, (StatusCode, String)> {
-    let req = Request::builder()
-        .uri(uri.clone())
-        .body(Body::empty())
-        .unwrap();
-    // `ServeDir` implements `tower::Service` so we can call it with `tower::ServiceExt::oneshot`
-    // This path is relative to the cargo root
-    match ServeDir::new(root).oneshot(req).await {
-        Ok(res) => Ok(res.into_response()),
-        Err(err) => Err((
-            StatusCode::INTERNAL_SERVER_ERROR,
-            format!("Something went wrong: {}", err),
-        )),
-    }
-}
--- a/examples/hackernews_axum/src/lib.rs
+++ b/examples/hackernews_axum/src/lib.rs
@@ -1,31 +1,55 @@
-use leptos::{component, view, IntoView};
-use leptos_meta::*;
-use leptos_router::*;
+use leptos::prelude::*;
 mod api;
-pub mod error_template;
-#[cfg(feature = "ssr")]
-pub mod fallback;
-#[cfg(feature = "ssr")]
-pub mod handlers;
 mod routes;
+use leptos_meta::{provide_meta_context, Link, Meta, MetaTags, Stylesheet};
+use leptos_router::{
+    components::{FlatRoutes, Route, Router, RoutingProgress},
+    ParamSegment, StaticSegment,
+};
 use routes::{nav::*, stories::*, story::*, users::*};
+use std::time::Duration;
+
+pub fn shell(options: LeptosOptions) -> impl IntoView {
+    view! {
+        <!DOCTYPE html>
+        <html lang="en">
+            <head>
+                <meta charset="utf-8"/>
+                <meta name="viewport" content="width=device-width, initial-scale=1"/>
+                <AutoReload options=options.clone() />
+                <HydrationScripts options/>
+                <MetaTags/>
+            </head>
+            <body>
+                <App/>
+            </body>
+        </html>
+    }
+}

 #[component]
 pub fn App() -> impl IntoView {
    provide_meta_context();
+    let (is_routing, set_is_routing) = signal(false);

    view! {
-        <Link rel="shortcut icon" type_="image/ico" href="/favicon.ico"/>
        <Stylesheet id="leptos" href="/pkg/hackernews_axum.css"/>
+        <Link rel="shortcut icon" type_="image/ico" href="/favicon.ico"/>
        <Meta name="description" content="Leptos implementation of a HackerNews demo."/>
-        <Router>
+        <Router set_is_routing>
+            // shows a progress bar while async data are loading
+            <div class="routing-progress">
+                <RoutingProgress is_routing max_time=Duration::from_millis(250)/>
+            </div>
            <Nav />
            <main>
-                <Routes>
-                    <Route path="users/:id" view=User/>
-                    <Route path="stories/:id" view=Story/>
-                    <Route path=":stories?" view=Stories/>
-                </Routes>
+                <FlatRoutes fallback=|| "Not found.">
+                    <Route path=(StaticSegment("users"), ParamSegment("id")) view=User/>
+                    <Route path=(StaticSegment("stories"), ParamSegment("id")) view=Story/>
+                    <Route path=ParamSegment("stories") view=Stories/>
+                    // TODO allow optional params without duplication
+                    <Route path=StaticSegment("") view=Stories/>
+                </FlatRoutes>
            </main>
        </Router>
    }
@@ -34,7 +58,6 @@ pub fn App() -> impl IntoView {
 #[cfg(feature = "hydrate")]
 #[wasm_bindgen::prelude::wasm_bindgen]
 pub fn hydrate() {
-    _ = console_log::init_with_level(log::Level::Debug);
    console_error_panic_hook::set_once();
-    leptos::mount_to_body(App);
+    leptos::mount::hydrate_body(App);
 }
--- a/examples/hackernews_axum/src/main.rs
+++ b/examples/hackernews_axum/src/main.rs
@@ -1,24 +1,23 @@
 #[cfg(feature = "ssr")]
 #[tokio::main]
 async fn main() {
-    use axum::{routing::get, Router};
-    use hackernews_axum::{fallback::file_and_error_handler, *};
-    use leptos::get_configuration;
+    use axum::Router;
+    use hackernews_axum::{shell, App};
+    use leptos::config::get_configuration;
    use leptos_axum::{generate_route_list, LeptosRoutes};

-    let conf = get_configuration(Some("Cargo.toml")).await.unwrap();
+    let conf = get_configuration(Some("Cargo.toml")).unwrap();
    let leptos_options = conf.leptos_options;
    let addr = leptos_options.site_addr;
    let routes = generate_route_list(App);

-    simple_logger::init_with_level(log::Level::Debug)
-        .expect("couldn't initialize logging");
-
    // build our application with a route
    let app = Router::new()
-        .route("/favicon.ico", get(file_and_error_handler))
-        .leptos_routes(&leptos_options, routes, App)
-        .fallback(file_and_error_handler)
+        .leptos_routes(&leptos_options, routes, {
+            let leptos_options = leptos_options.clone();
+            move || shell(leptos_options.clone())
+        })
+        .fallback(leptos_axum::file_and_error_handler(shell))
        .with_state(leptos_options);

    // run our app with hyper
--- a/examples/hackernews_axum/src/routes/nav.rs
+++ b/examples/hackernews_axum/src/routes/nav.rs
@@ -1,12 +1,12 @@
-use leptos::{component, view, IntoView};
-use leptos_router::*;
+use leptos::prelude::*;
+use leptos_router::components::A;

 #[component]
 pub fn Nav() -> impl IntoView {
    view! {
        <header class="header">
            <nav class="inner">
-                <A href="/">
+                <A href="/home">
                    <strong>"HN"</strong>
                </A>
                <A href="/new">
--- a/examples/hackernews_axum/src/routes/stories.rs
+++ b/examples/hackernews_axum/src/routes/stories.rs
@@ -1,6 +1,9 @@
 use crate::api;
-use leptos::*;
-use leptos_router::*;
+use leptos::{either::Either, prelude::*};
+use leptos_router::{
+    components::A,
+    hooks::{use_params_map, use_query_map},
+};

 fn category(from: &str) -> &'static str {
    match from {
@@ -18,62 +21,65 @@ pub fn Stories() -> impl IntoView {
    let params = use_params_map();
    let page = move || {
        query
-            .with(|q| q.get("page").and_then(|page| page.parse::<usize>().ok()))
+            .read()
+            .get("page")
+            .and_then(|page| page.parse::<usize>().ok())
            .unwrap_or(1)
    };
    let story_type = move || {
        params
-            .with(|p| p.get("stories").cloned())
+            .read()
+            .get("stories")
            .unwrap_or_else(|| "top".to_string())
    };
-    let stories = create_resource(
+    let stories = Resource::new(
        move || (page(), story_type()),
        move |(page, story_type)| async move {
            let path = format!("{}?page={}", category(&story_type), page);
            api::fetch_api::<Vec<api::Story>>(&api::story(&path)).await
        },
    );
-    let (pending, set_pending) = create_signal(false);
+    let (pending, set_pending) = signal(false);

-    let hide_more_link = move || {
-        stories.get().unwrap_or(None).unwrap_or_default().len() < 28
-            || pending.get()
-    };
+    let hide_more_link = move || match &*stories.read() {
+        Some(Some(stories)) => stories.len() < 28,
+        _ => true
+    } || pending.get();

    view! {
        <div class="news-view">
            <div class="news-list-nav">
                <span>
                    {move || if page() > 1 {
-                        view! {
-
+                        Either::Left(view! {
                            <a class="page-link"
                                href=move || format!("/{}?page={}", story_type(), page() - 1)
-                                attr:aria_label="Previous Page"
+                                aria-label="Previous Page"
                            >
                                "< prev"
                            </a>
-                        }.into_any()
+                        })
                    } else {
-                        view! {
-
+                        Either::Right(view! {
                            <span class="page-link disabled" aria-hidden="true">
                                "< prev"
                            </span>
-                        }.into_any()
+                        })
                    }}
                </span>
                <span>"page " {page}</span>
-                <span class="page-link"
-                    class:disabled=hide_more_link
-                    aria-hidden=hide_more_link
-                >
-                    <a href=move || format!("/{}?page={}", story_type(), page() + 1)
-                        aria-label="Next Page"
+                <Suspense>
+                    <span class="page-link"
+                        class:disabled=hide_more_link
+                        aria-hidden=hide_more_link
                    >
-                        "more >"
-                    </a>
-                </span>
+                        <a href=move || format!("/{}?page={}", story_type(), page() + 1)
+                            aria-label="Next Page"
+                        >
+                            "more >"
+                        </a>
+                    </span>
+                </Suspense>
            </div>
            <main class="news-list">
                <div>
@@ -81,23 +87,19 @@ pub fn Stories() -> impl IntoView {
                        fallback=move || view! { <p>"Loading..."</p> }
                        set_pending
                    >
-                        {move || match stories.get() {
-                            None => None,
-                            Some(None) => Some(view! { <p>"Error loading stories."</p> }.into_any()),
-                            Some(Some(stories)) => {
-                                Some(view! {
-                                    <ul>
-                                        <For
-                                            each=move || stories.clone()
-                                            key=|story| story.id
-                                            let:story
-                                        >
-                                            <Story story/>
-                                        </For>
-                                    </ul>
-                                }.into_any())
-                            }
-                        }}
+                        <Show when=move || stories.read().as_ref().map(Option::is_none).unwrap_or(false)>
+                        >
+                            <p>"Error loading stories."</p>
+                        </Show>
+                        <ul>
+                            <For
+                                each=move || stories.get().unwrap_or_default().unwrap_or_default()
+                                key=|story| story.id
+                                let:story
+                            >
+                                <Story story/>
+                            </For>
+                        </ul>
                    </Transition>
                </div>
            </main>
@@ -112,23 +114,23 @@ fn Story(story: api::Story) -> impl IntoView {
            <span class="score">{story.points}</span>
            <span class="title">
                {if !story.url.starts_with("item?id=") {
-                    view! {
+                    Either::Left(view! {
                        <span>
                            <a href=story.url target="_blank" rel="noreferrer">
                                {story.title.clone()}
                            </a>
                            <span class="host">"("{story.domain}")"</span>
                        </span>
-                    }.into_view()
+                    })
                } else {
                    let title = story.title.clone();
-                    view! { <A href=format!("/stories/{}", story.id)>{title.clone()}</A> }.into_view()
+                    Either::Right(view! { <A href=format!("/stories/{}", story.id)>{title}</A> })
                }}
            </span>
            <br />
            <span class="meta">
                {if story.story_type != "job" {
-                    view! {
+                    Either::Left(view! {
                        <span>
                            {"by "}
                            {story.user.map(|user| view ! {  <A href=format!("/users/{user}")>{user.clone()}</A>})}
@@ -141,10 +143,10 @@ fn Story(story: api::Story) -> impl IntoView {
                                }}
                            </A>
                        </span>
-                    }.into_view()
+                    })
                } else {
                    let title = story.title.clone();
-                    view! { <A href=format!("/item/{}", story.id)>{title.clone()}</A> }.into_view()
+                    Either::Right(view! { <A href=format!("/item/{}", story.id)>{title}</A> })
                }}
            </span>
            {(story.story_type != "link").then(|| view! {
--- a/examples/hackernews_axum/src/routes/story.rs
+++ b/examples/hackernews_axum/src/routes/story.rs
@@ -1,13 +1,15 @@
 use crate::api;
-use leptos::*;
-use leptos_meta::*;
-use leptos_router::*;
+use leptos::either::Either;
+use leptos::prelude::*;
+use leptos_meta::Meta;
+use leptos_router::components::A;
+use leptos_router::hooks::use_params_map;

 #[component]
 pub fn Story() -> impl IntoView {
    let params = use_params_map();
-    let story = create_resource(
-        move || params.get().get("id").cloned().unwrap_or_default(),
+    let story = Resource::new(
+        move || params.read().get("id").unwrap_or_default(),
        move |id| async move {
            if id.is_empty() {
                None
@@ -17,19 +19,13 @@ pub fn Story() -> impl IntoView {
            }
        },
    );
-    let meta_description = move || {
-        story
-            .get()
-            .and_then(|story| story.map(|story| story.title))
-            .unwrap_or_else(|| "Loading story...".to_string())
-    };

-    view! {
-        <Suspense fallback=|| view! {  "Loading..." }>
-            <Meta name="description" content=meta_description/>
-            {move || story.get().map(|story| match story {
-                None => view! { <div class="item-view">"Error loading this story."</div> },
-                Some(story) => view! {
+    Suspense(SuspenseProps::builder().fallback(|| "Loading...").children(ToChildren::to_children(move || Suspend(async move {
+        match story.await.clone() {
+            None => Either::Left("Story not found."),
+            Some(story) => {
+                Either::Right(view! {
+                    <Meta name="description" content=story.title.clone()/>
                    <div class="item-view">
                        <div class="item-view-header">
                        <a href=story.url target="_blank">
@@ -38,7 +34,7 @@ pub fn Story() -> impl IntoView {
                        <span class="host">
                            "("{story.domain}")"
                        </span>
-                        {story.user.map(|user| view! { <p class="meta">
+                        {story.user.map(|user| view! {  <p class="meta">
                            {story.points}
                            " points | by "
                            <A href=format!("/users/{user}")>{user.clone()}</A>
@@ -46,32 +42,33 @@ pub fn Story() -> impl IntoView {
                        </p>})}
                        </div>
                        <div class="item-view-comments">
-                        <p class="item-view-comments-header">
-                            {if story.comments_count.unwrap_or_default() > 0 {
-                                format!("{} comments", story.comments_count.unwrap_or_default())
-                            } else {
-                                "No comments yet.".into()
-                            }}
-                        </p>
-                        <ul class="comment-children">
-                            <For
-                                each=move || story.comments.clone().unwrap_or_default()
-                                key=|comment| comment.id
-                                let:comment
-                            >
-                                <Comment comment />
-                            </For>
-                        </ul>
+                            <p class="item-view-comments-header">
+                                {if story.comments_count.unwrap_or_default() > 0 {
+                                    format!("{} comments", story.comments_count.unwrap_or_default())
+                                } else {
+                                    "No comments yet.".into()
+                                }}
+                            </p>
+                            <ul class="comment-children">
+                                <For
+                                    each=move || story.comments.clone().unwrap_or_default()
+                                    key=|comment| comment.id
+                                    let:comment
+                                >
+                                    <Comment comment />
+                                </For>
+                            </ul>
+                        </div>
                    </div>
-                </div>
-            }})}
-        </Suspense>
-    }
+                })
+            }
+        }
+    }))).build())
 }

 #[component]
 pub fn Comment(comment: api::Comment) -> impl IntoView {
-    let (open, set_open) = create_signal(true);
+    let (open, set_open) = signal(true);

    view! {
        <li class="comment">
@@ -80,10 +77,10 @@ pub fn Comment(comment: api::Comment) -> impl IntoView {
            {format!(" {}", comment.time_ago)}
        </div>
        <div class="text" inner_html=comment.content></div>
-        {(!comment.comments.is_empty()).then(move || {
+        {(!comment.comments.is_empty()).then(|| {
            view! {
                <div>
-                    <div class="toggle" class:open=move ||open.get()>
+                    <div class="toggle" class:open=open>
                        <a on:click=move |_| set_open.update(|n| *n = !*n)>
                            {
                                let comments_len = comment.comments.len();
@@ -113,7 +110,7 @@ pub fn Comment(comment: api::Comment) -> impl IntoView {
            }
        })}
        </li>
-    }
+    }.into_any()
 }

 fn pluralize(n: usize) -> &'static str {
--- a/examples/hackernews_axum/src/routes/users.rs
+++ b/examples/hackernews_axum/src/routes/users.rs
@@ -1,12 +1,13 @@
 use crate::api::{self, User};
-use leptos::*;
-use leptos_router::*;
+use leptos::server::Resource;
+use leptos::{either::Either, prelude::*};
+use leptos_router::hooks::use_params_map;

 #[component]
 pub fn User() -> impl IntoView {
    let params = use_params_map();
-    let user = create_resource(
-        move || params.get().get("id").cloned().unwrap_or_default(),
+    let user = Resource::new(
+        move || params.read().get("id").unwrap_or_default(),
        move |id| async move {
            if id.is_empty() {
                None
@@ -17,12 +18,12 @@ pub fn User() -> impl IntoView {
    );
    view! {
        <div class="user-view">
-            <Suspense fallback=|| view! {  "Loading..." }>
-                {move || user.get().map(|user| match user {
-                    None => view! { <h1>"User not found."</h1> }.into_any(),
-                    Some(user) => view! {
+            <Suspense fallback=|| view! { "Loading..." }>
+                {move || Suspend(async move { match user.await.clone() {
+                    None => Either::Left(view! {  <h1>"User not found."</h1> }),
+                    Some(user) => Either::Right(view! {
                        <div>
-                            <h1>"User: " {&user.id}</h1>
+                            <h1>"User: " {user.id.clone()}</h1>
                            <ul class="meta">
                                <li>
                                    <span class="label">"Created: "</span> {user.created}
@@ -30,7 +31,7 @@ pub fn User() -> impl IntoView {
                                <li>
                                <span class="label">"Karma: "</span> {user.karma}
                                </li>
-                                {user.about.as_ref().map(|about| view! { <li inner_html=about class="about"></li> })}
+                                <li inner_html={user.about} class="about"></li>
                            </ul>
                            <p class="links">
                                <a href=format!("https://news.ycombinator.com/submitted?id={}", user.id)>"submissions"</a>
@@ -38,8 +39,8 @@ pub fn User() -> impl IntoView {
                                <a href=format!("https://news.ycombinator.com/threads?id={}", user.id)>"comments"</a>
                            </p>
                        </div>
-                    }.into_any()
-                })}
+                    })
+                }})}
            </Suspense>
        </div>
    }
--- a/examples/hackernews_islands_axum/Cargo.toml
+++ b/examples/hackernews_islands_axum/Cargo.toml
@@ -11,18 +11,13 @@ codegen-units = 1
 lto = true

 [dependencies]
-console_log = "1.0"
 console_error_panic_hook = "0.1"
 leptos = { path = "../../leptos", features = [
  "experimental-islands",
 ] }
-leptos_axum = { path = "../../integrations/axum", optional = true, features = [
-  "experimental-islands",
-] }
+leptos_axum = { path = "../../integrations/axum", optional = true }
 leptos_meta = { path = "../../meta" }
 leptos_router = { path = "../../router"}
-log = "0.4"
-simple_logger = "4.0"
 serde = { version = "1.0", features = ["derive"] }
 tracing = "0.1"
 gloo-net = { version = "0.4", features = ["http"] }
@@ -44,8 +39,8 @@ mime_guess = { version = "2.0.4", optional = true }

 [features]
 default = []
-csr = ["leptos/csr", "leptos_meta/csr", "leptos_router/csr"]
-hydrate = ["leptos/hydrate", "leptos_meta/hydrate", "leptos_router/hydrate"]
+csr = ["leptos/csr"]
+hydrate = ["leptos/hydrate"]
 ssr = [
  "dep:axum",
  "dep:tower",
--- a/examples/hackernews_islands_axum/src/api.rs
+++ b/examples/hackernews_islands_axum/src/api.rs
@@ -1,27 +1,30 @@
-#![allow(unused)]
-
-use leptos::Serializable;
+#[cfg(feature = "ssr")]
+use serde::de::DeserializeOwned;
 use serde::{Deserialize, Serialize};

+#[cfg(feature = "ssr")]
 pub fn story(path: &str) -> String {
    format!("https://node-hnapi.herokuapp.com/{path}")
 }

+#[cfg(feature = "ssr")]
 pub fn user(path: &str) -> String {
    format!("https://hacker-news.firebaseio.com/v0/user/{path}.json")
 }

-lazy_static::lazy_static! {
-    static ref CLIENT: reqwest::Client = reqwest::Client::new();
-}
-
 #[cfg(feature = "ssr")]
 pub async fn fetch_api<T>(path: &str) -> Option<T>
 where
-    T: Serializable,
+    T: Serialize + DeserializeOwned,
 {
-    let json = CLIENT.get(path).send().await.ok()?.text().await.ok()?;
-    T::de(&json).map_err(|e| log::error!("{e}")).ok()
+    use leptos::logging;
+    reqwest::get(path)
+        .await
+        .map_err(|e| logging::error!("{e}"))
+        .ok()?
+        .json()
+        .await
+        .ok()
 }

 #[derive(Debug, Deserialize, Serialize, PartialEq, Eq, Clone)]
--- a/examples/hackernews_islands_axum/src/error_template.rs
+++ b/examples/hackernews_islands_axum/src/error_template.rs
@@ -1,28 +0,0 @@
-use leptos::{view, Errors, For, IntoView, RwSignal, SignalGet, View};
-
-// A basic function to display errors served by the error boundaries. Feel free to do more complicated things
-// here than just displaying them
-pub fn error_template(errors: Option<RwSignal<Errors>>) -> View {
-    let Some(errors) = errors else {
-        panic!("No Errors found and we expected errors!");
-    };
-
-    view! {
-      <h1>"Errors"</h1>
-      <For
-          // a function that returns the items we're iterating over; a signal is fine
-          each=move || errors.get()
-          // a unique key for each item as a reference
-          key=|(key, _)| key.clone()
-          // renders each item to a view
-          children= move | (_, error)| {
-          let error_string = error.to_string();
-            view! {
-
-              <p>"Error: " {error_string}</p>
-            }
-          }
-      />
-    }
-    .into_view()
-}
--- a/examples/hackernews_islands_axum/src/fallback.rs
+++ b/examples/hackernews_islands_axum/src/fallback.rs
@@ -1,11 +1,8 @@
-use crate::error_template::error_template;
 use axum::{
    body::Body,
-    extract::State,
    http::{header, Request, Response, StatusCode, Uri},
    response::{IntoResponse, Response as AxumResponse},
 };
-use leptos::LeptosOptions;
 use std::borrow::Cow;

 #[cfg(not(debug_assertions))]
@@ -20,7 +17,6 @@ struct Assets;

 pub async fn file_and_error_handler(
    uri: Uri,
-    State(options): State<LeptosOptions>,
    req: Request<Body>,
 ) -> AxumResponse {
    let accept_encoding = req
@@ -34,11 +30,7 @@ pub async fn file_and_error_handler(
    if res.status() == StatusCode::OK {
        res.into_response()
    } else {
-        let handler =
-            leptos_axum::render_app_to_stream(options.to_owned(), || {
-                error_template(None)
-            });
-        handler(req).await.into_response()
+        (StatusCode::NOT_FOUND, "Not found.").into_response()
    }
 }

--- a/examples/hackernews_islands_axum/src/lib.rs
+++ b/examples/hackernews_islands_axum/src/lib.rs
@@ -1,12 +1,32 @@
-use leptos::*;
-use leptos_meta::*;
-use leptos_router::*;
+use leptos::prelude::*;
 mod api;
-pub mod error_template;
+mod routes;
+use leptos_meta::{provide_meta_context, Link, Meta, MetaTags, Stylesheet};
+use leptos_router::{
+    components::{FlatRoutes, Route, Router},
+    ParamSegment, StaticSegment,
+};
+use routes::{nav::*, stories::*, story::*, users::*};
 #[cfg(feature = "ssr")]
 pub mod fallback;
-mod routes;
-use routes::{nav::*, stories::*, story::*, users::*};
+
+pub fn shell(options: LeptosOptions) -> impl IntoView {
+    view! {
+        <!DOCTYPE html>
+        <html lang="en">
+            <head>
+                <meta charset="utf-8"/>
+                <meta name="viewport" content="width=device-width, initial-scale=1"/>
+                <AutoReload options=options.clone() />
+                <HydrationScripts options islands=true/>
+                <MetaTags/>
+            </head>
+            <body>
+                <App/>
+            </body>
+        </html>
+    }
+}

 #[component]
 pub fn App() -> impl IntoView {
@@ -19,11 +39,13 @@ pub fn App() -> impl IntoView {
        <Router>
            <Nav />
            <main>
-                <Routes>
-                    <Route path="users/:id" view=User ssr=SsrMode::InOrder/>
-                    <Route path="stories/:id" view=Story ssr=SsrMode::InOrder/>
-                    <Route path=":stories?" view=Stories ssr=SsrMode::InOrder/>
-                </Routes>
+                <FlatRoutes fallback=|| "Not found.">
+                    <Route path=(StaticSegment("users"), ParamSegment("id")) view=User/>
+                    <Route path=(StaticSegment("stories"), ParamSegment("id")) view=Story/>
+                    <Route path=ParamSegment("stories") view=Stories/>
+                    // TODO allow optional params without duplication
+                    <Route path=StaticSegment("") view=Stories/>
+                </FlatRoutes>
            </main>
        </Router>
    }
@@ -32,7 +54,6 @@ pub fn App() -> impl IntoView {
 #[cfg(feature = "hydrate")]
 #[wasm_bindgen::prelude::wasm_bindgen]
 pub fn hydrate() {
-    #[cfg(debug_assertions)]
    console_error_panic_hook::set_once();
-    leptos::leptos_dom::HydrationCtx::stop_hydrating();
+    leptos::mount::hydrate_islands();
 }
--- a/examples/hackernews_islands_axum/src/main.rs
+++ b/examples/hackernews_islands_axum/src/main.rs
@@ -1,17 +1,16 @@
 #[cfg(feature = "ssr")]
 #[tokio::main]
 async fn main() {
-    pub use axum::{routing::get, Router};
-    pub use hackernews_islands::fallback::file_and_error_handler;
+    pub use axum::Router;
    use hackernews_islands::*;
-    pub use leptos::get_configuration;
+    pub use leptos::config::get_configuration;
    pub use leptos_axum::{generate_route_list, LeptosRoutes};
    use tower_http::compression::{
        predicate::{NotForContentType, SizeAbove},
        CompressionLayer, CompressionLevel, Predicate,
    };

-    let conf = get_configuration(Some("Cargo.toml")).await.unwrap();
+    let conf = get_configuration(Some("Cargo.toml")).unwrap();
    let leptos_options = conf.leptos_options;
    let addr = leptos_options.site_addr;
    let routes = generate_route_list(App);
@@ -26,14 +25,16 @@ async fn main() {

    // build our application with a route
    let app = Router::new()
-        .route("/favicon.ico", get(file_and_error_handler))
-        .leptos_routes(&leptos_options, routes, App)
+        .leptos_routes(&leptos_options, routes, {
+            let leptos_options = leptos_options.clone();
+            move || shell(leptos_options.clone())
+        })
        .layer(
            CompressionLayer::new()
                .quality(CompressionLevel::Fastest)
                .compress_when(predicate),
        )
-        .fallback(file_and_error_handler)
+        .fallback(fallback::file_and_error_handler)
        .with_state(leptos_options);

    // run our app with hyper
@@ -49,8 +50,7 @@ async fn main() {
 #[cfg(not(feature = "ssr"))]
 pub fn main() {
    use hackernews_islands::*;
-    use leptos::*;
-    _ = console_log::init_with_level(log::Level::Debug);
+    use leptos::prelude::*;
    console_error_panic_hook::set_once();
-    mount_to_body(App);
+    leptos::mount::mount_to_body(App);
 }
--- a/examples/hackernews_islands_axum/src/routes/nav.rs
+++ b/examples/hackernews_islands_axum/src/routes/nav.rs
@@ -1,5 +1,5 @@
-use leptos::{component, view, IntoView};
-use leptos_router::*;
+use leptos::prelude::*;
+use leptos_router::components::A;

 #[component]
 pub fn Nav() -> impl IntoView {
@@ -21,7 +21,7 @@ pub fn Nav() -> impl IntoView {
                <A href="/job">
                    <strong>"Jobs"</strong>
                </A>
-                <a class="github" href="http://github.com/gbj/leptos" target="_blank" rel="noreferrer">
+                <a class="github" href="http://github.com/leptos-rs/leptos" target="_blank" rel="noreferrer">
                    "Built with Leptos"
                </a>
            </nav>
--- a/examples/hackernews_islands_axum/src/routes/stories.rs
+++ b/examples/hackernews_islands_axum/src/routes/stories.rs
@@ -1,6 +1,9 @@
 use crate::api;
-use leptos::*;
-use leptos_router::*;
+use leptos::{either::Either, prelude::*};
+use leptos_router::{
+    components::A,
+    hooks::{use_params_map, use_query_map},
+};

 fn category(from: &str) -> String {
    match from {
@@ -13,7 +16,7 @@ fn category(from: &str) -> String {
    .to_string()
 }

-#[server(FetchStories, "/api")]
+#[server]
 pub async fn fetch_stories(
    story_type: String,
    page: usize,
@@ -30,80 +33,84 @@ pub fn Stories() -> impl IntoView {
    let params = use_params_map();
    let page = move || {
        query
-            .with(|q| q.get("page").and_then(|page| page.parse::<usize>().ok()))
+            .read()
+            .get("page")
+            .and_then(|page| page.parse::<usize>().ok())
            .unwrap_or(1)
    };
    let story_type = move || {
        params
-            .with(|p| p.get("stories").cloned())
+            .read()
+            .get("stories")
            .unwrap_or_else(|| "top".to_string())
    };
-    let stories = create_resource(
+    let stories = Resource::new(
        move || (page(), story_type()),
-        move |(page, story_type)| fetch_stories(category(&story_type), page),
+        move |(page, story_type)| async move {
+            fetch_stories(category(&story_type), page).await.ok()
+        },
    );
-    let (pending, set_pending) = create_signal(false);
+    let (pending, set_pending) = signal(false);

-    let hide_more_link = move || {
-        pending.get()
-            || stories
-                .map(|stories| {
-                    stories.as_ref().map(|s| s.len() < 28).unwrap_or_default()
-                })
-                .unwrap_or_default()
-    };
+    let hide_more_link = move || match &*stories.read() {
+        Some(Some(stories)) => stories.len() < 28,
+        _ => true
+    } || pending.get();

    view! {
-
        <div class="news-view">
            <div class="news-list-nav">
                <span>
                    {move || if page() > 1 {
-                        view! {
+                        Either::Left(view! {
                            <a class="page-link"
                                href=move || format!("/{}?page={}", story_type(), page() - 1)
-                                attr:aria_label="Previous Page"
+                                aria-label="Previous Page"
                            >
                                "< prev"
                            </a>
-                        }.into_any()
+                        })
                    } else {
-                        view! {
+                        Either::Right(view! {
                            <span class="page-link disabled" aria-hidden="true">
                                "< prev"
                            </span>
-                        }.into_any()
+                        })
                    }}
                </span>
                <span>"page " {page}</span>
-                <span class="page-link"
-                    class:disabled=hide_more_link
-                    aria-hidden=hide_more_link
-                >
-                    <a href=move || format!("/{}?page={}", story_type(), page() + 1)
-                        aria-label="Next Page"
+                <Suspense>
+                    <span class="page-link"
+                        class:disabled=hide_more_link
+                        aria-hidden=hide_more_link
                    >
-                        "more >"
-                    </a>
-                </span>
+                        <a href=move || format!("/{}?page={}", story_type(), page() + 1)
+                            aria-label="Next Page"
+                        >
+                            "more >"
+                        </a>
+                    </span>
+                </Suspense>
            </div>
            <main class="news-list">
                <div>
                    <Transition
-                        fallback=|| ()
+                        fallback=move || view! { <p>"Loading..."</p> }
                        set_pending
                    >
-                        {move || stories.get().map(|story| story.map(|stories| view! {
-                                <ul>
-                                    <For
-                                        each=move || stories.clone()
-                                        key=|story| story.id
-                                        let:story
-                                    >
-                                        <Story story/>
-                                    </For>
-                                </ul>
-                            }))}
+                        <Show when=move || stories.read().as_ref().map(Option::is_none).unwrap_or(false)>
+                        >
+                            <p>"Error loading stories."</p>
+                        </Show>
+                        <ul>
+                            <For
+                                each=move || stories.get().unwrap_or_default().unwrap_or_default()
+                                key=|story| story.id
+                                let:story
+                            >
+                                <Story story/>
+                            </For>
+                        </ul>
                    </Transition>
                </div>
            </main>
@@ -118,26 +125,26 @@ fn Story(story: api::Story) -> impl IntoView {
            <span class="score">{story.points}</span>
            <span class="title">
                {if !story.url.starts_with("item?id=") {
-                    view! {
+                    Either::Left(view! {
                        <span>
                            <a href=story.url target="_blank" rel="noreferrer">
                                {story.title.clone()}
                            </a>
                            <span class="host">"("{story.domain}")"</span>
                        </span>
-                    }.into_view()
+                    })
                } else {
                    let title = story.title.clone();
-                    view! {  <A href=format!("/stories/{}", story.id)>{title.clone()}</A> }.into_view()
+                    Either::Right(view! { <A href=format!("/stories/{}", story.id)>{title}</A> })
                }}
            </span>
            <br />
            <span class="meta">
                {if story.story_type != "job" {
-                    view! {
+                    Either::Left(view! {
                        <span>
                            {"by "}
-                            {story.user.map(|user| view ! { <A href=format!("/users/{user}")>{user.clone()}</A>})}
+                            {story.user.map(|user| view ! {  <A href=format!("/users/{user}")>{user.clone()}</A>})}
                            {format!(" {} | ", story.time_ago)}
                            <A href=format!("/stories/{}", story.id)>
                                {if story.comments_count.unwrap_or_default() > 0 {
@@ -147,10 +154,10 @@ fn Story(story: api::Story) -> impl IntoView {
                                }}
                            </A>
                        </span>
-                    }.into_view()
+                    })
                } else {
                    let title = story.title.clone();
-                    view! {  <A href=format!("/item/{}", story.id)>{title.clone()}</A> }.into_view()
+                    Either::Right(view! { <A href=format!("/item/{}", story.id)>{title}</A> })
                }}
            </span>
            {(story.story_type != "link").then(|| view! {
--- a/examples/hackernews_islands_axum/src/routes/story.rs
+++ b/examples/hackernews_islands_axum/src/routes/story.rs
@@ -1,52 +1,37 @@
 use crate::api;
-use leptos::*;
-use leptos_meta::*;
-use leptos_router::*;
-use std::cell::RefCell;
+use leptos::either::Either;
+use leptos::prelude::*;
+use leptos_meta::Meta;
+use leptos_router::components::A;
+use leptos_router::hooks::use_params_map;

-#[server(FetchStory, "/api")]
+#[server]
 pub async fn fetch_story(
    id: String,
-) -> Result<RefCell<Option<api::Story>>, ServerFnError> {
-    Ok(RefCell::new(
-        api::fetch_api::<api::Story>(&api::story(&format!("item/{id}"))).await,
-    ))
+) -> Result<Option<api::Story>, ServerFnError> {
+    Ok(api::fetch_api::<api::Story>(&api::story(&format!("item/{id}"))).await)
 }

 #[component]
 pub fn Story() -> impl IntoView {
    let params = use_params_map();
-    let story = create_resource(
-        move || params.get().get("id").cloned().unwrap_or_default(),
+    let story = Resource::new(
+        move || params.read().get("id").unwrap_or_default(),
        move |id| async move {
            if id.is_empty() {
-                Ok(RefCell::new(None))
+                Ok(None)
            } else {
                fetch_story(id).await
            }
        },
    );
-    let meta_description = move || {
-        story
-            .map(|story| {
-                story
-                    .as_ref()
-                    .map(|story| {
-                        story.borrow().as_ref().map(|story| story.title.clone())
-                    })
-                    .ok()
-            })
-            .flatten()
-            .flatten()
-            .unwrap_or_else(|| "Loading story...".to_string())
-    };

-    let story_view = move || {
-        story.map(|story| {
-        story.as_ref().ok().and_then(|story| {
-            let story: Option<api::Story> = story.borrow_mut().take();
-            story.map(|story| {
-                view! {
+    Suspense(SuspenseProps::builder().fallback(|| "Loading...").children(ToChildren::to_children(move || Suspend(async move {
+        match story.await.ok().flatten() {
+            None => Either::Left("Story not found."),
+            Some(story) => {
+                Either::Right(view! {
+                    <Meta name="description" content=story.title.clone()/>
                    <div class="item-view">
                        <div class="item-view-header">
                        <a href=story.url target="_blank">
@@ -55,63 +40,36 @@ pub fn Story() -> impl IntoView {
                        <span class="host">
                            "("{story.domain}")"
                        </span>
-                        {story.user.map(|user| view! { <p class="meta">
+                        {story.user.map(|user| view! {  <p class="meta">
                            {story.points}
                            " points | by "
                            <A href=format!("/users/{user}")>{user.clone()}</A>
                            {format!(" {}", story.time_ago)}
                        </p>})}
+                        </div>
+                        <div class="item-view-comments">
+                            <p class="item-view-comments-header">
+                                {if story.comments_count.unwrap_or_default() > 0 {
+                                    format!("{} comments", story.comments_count.unwrap_or_default())
+                                } else {
+                                    "No comments yet.".into()
+                                }}
+                            </p>
+                            <ul class="comment-children">
+                                <For
+                                    each=move || story.comments.clone().unwrap_or_default()
+                                    key=|comment| comment.id
+                                    let:comment
+                                >
+                                    <Comment comment />
+                                </For>
+                            </ul>
+                        </div>
                    </div>
-                    <div class="item-view-comments">
-                        <p class="item-view-comments-header">
-                            {if story.comments_count.unwrap_or_default() > 0 {
-                                format!("{} comments", story.comments_count.unwrap_or_default())
-                            } else {
-                                "No comments yet.".into()
-                            }}
-                        </p>
-                        <ul class="comment-children">
-                            {story.comments.unwrap_or_default().into_iter()
-                                .map(|comment: api::Comment| view! { <Comment comment /> })
-                                .collect_view()}
-                        </ul>
-                    </div>
-                </div>
-        }})})})
-    };
-
-    view! {
-        <Meta name="description" content=meta_description/>
-        <Suspense fallback=|| ()>
-            {story_view}
-        </Suspense>
-    }
-}
-
-#[island]
-pub fn Toggle(children: Children) -> impl IntoView {
-    let (open, set_open) = create_signal(true);
-    view! {
-        <div class="toggle" class:open=open>
-            <a on:click=move |_| set_open.update(|n| *n = !*n)>
-                {move || if open.get() {
-                    "[-]"
-                } else {
-                    "[+] comments collapsed"
-                }}
-            </a>
-        </div>
-        <ul
-            class="comment-children"
-            style:display=move || if open.get() {
-                "block"
-            } else {
-                "none"
+                })
            }
-        >
-            {children()}
-        </ul>
-    }
+        }
+    }))).build())
 }

 #[component]
@@ -135,3 +93,29 @@ pub fn Comment(comment: api::Comment) -> impl IntoView {
        </li>
    }
 }
+
+#[island]
+pub fn Toggle(children: Children) -> impl IntoView {
+    let (open, set_open) = signal(true);
+    view! {
+        <div class="toggle" class:open=open>
+            <a on:click=move |_| set_open.update(|n| *n = !*n)>
+                {move || if open.get() {
+                    "[-]"
+                } else {
+                    "[+] comments collapsed"
+                }}
+            </a>
+        </div>
+        <ul
+            class="comment-children"
+            style:display=move || if open.get() {
+                "block"
+            } else {
+                "none"
+            }
+        >
+            {children()}
+        </ul>
+    }
+}
--- a/examples/hackernews_islands_axum/src/routes/users.rs
+++ b/examples/hackernews_islands_axum/src/routes/users.rs
@@ -1,20 +1,20 @@
-#[allow(unused)] // User is unused in WASM build
-use crate::api::{self, User};
-use leptos::*;
-use leptos_router::*;
+use crate::api;
+use leptos::server::Resource;
+use leptos::{either::Either, prelude::*};
+use leptos_router::hooks::use_params_map;

-#[server(FetchUser, "/api")]
+#[server]
 pub async fn fetch_user(
    id: String,
 ) -> Result<Option<api::User>, ServerFnError> {
-    Ok(api::fetch_api::<User>(&api::user(&id)).await)
+    Ok(api::fetch_api::<api::User>(&api::user(&id)).await)
 }

 #[component]
 pub fn User() -> impl IntoView {
    let params = use_params_map();
-    let user = create_resource(
-        move || params.get().get("id").cloned().unwrap_or_default(),
+    let user = Resource::new(
+        move || params.read().get("id").unwrap_or_default(),
        move |id| async move {
            if id.is_empty() {
                Ok(None)
@@ -25,12 +25,12 @@ pub fn User() -> impl IntoView {
    );
    view! {
        <div class="user-view">
-            <Suspense fallback=|| ()>
-                {move || user.get().map(|user| user.map(|user| match user {
-                    None => view! {  <h1>"User not found."</h1> }.into_view(),
-                    Some(user) => view! {
+            <Suspense fallback=|| view! { "Loading..." }>
+                {move || Suspend(async move { match user.await.ok().flatten() {
+                    None => Either::Left(view! {  <h1>"User not found."</h1> }),
+                    Some(user) => Either::Right(view! {
                        <div>
-                            <h1>"User: " {&user.id}</h1>
+                            <h1>"User: " {user.id.clone()}</h1>
                            <ul class="meta">
                                <li>
                                    <span class="label">"Created: "</span> {user.created}
@@ -46,8 +46,8 @@ pub fn User() -> impl IntoView {
                                <a href=format!("https://news.ycombinator.com/threads?id={}", user.id)>"comments"</a>
                            </p>
                        </div>
-                    }.into_view()
-                }))}
+                    })
+                }})}
            </Suspense>
        </div>
    }
--- a/examples/hackernews_js_fetch/Cargo.toml
+++ b/examples/hackernews_js_fetch/Cargo.toml
@@ -1,5 +1,5 @@
 [package]
-name = "hackernews-js-fetch"
+name = "hackernews_js_fetch"
 version = "0.1.0"
 edition = "2021"

@@ -11,63 +11,63 @@ codegen-units = 1
 lto = true

 [dependencies]
-console_log = "1.0.0"
-console_error_panic_hook = "0.1.7"
-cfg-if = "1.0.0"
+console_error_panic_hook = "0.1"
+console_log = "1.0"
 leptos = { path = "../../leptos" }
 leptos_axum = { path = "../../integrations/axum", default-features = false, optional = true }
 leptos_meta = { path = "../../meta" }
 leptos_router = { path = "../../router" }
-log = "0.4.17"
-simple_logger = "4.0.0"
-serde = { version = "1.0.148", features = ["derive"] }
+leptos_server = { path = "../../leptos_server", optional = true }
+serde = { version = "1.0", features = ["derive"] }
 tracing = "0.1"
-gloo-net = { version = "0.4.0", features = ["http"] }
-reqwest = { version = "0.11.13", features = ["json"] }
+gloo-net = { version = "0.5", features = ["http"] }
+reqwest = { version = "0.12", features = ["json"] }
 axum = { version = "0.7", default-features = false, optional = true }
-tower = { version = "0.4.13", optional = true }
-http = { version = "0.2.11", optional = true }
+tower = { version = "0.4", optional = true }
+http = { version = "1.0", optional = true }
 web-sys = { version = "0.3", features = [
  "AbortController",
  "AbortSignal",
  "Request",
  "Response",
 ] }
+getrandom = { version = "0.2.7", features = ["js"] }
 wasm-bindgen = "0.2"
 wasm-bindgen-futures = { version = "0.4.37", features = [
  "futures-core-03-stream",
 ], optional = true }
 axum-js-fetch = { git = "https://github.com/seanaye/axum-js-fetch", optional = true }
-lazy_static = "1.4.0"
+send_wrapper = { version = "0.6.0", features = ["futures"] }

 [features]
-hydrate = ["leptos/hydrate", "leptos_meta/hydrate", "leptos_router/hydrate"]
+hydrate = ["leptos/hydrate"]
 ssr = [
+  "dep:axum",
  "dep:tower",
  "dep:http",
-  "dep:axum",
  "dep:wasm-bindgen-futures",
  "dep:axum-js-fetch",
  "leptos/ssr",
  "leptos_axum/wasm",
  "leptos_meta/ssr",
  "leptos_router/ssr",
+  "leptos_server/serde-wasm-bindgen",
 ]

 [package.metadata.cargo-all-features]
 denylist = ["axum", "tower", "http", "leptos_axum"]
-skip_feature_sets = [["ssr", "hydrate"]]
+skip_feature_sets = [["csr", "ssr"], ["csr", "hydrate"], ["ssr", "hydrate"]]

 [package.metadata.leptos]
 # The name used by wasm-bindgen/cargo-leptos for the JS/WASM bundle. Defaults to the crate name
-output-name = "hackernews_axum"
+output-name = "hackernews_js_fetch"
 # The site root folder is where cargo-leptos generate all output. WARNING: all content of this folder will be erased on a rebuild. Use it in your server setup.
 site-root = "target/site"
 # The site-root relative folder where all compiled output (JS, WASM and CSS) is written
 # Defaults to pkg
 site-pkg-dir = "pkg"
 # [Optional] The source CSS file. If it ends with .sass or .scss then it will be compiled by dart-sass into CSS. The CSS is optimized by Lightning CSS before being written to <site-root>/<site-pkg>/app.css
-style-file = "./style.css"
+style-file = "style.css"
 # [Optional] Files in the asset-dir will be copied to the site-root directory
 assets-dir = "public"
 # The IP and port (ex: 127.0.0.1:3000) where the server serves the content. Use it in your server setup.
--- a/examples/hackernews_js_fetch/Makefile.toml
+++ b/examples/hackernews_js_fetch/Makefile.toml
@@ -1,6 +1,6 @@
 extend = [
-    { path = "../cargo-make/main.toml" },
-    { path = "../cargo-make/deno-build.toml" },
+  { path = "../cargo-make/main.toml" },
+  { path = "../cargo-make/deno-build.toml" },
 ]

 [env]
--- a/Show More
+++ b/Show More
				`@@ -0,0 +1 @@`
				`extend = { path = "../cargo-make/main.toml" }`
				`@@ -0,0 +1 @@`
				Utilities for working with enumerated types that contain one of `2..n` other types.