npm - @o2vend/theme-cli - Versions diffs - 1.0.0 - Mend

@o2vend/theme-cli 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (20) hide show

package/README.md +211 -0
package/bin/o2vend +34 -0
package/config/widget-map.json +45 -0
package/package.json +64 -0
package/src/commands/check.js +201 -0
package/src/commands/generate.js +33 -0
package/src/commands/init.js +302 -0
package/src/commands/optimize.js +216 -0
package/src/commands/package.js +208 -0
package/src/commands/serve.js +105 -0
package/src/commands/validate.js +191 -0
package/src/lib/api-client.js +339 -0
package/src/lib/dev-server.js +482 -0
package/src/lib/file-watcher.js +80 -0
package/src/lib/hot-reload.js +106 -0
package/src/lib/liquid-engine.js +169 -0
package/src/lib/liquid-filters.js +589 -0
package/src/lib/mock-api-server.js +225 -0
package/src/lib/mock-data.js +290 -0
package/src/lib/widget-service.js +293 -0

package/src/commands/init.js ADDED Viewed

@@ -0,0 +1,302 @@
+/**
+ * O2VEND Theme CLI - Init Command
+ * Initialize new theme with best-practice structure
+ */
+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 theme')
+  .argument('[theme-name]', 'Theme name')
+  .option('-t, --template <template>', 'Starter template (minimal|full-featured)', 'minimal')
+  .option('--cwd <path>', 'Working directory', process.cwd())
+  .action(async (themeName, options) => {
+    try {
+      const cwd = path.resolve(options.cwd);
+      // If theme name not provided, prompt for it
+      if (!themeName) {
+        const answers = await inquirer.prompt([
+          {
+            type: 'input',
+            name: 'themeName',
+            message: 'Theme name:',
+            validate: (input) => {
+              if (!input.trim()) {
+                return 'Theme name is required';
+              }
+              if (!/^[a-z0-9-]+$/.test(input.trim())) {
+                return 'Theme name should contain only lowercase letters, numbers, and hyphens';
+              }
+              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('❌ Cancelled'));
+          process.exit(0);
+        }
+        fs.removeSync(themeDir);
+      }
+      console.log(chalk.cyan(`✨ Creating theme "${themeName}"...\n`));
+      // Create directory structure
+      const dirs = [
+        'layout',
+        'templates',
+        'sections',
+        'snippets',
+        'assets',
+        'config',
+        'widgets',
+        'migrations'
+      ];
+      dirs.forEach(dir => {
+        fs.ensureDirSync(path.join(themeDir, dir));
+      });
+      // Create layout/theme.liquid
+      const layoutContent = `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>{{ shop.name }}{% if page.title %} - {{ page.title }}{% endif %}</title>
+  {% if settings.favicon %}
+    <link rel="icon" href="{{ settings.favicon | asset_url }}">
+  {% endif %}
+  {{ 'theme.css' | asset_url | stylesheet_tag }}
+</head>
+<body>
+  {% section 'header' %}
+  <main class="main-content">
+    {{ content }}
+  </main>
+  {% section 'footer' %}
+  {{ 'theme.js' | asset_url | script_tag }}
+</body>
+</html>`;
+      fs.writeFileSync(path.join(themeDir, 'layout', 'theme.liquid'), layoutContent);
+      // Create templates/index.liquid
+      const indexTemplate = `{% layout 'theme' %}
+<div class="homepage">
+  <h1>Welcome to {{ shop.name }}</h1>
+  {% for widget in widgets.hero %}
+    {{ widget | render_widget }}
+  {% endfor %}
+  {% unless widgets.hero %}
+    <p>Configure widgets in the admin to add content here.</p>
+  {% endunless %}
+</div>`;
+      fs.writeFileSync(path.join(themeDir, 'templates', 'index.liquid'), indexTemplate);
+      // Create basic sections
+      const headerSection = `<header class="site-header">
+  <div class="container">
+    <h1>{{ shop.name }}</h1>
+  </div>
+</header>
+{% schema %}
+{
+  "name": "Header",
+  "settings": []
+}
+{% endschema %}`;
+      fs.writeFileSync(path.join(themeDir, 'sections', 'header.liquid'), headerSection);
+      const footerSection = `<footer class="site-footer">
+  <div class="container">
+    <p>&copy; {{ 'now' | date: '%Y' }} {{ shop.name }}. All rights reserved.</p>
+  </div>
+</footer>
+{% schema %}
+{
+  "name": "Footer",
+  "settings": []
+}
+{% endschema %}`;
+      fs.writeFileSync(path.join(themeDir, 'sections', 'footer.liquid'), footerSection);
+      // Create basic assets
+      const themeCss = `/* Theme Styles */
+:root {
+  --primary-color: #000;
+  --text-color: #333;
+  --bg-color: #fff;
+}
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+  color: var(--text-color);
+  background-color: var(--bg-color);
+  line-height: 1.6;
+}
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 20px;
+}
+.site-header {
+  background-color: var(--primary-color);
+  color: #fff;
+  padding: 1rem 0;
+}
+.site-header h1 {
+  margin: 0;
+}
+.main-content {
+  min-height: 60vh;
+  padding: 2rem 0;
+}
+.site-footer {
+  background-color: #f5f5f5;
+  padding: 2rem 0;
+  margin-top: 4rem;
+  text-align: center;
+}`;
+      fs.writeFileSync(path.join(themeDir, 'assets', 'theme.css'), themeCss);
+      const themeJs = `// Theme JavaScript
+document.addEventListener('DOMContentLoaded', function() {
+  console.log('Theme loaded');
+});`;
+      fs.writeFileSync(path.join(themeDir, 'assets', 'theme.js'), themeJs);
+      // Create config files
+      const settingsSchema = {
+        name: 'Theme Settings',
+        settings: [
+          {
+            type: 'text',
+            id: 'favicon',
+            label: 'Favicon URL',
+            default: ''
+          }
+        ]
+      };
+      fs.writeJsonSync(path.join(themeDir, 'config', 'settings_schema.json'), settingsSchema, { spaces: 2 });
+      const settingsData = {
+        current: {
+          favicon: ''
+        }
+      };
+      fs.writeJsonSync(path.join(themeDir, 'config', 'settings_data.json'), settingsData, { spaces: 2 });
+      // Create theme.json.example
+      const themeJsonExample = {
+        id: themeName,
+        name: themeName.split('-').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(' '),
+        version: '1.0.0',
+        author: 'Theme Developer',
+        description: `A beautiful O2VEND theme: ${themeName}`,
+        migration: {
+          files: {
+            modified: [],
+            added: [],
+            deleted: []
+          },
+          script: null
+        },
+        compatibility: {
+          minO2VENDVersion: '1.0.0',
+          dependencies: []
+        }
+      };
+      fs.writeJsonSync(path.join(themeDir, 'theme.json.example'), themeJsonExample, { spaces: 2 });
+      // Create README
+      const readme = `# ${themeName}
+O2VEND Theme
+## Getting Started
+1. Start development server:
+   \`\`\`bash
+   o2vend serve
+   \`\`\`
+2. Edit theme files in this directory
+3. Package for marketplace:
+   \`\`\`bash
+   o2vend package
+   \`\`\`
+## Structure
+- \`layout/\` - Layout templates
+- \`templates/\` - Page templates
+- \`sections/\` - Section components
+- \`widgets/\` - Widget templates
+- \`snippets/\` - Reusable snippets
+- \`assets/\` - CSS, JavaScript, images
+- \`config/\` - Theme configuration
+`;
+      fs.writeFileSync(path.join(themeDir, 'README.md'), readme);
+      console.log(chalk.green('✅ Theme initialized successfully!'));
+      console.log(chalk.cyan(`\n📁 Theme created at: ${themeDir}`));
+      console.log(chalk.yellow('\n💡 Next steps:'));
+      console.log(chalk.gray(`   cd ${themeName}`));
+      console.log(chalk.gray('   o2vend serve'));
+    } catch (error) {
+      console.error(chalk.red('❌ Error initializing theme:'), error.message);
+      if (error.stack && process.env.DEBUG) {
+        console.error(error.stack);
+      }
+      process.exit(1);
+    }
+  });
+module.exports = initCommand;

package/src/commands/optimize.js ADDED Viewed

@@ -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;