create-aziz-app 2.0.14 → 3.0.0

package/template/pages/ApiDemo.jsx

@@ -1,209 +0,0 @@
-/** @jsx h */
-
-// Auto-registered as "api-demo" route (or manually register for custom name)
-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

@@ -1,25 +0,0 @@
-/** @jsx h */
-
-// Auto-registered as "contact" route
-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/Example.jsx

@@ -1,59 +0,0 @@
-/** @jsx h */
-
-// That's it! No registerPage() needed.
-// This automatically becomes route "#/example"
-function ExamplePage() {
-    const [message, setMessage] = useState('Hello from Example Page! 🎉');
-    
-    return (
-        <div>
-            <h1>Example Page</h1>
-
-            <div class="card">
-                <h2>✨ Auto-Registration Demo</h2>
-                <p>
-                    This page was created without calling <code>registerPage()</code>.
-                    Just define a function ending with "Page" and it works!
-                </p>
-                
-                <div style={{ 
-                    background: '#f0f0f0', 
-                    padding: '16px', 
-                    borderRadius: '8px',
-                    fontFamily: 'monospace',
-                    fontSize: '14px'
-                }}>
-                    <strong>Function name:</strong> ExamplePage()<br/>
-                    <strong>Auto route:</strong> #/example<br/>
-                    <strong>URL:</strong> {window.location.href}
-                </div>
-            </div>
-
-            <div class="card">
-                <h2>State Management Works Too</h2>
-                <p>{message}</p>
-                <button 
-                    class="btn btn-primary" 
-                    onClick={() => setMessage('State updated! ✅')}
-                >
-                    Update Message
-                </button>
-            </div>
-
-            <div class="card">
-                <h2>Navigation</h2>
-                <div style={{ display: 'flex', gap: '12px' }}>
-                    <button class="btn btn-primary" onClick={() => navigate("home")}>
-                        Home
-                    </button>
-                    <button class="btn btn-primary" onClick={() => navigate("about")}>
-                        About
-                    </button>
-                    <button class="btn btn-primary" onClick={() => navigate("test")}>
-                        Test
-                    </button>
-                </div>
-            </div>
-        </div>
-    );
-}

package/template/pages/Home.jsx

@@ -1,39 +0,0 @@
-/** @jsx h */
-
-// Auto-registered as "home" route
-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, run the build script, and it's a new page.
-                </p>
-                <div style={{ display: 'flex', gap: '12px' }}>
-                    <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>
-        </div>
-    );
-}

package/template/pages/HooksDemo.jsx

@@ -1,194 +0,0 @@
-/** @jsx h */
-
-// Demo page showing all React-like hooks
-function HooksDemoPage() {
-    // useState - Basic state
-    const [count, setCount] = useState(0);
-    const [name, setName] = useState('');
-
-    // useEffect - Side effects
-    useEffect(() => {
-        console.log('Component mounted!');
-        document.title = `Count: ${count}`;
-        
-        return () => {
-            console.log('Cleanup!');
-        };
-    }, [count]);
-
-    // useMemo - Memoized value
-    const expensiveValue = useMemo(() => {
-        console.log('Computing expensive value...');
-        return count * 2;
-    }, [count]);
-
-    // useCallback - Memoized function
-    const handleIncrement = useCallback(() => {
-        setCount(c => c + 1);
-    }, []);
-
-    // useRef - Mutable ref
-    const inputRef = useRef(null);
-
-    const focusInput = () => {
-        if (inputRef.current) {
-            inputRef.current.focus();
-        }
-    };
-
-    // useReducer - Complex state
-    const [state, dispatch] = useReducer((state, action) => {
-        switch (action.type) {
-            case 'increment':
-                return { ...state, value: state.value + 1 };
-            case 'decrement':
-                return { ...state, value: state.value - 1 };
-            case 'reset':
-                return { ...state, value: 0 };
-            default:
-                return state;
-        }
-    }, { value: 0 });
-
-    // useLocalStorage - Custom hook
-    const [savedName, setSavedName] = useLocalStorage('userName', '');
-
-    // useFetch - Custom hook
-    const { data, loading, error } = useFetch('/api/hello?name=Hooks');
-
-    return (
-        <div>
-            <h1>React Hooks Demo 🪝</h1>
-
-            <div class="card">
-                <h2>useState</h2>
-                <p>Basic state management</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(count - 1)}>
-                        Decrement
-                    </button>
-                    <button class="btn btn-grey" onClick={() => setCount(0)}>
-                        Reset
-                    </button>
-                </div>
-            </div>
-
-            <div class="card">
-                <h2>useEffect</h2>
-                <p>Check the browser console and page title!</p>
-                <p>Current count: <strong>{count}</strong></p>
-                <p style={{ color: '#666', fontSize: '14px' }}>
-                    useEffect runs after render and updates the document title
-                </p>
-            </div>
-
-            <div class="card">
-                <h2>useMemo</h2>
-                <p>Memoized expensive computation</p>
-                <p>Count × 2 = <strong>{expensiveValue}</strong></p>
-                <p style={{ color: '#666', fontSize: '14px' }}>
-                    Check console - computation only runs when count changes
-                </p>
-            </div>
-
-            <div class="card">
-                <h2>useCallback</h2>
-                <p>Memoized callback function</p>
-                <button class="btn btn-primary" onClick={handleIncrement}>
-                    Increment (Memoized)
-                </button>
-                <p style={{ color: '#666', fontSize: '14px', marginTop: '8px' }}>
-                    Function reference stays the same between renders
-                </p>
-            </div>
-
-            <div class="card">
-                <h2>useRef</h2>
-                <p>Mutable reference to DOM element</p>
-                <input 
-                    ref={inputRef}
-                    type="text" 
-                    placeholder="Click button to focus me"
-                    value={name}
-                    onInput={(e) => setName(e.target.value)}
-                />
-                <button class="btn btn-primary" onClick={focusInput} style={{ marginTop: '8px' }}>
-                    Focus Input
-                </button>
-            </div>
-
-            <div class="card">
-                <h2>useReducer</h2>
-                <p>Complex state management with actions</p>
-                <div class="count-display">{state.value}</div>
-                <div class="counter-actions">
-                    <button class="btn btn-primary" onClick={() => dispatch({ type: 'increment' })}>
-                        +
-                    </button>
-                    <button class="btn btn-danger" onClick={() => dispatch({ type: 'decrement' })}>
-                        −
-                    </button>
-                    <button class="btn btn-grey" onClick={() => dispatch({ type: 'reset' })}>
-                        Reset
-                    </button>
-                </div>
-            </div>
-
-            <div class="card">
-                <h2>useLocalStorage</h2>
-                <p>Persistent state in localStorage</p>
-                <input 
-                    type="text" 
-                    placeholder="Enter your name"
-                    value={savedName}
-                    onInput={(e) => setSavedName(e.target.value)}
-                />
-                <p style={{ marginTop: '8px' }}>
-                    Saved name: <strong>{savedName || 'Not set'}</strong>
-                </p>
-                <p style={{ color: '#666', fontSize: '14px' }}>
-                    Refresh the page - your name persists!
-                </p>
-            </div>
-
-            <div class="card">
-                <h2>useFetch</h2>
-                <p>Data fetching with loading and error states</p>
-                {loading && <p>Loading...</p>}
-                {error && <p style={{ color: 'red' }}>Error: {error}</p>}
-                {data && (
-                    <div style={{ 
-                        background: '#f0f0f0', 
-                        padding: '12px', 
-                        borderRadius: '8px',
-                        fontFamily: 'monospace',
-                        fontSize: '14px'
-                    }}>
-                        <pre>{JSON.stringify(data, null, 2)}</pre>
-                    </div>
-                )}
-            </div>
-
-            <div class="card">
-                <h2>All Hooks Available</h2>
-                <ul style={{ lineHeight: '1.8', marginLeft: '20px' }}>
-                    <li><code>useState</code> - State management</li>
-                    <li><code>useEffect</code> - Side effects</li>
-                    <li><code>useMemo</code> - Memoized values</li>
-                    <li><code>useCallback</code> - Memoized functions</li>
-                    <li><code>useRef</code> - Mutable refs</li>
-                    <li><code>useReducer</code> - Complex state</li>
-                    <li><code>useLocalStorage</code> - Persistent state</li>
-                    <li><code>useFetch</code> - Data fetching</li>
-                </ul>
-                <p style={{ marginTop: '12px', color: '#666' }}>
-                    Just like React/Next.js! 🎉
-                </p>
-            </div>
-        </div>
-    );
-}

package/template/pages/test.jsx

@@ -1,72 +0,0 @@
-/** @jsx h */
-
-// Auto-registered as "test" route
-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 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>Name:</label>
-                        <input 
-                            type="text" 
-                            value={name}
-                            onInput={(e) => setName(e.target.value)}
-                            placeholder="Enter your name"
-                        />
-                    </div>
-                    
-                    <div>
-                        <label>Email:</label>
-                        <input 
-                            type="email" 
-                            value={email}
-                            onInput={(e) => setEmail(e.target.value)}
-                            placeholder="Enter your email"
-                        />
-                    </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

@@ -1,81 +0,0 @@
-#!/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.');