create-aziz-app 2.0.10 → 2.0.12

package/template/scripts/dev-server.js

@@ -6,10 +6,153 @@ const http = require('http');
 const { exec } = require('child_process');
 
 const PORT = process.env.PORT || 3000;
-const clients = []; // Store SSE clients for live reload
+const clients = new Set();
+const apiHandlers = {};
 
 console.log('🚀 Dev server starting...\n');
 
+// Load API routes from api/ folder
+function loadApiRoutes() {
+    const apiDir = path.join(process.cwd(), 'api');
+    if (!fs.existsSync(apiDir)) {
+        console.log('⚠️  No api/ folder found\n');
+        return;
+    }
+
+    const files = fs.readdirSync(apiDir).filter(f => f.endsWith('.js'));
+    console.log(`📡 Loading ${files.length} API routes...\n`);
+
+    files.forEach(file => {
+        const routeName = path.basename(file, '.js');
+        const filePath = path.join(apiDir, file);
+        
+        try {
+            // Clear require cache to allow hot reload
+            delete require.cache[require.resolve(filePath)];
+            
+            // Load the API handler
+            const handler = require(filePath);
+            
+            if (typeof handler === 'function') {
+                apiHandlers[routeName] = handler;
+                console.log(`   ✅ /api/${routeName}`);
+            } else if (handler.default && typeof handler.default === 'function') {
+                apiHandlers[routeName] = handler.default;
+                console.log(`   ✅ /api/${routeName}`);
+            } else {
+                console.log(`   ⚠️  /api/${routeName} - No default export`);
+            }
+        } catch (error) {
+            console.error(`   ❌ /api/${routeName} - ${error.message}`);
+        }
+    });
+    
+    console.log('');
+}
+
+// Parse request body
+function parseBody(req) {
+    return new Promise((resolve, reject) => {
+        let body = '';
+        req.on('data', chunk => {
+            body += chunk.toString();
+        });
+        req.on('end', () => {
+            try {
+                if (body && req.headers['content-type']?.includes('application/json')) {
+                    resolve(JSON.parse(body));
+                } else {
+                    resolve(body);
+                }
+            } catch (e) {
+                resolve(body);
+            }
+        });
+        req.on('error', reject);
+    });
+}
+
+// Parse query string
+function parseQuery(url) {
+    const query = {};
+    const queryString = url.split('?')[1];
+    if (queryString) {
+        queryString.split('&').forEach(param => {
+            const [key, value] = param.split('=');
+            query[decodeURIComponent(key)] = decodeURIComponent(value || '');
+        });
+    }
+    return query;
+}
+
+// Handle API requests
+async function handleApiRequest(req, res) {
+    const urlPath = req.url.split('?')[0];
+    const routeName = urlPath.replace('/api/', '');
+    
+    const handler = apiHandlers[routeName];
+    
+    if (!handler) {
+        res.writeHead(404, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify({ error: 'API route not found' }));
+        return;
+    }
+
+    try {
+        // Parse request
+        const body = await parseBody(req);
+        const query = parseQuery(req.url);
+        
+        // Create Next.js-like req/res objects
+        const apiReq = {
+            method: req.method,
+            body: body,
+            query: query,
+            headers: req.headers,
+            url: req.url
+        };
+
+        const apiRes = {
+            statusCode: 200,
+            headers: {},
+            status(code) {
+                this.statusCode = code;
+                return this;
+            },
+            json(data) {
+                res.writeHead(this.statusCode, {
+                    'Content-Type': 'application/json',
+                    'Access-Control-Allow-Origin': '*',
+                    ...this.headers
+                });
+                res.end(JSON.stringify(data));
+                return this;
+            },
+            send(data) {
+                res.writeHead(this.statusCode, {
+                    'Content-Type': 'text/plain',
+                    'Access-Control-Allow-Origin': '*',
+                    ...this.headers
+                });
+                res.end(data);
+                return this;
+            },
+            setHeader(key, value) {
+                this.headers[key] = value;
+                return this;
+            }
+        };
+
+        // Call the handler
+        await handler(apiReq, apiRes);
+        
+    } catch (error) {
+        console.error(`❌ API Error on /api/${routeName}:`, error);
+        res.writeHead(500, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify({ error: error.message }));
+    }
+}
+
 // Function to generate imports
 function generateImports() {
     console.log('🔄 Regenerating imports...');
@@ -27,193 +170,134 @@ function generateImports() {
 // Notify all clients to reload
 function notifyClients() {
     const timestamp = new Date().toLocaleTimeString();
-    console.log(`🔄 [${timestamp}] Notifying ${clients.length} browser(s) to reload...`);
+    console.log(`🔄 [${timestamp}] Notifying ${clients.size} browser(s) to reload...`);
     clients.forEach(client => {
-        client.write('data: reload\n\n');
+        try {
+            client.send('reload');
+        } catch (e) {
+            clients.delete(client);
+        }
     });
 }
 
-// Live reload script to inject
-function getLiveReloadScript() {
-    return `
-<script>
-    (function() {
-        // Create visual indicator
-        const indicator = document.createElement('div');
-        indicator.id = 'live-reload-indicator';
-        indicator.style.cssText = 'position: fixed; bottom: 20px; right: 20px; background: #4caf50; color: white; padding: 8px 16px; border-radius: 20px; font-size: 12px; font-family: monospace; z-index: 9999; box-shadow: 0 2px 8px rgba(0,0,0,0.2); transition: all 0.3s;';
-        indicator.textContent = '🔌 Connecting...';
-        document.body.appendChild(indicator);
-        
-        // Live reload client
-        console.log('🔌 Connecting to live reload at ' + window.location.origin + '/live-reload');
-        
-        let evtSource;
-        let reconnectAttempts = 0;
-        const maxReconnectAttempts = 5;
-        
-        function connect() {
-            try {
-                evtSource = new EventSource('/live-reload');
-                
-                evtSource.onopen = function() {
-                    console.log('✅ Live reload connected');
-                    reconnectAttempts = 0;
-                    indicator.style.background = '#4caf50';
-                    indicator.textContent = '✅ Live Reload Active';
-                    setTimeout(function() {
-                        indicator.style.opacity = '0.3';
-                    }, 2000);
-                };
-                
-                evtSource.onmessage = function(event) {
-                    if (event.data === 'reload') {
-                        console.log('🔄 Changes detected, reloading...');
-                        indicator.style.opacity = '1';
-                        indicator.style.background = '#2196f3';
-                        indicator.textContent = '🔄 Reloading...';
-                        setTimeout(function() {
-                            // Add timestamp to force cache bust
-                            var url = window.location.href.split('?')[0];
-                            window.location.href = url + '?t=' + Date.now();
-                        }, 100);
-                    }
-                };
-                
-                evtSource.onerror = function(err) {
-                    console.log('⚠️ Live reload connection error');
-                    indicator.style.background = '#ff9800';
-                    indicator.style.opacity = '1';
-                    indicator.textContent = '⚠️ Connection Lost';
-                    
-                    if (evtSource) {
-                        evtSource.close();
-                    }
-                    
-                    if (reconnectAttempts < maxReconnectAttempts) {
-                        reconnectAttempts++;
-                        console.log('Reconnecting... attempt ' + reconnectAttempts);
-                        setTimeout(connect, 2000);
-                    } else {
-                        indicator.textContent = '❌ Reload Failed';
-                        console.log('Max reconnection attempts reached. Please refresh manually.');
-                    }
-                };
-            } catch (e) {
-                console.error('Failed to create EventSource:', e);
-                indicator.style.background = '#f44336';
-                indicator.textContent = '❌ Connection Error';
-            }
-        }
-        
-        connect();
-        
-        // Show indicator on hover
-        indicator.addEventListener('mouseenter', function() {
-            indicator.style.opacity = '1';
-        });
-        indicator.addEventListener('mouseleave', function() {
-            if (indicator.textContent.includes('Active')) {
-                indicator.style.opacity = '0.3';
-            }
+// Create HTTP server
+const server = http.createServer(async (req, res) => {
+    // Handle API routes
+    if (req.url.startsWith('/api/')) {
+        await handleApiRequest(req, res);
+        return;
+    }
+
+    // Handle CORS preflight
+    if (req.method === 'OPTIONS') {
+        res.writeHead(200, {
+            'Access-Control-Allow-Origin': '*',
+            'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
+            'Access-Control-Allow-Headers': 'Content-Type'
         });
-    })();
-</script>
-`;
-}
+        res.end();
+        return;
+    }
 
-// Create HTTP server
-function createServer(port) {
-    return http.createServer((req, res) => {
-        // Handle live reload SSE endpoint
-        if (req.url === '/live-reload' || req.url.startsWith('/live-reload?')) {
-            res.writeHead(200, {
-                'Content-Type': 'text/event-stream',
+    // Strip query parameters for file serving (cache busting)
+    let filePath = '.' + req.url.split('?')[0];
+    if (filePath === './') {
+        filePath = './app.html';
+    }
+
+    const extname = String(path.extname(filePath)).toLowerCase();
+    const mimeTypes = {
+        '.html': 'text/html',
+        '.js': 'text/javascript',
+        '.jsx': 'text/javascript',
+        '.css': 'text/css',
+        '.json': 'application/json',
+        '.png': 'image/png',
+        '.jpg': 'image/jpg',
+        '.gif': 'image/gif',
+        '.svg': 'image/svg+xml',
+        '.wav': 'audio/wav',
+        '.mp4': 'video/mp4',
+        '.woff': 'application/font-woff',
+        '.ttf': 'application/font-ttf',
+        '.eot': 'application/vnd.ms-fontobject',
+        '.otf': 'application/font-otf',
+        '.wasm': 'application/wasm'
+    };
+
+    const contentType = mimeTypes[extname] || 'application/octet-stream';
+
+    fs.readFile(filePath, (error, content) => {
+        if (error) {
+            if (error.code === 'ENOENT') {
+                res.writeHead(404, { 'Content-Type': 'text/html' });
+                res.end('<h1>404 - File Not Found</h1>', 'utf-8');
+            } else {
+                res.writeHead(500);
+                res.end('Server Error: ' + error.code, 'utf-8');
+            }
+        } else {
+            // Add cache control headers to prevent caching during development
+            res.writeHead(200, { 
+                'Content-Type': contentType,
                 'Cache-Control': 'no-cache, no-store, must-revalidate',
-                'Connection': 'keep-alive',
-                'Access-Control-Allow-Origin': '*',
-                'X-Accel-Buffering': 'no'
-            });
-            
-            // Send initial connection message
-            res.write(':ok\n\n');
-            
-            clients.push(res);
-            const timestamp = new Date().toLocaleTimeString();
-            console.log(`🔌 [${timestamp}] Browser connected for live reload (${clients.length} total)`);
-            
-            req.on('close', () => {
-                const index = clients.indexOf(res);
-                if (index !== -1) {
-                    clients.splice(index, 1);
-                }
-                const closeTime = new Date().toLocaleTimeString();
-                console.log(`🔌 [${closeTime}] Browser disconnected (${clients.length} remaining)`);
+                'Pragma': 'no-cache',
+                'Expires': '0'
             });
-            
-            return;
+            res.end(content, 'utf-8');
         }
+    });
+});
+
+// WebSocket implementation (simple, no external dependencies)
+server.on('upgrade', (req, socket, head) => {
+    // Simple WebSocket handshake
+    const key = req.headers['sec-websocket-key'];
+    const acceptKey = require('crypto')
+        .createHash('sha1')
+        .update(key + '258EAFA5-E914-47DA-95CA-C5AB0DC85B11')
+        .digest('base64');
+
+    socket.write(
+        'HTTP/1.1 101 Switching Protocols\r\n' +
+        'Upgrade: websocket\r\n' +
+        'Connection: Upgrade\r\n' +
+        `Sec-WebSocket-Accept: ${acceptKey}\r\n` +
+        '\r\n'
+    );
 
-        // Strip query parameters for file serving (cache busting)
-        let filePath = '.' + req.url.split('?')[0];
-        if (filePath === './') {
-            filePath = './app.html';
+    const timestamp = new Date().toLocaleTimeString();
+    console.log(`🔌 [${timestamp}] Browser connected (${clients.size + 1} total)`);
+
+    // Wrap socket with send method
+    const client = {
+        socket: socket,
+        send: function(message) {
+            const buffer = Buffer.from(message);
+            const frame = Buffer.alloc(buffer.length + 2);
+            frame[0] = 0x81; // Text frame
+            frame[1] = buffer.length;
+            buffer.copy(frame, 2);
+            socket.write(frame);
         }
+    };
 
-        const extname = String(path.extname(filePath)).toLowerCase();
-        const mimeTypes = {
-            '.html': 'text/html',
-            '.js': 'text/javascript',
-            '.jsx': 'text/javascript',
-            '.css': 'text/css',
-            '.json': 'application/json',
-            '.png': 'image/png',
-            '.jpg': 'image/jpg',
-            '.gif': 'image/gif',
-            '.svg': 'image/svg+xml',
-            '.wav': 'audio/wav',
-            '.mp4': 'video/mp4',
-            '.woff': 'application/font-woff',
-            '.ttf': 'application/font-ttf',
-            '.eot': 'application/vnd.ms-fontobject',
-            '.otf': 'application/font-otf',
-            '.wasm': 'application/wasm'
-        };
+    clients.add(client);
 
-        const contentType = mimeTypes[extname] || 'application/octet-stream';
+    socket.on('close', () => {
+        clients.delete(client);
+        const closeTime = new Date().toLocaleTimeString();
+        console.log(`🔌 [${closeTime}] Browser disconnected (${clients.size} remaining)`);
+    });
 
-        fs.readFile(filePath, (error, content) => {
-            if (error) {
-                if (error.code === 'ENOENT') {
-                    res.writeHead(404, { 'Content-Type': 'text/html' });
-                    res.end('<h1>404 - File Not Found</h1>', 'utf-8');
-                } else {
-                    res.writeHead(500);
-                    res.end('Server Error: ' + error.code, 'utf-8');
-                }
-            } else {
-                // Inject live reload script into HTML files
-                if (extname === '.html') {
-                    content = content.toString().replace('</body>', getLiveReloadScript() + '</body>');
-                }
-                
-                // Add cache control headers to prevent caching during development
-                res.writeHead(200, { 
-                    'Content-Type': contentType,
-                    'Cache-Control': 'no-cache, no-store, must-revalidate',
-                    'Pragma': 'no-cache',
-                    'Expires': '0'
-                });
-                res.end(content, 'utf-8');
-            }
-        });
+    socket.on('error', (err) => {
+        clients.delete(client);
+        console.log('⚠️ Socket error:', err.message);
     });
-}
+});
 
 // Function to start server on available port
 function startServer(port) {
-    const server = createServer(port);
-    
     server.listen(port, () => {
         console.log(`🌐 Server running at http://localhost:${port}/`);
         console.log(`📱 Open http://localhost:${port}/ in your browser\n`);
@@ -246,6 +330,12 @@ watchDirs.forEach(dir => {
                     clearTimeout(reloadTimeout);
                 }
                 
+                // Reload API routes if api/ folder changed
+                if (dir === 'api' && filename.endsWith('.js')) {
+                    console.log('🔄 Reloading API routes...');
+                    loadApiRoutes();
+                }
+                
                 // For CSS changes, just reload without regenerating imports
                 if (filename.endsWith('.css')) {
                     reloadTimeout = setTimeout(() => {
@@ -266,6 +356,9 @@ console.log('\n✅ Dev server running with live reload!');
 console.log('💡 Create/modify files and browser will auto-refresh');
 console.log('⏹️  Press Ctrl+C to stop\n');
 
+// Load API routes
+loadApiRoutes();
+
 // Start server
 startServer(PORT);
 

package/template/scripts/generate-imports.js

@@ -31,11 +31,9 @@ function scanDirectory(dir, extensions = []) {
 }
 
 // Scan for files
-const apiRoutes = scanDirectory('api', ['.js']);
 const components = scanDirectory('components', ['.jsx', '.js']);
 const pages = scanDirectory('pages', ['.jsx', '.js']);
 
-console.log(`📡 Found ${apiRoutes.length} API routes`);
 console.log(`🧩 Found ${components.length} components`);
 console.log(`📄 Found ${pages.length} pages\n`);
 
@@ -48,14 +46,6 @@ scriptTags += '    <script type="text/babel" src="modules/router.js"></script>\n
 scriptTags += '    <script type="text/babel" src="modules/state.js"></script>\n';
 scriptTags += '    <script type="text/babel" src="modules/api.js"></script>\n\n';
 
-if (apiRoutes.length > 0) {
-    scriptTags += '    <!-- Load API routes -->\n';
-    apiRoutes.forEach(route => {
-        scriptTags += `    <script type="text/babel" src="${route}"></script>\n`;
-    });
-    scriptTags += '\n';
-}
-
 if (components.length > 0) {
     scriptTags += '    <!-- Load shared components -->\n';
     components.forEach(component => {

package/template/scripts/live-reload-client.js

@@ -0,0 +1,105 @@
+// Live Reload Client - Always loaded, connects to dev server
+(function() {
+    // Only run in development (when dev server is running)
+    const isDev = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1';
+    if (!isDev) return;
+
+    // Create visual indicator
+    const indicator = document.createElement('div');
+    indicator.id = 'live-reload-indicator';
+    indicator.style.cssText = 'position: fixed; bottom: 20px; right: 20px; background: #4caf50; color: white; padding: 8px 16px; border-radius: 20px; font-size: 12px; font-family: monospace; z-index: 9999; box-shadow: 0 2px 8px rgba(0,0,0,0.2); transition: all 0.3s; cursor: pointer;';
+    indicator.textContent = '🔌 Connecting...';
+    
+    // Wait for body to be ready
+    function addIndicator() {
+        if (document.body) {
+            document.body.appendChild(indicator);
+        } else {
+            setTimeout(addIndicator, 100);
+        }
+    }
+    addIndicator();
+
+    let ws;
+    let reconnectAttempts = 0;
+    const maxReconnectAttempts = 10;
+    const port = window.location.port || 3000;
+
+    function connect() {
+        try {
+            console.log('🔌 Connecting to live reload WebSocket...');
+            ws = new WebSocket(`ws://localhost:${port}`);
+
+            ws.onopen = function() {
+                console.log('✅ Live reload connected');
+                reconnectAttempts = 0;
+                indicator.style.background = '#4caf50';
+                indicator.textContent = '✅ Live Reload';
+                setTimeout(function() {
+                    indicator.style.opacity = '0.3';
+                }, 2000);
+            };
+
+            ws.onmessage = function(event) {
+                if (event.data === 'reload') {
+                    console.log('🔄 Changes detected, reloading...');
+                    indicator.style.opacity = '1';
+                    indicator.style.background = '#2196f3';
+                    indicator.textContent = '🔄 Reloading...';
+                    
+                    // Small delay to show the indicator
+                    setTimeout(function() {
+                        window.location.reload();
+                    }, 100);
+                }
+            };
+
+            ws.onerror = function(err) {
+                console.log('⚠️ WebSocket error:', err);
+            };
+
+            ws.onclose = function() {
+                console.log('⚠️ Live reload disconnected');
+                indicator.style.background = '#ff9800';
+                indicator.style.opacity = '1';
+                indicator.textContent = '⚠️ Disconnected';
+
+                // Try to reconnect
+                if (reconnectAttempts < maxReconnectAttempts) {
+                    reconnectAttempts++;
+                    console.log(`Reconnecting... attempt ${reconnectAttempts}`);
+                    setTimeout(connect, 2000);
+                } else {
+                    indicator.textContent = '❌ Offline';
+                    indicator.style.background = '#f44336';
+                }
+            };
+        } catch (e) {
+            console.error('Failed to create WebSocket:', e);
+            indicator.style.background = '#f44336';
+            indicator.textContent = '❌ Error';
+        }
+    }
+
+    // Start connection when page loads
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', connect);
+    } else {
+        connect();
+    }
+
+    // Show indicator on hover
+    indicator.addEventListener('mouseenter', function() {
+        indicator.style.opacity = '1';
+    });
+    indicator.addEventListener('mouseleave', function() {
+        if (indicator.textContent.includes('Live Reload')) {
+            indicator.style.opacity = '0.3';
+        }
+    });
+
+    // Click to manually reload
+    indicator.addEventListener('click', function() {
+        window.location.reload();
+    });
+})();