docs: add use_navigate to router docs in guide

Additional random docs

.github/workflows/run-cargo-make-task.yml

@@ -84,6 +84,11 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-pnpm-store-
 
+      - name: Install Chrome Webriver
+        run: |
+          sudo apt-get update
+          sudo apt-get install chromium-chromedriver
+
       # Run Cargo Make Task
       - name: ${{ inputs.cargo_make_task }}
         run: |

docs/book/src/SUMMARY.md

@@ -43,5 +43,5 @@
   - [Responses and Redirects](./server/27_response.md)
 - [Progressive Enhancement and Graceful Degradation](./progressive_enhancement/README.md)
   - [`<ActionForm/>`s](./progressive_enhancement/action_form.md)
-- [Deployment]()
+- [Deployment](./deployment.md)
 - [Appendix: Optimizing WASM Binary Size](./appendix_binary_size.md)

docs/book/src/async/11_suspense.md

@@ -69,6 +69,34 @@ Every time one of the resources is reloading, the `"Loading..."` fallback will s
 
 This inversion of the flow of control makes it easier to add or remove individual resources, as you don’t need to handle the matching yourself. It also unlocks some massive performance improvements during server-side rendering, which we’ll talk about during a later chapter.
 
+## `<Await/>`
+
+In you’re simply trying to wait for some `Future` to resolve before rendering, you may find the `<Await/>` component helpful in reducing boilerplate. `<Await/>` essentially combines a resource with the source argument `|| ()` with a `<Suspense/>` with no fallback.
+
+In other words:
+
+1. It only polls the `Future` once, and does not respond to any reactive changes.
+2. It does not render anything until the `Future` resolves.
+3. After the `Future` resolves, its binds its data to whatever variable name you choose and then renders its children with that variable in scope.
+
+```rust
+async fn fetch_monkeys(monkey: i32) -> i32 {
+    // maybe this didn't need to be async
+    monkey * 2
+}
+view! { cx,
+    <Await
+        // `future` provides the `Future` to be resolved
+        future=|cx| fetch_monkeys(3)
+        // the data is bound to whatever variable name you provide
+        bind:data
+    >
+        // you receive the data by reference and can use it in your view here
+        <p>{*data} " little monkeys, jumping on the bed."</p>
+    </Await>
+}
+```
+
 [Click to open CodeSandbox.](https://codesandbox.io/p/sandbox/11-suspense-907niv?file=%2Fsrc%2Fmain.rs)
 
 <iframe src="https://codesandbox.io/p/sandbox/11-suspense-907niv?file=%2Fsrc%2Fmain.rs" width="100%" height="1000px" style="max-height: 100vh"></iframe>

docs/book/src/deployment.md

@@ -0,0 +1,74 @@
+# Deployment
+
+There are as many ways to deploy a web application as there are developers, let alone applications. But there are a couple useful tips to keep in mind when deploying an app.
+
+## General Advice
+
+1. Remember: Always deploy Rust apps built in `--release` mode, not debug mode. This has a huge effect on both performance and binary size.
+2. Test locally in release mode as well. The framework applies certain optimizations in release mode that it does not apply in debug mode, so it’s possible for bugs to surface at this point. (If your app behaves differently or you do encounter a bug, it’s likely a framework-level bug and you should open a GitHub issue with a reproduction.)
+
+> We asked users to submit their deployment setups to help with this chapter. I’ll quote from them below, but you can read the full thread [here](https://github.com/leptos-rs/leptos/issues/1152).
+
+## Deploying a Client-Side-Rendered App
+
+If you’ve been building an app that only uses client-side rendering, working with Trunk as a dev server and build tool, the process is quite easy.
+
+```bash
+trunk build --release
+```
+
+`trunk build` will create a number of build artifacts in a `dist/` directory. Publishing `dist` somewhere online should be all you need to deploy your app. This should work very similarly to deploying any JavaScript application.
+
+> Read more: [Deploying to Vercel with GitHub Actions](https://github.com/leptos-rs/leptos/issues/1152#issuecomment-1577861900).
+
+## Deploying a Full-Stack App
+
+The most popular way for people to deploy full-stack apps built with `cargo-leptos` is to use a cloud hosting service that supports deployment via a Docker build. Here’s a sample `Dockerfile`, which is based on the one we use to deploy the Leptos website.
+
+```dockerfile
+# Get started with a build env with Rust nightly
+FROM rustlang/rust:nightly-bullseye as builder
+
+# If you’re using stable, use this instead
+# FROM rust:1.70-bullseye as builder
+
+# Install cargo-binstall, which makes it easier to install other
+# cargo extensions like cargo-leptos
+RUN wget https://github.com/cargo-bins/cargo-binstall/releases/latest/download/cargo-binstall-x86_64-unknown-linux-musl.tgz
+RUN tar -xvf cargo-binstall-x86_64-unknown-linux-musl.tgz
+RUN cp cargo-binstall /usr/local/cargo/bin
+
+# Install cargo-leptos
+RUN cargo binstall cargo-leptos -y
+
+# Add the WASM target
+RUN rustup target add wasm32-unknown-unknown
+
+# Make an /app dir, which everything will eventually live in
+RUN mkdir -p /app
+WORKDIR /app
+COPY . .
+
+# Build the app
+RUN cargo leptos build --release -vv
+
+FROM rustlang/rust:nightly-bullseye as runner
+# Copy the server binary to the /app directory
+COPY --from=builder /app/target/server/release/leptos_website /app/
+# /target/site contains our JS/WASM/CSS, etc.
+COPY --from=builder /app/target/site /app/site
+# Copy Cargo.toml if it’s needed at runtime
+COPY --from=builder /app/Cargo.toml /app/
+WORKDIR /app
+
+# Set any required env variables and
+ENV RUST_LOG="info"
+ENV APP_ENVIRONMENT="production"
+ENV LEPTOS_SITE_ADDR="0.0.0.0:8080"
+ENV LEPTOS_SITE_ROOT="site"
+EXPOSE 8080
+# Run the server
+CMD ["/app/leptos_website"]
+```
+
+> Read more: [`gnu` and `musl` build files for Leptos apps](https://github.com/leptos-rs/leptos/issues/1152#issuecomment-1634916088).

docs/book/src/reactivity/14_create_effect.md

@@ -109,6 +109,34 @@ create_effect(cx, move |prev_value| {
 
 Every time `count` is updated, this effect wil rerun. This is what allows reactive, fine-grained updates to the DOM.
 
+## Explicit, Cancelable Tracking with `watch`
+
+In addition to `create_effect`, Leptos provides a [`watch`](https://docs.rs/leptos_reactive/latest/leptos_reactive/fn.watch.html) function, which can be used for two main purposes:
+
+1. Separating tracking and responding to changes by explicitly passing in a set of values to track.
+2. Canceling tracking by calling a stop function.
+
+Like `create_resource`, `watch` takes a first argument, which is reactively tracked, and a second, which is not. Whenever a reactive value in its `deps` argument is changed, the `callback` is run. `watch` returns a function that can be called to stop tracking the dependencies.
+
+```rust
+let (num, set_num) = create_signal(cx, 0);
+
+let stop = watch(
+    cx,
+    move || num.get(),
+    move |num, prev_num, _| {
+        log::debug!("Number: {}; Prev: {:?}", num, prev_num);
+    },
+    false,
+);
+
+set_num.set(1); // > "Number: 1; Prev: Some(0)"
+
+stop(); // stop watching
+
+set_num.set(2); // (nothing happens)
+```
+
 [Click to open CodeSandbox.](https://codesandbox.io/p/sandbox/serene-thompson-40974n?file=%2Fsrc%2Fmain.rs&selection=%5B%7B%22endColumn%22%3A1%2C%22endLineNumber%22%3A2%2C%22startColumn%22%3A1%2C%22startLineNumber%22%3A2%7D%5D)
 
 <iframe src="https://codesandbox.io/p/sandbox/serene-thompson-40974n?file=%2Fsrc%2Fmain.rs&selection=%5B%7B%22endColumn%22%3A1%2C%22endLineNumber%22%3A2%2C%22startColumn%22%3A1%2C%22startLineNumber%22%3A2%7D%5D" width="100%" height="1000px" style="max-height: 100vh"></iframe>

docs/book/src/router/19_a.md

@@ -18,6 +18,20 @@ The router also provides an [`<A>`](https://docs.rs/leptos_router/latest/leptos_
 1. Correctly resolves relative nested routes. Relative routing with ordinary `<a>` tags can be tricky. For example, if you have a route like `/post/:id`, `<A href="1">` will generate the correct relative route, but `<a href="1">` likely will not (depending on where it appears in your view.) `<A/>` resolves routes relative to the path of the nested route within which it appears.
 2. Sets the `aria-current` attribute to `page` if this link is the active link (i.e., it’s a link to the page you’re on). This is helpful for accessibility and for styling. For example, if you want to set the link a different color if it’s a link to the page you’re currently on, you can match this attribute with a CSS selector.
 
+## Navigating Programmatically
+
+Your most-used methods of navigating between pages should be with `<a>` and `<form>` elements or with the enhanced `<A/>` and `<Form/>` components. Using links and forms to navigate is the best solution for accessibility and graceful degradation.
+
+On occasion, though, you’ll want to navigate programmatically, i.e., call a function that can navigate to a new page. In that case, you should use the [`use_navigate`](https://docs.rs/leptos_router/latest/leptos_router/fn.use_navigate.html) function.
+```rust
+let navigate = leptos_router::use_navigate(cx);
+navigate("/somewhere", Default::default());
+```
+
+> You should almost never do something like `<button on:click=move |_| navigate(/* ... */)>`. Any `on:click` that navigates should be an `<a>`, for reasons of accessibility.
+
+The second argument here is a set of [`NavigateOptions`](https://docs.rs/leptos_router/latest/leptos_router/struct.NavigateOptions.html), which includes options to resolve the navigation relative to the current route as the `<A/>` component does, replace it in the navigation stack, include some navigation state, and maintain the current scroll state on navigation.
+
 > Once again, this is the same example. Check out the relative `<A/>` components, and take a look at the CSS in `index.html` to see the ARIA-based styling.
 
 [Click to open CodeSandbox.](https://codesandbox.io/p/sandbox/16-router-fy4tjv?file=%2Fsrc%2Fmain.rs&selection=%5B%7B%22endColumn%22%3A1%2C%22endLineNumber%22%3A3%2C%22startColumn%22%3A1%2C%22startLineNumber%22%3A3%7D%5D)

docs/book/src/server/26_extractors.md

@@ -62,7 +62,21 @@ pub async fn axum_extract(cx: Scope) -> Result<String, ServerFnError> {
 
 These are relatively simple examples accessing basic data from the server. But you can use extractors to access things like headers, cookies, database connection pools, and more, using the exact same `extract()` pattern.
 
-> Note: For now, the Axum `extract` function only supports extractors for which the state is `()`, i.e., you can't yet use it to extract `State(_)`. You can access `State(_)` by using a custom handler that extracts the state and then provides it via context. [Click here for an example](https://github.com/leptos-rs/leptos/blob/a5f73b441c079f9138102b3a7d8d4828f045448c/examples/session_auth_axum/src/main.rs#L91-L92).
+The Axum `extract` function only supports extractors for which the state is `()`. If you need an extractor that uses `State`, you should use [`extract_with_state`](https://docs.rs/leptos_axum/latest/leptos_axum/fn.extract_with_state.html). This requires you to provide the state. You can do this by extending the existing `LeptosOptions` state using the Axum `FromRef` pattern, which providing the state as context during render and server functions with custom handlers.
+
+```rust
+use axum::extract::FromRef;
+
+/// Derive FromRef to allow multiple items in state, using Axum’s
+/// SubStates pattern.
+#[derive(FromRef, Debug, Clone)]
+pub struct AppState{
+    pub leptos_options: LeptosOptions,
+    pub pool: SqlitePool
+}
+```
+
+[Click here for an example of providing context in custom handlers](https://github.com/leptos-rs/leptos/blob/19ea6fae6aec2a493d79cc86612622d219e6eebb/examples/session_auth_axum/src/main.rs#L24-L44).
 
 ## A Note about Data-Loading Patterns
 

examples/cargo-make/cargo-leptos-test.toml

@@ -1,5 +1,7 @@
+extend = { path = "./cargo-leptos.toml" }
+
 [tasks.integration-test]
-dependencies = ["cargo-leptos-e2e"]
+dependencies = ["install-cargo-leptos", "cargo-leptos-e2e"]
 
 [tasks.cargo-leptos-e2e]
 command = "cargo"

examples/cargo-make/cargo-leptos.toml

@@ -0,0 +1,55 @@
+[tasks.install-cargo-leptos]
+install_crate = { crate_name = "cargo-leptos", binary = "cargo-leptos", test_arg = "--help" }
+
+[tasks.build]
+clear = true
+command = "cargo"
+args = ["leptos", "build"]
+
+[tasks.check]
+clear = true
+dependencies = ["check-debug", "check-release"]
+
+[tasks.check-debug]
+toolchain = "nightly"
+command = "cargo"
+args = ["check-all-features"]
+install_crate = "cargo-all-features"
+
+[tasks.check-release]
+toolchain = "nightly"
+command = "cargo"
+args = ["check-all-features", "--release"]
+install_crate = "cargo-all-features"
+
+[tasks.start-client]
+command = "cargo"
+args = ["leptos", "watch"]
+
+[tasks.stop-client]
+condition = { env_set = ["APP_PROCESS_NAME"] }
+script = '''
+  if [ ! -z $(pidof ${APP_PROCESS_NAME}) ]; then
+    pkill -f todo_app_sqlite
+  fi
+
+  if [ ! -z $(pidof ${APP_PROCESS_NAME}) ]; then
+    pkill -f cargo-leptos
+  fi
+'''
+
+[tasks.client-status]
+condition = { env_set = ["APP_PROCESS_NAME"] }
+script = '''
+  if [ -z $(pidof ${APP_PROCESS_NAME}) ]; then
+    echo "  ${APP_PROCESS_NAME} is not running"
+  else
+    echo "  ${APP_PROCESS_NAME} is up"
+  fi
+
+  if [ -z $(pidof cargo-leptos) ]; then
+    echo "  cargo-leptos is not running"
+  else
+    echo "  cargo-leptos is up"
+  fi
+'''

examples/cargo-make/webdriver.toml

@@ -0,0 +1,30 @@
+[tasks.start-webdriver]
+script = '''
+  BOLD="\e[1m"
+  GREEN="\e[0;32m"
+  RED="\e[0;31m"
+  RESET="\e[0m"
+
+  if command -v chromedriver; then
+    if [ -z $(pidof chromedriver) ]; then
+      chromedriver --port=4444 &
+    fi
+  else
+    echo "${RED}${BOLD}ERROR${RESET} - chromedriver is required by this task"
+    exit 1
+  fi
+'''
+
+[tasks.stop-webdriver]
+script = '''
+  pkill -f "chromedriver"
+'''
+
+[tasks.webdriver-status]
+script = '''
+  if [ -z $(pidof chromedriver) ]; then
+    echo chromedriver is not running
+  else
+    echo chromedriver is up
+  fi
+'''

examples/todo_app_sqlite/Cargo.toml

@@ -62,7 +62,8 @@ site-addr = "127.0.0.1:3000"
 # The port to use for automatic reload monitoring
 reload-port = 3001
 # [Optional] Command to use when running end2end tests. It will run in the end2end dir.
-end2end-cmd = "npx playwright test"
+end2end-cmd = "cargo make test-ui"
+end2end-dir = "e2e"
 #  The browserlist query used for optimizing the CSS.
 browserquery = "defaults"
 # Set by cargo-leptos watch when building with tha tool. Controls whether autoreload JS will be included in the head

examples/todo_app_sqlite/Makefile.toml

@@ -1,17 +1,24 @@
-extend = { path = "../cargo-make/main.toml" }
+extend = [
+  { path = "../cargo-make/main.toml" },
+  { path = "../cargo-make/webdriver.toml" },
+  { path = "../cargo-make/cargo-leptos.toml" },
+]
 
-[tasks.check]
-clear = true
-dependencies = ["check-debug", "check-release"]
+[env]
+APP_PROCESS_NAME = "todo_app_sqlite"
 
-[tasks.check-debug]
-toolchain = "nightly"
+[tasks.integration-test]
+dependencies = [
+  "install-cargo-leptos",
+  "start-webdriver",
+  "test-e2e-with-auto-start",
+]
+
+[tasks.test-e2e-with-auto-start]
 command = "cargo"
-args = ["check-all-features"]
-install_crate = "cargo-all-features"
+args = ["leptos", "end-to-end"]
 
-[tasks.check-release]
-toolchain = "nightly"
+[tasks.test-ui]
+cwd = "./e2e"
 command = "cargo"
-args = ["check-all-features", "--release"]
-install_crate = "cargo-all-features"
+args = ["make", "test-ui", "${@}"]

examples/todo_app_sqlite/README.md

@@ -52,3 +52,23 @@ wasm-pack build --target=web --debug --no-default-features --features=hydrate
 ```bash
 cargo run --no-default-features --features=ssr
 ```
+
+## Testing
+
+This example includes quality checks and end-to-end testing.
+
+To get started run this once.
+
+```bash
+cargo make ci
+```
+
+To only run the UI tests...
+
+```bash
+cargo make start-webdriver
+cargo leptos watch # or cargo run...
+cargo make test-ui
+```
+
+_See the [E2E README](./e2e/README.md) for more information about the testing strategy._

examples/todo_app_sqlite/e2e/Cargo.toml

@@ -0,0 +1,18 @@
+[package]
+name = "todo_app_sqlite_e2e"
+version = "0.1.0"
+edition = "2021"
+
+[dev-dependencies]
+anyhow = "1.0.72"
+async-trait = "0.1.72"
+cucumber = "0.19.1"
+fantoccini = "0.19.3"
+pretty_assertions = "1.4.0"
+serde_json = "1.0.104"
+tokio = { version = "1.29.1", features = ["macros", "rt-multi-thread", "time"] }
+url = "2.4.0"
+
+[[test]]
+name = "manage_todos"
+harness = false       # Allow Cucumber to print output instead of libtest

examples/todo_app_sqlite/e2e/Makefile.toml

@@ -0,0 +1,11 @@
+extend = { path = "../../cargo-make/main.toml" }
+
+[tasks.test]
+env = { RUN_AUTOMATICALLY = false }
+condition = { env_true = ["RUN_AUTOMATICALLY"] }
+
+[tasks.ci]
+
+[tasks.test-ui]
+command = "cargo"
+args = ["test", "--test", "manage_todos", "--", "--fail-fast", "${@}"]

examples/todo_app_sqlite/e2e/README.md

@@ -0,0 +1,33 @@
+# E2E Testing
+
+This example demonstrates e2e testing with Rust using executable requirements.
+
+## Testing Stack
+
+|    |      Role      |  Description |
+|---|---|---|
+| [Cucumber](https://github.com/cucumber-rs/cucumber/tree/main) | Test Runner | Run [Gherkin](https://cucumber.io/docs/gherkin/reference/) specifications as Rust tests |
+| [Fantoccini](https://github.com/jonhoo/fantoccini/tree/main) | Browser Client | Interact with web pages through WebDriver |
+| [Cargo Leptos ](https://github.com/leptos-rs/cargo-leptos) | Build Tool |  Compile example and start the server and end-2-end tests |
+| [chromedriver](https://chromedriver.chromium.org/downloads) | WebDriver | Provide WebDriver for Chrome
+
+## Testing Organization
+
+Testing is organized around what a user can do and see/not see.
+
+Here is a brief overview of how things fit together.
+
+```bash
+features                    # Specify test scenarios
+tests
+├── fixtures
+│   ├── action.rs           # Perform a user action (click, type, etc.)
+│   ├── check.rs            # Assert what a user can see/not see
+│   ├── find.rs             # Query page elements
+│   ├── mod.rs
+│   └── world
+│       ├── action_steps.rs # Map Gherkin steps to user actions
+│       ├── check_steps.rs  # Map Gherkin steps to user expectations
+│       └── mod.rs
+└── manage_todos.rs         # Test main 
+```

examples/todo_app_sqlite/e2e/features/add_todo.feature

@@ -0,0 +1,17 @@
+@add_todo
+Feature: Add Todo
+
+    Background:
+        Given I see the app
+
+    @add_todo-see
+    Scenario: Should see the todo
+        Given I set the todo as Buy Bread
+        When I click the Add button
+        Then I see the todo named Buy Bread
+
+    # @allow.skipped
+    @add_todo-style
+    Scenario: Should see the pending todo
+        When I add a todo as Buy Oranges
+        Then I see the pending todo

examples/todo_app_sqlite/e2e/features/delete_todo.feature

@@ -0,0 +1,18 @@
+@delete_todo
+Feature: Delete Todo
+
+    Background:
+        Given I see the app
+
+    @serial
+    @delete_todo-remove
+    Scenario: Should not see the deleted todo
+        Given I add a todo as Buy Yogurt
+        When I delete the todo named Buy Yogurt
+        Then I do not see the todo named Buy Yogurt
+
+    @serial
+    @delete_todo-message
+    Scenario: Should see the empty list message
+        When I empty the todo list
+        Then I see the empty list message is No tasks were found.

examples/todo_app_sqlite/e2e/features/open_app.feature

@@ -0,0 +1,12 @@
+@open_app
+Feature: Open App
+
+  @open_app-title
+  Scenario: Should see the home page title
+    When I open the app
+    Then I see the page title is My Tasks
+
+  @open_app-label
+  Scenario: Should see the input label
+    When I open the app
+    Then I see the label of the input is Add a Todo

examples/todo_app_sqlite/e2e/tests/fixtures/action.rs

@@ -0,0 +1,60 @@
+use super::{find, world::HOST};
+use anyhow::Result;
+use fantoccini::Client;
+use std::result::Result::Ok;
+use tokio::{self, time};
+
+pub async fn goto_path(client: &Client, path: &str) -> Result<()> {
+    let url = format!("{}{}", HOST, path);
+    client.goto(&url).await?;
+
+    Ok(())
+}
+
+pub async fn add_todo(client: &Client, text: &str) -> Result<()> {
+    fill_todo(client, text).await?;
+    click_add_button(client).await?;
+    Ok(())
+}
+
+pub async fn fill_todo(client: &Client, text: &str) -> Result<()> {
+    let textbox = find::todo_input(client).await;
+    textbox.send_keys(text).await?;
+
+    Ok(())
+}
+
+pub async fn click_add_button(client: &Client) -> Result<()> {
+    let add_button = find::add_button(client).await;
+    add_button.click().await?;
+
+    Ok(())
+}
+
+pub async fn empty_todo_list(client: &Client) -> Result<()> {
+    let todos = find::todos(client).await;
+
+    for _todo in todos {
+        let _ = delete_first_todo(client).await?;
+    }
+
+    Ok(())
+}
+
+pub async fn delete_first_todo(client: &Client) -> Result<()> {
+    if let Some(element) = find::first_delete_button(client).await {
+        element.click().await.expect("Failed to delete todo");
+        time::sleep(time::Duration::from_millis(250)).await;
+    }
+
+    Ok(())
+}
+
+pub async fn delete_todo(client: &Client, text: &str) -> Result<()> {
+    if let Some(element) = find::delete_button(client, text).await {
+        element.click().await?;
+        time::sleep(time::Duration::from_millis(250)).await;
+    }
+
+    Ok(())
+}

examples/todo_app_sqlite/e2e/tests/fixtures/check.rs

@@ -0,0 +1,57 @@
+use super::find;
+use anyhow::{Ok, Result};
+use fantoccini::{Client, Locator};
+use pretty_assertions::assert_eq;
+
+pub async fn text_on_element(
+    client: &Client,
+    selector: &str,
+    expected_text: &str,
+) -> Result<()> {
+    let element = client
+        .wait()
+        .for_element(Locator::Css(selector))
+        .await
+        .expect(
+            format!("Element not found by Css selector `{}`", selector)
+                .as_str(),
+        );
+
+    let actual = element.text().await?;
+    assert_eq!(&actual, expected_text);
+
+    Ok(())
+}
+
+pub async fn todo_present(
+    client: &Client,
+    text: &str,
+    expected: bool,
+) -> Result<()> {
+    let todo_present = is_todo_present(client, text).await;
+
+    assert_eq!(todo_present, expected);
+
+    Ok(())
+}
+
+async fn is_todo_present(client: &Client, text: &str) -> bool {
+    let todos = find::todos(client).await;
+
+    for todo in todos {
+        let todo_title = todo.text().await.expect("Todo title not found");
+        if todo_title == text {
+            return true;
+        }
+    }
+
+    false
+}
+
+pub async fn todo_is_pending(client: &Client) -> Result<()> {
+    if let None = find::pending_todo(client).await {
+        assert!(false, "Pending todo not found");
+    }
+
+    Ok(())
+}

examples/todo_app_sqlite/e2e/tests/fixtures/find.rs

@@ -0,0 +1,63 @@
+use fantoccini::{elements::Element, Client, Locator};
+
+pub async fn todo_input(client: &Client) -> Element {
+    let textbox = client
+        .wait()
+        .for_element(Locator::Css("input[name='title"))
+        .await
+        .expect("Todo textbox not found");
+
+    textbox
+}
+
+pub async fn add_button(client: &Client) -> Element {
+    let button = client
+        .wait()
+        .for_element(Locator::Css("input[value='Add']"))
+        .await
+        .expect("");
+
+    button
+}
+
+pub async fn first_delete_button(client: &Client) -> Option<Element> {
+    if let Ok(element) = client
+        .wait()
+        .for_element(Locator::Css("li:first-child input[value='X']"))
+        .await
+    {
+        return Some(element);
+    }
+
+    None
+}
+
+pub async fn delete_button(client: &Client, text: &str) -> Option<Element> {
+    let selector = format!("//*[text()='{text}']//input[@value='X']");
+    if let Ok(element) =
+        client.wait().for_element(Locator::XPath(&selector)).await
+    {
+        return Some(element);
+    }
+
+    None
+}
+
+pub async fn pending_todo(client: &Client) -> Option<Element> {
+    if let Ok(element) =
+        client.wait().for_element(Locator::Css(".pending")).await
+    {
+        return Some(element);
+    }
+
+    None
+}
+
+pub async fn todos(client: &Client) -> Vec<Element> {
+    let todos = client
+        .find_all(Locator::Css("li"))
+        .await
+        .expect("Todo List not found");
+
+    todos
+}

examples/todo_app_sqlite/e2e/tests/fixtures/mod.rs

@@ -0,0 +1,4 @@
+pub mod action;
+pub mod check;
+pub mod find;
+pub mod world;

examples/todo_app_sqlite/e2e/tests/fixtures/world/action_steps.rs

@@ -0,0 +1,57 @@
+use crate::fixtures::{action, world::AppWorld};
+use anyhow::{Ok, Result};
+use cucumber::{given, when};
+
+#[given("I see the app")]
+#[when("I open the app")]
+async fn i_open_the_app(world: &mut AppWorld) -> Result<()> {
+    let client = &world.client;
+    action::goto_path(client, "").await?;
+
+    Ok(())
+}
+
+#[given(regex = "^I add a todo as (.*)$")]
+#[when(regex = "^I add a todo as (.*)$")]
+async fn i_add_a_todo_titled(world: &mut AppWorld, text: String) -> Result<()> {
+    let client = &world.client;
+    action::add_todo(client, text.as_str()).await?;
+
+    Ok(())
+}
+
+#[given(regex = "^I set the todo as (.*)$")]
+async fn i_set_the_todo_as(world: &mut AppWorld, text: String) -> Result<()> {
+    let client = &world.client;
+    action::fill_todo(client, &text).await?;
+
+    Ok(())
+}
+
+#[when(regex = "I click the Add button$")]
+async fn i_click_the_button(world: &mut AppWorld) -> Result<()> {
+    let client = &world.client;
+    action::click_add_button(client).await?;
+
+    Ok(())
+}
+
+#[when(regex = "^I delete the todo named (.*)$")]
+async fn i_delete_the_todo_named(
+    world: &mut AppWorld,
+    text: String,
+) -> Result<()> {
+    let client = &world.client;
+    action::delete_todo(client, text.as_str()).await?;
+
+    Ok(())
+}
+
+#[given("the todo list is empty")]
+#[when("I empty the todo list")]
+async fn i_empty_the_todo_list(world: &mut AppWorld) -> Result<()> {
+    let client = &world.client;
+    action::empty_todo_list(client).await?;
+
+    Ok(())
+}

examples/todo_app_sqlite/e2e/tests/fixtures/world/check_steps.rs

@@ -0,0 +1,67 @@
+use crate::fixtures::{check, world::AppWorld};
+use anyhow::{Ok, Result};
+use cucumber::then;
+
+#[then(regex = "^I see the page title is (.*)$")]
+async fn i_see_the_page_title_is(
+    world: &mut AppWorld,
+    text: String,
+) -> Result<()> {
+    let client = &world.client;
+    check::text_on_element(client, "h1", &text).await?;
+
+    Ok(())
+}
+
+#[then(regex = "^I see the label of the input is (.*)$")]
+async fn i_see_the_label_of_the_input_is(
+    world: &mut AppWorld,
+    text: String,
+) -> Result<()> {
+    let client = &world.client;
+    check::text_on_element(client, "label", &text).await?;
+
+    Ok(())
+}
+
+#[then(regex = "^I see the todo named (.*)$")]
+async fn i_see_the_todo_is_present(
+    world: &mut AppWorld,
+    text: String,
+) -> Result<()> {
+    let client = &world.client;
+    check::todo_present(client, text.as_str(), true).await?;
+
+    Ok(())
+}
+
+#[then("I see the pending todo")]
+async fn i_see_the_pending_todo(world: &mut AppWorld) -> Result<()> {
+    let client = &world.client;
+
+    check::todo_is_pending(client).await?;
+
+    Ok(())
+}
+
+#[then(regex = "^I see the empty list message is (.*)$")]
+async fn i_see_the_empty_list_message_is(
+    world: &mut AppWorld,
+    text: String,
+) -> Result<()> {
+    let client = &world.client;
+    check::text_on_element(client, "ul p", &text).await?;
+
+    Ok(())
+}
+
+#[then(regex = "^I do not see the todo named (.*)$")]
+async fn i_do_not_see_the_todo_is_present(
+    world: &mut AppWorld,
+    text: String,
+) -> Result<()> {
+    let client = &world.client;
+    check::todo_present(client, text.as_str(), false).await?;
+
+    Ok(())
+}

examples/todo_app_sqlite/e2e/tests/fixtures/world/mod.rs

@@ -0,0 +1,39 @@
+pub mod action_steps;
+pub mod check_steps;
+
+use anyhow::Result;
+use cucumber::World;
+use fantoccini::{
+    error::NewSessionError, wd::Capabilities, Client, ClientBuilder,
+};
+
+pub const HOST: &str = "http://127.0.0.1:3000";
+
+#[derive(Debug, World)]
+#[world(init = Self::new)]
+pub struct AppWorld {
+    pub client: Client,
+}
+
+impl AppWorld {
+    async fn new() -> Result<Self, anyhow::Error> {
+        let webdriver_client = build_client().await?;
+
+        Ok(Self {
+            client: webdriver_client,
+        })
+    }
+}
+
+async fn build_client() -> Result<Client, NewSessionError> {
+    let mut cap = Capabilities::new();
+    let arg = serde_json::from_str("{\"args\": [\"-headless\"]}").unwrap();
+    cap.insert("goog:chromeOptions".to_string(), arg);
+
+    let client = ClientBuilder::native()
+        .capabilities(cap)
+        .connect("http://localhost:4444")
+        .await?;
+
+    Ok(client)
+}

examples/todo_app_sqlite/e2e/tests/manage_todos.rs

@@ -0,0 +1,14 @@
+mod fixtures;
+
+use anyhow::Result;
+use cucumber::World;
+use fixtures::world::AppWorld;
+
+#[tokio::main]
+async fn main() -> Result<()> {
+    AppWorld::cucumber()
+        .fail_on_skipped()
+        .run_and_exit("./features")
+        .await;
+    Ok(())
+}

examples/todo_app_sqlite/src/main.rs

@@ -1,5 +1,4 @@
 use cfg_if::cfg_if;
-use leptos::*;
 mod todo;
 
 // boilerplate to run in different modes
@@ -9,6 +8,7 @@ cfg_if! {
         use actix_files::{Files};
         use actix_web::*;
         use crate::todo::*;
+        use leptos::*;
         use leptos_actix::{generate_route_list, LeptosRoutes};
 
         #[get("/style.css")]

examples/todo_app_sqlite_axum/Cargo.toml

@@ -65,7 +65,8 @@ site-addr = "127.0.0.1:3000"
 # The port to use for automatic reload monitoring
 reload-port = 3001
 # [Optional] Command to use when running end2end tests. It will run in the end2end dir.
-end2end-cmd = "npx playwright test"
+end2end-cmd = "cargo make test-ui"
+end2end-dir = "e2e"
 #  The browserlist query used for optimizing the CSS.
 browserquery = "defaults"
 # Set by cargo-leptos watch when building with tha tool. Controls whether autoreload JS will be included in the head

examples/todo_app_sqlite_axum/Makefile.toml

@@ -1 +1,24 @@
-extend = { path = "../cargo-make/main.toml" }
+extend = [
+    { path = "../cargo-make/main.toml" },
+    { path = "../cargo-make/webdriver.toml" },
+    { path = "../cargo-make/cargo-leptos.toml" },
+]
+
+[env]
+APP_PROCESS_NAME = "todo_app_sqlite_axum"
+
+[tasks.integration-test]
+dependencies = [
+    "install-cargo-leptos",
+    "start-webdriver",
+    "test-e2e-with-auto-start",
+]
+
+[tasks.test-e2e-with-auto-start]
+command = "cargo"
+args = ["leptos", "end-to-end"]
+
+[tasks.test-ui]
+cwd = "./e2e"
+command = "cargo"
+args = ["make", "test-ui", "${@}"]

examples/todo_app_sqlite_axum/README.md

@@ -40,3 +40,23 @@ wasm-pack build --target=web --debug --no-default-features --features=hydrate
 ```bash
 cargo run --no-default-features --features=ssr
 ```
+
+## Testing
+
+This example includes quality checks and end-to-end testing.
+
+To get started run this once.
+
+```bash
+cargo make ci
+```
+
+To only run the UI tests...
+
+```bash
+cargo make start-webdriver
+cargo leptos watch # or cargo run...
+cargo make test-ui
+```
+
+_See the [E2E README](./e2e/README.md) for more information about the testing strategy._

examples/todo_app_sqlite_axum/e2e/Cargo.toml

@@ -0,0 +1,18 @@
+[package]
+name = "todo_app_sqlite_axum_e2e"
+version = "0.1.0"
+edition = "2021"
+
+[dev-dependencies]
+anyhow = "1.0.72"
+async-trait = "0.1.72"
+cucumber = "0.19.1"
+fantoccini = "0.19.3"
+pretty_assertions = "1.4.0"
+serde_json = "1.0.104"
+tokio = { version = "1.29.1", features = ["macros", "rt-multi-thread", "time"] }
+url = "2.4.0"
+
+[[test]]
+name = "manage_todos"
+harness = false       # Allow Cucumber to print output instead of libtest

examples/todo_app_sqlite_axum/e2e/Makefile.toml

@@ -0,0 +1,11 @@
+extend = { path = "../../cargo-make/main.toml" }
+
+[tasks.test]
+env = { RUN_AUTOMATICALLY = false }
+condition = { env_true = ["RUN_AUTOMATICALLY"] }
+
+[tasks.ci]
+
+[tasks.test-ui]
+command = "cargo"
+args = ["test", "--test", "manage_todos", "--", "--fail-fast", "${@}"]

examples/todo_app_sqlite_axum/e2e/README.md

@@ -0,0 +1,33 @@
+# E2E Testing
+
+This example demonstrates e2e testing with Rust using executable requirements.
+
+## Testing Stack
+
+|    |      Role      |  Description |
+|---|---|---|
+| [Cucumber](https://github.com/cucumber-rs/cucumber/tree/main) | Test Runner | Run [Gherkin](https://cucumber.io/docs/gherkin/reference/) specifications as Rust tests |
+| [Fantoccini](https://github.com/jonhoo/fantoccini/tree/main) | Browser Client | Interact with web pages through WebDriver |
+| [Cargo Leptos ](https://github.com/leptos-rs/cargo-leptos) | Build Tool |  Compile example and start the server and end-2-end tests |
+| [chromedriver](https://chromedriver.chromium.org/downloads) | WebDriver | Provide WebDriver for Chrome
+
+## Testing Organization
+
+Testing is organized around what a user can do and see/not see.
+
+Here is a brief overview of how things fit together.
+
+```bash
+features                    # Specify test scenarios
+tests
+├── fixtures
+│   ├── action.rs           # Perform a user action (click, type, etc.)
+│   ├── check.rs            # Assert what a user can see/not see
+│   ├── find.rs             # Query page elements
+│   ├── mod.rs
+│   └── world
+│       ├── action_steps.rs # Map Gherkin steps to user actions
+│       ├── check_steps.rs  # Map Gherkin steps to user expectations
+│       └── mod.rs
+└── manage_todos.rs         # Test main 
+```

examples/todo_app_sqlite_axum/e2e/features/add_todo.feature

@@ -0,0 +1,16 @@
+@add_todo
+Feature: Add Todo
+
+    Background:
+        Given I see the app
+
+    @add_todo-see
+    Scenario: Should see the todo
+        Given I set the todo as Buy Bread
+        When I click the Add button
+        Then I see the todo named Buy Bread
+
+    @add_todo-style
+    Scenario: Should see the pending todo
+        When I add a todo as Buy Oranges
+        Then I see the pending todo

examples/todo_app_sqlite_axum/e2e/features/delete_todo.feature

@@ -0,0 +1,18 @@
+@delete_todo
+Feature: Delete Todo
+
+    Background:
+        Given I see the app
+
+    @serial
+    @delete_todo-remove
+    Scenario: Should not see the deleted todo
+        Given I add a todo as Buy Yogurt
+        When I delete the todo named Buy Yogurt
+        Then I do not see the todo named Buy Yogurt
+
+    @serial
+    @delete_todo-message
+    Scenario: Should see the empty list message
+        When I empty the todo list
+        Then I see the empty list message is No tasks were found.

examples/todo_app_sqlite_axum/e2e/features/open_app.feature

@@ -0,0 +1,12 @@
+@open_app
+Feature: Open App
+
+  @open_app-title
+  Scenario: Should see the home page title
+    When I open the app
+    Then I see the page title is My Tasks
+
+  @open_app-label
+  Scenario: Should see the input label
+    When I open the app
+    Then I see the label of the input is Add a Todo

examples/todo_app_sqlite_axum/e2e/tests/fixtures/action.rs

@@ -0,0 +1,60 @@
+use super::{find, world::HOST};
+use anyhow::Result;
+use fantoccini::Client;
+use std::result::Result::Ok;
+use tokio::{self, time};
+
+pub async fn goto_path(client: &Client, path: &str) -> Result<()> {
+    let url = format!("{}{}", HOST, path);
+    client.goto(&url).await?;
+
+    Ok(())
+}
+
+pub async fn add_todo(client: &Client, text: &str) -> Result<()> {
+    fill_todo(client, text).await?;
+    click_add_button(client).await?;
+    Ok(())
+}
+
+pub async fn fill_todo(client: &Client, text: &str) -> Result<()> {
+    let textbox = find::todo_input(client).await;
+    textbox.send_keys(text).await?;
+
+    Ok(())
+}
+
+pub async fn click_add_button(client: &Client) -> Result<()> {
+    let add_button = find::add_button(client).await;
+    add_button.click().await?;
+
+    Ok(())
+}
+
+pub async fn empty_todo_list(client: &Client) -> Result<()> {
+    let todos = find::todos(client).await;
+
+    for _todo in todos {
+        let _ = delete_first_todo(client).await?;
+    }
+
+    Ok(())
+}
+
+pub async fn delete_first_todo(client: &Client) -> Result<()> {
+    if let Some(element) = find::first_delete_button(client).await {
+        element.click().await.expect("Failed to delete todo");
+        time::sleep(time::Duration::from_millis(250)).await;
+    }
+
+    Ok(())
+}
+
+pub async fn delete_todo(client: &Client, text: &str) -> Result<()> {
+    if let Some(element) = find::delete_button(client, text).await {
+        element.click().await?;
+        time::sleep(time::Duration::from_millis(250)).await;
+    }
+
+    Ok(())
+}

examples/todo_app_sqlite_axum/e2e/tests/fixtures/check.rs

@@ -0,0 +1,57 @@
+use super::find;
+use anyhow::{Ok, Result};
+use fantoccini::{Client, Locator};
+use pretty_assertions::assert_eq;
+
+pub async fn text_on_element(
+    client: &Client,
+    selector: &str,
+    expected_text: &str,
+) -> Result<()> {
+    let element = client
+        .wait()
+        .for_element(Locator::Css(selector))
+        .await
+        .expect(
+            format!("Element not found by Css selector `{}`", selector)
+                .as_str(),
+        );
+
+    let actual = element.text().await?;
+    assert_eq!(&actual, expected_text);
+
+    Ok(())
+}
+
+pub async fn todo_present(
+    client: &Client,
+    text: &str,
+    expected: bool,
+) -> Result<()> {
+    let todo_present = is_todo_present(client, text).await;
+
+    assert_eq!(todo_present, expected);
+
+    Ok(())
+}
+
+async fn is_todo_present(client: &Client, text: &str) -> bool {
+    let todos = find::todos(client).await;
+
+    for todo in todos {
+        let todo_title = todo.text().await.expect("Todo title not found");
+        if todo_title == text {
+            return true;
+        }
+    }
+
+    false
+}
+
+pub async fn todo_is_pending(client: &Client) -> Result<()> {
+    if let None = find::pending_todo(client).await {
+        assert!(false, "Pending todo not found");
+    }
+
+    Ok(())
+}

examples/todo_app_sqlite_axum/e2e/tests/fixtures/find.rs

@@ -0,0 +1,63 @@
+use fantoccini::{elements::Element, Client, Locator};
+
+pub async fn todo_input(client: &Client) -> Element {
+    let textbox = client
+        .wait()
+        .for_element(Locator::Css("input[name='title"))
+        .await
+        .expect("Todo textbox not found");
+
+    textbox
+}
+
+pub async fn add_button(client: &Client) -> Element {
+    let button = client
+        .wait()
+        .for_element(Locator::Css("input[value='Add']"))
+        .await
+        .expect("");
+
+    button
+}
+
+pub async fn first_delete_button(client: &Client) -> Option<Element> {
+    if let Ok(element) = client
+        .wait()
+        .for_element(Locator::Css("li:first-child input[value='X']"))
+        .await
+    {
+        return Some(element);
+    }
+
+    None
+}
+
+pub async fn delete_button(client: &Client, text: &str) -> Option<Element> {
+    let selector = format!("//*[text()='{text}']//input[@value='X']");
+    if let Ok(element) =
+        client.wait().for_element(Locator::XPath(&selector)).await
+    {
+        return Some(element);
+    }
+
+    None
+}
+
+pub async fn pending_todo(client: &Client) -> Option<Element> {
+    if let Ok(element) =
+        client.wait().for_element(Locator::Css(".pending")).await
+    {
+        return Some(element);
+    }
+
+    None
+}
+
+pub async fn todos(client: &Client) -> Vec<Element> {
+    let todos = client
+        .find_all(Locator::Css("li"))
+        .await
+        .expect("Todo List not found");
+
+    todos
+}

examples/todo_app_sqlite_axum/e2e/tests/fixtures/mod.rs

@@ -0,0 +1,4 @@
+pub mod action;
+pub mod check;
+pub mod find;
+pub mod world;

examples/todo_app_sqlite_axum/e2e/tests/fixtures/world/action_steps.rs

@@ -0,0 +1,57 @@
+use crate::fixtures::{action, world::AppWorld};
+use anyhow::{Ok, Result};
+use cucumber::{given, when};
+
+#[given("I see the app")]
+#[when("I open the app")]
+async fn i_open_the_app(world: &mut AppWorld) -> Result<()> {
+    let client = &world.client;
+    action::goto_path(client, "").await?;
+
+    Ok(())
+}
+
+#[given(regex = "^I add a todo as (.*)$")]
+#[when(regex = "^I add a todo as (.*)$")]
+async fn i_add_a_todo_titled(world: &mut AppWorld, text: String) -> Result<()> {
+    let client = &world.client;
+    action::add_todo(client, text.as_str()).await?;
+
+    Ok(())
+}
+
+#[given(regex = "^I set the todo as (.*)$")]
+async fn i_set_the_todo_as(world: &mut AppWorld, text: String) -> Result<()> {
+    let client = &world.client;
+    action::fill_todo(client, &text).await?;
+
+    Ok(())
+}
+
+#[when(regex = "I click the Add button$")]
+async fn i_click_the_button(world: &mut AppWorld) -> Result<()> {
+    let client = &world.client;
+    action::click_add_button(client).await?;
+
+    Ok(())
+}
+
+#[when(regex = "^I delete the todo named (.*)$")]
+async fn i_delete_the_todo_named(
+    world: &mut AppWorld,
+    text: String,
+) -> Result<()> {
+    let client = &world.client;
+    action::delete_todo(client, text.as_str()).await?;
+
+    Ok(())
+}
+
+#[given("the todo list is empty")]
+#[when("I empty the todo list")]
+async fn i_empty_the_todo_list(world: &mut AppWorld) -> Result<()> {
+    let client = &world.client;
+    action::empty_todo_list(client).await?;
+
+    Ok(())
+}

examples/todo_app_sqlite_axum/e2e/tests/fixtures/world/check_steps.rs

@@ -0,0 +1,67 @@
+use crate::fixtures::{check, world::AppWorld};
+use anyhow::{Ok, Result};
+use cucumber::then;
+
+#[then(regex = "^I see the page title is (.*)$")]
+async fn i_see_the_page_title_is(
+    world: &mut AppWorld,
+    text: String,
+) -> Result<()> {
+    let client = &world.client;
+    check::text_on_element(client, "h1", &text).await?;
+
+    Ok(())
+}
+
+#[then(regex = "^I see the label of the input is (.*)$")]
+async fn i_see_the_label_of_the_input_is(
+    world: &mut AppWorld,
+    text: String,
+) -> Result<()> {
+    let client = &world.client;
+    check::text_on_element(client, "label", &text).await?;
+
+    Ok(())
+}
+
+#[then(regex = "^I see the todo named (.*)$")]
+async fn i_see_the_todo_is_present(
+    world: &mut AppWorld,
+    text: String,
+) -> Result<()> {
+    let client = &world.client;
+    check::todo_present(client, text.as_str(), true).await?;
+
+    Ok(())
+}
+
+#[then("I see the pending todo")]
+async fn i_see_the_pending_todo(world: &mut AppWorld) -> Result<()> {
+    let client = &world.client;
+
+    check::todo_is_pending(client).await?;
+
+    Ok(())
+}
+
+#[then(regex = "^I see the empty list message is (.*)$")]
+async fn i_see_the_empty_list_message_is(
+    world: &mut AppWorld,
+    text: String,
+) -> Result<()> {
+    let client = &world.client;
+    check::text_on_element(client, "ul p", &text).await?;
+
+    Ok(())
+}
+
+#[then(regex = "^I do not see the todo named (.*)$")]
+async fn i_do_not_see_the_todo_is_present(
+    world: &mut AppWorld,
+    text: String,
+) -> Result<()> {
+    let client = &world.client;
+    check::todo_present(client, text.as_str(), false).await?;
+
+    Ok(())
+}

examples/todo_app_sqlite_axum/e2e/tests/fixtures/world/mod.rs

@@ -0,0 +1,39 @@
+pub mod action_steps;
+pub mod check_steps;
+
+use anyhow::Result;
+use cucumber::World;
+use fantoccini::{
+    error::NewSessionError, wd::Capabilities, Client, ClientBuilder,
+};
+
+pub const HOST: &str = "http://127.0.0.1:3000";
+
+#[derive(Debug, World)]
+#[world(init = Self::new)]
+pub struct AppWorld {
+    pub client: Client,
+}
+
+impl AppWorld {
+    async fn new() -> Result<Self, anyhow::Error> {
+        let webdriver_client = build_client().await?;
+
+        Ok(Self {
+            client: webdriver_client,
+        })
+    }
+}
+
+async fn build_client() -> Result<Client, NewSessionError> {
+    let mut cap = Capabilities::new();
+    let arg = serde_json::from_str("{\"args\": [\"-headless\"]}").unwrap();
+    cap.insert("goog:chromeOptions".to_string(), arg);
+
+    let client = ClientBuilder::native()
+        .capabilities(cap)
+        .connect("http://localhost:4444")
+        .await?;
+
+    Ok(client)
+}

examples/todo_app_sqlite_axum/e2e/tests/manage_todos.rs

@@ -0,0 +1,14 @@
+mod fixtures;
+
+use anyhow::Result;
+use cucumber::World;
+use fixtures::world::AppWorld;
+
+#[tokio::main]
+async fn main() -> Result<()> {
+    AppWorld::cucumber()
+        .fail_on_skipped()
+        .run_and_exit("./features")
+        .await;
+    Ok(())
+}

examples/todo_app_sqlite_axum/src/lib.rs

@@ -13,7 +13,7 @@ cfg_if! {
 
         #[wasm_bindgen]
         pub fn hydrate() {
-            _ = console_log::init_with_level(log::Level::Debug);
+            _ = console_log::init_with_level(log::Level::Error);
             console_error_panic_hook::set_once();
 
             leptos::mount_to_body(|cx| {

examples/todo_app_sqlite_axum/src/main.rs

@@ -29,7 +29,7 @@ cfg_if! {
 
     #[tokio::main]
     async fn main() {
-        simple_logger::init_with_level(log::Level::Debug).expect("couldn't initialize logging");
+        simple_logger::init_with_level(log::Level::Error).expect("couldn't initialize logging");
 
         let _conn = db().await.expect("couldn't connect to DB");
         /* sqlx::migrate!()

leptos/tests/test_examples/suspense-tests/src/app.rs

@@ -52,12 +52,12 @@ pub fn App(cx: Scope) -> impl IntoView {
                             <Outlet/>
                         }
                     >
-                        <Route path="" view=Nested
-                        <Route path="inside" view=NestedResourceInside
-                        <Route path="single" view=Single
-                        <Route path="parallel" view=Parallel
-                        <Route path="inside-component" view=InsideComponent
-                        <Route path="none" view=None
+                        <Route path="" view=Nested/>
+                        <Route path="inside" view=NestedResourceInside/>
+                        <Route path="single" view=Single/>
+                        <Route path="parallel" view=Parallel/>
+                        <Route path="inside-component" view=InsideComponent/>
+                        <Route path="none" view=None/>
                     </Route>
                     // in-order
                     <Route
@@ -69,12 +69,12 @@ pub fn App(cx: Scope) -> impl IntoView {
                             <Outlet/>
                         }
                     >
-                        <Route path="" view=Nested
-                        <Route path="inside" view=NestedResourceInside
-                        <Route path="single" view=Single
-                        <Route path="parallel" view=Parallel
-                        <Route path="inside-component" view=InsideComponent
-                        <Route path="none" view=None
+                        <Route path="" view=Nested/>
+                        <Route path="inside" view=NestedResourceInside/>
+                        <Route path="single" view=Single/>
+                        <Route path="parallel" view=Parallel/>
+                        <Route path="inside-component" view=InsideComponent/>
+                        <Route path="none" view=None/>
                     </Route>
                     // async
                     <Route
@@ -86,12 +86,12 @@ pub fn App(cx: Scope) -> impl IntoView {
                             <Outlet/>
                         }
                     >
-                        <Route path="" view=Nested
-                        <Route path="inside" view=NestedResourceInside
-                        <Route path="single" view=Single
-                        <Route path="parallel" view=Parallel
-                        <Route path="inside-component" view=InsideComponent
-                        <Route path="none" view=None
+                        <Route path="" view=Nested/>
+                        <Route path="inside" view=NestedResourceInside/>
+                        <Route path="single" view=Single/>
+                        <Route path="parallel" view=Parallel/>
+                        <Route path="inside-component" view=InsideComponent/>
+                        <Route path="none" view=None/>
                     </Route>
                 </Routes>
             </main>

leptos_dom/src/components/dyn_child.rs

@@ -7,7 +7,7 @@ use leptos_reactive::Scope;
 use std::{borrow::Cow, cell::RefCell, fmt, ops::Deref, rc::Rc};
 cfg_if! {
   if #[cfg(all(target_arch = "wasm32", feature = "web"))] {
-    use crate::{mount_child, prepare_to_move, unmount_child, MountKind, Mountable};
+    use crate::{mount_child, prepare_to_move, unmount_child, MountKind, Mountable, Text};
     use leptos_reactive::{create_effect, ScopeDisposer};
     use wasm_bindgen::JsCast;
   }
@@ -347,32 +347,29 @@ where
                     }
                     // Otherwise, we know for sure this is our first time
                     else {
-                        // We need to remove the text created from SSR
-                        if HydrationCtx::is_hydrating()
+                        // If it's a text node, we want to use the old text node
+                        // as the text node for the DynChild, rather than the new
+                        // text node being created during hydration
+                        let new_child = if HydrationCtx::is_hydrating()
                             && new_child.get_text().is_some()
                         {
                             let t = closing
                                 .previous_non_view_marker_sibling()
                                 .unwrap()
-                                .unchecked_into::<web_sys::Element>();
+                                .unchecked_into::<web_sys::Text>();
 
-                            // See note on ssr.rs when matching on `DynChild`
-                            // for more details on why we need to do this for
-                            // release
-                            if !cfg!(debug_assertions) {
-                                t.previous_sibling()
-                                    .unwrap()
-                                    .unchecked_into::<web_sys::Element>()
-                                    .remove();
-                            }
-
-                            t.remove();
-
-                            mount_child(
-                                MountKind::Before(&closing),
-                                &new_child,
-                            );
-                        }
+                            let new_child = match new_child {
+                                View::Text(text) => text,
+                                _ => unreachable!(),
+                            };
+                            t.set_data(&new_child.content);
+                            View::Text(Text {
+                                node: t.unchecked_into(),
+                                content: new_child.content,
+                            })
+                        } else {
+                            new_child
+                        };
 
                         // If we are not hydrating, we simply mount the child
                         if !HydrationCtx::is_hydrating() {

leptos_reactive/Cargo.toml

@@ -17,7 +17,6 @@ miniserde = { version = "0.1", optional = true }
 rkyv = { version = "0.7.39", features = [
   "validation",
   "uuid",
-  "copy",
   "strict",
 ], optional = true }
 bytecheck = { version = "0.7", features = [
@@ -68,7 +67,7 @@ hydrate = [
   "dep:web-sys",
 ]
 ssr = ["dep:tokio"]
-nightly = []
+nightly = ["rkyv?/copy"]
 serde = []
 serde-lite = ["dep:serde-lite"]
 miniserde = ["dep:miniserde"]

router/src/hooks.rs

@@ -51,7 +51,7 @@ where
     let key = key.into();
     let query_map = use_query_map(cx);
     let navigate = use_navigate(cx);
-    let route = use_route(cx);
+    let location = use_location(cx);
 
     let get = create_memo(cx, {
         let key = key.clone();
@@ -72,7 +72,7 @@ where
             }
         }
         let qs = new_query_map.to_query_string();
-        let path = route.path();
+        let path = location.pathname.get();
         let new_url = format!("{path}{qs}");
         let _ = navigate(&new_url, NavigateOptions::default());
     });