Fork me on GitHub

Hi, I'm going to make a small admin frontend, the plan is about two weeks. Is there any good options? I mean, some libraries or frameworks.


what's currently the best library for functional DOM fragment transformation ? I need a lib that provides ways to select (match) DOM fragments & transform them preferably using functional style code


my search only found old libs like Enlive and Dommy which I don't think work with modern Clojurescript


my use-case is that I want to enforce certain constraints on an element's subtree's structure. I want to be able to say "when you see shapes of nodes like this, make them look like this"


Enlive is a clojure only library. There is something similar to enlive for DOM though haven't used it though


Why my component doesn re-render if I use a re-frame function inside form-2 component like this

(defmethod field "list" [{:keys [elements parent name elem-type]}]
  (let [add-element #(rf/dispatch [::evt/add-element  ....]
    (fn []
       [:h4 name]
       (map-indexed (fn [idx elem]
                      ^{:key (str idx (:name elem))}
                      [field (assoc elem :parent (conj parent idx))])
       [:> Button {:on-click add-element} "ADD"]])))

; Rerenders just fine
(defmethod field "list" [{:keys [elements parent name elem-type]}]
  (let [add-element #(rf/dispatch [::evt/add-element ...]
     [:h4 name]
     (map-indexed (fn [idx elem]
                    ^{:key (str idx (:name elem))}
                    [field (assoc elem :parent (conj parent idx))])
     [:> Button {:on-click add-element} "ADD"]]))


Why would the first one update? I don't see how it depends on DB in any way. The second one updates likely because something else is being updated, and you're using a lambda in the function, which is never equal to another instance of the same lambda.


yeah i shouldve mentioned the component that calls field subscribed to relevant part of the db

(defn topic-panel []
  (let [topic @(rf/subscribe [::subs/topic-to-publish])]
    (prn "UPDATED: " (:fields topic))
     (field {:type "object" :parent [] :fields ...)
since that dispatch updates db topic-panel redraws so field gets called again to re render. Thats why I expected to re-render.


You're using field as a function instead of using it as a component. I don't know what exactly happens in this case, when it returns a function itself. To be honest, I have no idea how it even works, because that would be no different from writing something like [:div my-component].


My first step would be to replace () around field with [].


oh shit Im looking at the screen for hours just realized that thx, will try


it didnt work, interesting

Drew Verlee21:02:36

Has anyone evaluated/compared cljss and stylefy? It seems like they come close to do doing the same thing? If not, then I might write something up


Hey, this is a bit out of topic, but I want to share some of my research on "Macro CSS generator" instead of all-in-runtime solution. Not a library yet, but with this idea, it's possible to get good performance + small bundle size.

Drew Verlee18:02:23

@U0NBGRGD6 thanks for sharing. Could you explain what the bullet point > Generate css by macro, as less at runtime is possible. What isn't possible at run time?

Drew Verlee18:02:44

What are atomic styles? Is this the idea of a css class mapped to one a css selector with just one property?


sorry for reply so late. First generate css by macro. Almost all the CSS in JS/CLJS, will have a small JS/CLJS compiler which generate CSS string from JS/CLJS data structure. So, when the main js file is loaded, it have to spend some time to generate CSS string. Actually this is an expensive operation. If we use a macro, the macro call can be expanded to string directly, There's no runtime cost. Second the atomic style is an idea, I found some people talking about it. And yes, it is class mapped to one or maybe two or three properties. A very good library on this is tachyons, it's very productive.


You can have thousands of atomic styles, they are just variables, there's a way to eliminate unused style via closure compiler. This will greatly reduce the bundle size. And this is much better than the traditional solution: modular CSS file(in this way, you have to manually figure out those modules you need).