pulse-js-framework 1.7.4 → 1.7.5

package/cli/analyze.js

@@ -7,6 +7,7 @@ import { readFileSync, statSync, existsSync } from 'fs';
 import { join, dirname, basename, relative } from 'path';
 import { findPulseFiles, parseArgs, formatBytes, relativePath, resolveImportPath } from './utils/file-utils.js';
 import { log } from './logger.js';
+import { createTimer, formatDuration, createSpinner, createBarChart, createTree, createTable, printSection } from './utils/cli-ui.js';
 
 /**
  * Analyze the bundle/project
@@ -384,74 +385,111 @@ function formatConsoleOutput(analysis, verbose = false) {
   lines.push('  PULSE BUNDLE ANALYSIS');
   lines.push('═'.repeat(60));
 
-  // Summary
+  // Summary table
   lines.push('');
-  lines.push('  SUMMARY');
-  lines.push('  ' + '─'.repeat(40));
-  lines.push(`  Total files:     ${analysis.summary.totalFiles}`);
-  lines.push(`  .pulse files:    ${analysis.summary.pulseFiles}`);
-  lines.push(`  .js files:       ${analysis.summary.jsFiles}`);
-  lines.push(`  Total size:      ${analysis.summary.totalSizeFormatted}`);
-
-  // Complexity (top 5)
+  lines.push(createTable(
+    ['Metric', 'Value'],
+    [
+      ['Total files', String(analysis.summary.totalFiles)],
+      ['.pulse files', String(analysis.summary.pulseFiles)],
+      ['.js files', String(analysis.summary.jsFiles)],
+      ['Total size', analysis.summary.totalSizeFormatted]
+    ],
+    { align: ['left', 'right'] }
+  ));
+
+  // Complexity bar chart (top 5)
   if (analysis.complexity.length > 0) {
-    lines.push('');
-    lines.push('  COMPLEXITY (Top 5)');
-    lines.push('  ' + '─'.repeat(40));
+    printSection('COMPONENT COMPLEXITY');
     const top5 = analysis.complexity.slice(0, 5);
-    for (const comp of top5) {
-      const bar = '█'.repeat(Math.min(comp.complexity, 20));
-      lines.push(`  ${comp.componentName.padEnd(20)} ${String(comp.complexity).padStart(3)} ${bar}`);
+    const chartData = top5.map(comp => ({
+      label: comp.componentName.slice(0, 15).padEnd(15),
+      value: comp.complexity,
+      color: comp.complexity > 20 ? 'red' : comp.complexity > 10 ? 'yellow' : 'green'
+    }));
+    lines.push(createBarChart(chartData, { maxWidth: 30, showValues: true }));
+
+    // Detailed metrics table for verbose mode
+    if (verbose) {
+      lines.push('');
+      lines.push(createTable(
+        ['Component', 'State', 'Actions', 'Depth', 'Directives', 'Score'],
+        top5.map(c => [
+          c.componentName,
+          String(c.stateCount),
+          String(c.actionCount),
+          String(c.viewDepth),
+          String(c.directiveCount),
+          String(c.complexity)
+        ]),
+        { align: ['left', 'right', 'right', 'right', 'right', 'right'] }
+      ));
     }
   }
 
-  // Dead code
+  // Dead code warnings
   if (analysis.deadCode.length > 0) {
-    lines.push('');
-    lines.push('  DEAD CODE');
-    lines.push('  ' + '─'.repeat(40));
+    printSection('DEAD CODE DETECTED');
     for (const dead of analysis.deadCode) {
       lines.push(`  ⚠ ${dead.file}`);
-      lines.push(`    ${dead.message}`);
+      lines.push(`    └─ ${dead.message}`);
     }
   }
 
-  // File breakdown (verbose)
+  // File size breakdown with bar chart (verbose)
   if (verbose && analysis.fileBreakdown.length > 0) {
-    lines.push('');
-    lines.push('  FILE BREAKDOWN');
-    lines.push('  ' + '─'.repeat(40));
-    for (const file of analysis.fileBreakdown) {
-      const size = file.sizeFormatted.padStart(10);
-      lines.push(`  ${size}  ${file.path}`);
-    }
+    printSection('FILE SIZE BREAKDOWN');
+    const top10Files = analysis.fileBreakdown.slice(0, 10);
+    const sizeChartData = top10Files.map(file => ({
+      label: basename(file.path).slice(0, 20).padEnd(20),
+      value: file.size,
+      color: file.type === 'pulse' ? 'cyan' : 'blue'
+    }));
+    lines.push(createBarChart(sizeChartData, { maxWidth: 25, showValues: true, unit: 'B' }));
   }
 
-  // Import graph (verbose)
+  // Import graph as tree (verbose)
   if (verbose && analysis.importGraph.edges.length > 0) {
-    lines.push('');
-    lines.push('  IMPORT GRAPH');
-    lines.push('  ' + '─'.repeat(40));
-    for (const edge of analysis.importGraph.edges.slice(0, 20)) {
-      lines.push(`  ${edge.from} → ${edge.to}`);
-    }
-    if (analysis.importGraph.edges.length > 20) {
-      lines.push(`  ... and ${analysis.importGraph.edges.length - 20} more`);
+    printSection('IMPORT DEPENDENCY TREE');
+
+    // Build tree structure from edges
+    const tree = buildDependencyTree(analysis.importGraph);
+    if (tree) {
+      lines.push(createTree(tree));
     }
+
+    // Show edge count summary
+    lines.push(`  Total dependencies: ${analysis.importGraph.edges.length}`);
   }
 
   // State usage (verbose)
   if (verbose && analysis.stateUsage.length > 0) {
-    lines.push('');
-    lines.push('  STATE VARIABLES');
-    lines.push('  ' + '─'.repeat(40));
-    for (const state of analysis.stateUsage.slice(0, 10)) {
-      const shared = state.isShared ? ' (shared)' : '';
+    printSection('STATE VARIABLES');
+
+    // Show shared state as a table
+    const sharedState = analysis.stateUsage.filter(s => s.isShared);
+    if (sharedState.length > 0) {
+      lines.push('  Shared state (used in multiple files):');
+      lines.push(createTable(
+        ['Variable', 'Files'],
+        sharedState.slice(0, 5).map(s => [s.name, String(s.files.length)]),
+        { align: ['left', 'right'] }
+      ));
+    }
+
+    // State tree visualization
+    for (const state of analysis.stateUsage.slice(0, 5)) {
+      const shared = state.isShared ? ' \x1b[33m(shared)\x1b[0m' : '';
       lines.push(`  ${state.name}${shared}`);
-      for (const file of state.files) {
-        lines.push(`    └─ ${file}`);
+      for (let i = 0; i < state.files.length; i++) {
+        const isLast = i === state.files.length - 1;
+        const prefix = isLast ? '└── ' : '├── ';
+        lines.push(`    ${prefix}${state.files[i]}`);
       }
     }
+    if (analysis.stateUsage.length > 5) {
+      lines.push(`  ... and ${analysis.stateUsage.length - 5} more state variables`);
+    }
   }
 
   lines.push('');
@@ -460,6 +498,44 @@ function formatConsoleOutput(analysis, verbose = false) {
   return lines.join('\n');
 }
 
+/**
+ * Build a dependency tree structure for visualization
+ */
+function buildDependencyTree(importGraph) {
+  if (!importGraph.edges.length) return null;
+
+  // Find entry points (files that aren't imported by others)
+  const imported = new Set(importGraph.edges.map(e => e.to));
+  const entryPoints = importGraph.nodes.filter(n =>
+    !imported.has(n) && (n.includes('main') || n.includes('index') || n.includes('App'))
+  );
+
+  if (entryPoints.length === 0 && importGraph.nodes.length > 0) {
+    entryPoints.push(importGraph.nodes[0]);
+  }
+
+  // Build tree recursively (limit depth to avoid infinite loops)
+  function buildNode(name, visited = new Set(), depth = 0) {
+    if (depth > 5 || visited.has(name)) {
+      return { name: basename(name) + (visited.has(name) ? ' (circular)' : ' ...'), children: [] };
+    }
+
+    visited.add(name);
+    const children = importGraph.edges
+      .filter(e => e.from === name)
+      .slice(0, 5) // Limit children
+      .map(e => buildNode(e.to, new Set(visited), depth + 1));
+
+    return {
+      name: basename(name),
+      children
+    };
+  }
+
+  // Return first entry point's tree
+  return buildNode(entryPoints[0]);
+}
+
 /**
  * Main analyze command handler
  */
@@ -478,10 +554,14 @@ export async function runAnalyze(args) {
     process.exit(1);
   }
 
-  log.info('Analyzing bundle...\n');
+  const timer = createTimer();
+  const spinner = createSpinner('Analyzing bundle...');
 
   try {
     const analysis = await analyzeBundle(root);
+    const elapsed = timer.elapsed();
+
+    spinner.success(`Analysis complete (${formatDuration(elapsed)})`);
 
     if (json) {
       log.info(JSON.stringify(analysis, null, 2));
@@ -494,7 +574,8 @@ export async function runAnalyze(args) {
       log.warn(`\nWarning: ${analysis.deadCode.length} potentially unused file(s) found.`);
     }
   } catch (error) {
-    log.error('Analysis failed:', error.message);
+    spinner.fail('Analysis failed');
+    log.error(error.message);
     process.exit(1);
   }
 }

package/cli/build.js

@@ -8,6 +8,7 @@ import { readFileSync, writeFileSync, existsSync, mkdirSync, readdirSync, statSy
 import { join, extname, relative, dirname } from 'path';
 import { compile } from '../compiler/index.js';
 import { log } from './logger.js';
+import { createTimer, createProgressBar, formatDuration, createSpinner } from './utils/cli-ui.js';
 
 /**
  * Build project for production
@@ -15,21 +16,23 @@ import { log } from './logger.js';
 export async function buildProject(args) {
   const root = process.cwd();
   const outDir = join(root, 'dist');
+  const timer = createTimer();
 
   // Check if vite is available
   try {
     const viteConfig = join(root, 'vite.config.js');
     if (existsSync(viteConfig)) {
-      log.info('Vite config detected, using Vite build...');
+      const spinner = createSpinner('Building with Vite...');
       const { build } = await import('vite');
       await build({ root });
+      spinner.success(`Built with Vite in ${timer.format()}`);
       return;
     }
   } catch (e) {
     // Vite not available, use built-in build
   }
 
-  log.info('Building with Pulse compiler...');
+  log.info('Building with Pulse compiler...\n');
 
   // Create output directory
   if (!existsSync(outDir)) {
@@ -42,10 +45,19 @@ export async function buildProject(args) {
     copyDir(publicDir, outDir);
   }
 
-  // Process source files
+  // Count files for progress bar
   const srcDir = join(root, 'src');
-  if (existsSync(srcDir)) {
-    processDirectory(srcDir, join(outDir, 'assets'));
+  const fileCount = existsSync(srcDir) ? countFiles(srcDir) : 0;
+
+  // Process source files with progress bar
+  if (existsSync(srcDir) && fileCount > 0) {
+    const progress = createProgressBar({
+      total: fileCount,
+      label: 'Compiling',
+      width: 25
+    });
+    processDirectory(srcDir, join(outDir, 'assets'), progress);
+    progress.done();
   }
 
   // Copy and process index.html
@@ -68,20 +80,45 @@ export async function buildProject(args) {
   // Bundle runtime
   bundleRuntime(outDir);
 
+  const elapsed = timer.elapsed();
   log.success(`
-Build complete!
+✓ Build complete in ${formatDuration(elapsed)}
 
-Output directory: ${relative(root, outDir)}
+Output: ${relative(root, outDir)}/
+Files:  ${fileCount} processed
 
-To preview the build:
-  npx serve dist
+To preview:
+  pulse preview
   `);
 }
 
+/**
+ * Count files in a directory recursively
+ */
+function countFiles(dir) {
+  let count = 0;
+  const files = readdirSync(dir);
+
+  for (const file of files) {
+    const fullPath = join(dir, file);
+    const stat = statSync(fullPath);
+    if (stat.isDirectory()) {
+      count += countFiles(fullPath);
+    } else {
+      count++;
+    }
+  }
+
+  return count;
+}
+
 /**
  * Process a directory of source files
+ * @param {string} srcDir - Source directory
+ * @param {string} outDir - Output directory
+ * @param {Object} [progress] - Progress bar instance
  */
-function processDirectory(srcDir, outDir) {
+function processDirectory(srcDir, outDir, progress = null) {
   if (!existsSync(outDir)) {
     mkdirSync(outDir, { recursive: true });
   }
@@ -93,7 +130,7 @@ function processDirectory(srcDir, outDir) {
     const stat = statSync(srcPath);
 
     if (stat.isDirectory()) {
-      processDirectory(srcPath, join(outDir, file));
+      processDirectory(srcPath, join(outDir, file), progress);
     } else if (file.endsWith('.pulse')) {
       // Compile .pulse files
       const source = readFileSync(srcPath, 'utf-8');
@@ -105,13 +142,13 @@ function processDirectory(srcDir, outDir) {
       if (result.success) {
         const outPath = join(outDir, file.replace('.pulse', '.js'));
         writeFileSync(outPath, result.code);
-        log.info(`  Compiled: ${file}`);
       } else {
         log.error(`  Error compiling ${file}:`);
         for (const error of result.errors) {
           log.error(`    ${error.message}`);
         }
       }
+      if (progress) progress.tick();
     } else if (file.endsWith('.js') || file.endsWith('.mjs')) {
       // Process JS files - rewrite imports
       let content = readFileSync(srcPath, 'utf-8');
@@ -130,11 +167,12 @@ function processDirectory(srcDir, outDir) {
 
       const outPath = join(outDir, file);
       writeFileSync(outPath, content);
-      log.info(`  Processed & minified: ${file}`);
+      if (progress) progress.tick();
     } else {
       // Copy other files
       const outPath = join(outDir, file);
       copyFileSync(srcPath, outPath);
+      if (progress) progress.tick();
     }
   }
 }

package/cli/format.js

@@ -3,9 +3,11 @@
  * Formats .pulse files consistently
  */
 
-import { readFileSync, writeFileSync } from 'fs';
+import { readFileSync, writeFileSync, watch } from 'fs';
+import { dirname } from 'path';
 import { findPulseFiles, parseArgs, relativePath } from './utils/file-utils.js';
 import { log } from './logger.js';
+import { createTimer, formatDuration } from './utils/cli-ui.js';
 
 /**
  * Default format options
@@ -641,6 +643,7 @@ export async function runFormat(args) {
   const { options, patterns } = parseArgs(args);
   const check = options.check || false;
   const write = !check; // Default to write unless --check is specified
+  const watchMode = options.watch || options.w || false;
 
   // Find files to format
   const files = findPulseFiles(patterns);
@@ -650,7 +653,57 @@ export async function runFormat(args) {
     return;
   }
 
-  log.info(`${check ? 'Checking' : 'Formatting'} ${files.length} file(s)...\n`);
+  // Run initial format
+  const result = await runFormatOnFiles(files, { check, write, options });
+
+  // If watch mode, set up file watchers
+  if (watchMode) {
+    if (check) {
+      log.warn('--watch mode is not available with --check');
+      return;
+    }
+
+    log.info('\nWatching for changes... (Ctrl+C to stop)\n');
+
+    // Get unique directories to watch
+    const watchedDirs = new Set(files.map(f => dirname(f)));
+
+    // Debounce timer
+    let debounceTimer = null;
+    const debounceDelay = 100;
+
+    for (const dir of watchedDirs) {
+      watch(dir, { recursive: false }, (_eventType, filename) => {
+        if (!filename || !filename.endsWith('.pulse')) return;
+
+        // Debounce rapid changes
+        if (debounceTimer) clearTimeout(debounceTimer);
+        debounceTimer = setTimeout(() => {
+          const changedFiles = findPulseFiles(patterns);
+          runFormatOnFiles(changedFiles, { check: false, write: true, options, isRerun: true })
+            .then(() => {
+              log.info('Watching for changes...\n');
+            });
+        }, debounceDelay);
+      });
+    }
+
+    // Keep process alive
+    process.stdin.resume();
+  } else if (check && result.changedCount > 0) {
+    process.exit(1);
+  }
+}
+
+/**
+ * Run format on a list of files
+ */
+async function runFormatOnFiles(files, { check, write, options, isRerun = false }) {
+  const timer = createTimer();
+
+  if (!isRerun) {
+    log.info(`${check ? 'Checking' : 'Formatting'} ${files.length} file(s)...\n`);
+  }
 
   let changedCount = 0;
   let errorCount = 0;
@@ -675,12 +728,14 @@ export async function runFormat(args) {
         log.info(`  ${relPath} - formatted`);
       }
     } else {
-      if (!check) {
+      if (!check && !isRerun) {
         log.info(`  ${relPath} - unchanged`);
       }
     }
   }
 
+  const elapsed = timer.elapsed();
+
   // Summary
   log.info('\n' + '─'.repeat(60));
 
@@ -690,16 +745,17 @@ export async function runFormat(args) {
 
   if (check) {
     if (changedCount > 0) {
-      log.error(`✗ ${changedCount} file(s) need formatting`);
-      process.exit(1);
+      log.error(`✗ ${changedCount} file(s) need formatting (${formatDuration(elapsed)})`);
     } else {
-      log.success(`✓ All ${files.length} file(s) are properly formatted`);
+      log.success(`✓ All ${files.length} file(s) are properly formatted (${formatDuration(elapsed)})`);
     }
   } else {
     if (changedCount > 0) {
-      log.success(`✓ ${changedCount} file(s) formatted`);
+      log.success(`✓ ${changedCount} file(s) formatted (${formatDuration(elapsed)})`);
     } else {
-      log.success(`✓ All ${files.length} file(s) were already formatted`);
+      log.success(`✓ All ${files.length} file(s) were already formatted (${formatDuration(elapsed)})`);
     }
   }
+
+  return { changedCount, errorCount };
 }

package/cli/lint.js

@@ -3,9 +3,11 @@
  * Validates .pulse files for errors and style issues
  */
 
-import { readFileSync, writeFileSync } from 'fs';
+import { readFileSync, writeFileSync, watch } from 'fs';
+import { dirname } from 'path';
 import { findPulseFiles, parseArgs, relativePath } from './utils/file-utils.js';
 import { log } from './logger.js';
+import { createTimer, formatDuration } from './utils/cli-ui.js';
 
 /**
  * Lint rules configuration
@@ -701,21 +703,14 @@ export async function lintFile(filePath, options = {}) {
 }
 
 /**
- * Main lint command handler
+ * Lint files and return summary
+ * @param {string[]} files - Files to lint
+ * @param {Object} options - Lint options
+ * @returns {Object} Summary with totals
  */
-export async function runLint(args) {
-  const { options, patterns } = parseArgs(args);
-  const fix = options.fix || false;
-
-  // Find files to lint
-  const files = findPulseFiles(patterns);
-
-  if (files.length === 0) {
-    log.info('No .pulse files found to lint.');
-    return;
-  }
-
-  log.info(`Linting ${files.length} file(s)...\n`);
+async function lintFiles(files, options = {}) {
+  const { fix = false, quiet = false } = options;
+  const timer = createTimer();
 
   let totalErrors = 0;
   let totalWarnings = 0;
@@ -725,7 +720,7 @@ export async function runLint(args) {
     const result = await lintFile(file, { fix });
     const relPath = relativePath(file);
 
-    if (result.diagnostics.length > 0) {
+    if (result.diagnostics.length > 0 && !quiet) {
       log.info(`\n${relPath}`);
 
       for (const diag of result.diagnostics) {
@@ -740,21 +735,111 @@ export async function runLint(args) {
     }
   }
 
-  // Summary
+  return {
+    errors: totalErrors,
+    warnings: totalWarnings,
+    info: totalInfo,
+    elapsed: timer.elapsed()
+  };
+}
+
+/**
+ * Main lint command handler
+ */
+export async function runLint(args) {
+  const { options, patterns } = parseArgs(args);
+  const fix = options.fix || false;
+  const watchMode = options.watch || options.w || false;
+
+  // Find files to lint
+  const files = findPulseFiles(patterns);
+
+  if (files.length === 0) {
+    log.info('No .pulse files found to lint.');
+    return;
+  }
+
+  // Initial lint run
+  log.info(`Linting ${files.length} file(s)...\n`);
+  const summary = await lintFiles(files, { fix });
+
+  // Print summary
+  printLintSummary(summary, files.length);
+
+  // Watch mode
+  if (watchMode) {
+    log.info('\nWatching for changes... (Ctrl+C to stop)\n');
+
+    const watchedDirs = new Set();
+    const debounceTimers = new Map();
+
+    // Collect directories to watch
+    for (const file of files) {
+      watchedDirs.add(dirname(file));
+    }
+
+    // Watch each directory
+    for (const dir of watchedDirs) {
+      watch(dir, { recursive: false }, (_eventType, filename) => {
+        if (!filename || !filename.endsWith('.pulse')) return;
+
+        const filePath = files.find(f => f.endsWith(filename));
+        if (!filePath) return;
+
+        // Debounce rapid changes
+        if (debounceTimers.has(filePath)) {
+          clearTimeout(debounceTimers.get(filePath));
+        }
+
+        debounceTimers.set(filePath, setTimeout(() => {
+          debounceTimers.delete(filePath);
+
+          log.info(`\n[${new Date().toLocaleTimeString()}] File changed: ${relativePath(filePath)}`);
+          lintFiles([filePath], { fix }).then(result => {
+            printLintSummary(result, 1, true);
+          });
+        }, 100));
+      });
+    }
+
+    // Keep process running
+    return new Promise(() => {});
+  } else {
+    // Exit with error code if errors found
+    if (summary.errors > 0) {
+      process.exit(1);
+    }
+  }
+}
+
+/**
+ * Print lint summary
+ */
+function printLintSummary(summary, fileCount, compact = false) {
+  const { errors, warnings, info, elapsed } = summary;
+  const timeStr = formatDuration(elapsed);
+
+  if (compact) {
+    const parts = [];
+    if (errors > 0) parts.push(`${errors} error(s)`);
+    if (warnings > 0) parts.push(`${warnings} warning(s)`);
+    if (parts.length === 0) {
+      log.success(`✓ Passed (${timeStr})`);
+    } else {
+      log.error(`✗ ${parts.join(', ')} (${timeStr})`);
+    }
+    return;
+  }
+
   log.info('\n' + '─'.repeat(60));
   const parts = [];
-  if (totalErrors > 0) parts.push(`${totalErrors} error(s)`);
-  if (totalWarnings > 0) parts.push(`${totalWarnings} warning(s)`);
-  if (totalInfo > 0) parts.push(`${totalInfo} info`);
+  if (errors > 0) parts.push(`${errors} error(s)`);
+  if (warnings > 0) parts.push(`${warnings} warning(s)`);
+  if (info > 0) parts.push(`${info} info`);
 
   if (parts.length === 0) {
-    log.success(`✓ ${files.length} file(s) passed`);
+    log.success(`✓ ${fileCount} file(s) passed (${timeStr})`);
   } else {
-    log.error(`✗ ${parts.join(', ')} in ${files.length} file(s)`);
-  }
-
-  // Exit with error code if errors found
-  if (totalErrors > 0) {
-    process.exit(1);
+    log.error(`✗ ${parts.join(', ')} in ${fileCount} file(s) (${timeStr})`);
   }
 }