html attr improvements

src/squint/compiler_common.cljc

@@ -1060,7 +1060,7 @@ break;}" body)
                             (do
                               (when-let [dyn (:has-dynamic-expr env)]
                                 (reset! dyn true))
-                              (format "${%s}" (emit v (dissoc env :jsx))))
+                              (format "${squint_html.attrs(%s)}" (emit v (dissoc env :jsx))))
                             (str "{..." (emit v (dissoc env :jsx)) "}"))
                           (str (name k) "="
                                (let [env env]

src/squint/html.js

@@ -1,18 +1,46 @@
+function css(v) {
+  let ret = "";
+  if (v == null) return ret;
+  let first = true;
+  for (const kv of Object.entries(v)) {
+    if (!first) ret += ' ';
+    ret += kv[0];
+    ret += ":";
+    ret += kv[1];
+    ret += ';';
+    first = false;
+  }
+  return ret;
+}
+
+export function attrs(v) {
+  let ret = "";
+  if (v == null) return ret;
+  let first = true;
+  for (const kv of Object.entries(v)) {
+    if (!first) {
+      ret += ' ';
+    }
+    ret += kv[0];
+    ret += "=";
+    ret += '"';
+    const v1 = kv[1];
+    if (typeof(v1) === 'object') {
+      ret += css(v1);
+    } else
+      ret += v1;
+    ret += '"';
+    first = false;
+  }
+  return ret;
+}
+
 function toHTML(v) {
   if (v == null) return;
   if (typeof(v) === 'string') return v;
   if (v[Symbol.iterator]) {
     return [...v].join("");
   }
-  if (typeof v === 'object') {
-    let ret = "";
-    for (const kv of Object.entries(v)) {
-      ret += kv[0];
-      ret += "=";
-      ret += '"' + kv[1] + '"';
-      return ret;
-    }
-  }
   return v;
 }