2023-10-06 reagent | Clojure Slack Archive

reagent

liebs 2023-10-06T14:56:00.936579Z

is there a way to name Reagent components without reagent.core/create-class? With metadata, perhaps?

p-himik 2023-10-06T15:07:56.133299Z

A form-1 component derives its name from the function. A form-2 component derives its name from the outer function. A form-3 component derives its name from the :display-name property. What are the scenarios where you don't see a proper name of a component?

liebs 2023-10-06T15:08:33.496219Z

just when something breaks, it says "error occurred in reagent8 component" or the like

liebs 2023-10-06T15:08:52.932409Z

I can typically figure out the source of the problem so it's not a big deal

p-himik 2023-10-06T15:08:58.880139Z

What's the version of Reagent that you're using?

liebs 2023-10-06T15:09:10.478489Z

1.2.0

p-himik 2023-10-06T15:09:57.746719Z

Names like reagent8 should only come from unnamed functions. Is that your case?

liebs 2023-10-06T15:10:46.764409Z

ah yeah I fixed this error already but it did originate in a form-2 component, I had an extra set of brackets in my inner component that broke the render

p-himik 2023-10-06T15:11:53.756259Z

With a form-2 component, the name is derived from the outer function, not the inner one. So unless the outer function was also without a name, it should've been handled correctly.

liebs 2023-10-06T15:12:02.978619Z

and I have the dubiously bad habit of not naming my anonymous functions even though I know that is supported

p-himik 2023-10-06T15:12:29.310149Z

I usually don't name anonymous functions as well. :) Haven't had any problems with it though.

liebs 2023-10-06T15:13:32.535519Z

I recreated it and I see this

The above error occurred in the <reagent8> component:

cmp@http://localhost:8080/js/cljs-runtime/reagent.impl.component.js:508:43
div
shadow$provide.module$node_modules$react_daisyui$dist$react_daisyui_cjs/Card<@http://localhost:8080/js/cljs-runtime/module$node_modules$react_daisyui$dist$react_daisyui_cjs.js:98:293
cmp@http://localhost:8080/js/cljs-runtime/reagent.impl.component.js:508:43
div
div
div
cmp@http://localhost:8080/js/cljs-runtime/reagent.impl.component.js:508:43
div
cmp@http://localhost:8080/js/cljs-runtime/reagent.impl.component.js:508:43

Consider adding an error boundary to your tree to customize error handling behavior.
Visit  to learn more about error boundaries.

p-himik 2023-10-06T15:14:22.811989Z

I don't see any reagent8-like names.

p-himik 2023-10-06T15:14:31.468539Z

Ah, I'm blind.

liebs 2023-10-06T15:14:31.750369Z

the top line

p-himik 2023-10-06T15:14:38.998559Z

What's the code that resulted in that error?

liebs 2023-10-06T15:16:12.243999Z

dumbed down but it has this form

(defn outer-component []
  (let [foo (atom nil)]
    (fn []
      [inner-component-that-breaks])))

where that extra set of brackets appears in the body of inner-component-that-breaks

liebs 2023-10-06T15:19:32.350879Z

is it because in this case it's a nested error (the top level exception being invalid arity: 0 ) that the name gets wiped out?

p-himik 2023-10-06T15:23:29.621729Z

Ah, when you have something like [[:div]], Reagent treats the outer [...] as a Hiccup vector and its first item as the element. [:div] is an invalid element and you can't derive a useful name from it. So Reagent ends up generating one. The only way to fix it while preserving the bug would be to use something like [^{:display-name "bad stuff"} [:div]]. But at that point you would've noticed the issue already, I think.

liebs 2023-10-06T15:24:37.547079Z

indeed, I've developed a reasonable degree of proficiency at reading CLJS stacktraces at this point so wasn't too hard to sleuth out. More curiosity than anything. Thanks.

👍 1

liebs 2023-10-06T16:48:51.258039Z

is there some React interop I'm missing here?

(defn Text []
  (let [text (atom (inline "text_i.md"))
        par-1 (inline "text_i_par_1.md")
        handle-click (fn [_] (reset! text par-1))]
    (fn []
      [:> Card
       [:> (.-Body Card)
        [:> Markdown
         {:options {:overrides
                    {:a {:component Link
                         :props {:class-name "link-primary"
                                 :on-click handle-click}}}}} @text]]])))

This renders but clicking the link that appears in the text does nothing except tack the fragment (from the resulting Link href) onto the route

p-himik 2023-10-06T16:51:24.099989Z

Try :className and :onClick. Just a hypothesis.

liebs 2023-10-06T16:54:27.031199Z

hmm, no dice. In both cases, I can see the onClick prop in the React DevTools.

p-himik 2023-10-06T16:56:09.386619Z

Ah, alright, good to know. How Reagent works with nested properties is something I usually don't deal with so can never recall. :) Mm, you used atom. Shouldn't it be r/atom?

liebs 2023-10-06T16:57:02.765079Z

aha! I am always doing that 🫠 I even had an unused require of [reagent.core :as r] taunting me

p-himik 2023-10-06T16:57:13.437769Z

Heh.

Clojurians Log v2

reagent