How do I update new dependencies in shadow-cljs?

Hi! I'm interested in how to manage the versions of the JS bundle. I have read the part of the documentation https://shadow-cljs.github.io/docs/UsersGuide.html#_cacheable_output and knowing that my html is generated by hiccup, I am thinking of using the solution from the manifest.edn file. Are there some leads? How do you do with Shadow-cljs when an index.html file is used to call the script?

@admin055 if you just have a static html file you can use this hook https://github.com/thheller/shadow-cljs/blob/master/shadow-cljs.edn#L147-L149

that'll take the source and rewrite the html script tags eg. https://github.com/thheller/shadow-cljs/blob/master/out/demo-browser/index.src.html#L10-L11

but if you have hiccup you don't need to hook

just read the manifest.edn and generate the script tag from that?

slurp -> edn/read-string and transform it however you need. its just clojure data.

> slurp -> edn/read-string and transform it however you need. its just clojure data. Perfect, that's what I'm putting together. Thank you for confirming that I am going in the right direction.

I was not aware of this hook, it's wonderful! Thank you

@thheller Shadow-cljs is full of hidden gems ... I never regret when I ask questions! 🙂

Another question. If I doesn't the built-in Shadow server and want to watch/reload the CSS file locate in resources/public/css/app.css, what path do I put in {:devtools {:watch-dir "???"}} option?

The path must be in the classpath too?

I tried multiple solution but no success.

resources/public assuming the file is accessed via /css/app.css in your html

Yes, this is the case.

Strange, I already try with this path but no success.

you need to restart the watch for this to take effect

Oh ok, I try to restart

After restarting, I touch resources/public/css/app.css but not rebuild happened

what rebuild do you expect? css is not built by shadow?

Yes I know I am using postcss for this. I meant reload

CSS reload

I don't know. what is the EXACT html link tag you use to include it?

and I'm assuming resources/public/css/app.css is the OUTPUT file produced by postcss, not the input?

Yes the output file.

<link href="/css/app.css" rel="stylesheet" type="text/css">

and your webserver doesn't cache the file or so? I mean what do you see in the browser console? shadow-cljs should be telling you what it is doing

I just got it. My public folder does not contain an index.html file as this is handled by hiccup. I thind watch-dir works only with html file, right?

no, doesn't care

OK, good to know

> and your webserver doesn't cache the file or so? I mean what do you see in the browser console? shadow-cljs should be telling you what it is doing I'll do some tests and I'll tell you

there really isn't much to this. :watch-dir will cause shadow to watch that directory and notify about file updates. the client will look for CSS matches by path and reload if found

again ... look at the console. if you see a load CSS message from shadow-cljs but css didn't update then your server likely caches stuff and didn't return the "new" version

if no load CSS shows up then it didn't match the paths properly

Load CSS shows up and CSS reload now, perfect!

I think my various tests without restarting shadow-cljs watch misled me. A big thank you again!

More I works with Shadow-CLJS and more I'm impressed by the nice piece of librarie that it is! 😉

I’ve got a function in my app (defn my-fn [x] (do-stuff-with-x)) that gets sent the method toString by some library code. How can I guarantee that toString returns the same value for every build? (I think toString is returning different values because advanced compilation is renaming the function).

I don't understand. "gets sent the method toString by some library code.". what does that mean?

you mean you are calling toString on a function?

@thheller yes sorry

sometimes in OOP calling a method is also called “sending a message”

so it looks like myFn.toString()

For some context, the pouchdb library does this to create a unique replication ID

it takes the stringified function, plus some other options to create the unique ID

and if the ID change, it will sync everything (which I’m trying to avoid)

why does it take a stringified function? that sounds like total nonsense?

but there is no way to guarantee that the function will always stay the same with :advanced, at least as far as I'm aware

why can you not choose which string to use? why a stringified function? I don't get it. have some docs?

Sure, the documentation on the replication protocol is here: https://docs.couchdb.org/en/3.1.1/replication/protocol.html#generate-replication-id

and here is the pouchdb implementation https://github.com/pouchdb/pouchdb/blob/master/packages/node_modules/pouchdb-generate-replication-id/src/index.js#L15

I believe the idea is that you would want to re-start replication from scratch if any of the parameters for the replication changes

what if I import the function from a javascript module?

and where is that function used? everything going through :advanced or even :simple is never guaranteed to stay identical

Used here: https://github.com/pouchdb/pouchdb/blob/master/packages/node_modules/pouchdb-replication/src/replicate.js#L48

I could fork the library (I already maintain a fork of this lib so it wouldn’t be a huge deal)

hmm yeah no clue, I don't see a way to keep this totally stable

I mean any kind of minifier should have this issue? it might end up sort of stable but there is no guarantee

Yeah seems like that would be the case

I’ll search around the issues and stuff to see if anyone else has the same problem

thanks for taking a look with me

I mean you can go totally crazy with hacks but that seems kinda scary

(defn ^:export my-fn [x] ...) and as .filter you use (js/Function. "function filterMe(x) { return _fn(x); }") 😛

or was it (js/Function. "x" "return _fn(x);"), can't remember precisely

kinda absurd to construct a function that way, but that would stay equal 😉

hmm

I’ll play around with it, but thank you for suggestions!

Me again :) I just finished the Reagent front end integration of this demo app https://inertia.prestance-design.com/js and I'm going to tackle the optimization. For that I use the useful Shadow-cljs report and it seems to me that overall it looks to be well optimized? https://inertia.prestance-design.com/js/report.html Someone in the know could give me an opinion? Is there something to do in particular at the level of the CLJS bundle?

Or the final size seems reasonable.

looks reasonable. below 150kb gzip is good

Perfect, thanks for taking the time 👍