clojurescript 2021-06-18

martinklepsch10:06:40

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.

p-himik10:06:02

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?

martinklepsch10:06:08

• 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

borkdude10:06:19

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

p-himik10:06:18

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

p-himik10:06:15

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.

borkdude10:06:04

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

borkdude10:06:02

https://github.com/jpmonettas/flow-storm

Karol Wójcik12:06:38

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

p-himik12:06:13

I assume you're referring to this: https://clojureverse.org/t/introducing-shadow-cljs-inspect/5012 It's still not really documented, except for that post, so it's rather hard to find.

thheller12:06:43

there is a second post about it https://clojureverse.org/t/status-update-inspect-cljs-eval/6074 😉

👍 6

thheller12:06:37

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

thheller12:06:51

so everything the UI does you also have access too

thheller12:06:14

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

thheller12:06:06

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

thheller13:06:23

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

olaf13:06:39

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 []
  [:div
   {:class "UI-task-center"}
   [:label {:class "UI-counter"} @click-count1]
   ])

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

(defn home-page []
  (fn []
    [:span.main
     [:h1 "7GUIs in Clojurescript/Reagent"]
     [:p "This is a live version of 7GUIs with Clojurescript and Reagent."]
     [:ul
      [: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?

thheller13:06:59

@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

thheller13:06:37

oh nvm. it doesn't.

olaf13:06:08

@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?

p-himik13:06:17

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: https://github.com/reagent-project/reagent/blob/master/doc/UsingSquareBracketsInsteadOfParens.md

olaf13:06:24

Thanks, interesting!

2021-06-18

Channels