Fork me on GitHub

What are some libraries that you could recommend to build developer tools for SPAs? I’m thinking of stuff like a state inspector and logging events going through the system. Ideally as-a-library that provides some basic building blocks.


Out of interest - what do you think is lacking in React Dev Tools, cljs-devtools, dirac, and maybe re-frame-10x and re-frisk if you're using re-frame?


• cljs-devtools isn’t ideal to navigate large data structures • I’d like to be able to build more custom tools. E.g. for an event logger I’d like to be able to provide a custom component that renders the event and provides collapse/expand type functionality


I wouldn't be surprised if the JS world already had stuff for this


Oh, regarding large data structures - there's also Reveal, and IIRC it can work with CLJS.


But no idea on the libraries. At the very least, you already have cljs-devtools source code that you could take apart and repurpose (just read its license first) or take inspiration from.


I think there was also some debugging tool for Clojure/Script that emits events and can visualize it, forgot the name. Was featured on defn podcast

Karol Wójcik12:06:38

For navigating large data structures shadow-cljs works like a charm


I assume you're referring to this: It's still not really documented, except for that post, so it's rather hard to find.


FWIW the underlying shadow.remote architecture the UI uses is meant to tools


so everything the UI does you also have access too


but thats even less documented so only the UI currently makes any use of it


eventually I want that to be extensible but I haven't figured out how to handle custom UI stuff yet given that :advanced makes that rather difficult

Karol Wójcik13:06:50

Maybe I'm biased, but I find shadow-cljs the best tooling I have ever used!

❤️ 3
Karol Wójcik13:06:25

A year ago I have introduced shadow-cljs inspect for the events and it really makes the difference


nice to hear that. I always consider the UI unfinished and incomplete but good to see its useful for more people, not just me 😉


Cljs + Reagent: Uncaught Error: Invalid arity: 0

(defn ui-task
  "Component to wrap a single task"
  [title task]
  [:div {:class "UI-task"}
   [:h2 title]
   [:div {:class "UI-task-container"} [task]]])

(def click-count1 (r/atom 0))

(defn counter []
   {:class "UI-task-center"}
   [:label {:class "UI-counter"} @click-count1]

;; -------------------------
;; Page components

(defn home-page []
  (fn []
     [:h1 "7GUIs in Clojurescript/Reagent"]
     [:p "This is a live version of 7GUIs with Clojurescript and Reagent."]
      [:li [:a {:href (path-for :items)} "Items of sevenguis"]]
      [:li [:a {:href "/broken/link"} "Broken link"]]]
      [(ui-task "Counter" counter)] ;; <----
Last row, is probably causing the error. If commented everything is rendered correctly. How could I debug/find the error?


@eliascotto94 you are not supposed to call component functions yourself. Instead use [ui-task "Counter" counter], so without the (). otherwise what is task? since you are not passing args to that? maybe that expects args? [task]

🙌 3

oh nvm. it doesn't.


@thheller Ah.. just that. I don't understand why not the (). I suppose that if I call the function will render my component

:h1 ;; render a <h1>
(ui-task ...) ;; render a ui-task component


No, that's not how Reagent Hiccup works. It requires you to pass the component (the function) itself, not its result. Especially not when wrapped in an extra vector. You can call ui-task, but that will turn it from a proper component into a regular function that just outputs more Hiccup. But it's rare that you'd actually want to do that. More details:


Thanks, interesting!