@zenithbuild/bundler 1.3.7 → 1.3.15

package/src/css.ts

@@ -0,0 +1,294 @@
+/**
+ * Zenith CSS Compiler Module
+ * 
+ * Compiler-owned CSS processing that integrates Tailwind CSS v4 JIT
+ * at compile time. This module ensures:
+ * 
+ * 1. All CSS is processed at build time (no runtime generation)
+ * 2. Tailwind sees all .zen templates for class scanning
+ * 3. HMR support for instant CSS updates in dev mode
+ * 4. Deterministic, cacheable output for production
+ * 
+ * Per Zenith CSS Directive: The compiler owns styles.
+ */
+
+import { spawn, spawnSync } from 'child_process'
+import path from 'path'
+import fs from 'fs'
+
+// ============================================
+// Types
+// ============================================
+
+export interface CSSCompileOptions {
+    /** Input CSS file path (e.g., src/styles/globals.css) */
+    input: string
+    /** Output CSS file path, or ':memory:' for in-memory result */
+    output: string
+    /** Enable minification for production */
+    minify?: boolean
+    /** Watch mode for HMR */
+    watch?: boolean
+}
+
+export interface CSSCompileResult {
+    /** Compiled CSS content */
+    css: string
+    /** Compilation time in milliseconds */
+    duration: number
+    /** Whether compilation succeeded */
+    success: boolean
+    /** Error message if failed */
+    error?: string
+}
+
+// ============================================
+// CSS Compilation
+// ============================================
+
+/**
+ * Compile CSS using Tailwind CSS v4 CLI
+ */
+export function compileCss(options: CSSCompileOptions): CSSCompileResult {
+    const startTime = performance.now()
+    const { input, output, minify = false } = options
+
+    // Validate input exists
+    if (!fs.existsSync(input)) {
+        return {
+            css: '',
+            duration: 0,
+            success: false,
+            error: `CSS input file not found: ${input}`
+        }
+    }
+
+    try {
+        // Build Tailwind CLI arguments
+        const args = [
+            '@tailwindcss/cli',
+            '-i', input
+        ]
+
+        // For in-memory compilation, use stdout
+        const useStdout = output === ':memory:'
+        if (!useStdout) {
+            args.push('-o', output)
+        }
+
+        if (minify) {
+            args.push('--minify')
+        }
+
+        // Execute Tailwind CLI synchronously
+        const result = spawnSync('bunx', args, {
+            cwd: path.dirname(input),
+            encoding: 'utf-8',
+            stdio: useStdout ? ['pipe', 'pipe', 'pipe'] : ['pipe', 'inherit', 'pipe'],
+            env: { ...process.env }
+        })
+
+        const duration = Math.round(performance.now() - startTime)
+
+        if (result.status !== 0) {
+            const errorMsg = result.stderr?.toString() || 'Unknown compilation error'
+            return {
+                css: '',
+                duration,
+                success: false,
+                error: `Tailwind compilation failed: ${errorMsg}`
+            }
+        }
+
+        // Get CSS content
+        let css = ''
+        if (useStdout) {
+            css = result.stdout?.toString() || ''
+        } else if (fs.existsSync(output)) {
+            css = fs.readFileSync(output, 'utf-8')
+        }
+
+        return {
+            css,
+            duration,
+            success: true
+        }
+
+    } catch (error: any) {
+        return {
+            css: '',
+            duration: Math.round(performance.now() - startTime),
+            success: false,
+            error: error.message
+        }
+    }
+}
+
+/**
+ * Compile CSS asynchronously (non-blocking)
+ */
+export async function compileCssAsync(options: CSSCompileOptions): Promise<CSSCompileResult> {
+    return new Promise((resolve) => {
+        const startTime = performance.now()
+        const { input, output, minify = false } = options
+
+        if (!fs.existsSync(input)) {
+            resolve({
+                css: '',
+                duration: 0,
+                success: false,
+                error: `CSS input file not found: ${input}`
+            })
+            return
+        }
+
+        const args = ['@tailwindcss/cli', '-i', input]
+        const useStdout = output === ':memory:'
+
+        if (!useStdout) {
+            args.push('-o', output)
+        }
+
+        if (minify) {
+            args.push('--minify')
+        }
+
+        const child = spawn('bunx', args, {
+            cwd: path.dirname(input),
+            stdio: useStdout ? ['pipe', 'pipe', 'pipe'] : ['pipe', 'inherit', 'pipe'],
+            env: { ...process.env }
+        })
+
+        let stdout = ''
+        let stderr = ''
+
+        if (useStdout && child.stdout) {
+            child.stdout.on('data', (data) => { stdout += data.toString() })
+        }
+
+        if (child.stderr) {
+            child.stderr.on('data', (data) => { stderr += data.toString() })
+        }
+
+        child.on('close', (code) => {
+            const duration = Math.round(performance.now() - startTime)
+
+            if (code !== 0) {
+                resolve({
+                    css: '',
+                    duration,
+                    success: false,
+                    error: `Tailwind compilation failed: ${stderr}`
+                })
+                return
+            }
+
+            let css = ''
+            if (useStdout) {
+                css = stdout
+            } else if (fs.existsSync(output)) {
+                css = fs.readFileSync(output, 'utf-8')
+            }
+
+            resolve({
+                css,
+                duration,
+                success: true
+            })
+        })
+
+        child.on('error', (err) => {
+            resolve({
+                css: '',
+                duration: Math.round(performance.now() - startTime),
+                success: false,
+                error: err.message
+            })
+        })
+    })
+}
+
+export interface CSSWatchOptions extends CSSCompileOptions {
+    /** Callback when CSS changes */
+    onChange: (result: CSSCompileResult) => void
+    /** Debounce delay in ms */
+    debounce?: number
+}
+
+/**
+ * Watch CSS and source files for changes, recompile on change
+ */
+export function watchCss(options: CSSWatchOptions): () => void {
+    const { input, output, minify, onChange, debounce = 100 } = options
+
+    let timeout: NodeJS.Timeout | null = null
+    let isCompiling = false
+
+    const recompile = async () => {
+        if (isCompiling) return
+        isCompiling = true
+
+        const result = await compileCssAsync({ input, output, minify })
+        onChange(result)
+
+        isCompiling = false
+    }
+
+    const debouncedRecompile = () => {
+        if (timeout) clearTimeout(timeout)
+        timeout = setTimeout(recompile, debounce)
+    }
+
+    // Watch the styles directory
+    const stylesDir = path.dirname(input)
+    const stylesWatcher = fs.watch(stylesDir, { recursive: true }, (event, filename) => {
+        if (filename?.endsWith('.css')) {
+            debouncedRecompile()
+        }
+    })
+
+    // Watch source files that Tailwind scans (for class changes)
+    const srcDir = path.resolve(stylesDir, '..')
+    let srcWatcher: fs.FSWatcher | null = null
+
+    if (fs.existsSync(srcDir)) {
+        srcWatcher = fs.watch(srcDir, { recursive: true }, (event, filename) => {
+            if (filename?.endsWith('.zen') || filename?.endsWith('.tsx') || filename?.endsWith('.jsx')) {
+                debouncedRecompile()
+            }
+        })
+    }
+
+    // Return cleanup function
+    return () => {
+        if (timeout) clearTimeout(timeout)
+        stylesWatcher.close()
+        srcWatcher?.close()
+    }
+}
+
+/**
+ * Resolve the canonical globals.css path for a Zenith project
+ */
+export function resolveGlobalsCss(projectRoot: string): string | null {
+    // Check for globals.css (canonical)
+    const globalsPath = path.join(projectRoot, 'src', 'styles', 'globals.css')
+    if (fs.existsSync(globalsPath)) return globalsPath
+
+    // Check for global.css (legacy)
+    const globalPath = path.join(projectRoot, 'src', 'styles', 'global.css')
+    if (fs.existsSync(globalPath)) return globalPath
+
+    return null
+}
+
+/**
+ * Get the output path for compiled CSS
+ */
+export function getCompiledCssPath(projectRoot: string, mode: 'dev' | 'build'): string {
+    if (mode === 'build') {
+        return path.join(projectRoot, 'dist', 'assets', 'styles.css')
+    }
+    // In dev mode, we use in-memory compilation
+    return ':memory:'
+}

package/src/generateFinalBundle.ts

@@ -0,0 +1,80 @@
+/**
+ * Generate Final Bundle
+ * 
+ * Phase 8/9/10: Generate final browser-ready bundle
+ * 
+ * Combines:
+ * - Compiled HTML
+ * - Runtime JS
+ * - Expression functions
+ * - Event bindings
+ * - Style injection
+ */
+
+import type { FinalizedOutput } from '@zenithbuild/compiler'
+
+/**
+ * Generate final bundle code
+ * 
+ * This is the complete JavaScript bundle that will execute in the browser.
+ * All expressions are pre-compiled - no template parsing at runtime.
+ */
+export function generateFinalBundle(finalized: FinalizedOutput): string {
+    return `// Zenith Compiled Bundle (Phase 8/9/10)
+// Generated at compile time - no .zen parsing in browser
+// All expressions are pre-compiled - deterministic output
+
+${finalized.js}
+
+// Bundle complete - ready for browser execution
+`
+}
+
+/**
+ * Generate HTML with inline script
+ */
+export function generateHTMLWithScript(
+    html: string,
+    jsBundle: string,
+    styles: string[]
+): string {
+    // Inject styles as <style> tags
+    const styleTags = styles.map(style => `<style>${escapeHTML(style)}</style>`).join('\n')
+
+    // Inject JS bundle as inline script
+    const scriptTag = `<script>${jsBundle}</script>`
+
+    // Find </head> or <body> to inject styles
+    // Find </body> to inject script
+    let result = html
+
+    if (styleTags) {
+        if (result.includes('</head>')) {
+            result = result.replace('</head>', `${styleTags}\n</head>`)
+        } else if (result.includes('<body')) {
+            result = result.replace('<body', `${styleTags}\n<body`)
+        }
+    }
+
+    if (scriptTag) {
+        if (result.includes('</body>')) {
+            result = result.replace('</body>', `${scriptTag}\n</body>`)
+        } else {
+            result += scriptTag
+        }
+    }
+
+    return result
+}
+
+/**
+ * Escape HTML for safe embedding
+ */
+function escapeHTML(str: string): string {
+    return str
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#039;')
+}

package/src/html.rs

@@ -0,0 +1,147 @@
+//! HTML Injector Module
+//!
+//! Injects hashed asset links into index.html:
+//! - `<script type="module" src="...">` for the Entry Chunk
+//! - `<link rel="stylesheet">` for the CSS Asset
+//! - `<link rel="modulepreload">` for critical chunks
+
+/// Asset information for HTML injection
+#[derive(Debug, Clone)]
+pub struct AssetInfo {
+    pub filename: String,
+    pub is_entry: bool,
+    pub is_css: bool,
+}
+
+/// The HTML Injector that updates index.html with hashed asset paths
+pub struct HtmlInjector {
+    /// Template HTML content
+    template: String,
+}
+
+impl HtmlInjector {
+    pub fn new(template: String) -> Self {
+        Self { template }
+    }
+
+    /// Load template from file
+    pub fn from_file(path: &str) -> Result<Self, std::io::Error> {
+        let template = std::fs::read_to_string(path)?;
+        Ok(Self::new(template))
+    }
+
+    /// Inject asset references into the HTML template
+    pub fn inject(&self, assets: &[AssetInfo], preload_chunks: &[String]) -> String {
+        let mut html = self.template.clone();
+
+        // Build injection strings
+        let mut script_tags = String::new();
+        let mut css_links = String::new();
+        let mut preload_links = String::new();
+
+        // CSS links
+        for asset in assets.iter().filter(|a| a.is_css) {
+            css_links.push_str(&format!(
+                r#"    <link rel="stylesheet" href="/{}">"#,
+                asset.filename
+            ));
+            css_links.push('\n');
+        }
+
+        // Modulepreload for critical chunks
+        for chunk in preload_chunks {
+            preload_links.push_str(&format!(
+                r#"    <link rel="modulepreload" href="/{}">"#,
+                chunk
+            ));
+            preload_links.push('\n');
+        }
+
+        // Entry script (should be last, after preloads)
+        for asset in assets.iter().filter(|a| a.is_entry && !a.is_css) {
+            script_tags.push_str(&format!(
+                r#"    <script type="module" src="/{}"></script>"#,
+                asset.filename
+            ));
+            script_tags.push('\n');
+        }
+
+        // Inject before </head>
+        let head_injection = format!("{}{}", css_links, preload_links);
+        if let Some(pos) = html.find("</head>") {
+            html.insert_str(pos, &head_injection);
+        }
+
+        // Inject scripts before </body>
+        if let Some(pos) = html.find("</body>") {
+            html.insert_str(pos, &script_tags);
+        }
+
+        html
+    }
+
+    /// Generate a minimal HTML template if none exists
+    pub fn generate_default(title: &str) -> String {
+        format!(
+            r#"<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{}</title>
+</head>
+<body>
+    <div id="app"></div>
+</body>
+</html>
+"#,
+            title
+        )
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn test_inject_assets() {
+        let template = r#"<!DOCTYPE html>
+<html>
+<head>
+    <title>Test</title>
+</head>
+<body>
+    <div id="app"></div>
+</body>
+</html>"#;
+
+        let injector = HtmlInjector::new(template.to_string());
+        let assets = vec![
+            AssetInfo {
+                filename: "app-x82z.js".into(),
+                is_entry: true,
+                is_css: false,
+            },
+            AssetInfo {
+                filename: "zenith-abc1.css".into(),
+                is_entry: false,
+                is_css: true,
+            },
+        ];
+        let preloads = vec!["runtime-core-def2.js".into()];
+
+        let result = injector.inject(&assets, &preloads);
+
+        assert!(result.contains(r#"<link rel="stylesheet" href="/zenith-abc1.css">"#));
+        assert!(result.contains(r#"<link rel="modulepreload" href="/runtime-core-def2.js">"#));
+        assert!(result.contains(r#"<script type="module" src="/app-x82z.js"></script>"#));
+    }
+
+    #[test]
+    fn test_generate_default_template() {
+        let html = HtmlInjector::generate_default("My App");
+        assert!(html.contains("<title>My App</title>"));
+        assert!(html.contains("<div id=\"app\"></div>"));
+    }
+}

package/src/index.ts

@@ -0,0 +1,7 @@
+export * from './bundle-generator'
+export * from './generateFinalBundle'
+export * from './build-analyzer'
+export * from './bundler'
+export * from './css'
+export * from './runtime-generator'
+export * from './types'

package/src/lib.rs

@@ -0,0 +1,116 @@
+//! Zenith Bundler
+//!
+//! Rolldown Plugin for the Zenith Framework.
+//!
+//! This crate acts as the **Intelligence Layer** that feeds the Zenith compiler
+//! output to Rolldown, implementing:
+//!
+//! - **Deferred Hydration**: Bootstrap loader with dynamic imports
+//! - **Capability-Based Chunking**: Separate runtime-core and runtime-anim
+//! - **CSS Pruning**: Tree-shake unused Tailwind via ZenManifest.css_classes
+//! - **HTML Injection**: Inject hashed script/CSS links and modulepreload
+//!
+//! # Architecture
+//!
+//! ```text
+//! .zen files → ZenithPlugin (resolve_id/load) → Rolldown Engine → Optimized Output
+//! ```
+
+pub mod bundler;
+pub mod css;
+pub mod html;
+pub mod plugin;
+pub mod store;
+
+pub use css::CssBuffer;
+pub use html::HtmlInjector;
+pub use plugin::ZenithPlugin;
+
+// Re-export Rolldown types for convenience
+pub use rolldown::{Bundler, BundlerBuilder, BundlerOptions};
+pub use rolldown_plugin::Plugin;
+
+// --- NAPI Integration ---
+
+#[cfg(feature = "napi")]
+use napi_derive::napi;
+#[cfg(feature = "napi")]
+use std::sync::Arc;
+#[cfg(feature = "napi")]
+use crate::store::AssetStore;
+#[cfg(feature = "napi")]
+use tokio::sync::{mpsc, oneshot};
+
+#[cfg(feature = "napi")]
+#[napi]
+pub struct ZenithDevController {
+    store: Arc<AssetStore>,
+    rebuild_tx: mpsc::Sender<oneshot::Sender<()>>,
+}
+
+#[cfg(feature = "napi")]
+#[napi]
+impl ZenithDevController {
+    #[napi(constructor)]
+    pub fn new(project_root: String) -> Self {
+        let store = Arc::new(AssetStore::new());
+        let store_clone = store.clone();
+        
+        // Channel for rebuild signals (Robust HMR Pattern)
+        // Main thread sends (reply_channel) -> Builder builds -> Builder replies
+        let (tx, mut rx) = mpsc::channel::<oneshot::Sender<()>>(1);
+
+        // Spawn Watcher/Builder Thread
+        std::thread::spawn(move || {
+            let rt = tokio::runtime::Runtime::new().unwrap();
+            rt.block_on(async move {
+                let mut bundler = crate::bundler::create_dev_bundler(
+                    &format!("{}/src/main.zen", project_root),
+                    Some(&format!("{}/src/components", project_root)),
+                    store_clone
+                );
+                
+                // Initial Build
+                match bundler.write().await {
+                    Ok(_outputs) => {}, // println! removed
+                    Err(_e) => {}, // eprintln! removed for silence? Or keep errors? User said "all logs". I'll keep errors if critical, but silence is cleaner for "library".
+                }
+
+                // Internal Watch Loop (Driven by NAPI calls)
+                while let Some(reply_tx) = rx.recv().await {
+                    match bundler.write().await {
+                        Ok(_) => {
+                            let _ = reply_tx.send(());
+                        }
+                        Err(_e) => {
+                            let _ = reply_tx.send(()); 
+                        }
+                    }
+                }
+            });
+        });
+
+        Self { store, rebuild_tx: tx }
+    }
+
+    #[napi]
+    pub fn get_asset(&self, path: String) -> Option<String> {
+        self.store.get(&path)
+    }
+
+    /// Trigger a rebuild and wait for completion
+    #[napi]
+    pub async fn rebuild(&self) -> napi::Result<()> {
+        let (reply_tx, reply_rx) = oneshot::channel();
+        self.rebuild_tx
+            .send(reply_tx)
+            .await
+            .map_err(|_| napi::Error::from_reason("Builder thread disconnected"))?;
+            
+        reply_rx
+            .await
+            .map_err(|_| napi::Error::from_reason("Builder failed to reply"))?;
+            
+        Ok(())
+    }
+}