reagent-project / reagent

A minimalistic ClojureScript interface to React.js
http://reagent-project.github.io/
MIT License
4.74k stars 412 forks source link

Class name composition is harder than it needs to be #601

Open p-himik opened 3 months ago

p-himik commented 3 months ago

An example of what IMO the usage should end up with:

(defn grandparent [{:keys [class]}]
  [parent {:class [:parent class]}])

(defn parent [{:keys [class]}]
  [:span {:class [:child class]}])

(render [grandparent {:class :grandparent}])

Currently, this results in the class being ultimately set to "child [:parent :grandparent]". So the users have to use r/class-names every single time they need to combine classes:

(defn grandparent [{:keys [class]}]
  [parent {:class (r/class-names :parent class)}])

(defn parent [{:keys [class]}]
  [:span {:class (r/class-names :child class)}])

(render [grandparent {:class :grandparent}])

Not too harde but harder than it can be.

Another problem with that approach is that the data is composed prematurely. When the "stringification" happens at the very edge of the rendering, the user code can still the full :class data structure as it was created by the app, including all the collections, keywords, strings, nils. Seeing that definitely helps with debugging. It also enables class collection preprocessing in some child component, although I'm hesitant do deem this particular usage as viable.