juxscript 1.0.20 → 1.0.21

package/machinery/watcher.js

@@ -1,148 +1,171 @@
-import chokidar from 'chokidar';
-import path from 'path';
-import { compileJuxFile, copyLibToOutput } from './compiler.js';
 import fs from 'fs';
-import { glob } from 'glob';
-
-export function startWatcher(projectRoot, distDir, clients = []) {
-  console.log('🔍 Watcher Configuration:');
-  console.log('  Project Root:', projectRoot);
-  console.log('  Dist Dir:', distDir);
-  
-  // Manually find all files to watch
-  console.log('\n📋 Finding files to watch...');
-  
-  // Project .jux files
-  const juxFiles = glob.sync('**/*.jux', { 
-    cwd: projectRoot, 
-    ignore: ['node_modules/**', 'dist/**', '.git/**'],
-    absolute: true
-  });
-  
-  // Vendor layout .jux files
-  const libRoot = path.resolve(projectRoot, '../lib');
-  const vendorJuxFiles = glob.sync('layouts/**/*.jux', { 
-    cwd: libRoot, 
-    absolute: true
-  });
-  
-  const cssFiles = glob.sync('**/*.css', { 
-    cwd: projectRoot, 
-    ignore: ['node_modules/**', 'dist/**', '.git/**'],
-    absolute: true
-  });
-  
-  const libFiles = glob.sync('**/*.{ts,js,css}', { 
-    cwd: libRoot,
-    absolute: true
-  });
-  
-  const machineryFiles = glob.sync('machinery/**/*.js', { 
-    cwd: path.resolve(projectRoot, '..'),
-    absolute: true
-  });
+import path from 'path';
+import {
+  copyLibToOutput,
+  bundleJuxFilesToRouter,
+  generateIndexHtml
+} from './compiler.js';
 
-  const allFiles = [...juxFiles, ...vendorJuxFiles, ...cssFiles, ...libFiles, ...machineryFiles];
-  
-  console.log(`  Found ${juxFiles.length} project .jux files`);
-  console.log(`  Found ${vendorJuxFiles.length} vendor .jux files`);
-  console.log(`  Found ${cssFiles.length} .css files`);
-  console.log(`  Found ${libFiles.length} lib/ files`);
-  console.log(`  Found ${machineryFiles.length} machinery/ files`);
-  console.log(`  Total: ${allFiles.length} files\n`);
-
-  if (allFiles.length === 0) {
-    console.error('❌ No files found to watch!');
-    return null;
-  }
+let isRebuilding = false;
+let rebuildQueued = false;
+
+/**
+ * Find all .jux files in a directory
+ */
+function findJuxFiles(dir, fileList = []) {
+  if (!fs.existsSync(dir)) return fileList;
+
+  const files = fs.readdirSync(dir);
 
-  // Watch the specific files we found
-  const watcher = chokidar.watch(allFiles, {
-    persistent: true,
-    ignoreInitial: true,
-    awaitWriteFinish: {
-      stabilityThreshold: 100,
-      pollInterval: 50
+  files.forEach(file => {
+    const filePath = path.join(dir, file);
+    const stat = fs.statSync(filePath);
+
+    if (stat.isDirectory()) {
+      if (file !== 'node_modules' && file !== 'jux-dist' && file !== '.git' && file !== 'server') {
+        findJuxFiles(filePath, fileList);
+      }
+    } else if (file.endsWith('.jux')) {
+      fileList.push(filePath);
     }
   });
 
-  watcher.on('ready', () => {
-    console.log('✅ Watching for changes...\n');
-    allFiles.forEach(file => {
-      const rel = path.relative(path.resolve(projectRoot, '..'), file);
-      console.log(`  👁️  ${rel}`);
+  return fileList;
+}
+
+/**
+ * Full rebuild of the entire bundle
+ */
+async function fullRebuild(juxSource, distDir) {
+  const startTime = performance.now(); // ✅ Start timing
+  console.log('\n🔄 Rebuilding bundle...');
+
+  try {
+    // Find all .jux files
+    const projectJuxFiles = findJuxFiles(juxSource);
+    console.log(`   Found ${projectJuxFiles.length} .jux file(s)`);
+
+    // ✅ Time the bundling step
+    const bundleStartTime = performance.now();
+
+    // Bundle all files
+    const mainJsFilename = await bundleJuxFilesToRouter(juxSource, distDir, {
+      routePrefix: ''
     });
-    console.log('');
-  });
 
-  watcher.on('change', async (filePath) => {
-    const relativePath = path.relative(path.resolve(projectRoot, '..'), filePath);
-    console.log(`\n🔄 Changed: ${relativePath}`);
-
-    try {
-      if (filePath.endsWith('.jux')) {
-        console.log('   → Compiling .jux file...');
-        
-        // Determine if it's a vendor or project file
-        if (filePath.includes('/lib/layouts/')) {
-          // Vendor layout file
-          await compileJuxFile(filePath, { 
-            distDir: path.join(distDir, 'lib'),
-            projectRoot: libRoot,
-            isServe: true 
-          });
-        } else {
-          // Project file
-          await compileJuxFile(filePath, { distDir, projectRoot, isServe: true });
-        }
-        
-        console.log(`✅ Recompiled: ${relativePath}`);
-      } else if (filePath.includes('/lib/')) {
-        console.log('   → Rebuilding lib files...');
-        await copyLibToOutput(projectRoot, distDir);
-        console.log(`✅ Rebuilt lib files`);
-      } else if (filePath.endsWith('.css')) {
-        console.log('   → CSS file changed');
-        console.log(`✅ CSS change detected`);
-      } else if (filePath.includes('/machinery/')) {
-        console.log('   → Machinery file changed');
-        console.log(`⚠️  Restart server to apply changes`);
-      }
+    const bundleTime = performance.now() - bundleStartTime;
 
-      console.log(`   → Notifying ${clients.length} client(s)`);
-      notifyClients(clients);
-    } catch (err) {
-      console.error(`❌ Error processing ${relativePath}:`, err.message);
-      console.error(err.stack);
-    }
-  });
+    // ✅ Time the route generation step
+    const routeStartTime = performance.now();
 
-  watcher.on('add', (filePath) => {
-    const relativePath = path.relative(path.resolve(projectRoot, '..'), filePath);
-    console.log(`➕ New file detected: ${relativePath}`);
-  });
+    // Generate routes for index.html
+    const routes = projectJuxFiles.map(juxFile => {
+      const relativePath = path.relative(juxSource, juxFile);
+      const parsedPath = path.parse(relativePath);
 
-  watcher.on('unlink', (filePath) => {
-    const relativePath = path.relative(path.resolve(projectRoot, '..'), filePath);
-    console.log(`➖ File deleted: ${relativePath}`);
-  });
+      const rawFunctionName = parsedPath.dir
+        ? `${parsedPath.dir.replace(/\//g, '_')}_${parsedPath.name}`
+        : parsedPath.name;
 
-  watcher.on('error', (error) => {
-    console.error('❌ Watcher error:', error);
-  });
+      const functionName = rawFunctionName
+        .replace(/[-_]/g, ' ')
+        .split(' ')
+        .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+        .join('');
 
-  return watcher;
+      const routePath = '/' + (parsedPath.dir ? `${parsedPath.dir}/` : '') + parsedPath.name;
+
+      return {
+        path: routePath.replace(/\/+/g, '/'),
+        functionName
+      };
+    });
+
+    // Generate index.html
+    generateIndexHtml(distDir, routes, mainJsFilename);
+
+    const routeTime = performance.now() - routeStartTime;
+    const totalTime = performance.now() - startTime;
+
+    // ✅ Pretty-print timing breakdown
+    console.log(`\n⏱️  Rebuild Performance:`);
+    console.log(`   Bundle generation: ${bundleTime.toFixed(0)}ms`);
+    console.log(`   Route/index.html:  ${routeTime.toFixed(0)}ms`);
+    console.log(`   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━`);
+    console.log(`   Total rebuild:     ${totalTime.toFixed(0)}ms`);
+
+    // ✅ Color-coded performance indicator
+    if (totalTime < 100) {
+      console.log(`   ✅ Lightning fast! ⚡`);
+    } else if (totalTime < 500) {
+      console.log(`   ✅ Fast rebuild`);
+    } else if (totalTime < 1000) {
+      console.log(`   ⚠️  Moderate speed`);
+    } else {
+      console.log(`   🐌 Slow rebuild (consider optimizing)`);
+    }
+
+    console.log(`✅ Bundle rebuilt: ${mainJsFilename}\n`);
+    return true;
+
+  } catch (err) {
+    const failTime = performance.now() - startTime;
+    console.error(`❌ Rebuild failed after ${failTime.toFixed(0)}ms:`, err.message);
+    return false;
+  }
 }
 
-function notifyClients(clients) {
-  let notified = 0;
-  clients.forEach(client => {
-    if (client.readyState === 1) {
-      client.send(JSON.stringify({ type: 'reload' }));
-      notified++;
+/**
+ * Start watching for file changes and rebuild on change
+ */
+export function startWatcher(juxSource, distDir, wsClients) {
+  console.log(`👀 Watching: ${juxSource}`);
+
+  const watcher = fs.watch(juxSource, { recursive: true }, async (eventType, filename) => {
+    // Ignore non-.jux files and certain patterns
+    if (!filename ||
+      !filename.endsWith('.jux') ||
+      filename.includes('node_modules') ||
+      filename.includes('jux-dist') ||
+      filename.startsWith('.')) {
+      return;
+    }
+
+    // Debounce: If already rebuilding, queue another rebuild
+    if (isRebuilding) {
+      rebuildQueued = true;
+      return;
+    }
+
+    isRebuilding = true;
+    console.log(`\n📝 File changed: ${filename}`);
+
+    // Rebuild the entire bundle
+    const success = await fullRebuild(juxSource, distDir);
+
+    isRebuilding = false;
+
+    // Notify all WebSocket clients to reload
+    if (success && wsClients && wsClients.length > 0) {
+      console.log(`🔌 Notifying ${wsClients.length} client(s) to reload`);
+
+      // ✅ Add small delay to ensure file is fully written
+      setTimeout(() => {
+        wsClients.forEach(client => {
+          if (client.readyState === 1) { // OPEN
+            client.send(JSON.stringify({ type: 'reload' }));
+          }
+        });
+      }, 100);
+    }
+
+    // Process queued rebuild if needed
+    if (rebuildQueued) {
+      rebuildQueued = false;
+      console.log('🔄 Processing queued rebuild...');
+      setTimeout(() => watcher.emit('change', 'change', filename), 500);
     }
   });
-  if (notified > 0) {
-    console.log(`   ✉️  Reloaded ${notified} client(s)`);
-  }
+
+  return watcher;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "juxscript",
-  "version": "1.0.20",
+  "version": "1.0.21",
   "type": "module",
   "description": "A JavaScript UX authorship platform",
   "main": "lib/jux.js",