Fork me on GitHub
#re-frame
<
2021-04-09
>
andre08:04:14

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

šŸŽ‰ 12
ā¤ļø 10
šŸš€ 6
andre08:04:59

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

andre08:04:05

Share you stat here šŸ˜‰

andre08:04:18

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

andre08:04:23

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

p-himik08:04:00

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

andre08:04:48

i need to take a look once more

andre08:04:49

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

andre08:04:56

i thought this one works only with lein

p-himik08:04:41

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

andre08:04:46

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

andre08:04:01

so its lein plugin

andre08:04:12

:plugins [thomasa/mranderson "0.5.3"]

p-himik08:04:14

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

andre08:04:48

thats true šŸ™‚

andre08:04:14

ok i'll give it a try šŸ˜‰

andre08:04:17

thanks

šŸ‘ 3
andre08:04:10

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

Stuart19:04:44

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}]))}]])
I'm just trying to get the location of the mouse click in the canvas into a points array in app-db. The first time I click I get an empty points vector, the second time i click i get the first point location added. It's always 1 click behind.

p-himik19:04:12

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?

Stuart19:04:28

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

Stuart19:04:42

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

Stuart19:04:12

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

p-himik19:04:43

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.

šŸ‘ 3
Stuart19:04:10

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

p-himik19:04:14

A gist it not a proper project.

Stuart20:04:39

thanks, here's my project

Stuart20:04:01

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.

Stuart20:04:03

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

p-himik20:04:08

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.

p-himik20:04:42

^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.

Stuart20:04:48

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

p-himik20:04:53

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

p-himik20:04:20

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

Stuart20:04:07

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

Stuart20:04:18

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

p-himik20:04:26

Sure, just log it.

p-himik20:04:35

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

Stuart20:04:56

thanks for your help! Really appreciate it

p-himik20:04:15

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

Stuart20:04:57

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

p-himik20:04:02

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

šŸ‘ 3
p-himik20:04:12

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

Stuart20:04:58

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.

Stuart20:04:22

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

Stuart20:04:00

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

p-himik20:04:07

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.