@allurereport/static-server 3.20.1 → 3.21.0

package/README.md

@@ -34,6 +34,8 @@ import { serve } from "@allurereport/static-server";
 const server = await serve({
   // by default uses a random available port
   port: 8080,
+  // by default listens on all interfaces
+  host: "127.0.0.1",
   // path to the directory with files should be served
   servePath: "/path/to/your/static/files",
   // enable live reload

package/dist/index.d.ts

@@ -8,6 +8,7 @@ export type AllureStaticServer = {
 export declare const renderDirectory: (entries: string[], dirPath?: boolean) => Promise<string>;
 export declare const serve: (options?: {
     port?: number;
+    host?: string;
     live?: boolean;
     servePath?: string;
     open?: boolean;

package/dist/index.js

@@ -1,4 +1,5 @@
 import * as console from "node:console";
+import { randomUUID } from "node:crypto";
 import { createReadStream } from "node:fs";
 import { readFile, readdir, stat } from "node:fs/promises";
 import { createServer } from "node:http";
@@ -6,7 +7,7 @@ import { basename, extname, join, resolve } from "node:path";
 import { cwd } from "node:process";
 import watchDirectory from "@allurereport/directory-watcher";
 import openUrl from "open";
-import { TYPES_BY_EXTENSION, identity, injectLiveReloadScript, resolveUrlPathnameUnderServeRoot } from "./utils.js";
+import { TYPES_BY_EXTENSION, identity, injectLiveReloadScript, normalizeHost, resolveServerUrl, resolveUrlPathnameUnderServeRoot, } from "./utils.js";
 export const renderDirectory = async (entries, dirPath) => {
     const links = [];
     const files = [];
@@ -49,8 +50,12 @@ export const renderDirectory = async (entries, dirPath) => {
 };
 export const serve = async (options) => {
     const { port, live = false, servePath, open = false } = options ?? {};
+    const host = normalizeHost(options?.host);
     const pathToServe = servePath ? resolve(cwd(), servePath) : cwd();
     const clients = new Set();
+    const instanceId = randomUUID();
+    let reloadsCount = 0;
+    const currentReloadId = () => `${instanceId}:${reloadsCount}`;
     const server = createServer(async (req, res) => {
         const hostHeaderIdx = req.rawHeaders.findIndex((header) => header === "Host") + 1;
         const host = req.rawHeaders[hostHeaderIdx];
@@ -66,6 +71,7 @@ export const serve = async (options) => {
             req.on("close", () => {
                 clients.delete(res);
             });
+            res.write(`event: sync\ndata: ${currentReloadId()}\n\n`);
             return;
         }
         const resolvedPublic = resolveUrlPathnameUnderServeRoot(pathToServe, pathname);
@@ -101,7 +107,7 @@ export const serve = async (options) => {
             }
             else {
                 const html = await renderDirectory(files.map((file) => resolve(fsPath, file)), pathname !== "/");
-                const htmlContent = injectLiveReloadScript(html);
+                const htmlContent = injectLiveReloadScript(html, currentReloadId());
                 const byteLength = Buffer.byteLength(htmlContent);
                 res.writeHead(200, {
                     "Content-Type": "text/html",
@@ -115,7 +121,7 @@ export const serve = async (options) => {
         const contentType = TYPES_BY_EXTENSION[fileExtension] ?? "application/octet-stream";
         if (contentType === "text/html" && !query.has("attachment")) {
             const html = await readFile(fsPath, "utf-8");
-            const htmlContent = injectLiveReloadScript(html);
+            const htmlContent = injectLiveReloadScript(html, currentReloadId());
             const byteLength = Buffer.byteLength(htmlContent);
             res.writeHead(200, {
                 "Content-Type": contentType,
@@ -133,12 +139,16 @@ export const serve = async (options) => {
             .on("close", () => res.end());
     });
     const triggerReload = () => {
+        reloadsCount += 1;
+        const message = `id: ${currentReloadId()}\ndata: reload\n\n`;
         clients.forEach((client) => {
-            client.write("data: reload\n\n");
+            client.write(message);
         });
     };
-    const serverPort = await new Promise((res) => {
-        server.listen(port, () => {
+    const serverPort = await new Promise((res, rej) => {
+        server.once("error", rej);
+        server.listen(port, host, () => {
+            server.off("error", rej);
             const address = server.address();
             if (!address || typeof address === "string") {
                 throw new Error("could not start a server: invalid server address is returned");
@@ -151,19 +161,20 @@ export const serve = async (options) => {
             ignoreInitial: true,
         })
         : identity;
-    console.info(`Allure is running on http://localhost:${serverPort}`);
+    const serverUrl = resolveServerUrl(host, serverPort);
+    console.info(`Allure is running on ${serverUrl}`);
     if (open) {
-        openUrl(`http://localhost:${serverPort}`);
+        openUrl(serverUrl);
     }
     return {
-        url: `http://localhost:${serverPort}`,
+        url: serverUrl,
         port: serverPort,
         reload: async () => {
             triggerReload();
         },
         open: async (url) => {
             if (url.startsWith("/")) {
-                await openUrl(new URL(url, `http://localhost:${serverPort}`).toString());
+                await openUrl(new URL(url, serverUrl).toString());
                 return;
             }
             await openUrl(url);

package/dist/utils.d.ts

@@ -1,5 +1,7 @@
 export declare const EXTENSIONS_BY_TYPE: Record<string, string>;
 export declare const TYPES_BY_EXTENSION: Record<string, string>;
 export declare const identity: <T>(value?: T) => T | undefined;
-export declare const injectLiveReloadScript: (html: string) => string;
+export declare const normalizeHost: (host: string | undefined) => string | undefined;
+export declare const resolveServerUrl: (host: string | undefined, port: number) => string;
+export declare const injectLiveReloadScript: (html: string, reloadId: string) => string;
 export declare function resolveUrlPathnameUnderServeRoot(rootDir: string, urlPathname: string): string | null;

package/dist/utils.js

@@ -899,24 +899,71 @@ export const EXTENSIONS_BY_TYPE = {
 };
 export const TYPES_BY_EXTENSION = Object.fromEntries(Object.entries(EXTENSIONS_BY_TYPE).map(([type, extension]) => [extension, type]));
 export const identity = (value) => value;
-export const injectLiveReloadScript = (html) => {
+const WILDCARD_HOSTS = new Set(["0.0.0.0", "::"]);
+export const normalizeHost = (host) => {
+    const trimmed = host?.trim().replace(/^\[(.*)\]$/, "$1");
+    return trimmed || undefined;
+};
+export const resolveServerUrl = (host, port) => {
+    const normalizedHost = normalizeHost(host);
+    const linkHost = !normalizedHost || WILDCARD_HOSTS.has(normalizedHost) ? "localhost" : normalizedHost;
+    return `http://${linkHost.includes(":") ? `[${linkHost}]` : linkHost}:${port}`;
+};
+export const injectLiveReloadScript = (html, reloadId) => {
     const liveReloadScript = `
     <script>
-      const eventSource = new EventSource("/__live_reload");
-      
-      eventSource.onmessage = () => {
-        const newHash = Math.random().toString(36).slice(2, 10);
-        const reload = () => window.location.reload();
-        
-        window.localStorage.setItem("${ALLURE_LIVE_RELOAD_HASH_STORAGE_KEY}", newHash);
+      (() => {
+        // every opened page would keep a permanent connection to the server and browsers limit the number of them per host,
+        // so the connection is closed while the page is hidden and the reloads missed in the meantime are caught up on return
+        let eventSource;
+        let lastReloadId = ${JSON.stringify(reloadId)};
 
-        if (typeof window.__allureLiveReload !== "function") {
-          reload();
-          return;
-        }
+        const applyReload = () => {
+          const newHash = Math.random().toString(36).slice(2, 10);
+          const reload = () => window.location.reload();
+
+          window.localStorage.setItem("${ALLURE_LIVE_RELOAD_HASH_STORAGE_KEY}", newHash);
+
+          if (typeof window.__allureLiveReload !== "function") {
+            reload();
+            return;
+          }
 
-        Promise.resolve(window.__allureLiveReload()).catch(reload);
-      };
+          Promise.resolve(window.__allureLiveReload()).catch(reload);
+        };
+        const connect = () => {
+          eventSource = new EventSource("/__live_reload");
+
+          eventSource.onmessage = (event) => {
+            lastReloadId = event.lastEventId;
+            applyReload();
+          };
+          eventSource.addEventListener("sync", (event) => {
+            if (lastReloadId === event.data) {
+              return;
+            }
+
+            lastReloadId = event.data;
+            applyReload();
+          });
+        };
+        const disconnect = () => {
+          eventSource?.close();
+          eventSource = undefined;
+        };
+
+        document.addEventListener("visibilitychange", () => {
+          if (document.hidden) {
+            disconnect();
+          } else if (!eventSource) {
+            connect();
+          }
+        });
+
+        if (!document.hidden) {
+          connect();
+        }
+      })();
     </script>
   `;
     return html.replace("</body>", `${liveReloadScript}</body>`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@allurereport/static-server",
-  "version": "3.20.1",
+  "version": "3.21.0",
   "description": "Minimalistic web-server for serving static files",
   "keywords": [
     "allure",
@@ -32,12 +32,14 @@
     "lint:fix": "oxlint --import-plugin --fix src test features stories"
   },
   "dependencies": {
-    "@allurereport/directory-watcher": "3.20.1",
+    "@allurereport/directory-watcher": "3.21.0",
     "open": "^11.0.0"
   },
   "devDependencies": {
+    "@allurereport/test-config": "3.21.0",
     "@playwright/test": "^1.62.1",
     "@types/node": "^20",
+    "@vitest/coverage-istanbul": "^4.1.0",
     "@vitest/runner": "^2",
     "@vitest/snapshot": "^5.0.1",
     "allure-js-commons": "^3",