Fork me on GitHub
#clojurescript
<
2020-12-11
>
william02:12:04

Hey, I'd like to do (.addEventListener js/document "mousemove" handler) but on a specific element. What's the idiomatic way of doing this in reagent? Using react refs?

Dane Filipczak03:12:01

events are typically added via the attrs map passed in as the second element of a reagent component vector. e.g. [:div {:on-mouse-move my-handler} "div content"]

william03:12:31

thanks @UU1GF5MGQ, but is that the case for on-move too? I get Unknown event handler property onMove if I try to use it as a map

william03:12:23

never mind, its' called on-mouse-move!

Dane Filipczak03:12:25

haha you had me doubting myself, was just pulling up a project to try it out

🙌 1
Dane Filipczak03:12:33

glad you figured it out !

kimim02:12:47

Hello, how to deal with tag object such as data and time in cljs, sent from clj? Thanks.

dpsutton02:12:59

got an example?

kimim02:12:37

For example, this edn from clojure to cljs, will not be read by cljs: (str {:A (java-time.local/local-date)}) ;; => "{:A #object[java.time.LocalDate 0x371f749c \"2020-12-11\"]}"

👍 1
henryw37409:12:16

One way is using tick library with time-literals

dpsutton02:12:16

correct because it hasn't been serialized in a way that it can be. "{:A #object[java.time.LocalDate 0x371f749c \"2020-12-11\"]}" isn't a readable string. So there's no chance of cljs handling it.

dpsutton02:12:57

but you can't send an arbitrary java object (or a string representation of one) over to the browser

dpsutton03:12:30

you can str it to get a nice format that you can reconstitute into a date on the cljs side. if you have timezone information you can use that to get a java.util.Date which has reproducibility between clj and cljs. You could also see how that is accomplished to achieve something similar

kimim03:12:03

Thank you. Then to deal with data and time, I should convert these into string representation before transmit between server and client.

dpsutton03:12:00

you're most probably using json or edn (or transit). all of these are string representations. that's kind of the name of the game

👍 1
Charlie07:12:03

Has anyone seen this error when using this unicode matching regex and compiling a prod build (optimizations advanced): (re-seq #"(?u)\p{L}\p{L}\p{L}+" input-string)

ERROR: JSC_UNTRANSPILABLE. Cannot convert ECMASCRIPT_2018 feature "RegExp unicode property escape" to targeted output language.
This code works in dev with figwheel.

william12:12:13

In a reagent application, I have some code along the lines of:

(r/with-let [pointer (r/atom nil)
               handler #(let [rect (.. % -target getBoundingClientRect)]
                          (swap! pointer assoc
                                 :x (- (.-clientX %) (.-left rect))
                                 :y (- (.-clientY %) (.-top rect))))]
   widget
now, in the definition of rect, I'd like to take the bounding rect not of any element, but a specific sub-element of widget (otherwise, the target will change when I move to children). How could I do that in reagent?

geraldodev14:12:21

https://soundcloud.com/user-959992602/followers we need more clojurescript podcast followers. awesome content

👍 1
william17:12:10

asking again, hopefully with a better question: how can I capture a piece of the dom (in my case an svg element) so that I can refer to it in something like (let [rect (.. MY_ELEMENT -target getBoundingClientRect)] ...) ?

p-himik18:12:42

Just in case - if you're using React, use refs.

william18:12:12

thanks! @U11BV7MTK and @U2FRKM4TW! I think I could have an XY problem right here so let's consider concretely:

(defn drawer-ui []
  (r/with-let [pointer (r/atom nil)
               handler #(let [rect (.. % -target getBoundingClientRect)]
                          (swap! pointer assoc
                                 :x (- (.-clientX %) (.-left rect))
                                 :y (- (.-clientY %) (.-top rect))))]
    [:div
     [:svg  {:on-mouse-move handler}
      ...]]))
The problem with this code is that when if I go over some of the children of the svg, the argument of handler is the child, and so I get the position relative to the child, while I want always the position in the whole svg. That's why I was asking about how to specify that

dpsutton18:12:09

put a ref function on the svg to reset an atom to the argument passed in to that function and use the value of that atom as the svg

p-himik18:12:32

^ that. Or just react/createRef if you prefer React API to atoms.

p-himik18:12:58

First and foremost, read the documentation on refs. There might be some surprises that aren't fun to debug.

dpsutton19:12:27

and its sensitive to inline functions that are recreated on every render versus defined functions

william19:12:02

thanks, I'll dig into that!

Dan Maltbie19:12:25

Does anyone use Tupelo? I'm getting compile errors, like this one where it does seem to be wrong based on MapEntry documentation. ------ WARNING #1 - :fn-arity -------------------------------------------------- Resource: tupelo/core.cljc:1208:12 -------------------------------------------------------------------------------- 1205 | "Returns a clojure.lang.MapEntry constructed from the given key and val" 1206 | [key val] 1207 | #?(:clj (clojure.lang.MapEntry/create key val) 1208 | :cljs (cljs.core.MapEntry. key val))) ------------------^------------------------------------------------------------- Wrong number of args (2) passed to cljs.core.MapEntry

dpsutton19:12:40

there seems to be a jira issue somewhat related to this: https://clojure.atlassian.net/browse/CLJS-2982

dpsutton19:12:33

not related to that jira issue i don't believe. its just wrong

Dan Maltbie19:12:21

Yes I did notice the issues in Jira and Git around the use of MapEntry. Given that the Tupelo code is incorrect, I wonder if anyone is using it with Clojurescript. For me, the Tupelo compile is failing so it's not something I can fix in my code. I've tried the latest version as well as an older version. I just wanted to use their unsigned-byte->hexfunction. Any suggestions for a simple function to convert a js/Uint8Array into a string of hexidecimal characters?

dpsutton19:12:11

i'm suprised the compilation is failing unless you have warnings set to throw errors

dpsutton19:12:59

you could just grab the source with attribution

Dan Maltbie19:12:44

Yes, you are correct that they are warnings. So I guess I should ignore them, though that seems like a bad practice. Cut and paste the code works for me since it is such a simple function (yeah I could have written it myself but Tupelo had already done it. sigh).

Dan Maltbie19:12:24

Thanks for your help and quick response. This is a great channel!!!

dpsutton19:12:07

submit a patch. i believe you can just add a nil as the third argument. its a hash which can be nil signalling it needs to be computed (i think. going off memory)

Dan Maltbie19:12:48

There was a second warning for an undeclared variable. I get nervous when my code has these warnings, let alone use a library that has them. While these two warnings are unrelated to the function I want to use, just seems like bad hygiene. ------ WARNING #2 - :undeclared-var -------------------------------------------- Resource: tupelo/core.cljc:1395:46 -------------------------------------------------------------------------------- 1392 | ;----------------------------------------------------------------------------- 1393 | (s/defn cum-vector-append :- s/Any ; #todo file bug report for CLJS 1394 | "Works inside of a with-cum-vector block to append a new vector value." 1395 | [value :- s/Any] (cum-val-set-it (append it value))) ; #todo copy td/cum-vector-swap-append kludge ----------------------------------------------------^--------------------------- Use of undeclared Var tupelo.core/it

dpsutton20:12:34

based on these warnings i wouldn't use this library

grounded_sage21:12:40

Does heavy use of core.async have a big affect on the output during advanced mode?