feat: add shadow-cljs build hooks

Dockerfile

@@ -9,7 +9,6 @@ COPY package* /app/
 RUN npm install
 
 COPY . /app
-RUN npm run build
 RUN clojure -M:frontend release tubo
 
 FROM clojure:tools-deps

README

@@ -17,7 +17,6 @@ To bundle the whole project into a self-contained uber-jar you need to follow th
 
 #+begin_src sh
 npm i
-npm run build
 clojure -T:frontend:build uberjar
 #+end_src
 

deps.edn

@@ -18,7 +18,7 @@
  {:build {:deps       {io.github.clojure/tools.build {:mvn/version "0.9.4"}}
           :ns-default build}
   :frontend
-  {:extra-paths ["src/frontend"]
+  {:extra-paths ["src/frontend" "src/shared" "env/dev"]
    :extra-deps  {thheller/shadow-cljs          {:mvn/version "2.28.20"}
                  cider/cider-nrepl             {:mvn/version "0.28.4"}
                  metosin/reitit-frontend       {:mvn/version "0.5.18"}
@@ -31,6 +31,9 @@
                  nano-id/nano-id               {:mvn/version "1.1.0"}
                  com.github.scopews/svgreq     {:mvn/version "1.1.0"}
                  funcool/promesa               {:mvn/version "11.0.678"}
-                 re-promise/re-promise         {:mvn/version "0.1.1"}}
+                 re-promise/re-promise         {:mvn/version "0.1.1"}
+                 babashka/process              {:mvn/version "0.5.22"}
+                 babashka/fs                   {:mvn/version "0.5.23"}
+                 day8/shadow-git-inject        {:mvn/version "0.0.5"}}
    :main-opts   ["-m" "shadow.cljs.devtools.cli"]}
   :run {:main-opts ["-m" "tubo.core"]}}}

env/dev/hooks.clj

@@ -0,0 +1,30 @@
+(ns hooks
+  (:require
+   [babashka.fs :as fs]
+   [babashka.process :as proc]))
+
+(defn copy-assets
+  {:shadow.build/stage :configure}
+  [build-state {:keys [public-dir assets]}]
+  (doseq [[src dest] assets]
+    ((if (fs/directory? src) fs/copy-tree fs/copy)
+     src
+     (str public-dir "/" dest)
+     {:replace-existing true
+      :copy-attributes  true
+      :nofollow-links   true}))
+  build-state)
+
+(defn webpack-watch
+  {:shadow.build/stage :configure}
+  [build-state]
+  (proc/process {:extra-env {"NODE_ENV" "development"} :out *out* :err :out}
+                "./node_modules/.bin/webpack --watch")
+  build-state)
+
+(defn webpack-release
+  {:shadow.build/stage :configure}
+  [build-state]
+  (proc/shell {:extra-env {"NODE_ENV" "production"}}
+              "./node_modules/.bin/webpack")
+  build-state)

package-lock.json

@@ -17,8 +17,6 @@
         "@fontsource/nunito-sans": "^5.0.12",
         "@tailwindcss/forms": "^0.5.4",
         "autoprefixer": "^10.4.15",
-        "copy-webpack-plugin": "^11.0.0",
-        "cross-env": "^7.0.3",
         "css-loader": "^6.8.1",
         "cssnano": "^6.0.1",
         "mini-css-extract-plugin": "^2.7.6",
@@ -1119,30 +1117,6 @@
       "integrity": "sha512-xFxOwqIzR/e1k1gLiWEophSCMqXcwVHIH7akf7b/vxcUeGunlj3hvZaaqxwHsTgn+IndtkQJgSztIDWeumWJDQ==",
       "dev": true
     },
-    "node_modules/copy-webpack-plugin": {
-      "version": "11.0.0",
-      "resolved": "https://registry.npmjs.org/copy-webpack-plugin/-/copy-webpack-plugin-11.0.0.tgz",
-      "integrity": "sha512-fX2MWpamkW0hZxMEg0+mYnA40LTosOSa5TqZ9GYIBzyJa9C3QUaMPSE2xAi/buNr8u89SfD9wHSQVBzrRa/SOQ==",
-      "dev": true,
-      "dependencies": {
-        "fast-glob": "^3.2.11",
-        "glob-parent": "^6.0.1",
-        "globby": "^13.1.1",
-        "normalize-path": "^3.0.0",
-        "schema-utils": "^4.0.0",
-        "serialize-javascript": "^6.0.0"
-      },
-      "engines": {
-        "node": ">= 14.15.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/webpack"
-      },
-      "peerDependencies": {
-        "webpack": "^5.1.0"
-      }
-    },
     "node_modules/core-util-is": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
@@ -1218,24 +1192,6 @@
         "sha.js": "^2.4.8"
       }
     },
-    "node_modules/cross-env": {
-      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-7.0.3.tgz",
-      "integrity": "sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==",
-      "dev": true,
-      "dependencies": {
-        "cross-spawn": "^7.0.1"
-      },
-      "bin": {
-        "cross-env": "src/bin/cross-env.js",
-        "cross-env-shell": "src/bin/cross-env-shell.js"
-      },
-      "engines": {
-        "node": ">=10.14",
-        "npm": ">=6",
-        "yarn": ">=1"
-      }
-    },
     "node_modules/cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -1553,18 +1509,6 @@
       "integrity": "sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA==",
       "dev": true
     },
-    "node_modules/dir-glob": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
-      "integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==",
-      "dev": true,
-      "dependencies": {
-        "path-type": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/dlv": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
@@ -2037,25 +1981,6 @@
       "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==",
       "dev": true
     },
-    "node_modules/globby": {
-      "version": "13.2.2",
-      "resolved": "https://registry.npmjs.org/globby/-/globby-13.2.2.tgz",
-      "integrity": "sha512-Y1zNGV+pzQdh7H39l9zgB4PJqjRNqydvdYCDG4HFXM4XuvSaQQlEc91IU1yALL8gUTDomgBAfz3XJdmUS+oo0w==",
-      "dev": true,
-      "dependencies": {
-        "dir-glob": "^3.0.1",
-        "fast-glob": "^3.3.0",
-        "ignore": "^5.2.4",
-        "merge2": "^1.4.1",
-        "slash": "^4.0.0"
-      },
-      "engines": {
-        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/gopd": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
@@ -2218,15 +2143,6 @@
         }
       ]
     },
-    "node_modules/ignore": {
-      "version": "5.3.1",
-      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.1.tgz",
-      "integrity": "sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==",
-      "dev": true,
-      "engines": {
-        "node": ">= 4"
-      }
-    },
     "node_modules/immutable": {
       "version": "4.3.6",
       "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.6.tgz",
@@ -4298,18 +4214,6 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/slash": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/slash/-/slash-4.0.0.tgz",
-      "integrity": "sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==",
-      "dev": true,
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/source-map": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",

package.json

@@ -1,9 +1,4 @@
 {
-  "scripts": {
-    "start": "webpack --watch --mode development",
-    "dev": "webpack --mode development",
-    "build": "webpack --mode production"
-  },
   "dependencies": {
     "@fortawesome/fontawesome-free": "^6.4.2",
     "hls-video-element": "^1.2.11",
@@ -17,8 +12,6 @@
     "@fontsource/nunito-sans": "^5.0.12",
     "@tailwindcss/forms": "^0.5.4",
     "autoprefixer": "^10.4.15",
-    "copy-webpack-plugin": "^11.0.0",
-    "cross-env": "^7.0.3",
     "css-loader": "^6.8.1",
     "cssnano": "^6.0.1",
     "mini-css-extract-plugin": "^2.7.6",

shadow-cljs.edn

@@ -3,10 +3,20 @@
                   :proxy-url "http://localhost:3000"}}
  :builds
  {:tubo
-  {:target     :browser
-   :output-dir "resources/public/js"
-   :asset-path "/js"
-   :js-options {:entry-keys        ["module" "browser" "main"]
-                :export-conditions ["import" "module" "browser" "require"
-                                    "default"]}
-   :modules    {:main {:init-fn tubo.core/init}}}}}
+  {:target           :browser
+   :asset-path       "/js"
+   :output-dir       "resources/public/js"
+   :git-inject       {:version-pattern "^(.*)$"}
+   :build-hooks      [(shadow-git-inject.core/hook)
+                      (hooks/copy-assets
+                       {:public-dir "resources/public"
+                        :assets     {"resources/src/icons"      "icons"
+                                     "resources/src/index.html" "index.html"}})]
+   :dev              {:build-hooks [(hooks/webpack-watch)]}
+   :release          {:build-hooks [(hooks/webpack-release)]}
+   :compiler-options {:closure-defines {tubo.utils/version
+                                        :shadow-git-inject/version}}
+   :js-options       {:entry-keys        ["module" "browser" "main"]
+                      :export-conditions ["import" "module" "browser" "require"
+                                          "default"]}
+   :modules          {:main {:init-fn tubo.core/init}}}}}

webpack.config.js

@@ -1,7 +1,6 @@
 const path = require("path");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 const RemoveEmptyScriptsPlugin = require("webpack-remove-empty-scripts");
-const CopyPlugin = require("copy-webpack-plugin");
 
 module.exports = {
   mode: process.env.NODE_ENV,
@@ -16,18 +15,6 @@ module.exports = {
     new MiniCssExtractPlugin({
       filename: "styles/[name].css",
     }),
-    new CopyPlugin({
-      patterns: [
-        {
-          from: path.resolve(__dirname, "resources/src/icons"),
-          to: "icons",
-        },
-        {
-          from: path.resolve(__dirname, "resources/src/index.html"),
-          to: "index.html",
-        },
-      ],
-    }),
   ],
   module: {
     rules: [