Clojurians Log v2

It's a good practice that helps to find issues easier with only one big downside: the need to name things. But it is really helpful sometimes.

hey ! new version of re-frisk is here https://github.com/flexsurfer/re-frisk [re-frisk-remote "1.4.0"] or [re-frisk "1.4.0"]

in this release • re-frame handlers statistics and usage statistics • show effects for events • list of mounted views with subscriptions (help with tree needed) • force update trace (really useful metric) (works only in re-frisk-remote, if you are interested in re-frisk implementation you are welcome 🙂 • improved subs graph • copy data to the clipboard

Share you stat here 😉

stats for my re-frame project by re-frisk db: 76 | fx: 200 | cofx: 4 | event: 742 | sub: 404 (91)

why render and force update is not in the re-frisk? because we need to patch reagent, but re-frisk UI also uses reagent, in that case traces will be flooded with re-frisk UI , this is solved in re-frame-10x, but i'm not sure this solution will work with shadow , i need to find more general solution

I use re-frame-10x with shadow-cljs, works just fine.

but try re-frisk-remote, probably you'll like it :)

hm ok

i need to take a look once more

[day8.re-frame-10x.inlined-deps.reagent.v1v0v0.reagent.core :as r]

i thought this one works only with lein

Why would it? IIRC re-frame-10x just ships the full Reagent code with its own codebase, and replaces the namespaces.

:mranderson {:mranderson {:project-prefix "day8.re-frame-10x.inlined-deps"}

so its lein plugin

:plugins [thomasa/mranderson "0.5.3"]

> MrAnderson is a dependency inlining and shadowing tool Yep. But you can do all that yourself.

thats true 🙂

ok i'll give it a try 😉

thanks

https://www.youtube.com/watch?v=As--Ps43vT0

I think it is not difficult considering event handlers and subs needs to be defined in reframe anyway

What am I doing stupid here?

(defn point-canvas []
  [:div.content
   [:canvas#point-canvas.canvas
    {:on-mouse-down (fn [e] (rf/dispatch [:point-click {:x e.nativeEvent.offsetX :y e.nativeEvent.offsetY}]))}]])

Not nearly enough information. > I get an empty points vector What do you mean by "get"? Where's that vector? What does :point-click handler do?

(rf/reg-event-db
 :point-click
 (fn [db [_ xy]]
   (update-in db [:points] conj xy)))

I'm watching app-db in re-frame-10x

the first click I see app-db :points is [], then the second click I get the the location of the first click into :points

LGTM. If you create a repo with an MRE, I can take a look. BTW it's better to use proper JS interop instead of e.nativeEvent.offsetX. E.g. (.. e -nativeEvent -offsetX). And replace (fn [e] ...) with (fn [^js e] ...) to avoid problems during advanced compilation. But it's not related to the behavior that you see.

https://gist.github.com/stuartstein777/dc7986d43f74dbc76cd412f1a4ebb136 heres a gist

oh! I was trying to do js interop and get compiler errors, but i was stupidly using just (.) and not (..)

A gist it not a proper project.

thanks, here's my project

https://github.com/stuartstein777/learn-reframe

there's nothing much in there, just draws a canvas and i want to get the points where they click. Cant see what I'm doing wrong.

is it good practice to type hint all js objects as ^js ?

One small thing in advance - I'm not sure what .lsp dir there does, but you probably don't want to have it in a Git repo, given that it contains an SQLite DB.

^js will let the compiler know that the related symbols in JS interop should not be mangled. Otherwise, it might rename them and the code will stop working in a release build.

hmmm. not sure what it is, wonder if calva puts that in there, maybe something to do with the calvas language server stuff

Probably.

Seems like you're hitting this: https://github.com/day8/re-frame-10x/issues/268

The data is there, it's just that re-frame-10x doesn't display it correctly.

Also, look at the browser's JS console when you're developing - you have <buttton> there, which is an invalid tag.

how do i debug to actually see the data, like can i view it via the console?

what i mean is, can i view the app-db from the js/console?

Sure, just log it.

(js/console.log db) right in your event handler.

great!

thanks for your help! Really appreciate it

And when you add a sub that uses app-db, that issue with re-frame-10x should simply go away. Sure, np.

I've only really started looking at cljs in the last couple of weeks, so it's all still a bit new to me!

Some unsolicited meta-advice. If you eventually want to spend a lot of time in CLJS, try to build your knowledge from the bottom-up, not vice versa. Especially when you encounter issues. Otherwise, you may have a hard time resolving them. Of course, it's not because of CLJS - it's relevant to any technology stack. The higher the stack, the harder it will be to solve issues with it. Re-frame is relatively high up on the stack (JS -> CLJS -> (React ->) Reagent -> re-frame), so much harder to learn the basics at the bottom from so high up, especially if your tower is wobbly. And, of course, don't ignore the documentation. :) Re-frame has great documentation, shadow-cljs - just as well. In particular, that ^js thing is described here: https://shadow-cljs.github.io/docs/UsersGuide.html#infer-externs

Just to add to the above - it's not to discourage you from posting questions - those are fine. :)

Yeah, I've found it honestly quite overwhelming coming into front-end stuff. I've been programming professionally for years but normally I'm doing either back end or systems stuff. Front-end is hard to see where to start.

When I step back and look at it, it seems a massive mountain of complexity that I need to learn.

I've done some JS at work, but not a great deal.

Frontend is a hard mess, yeah. CLJS makes it much better (IMO), but alas - it can't hide all issues of the platform. But you'll get there, no worries.