pulse-js-framework 1.7.3 → 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();
     }
   }
 }
@@ -185,28 +223,104 @@ function readRuntimeFile(filename) {
 
 /**
  * Minify JavaScript code (simple minification)
- * String-aware: preserves content inside string literals
+ * String and regex-aware: preserves content inside string and regex literals
  */
 export function minifyJS(code) {
-  // Extract strings to protect them from minification
-  const strings = [];
-  const placeholder = '\x00STR';
-
-  // Replace strings with placeholders (handles ", ', and ` with escape sequences)
-  const withPlaceholders = code.replace(
-    /(["'`])(?:\\.|(?!\1)[^\\])*\1/g,
-    (match) => {
-      strings.push(match);
-      return placeholder + (strings.length - 1) + '\x00';
+  // Extract strings and regexes to protect them from minification
+  const preserved = [];
+  const placeholder = '\x00PRE';
+
+  // State machine to properly handle strings and regexes
+  let result = '';
+  let i = 0;
+
+  while (i < code.length) {
+    const char = code[i];
+    const next = code[i + 1];
+
+    // Skip single-line comments
+    if (char === '/' && next === '/') {
+      while (i < code.length && code[i] !== '\n') i++;
+      continue;
     }
-  );
 
-  // Apply minification to non-string parts
-  let minified = withPlaceholders
-    // Remove single-line comments
-    .replace(/\/\/.*$/gm, '')
-    // Remove multi-line comments
-    .replace(/\/\*[\s\S]*?\*\//g, '')
+    // Skip multi-line comments
+    if (char === '/' && next === '*') {
+      i += 2;
+      while (i < code.length - 1 && !(code[i] === '*' && code[i + 1] === '/')) i++;
+      i += 2;
+      continue;
+    }
+
+    // Handle string literals
+    if (char === '"' || char === "'" || char === '`') {
+      const quote = char;
+      let str = char;
+      i++;
+      while (i < code.length) {
+        const c = code[i];
+        str += c;
+        if (c === '\\' && i + 1 < code.length) {
+          i++;
+          str += code[i];
+        } else if (c === quote) {
+          break;
+        }
+        i++;
+      }
+      i++;
+      preserved.push(str);
+      result += placeholder + (preserved.length - 1) + '\x00';
+      continue;
+    }
+
+    // Handle regex literals (after = : ( , [ ! & | ? ; { or keywords)
+    if (char === '/') {
+      // Look back to determine if this is a regex
+      const lookback = result.slice(-20).trim();
+      const isRegexContext = lookback === '' ||
+        /[=:(\[,!&|?;{]$/.test(lookback) ||
+        /\breturn$/.test(lookback) ||
+        /\bthrow$/.test(lookback) ||
+        /\btypeof$/.test(lookback);
+
+      if (isRegexContext && next !== '/' && next !== '*') {
+        let regex = char;
+        i++;
+        let inCharClass = false;
+        while (i < code.length) {
+          const c = code[i];
+          regex += c;
+          if (c === '\\' && i + 1 < code.length) {
+            i++;
+            regex += code[i];
+          } else if (c === '[') {
+            inCharClass = true;
+          } else if (c === ']') {
+            inCharClass = false;
+          } else if (c === '/' && !inCharClass) {
+            // End of regex, collect flags
+            i++;
+            while (i < code.length && /[gimsuvy]/.test(code[i])) {
+              regex += code[i];
+              i++;
+            }
+            break;
+          }
+          i++;
+        }
+        preserved.push(regex);
+        result += placeholder + (preserved.length - 1) + '\x00';
+        continue;
+      }
+    }
+
+    result += char;
+    i++;
+  }
+
+  // Apply minification to non-preserved parts
+  let minified = result
     // Remove leading/trailing whitespace per line
     .split('\n')
     .map(line => line.trim())
@@ -214,7 +328,7 @@ export function minifyJS(code) {
     .join('\n')
     // Collapse multiple newlines
     .replace(/\n{2,}/g, '\n')
-    // Remove spaces around operators (simple)
+    // Remove spaces around operators
     .replace(/\s*([{};,:])\s*/g, '$1')
     .replace(/\s*=\s*/g, '=')
     .replace(/\s*\(\s*/g, '(')
@@ -223,10 +337,10 @@ export function minifyJS(code) {
     .replace(/\s+/g, ' ')
     .trim();
 
-  // Restore strings
+  // Restore preserved strings and regexes
   minified = minified.replace(
     new RegExp(placeholder.replace('\x00', '\\x00') + '(\\d+)\\x00', 'g'),
-    (_, index) => strings[parseInt(index)]
+    (_, index) => preserved[parseInt(index)]
   );
 
   return minified;

package/cli/dev.js

@@ -128,7 +128,10 @@ export async function startDevServer(args) {
           });
 
           if (result.success) {
-            res.writeHead(200, { 'Content-Type': 'application/javascript' });
+            res.writeHead(200, {
+              'Content-Type': 'application/javascript',
+              'Cache-Control': 'no-cache, no-store, must-revalidate'
+            });
             res.end(result.code);
           } else {
             res.writeHead(500, { 'Content-Type': 'text/plain' });
@@ -146,7 +149,10 @@ export async function startDevServer(args) {
     if (pathname.endsWith('.js') || pathname.endsWith('.mjs')) {
       if (existsSync(filePath)) {
         const content = readFileSync(filePath, 'utf-8');
-        res.writeHead(200, { 'Content-Type': 'application/javascript' });
+        res.writeHead(200, {
+          'Content-Type': 'application/javascript',
+          'Cache-Control': 'no-cache, no-store, must-revalidate'
+        });
         res.end(content);
         return;
       }
@@ -164,7 +170,10 @@ export async function startDevServer(args) {
           });
 
           if (result.success) {
-            res.writeHead(200, { 'Content-Type': 'application/javascript' });
+            res.writeHead(200, {
+              'Content-Type': 'application/javascript',
+              'Cache-Control': 'no-cache, no-store, must-revalidate'
+            });
             res.end(result.code);
           } else {
             res.writeHead(500, { 'Content-Type': 'text/plain' });
@@ -183,7 +192,10 @@ export async function startDevServer(args) {
       const modulePath = join(root, '..', 'pulse', pathname.replace('/node_modules/pulse-js-framework/', ''));
       if (existsSync(modulePath)) {
         const content = readFileSync(modulePath, 'utf-8');
-        res.writeHead(200, { 'Content-Type': 'application/javascript' });
+        res.writeHead(200, {
+          'Content-Type': 'application/javascript',
+          'Cache-Control': 'no-cache, no-store, must-revalidate'
+        });
         res.end(content);
         return;
       }
@@ -203,7 +215,10 @@ export async function startDevServer(args) {
       for (const runtimePath of possiblePaths) {
         if (existsSync(runtimePath)) {
           const content = readFileSync(runtimePath, 'utf-8');
-          res.writeHead(200, { 'Content-Type': 'application/javascript' });
+          res.writeHead(200, {
+            'Content-Type': 'application/javascript',
+            'Cache-Control': 'no-cache, no-store, must-revalidate'
+          });
           res.end(content);
           return;
         }