@o2vend/theme-cli 1.0.32

package/lib/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/lib/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
+};