Merge pull request #2 from johnbcodes/feature/htmx-instead

Replace Hotwire Turbo with htmx

Cargo.toml

@@ -15,7 +15,6 @@ lto = true
 [dependencies]
 anyhow = "1.0"
 axum = "0.7"
-convert_case = "0.6"
 currency_rs = { git = "https://github.com/johnbcodes/currency_rs", branch = "feature/db-diesel2-sqlite", version = "1.1", features = [ "db-diesel2-sqlite" ] }
 diesel = { version = "2.1", features = ["r2d2", "sqlite", "time"] }
 diesel_migrations = "2.1"

README.md

@@ -4,18 +4,23 @@
 
 ### Motivation and caveats
 
-The primary motivation was to learn more about how [Hotwire Turbo](https://turbo.hotwired.dev/). Since
-no particular backend is required I wanted to see what it would take to integrate with Rust. A secondary
-motivation was a chance to investigate the following custom stack:
+The main motivation is learning to develop web applications with Rust and JavaScript combined. It now includes
+the following stack:
 
+* [htmx](https://htmx.org/)
+* [hyperscript](https://hyperscript.org/)
 * [Axum](https://github.com/tokio-rs/axum)
-* [Rusqlite](https://github.com/rusqlite/rusqlite)
+* [Diesel](https://diesel.rs/)
 * [markup.rs](https://github.com/utkarshkukreti/markup.rs)
-* Rust / NPM web builds/tooling
+* Custom Rust / NPM build integration
 * [Tailwind](https://tailwindcss.com/)
-* Other important crates
 
-Due to the motivations above and a lack of time some features of the tutorial were left out:
+In the past it included these technologies:
+
+* [Hotwire Turbo](https://turbo.hotwired.dev/)
+* [Rusqlite](https://github.com/rusqlite/rusqlite)
+
+Some features of the tutorial were intentionally left out and possibly will be worked on in the future:
 
 * Broadcasting with WebSockets (Chapter 5)
 * Security (Chapter 6)
@@ -24,9 +29,10 @@ Additionally, there were some other features and integral parts of Rails that ha
 
 * The look and feel deviates from [demo](https://www.hotrails.dev/quotes) because the author has made some UI enhancements that are not in the tutorial
 * Viewports less than tablet sizing
-* "to_sentence" on ValidationErrors struct for flash message
+* Proper validation error messages ("to_sentence" on ValidationErrors struct for flash message)
 * Only add border color to fields with errors
 * Labels for input fields
+* Delete confirmation
 * Probably a few others
 
 ## Getting Started

package.json

@@ -12,8 +12,8 @@
     "parcel:prephtml": "cp ui/src/base.html ui/target/build/"
   },
   "devDependencies": {
-    "@hotwired/turbo": "7.3.0",
-    "@hotwired/stimulus": "3.2.2",
+    "htmx.org": "1.9.9",
+    "hyperscript.org": "0.9.12",
     "npm-run-all": "4.1.5",
     "parcel": "2.10.2",
     "tailwindcss": "3.3.5"

src/layout.rs

@@ -16,19 +16,16 @@ markup::define! {
                     div[class = "font-bold ml-auto mr-3 text-header"] { "Accountant" }
                     a[class = "button button-dark", href = "#"] { "Sign out" }
                 }
-                div[id = "flash", class = "fixed top-20 left-1/2 -translate-x-1/2 flex flex-col items-center gap-3 m-w-full w-max px-4 py-0"] {
-                    @Flash{ message: None }
-                }
+                div[id = "flash", class = "fixed top-20 left-1/2 -translate-x-1/2 flex flex-col items-center gap-3 m-w-full w-max px-4 py-0"] {}
                 @body
             }
         }
     }
 
-    Flash<'a>(message: Option<&'a str>) {
-        @if let Some(message) = message {
+    Flash<'a>(message: &'a str) {
+        div[id = "flash", "hx-swap-oob" = "innerHTML"] {
             div[class = "text-[0.875rem] text-white px-4 py-2 bg-dark rounded-full animate-appear-then-fade",
-                "data-controller" = "removals",
-                "data-action" = "animationend->removals#remove"] {
+                "_" = "on animationend remove me"] {
                 @message
             }
         }