@nitronjs/framework 0.3.3 → 0.3.5

package/lib/Build/Manager.js

@@ -18,11 +18,13 @@ import {
     createCssStubPlugin,
     createServerModuleBlockerPlugin,
     createClientReferencePlugin,
-    createPropFilterPlugin
+    createPropFilterPlugin,
+    createFastRefreshPlugin
 } from "./plugins.js";
 import { transformFile as factoryTransform } from "./FactoryTransform.js";
 import PropUsageAnalyzer from "./PropUsageAnalyzer.js";
 import EffectivePropUsage from "./EffectivePropUsage.js";
+import ModuleGraph from "./ModuleGraph.js";
 import COLORS from "./colors.js";
 
 dotenv.config({ quiet: true });
@@ -49,7 +51,7 @@ class Builder {
         spaBuilt: false,
         hmrBuilt: false,
         rscConsumerBuilt: false,
-        tailwindProcessor: null,
+        refreshBuilt: false,
         viewsChanged: false,
         fileMeta: new Map(),
         fileHashes: new Map(),
@@ -60,6 +62,8 @@ class Builder {
     #devBuiltOnce = false;
     #analyzer;
     #cssBuilder;
+    #contexts = new Map();
+    #moduleGraph = new ModuleGraph();
 
     constructor() {
         this.#paths = {
@@ -117,6 +121,8 @@ class Builder {
                 changedFiles: [...this.#changedFiles],
                 cssChanged: this.#stats.css > 0,
                 viewsChanged: this.#cache.viewsChanged,
+                rebuiltChunks: this.#cache.lastRebuiltChunks || [],
+                moduleGraph: this.#moduleGraph,
                 time: Date.now() - startTime
             };
         } catch (error) {
@@ -133,38 +139,55 @@ class Builder {
 
     #loadDiskCache() {
         try {
-            if (fs.existsSync(this.#diskCachePath)) {
-                const data = JSON.parse(fs.readFileSync(this.#diskCachePath, "utf8"));
-
-                if (data.fileMeta) {
-                    for (const [key, value] of Object.entries(data.fileMeta)) {
-                        value.imports = value.imports || [];
-                        value.css = value.css || [];
-                        this.#cache.fileMeta.set(key, value);
-                    }
+            if (!fs.existsSync(this.#diskCachePath)) return;
+
+            const data = JSON.parse(fs.readFileSync(this.#diskCachePath, "utf8"));
+
+            if (data.version !== this.#getCacheVersion()) {
+                fs.unlinkSync(this.#diskCachePath);
+                return;
+            }
+
+            if (data.fileMeta) {
+                for (const [key, value] of Object.entries(data.fileMeta)) {
+                    value.imports = value.imports || [];
+                    value.css = value.css || [];
+                    this.#cache.fileMeta.set(key, value);
                 }
-                if (data.fileHashes) {
-                    for (const [key, value] of Object.entries(data.fileHashes)) {
-                        this.#cache.fileHashes.set(key, value);
-                    }
+            }
+
+            if (data.fileHashes) {
+                for (const [key, value] of Object.entries(data.fileHashes)) {
+                    this.#cache.fileHashes.set(key, value);
                 }
-                if (data.viewHashes) {
-                    for (const [key, value] of Object.entries(data.viewHashes)) {
-                        this.#cache.viewHashes.set(key, value);
-                    }
+            }
+
+            if (data.viewHashes) {
+                for (const [key, value] of Object.entries(data.viewHashes)) {
+                    this.#cache.viewHashes.set(key, value);
                 }
-                if (data.cssHashes) {
-                    for (const [key, value] of Object.entries(data.cssHashes)) {
-                        this.#cache.cssHashes.set(key, value);
-                    }
+            }
+
+            if (data.cssHashes) {
+                for (const [key, value] of Object.entries(data.cssHashes)) {
+                    this.#cache.cssHashes.set(key, value);
                 }
-                if (data.propAnalysis) {
-                    for (const [key, value] of Object.entries(data.propAnalysis)) {
-                        this.#cache.propAnalysis.set(key, value);
-                    }
+            }
+
+            if (data.propAnalysis) {
+                for (const [key, value] of Object.entries(data.propAnalysis)) {
+                    this.#cache.propAnalysis.set(key, value);
                 }
             }
-        } catch {}
+        }
+        catch {}
+    }
+
+    #getCacheVersion() {
+        const frameworkVersion = "0.3.3";
+        const esbuildVersion = esbuild.version || "unknown";
+
+        return frameworkVersion + ":" + esbuildVersion;
     }
 
     #saveDiskCache() {
@@ -175,6 +198,7 @@ class Builder {
             }
 
             const data = {
+                version: this.#getCacheVersion(),
                 fileMeta: {},
                 fileHashes: {},
                 viewHashes: {},
@@ -244,10 +268,11 @@ class Builder {
     }
 
     async #buildViews() {
-        const [, , , , userBundle, frameworkBundle] = await Promise.all([
+        const [, , , , , userBundle, frameworkBundle] = await Promise.all([
             this.#buildVendor(),
             this.#buildSpaRuntime(),
             this.#buildHmrClient(),
+            this.#buildRefreshRuntime(),
             this.#buildRscConsumer(),
             this.#buildViewBundle("user", this.#paths.userViews, this.#paths.userOutput),
             this.#buildViewBundle("framework", this.#paths.frameworkViews, this.#paths.frameworkOutput)
@@ -286,13 +311,14 @@ class Builder {
             this.#changedFiles.add(file);
         }
 
-        const clientComponents = await this.#buildClientComponents(
+        const { clientFiles, rebuiltChunks } = await this.#buildClientComponents(
             userBundle,
             frameworkBundle,
             changedViews
         );
 
-        this.#writeClientManifest(clientComponents);
+        this.#cache.lastRebuiltChunks = rebuiltChunks;
+        this.#writeClientManifest(clientFiles);
         this.#writeManifest();
     }
 
@@ -304,7 +330,7 @@ class Builder {
             ? path.join(this.#paths.templates, "vendor-dev.tsx")
             : path.join(this.#paths.templates, "vendor.tsx");
 
-        await esbuild.build({
+        await this.#buildOnce("vendor", {
             entryPoints: [vendorFile],
             outfile,
             bundle: true,
@@ -316,6 +342,7 @@ class Builder {
             keepNames: true,
             jsx: "automatic"
         });
+
         this.#cache.vendorBuilt = true;
     }
 
@@ -325,7 +352,7 @@ class Builder {
         const outfile = path.join(this.#paths.jsOutput, "hmr.js");
         if (this.#cache.hmrBuilt && fs.existsSync(outfile)) return;
 
-        await esbuild.build({
+        await this.#buildOnce("hmr", {
             entryPoints: [path.join(Paths.frameworkLib, "View/Client/hmr-client.js")],
             outfile,
             bundle: false,
@@ -334,14 +361,35 @@ class Builder {
             target: "es2020",
             minify: false
         });
+
         this.#cache.hmrBuilt = true;
     }
 
+    async #buildRefreshRuntime() {
+        if (!this.#isDev) return;
+
+        const outfile = path.join(this.#paths.jsOutput, "react-refresh-runtime.js");
+        if (this.#cache.refreshBuilt && fs.existsSync(outfile)) return;
+
+        await this.#buildOnce("refresh", {
+            entryPoints: [path.join(Paths.frameworkLib, "View/Client/refresh-entry.cjs")],
+            outfile,
+            bundle: true,
+            platform: "browser",
+            format: "iife",
+            globalName: "$RefreshRuntime$",
+            target: "es2020",
+            minify: false
+        });
+
+        this.#cache.refreshBuilt = true;
+    }
+
     async #buildSpaRuntime() {
         const outfile = path.join(this.#paths.jsOutput, "spa.js");
         if (this.#cache.spaBuilt && fs.existsSync(outfile)) return;
 
-        await esbuild.build({
+        await this.#buildOnce("spa", {
             entryPoints: [path.join(Paths.frameworkLib, "View/Client/spa.js")],
             outfile,
             bundle: true,
@@ -350,6 +398,7 @@ class Builder {
             target: "es2020",
             minify: !this.#isDev
         });
+
         this.#cache.spaBuilt = true;
     }
 
@@ -359,7 +408,7 @@ class Builder {
 
         const consumerFile = path.join(this.#paths.templates, "rsc-consumer.tsx");
 
-        await esbuild.build({
+        await this.#buildOnce("rsc", {
             entryPoints: [consumerFile],
             outfile,
             bundle: true,
@@ -375,9 +424,24 @@ class Builder {
                 createCssStubPlugin()
             ]
         });
+
         this.#cache.rscConsumerBuilt = true;
     }
 
+    async #buildOnce(name, config) {
+        if (!this.#isDev) {
+            await esbuild.build(config);
+            return;
+        }
+
+        if (!this.#contexts.has(name)) {
+            const ctx = await esbuild.context(config);
+            this.#contexts.set(name, { ctx, entryKey: null });
+        }
+
+        await this.#contexts.get(name).ctx.rebuild();
+    }
+
     async #buildViewBundle(namespace, srcDir, outDir) {
         if (!fs.existsSync(srcDir)) {
             return { entries: [], layouts: [], meta: new Map(), importedBy: new Map(), srcDir, namespace, changedFiles: [], changedSources: new Set() };
@@ -389,6 +453,16 @@ class Builder {
             return { entries: [], layouts: [], meta: new Map(), importedBy: new Map(), srcDir, namespace, changedFiles: [], changedSources: new Set() };
         }
 
+        if (this.#isDev) {
+            for (const [filePath, fileMeta] of meta.entries()) {
+                const resolvedImports = (fileMeta.imports || []).map(imp =>
+                    this.#analyzer.resolveImport(filePath, imp)
+                );
+
+                this.#moduleGraph.addModule(filePath, resolvedImports, fileMeta.isClient || false);
+            }
+        }
+
         // Pre-scan: compute effective prop usage for server→client boundary filtering.
         // Must run before addToManifest so manifest gets effective (forward-aware) usage.
         const { effectiveMap, clientPathSet } = this.#preScanPropUsage(meta);
@@ -574,7 +648,9 @@ class Builder {
             this.#stats.islands = toBuild.length;
         }
 
-        return clientFiles;
+        const rebuiltChunks = toBuild.map(c => c.chunkFile);
+
+        return { clientFiles, rebuiltChunks };
     }
 
     #writeClientManifest(clientComponents) {
@@ -629,11 +705,7 @@ class Builder {
             createPathAliasPlugin()
         ];
 
-        // RSC plugin only for server builds — replaces "use client" with reference stubs.
-        // Browser builds need the actual component code.
         if (isNode) {
-            // Prop filter must be registered BEFORE client reference so its onLoad
-            // handles "nitron-filtered" namespace before createClientReferencePlugin tries.
             if (options.effectiveMap && options.clientPaths) {
                 plugins.push(createPropFilterPlugin(options.effectiveMap, options.clientPaths));
             }
@@ -650,6 +722,10 @@ class Builder {
             plugins.push(createServerFunctionsPlugin());
         }
 
+        if (this.#isDev && !isNode) {
+            plugins.push(createFastRefreshPlugin());
+        }
+
         const config = {
             entryPoints: entries,
             outdir: outDir,
@@ -678,7 +754,34 @@ class Builder {
             plugins.push(createOriginalJsxPlugin());
         }
 
-        await esbuild.build(config);
+        if (!this.#isDev) {
+            await esbuild.build(config);
+            return;
+        }
+
+        const name = isNode ? "server" : "browser";
+        const entryKey = entries.slice().sort().join(",");
+        const cached = this.#contexts.get(name);
+
+        if (cached && cached.entryKey !== entryKey) {
+            await cached.ctx.dispose();
+            this.#contexts.delete(name);
+        }
+
+        if (!this.#contexts.has(name)) {
+            const ctx = await esbuild.context(config);
+            this.#contexts.set(name, { ctx, entryKey });
+        }
+
+        await this.#contexts.get(name).ctx.rebuild();
+    }
+
+    async dispose() {
+        for (const { ctx } of this.#contexts.values()) {
+            await ctx.dispose();
+        }
+
+        this.#contexts.clear();
     }
 
     #addToManifest(entries, layouts, meta, baseDir, namespace, effectiveMap) {

package/lib/Build/ModuleGraph.js

@@ -0,0 +1,84 @@
+class ModuleGraph {
+    #nodes = new Map();
+
+    addModule(filePath, imports, isClient) {
+        const node = {
+            imports: new Set(imports),
+            importedBy: new Set(),
+            isHmrBoundary: isClient
+        };
+
+        this.#nodes.set(filePath, node);
+
+        for (const imp of imports) {
+            const impNode = this.#nodes.get(imp);
+
+            if (impNode) {
+                impNode.importedBy.add(filePath);
+            }
+        }
+    }
+
+    removeModule(filePath) {
+        const node = this.#nodes.get(filePath);
+        if (!node) return;
+
+        for (const imp of node.imports) {
+            const impNode = this.#nodes.get(imp);
+
+            if (impNode) {
+                impNode.importedBy.delete(filePath);
+            }
+        }
+
+        for (const parent of node.importedBy) {
+            const parentNode = this.#nodes.get(parent);
+
+            if (parentNode) {
+                parentNode.imports.delete(filePath);
+            }
+        }
+
+        this.#nodes.delete(filePath);
+    }
+
+    getAffectedBoundaries(changedFile) {
+        const boundaries = new Set();
+        const visited = new Set();
+
+        const walk = (file) => {
+            if (visited.has(file)) return;
+            visited.add(file);
+
+            const node = this.#nodes.get(file);
+            if (!node) return;
+
+            if (node.isHmrBoundary) {
+                boundaries.add(file);
+                return;
+            }
+
+            for (const parent of node.importedBy) {
+                walk(parent);
+            }
+        };
+
+        walk(changedFile);
+        return boundaries;
+    }
+
+    hasModule(filePath) {
+        return this.#nodes.has(filePath);
+    }
+
+    isClientComponent(filePath) {
+        const node = this.#nodes.get(filePath);
+        return node?.isHmrBoundary || false;
+    }
+
+    clear() {
+        this.#nodes.clear();
+    }
+}
+
+export default ModuleGraph;

package/lib/Build/PropUsageAnalyzer.js

@@ -91,8 +91,8 @@ class PropUsageAnalyzer {
      * @param {string} filePath - Absolute path to the .tsx/.jsx file.
      * @returns {{propUsage: object|null, forwarding: {forwards: Array, imports: object}|null, hasDefaultExport: boolean, translationKeys: string[]|null}}
      */
-    static analyzeAll(filePath) {
-        const parsed = parseFile(filePath);
+    static analyzeAll(filePath, cachedAst = null) {
+        const parsed = cachedAst ? { source: null, ast: cachedAst } : parseFile(filePath);
         if (!parsed) return { propUsage: null, forwarding: null, hasDefaultExport: false, translationKeys: null };
 
         // Extract translation keys BEFORE findComponentFunction (server files may not have components)

package/lib/Build/plugins.js

@@ -489,4 +489,39 @@ export function createClientReferencePlugin(isDev) {
             });
         }
     };
+}
+
+export function createFastRefreshPlugin() {
+    let transformSync = null;
+
+    return {
+        name: "fast-refresh",
+        setup(build) {
+            build.onLoad({ filter: /\.[jt]sx$/ }, async (args) => {
+                const source = await fs.promises.readFile(args.path, "utf8");
+
+                if (!hasUseClientDirective(source)) {
+                    return null;
+                }
+
+                if (!transformSync) {
+                    const oxc = await import("oxc-transform");
+                    transformSync = oxc.transformSync;
+                }
+
+                const result = transformSync(args.path, source, {
+                    jsx: { refresh: true }
+                });
+
+                if (result.errors?.length) {
+                    return null;
+                }
+
+                return {
+                    contents: result.code,
+                    loader: args.path.endsWith(".tsx") ? "tsx" : "jsx"
+                };
+            });
+        }
+    };
 }