Fix #602: class and id shortcuts (#639)

Author: borkdude

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 [Squint](https://github.com/squint-cljs/squint): Light-weight ClojureScript dialect
 
+## Unreleased
+
+- Fix #602: support hiccup-style shorthand for id and class attributes in `#jsx` and `#html`
+
 ## v0.8.140 (2025-03-09)
 
 - Fix [#635](https://github.com/squint-cljs/squint/issues/635): `range` fixes

src/squint/compiler_common.cljc

@@ -1179,6 +1179,33 @@ break;}" body)
 (defn void-tag? [tag-name]
   (contains? void-tags tag-name))
 
+(defn- parse-tag
+  "From hiccup, thanks @weavejester"
+  [^String tag]
+  (let [id-index    (let [index (.indexOf tag "#")] (when (pos? index) index))
+        class-index (let [index (.indexOf tag ".")] (when (pos? index) index))]
+    [(cond
+       id-index    (.substring tag 0 id-index)
+       class-index (.substring tag 0 class-index)
+       :else tag)
+     (when id-index
+       (if class-index
+         (.substring tag (unchecked-inc-int id-index) class-index)
+         (.substring tag (unchecked-inc-int id-index))))
+     (when class-index
+       (.substring tag (unchecked-inc-int class-index)))]))
+
+(defn- merge-attrs [attrs short-attrs]
+  (let [attrs (if-let [c (:class attrs)]
+                (if-let [sc (:class short-attrs)]
+                  (assoc attrs :class (str sc " " c))
+                  attrs)
+                attrs)
+        attrs (if-let [id (:id short-attrs (:id attrs))]
+                (assoc attrs :id id)
+                attrs)]
+    attrs))
+
 (defn emit-vector [expr env]
   (if (and (:jsx env)
            (let [f (first expr)]
@@ -1198,9 +1225,17 @@ break;}" body)
           tag-name* (if fragment?
                       (symbol "")
                       tag-name)
-          tag-name (if (and (not fragment?) keyw?)
-                     (subs (str tag) 1)
-                     (emit tag-name* (expr-env (dissoc env :jsx))))
+          [tag-name id class]
+          (if (and (not fragment?) keyw?)
+            (parse-tag  (subs (str tag) 1))
+            [(emit tag-name* (expr-env (dissoc env :jsx)))])
+          classes (when class (str/replace class "." " "))
+          short-attrs (cond-> nil
+                        classes (assoc :class classes)
+                        id (assoc :id id))
+          attrs (if attrs
+                  (merge-attrs attrs short-attrs)
+                  short-attrs)
           html? (:html env)
           outer-html? (:outer-html (meta expr))]
       (if (and (not html?) (:jsx env) (:jsx-runtime env))

test/squint/html_test.cljs

@@ -125,3 +125,18 @@
        )
      (p/catch #(is false "nooooo"))
      (p/finally done))))
+
+(deftest html-id-class-shortcut-test
+  (t/async done
+    (let [js (squint.compiler/compile-string
+              "[(str #html [:div.container])
+                (str #html [:a#foo.bar.baz {:class \"quux\"}])]"
+              {:repl true :elide-exports true :context :return})
+          js (str/replace "(async function() { %s } )()" "%s" js)]
+      (-> (js/eval js)
+          (.then
+           #(doseq [[k v] (map vector ["<div class=\"container\"></div>"
+                                       "<a class=\"bar baz quux\" id=\"foo\"></a>"] %)]
+              (is (html= k v))))
+          (.catch #(is false "nooooo"))
+          (.finally done)))))

test/squint/jsx_test.cljs

@@ -76,7 +76,11 @@
     (is (= "<div><div>Hello</div></div>" (test-jsx "#jsx [:div [:<> [:div \"Hello\"]]]"))))
 
   (testing "fragment"
-    (is (= "<div><div>Hello</div></div>" (test-jsx "#jsx [:div [:<> [:div \"Hello\"]]]")))))
+    (is (= "<div><div>Hello</div></div>" (test-jsx "#jsx [:div [:<> [:div \"Hello\"]]]"))))
+  (testing "class shorthand"
+    (is (= "<div class=\"container\"></div>" (test-jsx "#jsx [:div.container]"))))
+  (testing "id and classes shorthand"
+    (is (= "<div class=\"foo bar\" id=\"my-id\"></div>" (test-jsx "#jsx [:div#my-id.foo.bar]")))))
 
 ;; uncomment to test how JSX behaves
 #_(prn (test-jsx* "<div className={[\"dude\", \"bar\"]}></div>"))