Hot reloading

NEWS.md

@@ -2,6 +2,8 @@
 
 ## future release
 
+* Hot reloading now only reloads the survey, not the whole page.
+
 ## 0.3.2
 
 * Moved building code to a .ts file.

velesresearch/website_template/package.json

@@ -13,6 +13,7 @@
     "chokidar": "^4.0.1",
     "esbuild": "^0.24.0",
     "hono": "^4.6.5",
+    "loadjs": "^4.3.0",
     "mustache": "^4.2.0"
   },
   "peerDependencies": {

velesresearch/website_template/public/reload.js

@@ -2,11 +2,11 @@ const ws = new WebSocket('ws://localhost:8080');
 
 ws.onmessage = (event) => {
     if (event.data === 'reload') {
-        console.log('Reloading page due to file change...');
-        window.location.reload();  // Reload the page when the server signals a change
+        console.log('Reloading the survey due to file change...');
+        loadjs(`main.js?t=${new Date().getTime()}`)
     }
 };
 
 ws.onopen = () => {
-    console.log('WebSocket connection established');
+    console.log('WebSocket connection for hot reloading established');
 };

velesresearch/website_template/server.ts

@@ -49,6 +49,10 @@ app.get('/reload.js', (c) => {
     const jsContent = readFileSync('./public/reload.js', 'utf-8');
     return c.text(jsContent, 200, { "Content-Type": "application/javascript" });
 })
+app.get("/load.js", (c) => {
+    const jsContent = readFileSync('./node_modules/loadjs/dist/loadjs.min.js', 'utf-8');
+    return c.text(jsContent, 200, { "Content-Type": "application/javascript" });
+})
 
 app.post("/submit/", async (c) => {
     const data = await c.req.json()