Fork me on GitHub

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


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


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

🙌 3
Dane Filipczak03:12:33

glad you figured it out !


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


got an example?


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

👍 3

One way is using tick library with time-literals


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.


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


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


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


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

👍 3

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.


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))))]
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 we need more clojurescript podcast followers. awesome content

👍 3

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)] ...) ?


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


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))))]
     [: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


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


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


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


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


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


there seems to be a jira issue somewhat related to this:


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?


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


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!!!


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


based on these warnings i wouldn't use this library


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