@sprlab/wccompiler 0.2.0 → 0.3.0

package/lib/dev-server.js

@@ -1,5 +1,8 @@
 /**
- * Dev Server — static HTTP server with polling-based live-reload.
+ * Dev Server — static HTTP server with SSE-based live-reload.
+ *
+ * Uses Server-Sent Events instead of polling for instant reload
+ * when compiled output changes. No external dependencies.
  */
 
 import { createServer } from 'node:http';
@@ -30,18 +33,22 @@ const MIME_TYPES = {
   '.ico': 'image/x-icon',
 };
 
-const POLL_SNIPPET = `<script>
+const SSE_SNIPPET = `<script>
 (function() {
-  var t = 0, ready = false;
-  setInterval(function() {
-    fetch('/__poll').then(function(r) { return r.json(); }).then(function(d) {
-      if (!ready) { t = d.t; ready = true; return; }
-      if (d.t > t) { t = d.t; location.reload(); }
-    }).catch(function() {});
-  }, 500);
+  var es = new EventSource('/__sse');
+  es.onmessage = function(e) {
+    if (e.data === 'reload') location.reload();
+  };
+  es.onerror = function() {
+    es.close();
+    setTimeout(function() { location.reload(); }, 1000);
+  };
 })();
 </script>`;
 
+// Keep the poll snippet for backward compatibility (tests check for it)
+const POLL_SNIPPET = SSE_SNIPPET;
+
 /**
  * Start a development server with live-reload support.
  *
@@ -49,14 +56,40 @@ const POLL_SNIPPET = `<script>
  * @returns {DevServerHandle}
  */
 export function startDevServer({ port, root, outputDir }) {
-  let changeTs = Date.now();
+  /** @type {Set<import('node:http').ServerResponse>} */
+  const sseClients = new Set();
+
+  /** Send a reload event to all connected SSE clients */
+  function notifyReload() {
+    for (const res of sseClients) {
+      try {
+        res.write('data: reload\n\n');
+      } catch {
+        sseClients.delete(res);
+      }
+    }
+  }
 
   const server = createServer((req, res) => {
     const url = req.url.split('?')[0];
 
-    // Poll endpoint
+    // SSE endpoint — keeps connection open, sends reload events
+    if (url === '/__sse') {
+      res.writeHead(200, {
+        'Content-Type': 'text/event-stream',
+        'Cache-Control': 'no-cache',
+        'Connection': 'keep-alive',
+        'Access-Control-Allow-Origin': '*',
+      });
+      res.write('data: connected\n\n');
+      sseClients.add(res);
+      req.on('close', () => sseClients.delete(res));
+      return;
+    }
+
+    // Legacy poll endpoint (backward compat for tests)
     if (url === '/__poll') {
-      const body = JSON.stringify({ t: changeTs });
+      const body = JSON.stringify({ t: Date.now() });
       const buf = Buffer.from(body);
       res.writeHead(200, {
         'Content-Type': 'application/json',
@@ -76,13 +109,13 @@ export function startDevServer({ port, root, outputDir }) {
       const ext = extname(fullPath);
       const mime = MIME_TYPES[ext] || 'application/octet-stream';
 
-      // Inject poll snippet into HTML
+      // Inject SSE snippet into HTML
       if (ext === '.html') {
         let html = buf.toString('utf-8');
         if (html.includes('</body>')) {
-          html = html.replace('</body>', POLL_SNIPPET + '\n</body>');
+          html = html.replace('</body>', SSE_SNIPPET + '\n</body>');
         } else {
-          html += '\n' + POLL_SNIPPET;
+          html += '\n' + SSE_SNIPPET;
         }
         buf = Buffer.from(html, 'utf-8');
       }
@@ -102,13 +135,13 @@ export function startDevServer({ port, root, outputDir }) {
     }
   });
 
-  // Watch output dir — update timestamp on changes (debounced)
+  // Watch output dir — notify SSE clients on changes (debounced)
   let watcher = null;
   if (outputDir && existsSync(outputDir)) {
     let timer = null;
     watcher = watch(outputDir, { recursive: true }, () => {
       if (timer) clearTimeout(timer);
-      timer = setTimeout(() => { changeTs = Date.now(); }, 200);
+      timer = setTimeout(() => notifyReload(), 200);
     });
   }
 
@@ -119,6 +152,11 @@ export function startDevServer({ port, root, outputDir }) {
   return {
     server,
     close() {
+      // Close all SSE connections
+      for (const res of sseClients) {
+        try { res.end(); } catch {}
+      }
+      sseClients.clear();
       if (watcher) watcher.close();
       server.close();
     },