Improve css cache busting, ditch Makefile, prune deps

nenadalm · Jan 6, 2024 · 514a427 · 514a427
1 parent ef74f93
commit 514a427
Show file tree

Hide file tree

Showing 12 changed files with 81 additions and 80 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -45,7 +45,7 @@ jobs:
         run: |
           clojure -Stree
           yarn install
-          make
+          yarn release
       - name: Deploy
         uses: JamesIves/github-pages-deploy-action@v4.4.3
         with:

diff --git a/.gitignore b/.gitignore
@@ -3,6 +3,7 @@
 /target/
 /node_modules/
 /resources/public/js/
+/resources/public/css/
 /resources/public/worker.js
 /resources/public/manifest.json
 /resources/public/index.html
diff --git a/Makefile b/Makefile
diff --git a/deps.edn b/deps.edn
@@ -1,6 +1,5 @@
 {:paths ["src" "test" "resources"]
- :deps {at.favre.lib/bytes {:mvn/version "1.6.1"}
-        org.clojure/clojurescript {:mvn/version "1.11.60"}
+ :deps {org.clojure/clojurescript {:mvn/version "1.11.60"}
         reagent/reagent {:mvn/version "1.2.0"}
         re-frame/re-frame {:mvn/version "1.3.0"}
         metosin/jsonista {:mvn/version "0.3.7"}

diff --git a/package.json b/package.json
@@ -3,7 +3,9 @@
     "release": "shadow-cljs release app",
     "watch": "shadow-cljs watch app",
     "test": "shadow-cljs compile test && node ./target/node-test.js",
-    "test:watch": "shadow-cljs --config-merge '{:autorun true}' watch test"
+    "test:all": "clojure -M:cljfmt check && clojure -M:clj-kondo && yarn test",
+    "test:watch": "shadow-cljs --config-merge '{:autorun true}' watch test",
+    "clean": "rm -rf resources/public/js resources/public/css resources/public/index.html resources/public/worker.js resources/public/manifest.json"
   },
   "devDependencies": {
     "shadow-cljs": "^2.20.20"

diff --git a/resources/public/css/styles.css → resources/private/css/styles.css b/resources/public/css/styles.css → resources/private/css/styles.css
diff --git a/shadow-cljs.edn b/shadow-cljs.edn
@@ -10,6 +10,7 @@
         :dev {:closure-defines {"re_frame.trace.trace_enabled_QMARK_" true}}
         :release {:module-hash-names true}
         :devtools {:preloads [day8.re-frame-10x.preload]}
+        :build-hooks [(build.hook/hook)]
         :target :browser}
   :test {:target :node-test
          :output-to "target/node-test.js"

diff --git a/src/build/create_index.clj b/src/build/create_index.clj
@@ -13,7 +13,7 @@
 (defn- app-version []
   (sh "git" "rev-parse" "HEAD"))
 
-(defn- render []
+(defn render [module-id->output-name]
   (str
    "<!doctype html>
 <html lang=\"en-US\">
@@ -24,18 +24,14 @@
     <meta name=\"app-version\" content=\"" (app-version) "\">
     <meta name=\"description\" content=\"Simple life counter app that works offline.\">
     <title>Life counter</title>
-    <link rel=\"stylesheet\" href=\"" (u/asset "css/styles.css") "\">
-    <link rel=\"icon\" href=\"" (u/asset "img/icon.svg") "\" type=\"image/svg+xml\">
-    <link rel=\"apple-touch-icon\" href=\"" (u/asset "img/icon_192.png") "\">
-    <link rel=\"manifest\" href=\"" (u/asset "manifest.json") "\">
+    <link rel=\"stylesheet\" href=\"" (u/asset "css/styles.css" module-id->output-name) "\">
+    <link rel=\"icon\" href=\"" (u/asset "img/icon.svg" module-id->output-name) "\" type=\"image/svg+xml\">
+    <link rel=\"apple-touch-icon\" href=\"" (u/asset "img/icon_192.png" module-id->output-name) "\">
+    <link rel=\"manifest\" href=\"" (u/asset "manifest.json" module-id->output-name) "\">
   </head>
   <body>
     <div id=\"app\"></div>
-    <script src=\"" (u/asset "js/app.js") "\"></script>
+    <script src=\"" (u/asset "js/app.js" module-id->output-name) "\"></script>
     <script>app.core.init();</script>
   </body>
 </html>"))
-
-(defn -main []
-  (println (render))
-  (shutdown-agents))
diff --git a/src/build/create_manifest.clj b/src/build/create_manifest.clj
@@ -3,24 +3,21 @@
    [jsonista.core :as j]
    [build.util :as u]))
 
-(defn- render []
+(defn render [module-id->output-name]
   (j/write-value-as-string
    {:name "Life counter"
-    :icons [{:src (u/asset "img/icon.svg")
+    :icons [{:src (u/asset "img/icon.svg" module-id->output-name)
              :sizes "any"
              :type "image/svg+xml"}
-            {:src (u/asset "img/icon.svg")
+            {:src (u/asset "img/icon.svg" module-id->output-name)
              :sizes "any"
              :type "image/svg+xml"
              :purpose "maskable"}
-            {:src (u/asset "img/icon_512.png")
+            {:src (u/asset "img/icon_512.png" module-id->output-name)
              :sizes "512x512"
              :type "image/png"
              :purpose "maskable"}]
     :background_color "#121212"
     :theme_color "#121212"
     :display "standalone"
     :start_url "index.html"}))
-
-(defn -main [& _]
-  (println (render)))
diff --git a/src/build/create_worker.clj b/src/build/create_worker.clj
@@ -3,22 +3,19 @@
    [clojure.string :as str]
    [build.util :as u]))
 
-(defn- urls-to-cache []
+(defn- urls-to-cache [module-id->output-name]
   [""
    "index.html"
    "manifest.json"
    "img/icon.svg"
-   (u/asset "js/app.js")
-   (u/asset "css/styles.css")])
+   (u/asset "js/app.js" module-id->output-name)
+   (u/asset "css/styles.css" module-id->output-name)])
 
-(defn- render []
+(defn render [module-id->output-name]
   (str/replace
    (slurp "./resources/private/worker.js")
    #".*prop:urlsToCache.*"
    (str
     "const urlsToCache = ["
-    (str/join "," (mapv #(str "\"" % "\"") (urls-to-cache)))
+    (str/join "," (mapv #(str "\"" % "\"") (urls-to-cache module-id->output-name)))
     "];")))
-
-(defn -main []
-  (println (render)))
diff --git a/src/build/hook.clj b/src/build/hook.clj
@@ -0,0 +1,53 @@
+(ns build.hook
+  (:require
+   [clojure.java.io :as io]
+   [build.create-manifest]
+   [build.create-index]
+   [build.create-worker]
+   [build.util :as u]))
+
+(defn- file->output-name [build-state]
+  (-> (group-by (fn [m]
+                  (str "js/" (m :module-name))) (:shadow.build.closure/modules build-state))
+      (update-vals (fn [coll]
+                     (str "js/" (-> coll first :output-name))))))
+
+(defn- path [s]
+  (java.nio.file.Paths/get s (make-array java.lang.String 0)))
+
+(defn- symlink [link target]
+  (let [link-path (path link)
+        target-rel (.relativize (.getParent link-path)
+                                (path target))]
+    (.mkdirs (.toFile (.getParent link-path)))
+    (java.nio.file.Files/createSymbolicLink link-path target-rel (make-array java.nio.file.attribute.FileAttribute 0))))
+
+(defn- copy [src target]
+  (let [target-f (io/file target)]
+    (.mkdirs (.getParentFile target-f))
+    (io/copy
+     (io/file src)
+     target-f)))
+
+(defn- create-styles [build-mode]
+  (let [src "resources/private/css/styles.css"]
+    (case build-mode
+      :release
+      (let [hash (u/file-hash src)
+            target (str "resources/public/css/styles." hash ".css")]
+        (copy src target)
+        {"css/styles.css" (str "css/styles." hash ".css")})
+      (do
+        (symlink "resources/public/css/styles.css" src)
+        {}))))
+
+(defn hook
+  {:shadow.build/stage :flush}
+  [build-state & _args]
+  (when-not (.exists (io/file "resources/public/worker.js"))
+    (let [outputs (merge (file->output-name build-state)
+                         (create-styles (:shadow.build/mode build-state)))]
+      (spit "resources/public/manifest.json" (build.create-manifest/render outputs))
+      (spit "resources/public/index.html" (build.create-index/render outputs))
+      (spit "resources/public/worker.js" (build.create-worker/render outputs))))
+  build-state)
diff --git a/src/build/util.clj b/src/build/util.clj
@@ -3,25 +3,15 @@
    [clojure.java.io :as io]
    [clojure.edn]))
 
-(def ^:private module-id->output-name (atom nil))
-
-(defn- output-name [module-id]
-  (when module-id
-    (when-not @module-id->output-name
-      (reset!
-       module-id->output-name
-       (into {}
-             (map (juxt :module-id :output-name))
-             (clojure.edn/read-string (slurp (io/resource "public/js/manifest.edn"))))))
-    (when-let [s (@module-id->output-name module-id)]
-      (str "js/" s))))
+(defn- output-name [module-name file->output-name]
+  (file->output-name module-name))
 
 (defn- sha-1 [s]
   (let [c (java.security.MessageDigest/getInstance "sha-1")]
     (.update c (.getBytes s "utf-8"))
-    (.encodeHex (at.favre.lib.bytes.Bytes/wrap (.digest c)))))
+    (reduce (fn [s b] (str s (format "%02x" b))) "" (.digest c))))
 
-(defn- file-hash [f]
+(defn file-hash [f]
   (-> f
       slurp
       sha-1))
@@ -31,13 +21,7 @@
     (file-hash url)
     (throw (ex-info "Asset not found." {:path path}))))
 
-(defn- module-id [path]
-  (-> (re-matches #"^js/(.+)\.js" path)
-      second
-      keyword))
-
-(defn asset [path]
+(defn asset [path module-id->output-name]
   (or
-   (-> (module-id path)
-       output-name)
+   (output-name path module-id->output-name)
    (str path "?v=" (asset-hash path))))