@o2vend/theme-cli 1.0.32

package/lib/commands/check.js

@@ -0,0 +1,201 @@
+/**
+ * O2VEND Theme CLI - Check Command
+ * Lint and check best practices
+ */
+
+const { Command } = require('commander');
+const path = require('path');
+const fs = require('fs-extra');
+const chalk = require('chalk');
+
+const checkCommand = new Command('check');
+
+checkCommand
+  .description('Check theme for issues and best practices')
+  .option('--strict', 'Enable strict mode')
+  .option('--format <format>', 'Output format (table|json|compact)', 'table')
+  .option('--cwd <path>', 'Working directory (theme path)', process.cwd())
+  .action(async (options) => {
+    try {
+      console.log(chalk.cyan('🔍 Checking theme...\n'));
+
+      const themePath = path.resolve(options.cwd);
+      const issues = [];
+
+      if (!fs.existsSync(themePath)) {
+        console.error(chalk.red(`Theme directory does not exist: ${themePath}`));
+        process.exit(1);
+      }
+
+      // Performance checks
+      const assetFiles = findFiles(themePath, ['css', 'js']);
+      assetFiles.forEach(file => {
+        const size = fs.statSync(file).size;
+        const sizeKB = (size / 1024).toFixed(2);
+        
+        if (size > 500 * 1024) { // > 500KB
+          issues.push({
+            type: 'performance',
+            severity: 'warning',
+            file: path.relative(themePath, file),
+            message: `Large file: ${sizeKB}KB (consider optimization)`
+          });
+        }
+      });
+
+      // Accessibility checks (basic)
+      const liquidFiles = findFiles(themePath, 'liquid');
+      liquidFiles.forEach(file => {
+        const content = fs.readFileSync(file, 'utf8');
+        
+        // Check for images without alt text
+        const imgTags = content.match(/<img[^>]*>/g) || [];
+        imgTags.forEach(img => {
+          if (!img.includes('alt=')) {
+            issues.push({
+              type: 'accessibility',
+              severity: 'warning',
+              file: path.relative(themePath, file),
+              message: 'Image missing alt attribute'
+            });
+          }
+        });
+
+        // Check for form inputs without labels
+        const inputTags = content.match(/<input[^>]*>/g) || [];
+        inputTags.forEach(input => {
+          const id = input.match(/id=["']([^"']+)["']/);
+          if (id && !content.includes(`for="${id[1]}"`)) {
+            issues.push({
+              type: 'accessibility',
+              severity: 'warning',
+              file: path.relative(themePath, file),
+              message: 'Input field should have associated label'
+            });
+          }
+        });
+      });
+
+      // SEO checks
+      const layoutPath = path.join(themePath, 'layout', 'theme.liquid');
+      if (fs.existsSync(layoutPath)) {
+        const layoutContent = fs.readFileSync(layoutPath, 'utf8');
+        
+        if (!layoutContent.includes('<title>')) {
+          issues.push({
+            type: 'seo',
+            severity: 'error',
+            file: 'layout/theme.liquid',
+            message: 'Layout should include <title> tag'
+          });
+        }
+
+        if (!layoutContent.includes('meta name="description"')) {
+          issues.push({
+            type: 'seo',
+            severity: 'warning',
+            file: 'layout/theme.liquid',
+            message: 'Layout should include meta description'
+          });
+        }
+      }
+
+      // Best practices
+      const settingsSchemaPath = path.join(themePath, 'config', 'settings_schema.json');
+      if (!fs.existsSync(settingsSchemaPath)) {
+        issues.push({
+          type: 'best-practice',
+          severity: 'info',
+          file: 'config/settings_schema.json',
+          message: 'Consider adding settings_schema.json for theme customization'
+        });
+      }
+
+      // Output results
+      outputResults(issues, options);
+    } catch (error) {
+      console.error(chalk.red('❌ Check failed:'), error.message);
+      if (error.stack && process.env.DEBUG) {
+        console.error(error.stack);
+      }
+      process.exit(1);
+    }
+  });
+
+/**
+ * Find files by extension(s)
+ */
+function findFiles(dir, ext) {
+  const extensions = Array.isArray(ext) ? ext : [ext];
+  const files = [];
+  
+  if (!fs.existsSync(dir)) return files;
+
+  const items = fs.readdirSync(dir);
+  items.forEach(item => {
+    const itemPath = path.join(dir, item);
+    const stat = fs.statSync(itemPath);
+    if (stat.isDirectory() && !item.startsWith('.') && item !== 'node_modules') {
+      files.push(...findFiles(itemPath, ext));
+    } else {
+      const fileExt = item.split('.').pop();
+      if (extensions.includes(fileExt)) {
+        files.push(itemPath);
+      }
+    }
+  });
+
+  return files;
+}
+
+/**
+ * Output check results
+ */
+function outputResults(issues, options) {
+  if (options.format === 'json') {
+    console.log(JSON.stringify(issues, null, 2));
+    return;
+  }
+
+  if (issues.length === 0) {
+    console.log(chalk.green('✅ All checks passed!'));
+    return;
+  }
+
+  // Group by type
+  const byType = {};
+  issues.forEach(issue => {
+    if (!byType[issue.type]) {
+      byType[issue.type] = [];
+    }
+    byType[issue.type].push(issue);
+  });
+
+  // Output by type
+  Object.keys(byType).forEach(type => {
+    const typeIssues = byType[type];
+    const typeLabel = type.charAt(0).toUpperCase() + type.slice(1);
+    
+    console.log(chalk.cyan(`\n${typeLabel} (${typeIssues.length}):`));
+    
+    typeIssues.forEach(issue => {
+      const icon = issue.severity === 'error' ? '❌' : issue.severity === 'warning' ? '⚠️' : 'ℹ️';
+      const color = issue.severity === 'error' ? chalk.red : issue.severity === 'warning' ? chalk.yellow : chalk.blue;
+      
+      if (options.format === 'compact') {
+        console.log(color(`  ${icon} ${issue.file}: ${issue.message}`));
+      } else {
+        console.log(color(`  ${icon} ${issue.file}`));
+        console.log(chalk.gray(`     ${issue.message}`));
+      }
+    });
+  });
+
+  const errors = issues.filter(i => i.severity === 'error').length;
+  const warnings = issues.filter(i => i.severity === 'warning').length;
+  const info = issues.filter(i => i.severity === 'info').length;
+
+  console.log(chalk.cyan(`\n📊 Summary: ${errors} errors, ${warnings} warnings, ${info} info`));
+}
+
+module.exports = checkCommand;

package/lib/commands/generate.js

@@ -0,0 +1,33 @@
+/**
+ * O2VEND Theme CLI - Generate Command
+ * AI-powered theme generation from natural language
+ */
+
+const { Command } = require('commander');
+const chalk = require('chalk');
+
+const generateCommand = new Command('generate');
+
+generateCommand
+  .description('Generate theme from natural language description')
+  .argument('<description>', 'Theme description')
+  .option('--cwd <path>', 'Output directory', process.cwd())
+  .action(async (description, options) => {
+    try {
+      console.log(chalk.cyan('🤖 Generating theme with AI...\n'));
+
+      // TODO: Implement AI-powered theme generation
+      // 1. Parse description
+      // 2. Generate theme structure
+      // 3. Generate templates
+      // 4. Generate settings schema
+      // 5. Generate mock data
+
+      console.log(chalk.green('✅ Theme generated successfully!'));
+    } catch (error) {
+      console.error(chalk.red('❌ Error generating theme:'), error.message);
+      process.exit(1);
+    }
+  });
+
+module.exports = generateCommand;

package/lib/commands/init.js

@@ -0,0 +1,214 @@
+/**
+ * O2VEND Theme CLI - Init Command
+ * Initialize new theme from test-theme template
+ */
+
+const { Command } = require('commander');
+const path = require('path');
+const fs = require('fs-extra');
+const chalk = require('chalk');
+const inquirer = require('inquirer');
+
+const initCommand = new Command('init');
+
+initCommand
+  .description('Initialize a new O2VEND theme')
+  .argument('[theme-name]', 'Theme name')
+  .option('--cwd <path>', 'Working directory', process.cwd())
+  .action(async (themeName, options) => {
+    try {
+      const cwd = path.resolve(options.cwd);
+      
+      console.log(chalk.cyan('\n🎨 O2VEND Theme Initializer\n'));
+      
+      // If theme name not provided, prompt for it
+      if (!themeName) {
+        const answers = await inquirer.prompt([
+          {
+            type: 'input',
+            name: 'themeName',
+            message: 'Theme name:',
+            default: 'my-theme',
+            validate: (input) => {
+              if (!input.trim()) {
+                return 'Theme name is required';
+              }
+              if (!/^[a-zA-Z0-9-_]+$/.test(input.trim())) {
+                return 'Theme name should contain only letters, numbers, hyphens, and underscores';
+              }
+              return true;
+            }
+          }
+        ]);
+        themeName = answers.themeName.trim();
+      }
+
+      const themeDir = path.join(cwd, themeName);
+      
+      // Check if directory already exists
+      if (fs.existsSync(themeDir)) {
+        const { overwrite } = await inquirer.prompt([
+          {
+            type: 'confirm',
+            name: 'overwrite',
+            message: `Directory "${themeName}" already exists. Overwrite?`,
+            default: false
+          }
+        ]);
+        
+        if (!overwrite) {
+          console.log(chalk.yellow('\n❌ Cancelled'));
+          process.exit(0);
+        }
+        
+        fs.removeSync(themeDir);
+      }
+
+      console.log(chalk.cyan(`\n✨ Creating theme "${themeName}"...\n`));
+
+      // Find the test-theme template directory
+      // Check multiple possible locations (installed package vs development)
+      const possibleTemplatePaths = [
+        path.join(__dirname, '..', '..', 'test-theme'),           // Built: lib/commands -> lib -> test-theme
+        path.join(__dirname, '..', 'test-theme'),                 // Built alternate: lib/commands -> test-theme
+        path.join(__dirname, '..', '..', '..', 'test-theme'),     // Source: src/commands -> src -> cli -> test-theme
+      ];
+      
+      let templatePath = null;
+      for (const p of possibleTemplatePaths) {
+        if (fs.existsSync(p) && fs.existsSync(path.join(p, 'layout', 'theme.liquid'))) {
+          templatePath = p;
+          break;
+        }
+      }
+      
+      if (!templatePath) {
+        console.error(chalk.red('❌ Template not found. The test-theme directory is missing.'));
+        console.log(chalk.yellow('Searched in:'));
+        possibleTemplatePaths.forEach(p => console.log(chalk.gray(`  - ${p}`)));
+        process.exit(1);
+      }
+
+      console.log(chalk.gray(`📦 Using template from: ${templatePath}\n`));
+
+      // Copy the entire test-theme directory
+      fs.copySync(templatePath, themeDir, {
+        filter: (src) => {
+          // Skip node_modules, .git, and other unwanted files
+          const basename = path.basename(src);
+          return !['node_modules', '.git', '.DS_Store', 'Thumbs.db'].includes(basename);
+        }
+      });
+
+      // Update theme.json.example with new theme name
+      const themeJsonPath = path.join(themeDir, 'theme.json.example');
+      if (fs.existsSync(themeJsonPath)) {
+        const themeJson = fs.readJsonSync(themeJsonPath);
+        themeJson.id = themeName;
+        themeJson.name = themeName.split(/[-_]/).map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(' ');
+        themeJson.description = `O2VEND theme: ${themeJson.name}`;
+        fs.writeJsonSync(themeJsonPath, themeJson, { spaces: 2 });
+      }
+
+      // Update README.md with new theme name
+      const readmePath = path.join(themeDir, 'README.md');
+      if (fs.existsSync(readmePath)) {
+        let readme = fs.readFileSync(readmePath, 'utf8');
+        readme = readme.replace(/test-theme/g, themeName);
+        readme = readme.replace(/Test Theme/g, themeName.split(/[-_]/).map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(' '));
+        fs.writeFileSync(readmePath, readme);
+      } else {
+        // Create README if it doesn't exist
+        const displayName = themeName.split(/[-_]/).map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(' ');
+        const readme = `# ${displayName}
+
+O2VEND Theme
+
+## Getting Started
+
+1. Navigate to the theme directory:
+   \`\`\`bash
+   cd ${themeName}
+   \`\`\`
+
+2. Start the development server:
+   \`\`\`bash
+   o2vend serve --cwd .
+   \`\`\`
+
+3. Open your browser to http://localhost:3000
+
+4. Edit theme files and see changes live!
+
+## Theme Structure
+
+- \`layout/\` - Main layout template (theme.liquid)
+- \`templates/\` - Page templates (index, product-detail, categories, etc.)
+- \`sections/\` - Section components (header, footer, hero, content)
+- \`widgets/\` - Widget templates for dynamic content
+- \`snippets/\` - Reusable code snippets
+- \`assets/\` - CSS, JavaScript, and images
+- \`config/\` - Theme settings and configuration
+- \`locales/\` - Translation files
+
+## Development Commands
+
+\`\`\`bash
+# Start dev server with mock data
+o2vend serve --cwd .
+
+# Start dev server connected to live API
+o2vend serve --cwd . --api-url https://your-store.o2vend.com
+
+# Validate theme structure
+o2vend check --cwd .
+
+# Package theme for upload
+o2vend package --cwd .
+\`\`\`
+
+## Customization
+
+1. **Colors & Typography**: Edit \`config/settings_data.json\`
+2. **Layout**: Modify \`layout/theme.liquid\`
+3. **Styles**: Update \`assets/theme.css\` and \`assets/components.css\`
+4. **Widgets**: Customize templates in \`widgets/\` directory
+
+## Documentation
+
+Visit https://docs.o2vend.com for full theme development documentation.
+`;
+        fs.writeFileSync(readmePath, readme);
+      }
+
+      // Print success message
+      console.log(chalk.green('✅ Theme initialized successfully!\n'));
+      
+      console.log(chalk.cyan('📁 Theme structure created:'));
+      const dirs = ['layout', 'templates', 'sections', 'widgets', 'snippets', 'assets', 'config', 'locales'];
+      dirs.forEach(dir => {
+        const dirPath = path.join(themeDir, dir);
+        if (fs.existsSync(dirPath)) {
+          const files = fs.readdirSync(dirPath);
+          console.log(chalk.gray(`   ${dir}/`) + chalk.white(` (${files.length} files)`));
+        }
+      });
+      
+      console.log(chalk.cyan(`\n📍 Theme location: ${themeDir}`));
+      
+      console.log(chalk.yellow('\n🚀 Next steps:'));
+      console.log(chalk.white(`   1. cd ${themeName}`));
+      console.log(chalk.white('   2. o2vend serve --cwd .'));
+      console.log(chalk.white('   3. Open http://localhost:3000 in your browser'));
+      console.log(chalk.white('   4. Start editing your theme!\n'));
+      
+    } catch (error) {
+      console.error(chalk.red('\n❌ Error initializing theme:'), error.message);
+      if (error.stack && process.env.DEBUG) {
+        console.error(error.stack);
+      }
+      process.exit(1);
+    }
+  });
+
+module.exports = initCommand;

package/lib/commands/optimize.js

@@ -0,0 +1,216 @@
+/**
+ * O2VEND Theme CLI - Optimize Command
+ * Optimize theme performance
+ */
+
+const { Command } = require('commander');
+const path = require('path');
+const fs = require('fs-extra');
+const chalk = require('chalk');
+
+const optimizeCommand = new Command('optimize');
+
+optimizeCommand
+  .description('Optimize theme performance')
+  .option('--analyze', 'Only analyze, don\'t make changes')
+  .option('--apply', 'Apply optimizations automatically')
+  .option('--backup', 'Create backup before changes')
+  .option('--cwd <path>', 'Working directory (theme path)', process.cwd())
+  .action(async (options) => {
+    try {
+      console.log(chalk.cyan('⚡ Analyzing theme performance...\n'));
+
+      const themePath = path.resolve(options.cwd);
+      
+      if (!fs.existsSync(themePath)) {
+        console.error(chalk.red(`Theme directory does not exist: ${themePath}`));
+        process.exit(1);
+      }
+
+      const analysis = {
+        cssFiles: [],
+        jsFiles: [],
+        images: [],
+        recommendations: []
+      };
+
+      // Analyze CSS files
+      const cssFiles = findFiles(themePath, 'css');
+      cssFiles.forEach(file => {
+        const size = fs.statSync(file).size;
+        const content = fs.readFileSync(file, 'utf8');
+        const minifiedSize = estimateMinifiedSize(content);
+        
+        analysis.cssFiles.push({
+          file: path.relative(themePath, file),
+          size: size,
+          sizeKB: (size / 1024).toFixed(2),
+          minifiedSize: minifiedSize,
+          savings: size - minifiedSize,
+          savingsPercent: ((1 - minifiedSize / size) * 100).toFixed(1)
+        });
+
+        if (size > 100 * 1024) { // > 100KB
+          analysis.recommendations.push({
+            type: 'optimization',
+            file: path.relative(themePath, file),
+            message: `Large CSS file (${(size / 1024).toFixed(2)}KB) - consider minification`,
+            savings: `${((1 - minifiedSize / size) * 100).toFixed(1)}% savings possible`
+          });
+        }
+      });
+
+      // Analyze JS files
+      const jsFiles = findFiles(themePath, 'js');
+      jsFiles.forEach(file => {
+        const size = fs.statSync(file).size;
+        
+        analysis.jsFiles.push({
+          file: path.relative(themePath, file),
+          size: size,
+          sizeKB: (size / 1024).toFixed(2)
+        });
+
+        if (size > 100 * 1024) { // > 100KB
+          analysis.recommendations.push({
+            type: 'optimization',
+            file: path.relative(themePath, file),
+            message: `Large JS file (${(size / 1024).toFixed(2)}KB) - consider minification`,
+            savings: '~30-50% savings possible'
+          });
+        }
+      });
+
+      // Analyze images
+      const imageFiles = findFiles(themePath, ['png', 'jpg', 'jpeg', 'gif', 'svg', 'webp']);
+      imageFiles.forEach(file => {
+        const size = fs.statSync(file).size;
+        
+        analysis.images.push({
+          file: path.relative(themePath, file),
+          size: size,
+          sizeKB: (size / 1024).toFixed(2)
+        });
+
+        if (size > 500 * 1024) { // > 500KB
+          analysis.recommendations.push({
+            type: 'optimization',
+            file: path.relative(themePath, file),
+            message: `Large image (${(size / 1024).toFixed(2)}KB) - consider compression`,
+            savings: '~50-70% savings possible'
+          });
+        }
+      });
+
+      // Output analysis
+      outputAnalysis(analysis, options);
+
+      if (!options.analyze && options.apply) {
+        console.log(chalk.yellow('\n⚠️  Automatic optimization not yet implemented'));
+        console.log(chalk.gray('   Use external tools for minification and compression'));
+        console.log(chalk.gray('   - CSS: csso, clean-css'));
+        console.log(chalk.gray('   - JS: terser, uglify-js'));
+        console.log(chalk.gray('   - Images: imagemin, sharp'));
+      }
+    } catch (error) {
+      console.error(chalk.red('❌ Error optimizing theme:'), error.message);
+      if (error.stack && process.env.DEBUG) {
+        console.error(error.stack);
+      }
+      process.exit(1);
+    }
+  });
+
+/**
+ * Find files by extension(s)
+ */
+function findFiles(dir, ext) {
+  const extensions = Array.isArray(ext) ? ext : [ext];
+  const files = [];
+  
+  if (!fs.existsSync(dir)) return files;
+
+  const items = fs.readdirSync(dir);
+  items.forEach(item => {
+    const itemPath = path.join(dir, item);
+    const stat = fs.statSync(itemPath);
+    if (stat.isDirectory() && !item.startsWith('.') && item !== 'node_modules') {
+      files.push(...findFiles(itemPath, ext));
+    } else {
+      const fileExt = item.split('.').pop().toLowerCase();
+      if (extensions.includes(fileExt)) {
+        files.push(itemPath);
+      }
+    }
+  });
+
+  return files;
+}
+
+/**
+ * Estimate minified CSS size (rough approximation)
+ */
+function estimateMinifiedSize(css) {
+  return css
+    .replace(/\/\*[^*]*\*+(?:[^/*][^*]*\*+)*\//g, '') // Remove comments
+    .replace(/\s+/g, ' ') // Collapse whitespace
+    .replace(/;\s*}/g, '}') // Remove semicolons before closing braces
+    .replace(/\s*{\s*/g, '{') // Remove spaces around braces
+    .replace(/\s*}\s*/g, '}')
+    .replace(/\s*:\s*/g, ':') // Remove spaces around colons
+    .replace(/\s*;\s*/g, ';') // Remove spaces around semicolons
+    .trim().length;
+}
+
+/**
+ * Output analysis results
+ */
+function outputAnalysis(analysis, options) {
+  const totalCssSize = analysis.cssFiles.reduce((sum, f) => sum + f.size, 0);
+  const totalJsSize = analysis.jsFiles.reduce((sum, f) => sum + f.size, 0);
+  const totalImageSize = analysis.images.reduce((sum, f) => sum + f.size, 0);
+
+  console.log(chalk.cyan('📊 Analysis Results:\n'));
+
+  if (analysis.cssFiles.length > 0) {
+    console.log(chalk.yellow('CSS Files:'));
+    analysis.cssFiles.forEach(file => {
+      console.log(chalk.gray(`  ${file.file}: ${file.sizeKB}KB`));
+      if (file.savings > 0) {
+        console.log(chalk.green(`    → Minified: ~${(file.minifiedSize / 1024).toFixed(2)}KB (${file.savingsPercent}% savings)`));
+      }
+    });
+    console.log(chalk.cyan(`  Total: ${(totalCssSize / 1024).toFixed(2)}KB\n`));
+  }
+
+  if (analysis.jsFiles.length > 0) {
+    console.log(chalk.yellow('JavaScript Files:'));
+    analysis.jsFiles.forEach(file => {
+      console.log(chalk.gray(`  ${file.file}: ${file.sizeKB}KB`));
+    });
+    console.log(chalk.cyan(`  Total: ${(totalJsSize / 1024).toFixed(2)}KB\n`));
+  }
+
+  if (analysis.images.length > 0) {
+    console.log(chalk.yellow('Images:'));
+    analysis.images.forEach(image => {
+      console.log(chalk.gray(`  ${image.file}: ${image.sizeKB}KB`));
+    });
+    console.log(chalk.cyan(`  Total: ${(totalImageSize / 1024).toFixed(2)}KB\n`));
+  }
+
+  if (analysis.recommendations.length > 0) {
+    console.log(chalk.yellow('💡 Recommendations:\n'));
+    analysis.recommendations.forEach(rec => {
+      console.log(chalk.gray(`  ${rec.file}:`));
+      console.log(chalk.white(`    ${rec.message}`));
+      if (rec.savings) {
+        console.log(chalk.green(`    → ${rec.savings}`));
+      }
+    });
+  } else {
+    console.log(chalk.green('✅ No optimization recommendations'));
+  }
+}
+
+module.exports = optimizeCommand;