@nitronjs/framework 0.1.23 → 0.2.0

package/lib/Build/CssBuilder.js

@@ -0,0 +1,129 @@
+import fs from "fs";
+import path from "path";
+import crypto from "crypto";
+import postcss from "postcss";
+import tailwindPostcss from "@tailwindcss/postcss";
+
+class CssBuilder {
+    #cache;
+    #isDev;
+    #cssInput;
+    #cssOutput;
+    #hasTailwind = null;
+
+    constructor(cache, isDev, cssInput, cssOutput) {
+        this.#cache = cache;
+        this.#isDev = isDev;
+        this.#cssInput = cssInput;
+        this.#cssOutput = cssOutput;
+    }
+
+    async build(viewsChanged) {
+        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)));
+
+        return filesToProcess.length;
+    }
+
+    async #processCss(filename, hasTailwind, processor) {
+        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: this.#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;

package/lib/Build/FileAnalyzer.js

@@ -0,0 +1,395 @@
+import fs from "fs";
+import path from "path";
+import { parse } from "@babel/parser";
+import traverse from "@babel/traverse";
+import Paths from "../Core/Paths.js";
+import Layout from "../View/Layout.js";
+import COLORS from "./colors.js";
+
+const CLIENT_HOOKS = new Set([
+    "useState",
+    "useEffect",
+    "useRef",
+    "useReducer",
+    "useLayoutEffect",
+    "useCallback",
+    "useMemo"
+]);
+
+const MAX_DEPTH = 50;
+
+class FileAnalyzer {
+    #traverse = traverse.default;
+    #cache;
+
+    constructor(cache) {
+        this.#cache = cache;
+    }
+
+    discoverEntries(baseDir) {
+        if (!fs.existsSync(baseDir)) {
+            return { entries: [], layouts: [], meta: new Map() };
+        }
+
+        const files = this.#findTsxFiles(baseDir);
+        const { graph, imported, importedBy } = this.#buildDependencyGraph(files);
+
+        const layouts = [];
+        const entries = [];
+
+        for (const [file, meta] of graph.entries()) {
+            if (Layout.isLayout(file)) {
+                if (meta.hasDefault && meta.jsx) {
+                    layouts.push(file);
+                }
+                continue;
+            }
+
+            if (!imported.has(file) && meta.hasDefault && meta.jsx) {
+                entries.push(file);
+            }
+        }
+
+        this.#validateGraph(graph, entries, importedBy);
+
+        return { entries, layouts, meta: graph };
+    }
+
+    #findTsxFiles(dir, result = []) {
+        if (!fs.existsSync(dir)) {
+            return result;
+        }
+
+        for (const item of fs.readdirSync(dir)) {
+            const fullPath = path.join(dir, item);
+            const stat = fs.lstatSync(fullPath);
+
+            if (stat.isSymbolicLink()) {
+                continue;
+            }
+
+            if (stat.isDirectory()) {
+                this.#findTsxFiles(fullPath, result);
+            } else if (fullPath.endsWith(".tsx")) {
+                result.push(fullPath);
+            }
+        }
+
+        return result;
+    }
+
+    #buildDependencyGraph(files) {
+        const graph = new Map();
+        const imported = new Set();
+        const importedBy = new Map();
+
+        for (const file of files) {
+            const meta = this.analyzeFile(file);
+            graph.set(file, meta);
+
+            for (const importPath of meta.imports) {
+                const resolvedPath = this.resolveImport(file, importPath);
+
+                if (this.#isInRoot(resolvedPath)) {
+                    imported.add(resolvedPath);
+
+                    if (!importedBy.has(resolvedPath)) {
+                        importedBy.set(resolvedPath, []);
+                    }
+                    importedBy.get(resolvedPath).push(file);
+                }
+            }
+        }
+
+        return { graph, imported, importedBy };
+    }
+
+    analyzeFile(filePath) {
+        const stat = fs.statSync(filePath);
+        const mtime = stat.mtimeMs;
+        const cachedMtime = this.#cache.fileHashes.get(filePath + ":mtime");
+
+        if (cachedMtime === mtime && this.#cache.fileMeta.has(filePath)) {
+            return this.#cache.fileMeta.get(filePath);
+        }
+
+        const source = fs.readFileSync(filePath, "utf8");
+        this.#cache.fileHashes.set(filePath + ":mtime", mtime);
+
+        let ast;
+        try {
+            ast = parse(source, {
+                sourceType: "module",
+                plugins: ["typescript", "jsx"]
+            });
+        } catch {
+            const emptyMeta = {
+                imports: [],
+                css: [],
+                hasDefault: false,
+                named: [],
+                jsx: false,
+                needsClient: false,
+                isClient: false
+            };
+            this.#cache.fileMeta.set(filePath, emptyMeta);
+            return emptyMeta;
+        }
+
+        const isClient = ast.program.directives?.some(d => d.value?.value === "use client");
+
+        const meta = {
+            imports: new Set(),
+            css: new Set(),
+            hasDefault: false,
+            named: [],
+            jsx: false,
+            needsClient: false,
+            isClient,
+            reactNamespace: null,
+            layoutDisabled: false
+        };
+
+        this.#traverse(ast, {
+            ImportDeclaration: (p) => {
+                const source = p.node.source.value;
+
+                if (source.startsWith(".")) {
+                    meta.imports.add(source);
+                }
+
+                if (source.endsWith(".css")) {
+                    const resolved = path.resolve(path.dirname(filePath), source);
+                    if (resolved.startsWith(Paths.project)) {
+                        meta.css.add(resolved);
+                    }
+                }
+
+                if (source === "react") {
+                    for (const specifier of p.node.specifiers) {
+                        if (specifier.type === "ImportSpecifier" && CLIENT_HOOKS.has(specifier.imported.name)) {
+                            meta.needsClient = true;
+                        }
+                        if (specifier.type === "ImportNamespaceSpecifier" || specifier.type === "ImportDefaultSpecifier") {
+                            meta.reactNamespace = specifier.local.name;
+                        }
+                    }
+                }
+            },
+
+            MemberExpression: (p) => {
+                if (!meta.needsClient &&
+                    p.node.object.name === meta.reactNamespace &&
+                    CLIENT_HOOKS.has(p.node.property.name)) {
+                    meta.needsClient = true;
+                }
+            },
+
+            CallExpression: (p) => {
+                if (!meta.needsClient &&
+                    p.node.callee.type === "Identifier" &&
+                    /^use[A-Z]/.test(p.node.callee.name)) {
+                    meta.needsClient = true;
+                }
+            },
+
+            ExportNamedDeclaration: (p) => this.#extractNamedExports(p, meta),
+            ExportDefaultDeclaration: () => { meta.hasDefault = true; },
+            JSXElement: () => { meta.jsx = true; },
+            JSXFragment: () => { meta.jsx = true; }
+        });
+
+        if (meta.needsClient && !meta.isClient) {
+            throw this.#createError('Missing "use client"', {
+                File: path.relative(Paths.project, filePath),
+                Fix: 'Add "use client" at top'
+            });
+        }
+
+        const result = {
+            ...meta,
+            imports: [...meta.imports],
+            css: [...meta.css]
+        };
+
+        this.#cache.fileMeta.set(filePath, result);
+
+        return result;
+    }
+
+    #extractNamedExports(path, meta) {
+        const declaration = path.node.declaration;
+
+        if (declaration?.type === "VariableDeclaration") {
+            for (const decl of declaration.declarations) {
+                if (decl.id.type === "Identifier") {
+                    if (decl.id.name === "layout" &&
+                        decl.init?.type === "BooleanLiteral" &&
+                        decl.init.value === false) {
+                        meta.layoutDisabled = true;
+                    }
+                    if (decl.init?.type === "ArrowFunctionExpression") {
+                        meta.named.push(decl.id.name);
+                    }
+                }
+            }
+        }
+
+        if (declaration?.type === "FunctionDeclaration" && declaration.id?.name) {
+            meta.named.push(declaration.id.name);
+        }
+    }
+
+    resolveImport(fromFile, relativePath) {
+        const cacheKey = `${fromFile}|${relativePath}`;
+        const cached = this.#cache.imports.get(cacheKey);
+
+        if (cached) {
+            return cached;
+        }
+
+        const resolved = path.resolve(path.dirname(fromFile), relativePath);
+
+        if (!this.#isInRoot(resolved)) {
+            throw this.#createError("Path Traversal", {
+                Import: relativePath,
+                Outside: resolved
+            });
+        }
+
+        const extensions = [".tsx", ".ts", ".jsx", ".js", "/index.tsx", "/index.ts", ""];
+
+        for (const ext of extensions) {
+            const fullPath = resolved + ext;
+
+            if (ext === "" && fs.existsSync(fullPath) && fs.statSync(fullPath).isFile()) {
+                this.#cache.imports.set(cacheKey, fullPath);
+                return fullPath;
+            }
+
+            if (ext && fs.existsSync(fullPath)) {
+                this.#cache.imports.set(cacheKey, fullPath);
+                return fullPath;
+            }
+        }
+
+        this.#cache.imports.set(cacheKey, resolved);
+        return resolved;
+    }
+
+    findClientComponents(file, meta, seen, depth = 0) {
+        const result = new Set();
+
+        if (depth > MAX_DEPTH || seen.has(file)) {
+            return result;
+        }
+        seen.add(file);
+
+        const fileMeta = meta.get(file);
+        if (!fileMeta) {
+            return result;
+        }
+
+        if (fileMeta.isClient) {
+            result.add(file);
+        }
+
+        for (const importPath of fileMeta.imports) {
+            const resolvedPath = this.resolveImport(file, importPath);
+
+            if (meta.has(resolvedPath)) {
+                const childComponents = this.findClientComponents(resolvedPath, meta, seen, depth + 1);
+                for (const component of childComponents) {
+                    result.add(component);
+                }
+            }
+        }
+
+        return result;
+    }
+
+    collectCss(file, meta, seen, depth = 0) {
+        if (depth > MAX_DEPTH || seen.has(file)) {
+            return new Set();
+        }
+        seen.add(file);
+
+        const fileMeta = meta.get(file);
+        if (!fileMeta) {
+            return new Set();
+        }
+
+        const result = new Set(fileMeta.css);
+
+        for (const importPath of fileMeta.imports) {
+            const resolvedPath = this.resolveImport(file, importPath);
+
+            if (meta.has(resolvedPath)) {
+                const childCss = this.collectCss(resolvedPath, meta, seen, depth + 1);
+                for (const cssPath of childCss) {
+                    result.add(cssPath);
+                }
+            }
+        }
+
+        return result;
+    }
+
+    #validateGraph(graph, entries, importedBy) {
+        const entrySet = new Set(entries);
+        const relativePath = (p) => path.relative(Paths.project, p);
+
+        for (const [filePath, meta] of graph.entries()) {
+            if (!meta.isClient) {
+                continue;
+            }
+
+            if (entrySet.has(filePath) && meta.hasDefault && meta.jsx) {
+                const importers = importedBy.get(filePath);
+                if (importers?.length) {
+                    throw this.#createError("Client Entry Imported", {
+                        Entry: relativePath(filePath),
+                        By: relativePath(importers[0]),
+                        Fix: "Use as island"
+                    });
+                }
+            }
+
+            for (const importPath of meta.imports) {
+                const resolvedPath = this.resolveImport(filePath, importPath);
+                const resolvedMeta = graph.get(resolvedPath);
+
+                if (resolvedMeta && !resolvedMeta.isClient) {
+                    throw this.#createError("Boundary Violation", {
+                        Client: relativePath(filePath),
+                        Server: relativePath(resolvedPath),
+                        Fix: `Server components cannot be imported into client components. Use composition pattern: render "${path.basename(resolvedPath, ".tsx")}" as a parent and pass client component as children.`
+                    });
+                }
+            }
+        }
+    }
+
+    #isInRoot(filePath) {
+        const normalized = path.normalize(filePath);
+        const projectNormalized = path.normalize(Paths.project);
+        const frameworkNormalized = path.normalize(Paths.framework);
+
+        return normalized.startsWith(projectNormalized + path.sep) ||
+               normalized === projectNormalized ||
+               normalized.startsWith(frameworkNormalized + path.sep) ||
+               normalized === frameworkNormalized;
+    }
+
+    #createError(title, details = {}) {
+        let message = `\n${COLORS.red}✖ ${title}${COLORS.reset}\n\n`;
+
+        for (const [key, value] of Object.entries(details)) {
+            message += `  ${key}: ${COLORS.yellow}${value}${COLORS.reset}\n`;
+        }
+
+        return new Error(message);
+    }
+}
+
+export default FileAnalyzer;

package/lib/Build/HydrationBuilder.js

@@ -0,0 +1,173 @@
+import fs from "fs";
+import path from "path";
+import crypto from "crypto";
+import Paths from "../Core/Paths.js";
+import Layout from "../View/Layout.js";
+
+function sanitizeName(name) {
+    return name.replace(/[^a-zA-Z0-9_$]/g, "_");
+}
+
+class HydrationBuilder {
+    #cache;
+    #isDev;
+    #templatesPath;
+    #analyzer;
+
+    constructor(cache, isDev, templatesPath, analyzer) {
+        this.#cache = cache;
+        this.#isDev = isDev;
+        this.#templatesPath = templatesPath;
+        this.#analyzer = analyzer;
+    }
+
+    async build(userBundle, frameworkBundle, manifest, changedViews = null) {
+        const hydrationFiles = [];
+        const allChangedFiles = new Set();
+
+        if (changedViews) {
+            for (const v of changedViews) allChangedFiles.add(v);
+        }
+
+        for (const bundle of [userBundle, frameworkBundle]) {
+            if (!bundle?.meta) continue;
+            for (const [filePath, fileMeta] of bundle.meta.entries()) {
+                if (fileMeta.isClient || fileMeta.needsClient) {
+                    const content = fs.readFileSync(filePath, "utf8");
+                    const hash = crypto.createHash("md5").update(content).digest("hex");
+                    const cacheKey = `hydration:${filePath}`;
+                    const cachedHash = this.#cache.fileHashes.get(cacheKey);
+
+                    if (cachedHash !== hash) {
+                        this.#cache.fileHashes.set(cacheKey, hash);
+                        allChangedFiles.add(filePath);
+                    }
+                }
+            }
+        }
+
+        for (const bundle of [userBundle, frameworkBundle]) {
+            if (!bundle?.entries.length) continue;
+
+            for (const viewPath of bundle.entries) {
+                const viewRelative = path.relative(bundle.srcDir, viewPath)
+                    .replace(/\.tsx$/, "")
+                    .replace(/\\/g, "/")
+                    .toLowerCase();
+                const manifestKey = `${bundle.namespace}:${viewRelative}`;
+                const hydrationScriptPath = `/js/${viewRelative}.js`;
+                const hydrationOutputPath = path.join(Paths.publicJs, viewRelative + ".js");
+
+                const viewMeta = bundle.meta.get(viewPath);
+                const clientComponents = new Set();
+
+                if (!viewMeta?.layoutDisabled) {
+                    const viewRelativeForLayout = path.relative(bundle.srcDir, viewPath).replace(/\\/g, "/");
+                    const layoutChain = Layout.resolve(viewRelativeForLayout, bundle.srcDir);
+
+                    for (const layout of layoutChain) {
+                        const layoutClients = this.#analyzer.findClientComponents(layout.path, bundle.meta, new Set());
+                        for (const c of layoutClients) {
+                            clientComponents.add(c);
+                        }
+                    }
+                }
+
+                const viewClients = this.#analyzer.findClientComponents(viewPath, bundle.meta, new Set());
+                for (const c of viewClients) {
+                    clientComponents.add(c);
+                }
+
+                const needsRebuild = !changedViews ||
+                    allChangedFiles.has(viewPath) ||
+                    [...clientComponents].some(c => allChangedFiles.has(c));
+
+                if (clientComponents.size) {
+                    if (needsRebuild || !fs.existsSync(hydrationOutputPath)) {
+                        const hydrationFile = this.#generateHydrationFile(
+                            viewPath,
+                            bundle.srcDir,
+                            clientComponents,
+                            bundle.meta
+                        );
+                        hydrationFiles.push(hydrationFile);
+                    }
+                    manifest[manifestKey].hydrationScript = hydrationScriptPath;
+                }
+            }
+        }
+
+        return hydrationFiles;
+    }
+
+    #generateHydrationFile(viewPath, srcDir, clientComponents, meta) {
+        const templateName = this.#isDev ? "page-hydration-dev.tsx" : "page-hydration.tsx";
+        const cacheKey = this.#isDev ? "hydrationTemplateDev" : "hydrationTemplate";
+
+        if (!this.#cache[cacheKey]) {
+            const templatePath = path.join(this.#templatesPath, templateName);
+            this.#cache[cacheKey] = fs.readFileSync(templatePath, "utf8");
+        }
+
+        const viewRelative = path.relative(srcDir, viewPath).replace(/\.tsx$/, "").toLowerCase();
+        const outputDir = path.join(Paths.project, ".nitron/hydration", path.dirname(viewRelative));
+        const outputFile = path.join(outputDir, path.basename(viewRelative) + ".tsx");
+        const moduleId = viewRelative.replace(/[\/\\]/g, "_");
+
+        fs.mkdirSync(outputDir, { recursive: true });
+
+        const imports = [];
+        const manifestEntries = [];
+        const registrations = [];
+        let index = 0;
+
+        for (const componentPath of clientComponents) {
+            const componentMeta = meta.get(componentPath);
+            if (!componentMeta) continue;
+
+            const baseName = path.basename(componentPath, ".tsx");
+            const relativePath = path.relative(outputDir, componentPath)
+                .replace(/\\/g, "/")
+                .replace(/\.tsx$/, "");
+
+            if (componentMeta.hasDefault) {
+                const importName = sanitizeName(baseName) + "_" + index++;
+                imports.push(`import ${importName} from "${relativePath}";`);
+                manifestEntries.push(`  "${baseName}": ${importName}`);
+                manifestEntries.push(`  [${importName}.displayName || ${importName}.name || "${baseName}"]: ${importName}`);
+                if (this.#isDev) {
+                    registrations.push(`if (window.__NITRON_REFRESH__) window.__NITRON_REFRESH__.register(${importName}, "${moduleId}_${importName}");`);
+                }
+            }
+
+            for (const namedExport of componentMeta.named || []) {
+                const importName = sanitizeName(namedExport) + "_" + index++;
+                imports.push(`import { ${namedExport} as ${importName} } from "${relativePath}";`);
+                manifestEntries.push(`  "${namedExport}": ${importName}`);
+                manifestEntries.push(`  [${importName}.displayName || ${importName}.name || "${namedExport}"]: ${importName}`);
+                if (this.#isDev) {
+                    registrations.push(`if (window.__NITRON_REFRESH__) window.__NITRON_REFRESH__.register(${importName}, "${moduleId}_${importName}");`);
+                }
+            }
+        }
+
+        let code = this.#cache[cacheKey]
+            .replace("// __COMPONENT_IMPORTS__", imports.join("\n"))
+            .replace(
+                "// __COMPONENT_MANIFEST__",
+                `Object.assign(componentManifest, {\n${manifestEntries.join(",\n")}\n});`
+            );
+
+        if (this.#isDev) {
+            code = code
+                .replace("__NITRON_MODULE_ID__", moduleId)
+                .replace("// __COMPONENT_REGISTRATIONS__", registrations.join("\n"));
+        }
+
+        fs.writeFileSync(outputFile, code);
+
+        return outputFile;
+    }
+}
+
+export default HydrationBuilder;