ci(examples): split jobs and verify changed examples (#1155)

.github/workflows/verify-all-examples.yml

@@ -0,0 +1,43 @@
+name: Verify All Examples
+
+on:
+  workflow_dispatch:
+  push:
+    tags:
+      - v*
+
+jobs:
+  call-with-matrix:
+    name: Verify
+    strategy:
+      fail-fast: false
+      matrix:
+        project_dir: [examples/counter,
+examples/counter_isomorphic,
+examples/counters,
+examples/counters_stable,
+examples/counter_without_macros,
+examples/error_boundary,
+examples/errors_axum,
+examples/fetch,
+examples/hackernews,
+examples/hackernews_axum,
+examples/js-framework-benchmark,
+examples/leptos-tailwind-axum,
+examples/login_with_token_csr_only,
+examples/parent_child,
+examples/router,
+examples/session_auth_axum,
+examples/slots,
+examples/ssr_modes,
+examples/ssr_modes_axum,
+examples/tailwind,
+examples/tailwind_csr_trunk,
+examples/timer,
+examples/todo_app_sqlite,
+examples/todo_app_sqlite_axum,
+examples/todo_app_sqlite_viz,
+examples/todomvc]
+    uses: ./.github/workflows/verify-example.yml
+    with:
+      project_dir: ${{ matrix.project_dir }}

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

@@ -0,0 +1,68 @@
+name: Verify Changed Examples
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  changed-dirs:
+    name: Get Changes
+    runs-on: ubuntu-latest
+    outputs:
+      matrix: ${{ steps.set-matrix.outputs.matrix }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
+      - name: Get all example files that changed
+        id: changed-files
+        uses: tj-actions/changed-files@v36
+        with:
+          files: |
+            examples
+
+      - name: List all example files that changed
+        run: echo '${{ steps.changed-files.outputs.all_changed_files }}'
+
+      - name: Get example project directories that changed
+        id: changed-dirs
+        uses: tj-actions/changed-files@v36
+        with:
+          dir_names: true
+          dir_names_max_depth: "2"
+          files: |
+            examples
+            !examples/cargo-make
+            !examples/gtk
+          json: true
+          quotepath: false
+
+      - name: List example project directories that changed
+        run: echo '${{ steps.changed-dirs.outputs.all_changed_files }}'
+
+      - name: Set Matrix
+        id: set-matrix
+        run: |
+          if [ ${{ steps.changed-dirs.outputs.any_changed }} == 'true' ]; then
+            # Create matrix with changed directories
+            echo "matrix={\"directory\":${{ steps.changed-dirs.outputs.all_changed_files }}}" >> "$GITHUB_OUTPUT"
+          else
+            # Create matrix with one item to prevent an empty vector error
+            echo "matrix={\"directory\":[\"INTERNAL\"]}" >> "$GITHUB_OUTPUT"
+          fi
+
+  matrix-job:
+    name: Verify
+    needs: [changed-dirs]
+    strategy:
+      matrix: ${{ fromJSON(needs.changed-dirs.outputs.matrix) }}
+      fail-fast: false
+    uses: ./.github/workflows/verify-example.yml
+    with:
+      project_dir: ${{ matrix.directory }}

.github/workflows/verify-example.yml

@@ -1,17 +1,19 @@
-name: Verify Examples
+name: Verify Example
 
 on:
-  push:
-    branches: [main]
-  pull_request:
-    branches: [main]
+  workflow_call:
+    inputs:
+      project_dir:
+        required: true
+        type: string
 
 env:
   CARGO_TERM_COLOR: always
+  CARGO_REGISTRIES_CRATES_IO_PROTOCOL: sparse
 
 jobs:
   test:
-    name: Verify examples ${{ matrix.os }} (using rustc ${{ matrix.rust }}
+    name: Verify ${{ matrix.os }} (using rustc ${{ matrix.rust }})
     runs-on: ${{ matrix.os }}
     strategy:
       matrix:
@@ -21,6 +23,7 @@ jobs:
           - ubuntu-latest
 
     steps:
+      # Setup environment
       - uses: actions/checkout@v3
 
       - name: Setup Rust
@@ -63,7 +66,6 @@ jobs:
 
       - name: Get pnpm store directory
         id: pnpm-cache
-        shell: bash
         run: |
           echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
 
@@ -75,5 +77,12 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-pnpm-store-
 
-      - name: Run verify-flow on all web examples
-        run: cargo make --profile=github-actions verify-examples
+      # Verify project
+      - name: Verify
+        run: |
+          if [ "${{ inputs.project_dir }}" = "INTERNAL" ]; then
+            echo No verification required
+          else
+            cd ${{ inputs.project_dir }}
+            cargo make --profile=github-actions verify-flow
+          fi

Makefile.toml

@@ -102,6 +102,7 @@ args = ["make", "test-unit-and-web"]
 
 [tasks.verify-examples]
 description = "Run all quality checks and tests for examples"
+env = { CLEAN_AFTER_VERIFY = "true" }
 cwd = "examples"
 command = "cargo"
 args = ["make", "verify-flow"]

examples/cargo-make/common.toml

@@ -6,7 +6,8 @@ description = "Check for style violations"
 dependencies = ["check-format-flow", "clippy-flow"]
 
 [tasks.check-format]
-args = ["fmt", "--", "--check", "--config-path", "../../"]
+env = { LEPTOS_PROJECT_DIRECTORY = "../../" }
+args = ["fmt", "--", "--check", "--config-path", "${LEPTOS_PROJECT_DIRECTORY}"]
 
 [tasks.clean-cargo]
 description = "Runs the cargo clean command."

examples/cargo-make/main.toml

@@ -15,7 +15,11 @@ dependencies = ["test-flow", "test-e2e-flow"]
 [tasks.pre-verify]
 
 [tasks.post-verify]
-dependencies = ["clean-all"]
+dependencies = ["maybe-clean-all"]
+
+[tasks.maybe-clean-all]
+description = "Used to clean up locally after call to verify-examples"
+condition = { env_true = ["CLEAN_AFTER_VERIFY"] }
 
 [tasks.test-e2e-flow]
 description = "Provides pre and post hooks for test-e2e"

examples/counter_without_macros/src/main.rs

@@ -1,6 +1,7 @@
 use counter_without_macros::counter;
 use leptos::*;
 
+/// Show the counter
 pub fn main() {
     _ = console_log::init_with_level(log::Level::Debug);
     console_error_panic_hook::set_once();

examples/leptos-tailwind-axum/Makefile.toml

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

examples/leptos-tailwind-axum/src/app.rs

@@ -20,26 +20,25 @@ pub fn App(cx: Scope) -> impl IntoView {
 
 #[component]
 fn Home(cx: Scope) -> impl IntoView {
-
     let (value, set_value) = create_signal(cx, 0);
 
     // thanks to https://tailwindcomponents.com/component/blue-buttons-example for the showcase layout
     view! { cx,
         <Title text="Leptos + Tailwindcss"/>
-            <main>
-                <div class="bg-gradient-to-tl from-blue-800 to-blue-500 text-white font-mono flex flex-col min-h-screen">
-                    <div class="flex flex-row-reverse flex-wrap m-auto">
-                        <button on:click=move |_| set_value.update(|value| *value += 1) class="rounded px-3 py-2 m-1 border-b-4 border-l-2 shadow-lg bg-blue-700 border-blue-800 text-white">
-                            "+"
-                        </button>
-                        <button class="rounded px-3 py-2 m-1 border-b-4 border-l-2 shadow-lg bg-blue-800 border-blue-900 text-white">
-                            {value}
-                        </button>
-                        <button on:click=move |_| set_value.update(|value| *value -= 1) class="rounded px-3 py-2 m-1 border-b-4 border-l-2 shadow-lg bg-blue-700 border-blue-800 text-white">
-                            "-"
-                        </button>
-                    </div>
+        <main>
+            <div class="bg-gradient-to-tl from-blue-800 to-blue-500 text-white font-mono flex flex-col min-h-screen">
+                <div class="flex flex-row-reverse flex-wrap m-auto">
+                    <button on:click=move |_| set_value.update(|value| *value += 1) class="rounded px-3 py-2 m-1 border-b-4 border-l-2 shadow-lg bg-blue-700 border-blue-800 text-white">
+                        "+"
+                    </button>
+                    <button class="rounded px-3 py-2 m-1 border-b-4 border-l-2 shadow-lg bg-blue-800 border-blue-900 text-white">
+                        {value}
+                    </button>
+                    <button on:click=move |_| set_value.update(|value| *value -= 1) class="rounded px-3 py-2 m-1 border-b-4 border-l-2 shadow-lg bg-blue-700 border-blue-800 text-white">
+                        "-"
+                    </button>
                 </div>
-            </main>
+            </div>
+        </main>
     }
 }

examples/leptos-tailwind-axum/src/error_template.rs

@@ -1,10 +1,9 @@
 use cfg_if::cfg_if;
 use http::status::StatusCode;
 use leptos::*;
-use thiserror::Error;
-
 #[cfg(feature = "ssr")]
 use leptos_axum::ResponseOptions;
+use thiserror::Error;
 
 #[derive(Clone, Debug, Error)]
 pub enum AppError {

examples/leptos-tailwind-axum/src/main.rs

@@ -4,13 +4,13 @@ async fn main() {
     use axum::{extract::Extension, routing::post, Router};
     use leptos::*;
     use leptos_axum::{generate_route_list, LeptosRoutes};
+    use leptos_tailwind::{app::*, fileserv::file_and_error_handler};
     use log::info;
-    use leptos_tailwind::app::*;
-    use leptos_tailwind::fileserv::file_and_error_handler;
     use std::sync::Arc;
 
-    simple_logger::init_with_level(log::Level::Info).expect("couldn't initialize logging");
-   
+    simple_logger::init_with_level(log::Level::Info)
+        .expect("couldn't initialize logging");
+
     // Setting get_configuration(None) means we'll be using cargo-leptos's env values
     // For deployment these variables are:
     // <https://github.com/leptos-rs/start-axum#executing-a-server-on-a-remote-machine-without-the-toolchain>
@@ -24,7 +24,11 @@ async fn main() {
     // build our application with a route
     let app = Router::new()
         .route("/api/*fn_name", post(leptos_axum::handle_server_fns))
-        .leptos_routes(leptos_options.clone(), routes, |cx| view! { cx, <App/> })
+        .leptos_routes(
+            leptos_options.clone(),
+            routes,
+            |cx| view! { cx, <App/> },
+        )
         .fallback(file_and_error_handler)
         .layer(Extension(Arc::new(leptos_options)));
 

examples/login_with_token_csr_only/api-boundary/Makefile.toml

@@ -1 +1,4 @@
 extend = { path = "../../cargo-make/main.toml" }
+
+[tasks.check-format]
+env = { LEPTOS_PROJECT_DIRECTORY = "../../../" }

examples/login_with_token_csr_only/client/Makefile.toml

@@ -1 +1,4 @@
 extend = { path = "../../cargo-make/main.toml" }
+
+[tasks.check-format]
+env = { LEPTOS_PROJECT_DIRECTORY = "../../../" }

examples/login_with_token_csr_only/server/Makefile.toml

@@ -1 +1,4 @@
 extend = { path = "../../cargo-make/main.toml" }
+
+[tasks.check-format]
+env = { LEPTOS_PROJECT_DIRECTORY = "../../../" }

examples/tailwind/README.md

@@ -108,4 +108,4 @@ Many thanks to GreatGreg for putting together this guide. You can find the origi
 ## Playwright Testing
 
 - Run `cargo make setup` to install dependencies
-- Run `cargo leptos test` or `cargo leptos end-to-end` to run the tests
+- Run `cargo leptos test` or `cargo leptos end-to-end` to run the test