Fork me on GitHub
Slack Archive

This page is not created by, affiliated with, or supported by Slack Technologies, Inc.

2021-08-11

Channels

#clojurescript
<
2021-08-11
>
hbprince02:08:49

i was just experimenting with a quickstart clojurescript project, adding just an str (clojure.core) function to the code created 96K compiled JS file.. did any one here tried to cut down the clojurescript runtime part after compiling or is there already a way for that?

dnolen02:08:38

96K is tiny after gzipping - so there's really nothing more to do

👍 4
hbprince15:08:49

solved the size issue using google closure library, instead of using clojure str/other core functions used the google closure counter part, now the size is 1 KB (566B gzipped) my intention was creating a small loading script before loading my re-frame app (loaded via iframe) starting to love clojurescript & the ecosytem of tools ❤️

ChillPillzKillzBillz13:08:50

How do you deploy a gzipped js? Asking as a complete newbie... so please be patient

hbprince14:08:08

Normally gzip option is set in the server (like Nginx) and Server streams compressed content to browser and then browser will decompress it

simongray06:08:09

@renlinx you will experience a sunk cost in order to support all of the Clojure machinery, but it doesn’t grow linearly from there, no need to worry that much about it.

👍 4
Elias Elfarri11:08:56

Hello i am trying to get a distance from the client to a div because i want to track the x,y coordinates of the mouse inside said div. So i am trying to use that to find an offset to clientX and clientY. I've been trying different values to get offsets but with no luck yet. (fn [event] (-> event .-target .-getBoundingClientReact .-left)) and (fn [event] (-> event .-target .-getBoundingClientReact .-top)) has not worked. I am a bit of a novice in cljs, so would love to get some feedback on what i am doing wrong

Elias Elfarri11:08:17

This code is by the way written on a :onClick inside the div element

p-himik11:08:47

• getBoundingClientReact - replace "React" with "Rect" • .- is used to get a field, but you need to call a function there - remove -

Elias Elfarri11:08:31

i think i just misspelled it here, but i still have the same issue. When i try to console log it, i get back a "lambda [event]". I am expecting to get an integer?

p-himik11:08:09

Sounds like you're logging the (fn [event] ...) and not its result.

p-himik11:08:21

Works just fine for me: 

> (-> js/document (.querySelector "div") .getBoundingClientRect .-height)
948

vanelsas11:08:31

You could get the bounding box coordinates of the div like this

vanelsas11:08:22

[:div 
  {:ref (fn [e] (when-not (nil? e)
                 (let [rect (.getBoundingClientRect e)
                                  left (.-left rect)
                                  right (.-right rect)
                                  top (.-top rect)
                                  bottom (.-bottom rect)
                                  ]
;; do something useful here
                              )))}]

p-himik11:08:21

That won't work in the described desired scenario: "track the x,y coordinates of the mouse inside said div".

vanelsas12:08:28

Once the bounding box coordinates are there you could calculate the offset using clientX and clientY (unless I am not understanding the issue). You could store the bounding box details in an atom, then use the onClick event to get the clientX and clientY coordinates and map them onto the bounding box?

p-himik12:08:42

We don't know if the node can change its size without being re-mounted.

p-himik12:08:14

Getting the bounding client rect of a (.-target event) should be no worse than your approach, even if it happens on every mouse move.

Elias Elfarri13:08:08

Yeah it seemed like i was console logging as you mentioned @U2FRKM4TW. Works as intended now. Thanks for the help guys!

Elias Elfarri13:08:34

i put the console-log inside the fn instead

Franklin14:08:07

any recommendations on what library to use for graphs/data visualization with cljs?

Franklin14:08:28

I haven't tried it yet though

Franklin14:08:26

I don't think it's meant to work in the browser

p-himik14:08:48

Why? It states in its README that it has components for Reagent.

p-himik14:08:10

And you can always use Vega without any wrappers via interop. I do just that, and it works just fine.

Franklin15:08:44

I'll try using Vega

RollACaster15:08:51

I usually use D3 via interop and start by copying some snippets I created at https://rollacaster.github.io/hiccup-d3/

Franklin15:08:21

niiiiiiice... 😃

👍 3
Franklin15:08:09

I starting to lean more towards D3 now

dgb2315:08:14

oz uses vega uses d3

👍 3
Nom Nom Mousse06:08:56

Cool! I did not know vega used d3

Christopher Gsell16:08:45

Has anyone had any issues with the Google Closure compiler and the tick.alpha.api library? I am simply invoking this function: (tick/format (tick/date-time)), and it works fine in the dev environment, but does not work in the optimized build. I'm familiar with objects and declaring externs, but I have never come across functions from third-party libraries not working. In the optimized build the error says: Uncaught TypeError: http://this.Th is not a function                                                                                      main.js:1428    at ZonedDateTime.uP.yd (main.js:1428)    at KS (main.js:1424)    at Instant.hP.yd (main.js:1427)    at KS (main.js:1424)

p-himik16:08:22

Seeing how there are Instant and ZonedDateTime in the stack trace, the issue is probably with this library, that is a transitive dependency of tick : https://github.com/henryw374/js-joda

p-himik16:08:48

Either way, sounds like it would be better to create an issue for tick with a minimal reproducible example.

Christopher Gsell16:08:23

Ok awesome thank you

henryw37416:08:49

hello, I maintain tick 🙂

henryw37416:08:05

what version of tick do you have?

henryw37416:08:21

and what is your build setup?

henryw37416:08:36

shadow/figwheel ... etc?

Christopher Gsell16:08:28

we were using version 0.4.23-alpha, and shadow build

Christopher Gsell16:08:22

and btw we love tick so much that it's everywhere in our project, so when we ran the release build we were in for a surprise haha

henryw37416:08:39

good to hear!

henryw37416:08:39

I think you'll need to bump the version.

henryw37416:08:04

Older versions needed some prep to work on shadow

Christopher Gsell17:08:21

Seems to be working - thank you

Christopher Gsell18:08:19

@U051B9FU1 I'm not quite sure why it was working before, but seems to be failing again, even with the latest version. Same error. I'll see if I can create an issue and reproduce it

borkdude20:08:04

What's the best practice around uncaught errors in cljs async tests?

borkdude20:08:47

e.g. in this case: 

(deftest with-out-str-test
  (async done
         (-> (nbb/load-string "[(with-out-str (println :hello))
                                (with-out-str (prn :hello))
                                (xwith-out-str (print :hello))]")
             (.then (fn [val]
                      (is (= [":hello\n" ":hello\n" ":hello"]
                             val))))
             #_(.catch (fn [err]
                         (prn (str err))))
             (.finally done))))
If I didn't put the .catch there, the test suite just seems to pass and the error would go unnoticed.

p-himik20:08:18

I've never dealt with such tests but FWIW I have two thoughts: • It should be possible to create an alternative for async that would test if the returned value is a promise and, if so, would automatically add (.catch ...) • The unchandledrejection event (https://developer.mozilla.org/en-US/docs/Web/API/Window/unhandledrejection_event) is dispatched when a promise without a catch errors out. Perhaps, it could be leveraged here.

borkdude06:08:20

Thanks. I’ll reuse the 1 isn’t equal to 0 trick. I have made a macro which just wraps the thing in a catch