bun-dev-server 0.0.1

package/.vscode/launch.json

@@ -0,0 +1,36 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "bun",
+            "internalConsoleOptions": "neverOpen",
+            "request": "launch",
+            "name": "Debug File",
+            "program": "${file}",
+            "cwd": "${workspaceFolder}",
+            "stopOnEntry": false,
+            "watchMode": false
+        },
+        {
+            "type": "bun",
+            "internalConsoleOptions": "neverOpen",
+            "request": "launch",
+            "name": "Run File",
+            "program": "${file}",
+            "cwd": "${workspaceFolder}",
+            "noDebug": true,
+            "watchMode": false
+        },
+        {
+            "type": "bun",
+            "internalConsoleOptions": "neverOpen",
+            "request": "attach",
+            "name": "Attach Bun",
+            "url": "ws://localhost:6499/",
+            "stopOnEntry": false
+        }
+    ]
+}

package/.vscode/settings.json

@@ -0,0 +1,15 @@
+{
+    "[html]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
+    "[typescript]": {
+        "editor.defaultFormatter": "vscode.typescript-language-features"
+    },
+    "editor.defaultFormatter": null,
+    "html.format.enable": true,
+    "js-beautify.break_chained_methods": true,
+    "js-beautify.indent_inner_html": true,
+    "js-beautify.brace_style": "expand",
+    "typescript.tsdk": "node_modules\\typescript\\lib"
+
+}

package/@types/serve.ts

@@ -0,0 +1,5 @@
+declare module "*.ejs" {
+  const template: string;
+  export default template;
+}
+// export {};

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 SPWizard01
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,26 @@
+# Bun Dev Server
+
+```
+//devserver.ts
+import {startBunDevServer} from "bun-dev-server"
+
+startBunDevServer({
+    buildConfig: {
+        entrypoints: ["./src/app.ts"],
+        outdir: "dist",
+        splitting: true,
+        naming: {
+            asset: "assets/[name]-[hash].[ext]",
+            chunk: "chunks/[name]-[hash].[ext]",
+        }
+    },
+    cleanServePath: true,
+    port: 4567,
+    enableTypeScriptWatch: true,
+    watchDir: "./src",
+})
+```
+
+```
+bun run devserver.ts
+```

package/bunClientHmr.ts

@@ -0,0 +1,47 @@
+import { type BunDevServerSocketConfig } from "./bunServeConfig";
+
+function hotReload() {
+  const hmrSock = new WebSocket("[REPLACE_ENDPOINT]");
+  hmrSock.addEventListener("error", (err) => {
+    console.error("HMR ERROR", err);
+  })
+  hmrSock.addEventListener("message", (msg) => {
+    let parsed = msg.data;
+    try {
+      parsed = JSON.parse(msg.data);
+    } catch (e) { }
+    if (parsed?.type === "message") {
+      console.log(parsed.message);
+      return;
+    }
+    if (parsed?.type === "output") {
+      console.table(parsed.message);
+      return;
+    }
+    if (parsed?.type === "reload") {
+      window.location.reload();
+      return;
+    }
+    if (parsed?.type === "error") {
+      console.error(parsed.message);
+      let newDiv = window.document.getElementById("bun-hmr-error")
+      const divExists = !!newDiv;
+      if (!newDiv) {
+        newDiv = window.document.createElement("div");
+      }
+      newDiv.id = "bun-hmr-error";
+      newDiv.innerText += parsed.message;
+      if (!divExists) {
+
+        window.document.body.appendChild(newDiv);
+      }
+      return;
+    }
+  });
+}
+
+export function bunHotReload(bunServerConfig: BunDevServerSocketConfig) {
+  const endPath = bunServerConfig.websocketPath.startsWith("/") ? bunServerConfig.websocketPath : `/${bunServerConfig.websocketPath}`;
+  const path = `${(bunServerConfig.tls ? "wss" : "ws")}://localhost:${bunServerConfig.port}${endPath}`;
+  return hotReload.toString().replace("[REPLACE_ENDPOINT]", path);
+}

package/bunHmrPlugin.ts

@@ -0,0 +1,29 @@
+import { type BunPlugin } from "bun";
+import { bunHotReload } from "./bunClientHmr";
+import { readFile } from "fs/promises";
+import { type BunDevServerSocketConfig } from "./bunServeConfig";
+export function getBunHMRPlugin(config: BunDevServerSocketConfig) {
+    const bunHMRPlugin: BunPlugin = {
+        name: "hmr",
+        target: "browser",
+        setup(build) {
+            let hmrAdded = false;
+            build.onLoad({ filter: /\.m?tsx?/ }, async (args) => {
+                const contents = await readFile(args.path, { encoding: "utf-8" });
+                if (!hmrAdded) {
+                    hmrAdded = true;
+                    return { contents: `import "bun-hot-reload"\n` + contents, loader: "ts" };
+                }
+                return { contents, loader: "ts" };
+            });
+            build.onLoad({ filter: /./, namespace: "bun-hot-reload" }, async (args) => {
+
+                return { contents: `(${bunHotReload(config)})()\n`, loader: "ts" };
+            });
+            build.onResolve({ filter: /^bun-hot-reload$/ }, (args) => {
+                return { path: args.path, namespace: "bun-hot-reload" };
+            })
+        },
+    }
+    return bunHMRPlugin;
+}

package/bunServeConfig.ts

@@ -0,0 +1,23 @@
+import { type BuildConfig, type TLSOptions } from "bun";
+
+export interface BunDevServerConfig extends Partial<BunDevServerSocketConfig> {
+    port: number;
+    buildConfig: BuildConfig;
+    watchDir?: string;
+    enableTypeScriptWatch?: boolean;
+    /**
+     * The path to the directory to serve files from.
+     * Takes precedence over `buildConfig.outdir`.
+     * Defaults to "dist".
+    */
+    servePath?: string;
+    cleanServePath?: boolean;
+    serveOutputEjs?: string;
+    serveOutputHtml?: string;
+}
+
+export interface BunDevServerSocketConfig {
+    port: number;
+    tls?: TLSOptions;
+    websocketPath: string;
+}

package/bunTSWatcher.ts

@@ -0,0 +1,74 @@
+import { $, type Server, type Subprocess, resolve } from "bun";
+export async function startTSWatcher(server: Server, watchDir: URL) {
+    let dstcwd: string | undefined;
+    if (watchDir) {
+        dstcwd = process.platform === "win32" ? watchDir.pathname.substring(1) : watchDir.pathname;
+    }
+
+    console.log("Starting TypeScript watcher in", dstcwd);
+    // var tscResolved = await resolve("tsc", import.meta.dir);
+    //const tsc = await $`bun run ${tscResolved} --noEmit --watch ${dstcwd}/*.ts`.quiet().arrayBuffer();
+    let tsc: Subprocess | undefined;
+    try {
+        tsc = Bun.spawn(["tsc", "--watch", "--project", `${import.meta.dir}/tsconfig.json`], { stdout: "pipe", stderr: "pipe" });
+    } catch (e) {
+        console.error("TSC not found have you installed it globally?");
+        return;
+    }
+    for await (const chunk of tsc.stdout as any) {
+        const strVal = new TextDecoder().decode(chunk);
+        const isError = /Found [1-9]\d* errors?\./.test(strVal);
+        const isNoError = /Found 0 errors?\./.test(strVal);
+        const isErrorLine = /error TS/.test(strVal);
+        let msgType = "message";
+        if (isError || isErrorLine) {
+            console.error(strVal);
+            msgType = "error";
+        }
+        else if (isNoError) {
+            console.log("\x1b[32m", strVal, "\x1b[0m");
+        }
+        else {
+            console.log(strVal);
+        }
+        server.publish("message", JSON.stringify({ type: msgType, message: strVal }));
+        if (isNoError) {
+            server.publish("message", JSON.stringify({ type: "reload", message: "" }));
+        }
+    }
+    // if (!Bun.stdout.readable.locked) {
+    //     const tscErrorReader = Bun.stdout.readable.getReader();
+
+    //     // tsc.stdout.pipeThrough(new TextDecoderStream());
+    //     tscErrorReader.read().then(async function processResult(stdoutresult) {
+    //         if (stdoutresult.value) {
+    //             const strVal = Buffer.from(stdoutresult.value).toString();
+    //             const isError = /Found [1-9]\d* errors?\./.test(strVal);
+    //             const isNoError = /Found 0 errors?\./.test(strVal);
+    //             const isErrorLine = /error TS/.test(strVal);
+    //             let msgType = "message";
+    //             if (isError || isErrorLine) {
+    //                 console.error(new Error(strVal));
+    //                 msgType = "error";
+    //                 //await Bun.write(Bun.stderr, stdoutresult.value);
+    //             } else {
+    //                 console.log(strVal);
+    //             }
+    //             server.publish("message", JSON.stringify({ type: msgType, message: strVal }));
+    //             if(isNoError) {
+    //                 server.publish("message", JSON.stringify({ type: "reload", message: "" }));
+    //             }
+    //             // const resVal = result.value;
+    //             // const strVal = Buffer.from(result.value).toString();
+    //             // await Bun.write(Bun.stdout, stdoutresult.value);
+    //             // const result = strVal.indexOf("error") !== -1 ? new Error(strVal) : strVal;
+    //             // console.log(Bun.inspect(result, {colors: true}));
+    //             // Bun.stdout.writer().write();
+    //         }
+    //         if (stdoutresult.done) {
+    //             return;
+    //         }
+    //         tscErrorReader.read().then(processResult);
+    //     });
+    // }
+}

package/index.ts

@@ -0,0 +1,196 @@
+/// <reference path="./@types/serve.ts" />
+import { render } from "ejs";
+import Bun, { $, ShellError } from "bun";
+import serveTemplate from "./serveOutputTemplate.ejs" with { type: "text" };
+import indexTemplate from "./indexHTMLTemplate.ejs" with { type: "text" };
+import { watch, readdir, exists, readFile } from "fs/promises";
+import { type FileChangeInfo } from "fs/promises";
+import { startTSWatcher } from "./bunTSWatcher";
+import { getBunHMRPlugin } from "./bunHmrPlugin";
+import { type BunDevServerConfig } from "./bunServeConfig";
+
+
+
+export async function startBunDevServer(serverConfig: BunDevServerConfig) {
+  const defaultConfig = {
+    port: 3000,
+    websocketPath: "/hmr-ws",
+    serveOutputEjs: serveTemplate,
+    serveOutputHtml: indexTemplate
+  }
+  const finalConfig = { ...defaultConfig, ...serverConfig };
+  const serveDestination = finalConfig.buildConfig.outdir ?? finalConfig.servePath ?? "dist";
+  const bunDestinationPath = Bun.pathToFileURL(serveDestination);
+  const dst = process.platform === "win32" ? bunDestinationPath.pathname.substring(1) : bunDestinationPath.pathname;
+  try {
+    await readdir(dst)
+  } catch (e) {
+    if ((e as ErrnoException).code === "ENOENT") {
+      console.log("Directory not found, creating it...");
+      await $`mkdir ${dst}`;
+    } else {
+      throw e;
+    }
+  }
+  const buildCfg: Bun.BuildConfig = {
+    ...serverConfig.buildConfig,
+    outdir: dst,
+    plugins: [...serverConfig.buildConfig.plugins ?? [], getBunHMRPlugin({ port: finalConfig.port, tls: finalConfig.tls, websocketPath: finalConfig.websocketPath })]
+  }
+
+  if (serverConfig.cleanServePath) {
+    await cleanDirectory(dst);
+  }
+
+  const bunServer = Bun.serve({
+    port: finalConfig.port,
+    development: true,
+    tls: finalConfig.tls,
+    async fetch(req, server) {
+      if (req.url.toLowerCase().endsWith("/favicon.ico")) {
+        return new Response("", { status: 404 });
+      }
+      if (req.url.toLowerCase().endsWith(finalConfig.websocketPath)) {
+        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 readFile(dst + requestPath);
+        } catch (e) {
+          if ((e as ErrnoException).code === "EISDIR") {
+            isDirectory = true;
+          } else {
+            throw e;
+          }
+        }
+      }
+
+      if (!isDirectory) {
+        const fl = Bun.file(dst + requestPath);
+        return new Response(fl);
+      }
+      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 = render(finalConfig.serveOutputEjs, { dirs, files });
+        return new Response(rnd, { headers: { "Content-Type": "text/html" } });
+      } catch {
+        return new Response("Not Found", { status: 404 });
+      }
+    },
+
+
+    websocket: {
+      open(ws) {
+        ws.subscribe("message");
+      },
+      message(ws, message) {
+      },
+      sendPings: true
+    }
+  });
+
+
+  const output = await Bun.build(buildCfg);
+  publishOutputLogs(output, { filename: "Initial", eventType: "change" });
+  publishIndexHTML(output, { filename: "Initial", eventType: "change" });
+  // $`tsc --watch`.then((tsc) => {
+  //   console.log("ASDASD");
+  // });
+
+  if (finalConfig.enableTypeScriptWatch) {
+    if(!finalConfig.watchDir) {
+      throw new Error("watchDir must be set to enable TypeScript watch");
+    }
+    const watchDir = Bun.pathToFileURL(finalConfig.watchDir);
+    startTSWatcher(bunServer, watchDir);
+  }
+  const watcher = watch("./src", { recursive: true });
+  for await (const event of watcher) {
+    if (finalConfig.cleanServePath) {
+      await cleanDirectory(dst);
+    }
+    const output = await Bun.build(buildCfg);
+    publishOutputLogs(output, event);
+    publishIndexHTML(output, event);
+  }
+
+  function publishOutputLogs(output: Bun.BuildOutput, event: FileChangeInfo<string>) {
+    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(output: Bun.BuildOutput, event: FileChangeInfo<string>) {
+    const ep = output.outputs.find(o => o.kind === "entry-point");
+    if (ep) {
+      const basePathUrl = Bun.pathToFileURL(dst);
+      const epUrl = Bun.pathToFileURL(ep.path);
+      const hashedImport = `${epUrl.href.replace(basePathUrl.href, "")}?${ep.hash}`;
+      Bun.write(dst + "/index.html", render(finalConfig.serveOutputHtml, { hashedImport }));
+    }
+  }
+
+}
+
+async function cleanDirectory(dst: string) {
+  const { stderr, exitCode } = await $`rm -rf ${dst}/*`.nothrow();
+  if (exitCode !== 0) {
+    if (stderr.indexOf("no matches found") > -1) {
+      console.log("Directory is empty");
+    } else {
+      throw stderr;
+    }
+  }
+}
+
+function convertBytes(bytes: number) {
+  const sizes = ["Bytes", "KB", "MB", "GB", "TB"]
+
+  if (bytes == 0) {
+    return "n/a"
+  }
+  const floored = Math.floor(Math.log(bytes) / Math.log(1024));
+  // console.log(floored);
+  // console.log(parseInt(`${floored}`));
+  const i = floored;
+
+  if (i == 0) {
+    return bytes + " " + sizes[i]
+  }
+
+  return (bytes / Math.pow(1024, i)).toFixed(1) + " " + sizes[i]
+}

package/indexHTMLTemplate.ejs

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Bun HTML File</title>
+    <script type="module" src="<%= hashedImport %>"></script>
+  </head>
+
+  <body>
+    <div id="app"></div>
+  </body>
+</html>

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "bun-dev-server",
+  "description": "A simple development server for TypeScript projects using Bun",
+  "author": "SPWizard01 (https://github.com/SPWizard01/bun-dev-server)",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/SPWizard01/bun-dev-server"
+  },
+  "version": "0.0.1",
+  "module": "index.ts",
+  "type": "module",
+  "scripts": {
+    "serve": "bun --hot ./serve.ts"
+  },
+  "devDependencies": {
+    "@types/bun": "latest",
+    "@types/ejs": "^3.1.5"
+  },
+  "peerDependencies": {
+    "typescript": "^5.5.4"
+  },
+  "dependencies": {
+    "ejs": "^3.1.10"
+  }
+}

package/serveOutputTemplate.ejs

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+  </head>
+
+  <body>
+    <a href="../">..</a>
+    <% dirs.forEach(element => { %> <br /><a href=".<%= element.requestPath %>/<%= element.name %>"><%= element.name %></a> <% }) %>
+    <% files.forEach(element => { %> <br /><a href=".<%= element.requestPath %>/<%= element.name %>"><%= element.name %></a> <% }) %>
+  </body>
+
+</html>

package/test/README.md

@@ -0,0 +1,15 @@
+# test
+
+To install dependencies:
+
+```bash
+bun install
+```
+
+To run:
+
+```bash
+bun run app.ts
+```
+
+This project was created using `bun init` in bun v1.1.27. [Bun](https://bun.sh) is a fast all-in-one JavaScript runtime.

package/test/bunrun.ts

@@ -0,0 +1,17 @@
+import { startBunDevServer } from "../index"
+
+startBunDevServer({
+    buildConfig: {
+        entrypoints: ["./src/app.ts"],
+        outdir: "dist",
+        splitting: true,
+        naming: {
+            asset: "assets/[name]-[hash].[ext]",
+            chunk: "chunks/[name]-[hash].[ext]",
+        }
+    },
+    cleanServePath: true,
+    port: 4567,
+    enableTypeScriptWatch: true,
+    watchDir: "./src",
+})

package/test/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "test",
+  "module": "app.ts",
+  "type": "module",
+  "devDependencies": {
+    "@types/bun": "^1.1.8"
+  },
+  "peerDependencies": {
+    "typescript": "^5.0.0"
+  },
+  "dependencies": {
+    "@pnp/queryable": "^4.4.0",
+    "@pnp/sp": "^4.4.0",
+    "bun": "^1.1.27"
+  }
+}

package/test/src/@types/filetypes.d.ts

@@ -0,0 +1,4 @@
+declare module "*.svg" {
+    const template: string;
+    export default template;
+  }

package/test/src/app.ts

@@ -0,0 +1,10 @@
+import { bla } from "./something"
+
+bla();
+const app = window.document.querySelector("#app");
+if(app) {
+    app.textContent = "Hello World";
+}
+const {bla2} = await import("./services/someservice");
+bla2();
+

package/test/src/assets/something.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="-100 -100 200 200">
+    <polygon points="0,0 80,120 -80,120" fill="#234236" />
+    <polygon points="0,-40 60,60 -60,60" fill="#0C5C4C" />
+    <polygon points="0,-80 40,0 -40,0" fill="#38755B" />
+    <rect x="-20" y="120" width="40" height="30" fill="brown" />
+</svg>

package/test/src/services/someservice.ts

@@ -0,0 +1,7 @@
+import somesvg from "../assets/something.svg"
+import { SPBrowser, spfi } from "@pnp/sp"
+import { BearerToken } from "@pnp/queryable"
+export async function bla2() {
+    console.log(somesvg);
+    spfi("s");
+};

package/test/src/something.ts

@@ -0,0 +1,3 @@
+export function bla() {
+    console.log("GGGFsss");
+}

package/test/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    // Enable latest features
+    "lib": ["ESNext", "DOM"],
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleDetection": "force",
+    "jsx": "react-jsx",
+    "allowJs": true,
+
+    // Bundler mode
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+
+    // Best practices
+    "strict": true,
+    "skipLibCheck": true,
+    "noFallthroughCasesInSwitch": true,
+
+    // Some stricter flags (disabled by default)
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noPropertyAccessFromIndexSignature": false
+  }
+}

package/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    // Enable latest features
+    "lib": ["ESNext", "DOM"],
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleDetection": "auto",
+    "jsx": "react-jsx",
+    "allowJs": true,
+
+    // Bundler mode
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+
+    // Best practices
+    "strict": true,
+    "skipLibCheck": true,
+    "noFallthroughCasesInSwitch": true,
+    "preserveWatchOutput": true,
+    // Some stricter flags (disabled by default)
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noPropertyAccessFromIndexSignature": false
+  }
+}