This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
I'm a bit puzzled how to split my code across a frontend and node part. Like, if I add multiple build targets, what defines which code ends up in them? This is what I currently have. Does it just infer the required code from the :init-fn
and :export-var
, or do I need something else?
{:source-paths
["src/dev"
"src/main"
"src/test"]
:dependencies
[[reagent "1.2.0"]
[org.clojars.pepijndevos/hipflask "0.10.2"]]
:dev-http {8080 "public"}
:builds
{:frontend
{:target :browser
:modules {:common {}
:editor {:init-fn nyancad.mosaic.editor/init :depends-on #{:common}}
:libman {:init-fn nyancad.mosaic.libman/init :depends-on #{:common}}}
:compiler-options {:output-feature-set :es2018}}
:extension
{:target :node-library
:output-to "out/main.js"
:exports-var nyancad.mosaic.extension/exports}}}
"code splitting" is what modules is, they split the build output itself into multiple files
but yes, the compiler figures out what a build needs from its :init-fn or :exports-var
thanks
Dumb question - should / can I run the shadow-css build function in a shadow-cljs build hook? If so which stage?
the way shadow-css works means its not coupled to CLJS in any way, thus triggering a build only in a hook makes no sense
of course I cannot stop you from doing that, and the correct stage doesn't really matter since it doesn't need to modify or inspect the build state in any way
haha I”m glad I asked 😄
what would you recommend, if I’m mainly going to be editing cljs files and would like the css to be regenerated on save?
here is what I use https://github.com/thheller/shadow-css#development-builds
Ok interesting - you mention that this could “just call (build/css-release)” … where would you recommend putting custom color variables like color-primary if you want to use the repl and the release build? Should I modify both the repl and the build css to assoc values into the build state?
called like here https://github.com/thheller/shadow-cljs/blob/master/src/dev/repl.clj#L45
(defn start []
(shadow-server/start!)
;; then setup the watcher that rebuilds everything on change
(reset! css-watch-ref
(fs-watch/start
{}
[(io/file "src" "main")]
["cljs" "cljc" "clj"]
(fn [updates]
(try
(build/css-release)
(prn :css-done)
(catch Exception e
(prn :css-build-failure)
(prn e))))))
(build/css-release)
(prn :css-done)
(let [inst
(-> (sys/read-config "config/development.clj")
(sys/start-system))]
(vreset! instance-ref inst))
:started)
Great, one more dumb question, where do I put repl.clj. I have a folder called dev and I put in repl.clj and called it repl.clj src/dev is in my paths But npx shadow-cljs run repl/start can’t find it
I have a deps.edn
and an entry :paths ["src/main" "src/test" "src/dev"]
and then in shadow-cljs.edn, :deps true
ah ok, wait I run shadow-cljs watch app, and then npx shadow-cljs run repl/start? It’s the npx repl/start that can’t find src/dev/repl.clj
Am I missing something to start?
you just run repl/start, and in that you do whatever you want to start besides shadow-cljs itself
Oh, I’ve cleared .shadow-cljs and it works now
I think you just deleted every trace of a still running shadow-cljs instance and you now may have a zombie instance in the background
oh ok, great, thanks for your help! And that zombie is dead now I’m sure
btw what I also do in the case of the shadow-cljs project itself, since it has so many builds for various things
I just start them from the http://localhost:9630 UI
since I'm not always working on all builds all the time that is more convenient than hardcoding it
but starting the build from the start fn is equivalent to starting it from the terminal via npx shadow-cljs watch app
otherwise
Thanks!
Oh… is this wrong usage (css :bg-red-950) I’m getting the class generated in the html, but there’s no class in the css. The build is being run, and I see the tailwind preamble, but not the matching class
I also tried (css :c-bg-red-950)
and I’ve updated the namespace matcher in repl.clj
Like this
(defui app
[]
($ :div
{:class (css :bg-red-950)}
"hey"))
(ns qrart.homepage
(:require [qrart.qr :as qr]
[qrart.style :as style]
[uix.core :as uix :refer [defui $]]
[uix.dom]
[shadow.css :refer [css]]
["react" :as react]
["react-dom" :as rdom]
["react-dom/server" :as server]))
(defui app
[]
($ :div
{:class (css :bg-red-950)}
"hey"))
(defonce root
(uix.dom/create-root (js/document.getElementById "app")))
;; start your app with your favorite React renderer
(defn ^:dev/after-load init []
(uix.dom/render-root ($ app) root))
(-> @css-ref
(cb/generate '{:qrart {:include [qrart.*]}})
(cb/write-outputs-to (io/file "public" "css")))
I think so ^ this is the relevant snippet?Ah, (css :px-4)
works
I think it’s something to do with colors.
do I have to explicitly include the tailwind colors somehow?
default scale is https://github.com/thheller/shadow-css/blob/main/src/main/shadow/css/colors.edn
this project has no direct match to tailwind, it is only inspired by it. so there are differences I guess
oh yeah, bg-red-900 is ok, I was looking at the tailwind site oop
cool!!
I didn’t get a warn about bg-red-950 but I’ll check that later
Looking forward to using this in my project. I really like the idea and it’s nice not to have to run the tailwind node gubbins 🙂