insertr/scripts/dev.js

#!/usr/bin/env node

/**
 * Development helper script for Insertr
 * Provides common development tasks and utilities
 */

import { execSync, spawn } from 'child_process';
import fs from 'fs';
import path from 'path';

const commands = {
  serve: {
    description: 'Start development server with live reload',
    action: () => {
      console.log('🚀 Starting Insertr development server...');
      console.log('📂 Serving demo-site/ at http://localhost:3000');
      console.log('🔄 Live reload enabled');
      console.log('\n💡 Test the three user types:');
      console.log('   👥 Customer: Visit the site normally');
      console.log('   ✏️  Client: Click "Login as Client" → "Edit Mode: On"');
      console.log('   🔧 Developer: View source to see integration\n');
      
      spawn('npx', ['live-server', 'demo-site', '--port=3000', '--open=/index.html'], {
        stdio: 'inherit'
      });
    }
  },

  check: {
    description: 'Check project status and validate setup',
    action: () => {
      console.log('🔍 Checking Insertr project status...\n');
      
      // Check files exist
      const requiredFiles = [
        'demo-site/index.html',
        'demo-site/about.html', 
        'lib/dist/insertr.js',
        'lib/dist/insertr.min.js',
        'package.json'
      ];
      
      let allGood = true;
      
      requiredFiles.forEach(file => {
        if (fs.existsSync(file)) {
          console.log('✅', file);
        } else {
          console.log('❌', file, '(missing)');
          allGood = false;
        }
      });
      
      if (allGood) {
        console.log('\n🎉 All core files present!');
        console.log('\n📊 Project stats:');
        
        // Count editable elements
        const indexContent = fs.readFileSync('demo-site/index.html', 'utf8');
        const aboutContent = fs.readFileSync('demo-site/about.html', 'utf8');
        const insertrMatches = (indexContent + aboutContent).match(/class="insertr"/g) || [];
        console.log(`   📝 Editable elements: ${insertrMatches.length}`);
        
        // Check library size
        const libSize = fs.statSync('lib/dist/insertr.js').size;
        console.log(`   📦 Library size: ${(libSize / 1024).toFixed(1)}KB`);
        
         console.log('\n🚀 Ready to develop! Run: npm run serve');
      } else {
        console.log('\n❌ Some files are missing. Please check your setup.');
        process.exit(1);
      }
    }
  },

  demo: {
    description: 'Show demo instructions',
    action: () => {
      console.log('🎬 Insertr Demo Instructions\n');
       console.log('1. 🌐 Start server: npm run serve');
      console.log('2. 👀 Customer view: Browse the site normally');
      console.log('3. 🔑 Client login: Click "Login as Client"');
      console.log('4. ✏️  Edit mode: Click "Edit Mode: Off" to enable editing');
      console.log('5. 📝 Edit content: Click any ✏️ button to edit');
      console.log('6. 🔄 Try different content types (simple text vs rich markdown)');
      console.log('7. 📄 Multi-page: Navigate to About page to see persistence\n');
      console.log('🎯 Key features to test:');
      console.log('   • Inline text editing');
      console.log('   • Markdown editing for rich content');
      console.log('   • Auto-save with visual feedback');
      console.log('   • Content persistence across pages');
      console.log('   • Responsive design on mobile\n');
    }
  }
};

// Parse command line arguments
const command = process.argv[2] || 'help';

if (commands[command]) {
  commands[command].action();
} else if (command === 'help' || command === '--help' || command === '-h') {
  console.log('🛠️  Insertr Development Helper\n');
  console.log('Available commands:\n');
  Object.entries(commands).forEach(([name, cmd]) => {
    console.log(`  ${name.padEnd(12)} ${cmd.description}`);
  });
  console.log('\nUsage: node scripts/dev.js <command>');
  console.log('   or: npm run check\n');
} else {
  console.log(`❌ Unknown command: ${command}`);
  console.log('Run: node scripts/dev.js help');
  process.exit(1);
}