npm - bun-dev-server - Versions diffs - 0.4.0 → 0.6.0 - Mend

bun-dev-server 0.4.0 → 0.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/dist/bunServeConfig.d.ts CHANGED Viewed

@@ -1,13 +1,20 @@
 import { type BuildConfig, type TLSOptions } from "bun";
-export interface BunDevServerConfig extends Partial<BunDevServerSocketConfig> {
+export interface BunDevServerConfig extends Partial<BunServeConfig> {
     port: number;
     buildConfig: BuildConfig;
     watchDir: string;
+    /**
+     * The delay in milliseconds to wait before starting a new build once a file has changed.
+     * Used in debounce function, in case many changes happen in file system at once
+     * @default 1000
+     */
+    watchDelay?: number;
     enableTSC?: boolean;
     writeManifest?: boolean;
     manifestName?: string;
     manifestWithHash?: boolean;
     hotReload?: "plugin" | "footer";
+    logRequests?: boolean;
     reloadOnChange?: boolean;
     /**
      * The path to the directory to serve files from.
@@ -19,8 +26,9 @@ export interface BunDevServerConfig extends Partial<BunDevServerSocketConfig> {
     serveOutputEjs?: string;
     serveOutputHtml?: string;
 }
-export interface BunDevServerSocketConfig {
+export interface BunServeConfig {
     port: number;
     tls?: TLSOptions;
     websocketPath?: string;
+    static?: Record<`/${string}`, Response>;
 }

package/dist/index.js CHANGED Viewed

@@ -846,6 +846,84 @@ var require_picocolors = __commonJS((exports, module) => {
   module.exports.createColors = createColors;
 });
+// node_modules/debounce/index.js
+var require_debounce = __commonJS((exports, module) => {
+  function debounce(function_, wait = 100, options = {}) {
+    if (typeof function_ !== "function") {
+      throw new TypeError(`Expected the first parameter to be a function, got \`${typeof function_}\`.`);
+    }
+    if (wait < 0) {
+      throw new RangeError("`wait` must not be negative.");
+    }
+    const { immediate } = typeof options === "boolean" ? { immediate: options } : options;
+    let storedContext;
+    let storedArguments;
+    let timeoutId;
+    let timestamp;
+    let result;
+    function run() {
+      const callContext = storedContext;
+      const callArguments = storedArguments;
+      storedContext = undefined;
+      storedArguments = undefined;
+      result = function_.apply(callContext, callArguments);
+      return result;
+    }
+    function later() {
+      const last = Date.now() - timestamp;
+      if (last < wait && last >= 0) {
+        timeoutId = setTimeout(later, wait - last);
+      } else {
+        timeoutId = undefined;
+        if (!immediate) {
+          result = run();
+        }
+      }
+    }
+    const debounced = function(...arguments_) {
+      if (storedContext && this !== storedContext && Object.getPrototypeOf(this) === Object.getPrototypeOf(storedContext)) {
+        throw new Error("Debounced method called with different contexts of the same prototype.");
+      }
+      storedContext = this;
+      storedArguments = arguments_;
+      timestamp = Date.now();
+      const callNow = immediate && !timeoutId;
+      if (!timeoutId) {
+        timeoutId = setTimeout(later, wait);
+      }
+      if (callNow) {
+        result = run();
+      }
+      return result;
+    };
+    Object.defineProperty(debounced, "isPending", {
+      get() {
+        return timeoutId !== undefined;
+      }
+    });
+    debounced.clear = () => {
+      if (!timeoutId) {
+        return;
+      }
+      clearTimeout(timeoutId);
+      timeoutId = undefined;
+    };
+    debounced.flush = () => {
+      if (!timeoutId) {
+        return;
+      }
+      debounced.trigger();
+    };
+    debounced.trigger = () => {
+      result = run();
+      debounced.clear();
+    };
+    return debounced;
+  }
+  exports.debounce = debounce;
+  module.exports = debounce;
+});
 // src/server.ts
 var import_ejs = __toESM(require_ejs(), 1);
 var Bun = globalThis.Bun;
@@ -888,30 +966,40 @@ var indexHTMLTemplate_default = `<!DOCTYPE html>\r
 `;
 // src/server.ts
-import { watch, readdir, exists, readFile as readFile2 } from "fs/promises";
+import { watch, readdir, access, readFile as readFile2, constants } from "fs/promises";
 // src/bunClientHmr.ts
 function hotReload() {
-  if (window.BUN_HMR_INITED) {
+  if (!window.BUN_DEV_SERVER) {
+    window.BUN_DEV_SERVER = [];
+  }
+  const devServer = "[Bun Dev Server]";
+  const connectAddress = "[REPLACE_ENDPOINT]";
+  let foundServer = window.BUN_DEV_SERVER.find((server) => server.url === connectAddress);
+  if (!foundServer) {
+    foundServer = { url: connectAddress, socket: null };
+  }
+  if (foundServer.socket) {
     return;
   }
-  window.BUN_HMR_INITED = true;
-  const hmrSock = new WebSocket("[REPLACE_ENDPOINT]");
-  hmrSock.addEventListener("error", (err) => {
-    console.error("HMR ERROR", err);
-  });
-  hmrSock.addEventListener("message", (msg) => {
+  console.log(devServer, "Connecting to Bun Dev Server at", connectAddress);
+  foundServer.socket = new WebSocket(connectAddress);
+  window.BUN_DEV_SERVER.push(foundServer);
+  function errorHandler(err) {
+    console.error(devServer, "ERROR", err);
+  }
+  function messageHandler(msg) {
     let parsed = msg.data;
     try {
       parsed = JSON.parse(msg.data);
     } catch (e) {
     }
     if (parsed?.type === "message") {
-      console.log(parsed.message);
+      console.log(devServer, parsed.message);
       return;
     }
     if (parsed?.type === "output") {
-      console.table(parsed.message);
+      console.table(devServer, parsed.message);
       return;
     }
     if (parsed?.type === "reload") {
@@ -932,7 +1020,26 @@ function hotReload() {
       }
       return;
     }
-  });
+  }
+  function closeHandler(ev) {
+    console.warn(devServer, "Connection closed. Will retry in 5 seconds...");
+    foundServer.socket?.removeEventListener("error", errorHandler);
+    foundServer.socket?.removeEventListener("message", messageHandler);
+    foundServer.socket?.removeEventListener("open", messageHandler);
+    foundServer.socket?.removeEventListener("close", closeHandler);
+    foundServer.socket = null;
+    setTimeout(function() {
+      console.log(devServer, "Attempting to reconnect...");
+      hotReload();
+    }, 5000);
+  }
+  function openHandler(ev) {
+    console.log(devServer, "Connected to Bun Dev Server");
+  }
+  foundServer.socket.addEventListener("error", errorHandler);
+  foundServer.socket.addEventListener("message", messageHandler);
+  foundServer.socket.addEventListener("close", closeHandler);
+  foundServer.socket.addEventListener("open", openHandler);
 }
 var DEFAULT_HMR_PATH = "/hmr-ws";
 function bunHotReload(bunServerConfig) {
@@ -1013,14 +1120,19 @@ async function performTSC(finalConfig) {
     const tsc = await $`tsc`.nothrow().quiet();
     if (tsc.exitCode === 0) {
       console.log(import_picocolors.default.bgGreen("\u2714 [SUCCESS]"), "TSC check passed");
+      return true;
     } else {
       console.log(import_picocolors.default.bgRed("\u2718 [ERROR]"), `\r
 ${tsc.stdout.toString()}`);
+      return false;
     }
   }
+  return true;
 }
 // src/server.ts
+var import_debounce = __toESM(require_debounce(), 1);
+var watchDelay = 1000;
 async function startBunDevServer(serverConfig) {
   const defaultConfig = {
     port: 3000,
@@ -1029,20 +1141,23 @@ async function startBunDevServer(serverConfig) {
     serveOutputHtml: indexHTMLTemplate_default
   };
   const finalConfig = { ...defaultConfig, ...serverConfig };
+  if (finalConfig.watchDelay) {
+    watchDelay = finalConfig.watchDelay;
+  }
   if (!finalConfig.watchDir) {
     throw new Error("watchDir must be set");
   }
   const serveDestination = finalConfig.buildConfig.outdir ?? finalConfig.servePath ?? "dist";
   const bunDestinationPath = Bun.pathToFileURL(serveDestination);
   const bunWatchDirPath = Bun.pathToFileURL(finalConfig.watchDir);
-  const dst = process.platform === "win32" ? bunDestinationPath.pathname.substring(1) : bunDestinationPath.pathname;
+  const destinationPath = process.platform === "win32" ? bunDestinationPath.pathname.substring(1) : bunDestinationPath.pathname;
   const srcWatch = process.platform === "win32" ? bunWatchDirPath.pathname.substring(1) : bunWatchDirPath.pathname;
   try {
-    await readdir(dst);
+    await readdir(destinationPath);
   } catch (e) {
     if (e.code === "ENOENT") {
       console.log("Directory not found, creating it...");
-      await $2`mkdir ${dst}`;
+      await $2`mkdir ${destinationPath}`;
     } else {
       throw e;
     }
@@ -1050,7 +1165,7 @@ async function startBunDevServer(serverConfig) {
   const buncfg = { port: finalConfig.port, tls: finalConfig.tls, websocketPath: finalConfig.websocketPath };
   const buildCfg = {
     ...serverConfig.buildConfig,
-    outdir: dst
+    outdir: destinationPath
   };
   if (finalConfig.hotReload === "footer") {
     if (!buildCfg.footer) {
@@ -1065,89 +1180,34 @@ async function startBunDevServer(serverConfig) {
     buildCfg.plugins.push(bunHotReloadPlugin(buncfg));
   }
   if (serverConfig.cleanServePath) {
-    await cleanDirectory(dst);
+    await cleanDirectory(destinationPath);
   }
   console.log("Starting Bun Dev Server on port", finalConfig.port);
   const bunServer = Bun.serve({
     port: finalConfig.port,
     development: true,
     tls: finalConfig.tls,
+    static: {
+      "/favicon.ico": withCORSHeaders(new Response("", { status: 404 })),
+      ...finalConfig.static
+    },
     async fetch(req, server) {
       if (req.method === "OPTIONS") {
-        const response = new Response("", { status: 200 });
-        augumentHeaders(req, response);
-        return response;
-      }
-      if (req.url.toLowerCase().endsWith("/favicon.ico")) {
-        const response = new Response("", { status: 404 });
-        augumentHeaders(req, response);
-        return response;
+        finalConfig.logRequests && console.log(`${200} ${req.url} OPTIONS`);
+        return withCORSHeaders(new Response("", { status: 200 }), req);
       }
       if (req.url.toLowerCase().endsWith(finalConfig.websocketPath)) {
+        finalConfig.logRequests && console.log(`${req.url} Socket Upgrade`);
         if (server.upgrade(req)) {
           return;
         }
       }
       const url = new URL(req.url);
-      const requestPath = url.pathname;
-      const objThere = await exists(dst + requestPath);
-      let isDirectory = false;
-      if (objThere) {
-        try {
-          await readFile2(dst + requestPath);
-        } catch (e) {
-          if (e.code === "EISDIR") {
-            isDirectory = true;
-          } else {
-            throw e;
-          }
-        }
-      } else {
-        const response = new Response("", { status: 404 });
-        augumentHeaders(req, response);
-        return response;
-      }
-      if (!isDirectory) {
-        try {
-          const fl = Bun.file(dst + requestPath);
-          const response = new Response(fl);
-          augumentHeaders(req, response);
-          return response;
-        } catch (e) {
-          if (e.code === "ENOENT") {
-            const response = new Response("", { status: 404 });
-            augumentHeaders(req, response);
-            return response;
-          } else {
-            throw e;
-          }
-        }
-      }
-      try {
-        const allEntries = await readdir(dst + requestPath, {
-          withFileTypes: true
-        });
-        const dirs = allEntries.filter((entry) => entry.isDirectory()).map((entry) => {
-          return {
-            requestPath: requestPath === "/" ? "" : requestPath,
-            name: entry.name
-          };
-        });
-        const files = allEntries.filter((entry) => entry.isFile()).map((entry) => {
-          return {
-            requestPath: requestPath === "/" ? "" : requestPath,
-            name: entry.name
-          };
-        });
-        const rnd = import_ejs.render(finalConfig.serveOutputEjs, { dirs, files });
-        const response = new Response(rnd, { headers: { "Content-Type": "text/html" } });
-        augumentHeaders(req, response);
-        return response;
-      } catch {
-        const response = new Response("Not Found", { status: 404 });
-        augumentHeaders(req, response);
-        return response;
+      let requestPath = url.pathname;
+      if (requestPath.toLowerCase() === "/index.html") {
+        requestPath = "/";
       }
+      return handlePathRequest(requestPath, req, finalConfig, destinationPath);
     },
     websocket: {
       open(ws) {
@@ -1158,60 +1218,63 @@ async function startBunDevServer(serverConfig) {
       sendPings: true
     }
   });
-  const output = await Bun.build(buildCfg);
-  publishOutputLogs(output, { filename: "Initial", eventType: "change" });
-  publishIndexHTML(output, { filename: "Initial", eventType: "change" });
-  if (finalConfig.writeManifest) {
-    writeManifest(output, dst, finalConfig.manifestWithHash, finalConfig.manifestName);
-  }
-  await performTSC(finalConfig);
+  debouncedbuildAndNotify(finalConfig, destinationPath, buildCfg, bunServer, { filename: "Initial", eventType: "change" });
   const watcher = watch(srcWatch, { recursive: true });
   for await (const event of watcher) {
-    if (finalConfig.cleanServePath) {
-      await cleanDirectory(dst);
-    }
-    const output2 = await Bun.build(buildCfg);
-    publishOutputLogs(output2, event);
-    publishIndexHTML(output2, event);
-    if (finalConfig.writeManifest) {
-      writeManifest(output2, dst, finalConfig.manifestWithHash, finalConfig.manifestName);
-    }
-    await performTSC(finalConfig);
-    if (finalConfig.reloadOnChange) {
-      bunServer.publish("message", JSON.stringify({ type: "reload" }));
-    }
+    debouncedbuildAndNotify(finalConfig, destinationPath, buildCfg, bunServer, event);
   }
-  function publishOutputLogs(output2, event) {
-    output2.logs.forEach(console.log);
-    bunServer.publish("message", JSON.stringify({ type: "message", message: `[Bun HMR] ${event.filename} ${event.eventType}` }));
-    const outTable = output2.outputs.filter((o) => o.kind !== "sourcemap").map((o) => {
-      const a = Bun.pathToFileURL(o.path);
-      const fileName = a.href.substring(a.href.lastIndexOf("/") + 1);
-      return {
-        name: fileName,
-        path: o.path,
-        size: convertBytes(o.size)
-      };
-    });
-    console.table(outTable);
-    bunServer.publish("message", JSON.stringify({ type: "output", message: outTable }));
+}
+var debouncedbuildAndNotify = import_debounce.default(async (finalConfig, destinationPath, buildCfg, bunServer, event) => {
+  if (finalConfig.cleanServePath) {
+    await cleanDirectory(destinationPath);
   }
-  function publishIndexHTML(output2, event) {
-    const eps = output2.outputs.filter((o) => o.kind === "entry-point");
-    const hashedImports = [];
-    for (const ep of eps) {
-      const basePathUrl = Bun.pathToFileURL(dst);
-      const epUrl = Bun.pathToFileURL(ep.path);
-      const hashedImport = `${epUrl.href.replace(basePathUrl.href, "")}?${ep.hash}`;
-      hashedImports.push(hashedImport);
-    }
-    Bun.write(dst + "/index.html", import_ejs.render(finalConfig.serveOutputHtml, { hashedImports }));
+  const output = await Bun.build(buildCfg);
+  publishOutputLogs(bunServer, output, event);
+  publishIndexHTML(destinationPath, finalConfig.serveOutputHtml, output, event);
+  if (finalConfig.writeManifest) {
+    writeManifest(output, destinationPath, finalConfig.manifestWithHash, finalConfig.manifestName);
   }
+  const tscSuccess = await performTSC(finalConfig);
+  if (finalConfig.reloadOnChange && tscSuccess) {
+    bunServer.publish("message", JSON.stringify({ type: "reload" }));
+  }
+}, watchDelay, { immediate: true });
+function handleErrorResponse(req, err) {
+  const msg = `Error while processing request ${req.url}`;
+  console.error(msg, err);
+  return withCORSHeaders(new Response(msg, { status: 500 }), req);
+}
+function publishOutputLogs(bunServer, output, event) {
+  output.logs.forEach(console.log);
+  bunServer.publish("message", JSON.stringify({ type: "message", message: `[Bun HMR] ${event.filename} ${event.eventType}` }));
+  const outTable = output.outputs.filter((o) => o.kind !== "sourcemap").map((o) => {
+    const a = Bun.pathToFileURL(o.path);
+    const fileName = a.href.substring(a.href.lastIndexOf("/") + 1);
+    return {
+      name: fileName,
+      path: o.path,
+      size: convertBytes(o.size)
+    };
+  });
+  console.table(outTable);
+  bunServer.publish("message", JSON.stringify({ type: "output", message: outTable }));
+}
+function publishIndexHTML(destinationPath, template, output, _event) {
+  const eps = output.outputs.filter((o) => o.kind === "entry-point");
+  const hashedImports = [];
+  for (const ep of eps) {
+    const basePathUrl = Bun.pathToFileURL(destinationPath);
+    const epUrl = Bun.pathToFileURL(ep.path);
+    const hashedImport = `${epUrl.href.replace(basePathUrl.href, "")}?${ep.hash}`;
+    hashedImports.push(hashedImport);
+  }
+  Bun.write(destinationPath + "/index.html", import_ejs.render(template, { hashedImports }));
 }
-function augumentHeaders(request, response) {
-  response.headers.set("Access-Control-Allow-Origin", request.headers.get("origin") ?? "*");
-  response.headers.set("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
+function withCORSHeaders(response, request) {
+  response.headers.set("Access-Control-Allow-Origin", request?.headers.get("origin") ?? "*");
+  response.headers.set("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, PATCH, OPTIONS");
   response.headers.set("Access-Control-Allow-Credentials", "true");
+  return response;
 }
 async function cleanDirectory(dst) {
   const { stderr, exitCode } = await $2`rm -rf ${dst}/*`.nothrow();
@@ -1235,6 +1298,74 @@ function convertBytes(bytes) {
   }
   return (bytes / Math.pow(1024, i)).toFixed(1) + " " + sizes[i];
 }
+async function handlePathRequest(requestPath, req, finalConfig, destinationPath) {
+  const fsPath = destinationPath + requestPath;
+  const objThere = await checkObjectExists(fsPath, req);
+  let isDirectory = false;
+  if (objThere) {
+    try {
+      await readFile2(fsPath);
+    } catch (e) {
+      if (e.code === "EISDIR") {
+        isDirectory = true;
+      } else {
+        throw e;
+      }
+    }
+  } else {
+    finalConfig.logRequests && console.log(`${404} ${req.url}`);
+    return withCORSHeaders(new Response("", { status: 404 }), req);
+  }
+  if (!isDirectory) {
+    try {
+      const fl = Bun.file(fsPath);
+      finalConfig.logRequests && console.log(`${200} ${req.url}`);
+      return withCORSHeaders(new Response(fl), req);
+    } catch (e) {
+      if (e?.code === "ENOENT") {
+        finalConfig.logRequests && console.log(`${404} ${req.url}`);
+        return withCORSHeaders(new Response("", { status: 404 }), req);
+      } else {
+        return handleErrorResponse(req, e);
+      }
+    }
+  }
+  try {
+    const allEntries = await readdir(fsPath, {
+      withFileTypes: true
+    });
+    const dirs = allEntries.filter((entry) => entry.isDirectory()).map((entry) => {
+      return {
+        requestPath: requestPath === "/" ? "" : requestPath,
+        name: entry.name
+      };
+    });
+    const files = allEntries.filter((entry) => entry.isFile()).map((entry) => {
+      return {
+        requestPath: requestPath === "/" ? "" : requestPath,
+        name: entry.name
+      };
+    });
+    const rnd = import_ejs.render(finalConfig.serveOutputEjs, { dirs, files });
+    finalConfig.logRequests && console.log(`${200} ${req.url}`);
+    return withCORSHeaders(new Response(rnd, { headers: { "Content-Type": "text/html" } }), req);
+  } catch (err) {
+    return handleErrorResponse(req, err);
+  }
+}
+async function checkObjectExists(fsPath, req) {
+  try {
+    await access(fsPath, constants.R_OK);
+    return true;
+  } catch (e) {
+    if (e?.code === "ENOENT") {
+      return false;
+    }
+    const msg = `Error while accessing path ${fsPath}`;
+    console.error(msg, e);
+    return false;
+  }
+}
 export {
   startBunDevServer,
   getBunHMRFooter,

package/dist/tsChecker.d.ts CHANGED Viewed

@@ -1,2 +1,2 @@
 import type { BunDevServerConfig } from "./bunServeConfig";
-export declare function performTSC(finalConfig: BunDevServerConfig): Promise<void>;
+export declare function performTSC(finalConfig: BunDevServerConfig): Promise<boolean>;

package/package.json CHANGED Viewed

@@ -9,6 +9,8 @@
   "keywords": [
     "bun",
     "devserver",
+    "dev",
+    "server",
     "hmr",
     "reload",
     "hot"
@@ -19,22 +21,22 @@
   "exports": {
     ".": "./dist/index.js"
   },
-  "version": "0.4.0",
+  "version": "0.6.0",
   "module": "index.ts",
   "type": "module",
   "license": "MIT",
   "scripts": {
-    "serve": "bun --hot ./serve.ts"
+    "build": "bun run ./build.ts"
   },
   "devDependencies": {
-    "@types/bun": "latest",
-    "bun": "^1.1.36"
+    "@types/bun": "latest"
   },
   "peerDependencies": {
-    "typescript": "^5.7.2"
+    "typescript": "^5.7.3"
   },
   "dependencies": {
     "@types/ejs": "^3.1.5",
+    "debounce": "^2.2.0",
     "ejs": "^3.1.10",
     "picocolors": "^1.1.1"
   }