how would you setup the hot replacement ?

hot reload

@thheller When targetting :node-script, does shadow-cljs provides some way to bundle all the code (including all npm deps) into one js file (for easier distribution)?

@linshuai2012 see https://github.com/thheller/shadow-cljs/issues/290

@eliraz.kedmi https://code.thheller.com/blog/shadow-cljs/2019/08/25/hot-reload-in-clojurescript.html

I am using shadow-cljs in Gitlab enviroment where it is not possible to cache directories which are outside build directory (for example $HOME/.m2). What is the preferred way to set .m2 directory location?

assuming you are actually using shadow-cljs.edn and not project.clj/deps.edn you can set :maven {:local-repo "maven"} or so in shadow-cljs.edn

that should put it all in the project directly

Yes, this seems to work. Maybe this can be added to user guide as well because some one else may find the same problem as well

One more question. Do I understand correctly that --config-merge cannot be used to merge configuration to root level of shadow-cljs.edn but only inside :builds -> :build-name map?

yes, that is for merging build config only

you can set the maven config in ~/.shadow-cljs/config.edn

but maybe that doesn't work on gitlab? not sure?

I think that it might work because I can create that file in the build pipeline. I will try and see what happens.

Using 'shadow-loader' (or more accurate, shadow-lazy), can I set up so that modules are loaded from an absolute URL and not from the "current" origin?

:asset-path controls that, just stick the entire URL in there

Thanks

ok, I'm calling release from Clojure, and I need to override the asset path. Should this work? (shadow/release :main {:asset-path "something"})

why not put it into the config directly?

:release {:asset-path "//foo.com/js"}?

or is it dynamic in some way?

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

It's dynamic, yes -- we unfortunately have a couple of environments and a semi-complicated setup.

(shadow/release :main {:config-merge [{:asset-path "something"}]})

Works, thanks!

A lazy module that works well in development, fails to load in release mode. The error is something like shadow-cljs - failed to load – 329, how to debug this? is this a case for pseudo-names?

or I guess --debug ?

ok, making some progress -- loading the module as a script, I get $jscomp is not defined, which I see in the main module wrapped inside an IIFE, so that's probably the culprit

I keep getting your not viewing the latest compilation output

why is that?

I mean, I was not able to setup the hot-reload properly

@thheller I seem to be hitting https://github.com/google/closure-compiler/issues/1138

@eliraz.kedmi are you using the built-in shadow http server or your own? That error is usually a stale cache problem.

I'm using the built-in.. maybe it's the way I'm using it? I simply jack-in using CIDER with nRepl

Are you starting a shadow watch build somehow?

I'm not sure that's the proper way to activate the hot reload. however, when I change the code I do see the little CLJS logo spins and nothing changes

I don't know, when I start I get into the repl and the server is up and running

Do you change the code via editing a .cljs file and saving?

Or by evaluating a function at the repl?

I change a file and save

I see that CLJS icon appears spins (like it's doing some calculations) and goes away

but nothing actually changes on the DOM

OK, and have you setup a function in your project to be called after load? i.e. something with ^:dev/after-load metadata?

see https://shadow-cljs.github.io/docs/UsersGuide.html#_lifecycle_hooks

No, I have not. I don't know what that function suppose to do? I mean, what logic to put inside it?

Are you using reagent? If so you'd probably call (reagent/render ...), most probably the function you call to start your applicaiton.

Shadow doesn't know what to do when it reloads your code -- you might have changed component but shadow tries to be framework agnostic. So it will put the new code in the browser, but you somehow need to re-render the DOM yourself. That's where these build hooks come in.

got it, so the start function

I'm actually using hx

I want to leverage the new hooks API

(defonce EL (atom nil))
(defn ^:dev/after-load -render []
  (when @EL
    (react-dom/render
     (hx/f [Main])
     @EL)))

That's what I use, with some weird hack to get the element

Feel free to jump into #hx

So I'm trying to figure out what's the deal with my $jscomp issue -- I see a bunch of code in my lazy module that does things like $jscomp.arrayFromIterable, $jscomp.makeIterator and so on -- but no $jscomp definition in it. The main module almost immediately starts with

(function(){
var $jscomp=$jscomp||{};$jscomp.scope={};$jscomp.arrayIteratorImpl .... 

So the docs say (https://shadow-cljs.github.io/docs/UsersGuide.html#output-wrapper): "When using multiple :modules (a.k.a code splitting) this is not enabled by default since each module must be able to access the variables created by the modules it depends on." -- but it seems that's not entirely true. If I turn set :output-wrapper false then I get over my issue, $jscomp is public and everything works again, with the downside of having a ton of global variables.

@orestis yeah what is an issue I've been meaning to look into. you can fix it by either :output-wrapper false or :prepend-js "var $jscomp = {};" in the base module to pull it into the global scope

for some reason when using output-wrapper the var $jscomp just becomes $jscomp that isn't exported

Are you sure about the :prepend-js ? It doesn't seem to work, and I don't see how it could since it would run through optimisations. I tried :prepend to get it as a plain string but apparently due to JS scoping rules, the IIFE expression will still not "see it".

might only work with :prepend not :prepend-js

but it should work with one of those

:append "window.$jscomp = $jscomp;

seems to do the trick

append puts it inside the IIFE, prepend makes it go outside

I'm not sure why this is necessary at all though. especially since :advanced should be renaming this but for some reason it doesn't

it is a closure compiler thing though and kinda difficult to report

Made an issue here: https://github.com/thheller/shadow-cljs/issues/603 for Google's sake

anyone happen to know of an example usign shadow-cljs with klipse? when i require the klipse namespaces in my namespace, I get the following error:

The required namespace "cljsjs.codemirror.addon.edit.closebrackets" is not available, it was required by "klipse/ui/editors/editor.cljs".
The namespace was provided via :foreign-libs which is not supported.
Please refer to  for more information.

So I'm still having issues with source-maps not actually working with shadow-cljs. The sourceMappingURL in a file appears to be a relative path, is that how's it supposed to work?

//# sourceURL=js/cljs-runtime/edu.unc.applab.clem.views.js
//# sourceMappingURL=edu.unc.applab.clem.views.js.map

@donyorm as I said before this is controlled by :asset-path. if you set :asset-path "js" then yes it will be a relative path

ok I did set asset-path to js

This is my shadow-cljs.edn file now. But behavior is the same as before

it should likely be /js otherwise your paths won't resolve properly as you use any kind of "routing"

ie. if you load the page via /some/thing then the browser will try to resolve /some/thing/js

with /js you force it to actually use /js

Ok let me try that

Changing it to /js didn't seem to do much. Here's the source map part of the file:

//# sourceURL=/js/cljs-runtime/edu.unc.applab.clem.views.js
//# sourceMappingURL=edu.unc.applab.clem.views.js.map

can you please state your actual problem?

that looks exactly like it should?

The source map is at /js/cljs-runtime/edu.unc.applab.clem.views.js.map Will that setup find it properly

yes

Basically firefox isn't using source maps in error reporting (and presumably shadow-cljs/react/whatever is sending errors to the console) isn't using them either. Ex. I'll get the following stack-trace:

cljs$core$IFn$_invoke$arity$6 /js/cljs-runtime/cljs.core.js:13306
    cljs$core$IFn$_invoke$arity$5 /js/cljs-runtime/cljs.core.js:13288
    cljs$core$IFn$_invoke$arity$4 /js/cljs-runtime/cljs.core.js:13276
    cljs$core$IFn$_invoke$arity$4 /js/cljs-runtime/cljs.core.js:13564
    list_errors /js/cljs-runtime/edu.unc.applab.clem.views.js:102
    res /js/cljs-runtime/reagent.impl.component.js:134
    reagent$impl$component$wrap_render /js/cljs-runtime/reagent.impl.component.js:153
    reagent$impl$component$do_render /js/cljs-runtime/reagent.impl.component.js:201
    render /js/cljs-runtime/reagent.impl.component.js:227

in which context is that thrown?

I mean is it actually thrown or is it logged?

It's part of a reagent component running in re-frame

ie. is something does console.warn(ex) then it won't have source mapping

if it is actually uncaught it should be mapped

I think it's actually uncaught. I'll throw an exception in my own code just to be sure

try something like

(js/setTimeout
  (fn []
    (throw (ex-info "omg" {})))
  2000)

It's possible react is catching something

in your main code

that is mapped fine for me in firefox

if it is caught and logged I get a useless trace

"Error: omg
    at new cljs$core$ExceptionInfo (/js/cljs-runtime/cljs.core.js:36930:10)
    at Function.eval [as cljs$core$IFn$_invoke$arity$3] (/js/cljs-runtime/cljs.core.js:36991:9)
    at Function.eval [as cljs$core$IFn$_invoke$arity$2] (/js/cljs-runtime/cljs.core.js:36987:26)
    at eval (/js/cljs-runtime/demo.browser.js:19:29)"

Now I'm getting this error

Source map error: Error: request failed with status 404
Resource URL:  line 827 > eval
Source Map URL: cljs.core.js.map

Thanks for the help by the way, I appreciate this

Missed the source map url

doesn't seem to be using the asset-path

your config is fine but it appears you are using a custom webserver?

(there is no config for that in the config you pasted)

so what is running at localhost:3000?

Sorry forgot I was doing that separately

It's a ring webserver

does it serve properly?

The code frontend and backend are running on the same machine so I needed to have ring server it up

And yes it does

and you are accessing the page via http://localhost:3000?

Yep

and the script is included via <script src="/js/main.js">?

yes

try setting :devtools {:loader-mode :script} in your build config

doubt that changes anything but who knows

firefox devtools are still kinda bad

That did it

Thanks

hmm that should not have done anything 😛

Well I'll roll with it for now. Thank you so much for the help

guess I broke firefox somehow. hot-reload doesn't trigger at all anymore for me

It was being a little weird with me, but it's still working

oh nvm .. just broke because I was messing with the compiler 😛

That would do. Seems to be working fine for me, other than the fact that my server is not serving the proper mimetype for JS files. Guess I'll have to fix that

I'll try to figure out why it isn't loading the source maps anymore. It used to work fine the last time I tested in Firefox

and it is still working fine if errors are thrown at runtime

but no longer for anything logged while loading

@aisamu I'm not able to reproduce the goog.math.Long error you ran into yesterday. is it possible you are including two separate builds using the closure library in some way?

I got this funny experience where I can't compile tailwind in a shadow-cljs project.

npx tailwind build styles.css -o output.css This command works normally but inside a folder that has a shadow-cljs project it doesn't??

and how does it fail?

I use tailwind myself and had no problems so far?

It takes styles.css which is

@import "tailwindcss/base";

@import "tailwindcss/components";

@import "tailwindcss/utilities";

It doesn't actually create the styles. I remember you saying you used it so I don't see how this is happening.

uhm the @import syntax requires postcss?

https://tailwindcss.com/docs/installation/#2-add-tailwind-to-your-css

Oh yep

just a silly copy paste error

😅

that's embarrasing haha