fix: issue with ordering of class attribute and class=("fancy-name-200", true) (closes #907) (#914)

Makefile.toml

@@ -75,8 +75,20 @@ command = "cargo"
 args = ["+nightly", "test-all-features"]
 install_crate = "cargo-all-features"
 
+[tasks.test-examples]
+description = "Run all unit and web tests for examples"
+cwd = "examples"
+command = "cargo"
+args = ["make", "test-unit-and-web"]
+
+[tasks.verify-examples]
+description = "Run all quality checks and tests for examples"
+cwd = "examples"
+command = "cargo"
+args = ["make", "verify-flow"]
+
 [env]
-RUSTFLAGS=""
+RUSTFLAGS = ""
 
 [env.github-actions]
-RUSTFLAGS="-D warnings"
+RUSTFLAGS = "-D warnings"

examples/Makefile.toml

@@ -0,0 +1,60 @@
+[env]
+CARGO_MAKE_EXTEND_WORKSPACE_MAKEFILE = true
+
+# Emulate workspace
+CARGO_MAKE_WORKSPACE_EMULATION = true
+
+CARGO_MAKE_CRATE_WORKSPACE_MEMBERS = [
+    "counter",
+    "counter_isomorphic",
+    #"counters", - FIXME: test compile errors
+    "counters_stable",
+    "counter_without_macros",
+    "error_boundary",
+    "errors_axum",
+    "fetch",
+    "hackernews",
+    "hackernews_axum",
+    "login_with_token_csr_only",
+    "parent_child",
+    "router",
+    "session_auth_axum",
+    "ssr_modes",
+    "ssr_modes_axum",
+    "tailwind",
+    "tailwind_csr_trunk",
+    "todo_app_sqlite",
+    "todo_app_sqlite_axum",
+    "todo_app_sqlite_viz",
+    "todomvc",
+]
+
+[tasks.verify-flow]
+description = "Provides pre and post hooks for verify"
+dependencies = ["pre-verify-flow", "verify", "post-verify-flow"]
+
+[tasks.verify]
+description = "Run all quality checks and tests"
+dependencies = ["check-style", "test-unit-and-web"]
+
+[tasks.test-unit-and-web]
+description = "Run all unit and web tests"
+dependencies = ["test-flow", "web-test-flow"]
+
+[tasks.check-style]
+description = "Check for style violations"
+dependencies = ["check-format-flow", "clippy-flow"]
+
+[tasks.pre-verify-flow]
+
+[tasks.post-verify-flow]
+
+[tasks.web-test-flow]
+description = "Provides pre and post hooks for web-test"
+dependencies = ["pre-web-test-flow", "web-test", "post-web-test-flow"]
+
+[tasks.pre-web-test-flow]
+
+[tasks.web-test]
+
+[tasks.post-web-test-flow]

examples/counter_without_macros/Makefile.toml

@@ -1,7 +1,7 @@
 [env]
 CARGO_MAKE_WASM_TEST_ARGS = "--headless --chrome"
 
-[tasks.post-test]
+[tasks.web-test]
 command = "cargo"
 args = ["make", "wasm-pack-test"]
 

leptos_dom/src/helpers.rs

@@ -1,6 +1,6 @@
 //! A variety of DOM utility functions.
 
-use crate::{is_server, window};
+use crate::{events::typed as ev, is_server, window};
 use leptos_reactive::{on_cleanup, Scope};
 use std::time::Duration;
 use wasm_bindgen::{prelude::Closure, JsCast, JsValue, UnwrapThrowExt};
@@ -438,6 +438,18 @@ pub fn window_event_listener(
     }
 }
 
+/// Creates a window event listener where the event in the callback is already appropriately cast.
+pub fn window_event_listener_with_precast<E: ev::EventDescriptor + 'static>(
+    event: E,
+    cb: impl Fn(E::EventType) + 'static,
+) where
+    E::EventType: JsCast,
+{
+    window_event_listener(&event.name(), move |e| {
+        cb(e.unchecked_into::<E::EventType>())
+    });
+}
+
 #[doc(hidden)]
 /// This exists only to enable type inference on event listeners when in SSR mode.
 pub fn ssr_event_listener<E: crate::ev::EventDescriptor + 'static>(

leptos_dom/src/html.rs

@@ -658,6 +658,15 @@ impl<El: ElementDescriptor + 'static> HtmlElement<El> {
     }
 
     /// Adds a class to an element.
+    /// 
+    /// **Note**: In the builder syntax, this will be overwritten by the `class` 
+    /// attribute if you use `.attr("class", /* */)`. In the `view` macro, they 
+    /// are automatically re-ordered so that this over-writing does not happen.
+    /// 
+    /// # Panics
+    /// This directly uses the browser’s `classList` API, which means it will throw 
+    /// a runtime error if you pass more than a single class name. If you want to 
+    /// pass more than one class name at a time, you can use [HtmlElement::classes].
     #[track_caller]
     pub fn class(
         self,

leptos_macro/src/view.rs

@@ -842,7 +842,8 @@ fn element_to_tokens(
         };
         let attrs = node.attributes.iter().filter_map(|node| {
             if let Node::Attribute(node) = node {
-                if node.key.to_string().trim().starts_with("class:") {
+                let name = node.key.to_string();
+                if name.trim().starts_with("class:") || fancy_class_name(&name, cx, node).is_some() {
                     None
                 } else {
                     Some(attribute_to_tokens(cx, node, global_class))
@@ -853,7 +854,11 @@ fn element_to_tokens(
         });
         let class_attrs = node.attributes.iter().filter_map(|node| {
             if let Node::Attribute(node) = node {
-                if node.key.to_string().trim().starts_with("class:") {
+                let name = node.key.to_string();
+                if let Some((fancy, _, _)) = fancy_class_name(&name, cx, node) {
+                    Some(fancy)
+                }
+                else if name.trim().starts_with("class:") {
                     Some(attribute_to_tokens(cx, node, global_class))
                 } else {
                     None