@nitronjs/framework 0.1.24 → 0.2.0

package/lib/Console/Commands/DevCommand.js

@@ -3,383 +3,223 @@ import dotenv from "dotenv";
 import { spawn } from "child_process";
 import chokidar from "chokidar";
 import path from "path";
+import fs from "fs";
 import Paths from "../../Core/Paths.js";
+import Environment from "../../Core/Environment.js";
+import Builder from "../../Build/Manager.js";
 
 dotenv.config({ quiet: true });
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Constants
-// ─────────────────────────────────────────────────────────────────────────────
-
-const FRAMEWORK_DIR = Paths.framework;
-const PROJECT_DIR = Paths.project;
-
-const COLORS = {
-    reset: "\x1b[0m",
-    bold: "\x1b[1m",
-    dim: "\x1b[2m",
-    red: "\x1b[31m",
-    green: "\x1b[32m",
-    yellow: "\x1b[33m",
-    blue: "\x1b[34m",
-    magenta: "\x1b[35m",
-    cyan: "\x1b[36m"
+Environment.setDev(true);
+
+const C = { r: "\x1b[0m", d: "\x1b[2m", red: "\x1b[31m", g: "\x1b[32m", y: "\x1b[33m", b: "\x1b[34m", m: "\x1b[35m", c: "\x1b[36m" };
+const ICONS = {
+    info:  `${C.b}ℹ${C.r} `,
+    ok:    `${C.g}✓${C.r} `,
+    err:   `${C.red}✗${C.r} `,
+    build: `${C.m}⟳${C.r} `,
+    hmr:   `${C.c}⚡${C.r}`,
+    watch: `${C.y}○${C.r} `
 };
 
-// Watch configuration (relative to PROJECT_DIR)
-const WATCH_CONFIG = {
-    // Files that trigger only a build (no server restart)
-    // Controllers are hot-reloaded via dynamic import in dev mode
-    buildOnly: [
-        "resources/views/**/*.tsx",
-        "resources/views/**/*.ts",
-        "resources/css/**/*.css",
-        "app/Controllers/*.js",
-        "app/Middlewares/*.js",
-        "app/Middlewares/**/*.js"
-    ],
-    
-    // Files that trigger a full server restart
-    fullRestart: [
-        "config/**/*.js",
-        "app/Kernel.js",
-        "app/Models/**/*.js",
-        "routes/**/*.js",
-        "app.js"
-    ],
-    
-    // Framework files (relative to FRAMEWORK_DIR) - trigger build only
-    frameworkBuildOnly: [
-        "lib/View/Templates/**/*.tsx",
-        "lib/View/Templates/**/*.ts"
-    ],
-    
-    // Ignored patterns
-    ignore: [
-        "**/node_modules/**",
-        "**/build/**",
-        "**/storage/app/public/**",
-        "**/storage/framework/**",
-        "**/storage/logs/**",
-        "**/.nitron/**",
-        "**/.git/**",
-        "**/package-lock.json"
-    ]
+const PATTERNS = {
+    views: ["resources/views/**/*.tsx"],
+    css: ["resources/css/**/*.css"],
+    restart: ["config/**/*.js", "app/Kernel.js", "app/Models/**/*.js", "routes/**/*.js", "app.js", "app/Controllers/**/*.js", "app/Middlewares/**/*.js"],
+    framework: ["lib/View/Templates/**/*.tsx"]
 };
 
-// ─────────────────────────────────────────────────────────────────────────────
-// Dev Server Class
-// ─────────────────────────────────────────────────────────────────────────────
-
 class DevServer {
-    #serverProcess = null;
-    #isBuilding = false;
-    #pendingRestart = false;
-    #pendingBuild = false;
-    #buildDebounceTimer = null;
-    #restartDebounceTimer = null;
-    #watcherReady = false;
-
-    constructor() {
-        //
+    #proc = null;
+    #building = false;
+    #builder = new Builder();
+    #debounce = { build: null, restart: null };
+
+    #log(icon, msg, extra) {
+        const t = `${C.d}${new Date().toLocaleTimeString()}${C.r}`;
+        console.log(`${t} ${ICONS[icon] || ICONS.info} ${msg}${extra ? ` ${C.d}(${extra})${C.r}` : ""}`);
     }
 
-    // ─────────────────────────────────────────────────────────────────────────
-    // Logging
-    // ─────────────────────────────────────────────────────────────────────────
+    async #build(only = null) {
+        if (this.#building) return { success: false, skipped: true };
+        this.#building = true;
+        this.#log("build", only ? `Building ${only}...` : "Building...");
 
-    #log(type, message, details = null) {
-        const now = new Date();
-        const time = `${COLORS.dim}${now.toLocaleTimeString()}${COLORS.reset}`;
-        
-        const icons = {
-            info:    `${COLORS.blue}[i]${COLORS.reset}`,
-            success: `${COLORS.green}[✓]${COLORS.reset}`,
-            warning: `${COLORS.yellow}[!]${COLORS.reset}`,
-            error:   `${COLORS.red}[✗]${COLORS.reset}`,
-            build:   `${COLORS.magenta}[~]${COLORS.reset}`,
-            reload:  `${COLORS.cyan}[↻]${COLORS.reset}`,
-            watch:   `${COLORS.yellow}[○]${COLORS.reset}`
-        };
+        try {
+            const result = await this.#builder.run(only, true, true);
+            this.#building = false;
 
-        const icon = icons[type] || icons.info;
-        let output = `${time} ${icon} ${message}`;
-        
-        if (details) {
-            output += ` ${COLORS.dim}(${details})${COLORS.reset}`;
+            if (result.success) {
+                this.#log("ok", "Build completed", `${result.time}ms`);
+            } else {
+                this.#log("err", "Build failed");
+                if (result.error) this.#send("error", { message: result.error });
+            }
+            return result;
+        } catch (e) {
+            this.#building = false;
+            this.#log("err", `Build error: ${e.message}`);
+            this.#send("error", { message: e.message });
+            return { success: false, error: e.message };
         }
-        
-        console.log(output);
     }
 
-    // ─────────────────────────────────────────────────────────────────────────
-    // Build Process
-    // ─────────────────────────────────────────────────────────────────────────
-
-    async #runBuild(buildArg = null) {
-        if (this.#isBuilding) {
-            this.#pendingBuild = true;
-            return false;
-        }
-
-        this.#isBuilding = true;
-        const startTime = Date.now();
-        this.#log("build", "Building...");
-
-        return new Promise((resolve) => {
-            const buildScript = path.join(FRAMEWORK_DIR, "lib/Console/Commands/BuildCommand.js");
-            const args = [buildScript];
-            if (buildArg) args.push(buildArg);
-            
-            const buildProcess = spawn(process.execPath, args, {
-                cwd: PROJECT_DIR,
-                stdio: ["inherit", "pipe", "pipe"]
+    async #start() {
+        return new Promise(resolve => {
+            this.#proc = spawn(process.execPath, [path.join(Paths.framework, "lib/Runtime/Entry.js")], {
+                cwd: process.cwd(),
+                stdio: ["inherit", "inherit", "inherit", "ipc"],
+                env: { ...process.env, __NITRON_DEV__: "true" }
             });
-
-            let output = "";
-
-            buildProcess.stdout.on("data", (data) => {
-                output += data.toString();
-            });
-
-            buildProcess.stderr.on("data", (data) => {
-                output += data.toString();
-            });
-
-            buildProcess.on("close", (code) => {
-                this.#isBuilding = false;
-                const duration = Date.now() - startTime;
-
-                if (code === 0) {
-                    this.#log("success", `Build completed`, `${duration}ms`);
-                    
-                    if (this.#pendingBuild) {
-                        this.#pendingBuild = false;
-                        this.#runBuild().then(resolve);
-                    }
-                    else {
-                        resolve(true);
-                    }
-                }
-                else {
-                    this.#log("error", "Build failed");
-                    console.log(output);
-                    resolve(false);
-                }
+            this.#proc.on("error", e => this.#log("err", e.message));
+            this.#proc.on("close", code => {
+                if (code && code !== 0) this.#log("err", `Exit code ${code}`);
+                this.#proc = null;
             });
+            setTimeout(resolve, 500);
         });
     }
 
-    // ─────────────────────────────────────────────────────────────────────────
-    // Server Process Management
-    // ─────────────────────────────────────────────────────────────────────────
-
-    async #startServer() {
-        return new Promise((resolve) => {
-            const entryScript = path.join(FRAMEWORK_DIR, "lib/Runtime/Entry.js");
-            
-            this.#serverProcess = spawn(process.execPath, [entryScript], {
-                cwd: PROJECT_DIR,
-                stdio: ["inherit", "inherit", "inherit"],
-                env: { ...process.env, APP_DEV: "true" }
-            });
-
-            this.#serverProcess.on("error", (err) => {
-                this.#log("error", `Server error: ${err.message}`);
-            });
-
-            this.#serverProcess.on("close", (code) => {
-                if (code !== 0 && code !== null && !this.#pendingRestart) {
-                    this.#log("error", `Server exited with code ${code}`);
-                }
-                this.#serverProcess = null;
-            });
-
-            setTimeout(() => resolve(), 500);
-        });
+    #send(type, data) {
+        if (this.#proc?.connected) {
+            this.#proc.send({ type, ...data });
+        }
     }
 
-    async #stopServer() {
-        if (!this.#serverProcess) return;
-
-        return new Promise((resolve) => {
-            
-            const forceKillTimer = setTimeout(() => {
-                if (this.#serverProcess) {
-                    this.#serverProcess.kill("SIGKILL");
-                }
-                resolve();
-            }, 5000);
-
-            this.#serverProcess.once("close", () => {
-                clearTimeout(forceKillTimer);
-                resolve();
-            });
-
-            this.#serverProcess.kill("SIGTERM");
+    async #stop() {
+        if (!this.#proc) return;
+        return new Promise(resolve => {
+            const timeout = setTimeout(() => { this.#proc?.kill("SIGKILL"); resolve(); }, 5000);
+            this.#proc.once("close", () => { clearTimeout(timeout); resolve(); });
+            this.#proc.kill("SIGTERM");
         });
     }
 
-    async #restartServer() {
-        if (this.#pendingRestart) return;
-        
-        this.#pendingRestart = true;
-        await this.#stopServer();
-        await this.#startServer();
-        this.#pendingRestart = false;
-    }
-
-    #getRelativePath(filePath, baseDir = PROJECT_DIR) {
-        return path.relative(baseDir, filePath).replace(/\\/g, "/");
+    #rel(p, base = Paths.project) {
+        return path.relative(base, p).replace(/\\/g, "/");
     }
 
-    #matchesPattern(filePath, patterns, baseDir = PROJECT_DIR) {
-        const relativePath = this.#getRelativePath(filePath, baseDir);
-        
-        return patterns.some(pattern => {
-            let regexPattern = pattern
-                .replace(/\*\*\//g, "<<ANYDIR>>")     // **/ = any directory depth
-                .replace(/\*\*/g, "<<ANYCHAR>>")      // ** = any characters
-                .replace(/\*/g, "[^/]*")              // * = any characters except /
-                .replace(/\//g, "\\/")                // escape forward slashes
-                .replace(/<<ANYDIR>>/g, "(?:.*\\/)?") // restore **/ placeholder
-                .replace(/<<ANYCHAR>>/g, ".*");       // restore ** placeholder
-            
-            const regex = new RegExp(`^${regexPattern}$`);
-            return regex.test(relativePath);
+    #match(p, patterns, base = Paths.project) {
+        const rel = this.#rel(p, base);
+        return patterns.some(pat => {
+            if (pat.includes("**")) {
+                const [prefix, suffix] = pat.split("**");
+                const dir = prefix.replace(/\/$/, "");
+                const ext = suffix.replace(/^\/?\*/, "");
+                return rel.startsWith(dir) && rel.endsWith(ext);
+            }
+            return rel === pat;
         });
     }
 
-    async #handleFileChange(filePath, eventType) {
-        const relativePath = this.#getRelativePath(filePath);
-        const frameworkRelativePath = this.#getRelativePath(filePath, FRAMEWORK_DIR);
-        
-        // Check framework files first (lib/View/Templates)
-        if (this.#matchesPattern(filePath, WATCH_CONFIG.frameworkBuildOnly, FRAMEWORK_DIR)) {
-            this.#log("reload", `Framework file changed: ${frameworkRelativePath}`);
-            
-            clearTimeout(this.#buildDebounceTimer);
-            this.#buildDebounceTimer = setTimeout(async () => {
-                await this.#runBuild();
+    async #onChange(filePath) {
+        const rel = this.#rel(filePath);
+
+        if (this.#match(filePath, PATTERNS.framework, Paths.framework)) {
+            this.#log("build", `Framework: ${this.#rel(filePath, Paths.framework)}`);
+            clearTimeout(this.#debounce.build);
+            this.#debounce.build = setTimeout(async () => {
+                const r = await this.#build();
+                if (r.success) this.#send("reload", { reason: "Framework template changed" });
+            }, 100);
+            return;
+        }
+
+        if (this.#match(filePath, PATTERNS.css)) {
+            this.#log("hmr", rel);
+            clearTimeout(this.#debounce.build);
+            this.#debounce.build = setTimeout(async () => {
+                const r = await this.#build("css");
+                if (r.success) this.#send("css", { filePath });
             }, 100);
-            
             return;
         }
-        
-        // Check project build-only files
-        if (this.#matchesPattern(filePath, WATCH_CONFIG.buildOnly)) {
-            this.#log("reload", `File changed: ${relativePath}`);
-            // CSS only needs CSS rebuild
-            // TSX needs views + CSS (Tailwind scans TSX for classes)
-            const isCss = filePath.endsWith(".css");
-            const buildArg = isCss ? "--only=css" : null; // null = full build for TSX
-            
-            clearTimeout(this.#buildDebounceTimer);
-            this.#buildDebounceTimer = setTimeout(async () => {
-                await this.#runBuild(buildArg);
+
+        if (this.#match(filePath, PATTERNS.views)) {
+            this.#log("hmr", rel);
+            clearTimeout(this.#debounce.build);
+            this.#debounce.build = setTimeout(async () => {
+                const r = await this.#build();
+                if (r.success) {
+                    if (r.cssChanged) this.#send("css", {});
+                    this.#send("view", { filePath });
+                }
             }, 100);
-            
             return;
         }
 
-        if (this.#matchesPattern(filePath, WATCH_CONFIG.fullRestart)) {
-            this.#log("reload", `File changed: ${relativePath}`, "full restart");
-            
-            clearTimeout(this.#restartDebounceTimer);
-            this.#restartDebounceTimer = setTimeout(async () => {
-                await this.#runBuild();
-                await this.#restartServer();
+        if (this.#match(filePath, PATTERNS.restart)) {
+            this.#log("build", rel, "restart required");
+            clearTimeout(this.#debounce.restart);
+            this.#debounce.restart = setTimeout(async () => {
+                await this.#build();
+                await this.#stop();
+                await this.#start();
+                this.#send("reload", { reason: "Server restarted" });
             }, 200);
-            
             return;
         }
+
+        this.#log("info", `Unmatched: ${rel}`);
     }
 
-    #setupWatcher() {
-        const watchPaths = [
-            path.join(PROJECT_DIR, "resources/views"),
-            path.join(PROJECT_DIR, "resources/css"),
-            path.join(FRAMEWORK_DIR, "lib/View/Templates"),
-            path.join(PROJECT_DIR, "config"),
-            path.join(PROJECT_DIR, "app"),
-            path.join(PROJECT_DIR, "routes"),
-            path.join(PROJECT_DIR, "app.js")
+    #watch() {
+        const candidates = [
+            path.join(Paths.project, "resources/views"),
+            path.join(Paths.project, "resources/css"),
+            path.join(Paths.project, "config"),
+            path.join(Paths.project, "app"),
+            path.join(Paths.project, "routes"),
+            path.join(Paths.framework, "lib/View/Templates")
         ];
 
+        const watchPaths = candidates.filter(p => fs.existsSync(p));
+
+        if (!watchPaths.length) {
+            this.#log("err", "No watch paths found");
+            return { close: () => {} };
+        }
+
         const watcher = chokidar.watch(watchPaths, {
-            ignored: [
-                /node_modules/,
-                /\.git/,
-                /build[\\\/]/,
-                /storage[\\\/]app[\\\/]public/,
-                /storage[\\\/]framework/,
-                /storage[\\\/]logs/,
-                /\.nitron/,
-                /package-lock\.json$/
-            ],
+            ignored: [/node_modules/, /\.git/, /build[\\/]/, /storage[\\/]/, /\.nitron/],
             persistent: true,
             ignoreInitial: true,
-            usePolling: false,
-            awaitWriteFinish: {
-                stabilityThreshold: 100,
-                pollInterval: 50
-            }
+            usePolling: true,
+            interval: 100,
+            binaryInterval: 100,
+            awaitWriteFinish: { stabilityThreshold: 50, pollInterval: 20 }
         });
 
-        watcher.on("change", (filePath) => this.#handleFileChange(filePath, "change"));
-        watcher.on("add", (filePath) => this.#handleFileChange(filePath, "add"));
-        watcher.on("unlink", (filePath) => this.#handleFileChange(filePath, "unlink"));
-
+        watcher.on("change", p => this.#onChange(p));
+        watcher.on("add", p => this.#onChange(p));
+        watcher.on("error", e => this.#log("err", `Watch error: ${e.message}`));
         watcher.on("ready", () => {
-            if (!this.#watcherReady) {
-                this.#watcherReady = true;
-                this.#log("watch", "Watching for file changes...");
-            }
-        });
-
-        watcher.on("error", (error) => {
-            this.#log("error", `Watcher error: ${error.message}`);
+            this.#log("watch", `Watching ${watchPaths.length} directories`);
         });
 
         return watcher;
     }
 
     async start() {
-        // Initial build
-        const buildSuccess = await this.#runBuild();
-        if (!buildSuccess) {
-            this.#log("error", "Initial build failed. Watching for changes...");
-        }
-
-        // Start server
-        await this.#startServer();
-
-        // Setup file watcher
-        const watcher = this.#setupWatcher();
+        await this.#build();
+        await this.#start();
+        const watcher = this.#watch();
 
-        // Graceful shutdown
-        const cleanup = async () => {
+        const exit = async () => {
             console.log();
             watcher.close();
-            await this.#stopServer();
+            await this.#stop();
             process.exit(0);
         };
 
-        process.on("SIGINT", cleanup);
-        process.on("SIGTERM", cleanup);
+        process.on("SIGINT", exit);
+        process.on("SIGTERM", exit);
     }
 }
 
 export default async function Dev() {
-    const devServer = new DevServer();
-    await devServer.start();
+    await new DevServer().start();
 }
 
-// Auto-run when called directly
-const isMain = process.argv[1]?.endsWith("DevCommand.js");
-if (isMain) {
-    Dev().catch(err => {
-        console.error(err);
-        process.exit(1);
-    });
+if (process.argv[1]?.endsWith("DevCommand.js")) {
+    Dev().catch(e => { console.error(e); process.exit(1); });
 }

package/lib/Console/Stubs/page-hydration-dev.tsx

@@ -0,0 +1,72 @@
+import React from "react";
+import { createRoot } from "react-dom/client";
+
+// __COMPONENT_IMPORTS__
+
+const componentManifest: Record<string, React.ComponentType<any>> = {};
+
+// __COMPONENT_MANIFEST__
+
+const w = window as any;
+const prevRefreshReg = w.$RefreshReg$;
+const prevRefreshSig = w.$RefreshSig$;
+
+if (typeof w.$RefreshReg$ === "function") {
+    const moduleId = "__NITRON_MODULE_ID__";
+    w.$RefreshReg$ = (type: any, id: string) => {
+        const fullId = moduleId + "_" + id;
+        if (prevRefreshReg) prevRefreshReg(type, fullId);
+    };
+}
+
+if (typeof w.$RefreshSig$ === "function") {
+    w.$RefreshSig$ = prevRefreshSig;
+}
+
+// __COMPONENT_REGISTRATIONS__
+
+function mount() {
+    const props = (window as any).__NITRON_PROPS__ || {};
+    if (!(window as any).__NITRON_ROOTS__) (window as any).__NITRON_ROOTS__ = new Map();
+
+    const islands = document.querySelectorAll<HTMLElement>("[data-cid]");
+
+    islands.forEach(element => {
+        const componentName = element.dataset.island;
+        const componentId = element.dataset.cid;
+
+        if (!componentName || !componentId) return;
+
+        const Component = componentManifest[componentName];
+        if (!Component) return;
+
+        const componentProps = props[componentId] || {};
+
+        try {
+            const roots = (window as any).__NITRON_ROOTS__ as Map<HTMLElement, any>;
+            let root = roots.get(element);
+            if (!root) {
+                root = createRoot(element);
+                roots.set(element, root);
+            }
+            root.render(React.createElement(Component, componentProps));
+        } catch {
+        }
+    });
+
+    delete (window as any).__NITRON_PROPS__;
+
+    if ((window as any).__NITRON_REFRESH__) {
+        (window as any).__NITRON_REFRESH__.performReactRefresh();
+    }
+}
+
+const isHmrUpdate = (window as any).__NITRON_HMR_UPDATE__;
+
+if (!isHmrUpdate) {
+    if (document.readyState === "loading") {
+        document.addEventListener("DOMContentLoaded", mount);
+    } else {
+        mount();
+    }
+}

package/lib/Console/Stubs/page-hydration.tsx

@@ -6,6 +6,7 @@ import { createRoot } from "react-dom/client";
 declare global {
     interface Window {
         __NITRON_PROPS__?: Record<string, any>;
+        __NITRON_ROOTS__?: Map<HTMLElement, any>;
     }
 }
 
@@ -15,6 +16,7 @@ const componentManifest: Record<string, React.ComponentType<any>> = {};
 
 function mount() {
     const props = window.__NITRON_PROPS__ || {};
+    if (!window.__NITRON_ROOTS__) window.__NITRON_ROOTS__ = new Map();
 
     const islands = document.querySelectorAll<HTMLElement>("[data-cid]");
 
@@ -22,22 +24,19 @@ function mount() {
         const componentName = element.dataset.island;
         const componentId = element.dataset.cid;
 
-        if (!componentName || !componentId) {
-            return;
-        }
+        if (!componentName || !componentId) return;
 
         const Component = componentManifest[componentName];
-
-        if (!Component) {
-            return;
-        }
+        if (!Component) return;
 
         const componentProps = props[componentId] || {};
 
         try {
-            // Use createRoot for full client-side rendering
-            // This ensures animations and effects work correctly
-            const root = createRoot(element);
+            let root = window.__NITRON_ROOTS__.get(element);
+            if (!root) {
+                root = createRoot(element);
+                window.__NITRON_ROOTS__.set(element, root);
+            }
             root.render(React.createElement(Component, componentProps));
         } catch {
         }