This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2023-10-25
Channels
- # announcements (22)
- # babashka (9)
- # beginners (33)
- # biff (12)
- # calva (17)
- # cider (64)
- # cljdoc (3)
- # cljfx (16)
- # clojure (125)
- # clojure-bay-area (14)
- # clojure-europe (15)
- # clojure-norway (64)
- # clojure-uk (2)
- # clojurescript (7)
- # conjure (1)
- # core-async (4)
- # cursive (6)
- # data-science (14)
- # datahike (8)
- # datomic (6)
- # defnpodcast (4)
- # emacs (5)
- # events (1)
- # hyperfiddle (15)
- # leiningen (17)
- # lsp (8)
- # membrane (27)
- # off-topic (25)
- # podcasts-discuss (4)
- # polylith (6)
- # portal (21)
- # reagent (11)
- # releases (1)
- # shadow-cljs (36)
- # slack-help (2)
- # sql (1)
- # squint (131)
- # testing (12)
- # xtdb (7)
I'm curious about the code in reagent
that handles form-2 components. Can anyone point me to the part of reagent source that "resolves" form-2 components into their inner fn?
I guess it's here? https://github.com/reagent-project/reagent/blob/a14faba55e373000f8f93edfcfce0d1222f7e71a/src/reagent/impl/component.cljs#L73
Hmmm I don't think that's what I was looking for.
Essentially, as I understand it, form-2
components are "just" a special case of a function returning a function. You could also have that function return a function, and so on, and on and on, until you have something that returns Hiccup instead of a function. To produce a Hiccup tree, reagent must somehow resolve all of these functions that returns functions into Hiccup.
So, what I mean by "resolve" is; dive down the fns until they reach the fn that returns Hiccup, then have that fn be the rendering fn until the component is unmounted (or whatever the wording is).
https://github.com/reagent-project/reagent/blob/a14faba55e373000f8f93edfcfce0d1222f7e71a/src/reagent/dom.cljs#L50 => https://github.com/reagent-project/reagent/blob/a14faba55e373000f8f93edfcfce0d1222f7e71a/src/reagent/impl/template.cljs#L297 => https://github.com/reagent-project/reagent/blob/a14faba55e373000f8f93edfcfce0d1222f7e71a/src/reagent/impl/template.cljs#L275 + https://github.com/reagent-project/reagent/blob/a14faba55e373000f8f93edfcfce0d1222f7e71a/src/reagent/impl/template.cljs#L307 + https://github.com/reagent-project/reagent/blob/a14faba55e373000f8f93edfcfce0d1222f7e71a/src/reagent/impl/template.cljs#L323 => https://github.com/reagent-project/reagent/blob/a14faba55e373000f8f93edfcfce0d1222f7e71a/src/reagent/impl/template.cljs#L158 => https://github.com/reagent-project/reagent/blob/a14faba55e373000f8f93edfcfce0d1222f7e71a/src/reagent/impl/component.cljs#L369
Thank you very much for taking your time to point this out, @U071CG4QY. I still haven't quite wrapped my head around it, because I haven't had the time to really read through and understand the whole thing.
I thought I was definitely on the right track in this function, where some recursion happens that I understand (resolving each first element of a hiccup vector), and the function docstring explicitly mentions form-2 components - actually, specifically, it mentions recursively resolving until the render result doesn't evaluate to a function
. But from my somewhat cursory read, I couldn't figure out if this fn was on the main path for reagent, or whether it was some kind of special case. I assume, since you pointed me elsewhere, that my "spot" is the latter; a special case, and not part of the central render logic.
https://github.com/reagent-project/reagent/blob/a14faba55e373000f8f93edfcfce0d1222f7e71a/src/reagent/impl/component.cljs#L72
https://github.com/reagent-project/reagent/blob/a14faba55e373000f8f93edfcfce0d1222f7e71a/src/reagent/impl/component.cljs#L99
@U0AQ3HP9U I’m definitely not the source of truth here ) Your findings look like the thing you was describing. fn-to-class
calls create-class
(https://github.com/reagent-project/reagent/blob/a14faba55e373000f8f93edfcfce0d1222f7e71a/src/reagent/impl/component.cljs#L363C16-L363C22), which, in turn, calls cljsify
(https://github.com/reagent-project/reagent/blob/a14faba55e373000f8f93edfcfce0d1222f7e71a/src/reagent/impl/component.cljs#L294C15-L294C22) => wrap-funs
=> do-render
(https://github.com/reagent-project/reagent/blob/a14faba55e373000f8f93edfcfce0d1222f7e71a/src/reagent/impl/component.cljs#L254) => wrap-render
.
The easiest way to check the actual call path would be just use something like leiningen’s checkout dependencies (https://codeberg.org/leiningen/leiningen/src/branch/stable/doc/TUTORIAL.md#user-content-checkout-dependencies) to use reagent version with added logs.
You're so right. What better way than to literally step through the code.