Fork me on GitHub
Slack Archive

This page is not created by, affiliated with, or supported by Slack Technologies, Inc.

2023-10-06

Channels

#reagent
<
2023-10-06
>
Ben Lieberman14:10:00

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

p-himik15:10:56

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?

Ben Lieberman15:10:33

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

Ben Lieberman15:10:52

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

p-himik15:10:58

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

p-himik15:10:57

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

Ben Lieberman15:10:46

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-himik15:10:53

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.

Ben Lieberman15:10:02

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

p-himik15:10:29

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

Ben Lieberman15:10:32

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-himik15:10:22

I don't see any reagent8-like names.

p-himik15:10:31

Ah, I'm blind.

p-himik15:10:38

What's the code that resulted in that error?

Ben Lieberman15:10:12

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

Ben Lieberman15:10:32

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-himik15:10:29

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.

Ben Lieberman15:10:37

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
Ben Lieberman16:10:51

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-himik16:10:24

Try :className and :onClick. Just a hypothesis.

Ben Lieberman16:10:27

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

p-himik16:10:09

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?

Ben Lieberman16:10:02

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