create-aziz-app 1.0.3 → 2.0.2

package/template/pages/ApiDemo.jsx

@@ -0,0 +1,209 @@
+/** @jsx h */
+
+// Register this page at route "api-demo" → "#/api-demo"
+registerPage("api-demo", ApiDemoPage);
+
+function ApiDemoPage() {
+    const [users, setUsers] = useState([]);
+    const [loading, setLoading] = useState(false);
+    const [message, setMessage] = useState('');
+    const [newUserName, setNewUserName] = useState('');
+    const [newUserEmail, setNewUserEmail] = useState('');
+
+    // Fetch users from API
+    const fetchUsers = async () => {
+        setLoading(true);
+        try {
+            const response = await fetchApi('/api/users');
+            const data = await response.json();
+            setUsers(data);
+            setMessage('Users loaded successfully!');
+        } catch (error) {
+            setMessage('Error loading users: ' + error.message);
+        }
+        setLoading(false);
+    };
+
+    // Test hello API
+    const testHelloApi = async () => {
+        try {
+            const response = await fetchApi('/api/hello?name=Aziz');
+            const data = await response.json();
+            setMessage(data.message);
+        } catch (error) {
+            setMessage('Error: ' + error.message);
+        }
+    };
+
+    // Add new user
+    const addUser = async (e) => {
+        e.preventDefault();
+        if (!newUserName || !newUserEmail) {
+            setMessage('Please fill in all fields');
+            return;
+        }
+
+        setLoading(true);
+        try {
+            const response = await fetchApi('/api/users', {
+                method: 'POST',
+                body: JSON.stringify({
+                    name: newUserName,
+                    email: newUserEmail
+                })
+            });
+            const data = await response.json();
+            setMessage(`User added: ${data.name}`);
+            setNewUserName('');
+            setNewUserEmail('');
+            // Refresh users list
+            fetchUsers();
+        } catch (error) {
+            setMessage('Error adding user: ' + error.message);
+        }
+        setLoading(false);
+    };
+
+    // Delete user
+    const deleteUser = async (userId) => {
+        setLoading(true);
+        try {
+            const response = await fetchApi(`/api/users?id=${userId}`, {
+                method: 'DELETE'
+            });
+            const data = await response.json();
+            setMessage(data.message);
+            // Refresh users list
+            fetchUsers();
+        } catch (error) {
+            setMessage('Error deleting user: ' + error.message);
+        }
+        setLoading(false);
+    };
+
+    return (
+        <div>
+            <h1>API Routes Demo 🚀</h1>
+
+            <div class="card">
+                <h2>Test API Endpoints</h2>
+                <p>This demonstrates the Next.js-like API route system.</p>
+                
+                <div style={{ display: 'flex', gap: '12px', marginBottom: '16px' }}>
+                    <button class="btn btn-primary" onClick={testHelloApi}>
+                        Test /api/hello
+                    </button>
+                    <button class="btn btn-primary" onClick={fetchUsers}>
+                        Fetch Users
+                    </button>
+                </div>
+
+                {message && (
+                    <div style={{ 
+                        padding: '12px', 
+                        background: '#e3f2fd', 
+                        borderRadius: '8px',
+                        marginTop: '12px',
+                        color: '#1976d2'
+                    }}>
+                        {message}
+                    </div>
+                )}
+            </div>
+
+            <div class="card">
+                <h2>Add New User</h2>
+                <form onSubmit={addUser}>
+                    <div>
+                        <label>Name:</label>
+                        <input 
+                            type="text" 
+                            value={newUserName}
+                            onInput={(e) => setNewUserName(e.target.value)}
+                            placeholder="Enter name"
+                        />
+                    </div>
+                    
+                    <div>
+                        <label>Email:</label>
+                        <input 
+                            type="email" 
+                            value={newUserEmail}
+                            onInput={(e) => setNewUserEmail(e.target.value)}
+                            placeholder="Enter email"
+                        />
+                    </div>
+                    
+                    <button type="submit" class="btn btn-primary" disabled={loading}>
+                        {loading ? 'Adding...' : 'Add User'}
+                    </button>
+                </form>
+            </div>
+
+            <div class="card">
+                <h2>Users List</h2>
+                {loading && <p>Loading...</p>}
+                
+                {users.length === 0 && !loading && (
+                    <p>No users loaded. Click "Fetch Users" to load data.</p>
+                )}
+
+                {users.length > 0 && (
+                    <div>
+                        {users.map(user => (
+                            <div style={{
+                                padding: '12px',
+                                background: '#f5f5f5',
+                                borderRadius: '8px',
+                                marginBottom: '8px',
+                                display: 'flex',
+                                justifyContent: 'space-between',
+                                alignItems: 'center'
+                            }}>
+                                <div>
+                                    <strong>{user.name}</strong>
+                                    <br />
+                                    <span style={{ fontSize: '14px', color: '#666' }}>
+                                        {user.email}
+                                    </span>
+                                </div>
+                                <button 
+                                    class="btn btn-danger"
+                                    onClick={() => deleteUser(user.id)}
+                                    disabled={loading}
+                                >
+                                    Delete
+                                </button>
+                            </div>
+                        ))}
+                    </div>
+                )}
+            </div>
+
+            <div class="card">
+                <h2>How to Use API Routes</h2>
+                <p>Create API routes in the <code>api/</code> folder:</p>
+                <pre style={{
+                    background: '#282c34',
+                    color: '#61dafb',
+                    padding: '16px',
+                    borderRadius: '8px',
+                    overflow: 'auto'
+                }}>
+{`// api/myroute.js
+registerApiRoute('myroute', async (req, res) => {
+  if (req.method === 'GET') {
+    return res.status(200).json({ 
+      message: 'Hello!' 
+    });
+  }
+});
+
+// Use in components
+const response = await fetchApi('/api/myroute');
+const data = await response.json();`}
+                </pre>
+            </div>
+        </div>
+    );
+}

package/template/pages/Contact.jsx

@@ -0,0 +1,27 @@
+/** @jsx h */
+
+// Register this page at route "contact" → "#/contact"
+registerPage("contact", ContactPage);
+
+function ContactPage() {
+    return (
+        <div>
+            <h1>Contact 📬</h1>
+
+            <div class="card">
+                <h2>Get in touch</h2>
+                <p>Fill out the form below and we'll get back to you.</p>
+
+                <form onSubmit={(e) => {
+                    e.preventDefault();
+                    alert("Message sent! (wire this up to a backend)");
+                }}>
+                    <input type="text"  placeholder="Your name"    required />
+                    <input type="email" placeholder="Your email"   required />
+                    <textarea           placeholder="Your message" required></textarea>
+                    <button type="submit" class="btn btn-primary">Send Message</button>
+                </form>
+            </div>
+        </div>
+    );
+}

package/template/pages/Home.jsx

@@ -0,0 +1,39 @@
+/** @jsx h */
+
+// Register this page at route "home" → "#/"
+registerPage("home", HomePage);
+
+function HomePage() {
+    return (
+        <div>
+            <h1>Welcome Home 👋</h1>
+
+            <div class="card">
+                <h2>Global State Counter</h2>
+                <p>This uses the global state. Click the buttons to update it.</p>
+
+                <div class="count-display">{state.count}</div>
+
+                <div class="counter-actions">
+                    <button class="btn btn-danger"  onClick={() => setState({ count: state.count - 1 })}>−</button>
+                    <button class="btn btn-primary" onClick={() => setState({ count: state.count + 1 })}>+</button>
+                    <button class="btn btn-grey"    onClick={() => setState({ count: 0 })}>Reset</button>
+                </div>
+            </div>
+
+            <div class="card">
+                <h2>File-based Routing</h2>
+                <p>
+                    Each file in <strong>pages/</strong> is a route — just like Next.js.
+                    Add a new file, register it in app.js, and it's a new page.
+                </p>
+                <button class="btn btn-primary" onClick={() => navigate("test")}>
+                    Go to Test Page →
+                </button>
+                <button class="btn btn-primary" onClick={() => navigate("about")}>
+                    Go to About →
+                </button>
+            </div>
+        </div>
+    );
+}

package/template/pages/NewPage.jsx

@@ -0,0 +1,39 @@
+/** @jsx h */
+
+// Register this page at route "home" → "#/"
+registerPage("NewPage", NewPage);
+
+function NewPage() {
+    return (
+        <div>
+            <h1>Welcome Home 👋</h1>
+
+            <div class="card">
+                <h2>Global State Counter</h2>
+                <p>This uses the global state. Click the buttons to update it.</p>
+
+                <div class="count-display">{state.count}</div>
+
+                <div class="counter-actions">
+                    <button class="btn btn-danger"  onClick={() => setState({ count: state.count - 1 })}>−</button>
+                    <button class="btn btn-primary" onClick={() => setState({ count: state.count + 1 })}>+</button>
+                    <button class="btn btn-grey"    onClick={() => setState({ count: 0 })}>Reset</button>
+                </div>
+            </div>
+
+            <div class="card">
+                <h2>File-based Routing</h2>
+                <p>
+                    Each file in <strong>pages/</strong> is a route — just like Next.js.
+                    Add a new file, register it in app.js, and it's a new page.
+                </p>
+                <button class="btn btn-primary" onClick={() => navigate("test")}>
+                    Go to Test Page →
+                </button>
+                <button class="btn btn-primary" onClick={() => navigate("about")}>
+                    Go to About →
+                </button>
+            </div>
+        </div>
+    );
+}

package/template/pages/Test.jsx

@@ -0,0 +1,74 @@
+/** @jsx h */
+
+// Register this page at route "test" → "#/test"
+registerPage("test", TestPage);
+
+function TestPage() {
+    const [count, setCount] = useState(0);
+    const [name, setName] = useState('');
+    const [email, setEmail] = useState('');
+    
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        alert(`Form submitted!\nName: ${name}\nEmail: ${email}\nCount: ${count}`);
+    };
+    
+    return (
+        <div>
+            <h1>Test Page 🧪</h1>
+
+            <div class="card">
+                <h2>Counter Example</h2>
+                <p>This demonstrates the new state management system.</p>
+                
+                <div class="count-display">{count}</div>
+                <div class="counter-actions">
+                    <button class="btn btn-primary" onClick={() => setCount(count + 1)}>
+                        Increment
+                    </button>
+                    <button class="btn btn-danger" onClick={() => setCount(0)}>
+                        Reset
+                    </button>
+                </div>
+            </div>
+
+            <div class="card">
+                <h2>Form Example</h2>
+                <p>Try the form with state management.</p>
+                
+                <form onSubmit={handleSubmit}>
+                                        <div>
+                        <label>Email:</label>
+                        <input 
+                            type="email" 
+                            value={email}
+                            onInput={(e) => setEmail(e.target.value)}
+                            placeholder="Enter your email"
+                        />
+                    </div>
+                    <div>
+                        <label>Name:</label>
+                        <input 
+                            type="text" 
+                            value={name}
+                            onInput={(e) => setName(e.target.value)}
+                            placeholder="Enter your name"
+                        />
+                    </div>
+                    
+                    
+                    <button type="submit" class="btn btn-primary">
+                        Submit Form
+                    </button>
+                </form>
+            </div>
+            
+            <div class="card">
+                <h2>State Information</h2>
+                <p>Current count: <strong>{count}</strong></p>
+                <p>Current name: <strong>{name || 'Not set'}</strong></p>
+                <p>Current email: <strong>{email || 'Not set'}</strong></p>
+            </div>
+        </div>
+    );
+}

package/template/scripts/build.js

@@ -0,0 +1,81 @@
+#!/usr/bin/env node
+
+const fs = require('fs');
+const path = require('path');
+
+console.log('🔍 Scanning for pages, components, and API routes...\n');
+
+// Scan a directory for files
+function scanDirectory(dir, extensions = []) {
+    const files = [];
+    
+    if (!fs.existsSync(dir)) {
+        return files;
+    }
+    
+    const items = fs.readdirSync(dir);
+    
+    for (const item of items) {
+        const fullPath = path.join(dir, item);
+        const stat = fs.statSync(fullPath);
+        
+        if (stat.isFile()) {
+            const ext = path.extname(item);
+            if (extensions.length === 0 || extensions.includes(ext)) {
+                files.push(path.relative('.', fullPath).replace(/\\/g, '/'));
+            }
+        }
+    }
+    
+    return files;
+}
+
+// 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`);
+
+// Generate app.config.js
+const configContent = `// ============================================================
+//  APP CONFIGURATION (AUTO-GENERATED)
+//  This file is automatically generated by build.js
+//  Run: node build.js to regenerate
+// ============================================================
+
+window.APP_CONFIG = {
+    apiRoutes: ${JSON.stringify(apiRoutes, null, 8).replace(/\n/g, '\n    ')},
+    
+    components: ${JSON.stringify(components, null, 8).replace(/\n/g, '\n    ')},
+    
+    pages: ${JSON.stringify(pages, null, 8).replace(/\n/g, '\n    ')}
+};
+`;
+
+fs.writeFileSync('app.config.js', configContent);
+console.log('✅ Generated app.config.js\n');
+
+// Generate script tags for app.html
+const scriptTags = [];
+
+// Add API routes
+apiRoutes.forEach(route => {
+    scriptTags.push(`    <script type="text/babel" src="${route}"></script>`);
+});
+
+// Add components
+components.forEach(component => {
+    scriptTags.push(`    <script type="text/babel" src="${component}"></script>`);
+});
+
+// Add pages
+pages.forEach(page => {
+    scriptTags.push(`    <script type="text/babel" src="${page}"></script>`);
+});
+
+console.log('📋 Copy these script tags to app.html:\n');
+console.log(scriptTags.join('\n'));
+console.log('\n✨ Done! Refresh your browser to see changes.');

package/template/scripts/dev-server.js

@@ -0,0 +1,172 @@
+#!/usr/bin/env node
+
+const fs = require('fs');
+const path = require('path');
+const http = require('http');
+const { exec } = require('child_process');
+
+const PORT = process.env.PORT || 3000;
+const clients = []; // Store SSE clients for live reload
+
+console.log('🚀 Dev server starting...\n');
+
+// Function to generate imports
+function generateImports() {
+    console.log('🔄 Regenerating imports...');
+    exec('node scripts/generate-imports.js', (error, stdout, stderr) => {
+        if (error) {
+            console.error('❌ Error:', error);
+            return;
+        }
+        console.log(stdout);
+        // Notify all connected clients to reload
+        notifyClients();
+    });
+}
+
+// Notify all clients to reload
+function notifyClients() {
+    console.log('🔄 Notifying browser to reload...');
+    clients.forEach(client => {
+        client.write('data: reload\n\n');
+    });
+}
+
+// Live reload script to inject
+const liveReloadScript = `
+<script>
+    // Live reload client
+    const evtSource = new EventSource('/live-reload');
+    evtSource.onmessage = (event) => {
+        if (event.data === 'reload') {
+            console.log('🔄 Changes detected, reloading...');
+            location.reload();
+        }
+    };
+    evtSource.onerror = () => {
+        console.log('⚠️ Live reload disconnected');
+    };
+    console.log('✅ Live reload connected');
+</script>
+`;
+
+// Create HTTP server
+function createServer(port) {
+    return http.createServer((req, res) => {
+        // Handle live reload SSE endpoint
+        if (req.url === '/live-reload') {
+            res.writeHead(200, {
+                'Content-Type': 'text/event-stream',
+                'Cache-Control': 'no-cache',
+                'Connection': 'keep-alive',
+                'Access-Control-Allow-Origin': '*'
+            });
+            
+            clients.push(res);
+            console.log('🔌 Browser connected for live reload');
+            
+            req.on('close', () => {
+                const index = clients.indexOf(res);
+                if (index !== -1) {
+                    clients.splice(index, 1);
+                }
+                console.log('🔌 Browser disconnected from live reload');
+            });
+            
+            return;
+        }
+
+        let filePath = '.' + req.url;
+        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 {
+                // Inject live reload script into HTML files
+                if (extname === '.html') {
+                    content = content.toString().replace('</body>', liveReloadScript + '</body>');
+                }
+                
+                res.writeHead(200, { 'Content-Type': contentType });
+                res.end(content, 'utf-8');
+            }
+        });
+    });
+}
+
+// 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`);
+    }).on('error', (err) => {
+        if (err.code === 'EADDRINUSE') {
+            console.log(`⚠️  Port ${port} is busy, trying ${port + 1}...`);
+            startServer(port + 1);
+        } else {
+            console.error('❌ Server error:', err);
+        }
+    });
+}
+
+// Watch directories
+const watchDirs = ['api', 'components', 'pages', 'modules'];
+
+console.log('👀 Watching for changes in:');
+watchDirs.forEach(dir => {
+    if (fs.existsSync(dir)) {
+        console.log(`   - ${dir}/`);
+        fs.watch(dir, { recursive: false }, (eventType, filename) => {
+            if (filename && (filename.endsWith('.js') || filename.endsWith('.jsx'))) {
+                console.log(`\n📝 Detected change: ${dir}/${filename}`);
+                generateImports();
+            }
+        });
+    }
+});
+
+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');
+
+// Start server
+startServer(PORT);
+
+// Generate imports on startup
+generateImports();
+
+// Keep the process running
+process.stdin.resume();