@nitronjs/framework 0.3.3 → 0.3.5

package/lib/View/Client/hmr-client.js

@@ -1,219 +1,217 @@
-/**
- * HMR Client — Browser-side hot module replacement handler.
- *
- * Connects to the dev server via Socket.IO WebSocket.
- * On file change events, fetches a fresh RSC (React Server Components)
- * Flight payload and lets React reconcile the DOM — no full page reload needed.
- *
- * Wire format from /__nitron/rsc:
- *   "<flightLength>\n<flightPayload><jsonMetadata>"
- *   - First line: byte length of the Flight payload
- *   - Then the Flight payload itself (React serialization format)
- *   - Then a JSON object with { meta, css, translations }
- */
-(function() {
-    "use strict";
-
-    var RSC_ENDPOINT = "/__nitron/rsc";
-    var socket = null;
-
-    // --- Connection ---
-
-    function connect() {
-        if (socket) return;
-
-        if (typeof io === "undefined") {
-            setTimeout(connect, 100);
-
-            return;
-        }
-
-        try {
-            socket = io({
-                path: "/__nitron_hmr",
-                transports: ["websocket"],
-                reconnection: true,
-                reconnectionAttempts: Infinity,
-                reconnectionDelay: 1000,
-                reconnectionDelayMax: 5000,
-                timeout: 5000
-            });
-        }
-        catch (e) {
-            // Socket.IO not available — HMR disabled silently (dev-only feature)
-            return;
-        }
-
-        socket.on("connect", function() {
-            window.__nitron_hmr_connected__ = true;
-            hideErrorOverlay();
-        });
-
-        socket.on("disconnect", function() {
-            window.__nitron_hmr_connected__ = false;
-        });
-
-        socket.on("connect_error", function() {
-            window.__nitron_hmr_connected__ = false;
-        });
-
-        // Unified RSC-based change handler
-        socket.on("hmr:change", function(data) {
-            hideErrorOverlay();
-
-            if (data.changeType === "css") {
-                refreshCss();
-                return;
-            }
-
-            // page, layout — all use RSC refetch
-            refetchRSC(data.cssChanged);
-        });
-
-        socket.on("hmr:reload", function() {
-            location.reload();
-        });
-
-        socket.on("hmr:error", function(data) {
-            showErrorOverlay(data.message || "Unknown error", data.file);
-        });
-    }
-
-    // --- RSC Wire Format Parser ---
-
-    // Parses the length-prefixed response from /__nitron/rsc.
-    // Format: "<length>\n<flight payload><json metadata>"
-    // Returns { payload, meta, css, translations } or null on malformed input.
-    function parseLengthPrefixed(text) {
-        var nl = text.indexOf("\n");
-        if (nl === -1) return null;
-
-        var len = parseInt(text.substring(0, nl), 10);
-        if (isNaN(len) || len < 0) return null;
-
-        var flight = text.substring(nl + 1, nl + 1 + len);
-        var jsonStr = text.substring(nl + 1 + len);
-        var data;
-
-        try { data = JSON.parse(jsonStr); }
-        catch (e) { return null; }
-
-        return {
-            payload: flight,
-            meta: data.meta || null,
-            css: data.css || null,
-            translations: data.translations || null
-        };
-    }
-
-    // --- RSC Page Update ---
-
-    // Fetches a fresh Flight payload for the current URL and hands it to React.
-    // React's reconciliation updates only the changed DOM nodes — no full reload.
-    function refetchRSC(cssChanged) {
-        var rsc = window.__NITRON_RSC__;
-
-        if (!rsc || !rsc.root) {
-            location.reload();
-            return;
-        }
-
-        var url = location.pathname + location.search;
-
-        fetch(RSC_ENDPOINT + "?url=" + encodeURIComponent(url), {
-            headers: { "X-Nitron-SPA": "1" },
-            credentials: "same-origin"
-        })
-        .then(function(r) {
-            if (!r.ok) throw new Error("HTTP " + r.status);
-
-            return r.text().then(function(text) {
-                return parseLengthPrefixed(text);
-            });
-        })
-        .then(function(d) {
-            if (!d || !d.payload) {
-                location.reload();
-                return;
-            }
-
-            // Merge translations BEFORE navigate — persistent components (layouts) keep their keys
-            if (d.translations) {
-                var prev = window.__NITRON_TRANSLATIONS__;
-
-                window.__NITRON_TRANSLATIONS__ = prev
-                    ? Object.assign({}, prev, d.translations)
-                    : d.translations;
-            }
-
-            // React reconciliation — only changed DOM nodes update
-            rsc.navigate(d.payload);
-
-            if (d.meta && d.meta.title) document.title = d.meta.title;
-
-            if (cssChanged) refreshCss();
-        })
-        .catch(function() {
-            // RSC fetch failed — full reload as last resort
-            location.reload();
-        });
-    }
-
-    // --- CSS Hot Reload ---
-
-    // Cache-busts all stylesheets by appending ?t=<timestamp>
-    function refreshCss() {
-        var links = document.querySelectorAll('link[rel="stylesheet"]');
-        var timestamp = Date.now();
-
-        for (var i = 0; i < links.length; i++) {
-            var href = (links[i].href || "").split("?")[0];
-            links[i].href = href + "?t=" + timestamp;
-        }
-    }
-
-    // --- Build Error Overlay ---
-
-    function showErrorOverlay(message, file) {
-        hideErrorOverlay();
-
-        var overlay = document.createElement("div");
-        overlay.id = "__nitron_error__";
-        overlay.innerHTML =
-            '<div style="position:fixed;inset:0;background:rgba(0,0,0,.95);color:#ff4444;padding:32px;font-family:monospace;z-index:999999;overflow:auto">' +
-                '<div style="font-size:24px;font-weight:bold;margin-bottom:16px">Build Error</div>' +
-                '<div style="color:#888;margin-bottom:16px">' + escapeHtml(file || "") + '</div>' +
-                '<pre style="white-space:pre-wrap;background:#1a1a2e;padding:16px;border-radius:8px">' + escapeHtml(message) + '</pre>' +
-                '<button onclick="this.parentNode.parentNode.remove()" style="position:absolute;top:16px;right:16px;background:#333;color:#fff;border:none;padding:8px 16px;cursor:pointer;border-radius:4px">Close</button>' +
-            '</div>';
-
-        document.body.appendChild(overlay);
-    }
-
-    function hideErrorOverlay() {
-        var el = document.getElementById("__nitron_error__");
-
-        if (el) {
-            el.remove();
-        }
-    }
-
-    // --- Utilities ---
-
-    function escapeHtml(str) {
-        return String(str || "")
-            .replace(/&/g, "&amp;")
-            .replace(/</g, "&lt;")
-            .replace(/>/g, "&gt;");
-    }
-
-    // --- Initialize ---
-
-    if (document.readyState === "loading") {
-        document.addEventListener("DOMContentLoaded", connect);
-    }
-    else {
-        connect();
-    }
-
-})();
+(function() {
+    "use strict";
+
+    var RSC_ENDPOINT = "/__nitron/rsc";
+    var ws = null;
+    var reconnectTimer = null;
+
+    function connect() {
+        if (ws) return;
+
+        var protocol = location.protocol === "https:" ? "wss:" : "ws:";
+        var url = protocol + "//" + location.host + "/__nitron_hmr";
+
+        try {
+            ws = new WebSocket(url);
+        }
+        catch (e) {
+            return;
+        }
+
+        ws.onopen = function() {
+            window.__nitron_hmr_connected__ = true;
+            hideErrorOverlay();
+        };
+
+        ws.onclose = function() {
+            window.__nitron_hmr_connected__ = false;
+            ws = null;
+
+            clearTimeout(reconnectTimer);
+            reconnectTimer = setTimeout(connect, 1000);
+        };
+
+        ws.onerror = function() {
+            window.__nitron_hmr_connected__ = false;
+        };
+
+        ws.onmessage = function(event) {
+            var msg;
+
+            try {
+                msg = JSON.parse(event.data);
+            }
+            catch (e) {
+                return;
+            }
+
+            if (msg.type === "change") {
+                hideErrorOverlay();
+
+                if (msg.changeType === "css") {
+                    refreshCss();
+                    return;
+                }
+
+                refetchRSC(msg.cssChanged);
+            }
+
+            if (msg.type === "fast-refresh") {
+                hideErrorOverlay();
+                handleFastRefresh(msg);
+            }
+
+            if (msg.type === "reload") {
+                location.reload();
+            }
+
+            if (msg.type === "error") {
+                showErrorOverlay(msg.message || "Unknown error", msg.file);
+            }
+        };
+    }
+
+    function parseLengthPrefixed(text) {
+        var nl = text.indexOf("\n");
+        if (nl === -1) return null;
+
+        var len = parseInt(text.substring(0, nl), 10);
+        if (isNaN(len) || len < 0) return null;
+
+        var flight = text.substring(nl + 1, nl + 1 + len);
+        var jsonStr = text.substring(nl + 1 + len);
+        var data;
+
+        try { data = JSON.parse(jsonStr); }
+        catch (e) { return null; }
+
+        return {
+            payload: flight,
+            meta: data.meta || null,
+            css: data.css || null,
+            translations: data.translations || null
+        };
+    }
+
+    function refetchRSC(cssChanged) {
+        var rsc = window.__NITRON_RSC__;
+
+        if (!rsc || !rsc.root) {
+            location.reload();
+            return;
+        }
+
+        var url = location.pathname + location.search;
+
+        fetch(RSC_ENDPOINT + "?url=" + encodeURIComponent(url), {
+            headers: { "X-Nitron-SPA": "1" },
+            credentials: "same-origin"
+        })
+        .then(function(r) {
+            if (!r.ok) throw new Error("HTTP " + r.status);
+
+            return r.text().then(function(text) {
+                return parseLengthPrefixed(text);
+            });
+        })
+        .then(function(d) {
+            if (!d || !d.payload) {
+                location.reload();
+                return;
+            }
+
+            if (d.translations) {
+                var prev = window.__NITRON_TRANSLATIONS__;
+
+                window.__NITRON_TRANSLATIONS__ = prev
+                    ? Object.assign({}, prev, d.translations)
+                    : d.translations;
+            }
+
+            rsc.navigate(d.payload);
+
+            if (d.meta && d.meta.title) document.title = d.meta.title;
+
+            if (cssChanged) refreshCss();
+        })
+        .catch(function() {
+            location.reload();
+        });
+    }
+
+    function refreshCss() {
+        var links = document.querySelectorAll('link[rel="stylesheet"]');
+        var timestamp = Date.now();
+
+        for (var i = 0; i < links.length; i++) {
+            var href = (links[i].href || "").split("?")[0];
+            links[i].href = href + "?t=" + timestamp;
+        }
+    }
+
+    function showErrorOverlay(message, file) {
+        hideErrorOverlay();
+
+        var overlay = document.createElement("div");
+        overlay.id = "__nitron_error__";
+        overlay.innerHTML =
+            '<div style="position:fixed;inset:0;background:rgba(0,0,0,.95);color:#ff4444;padding:32px;font-family:monospace;z-index:999999;overflow:auto">' +
+                '<div style="font-size:24px;font-weight:bold;margin-bottom:16px">Build Error</div>' +
+                '<div style="color:#888;margin-bottom:16px">' + escapeHtml(file || "") + '</div>' +
+                '<pre style="white-space:pre-wrap;background:#1a1a2e;padding:16px;border-radius:8px">' + escapeHtml(message) + '</pre>' +
+                '<button onclick="this.parentNode.parentNode.remove()" style="position:absolute;top:16px;right:16px;background:#333;color:#fff;border:none;padding:8px 16px;cursor:pointer;border-radius:4px">Close</button>' +
+            '</div>';
+
+        document.body.appendChild(overlay);
+    }
+
+    function hideErrorOverlay() {
+        var el = document.getElementById("__nitron_error__");
+
+        if (el) {
+            el.remove();
+        }
+    }
+
+    function handleFastRefresh(msg) {
+        const chunks = msg.chunks || [];
+        const timestamp = msg.timestamp || Date.now();
+        const cssChanged = msg.cssChanged || false;
+
+        const promises = chunks.map(function(chunk) {
+            if (chunk.includes("..") || chunk.includes("://")) return Promise.resolve();
+
+            return import("/storage/" + chunk + "?t=" + timestamp);
+        });
+
+        Promise.all(promises)
+            .then(function() {
+                if (window.$RefreshRuntime$) {
+                    window.$RefreshRuntime$.performReactRefresh();
+                }
+
+                if (cssChanged) {
+                    refreshCss();
+                }
+            })
+            .catch(function(err) {
+                console.warn("[HMR] Fast Refresh failed, full reload:", err.message);
+                location.reload();
+            });
+    }
+
+    function escapeHtml(str) {
+        return String(str || "")
+            .replace(/&/g, "&amp;")
+            .replace(/</g, "&lt;")
+            .replace(/>/g, "&gt;");
+    }
+
+    if (document.readyState === "loading") {
+        document.addEventListener("DOMContentLoaded", connect);
+    }
+    else {
+        connect();
+    }
+
+})();

package/lib/View/Client/refresh-entry.cjs

@@ -0,0 +1 @@
+module.exports = require("react-refresh/runtime");

package/lib/View/View.js

@@ -735,10 +735,15 @@ class View {
             runtimeScript += `<script${nonceAttr}>window.__NITRON_FLIGHT__=${JSON.stringify(escapedPayload)};</script>`;
         }
 
+        const refreshScript = this.#isDev
+            ? `<script src="/storage/js/react-refresh-runtime.js"${nonceAttr}></script>`
+              + `<script${nonceAttr}>$RefreshRuntime$.injectIntoGlobalHook(window);window.$RefreshReg$=function(t,i){$RefreshRuntime$.register(t,"__mod__ "+i)};window.$RefreshSig$=function(){return $RefreshRuntime$.createSignatureFunctionForTransform()};</script>`
+            : "";
+
         const vendorScript = `<script src="/storage/js/vendor.js"${nonceAttr}></script>`;
 
         const hmrScript = this.#isDev
-            ? `<script src="/__nitron_client/socket.io.js"${nonceAttr}></script><script src="/storage/js/hmr.js"${nonceAttr}></script>`
+            ? `<script src="/storage/js/hmr.js"${nonceAttr}></script>`
             : "";
 
         const consumerScript = hasFlightPayload
@@ -757,7 +762,7 @@ ${this.#generateHead(meta, css)}
 <body>
 <div id="app">${html}</div>
 ${runtimeScript}
-${vendorScript}${hmrScript}${consumerScript}${spaScript}${devIndicator}
+${refreshScript}${vendorScript}${hmrScript}${consumerScript}${spaScript}${devIndicator}
 </body>
 </html>`;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nitronjs/framework",
-	"version": "0.3.3",
+	"version": "0.3.5",
 	"description": "NitronJS is a modern and extensible Node.js MVC framework built on Fastify. It focuses on clean architecture, modular structure, and developer productivity, offering built-in routing, middleware, configuration management, CLI tooling, and native React integration for scalable full-stack applications.",
 	"bin": {
 		"njs": "./cli/njs.js"
@@ -21,11 +21,11 @@
 		"@fastify/helmet": "^13.0.2",
 		"@fastify/multipart": "^9.3.0",
 		"@fastify/static": "^8.3.0",
-		"@tailwindcss/postcss": "^4.1.18",
+		"@parcel/watcher": "^2.5.6",
+		"@tailwindcss/node": "^4.2.2",
 		"@types/react": "^19.2.7",
 		"@types/react-dom": "^19.2.3",
 		"bcrypt": "^5.1.1",
-		"chokidar": "^5.0.0",
 		"dotenv": "^17.2.3",
 		"es-module-lexer": "^2.0.0",
 		"esbuild": "^0.27.2",
@@ -33,15 +33,17 @@
 		"mysql2": "^3.16.0",
 		"nodemailer": "^7.0.11",
 		"otpauth": "^9.5.0",
-		"postcss": "^8.5.6",
+		"oxc-parser": "^0.121.0",
+		"oxc-transform": "^0.121.0",
 		"qrcode": "^1.5.4",
 		"react": "^19.2.3",
 		"react-dom": "^19.2.3",
+		"react-refresh": "^0.18.0",
 		"react-server-dom-webpack": "^19.2.4",
 		"redis": "^5.6.0",
-		"socket.io": "^4.8.1",
 		"tailwindcss": "^4.1.18",
-		"typescript": "^5.9.3"
+		"typescript": "^5.9.3",
+		"ws": "^8.18.3"
 	},
 	"keywords": [
 		"nitronjs",