2025-09-20 hyperfiddle | Clojure Slack Archive

hyperfiddle

braai engineer 2025-09-20T21:27:37.607909Z

Would be cool if point effects could be used to pass information from child components to parent components, like mounting a class on a parent DOM element – sort of like throwing an exception, but not an exception, e.g. given a table with rows where cells have pickers that can be activated, I want the pickers to "throw" a row-active Effect, so that the parent row can 'catch' that effect and append/remove an "active" class to the row so that CSS can do its thing. Currently I have to pass down an atom from the parent to each row, and the client has to reset! that atom, or juggle component values, where the child returns an active flag, so that I can mount an "active" class. Understandably, potential loops are tricky.

braai engineer 2025-09-21T12:35:40.209979Z

It's tricky to get the value out because you want to mount the class on a parent dom/tr, which wraps a dom/td with a picker that can be active. Can do it with an atom, but feels not as clean. Consider, where for example (some? v) means picker is active:

(dom/tr
  (dom/props {:class [(if v "active" nil)]) ; but `v` is not available here.
  (dom/td
    (let [v (PotentiallyActivePicker id)] ...)))

I can hack it by putting an atom at top, and calling,

(let [!active? (atom false), active? (e/watch !active?)]
  (dom/tr (dom/props {:class (if active? "active")})
    (let [v (PotentiallyActivePicker id)]
      (reset! !active? (if v true false)))))

Hard to get that v out without an atom. What "I want to do" but can't:

(let [v (dom/tr (dom/props {:class (if v "active")}] ; v not available here.
          (dom/td (PotentiallyActivePicker id)

xificurC 2025-09-21T12:57:34.804689Z

What about

(dom/tr
  (let [v (dom/td ..)]
    (dom/props v-used-here)))

braai engineer 2025-09-21T12:58:12.085179Z

thx, will give it a try

Dustin Getz (Hyperfiddle) 2025-09-21T13:25:41.766789Z

also with-cycle, using atoms to loop up a binding to a higher scope is 100% idiomatic it happens all the time, e/with-cycle is a macro over this pattern to make it feel more like loop/recur

👍 2

Geoffrey Gaillard 2025-09-21T13:48:31.510019Z

Note the DOM event model - with capture and bubbling phases - can be leveraged quite nicely for this case.

👍 2

braai engineer 2025-09-20T21:36:06.514889Z

Or I could use CSS :has,

/* Style parent when it has a specific child */
.parent:has(.active) {
  background-color: #e3f2fd;
  border: 2px solid #2196f3;
}

...will give that a try next.

👀 1

Dustin Getz (Hyperfiddle) 2025-09-20T23:11:34.618859Z

can child return a selected-id value to parent?

Clojurians Log v2

hyperfiddle