This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2022-02-16
Channels
- # announcements (33)
- # asami (37)
- # autochrome-github (1)
- # aws (5)
- # babashka (26)
- # babashka-sci-dev (18)
- # beginners (63)
- # biff (1)
- # calva (66)
- # cider (15)
- # clj-kondo (24)
- # cljs-dev (2)
- # cljsrn (14)
- # clojure (62)
- # clojure-doc (1)
- # clojure-europe (15)
- # clojure-nl (11)
- # clojure-spec (12)
- # clojure-uk (4)
- # clojurescript (45)
- # community-development (2)
- # cursive (34)
- # datahike (7)
- # datomic (7)
- # events (1)
- # figwheel-main (5)
- # fulcro (19)
- # gratitude (7)
- # holy-lambda (85)
- # hyperfiddle (4)
- # jobs (7)
- # jobs-discuss (25)
- # kaocha (4)
- # lsp (11)
- # off-topic (1)
- # polylith (20)
- # portal (14)
- # practicalli (6)
- # proletarian (5)
- # rdf (52)
- # re-frame (13)
- # reagent (48)
- # releases (1)
- # remote-jobs (3)
- # shadow-cljs (7)
- # tools-deps (17)
where is the =
call reagent uses to compare the components parameters before deciding it needs re-render?
(extend-protocol IEquiv
IFn
(-equiv [this other]
(if-not (satisfies? MetaFn other)
false
(= (-> this meta :equiv) (-> other meta :equiv)))))
I believe it's this line: https://github.com/reagent-project/reagent/blob/master/src/reagent/impl/component.cljs#L163
Don't know why your -equiv
is not called though.
Just wanted to make sure. Still no clue why it wouldn't get called. I'd try debugging it right in your browser - shouldn't be that hard with sourcemaps enabled.
@U2FRKM4TW I did debug it in a browser, I see the =
being called but not my extension.
[:button {:on-click (fn []
(prn (=
(with-meta
(fn [place]
(prn :pp))
{:equiv :xonplacechanged-1})
(with-meta
(fn [place]
(prn :pp1231))
{:equiv :xonplacechanged-1})
))
)} ">>>>"]
(extend-protocol IEquiv
IFn
(-equiv [this other]
(prn :IEquiv)
(if-not (satisfies? MetaFn other)
false
(= (-> this meta :equiv) (-> other meta :equiv)))))
(extend-protocol IEquiv
MetaFn
(-equiv [this other]
(prn :IEquiv)
(if-not (satisfies? MetaFn other)
false
(= (-> this meta :equiv) (-> other meta :equiv)))))
(extend-protocol IEquiv
MetaFn
(-equiv [this other]
(prn :IEquiv other)
(= (-> this meta :equiv) (-> other meta :equiv))))
(extend-protocol IEquiv
MetaFn
(-equiv [this other]
(if-not (instance? MetaFn other)
false
(= (-> this meta :equiv) (-> other meta :equiv)))))
I have a component that I can’t get to update when (I’m guessing) only the class changes. If I use strings, as below, it works as expected. But when I change over to icons (the ignored forms below) no update occurs. Even though there is a different class on the :i component, does Reagent not see it as different?
[:span.icon
(if ((:selected @state) id)
"YES"
"NO"
#_#_
[:i.fa-lg.far.fa-circle-dot]
[:i.fa-lg.far.fa-circle])]
It should.
Are you sure that your DOM is not changed from having class="... fa-circle"
to having class="... fa-circle-dot"
? Note that the question is different from whether the icon itself is changed.
That [:i.fa-lg.far.fa-circle]
should end up as <i class="fa-lg far fa-circle">
in your DOM. Find it and see if the last class changes.
But that would only work if the icon library that you're using doesn't monitor for DOM changes and doesn't replace all such elements with something else. In that case, it might easily be an issue with that library.
To make sure, you can simply replace those classes with some completely different classes that don't start with fa
.
I see. Yes, it must be a library thing, because if I replace those classes with ‘x’, it works as expected. (Of course, it’s not displaying anything but inspecting the DOC I can see that the classes change as expected when I click on them). I guess it had to be something in the icon library (Font Awesome) because the test with simple strings worked.
FWIW, I use Font Awesome differently. It has a React package that lets you register only the used icons in your icon library and use those icons as proper React component and not some "magic" :i
that get replaced with something else at some point.
I was just reading those docs… My current use has been following the examples in Bulma…
@U2FRKM4TW Thanks for pointing me in the right direction. Using FontAwesome’s bespoke react component worked.