Avoid stale JavaScript caching

Author: Erikvv

frontend/package-lock.json

@@ -26,7 +26,7 @@
     "antd": "^5.11.3",
     "bootstrap": "5.3.3",
     "jest-environment-jsdom": "^29.6.3",
-    "joshi": "file:../build/js/packages/zero-joshi",
+    "joshi": "file:../build/js/packages/zeroweb-joshi",
     "leaflet": "^1.9.4",
     "lodash": "^4.17.21",
     "memoize-immutable": "^3.0.0",
@@ -44,7 +44,7 @@
     "react-use-promise": "^0.5.0",
     "typescript": "^5.1.6",
     "web-vitals": "^2.1.4",
-    "zero-zummon": "file:../build/js/packages/zero-zummon"
+    "zero-zummon": "file:../build/js/packages/zeroweb-zummon"
   },
   "scripts": {
     "start": "vite --host 0.0.0.0",

frontend/package.json

@@ -1,5 +1,9 @@
 import {defineConfig} from "vite"
 import react from "@vitejs/plugin-react"
+import {execSync} from "child_process"
+
+// Put hash in file name so that the users don't get stale JS from their browser cache.
+const treeHash = execSync("git rev-parse HEAD:frontend").toString().trim().slice(0, 4)
 
 export default defineConfig({
     plugins: [react({ jsxImportSource: '@emotion/react' })],
@@ -8,12 +12,13 @@ export default defineConfig({
         port: 3000,
     },
     build: {
-        minify: false,
+        // minify: false,
         rollupOptions: {
+            // Tree shaking seems too aggressive on the KotlinJS code
             treeshake: false,
             output: {
-                entryFileNames: "[name].js",
-                assetFileNames: '[name].css',
+                entryFileNames: `[name].${treeHash}.js`,
+                assetFileNames: `[name].${treeHash}.css`,
             },
         },
     },