Oh haha, nvm, problem solved 😄 Even though I can't access the link the with my browser, the moment I posted it here Slack embedded the message here and I can now see the link to the Gist 😄

I've never seen it. And I would be very cautious about mixing DOM manipulation and re-frame machinery. What's the underlying problem - why do you need to alter DOM manually when you're using React?

I have a div with many children and want to set all of their width to the widest one. I've a :component-did-mount callback like below:

{:component-did-mount #(dispatch [::events/assoc-current-state
                                     :option-style
                                     {:width   (utils/max-child-width (str key "-options"))
                                      :opacity 1}])
:reagent-render ...)

:option-style is passed through the corresponding functions

which means i'm not creating side-effects by manipulation dom/dom properties. it is received from subscription

the problem is utils/max-child-width is not pure:

(defn- children
  "Finds child nodes of a DOM element by id."
  [id]
  (some-> id
          dom/getElement
          .-childNodes
          array-seq))

(defn max-child-width
  "Finds width of the widest child. Returns nil when there are no children."
  [id]
  (->> (children id)
       (map #(.-offsetWidth %))
       (apply max)))

> I have a div with many children and want to set all of their width to the widest one. I am almost 100% sure that you can do that with CSS. Even if it's not possible for some reason - don't use re-frame for that. Use Reagent, especially since you're already using lifecycle methods.

Well, I was also very believed in that I can solve this via CSS but no luck. All children contain an arbitrary text and I won't be able to know which child takes how much space before render.

To clarify, I don't want all children to take all of the width of the parent

so flex is not an option

I want to find(or calculate beforehand, if possible) the widest child's width

Can you eloborate on "don't use re-frame for that. Use Reagent,"

Should I avoid using events&subs for this kind of thing?

> To clarify, I don't want all children to take all of the width of the parent Is introducing an intermediate div not an option? The you won't touch the parent div that you don't want to touch. Also, there are other solutions than flexbox. One that I know of is grid. Maybe there are others. Hard to come up with something without knowing your markup and requirements. > Should I avoid using events&subs for this kind of thing? Absolutely. Re-frame is for managing your app's state. A width of a particular div just to make it look nice is not your app's state, it's just some incidental representation.

Introducing an intermediate dive is an option but I don't understand how it could solve my problem.

I also keep some flags in my app state. one example is :show-more? which stores a boolean for a switch button

is that also bad? I was using local states with reagent atoms but it feel cleaner to use the app db

another reason is not losing the switch's state after hot reload

You said it yourself - it's switch's state. When something is a state that you care about, store it in app-db. IMO when the width of some element is not representative of anything in your domain model, it shouldn't be considered state. YMMV.

Thanks for your help! 🙌

This is pretty much identical to the examples given for reg-sub-raw in the re-frame docs, but I'm slightly confused why go through all this when reg-sub does the same thing.

reg-sub wasn't there for very early re-frame

that might explain it, based on the git history the initial version used was 0.4.1

Maybe the author originally used register-sub (now deprecated) and then moved to reg-sub-raw and never made the jump to the new reg-sub

But you are right ... that should now be written as something like:

(reg-sub 
  :something 
  (fn [db [_ & path]    ;;  <-- note the underscore
     (get-in db path)))

yeah, I found a commit where a bunch of register-sub s where changed to either reg-sub or reg-sub-raw (when calls to subscribe were needed)

perhaps it wasn't possible to provide the signal function back then, so reg-sub-raw was the only possibility

in any case, this solves my problem, thanks 🙂