Fork me on GitHub
#helix
<
2023-02-22
>
rafaeldelboni18:02:44

Hello quick question, I have the following sample:

;; works
($ "div" {:class "class-name"} "hello") 

;; don't work
(defn style [] {:class "class-name"})
($ "div" (style) "hello")
I saw that the $ does some type checks on the args, what is the best approach to support this behavior currently? I was playing around https://github.com/kushidesign/kushi thought to test it with helix, but ended up having this problem.

rafaeldelboni18:02:03

It throws the following:

Uncaught Error: Objects are not valid as a React child (found: object with keys {key, val, __hash, cljs$lang$protocol_mask$partition0$, cljs$lang$protocol_mask$partition1$}). If you meant to render a collection of children, use an array instead.

rafaeldelboni19:02:57

Strange, I'm definitely doing something wrong here, if I copy the definition of $ locally it works. oO

(defn $$
  "Create a new React element from a valid React type.
  Example:
  
($ MyComponent \"child1\" ($ \"span\" {:style {:color \"green\"}} \"child2\" ))
"
  [type & args]
  (let [?p (first args)
        ?c (rest args)
        native? (or (keyword? type)
                    (string? type)
                    (:native (meta type)))
        type' (if (keyword? type)
                (name type)
                type)]
    (println ?p (map? ?p))
    (if (map? ?p)
      (apply create-element
             type'
             (if native?
               (impl.props/-dom-props ?p)
               (impl.props/-props ?p))
             ?c)
      (apply create-element
             type'
             nil
             args))))
Just added a print for debug and
;; now works oO
($$ "div" (style) "hello")

lilactown19:02:10

the fix is to do

($ "div {& (style)} "hello")

lilactown19:02:22

the definition you copied is of the CLJS function form, not the macro form. When you call ($ ,,,) CLJS chooses the macro first. if you pass the $ as a value, like (apply $ ,,,) then it will use the function that you copied, which does handle dynamic props but is slower.

rafaeldelboni19:02:14

Got it! Thanks for clarifying

lilactown19:02:48

for sure! interested to see what your experiments result in 🙂