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: |

Cargo.toml

@@ -26,22 +26,22 @@ members = [
 exclude = ["benchmarks", "examples"]
 
 [workspace.package]
-version = "0.4.5"
+version = "0.4.8"
 
 [workspace.dependencies]
-leptos = { path = "./leptos", version = "0.4.5" }
-leptos_dom = { path = "./leptos_dom", version = "0.4.5" }
-leptos_hot_reload = { path = "./leptos_hot_reload", version = "0.4.5" }
-leptos_macro = { path = "./leptos_macro", version = "0.4.5" }
-leptos_reactive = { path = "./leptos_reactive", version = "0.4.5" }
-leptos_server = { path = "./leptos_server", version = "0.4.5" }
-server_fn = { path = "./server_fn", version = "0.4.5" }
-server_fn_macro = { path = "./server_fn_macro", version = "0.4.5" }
-server_fn_macro_default = { path = "./server_fn/server_fn_macro_default", version = "0.4.5" }
-leptos_config = { path = "./leptos_config", version = "0.4.5" }
-leptos_router = { path = "./router", version = "0.4.5" }
-leptos_meta = { path = "./meta", version = "0.4.5" }
-leptos_integration_utils = { path = "./integrations/utils", version = "0.4.5" }
+leptos = { path = "./leptos", version = "0.4.8" }
+leptos_dom = { path = "./leptos_dom", version = "0.4.8" }
+leptos_hot_reload = { path = "./leptos_hot_reload", version = "0.4.8" }
+leptos_macro = { path = "./leptos_macro", version = "0.4.8" }
+leptos_reactive = { path = "./leptos_reactive", version = "0.4.8" }
+leptos_server = { path = "./leptos_server", version = "0.4.8" }
+server_fn = { path = "./server_fn", version = "0.4.8" }
+server_fn_macro = { path = "./server_fn_macro", version = "0.4.8" }
+server_fn_macro_default = { path = "./server_fn/server_fn_macro_default", version = "0.4.8" }
+leptos_config = { path = "./leptos_config", version = "0.4.8" }
+leptos_router = { path = "./router", version = "0.4.8" }
+leptos_meta = { path = "./meta", version = "0.4.8" }
+leptos_integration_utils = { path = "./integrations/utils", version = "0.4.8" }
 
 [profile.release]
 codegen-units = 1

Makefile.toml

@@ -20,6 +20,18 @@ cwd = "examples"
 command = "cargo"
 args = ["make", "ci-clean"]
 
+[tasks.check-examples]
+workspace = false
+cwd = "examples"
+command = "cargo"
+args = ["make", "check-clean"]
+
+[tasks.build-examples]
+workspace = false
+cwd = "examples"
+command = "cargo"
+args = ["make", "build-clean"]
+
 [tasks.clean-examples]
 workspace = false
 cwd = "examples"

README.md

@@ -88,8 +88,6 @@ targets = ["wasm32-unknown-unknown"]
 
 The `nightly` feature enables the function call syntax for accessing and setting signals, as opposed to `.get()` and `.set()`. This leads to a consistent mental model in which accessing a reactive value of any kind (a signal, memo, or derived signal) is always represented as a function call. This is only possible with nightly Rust and the `nightly` feature.
 
-> Note: The `nightly` feature is present on the main branch version right now, but not in 0.3.x. For 0.3.x, nightly is the default and `stable` has a special feature.
-
 ## `cargo-leptos`
 
 [`cargo-leptos`](https://github.com/leptos-rs/cargo-leptos) is a build tool that's designed to make it easy to build apps that run on both the client and the server, with seamless integration. The best way to get started with a real Leptos project right now is to use `cargo-leptos` and our starter templates for [Actix](https://github.com/leptos-rs/start) or [Axum](https://github.com/leptos-rs/start-axum).

docs/book/src/02_getting_started.md

@@ -26,7 +26,7 @@ cargo init leptos-tutorial
 cargo add leptos --features=csr,nightly
 ```
 
-Or you can leave off `nighly` if you're using stable Rust
+Or you can leave off `nightly` if you're using stable Rust
 ```bash
 cargo add leptos --features=csr
 ```

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
 

docs/book/src/ssr/23_ssr_modes.md

@@ -84,7 +84,7 @@ Because it offers the best blend of performance characteristics, Leptos defaults
 ```rust
 <Routes>
 	// We’ll load the home page with out-of-order streaming and <Suspense/>
-	<Route path="" view=HomePage
+	<Route path="" view=HomePage/>
 
 	// We'll load the posts with async rendering, so they can set
 	// the title and metadata *after* loading the data

examples/Makefile.toml

@@ -5,34 +5,34 @@ CARGO_MAKE_EXTEND_WORKSPACE_MAKEFILE = true
 CARGO_MAKE_CARGO_BUILD_TEST_FLAGS = ""
 CARGO_MAKE_WORKSPACE_EMULATION = true
 CARGO_MAKE_CRATE_WORKSPACE_MEMBERS = [
-    "animated_show",
-    "counter",
-    "counter_isomorphic",
-    "counters",
-    "counters_stable",
-    "counter_url_query,
-    "counter_without_macros",
-    "error_boundary",
-    "errors_axum",
-    "fetch",
-    "hackernews",
-    "hackernews_axum",
-    "js-framework-benchmark",
-    "leptos-tailwind-axum",
-    "login_with_token_csr_only",
-    "parent_child",
-    "router",
-    "session_auth_axum",
-    "slots",
-    "ssr_modes",
-    "ssr_modes_axum",
-    "tailwind",
-    "tailwind_csr_trunk",
-    "timer",
-    "todo_app_sqlite",
-    "todo_app_sqlite_axum",
-    "todo_app_sqlite_viz",
-    "todomvc",
+  "animated_show",
+  "counter",
+  "counter_isomorphic",
+  "counters",
+  "counters_stable",
+  "counter_url_query",
+  "counter_without_macros",
+  "error_boundary",
+  "errors_axum",
+  "fetch",
+  "hackernews",
+  "hackernews_axum",
+  "js-framework-benchmark",
+  "leptos-tailwind-axum",
+  "login_with_token_csr_only",
+  "parent_child",
+  "router",
+  "session_auth_axum",
+  "slots",
+  "ssr_modes",
+  "ssr_modes_axum",
+  "tailwind",
+  "tailwind_csr_trunk",
+  "timer",
+  "todo_app_sqlite",
+  "todo_app_sqlite_axum",
+  "todo_app_sqlite_viz",
+  "todomvc",
 ]
 
 [tasks.gen-members]
@@ -48,9 +48,9 @@ jq -R -s -c 'split("\n")[:-1]')
 echo "CARGO_MAKE_CRATE_WORKSPACE_MEMBERS = $examples"
 '''
 
-[tasks.test-info]
+[tasks.test-runner-report]
 workspace = false
-description = "report ci test runners for each example - Option [all]"
+description = "report ci test runners for each example - OPTION: [all]"
 script = '''
 BOLD="\e[1m"
 GREEN="\e[0;32m"
@@ -59,63 +59,53 @@ YELLOW="\e[0;33m"
 RESET="\e[0m"
 
 echo
-echo "${YELLOW}CI test runners by example...${RESET}"
+echo "${YELLOW}Test Runner Report${RESET}"
+echo "${ITALIC}Pass the option \"all\" to show all the examples${RESET}"
 echo
 
-examples=$(ls | 
-grep -v README.md | 
-grep -v Makefile.toml | 
-grep -v cargo-make | 
-grep -v gtk |
-sort -u | 
-awk '{print $0 ", "}')
+makefile_paths=$(find . -name Makefile.toml -not -path '*/target/*' |
+  sed 's%./%%' |
+  sed 's%/Makefile.toml%%' |
+  grep -v Makefile.toml |
+  sort -u)
 
-example_root_dir=$(pwd)
+start_path=$(pwd)
 
-for example_dir in $examples
-do
-  clean_name=$(echo $example_dir | sed 's%,%%')
-  cd $clean_name
-
-  c_tests=$(grep -rl --fixed-strings "#[test]" | wc -l)
-  rs_tests=$(grep -rl --fixed-strings "#[rstest]" | wc -l)
-  w_configs=$(grep -rl "\/wasm-test.toml\"" | wc -l)
-  pw_configs=$(grep -rl "\/playwright-test.toml\"" | wc -l)
-  cl_configs=$(grep -rl "\/cargo-leptos-test.toml\"" | wc -l)
+for path in $makefile_paths; do
+  cd $path
 
   test_runner=
 
-  if [ $c_tests -gt 0 ]; then
+  test_count=$(grep -rl -E "#\[(test|rstest)\]" | wc -l)
+  if [ $test_count -gt 0 ]; then
     test_runner="-C"
   fi
 
-  if [ $rs_tests -gt 0 ]; then
-    test_runner=$test_runner"-R"
-  fi
+  while read -r line; do
+    case $line in
+      *"wasm-test.toml"*)
+          test_runner=$test_runner"-W"
+        ;;
+      *"playwright-test.toml"*)
+          test_runner=$test_runner"-P"
+        ;;
+      *"cargo-leptos-test.toml"*)
+          test_runner=$test_runner"-L"
+        ;;
+    esac
+  done <"./Makefile.toml"
 
-  if [ $w_configs -gt 0 ]; then
-    test_runner=$test_runner"-W"
-  fi
-
-  if [ $pw_configs -gt 0 ]; then
-    test_runner=$test_runner"-P"
-  fi
-
-  if [ $cl_configs -gt 0 ]; then
-    test_runner=$test_runner"-L"
-  fi
-  
   if [ ! -z "$1" ]; then
     # Show all examples
-    echo "$clean_name ${BOLD}${test_runner}${RESET}"
+    echo "$path ${BOLD}${test_runner}${RESET}"
   elif [ ! -z $test_runner ]; then
     # Filter out examples that do not run tests in `ci`
-    echo "$clean_name ${BOLD}${test_runner}${RESET}"
+    echo "$path ${BOLD}${test_runner}${RESET}"
   fi
 
-  cd $example_root_dir
+  cd ${start_path}
 done
 echo
-echo "${ITALIC}Test Runners: C = Cargo Test, L = Cargo Leptos Test, P = Playwright Test, R = RS Test, W = WASM Test${RESET}"
+echo "${ITALIC}Runners: C = Cargo Test, L = Cargo Leptos Test, P = Playwright Test, W = WASM Test${RESET}"
 echo
 '''

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/compile.toml

@@ -0,0 +1,11 @@
+[tasks.build]
+toolchain = "nightly"
+command = "cargo"
+args = ["build-all-features"]
+install_crate = "cargo-all-features"
+
+[tasks.check]
+toolchain = "nightly"
+command = "cargo"
+args = ["check-all-features"]
+install_crate = "cargo-all-features"

examples/cargo-make/main.toml

@@ -1,4 +1,5 @@
 extend = [
+    { path = "../cargo-make/compile.toml" },
     { path = "../cargo-make/clean.toml" },
     { path = "../cargo-make/lint.toml" },
     { path = "../cargo-make/node.toml" },
@@ -9,9 +10,6 @@ extend = [
 [tasks.ci]
 dependencies = ["prepare", "lint", "build", "test-flow", "integration-test"]
 
-[tasks.ci-clean]
-dependencies = ["ci", "clean"]
-
 [tasks.prepare]
 dependencies = ["setup-node"]
 
@@ -20,6 +18,17 @@ dependencies = ["check-style"]
 
 [tasks.integration-test]
 
+# Support Local Runs
+
+[tasks.ci-clean]
+dependencies = ["ci", "clean"]
+
+[tasks.check-clean]
+dependencies = ["check", "clean"]
+
+[tasks.build-clean]
+dependencies = ["build", "clean"]
+
 # ALIASES
 
 [tasks.verify-flow]

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/counter/Makefile.toml

@@ -2,13 +2,3 @@ extend = [
     { path = "../cargo-make/main.toml" },
     { path = "../cargo-make/wasm-test.toml" },
 ]
-
-[tasks.build]
-command = "cargo"
-args = ["+nightly", "build-all-features"]
-install_crate = "cargo-all-features"
-
-[tasks.check]
-command = "cargo"
-args = ["+nightly", "check-all-features"]
-install_crate = "cargo-all-features"

examples/counter_isomorphic/Makefile.toml

@@ -1,11 +1 @@
 extend = [{ path = "../cargo-make/main.toml" }]
-
-[tasks.build]
-command = "cargo"
-args = ["+nightly", "build-all-features"]
-install_crate = "cargo-all-features"
-
-[tasks.check]
-command = "cargo"
-args = ["+nightly", "check-all-features"]
-install_crate = "cargo-all-features"

examples/counter_without_macros/Makefile.toml

@@ -4,11 +4,13 @@ extend = [
 ]
 
 [tasks.build]
+toolchain = "stable"
 command = "cargo"
-args = ["+stable", "build-all-features"]
+args = ["build-all-features"]
 install_crate = "cargo-all-features"
 
 [tasks.check]
+toolchain = "stable"
 command = "cargo"
-args = ["+stable", "check-all-features"]
+args = ["check-all-features"]
 install_crate = "cargo-all-features"

examples/counters/Makefile.toml

@@ -2,13 +2,3 @@ extend = [
     { path = "../cargo-make/main.toml" },
     { path = "../cargo-make/wasm-test.toml" },
 ]
-
-[tasks.build]
-command = "cargo"
-args = ["+nightly", "build-all-features"]
-install_crate = "cargo-all-features"
-
-[tasks.check]
-command = "cargo"
-args = ["+nightly", "check-all-features"]
-install_crate = "cargo-all-features"

examples/counters_stable/Makefile.toml

@@ -6,6 +6,13 @@ extend = [
 ]
 
 [tasks.build]
+toolchain = "stable"
 command = "cargo"
-args = ["+stable", "build-all-features"]
+args = ["build-all-features"]
+install_crate = "cargo-all-features"
+
+[tasks.check]
+toolchain = "stable"
+command = "cargo"
+args = ["check-all-features"]
 install_crate = "cargo-all-features"

examples/error_boundary/Makefile.toml

@@ -1,11 +1 @@
 extend = [{ path = "../cargo-make/main.toml" }]
-
-[tasks.build]
-command = "cargo"
-args = ["+nightly", "build-all-features"]
-install_crate = "cargo-all-features"
-
-[tasks.check]
-command = "cargo"
-args = ["+nightly", "check-all-features"]
-install_crate = "cargo-all-features"

examples/errors_axum/Makefile.toml

@@ -1,11 +1 @@
 extend = [{ path = "../cargo-make/main.toml" }]
-
-[tasks.build]
-command = "cargo"
-args = ["+nightly", "build-all-features"]
-install_crate = "cargo-all-features"
-
-[tasks.check]
-command = "cargo"
-args = ["+nightly", "check-all-features"]
-install_crate = "cargo-all-features"

examples/fetch/Makefile.toml

@@ -1,11 +1 @@
 extend = [{ path = "../cargo-make/main.toml" }]
-
-[tasks.build]
-command = "cargo"
-args = ["+nightly", "build-all-features"]
-install_crate = "cargo-all-features"
-
-[tasks.check]
-command = "cargo"
-args = ["+nightly", "check-all-features"]
-install_crate = "cargo-all-features"

examples/hackernews/Makefile.toml

@@ -1,11 +1 @@
 extend = [{ path = "../cargo-make/main.toml" }]
-
-[tasks.build]
-command = "cargo"
-args = ["+nightly", "build-all-features"]
-install_crate = "cargo-all-features"
-
-[tasks.check]
-command = "cargo"
-args = ["+nightly", "check-all-features"]
-install_crate = "cargo-all-features"

examples/hackernews/src/routes/nav.rs

@@ -21,7 +21,7 @@ pub fn Nav(cx: Scope) -> 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>

examples/hackernews_axum/Makefile.toml

@@ -1,11 +1 @@
 extend = [{ path = "../cargo-make/main.toml" }]
-
-[tasks.build]
-command = "cargo"
-args = ["+nightly", "build-all-features"]
-install_crate = "cargo-all-features"
-
-[tasks.check]
-command = "cargo"
-args = ["+nightly", "check-all-features"]
-install_crate = "cargo-all-features"

examples/hackernews_axum/src/routes/nav.rs

@@ -21,7 +21,7 @@ pub fn Nav(cx: Scope) -> 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>

examples/js-framework-benchmark/Makefile.toml

@@ -4,13 +4,15 @@ extend = [
 ]
 
 [tasks.build]
+toolchain = "nightly"
 command = "cargo"
-args = ["+nightly", "build-all-features", "--target", "wasm32-unknown-unknown"]
+args = ["build-all-features", "--target", "wasm32-unknown-unknown"]
 install_crate = "cargo-all-features"
 
 [tasks.check]
+toolchain = "nightly"
 command = "cargo"
-args = ["+nightly", "check-all-features", "--target", "wasm32-unknown-unknown"]
+args = ["check-all-features", "--target", "wasm32-unknown-unknown"]
 install_crate = "cargo-all-features"
 
 [tasks.pre-clippy]

examples/leptos-tailwind-axum/Makefile.toml

@@ -1,11 +1 @@
 extend = [{ path = "../cargo-make/main.toml" }]
-
-[tasks.build]
-command = "cargo"
-args = ["+nightly", "build-all-features"]
-install_crate = "cargo-all-features"
-
-[tasks.check]
-command = "cargo"
-args = ["+nightly", "check-all-features"]
-install_crate = "cargo-all-features"

examples/login_with_token_csr_only/Makefile.toml

@@ -1,11 +1 @@
 extend = { path = "../cargo-make/main.toml" }
-
-[tasks.build]
-command = "cargo"
-args = ["+nightly", "build-all-features"]
-install_crate = "cargo-all-features"
-
-[tasks.check]
-command = "cargo"
-args = ["+nightly", "check-all-features"]
-install_crate = "cargo-all-features"

examples/parent_child/Makefile.toml

@@ -1,11 +1 @@
 extend = [{ path = "../cargo-make/main.toml" }]
-
-[tasks.build]
-command = "cargo"
-args = ["+nightly", "build-all-features"]
-install_crate = "cargo-all-features"
-
-[tasks.check]
-command = "cargo"
-args = ["+nightly", "check-all-features"]
-install_crate = "cargo-all-features"

examples/router/Makefile.toml

@@ -3,13 +3,3 @@ extend = [
     { path = "../cargo-make/trunk_server.toml" },
     { path = "../cargo-make/playwright-test.toml" },
 ]
-
-[tasks.build]
-command = "cargo"
-args = ["+nightly", "build-all-features"]
-install_crate = "cargo-all-features"
-
-[tasks.check]
-command = "cargo"
-args = ["+nightly", "check-all-features"]
-install_crate = "cargo-all-features"

examples/session_auth_axum/Makefile.toml

@@ -1,11 +1 @@
 extend = { path = "../cargo-make/main.toml" }
-
-[tasks.build]
-command = "cargo"
-args = ["+nightly", "build-all-features"]
-install_crate = "cargo-all-features"
-
-[tasks.check]
-command = "cargo"
-args = ["+nightly", "check-all-features"]
-install_crate = "cargo-all-features"

examples/slots/Makefile.toml

@@ -1,11 +1 @@
 extend = [{ path = "../cargo-make/main.toml" }]
-
-[tasks.build]
-command = "cargo"
-args = ["+nightly", "build-all-features"]
-install_crate = "cargo-all-features"
-
-[tasks.check]
-command = "cargo"
-args = ["+nightly", "check-all-features"]
-install_crate = "cargo-all-features"

examples/ssr_modes/Makefile.toml

@@ -1,11 +1 @@
 extend = [{ path = "../cargo-make/main.toml" }]
-
-[tasks.build]
-command = "cargo"
-args = ["+nightly", "build-all-features"]
-install_crate = "cargo-all-features"
-
-[tasks.check]
-command = "cargo"
-args = ["+nightly", "check-all-features"]
-install_crate = "cargo-all-features"

examples/ssr_modes_axum/Makefile.toml

@@ -1,11 +1 @@
 extend = [{ path = "../cargo-make/main.toml" }]
-
-[tasks.build]
-command = "cargo"
-args = ["+nightly", "build-all-features"]
-install_crate = "cargo-all-features"
-
-[tasks.check]
-command = "cargo"
-args = ["+nightly", "check-all-features"]
-install_crate = "cargo-all-features"

examples/tailwind/Makefile.toml

@@ -2,13 +2,3 @@ extend = [
     { path = "../cargo-make/main.toml" },
     { path = "../cargo-make/cargo-leptos-test.toml" },
 ]
-
-[tasks.build]
-command = "cargo"
-args = ["+nightly", "build-all-features"]
-install_crate = "cargo-all-features"
-
-[tasks.check]
-command = "cargo"
-args = ["+nightly", "check-all-features"]
-install_crate = "cargo-all-features"

examples/tailwind_csr_trunk/Makefile.toml

@@ -1,11 +1 @@
 extend = [{ path = "../cargo-make/main.toml" }]
-
-[tasks.build]
-command = "cargo"
-args = ["+nightly", "build-all-features"]
-install_crate = "cargo-all-features"
-
-[tasks.check]
-command = "cargo"
-args = ["+nightly", "check-all-features"]
-install_crate = "cargo-all-features"

examples/timer/Makefile.toml

@@ -1,11 +1 @@
 extend = [{ path = "../cargo-make/main.toml" }]
-
-[tasks.build]
-command = "cargo"
-args = ["+nightly", "build-all-features"]
-install_crate = "cargo-all-features"
-
-[tasks.check]
-command = "cargo"
-args = ["+nightly", "check-all-features"]
-install_crate = "cargo-all-features"

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,20 +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.build]
+[env]
+APP_PROCESS_NAME = "todo_app_sqlite"
+
+[tasks.integration-test]
+dependencies = [
+  "install-cargo-leptos",
+  "start-webdriver",
+  "test-e2e-with-auto-start",
+]
+
+[tasks.test-e2e-with-auto-start]
 command = "cargo"
-args = ["+nightly", "build-all-features"]
-install_crate = "cargo-all-features"
+args = ["leptos", "end-to-end"]
 
-[tasks.check]
-clear = true
-dependencies = ["check-debug", "check-release"]
-
-[tasks.check-debug]
+[tasks.test-ui]
+cwd = "./e2e"
 command = "cargo"
-args = ["+nightly", "check-all-features"]
-install_crate = "cargo-all-features"
-
-[tasks.check-release]
-command = "cargo"
-args = ["+nightly", "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,11 +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.build]
-command = "cargo"
-args = ["+nightly", "build-all-features"]
-install_crate = "cargo-all-features"
+[env]
+APP_PROCESS_NAME = "todo_app_sqlite_axum"
 
-[tasks.check]
+[tasks.integration-test]
+dependencies = [
+    "install-cargo-leptos",
+    "start-webdriver",
+    "test-e2e-with-auto-start",
+]
+
+[tasks.test-e2e-with-auto-start]
 command = "cargo"
-args = ["+nightly", "check-all-features"]
-install_crate = "cargo-all-features"
+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!()

examples/todo_app_sqlite_viz/Makefile.toml

@@ -1,11 +1 @@
 extend = { path = "../cargo-make/main.toml" }
-
-[tasks.build]
-command = "cargo"
-args = ["+nightly", "build-all-features"]
-install_crate = "cargo-all-features"
-
-[tasks.check]
-command = "cargo"
-args = ["+nightly", "check-all-features"]
-install_crate = "cargo-all-features"

examples/todomvc/Makefile.toml

@@ -3,13 +3,3 @@ extend = { path = "../cargo-make/main.toml" }
 [tasks.setup-node]
 env = { SETUP_NODE = false }
 condition = { env_true = ["SETUP_NODE"] }
-
-[tasks.build]
-command = "cargo"
-args = ["+nightly", "build-all-features"]
-install_crate = "cargo-all-features"
-
-[tasks.check]
-command = "cargo"
-args = ["+nightly", "check-all-features"]
-install_crate = "cargo-all-features"

integrations/utils/src/lib.rs

@@ -14,7 +14,7 @@ fn autoreload(nonce_str: &str, options: &LeptosOptions) -> String {
             r#"
                 <script crossorigin=""{nonce_str}>(function () {{
                     {}
-                    var ws = new WebSocket('ws://{site_ip}:{reload_port}/live_reload');
+                    let ws = new WebSocket('ws://{site_ip}:{reload_port}/live_reload');
                     ws.onmessage = (ev) => {{
                         let msg = JSON.parse(ev.data);
                         if (msg.all) window.location.reload();

leptos/Cargo.toml

@@ -4,7 +4,7 @@ version = { workspace = true }
 edition = "2021"
 authors = ["Greg Johnston"]
 license = "MIT"
-repository = "https://github.com/gbj/leptos"
+repository = "https://github.com/leptos-rs/leptos"
 description = "Leptos is a full-stack, isomorphic Rust web framework leveraging fine-grained reactivity to build declarative user interfaces."
 readme = "../README.md"
 
@@ -46,6 +46,7 @@ ssr = [
   "leptos_macro/ssr",
   "leptos_reactive/ssr",
   "leptos_server/ssr",
+  "server_fn/ssr",
 ]
 nightly = [
   "leptos_dom/nightly",

leptos/src/animated_show.rs

@@ -98,7 +98,7 @@ pub fn AnimatedShow(
     });
 
     on_cleanup(cx, move || {
-        if let Some(h) = handle.get_value() {
+        if let Some(Some(h)) = handle.try_get_value() {
             h.clear();
         }
     });

leptos/src/lib.rs

@@ -156,18 +156,10 @@ pub mod ssr {
     pub use leptos_dom::{ssr::*, ssr_in_order::*};
 }
 pub use leptos_dom::{
-    self, create_node_ref, debug_warn, document, error, ev,
-    helpers::{
-        event_target, event_target_checked, event_target_value,
-        request_animation_frame, request_animation_frame_with_handle,
-        request_idle_callback, request_idle_callback_with_handle, set_interval,
-        set_interval_with_handle, set_timeout, set_timeout_with_handle,
-        window_event_listener, window_event_listener_untyped,
-    },
-    html, log, math, mount_to, mount_to_body, nonce, svg, warn, window,
-    Attribute, Class, CollectView, Errors, Fragment, HtmlElement,
-    IntoAttribute, IntoClass, IntoProperty, IntoStyle, IntoView, NodeRef,
-    Property, View,
+    self, create_node_ref, debug_warn, document, error, ev, helpers::*, html,
+    log, math, mount_to, mount_to_body, nonce, svg, warn, window, Attribute,
+    Class, CollectView, Errors, Fragment, HtmlElement, IntoAttribute,
+    IntoClass, IntoProperty, IntoStyle, IntoView, NodeRef, Property, View,
 };
 
 /// Types to make it easier to handle errors in your application.

leptos/src/suspense_component.rs

@@ -72,9 +72,6 @@ where
     let current_id = HydrationCtx::next_component();
 
     let child = DynChild::new({
-        #[cfg(not(any(feature = "csr", feature = "hydrate")))]
-        let current_id = current_id;
-
         let children = Rc::new(orig_children(cx).into_view(cx));
         #[cfg(not(any(feature = "csr", feature = "hydrate")))]
         let orig_children = Rc::clone(&orig_children);

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;
   }
@@ -222,16 +222,31 @@ where
                         // node
                         let ret = if let Some(prev_t) = prev_t {
                             // Here, our child is also a text node
-                            if let Some(new_t) = new_child.get_text() {
+
+                            // nb: the match/ownership gymnastics here
+                            // are so that, if we can reuse the text node,
+                            // we can take ownership of new_t so we don't clone
+                            // the contents, which in O(n) on the length of the text
+                            if matches!(new_child, View::Text(_)) {
                                 if !was_child_moved && child != new_child {
+                                    let mut new_t = match new_child {
+                                        View::Text(t) => t,
+                                        _ => unreachable!(),
+                                    };
                                     prev_t
                                         .unchecked_ref::<web_sys::Text>()
                                         .set_data(&new_t.content);
 
+                                    // replace new_t's text node with the prev node
+                                    // see discussion: https://github.com/leptos-rs/leptos/pull/1472
+                                    new_t.node = prev_t.clone();
+
+                                    let new_child = View::Text(new_t);
                                     **child_borrow = Some(new_child);
 
                                     (Some(prev_t), disposer)
                                 } else {
+                                    let new_t = new_child.as_text().unwrap();
                                     mount_child(
                                         MountKind::Before(&closing),
                                         &new_child,
@@ -332,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_dom/src/components/each.rs

@@ -377,6 +377,9 @@ where
 
         let component = EachRepr::default();
 
+        #[cfg(all(debug_assertions, target_arch = "wasm32", feature = "web"))]
+        let opening = component.opening.node.clone().unchecked_into();
+
         #[cfg(all(target_arch = "wasm32", feature = "web"))]
         let (children, closing) =
             (component.children.clone(), component.closing.node.clone());
@@ -387,7 +390,11 @@ where
             move |prev_hash_run: Option<HashRun<FxIndexSet<K>>>| {
                 let mut children_borrow = children.borrow_mut();
 
-                #[cfg(all(target_arch = "wasm32", feature = "web"))]
+                #[cfg(all(
+                    not(debug_assertions),
+                    target_arch = "wasm32",
+                    feature = "web"
+                ))]
                 let opening = if let Some(Some(child)) = children_borrow.get(0)
                 {
                     // correctly remove opening <!--<EachItem/>-->

leptos_dom/src/html.rs

@@ -1073,7 +1073,6 @@ impl<El: ElementDescriptor> IntoView for HtmlElement<El> {
             let id = *element.hydration_id();
 
             let mut element = Element::new(element);
-            let children = children;
 
             if attrs.iter_mut().any(|(name, _)| name == "id") {
                 attrs.push(("leptos-hk".into(), format!("_{id}").into()));

leptos_dom/src/hydration.rs

@@ -6,6 +6,9 @@ mod hydration {
     use std::{cell::RefCell, collections::HashMap};
     use wasm_bindgen::JsCast;
 
+    /// See ["createTreeWalker"](https://developer.mozilla.org/en-US/docs/Web/API/Document/createTreeWalker)
+    const FILTER_SHOW_COMMENT: u32 = 0b10000000;
+
     // We can tell if we start in hydration mode by checking to see if the
     // id "_0-1" is present in the DOM. If it is, we know we are hydrating from
     // the server, if not, we are starting off in CSR
@@ -14,7 +17,7 @@ mod hydration {
         let document = crate::document();
         let body = document.body().unwrap();
         let walker = document
-          .create_tree_walker_with_what_to_show(&body, 128)
+          .create_tree_walker_with_what_to_show(&body, FILTER_SHOW_COMMENT)
           .unwrap();
         let mut map = HashMap::new();
         while let Ok(Some(node)) = walker.next_node() {
@@ -34,7 +37,7 @@ mod hydration {
         let document = crate::document();
         let body = document.body().unwrap();
         let walker = document
-          .create_tree_walker_with_what_to_show(&body, 128)
+          .create_tree_walker_with_what_to_show(&body, FILTER_SHOW_COMMENT)
           .unwrap();
         let mut map = HashMap::new();
         while let Ok(Some(node)) = walker.next_node() {

leptos_dom/src/lib.rs

@@ -37,7 +37,7 @@ pub use hydration::{HydrationCtx, HydrationKey};
 use leptos_reactive::Scope;
 #[cfg(not(feature = "nightly"))]
 use leptos_reactive::{
-    MaybeSignal, Memo, ReadSignal, RwSignal, Signal, SignalGet,
+    MaybeProp, MaybeSignal, Memo, ReadSignal, RwSignal, Signal, SignalGet,
 };
 pub use logging::*;
 pub use macro_helpers::*;
@@ -211,6 +211,20 @@ where
     }
 }
 
+#[cfg(not(feature = "nightly"))]
+impl<T> IntoView for MaybeProp<T>
+where
+    T: IntoView + Clone,
+{
+    #[cfg_attr(
+        any(debug_assertions, feature = "ssr"),
+        instrument(level = "trace", name = "MaybeSignal<T>", skip_all)
+    )]
+    fn into_view(self, cx: Scope) -> View {
+        DynChild::new(move || self.get()).into_view(cx)
+    }
+}
+
 /// Collects an iterator or collection into a [`View`].
 pub trait CollectView {
     /// Collects an iterator or collection into a [`View`].
@@ -272,8 +286,12 @@ cfg_if! {
       fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
         use fmt::Write;
 
-        let attrs =
-          self.attrs.iter().map(|(n, v)| format!(" {n}=\"{v}\"")).collect::<String>();
+        let attrs = self.attrs.iter().fold(String::new(), |mut output, (n, v)| {
+            // can safely ignore output
+            // see https://rust-lang.github.io/rust-clippy/master/index.html#/format_collect
+            let _ = write!(output, " {n}=\"{v}\"");
+            output
+        });
 
         if self.is_void {
           write!(f, "<{}{attrs} />", self.name)

leptos_dom/src/ssr.rs

@@ -357,10 +357,10 @@ fn fragments_to_chunks(
         r#"
                 <template id="{fragment_id}f">{html}</template>
                 <script{nonce_str}>
-                    var id = "{fragment_id}";
-                    var open = undefined;
-                    var close = undefined;
-                    var walker = document.createTreeWalker(document.body, NodeFilter.SHOW_COMMENT);
+                    (function() {{ let id = "{fragment_id}";
+                    let open = undefined;
+                    let close = undefined;
+                    let walker = document.createTreeWalker(document.body, NodeFilter.SHOW_COMMENT);
                     while(walker.nextNode()) {{
                          if(walker.currentNode.textContent == `suspense-open-${{id}}`) {{
                            open = walker.currentNode;
@@ -368,12 +368,12 @@ fn fragments_to_chunks(
                            close = walker.currentNode;
                          }}
                       }}
-                    var range = new Range();
+                    let range = new Range();
                     range.setStartAfter(open);
                     range.setEndBefore(close);
                     range.deleteContents();
-                    var tpl = document.getElementById("{fragment_id}f");
-                    close.parentNode.insertBefore(tpl.content.cloneNode(true), close);
+                    let tpl = document.getElementById("{fragment_id}f");
+                    close.parentNode.insertBefore(tpl.content.cloneNode(true), close);}})()
                 </script>
                 "#
       )
@@ -483,18 +483,36 @@ impl View {
                             true,
                             Box::new(move || {
                                 if let Some(child) = *child {
-                                    // On debug builds, `DynChild` has two marker nodes,
-                                    // so there is no way for the text to be merged with
-                                    // surrounding text when the browser parses the HTML,
-                                    // but in release, `DynChild` only has a trailing marker,
-                                    // and the browser automatically merges the dynamic text
-                                    // into one single node, so we need to artificially make the
-                                    // browser create the dynamic text as it's own text node
                                     if let View::Text(t) = child {
-                                        if !cfg!(debug_assertions) {
-                                            format!("<!>{}", t.content).into()
+                                        // if we don't check if the string is empty,
+                                        // the HTML is an empty string; but an empty string
+                                        // is not a text node in HTML, so can't be updated
+                                        // in the future. so we put a one-space text node instead
+                                        let was_empty = t.content.is_empty();
+                                        let content = if was_empty {
+                                            " ".into()
                                         } else {
                                             t.content
+                                        };
+                                        // escape content unless we're in a <script> or <style>
+                                        let content = if dont_escape_text {
+                                            content
+                                        } else {
+                                            html_escape::encode_safe(&content)
+                                                .to_string()
+                                                .into()
+                                        };
+                                        // On debug builds, `DynChild` has two marker nodes,
+                                        // so there is no way for the text to be merged with
+                                        // surrounding text when the browser parses the HTML,
+                                        // but in release, `DynChild` only has a trailing marker,
+                                        // and the browser automatically merges the dynamic text
+                                        // into one single node, so we need to artificially make the
+                                        // browser create the dynamic text as it's own text node
+                                        if !cfg!(debug_assertions) {
+                                            format!("<!>{content}",).into()
+                                        } else {
+                                            content
                                         }
                                     } else {
                                         child.render_to_string_helper(
@@ -710,12 +728,12 @@ pub(crate) fn render_serializers(
         let json = json.replace('<', "\\u003c");
         format!(
             r#"<script{nonce_str}>
-                  var val = {json:?};
+                  (function() {{ let val = {json:?};
                   if(__LEPTOS_RESOURCE_RESOLVERS.get({id})) {{
                       __LEPTOS_RESOURCE_RESOLVERS.get({id})(val)
                   }} else {{
                       __LEPTOS_RESOLVED_RESOURCES.set({id}, val);
-                  }}
+                  }} }})();
               </script>"#,
         )
     })

leptos_dom/src/ssr_in_order.rs

@@ -416,34 +416,50 @@ impl View {
                             Box::new(
                                 move |chunks: &mut VecDeque<StreamChunk>| {
                                     if let Some(child) = *child {
-                                        // On debug builds, `DynChild` has two marker nodes,
-                                        // so there is no way for the text to be merged with
-                                        // surrounding text when the browser parses the HTML,
-                                        // but in release, `DynChild` only has a trailing marker,
-                                        // and the browser automatically merges the dynamic text
-                                        // into one single node, so we need to artificially make the
-                                        // browser create the dynamic text as it's own text node
                                         if let View::Text(t) = child {
-                                            let content = if dont_escape_text {
+                                            // if we don't check if the string is empty,
+                                            // the HTML is an empty string; but an empty string
+                                            // is not a text node in HTML, so can't be updated
+                                            // in the future. so we put a one-space text node instead
+                                            let was_empty =
+                                                t.content.is_empty();
+                                            let content = if was_empty {
+                                                " ".into()
+                                            } else {
                                                 t.content
+                                            };
+                                            // escape content unless we're in a <script> or <style>
+                                            let content = if dont_escape_text {
+                                                content
                                             } else {
                                                 html_escape::encode_safe(
-                                                    &t.content,
+                                                    &content,
                                                 )
                                                 .to_string()
                                                 .into()
                                             };
+                                            // On debug builds, `DynChild` has two marker nodes,
+                                            // so there is no way for the text to be merged with
+                                            // surrounding text when the browser parses the HTML,
+                                            // but in release, `DynChild` only has a trailing marker,
+                                            // and the browser automatically merges the dynamic text
+                                            // into one single node, so we need to artificially make the
+                                            // browser create the dynamic text as it's own text node
                                             chunks.push_back(
                                                 if !cfg!(debug_assertions) {
                                                     StreamChunk::Sync(
                                                         format!(
                                                             "<!>{}",
-                                                            content
+                                                            html_escape::encode_safe(
+                                                                &content
+                                                            )
                                                         )
                                                         .into(),
                                                     )
                                                 } else {
-                                                    StreamChunk::Sync(content)
+                                                    StreamChunk::Sync(html_escape::encode_safe(
+                                                        &content
+                                                    ).to_string().into())
                                                 },
                                             );
                                         } else {

leptos_macro/Cargo.toml

@@ -33,12 +33,12 @@ log = "0.4"
 typed-builder = "0.14"
 trybuild = "1"
 leptos = { path = "../leptos" }
+insta = "1.29"
 
 [features]
-default = ["ssr"]
 csr = []
 hydrate = []
-ssr = []
+ssr = ["server_fn_macro/ssr"]
 nightly = ["server_fn_macro/nightly"]
 tracing = []
 

leptos_macro/example/src/lib.rs

@@ -28,7 +28,7 @@ pub fn TestComponent(
     /// # use example::TestComponent;
     /// <TestComponent key="hello"/>
     #[prop(optional)]
-    another:usize,
+    another: usize,
     /// rust unclosed
     /// ```view
     /// use example::TestComponent;
@@ -38,3 +38,22 @@ pub fn TestComponent(
     _ = (key, another, and_another);
 }
 
+#[component]
+fn TestMutCallback<'a, F>(
+    cx: Scope,
+    mut callback: F,
+    value: &'a str,
+) -> impl IntoView
+where
+    F: FnMut(u32) + 'static,
+{
+    let value = value.to_owned();
+    view! { cx,
+        <button on:click=move |_| {
+            callback(5);
+        }>
+            {value}
+        </button>
+        <TestComponent key="test"/>
+    }
+}

leptos_macro/src/component.rs

@@ -284,6 +284,8 @@ impl ToTokens for Model {
             ) #ret #(+ #lifetimes)*
             #where_clause
             {
+                // allowed for lifetimes that are needed for props struct
+                #[allow(clippy::needless_lifetimes)]
                 #body
 
                 #destructure_props
@@ -589,12 +591,14 @@ fn prop_builder_fields(vis: &Visibility, props: &[Prop]) -> TokenStream {
                 quote!()
             };
 
+            let PatIdent { ident, by_ref, .. } = &name;
+
             quote! {
                 #docs
                 #builder_docs
                 #builder_attrs
                 #allow_missing_docs
-                #vis #name: #ty,
+                #vis #by_ref #ident: #ty,
             }
         })
         .collect()
@@ -604,7 +608,12 @@ fn prop_names(props: &[Prop]) -> TokenStream {
     props
         .iter()
         .filter(|Prop { ty, .. }| !is_valid_scope_type(ty))
-        .map(|Prop { name, .. }| quote! { #name, })
+        .map(|Prop { name, .. }| {
+            // fields like mutability are removed because unneeded
+            // in the contexts in which this is used
+            let ident = &name.ident;
+            quote! { #ident, }
+        })
         .collect()
 }
 

leptos_macro/src/lib.rs

@@ -32,11 +32,9 @@ impl Default for Mode {
 
 mod params;
 mod view;
-use template::render_template;
-use view::render_view;
+use view::{client_template::render_template, render_view};
 mod component;
 mod slot;
-mod template;
 
 /// The `view` macro uses RSX (like JSX, but Rust!) It follows most of the
 /// same rules as HTML, with the following differences: