juxscript 1.0.20 → 1.0.21

package/bin/cli.js

@@ -1,6 +1,13 @@
 #!/usr/bin/env node
 
-import { compileJuxFile, copyLibToOutput, copyProjectAssets, transpileProjectTypeScript, copyPresetsToOutput } from '../machinery/compiler.js';
+import {
+  copyLibToOutput,
+  copyProjectAssets,
+  transpileProjectTypeScript,
+  copyPresetsToOutput,
+  bundleJuxFilesToRouter,
+  generateIndexHtml
+} from '../machinery/compiler.js';
 import { generateDocs } from '../machinery/doc-generator.js';
 import { start } from '../machinery/server.js';
 import path from 'path';
@@ -42,13 +49,11 @@ console.log(`   Output:   ${PATHS.frontendDist}`);
 console.log(`   Lib:      ${PATHS.juxLib}\n`);
 
 const command = process.argv[2];
+const watchMode = process.argv.includes('--watch');
+const bundleMode = process.argv.includes('--bundle');
 
 /**
  * Recursively find .jux files in a directory
- * 
- * @param {string} dir - Directory to search
- * @param {string[]} fileList - Accumulator for found files
- * @returns {string[]} Array of .jux file paths
  */
 function findJuxFiles(dir, fileList = []) {
   if (!fs.existsSync(dir)) return fileList;
@@ -72,11 +77,12 @@ function findJuxFiles(dir, fileList = []) {
 }
 
 /**
- * Build the entire JUX project
+ * Build the entire JUX project (ALWAYS uses router bundle)
  * 
- * @param {boolean} isServe - Whether building for dev server with hot reload
+ * @param {boolean} isServe - Whether building for dev server
  */
 async function buildProject(isServe = false) {
+  const buildStartTime = performance.now();
   console.log('🔨 Building JUX frontend...\n');
 
   try {
@@ -93,80 +99,121 @@ async function buildProject(isServe = false) {
     }
     fs.mkdirSync(PATHS.frontendDist, { recursive: true });
 
-    // Step 1: Generate documentation from jux lib
+    // Step 1: Generate documentation
+    const docsStartTime = performance.now();
+    let docsTime = 0; // ✅ Declare with default value
     console.log('📚 Generating documentation...');
     try {
       await generateDocs(PATHS.juxLib);
-      console.log('✅ Documentation generated\n');
+      docsTime = performance.now() - docsStartTime;
+      console.log(`✅ Documentation generated (${docsTime.toFixed(0)}ms)\n`);
     } catch (error) {
-      console.warn('⚠️  Failed to generate docs:', error.message);
+      docsTime = performance.now() - docsStartTime; // ✅ Still calculate time even on error
+      console.warn(`⚠️  Failed to generate docs (${docsTime.toFixed(0)}ms):`, error.message);
     }
 
     // Step 2: Copy jux lib to frontend dist
+    const libStartTime = performance.now();
     await copyLibToOutput(PATHS.juxLib, PATHS.frontendDist);
+    const libTime = performance.now() - libStartTime;
+    console.log(`⏱️  Lib copy time: ${libTime.toFixed(0)}ms\n`);
 
-    // Step 2.5: Copy presets folder
+    // Step 3: Copy presets folder
+    const presetsStartTime = performance.now();
     await copyPresetsToOutput(PATHS.packageRoot, PATHS.frontendDist);
+    const presetsTime = performance.now() - presetsStartTime;
+    console.log(`⏱️  Presets copy time: ${presetsTime.toFixed(0)}ms\n`);
 
-    // Step 3: Copy project assets from jux/ (CSS, JS, images)
+    // Step 4: Copy project assets (CSS, JS, images)
+    const assetsStartTime = performance.now();
     await copyProjectAssets(PATHS.juxSource, PATHS.frontendDist);
+    const assetsTime = performance.now() - assetsStartTime;
+    console.log(`⏱️  Assets copy time: ${assetsTime.toFixed(0)}ms\n`);
 
-    // Step 4: Transpile TypeScript files from jux/ to jux-dist/
+    // Step 5: Transpile TypeScript files
+    const tsStartTime = performance.now();
     await transpileProjectTypeScript(PATHS.juxSource, PATHS.frontendDist);
+    const tsTime = performance.now() - tsStartTime;
+    console.log(`⏱️  TypeScript transpile time: ${tsTime.toFixed(0)}ms\n`);
 
-    // Step 5: Compile .jux files from jux/ directory ONLY
+    // Step 6: Bundle all .jux files into router
     const projectJuxFiles = findJuxFiles(PATHS.juxSource);
     console.log(`📝 Found ${projectJuxFiles.length} .jux file(s) in /jux\n`);
 
-    for (const file of projectJuxFiles) {
-      try {
-        await compileJuxFile(file, {
-          distDir: PATHS.frontendDist,
-          projectRoot: PATHS.juxSource,
-          isServe
-        });
-      } catch (err) {
-        console.error(`Error compiling ${file}:`, err.message);
-      }
+    if (projectJuxFiles.length === 0) {
+      console.warn('⚠️  No .jux files found to bundle');
+      process.exit(1);
     }
 
-    // Step 6: Compile vendor layouts
-    const layoutsDir = path.join(PATHS.juxLib, 'layouts');
-
-    if (fs.existsSync(layoutsDir)) {
-      console.log('\n📐 Compiling vendor layouts...');
-      const vendorJuxFiles = findJuxFiles(layoutsDir);
-      console.log(`Found ${vendorJuxFiles.length} vendor layout(s)\n`);
-
-      for (const file of vendorJuxFiles) {
-        try {
-          const relPath = path.relative(PATHS.juxLib, file);
-
-          await compileJuxFile(file, {
-            distDir: path.join(PATHS.frontendDist, 'lib'),
-            projectRoot: PATHS.juxLib,
-            isServe
-          });
-
-          console.log(`  ✓ Compiled: ${relPath}`);
-        } catch (err) {
-          console.error(`Error compiling vendor layout ${file}:`, err.message);
-        }
-      }
+    // ✅ Bundle and get the generated filename
+    const bundleStartTime = performance.now();
+    const mainJsFilename = await bundleJuxFilesToRouter(PATHS.juxSource, PATHS.frontendDist, {
+      routePrefix: ''
+    });
+    const bundleTime = performance.now() - bundleStartTime;
+
+    // Generate routes for index.html
+    const routes = projectJuxFiles.map(juxFile => {
+      const relativePath = path.relative(PATHS.juxSource, juxFile);
+      const parsedPath = path.parse(relativePath);
+
+      const rawFunctionName = parsedPath.dir
+        ? `${parsedPath.dir.replace(/\//g, '_')}_${parsedPath.name}`
+        : parsedPath.name;
+
+      const functionName = rawFunctionName
+        .replace(/[-_]/g, ' ')
+        .split(' ')
+        .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+        .join('');
+
+      const routePath = '/' + (parsedPath.dir ? `${parsedPath.dir}/` : '') + parsedPath.name;
+
+      return {
+        path: routePath.replace(/\/+/g, '/'),
+        functionName
+      };
+    });
+
+    // ✅ Generate unified index.html
+    const indexStartTime = performance.now();
+    generateIndexHtml(PATHS.frontendDist, routes, mainJsFilename);
+    const indexTime = performance.now() - indexStartTime;
+
+    const totalBuildTime = performance.now() - buildStartTime;
+
+    console.log(`\n✅ Bundled ${projectJuxFiles.length} page(s) → ${PATHS.frontendDist}/${mainJsFilename}\n`);
+
+    // ✅ Build summary with timing breakdown
+    console.log(`📊 Build Summary:`);
+    console.log(`   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━`);
+    console.log(`   Documentation:     ${docsTime.toFixed(0)}ms`);
+    console.log(`   Library copy:      ${libTime.toFixed(0)}ms`);
+    console.log(`   Presets copy:      ${presetsTime.toFixed(0)}ms`);
+    console.log(`   Assets copy:       ${assetsTime.toFixed(0)}ms`);
+    console.log(`   TypeScript:        ${tsTime.toFixed(0)}ms`);
+    console.log(`   Router bundle:     ${bundleTime.toFixed(0)}ms`);
+    console.log(`   Index generation:  ${indexTime.toFixed(0)}ms`);
+    console.log(`   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━`);
+    console.log(`   Total build time:  ${totalBuildTime.toFixed(0)}ms\n`);
+
+    // Show usage
+    if (!isServe) {
+      console.log('📦 Serve from your backend:');
+      console.log(`   Express:  app.use(express.static('jux-dist'))`);
+      console.log(`   Flask:    app = Flask(__name__, static_folder='jux-dist')`);
+      console.log(`   FastAPI:  app.mount("/", StaticFiles(directory="jux-dist"), name="static")`);
+      console.log('');
+      console.log('📍 Available routes:');
+      routes.forEach(r => {
+        console.log(`   ${r.path}`);
+      });
+      console.log('');
     }
 
-    console.log(`\n✅ Built ${projectJuxFiles.length} file(s) → ${PATHS.frontendDist}\n`);
-
-    // Show backend integration examples
-    console.log('📦 Serve from your backend:');
-    console.log(`   Express:  app.use(express.static('jux-dist'))`);
-    console.log(`   Flask:    app = Flask(__name__, static_folder='jux-dist')`);
-    console.log(`   FastAPI:  app.mount("/", StaticFiles(directory="jux-dist"), name="static")`);
-    console.log(`   Laravel:  Route::view('/', 'jux-dist/index.html')`);
-    console.log('');
-
   } catch (err) {
-    console.error('❌ Build error:', err.message);
+    const failTime = performance.now() - buildStartTime;
+    console.error(`❌ Build error after ${failTime.toFixed(0)}ms:`, err.message);
     console.error(err.stack);
     process.exit(1);
   }
@@ -261,10 +308,12 @@ node_modules/
     console.log('  4. Serve jux-dist/ from your backend\n');
 
   } else if (command === 'build') {
+    // ✅ Always builds router bundle
     await buildProject(false);
     console.log(`✅ Build complete: ${PATHS.frontendDist}`);
 
   } else if (command === 'serve') {
+    // ✅ Always serves router bundle
     await buildProject(true);
 
     const port = parseInt(process.argv[3]) || 3000;
@@ -275,17 +324,17 @@ node_modules/
 JUX CLI - A JavaScript UX authorship platform
 
 Usage:
-  npx jux init               Initialize a new JUX project
-  npx jux build              Compile .jux files from ./jux/ to ./jux-dist/
-  npx jux serve [port]       Start dev server with hot reload (default: 3000)
+  npx jux init          Initialize a new JUX project
+  npx jux build         Build router bundle to ./jux-dist/
+  npx jux serve [port]  Start dev server with hot reload (default: 3000)
 
 Project Structure:
   my-project/
-  ├── jux/                   # Your .jux source files
-  │   ├── index.jux         # Entry point (uses 'juxscript' imports)
-  │   └── pages/            # Additional pages
-  ├── jux-dist/             # Build output (git-ignore this)
-  ├── server/               # Your backend
+  ├── jux/              # Your .jux source files
+  │   ├── index.jux    # Entry point
+  │   └── pages/       # Additional pages
+  ├── jux-dist/        # Build output (git-ignore this)
+  ├── server/          # Your backend
   └── package.json
 
 Import Style:
@@ -294,15 +343,15 @@ Import Style:
   import 'juxscript/presets/notion.js';
 
 Getting Started:
-  1. npx jux init           # Create project structure
-  2. npm install            # Install dependencies
-  3. npx jux build          # Build to jux-dist/
+  1. npx jux init      # Create project structure
+  2. npm install       # Install dependencies
+  3. npx jux serve     # Dev server with hot reload
   4. Serve jux-dist/ from your backend
 
 Examples:
-  npx jux build              Build for production
-  npx jux serve              Start dev server
-  npx jux serve 8080         Start on port 8080
+  npx jux build        Build production bundle
+  npx jux serve        Start dev server on port 3000
+  npx jux serve 8080   Start dev server on port 8080
     `);
   }
 })();

package/lib/components/alert.ts

@@ -1,7 +1,10 @@
-import { getOrCreateContainer } from './helpers.js';
-import { State } from '../reactivity/state.js';
+import { BaseComponent } from './base/BaseComponent.js';
 import { renderIcon } from './icons.js';
 
+// Event definitions
+const TRIGGER_EVENTS = [] as const;
+const CALLBACK_EVENTS = ['dismiss'] as const;
+
 export interface AlertOptions {
     message?: string;
     type?: 'info' | 'success' | 'warning' | 'error';
@@ -21,26 +24,11 @@ type AlertState = {
     class: string;
 };
 
-export class Alert {
-    state: AlertState;
-    container: HTMLElement | null = null;
-    _id: string;
-    id: string;
-
-    // CRITICAL: Store bind/sync instructions for deferred wiring
-    private _bindings: Array<{ event: string, handler: Function }> = [];
-    private _syncBindings: Array<{
-        property: string,
-        stateObj: State<any>,
-        toState?: Function,
-        toComponent?: Function
-    }> = [];
+export class Alert extends BaseComponent<AlertState> {
+    private _alert: HTMLElement | null = null;
 
     constructor(id: string, options: AlertOptions = {}) {
-        this._id = id;
-        this.id = id;
-
-        this.state = {
+        super(id, {
             message: options.message ?? '',
             type: options.type ?? 'info',
             dismissible: options.dismissible ?? true,
@@ -48,9 +36,30 @@ export class Alert {
             visible: true,
             style: options.style ?? '',
             class: options.class ?? ''
-        };
+        });
+    }
+
+    protected getTriggerEvents(): readonly string[] {
+        return TRIGGER_EVENTS;
+    }
+
+    protected getCallbackEvents(): readonly string[] {
+        return CALLBACK_EVENTS;
     }
 
+    /* ═════════════════════════════════════════════════════════════════
+     * FLUENT API
+     * ═════════════════════════════════════════════════════════════════ */
+
+    // ✅ Inherited from BaseComponent:
+    // - style(), class()
+    // - bind(), sync(), renderTo()
+    // - addClass(), removeClass(), toggleClass()
+    // - visible(), show(), hide(), toggleVisibility()
+    // - attr(), attrs(), removeAttr()
+    // - disabled(), enable(), disable()
+    // - loading(), focus(), blur(), remove()
+
     message(value: string): this {
         this.state.message = value;
         return this;
@@ -71,66 +80,17 @@ export class Alert {
         return this;
     }
 
-    style(value: string): this {
-        this.state.style = value;
-        return this;
-    }
-
-    class(value: string): this {
-        this.state.class = value;
-        return this;
-    }
-
-    bind(event: string, handler: Function): this {
-        this._bindings.push({ event, handler });
-        return this;
-    }
-
-    sync(property: string, stateObj: State<any>, toState?: Function, toComponent?: Function): this {
-        if (!stateObj || typeof stateObj.subscribe !== 'function') {
-            throw new Error(`Alert.sync: Expected a State object for property "${property}"`);
-        }
-        this._syncBindings.push({ property, stateObj, toState, toComponent });
-        return this;
-    }
-
-    show(): this {
-        this.state.visible = true;
-        const alertEl = document.getElementById(this._id);
-        if (alertEl) {
-            alertEl.style.display = 'flex';
-        }
-        return this;
-    }
-
-    hide(): this {
-        this.state.visible = false;
-        const alertEl = document.getElementById(this._id);
-        if (alertEl) {
-            alertEl.style.display = 'none';
-        }
-        return this;
-    }
+    /* ═════════════════════════════════════════════════════════════════
+     * RENDER
+     * ═════════════════════════════════════════════════════════════════ */
 
     render(targetId?: string): this {
-        // === 1. SETUP: Get or create container ===
-        let container: HTMLElement;
-        if (targetId) {
-            const target = document.querySelector(targetId);
-            if (!target || !(target instanceof HTMLElement)) {
-                throw new Error(`Alert: Target "${targetId}" not found`);
-            }
-            container = target;
-        } else {
-            container = getOrCreateContainer(this._id);
-        }
-        this.container = container;
+        const container = this._setupContainer(targetId);
 
-        // === 2. PREPARE: Destructure state and check sync flags ===
         const { message, type, dismissible, icon, style, class: className } = this.state;
         const hasVisibleSync = this._syncBindings.some(b => b.property === 'visible');
 
-        // === 3. BUILD: Create DOM elements ===
+        // Build alert element
         const alert = document.createElement('div');
         alert.className = `jux-alert jux-alert-${type}`;
         alert.id = this._id;
@@ -156,42 +116,50 @@ export class Alert {
             alert.appendChild(closeBtn);
         }
 
-        // === 4. WIRE: Attach event listeners and sync bindings ===
-
         // Default dismiss behavior (only if NOT using sync)
         if (!hasVisibleSync && dismissible) {
             const closeBtn = alert.querySelector('.jux-alert-close');
             closeBtn?.addEventListener('click', () => {
+                // 🎯 Fire the dismiss callback event
+                this._triggerCallback('dismiss');
                 alert.remove();
             });
         }
 
-        // Wire custom bindings from .bind() calls
-        this._bindings.forEach(({ event, handler }) => {
-            alert.addEventListener(event, handler as EventListener);
-        });
+        // Wire events using inherited method
+        this._wireStandardEvents(alert);
 
-        // Wire sync bindings from .sync() calls
+        // Wire sync bindings
         this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
             if (property === 'message') {
-                const transformToComponent = toComponent || ((v: any) => String(v));
+                const transform = toComponent || ((v: any) => String(v));
 
                 stateObj.subscribe((val: any) => {
-                    const transformed = transformToComponent(val);
+                    const transformed = transform(val);
                     content.textContent = transformed;
                     this.state.message = transformed;
                 });
             }
+            else if (property === 'type') {
+                const transform = toComponent || ((v: any) => String(v));
+
+                stateObj.subscribe((val: any) => {
+                    const transformed = transform(val);
+                    alert.className = `jux-alert jux-alert-${transformed}`;
+                    if (className) alert.className += ` ${className}`;
+                    this.state.type = transformed;
+                });
+            }
             else if (property === 'visible') {
                 const transformToState = toState || ((v: any) => Boolean(v));
-                const transformToComponent = toComponent || ((v: any) => Boolean(v));
+                const transform = toComponent || ((v: any) => Boolean(v));
 
                 let isUpdating = false;
 
                 // State → Component
                 stateObj.subscribe((val: any) => {
                     if (isUpdating) return;
-                    const transformed = transformToComponent(val);
+                    const transformed = transform(val);
                     alert.style.display = transformed ? 'flex' : 'none';
                 });
 
@@ -205,14 +173,19 @@ export class Alert {
                         alert.style.display = 'none';
                         stateObj.set(transformToState(false));
 
+                        // 🎯 Fire the dismiss callback event
+                        this._triggerCallback('dismiss');
+
                         setTimeout(() => { isUpdating = false; }, 0);
                     });
                 }
             }
         });
 
-        // === 5. RENDER: Append to DOM and finalize ===
         container.appendChild(alert);
+        this._alert = alert;
+
+        this._injectAlertStyles();
 
         requestAnimationFrame(() => {
             if ((window as any).lucide) {
@@ -223,11 +196,89 @@ export class Alert {
         return this;
     }
 
-    renderTo(juxComponent: any): this {
-        if (!juxComponent?._id) {
-            throw new Error('Alert.renderTo: Invalid component');
-        }
-        return this.render(`#${juxComponent._id}`);
+    private _injectAlertStyles(): void {
+        const styleId = 'jux-alert-styles';
+        if (document.getElementById(styleId)) return;
+
+        const style = document.createElement('style');
+        style.id = styleId;
+        style.textContent = `
+            .jux-alert {
+                display: flex;
+                align-items: center;
+                gap: 12px;
+                padding: 16px;
+                border-radius: 8px;
+                margin-bottom: 12px;
+                position: relative;
+                animation: slideIn 0.3s ease-out;
+            }
+            
+            @keyframes slideIn {
+                from {
+                    opacity: 0;
+                    transform: translateX(-20px);
+                }
+                to {
+                    opacity: 1;
+                    transform: translateX(0);
+                }
+            }
+            
+            .jux-alert-info {
+                background: #dbeafe;
+                border-left: 4px solid #3b82f6;
+                color: #1e40af;
+            }
+            
+            .jux-alert-success {
+                background: #d1fae5;
+                border-left: 4px solid #10b981;
+                color: #065f46;
+            }
+            
+            .jux-alert-warning {
+                background: #fef3c7;
+                border-left: 4px solid #f59e0b;
+                color: #92400e;
+            }
+            
+            .jux-alert-error {
+                background: #fee2e2;
+                border-left: 4px solid #ef4444;
+                color: #991b1b;
+            }
+            
+            .jux-alert-icon {
+                flex-shrink: 0;
+            }
+            
+            .jux-alert-content {
+                flex: 1;
+                font-size: 14px;
+            }
+            
+            .jux-alert-close {
+                flex-shrink: 0;
+                background: transparent;
+                border: none;
+                font-size: 24px;
+                cursor: pointer;
+                opacity: 0.6;
+                transition: opacity 0.2s;
+                padding: 0;
+                width: 24px;
+                height: 24px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+            }
+            
+            .jux-alert-close:hover {
+                opacity: 1;
+            }
+        `;
+        document.head.appendChild(style);
     }
 }