@nitronjs/framework 0.1.24 → 0.2.0

package/lib/View/Manager.js

@@ -1,6 +1,6 @@
 import { existsSync, readFileSync, readdirSync, statSync } from "fs";
 import path from "path";
-import { pathToFileURL } from "url";
+import { pathToFileURL, fileURLToPath } from "url";
 import { randomBytes } from "crypto";
 import { AsyncLocalStorage } from "node:async_hooks";
 import { PassThrough } from "stream";
@@ -10,6 +10,12 @@ import Log from "../Logging/Manager.js";
 import Route from "../Route/Manager.js";
 import Paths from "../Core/Paths.js";
 import Config from "../Core/Config.js";
+import Environment from "../Core/Environment.js";
+
+// Get framework version from package.json
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const packageJsonPath = path.join(__dirname, "../../package.json");
+const FRAMEWORK_VERSION = JSON.parse(readFileSync(packageJsonPath, "utf-8")).version;
 
 const CTX = Symbol.for("__nitron_view_context__");
 const MARK = Symbol.for("__nitron_client_component__");
@@ -36,11 +42,14 @@ class View {
     static #root = Paths.project;
     static #userViews = Paths.buildViews;
     static #frameworkViews = Paths.buildFrameworkViews;
-    static #manifestPath = path.join(Paths.project, "build/manifest.json");
+    static #manifestPath = path.join(Paths.build, "manifest.json");
     static #manifest = null;
     static #routesCache = null;
     static #manifestMtime = null;
-    static #isDev = process.env.APP_DEV === "true";
+
+    static get #isDev() {
+        return Environment.isDev;
+    }
 
     static setup(server) {
         server.decorateReply("view", async function(name, params = {}) {
@@ -60,7 +69,8 @@ class View {
                     name,
                     params,
                     csrf,
-                    fastifyRequest
+                    fastifyRequest,
+                    entry
                 );
 
                 View.#setSecurityHeaders(this, nonce);
@@ -99,6 +109,124 @@ class View {
                 message: View.#isDev ? err.message : "An unexpected error occurred"
             });
         });
+
+        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);
+        });
+    }
+
+    static async #renderPartial(url, originalReq, originalRes) {
+        try {
+            const parsedUrl = new URL(url, `http://${originalReq.headers.host}`);
+            const routeMatch = Route.match(parsedUrl.pathname, "GET");
+
+            if (!routeMatch) {
+                return { status: 404, error: "Route not found" };
+            }
+
+            const { handler, params, route } = routeMatch;
+
+            let viewName = null;
+            let viewParams = {};
+            let redirectTo = null;
+            let handled = false;
+
+            const mockRes = {
+                view: (name, p = {}) => { viewName = name; viewParams = p; return mockRes; },
+                redirect: (loc) => { redirectTo = loc; return mockRes; },
+                code: (c) => { originalRes.code(c); return mockRes; },
+                type: (t) => { originalRes.type(t); return mockRes; },
+                send: (d) => { handled = true; originalRes.send(d); return mockRes; },
+                header: (k, v) => { originalRes.header(k, v); return mockRes; }
+            };
+
+            const mockReq = {
+                ...originalReq,
+                url: parsedUrl.pathname,
+                query: Object.fromEntries(parsedUrl.searchParams),
+                params,
+                session: originalReq.session
+            };
+
+            for (const mw of route.middlewares || []) {
+                if (redirectTo || handled) break;
+                try {
+                    await mw(mockReq, mockRes);
+                } catch (err) {
+                    if (err.statusCode === 401 || err.statusCode === 403) {
+                        return { status: err.statusCode, error: err.message };
+                    }
+                    throw err;
+                }
+            }
+
+            if (handled) return { handled: true };
+            if (redirectTo) return this.#validateRedirect(redirectTo, originalReq.headers.host);
+
+            await handler(mockReq, mockRes);
+
+            if (handled) return { handled: true };
+            if (redirectTo) return this.#validateRedirect(redirectTo, originalReq.headers.host);
+            if (!viewName) return { status: 500, error: "No view rendered" };
+
+            const entry = this.#getEntry("user", viewName);
+            if (!entry) return { status: 404, error: "View not found" };
+
+            const csrf = originalReq.session?.getCsrfToken?.();
+            const { html, meta, props } = await this.#render(
+                this.#userViews, viewName, viewParams, csrf, originalReq, entry
+            );
+
+            const response = { html, layouts: entry.layouts || [], meta };
+
+            if (entry.hydrationScript) {
+                response.hydrationScript = entry.hydrationScript;
+                response.props = props;
+                response.runtime = {
+                    csrf: csrf || "",
+                    routes: this.#getRoutesForScript(entry.hydrationScript)
+                };
+            }
+
+            return response;
+        } catch (err) {
+            Log.error("SPA Navigate Error", { error: err.message, url });
+            return { status: 500, error: this.#isDev ? err.message : "Server error" };
+        }
+    }
+
+    static #validateRedirect(location, host) {
+        if (location.startsWith("/")) {
+            return { redirect: location };
+        }
+        try {
+            if (new URL(location).host === host) {
+                return { redirect: location };
+            }
+        } catch {}
+        return { status: 400, error: "Invalid redirect" };
+    }
+
+    static #getRoutesForScript(script) {
+        const allRoutes = Route.getClientManifest();
+        const usedNames = this.#getUsedRoutes(script);
+        const routes = {};
+        for (const name of usedNames) {
+            if (allRoutes[name]) routes[name] = allRoutes[name];
+        }
+        return routes;
     }
 
     static #getEntry(namespace, name) {
@@ -128,7 +256,7 @@ class View {
         return this.#manifest;
     }
 
-    static async #render(baseDir, name, params, csrf = "", fastifyRequest = null) {
+    static async #render(baseDir, name, params, csrf = "", fastifyRequest = null, entry = null) {
         if (!name || typeof name !== "string") {
             throw new Error("Invalid view name");
         }
@@ -150,6 +278,19 @@ class View {
             throw new Error("View must have a default export");
         }
 
+        const layoutChain = entry?.layouts || [];
+        const layoutModules = [];
+
+        for (const layoutName of layoutChain) {
+            const layoutPath = path.join(baseDir, layoutName + ".js");
+            if (existsSync(layoutPath)) {
+                const layoutMod = await import(pathToFileURL(layoutPath).href + `?t=${Date.now()}`);
+                if (layoutMod.default) {
+                    layoutModules.push(layoutMod);
+                }
+            }
+        }
+
         const nonce = randomBytes(16).toString("hex");
         const ctx = {
             nonce,
@@ -184,6 +325,15 @@ class View {
                 element = React.createElement(Component, params);
             }
 
+            if (layoutModules.length > 0) {
+                element = React.createElement("div", { "data-nitron-slot": "page" }, element);
+            }
+
+            for (let i = layoutModules.length - 1; i >= 0; i--) {
+                const LayoutComponent = layoutModules[i].default;
+                element = React.createElement(LayoutComponent, { children: element });
+            }
+
             html = await Context.run(ctx, () => this.#renderToHtml(element));
             collectedProps = ctx.props;
         } catch (error) {
@@ -203,14 +353,51 @@ class View {
             throw error;
         }
 
+        const mergedMeta = this.#mergeMeta(layoutModules, mod.Meta);
+
         return {
             html,
             nonce,
-            meta: mod.Meta ?? null,
+            meta: mergedMeta,
             props: collectedProps
         };
     }
 
+    static #mergeMeta(layoutModules, viewMeta) {
+        const result = {};
+
+        for (const layoutMod of layoutModules) {
+            if (layoutMod.Meta) {
+                for (const key of Object.keys(layoutMod.Meta)) {
+                    if (!(key in result)) {
+                        result[key] = layoutMod.Meta[key];
+                    }
+                }
+            }
+        }
+
+        if (viewMeta) {
+            for (const key of Object.keys(viewMeta)) {
+                if (key === "title" && result.title?.template) {
+                    const viewTitle = typeof viewMeta.title === "object"
+                        ? viewMeta.title.default
+                        : viewMeta.title;
+                    if (viewTitle) {
+                        result.title = result.title.template.replace("%s", viewTitle);
+                    }
+                } else {
+                    result[key] = viewMeta[key];
+                }
+            }
+        }
+
+        if (result.title && typeof result.title === "object") {
+            result.title = result.title.default || "NitronJS";
+        }
+
+        return Object.keys(result).length ? result : null;
+    }
+
     static #parseReactError(error) {
         const result = {
             cause: null,
@@ -399,6 +586,7 @@ class View {
             meta: processedMeta,
             css: cssFiles,
             hydrationScript: entry?.hydrationScript,
+            layouts: entry?.layouts || [],
             nonce,
             csrf,
             props
@@ -453,41 +641,47 @@ class View {
         scan(jsDir);
     }
 
-    static #generateHtml({ html, meta, css, hydrationScript, nonce, csrf, props }) {
+    static #generateHtml({ html, meta, css, hydrationScript, layouts, nonce, csrf, props }) {
         const nonceAttr = nonce ? ` nonce="${escapeHtml(nonce)}"` : "";
+        const hasHydration = !!hydrationScript;
 
-        let runtimeScript = "";
-        if (hydrationScript) {
-            const allRoutes = Route.getClientManifest();
-            const usedRouteNames = this.#getUsedRoutes(hydrationScript);
-            const routes = {};
-
-            for (const routeName of usedRouteNames) {
-                if (allRoutes[routeName]) {
-                    routes[routeName] = allRoutes[routeName];
-                }
-            }
-
-            const propsJson = JSON.stringify(props || {})
-                .replace(/</g, "\\u003c")
-                .replace(/>/g, "\\u003e");
+        const allRoutes = Route.getClientManifest();
+        const usedRouteNames = hasHydration ? this.#getUsedRoutes(hydrationScript) : [];
+        const routes = {};
+        for (const name of usedRouteNames) {
+            if (allRoutes[name]) routes[name] = allRoutes[name];
+        }
 
-            const runtimeData = JSON.stringify({
-                csrf: csrf || "",
-                routes
-            });
+        const runtimeData = {
+            csrf: csrf || "",
+            routes,
+            layouts: layouts || []
+        };
 
-            runtimeScript = `<script${nonceAttr}>window.__NITRON_RUNTIME__=${runtimeData};window.__NITRON_PROPS__=${propsJson};</script>`;
+        let runtimeScript;
+        if (hasHydration) {
+            const propsJson = JSON.stringify(props || {}).replace(/</g, "\\u003c").replace(/>/g, "\\u003e");
+            runtimeScript = `<script${nonceAttr}>window.__NITRON_RUNTIME__=${JSON.stringify(runtimeData)};window.__NITRON_PROPS__=${propsJson};</script>`;
+        } else {
+            runtimeScript = `<script${nonceAttr}>window.__NITRON_RUNTIME__=${JSON.stringify(runtimeData)};</script>`;
         }
 
-        const vendorScript = hydrationScript
+        const vendorScript = hasHydration || this.#isDev
             ? `<script src="/storage/js/vendor.js"${nonceAttr}></script>`
             : "";
 
-        const hydrateScript = hydrationScript
+        const hmrScript = this.#isDev
+            ? `<script src="/__nitron_hmr/socket.io.js"${nonceAttr}></script><script src="/storage/js/hmr.js"${nonceAttr}></script>`
+            : "";
+
+        const hydrateScript = hasHydration
             ? `<script type="module" src="/storage${hydrationScript}"${nonceAttr}></script>`
             : "";
 
+        const spaScript = `<script${nonceAttr} src="/storage/js/spa.js"></script>`;
+
+        const devIndicator = this.#isDev ? this.#generateDevIndicator(nonceAttr) : "";
+
         return `<!DOCTYPE html>
 <html lang="en">
 <head>
@@ -495,7 +689,8 @@ ${this.#generateHead(meta, css)}
 </head>
 <body>
 <div id="app">${html}</div>
-${runtimeScript}${vendorScript}${hydrateScript}
+${runtimeScript}
+${vendorScript}${hmrScript}${hydrateScript}${spaScript}${devIndicator}
 </body>
 </html>`;
     }
@@ -518,27 +713,176 @@ ${runtimeScript}${vendorScript}${hydrateScript}
         return parts.join("\n");
     }
 
+    static #generateDevIndicator(nonceAttr) {
+        const nodeVersion = process.version;
+        const port = Config.get("server.port", 3000);
+        
+        return `
+<div id="__nitron_dev__" style="position:fixed;bottom:16px;left:16px;z-index:999999;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;">
+  <style${nonceAttr}>
+    #__nitron_dev__ * { box-sizing: border-box; }
+    #__nitron_dev_btn__ {
+      display:flex;align-items:center;gap:8px;padding:8px 14px;
+      background:#0a0a0a;
+      color:#fff;border:1px solid #1f1f1f;border-radius:10px;
+      cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,0.5);
+      transition:all 0.2s ease;font-size:13px;font-weight:500;
+    }
+    #__nitron_dev_btn__:hover {
+      background:#111;border-color:#2a2a2a;
+      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;
+    }
+    #__nitron_dev_btn__ .logo svg { width:12px;height:12px; }
+    #__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__ {
+      display:none;position:absolute;bottom:48px;left:0;width:260px;
+      background:#0a0a0a;
+      border:1px solid #1f1f1f;border-radius:12px;
+      box-shadow:0 16px 48px rgba(0,0,0,0.6);
+      overflow:hidden;animation:slideUp 0.15s ease-out;
+    }
+    @keyframes slideUp { from{opacity:0;transform:translateY(8px);} to{opacity:1;transform:translateY(0);} }
+    #__nitron_dev_panel__ .header {
+      padding:14px 16px;background:#111;
+      border-bottom:1px solid #1f1f1f;display:flex;align-items:center;gap:10px;
+    }
+    #__nitron_dev_panel__ .header .icon {
+      width:28px;height:28px;background:#fff;
+      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; }
+    #__nitron_dev_panel__ .header .badge {
+      margin-left:auto;padding:3px 8px;background:#1a1a1a;
+      color:#4ade80;font-size:10px;font-weight:600;border-radius:4px;text-transform:uppercase;
+      border:1px solid #2a2a2a;
+    }
+    #__nitron_dev_panel__ .body { padding:12px 16px; }
+    #__nitron_dev_panel__ .row {
+      display:flex;justify-content:space-between;align-items:center;
+      padding:7px 0;border-bottom:1px solid #1a1a1a;
+    }
+    #__nitron_dev_panel__ .row:last-child { border-bottom:none; }
+    #__nitron_dev_panel__ .row .label { color:#666;font-size:12px; }
+    #__nitron_dev_panel__ .row .value { color:#999;font-size:12px;font-weight:500;display:flex;align-items:center;gap:6px; }
+    #__nitron_dev_panel__ .row .status { width:6px;height:6px;border-radius:50%; }
+    #__nitron_dev_panel__ .row .status.ok { background:#4ade80; }
+    #__nitron_dev_panel__ .row .status.warn { background:#fbbf24; }
+    #__nitron_dev_panel__ .row .status.err { background:#ef4444; }
+    #__nitron_dev_panel__ .footer {
+      padding:10px 16px;background:#080808;border-top:1px solid #1a1a1a;
+      display:flex;gap:6px;
+    }
+    #__nitron_dev_panel__ .footer a {
+      flex:1;padding:6px;background:#111;border:1px solid #1f1f1f;
+      border-radius:6px;color:#666;font-size:10px;text-decoration:none;text-align:center;
+      transition:all 0.15s;
+    }
+    #__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 style="color:#888;">NitronJS</span>
+    <span class="dot" id="__nitron_status_dot__" style="background:#4ade80;"></span>
+  </button>
+  <div id="__nitron_dev_panel__">
+    <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="info">
+        <span class="title">NitronJS</span>
+        <span class="version">v${FRAMEWORK_VERSION}</span>
+      </div>
+      <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>
+      <a href="/__nitron/info" target="_blank">Info</a>
+      <a href="https://nitronjs.dev/docs" target="_blank">Docs</a>
+    </div>
+  </div>
+</div>
+<script${nonceAttr}>
+(function(){
+  var btn=document.getElementById('__nitron_dev_btn__');
+  var panel=document.getElementById('__nitron_dev_panel__');
+  var dot=document.getElementById('__nitron_status_dot__');
+  var hmrInd=document.getElementById('__nitron_hmr_ind__');
+  var hmrTxt=document.getElementById('__nitron_hmr_txt__');
+  btn.onclick=function(e){e.stopPropagation();panel.style.display=panel.style.display==='none'?'block':'none';};
+  document.addEventListener('click',function(e){if(!e.target.closest('#__nitron_dev__'))panel.style.display='none';});
+  function updateHmr(){
+    var connected=window.__nitron_hmr_connected__;
+    hmrInd.className='status '+(connected?'ok':'err');
+    hmrTxt.textContent=connected?'Connected':'Disconnected';
+    dot.style.background=connected?'#4ade80':'#ef4444';
+  }
+  if(typeof io!=='undefined'){setInterval(updateHmr,1000);updateHmr();}
+  else{hmrInd.className='status warn';hmrTxt.textContent='Not Available';}
+})();
+</script>`;
+    }
+
     static #setSecurityHeaders(res, nonce) {
         const connectSrc = this.#isDev ? "'self' ws: wss:" : "'self'";
-
-        // Get CSP whitelist from config
         const cspConfig = Config.get("app.csp", {});
-        const whitelist = {
-            styles: cspConfig.styles || [],
-            fonts: cspConfig.fonts || [],
-            images: cspConfig.images || [],
-            scripts: cspConfig.scripts || [],
-            connect: cspConfig.connect || [],
-            frames: cspConfig.frames || [],
+        
+        // Support for simple URL array format
+        // Example: csp: ["https://fonts.googleapis.com", "https://fonts.gstatic.com"]
+        // Or detailed format: csp: { styles: [...], fonts: [...] }
+        const isSimpleFormat = Array.isArray(cspConfig);
+        
+        let whitelist;
+        if (isSimpleFormat) {
+            // Simple format: apply URLs to all relevant directives
+            const urls = cspConfig.filter(u => u !== "*");
+            const hasWildcard = cspConfig.includes("*");
+            whitelist = {
+                styles: hasWildcard ? ["*"] : urls,
+                fonts: hasWildcard ? ["*"] : urls,
+                images: hasWildcard ? ["*"] : urls,
+                scripts: hasWildcard ? ["*"] : urls,
+                connect: hasWildcard ? ["*"] : urls,
+                frames: hasWildcard ? ["*"] : [],
+            };
+        } else {
+            whitelist = {
+                styles: cspConfig.styles || [],
+                fonts: cspConfig.fonts || [],
+                images: cspConfig.images || [],
+                scripts: cspConfig.scripts || [],
+                connect: cspConfig.connect || [],
+                frames: cspConfig.frames || [],
+            };
+        }
+
+        // Build CSP directives with wildcard support
+        const buildSrc = (defaults, extra) => {
+            if (extra.includes("*")) return "*";
+            return [...defaults, ...extra].join(" ");
         };
 
-        // Build CSP directives with whitelist
-        const styleSrc = ["'self'", "'unsafe-inline'", ...whitelist.styles].join(" ");
-        const fontSrc = ["'self'", ...whitelist.fonts].join(" ");
-        const imgSrc = ["'self'", "data:", "blob:", ...whitelist.images].join(" ");
-        const scriptSrc = ["'self'", `'nonce-${nonce}'`, ...whitelist.scripts].join(" ");
-        const connectSrcFinal = [connectSrc, ...whitelist.connect].join(" ");
-        const frameSrc = whitelist.frames.length ? whitelist.frames.join(" ") : "'none'";
+        const styleSrc = buildSrc(["'self'", "'unsafe-inline'"], whitelist.styles);
+        const fontSrc = buildSrc(["'self'"], whitelist.fonts);
+        const imgSrc = buildSrc(["'self'", "data:", "blob:"], whitelist.images);
+        const scriptSrc = buildSrc(["'self'", `'nonce-${nonce}'`], whitelist.scripts);
+        const connectSrcFinal = buildSrc([connectSrc], whitelist.connect);
+        const frameSrc = whitelist.frames.length 
+            ? (whitelist.frames.includes("*") ? "*" : whitelist.frames.join(" ")) 
+            : "'none'";
 
         const csp = [
             "default-src 'self'",

package/lib/index.d.ts

@@ -405,3 +405,58 @@ export const Paths: any;
 export const Environment: any;
 
 export function start(): Promise<void>;
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Global Functions (available in all views without import)
+// ─────────────────────────────────────────────────────────────────────────────
+
+declare global {
+    /**
+     * Returns the CSRF token for the current request.
+     * Works on both SSR and client-side.
+     * 
+     * @example
+     * <input type="hidden" name="_csrf" value={csrf()} />
+     * fetch('/api', { headers: { 'X-CSRF-Token': csrf() } })
+     */
+    function csrf(): string;
+
+    /**
+     * Returns the URL for a named route.
+     * Works on both SSR and client-side.
+     * 
+     * @param name - The route name as defined in routes/web.js
+     * @param params - Optional route parameters
+     * @example
+     * <a href={route('home')}>Home</a>
+     * <a href={route('user.edit', { id: 1 })}>Edit</a>
+     */
+    function route(name: string, params?: Record<string, any>): string;
+
+    /**
+     * Returns the current request object.
+     * Only works in Server Components during SSR.
+     * 
+     * @example
+     * const tab = request().query.tab || 'general';
+     * const id = request().params.id;
+     */
+    function request(): {
+        path: string;
+        method: string;
+        query: Record<string, any>;
+        params: Record<string, any>;
+        body: Record<string, any>;
+        headers: Record<string, string>;
+        cookies: Record<string, string>;
+        ip: string;
+        isAjax: boolean;
+        session: {
+            get<T = any>(key: string, defaultValue?: T): T;
+            set(key: string, value: any): void;
+            has(key: string): boolean;
+            forget(key: string): void;
+            flash(key: string, value: any): void;
+        };
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nitronjs/framework",
-	"version": "0.1.24",
+	"version": "0.2.0",
 	"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"
@@ -34,6 +34,7 @@
 		"postcss": "^8.5.6",
 		"react": "^19.2.3",
 		"react-dom": "^19.2.3",
+		"react-refresh": "^0.18.0",
 		"socket.io": "^4.8.1",
 		"tailwindcss": "^4.1.18",
 		"typescript": "^5.9.3"

package/skeleton/.env.example

@@ -2,8 +2,6 @@ APP_NAME=nitronjs
 APP_KEY=
 APP_URL=http://localhost
 APP_PORT=3000
-APP_DEV=true
-APP_DEBUG=true
 
 FILESYSTEM_DRIVER=disk
 

package/skeleton/app/Controllers/HomeController.js

@@ -1,9 +1,33 @@
 class HomeController {
-    static async index(request, reply) {
-        return reply.view("Site/Home", {
-            name: "NitronJS"
+    
+    static async index(req, res) {
+        return res.view("Site/Home", {
+            title: "Welcome to NitronJS",
+            features: [
+                {
+                    icon: "⚡",
+                    title: "Lightning Fast",
+                    description: "Server-side rendering with React for blazing fast page loads"
+                },
+                {
+                    icon: "🔥",
+                    title: "Hot Module Reload",
+                    description: "See your changes instantly without losing application state"
+                },
+                {
+                    icon: "🛡️",
+                    title: "Secure by Default",
+                    description: "Built-in CSRF protection, secure sessions, and CSP headers"
+                },
+                {
+                    icon: "📦",
+                    title: "MVC Architecture",
+                    description: "Clean separation of concerns with Models, Views, and Controllers"
+                }
+            ]
         });
     }
+
 }
 
 export default HomeController;