@nitronjs/framework 0.3.2 → 0.3.4

package/cli/njs.js

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

package/lib/Build/CssBuilder.js

@@ -1,136 +1,152 @@
-import fs from "fs";
-import path from "path";
-import crypto from "crypto";
-import postcss from "postcss";
-import tailwindPostcss from "@tailwindcss/postcss";
-
-/**
- * Handles CSS file building with Tailwind CSS support.
- * Processes CSS files, handles caching, and detects Tailwind usage.
- */
-class CssBuilder {
-    #cache;
-    #cssInput;
-    #cssOutput;
-    #hasTailwind = null;
-
-    constructor(cache, cssInput, cssOutput) {
-        this.#cache = cache;
-        this.#cssInput = cssInput;
-        this.#cssOutput = cssOutput;
-    }
-
-    /**
-     * Builds all CSS files in the input directory.
-     * @param {boolean} viewsChanged - Whether views have changed (forces Tailwind rebuild).
-     * @returns {Promise<number>} Number of CSS files processed.
-     */
-    async build(viewsChanged, isDev = false) {
-        if (!fs.existsSync(this.#cssInput)) {
-            return 0;
-        }
-
-        const cssFiles = fs.readdirSync(this.#cssInput).filter(f => f.endsWith(".css"));
-        if (!cssFiles.length) {
-            return 0;
-        }
-
-        const hasTailwind = this.#detectTailwind();
-        const filesToProcess = [];
-
-        for (const filename of cssFiles) {
-            const filePath = path.join(this.#cssInput, filename);
-            const content = await fs.promises.readFile(filePath, "utf8");
-            const hash = crypto.createHash("md5").update(content).digest("hex");
-            const cachedHash = this.#cache.cssHashes.get(filePath);
-            const outputPath = path.join(this.#cssOutput, filename);
-            const outputExists = fs.existsSync(outputPath);
-
-            if (cachedHash !== hash || !outputExists) {
-                this.#cache.css.set(filePath, content);
-                this.#cache.cssHashes.set(filePath, hash);
-                filesToProcess.push(filename);
-            }
-        }
-
-        // If Tailwind is used and views changed, force rebuild all CSS
-        if (hasTailwind && viewsChanged && !filesToProcess.length) {
-            filesToProcess.push(...cssFiles);
-        }
-
-        if (!filesToProcess.length) return 0;
-
-        if (hasTailwind && !this.#cache.tailwindProcessor) {
-            this.#cache.tailwindProcessor = postcss([tailwindPostcss()]);
-        }
-        const processor = hasTailwind ? this.#cache.tailwindProcessor : null;
-
-        await Promise.all(filesToProcess.map(filename => this.#processCss(filename, hasTailwind, processor, isDev)));
-
-        return filesToProcess.length;
-    }
-
-    async #processCss(filename, hasTailwind, processor, isDev) {
-        const inputPath = path.join(this.#cssInput, filename);
-        const outputPath = path.join(this.#cssOutput, filename);
-
-        await fs.promises.mkdir(path.dirname(outputPath), { recursive: true });
-
-        let content = this.#cache.css.get(inputPath);
-        if (!content) {
-            content = await fs.promises.readFile(inputPath, "utf8");
-            this.#cache.css.set(inputPath, content);
-        }
-
-        if (!hasTailwind) {
-            await fs.promises.writeFile(outputPath, content);
-            return;
-        }
-
-        const result = await processor.process(content, {
-            from: inputPath,
-            to: outputPath,
-            map: isDev ? { inline: false } : false
-        });
-
-        await fs.promises.writeFile(outputPath, result.css);
-
-        if (result.map) {
-            await fs.promises.writeFile(`${outputPath}.map`, result.map.toString());
-        }
-    }
-
-    #detectTailwind() {
-        // Return cached result if available
-        if (this.#hasTailwind !== null) {
-            return this.#hasTailwind;
-        }
-
-        if (!fs.existsSync(this.#cssInput)) {
-            this.#hasTailwind = false;
-            return false;
-        }
-
-        const tailwindPattern = /@(import\s+["']tailwindcss["']|tailwind\s+(base|components|utilities))/;
-
-        for (const filename of fs.readdirSync(this.#cssInput).filter(f => f.endsWith(".css"))) {
-            const filePath = path.join(this.#cssInput, filename);
-
-            let content = this.#cache.css.get(filePath);
-            if (!content) {
-                content = fs.readFileSync(filePath, "utf8");
-                this.#cache.css.set(filePath, content);
-            }
-
-            if (tailwindPattern.test(content)) {
-                this.#hasTailwind = true;
-                return true;
-            }
-        }
-
-        this.#hasTailwind = false;
-        return false;
-    }
-}
-
-export default CssBuilder;
+import fs from "fs";
+import path from "path";
+import crypto from "crypto";
+
+class CssBuilder {
+    #cache;
+    #cssInput;
+    #cssOutput;
+    #hasTailwind = null;
+    #compiler = null;
+    #lastCompilerHash = null;
+    #scanner = null;
+    #projectBase;
+
+    constructor(cache, cssInput, cssOutput) {
+        this.#cache = cache;
+        this.#cssInput = cssInput;
+        this.#cssOutput = cssOutput;
+        this.#projectBase = path.resolve(cssInput, "../..");
+    }
+
+    async build(viewsChanged, isDev = false) {
+        if (!fs.existsSync(this.#cssInput)) {
+            return 0;
+        }
+
+        const cssFiles = fs.readdirSync(this.#cssInput).filter(f => f.endsWith(".css"));
+
+        if (!cssFiles.length) {
+            return 0;
+        }
+
+        const hasTailwind = this.#detectTailwind();
+        const filesToProcess = [];
+
+        for (const filename of cssFiles) {
+            const filePath = path.join(this.#cssInput, filename);
+            const content = await fs.promises.readFile(filePath, "utf8");
+            const hash = crypto.createHash("md5").update(content).digest("hex");
+            const cachedHash = this.#cache.cssHashes.get(filePath);
+            const outputPath = path.join(this.#cssOutput, filename);
+            const outputExists = fs.existsSync(outputPath);
+
+            if (cachedHash !== hash || !outputExists) {
+                this.#cache.css.set(filePath, content);
+                this.#cache.cssHashes.set(filePath, hash);
+                filesToProcess.push(filename);
+            }
+        }
+
+        if (hasTailwind && viewsChanged && !filesToProcess.length) {
+            filesToProcess.push(...cssFiles);
+        }
+
+        if (!filesToProcess.length) return 0;
+
+        await Promise.all(filesToProcess.map(filename => this.#processCss(filename, hasTailwind, isDev)));
+
+        return filesToProcess.length;
+    }
+
+    async #processCss(filename, hasTailwind, isDev) {
+        const inputPath = path.join(this.#cssInput, filename);
+        const outputPath = path.join(this.#cssOutput, filename);
+
+        await fs.promises.mkdir(path.dirname(outputPath), { recursive: true });
+
+        let content = this.#cache.css.get(inputPath);
+
+        if (!content) {
+            content = await fs.promises.readFile(inputPath, "utf8");
+            this.#cache.css.set(inputPath, content);
+        }
+
+        if (!hasTailwind) {
+            await fs.promises.writeFile(outputPath, content);
+            return;
+        }
+
+        const contentHash = crypto.createHash("md5").update(content).digest("hex");
+
+        if (!this.#compiler || this.#lastCompilerHash !== contentHash) {
+            const { compile } = await import("@tailwindcss/node");
+
+            this.#compiler = await compile(content, {
+                base: this.#cssInput,
+                onDependency: () => {}
+            });
+
+            this.#lastCompilerHash = contentHash;
+        }
+
+        if (!this.#scanner) {
+            const { Scanner } = await import("@tailwindcss/oxide");
+
+            this.#scanner = new Scanner({
+                sources: [{
+                    base: this.#projectBase,
+                    pattern: "resources/views/**/*.{tsx,ts,jsx,js}",
+                    negated: false
+                }]
+            });
+        }
+
+        const candidates = this.#scanner.scan();
+        const css = this.#compiler.build(candidates);
+
+        if (isDev) {
+            await fs.promises.writeFile(outputPath, css);
+        }
+        else {
+            const { optimize } = await import("@tailwindcss/node");
+            const result = optimize(css, { minify: true });
+
+            await fs.promises.writeFile(outputPath, result.code);
+        }
+    }
+
+    #detectTailwind() {
+        if (this.#hasTailwind !== null) {
+            return this.#hasTailwind;
+        }
+
+        if (!fs.existsSync(this.#cssInput)) {
+            this.#hasTailwind = false;
+            return false;
+        }
+
+        const tailwindPattern = /@(import\s+["']tailwindcss["']|tailwind\s+(base|components|utilities))/;
+
+        for (const filename of fs.readdirSync(this.#cssInput).filter(f => f.endsWith(".css"))) {
+            const filePath = path.join(this.#cssInput, filename);
+
+            let content = this.#cache.css.get(filePath);
+
+            if (!content) {
+                content = fs.readFileSync(filePath, "utf8");
+                this.#cache.css.set(filePath, content);
+            }
+
+            if (tailwindPattern.test(content)) {
+                this.#hasTailwind = true;
+                return true;
+            }
+        }
+
+        this.#hasTailwind = false;
+        return false;
+    }
+}
+
+export default CssBuilder;

package/lib/Build/FileAnalyzer.js

@@ -1,7 +1,6 @@
 import fs from "fs";
 import path from "path";
-import { parse } from "@babel/parser";
-import traverse from "@babel/traverse";
+import { parseSync, Visitor } from "oxc-parser";
 import Paths from "../Core/Paths.js";
 import Layout from "../View/Layout.js";
 import COLORS from "./colors.js";
@@ -25,13 +24,17 @@ const MAX_DEPTH = 50;
  * Detects client components, extracts imports, and builds dependency graphs.
  */
 class FileAnalyzer {
-    #traverse = traverse.default;
     #cache;
+    #astCache = new Map();
 
     constructor(cache) {
         this.#cache = cache;
     }
 
+    getAst(filePath) {
+        return this.#astCache.get(filePath) || null;
+    }
+
     /**
      * Discovers entry points and layouts in a directory.
      * @param {string} baseDir - Directory to scan for TSX files.
@@ -147,13 +150,15 @@ class FileAnalyzer {
         const source = fs.readFileSync(filePath, "utf8");
         this.#cache.fileHashes.set(filePath + ":mtime", mtime);
 
-        let ast;
+        let program;
         try {
-            ast = parse(source, {
-                sourceType: "module",
-                plugins: ["typescript", "jsx"]
-            });
-        } catch {
+            const parsed = parseSync(filePath, source);
+
+            if (parsed.errors.length > 0) throw new Error(parsed.errors[0].message);
+
+            program = parsed.program;
+        }
+        catch {
             const emptyMeta = {
                 imports: [],
                 css: [],
@@ -164,10 +169,20 @@ class FileAnalyzer {
                 isClient: false
             };
             this.#cache.fileMeta.set(filePath, emptyMeta);
+            this.#astCache.delete(filePath);
             return emptyMeta;
         }
 
-        const isClient = ast.program.directives?.some(d => d.value?.value === "use client");
+        this.#astCache.set(filePath, program);
+
+        let isClient = false;
+
+        for (const node of program.body) {
+            if (node.type === "ExpressionStatement" && node.directive === "use client") {
+                isClient = true;
+                break;
+            }
+        }
 
         const meta = {
             imports: new Set(),
@@ -181,23 +196,25 @@ class FileAnalyzer {
             layoutDisabled: false
         };
 
-        this.#traverse(ast, {
-            ImportDeclaration: (p) => {
-                const source = p.node.source.value;
+        const self = this;
+
+        const visitor = new Visitor({
+            ImportDeclaration(node) {
+                const src = node.source.value;
 
-                if (source.startsWith(".")) {
-                    meta.imports.add(source);
+                if (src.startsWith(".")) {
+                    meta.imports.add(src);
                 }
 
-                if (source.endsWith(".css")) {
-                    const resolved = path.resolve(path.dirname(filePath), source);
+                if (src.endsWith(".css")) {
+                    const resolved = path.resolve(path.dirname(filePath), src);
                     if (resolved.startsWith(Paths.project)) {
                         meta.css.add(resolved);
                     }
                 }
 
-                if (source === "react") {
-                    for (const specifier of p.node.specifiers) {
+                if (src === "react") {
+                    for (const specifier of node.specifiers) {
                         if (specifier.type === "ImportSpecifier" && CLIENT_HOOKS.has(specifier.imported.name)) {
                             meta.needsClient = true;
                         }
@@ -208,28 +225,32 @@ class FileAnalyzer {
                 }
             },
 
-            MemberExpression: (p) => {
+            MemberExpression(node) {
                 if (!meta.needsClient &&
-                    p.node.object.name === meta.reactNamespace &&
-                    CLIENT_HOOKS.has(p.node.property.name)) {
+                    node.object.name === meta.reactNamespace &&
+                    CLIENT_HOOKS.has(node.property.name)) {
                     meta.needsClient = true;
                 }
             },
 
-            CallExpression: (p) => {
+            CallExpression(node) {
                 if (!meta.needsClient &&
-                    p.node.callee.type === "Identifier" &&
-                    /^use[A-Z]/.test(p.node.callee.name)) {
+                    node.callee.type === "Identifier" &&
+                    /^use[A-Z]/.test(node.callee.name)) {
                     meta.needsClient = true;
                 }
             },
 
-            ExportNamedDeclaration: (p) => this.#extractNamedExports(p, meta),
-            ExportDefaultDeclaration: () => { meta.hasDefault = true; },
-            JSXElement: () => { meta.jsx = true; },
-            JSXFragment: () => { meta.jsx = true; }
+            ExportNamedDeclaration(node) {
+                self.#extractNamedExports(node, meta);
+            },
+            ExportDefaultDeclaration() { meta.hasDefault = true; },
+            JSXElement() { meta.jsx = true; },
+            JSXFragment() { meta.jsx = true; }
         });
 
+        visitor.visit(program);
+
         // Only enforce "use client" requirement on .tsx files.
         // .ts files (hooks, utils) are pure logic modules — they don't define components
         // and are safe to import from either server or client code.
@@ -251,11 +272,7 @@ class FileAnalyzer {
         return result;
     }
 
-    #extractNamedExports(path, meta) {
-        const node = path.node;
-
-        // Re-exports: export { X } from './Y' — track the source as an import
-        // so the dependency graph stays complete through barrel files.
+    #extractNamedExports(node, meta) {
         if (node.source && node.source.value && node.source.value.startsWith(".")) {
             meta.imports.add(node.source.value);
         }
@@ -266,7 +283,7 @@ class FileAnalyzer {
             for (const decl of declaration.declarations) {
                 if (decl.id.type === "Identifier") {
                     if (decl.id.name === "Layout" &&
-                        decl.init?.type === "BooleanLiteral" &&
+                        decl.init?.type === "Literal" &&
                         decl.init.value === false) {
                         meta.layoutDisabled = true;
                     }