2023-02-22 helix | Clojure Slack Archive

helix

rafaeldelboni 2023-02-22T18:44:44.708399Z

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.

rafaeldelboni 2023-02-22T18:47:03.524559Z

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.

rafaeldelboni 2023-02-22T19:00:57.000789Z

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")

lilactown 2023-02-22T19:18:43.809509Z

You can read about it here https://github.com/lilactown/helix/blob/master/docs/creating-elements.md#dynamic-props

lilactown 2023-02-22T19:19:10.548199Z

the fix is to do

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

lilactown 2023-02-22T19:20:22.463529Z

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.

rafaeldelboni 2023-02-22T19:21:14.602429Z

Got it! Thanks for clarifying

lilactown 2023-02-22T19:23:48.039119Z

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

Clojurians Log v2

helix