shadow-cljs

https://github.com/thheller/shadow-cljs | https://github.com/sponsors/thheller | https://www.patreon.com/thheller
isak 2021-03-13T04:03:22.413400Z

Sounds good if lein install works. Just checking if I can solve one of the problems with inspect that I noticed earlier (where taps don't work if you do them too quickly on a page load)

wombawomba 2021-03-13T16:44:56.415300Z

is there a recommended way of running other background processes (asset processors, static site builders etc) together with shadow-cljs watch?

thheller 2021-03-13T16:46:52.415600Z

I have used https://www.npmjs.com/package/foreman https://www.npmjs.com/package/npm-run-all in the past

thheller 2021-03-13T16:46:57.415900Z

nowadays I just run things separately

wombawomba 2021-03-13T16:47:11.416300Z

alright, thanks!

2021-03-13T17:25:43.417600Z

Hey team, is there a recommended article / resource, that goes into the “most idiomatic setup” for css with shadow? Would love any pointers!

wombawomba 2021-03-13T18:04:31.418Z

FWIW I found https://www.npmjs.com/package/concurrently which seems works really nicely for my use-case

2021-03-13T18:14:12.420800Z

Hey team, I am playing around with optimizing my shadow-cljs bundle. I ran

npx shadow-cljs run shadow.cljs.build-report app report.html 
One thing I noticed, is that currently the clojurescript runtime is taking 400kb. That seems surprising — I thought it would be doing some kind of tree-shaking. (To test, I deleted all code in core.cljs, and left the imports) Here’s my shadow config in project.clj:
{:nrepl {:port 7002}
   :builds
   {:app
    {:target :browser
     :output-dir "target/cljsbuild/public/js"
     :asset-path "/js"
     :modules {:app {:entries [<http://virtual-library.app|virtual-library.app>]}}
     :dev {:closure-defines {"re_frame.trace.trace_enabled_QMARK_" true}}
     :devtools {:preloads [day8.re-frame-10x.preload]
                :watch-dir "resources/public"}}
    :test
    {:target :node-test
     :output-to "target/test/test.js"
     :autorun true}}}
I may be missing something trivial. (perhaps I need to manually set a certain kind of :optimizations? Any pointers / resources for debugging further would be appreciated!

thheller 2021-03-13T18:17:43.421400Z

you are including cljs.analzyer and cljs.pprint somewhere

thheller 2021-03-13T18:17:57.421800Z

those are very heavy hitters that can't be DCE'd

thheller 2021-03-13T18:18:11.422Z

so you should get rid of those at least (which will also further shrink cljs.core in the process)

2021-03-13T18:31:48.422900Z

Ah, thanks for the pointer @thheller! Will look deeper.

2021-03-13T18:38:19.424600Z

Okay, looks like the two biggers culprits: I have a /dev/…/app.cljs file, which imports

[cljs.spec.alpha :as s]
    [expound.alpha :as expound]
    [devtools.core :as devtools]))
And my core.cljs file imported [reitit.coercion.spec :as reitit-spec], which seem to also be a culprit. My guess right now is that I am incorrectly using /dev/ vs /prod/, and then will learn more about what reitit-spec is about.

thheller 2021-03-13T18:45:09.425100Z

devtools.core you should remove unless you are calling it somewhere directly?

thheller 2021-03-13T18:45:59.425400Z

dev stuff in general you want to move into a :preloads ns

2021-03-13T19:00:30.428600Z

Right now, the way it is set up, I have a custom file in /env/dev/cljs/[app-name]/app.cljs , which does the following:

(ns ^:dev/once <http://virtual-library.app|virtual-library.app>
  (:require
    [virtual-library.core :as core]
    [cljs.spec.alpha :as s]
    [expound.alpha :as expound]
    [devtools.core :as devtools]))

(extend-protocol IPrintWithWriter
  js/Symbol
  (-pr-writer [sym writer _]
    (-write writer (str "\"" (.toString sym) "\""))))

(set! s/*explain-out* expound/printer)

(enable-console-print!)

(devtools/install!)

(core/init!)
Looking at project.clj, looks like this gets replaced by a /prod/ in uberjar:
{:uberjar {:omit-source true
             :prep-tasks ["compile" ["shadow" "release" "app"]]

             :aot :all
             :uberjar-name "virtual-library.jar"
             :source-paths ["env/prod/clj"  "env/prod/cljs" ]
             :resource-paths ["env/prod/resources"]}
I think the way I set up shadow, the reporting script is assuming env/dev/*. Will look deeper into this, and :preloads. From a quick test, looks like this is indeed what is happening,

thheller 2021-03-13T19:03:20.429300Z

this is a terrible pattern I would strongly recommend changing

thheller 2021-03-13T19:04:07.430Z

in your build config set :modules {:app {:init-fn <http://virtual-library.app/init|virtual-library.app/init>! :preloads [virtual-library.dev]}}

thheller 2021-03-13T19:04:18.430300Z

and move all the stuff you have in app to the .dev ns

thheller 2021-03-13T19:04:30.430600Z

no need to switch the classpath and all that mess

thheller 2021-03-13T19:04:50.430800Z

(enable-console-print!)

(devtools/install!)

(core/init!)

thheller 2021-03-13T19:04:58.431300Z

delete these 3 too. not needed at all.

2021-03-13T19:05:30.431800Z

…Amaazing! Thank you @thheller!

2021-03-13T19:06:30.432800Z

Also, with reitit-spec removed, and the dev/app stuff, now we’re muuch better: (will update with your advice and keep playing with the optimization)

2021-03-13T19:23:13.434200Z

Okay, current shadow setup:

{:nrepl {:port 7002}
   :builds
   {:app
    {:target :browser
     :output-dir "target/cljsbuild/public/js"
     :asset-path "/js"
     :modules {:app {:init-fn virtual-library.core/init! :preloads [virtual-library.dev]}}
     :dev {:closure-defines {"re_frame.trace.trace_enabled_QMARK_" true}}
     :devtools {:preloads [day8.re-frame-10x.preload]
                :watch-dir "resources/public"}}
    :test
    {:target :node-test
     :output-to "target/test/test.js"
     :autorun true}}}
first thought, will try moving day8.re-frame-10x.preload into virtual-library.dev . Let me know if there’s more cleanup I could do : } — thanks team

thheller 2021-03-13T21:04:30.434700Z

fine to just move :preloads together. either in :modules or :devtools is fine

❤️ 1