muspe-cli/bin/muspe.js

MusPE Advanced Framework v2.1.3 - Mobile User-friendly Simple Progressive Engine with Enhanced CLI Tools, Specialized E-Commerce Templates, Material Design 3, Progressive Enhancement, Mobile Optimizations, Performance Analysis, and Enterprise-Grade Develo

#!/usr/bin/env node

const { program } = require('commander');
const chalk = require('chalk');
const figlet = require('figlet');
const packageJson = require('../package.json');
const { createProject } = require('../src/commands/create');
const { generateComponent } = require('../src/commands/generate');
const { serveProject } = require('../src/commands/serve');
const { buildProject } = require('../src/commands/build');
const { addFeature } = require('../src/commands/add');
const { initCordova, cordovaCommand } = require('../src/commands/cordova');
const { deployProject } = require('../src/commands/deploy');
const { validateProject } = require('../src/commands/validate');
const { testProject } = require('../src/commands/test');
const { initProject } = require('../src/commands/init');

// Display banner
console.log(
  chalk.cyan(
    figlet.textSync('MusPE', {
      font: 'Standard',
      horizontalLayout: 'default',
      verticalLayout: 'default'
    })
  )
);

console.log(chalk.green(`Mobile User-friendly Simple Progressive Engine v${packageJson.version}`));
console.log(chalk.gray('A modern CLI for mobile-first web development\n'));

program
  .name('muspe')
  .description('CLI framework for mobile and web development')
  .version(packageJson.version);

// Init command
program
  .command('init')
  .description('Initialize MusPE in current directory')
  .action(initProject);

// Create command
program
  .command('create <project-name>')
  .description('Create a new MusPE project')
  .option('-t, --template <template>', 'Project template (ecommerce, dashboard, social, portfolio, blog, mobile, web, spa, pwa, hybrid)', 'ecommerce')
  .option('-f, --framework <framework>', 'CSS framework (material, tailwind, bootstrap, custom)', 'material')
  .option('-s, --skip-install', 'Skip npm install')
  .action(createProject);

// Generate command - Enhanced with new options
program
  .command('generate <type> <name>')
  .alias('g')
  .description('Generate components, pages, or services')
  .option('-p, --path <path>', 'Custom path for the generated file')
  .option('-s, --style <style>', 'Include styles (css, scss, none)', 'css')
  .option('-m, --mobile-optimized', 'Make component mobile-optimized')
  .option('-t, --type <componentType>', 'Component type (basic, page, ui, chart, mobile, product, user)')
  .option('--with-tests', 'Generate test files')
  .option('--with-cache', 'Add caching functionality (for services)')
  .action(generateComponent);

// Enhanced Serve command with mobile preview
program
  .command('serve')
  .alias('s')
  .description('Start development server')
  .option('-p, --port <port>', 'Port number', '3000')
  .option('-o, --open', 'Open browser automatically')
  .option('-h, --host <host>', 'Host address', 'localhost')
  .option('--mobile-preview', 'Open mobile device simulator')
  .option('--network', 'Expose on network for device testing')
  .action(serveProject);

// Enhanced Build command with mobile optimization
program
  .command('build')
  .alias('b')
  .description('Build project for production')
  .option('-o, --output <dir>', 'Output directory', 'dist')
  .option('-m, --minify', 'Minify output')
  .option('-a, --analyze', 'Analyze bundle size')
  .option('--mobile', 'Mobile-specific performance optimizations')
  .action(buildProject);

// Deploy command
program
  .command('deploy [target]')
  .description('Deploy project to various platforms')
  .option('-t, --target <target>', 'Deployment target (server, android, ios, docker, pwa, all)')
  .option('-r, --release', 'Build for release/production')
  .option('--ssr', 'Enable server-side rendering')
  .option('--upload', 'Upload to deployment target')
  .option('--install', 'Install on device (mobile targets)')
  .option('--simulator', 'Run on simulator (iOS)')
  .option('--bundle', 'Generate bundle format (Android AAB)')
  .option('--archive', 'Create archive (iOS)')
  .option('--run', 'Run after deployment (Docker)')
  .option('--verbose', 'Verbose output')
  .action(deployProject);

// Validate command
program
  .command('validate')
  .alias('v')
  .description('Validate project configuration and structure')
  .option('-f, --fix', 'Automatically fix issues when possible')
  .option('-q, --quiet', 'Show only errors and warnings')
  .action(validateProject);

// Test command
program
  .command('test [suite]')
  .alias('t')
  .description('Run project tests')
  .option('-s, --suite <suite>', 'Test suite to run (unit, component, e2e, performance, accessibility, all)', 'all')
  .option('-v, --verbose', 'Verbose output')
  .option('-w, --watch', 'Watch mode for continuous testing')
  .action(testProject);

// Add command
program
  .command('add <feature>')
  .description('Add features to existing project')
  .option('-c, --config', 'Configure after installation')
  .action(addFeature);

// Info command
program
  .command('info')
  .description('Display project and environment info')
  .action(() => {
    const os = require('os');
    const path = require('path');
    
    console.log(chalk.blue('\n📱 MusPE Framework Information\n'));
    console.log(`${chalk.bold('Version:')} ${packageJson.version}`);
    console.log(`${chalk.bold('Node:')} ${process.version}`);
    console.log(`${chalk.bold('Platform:')} ${os.platform()}`);
    console.log(`${chalk.bold('Architecture:')} ${os.arch()}`);
    console.log(`${chalk.bold('Working Directory:')} ${process.cwd()}`);
    
    // Check if in MusPE project
    const fs = require('fs');
    const configPath = path.join(process.cwd(), 'muspe.config.js');
    if (fs.existsSync(configPath)) {
      console.log(`${chalk.bold('Project:')} MusPE project detected`);
    } else {
      console.log(`${chalk.bold('Project:')} Not in a MusPE project`);
    }
  });

// Cordova integration commands
program
  .command('cordova')
  .description('Cordova/PhoneGap integration commands')
  .argument('<command>', 'Cordova command to run')
  .argument('[args...]', 'Additional arguments for Cordova command')
  .option('--silent', 'Run command silently')
  .action(async (command, args, options) => {
    if (command === 'init') {
      await initCordova({ interactive: !options.silent });
    } else {
      await cordovaCommand(command, args, options);
    }
  });

// Mobile Development Commands - Enhanced MusPE v2.1.2
program
  .command('mobile')
  .description('Mobile development tools')
  .addCommand(
    program.createCommand('preview')
      .description('Open mobile simulator/preview')
      .option('-d, --device <device>', 'Device type (iphone, android, tablet)', 'iphone')
      .option('-p, --port <port>', 'Development server port', '3000')
      .action(async (options) => {
        console.log(chalk.blue('🚀 Starting mobile preview...'));
        console.log(chalk.gray(`Device: ${options.device} | Port: ${options.port}`));
        // This would integrate with browser dev tools device simulation
        const { spawn } = require('child_process');
        spawn('open', [`http://localhost:${options.port}`], { stdio: 'inherit' });
      })
  )
  .addCommand(
    program.createCommand('test')
      .description('Run mobile-specific tests')
      .option('-d, --device <device>', 'Target device platform')
      .action(async (options) => {
        console.log(chalk.blue('🧪 Running mobile tests...'));
        // Mobile-specific testing logic would go here
      })
  )
  .addCommand(
    program.createCommand('deploy')
      .description('Deploy to mobile platforms')
      .option('-p, --platform <platform>', 'Target platform (ios, android, both)', 'both')
      .action(async (options) => {
        console.log(chalk.blue('📱 Deploying to mobile platforms...'));
        // Mobile deployment logic would go here
      })
  );

// Performance Analysis Commands
program
  .command('analyze')
  .description('Analyze project performance and bundle size')
  .option('--mobile', 'Mobile-specific performance metrics')
  .option('--lighthouse', 'Run Lighthouse audit')
  .option('--bundle', 'Analyze bundle composition')
  .action(async (options) => {
    console.log(chalk.blue('📊 Analyzing project performance...'));
    
    if (options.lighthouse) {
      console.log(chalk.gray('Running Lighthouse audit...'));
      // Lighthouse integration would go here
    }
    
    if (options.bundle) {
      console.log(chalk.gray('Analyzing bundle size...'));
      // Bundle analysis would go here
    }
    
    if (options.mobile) {
      console.log(chalk.gray('Checking mobile optimizations...'));
      // Mobile-specific analysis would go here
    }
  });

// Enhanced Component Generation Commands
program
  .command('component <name>')
  .alias('comp')
  .description('Generate a component with interactive setup')
  .option('-t, --template <template>', 'Component template (product, user, chart, etc.)')
  .option('-m, --mobile', 'Mobile-optimized component')
  .option('--props <props>', 'Component props (comma-separated)')
  .action(async (name, options) => {
    console.log(chalk.blue(`🧩 Generating component: ${name}`));
    await generateComponent('component', name, options);
  });

program
  .command('page <name>')
  .description('Generate a page with template selection')
  .option('-t, --template <template>', 'Page template')
  .option('-r, --route <route>', 'Route path for the page')
  .action(async (name, options) => {
    console.log(chalk.blue(`📄 Generating page: ${name}`));
    await generateComponent('page', name, options);
  });

program
  .command('service <name>')
  .description('Generate a service with API integration')
  .option('--with-cache', 'Include caching functionality')
  .option('--api-url <url>', 'Base API URL')
  .action(async (name, options) => {
    console.log(chalk.blue(`⚙️ Generating service: ${name}`));
    await generateComponent('service', name, options);
  });

// Lighthouse Integration Command
program
  .command('lighthouse')
  .description('Run Lighthouse performance audit')
  .option('-u, --url <url>', 'URL to audit', 'http://localhost:3000')
  .option('-m, --mobile', 'Mobile audit')
  .option('-o, --output <format>', 'Output format (json, html, csv)', 'html')
  .action(async (options) => {
    console.log(chalk.blue('🚢 Running Lighthouse audit...'));
    console.log(chalk.gray(`URL: ${options.url} | Mobile: ${options.mobile} | Output: ${options.output}`));
    
    // Lighthouse integration
    try {
      const lighthouse = require('lighthouse');
      const chromeLauncher = require('chrome-launcher');
      
      console.log(chalk.gray('Launching Chrome...'));
      const chrome = await chromeLauncher.launch({chromeFlags: ['--headless']});
      
      const flags = {
        logLevel: 'info',
        output: options.output,
        onlyCategories: ['performance', 'accessibility', 'best-practices', 'seo'],
        port: chrome.port,
      };
      
      if (options.mobile) {
        flags.emulatedFormFactor = 'mobile';
      }
      
      const runnerResult = await lighthouse(options.url, flags);
      
      console.log(chalk.green('✅ Lighthouse audit completed!'));
      console.log(chalk.gray(`Performance Score: ${runnerResult.lhr.categories.performance.score * 100}`));
      
      await chrome.kill();
    } catch (error) {
      console.log(chalk.yellow('⚠️  Lighthouse not available. Install with: npm install -g lighthouse'));
      console.log(chalk.gray(`Manual audit: https://developers.google.com/speed/pagespeed/insights/?url=${options.url}`));
    }
  });

program.parse();