@nitronjs/framework 0.3.3 → 0.3.4

package/lib/Console/Commands/DevCommand.js

@@ -1,258 +1,301 @@
-#!/usr/bin/env node
-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";
-import Layout from "../../View/Layout.js";
-
-dotenv.config({ quiet: true });
-Environment.setDev(true);
-
-const C = { r: "\x1b[0m", d: "\x1b[2m", bold: "\x1b[1m", red: "\x1b[31m", g: "\x1b[32m", y: "\x1b[33m", b: "\x1b[34m", m: "\x1b[35m", c: "\x1b[36m" };
-
-// Using consistent-width characters for alignment
-const ICONS = {
-    info:  `${C.b}i${C.r}`,
-    ok:    `${C.g}✓${C.r}`,
-    err:   `${C.red}✗${C.r}`,
-    build: `${C.y}○${C.r}`,
-    hmr:   `${C.m}●${C.r}`,
-    watch: `${C.c}◐${C.r}`
-};
-
-const PATTERNS = {
-    views: ["resources/views/**/*.tsx", "resources/views/**/*.ts"],
-    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"]
-};
-
-class DevServer {
-    #proc = null;
-    #building = false;
-    #builder = new Builder();
-    #debounce = { build: null, restart: null };
-    #banner = null;
-
-    #log(icon, msg, extra) {
-        const time = new Date().toLocaleTimeString("en-US", { hour12: false, hour: "2-digit", minute: "2-digit", second: "2-digit" });
-        const iconStr = ICONS[icon] || ICONS.info;
-        const extraStr = extra ? ` ${C.d}(${extra})${C.r}` : "";
-        console.log(`${C.d}${time}${C.r} ${iconStr} ${msg}${extraStr}`);
-    }
-
-    async #build(only = null) {
-        if (this.#building) return { success: false, skipped: true };
-        this.#building = true;
-        this.#log("build", only ? `Building ${only}...` : "Building...");
-
-        try {
-            const result = await this.#builder.run(only, true, true);
-            this.#building = false;
-
-            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 };
-        }
-    }
-
-    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" }
-            });
-            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;
-            });
-            this.#proc.on("message", msg => {
-                if (msg?.type === "banner") this.#banner = msg.text;
-                if (msg?.type === "ready") resolve();
-            });
-            setTimeout(resolve, 5000);
-        });
-    }
-
-    #send(type, data) {
-        if (this.#proc?.connected) {
-            this.#proc.send({ type, ...data });
-        }
-    }
-
-    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");
-        });
-    }
-
-    #rel(p, base = Paths.project) {
-        return path.relative(base, p).replace(/\\/g, "/");
-    }
-
-    #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 #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("change", { changeType: "css", file: rel });
-            }, 100);
-            return;
-        }
-
-        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) {
-                    // When client component JS chunks are rebuilt, the browser
-                    // still has the old JS modules loaded in memory. RSC refetch
-                    // only updates the React tree data, not the actual JS code.
-                    // A full page reload is needed to load the new JS chunks.
-                    if (r.viewsChanged) {
-                        this.#send("reload", { reason: "Client component changed" });
-                    }
-                    else {
-                        const changeType = detectChangeType(filePath);
-                        this.#send("change", {
-                            changeType,
-                            cssChanged: r.cssChanged || false,
-                            file: rel
-                        });
-                    }
-                }
-            }, 100);
-            return;
-        }
-
-        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}`);
-    }
-
-    async #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[\\/]/, /\.nitron/],
-            persistent: true,
-            ignoreInitial: true,
-            usePolling: true,
-            interval: 100,
-            binaryInterval: 100,
-            awaitWriteFinish: { stabilityThreshold: 50, pollInterval: 20 }
-        });
-
-        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}`));
-
-        return new Promise(resolve => {
-            watcher.on("ready", () => {
-                this.#log("watch", `Watching ${watchPaths.length} directories`);
-                resolve(watcher);
-            });
-        });
-    }
-
-    async start() {
-        await this.#build();
-        await this.#start();
-        const watcher = await this.#watch();
-
-        if (this.#banner) console.log(this.#banner);
-
-        const exit = async () => {
-            console.log();
-            await watcher.close();
-            await this.#stop();
-            process.exitCode = 0;
-        };
-
-        process.on("SIGINT", exit);
-        process.on("SIGTERM", exit);
-    }
-}
-
-function detectChangeType(filePath) {
-    if (Layout.isLayout(filePath)) return "layout";
-
-    return "page";
-}
-
-export default async function Dev() {
-    await new DevServer().start();
-}
-
-if (process.argv[1]?.endsWith("DevCommand.js")) {
-    Dev().catch(e => { console.error(e); process.exitCode = 1; });
-}
+#!/usr/bin/env node
+import dotenv from "dotenv";
+import { spawn } from "child_process";
+import watcher from "@parcel/watcher";
+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";
+import Layout from "../../View/Layout.js";
+
+dotenv.config({ quiet: true });
+Environment.setDev(true);
+
+const C = { r: "\x1b[0m", d: "\x1b[2m", bold: "\x1b[1m", red: "\x1b[31m", g: "\x1b[32m", y: "\x1b[33m", b: "\x1b[34m", m: "\x1b[35m", c: "\x1b[36m" };
+
+const ICONS = {
+    info:  `${C.b}i${C.r}`,
+    ok:    `${C.g}✓${C.r}`,
+    err:   `${C.red}✗${C.r}`,
+    build: `${C.y}○${C.r}`,
+    hmr:   `${C.m}●${C.r}`,
+    watch: `${C.c}◐${C.r}`
+};
+
+const PATTERNS = {
+    views: ["resources/views/**/*.tsx", "resources/views/**/*.ts"],
+    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"]
+};
+
+const IGNORE_PATTERN = /node_modules|\.git|build[/\\]|storage[/\\]|\.nitron/;
+
+class DevServer {
+    #proc = null;
+    #building = false;
+    #builder = new Builder();
+    #debounce = { build: null, restart: null };
+    #banner = null;
+    #subscriptions = [];
+    #moduleGraph = null;
+
+    #log(icon, msg, extra) {
+        const time = new Date().toLocaleTimeString("en-US", { hour12: false, hour: "2-digit", minute: "2-digit", second: "2-digit" });
+        const iconStr = ICONS[icon] || ICONS.info;
+        const extraStr = extra ? ` ${C.d}(${extra})${C.r}` : "";
+        console.log(`${C.d}${time}${C.r} ${iconStr} ${msg}${extraStr}`);
+    }
+
+    async #build(only = null) {
+        if (this.#building) return { success: false, skipped: true };
+        this.#building = true;
+        this.#log("build", only ? `Building ${only}...` : "Building...");
+
+        try {
+            const result = await this.#builder.run(only, true, true);
+            this.#building = false;
+
+            if (result.success) {
+                this.#log("ok", "Build completed", `${result.time}ms`);
+
+                if (result.moduleGraph) {
+                    this.#moduleGraph = result.moduleGraph;
+                }
+            }
+            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 };
+        }
+    }
+
+    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" }
+            });
+
+            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;
+            });
+
+            this.#proc.on("message", msg => {
+                if (msg?.type === "banner") this.#banner = msg.text;
+                if (msg?.type === "ready") resolve();
+            });
+
+            setTimeout(resolve, 5000);
+        });
+    }
+
+    #send(type, data) {
+        if (this.#proc?.connected) {
+            this.#proc.send({ type, ...data });
+        }
+    }
+
+    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");
+        });
+    }
+
+    #rel(p, base = Paths.project) {
+        return path.relative(base, p).replace(/\\/g, "/");
+    }
+
+    #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 #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" });
+            }, 50);
+            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("change", { changeType: "css", file: rel });
+            }, 50);
+            return;
+        }
+
+        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) return;
+
+                if (this.#moduleGraph && r.viewsChanged) {
+                    const boundaries = this.#moduleGraph.getAffectedBoundaries(filePath);
+                    const clientBoundaries = [...boundaries].filter(b => this.#moduleGraph.isClientComponent(b));
+
+                    if (clientBoundaries.length > 0 && r.rebuiltChunks?.length) {
+                        this.#send("fast-refresh", {
+                            chunks: r.rebuiltChunks,
+                            cssChanged: r.cssChanged || false,
+                            timestamp: Date.now()
+                        });
+                    }
+                    else {
+                        this.#send("change", {
+                            changeType: detectChangeType(filePath),
+                            cssChanged: r.cssChanged || false,
+                            file: rel
+                        });
+                    }
+                }
+                else if (r.viewsChanged && r.rebuiltChunks?.length) {
+                    this.#send("fast-refresh", {
+                        chunks: r.rebuiltChunks,
+                        cssChanged: r.cssChanged || false,
+                        timestamp: Date.now()
+                    });
+                }
+                else if (r.viewsChanged) {
+                    this.#send("reload", { reason: "Client component changed" });
+                }
+                else {
+                    this.#send("change", {
+                        changeType: detectChangeType(filePath),
+                        cssChanged: r.cssChanged || false,
+                        file: rel
+                    });
+                }
+            }, 50);
+            return;
+        }
+
+        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" });
+            }, 100);
+            return;
+        }
+
+        this.#log("info", `Unmatched: ${rel}`);
+    }
+
+    async #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;
+        }
+
+        for (const dir of watchPaths) {
+            const sub = await watcher.subscribe(dir, (err, events) => {
+                if (err) {
+                    this.#log("err", `Watch error: ${err.message}`);
+                    return;
+                }
+
+                for (const event of events) {
+                    if (IGNORE_PATTERN.test(event.path)) continue;
+                    if (event.type === "delete") continue;
+
+                    this.#onChange(event.path);
+                }
+            });
+
+            this.#subscriptions.push(sub);
+        }
+
+        this.#log("watch", `Watching ${watchPaths.length} directories`);
+    }
+
+    async start() {
+        await this.#build();
+        await this.#start();
+        await this.#watch();
+
+        if (this.#banner) console.log(this.#banner);
+
+        const exit = async () => {
+            console.log();
+
+            for (const sub of this.#subscriptions) {
+                await sub.unsubscribe();
+            }
+
+            await this.#builder.dispose();
+            await this.#stop();
+            process.exitCode = 0;
+        };
+
+        process.on("SIGINT", exit);
+        process.on("SIGTERM", exit);
+    }
+}
+
+function detectChangeType(filePath) {
+    if (Layout.isLayout(filePath)) return "layout";
+
+    return "page";
+}
+
+export default async function Dev() {
+    await new DevServer().start();
+}
+
+if (process.argv[1]?.endsWith("DevCommand.js")) {
+    Dev().catch(e => { console.error(e); process.exitCode = 1; });
+}