It's relatively easy to implement with just CSS, no need for some components at all. For example: https://findbootstrapsnippets.com/bootstrap-templates/ripple-dot-animation.html

Thank You. I agree it is not a big challenge, but importing something would be easier

for reference. I might look into using this: https://ant.design/components/badge/# with :status "processing"

As long as you're aware of the potential consequences of using just a single component from a huge UI library. :)

with advanced compilation, that shouldn't be a problem AFAIK?

That can very well be a problem. It all depends on how much that component uses and how you import it. Advanced compilation is not a wizard - DCE is rather limited in its abilities.

Personally, I wouldn't even try using some library for just that tiny dot. I'd copy the CSS and be done with it. Apart from giving me a guarantee that it will remain tiny, forever, it also gives me an ability to customize it in absolutely any way. But if you really want to use some component, make sure to analyze the resulting bundle size (at least shadow-cljs is able to provide you with the details) and see how bad it is.

Actually I agree that it is quite ridiculous to use a component in this case. But another very relevant topic is bundle size: • when I run a prod build on shadow-cljs it doesn't show this message. but shows it in dev builds. So i think it works. • But what tool in shadowcljs are you referring to? the 13.4 build report? (see image)

Yes, the build report.

> when I run a prod build on shadow-cljs it doesn't show this message. but shows it in dev builds What message?

Ah, gotcha.

My bet is that the warning is simply disabled in the production build.

Hmm okay, i will check that out.

warning or no warning the build report and bundle size will decide

Thanks again

NP

hmmm https://shadow-cljs.github.io/docs/UsersGuide.html#publish

I wrote about this topic here https://widdindustries.com/cljs-npm-libraries/

huh I was trying to see a full example but https://github.com/henryw374/cljs.java-time/blob/master/deps.edn doesn't contain any npm

But it basically mirrors what david said I think https://clojurians.slack.com/archives/C03S1L9DN/p1629895641082600

well... no. there's quite a bit of detail that's not documented anywhere else. also there's choices wrt npm-deps, cljsjs etc that is discussed

https://clojurians.slack.com/archives/C03S1L9DN/p1629965814002900?thread_ts=1629892957.080800&cid=C03S1L9DN that's deps.edn, for cljs js dpes, there's also deps.cljs, a different thing

Hmm I think I sorted it by not including the name I :as'd to. [:> Icon {:path "mdiAccountCircle"}] worked just fine with my :as mdi

Note that importing all the icons will increase your bundle size, even the release one.

Hmm a good point, I guess the bundle size restriction would be worth the super gangly import (we use like 30-40 icons on various bits of global nav

Ok, a bit of refactoring later and I did need to add the :as, e.g. mdi/mdiAccountCircle ... I'm trying to abstract it to just require the mdiAccountCircle as a string, I tried to call it using (symbol "mdi" "mdiAccountCircle") but I don't think its resolving.. what do I need to call on a symbol to resolve it from an import?

I should really try calling the first function that comes to mind before I post 😉

mdi will be a JS object - you will be able to access mdiAccountCircle via regular JS interop.

I'm struggling with this a bit.. the only thing I can get to work is [:> Icon {:path mdi/mdiAccountCircle}], cannot figure out how to replcea the mdiAccountCircle piece with an arbitrary string

The library file just exports paths like export mdiAccountCircle={blah}

What does your import look like?

["@mdi/js" :as mdi]

You should be able to replace mdi/mdiAccountCircle with (goog.object/get mdi "mdiAccountCircle").

ooh heck yes that works

thanks @p-himik .. I was trying all sorts of dots and dashes .. I felt like I was trying to fake morse code

I need to wrap my head around interop better!

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#number_type

Thanks for the quick reply but I’m still a bit confused. Let’s say I want to call my endpoint with {:value (- 5.00 1.00)} and on server side I validate schema by saying value should be double. value I sent gets converted (after the - calculation) to 4 instead of 4.00 which will cause exception. How would you go for it or am I missing something?

Not sure exactly… what is in the request to the server? E.g. what is in the request in Chrome’s network tab

I would probably coerce before validating. AFAIK there is no way to ensure it’s represented as a double in js

…i.e. always with a decimal at the end

As an alternative, change the backend so the relevant functionality accepts not only doubles but also longs.

> value I sent gets converted (after the - calculation) to 4 instead of 4.00 This statement is false. 4.00 does not get converted to 4. They are exactly identical. There is no 4 integral value in javascript

@p-himik we already diverted to that path I wanted to see if there is any other way 😄

If there was anything to be done in the client, it would be done in your serialization code. Not by doing any sort of conversion on the value.

Thanks David!

Thanks for the detailed answer, after reading your messages I read the source code for the transit conversion where I believe this is implemented. It gave me a good insight for how it works.

one possible solution

(defn pouch-swap! [db key f & args]
  (go-loop []
    (let [r (<p! (.get db key))
          [result ex] (try
                        [(<p! (.put db (apply f r args)))]
                        (catch js/Error ex
                          [nil ex]))]
      (if ex
        (recur)
        result))))

It also plain doesn't work. If I make rest a global variable in the firefox console temp1.cause.status gives 409 but apparently that code does not...

Have you tried (.-cause ^js res)?

I've tried ^js (.-status ^js (.-cause ^js res)) and still nothing

Are you 100% certain that it's that form in particular that generates the warning?

inst_37262 looks very different from res. :)

You seem to have some macro somewhere that uses inst#.

99% but everything is so fucked up right now I have no idea what's going on. It's the only -cause in the whole code, but it's in a go block so maybe that's doing funky stuff.

Ah, yes. that's the case. go blocks remove metadata.

Or rather, CLJS type hints.

what the hell

Instead, extract that getting operation in a function with a proper hint and call that function in the go block.

:face_palm:

A go block is a macro that heavily transforms the code within it. It just isn't written in a way that would preserve that metadata (not sure if it's possible to write it in such a way at all).

Ok yea that did the trick

go also do not play nice with #js {} literals

How come, what happens?

Superficially, seems to work just fine:

cljs.user=> (a/go (js/console.log (a/<! (a/go #js {:a 1}))))
#object[cljs.core.async.impl.channels.ManyToManyChannel]
cljs.user=> { a: 1 }

I can't remember now, but it's something with var access....

(def a 1)
(defn ...
  (let [a 2]
     (go #js {:a a})))

One option is to have a mock namespace and swap the classpath as needed.

in terms of building and packaging and publishing to clojars, all you need to do is publish a JAR with your clojurescript source code in it

I haven't done this with plain deps.edn but I'm sure it's doable

for running tests, kaocha makes it pretty easy to do that from the CLI and in a CI environment

that was fast. Thank you 🙂

unfortunately this is the web component (mwc-button) that I need, not the react component for material UI

for the react material ui there is: https://github.com/arttuka/reagent-material-ui

Output:

Code: https://github.com/borkdude/nbb/tree/main/examples/chalk

please note that :as is meant to be an alias, if you are calling it directly you likely should be using :refer (eg. (:require ["console" :refer (log)]))

also note that there is no such thing as ESM style imports. "$" works for any JS and is not related to ESM in any way. literally all it does is append the suffix to the thing you imported

Good points. The dollar is probably just more ubiquitous because of the ‘default’ thing with ESM

yeah its syntax sugar since ["chalk" :as chalk] and (chalk/default.blue "hello") kinda sucks, as does ["chalk" :rename {default chalk}] (.. chalk (blue "hello"))

even ["chalk" :default chalk] and (.. chalk (blue "hello")) kinda sucks so the "$" setting up any :as alias is nicer.

clj-kondo can provide you this information

both these tools leverage kondo: https://github.com/SevereOverfl0w/vizns https://github.com/benedekfazekas/morpheus

@U04V15CAJ thanks, i'll look into that

Not sure I understand. What do you mean by "when the deftype is freed"? Shouldn't it be the reverse - you detach the event handler, and it no longer holds a reference to an instance of the deftype?

https://github.com/NyanCAD/hipflask/blob/388d8abbdb020e305e9315c463a09d8157c87ef2/src/main/nyancad/hipflask.cljs#L43-L51

Exactly, so you hold on to the reference to p in that .on "change". Remove the handler - and the reference should be freed as well.

Yea so then you manually have to cancel the handler when you're done with the PAtom.

I was hoping there is a way to have like a "weak" reference to the PAtom, and then cancel the event handler when the PAtom goes out of scope.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakRef hmmmmm

WeakMap/WeakRef and finalizers have only been in the spec for a couple years. previous to that you had no real way to do this in a JS context

(defn patom [db key]
  (let [p (PAtom. db key nil nil)
        wp (js/WeakRef. p)
        ch (.changes db #js{:since "now"
                      :live true
                      :include_docs true
                      :doc_ids #js[key]})]
        (.on ch "change" (fn [change]
                        (if-let [myp (.deref wp)]
                          (-notify-watches myp nil (js->clj (.-doc change)))
                          (.cancel ch))))
    p))

what do you mean it doesn't work?

(defn watch-changes [db key wp]
  (let [ch (.changes db #js{:since "now"
                            :live true
                            :include_docs true
                            :doc_ids #js[key]})]
    (.on ch "change" (fn [change]
                       (if-let [myp (.deref wp)]
                         (-notify-watches myp nil (js->clj (.-doc change)))
                         (.cancel ch))))))

(defn patom [db key]
  (let [p (PAtom. db key nil nil nil)]
    (set! (.-changes p) (watch-changes db key (js/WeakRef. p)))
    p))

So it seems there is REEEEAALLY sneaky stuff going on with closures holding on to stuff or not.

that looks right. I don't know how you would reason that p never gets freed because of set!

I figured if I broke out the watch-changes function it would not hold on to the patom closure, which... maybe worked?

you don't get any guarantees about when or even if p gets freed, only that it eventually might, and if it does it will cancel the change listener

Well so without the set, it never works in the first place.

seems weird

ah no... works... but now big question is... will it ever get cancelled.

if you want guarantees, you should have a manual way of disposing of it

otherwise you're relying on the GC, which may decide to reclaim it immediately or never

Yea I mean, I don't care when it does it... I just want to verify it'll do so before my ram explodes.

Is there a way to see what is referencing an object?

don't think so. at least in chrome. maybe the firefox or safari devtools have something.

😞

Yesterday late at night I was experimenting a bit with just making several thousand listeners and seeing what happened. I got mixed results of CPU spikes followed by what seemed to be reclamation, or just hanging the browser entirely. I'll have to try that some more.

In Firefox I could not really find a memory profiler. It can just take snapshots, or profile CPU.