shadow-cljs

https://github.com/thheller/shadow-cljs | https://github.com/sponsors/thheller | https://www.patreon.com/thheller
grumplet 2020-11-23T11:00:37.206900Z

Sorry if there’s an obvious answer to this, but I’m seeking reassurance that it’s straight forward to configure generation of ES5 code for older browsers using Shadow. I’m pulling in reframe/reagent and a yet to be decided chart library from npm modules.

thheller 2020-11-23T11:01:26.207700Z

es5 output is the default but the answer somewhat depends on "how old is the browser"?

thheller 2020-11-23T11:02:10.209Z

ie8 will likely require manual tuning which can be done of course 😉

grumplet 2020-11-23T11:02:44.209500Z

I may need to add poilyfills, but IE10 would be sufficient. IE9 would hit even the stuck in the mud hospital IT departments

thheller 2020-11-23T11:03:33.210100Z

clojurescript itself will be fine with even ie6. largely depends on the libs you are going to use. some may work some may not

thheller 2020-11-23T11:04:12.210700Z

there is basic polyfilling in shadow-cljs which is usually good enough but it really depends on the libs you use

grumplet 2020-11-23T11:21:40.212500Z

Great, many thanks. I suppose the unknown for me is whether I will need to postprocess anything outside of the shadow build.

grumplet 2020-11-23T11:22:05.212800Z

I’ll suck it and see for a bit.

thheller 2020-11-23T11:27:02.215Z

unfortunately its impossible to give a concrete answer to this. the various degrees of javascript on npm make this too much of an unknown. not all features can be polyfilled or transpiled so if you end up using those you'll not get far. if you only use conservative libraries with "older" JS then everything will likely just work.

grumplet 2020-11-23T11:41:55.217100Z

Useful advice - thank you. So, in case you know off the top of your head - I’m using react-bootstrap and recharts at the moment. React-bootstrap is harder to replace, but I could swap recharts with any reasonable chart lib.

grumplet 2020-11-23T11:42:21.217600Z

Those are the only major npm dependencies.

thheller 2020-11-23T12:40:22.218100Z

sorry, haven't used either of those. bootstrap is widely used so it should be fine.

recholsknauber 2020-11-23T13:43:05.220900Z

Hello! Newbie here--what is best practice for organizing/running .clj code in a Shadow app? Does anyone run "shadow-cljs clj-run" programmatically? My specific case involves generating initial HTML files from clj Hiccup, then affecting the resulting DOMs with Reagent.

2020-11-23T14:30:57.223800Z

How should I handle css files from npm packages, is there anything in shadow-cljs that causes them to be “copied” to my target dir structure as well as the required js-files? I am quite new to this js-world so apologies if there is an obvious solution (like “don’t use shadow for that”)

thheller 2020-11-23T15:05:22.224500Z

@ryanknauber shadow-cljs focuses only on CLJS. for CLJ related things I recommend using lein.

👍 1
thheller 2020-11-23T15:05:59.225Z

@amorokh shadow-cljs does not handle CSS. you can use something like postcss to handle css

tony.kay 2020-11-23T18:07:38.227900Z

I’m trying to use proxy support to deal with some SSL/CORs debugging locally. I’ve used nginx for this in the past, and when I downgrade to 2.8.110 it does seem to work fine. With the latest 2.11.7 everything connects, it downloads the correct js, but then shadow always shows the red error bar saying I’m running stale js. The configuration is: In shadow-cljs, I’m using

:devtools         {:devtools-url "<https://portal.lvh.me/shadow-cljs>" 
and I’m using an nginx proxy configured as shown here https://www.nginx.com/blog/websocket-nginx/

tony.kay 2020-11-23T18:08:37.228700Z

The SSL stuff all works perfectly fine (my app functions properly), and the shadow websocket does connect

thheller 2020-11-23T18:11:02.229200Z

hmm just a guess but does the nginx maybe not pass query parameters to the websocket properly?

tony.kay 2020-11-23T18:11:25.229500Z

that is diff between 2.8 and 2.11?

thheller 2020-11-23T18:11:29.229700Z

the opened url should have ?server-token=&lt;uuid&gt;

tony.kay 2020-11-23T18:11:38.229900Z

I’ll look at logs

thheller 2020-11-23T18:12:17.230700Z

well there were other changes but that is one of the ones that'll lead to the stale error

tony.kay 2020-11-23T18:12:48.230900Z

ok, thanks

thheller 2020-11-23T18:15:17.232200Z

thats the fn handling this. maybe redefine it at the REPL and add some debug tap>

tony.kay 2020-11-23T18:23:36.233500Z

Yeah, that was it @thheller. Thanks. I thought I had the rewrite correct. I had:

location /shadow-cljs/ {
        rewrite ^/shadow-cljs/(.*) /$1 break;
        proxy_pass <http://shadow-cljs/$1>;
        proxy_http_version 1.1;
        proxy_set_header   Upgrade $http_upgrade;
        proxy_set_header   Connection "Upgrade";
        proxy_set_header   Host $host;
    }
in nginx, and it turns out putting the $1 on the proxy_pass was wrong…changing it to this fixed it:
location /shadow-cljs/ {
        rewrite ^/shadow-cljs/(.*) /$1 break;
        proxy_pass <http://shadow-cljs>;
        proxy_http_version 1.1;
        proxy_set_header   Upgrade $http_upgrade;
        proxy_set_header   Connection "Upgrade";
        proxy_set_header   Host $host;
    }

👍 1