This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2020-02-08
Channels
- # announcements (4)
- # aws (3)
- # babashka (5)
- # beginners (16)
- # cider (8)
- # clj-kondo (3)
- # clojars (8)
- # clojure (115)
- # clojure-uk (15)
- # clojurescript (18)
- # data-science (5)
- # datomic (14)
- # fulcro (49)
- # funcool (6)
- # graalvm (3)
- # graphql (4)
- # lumo (17)
- # malli (5)
- # off-topic (15)
- # reitit (18)
- # ring-swagger (8)
- # rum (2)
- # shadow-cljs (35)
- # tools-deps (18)
- # uncomplicate (2)
- # vrac (1)
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 https://github.com/ckirkendall/enfocus haven't used it though
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"]]))
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))
[: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.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]
.
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. https://github.com/DogLooksGood/mcss Not a library yet, but with this idea, it's possible to get good performance + small bundle size.
@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?
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).