0.3.2

NEWS.md

@@ -2,6 +2,12 @@
 
 ## future release
 
+## 0.3.2
+
+* Moved building code to a .ts file.
+* Extensively changed the development server so building now happens only when invoked by the user and the window reloads automatically when the survey is updated.
+* The node_modules folder is not copied even if it exists in the website_template folder for any reason.
+
 ## 0.3.0
 
 * Added a functional `index.css` file.

velesresearch/models.py

@@ -980,6 +980,8 @@ def build(self, path: str | Path = os.getcwd(), folderName: str = "survey"):
         # main file structure
         if not os.path.exists(path / "package.json"):
             template = str(files("velesresearch.website_template"))
+            if "node_modules" in template:
+                template.remove("node_modules")
             shutil.copytree(
                 template,
                 path,

velesresearch/website_template/package.json

@@ -10,6 +10,7 @@
     "@types/react": "^18.3.11",
     "@types/react-dom": "^18.3.1",
     "@types/showdown": "^2.0.6",
+    "chokidar": "^4.0.1",
     "esbuild": "^0.24.0",
     "hono": "^4.6.5",
     "mustache": "^4.2.0"

velesresearch/website_template/public/index.html

@@ -6,6 +6,7 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <script id="recaptchaScript" src="https://www.google.com/recaptcha/api.js?render={{ RECAPTCHA_SITE_KEY }}"></script>
+  <script src="reload.js"></script>
   <script type="module" src="/main.js"></script>
   <style>
     #tryAgainButton {

velesresearch/website_template/public/reload.js

@@ -0,0 +1,12 @@
+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
+    }
+};
+
+ws.onopen = () => {
+    console.log('WebSocket connection established');
+};

velesresearch/website_template/server.ts

@@ -1,7 +1,8 @@
 import { Hono } from 'hono'
 import { readFileSync } from 'fs';
 import Mustache from 'mustache';
-import buildMain from './build.ts';
+import chokidar from 'chokidar';
+import type { ServerWebSocket } from 'bun';
 const recaptchaKeys = require("./recaptchaKeys.json");
 
 async function createResults(req: any) {
@@ -41,8 +42,11 @@ app.get('/', (c) => {
     return c.html(Mustache.render(templateContent, { "RECAPTCHA_SITE_KEY": recaptchaKeys.RECAPTCHA_SITE_KEY }), 200)
 })
 app.get('/main.js', async (c) => {
-    await buildMain();
-    const jsContent = await readFileSync('./build/main.js', 'utf-8');
+    const jsContent = readFileSync('./build/main.js', 'utf-8');
+    return c.text(jsContent, 200, { "Content-Type": "application/javascript" });
+})
+app.get('/reload.js', (c) => {
+    const jsContent = readFileSync('./public/reload.js', 'utf-8');
     return c.text(jsContent, 200, { "Content-Type": "application/javascript" });
 })
 
@@ -53,14 +57,40 @@ app.post("/submit/", async (c) => {
 
 export default app;
 
+const clients = new Set<ServerWebSocket<unknown>>();
+
 if (import.meta.main) {
     Bun.serve({
         fetch: app.fetch,
         port: 3000,
         development: true,
     });
+
+    Bun.serve({
+        fetch(req, server) {
+            const success = server.upgrade(req);
+            if (success) return undefined;
+            return new Response("WebSocket server", { status: 200 })
+        },
+        port: 8080,
+        websocket: {
+            message(ws, message) { },
+            open(ws) { clients.add(ws) },
+            close(ws) { clients.delete(ws) },
+        }
+    })
     console.log(`Welcome to \x1b[1mVeles\x1b[0m!`);
     console.log(`Listening on:\n`);
     console.log(`\x1b[1;38;2;25;179;148mhttp://localhost:3000\x1b[0m`);
     console.log("\nPress Ctrl+C to stop the server...");
+
+    const watcher = chokidar.watch('./build/main.js');
+    watcher.on('change', () => {
+        clients.forEach(client => {
+            if (client.readyState === WebSocket.OPEN) {
+                client.send('reload');
+                console.log("main.js changed, reloading...");
+            }
+        });
+    });
 }