@o2vend/theme-cli 1.0.0

package/src/lib/dev-server.js

@@ -0,0 +1,482 @@
+/**
+ * Development Server
+ * Express server for local theme development with hot reload
+ */
+
+const express = require('express');
+const path = require('path');
+const fs = require('fs-extra');
+const { createLiquidEngine, renderWithLayout } = require('./liquid-engine');
+const WidgetService = require('./widget-service');
+const O2VendApiClient = require('./api-client');
+const { setupHotReload } = require('./hot-reload');
+const chalk = require('chalk');
+
+class DevServer {
+  constructor(options = {}) {
+    this.themePath = options.themePath || process.cwd();
+    this.port = options.port || 3000;
+    this.host = options.host || 'localhost';
+    this.mode = options.mode || 'mock'; // 'mock' or 'real'
+    this.mockApiPort = options.mockApiPort || 3001;
+    this.openBrowser = options.open !== false;
+    
+    this.app = express();
+    this.server = null;
+    this.io = null;
+    this.liquid = null;
+    this.widgetService = null;
+    this.apiClient = null;
+    this.mockApi = null;
+    
+    // Setup server
+    this.setupMiddleware();
+    this.setupRoutes();
+  }
+
+  /**
+   * Setup Express middleware
+   */
+  setupMiddleware() {
+    // Body parser
+    this.app.use(express.json());
+    this.app.use(express.urlencoded({ extended: true }));
+    
+    // Static files (theme assets)
+    this.app.use('/assets', express.static(path.join(this.themePath, 'assets')));
+    
+    // Serve images from assets
+    this.app.use('/images', express.static(path.join(this.themePath, 'assets')));
+    
+    // Request logging
+    this.app.use((req, res, next) => {
+      const method = req.method;
+      const url = req.url;
+      const status = res.statusCode;
+      console.log(chalk.gray(`${method} ${url} ${status}`));
+      next();
+    });
+  }
+
+  /**
+   * Setup API client and widget service
+   */
+  async setupServices() {
+    if (this.mode === 'real') {
+      // Real API mode - create API client from environment
+      const tenantId = process.env.O2VEND_TENANT_ID;
+      const apiKey = process.env.O2VEND_API_KEY;
+      const baseUrl = process.env.O2VEND_API_BASE_URL;
+      
+      if (!tenantId || !apiKey || !baseUrl) {
+        console.warn(chalk.yellow('⚠️  Real API mode requires O2VEND_TENANT_ID, O2VEND_API_KEY, and O2VEND_API_BASE_URL'));
+        console.warn(chalk.yellow('   Falling back to mock mode'));
+        this.mode = 'mock';
+      } else {
+        this.apiClient = new O2VendApiClient(tenantId, apiKey, baseUrl);
+      }
+    }
+    
+    // In mock mode, create API client pointing to mock API (will be proxied)
+    if (this.mode === 'mock') {
+      // Mock API will run on mockApiPort, proxy will route /shopfront/api to it
+      // So we create client pointing to main server, proxy will handle routing
+      this.apiClient = new O2VendApiClient('mock-tenant', 'mock-key', `http://localhost:${this.port}`);
+    }
+    
+    // Create widget service (works with mock or real API)
+    this.widgetService = new WidgetService(this.apiClient, {
+      theme: path.basename(this.themePath),
+      themePath: this.themePath
+    });
+    
+    // Create Liquid engine
+    this.liquid = createLiquidEngine(this.themePath, {
+      cache: false // Disable cache in dev mode
+    });
+    
+    // Register widget render filter
+    this.setupWidgetFilter();
+  }
+
+  /**
+   * Register widget render filter
+   */
+  setupWidgetFilter() {
+    this.liquid.registerFilter('render_widget', async (widget, context) => {
+      if (!widget || !widget.type) {
+        return '';
+      }
+      
+      try {
+        const templateSlug = this.widgetService.getTemplateSlug(widget.type);
+        const widgetPath = path.join(this.themePath, 'widgets', `${templateSlug}.liquid`);
+        
+        if (!fs.existsSync(widgetPath)) {
+          console.warn(`[WIDGET] Template not found: ${widgetPath}`);
+          return '';
+        }
+        
+        const widgetContent = fs.readFileSync(widgetPath, 'utf8');
+        const widgetContext = {
+          ...context,
+          widget: widget
+        };
+        
+        return await this.liquid.parseAndRender(widgetContent, widgetContext);
+      } catch (error) {
+        console.error(`[WIDGET] Error rendering widget ${widget.type}:`, error.message);
+        return '';
+      }
+    });
+  }
+
+  /**
+   * Setup Express routes
+   */
+  setupRoutes() {
+    // Homepage
+    this.app.get('/', async (req, res, next) => {
+      try {
+        const context = await this.buildContext(req, 'home');
+        const html = await renderWithLayout(this.liquid, 'templates/index', context, this.themePath);
+        res.send(html);
+      } catch (error) {
+        next(error);
+      }
+    });
+
+    // Product page
+    this.app.get('/products/:handle', async (req, res, next) => {
+      try {
+        const context = await this.buildContext(req, 'product', { productHandle: req.params.handle });
+        const html = await renderWithLayout(this.liquid, 'templates/product', context, this.themePath);
+        res.send(html);
+      } catch (error) {
+        next(error);
+      }
+    });
+
+    // Collection page
+    this.app.get('/collections/:handle', async (req, res, next) => {
+      try {
+        const context = await this.buildContext(req, 'collection', { collectionHandle: req.params.handle });
+        const html = await renderWithLayout(this.liquid, 'templates/collection', context, this.themePath);
+        res.send(html);
+      } catch (error) {
+        next(error);
+      }
+    });
+
+    // Cart page
+    this.app.get('/cart', async (req, res, next) => {
+      try {
+        const context = await this.buildContext(req, 'cart');
+        const html = await renderWithLayout(this.liquid, 'templates/cart', context, this.themePath);
+        res.send(html);
+      } catch (error) {
+        next(error);
+      }
+    });
+
+    // Search page
+    this.app.get('/search', async (req, res, next) => {
+      try {
+        const context = await this.buildContext(req, 'search', { query: req.query.q });
+        const html = await renderWithLayout(this.liquid, 'templates/search', context, this.themePath);
+        res.send(html);
+      } catch (error) {
+        next(error);
+      }
+    });
+
+    // Custom page
+    this.app.get('/pages/:handle', async (req, res, next) => {
+      try {
+        const context = await this.buildContext(req, 'page', { pageHandle: req.params.handle });
+        const html = await renderWithLayout(this.liquid, 'templates/page', context, this.themePath);
+        res.send(html);
+      } catch (error) {
+        next(error);
+      }
+    });
+
+    // API proxy (for real API mode)
+    if (this.mode === 'real' && this.apiClient) {
+      this.app.use('/api', (req, res, next) => {
+        // Proxy API requests to real API
+        // This is handled by mock API in mock mode
+        next();
+      });
+    }
+
+    // Error handler
+    this.app.use((error, req, res, next) => {
+      console.error(chalk.red('[ERROR]'), error);
+      res.status(500).send(`
+        <!DOCTYPE html>
+        <html>
+        <head>
+          <title>Error</title>
+          <style>
+            body { font-family: monospace; padding: 2rem; }
+            h1 { color: #d32f2f; }
+            pre { background: #f5f5f5; padding: 1rem; border-radius: 4px; }
+          </style>
+        </head>
+        <body>
+          <h1>Error Rendering Page</h1>
+          <pre>${error.message}\n\n${error.stack}</pre>
+        </body>
+        </html>
+      `);
+    });
+  }
+
+  /**
+   * Build template context
+   * @param {Object} req - Express request
+   * @param {string} pageType - Page type (home, product, collection, etc.)
+   * @param {Object} extra - Extra context data
+   * @returns {Promise<Object>} Template context
+   */
+  async buildContext(req, pageType, extra = {}) {
+    const context = {
+      shop: {},
+      tenant: {},
+      page: {
+        type: pageType,
+        ...extra
+      },
+      products: [],
+      collections: [],
+      categories: [],
+      brands: [],
+      cart: { items: [], total: 0, itemCount: 0 },
+      widgets: {},
+      settings: {},
+      ...extra
+    };
+
+    try {
+      // Load settings from settings_data.json
+      const settingsPath = path.join(this.themePath, 'config', 'settings_data.json');
+      if (fs.existsSync(settingsPath)) {
+        const settingsData = fs.readFileSync(settingsPath, 'utf8');
+        context.settings = JSON.parse(settingsData);
+      }
+    } catch (error) {
+      console.warn('[CONTEXT] Failed to load settings:', error.message);
+    }
+
+    // Load data based on mode
+    if (this.mode === 'mock' && this.apiClient) {
+      // Use mock API (API client points to mock API via proxy)
+      try {
+        const storeInfo = await this.apiClient.getStoreInfo(true);
+        context.shop = storeInfo || {
+          name: 'My Store',
+          description: 'O2VEND Store',
+          domain: 'localhost:3000',
+          email: 'store@example.com'
+        };
+        
+        // Get widgets for sections from mock API
+        const widgets = await this.widgetService.getWidgetsBySections();
+        context.widgets = widgets || {
+          hero: [],
+          products: [],
+          footer: [],
+          content: []
+        };
+      } catch (error) {
+        console.warn('[CONTEXT] Failed to load from mock API:', error.message);
+        // Fallback to default values
+        context.shop = {
+          name: 'My Store',
+          description: 'O2VEND Store',
+          domain: 'localhost:3000',
+          email: 'store@example.com'
+        };
+        context.widgets = {
+          hero: [],
+          products: [],
+          footer: [],
+          content: []
+        };
+      }
+    } else if (this.apiClient) {
+      // Use real API
+      try {
+        const storeInfo = await this.apiClient.getStoreInfo(true);
+        context.shop = storeInfo;
+        context.tenant = { id: this.apiClient.tenantId };
+        
+        // Get widgets for sections
+        const widgets = await this.widgetService.getWidgetsBySections();
+        context.widgets = widgets;
+        
+        // Load page-specific data
+        if (pageType === 'product' && extra.productHandle) {
+          // Load product data
+          // context.product = await this.loadProduct(extra.productHandle);
+        } else if (pageType === 'home') {
+          // Load products for homepage
+          // const productsResponse = await this.apiClient.getProducts({ limit: 12 });
+          // context.products = productsResponse.products || [];
+        }
+      } catch (error) {
+        console.warn('[CONTEXT] Failed to load from API:', error.message);
+      }
+    }
+
+    return context;
+  }
+
+  /**
+   * Start development server
+   */
+  async start() {
+    try {
+      // Setup services
+      await this.setupServices();
+
+      // Start mock API first if in mock mode
+      if (this.mode === 'mock') {
+        const MockApiServer = require('./mock-api-server');
+        this.mockApi = new MockApiServer({ port: this.mockApiPort });
+        await this.mockApi.start();
+        
+        // Setup API proxy to mock API
+        const { createProxyMiddleware } = require('http-proxy-middleware');
+        this.app.use('/shopfront/api', createProxyMiddleware({
+          target: `http://localhost:${this.mockApiPort}`,
+          changeOrigin: true,
+          logLevel: 'silent'
+        }));
+      }
+
+      // Inject hot reload script into HTML responses
+      const { injectHotReloadScript } = require('./hot-reload');
+      const self = this;
+      this.app.use((req, res, next) => {
+        const originalSend = res.send;
+        res.send = function(data) {
+          if (typeof data === 'string' && (data.includes('<!DOCTYPE') || data.includes('<html'))) {
+            data = injectHotReloadScript(data, self.host, self.port);
+          }
+          return originalSend.call(res, data);
+        };
+        next();
+      });
+
+      // Create HTTP server and attach Socket.IO
+      const http = require('http');
+      this.server = http.createServer(this.app);
+      
+      // Setup hot reload (WebSocket) - attach to HTTP server
+      this.io = new (require('socket.io').Server)(this.server, {
+        path: '/socket.io',
+        serveClient: true,
+        cors: {
+          origin: '*',
+          methods: ['GET', 'POST']
+        }
+      });
+      
+      this.io.on('connection', (socket) => {
+        console.log(chalk.magenta('[Hot Reload] Client connected'));
+        socket.on('disconnect', () => {
+          console.log(chalk.magenta('[Hot Reload] Client disconnected'));
+        });
+      });
+      
+      // Setup file watching
+      const { setupFileWatcher } = require('./file-watcher');
+      this.fileWatcher = setupFileWatcher(this.themePath, (changedFiles) => {
+        // Notify clients via WebSocket
+        if (this.io) {
+          this.io.emit('file-changed', changedFiles);
+        }
+        
+        // Log changes
+        if (changedFiles.some(f => f.endsWith('.liquid'))) {
+          console.log(chalk.cyan('🔄 Liquid templates changed - reloading...'));
+        } else if (changedFiles.some(f => f.endsWith('.css'))) {
+          console.log(chalk.cyan('🎨 CSS changed - injecting...'));
+        } else if (changedFiles.some(f => f.endsWith('.js'))) {
+          console.log(chalk.cyan('📜 JavaScript changed - reloading...'));
+        }
+      });
+
+      // Start HTTP server
+      return new Promise((resolve, reject) => {
+        this.server.listen(this.port, this.host, (error) => {
+          if (error) {
+            reject(error);
+            return;
+          }
+          
+          const url = `http://${this.host}:${this.port}`;
+          console.log(chalk.green(`\n✅ Server started successfully!`));
+          console.log(chalk.cyan(`📡 Server: ${url}`));
+          console.log(chalk.cyan(`🌐 Mode: ${this.mode === 'mock' ? 'Mock API' : 'Real API'}`));
+          
+          if (this.mode === 'mock') {
+            console.log(chalk.cyan(`🎯 Mock API: http://${this.host}:${this.mockApiPort}`));
+          }
+          
+          console.log(chalk.yellow(`\n📝 Watching for changes...`));
+          console.log(chalk.yellow(`💡 Press 'q' to quit\n`));
+          
+          // Open browser if requested
+          if (this.openBrowser) {
+            const open = require('open');
+            open(url).catch(() => {
+              console.log(chalk.yellow(`💡 Open your browser: ${url}`));
+            });
+          }
+          
+          resolve(this.server);
+        });
+      });
+    } catch (error) {
+      console.error(chalk.red('❌ Failed to start server:'), error);
+      throw error;
+    }
+  }
+
+  /**
+   * Stop development server
+   */
+  async stop() {
+    return new Promise((resolve) => {
+      // Stop file watcher
+      if (this.fileWatcher && typeof this.fileWatcher.close === 'function') {
+        this.fileWatcher.close();
+      }
+      
+      // Close Socket.IO
+      if (this.io && typeof this.io.close === 'function') {
+        this.io.close();
+      }
+      
+      // Stop mock API
+      if (this.mockApi && typeof this.mockApi.stop === 'function') {
+        this.mockApi.stop().catch(() => {});
+      }
+      
+      // Close HTTP server
+      if (this.server) {
+        this.server.close(() => {
+          console.log(chalk.yellow('\n👋 Server stopped'));
+          resolve();
+        });
+      } else {
+        resolve();
+      }
+    });
+  }
+}
+
+module.exports = DevServer;

package/src/lib/file-watcher.js

@@ -0,0 +1,80 @@
+/**
+ * File Watcher
+ * Watches theme files for changes and triggers reload
+ */
+
+const chokidar = require('chokidar');
+const path = require('path');
+
+/**
+ * Setup file watcher for theme directory
+ * @param {string} themePath - Path to theme directory
+ * @param {Function} onChange - Callback when files change
+ * @returns {Object} Watcher instance
+ */
+function setupFileWatcher(themePath, onChange) {
+  const watcher = chokidar.watch(themePath, {
+    ignored: [
+      /(^|[\/\\])\../, // Ignore dotfiles
+      '**/node_modules/**',
+      '**/.git/**',
+      '**/.o2vend-cache/**',
+      '**/*.log',
+      '**/.DS_Store'
+    ],
+    persistent: true,
+    ignoreInitial: true,
+    awaitWriteFinish: {
+      stabilityThreshold: 100,
+      pollInterval: 50
+    }
+  });
+
+  let changeTimeout = null;
+  const changedFiles = new Set();
+
+  watcher
+    .on('change', (filePath) => {
+      // Debounce multiple changes
+      changedFiles.add(filePath);
+      
+      if (changeTimeout) {
+        clearTimeout(changeTimeout);
+      }
+      
+      changeTimeout = setTimeout(() => {
+        const files = Array.from(changedFiles);
+        changedFiles.clear();
+        
+        if (onChange) {
+          onChange(files);
+        }
+      }, 100);
+    })
+    .on('add', (filePath) => {
+      // New file added
+      changedFiles.add(filePath);
+      
+      if (changeTimeout) {
+        clearTimeout(changeTimeout);
+      }
+      
+      changeTimeout = setTimeout(() => {
+        const files = Array.from(changedFiles);
+        changedFiles.clear();
+        
+        if (onChange) {
+          onChange(files);
+        }
+      }, 100);
+    })
+    .on('error', (error) => {
+      console.error('[FileWatcher] Error:', error);
+    });
+
+  return watcher;
+}
+
+module.exports = {
+  setupFileWatcher
+};

package/src/lib/hot-reload.js

@@ -0,0 +1,106 @@
+/**
+ * Hot Reload
+ * WebSocket server for live reloading in browser
+ */
+
+const { Server } = require('socket.io');
+
+/**
+ * Setup hot reload WebSocket server
+ * @returns {Server} Socket.IO server
+ */
+function setupHotReload() {
+  const io = new Server({
+    path: '/socket.io',
+    serveClient: true,
+    cors: {
+      origin: '*',
+      methods: ['GET', 'POST']
+    }
+  });
+
+  // Handle connections (will be attached to HTTP server later)
+  io.on('connection', (socket) => {
+    // Client connected - will be used for hot reload
+    socket.on('disconnect', () => {
+      // Client disconnected
+    });
+  });
+
+  return io;
+}
+
+/**
+ * Inject hot reload script into HTML
+ * @param {string} html - HTML content
+ * @param {string} host - Server host
+ * @param {number} port - Server port
+ * @returns {string} HTML with hot reload script
+ */
+function injectHotReloadScript(html, host = 'localhost', port = 3000) {
+  const script = `
+    <script src="/socket.io/socket.io.js"></script>
+    <script>
+      (function() {
+        if (typeof io !== 'undefined') {
+          const socket = io('http://${host}:${port}', { 
+            path: '/socket.io',
+            transports: ['websocket', 'polling']
+          });
+          
+          socket.on('connect', function() {
+            console.log('[Hot Reload] Connected');
+          });
+          
+          socket.on('file-changed', function(files) {
+            console.log('[Hot Reload] Files changed:', files);
+            
+            // Determine reload strategy based on file type
+            const hasCss = files.some(f => f.endsWith('.css'));
+            const hasLiquid = files.some(f => f.endsWith('.liquid'));
+            const hasJs = files.some(f => f.endsWith('.js'));
+            
+            if (hasCss && !hasLiquid && !hasJs) {
+              // CSS only - inject without reload
+              console.log('[Hot Reload] Injecting CSS...');
+              files.filter(f => f.endsWith('.css')).forEach(function(file) {
+                const fileName = file.split(/[/\\\\]/).pop();
+                const links = document.querySelectorAll('link[rel="stylesheet"]');
+                links.forEach(function(link) {
+                  if (link.href.includes(fileName)) {
+                    const newLink = document.createElement('link');
+                    newLink.rel = 'stylesheet';
+                    newLink.href = link.href.split('?')[0] + '?v=' + Date.now();
+                    link.parentNode.replaceChild(newLink, link);
+                  }
+                });
+              });
+            } else {
+              // Full page reload
+              console.log('[Hot Reload] Reloading page...');
+              window.location.reload();
+            }
+          });
+          
+          socket.on('disconnect', function() {
+            console.log('[Hot Reload] Disconnected');
+          });
+        }
+      })();
+    </script>
+  `;
+
+  // Inject before closing </body> tag
+  if (html.includes('</body>')) {
+    return html.replace('</body>', script + '</body>');
+  } else if (html.includes('</html>')) {
+    return html.replace('</html>', script + '</html>');
+  } else {
+    return html + script;
+  }
+}
+
+module.exports = {
+  setupHotReload,
+  injectHotReloadScript
+};