@nitronjs/framework 0.2.3 → 0.2.5

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

@@ -1,18 +1,32 @@
+/**
+ * HMR Client - Browser-side hot module replacement handler.
+ * Connects to the HMR WebSocket server and handles live updates.
+ */
 (function() {
     "use strict";
 
     var socket = null;
-    var overlay = null;
+    var errorOverlay = null;
 
+    // Connection
     function connect() {
         if (socket) return;
+
         if (typeof io === "undefined") {
             setTimeout(connect, 100);
+
             return;
         }
 
         try {
-            socket = io({ path: "/__nitron_hmr", transports: ["websocket", "polling"], reconnection: true });
+            socket = io({
+                path: "/__nitron_hmr",
+                transports: ["websocket"],
+                reconnection: true,
+                reconnectionAttempts: 5,
+                reconnectionDelay: 1000,
+                timeout: 5000
+            });
         }
         catch (e) {
             return;
@@ -20,147 +34,176 @@
 
         socket.on("connect", function() {
             window.__nitron_hmr_connected__ = true;
-            hideOverlay();
+            hideErrorOverlay();
         });
 
         socket.on("disconnect", function() {
             window.__nitron_hmr_connected__ = false;
         });
 
-        socket.on("hmr:update", function(data) {
+        socket.on("connect_error", function() {
+            window.__nitron_hmr_connected__ = false;
+        });
+
+        socket.on("hmr:update", function() {
             refetchPage();
         });
 
-        socket.on("hmr:reload", function(data) {
+        socket.on("hmr:reload", function() {
             location.reload();
         });
 
         socket.on("hmr:css", function(data) {
-            updateCss(data.file);
+            refreshCss(data.file);
         });
 
         socket.on("hmr:error", function(data) {
-            showOverlay(data.message || "Unknown error", data.file);
+            showErrorOverlay(data.message || "Unknown error", data.file);
         });
     }
 
+    // Page Updates
     function refetchPage() {
         var url = location.pathname + location.search;
-        
+
         fetch("/__nitron/navigate?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.json();
+        .then(function(response) {
+            if (!response.ok) throw new Error("HTTP " + response.status);
+
+            return response.json();
         })
-        .then(function(d) {
-            if (d.error || d.redirect) {
+        .then(function(data) {
+            if (data.error || data.redirect) {
                 location.reload();
+
                 return;
             }
 
-            // Find current slot
             var slot = document.querySelector("[data-nitron-slot='page']");
-            if (!slot || !d.html) {
+
+            if (!slot || !data.html) {
                 location.reload();
+
                 return;
             }
 
-            // Parse response HTML and extract slot content
-            var tmp = document.createElement("div");
-            tmp.innerHTML = d.html;
-            var newSlot = tmp.querySelector("[data-nitron-slot='page']");
-            var newContent = newSlot ? newSlot.innerHTML : d.html;
+            var container = document.createElement("div");
+            container.innerHTML = data.html;
 
-            // Update slot content
-            slot.innerHTML = newContent;
+            var newSlot = container.querySelector("[data-nitron-slot='page']");
+            slot.innerHTML = newSlot ? newSlot.innerHTML : data.html;
 
-            // Update hydration
-            if (d.hydrationScript) {
-                if (d.runtime && window.__NITRON_RUNTIME__) {
-                    Object.assign(window.__NITRON_RUNTIME__, d.runtime);
+            if (data.hydrationScript) {
+                if (data.runtime && window.__NITRON_RUNTIME__) {
+                    Object.assign(window.__NITRON_RUNTIME__, data.runtime);
                 }
-                if (d.props) {
-                    window.__NITRON_PROPS__ = d.props;
+
+                if (data.props) {
+                    window.__NITRON_PROPS__ = data.props;
                 }
-                loadHydration(d.hydrationScript);
+
+                loadHydrationScript(data.hydrationScript);
             }
         })
-        .catch(function(e) {
+        .catch(function() {
             location.reload();
         });
     }
 
-    function loadHydration(scriptPath) {
+    function loadHydrationScript(scriptPath) {
         var script = document.createElement("script");
         script.type = "module";
         script.src = "/storage" + scriptPath + "?t=" + Date.now();
+
         script.onload = function() {
             if (window.__NITRON_REFRESH__) {
                 try {
                     window.__NITRON_REFRESH__.performReactRefresh();
-                } catch(e) {}
+                }
+                catch (e) {}
             }
+
             script.remove();
         };
+
         document.head.appendChild(script);
     }
 
-    function updateCss(file) {
+    // CSS Updates
+    function refreshCss(filename) {
         var links = document.querySelectorAll('link[rel="stylesheet"]');
         var timestamp = Date.now();
 
-        if (!file) {
+        if (!filename) {
             for (var i = 0; i < links.length; i++) {
                 var href = (links[i].href || "").split("?")[0];
                 links[i].href = href + "?t=" + timestamp;
             }
+
             return;
         }
 
         var found = false;
-        var target = file.split(/[\\/]/).pop();
+        var target = filename.split(/[\\/]/).pop();
 
         for (var i = 0; i < links.length; i++) {
             var href = (links[i].href || "").split("?")[0];
+
             if (href.endsWith("/" + target)) {
                 links[i].href = href + "?t=" + timestamp;
                 found = true;
             }
         }
 
-        if (!found) location.reload();
+        if (!found) {
+            location.reload();
+        }
     }
 
-    function showOverlay(msg, file) {
-        hideOverlay();
-        overlay = document.createElement("div");
-        overlay.id = "__nitron_error__";
-        overlay.innerHTML =
+    // Error Overlay
+    function showErrorOverlay(message, file) {
+        hideErrorOverlay();
+
+        errorOverlay = document.createElement("div");
+        errorOverlay.id = "__nitron_error__";
+        errorOverlay.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(msg) + '</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 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);
+
+        document.body.appendChild(errorOverlay);
     }
 
-    function hideOverlay() {
+    function hideErrorOverlay() {
         var el = document.getElementById("__nitron_error__");
-        if (el) el.remove();
-        overlay = null;
+
+        if (el) {
+            el.remove();
+        }
+
+        errorOverlay = null;
     }
 
+    // Utilities
     function escapeHtml(str) {
-        return String(str || "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+        return String(str || "")
+            .replace(/&/g, "&amp;")
+            .replace(/</g, "&lt;")
+            .replace(/>/g, "&gt;");
     }
 
+    // Initialize
     if (document.readyState === "loading") {
         document.addEventListener("DOMContentLoaded", connect);
-    } else {
+    }
+    else {
         connect();
     }
+
 })();

package/lib/View/{Manager.js → View.js}

@@ -6,8 +6,8 @@ import { AsyncLocalStorage } from "node:async_hooks";
 import { PassThrough } from "stream";
 import React from "react";
 import { renderToPipeableStream } from "react-dom/server";
-import Log from "../Logging/Manager.js";
-import Route from "../Route/Manager.js";
+import Log from "../Logging/Log.js";
+import Router from "../Route/Router.js";
 import Paths from "../Core/Paths.js";
 import Config from "../Core/Config.js";
 import Environment from "../Core/Environment.js";
@@ -38,6 +38,13 @@ function escapeHtml(str) {
     return String(str).replace(/[&<>"'`]/g, char => ESC_MAP[char]);
 }
 
+/**
+ * React SSR view renderer with streaming support.
+ * Handles component rendering, asset injection, and client hydration.
+ * 
+ * @example
+ * return View.render(res, "Dashboard", { user: currentUser });
+ */
 class View {
     static #root = Paths.project;
     static #userViews = Paths.buildViews;
@@ -110,27 +117,38 @@ class View {
             });
         });
 
-        server.get("/__nitron/navigate", async (req, res) => {
-            const url = req.query.url;
-            if (!url) {
-                return res.code(400).send({ error: "Missing url" });
-            }
+        if (View.#isDev) {
+            server.get("/__nitron/navigate", async (req, res) => {
+                const url = req.query.url;
+                if (!url) {
+                    return res.code(400).send({ error: "Missing url" });
+                }
 
-            const result = await View.#renderPartial(url, req, res);
-            
-            if (result.handled) return;
-            
-            return res
-                .code(result.status || 200)
-                .header("X-Content-Type-Options", "nosniff")
-                .send(result);
-        });
+                const result = await View.#renderPartial(url, req, res);
+                
+                if (result.handled) return;
+                
+                return res
+                    .code(result.status || 200)
+                    .header("X-Content-Type-Options", "nosniff")
+                    .send(result);
+            });
+
+            server.get("/__nitron/icon.png", async (req, res) => {
+                const iconPath = path.join(__dirname, "Client", "nitronjs-icon.png");
+                const iconBuffer = readFileSync(iconPath);
+                return res
+                    .header("Content-Type", "image/png")
+                    .header("Cache-Control", "public, max-age=31536000")
+                    .send(iconBuffer);
+            });
+        }
     }
 
     static async #renderPartial(url, originalReq, originalRes) {
         try {
             const parsedUrl = new URL(url, `http://${originalReq.headers.host}`);
-            const routeMatch = Route.match(parsedUrl.pathname, "GET");
+            const routeMatch = Router.match(parsedUrl.pathname, "GET");
 
             if (!routeMatch) {
                 return { status: 404, error: "Route not found" };
@@ -220,7 +238,7 @@ class View {
     }
 
     static #getRoutesForScript(script) {
-        const allRoutes = Route.getClientManifest();
+        const allRoutes = Router.getClientManifest();
         const usedNames = this.#getUsedRoutes(script);
         const routes = {};
         for (const name of usedNames) {
@@ -645,7 +663,7 @@ class View {
         const nonceAttr = nonce ? ` nonce="${escapeHtml(nonce)}"` : "";
         const hasHydration = !!hydrationScript;
 
-        const allRoutes = Route.getClientManifest();
+        const allRoutes = Router.getClientManifest();
         const usedRouteNames = hasHydration ? this.#getUsedRoutes(hydrationScript) : [];
         const routes = {};
         for (const name of usedRouteNames) {
@@ -733,10 +751,10 @@ ${vendorScript}${hmrScript}${hydrateScript}${spaScript}${devIndicator}
       box-shadow:0 6px 24px rgba(0,0,0,0.6);
     }
     #__nitron_dev_btn__ .logo { 
-      width:20px;height:20px;background:#fff;
-      border-radius:5px;display:flex;align-items:center;justify-content:center;
+      width:20px;height:20px;
+      display:flex;align-items:center;justify-content:center;
     }
-    #__nitron_dev_btn__ .logo svg { width:12px;height:12px; }
+    #__nitron_dev_btn__ .logo svg { width:20px;height:20px; }
     #__nitron_dev_btn__ .dot { width:6px;height:6px;border-radius:50%;animation:pulse 2s infinite; }
     @keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:0.4;} }
     #__nitron_dev_panel__ {
@@ -752,10 +770,9 @@ ${vendorScript}${hmrScript}${hydrateScript}${spaScript}${devIndicator}
       border-bottom:1px solid #1f1f1f;display:flex;align-items:center;gap:10px;
     }
     #__nitron_dev_panel__ .header .icon {
-      width:28px;height:28px;background:#fff;
+      width:28px;height:28px;
       border-radius:6px;display:flex;align-items:center;justify-content:center;
     }
-    #__nitron_dev_panel__ .header .icon svg { width:16px;height:16px; }
     #__nitron_dev_panel__ .header .info { display:flex;flex-direction:column; }
     #__nitron_dev_panel__ .header .title { font-size:14px;font-weight:600;color:#fff;line-height:1.2; }
     #__nitron_dev_panel__ .header .version { font-size:11px;color:#666;line-height:1.2; }
@@ -788,13 +805,13 @@ ${vendorScript}${hmrScript}${hydrateScript}${spaScript}${devIndicator}
     #__nitron_dev_panel__ .footer a:hover { background:#1a1a1a;color:#999;border-color:#2a2a2a; }
   </style>
   <button id="__nitron_dev_btn__">
-    <span class="logo"><svg viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2.5"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg></span>
+    <span class="logo"><img src="/__nitron/icon.png" alt="N" style="width:20px;height:20px;"></span>
     <span style="color:#888;">NitronJS</span>
     <span class="dot" id="__nitron_status_dot__" style="background:#4ade80;"></span>
   </button>
-  <div id="__nitron_dev_panel__">
+  <div id="__nitron_dev_panel__" style="display:none;">
     <div class="header">
-      <div class="icon"><svg viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg></div>
+      <div class="icon"><img src="/__nitron/icon.png" alt="N" style="width:28px;height:28px;"></div>
       <div class="info">
         <span class="title">NitronJS</span>
         <span class="version">v${FRAMEWORK_VERSION}</span>
@@ -802,11 +819,9 @@ ${vendorScript}${hmrScript}${hydrateScript}${spaScript}${devIndicator}
       <span class="badge">dev</span>
     </div>
     <div class="body">
-      <div class="row"><span class="label">Environment</span><span class="value"><span class="status ok"></span>Development</span></div>
       <div class="row"><span class="label">HMR</span><span class="value"><span class="status" id="__nitron_hmr_ind__"></span><span id="__nitron_hmr_txt__">Checking...</span></span></div>
       <div class="row"><span class="label">Server</span><span class="value">localhost:${port}</span></div>
       <div class="row"><span class="label">Node.js</span><span class="value">${nodeVersion}</span></div>
-      <div class="row"><span class="label">React</span><span class="value"><span class="status ok"></span>Ready</span></div>
     </div>
     <div class="footer">
       <a href="/__nitron/routes" target="_blank">Routes</a>

package/lib/index.d.ts

@@ -351,18 +351,23 @@ export class Config {
     static has(key: string): boolean;
 }
 
-export class Route {
-    static get(path: string, handler: any): Route;
-    static post(path: string, handler: any): Route;
-    static put(path: string, handler: any): Route;
-    static patch(path: string, handler: any): Route;
-    static delete(path: string, handler: any): Route;
+export class Router {
+    static get(path: string, handler: any): Router;
+    static post(path: string, handler: any): Router;
+    static put(path: string, handler: any): Router;
+    static patch(path: string, handler: any): Router;
+    static delete(path: string, handler: any): Router;
     static group(options: Record<string, any>, callback: () => void): void;
     static resource(name: string, controller: any): void;
-    name(name: string): Route;
-    middleware(...middleware: any[]): Route;
+    static prefix(prefix: string): Router;
+    static middleware(...middleware: any[]): Router;
+    name(name: string): Router;
+    middleware(...middleware: any[]): Router;
 }
 
+// Alias for backwards compatibility
+export { Router as Route };
+
 export class Mail {
     static to(address: string): Mail;
     static from(address: string): Mail;
@@ -394,6 +399,35 @@ export const Environment: any;
 
 export function start(): Promise<void>;
 
+// ─────────────────────────────────────────────────────────────────────────────
+// Path Aliases (for import convenience)
+// ─────────────────────────────────────────────────────────────────────────────
+
+declare module "@css/*" {
+    const content: string;
+    export default content;
+}
+
+declare module "@views/*" {
+    const component: React.ComponentType<any>;
+    export default component;
+}
+
+declare module "@models/*" {
+    const model: any;
+    export default model;
+}
+
+declare module "@controllers/*" {
+    const controller: any;
+    export default controller;
+}
+
+declare module "@middlewares/*" {
+    const middleware: any;
+    export default middleware;
+}
+
 // ─────────────────────────────────────────────────────────────────────────────
 // Global Functions (available in all views without import)
 // ─────────────────────────────────────────────────────────────────────────────

package/lib/index.js

@@ -3,18 +3,27 @@ export { default as Config } from "./Core/Config.js";
 export { default as Paths } from "./Core/Paths.js";
 export { default as Environment } from "./Core/Environment.js";
 
+// Version
+import { readFileSync } from "fs";
+import path from "path";
+import { fileURLToPath } from "url";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const packageJsonPath = path.join(__dirname, "../package.json");
+export const VERSION = JSON.parse(readFileSync(packageJsonPath, "utf-8")).version;
+
 // Http
 export { default as Server } from "./Http/Server.js";
 export { start } from "./Runtime/Entry.js";
 
 // Routing
-export { default as Route } from "./Route/Manager.js";
+export { default as Router } from "./Route/Router.js";
+export { default as Route } from "./Route/Router.js";
 
 // Database
 export { default as DB } from "./Database/DB.js";
 export { default as Model } from "./Database/Model.js";
 export { default as Schema } from "./Database/Schema/Manager.js";
-export { default as DatabaseManager } from "./Database/Manager.js";
 
 // Migration
 export { default as MigrationRunner } from "./Database/Migration/MigrationRunner.js";
@@ -25,35 +34,35 @@ export { default as Checksum } from "./Database/Migration/Checksum.js";
 export { default as SeederRunner } from "./Database/Seeder/SeederRunner.js";
 
 // Authentication
-export { default as Auth } from "./Auth/Manager.js";
+export { default as Auth } from "./Auth/Auth.js";
 
 // Session
 export { default as Session } from "./Session/Session.js";
 export { default as SessionManager } from "./Session/Manager.js";
 
 // View
-export { default as View } from "./View/Manager.js";
+export { default as View } from "./View/View.js";
 
 // Hashing
-export { default as Hash } from "./Hashing/Manager.js";
+export { default as Hash } from "./Hashing/Hash.js";
 
 // Logging
-export { default as Log } from "./Logging/Manager.js";
+export { default as Log } from "./Logging/Log.js";
 
 // Filesystem
-export { default as Storage } from "./Filesystem/Manager.js";
+export { default as Storage } from "./Filesystem/Storage.js";
 
 // Mail
-export { default as Mail } from "./Mail/Manager.js";
+export { default as Mail } from "./Mail/Mail.js";
 
 // Encryption
-export { default as AES } from "./Encryption/Manager.js";
+export { default as AES } from "./Encryption/Encryption.js";
 
 // Validation
 export { default as Validator } from "./Validation/Validator.js";
 
 // Translation
-export { default as Lang } from "./Translation/Manager.js";
+export { default as Lang } from "./Translation/Lang.js";
 
 // Date
 export { default as DateTime } from "./Date/DateTime.js";
@@ -64,5 +73,3 @@ export { default as Str } from "./Support/Str.js";
 // Faker
 export { default as Faker } from "./Faker/Faker.js";
 
-// Backward Compatibility Aliases
-export { default as Enviroment } from "./Core/Environment.js";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nitronjs/framework",
-	"version": "0.2.3",
+	"version": "0.2.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"

package/skeleton/app/Controllers/HomeController.js

@@ -1,7 +1,13 @@
+import { VERSION } from "@nitronjs/framework";
+
 class HomeController {
 
     static async index(req, res) {
-        return res.view("Site/Home");
+        const version = VERSION;
+        
+        return res.view("Site/Home", {
+            version
+        });
     }
 
 }

package/skeleton/resources/css/global.css

@@ -0,0 +1 @@
+@import "tailwindcss";