Allow variable-bound attribute maps

Author: Sleepful

README.md

@@ -70,20 +70,6 @@ Functions and macros below are a part of `solid.core` namespace:
 ($ button {:on-click #(prn :pressed)} "press")
 ```
 
-#### Child nodes
-
-```clj
-;; ✅ bound
-(let [title "the label"
-      input ($ :input) ] 
-  ($ :label title input))
-
-;; ✅ or explicit
-  ($ :label "the label" ($ :input)))
-
-;; <label> the label <input> </label>
-```
-
 ### Attributes
 
 The `:class` attribute supports multiple formats:
@@ -102,50 +88,45 @@ The `:class` attribute supports multiple formats:
 {:class {:active @is-active?
          :disabled @is-disabled?}}
 ```
-
-#### Bound Attributes
-
-Given a component declared with `defui`:
+#### Passing attributes and child nodes
 
 ```clj
 (defui custom-label [{:keys [input-name children]}  attrs]
   ($ :label {:for input-name} children))
-```
 
-It would be called like this:
-
-```clj
+;; ✅ Pass the attribute map as a literal
 ($ custom-label {:input-name "my-input"} "the label title")
-```
 
-However, to pass bound variables for the `defui` component, 
 
-```clj
-;; ❌ Using a bound variable for attributes, `attrs` is
-;;    indistinguishable from passing multiple child nodes for the `$` macro
 (let [attrs {:input-name "my-input"} 
       children "the label title"] 
-  ($ custom-label attrs children))
-
-;; ✅ Wrapping the attribute variable with a vector, `[attrs]`
-;;    signals the macro that it should be treated as an attribute map
-(let [attrs {:input-name "my-input"} 
-      children "the label title"] 
-  ($ custom-label [attrs] children))
+  ($ :<>                            ;; Fragment component
+    ($ custom-label attrs children) ;; ✅ Pass the attribute map as a bound variable
+    ($ custom-label children)       ;; ✅ Attribute map is optional, it may be elided entirely
+    ($ custom-label)                ;; also valid
+    ($ custom-label attrs)))        ;; also valid
 ```
 
 Do not use bound variables for keyword tags:
 
 ```clj
 ;; ❌ Not supported for keyword tags,
 ;;    Only supported for `defui` tags
-(let [attrs {:class "my-div"} ] 
-  ($ :div [attrs] children))
+(let [attrs {:class "my-div"}
+      title ($ "the label")
+      input ($ :input)] 
+  ($ :label attrs title input))
 
 ;; ✅ Be explicit with a map literal
-($ :div {:class "my-div"} children))
+(let [attrs 
+      title ($ "the label")
+      input ($ :input)] 
+  ($ :label {:class "my-label"} title input))
+;; <label class="my-label"> the label <input> </label>
 ```
 
+
+
 ### Rendering
 
 Conditional rendering with `if` and `when`, via [<Show> component](https://docs.solidjs.com/reference/components/show)

src/solid/compiler.cljs

@@ -3,6 +3,44 @@
 
 (def ^:private cc-regexp (js/RegExp. "-(\\w)" "g"))
 
+;; Marker type for reactive prop values
+;; This distinguishes reactive getters from regular callbacks
+(deftype ReactiveProp [getter])
+
+(defn reactive-prop
+  "Wraps a function as a reactive prop getter.
+  Used internally by the $ macro for component props."
+  [f]
+  (->ReactiveProp f))
+
+(defn reactive-prop?
+  "Returns true if x is a reactive prop wrapper."
+  [x]
+  (instance? ReactiveProp x))
+
+(defn literal?
+  "Returns true if the expression is a compile-time literal that cannot be reactive.
+  Literals include: strings, numbers, keywords, nil, booleans."
+  [expr]
+  (or (string? expr)
+      (number? expr)
+      (keyword? expr)
+      (nil? expr)
+      (true? expr)
+      (false? expr)))
+
+(defn wrap-component-props
+  "Same intention as `wrap-component-props`, however this
+  funcion  one is meant
+  to expand into runtime values"
+  [attrs]
+  (reduce-kv
+    (fn [m k v]
+      (assoc m k
+             (reactive-prop (fn [] v))))
+    {}
+    attrs))
+
 (defn- cc-fn [s]
   (str/upper-case (aget s 1)))
 

src/solid/core.clj

@@ -4,17 +4,6 @@
             [solid.compiler :as sc]
             [solid.lint :as lint]))
 
-(defn- literal?
-  "Returns true if the expression is a compile-time literal."
-  [x]
-  (core/or
-    (string? x)
-    (number? x)
-    (keyword? x)
-    (nil? x)
-    (true? x)
-    (false? x)))
-
 (defmacro defui
   "Defines a Solid UI component. Supports docstrings and metadata.
   
@@ -44,11 +33,14 @@
        (let [~(core/or props (gensym "props")) (solid.core/-props props#)]
          ~@body))))
 
+(defn- wrap-child-node [node]
+  (if (sc/literal? node)
+    node  ; Don't wrap literals - they can't be reactive
+    `(fn [] ~node)))
+
 (defn- wrap-children [children]
   (core/for [x children]
-    (if (literal? x)
-      x  ; Don't wrap literals - they can't be reactive
-      `(fn [] ~x))))
+    (wrap-child-node x)))
 
 (defn- fn-form?
   "Returns true if the expression is a function literal (fn or fn*)."
@@ -58,14 +50,13 @@
          (core/or (= head 'fn)
                   (= head 'fn*)))))
 
-(defn- wrap-component-props
+(defn wrap-component-props
   "Wraps component prop values in reactive-prop for fine-grained reactivity.
   Does not wrap:
   - Literals (strings, numbers, keywords, nil, booleans)
   - Function forms (fn, fn*/#())"
   [props]
-  (core/cond
-    (map? props)
+  (if (map? props)
     (reduce-kv
       (fn [m k v]
         (assoc m k
@@ -75,18 +66,24 @@
                  ;; Function forms are callbacks, don't wrap
                  (fn-form? v) v
                  ;; Everything else gets wrapped in reactive-prop
-                 :else `(solid.core/reactive-prop (fn [] ~v)))))
+                 :else `(solid.compiler/reactive-prop (fn [] ~v)))))
       {}
       props)
-    (vector? props) ;; attribute map is passed bound to a runtime value 
-    `(let [v# (first ~props)]
-       (reduce-kv
-         (fn [m# k# v#]
-           (assoc m# k#
-                  (solid.core/reactive-prop (fn [] v#))))
-         {}
-         v#))
-    :else props))
+    props))
+
+(defn wrap-props-or-children
+  "Similar to `wrap-component-props`, this one considers that 
+  the first value might be a prop map, or might be a child node,
+  so it must figure out at runtime how to treat the first value"
+  ([] [])
+  ([maybe-attrs & children]
+   (let [first `(doto (if (map? ~maybe-attrs)
+                        (cljs.core/js-obj
+                          "props"
+                          (solid.compiler/wrap-component-props ~maybe-attrs))
+                        ~(wrap-child-node maybe-attrs)) #(prn "hellooo"))
+         rest (wrap-children children)]
+     (into [first] rest))))
 
 (defmacro $ [tag & args]
   (if (keyword? tag)
@@ -98,9 +95,9 @@
           (lint/lint-element-attrs! tag (first args) &env))
         `(create-element ~(name tag) ~attrs ~@(wrap-children children))))
     (let [[attrs & children] args]
-      (if ((some-fn map? vector?) attrs)
+      (if (map? attrs)
         `(create-element ~tag (cljs.core/js-obj "props" ~(wrap-component-props attrs)) ~@(wrap-children children))
-        `(create-element ~tag ~@(wrap-children args))))))
+        `(create-element ~tag ~@(apply wrap-props-or-children args))))))
 
 (defmacro if
   ([test then]

src/solid/core.cljs

@@ -6,21 +6,6 @@
             ["solid-js/h/dist/h.js" :default h]
             [solid.compiler :as sc]))
 
-;; Marker type for reactive prop values
-;; This distinguishes reactive getters from regular callbacks
-(deftype ReactiveProp [getter])
-
-(defn reactive-prop
-  "Wraps a function as a reactive prop getter.
-  Used internally by the $ macro for component props."
-  [f]
-  (->ReactiveProp f))
-
-(defn reactive-prop?
-  "Returns true if x is a reactive prop wrapper."
-  [x]
-  (instance? ReactiveProp x))
-
 (defn create-element [tag & args]
   (when (string? tag) (sc/with-numeric-props (first args)))
   (apply h tag args))
@@ -118,7 +103,7 @@
     (-lookup this k nil))
   (-lookup [this k not-found]
     (let [v (get props-map k not-found)]
-      (if (reactive-prop? v)
+      (if (sc/reactive-prop? v)
         ((.-getter ^ReactiveProp v))  ; Call the reactive getter
         v)))            ; Pass through as-is (callbacks, literals, etc.)
 

test/vitest/basic_component.cljc

@@ -38,13 +38,55 @@
   ($ :label {:data-testid data-testid} children))
 
 (test
-  "Defui component receives map attributes as a runtime variable, wrapped in vector literal",
+  "Component receives map attributes as a runtime variable, wrapped in vector literal",
   (fn []
     (j/let [title "the label"
             input ($ :input)
             attrs {:data-testid "label-with-attrs"}
-            ^:js {:keys [baseElement]} (render #($ label-with-attrs [attrs] title input))
+            ^:js {:keys [baseElement]} (render #($ label-with-attrs attrs title input))
             screen (.. page (elementLocator baseElement))
             label (.. screen (getByTestId "label-with-attrs"))]
       (->
         (.. expect (element (.. label (getByText "the label"))) toBeInTheDocument)))))
+
+(defui simple-label [{:keys [children]}  attrs]
+  ($ :label {:data-testid "simple-label"} children))
+
+(test
+  "Component without any props or children",
+  (fn []
+    (j/let [^:js {:keys [baseElement]} (render #($ simple-label))
+            screen (.. page (elementLocator baseElement))]
+      (->
+        (.. expect (element (.. screen (getByTestId "simple-label"))) toBeInTheDocument)))))
+
+(test
+  "Component with a single variable-bound child-node",
+  (fn []
+    (j/let [title "single child node"
+            ^:js {:keys [baseElement]} (render #($ :<> ($ simple-label title)))
+            screen (.. page (elementLocator baseElement))]
+      (->
+        (.. expect (element (.. screen (getByText "single child node"))) toBeInTheDocument)))))
+
+(defui button-with-reactive-prop [{:keys [label sig unique-id]}]
+  ($ :label label
+     ($ :button {:on-click #(swap! sig + 1)
+                 :data-testid unique-id}
+        unique-id "Count: " @sig)))
+
+(test
+  "Component signal updates on user event",
+  (fn []
+    (j/let [sig (s/signal 0)
+            unique-id (s/uid)
+            ^:js {:keys [baseElement]} (render #($ button-with-reactive-prop
+                                                   {:label "Button"
+                                                    :unique-id unique-id
+                                                    :sig sig}))
+            screen (.. page (elementLocator baseElement))
+            incrementButton (.. screen (getByTestId unique-id))]
+      (->
+        (.. expect (element (.. screen (getByText (str unique-id "Count: 0")))) toBeInTheDocument)
+        (.then (fn [] (.click incrementButton)))
+        (.then (fn [] (.. expect (element (.. screen (getByText (str unique-id "Count: 1")))) toBeInTheDocument)))))))