This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2024-01-11
Channels
- # announcements (1)
- # babashka (70)
- # beginners (8)
- # calva (5)
- # cider (9)
- # clojure (48)
- # clojure-austin (68)
- # clojure-europe (29)
- # clojure-norway (30)
- # clojure-uk (5)
- # clojuredesign-podcast (2)
- # cursive (19)
- # datomic (10)
- # emacs (11)
- # events (2)
- # exercism (4)
- # fulcro (2)
- # hyperfiddle (29)
- # introduce-yourself (2)
- # jobs-discuss (4)
- # kaocha (1)
- # leiningen (8)
- # lsp (8)
- # malli (2)
- # matcher-combinators (20)
- # nrepl (15)
- # off-topic (33)
- # reagent (7)
- # releases (4)
- # shadow-cljs (42)
- # spacemacs (6)
- # sql (6)
- # squint (10)
- # vim (3)
Is there an existing clj-kondo rule for reagent such that if a component is rendered with a function component tag :f>
and is also rendered elsewhere without a :f>
both usages are marked as an error
[:f> some-component props]
;; apply error to both because of inconsistent function tagging
[some-component props]
this would probably have to be a clojure-lsp linter rather than clj-kondo, since clj-kondo operates on single files, not entire project. with that said, it may be tough differentiating when something is hiccup or simply a collection of functions e.g. if we have
(defn component-1 []
[:f> some-component])
(defn component-2 []
(into [:<>] (for [component [some-component other-component ...]]
[:f> component])))
then we must not mark the into
form as an error, as it is correctly using some-component
as function componentthanks for the pointer. for now I don't need to validate dynamically constructed hiccup. I'll look into making a basic linter
Hello!
I'm messing around with Portals for the first time and I'm happy enough with the example from the https://cljdoc.org/d/reagent/reagent/1.2.0/doc/tutorials/react-features. What I'm trying to figure out now is how I can pass a form-3 component to the portal so that I can access it's lifecycle methods.
I'm certainly misunderstanding something when it comes to passing r/as-element
to react-dom/createPortal
and trying to swap in r/create-class
instead. Is there another bit of translation needed or an alternative way to access :component-did-mount
?
(defn- modal-div [data]
(r/create-class
{:display-name "modal-div"
:component-did-mount (fn [_] (setup-modal-listeners))
:reagent-render
(fn [data]
[:div {:id "modal-div" :class "modal"}
[:div {:class "modal-background"}]
[:div {:class "modal-content"}
[:div {:class "box"}
(dashboard data)]]
[:button {:class "modal-close is-large" :aria-label "close"}]])}))
(defn- modal [data]
(let [modal-portal (.createElement js/document "div")]
(.setAttribute modal-portal "id" "modal-portal")
(.appendChild (.-body js/document) modal-portal)
(react-dom/createPortal [modal-div data] modal-portal))))
This doesn't throw any errors, it just renders an empty div -> <div id="modal-portal"></div>
create-class doesn't replace as-element
use (react-dom/createPortal (r/as-element [modal-div data]) modal-portal)
no matter if the modal-div
is form-1/2/3
You could consider using hooks instead of form-3 lifecycle methods also