@nitronjs/framework 0.2.18 → 0.2.19

package/cli/njs.js

@@ -1,4 +1,4 @@
-#!/usr/bin/env node
+#!/usr/bin/env node
 
 const COLORS = {
     reset: "\x1b[0m",

package/lib/Build/FactoryTransform.js

@@ -0,0 +1,132 @@
+import fs from "fs";
+import path from "path";
+import { init, parse } from "es-module-lexer";
+
+await init;
+
+/**
+ * Transforms a built view module into an async factory function.
+ * Keeps imports at module level, wraps body code in a factory
+ * that re-executes per request. Skips "use client" modules.
+ */
+function transformFile(filePath) {
+    const code = fs.readFileSync(filePath, "utf8");
+    const trimmed = code.trimStart();
+
+    if (trimmed.startsWith('"use client"') || trimmed.startsWith("'use client'")) {
+        return false;
+    }
+
+    let imports;
+
+    try {
+        [imports] = parse(code);
+    }
+    catch {
+        return false;
+    }
+
+    // Collect static import statement ranges
+    const importRanges = [];
+
+    for (const imp of imports) {
+        if (imp.d === -1) {
+            importRanges.push({ start: imp.ss, end: imp.se });
+        }
+    }
+
+    importRanges.sort((a, b) => a.start - b.start);
+
+    // Find last `export { ... };` block
+    let exportStart = code.length;
+
+    while (true) {
+        exportStart = code.lastIndexOf("export", exportStart - 1);
+        if (exportStart === -1) return false;
+        if (code.slice(exportStart + 6).trimStart().startsWith("{")) break;
+    }
+
+    const exportClose = code.indexOf("};", exportStart);
+
+    if (exportClose === -1) return false;
+
+    const exportEnd = exportClose + 2;
+    const exportInner = code.slice(exportStart, exportEnd).match(/\{([\s\S]*)\}/)?.[1];
+
+    if (!exportInner) return false;
+
+    // Build return statement from export specifiers
+    const returnParts = [];
+
+    for (const spec of exportInner.split(",").map(s => s.trim()).filter(Boolean)) {
+        const m = spec.match(/^(.+?)\s+as\s+(.+)$/);
+
+        if (m) {
+            const local = m[1].trim();
+            const exported = m[2].trim();
+
+            returnParts.push(exported === "default" ? `"default": ${local}` : `${exported}: ${local}`);
+        }
+        else {
+            returnParts.push(spec);
+        }
+    }
+
+    // Separate imports from body
+    const excludes = [...importRanges, { start: exportStart, end: exportEnd }];
+
+    excludes.sort((a, b) => a.start - b.start);
+
+    const importLines = importRanges.map(r => code.slice(r.start, r.end).trim());
+    const bodyParts = [];
+    let cursor = 0;
+
+    for (const range of excludes) {
+        if (cursor < range.start) {
+            bodyParts.push(code.slice(cursor, range.start));
+        }
+        cursor = range.end;
+    }
+
+    const remaining = code.slice(cursor).trim();
+
+    if (remaining && !remaining.startsWith("//# sourceMappingURL")) {
+        bodyParts.push(remaining);
+    }
+
+    const body = bodyParts.join("").trim();
+
+    // Write transformed file
+    const output =
+        importLines.join("\n") + "\n\n" +
+        "export const __factory = true;\n\n" +
+        "export default async function __viewFactory() {\n" +
+        body + "\n" +
+        "return { " + returnParts.join(", ") + " };\n" +
+        "}\n";
+
+    fs.writeFileSync(filePath, output);
+    return true;
+}
+
+/**
+ * Transforms all built view files in a directory tree.
+ */
+function transformDirectory(dir) {
+    let count = 0;
+
+    for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+        const full = path.join(dir, entry.name);
+
+        if (entry.isDirectory()) {
+            count += transformDirectory(full);
+        }
+        else if (entry.name.endsWith(".js") && !entry.name.endsWith(".map")) {
+            if (transformFile(full)) count++;
+        }
+    }
+
+    return count;
+}
+
+export { transformFile, transformDirectory };

package/lib/Build/Manager.js

@@ -20,6 +20,7 @@ import {
     createMarkerPlugin,
     createServerModuleBlockerPlugin
 } from "./plugins.js";
+import { transformFile as factoryTransform } from "./FactoryTransform.js";
 import COLORS from "./colors.js";
 
 dotenv.config({ quiet: true });
@@ -334,6 +335,11 @@ class Builder {
             this.#cache.viewsChanged = true;
             await this.#runEsbuild(changedFiles, outDir, { meta, outbase: srcDir });
             await this.#postProcessMeta(changedFiles, srcDir, outDir);
+
+            for (const entry of changedFiles) {
+                const rel = path.relative(srcDir, entry).replace(/\.tsx$/, ".js");
+                factoryTransform(path.join(outDir, rel));
+            }
         }
 
         this.#stats[namespace === "user" ? "user" : "framework"] = entries.length;

package/lib/Build/jsxRuntime.js

@@ -84,6 +84,35 @@ function wrapWithDepth(children) {
     return OriginalJsx.jsx(DepthContext.Provider, { value: true, children });
 }
 
+// Deep Proxy that tracks which prop paths are accessed during SSR
+function trackProps(obj) {
+    const accessed = new Set();
+
+    function wrap(target, path) {
+        if (target === null || typeof target !== 'object') return target;
+
+        return new Proxy(target, {
+            get(t, prop, receiver) {
+                if (typeof prop === 'symbol') return Reflect.get(t, prop, receiver);
+
+                const val = Reflect.get(t, prop, receiver);
+                if (typeof val === 'function') return val;
+
+                const currentPath = path ? path + '.' + String(prop) : String(prop);
+                accessed.add(currentPath);
+
+                if (val !== null && typeof val === 'object') {
+                    return wrap(val, currentPath);
+                }
+
+                return val;
+            }
+        });
+    }
+
+    return { proxy: wrap(obj, ''), accessed };
+}
+
 // Creates an island wrapper for client components (hydrated independently)
 function createIsland(Component, name) {
     function IslandBoundary(props) {
@@ -92,18 +121,20 @@ function createIsland(Component, name) {
         }
 
         const id = React.useId();
-        const safeProps = sanitizeProps(props) || {};
+        const tracker = trackProps(props);
 
         const ctx = getContext();
         if (ctx) {
             ctx.props = ctx.props || {};
-            ctx.props[id] = safeProps;
+            ctx.trackers = ctx.trackers || {};
+            ctx.props[id] = props;
+            ctx.trackers[id] = tracker.accessed;
         }
 
         return OriginalJsx.jsx('div', {
             'data-cid': id,
             'data-island': name,
-            children: wrapWithDepth(OriginalJsx.jsx(Component, props))
+            children: wrapWithDepth(OriginalJsx.jsx(Component, tracker.proxy))
         });
     }
 

package/lib/View/View.js

@@ -38,6 +38,34 @@ function escapeHtml(str) {
     return String(str).replace(/[&<>"'`]/g, char => ESC_MAP[char]);
 }
 
+function trackProps(obj) {
+    const accessed = new Set();
+
+    function wrap(target, prefix) {
+        if (target === null || typeof target !== "object") return target;
+
+        return new Proxy(target, {
+            get(t, prop, receiver) {
+                if (typeof prop === "symbol") return Reflect.get(t, prop, receiver);
+
+                const val = Reflect.get(t, prop, receiver);
+                if (typeof val === "function") return val;
+
+                const currentPath = prefix ? prefix + "." + String(prop) : String(prop);
+                accessed.add(currentPath);
+
+                if (val !== null && typeof val === "object") {
+                    return wrap(val, currentPath);
+                }
+
+                return val;
+            }
+        });
+    }
+
+    return { proxy: wrap(obj, ""), accessed };
+}
+
 /**
  * React SSR view renderer with streaming support.
  * Handles component rendering, asset injection, and client hydration.
@@ -338,14 +366,19 @@ class View {
                 let element;
 
                 if (Component[MARK]) {
-                    ctx.props[":R0:"] = this.#sanitizeProps(params);
+                    const tracker = trackProps(params);
+
+                    ctx.props[":R0:"] = params;
+                    ctx.trackers = ctx.trackers || {};
+                    ctx.trackers[":R0:"] = tracker.accessed;
+
                     element = React.createElement(
                         "div",
                         {
                             "data-cid": ":R0:",
                             "data-island": Component.displayName || Component.name || "Anonymous"
                         },
-                        React.createElement(Component, params)
+                        React.createElement(Component, tracker.proxy)
                     );
                 } else {
                     element = Component(params);
@@ -368,6 +401,15 @@ class View {
                 }
 
                 html = await this.#renderToHtml(element);
+
+                if (ctx.trackers) {
+                    for (const [id, accessed] of Object.entries(ctx.trackers)) {
+                        if (ctx.props[id]) {
+                            ctx.props[id] = this.#pickProps(ctx.props[id], accessed);
+                        }
+                    }
+                }
+
                 collectedProps = ctx.props;
             } catch (error) {
                 const componentName = mod.default?.displayName || mod.default?.name || "Unknown";
@@ -478,17 +520,27 @@ class View {
 
     static async #importModule(filePath) {
         const url = pathToFileURL(filePath).href;
+        let cached = this.#moduleCache.get(filePath);
 
         if (this.#isDev) {
-            return import(url + `?t=${Date.now()}`);
+            const mtime = statSync(filePath).mtimeMs;
+
+            if (!cached || cached.mtime !== mtime) {
+                const mod = await import(url + `?v=${mtime}`);
+                cached = { mod, mtime };
+                this.#moduleCache.set(filePath, cached);
+            }
+
+            return cached.mod.__factory ? await cached.mod.default() : cached.mod;
         }
 
-        let mod = this.#moduleCache.get(filePath);
-        if (!mod) {
-            mod = await import(url);
-            this.#moduleCache.set(filePath, mod);
+        if (!cached) {
+            const mod = await import(url);
+            cached = { mod };
+            this.#moduleCache.set(filePath, cached);
         }
-        return mod;
+
+        return cached.mod.__factory ? await cached.mod.default() : cached.mod;
     }
 
     static #sanitizeProps(obj, seen = new WeakSet()) {
@@ -549,6 +601,48 @@ class View {
         return result;
     }
 
+    static #pickProps(props, accessed) {
+        const paths = [...accessed].sort();
+        const leaves = [];
+
+        for (let i = 0; i < paths.length; i++) {
+            const isLeaf = i === paths.length - 1 || !paths[i + 1].startsWith(paths[i] + ".");
+
+            if (isLeaf) {
+                leaves.push(paths[i]);
+            }
+        }
+
+        const result = {};
+
+        for (const leaf of leaves) {
+            const parts = leaf.split(".");
+            let src = props;
+            let dst = result;
+
+            for (let i = 0; i < parts.length - 1; i++) {
+                if (src == null) break;
+
+                const nextSrc = src[parts[i]];
+
+                if (dst[parts[i]] == null) {
+                    dst[parts[i]] = Array.isArray(nextSrc) ? [] : {};
+                }
+
+                src = nextSrc;
+                dst = dst[parts[i]];
+            }
+
+            const last = parts[parts.length - 1];
+
+            if (src != null && !(Array.isArray(dst) && last === "length")) {
+                dst[last] = src[last];
+            }
+        }
+
+        return this.#sanitizeProps(result);
+    }
+
     static #renderToHtml(element) {
         return new Promise((resolve, reject) => {
             const chunks = [];

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nitronjs/framework",
-	"version": "0.2.18",
+	"version": "0.2.19",
 	"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"
@@ -27,6 +27,7 @@
 		"bcrypt": "^5.1.1",
 		"chokidar": "^5.0.0",
 		"dotenv": "^17.2.3",
+		"es-module-lexer": "^2.0.0",
 		"esbuild": "^0.27.2",
 		"fastify": "^5.6.2",
 		"mysql2": "^3.16.0",