Add id to Body

Simplify stable syntax in examples

.github/workflows/ci-changed-examples.yml

@@ -29,4 +29,4 @@ jobs:
     with:
       directory: ${{ matrix.directory }}
       cargo_make_task: "ci"
-      toolchain: nightly
+      toolchain: stable

.github/workflows/ci-examples.yml

@@ -24,4 +24,4 @@ jobs:
     with:
       directory: ${{ matrix.directory }}
       cargo_make_task: "ci"
-      toolchain: nightly
+      toolchain: stable

.github/workflows/ci-semver.yml

@@ -0,0 +1,28 @@
+name: CI semver
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  get-leptos-changed:
+    uses: ./.github/workflows/get-leptos-changed.yml
+
+  test:
+    needs: [get-leptos-changed]
+    if: needs.get-leptos-changed.outputs.leptos_changed == 'true'
+    name: Run semver check (nightly-2024-03-31)
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Semver Checks
+        uses: obi1kenobi/cargo-semver-checks-action@v2
+        with:
+          rust-toolchain: nightly-2024-03-31

.github/workflows/ci-stable-examples.yml

@@ -1,26 +0,0 @@
-name: CI Stable Examples
-
-on:
-  push:
-    branches:
-      - main
-  pull_request:
-    branches:
-      - main
-
-jobs:
-  get-leptos-changed:
-    uses: ./.github/workflows/get-leptos-changed.yml
-
-  test:
-    name: CI
-    needs: [get-leptos-changed]
-    if: needs.get-leptos-changed.outputs.leptos_changed == 'true'
-    strategy:
-      matrix:
-        directory: [examples/counters_stable, examples/counter_without_macros]
-    uses: ./.github/workflows/run-cargo-make-task.yml
-    with:
-      directory: ${{ matrix.directory }}
-      cargo_make_task: "ci"
-      toolchain: stable

.github/workflows/ci.yml

@@ -22,7 +22,6 @@ jobs:
           [
             integrations/actix,
             integrations/axum,
-            integrations/viz,
             integrations/utils,
             leptos,
             leptos_config,
@@ -41,4 +40,4 @@ jobs:
     with:
       directory: ${{ matrix.directory }}
       cargo_make_task: "ci"
-      toolchain: nightly
+      toolchain: nightly-2024-03-31

.github/workflows/get-changed-examples-matrix.yml

@@ -31,10 +31,9 @@ jobs:
           dir_names: true
           dir_names_max_depth: "2"
           files: |
-            examples
-            !examples/cargo-make
-            !examples/gtk
-            !examples/hackernews_js_fetch
+            examples/**
+            !examples/cargo-make/**
+            !examples/gtk/**
             !examples/Makefile.toml
             !examples/*.md
           json: true

.github/workflows/get-example-changed.yml

@@ -21,12 +21,12 @@ jobs:
 
       - name: Get example files that changed
         id: changed-files
-        uses: tj-actions/changed-files@v41
+        uses: tj-actions/changed-files@v43
         with:
           files: |
             examples/**
-            !examples/cargo-make
-            !examples/gtk
+            !examples/cargo-make/**
+            !examples/gtk/**
             !examples/Makefile.toml
             !examples/*.md
 

.github/workflows/get-examples-matrix.yml

@@ -17,8 +17,8 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v4
 
-      - name: Install JQ Tool
-        uses: mbround18/install-jq@v1
+      - name: Install jq
+        run: sudo apt-get install jq
 
       - name: Set Matrix
         id: set-matrix

.github/workflows/get-leptos-changed.yml

@@ -16,10 +16,12 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
 
       - name: Get source files that changed
         id: changed-source
-        uses: tj-actions/changed-files@v41
+        uses: tj-actions/changed-files@v43
         with:
           files: |
             integrations/**

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

@@ -27,11 +27,9 @@ jobs:
       - uses: actions/checkout@v4
 
       - name: Setup Rust
-        uses: actions-rs/toolchain@v1
+        uses: dtolnay/rust-toolchain@master
         with:
           toolchain: ${{ inputs.toolchain }}
-          override: true
-          components: rustfmt
 
       - name: Add wasm32-unknown-unknown
         run: rustup target add wasm32-unknown-unknown
@@ -44,6 +42,18 @@ jobs:
 
       - uses: Swatinem/rust-cache@v2
 
+      - name: Install binstall
+        uses: cargo-bins/cargo-binstall@main
+
+      - name: Install wasm-bindgen
+        run: cargo binstall wasm-bindgen-cli --no-confirm
+
+      - name: Install wasm-pack
+        run: cargo binstall wasm-pack --no-confirm
+
+      - name: Install cargo-leptos
+        run: cargo binstall cargo-leptos --no-confirm
+
       - name: Install Trunk
         uses: jetli/trunk-action@v0.4.0
         with:
@@ -55,9 +65,9 @@ jobs:
       - name: Install Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
 
-      - uses: pnpm/action-setup@v2
+      - uses: pnpm/action-setup@v3
         name: Install pnpm
         id: pnpm-install
         with:
@@ -69,7 +79,7 @@ jobs:
         run: |
           echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
 
-      - uses: actions/cache@v3
+      - uses: actions/cache@v4
         name: Setup pnpm cache
         with:
           path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
@@ -107,6 +117,11 @@ jobs:
             fi
           done
 
+      - name: Install Deno
+        uses: denoland/setup-deno@v1
+        with:
+          deno-version: v1.x
+
       # Run Cargo Make Task
       - name: ${{ inputs.cargo_make_task }}
         run: |

CONTRIBUTING.md

@@ -72,12 +72,19 @@ check-examples`.
 
 ## Before Submitting a PR
 
-We have a fairly extensive CI setup that runs both lints (like `rustfmt` and `clippy`) 
+We have a fairly extensive CI setup that runs both lints (like `rustfmt` and `clippy`)
 and tests on PRs. You can run most of these locally if you have `cargo-make` installed.
 
+Note that some of the `rustfmt` settings used require usage of the nightly compiler.
+Formatting the code using the stable toolchain may result in a wrong code format and
+subsequently CI errors.
+Run `cargo +nightly fmt` if you want to keep the stable toolchain active.
+You may want to let your IDE automatically use the `+nightly` parameter when a
+"format on save" action is used.
+
 If you added an example, make sure to add it to the list in `examples/Makefile.toml`.
 
-From the root directory of the repo, run 
+From the root directory of the repo, run
 - `cargo +nightly fmt`
 - `cargo +nightly make check`
 - `cargo +nightly make test`

Cargo.toml

@@ -16,7 +16,6 @@ members = [
   # integrations
   "integrations/actix",
   "integrations/axum",
-  "integrations/viz",
   "integrations/utils",
 
   # libraries
@@ -26,22 +25,23 @@ members = [
 exclude = ["benchmarks", "examples"]
 
 [workspace.package]
-version = "0.5.6"
+version = "0.6.11"
+rust-version = "1.75"
 
 [workspace.dependencies]
-leptos = { path = "./leptos", version = "0.5.6" }
-leptos_dom = { path = "./leptos_dom", version = "0.5.6" }
-leptos_hot_reload = { path = "./leptos_hot_reload", version = "0.5.6" }
-leptos_macro = { path = "./leptos_macro", version = "0.5.6" }
-leptos_reactive = { path = "./leptos_reactive", version = "0.5.6" }
-leptos_server = { path = "./leptos_server", version = "0.5.6" }
-server_fn = { path = "./server_fn", version = "0.5.6" }
-server_fn_macro = { path = "./server_fn_macro", version = "0.5.6" }
-server_fn_macro_default = { path = "./server_fn/server_fn_macro_default", version = "0.5.6" }
-leptos_config = { path = "./leptos_config", version = "0.5.6" }
-leptos_router = { path = "./router", version = "0.5.6" }
-leptos_meta = { path = "./meta", version = "0.5.6" }
-leptos_integration_utils = { path = "./integrations/utils", version = "0.5.6" }
+leptos = { path = "./leptos", version = "0.6.11" }
+leptos_dom = { path = "./leptos_dom", version = "0.6.11" }
+leptos_hot_reload = { path = "./leptos_hot_reload", version = "0.6.11" }
+leptos_macro = { path = "./leptos_macro", version = "0.6.11" }
+leptos_reactive = { path = "./leptos_reactive", version = "0.6.11" }
+leptos_server = { path = "./leptos_server", version = "0.6.11" }
+server_fn = { path = "./server_fn", version = "0.6.11" }
+server_fn_macro = { path = "./server_fn_macro", version = "0.6.11" }
+server_fn_macro_default = { path = "./server_fn/server_fn_macro_default", version = "0.6" }
+leptos_config = { path = "./leptos_config", version = "0.6.11" }
+leptos_router = { path = "./router", version = "0.6.11" }
+leptos_meta = { path = "./meta", version = "0.6.11" }
+leptos_integration_utils = { path = "./integrations/utils", version = "0.6.11" }
 
 [profile.release]
 codegen-units = 1

README.md

@@ -40,6 +40,25 @@ pub fn SimpleCounter(initial_value: i32) -> impl IntoView {
     }
 }
 
+// we also support a builder syntax rather than the JSX-like `view` macro
+#[component]
+pub fn SimpleCounterWithBuilder(initial_value: i32) -> impl IntoView {
+    use leptos::html::*;
+
+    let (value, set_value) = create_signal(initial_value);
+    let clear = move |_| set_value(0);
+    let decrement = move |_| set_value.update(|value| *value -= 1);
+    let increment = move |_| set_value.update(|value| *value += 1);
+
+    // the `view` macro above expands to this builder syntax
+    div().child((
+        button().on(ev::click, clear).child("Clear"),
+        button().on(ev::click, decrement).child("-1"),
+        span().child(("Value: ", value, "!")),
+        button().on(ev::click, increment).child("+1")
+    ))
+}
+
 // Easy to use with Trunk (trunkrs.dev) or with a simple wasm-bindgen setup
 pub fn main() {
     mount_to_body(|| view! {
@@ -131,7 +150,7 @@ There are several people in the community using Leptos right now for internal ap
 
 ### Can I use this for native GUI?
 
-Sure! Obviously the `view` macro is for generating DOM nodes but you can use the reactive system to drive native any GUI toolkit that uses the same kind of object-oriented, event-callback-based framework as the DOM pretty easily. The principles are the same:
+Sure! Obviously the `view` macro is for generating DOM nodes but you can use the reactive system to drive any native GUI toolkit that uses the same kind of object-oriented, event-callback-based framework as the DOM pretty easily. The principles are the same:
 
 - Use signals, derived signals, and memos to create your reactive system
 - Create GUI widgets
@@ -140,35 +159,27 @@ Sure! Obviously the `view` macro is for generating DOM nodes but you can use the
 
 I've put together a [very simple GTK example](https://github.com/leptos-rs/leptos/blob/main/examples/gtk/src/main.rs) so you can see what I mean.
 
-### How is this different from Yew/Dioxus?
+The new rendering approach being developed for 0.7 supports “universal rendering,” i.e., it can use any rendering library that supports a small set of 6-8 functions. (This is intended as a layer over typical retained-mode, OOP-style GUI toolkits like the DOM, GTK, etc.) That future rendering work will allow creating native UI in a way that is much more similar to the declarative approach used by the web framework.
 
-On the surface level, these libraries may seem similar. Yew is, of course, the most mature Rust library for web UI development and has a huge ecosystem. Dioxus is similar in many ways, being heavily inspired by React. Here are some conceptual differences between Leptos and these frameworks:
+### How is this different from Yew?
+
+Yew is the most-used library for Rust web UI development, but there are several differences between Yew and Leptos, in philosophy, approach, and performance.
 
 - **VDOM vs. fine-grained:** Yew is built on the virtual DOM (VDOM) model: state changes cause components to re-render, generating a new virtual DOM tree. Yew diffs this against the previous VDOM, and applies those patches to the actual DOM. Component functions rerun whenever state changes. Leptos takes an entirely different approach. Components run once, creating (and returning) actual DOM nodes and setting up a reactive system to update those DOM nodes.
-- **Performance:** This has huge performance implications: Leptos is simply much faster at both creating and updating the UI than Yew is. (Dioxus has made huge advances in performance with its recent 0.3 release, and is now roughly on par with Leptos.)
-- **Mental model:** Adopting fine-grained reactivity also tends to simplify the mental model. There are no surprising component re-renders because there are no re-renders. You can call functions, create timeouts, etc. within the body of your component functions because they won’t be re-run. You don’t need to think about manual dependency tracking for effects; fine-grained reactivity tracks dependencies automatically.
+- **Performance:** This has huge performance implications: Leptos is simply much faster at both creating and updating the UI than Yew is.
+- **Server integration:** Yew was created in an era in which browser-rendered single-page apps (SPAs) were the dominant paradigm. While Leptos supports client-side rendering, it also focuses on integrating with the server side of your application via server functions and multiple modes of serving HTML, including out-of-order streaming.
 
-### How is this different from Sycamore?
+- ### How is this different from Dioxus?
 
-Conceptually, these two frameworks are very similar: because both are built on fine-grained reactivity, most apps will end up looking very similar between the two, and Sycamore or Leptos apps will both look a lot like SolidJS apps, in the same way that Yew or Dioxus can look a lot like React.
+Like Leptos, Dioxus is a framework for building UIs using web technologies. However, there are significant differences in approach and features.
 
-There are some practical differences that make a significant difference:
+- **VDOM vs. fine-grained:** While Dioxus has a performant virtual DOM (VDOM), it still uses coarse-grained/component-scoped reactivity: changing a stateful value reruns the component function and diffs the old UI against the new one. Leptos components use a different mental model, creating (and returning) actual DOM nodes and setting up a reactive system to update those DOM nodes.
+- **Web vs. desktop priorities:** Dioxus uses Leptos server functions in its fullstack mode, but does not have the same `<Suspense>`-based support for things like streaming HTML rendering, or share the same focus on holistic web performance. Leptos tends to prioritize holistic web performance (streaming HTML rendering, smaller WASM binary sizes, etc.), whereas Dioxus has an unparalleled experience when building desktop apps, because your application logic runs as a native Rust binary.
 
-- **Templating:** Leptos uses a JSX-like template format (built on [syn-rsx](https://github.com/stoically/syn-rsx)) for its `view` macro. Sycamore offers the choice of its own templating DSL or a builder syntax.
-- **Server integration:** Leptos provides primitives that encourage HTML streaming and allow for easy async integration and RPC calls, even without WASM enabled, making it easy to opt into integrations between your frontend and backend code without pushing you toward any particular metaframework patterns.
-- **Read-write segregation:** Leptos, like Solid, encourages read-write segregation between signal getters and setters, so you end up accessing signals with tuples like `let (count, set_count) = create_signal(0);` _(If you prefer or if it's more convenient for your API, you can use [`create_rw_signal`](https://docs.rs/leptos/latest/leptos/fn.create_rw_signal.html) to give a unified read/write signal.)_
-- **Signals are functions:** In Leptos, you can call a signal to access it rather than calling a specific method (so, `count()` instead of `count.get()`) This creates a more consistent mental model: accessing a reactive value is always a matter of calling a function. For example:
+- ### How is this different from Sycamore?
 
-  ```rust
-  let (count, set_count) = create_signal(0); // a signal
-  let double_count = move || count() * 2; // a derived signal
-  let memoized_count = create_memo(move |_| count() * 3); // a memo
-  // all are accessed by calling them
-  assert_eq!(count(), 0);
-  assert_eq!(double_count(), 0);
-  assert_eq!(memoized_count(), 0);
-  // this function can accept any of those signals
-  fn do_work_on_signal(my_signal: impl Fn() -> i32) { ... }
-  ```
+Sycamore and Leptos are both heavily influenced by SolidJS. At this point, Leptos has a larger community and ecosystem and is more actively developed. Other differences:
 
-- **Signals and scopes are `'static`:** Both Leptos and Sycamore ease the pain of moving signals in closures (in particular, event listeners) by making them `Copy`, to avoid the `{ let count = count.clone(); move |_| ... }` that's very familiar in Rust UI code. Sycamore does this by using bump allocation to tie the lifetimes of its signals to its scopes: since references are `Copy`, `&'a Signal<T>` can be moved into a closure. Leptos does this by using arena allocation and passing around indices: types like `ReadSignal<T>`, `WriteSignal<T>`, and `Memo<T>` are actually wrappers for indices into an arena. This means that both scopes and signals are both `Copy` and `'static` in Leptos, which means that they can be moved easily into closures without adding lifetime complexity.
+- **Templating DSLs:** Sycamore uses a custom templating language for its views, while Leptos uses a JSX-like template format.
+- **`'static` signals:** One of Leptos’s main innovations was the creation of `Copy + 'static` signals, which have excellent ergonomics. Sycamore is in the process of adopting the same pattern, but this is not yet released.
+- **Perseus vs. server functions:** The Perseus metaframework provides an opinionated way to build Sycamore apps that include server functionality. Leptos instead provides primitives like server functions in the core of the framework.

benchmarks/Cargo.toml

@@ -2,6 +2,7 @@
 name = "benchmarks"
 version = "0.1.0"
 edition = "2021"
+rust-version.workspace = true
 
 [dependencies]
 l0410 = { package = "leptos", version = "0.4.10", features = [

cargo-make/check.toml

@@ -3,5 +3,5 @@ alias = "check-all"
 
 [tasks.check-all]
 command = "cargo"
-args = ["+nightly", "check-all-features"]
+args = ["check-all-features"]
 install_crate = "cargo-all-features"

cargo-make/lint.toml

@@ -8,4 +8,11 @@ args = ["fmt", "--", "--check", "--config-path", "${LEPTOS_PROJECT_DIRECTORY}"]
 [tasks.clippy-each-feature]
 dependencies = ["install-clippy"]
 command = "cargo"
-args = ["hack", "clippy", "--all", "--each-feature", "--no-dev-deps"]
+args = [
+    "clippy",
+    "--all-features",
+    "--no-deps",
+    "--",
+    "-D",
+    "clippy::print_stdout",
+]

cargo-make/test.toml

@@ -3,5 +3,5 @@ alias = "test-all"
 
 [tasks.test-all]
 command = "cargo"
-args = ["+nightly", "test-all-features"]
+args = ["test-all-features"]
 install_crate = "cargo-all-features"

examples/Makefile.toml

@@ -5,34 +5,41 @@ CARGO_MAKE_EXTEND_WORKSPACE_MAKEFILE = true
 CARGO_MAKE_CARGO_BUILD_TEST_FLAGS = ""
 CARGO_MAKE_WORKSPACE_EMULATION = true
 CARGO_MAKE_CRATE_WORKSPACE_MEMBERS = [
+  "action-form-error-handling",
   "animated_show",
   "counter",
   "counter_isomorphic",
   "counters",
-  "counters_stable",
   "counter_url_query",
   "counter_without_macros",
+  "directives",
   "error_boundary",
   "errors_axum",
   "fetch",
   "hackernews",
   "hackernews_axum",
+  "hackernews_islands_axum",
+  "hackernews_js_fetch",
   "js-framework-benchmark",
   "login_with_token_csr_only",
   "parent_child",
+  "portal",
   "router",
+  "server_fns_axum",
   "session_auth_axum",
   "slots",
+  "spread",
+  "sso_auth_axum",
   "ssr_modes",
   "ssr_modes_axum",
   "suspense_tests",
   "tailwind_actix",
-  "tailwind_csr",
   "tailwind_axum",
+  "tailwind_csr",
   "timer",
   "todo_app_sqlite",
   "todo_app_sqlite_axum",
-  "todo_app_sqlite_viz",
+  "todo_app_sqlite_csr",
   "todomvc",
 ]
 
@@ -51,103 +58,5 @@ echo "CARGO_MAKE_CRATE_WORKSPACE_MEMBERS = $examples"
 
 [tasks.test-report]
 workspace = false
-description = "report web testing technology used by examples - OPTION: [all]"
-script = '''
-set -emu
-
-BOLD="\e[1m"
-GREEN="\e[0;32m"
-ITALIC="\e[3m"
-YELLOW="\e[0;33m"
-RESET="\e[0m"
-
-echo
-echo "${YELLOW}Web Test Technology${RESET}"
-echo
-
-makefile_paths=$(find . -name Makefile.toml -not -path '*/target/*' -not -path '*/node_modules/*' |
-  sed 's%./%%' |
-  sed 's%/Makefile.toml%%' |
-  grep -v Makefile.toml |
-  sort -u)
-
-start_path=$(pwd)
-
-for path in $makefile_paths; do
-  cd $path
-
-  crate_symbols=
-
-  pw_count=$(find . -name playwright.config.ts | wc -l)
-
-  while read -r line; do
-      case $line in
-      *"cucumber"*)
-          crate_symbols=$crate_symbols"C"
-          ;;
-      *"fantoccini"*)
-          crate_symbols=$crate_symbols"D"
-          ;;
-      esac
-  done <"./Cargo.toml"
-
-  while read -r line; do
-    case $line in
-      *"cargo-make/wasm-test.toml"*)
-          crate_symbols=$crate_symbols"W"
-        ;;
-      *"cargo-make/playwright-test.toml"*)
-          crate_symbols=$crate_symbols"P"
-          crate_symbols=$crate_symbols"N"
-        ;;
-      *"cargo-make/playwright-trunk-test.toml"*)
-          crate_symbols=$crate_symbols"P"
-          crate_symbols=$crate_symbols"T"
-        ;;
-      *"cargo-make/trunk_server.toml"*)
-          crate_symbols=$crate_symbols"T"
-        ;;
-      *"cargo-make/cargo-leptos-webdriver-test.toml"*)
-          crate_symbols=$crate_symbols"L"
-        ;;
-      *"cargo-make/cargo-leptos-test.toml"*)
-          crate_symbols=$crate_symbols"L"
-          if [ $pw_count -gt 0 ]; then
-            crate_symbols=$crate_symbols"P"
-          fi
-        ;;
-    esac
-  done <"./Makefile.toml"
-
-  # Sort list of tools
-  sorted_crate_symbols=$(echo ${crate_symbols} | grep -o . | sort | tr -d "\n") 
-
-  formatted_crate_symbols=" ➤ ${BOLD}${YELLOW}${sorted_crate_symbols}${RESET}"
-  crate_line=$path
-  if [ ! -z ${1+x} ]; then
-    # Show all examples
-    if [ ! -z $crate_symbols ]; then
-      crate_line=$crate_line$formatted_crate_symbols
-    fi
-    echo $crate_line
-  elif [ ! -z $crate_symbols ]; then
-    # Filter out examples that do not run tests in `ci`
-    crate_line=$crate_line$formatted_crate_symbols
-    echo $crate_line
-  fi
-
-  cd ${start_path}
-done
-
-c="${BOLD}${YELLOW}C${RESET} = Cucumber"
-d="${BOLD}${YELLOW}D${RESET} = WebDriver"
-l="${BOLD}${YELLOW}L${RESET} = Cargo Leptos"
-n="${BOLD}${YELLOW}N${RESET} = Node"
-p="${BOLD}${YELLOW}P${RESET} = Playwright"
-t="${BOLD}${YELLOW}T${RESET} = Trunk"
-w="${BOLD}${YELLOW}W${RESET} = WASM"
-
-echo
-echo "${ITALIC}Keys:${RESET} $c, $d, $l, $n, $p, $t, $w"
-echo
-'''
+description = "show the cargo-make configuration for web examples [web|all|help]"
+script = { file = "./cargo-make/scripts/web-report.sh" }

examples/README.md

@@ -8,7 +8,7 @@ To the extent that new features have been released or breaking changes have been
 
 ## Getting Started
 
-The simplest way to get started with any example is to use the “quick start” command found in the README for each example. Most of the examples use either [`trunk`](https://trunkrs.dev/) (a simple build system and dev server for client-side-rendered apps) or [`cargo-leptos`](https://github.com/leptos-rs/cargo-leptos) (a build system for server-rendered and client-hydrated apps). 
+The simplest way to get started with any example is to use the “quick start” command found in the README for each example. Most of the examples use either [`trunk`](https://trunkrs.dev/) (a simple build system and dev server for client-side-rendered apps) or [`cargo-leptos`](https://github.com/leptos-rs/cargo-leptos) (a build system for server-rendered and client-hydrated apps).
 
 ## Using Cargo Make
 
@@ -16,16 +16,18 @@ You can also run any of the examples using [`cargo-make`](https://github.com/sag
 
 Follow these steps to get any example up and running.
 
-1. `cd` to the example root directory
-2. Run `cargo make ci` to setup and test the example
-3. Run `cargo make start` to run the example
-4. Open the client URL in the console output (<http://127.0.0.1:8080> or <http://127.0.0.1:3000> by default)
-5. Run `cargo make stop` to end any processes started by `cargo make start`. 
+1. `cd` to the example you want to run
+2. Make sure `cargo-make` is installed (for example by running `cargo install cargo-make`)
+3. Make sure `rustup target add wasm32-unknown-unknown` was executed for the currently selected toolchain.
+4. Run `cargo make ci` to setup and test the example
+5. Run `cargo make start` to run the example
+6. Open the client URL in the console output (<http://127.0.0.1:8080> or <http://127.0.0.1:3000> by default)
+7. Run `cargo make stop` to end any processes started by `cargo make start`.
 
 Here are a few additional notes:
 
 - Extendable custom task files are located in the [cargo-make](./cargo-make/) directory
-- Running a task will automatically install `cargo` dependencies 
+- Running a task will automatically install `cargo` dependencies
 - Each `Makefile.toml` file must extend the [cargo-make/main.toml](./cargo-make/main.toml) file
 - [cargo-make](./cargo-make/) files that end in `*-test.toml` configure web testing strategies
 - Run `cargo make test-report` to learn which examples have web tests

examples/action-form-error-handling/Cargo.toml

@@ -1,5 +1,5 @@
 [package]
-name = "todo_app_sqlite_viz"
+name = "action-form-error-handling"
 version = "0.1.0"
 edition = "2021"
 
@@ -7,66 +7,60 @@ edition = "2021"
 crate-type = ["cdylib", "rlib"]
 
 [dependencies]
-console_log = "1.0.0"
-console_error_panic_hook = "0.1.7"
-futures = "0.3.25"
-cfg-if = "1.0.0"
+actix-files = { version = "0.6", optional = true }
+actix-web = { version = "4", optional = true, features = ["macros"] }
+console_error_panic_hook = "0.1"
+cfg-if = "1"
+http = { version = "0.2", optional = true }
 leptos = { path = "../../leptos" }
-leptos_viz = { path = "../../integrations/viz", optional = true }
-leptos_meta = { path = "../../meta", features = ["nightly"] }
-leptos_router = { path = "../../router", features = ["nightly"] }
-leptos_reactive = { path = "../../leptos_reactive", features = ["nightly"] }
-log = "0.4.17"
-simple_logger = "4.0.0"
-serde = { version = "1", features = ["derive"] }
-viz = { version = "0.4.8", features = ["serve"], optional = true }
-tokio = { version = "1.25.0", features = ["full"], optional = true }
-http = { version = "0.2.11" }
-sqlx = { version = "0.6.2", features = [
-  "runtime-tokio-rustls",
-  "sqlite",
-], optional = true }
-thiserror = "1.0.38"
+leptos_meta = { path = "../../meta" }
+leptos_actix = { path = "../../integrations/actix", optional = true }
+leptos_router = { path = "../../router" }
 wasm-bindgen = "0.2"
+serde = { version = "1", features = ["derive"] }
 
 [features]
 csr = ["leptos/csr", "leptos_meta/csr", "leptos_router/csr"]
 hydrate = ["leptos/hydrate", "leptos_meta/hydrate", "leptos_router/hydrate"]
 ssr = [
-  "dep:viz",
-  "dep:tokio",
-  "dep:sqlx",
+  "dep:actix-files",
+  "dep:actix-web",
+  "dep:leptos_actix",
   "leptos/ssr",
   "leptos_meta/ssr",
   "leptos_router/ssr",
-  "dep:leptos_viz",
 ]
 
-[package.metadata.cargo-all-features]
-denylist = ["viz", "tokio", "sqlx", "leptos_viz"]
-skip_feature_sets = [["csr", "ssr"], ["csr", "hydrate"], ["ssr", "hydrate"]]
+# Defines a size-optimized profile for the WASM bundle in release mode
+[profile.wasm-release]
+inherits = "release"
+opt-level = 'z'
+lto = true
+codegen-units = 1
+panic = "abort"
 
 [package.metadata.leptos]
-# The name used by wasm-bindgen/cargo-leptos for the JS/WASM bundle. Defaults to the crate name
-output-name = "todo_app_sqlite_viz"
+# The name used by wasm-bindgen/cargo-leptos for the JS/WASM bundle. Defaults to the crate name   
+output-name = "leptos_start"
 # The site root folder is where cargo-leptos generate all output. WARNING: all content of this folder will be erased on a rebuild. Use it in your server setup.
 site-root = "target/site"
 # The site-root relative folder where all compiled output (JS, WASM and CSS) is written
-# Defaults to pkg
+# Defaults to pkg	
 site-pkg-dir = "pkg"
 # [Optional] The source CSS file. If it ends with .sass or .scss then it will be compiled by dart-sass into CSS. The CSS is optimized by Lightning CSS before being written to <site-root>/<site-pkg>/app.css
-style-file = "./style.css"
-# [Optional] Files in the asset-dir will be copied to the site-root directory
-assets-dir = "public"
+style-file = "style/main.scss"
 # The IP and port (ex: 127.0.0.1:3000) where the server serves the content. Use it in your server setup.
 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.
+#   [Windows] for non-WSL use "npx.cmd playwright test"
+#   This binary name can be checked in Powershell with Get-Command npx
 end2end-cmd = "npx playwright test"
+end2end-dir = "end2end"
 #  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
+# Set by cargo-leptos watch when building with that tool. Controls whether autoreload JS will be included in the head
 watch = false
 # The environment Leptos will run in, usually either "DEV" or "PROD"
 env = "DEV"
@@ -89,3 +83,8 @@ lib-features = ["hydrate"]
 #
 # Optional. Defaults to false.
 lib-default-features = false
+
+# The profile to use for the lib target when compiling for release
+#
+# Optional. Defaults to "release".
+lib-profile-release = "wasm-release"

examples/action-form-error-handling/Makefile.toml

@@ -0,0 +1,8 @@
+extend = [
+    { path = "../cargo-make/main.toml" },
+    { path = "../cargo-make/cargo-leptos.toml" },
+]
+
+[env]
+
+CLIENT_PROCESS_NAME = "action_form_error_handling"

examples/action-form-error-handling/README.md

@@ -0,0 +1,68 @@
+<picture>
+    <source srcset="https://raw.githubusercontent.com/leptos-rs/leptos/main/docs/logos/Leptos_logo_Solid_White.svg" media="(prefers-color-scheme: dark)">
+    <img src="https://raw.githubusercontent.com/leptos-rs/leptos/main/docs/logos/Leptos_logo_RGB.svg" alt="Leptos Logo">
+</picture>
+
+# Leptos Starter Template
+
+This is a template for use with the [Leptos](https://github.com/leptos-rs/leptos) web framework and the [cargo-leptos](https://github.com/akesson/cargo-leptos) tool.
+
+## Creating your template repo
+
+If you don't have `cargo-leptos` installed you can install it with
+
+`cargo install cargo-leptos`
+
+Then run
+
+`cargo leptos new --git leptos-rs/start`
+
+to generate a new project template (you will be prompted to enter a project name).
+
+`cd {projectname}`
+
+to go to your newly created project.
+
+Of course, you should explore around the project structure, but the best place to start with your application code is in `src/app.rs`.
+
+## Running your project
+
+`cargo leptos watch`  
+By default, you can access your local project at `http://localhost:3000`
+
+## Installing Additional Tools
+
+By default, `cargo-leptos` uses `nightly` Rust, `cargo-generate`, and `sass`. If you run into any trouble, you may need to install one or more of these tools.
+
+1. `rustup toolchain install nightly --allow-downgrade` - make sure you have Rust nightly
+2. `rustup target add wasm32-unknown-unknown` - add the ability to compile Rust to WebAssembly
+3. `cargo install cargo-generate` - install `cargo-generate` binary (should be installed automatically in future)
+4. `npm install -g sass` - install `dart-sass` (should be optional in future)
+
+## Executing a Server on a Remote Machine Without the Toolchain
+After running a `cargo leptos build --release` the minimum files needed are:
+
+1. The server binary located in `target/server/release`
+2. The `site` directory and all files within located in `target/site`
+
+Copy these files to your remote server. The directory structure should be:
+```text
+leptos_start
+site/
+```
+Set the following environment variables (updating for your project as needed):
+```sh
+export LEPTOS_OUTPUT_NAME="leptos_start"
+export LEPTOS_SITE_ROOT="site"
+export LEPTOS_SITE_PKG_DIR="pkg"
+export LEPTOS_SITE_ADDR="127.0.0.1:3000"
+export LEPTOS_RELOAD_PORT="3001"
+```
+Finally, run the server binary.
+
+## Notes about CSR and Trunk:
+Although it is not recommended, you can also run your project without server integration using the feature `csr` and `trunk serve`:
+
+`trunk serve --open --features csr`
+
+This may be useful for integrating external tools which require a static site, e.g. `tauri`.

examples/action-form-error-handling/src/app.rs

@@ -0,0 +1,97 @@
+use leptos::*;
+use leptos_meta::*;
+use leptos_router::*;
+
+#[component]
+pub fn App() -> impl IntoView {
+    // Provides context that manages stylesheets, titles, meta tags, etc.
+    provide_meta_context();
+
+    view! {
+        // injects a stylesheet into the document <head>
+        // id=leptos means cargo-leptos will hot-reload this stylesheet
+        <Stylesheet id="leptos" href="/pkg/leptos_start.css"/>
+
+        // sets the document title
+        <Title text="Welcome to Leptos"/>
+
+        // content for this welcome page
+        <Router>
+            <main id="app">
+                <Routes>
+                    <Route path="" view=HomePage/>
+                    <Route path="/*any" view=NotFound/>
+                </Routes>
+            </main>
+        </Router>
+    }
+}
+
+#[server]
+async fn do_something(
+    should_error: Option<String>,
+) -> Result<String, ServerFnError> {
+    if should_error.is_none() {
+        Ok(String::from("Successful submit"))
+    } else {
+        Err(ServerFnError::ServerError(String::from(
+            "You got an error!",
+        )))
+    }
+}
+
+/// Renders the home page of your application.
+#[component]
+fn HomePage() -> impl IntoView {
+    let do_something_action = Action::<DoSomething, _>::server();
+    let value = Signal::derive(move || {
+        do_something_action
+            .value()
+            .get()
+            .unwrap_or_else(|| Ok(String::new()))
+    });
+
+    Effect::new_isomorphic(move |_| {
+        logging::log!("Got value = {:?}", value.get());
+    });
+
+    view! {
+        <h1>"Test the action form!"</h1>
+        <ErrorBoundary fallback=move |error| format!("{:#?}", error
+                                                     .get()
+                                                     .into_iter()
+                                                     .next()
+                                                     .unwrap()
+                                                     .1.into_inner()
+                                                     .to_string())
+            >
+            {value}
+            <ActionForm action=do_something_action class="form">
+                <label>Should error: <input type="checkbox" name="should_error"/></label>
+                <button type="submit">Submit</button>
+            </ActionForm>
+        </ErrorBoundary>
+    }
+}
+
+/// 404 - Not Found
+#[component]
+fn NotFound() -> impl IntoView {
+    // set an HTTP status code 404
+    // this is feature gated because it can only be done during
+    // initial server-side rendering
+    // if you navigate to the 404 page subsequently, the status
+    // code will not be set because there is not a new HTTP request
+    // to the server
+    #[cfg(feature = "ssr")]
+    {
+        // this can be done inline because it's synchronous
+        // if it were async, we'd use a server function
+        let resp = expect_context::<leptos_actix::ResponseOptions>();
+        resp.set_status(actix_web::http::StatusCode::NOT_FOUND);
+    }
+
+    view! {
+        <h1>"Not Found"</h1>
+    }
+}

examples/action-form-error-handling/src/lib.rs

@@ -0,0 +1,18 @@
+pub mod app;
+use cfg_if::cfg_if;
+
+cfg_if! {
+if #[cfg(feature = "hydrate")] {
+
+  use wasm_bindgen::prelude::wasm_bindgen;
+
+    #[wasm_bindgen]
+    pub fn hydrate() {
+      use app::*;
+
+      console_error_panic_hook::set_once();
+
+      leptos::mount_to_body(App);
+    }
+}
+}

examples/action-form-error-handling/src/main.rs

@@ -0,0 +1,53 @@
+#[cfg(feature = "ssr")]
+#[actix_web::main]
+async fn main() -> std::io::Result<()> {
+    use action_form_error_handling::app::*;
+    use actix_files::Files;
+    use actix_web::*;
+    use leptos::*;
+    use leptos_actix::{generate_route_list, LeptosRoutes};
+
+    let conf = get_configuration(None).await.unwrap();
+    let addr = conf.leptos_options.site_addr;
+    // Generate the list of routes in your Leptos App
+    let routes = generate_route_list(App);
+    println!("listening on http://{}", &addr);
+
+    HttpServer::new(move || {
+        let leptos_options = &conf.leptos_options;
+        let site_root = &leptos_options.site_root;
+
+        App::new()
+            .route("/api/{tail:.*}", leptos_actix::handle_server_fns())
+            // serve JS/WASM/CSS from `pkg`
+            .service(Files::new("/pkg", format!("{site_root}/pkg")))
+            .leptos_routes(leptos_options.to_owned(), routes.to_owned(), App)
+            .app_data(web::Data::new(leptos_options.to_owned()))
+        //.wrap(middleware::Compress::default())
+    })
+    .bind(&addr)?
+    .run()
+    .await
+}
+
+#[cfg(not(any(feature = "ssr", feature = "csr")))]
+pub fn main() {
+    // no client-side main function
+    // unless we want this to work with e.g., Trunk for pure client-side testing
+    // see lib.rs for hydration function instead
+    // see optional feature `csr` instead
+}
+
+#[cfg(all(not(feature = "ssr"), feature = "csr"))]
+pub fn main() {
+    // a client-side main function is required for using `trunk serve`
+    // prefer using `cargo leptos serve` instead
+    // to run: `trunk serve --open --features csr`
+    use action_form_error_handling::app::*;
+    use leptos::*;
+    use wasm_bindgen::prelude::wasm_bindgen;
+
+    console_error_panic_hook::set_once();
+
+    leptos::mount_to_body(App);
+}

examples/action-form-error-handling/style/main.scss

@@ -0,0 +1,15 @@
+body {
+	font-family: sans-serif;
+	text-align: center;
+}
+
+#app {
+	text-align: center;
+}
+
+.form {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 0.5rem;
+}

examples/animated_show/Cargo.toml

@@ -7,7 +7,7 @@ edition = "2021"
 codegen-units = 1
 lto = true
 
-[dependencies]
+[dependencies] 
 leptos = { path = "../../leptos", features = ["csr"] }
 console_log = "1"
 log = "0.4"

examples/cargo-make/cargo-leptos.toml

@@ -15,13 +15,13 @@ clear = true
 dependencies = ["check-debug", "check-release"]
 
 [tasks.check-debug]
-toolchain = "nightly"
+toolchain = "stable"
 command = "cargo"
 args = ["check-all-features"]
 install_crate = "cargo-all-features"
 
 [tasks.check-release]
-toolchain = "nightly"
+toolchain = "stable"
 command = "cargo"
 args = ["check-all-features", "--release"]
 install_crate = "cargo-all-features"

examples/cargo-make/clean.toml

@@ -4,11 +4,13 @@ dependencies = [
   "clean-trunk",
   "clean-node_modules",
   "clean-playwright",
+  "clean-pkg",
 ]
 
 [tasks.clean-cargo]
-command = "rm"
-args = ["-rf", "target"]
+script = '''
+find . -type d -name target | xargs rm -rf
+'''
 
 [tasks.clean-trunk]
 script = '''
@@ -27,3 +29,8 @@ fi
 script = '''
 find . -name playwright-report -name playwright -name test-results | xargs rm -rf
 '''
+
+[tasks.clean-pkg]
+script = '''
+find . -type d -name pkg | xargs rm -rf
+'''

examples/cargo-make/client-process.toml

@@ -3,32 +3,36 @@
 [tasks.stop-client]
 condition = { env_set = ["CLIENT_PROCESS_NAME"] }
 script = '''
-  if [ ! -z $(pidof ${CLIENT_PROCESS_NAME}) ]; then
+  if pidof -q ${CLIENT_PROCESS_NAME}; then
+    echo "  Stopping ${CLIENT_PROCESS_NAME}"
     pkill -ef ${CLIENT_PROCESS_NAME}
+  else
+    echo "  ${CLIENT_PROCESS_NAME} is already stopped"
   fi
 '''
 
 [tasks.client-status]
 condition = { env_set = ["CLIENT_PROCESS_NAME"] }
 script = '''
-  if [ -z $(pidof ${CLIENT_PROCESS_NAME}) ]; then
-    echo "  ${CLIENT_PROCESS_NAME} is not running"
-  else
+  if pidof -q ${CLIENT_PROCESS_NAME}; then
     echo "  ${CLIENT_PROCESS_NAME} is up"
+  else
+    echo "  ${CLIENT_PROCESS_NAME} is not running"
   fi
 '''
 
 [tasks.maybe-start-client]
 condition = { env_set = ["CLIENT_PROCESS_NAME"] }
 script = '''
-  if [ -z $(pidof ${CLIENT_PROCESS_NAME}) ]; then
+  if pidof -q ${CLIENT_PROCESS_NAME}; then
+    echo "  ${CLIENT_PROCESS_NAME} is already started"
+  else
     echo "  Starting ${CLIENT_PROCESS_NAME}"
-    if [ -z ${SPAWN_CLIENT_PROCESS} ];then
+    if [ -n "${SPAWN_CLIENT_PROCESS}" ];then
+      echo "Spawning process..."
       cargo make start-client ${@} &
     else
       cargo make start-client ${@}
     fi
-  else
-    echo "  ${CLIENT_PROCESS_NAME} is already started"
   fi
 '''

examples/cargo-make/compile.toml

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

examples/cargo-make/deno-build.toml

@@ -0,0 +1,24 @@
+[tasks.build]
+clear = true
+command = "deno"
+args = ["task", "build"]
+
+[tasks.start-client]
+command = "deno"
+args = ["task", "start"]
+
+[tasks.check]
+clear = true
+dependencies = ["check-debug", "check-release"]
+
+[tasks.check-debug]
+toolchain = "stable"
+command = "cargo"
+args = ["check-all-features"]
+install_crate = "cargo-all-features"
+
+[tasks.check-release]
+toolchain = "stable"
+command = "cargo"
+args = ["check-all-features", "--release"]
+install_crate = "cargo-all-features"

examples/cargo-make/lint.toml

@@ -1,5 +1,5 @@
 [tasks.pre-clippy]
-env = { CARGO_MAKE_CLIPPY_ARGS = "--all-targets --all-features -- -D warnings" }
+env = { CARGO_MAKE_CLIPPY_ARGS = "--no-deps --all-targets --all-features -- -D warnings" }
 
 [tasks.check-style]
 dependencies = ["check-format-flow", "clippy-flow"]

examples/cargo-make/playwright-trunk-test.toml

@@ -6,9 +6,17 @@ extend = [
 [tasks.integration-test]
 description = "Run integration test with automated start and stop of processes"
 env = { SPAWN_CLIENT_PROCESS = "1" }
-dependencies = ["start", "wait-one", "test-playwright", "stop"]
+run_task = { name = ["start", "wait-test-stop"], parallel = true }
 
-[tasks.wait-one]
+[tasks.wait-test-stop]
+private = true
+dependencies = ["wait-server", "test-playwright", "stop"]
+
+[tasks.wait-server]
 script = '''
-sleep 1
+for run in {1..12}; do
+    echo "Waiting to ensure server is started..."
+    sleep 10
+done
+echo "Times up, running tests"
 '''

examples/cargo-make/scripts/web-report.sh

@@ -0,0 +1,176 @@
+#!/bin/bash
+
+set -emu
+
+BOLD="\e[1m"
+ITALIC="\e[3m"
+YELLOW="\e[1;33m"
+BLUE="\e[1;36m"
+RESET="\e[0m"
+
+function web { #task: only include examples with web cargo-make configuration
+    print_header
+    print_crate_tags "$@"
+    print_footer
+}
+
+function all { #task: includes all examples
+    print_header
+    print_crate_tags "all"
+    print_footer
+}
+
+function print_header {
+    echo -e "${YELLOW}Cargo Make Web Report${RESET}"
+    echo
+    echo -e "${ITALIC}Show how crates are configured to run and test web examples with cargo-make${RESET}"
+    echo
+}
+
+function print_crate_tags {
+    local makefile_paths
+    makefile_paths=$(find_makefile_lines)
+
+    local start_path
+    start_path=$(pwd)
+
+    for path in $makefile_paths; do
+        cd "$path"
+
+        local crate_tags=
+
+        # Add cargo tags
+        while read -r line; do
+            case $line in
+            *"cucumber"*)
+                crate_tags=$crate_tags"C"
+                ;;
+            *"fantoccini"*)
+                crate_tags=$crate_tags"F"
+                ;;
+            *"package.metadata.leptos"*)
+                crate_tags=$crate_tags"M"
+                ;;
+            esac
+        done <"./Cargo.toml"
+
+        #Add makefile tags
+
+        local pw_count
+        pw_count=$(find . -name playwright.config.ts | wc -l)
+
+        while read -r line; do
+            case $line in
+            *"cargo-make/wasm-test.toml"*)
+                crate_tags=$crate_tags"W"
+                ;;
+            *"cargo-make/playwright-test.toml"*)
+                crate_tags=$crate_tags"P"
+                crate_tags=$crate_tags"N"
+                ;;
+            *"cargo-make/playwright-trunk-test.toml"*)
+                crate_tags=$crate_tags"P"
+                crate_tags=$crate_tags"T"
+                ;;
+            *"cargo-make/trunk_server.toml"*)
+                crate_tags=$crate_tags"T"
+                ;;
+            *"cargo-make/cargo-leptos-webdriver-test.toml"*)
+                crate_tags=$crate_tags"L"
+                ;;
+            *"cargo-make/cargo-leptos-test.toml"*)
+                crate_tags=$crate_tags"L"
+                if [ "$pw_count" -gt 0 ]; then
+                    crate_tags=$crate_tags"P"
+                fi
+                ;;
+            *"cargo-make/cargo-leptos.toml"*)
+                crate_tags=$crate_tags"L"
+                ;;
+            *"cargo-make/deno-build.toml"*)
+                crate_tags=$crate_tags"D"
+                ;;
+            esac
+        done <"./Makefile.toml"
+
+        # Sort tags
+        local keys
+        keys=$(echo "$crate_tags" | grep -o . | sort | tr -d "\n")
+
+        # Find leptos projects that are not configured to build with cargo-leptos
+        keys=${keys//"LM"/"L"}
+
+        # Find leptos projects that are not configured to build with deno
+        keys=${keys//"DM"/"D"}
+
+        # Maybe print line
+        local crate_line=$path
+
+        if [ -n "$crate_tags" ]; then
+            local color=$YELLOW
+            case $keys in
+            *"M"*)
+                color=$BLUE
+                ;;
+            esac
+
+            crate_line="$crate_line ➤ ${color}$keys${RESET}"
+            echo -e "$crate_line"
+        elif [ "$#" -gt 0 ]; then
+            crate_line="${BOLD}$crate_line${RESET}"
+            echo -e "$crate_line"
+        fi
+
+        cd "$start_path"
+    done
+}
+
+function find_makefile_lines {
+    find . -name Makefile.toml -not -path '*/target/*' -not -path '*/node_modules/*' |
+        sed 's%./%%' |
+        sed 's%/Makefile.toml%%' |
+        grep -v Makefile.toml |
+        sort -u
+}
+
+function print_footer {
+    c="${BOLD}${YELLOW}C${RESET} = Cucumber Test Runner"
+    d="${BOLD}${YELLOW}D${RESET} = Deno"
+    f="${BOLD}${YELLOW}F${RESET} = Fantoccini WebDriver"
+    l="${BOLD}${YELLOW}L${RESET} = Cargo Leptos"
+    m="${BOLD}${BLUE}M${RESET} = Cargo Leptos Metadata Only (${ITALIC}ci is not configured to build with cargo-leptos or deno${RESET})"
+    n="${BOLD}${YELLOW}N${RESET} = Node"
+    p="${BOLD}${YELLOW}P${RESET} = Playwright Test"
+    t="${BOLD}${YELLOW}T${RESET} = Trunk"
+    w="${BOLD}${YELLOW}W${RESET} = WASM Test"
+
+    echo
+    echo -e "${ITALIC}Report Keys:${RESET}\n $c\n $d\n $f\n $l\n $m\n $n\n $p\n $t\n $w"
+    echo
+}
+
+###################
+# HELP
+###################
+
+function list_help_for {
+    local task=$1
+    grep -E "^function.+ #$task" "$0" |
+        sed 's/function/ /' |
+        sed -e "s| { #$task: |~|g" |
+        column -s"~" -t |
+        sort
+}
+
+function help { #help: show task descriptions
+    echo -e "${BOLD}Usage:${RESET} ./$(basename "$0") <task> [options]"
+    echo
+    echo "Show the cargo-make configuration for web examples"
+    echo
+    echo -e "${BOLD}Tasks:${RESET}"
+    list_help_for task
+    echo
+}
+
+TIMEFORMAT="./web-report.sh completed in %3lR"
+time "${@:-all}" # Show the report by default

examples/cargo-make/server-process.toml

@@ -3,18 +3,21 @@
 [tasks.stop-server]
 condition = { env_set = ["SERVER_PROCESS_NAME"] }
 script = '''
-  if [ ! -z $(pidof ${SERVER_PROCESS_NAME}) ]; then
+  if pidof -q ${SERVER_PROCESS_NAME}; then
+    echo "  Stopping ${SERVER_PROCESS_NAME}"
     pkill -ef ${SERVER_PROCESS_NAME}
+  else
+    echo "  ${SERVER_PROCESS_NAME} is already stopped"
   fi
 '''
 
 [tasks.server-status]
 condition = { env_set = ["SERVER_PROCESS_NAME"] }
 script = '''
-  if [ -z $(pidof ${SERVER_PROCESS_NAME}) ]; then
-    echo "  ${SERVER_PROCESS_NAME} is not running"
-  else
+  if pidof -q ${SERVER_PROCESS_NAME}; then
     echo "  ${SERVER_PROCESS_NAME} is up"
+  else
+    echo "  ${SERVER_PROCESS_NAME} is not running"
   fi
 '''
 
@@ -24,11 +27,11 @@ script = '''
   YELLOW="\e[0;33m"
   RESET="\e[0m"
 
-  if [ -z $(pidof ${SERVER_PROCESS_NAME}) ]; then
+  if pidof -q ${SERVER_PROCESS_NAME}; then
+    echo "  ${SERVER_PROCESS_NAME} is already started"
+  else
     echo "  Starting ${SERVER_PROCESS_NAME}"
     echo "  ${YELLOW}>> Run cargo make stop to end process${RESET}"
     cargo make start-server ${@} & 
-  else
-    echo "  ${SERVER_PROCESS_NAME} is already started"
   fi
 '''

examples/cargo-make/webdriver.toml

@@ -6,25 +6,33 @@ script = '''
   RESET="\e[0m"
 
   if command -v chromedriver; then
-    if [ -z $(pidof chromedriver) ]; then
+    if pidof -q chromedriver; then
+      echo "  chromedriver is already started"
+    else
+      echo "Starting chomedriver"
       chromedriver --port=4444 &
     fi
   else
-    echo "${RED}${BOLD}ERROR${RESET} - chromedriver is required by this task"
+    echo "${RED}${BOLD}ERROR${RESET} - chromedriver not found"
     exit 1
   fi
 '''
 
 [tasks.stop-webdriver]
 script = '''
-  pkill -f "chromedriver"
+  if pidof -q chromedriver; then
+    echo "  Stopping chromedriver"
+    pkill -ef "chromedriver"
+  else
+    echo "  chromedriver is already stopped"
+  fi
 '''
 
 [tasks.webdriver-status]
 script = '''
-  if [ -z $(pidof chromedriver) ]; then
-    echo chromedriver is not running
-  else
+  if pidof -q chromedriver; then
     echo chromedriver is up
+  else
+    echo chromedriver is not running
   fi
 '''

examples/counter/Cargo.toml

@@ -8,7 +8,7 @@ codegen-units = 1
 lto = true
 
 [dependencies]
-leptos = { path = "../../leptos", features = ["csr", "nightly"] }
+leptos = { path = "../../leptos", features = ["csr"] }
 console_log = "1"
 log = "0.4"
 console_error_panic_hook = "0.1.7"

examples/counter/rust-toolchain.toml

@@ -1,2 +1,2 @@
 [toolchain]
-channel = "nightly"
+channel = "stable" # test change

examples/counter/src/lib.rs

@@ -14,7 +14,7 @@ pub fn SimpleCounter(
 
     view! {
         <div>
-            <button on:click=move |_| set_value(0)>"Clear"</button>
+            <button on:click=move |_| set_value.set(0)>"Clear"</button>
             <button on:click=move |_| set_value.update(|value| *value -= step)>"-1"</button>
             <span>"Value: " {value} "!"</span>
             <button on:click=move |_| set_value.update(|value| *value += step)>"+1"</button>

examples/counter_isomorphic/Cargo.toml

@@ -17,7 +17,6 @@ broadcaster = "1"
 console_log = "1"
 console_error_panic_hook = "0.1"
 futures = "0.3"
-cfg-if = "1"
 lazy_static = "1"
 leptos = { path = "../../leptos" }
 leptos_actix = { path = "../../integrations/actix", optional = true }
@@ -26,13 +25,12 @@ leptos_router = { path = "../../router" }
 log = "0.4"
 once_cell = "1.18"
 gloo-net = { git = "https://github.com/rustwasm/gloo" }
-wasm-bindgen = "0.2.87"
+wasm-bindgen = "0.2"
 serde = { version = "1", features = ["derive"] }
 simple_logger = "4.3"
 tracing = { version = "0.1", optional = true }
 
 [features]
-default = ["nightly"]
 hydrate = ["leptos/hydrate", "leptos_meta/hydrate", "leptos_router/hydrate"]
 ssr = [
 	"dep:actix-files",
@@ -43,10 +41,9 @@ ssr = [
 	"leptos_meta/ssr",
 	"leptos_router/ssr",
 ]
-nightly = ["leptos/nightly", "leptos_router/nightly"]
 
 [package.metadata.cargo-all-features]
-denylist = ["actix-files", "actix-web", "leptos_actix", "nightly"]
+denylist = ["actix-files", "actix-web", "leptos_actix"]
 skip_feature_sets = [["ssr", "hydrate"]]
 
 [package.metadata.leptos]
@@ -70,7 +67,7 @@ reload-port = 3001
 end2end-cmd = "npx playwright test"
 #  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
+# Set by cargo-leptos watch when building with that tool. Controls whether autoreload JS will be included in the head
 watch = false
 # The environment Leptos will run in, usually either "DEV" or "PROD"
 env = "DEV"

examples/counter_isomorphic/src/counters.rs

@@ -1,34 +1,35 @@
-use cfg_if::cfg_if;
 use leptos::*;
 use leptos_meta::*;
 use leptos_router::*;
 #[cfg(feature = "ssr")]
 use tracing::instrument;
 
-cfg_if! {
-    if #[cfg(feature = "ssr")] {
-        use std::sync::atomic::{AtomicI32, Ordering};
-        use broadcaster::BroadcastChannel;
-        use once_cell::sync::OnceCell;
+#[cfg(feature = "ssr")]
+pub mod ssr_imports {
+    pub use broadcaster::BroadcastChannel;
+    pub use once_cell::sync::OnceCell;
+    pub use std::sync::atomic::{AtomicI32, Ordering};
 
-        static COUNT: AtomicI32 = AtomicI32::new(0);
+    pub static COUNT: AtomicI32 = AtomicI32::new(0);
 
-        lazy_static::lazy_static! {
-            pub static ref COUNT_CHANNEL: BroadcastChannel<i32> = BroadcastChannel::new();
-        }
+    lazy_static::lazy_static! {
+        pub static ref COUNT_CHANNEL: BroadcastChannel<i32> = BroadcastChannel::new();
+    }
 
-        static LOG_INIT: OnceCell<()> = OnceCell::new();
-        fn init_logging() {
-            LOG_INIT.get_or_init(|| {
-                simple_logger::SimpleLogger::new().env().init().unwrap();
-            });
-        }
+    static LOG_INIT: OnceCell<()> = OnceCell::new();
+
+    pub fn init_logging() {
+        LOG_INIT.get_or_init(|| {
+            simple_logger::SimpleLogger::new().env().init().unwrap();
+        });
     }
 }
 
 #[server]
 #[cfg_attr(feature = "ssr", instrument)]
 pub async fn get_server_count() -> Result<i32, ServerFnError> {
+    use ssr_imports::*;
+
     Ok(COUNT.load(Ordering::Relaxed))
 }
 
@@ -38,6 +39,8 @@ pub async fn adjust_server_count(
     delta: i32,
     msg: String,
 ) -> Result<i32, ServerFnError> {
+    use ssr_imports::*;
+
     let new = COUNT.load(Ordering::Relaxed) + delta;
     COUNT.store(new, Ordering::Relaxed);
     _ = COUNT_CHANNEL.send(&new).await;
@@ -48,6 +51,8 @@ pub async fn adjust_server_count(
 #[server]
 #[cfg_attr(feature = "ssr", instrument)]
 pub async fn clear_server_count() -> Result<i32, ServerFnError> {
+    use ssr_imports::*;
+
     COUNT.store(0, Ordering::Relaxed);
     _ = COUNT_CHANNEL.send(&0).await;
     Ok(0)
@@ -55,7 +60,7 @@ pub async fn clear_server_count() -> Result<i32, ServerFnError> {
 #[component]
 pub fn Counters() -> impl IntoView {
     #[cfg(feature = "ssr")]
-    init_logging();
+    ssr_imports::init_logging();
 
     provide_meta_context();
     view! {
@@ -113,9 +118,9 @@ pub fn Counters() -> impl IntoView {
 // This is the typical pattern for a CRUD app
 #[component]
 pub fn Counter() -> impl IntoView {
-    let dec = create_action(|_| adjust_server_count(-1, "decing".into()));
-    let inc = create_action(|_| adjust_server_count(1, "incing".into()));
-    let clear = create_action(|_| clear_server_count());
+    let dec = create_action(|_: &()| adjust_server_count(-1, "decing".into()));
+    let inc = create_action(|_: &()| adjust_server_count(1, "incing".into()));
+    let clear = create_action(|_: &()| clear_server_count());
     let counter = create_resource(
         move || {
             (
@@ -127,15 +132,6 @@ pub fn Counter() -> impl IntoView {
         |_| get_server_count(),
     );
 
-    let value =
-        move || counter.get().map(|count| count.unwrap_or(0)).unwrap_or(0);
-    let error_msg = move || {
-        counter.get().and_then(|res| match res {
-            Ok(_) => None,
-            Err(e) => Some(e),
-        })
-    };
-
     view! {
         <div>
             <h2>"Simple Counter"</h2>
@@ -145,15 +141,24 @@ pub fn Counter() -> impl IntoView {
             <div>
                 <button on:click=move |_| clear.dispatch(())>"Clear"</button>
                 <button on:click=move |_| dec.dispatch(())>"-1"</button>
-                <span>"Value: " {value} "!"</span>
+                <span>
+                    "Value: "
+                    <Suspense>
+                        {move || counter.and_then(|count| *count)} "!"
+                    </Suspense>
+                </span>
                 <button on:click=move |_| inc.dispatch(())>"+1"</button>
             </div>
-            {move || {
-                error_msg()
-                    .map(|msg| {
-                        view! { <p>"Error: " {msg.to_string()}</p> }
-                    })
-            }}
+            <Suspense>
+              {move || {
+                counter.get().and_then(|res| match res {
+                  Ok(_) => None,
+                  Err(e) => Some(e),
+                }).map(|msg| {
+                  view! { <p>"Error: " {msg.to_string()}</p> }
+                })
+              }}
+            </Suspense>
         </div>
     }
 }
@@ -199,7 +204,7 @@ pub fn FormCounter() -> impl IntoView {
                     <input type="hidden" name="msg" value="form value down"/>
                     <input type="submit" value="-1"/>
                 </ActionForm>
-                <span>"Value: " {move || value().to_string()} "!"</span>
+                <span>"Value: " <Suspense>{move || value().to_string()} "!"</Suspense></span>
                 <ActionForm action=adjust>
                     <input type="hidden" name="delta" value="1"/>
                     <input type="hidden" name="msg" value="form value up"/>
@@ -217,9 +222,10 @@ pub fn FormCounter() -> impl IntoView {
 #[component]
 pub fn MultiuserCounter() -> impl IntoView {
     let dec =
-        create_action(|_| adjust_server_count(-1, "dec dec goose".into()));
-    let inc = create_action(|_| adjust_server_count(1, "inc inc moose".into()));
-    let clear = create_action(|_| clear_server_count());
+        create_action(|_: &()| adjust_server_count(-1, "dec dec goose".into()));
+    let inc =
+        create_action(|_: &()| adjust_server_count(1, "inc inc moose".into()));
+    let clear = create_action(|_: &()| clear_server_count());
 
     #[cfg(not(feature = "ssr"))]
     let multiplayer_value = {

examples/counter_isomorphic/src/lib.rs

@@ -1,21 +1,13 @@
-use cfg_if::cfg_if;
 pub mod counters;
 
-// Needs to be in lib.rs AFAIK because wasm-bindgen needs us to be compiling a lib. I may be wrong.
-cfg_if! {
-    if #[cfg(feature = "hydrate")] {
-        use leptos::*;
-        use wasm_bindgen::prelude::wasm_bindgen;
-        use crate::counters::*;
+#[cfg(feature = "hydrate")]
+#[wasm_bindgen::prelude::wasm_bindgen]
+pub fn hydrate() {
+    use crate::counters::*;
+    use leptos::*;
 
-        #[wasm_bindgen]
-        pub fn hydrate() {
-            _ = console_log::init_with_level(log::Level::Debug);
-            console_error_panic_hook::set_once();
+    _ = console_log::init_with_level(log::Level::Debug);
+    console_error_panic_hook::set_once();
 
-            mount_to_body(|| {
-                view! { <Counters/> }
-            });
-        }
-    }
+    mount_to_body(Counters);
 }

examples/counter_isomorphic/src/main.rs

@@ -1,72 +1,54 @@
-use cfg_if::cfg_if;
 mod counters;
 
-// boilerplate to run in different modes
-cfg_if! {
-    // server-only stuff
-    if #[cfg(feature = "ssr")] {
-        use leptos::*;
-        use actix_files::{Files};
-        use actix_web::*;
-        use crate::counters::*;
-        use leptos_actix::{generate_route_list, LeptosRoutes};
+use crate::counters::*;
+use actix_files::Files;
+use actix_web::*;
+use leptos::*;
+use leptos_actix::{generate_route_list, LeptosRoutes};
 
-        #[get("/api/events")]
-        async fn counter_events() -> impl Responder {
-            use futures::StreamExt;
+#[get("/api/events")]
+async fn counter_events() -> impl Responder {
+    use crate::counters::ssr_imports::*;
+    use futures::StreamExt;
 
-            let stream =
-                futures::stream::once(async { crate::counters::get_server_count().await.unwrap_or(0) })
-                    .chain(COUNT_CHANNEL.clone())
-                    .map(|value| {
-                        Ok(web::Bytes::from(format!(
-                            "event: message\ndata: {value}\n\n"
-                        ))) as Result<web::Bytes>
-                    });
-            HttpResponse::Ok()
-                .insert_header(("Content-Type", "text/event-stream"))
-                .streaming(stream)
-        }
-
-        #[actix_web::main]
-        async fn main() -> std::io::Result<()> {
-
-            // Explicit server function registration is no longer required
-            // on the main branch. On 0.3.0 and earlier, uncomment the lines
-            // below to register the server functions.
-            // _ = GetServerCount::register();
-            // _ = AdjustServerCount::register();
-            // _ = ClearServerCount::register();
-
-            // Setting this to None means we'll be using cargo-leptos and its env vars.
-            // when not using cargo-leptos None must be replaced with Some("Cargo.toml")
-            let conf = get_configuration(None).await.unwrap();
-
-            let addr = conf.leptos_options.site_addr;
-            let routes = generate_route_list(|| view! { <Counters/> });
-
-            HttpServer::new(move || {
-                let leptos_options = &conf.leptos_options;
-                let site_root = &leptos_options.site_root;
-
-                App::new()
-                    .service(counter_events)
-                    .route("/api/{tail:.*}", leptos_actix::handle_server_fns())
-                    .leptos_routes(leptos_options.to_owned(), routes.to_owned(), || view! { <Counters/> })
-                    .service(Files::new("/", site_root))
-                    //.wrap(middleware::Compress::default())
-            })
-            .bind(&addr)?
-            .run()
-            .await
-        }
-        }
-
-    // client-only main for Trunk
-    else {
-        pub fn main() {
-            // isomorphic counters cannot work in a Client-Side-Rendered only
-            // app as a server is required to maintain state
-        }
-    }
+    let stream = futures::stream::once(async {
+        crate::counters::get_server_count().await.unwrap_or(0)
+    })
+    .chain(COUNT_CHANNEL.clone())
+    .map(|value| {
+        Ok(web::Bytes::from(format!(
+            "event: message\ndata: {value}\n\n"
+        ))) as Result<web::Bytes>
+    });
+    HttpResponse::Ok()
+        .insert_header(("Content-Type", "text/event-stream"))
+        .streaming(stream)
+}
+
+#[actix_web::main]
+async fn main() -> std::io::Result<()> {
+    // Setting this to None means we'll be using cargo-leptos and its env vars.
+    // when not using cargo-leptos None must be replaced with Some("Cargo.toml")
+    let conf = get_configuration(None).await.unwrap();
+
+    let addr = conf.leptos_options.site_addr;
+    let routes = generate_route_list(Counters);
+
+    HttpServer::new(move || {
+        let leptos_options = &conf.leptos_options;
+        let site_root = &leptos_options.site_root;
+
+        App::new()
+            .service(counter_events)
+            .leptos_routes(
+                leptos_options.to_owned(),
+                routes.to_owned(),
+                Counters,
+            )
+            .service(Files::new("/", site_root))
+        //.wrap(middleware::Compress::default())
+    })
+    .bind(&addr)?
+    .run()
+    .await
 }

examples/counter_url_query/Cargo.toml

@@ -8,7 +8,7 @@ codegen-units = 1
 lto = true
 
 [dependencies]
-leptos = { path = "../../leptos", features = ["csr", "nightly"] }
+leptos = { path = "../../leptos", features = ["csr"] }
 leptos_router = { path = "../../router", features = ["csr"] }
 console_log = "1"
 log = "0.4"

examples/counter_url_query/rust-toolchain.toml

@@ -1,2 +1,2 @@
 [toolchain]
-channel = "nightly"
+channel = "stable" # test change

examples/counter_url_query/src/lib.rs

@@ -7,17 +7,17 @@ use leptos_router::*;
 #[component]
 pub fn SimpleQueryCounter() -> impl IntoView {
     let (count, set_count) = create_query_signal::<i32>("count");
-    let clear = move |_| set_count(None);
-    let decrement = move |_| set_count(Some(count().unwrap_or(0) - 1));
-    let increment = move |_| set_count(Some(count().unwrap_or(0) + 1));
+    let clear = move |_| set_count.set(None);
+    let decrement = move |_| set_count.set(Some(count.get().unwrap_or(0) - 1));
+    let increment = move |_| set_count.set(Some(count.get().unwrap_or(0) + 1));
 
     let (msg, set_msg) = create_query_signal::<String>("message");
     let update_msg = move |ev| {
         let new_msg = event_target_value(&ev);
         if new_msg.is_empty() {
-            set_msg(None);
+            set_msg.set(None);
         } else {
-            set_msg(Some(new_msg));
+            set_msg.set(Some(new_msg));
         }
     };
 
@@ -25,13 +25,13 @@ pub fn SimpleQueryCounter() -> impl IntoView {
         <div>
             <button on:click=clear>"Clear"</button>
             <button on:click=decrement>"-1"</button>
-            <span>"Value: " {move || count().unwrap_or(0)} "!"</span>
+            <span>"Value: " {move || count.get().unwrap_or(0)} "!"</span>
             <button on:click=increment>"+1"</button>
 
             <br />
 
             <input
-                prop:value=move || msg().unwrap_or_default()
+                prop:value=move || msg.get().unwrap_or_default()
                 on:input=update_msg
             />
         </div>

examples/counter_without_macros/Cargo.toml

@@ -2,6 +2,7 @@
 name = "counter_without_macros"
 version = "0.1.0"
 edition = "2021"
+rust-version = "1.75"
 
 [profile.release]
 codegen-units = 1
@@ -14,7 +15,7 @@ log = "0.4"
 console_error_panic_hook = "0.1.7"
 
 [dev-dependencies]
-wasm-bindgen = "0.2.84"
+wasm-bindgen = "0.2"
 wasm-bindgen-test = "0.3.34"
 pretty_assertions = "1.3.0"
 rstest = "0.17.0"

examples/counter_without_macros/src/lib.rs

@@ -1,4 +1,4 @@
-use leptos::{ev, html::*, *};
+use leptos::{html::*, *};
 
 /// A simple counter view.
 // A component is really just a function call: it runs once to create the DOM and reactive system

examples/counters/Cargo.toml

@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = { path = "../../leptos", features = ["csr", "nightly"]  }
+leptos = { path = "../../leptos", features = ["csr"]  }
 log = "0.4"
 console_log = "1"
 console_error_panic_hook = "0.1.7"

examples/counters/rust-toolchain.toml

@@ -1,2 +1,2 @@
 [toolchain]
-channel = "nightly"
+channel = "stable" # test change

examples/counters/src/lib.rs

@@ -1,4 +1,4 @@
-use leptos::{For, *};
+use leptos::*;
 
 const MANY_COUNTERS: usize = 1000;
 
@@ -16,14 +16,14 @@ pub fn Counters() -> impl IntoView {
     provide_context(CounterUpdater { set_counters });
 
     let add_counter = move |_| {
-        let id = next_counter_id();
+        let id = next_counter_id.get();
         let sig = create_signal(0);
         set_counters.update(move |counters| counters.push((id, sig)));
         set_next_counter_id.update(|id| *id += 1);
     };
 
     let add_many_counters = move |_| {
-        let next_id = next_counter_id();
+        let next_id = next_counter_id.get();
         let new_counters = (next_id..next_id + MANY_COUNTERS).map(|id| {
             let signal = create_signal(0);
             (id, signal)
@@ -53,17 +53,17 @@ pub fn Counters() -> impl IntoView {
                 <span>{move ||
                     counters.get()
                         .iter()
-                        .map(|(_, (count, _))| count())
+                        .map(|(_, (count, _))| count.get())
                         .sum::<i32>()
                         .to_string()
                 }</span>
                 " from "
-                <span>{move || counters().len().to_string()}</span>
+                <span>{move || counters.get().len().to_string()}</span>
                 " counters."
             </p>
             <ul>
                 <For
-                    each=counters
+                    each=move || counters.get()
                     key=|counter| counter.0
                     children=move |(id, (value, set_value)): (usize, (ReadSignal<i32>, WriteSignal<i32>))| {
                         view! {
@@ -85,7 +85,8 @@ fn Counter(
     let CounterUpdater { set_counters } = use_context().unwrap();
 
     let input = move |ev| {
-        set_value(event_target_value(&ev).parse::<i32>().unwrap_or_default())
+        set_value
+            .set(event_target_value(&ev).parse::<i32>().unwrap_or_default())
     };
 
     // this will run when the scope is disposed, i.e., when this row is deleted

examples/counters_stable/.gitignore

@@ -1,20 +0,0 @@
-# Generated by Cargo
-# will have compiled files and executables
-/target/
-
-# Remove Cargo.lock from gitignore if creating an executable, leave it for libraries
-# More information here https://doc.rust-lang.org/cargo/guide/cargo-toml-vs-cargo-lock.html
-Cargo.lock
-
-# These are backup files generated by rustfmt
-**/*.rs.bk
-
-# Support playwright testing
-node_modules/
-test-results/
-end2end/playwright-report/
-playwright/.cache/
-pnpm-lock.yaml
-
-# Support trunk
-dist

examples/counters_stable/Cargo.toml

@@ -1,27 +0,0 @@
-[package]
-name = "counters_stable"
-version = "0.1.0"
-edition = "2021"
-
-[dependencies]
-leptos = { path = "../../leptos", features = ["csr"] }
-leptos_meta = { path = "../../meta", features = ["csr"] }
-log = "0.4"
-console_log = "1"
-console_error_panic_hook = "0.1.7"
-
-[dev-dependencies]
-wasm-bindgen = "0.2.87"
-wasm-bindgen-test = "0.3.37"
-pretty_assertions = "1.4.0"
-
-[dev-dependencies.web-sys]
-features = [
-    "Event",
-    "EventInit",
-    "EventTarget",
-    "HtmlElement",
-    "HtmlInputElement",
-    "XPathResult",
-]
-version = "0.3.64"

examples/counters_stable/Makefile.toml

@@ -1,18 +0,0 @@
-extend = [
-    { path = "../cargo-make/main.toml" },
-    { path = "../cargo-make/wasm-test.toml" },
-    { path = "../cargo-make/trunk_server.toml" },
-    { path = "../cargo-make/playwright-test.toml" },
-]
-
-[tasks.build]
-toolchain = "stable"
-command = "cargo"
-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/counters_stable/README.md

@@ -1,11 +0,0 @@
-# Leptos Counters Example on Rust Stable
-
-This example showcases a basic Leptos app with many counters. It is a good example of how to setup a basic reactive app with signals and effects, and how to interact with browser events. Unlike the other counters example, it will compile on Rust stable, because it has the `stable` feature enabled.
-
-## Getting Started
-
-See the [Examples README](../README.md) for setup and run instructions.
-
-## Quick Start
-
-Run `trunk serve --open` to run this example.

examples/counters_stable/e2e/.gitignore

@@ -1,4 +0,0 @@
-node_modules/
-/test-results/
-/playwright-report/
-/playwright/.cache/

examples/counters_stable/e2e/package-lock.json

@@ -1,83 +0,0 @@
-{
-  "name": "grip",
-  "lockfileVersion": 3,
-  "requires": true,
-  "packages": {
-    "": {
-      "name": "grip",
-      "devDependencies": {
-        "@playwright/test": "^1.35.1"
-      }
-    },
-    "node_modules/.pnpm/@playwright+test@1.33.0": {
-      "extraneous": true
-    },
-    "node_modules/.pnpm/@types+node@20.2.1/node_modules/@types/node": {
-      "version": "20.2.1",
-      "extraneous": true,
-      "license": "MIT"
-    },
-    "node_modules/.pnpm/playwright-core@1.33.0/node_modules/playwright-core": {
-      "version": "1.33.0",
-      "extraneous": true,
-      "license": "Apache-2.0",
-      "bin": {
-        "playwright": "cli.js"
-      },
-      "engines": {
-        "node": ">=14"
-      }
-    },
-    "node_modules/@playwright/test": {
-      "version": "1.35.1",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.35.1.tgz",
-      "integrity": "sha512-b5YoFe6J9exsMYg0pQAobNDR85T1nLumUYgUTtKm4d21iX2L7WqKq9dW8NGJ+2vX0etZd+Y7UeuqsxDXm9+5ZA==",
-      "dev": true,
-      "dependencies": {
-        "@types/node": "*",
-        "playwright-core": "1.35.1"
-      },
-      "bin": {
-        "playwright": "cli.js"
-      },
-      "engines": {
-        "node": ">=16"
-      },
-      "optionalDependencies": {
-        "fsevents": "2.3.2"
-      }
-    },
-    "node_modules/@types/node": {
-      "version": "20.3.1",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.3.1.tgz",
-      "integrity": "sha512-EhcH/wvidPy1WeML3TtYFGR83UzjxeWRen9V402T8aUGYsCHOmfoisV3ZSg03gAFIbLq8TnWOJ0f4cALtnSEUg==",
-      "dev": true
-    },
-    "node_modules/fsevents": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
-      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
-      "dev": true,
-      "hasInstallScript": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
-      }
-    },
-    "node_modules/playwright-core": {
-      "version": "1.35.1",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.35.1.tgz",
-      "integrity": "sha512-pNXb6CQ7OqmGDRspEjlxE49w+4YtR6a3X6mT1hZXeJHWmsEz7SunmvZeiG/+y1yyMZdHnnn73WKYdtV1er0Xyg==",
-      "dev": true,
-      "bin": {
-        "playwright-core": "cli.js"
-      },
-      "engines": {
-        "node": ">=16"
-      }
-    }
-  }
-}

examples/counters_stable/e2e/package.json

@@ -1,7 +0,0 @@
-{
-  "private": "true",
-  "scripts": {},
-  "devDependencies": {
-    "@playwright/test": "^1.35.1"
-  }
-}

examples/counters_stable/e2e/playwright.config.ts

@@ -1,77 +0,0 @@
-import { defineConfig, devices } from "@playwright/test";
-
-/**
- * Read environment variables from file.
- * https://github.com/motdotla/dotenv
- */
-// require('dotenv').config();
-
-/**
- * See https://playwright.dev/docs/test-configuration.
- */
-export default defineConfig({
-  testDir: "./tests",
-  /* Run tests in files in parallel */
-  fullyParallel: true,
-  /* Fail the build on CI if you accidentally left test.only in the source code. */
-  forbidOnly: !process.env.DEV,
-  /* Retry on CI only */
-  retries: process.env.DEV ? 0 : 10,
-  /* Opt out of parallel tests on CI. */
-  workers: process.env.DEV ? 1 : 1,
-  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
-  reporter: [["html", { open: "never" }], ["list"]],
-  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
-  use: {
-    /* Base URL to use in actions like `await page.goto('/')`. */
-    baseURL: "http://127.0.0.1:8080",
-
-    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
-    trace: "on-first-retry",
-  },
-
-  /* Configure projects for major browsers */
-  projects: [
-    {
-      name: "chromium",
-      use: { ...devices["Desktop Chrome"] },
-    },
-
-    // {
-    //   name: "firefox",
-    //   use: { ...devices["Desktop Firefox"] },
-    // },
-
-    // {
-    //   name: "webkit",
-    //   use: { ...devices["Desktop Safari"] },
-    // },
-
-    /* Test against mobile viewports. */
-    // {
-    //   name: 'Mobile Chrome',
-    //   use: { ...devices['Pixel 5'] },
-    // },
-    // {
-    //   name: 'Mobile Safari',
-    //   use: { ...devices['iPhone 12'] },
-    // },
-
-    /* Test against branded browsers. */
-    // {
-    //   name: 'Microsoft Edge',
-    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
-    // },
-    // {
-    //   name: 'Google Chrome',
-    //   use: { ..devices['Desktop Chrome'], channel: 'chrome' },
-    // },
-  ],
-
-  /* Run your local dev server before starting the tests */
-  // webServer: {
-  //   command: "cd ../ && trunk serve",
-  //   url: "http://127.0.0.1:8080",
-  //   reuseExistingServer: false, //!process.env.CI,
-  // },
-});

examples/counters_stable/e2e/tests/add_1k_counters.spec.ts

@@ -1,19 +0,0 @@
-import { test, expect } from "@playwright/test";
-import { CountersPage } from "./fixtures/counters_page";
-
-test.describe("Add 1000 Counters", () => {
-  test("should increase the number of counters", async ({ page }) => {
-    const ui = new CountersPage(page);
-
-    await Promise.all([
-      await ui.goto(),
-      await ui.addOneThousandCountersButton.waitFor(),
-    ]);
-
-    await ui.addOneThousandCounters();
-    await ui.addOneThousandCounters();
-    await ui.addOneThousandCounters();
-
-    await expect(ui.counters).toHaveText("3000");
-  });
-});

examples/counters_stable/e2e/tests/add_counter.spec.ts

@@ -1,15 +0,0 @@
-import { test, expect } from "@playwright/test";
-import { CountersPage } from "./fixtures/counters_page";
-
-test.describe("Add Counter", () => {
-  test("should increase the number of counters", async ({ page }) => {
-    const ui = new CountersPage(page);
-    await ui.goto();
-
-    await ui.addCounter();
-    await ui.addCounter();
-    await ui.addCounter();
-
-    await expect(ui.counters).toHaveText("3");
-  });
-});

examples/counters_stable/e2e/tests/clear_counters.spec.ts

@@ -1,18 +0,0 @@
-import { test, expect } from "@playwright/test";
-import { CountersPage } from "./fixtures/counters_page";
-
-test.describe("Clear Counters", () => {
-  test("should reset the counts", async ({ page }) => {
-    const ui = new CountersPage(page);
-    await ui.goto();
-
-    await ui.addCounter();
-    await ui.addCounter();
-    await ui.addCounter();
-
-    await ui.clearCounters();
-
-    await expect(ui.total).toHaveText("0");
-    await expect(ui.counters).toHaveText("0");
-  });
-});

examples/counters_stable/e2e/tests/decrement_count.spec.ts

@@ -1,16 +0,0 @@
-import { test, expect } from "@playwright/test";
-import { CountersPage } from "./fixtures/counters_page";
-
-test.describe("Decrement Count", () => {
-  test("should decrease the total count", async ({ page }) => {
-    const ui = new CountersPage(page);
-    await ui.goto();
-    await ui.addCounter();
-
-    await ui.decrementCount();
-    await ui.decrementCount();
-    await ui.decrementCount();
-
-    await expect(ui.total).toHaveText("-3");
-  });
-});

examples/counters_stable/e2e/tests/enter_count.spec.ts

@@ -1,30 +0,0 @@
-import { test, expect } from "@playwright/test";
-import { CountersPage } from "./fixtures/counters_page";
-
-test.describe("Enter Count", () => {
-  test("should increase the total count", async ({ page }) => {
-    const ui = new CountersPage(page);
-    await ui.goto();
-    await ui.addCounter();
-
-    await ui.enterCount("5");
-
-    await expect(ui.total).toHaveText("5");
-    await expect(ui.counters).toHaveText("1");
-  });
-
-  test("should decrease the total count", async ({ page }) => {
-    const ui = new CountersPage(page);
-    await ui.goto();
-    await ui.addCounter();
-    await ui.addCounter();
-    await ui.addCounter();
-
-    await ui.enterCount("100");
-    await ui.enterCount("100", 1);
-    await ui.enterCount("100", 2);
-    await ui.enterCount("50", 1);
-
-    await expect(ui.total).toHaveText("250");
-  });
-});

examples/counters_stable/e2e/tests/fixtures/counters_page.ts

@@ -1,98 +0,0 @@
-import { expect, Locator, Page } from "@playwright/test";
-
-export class CountersPage {
-  readonly page: Page;
-  readonly addCounterButton: Locator;
-  readonly addOneThousandCountersButton: Locator;
-  readonly clearCountersButton: Locator;
-
-  readonly incrementCountButton: Locator;
-  readonly counterInput: Locator;
-  readonly decrementCountButton: Locator;
-  readonly removeCountButton: Locator;
-
-  readonly total: Locator;
-  readonly counters: Locator;
-
-  constructor(page: Page) {
-    this.page = page;
-
-    this.addCounterButton = page.locator("button", { hasText: "Add Counter" });
-
-    this.addOneThousandCountersButton = page.locator("button", {
-      hasText: "Add 1000 Counters",
-    });
-
-    this.clearCountersButton = page.locator("button", {
-      hasText: "Clear Counters",
-    });
-
-    this.decrementCountButton = page.locator("button", {
-      hasText: "-1",
-    });
-
-    this.incrementCountButton = page.locator("button", {
-      hasText: "+1",
-    });
-
-    this.removeCountButton = page.locator("button", {
-      hasText: "x",
-    });
-
-    this.total = page.getByTestId("total");
-
-    this.counters = page.getByTestId("counters");
-
-    this.counterInput = page.getByRole("textbox");
-  }
-
-  async goto() {
-    await this.page.goto("/");
-  }
-
-  async addCounter() {
-    await Promise.all([
-      this.addCounterButton.waitFor(),
-      this.addCounterButton.click(),
-    ]);
-  }
-
-  async addOneThousandCounters() {
-    this.addOneThousandCountersButton.click();
-  }
-
-  async decrementCount(index: number = 0) {
-    await Promise.all([
-      this.decrementCountButton.nth(index).waitFor(),
-      this.decrementCountButton.nth(index).click(),
-    ]);
-  }
-
-  async incrementCount(index: number = 0) {
-    await Promise.all([
-      this.incrementCountButton.nth(index).waitFor(),
-      this.incrementCountButton.nth(index).click(),
-    ]);
-  }
-
-  async clearCounters() {
-    await Promise.all([
-      this.clearCountersButton.waitFor(),
-      this.clearCountersButton.click(),
-    ]);
-  }
-
-  async enterCount(count: string, index: number = 0) {
-    await Promise.all([
-      this.counterInput.nth(index).waitFor(),
-      this.counterInput.nth(index).fill(count),
-    ]);
-  }
-
-  async removeCounter(index: number = 0) {
-    await Promise.all([
-      this.removeCountButton.nth(index).waitFor(),
-      this.removeCountButton.nth(index).click(),
-    ]);
-  }
-}

examples/counters_stable/e2e/tests/increment_count.spec.ts

@@ -1,16 +0,0 @@
-import { test, expect } from "@playwright/test";
-import { CountersPage } from "./fixtures/counters_page";
-
-test.describe("Increment Count", () => {
-  test("should increase the total count", async ({ page }) => {
-    const ui = new CountersPage(page);
-    await ui.goto();
-    await ui.addCounter();
-
-    await ui.incrementCount();
-    await ui.incrementCount();
-    await ui.incrementCount();
-
-    await expect(ui.total).toHaveText("3");
-  });
-});

examples/counters_stable/e2e/tests/remove_counter.spec.ts

@@ -1,17 +0,0 @@
-import { test, expect } from "@playwright/test";
-import { CountersPage } from "./fixtures/counters_page";
-
-test.describe("Remove Counter", () => {
-  test("should decrement the number of counters", async ({ page }) => {
-    const ui = new CountersPage(page);
-    await ui.goto();
-
-    await ui.addCounter();
-    await ui.addCounter();
-    await ui.addCounter();
-
-    await ui.removeCounter(1);
-
-    await expect(ui.counters).toHaveText("2");
-  });
-});

examples/counters_stable/e2e/tests/view_counters.spec.ts

@@ -1,19 +0,0 @@
-import { test, expect } from "@playwright/test";
-import { CountersPage } from "./fixtures/counters_page";
-
-test.describe("View Counters", () => {
-  test("should see the title", async ({ page }) => {
-    const ui = new CountersPage(page);
-    await ui.goto();
-
-    await expect(page).toHaveTitle("Counters (Stable)");
-  });
-
-  test("should see the initial counts", async ({ page }) => {
-    const counters = new CountersPage(page);
-    await counters.goto();
-
-    await expect(counters.total).toHaveText("0");
-    await expect(counters.counters).toHaveText("0");
-  });
-});

examples/counters_stable/index.html

@@ -1,7 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <link data-trunk rel="rust" data-wasm-opt="z" data-weak-refs />
-  </head>
-  <body></body>
-</html>

examples/counters_stable/package.json

@@ -1,11 +0,0 @@
-{
-  "private": "true",
-  "scripts": {
-    "start-server": "trunk serve",
-    "e2e": "cargo make test-playwright",
-    "e2e:auto-start": "start-server-and-test start-server http://127.0.0.1:8080 e2e"
-  },
-  "devDependencies": {
-    "start-server-and-test": "^1.15.4"
-  }
-}

examples/counters_stable/src/lib.rs

@@ -1,118 +0,0 @@
-use leptos::*;
-use leptos_meta::*;
-
-const MANY_COUNTERS: usize = 1000;
-
-type CounterHolder = Vec<(usize, (ReadSignal<i32>, WriteSignal<i32>))>;
-
-#[derive(Copy, Clone)]
-struct CounterUpdater {
-    set_counters: WriteSignal<CounterHolder>,
-}
-
-#[component]
-pub fn Counters() -> impl IntoView {
-    let (next_counter_id, set_next_counter_id) = create_signal(0);
-    let (counters, set_counters) = create_signal::<CounterHolder>(vec![]);
-    provide_context(CounterUpdater { set_counters });
-
-    let add_counter = move |_| {
-        let id = next_counter_id.get();
-        let sig = create_signal(0);
-        set_counters.update(move |counters| counters.push((id, sig)));
-        set_next_counter_id.update(|id| *id += 1);
-    };
-
-    let add_many_counters = move |_| {
-        let next_id = next_counter_id.get();
-        let new_counters = (next_id..next_id + MANY_COUNTERS).map(|id| {
-            let signal = create_signal(0);
-            (id, signal)
-        });
-
-        set_counters.update(move |counters| counters.extend(new_counters));
-        set_next_counter_id.update(|id| *id += MANY_COUNTERS);
-    };
-
-    let clear_counters = move |_| {
-        set_counters.update(|counters| counters.clear());
-    };
-
-    view! {
-        <Title text="Counters (Stable)" />
-        <div>
-            <button on:click=add_counter>
-                "Add Counter"
-            </button>
-            <button on:click=add_many_counters>
-                {format!("Add {MANY_COUNTERS} Counters")}
-            </button>
-            <button on:click=clear_counters>
-                "Clear Counters"
-            </button>
-            <p>
-                "Total: "
-                <span data-testid="total">{move ||
-                    counters.get()
-                        .iter()
-                        .map(|(_, (count, _))| count.get())
-                        .sum::<i32>()
-                        .to_string()
-                }</span>
-                " from "
-                <span data-testid="counters">{move || counters.with(|counters| counters.len()).to_string()}</span>
-                " counters."
-            </p>
-            <ul>
-                <For
-                    each={move || counters.get()}
-                    key={|counter| counter.0}
-                    children=move |(id, (value, set_value))| {
-                        view! {
-                            <Counter id value set_value/>
-                        }
-                    }
-                />
-            </ul>
-        </div>
-    }
-}
-
-#[component]
-fn Counter(
-    id: usize,
-    value: ReadSignal<i32>,
-    set_value: WriteSignal<i32>,
-) -> impl IntoView {
-    let CounterUpdater { set_counters } = use_context().unwrap();
-
-    let input = move |ev| {
-        set_value
-            .set(event_target_value(&ev).parse::<i32>().unwrap_or_default())
-    };
-
-    // this will run when the scope is disposed, i.e., when this row is deleted
-    // because the signal was created in the parent scope, it won't be disposed
-    // of until the parent scope is. but we no longer need it, so we'll dispose of
-    // it when this row is deleted, instead. if we don't dispose of it here,
-    // this memory will "leak," i.e., the signal will continue to exist until the
-    // parent component is removed. in the case of this component, where it's the
-    // root, that's the lifetime of the program.
-    on_cleanup(move || {
-        log::debug!("deleted a row");
-        value.dispose();
-    });
-
-    view! {
-        <li>
-            <button data-testid="decrement_count" on:click=move |_| set_value.update(move |value| *value -= 1)>"-1"</button>
-            <input data-testid="counter_input" type="text"
-                prop:value={move || value.get().to_string()}
-                on:input=input
-            />
-            <span>{value}</span>
-            <button data-testid="increment_count" on:click=move |_| set_value.update(move |value| *value += 1)>"+1"</button>
-            <button data-testid="remove_counter" on:click=move |_| set_counters.update(move |counters| counters.retain(|(counter_id, _)| counter_id != &id))>"x"</button>
-        </li>
-    }
-}

examples/counters_stable/src/main.rs

@@ -1,8 +0,0 @@
-use counters_stable::Counters;
-use leptos::*;
-
-fn main() {
-    _ = console_log::init_with_level(log::Level::Debug);
-    console_error_panic_hook::set_once();
-    mount_to_body(|| view! { <Counters/> })
-}

examples/counters_stable/tests/web/add_1k_counters.rs

@@ -1,17 +0,0 @@
-use super::*;
-use crate::counters_page as ui;
-use pretty_assertions::assert_eq;
-
-#[wasm_bindgen_test]
-fn should_increase_the_number_of_counters() {
-    // Given
-    ui::view_counters();
-
-    // When
-    ui::add_1k_counters();
-    ui::add_1k_counters();
-    ui::add_1k_counters();
-
-    // Then
-    assert_eq!(ui::counters(), 3000);
-}

examples/counters_stable/tests/web/add_counter.rs

@@ -1,17 +0,0 @@
-use super::*;
-use crate::counters_page as ui;
-use pretty_assertions::assert_eq;
-
-#[wasm_bindgen_test]
-fn should_increase_the_number_of_counters() {
-    // Given
-    ui::view_counters();
-
-    // When
-    ui::add_counter();
-    ui::add_counter();
-    ui::add_counter();
-
-    // Then
-    assert_eq!(ui::counters(), 3);
-}

examples/counters_stable/tests/web/clear_counters.rs

@@ -1,19 +0,0 @@
-use super::*;
-use crate::counters_page as ui;
-use pretty_assertions::assert_eq;
-
-#[wasm_bindgen_test]
-fn should_reset_the_counts() {
-    // Given
-    ui::view_counters();
-    ui::add_counter();
-    ui::add_counter();
-    ui::add_counter();
-
-    // When
-    ui::clear_counters();
-
-    // Then
-    assert_eq!(ui::total(), 0);
-    assert_eq!(ui::counters(), 0);
-}

examples/counters_stable/tests/web/decrement_counter.rs

@@ -1,18 +0,0 @@
-use super::*;
-use crate::counters_page as ui;
-use pretty_assertions::assert_eq;
-
-#[wasm_bindgen_test]
-fn should_decrease_the_total_count() {
-    // Given
-    ui::view_counters();
-    ui::add_counter();
-
-    // When
-    ui::decrement_counter(1);
-    ui::decrement_counter(1);
-    ui::decrement_counter(1);
-
-    // Then
-    assert_eq!(ui::total(), -3);
-}

examples/counters_stable/tests/web/enter_count.rs

@@ -1,34 +0,0 @@
-use super::*;
-use crate::counters_page as ui;
-use pretty_assertions::assert_eq;
-
-#[wasm_bindgen_test]
-fn should_increase_the_total_count() {
-    // Given
-    ui::view_counters();
-    ui::add_counter();
-
-    // When
-    ui::enter_count(1, 5);
-
-    // Then
-    assert_eq!(ui::total(), 5);
-}
-
-#[wasm_bindgen_test]
-fn should_decrease_the_total_count() {
-    // Given
-    ui::view_counters();
-    ui::add_counter();
-    ui::add_counter();
-    ui::add_counter();
-
-    // When
-    ui::enter_count(1, 100);
-    ui::enter_count(2, 100);
-    ui::enter_count(3, 100);
-    ui::enter_count(1, 50);
-
-    // Then
-    assert_eq!(ui::total(), 250);
-}

examples/counters_stable/tests/web/fixtures/counters_page.rs

@@ -1,112 +0,0 @@
-use counters_stable::Counters;
-use leptos::*;
-use wasm_bindgen::JsCast;
-use web_sys::{Element, Event, EventInit, HtmlElement, HtmlInputElement};
-
-// Actions
-
-pub fn add_1k_counters() {
-    find_by_text("Add 1000 Counters").click();
-}
-
-pub fn add_counter() {
-    find_by_text("Add Counter").click();
-}
-
-pub fn clear_counters() {
-    find_by_text("Clear Counters").click();
-}
-
-pub fn decrement_counter(index: u32) {
-    counter_html_element(index, "decrement_count").click();
-}
-
-pub fn enter_count(index: u32, count: i32) {
-    let input = counter_input_element(index, "counter_input");
-    input.set_value(count.to_string().as_str());
-    let mut event_init = EventInit::new();
-    event_init.bubbles(true);
-    let event = Event::new_with_event_init_dict("input", &event_init).unwrap();
-    input.dispatch_event(&event).unwrap();
-}
-
-pub fn increment_counter(index: u32) {
-    counter_html_element(index, "increment_count").click();
-}
-
-pub fn remove_counter(index: u32) {
-    counter_html_element(index, "remove_counter").click();
-}
-
-pub fn view_counters() {
-    remove_existing_counters();
-    mount_to_body(|| view! { <Counters/> });
-}
-
-// Results
-
-pub fn counters() -> i32 {
-    data_test_id("counters").parse::<i32>().unwrap()
-}
-
-pub fn title() -> String {
-    leptos::document().title()
-}
-
-pub fn total() -> i32 {
-    data_test_id("total").parse::<i32>().unwrap()
-}
-
-// Internal
-
-fn counter_element(index: u32, text: &str) -> Element {
-    let selector =
-        format!("li:nth-child({}) [data-testid=\"{}\"]", index, text);
-    leptos::document()
-        .query_selector(&selector)
-        .unwrap()
-        .unwrap()
-}
-
-fn counter_html_element(index: u32, text: &str) -> HtmlElement {
-    counter_element(index, text)
-        .dyn_into::<HtmlElement>()
-        .unwrap()
-}
-
-fn counter_input_element(index: u32, text: &str) -> HtmlInputElement {
-    counter_element(index, text)
-        .dyn_into::<HtmlInputElement>()
-        .unwrap()
-}
-
-fn data_test_id(id: &str) -> String {
-    let selector = format!("[data-testid=\"{}\"]", id);
-    leptos::document()
-        .query_selector(&selector)
-        .unwrap()
-        .expect("counters not found")
-        .text_content()
-        .unwrap()
-}
-
-fn find_by_text(text: &str) -> HtmlElement {
-    let xpath = format!("//*[text()='{}']", text);
-    let document = leptos::document();
-    document
-        .evaluate(&xpath, &document)
-        .unwrap()
-        .iterate_next()
-        .unwrap()
-        .unwrap()
-        .dyn_into::<HtmlElement>()
-        .unwrap()
-}
-
-fn remove_existing_counters() {
-    if let Some(counter) =
-        leptos::document().query_selector("body div").unwrap()
-    {
-        counter.remove();
-    }
-}

examples/counters_stable/tests/web/fixtures/mod.rs

@@ -1 +0,0 @@
-pub mod counters_page;

examples/counters_stable/tests/web/increment_counter.rs

@@ -1,18 +0,0 @@
-use super::*;
-use crate::counters_page as ui;
-use pretty_assertions::assert_eq;
-
-#[wasm_bindgen_test]
-fn should_increase_the_total_count() {
-    // Given
-    ui::view_counters();
-    ui::add_counter();
-
-    // When
-    ui::increment_counter(1);
-    ui::increment_counter(1);
-    ui::increment_counter(1);
-
-    // Then
-    assert_eq!(ui::total(), 3);
-}

examples/counters_stable/tests/web/main.rs

@@ -1,16 +0,0 @@
-use wasm_bindgen_test::*;
-
-// Test Suites
-pub mod add_1k_counters;
-pub mod add_counter;
-pub mod clear_counters;
-pub mod decrement_counter;
-pub mod enter_count;
-pub mod increment_counter;
-pub mod remove_counter;
-pub mod view_counters;
-
-pub mod fixtures;
-pub use fixtures::*;
-
-wasm_bindgen_test_configure!(run_in_browser);

examples/counters_stable/tests/web/remove_counter.rs

@@ -1,18 +0,0 @@
-use super::*;
-use crate::counters_page as ui;
-use pretty_assertions::assert_eq;
-
-#[wasm_bindgen_test]
-fn should_decrement_the_number_of_counters() {
-    // Given
-    ui::view_counters();
-    ui::add_counter();
-    ui::add_counter();
-    ui::add_counter();
-
-    // When
-    ui::remove_counter(2);
-
-    // Then
-    assert_eq!(ui::counters(), 2);
-}

examples/counters_stable/tests/web/view_counters.rs

@@ -1,22 +0,0 @@
-use super::*;
-use crate::counters_page as ui;
-use pretty_assertions::assert_eq;
-
-#[wasm_bindgen_test]
-fn should_see_the_initial_counts() {
-    // When
-    ui::view_counters();
-
-    // Then
-    assert_eq!(ui::total(), 0);
-    assert_eq!(ui::counters(), 0);
-}
-
-#[wasm_bindgen_test]
-fn should_see_the_title() {
-    // When
-    ui::view_counters();
-
-    // Then
-    assert_eq!(ui::title(), "Counters (Stable)");
-}

examples/directives/Cargo.toml

@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = { path = "../../leptos", features = ["csr", "nightly"] }
+leptos = { path = "../../leptos", features = ["csr"] }
 log = "0.4"
 console_log = "1"
 console_error_panic_hook = "0.1.7"

examples/directives/rust-toolchain.toml

@@ -1,2 +1,2 @@
 [toolchain]
-channel = "nightly"
+channel = "stable" # test change

examples/directives/src/lib.rs

@@ -1,5 +1,6 @@
 use leptos::{ev::click, html::AnyElement, *};
 
+// no extra parameter
 pub fn highlight(el: HtmlElement<AnyElement>) {
     let mut highlighted = false;
 
@@ -14,6 +15,7 @@ pub fn highlight(el: HtmlElement<AnyElement>) {
     });
 }
 
+// one extra parameter
 pub fn copy_to_clipboard(el: HtmlElement<AnyElement>, content: &str) {
     let content = content.to_string();
 
@@ -31,6 +33,35 @@ pub fn copy_to_clipboard(el: HtmlElement<AnyElement>, content: &str) {
     });
 }
 
+// custom parameter
+
+#[derive(Clone)]
+pub struct Amount(usize);
+
+impl From<usize> for Amount {
+    fn from(value: usize) -> Self {
+        Self(value)
+    }
+}
+
+// a 'default' value if no value is passed in
+impl From<()> for Amount {
+    fn from(_: ()) -> Self {
+        Self(1)
+    }
+}
+
+// .into() will automatically be called on the parameter
+pub fn add_dot(el: HtmlElement<AnyElement>, amount: Amount) {
+    _ = el.clone().on(click, move |_| {
+        el.set_inner_text(&format!(
+            "{}{}",
+            el.inner_text(),
+            ".".repeat(amount.0)
+        ))
+    })
+}
+
 #[component]
 pub fn SomeComponent() -> impl IntoView {
     view! {
@@ -46,6 +77,11 @@ pub fn App() -> impl IntoView {
 
     view! {
         <a href="#" use:copy_to_clipboard=data>"Copy \"" {data} "\" to clipboard"</a>
+        // automatically applies the directive to every root element in `SomeComponent`
         <SomeComponent use:highlight />
+        // no value will default to `().into()`
+        <button use:add_dot>"Add a dot"</button>
+        // `5.into()` automatically called
+        <button use:add_dot=5>"Add 5 dots"</button>
     }
 }

examples/error_boundary/Cargo.toml

@@ -8,7 +8,7 @@ codegen-units = 1
 lto = true
 
 [dependencies]
-leptos = { path = "../../leptos", features = ["csr", "nightly"] }
+leptos = { path = "../../leptos", features = ["csr"] }
 console_log = "1"
 log = "0.4"
 console_error_panic_hook = "0.1.7"

examples/error_boundary/README.md

@@ -8,7 +8,7 @@ See the [Examples README](../README.md) for setup and run instructions.
 
 ## Testing
 
-This project is configured to run start and stop of processes for integration tests wihtout the use of Cargo Leptos or Node.
+This project is configured to run start and stop of processes for integration tests without the use of Cargo Leptos or Node.
 
 ## Quick Start
 

examples/error_boundary/rust-toolchain.toml

@@ -1,2 +1,2 @@
 [toolchain]
-channel = "nightly"
+channel = "stable" # test change

examples/error_boundary/src/lib.rs

@@ -5,7 +5,8 @@ pub fn App() -> impl IntoView {
     let (value, set_value) = create_signal(Ok(0));
 
     // when input changes, try to parse a number from the input
-    let on_input = move |ev| set_value(event_target_value(&ev).parse::<i32>());
+    let on_input =
+        move |ev| set_value.set(event_target_value(&ev).parse::<i32>());
 
     view! {
         <h1>"Error Handling"</h1>

examples/errors_axum/Cargo.toml

@@ -7,22 +7,21 @@ edition = "2021"
 crate-type = ["cdylib", "rlib"]
 
 [dependencies]
-console_log = "1.0.0"
-console_error_panic_hook = "0.1.7"
-cfg-if = "1.0.0"
-leptos = { path = "../../leptos", features = ["nightly"] }
+console_log = "1.0"
+console_error_panic_hook = "0.1"
+leptos = { path = "../../leptos" }
 leptos_axum = { path = "../../integrations/axum", optional = true }
 leptos_meta = { path = "../../meta" }
 leptos_router = { path = "../../router" }
-log = "0.4.17"
+log = "0.4"
 serde = { version = "1", features = ["derive"] }
-simple_logger = "4.0.0"
-axum = { version = "0.6.1", optional = true }
-tower = { version = "0.4.13", optional = true }
-tower-http = { version = "0.4", features = ["fs"], optional = true }
-tokio = { version = "1.22.0", features = ["full"], optional = true }
-http = { version = "0.2.8" }
-thiserror = "1.0.38"
+simple_logger = "4.0"
+axum = { version = "0.7", optional = true }
+tower = { version = "0.4", optional = true }
+tower-http = { version = "0.5", features = ["fs"], optional = true }
+tokio = { version = "1", features = ["full"], optional = true }
+http = { version = "1.0" }
+thiserror = "1.0"
 wasm-bindgen = "0.2"
 
 [features]
@@ -62,7 +61,7 @@ reload-port = 3001
 end2end-cmd = "npx playwright test"
 #  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
+# Set by cargo-leptos watch when building with that tool. Controls whether autoreload JS will be included in the head
 watch = false
 # The environment Leptos will run in, usually either "DEV" or "PROD"
 env = "DEV"

examples/errors_axum/rust-toolchain.toml

@@ -1,2 +1,2 @@
 [toolchain]
-channel = "nightly"
+channel = "stable" # test change

examples/errors_axum/src/error_template.rs

@@ -1,6 +1,5 @@
 use crate::errors::AppError;
-use cfg_if::cfg_if;
-use leptos::{logging::log, Errors, *};
+use leptos::{logging::log, *};
 #[cfg(feature = "ssr")]
 use leptos_axum::ResponseOptions;
 
@@ -30,12 +29,13 @@ pub fn ErrorTemplate(
 
     // Only the response code for the first error is actually sent from the server
     // this may be customized by the specific application
-    cfg_if! { if #[cfg(feature="ssr")] {
+    #[cfg(feature = "ssr")]
+    {
         let response = use_context::<ResponseOptions>();
         if let Some(response) = response {
             response.set_status(errors[0].status_code());
         }
-    }}
+    }
 
     view! {
         <h1>{if errors.len() > 1 {"Errors"} else {"Error"}}</h1>

examples/errors_axum/src/fallback.rs

@@ -1,43 +1,48 @@
-use cfg_if::cfg_if;
+use crate::landing::App;
+use axum::{
+    body::Body,
+    extract::State,
+    http::{Request, Response, StatusCode, Uri},
+    response::{IntoResponse, Response as AxumResponse},
+};
+use leptos::{view, LeptosOptions};
+use tower::ServiceExt;
+use tower_http::services::ServeDir;
 
-cfg_if! { if #[cfg(feature = "ssr")] {
-    use axum::{
-        body::{boxed, Body, BoxBody},
-        extract::State,
-        response::IntoResponse,
-        http::{Request, Response, StatusCode, Uri},
-    };
-    use axum::response::Response as AxumResponse;
-    use tower::ServiceExt;
-    use tower_http::services::ServeDir;
-    use leptos::{LeptosOptions, view};
-    use crate::landing::App;
+pub async fn file_and_error_handler(
+    uri: Uri,
+    State(options): State<LeptosOptions>,
+    req: Request<Body>,
+) -> AxumResponse {
+    let root = options.site_root.clone();
+    let res = get_static_file(uri.clone(), &root).await.unwrap();
 
-    pub async fn file_and_error_handler(uri: Uri, State(options): State<LeptosOptions>, req: Request<Body>) -> AxumResponse {
-        let root = options.site_root.clone();
-        let res = get_static_file(uri.clone(), &root).await.unwrap();
-
-        if res.status() == StatusCode::OK {
-           res.into_response()
-        } else{
-            let handler = leptos_axum::render_app_to_stream(
-                options.to_owned(),
-                move || view!{ <App/> }
-            );
-            handler(req).await.into_response()
-        }
+    if res.status() == StatusCode::OK {
+        res.into_response()
+    } else {
+        let handler = leptos_axum::render_app_to_stream(
+            options.to_owned(),
+            move || view! { <App/> },
+        );
+        handler(req).await.into_response()
     }
+}
 
-    async fn get_static_file(uri: Uri, root: &str) -> Result<Response<BoxBody>, (StatusCode, String)> {
-        let req = Request::builder().uri(uri.clone()).body(Body::empty()).unwrap();
-        // `ServeDir` implements `tower::Service` so we can call it with `tower::ServiceExt::oneshot`
-        // This path is relative to the cargo root
-        match ServeDir::new(root).oneshot(req).await {
-            Ok(res) => Ok(res.map(boxed)),
-            Err(err) => Err((
-                StatusCode::INTERNAL_SERVER_ERROR,
-                format!("Something went wrong: {err}"),
-            )),
-        }
+async fn get_static_file(
+    uri: Uri,
+    root: &str,
+) -> Result<Response<Body>, (StatusCode, String)> {
+    let req = Request::builder()
+        .uri(uri.clone())
+        .body(Body::empty())
+        .unwrap();
+    // `ServeDir` implements `tower::Service` so we can call it with `tower::ServiceExt::oneshot`
+    // This path is relative to the cargo root
+    match ServeDir::new(root).oneshot(req).await {
+        Ok(res) => Ok(res.into_response()),
+        Err(err) => Err((
+            StatusCode::INTERNAL_SERVER_ERROR,
+            format!("Something went wrong: {err}"),
+        )),
     }
-}}
+}

examples/errors_axum/src/lib.rs

@@ -1,24 +1,21 @@
-use cfg_if::cfg_if;
 pub mod error_template;
 pub mod errors;
+#[cfg(feature = "ssr")]
 pub mod fallback;
 pub mod landing;
 
-// Needs to be in lib.rs AFAIK because wasm-bindgen needs us to be compiling a lib. I may be wrong.
-cfg_if! {
-    if #[cfg(feature = "hydrate")] {
-        use leptos::*;
-        use wasm_bindgen::prelude::wasm_bindgen;
-        use crate::landing::*;
+use wasm_bindgen::prelude::wasm_bindgen;
 
-        #[wasm_bindgen]
-        pub fn hydrate() {
-            _ = console_log::init_with_level(log::Level::Debug);
-            console_error_panic_hook::set_once();
+#[cfg(feature = "hydrate")]
+#[wasm_bindgen]
+pub fn hydrate() {
+    use crate::landing::*;
+    use leptos::*;
 
-            leptos::mount_to_body(|| {
-                view! {  <App/> }
-            });
-        }
-    }
+    _ = console_log::init_with_level(log::Level::Debug);
+    console_error_panic_hook::set_once();
+
+    leptos::mount_to_body(|| {
+        view! {  <App/> }
+    });
 }

examples/errors_axum/src/main.rs

@@ -1,41 +1,39 @@
-use cfg_if::cfg_if;
-
-cfg_if! { if #[cfg(feature = "ssr")] {
-    use crate::fallback::file_and_error_handler;
-    use crate::landing::*;
-    use axum::body::Body as AxumBody;
-    use axum::{
-        extract::{State, Path},
+#[cfg(feature = "ssr")]
+mod ssr_imports {
+    pub use axum::{
+        body::Body as AxumBody,
+        extract::{Path, State},
         http::Request,
         response::{IntoResponse, Response},
-        routing::{get, post},
+        routing::get,
         Router,
     };
-    use errors_axum::*;
-    use leptos::{logging::log, *};
-    use leptos_axum::{generate_route_list, LeptosRoutes};
-}}
+    pub use errors_axum::{fallback::*, landing::App};
+    pub use leptos::{logging::log, *};
+    pub use leptos_axum::{generate_route_list, LeptosRoutes};
 
-//Define a handler to test extractor with state
-#[cfg(feature = "ssr")]
-async fn custom_handler(
-    Path(id): Path<String>,
-    State(options): State<LeptosOptions>,
-    req: Request<AxumBody>,
-) -> Response {
-    let handler = leptos_axum::render_app_to_stream_with_context(
-        options.clone(),
-        move || {
-            provide_context(id.clone());
-        },
-        App,
-    );
-    handler(req).await.into_response()
+    // This custom handler lets us provide Axum State via context
+    pub async fn custom_handler(
+        Path(id): Path<String>,
+        State(options): State<LeptosOptions>,
+        req: Request<AxumBody>,
+    ) -> Response {
+        let handler = leptos_axum::render_app_to_stream_with_context(
+            options.clone(),
+            move || {
+                provide_context(id.clone());
+            },
+            App,
+        );
+        handler(req).await.into_response()
+    }
 }
 
 #[cfg(feature = "ssr")]
 #[tokio::main]
 async fn main() {
+    use ssr_imports::*;
+
     simple_logger::init_with_level(log::Level::Debug)
         .expect("couldn't initialize logging");
 
@@ -52,7 +50,6 @@ async fn main() {
 
     // build our application with a route
     let app = Router::new()
-        .route("/api/*fn_name", post(leptos_axum::handle_server_fns))
         .route("/special/:id", get(custom_handler))
         .leptos_routes(&leptos_options, routes, App)
         .fallback(file_and_error_handler)
@@ -61,8 +58,8 @@ async fn main() {
     // run our app with hyper
     // `axum::Server` is a re-export of `hyper::Server`
     log!("listening on http://{}", &addr);
-    axum::Server::bind(&addr)
-        .serve(app.into_make_service())
+    let listener = tokio::net::TcpListener::bind(&addr).await.unwrap();
+    axum::serve(listener, app.into_make_service())
         .await
         .unwrap();
 }
@@ -71,5 +68,5 @@ async fn main() {
 #[cfg(not(feature = "ssr"))]
 pub fn main() {
     // This example cannot be built as a trunk standalone CSR-only app.
-    //  The server is needed to demonstrate the error statuses.
+    // The server is needed to demonstrate the error statuses.
 }

examples/fetch/Cargo.toml

@@ -8,7 +8,7 @@ codegen-units = 1
 lto = true
 
 [dependencies]
-leptos = { path = "../../leptos", features = ["csr", "nightly"] }
+leptos = { path = "../../leptos", features = ["csr"] }
 reqwasm = "0.5"
 serde = { version = "1", features = ["derive"] }
 log = "0.4"

examples/fetch/rust-toolchain.toml

@@ -1,2 +1,2 @@
 [toolchain]
-channel = "nightly"
+channel = "stable" # test change

examples/fetch/src/lib.rs

@@ -44,7 +44,7 @@ pub fn fetch_example() -> impl IntoView {
     // 1) our error type isn't serializable/deserializable
     // 2) we're not doing server-side rendering in this example anyway
     //    (during SSR, create_resource will begin loading on the server and resolve on the client)
-    let cats = create_local_resource(cat_count, fetch_cats);
+    let cats = create_local_resource(move || cat_count.get(), fetch_cats);
 
     let fallback = move |errors: RwSignal<Errors>| {
         let error_list = move || {
@@ -85,7 +85,7 @@ pub fn fetch_example() -> impl IntoView {
                     prop:value=move || cat_count.get().to_string()
                     on:input=move |ev| {
                         let val = event_target_value(&ev).parse::<CatCount>().unwrap_or(0);
-                        set_cat_count(val);
+                        set_cat_count.set(val);
                     }
                 />
             </label>