@rollup-extras/plugin-serve 2.2.0 → 2.3.0

package/README.md

@@ -122,6 +122,18 @@ Optional, `(server: Server) => void | true`
 
 Extension point after the server is live. Please return true to suppress the default banner.
 
+### liveReload
+
+Optional, `boolean`, default: `false`.
+
+> **Note:** Live reload is currently disabled by default. Set to `true` to opt in.
+
+When enabled and Rollup is running in watch mode, the plugin exposes a Server-Sent Events endpoint at `/__livereload` and injects a tiny client script into every served `text/html` response. After each rebuild the server broadcasts a `reload` event that triggers `location.reload()` in the browser.
+
+Injection happens uniformly for in-memory HTML, disk-served HTML (via `dirs`), and any HTML returned by routes registered in `customize`. Non-HTML responses are left unchanged.
+
+Set to `false` (or leave unset) to disable both the endpoint and the script injection.
+
 ## In-Memory Serving
 
 ```javascript
@@ -153,6 +165,7 @@ type ServePluginOptions = {
     pluginName?: string;
     useWriteBundle?: boolean;
     inMemory?: boolean;
+    liveReload?: boolean;
     dirs?: string | string[];
     port?: number;
     useLogger?: boolean;

package/exports.d.ts

@@ -8,6 +8,20 @@ export type ServePluginOptionsObject = {
     pluginName?: string;
     useWriteBundle?: boolean;
     inMemory?: boolean;
+    /**
+     * Enable live reload over Server-Sent Events. Defaults to `false`.
+     *
+     * Live reload is currently disabled by default. Set to `true` to opt in.
+     *
+     * When enabled and Rollup is running in watch mode, a small client script
+     * is injected into every served `text/html` response and subscribes to an
+     * SSE endpoint at `/__livereload`. After every rebuild the server
+     * broadcasts a `reload` event that triggers `location.reload()` in the
+     * browser.
+     *
+     * Set to `false` (or leave unset) to disable injection and the SSE endpoint.
+     */
+    liveReload?: boolean;
     dirs?: string | string[];
     port?: number;
     useLogger?: boolean;

package/index.d.ts

@@ -7,6 +7,20 @@ declare module '@rollup-extras/plugin-serve' {
 		pluginName?: string;
 		useWriteBundle?: boolean;
 		inMemory?: boolean;
+		/**
+		 * Enable live reload over Server-Sent Events. Defaults to `false`.
+		 *
+		 * Live reload is currently disabled by default. Set to `true` to opt in.
+		 *
+		 * When enabled and Rollup is running in watch mode, a small client script
+		 * is injected into every served `text/html` response and subscribes to an
+		 * SSE endpoint at `/__livereload`. After every rebuild the server
+		 * broadcasts a `reload` event that triggers `location.reload()` in the
+		 * browser.
+		 *
+		 * Set to `false` (or leave unset) to disable injection and the SSE endpoint.
+		 */
+		liveReload?: boolean;
 		dirs?: string | string[];
 		port?: number;
 		useLogger?: boolean;

package/index.js

@@ -11,8 +11,12 @@ import logger from '@rollup-extras/utils/logger';
 import { multiConfigPluginBase } from '@rollup-extras/utils/multi-config-plugin-base';
 import { getOptions } from '@rollup-extras/utils/options';
 
+import { createLiveReload } from './livereload.js';
+
 let globalServer;
 
+let globalLiveReload;
+
 const factories = { logger };
 
 export default function (options = {}) {
@@ -23,11 +27,13 @@ export default function (options = {}) {
             useWriteBundle: true,
             port: 8080,
             useLogger: true,
+            liveReload: false,
         },
         'dirs',
         factories
     );
-    const { pluginName, port, host, https, useLogger, customize, staticOptions, onListen, logger, inMemory } = normalizedOptions;
+    const { pluginName, port, host, https, useLogger, customize, staticOptions, onListen, logger, inMemory, liveReload } =
+        normalizedOptions;
     const useWriteBundle = inMemory ? false : normalizedOptions.useWriteBundle;
     const instance = inMemory
         ? multiConfigPluginBase(useWriteBundle, pluginName, serve, captureOutput)
@@ -88,54 +94,68 @@ export default function (options = {}) {
     }
 
     async function serve() {
-        if (!started && watchMode) {
-            started = true;
-
-            if (globalServer) {
-                await new Promise(resolve =>  (globalServer).close(resolve));
-                globalServer = undefined;
+        if (!watchMode) {
+            return;
+        }
+        if (started) {
+            if (liveReload) {
+                globalLiveReload?.broadcast('reload');
             }
+            return;
+        }
+        started = true;
 
-            const app = new Hono();
+        if (globalServer) {
+            globalLiveReload?.close();
+            globalLiveReload = undefined;
+            await new Promise(resolve =>  (globalServer).close(resolve));
+            globalServer = undefined;
+        }
 
-            if (customize) {
-                customize(app);
-            }
+        const app = new Hono();
 
-            if (useLogger) {
-                app.use('*', honoLogger());
-            }
+        if (customize) {
+            customize(app);
+        }
 
-            if (inMemory) {
-                app.use('*', inMemoryMiddleware(memoryFiles));
-            }
+        if (liveReload) {
+            globalLiveReload = createLiveReload();
+            globalLiveReload.register(app);
+        }
 
-            for (const dir of  (dirs)) {
-                app.use('*', serveStatic({ root: dir, ...staticOptions }));
-            }
+        if (useLogger) {
+            app.use('*', honoLogger());
+        }
 
-            const server = createAdaptorServer({
-                fetch: app.fetch,
-                ...(https ? { createServer: createHttpsServer, serverOptions: https } : {}),
-            });
-            globalServer = server;
+        if (inMemory) {
+            app.use('*', inMemoryMiddleware(memoryFiles));
+        }
 
-            const listenCb = () => internalOnListen(server);
+        for (const dir of  (dirs)) {
+            app.use('*', serveStatic({ root: dir, ...staticOptions }));
+        }
 
-            if (host) {
-                server.listen(port, host, listenCb);
-            } else {
-                server.listen(port, listenCb);
-            }
+        const server = createAdaptorServer({
+            fetch: app.fetch,
+            ...(https ? { createServer: createHttpsServer, serverOptions: https } : {}),
+        });
+        globalServer = server;
+
+        const listenCb = () => internalOnListen(server);
 
-            server.on('error', ( e) => {
-                if (e.code === 'EADDRINUSE') {
-                    logger.finish('address in use, please try another port', LogLevel.error);
-                } else {
-                    throw e;
-                }
-            });
+        if (host) {
+            server.listen(port, host, listenCb);
+        } else {
+            server.listen(port, listenCb);
         }
+
+        server.on('error', ( e) => {
+            if (e.code === 'EADDRINUSE') {
+                logger.finish('address in use, please try another port', LogLevel.error);
+            } else {
+                throw e;
+            }
+        });
     }
 
     function internalOnListen(server) {

package/livereload.js

@@ -0,0 +1,90 @@
+import { streamSSE } from 'hono/streaming';
+
+const ENDPOINT = '/__livereload';
+const KEEPALIVE_MS = 25000;
+
+const CLIENT_SCRIPT = `<script>(function(){try{var es=new EventSource(${JSON.stringify(ENDPOINT)});es.addEventListener('reload',function(){location.reload();});}catch(e){}})();</script>`;
+
+export function createLiveReload() {
+
+    const clients = new Set();
+    let closed = false;
+
+    return { register, broadcast, close };
+
+    function register(app) {
+        app.get(ENDPOINT, c => {
+            return streamSSE(c, async stream => {
+                clients.add(stream);
+                stream.onAbort(() => {
+                    clients.delete(stream);
+                });
+                while (!closed && !stream.aborted && !stream.closed) {
+                    await new Promise(res => setTimeout(res, KEEPALIVE_MS));
+                    if (closed || stream.aborted || stream.closed) break;
+                    try {
+                        await stream.writeSSE({ event: 'ping', data: '' });
+                    } catch {
+                        break;
+                    }
+                }
+                clients.delete(stream);
+            });
+        });
+
+        app.use('*', async (c, next) => {
+            await next();
+            const res = c.res;
+            if (!res) return;
+            const contentType = res.headers.get('content-type') || '';
+            if (!contentType.toLowerCase().includes('text/html')) return;
+            let body;
+            try {
+                body = await res.text();
+            } catch {
+                return;
+            }
+            const injected = inject(body);
+            res.headers.delete('content-length');
+            c.res = new Response(injected, {
+                status: res.status,
+                statusText: res.statusText,
+                headers: { 'content-length': String(Buffer.byteLength(injected)) },
+            });
+        });
+    }
+
+    function broadcast(event) {
+        for (const stream of clients) {
+            try {
+                stream.writeSSE({ event, data: '' });
+            } catch {
+                clients.delete(stream);
+            }
+        }
+    }
+
+    function close() {
+        closed = true;
+        for (const stream of clients) {
+            try {
+                stream.close();
+            } catch {
+
+            }
+        }
+        clients.clear();
+    }
+}
+
+function inject(html) {
+    if (html.includes(ENDPOINT)) {
+        return html;
+    }
+    const match = html.match(/<\/body\s*>/i);
+    if (match) {
+        const idx =  (match.index);
+        return html.slice(0, idx) + CLIENT_SCRIPT + html.slice(idx);
+    }
+    return html + CLIENT_SCRIPT;
+}

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.2.0",
+  "version": "2.3.0",
   "license": "MIT",
   "name": "@rollup-extras/plugin-serve",
   "author": "Konstantin Shutkin",