@madhanmaaz/udane 0.0.0-stage → 0.1.1

package/lib/udane.js

@@ -0,0 +1,159 @@
+const net = require("node:net");
+const path = require("node:path");
+
+const { LogController } = require("fastify");
+const chokidar = require("chokidar");
+const { WebSocketServer, WebSocket } = require("ws");
+
+const getConfig = require("../helpers/getConfig.helper");
+const createIgnore = require("../helpers/ignore.helper");
+const { WS_PATH, PUBLIC_DIR_PREFIX } = require("../constants/index.constant");
+const buildApp = require("../app");
+
+const PORT_ATTEMPTS = 20;
+
+function isFree(host, port) {
+    return new Promise((resolve) => {
+        const probe = net.createServer();
+        probe.once("error", () => resolve(false));
+        probe.once("listening", () => probe.close(() => resolve(true)));
+        probe.listen(port, host);
+    });
+}
+
+// Returns the first free port starting at `port`.
+async function findPort(host, port) {
+    const last = Math.min(port + PORT_ATTEMPTS - 1, 65535);
+
+    for (let candidate = port; candidate <= last; candidate++) {
+        if (await isFree(host, candidate)) {
+            return candidate;
+        }
+    }
+
+    throw new Error(`No free port found between ${port} and ${last}`);
+}
+
+function broadcast(wss, message) {
+    for (const client of wss.clients) {
+        if (client.readyState === WebSocket.OPEN) {
+            client.send(message);
+        }
+    }
+}
+
+module.exports = async function udane(options = {}) {
+    const config = getConfig(options);
+    const port = await findPort(config.host, config.port);
+
+    const logger = config.logRequests
+        ? {
+              transport: {
+                  target: "@fastify/one-line-logger",
+                  options: { timeOnly: true },
+              },
+          }
+        : false;
+
+    const app = buildApp(config, {
+        logController: new LogController({
+            disableRequestLogging: (request) => {
+                // Disable logs for /__udane/*
+                return (
+                    request.url.startsWith(`/${PUBLIC_DIR_PREFIX}/`) ||
+                    /\.(css|js|map|png|jpe?g|gif|svg|ico|webp|woff2?)(\?|$)/i.test(
+                        request.url,
+                    )
+                );
+            },
+        }),
+        logger,
+    });
+
+    await app.listen({ host: config.host, port });
+
+    const wss = new WebSocketServer({ server: app.server, path: WS_PATH });
+
+    // Polling spreads the events of one build over a full interval,
+    // so wait longer than that before sending anything.
+    const POLL_INTERVAL = 300;
+    const settle = Math.max(config.debounce, POLL_INTERVAL + 100);
+
+    let timer = null;
+    let pending = null;
+    const changed = new Set();
+
+    function flush() {
+        const message = pending;
+        pending = null;
+
+        if (config.logChanges && changed.size) {
+            const list = [...changed];
+            if (list.length <= 5) {
+                for (const item of list) console.log(`[+] ${item}`);
+            } else {
+                console.log(`[+] ${list.length} files changed`);
+            }
+        }
+        changed.clear();
+
+        broadcast(wss, message);
+    }
+
+    // "reload" always wins over "refreshcss"
+    function schedule(message, label) {
+        changed.add(label);
+        if (pending !== "reload") pending = message;
+
+        clearTimeout(timer);
+        timer = setTimeout(flush, settle);
+    }
+
+    const watcher = chokidar
+        .watch(config.watch, {
+            ignored: createIgnore(config.ignore, config.watch),
+            ignoreInitial: true,
+            usePolling: true,
+            interval: POLL_INTERVAL,
+        })
+        .on("all", (event, filepath) => {
+            const cssOnly =
+                config.cssHotSwap &&
+                event === "change" &&
+                filepath.endsWith(".css");
+
+            schedule(
+                cssOnly ? "refreshcss" : "reload",
+                `${event} ${path.relative(process.cwd(), filepath)}`,
+            );
+        })
+        .on("error", (error) => {
+            console.error("[-] watcher error:", error.message);
+        });
+
+    let closed = false;
+
+    async function close() {
+        if (closed) return;
+        closed = true;
+
+        clearTimeout(timer);
+
+        // open sockets would keep app.close() waiting
+        for (const client of wss.clients) {
+            client.terminate();
+        }
+        wss.close();
+
+        await watcher.close();
+        await app.close();
+    }
+
+    return {
+        app,
+        config: { ...config, port },
+        requestedPort: config.port,
+        port,
+        close,
+    };
+};

package/license

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Madhan (Madhanmaaz)
+
+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/middleware/inject.middleware.js

@@ -0,0 +1,42 @@
+const { PUBLIC_DIR_PREFIX } = require("../constants/index.constant");
+
+const SCRIPT = `<script src="/${PUBLIC_DIR_PREFIX}/js/client.js"></script>`;
+const CLOSING_BODY = /<\/body\s*>/gi;
+
+async function toText(payload) {
+    if (typeof payload === "string") return payload;
+    if (Buffer.isBuffer(payload)) return payload.toString("utf8");
+
+    // static files are streamed
+    const chunks = [];
+    for await (const chunk of payload) chunks.push(Buffer.from(chunk));
+    return Buffer.concat(chunks).toString("utf8");
+}
+
+function inject(html) {
+    if (html.includes(SCRIPT)) return html;
+
+    const last = [...html.matchAll(CLOSING_BODY)].at(-1);
+    if (!last) return html + SCRIPT;
+
+    return html.slice(0, last.index) + SCRIPT + "\n" + html.slice(last.index);
+}
+
+module.exports = async function injectMiddleware(request, reply, payload) {
+    if (request.method !== "GET" || payload == null) return payload;
+
+    // 304 and 206 have no full body to rewrite
+    if (reply.statusCode === 304 || reply.statusCode === 206) return payload;
+
+    const type = String(reply.getHeader("content-type") ?? "");
+    if (!type.includes("text/html")) return payload;
+
+    // compressed bodies cannot be edited as text
+    if (reply.getHeader("content-encoding")) return payload;
+
+    reply.removeHeader("content-length");
+    reply.removeHeader("accept-ranges");
+    reply.header("cache-control", "no-store");
+
+    return inject(await toText(payload));
+};

package/package.json

@@ -1,6 +1,49 @@
 {
-  "name": "@madhanmaaz/udane",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+    "name": "@madhanmaaz/udane",
+    "version": "0.1.1",
+    "description": "Udane - a fast, lightweight development server with live reload, built on Fastify.",
+    "author": {
+        "name": "madhanmaaz",
+        "url": "https://madhanmaaz.netlify.app"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/madhanmaaz/udane.git"
+    },
+    "homepage": "https://github.com/madhanmaaz/udane#readme",
+    "funding": [
+        {
+            "type": "github",
+            "url": "https://github.com/sponsors/madhanmaaz"
+        }
+    ],
+    "bugs": {
+        "url": "https://github.com/madhanmaaz/udane/issues"
+    },
+    "license": "MIT",
+    "bin": {
+        "udane": "lib/bin.js"
+    },
+    "main": "lib/udane.js",
+    "engines": {
+        "node": ">=20"
+    },
+    "dependencies": {
+        "@fastify/one-line-logger": "^2.2.0",
+        "@fastify/static": "^10.1.3",
+        "chokidar": "^5.0.0",
+        "fastify": "^5.12.4",
+        "tarkine": "^1.3.3",
+        "ws": "^8.22.0",
+        "zod": "^4.6.4"
+    },
+    "keywords": [
+        "udane",
+        "live-server",
+        "live-reload",
+        "livereload",
+        "hot-reload",
+        "dev-server",
+        "fastify"
+    ]
+}

package/public/css/base/global.css

@@ -0,0 +1,10 @@
+@import url("./root.css");
+
+@font-face {
+    font-family: "Roboto";
+    src: url("../../fonts/Roboto-Medium.ttf");
+}
+
+:root {
+    --app-ff: "Roboto";
+}

package/public/css/base/root.css

@@ -0,0 +1,136 @@
+/* koyaka */
+:root {
+    --sp: 0.25rem;
+    --box-sz: 0.5rem;
+    --field-sz: 0.25rem;
+    --ctrl-sz: 0.25rem;
+    --box-rds: 0.5rem;
+    --field-rds: 0.25rem;
+    --ctrl-rds: 0.125rem;
+    --bw: 1px;
+    --ow: 2px;
+    --bc: var(--fg) / 0.11;
+    --border: var(--bw) solid hsl(var(--bc));
+    --outline: var(--ow) solid hsl(var(--fg-alt));
+    --transparent: 0 0% 0% / 0;
+    --ff: var(
+        --app-ff,
+        ui-sans-serif,
+        system-ui,
+        sans-serif,
+        "Apple Color Emoji",
+        "Segoe UI Emoji",
+        "Segoe UI Symbol",
+        "Noto Color Emoji"
+    );
+    --ff-mono: var(
+        --app-ff-mono,
+        ui-monospace,
+        "Cascadia Code",
+        "Source Code Pro",
+        Menlo,
+        Consolas,
+        "DejaVu Sans Mono",
+        monospace
+    );
+    color-scheme: dark;
+    --bg-100: 200 20% 6%;
+    --bg-200: 200 18% 9%;
+    --bg-300: 200 16% 12%;
+    --bg-400: 200 14% 16%;
+    --fg: 210 20% 92%;
+    --fg-alt: 210 10% 65%;
+    --primary: 87 77% 49%;
+    --primary-fg: 87 61% 7%;
+    --secondary: 74 90% 52%;
+    --secondary-fg: 74 50% 10%;
+    --accent: 160 70% 45%;
+    --accent-fg: 160 50% 10%;
+    --neutral: 200 10% 55%;
+    --neutral-fg: 200 15% 10%;
+    --info: 200 90% 60%;
+    --info-fg: 200 60% 10%;
+    --success: 140 60% 50%;
+    --success-fg: 140 50% 10%;
+    --warning: 45 100% 55%;
+    --warning-fg: 45 70% 10%;
+    --error: 0 85% 65%;
+    --error-fg: 0 60% 12%;
+}
+
+*,
+::after,
+::before {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+* {
+    border: none;
+    outline: none;
+    background: none;
+    text-decoration: none;
+    scrollbar-width: thin;
+    scrollbar-color: hsl(var(--fg) / 0.3) transparent;
+    outline-offset: calc(var(--ow) / 2);
+}
+
+html,
+:host {
+    font-family: var(--ff);
+    font-size: 16px;
+    line-height: 1.5;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-tap-highlight-color: transparent;
+    text-size-adjust: 100%;
+    -webkit-text-size-adjust: 100%;
+}
+
+body {
+    background-color: hsl(var(--bg-100));
+    color: hsl(var(--fg));
+}
+
+code,
+pre,
+kbd,
+samp {
+    font-family: var(--ff-mono);
+    font-size: 0.9em;
+}
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+    display: block;
+}
+
+img,
+video {
+    max-width: 100%;
+    height: auto;
+}
+
+iframe {
+    border: 0;
+}
+
+:disabled,
+.disabled,
+[disabled] {
+    opacity: 0.5;
+    user-select: none;
+    pointer-events: none;
+}

package/public/css/components/input.css

@@ -0,0 +1,41 @@
+/*! https://koyaka.netlify.app */
+.input {
+    --input_py: 1.75;
+    --input_px: 2.5;
+    --input_rds: 2.5;
+    --input_fs: 0.875;
+    --input-bg: var(--input-clr, var(--bg-300));
+    --input-fg: var(--input-clr-fg, var(--fg));
+    --input-bc: var(--input-clr, var(--bc));
+    --input-py: calc(var(--field-sz) * var(--input_py));
+    --input-px: calc(var(--field-sz) * var(--input_px));
+    --input-rds: calc(var(--field-rds) * var(--input_rds));
+    --input-fs: calc(1rem * var(--input_fs));
+    font-size: var(--input-fs);
+    color: hsl(var(--input-fg));
+    background-color: hsl(var(--input-bg));
+    padding: var(--input-py) var(--input-px);
+    border-radius: var(--input-rds);
+    border: var(--bw) solid hsl(var(--input-bc));
+    line-height: 1;
+    width: 100%;
+    transition:
+        border-color 0.2s ease,
+        background-color 0.2s ease,
+        color 0.2s ease;
+}
+
+.input:focus {
+    --input-bc: var(--input-clr, var(--fg-alt)) / 0.8;
+    box-shadow: 0 0 0 var(--bw) hsl(var(--input-bc));
+}
+
+.input::placeholder {
+    color: hsl(var(--input-fg) / 0.5);
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .input {
+        transition: none;
+    }
+}

package/public/css/pages/listing.css

@@ -0,0 +1,88 @@
+body {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--sp) * 2);
+    height: 100vh;
+    height: 100dvh;
+}
+
+header,
+main,
+footer {
+    padding: 1rem;
+    width: 100%;
+    max-width: 1400px;
+    margin: auto;
+}
+
+header {
+    display: flex;
+    align-items: center;
+    gap: calc(var(--sp) * 5);
+}
+
+header .logo {
+    width: 50px;
+}
+
+#directory-input {
+    flex: 3;
+}
+
+#search-input {
+    flex: 1;
+}
+
+main {
+    flex: 1;
+    overflow-y: auto;
+    text-align: left;
+}
+
+main a {
+    display: inline-flex;
+    align-items: center;
+    gap: calc(var(--sp) * 2);
+
+    width: 300px;
+    margin: calc(var(--sp) * 1) 0;
+    padding: calc(var(--sp) * 2) calc(var(--sp) * 3);
+
+    background-color: hsl(var(--bg-200));
+    border: var(--border);
+    border-radius: calc(var(--field-rds) * 1.5);
+}
+
+main a span {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+main a:hover {
+    background-color: hsl(var(--bg-300));
+}
+
+main a img {
+    width: 18px;
+}
+
+main a.hide {
+    display: none;
+}
+
+footer {
+    text-align: right;
+}
+
+@media (max-width: 640px) {
+    header {
+        flex-direction: column;
+        gap: 0.5rem;
+    }
+
+    main a {
+        width: 100%;
+    }
+}

package/public/js/client.js

@@ -0,0 +1,56 @@
+(function () {
+    if (!("WebSocket" in window)) {
+        console.error(
+            "[udane] This browser does not support WebSocket, live reload is disabled.",
+        );
+        return;
+    }
+
+    const PARAM = "_udaneCacheOverride";
+    const RETRY_MS = 7000;
+
+    function refreshCSS() {
+        const links = document.querySelectorAll(
+            'link[rel~="stylesheet"][href]',
+        );
+
+        for (const link of links) {
+            const url = new URL(link.href, location.href);
+            if (url.origin !== location.origin) continue;
+
+            url.searchParams.set(PARAM, Date.now());
+
+            // load the new copy first, remove the old one after it is ready
+            const next = link.cloneNode();
+            next.href = url.href;
+            next.addEventListener("load", () => link.remove());
+            next.addEventListener("error", () => next.remove());
+            link.after(next);
+        }
+    }
+
+    let wasConnected = false;
+
+    function connect() {
+        const protocol = location.protocol === "https:" ? "wss://" : "ws://";
+        const socket = new WebSocket(`${protocol}${location.host}/__udane-ws`);
+
+        socket.addEventListener("open", () => {
+            // the server came back after a restart, so the page may be stale
+            if (wasConnected) return location.reload();
+            wasConnected = true;
+        });
+
+        socket.addEventListener("message", (event) => {
+            if (event.data === "reload") {
+                location.reload();
+            } else if (event.data === "refreshcss") {
+                refreshCSS();
+            }
+        });
+
+        socket.addEventListener("close", () => setTimeout(connect, RETRY_MS));
+    }
+
+    connect();
+})();