Fork me on GitHub
#clojurescript
<
2020-02-08
>
tianshu06:02:53

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.

octahedrion15:02:04

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

octahedrion15:02:47

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

octahedrion15:02:25

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"

g7s19:02:00

Enlive is a clojure only library. There is something similar to enlive for DOM though https://github.com/ckirkendall/enfocus haven't used it though

ec19:02:09

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

; DOESNT RE RENDER AFTER CLICKING ADD BUTTON EVENTHOUGH DB UPDATES
(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))])
                    elements)
       [:> 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))])
                  elements)
     [:> Button {:on-click add-element} "ADD"]]))

p-himik20:02:59

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.

ec20:02:12

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))
    [:div.topic-panel.bp3-dark
     (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.

p-himik20:02:33

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].

p-himik20:02:49

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

ec20:02:41

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

ec21:02:30

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

tianshu08:02:47

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. https://github.com/DogLooksGood/mcss 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?

tianshu16:02:10

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.

tianshu16:02:19

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).