Fork me on GitHub
#shadow-cljs
<
2023-12-14
>
elken08:12:24

I have a feeling this isn't possible but if this should I can file an issue instead, figured itd be easier to talk out first. So I have a #CNMR41NKB SSR app which works beautifully now, the only issue I am missing is CSS hot reloading. Because the app is server rendered, I can't use the shadow http server (but if that solves the problem I can work around it) so I just need some way to trigger to shadow the files have changed and to do a hot reload. On the ring side, my css file has the timestamp hack appended so there's no caching issues. I have tried :watch-dir pointed at resources/public/css (every combination I can think of) and nothing triggers, but I suspect this is because I'm not using the dev-http server but there is still hot loading of the js just fine so I'm sure there's a way to get this working 😄

elken08:12:28

{:source-paths ["src" "resources"]

 :dependencies
 [[com.pitch/uix.core "1.0.1"]
  [com.pitch/uix.dom "1.0.1"]
  [binaryage/devtools "1.0.7"]
  [com.adamrenklint/preo "0.1.0"]
  [cider/cider-nrepl "0.44.0"]]

 :builds
 {:app {:output-dir "resources/public/js"
        :asset-path "/js"
        :target :browser
        :modules {:main {:init-fn client.client/init}}
        :devtools {:watch-dir "resources/"
                   :preloads [client.preload]}}}}
is the shadow-cljs, the project isn't confidential or anything it's just not got a public repo, if it's easier I can push it and link it here 😄

Roman Liutikov09:12:26

I guess you could pull in some bits from shadow.resource ns, IIRC the slurp-resource fn will pull in a resources and also force compiler to rebuild and hot-load when the resource is updated

elken09:12:57

Hmm, that might work but I'd favour a more general solution because there may be other resources down the line I'm just focusing on the CSS for now. That's a good start though, thanks!

thheller10:12:11

:watch-dir "resources/public" assuming the actual css files sit in resources/public/css and are served via http /css/whatever.css

thheller10:12:28

that should be it for css reloading

elken10:12:33

They are, and I tried that 😕

elken10:12:44

I'll push what I have and you can take a better look

thheller10:12:48

note that changing :watch-dir requires restarting the build. so it you tried stuff without restarting it wouldn't work

elken10:12:02

I figured and I did. maybe I didn't then...

elken10:12:30

Alright well idk what I did but it's working now -_- Thanks for the 🦆 😅

👍 1
🙌 1
mikerod20:12:46

1) Why might I not be getting any output from my shadow-cljs :build-hooks when I am using shadow.cljs.util/log calls within them? 2) Also, is there a good way to add a new hook and try it out dynamically without needing to keep restarted everything?

thheller22:12:46

log output goes to where the shadow-cljs process was started. could be that is hidden in cider or something

thheller22:12:11

you likely shouldn't be using hooks 😛

thheller22:12:34

I see them abused too much and used for things they were never intended to do 😛

thheller22:12:02

regardless ... I'd develop them in the usual REPL workflow, reloading the CLJ namespace from the REPL and stuff

thheller22:12:20

there is literally no reason to ever restart anything thanks to the REPL 😛

mikerod22:12:08

I don’t see the logs in the nrepl buffer. But I do see other shadow activity. Weird.

thheller22:12:31

cider controls what you see at the buffers, not shadow-cljs

thheller22:12:56

I'd run npx shadow-cljs server and then connect to the REPL remotely

thheller22:12:12

gives you a very obvious place where things are logged and the process to be killed

mikerod22:12:13

It typically just logs anything I log though. I use it all the time for sure

mikerod22:12:27

And I definitely rely on hooks. We have several prep steps needed.

thheller22:12:40

log is also kind of shadow-cljs internal, so not sure what you are using it for

thheller22:12:08

don't know what that means, prep likely shouldn't be done in a hook if you ask me though

mikerod22:12:03

Well some of it is for convenience when starting a repl to have things get done in that single JVM step. Like building sass commands and cache busting it. But that isn’t critical and could be earlier shell steps - just more clunky to build that into something like cider-jack-in.

mikerod22:12:25

More pressing is that we are currently still going to be using webpack to bundle until I can see if what shadow does works for us and migrate.

mikerod22:12:02

I need to run the bundles after shadow compiles cljs but before the rest of the repl can be used since my webserver needs the bundle. Also it all has to be cache busted etc.

mikerod22:12:29

In figwheel you use the bundle target and it gives you a time to slip in the bundle command automatically after the compilation. In shadow I think I just have to use a hook.

mikerod22:12:27

Keep in mind I’m working with multiple people teams. And we have an easy jack in sort of flow with figwheel. So having a bunch of weird new steps for everyone isn’t ideal.

thheller22:12:53

here is how I go about doing things, it is basically described in this readme https://github.com/thheller/shadow-css?tab=readme-ov-file#development-builds

mikerod22:12:54

I can hack a bunch at the jack-in command script too. But trying to do the least. We also have a few calva users.

thheller22:12:02

basically I have a (repl/go) keybind

thheller22:12:21

this starts everything I need, and restarts it when I press it again

thheller22:12:28

single JVM process, can do everything

thheller22:12:54

this function you write and have full control over. there is no need to shadow-cljs to call it or know what it does

thheller22:12:16

that example also builds css, so should be easily translatable to sass or whatever

thheller22:12:31

you can start shadow-cljs watches from the clj API, or anything shadow-cljs for that matter

thheller22:12:00

would also fit very seamlessly into a jack-in workflow as far as I can tell

thheller22:12:26

there is absolutely no need to have shadow-cljs do things it isn't meant to do via build hooks 😛

mikerod22:12:34

I’ll check it out.

mikerod22:12:44

I still think hooks make a lot of sense for bundles

mikerod22:12:00

You want to kick off the bundler as soon as the cljs compiled js is done. Ie. the flush phase

thheller22:12:22

(shadow/release :app) (make-that-bundle-thing) literally two function calls

mikerod22:12:34

This is for dev too

mikerod22:12:55

And I’d have to make jack-in call of this for cider. And do something else for calva. Etc.

thheller22:12:04

I generally do cache busting things only in release builds, no need for it in dev

mikerod22:12:17

We use the same webserver infrastructure.

mikerod22:12:35

It expect the same cache busting setup. Doesn’t know about a “dev setup”

mikerod22:12:45

So it was just easier this way.