Clojurians Log v2
data-science 2025-08-14
Just a reminder of the upcoming conferences: https://scicloj.github.io/macroexpand-2025/ If anybody is considering proposing a talk, the time to talk about it is now. 🙂
hey I'm experimenting with Clay and I'm stuck trying to use reagent.
I want to have show a set of sliders which reactively change another component with text. I copy pasted the slider function from https://reagent-project.github.io/ and adapted the reagent counter example from the Clay examples:
^{:kindly/options {:html/deps [:scittle :reagent]}}
(ns nccn-eau-2025
(:require
[scicloj.kindly.v4.kind :as kind]))
(defn slider
[*patient param value min max]
[:input {:type "range" :value value :min min :max max
:style {:width "100%"}
:on-change (fn [e]
(let [new-value (.. e -target -value)]
(swap! *patient
(fn [data]
(-> data
(assoc param new-value)
((juxt eau)))))))}])
(kind/reagent
['(fn []
(let [empty-patient {:biopsy nil
:isup nil
:psa nil
:t-stage nil}
*patient (reagent.core/atom empty-patient)]
(fn []
[:div
"The atom " [:code "*patient"] " has value: "
(pr-str @*patient) ". "
(slider *patient :isup 4 1 10)])))])nccn_eau_2025.clj , launching a repl with
clj -Sdeps "{:deps {org.scicloj/clay {:mvn/version \"2-beta51\"}}}"make!ing the file with (clay/make! {:source-path "nccn_eau_2025.clj"})
the browser console shows that slider was not found.
I haven't touched cljs or reagent in years so I'm beyond rusty. Reading the docs and https://clojurecivitas.github.io/scicloj/clay/uncompiled_clojurescript.html only talks about anonymous functions, not how to defnsomething and reuse it. Any pointers to docs or relevant examples is much appreciated 🙂ok I got to work by moving the defn inside a kind/reagent form and quoting it inside a div. I have no clue what's happening 😅 it's also rendered #'user/slider above the reagent component which I don't want, but at least now i can continue developing the component until someone tells me about some obvious detail I'm missing 😄
Hi. Great!
Note that this recent blog post is about writing Clojurescript in .cljs files.
The relevant source is here: https://github.com/ClojureCivitas/clojurecivitas.github.io/tree/main/src/scicloj/clay
When you have a top-level defn in a .clj file, you define a JVM Clojure function, not a Clojurescript one.
ah so everything inside kind/reagent must be cljs and defined within it?
it's late for me so I'll continue tomorrow but I have the main thing working.
> ah so everything inside kind/reagent must be cljs and defined within it?
yes
> the main thing working. fantastic ✨
The relevant parts in side the Clay docs: https://scicloj.github.io/clay/clay_book.examples.html#hiccup https://scicloj.github.io/clay/clay_book.examples.html#reagent https://scicloj.github.io/clay/clay_book.examples.html#scittle https://scicloj.github.io/clay/clay_book.examples.html#nesting-kinds-in-hiccup (Scittle and Reagent kinds are recognized automatically inside Hiccup.)
@daslu is my understanding correct that to define multiple fns and constants the usual workflow is to have e.g., multiple kind/scittle?
The blog posts don't have a lot of examples like this where multiple "support" functions must be defined in the background
Hi! You can also define fns locally in one kind/hiccup form.
(kind/hiccup
[:div
;; recognized as `kind/scittle`
'(defn g [x]
(+ x 9))
;; recognized as `kind/reagent`
['(fn []
[:p (g 11)])]])right that's what I'm doing, but then I see the vars printed in the html output:
#'user/t-stages-str#'user/slider#'user/t#'user/eau-low#'user/eau-favorable#'user/eau-unfavorable#'user/eau-high#'user/eau#'user/nccn-low#'user/nccn-intermediate-factors#'user/nccn-n-intermediate-risk-factors#'user/nccn-favorable#'user/nccn-unfavorable#'user/nccn-high#'user/nccn#'user/result-containerwhat do you see with the example above?
ah that works! right.. I was using kind/reagent instead. I'll take a look at the source later to understand why the output is different
✨
perfection 🫶 now to make it look good and write the actual text 🚀 thanks @daslu
many thanks for looking into that!!
looks great