Clojurians Log v2

I tried that fragment and I think this isn’t what the docs seem to indicate. I think it is supposed to be a Phaser game object, but it is a Window. I tried this and I am still getting some interesting results. I can invoke

(this-as this
  this)

(this-as this
  (-> this .-Phaser .-Loader))

For reference, another simple example I am trying to port is https://gist.github.com/photonstorm/46cb8fb4b19fc7717dcad514cdcec064.

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

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

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

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.

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

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

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)] ;; <----
     ]))

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

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

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

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

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

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

Thanks, interesting!