create-aziz-app 2.0.11 → 2.0.13

package/template/modules/state.js

@@ -1,54 +1,248 @@
 /** @jsx h */
 
 // ============================================================
-//  STATE MANAGEMENT SYSTEM
-//  A simple, reactive state management system
+//  STATE MANAGEMENT
+//  React-like hooks system (useState, useEffect, etc.)
+//  Exactly like React/Next.js!
 // ============================================================
 
-// Component state storage - keyed by component instance
-const componentStates = new Map();
 let currentComponent = null;
-let hookIndex = 0;
+let currentHookIndex = 0;
+const componentStates = new Map();
+
+// Get or create state for current component
+function getComponentState() {
+    if (!currentComponent) {
+        currentComponent = { hooks: [] };
+    }
+    return currentComponent;
+}
 
-// Create a hook-like state for components
+// useState - Exactly like React!
 function useState(initialValue) {
-    // Create a unique key for this component and hook position
-    const componentKey = currentComponent || 'global';
-    const currentHookIndex = hookIndex++;
-    const stateKey = `${componentKey}_${currentHookIndex}`;
-    
-    // Initialize if not exists
-    if (!componentStates.has(stateKey)) {
-        componentStates.set(stateKey, initialValue);
+    const component = getComponentState();
+    const hookIndex = currentHookIndex++;
+
+    // Initialize state if first render
+    if (component.hooks[hookIndex] === undefined) {
+        component.hooks[hookIndex] = {
+            value: typeof initialValue === 'function' ? initialValue() : initialValue
+        };
     }
+
+    const hook = component.hooks[hookIndex];
+
+    const setState = (newValue) => {
+        const nextValue = typeof newValue === 'function' 
+            ? newValue(hook.value) 
+            : newValue;
+        
+        if (hook.value !== nextValue) {
+            hook.value = nextValue;
+            // Trigger re-render
+            if (typeof renderPage === 'function') {
+                renderPage();
+            }
+        }
+    };
+
+    return [hook.value, setState];
+}
+
+// useEffect - Exactly like React!
+function useEffect(callback, dependencies) {
+    const component = getComponentState();
+    const hookIndex = currentHookIndex++;
+
+    const oldDeps = component.hooks[hookIndex]?.deps;
     
-    // Get current value
-    const currentValue = componentStates.get(stateKey);
-    
-    // Return getter and setter
-    const setValue = (newValue) => {
-        componentStates.set(stateKey, newValue);
-        // Reset hook index before re-render
-        hookIndex = 0;
-        // Trigger re-render
-        if (typeof renderPage === 'function') {
-            renderPage();
+    let hasChanged = true;
+    if (oldDeps) {
+        hasChanged = dependencies.some((dep, i) => dep !== oldDeps[i]);
+    }
+
+    if (hasChanged) {
+        // Clean up previous effect
+        if (component.hooks[hookIndex]?.cleanup) {
+            component.hooks[hookIndex].cleanup();
         }
+
+        // Run effect after render
+        setTimeout(() => {
+            const cleanup = callback();
+            if (component.hooks[hookIndex]) {
+                component.hooks[hookIndex].cleanup = cleanup;
+            }
+        }, 0);
+    }
+
+    component.hooks[hookIndex] = {
+        deps: dependencies,
+        cleanup: component.hooks[hookIndex]?.cleanup
     };
+}
+
+// useMemo - Exactly like React!
+function useMemo(factory, dependencies) {
+    const component = getComponentState();
+    const hookIndex = currentHookIndex++;
+
+    const oldDeps = component.hooks[hookIndex]?.deps;
     
-    return [currentValue, setValue];
+    let hasChanged = true;
+    if (oldDeps) {
+        hasChanged = dependencies.some((dep, i) => dep !== oldDeps[i]);
+    }
+
+    if (hasChanged || !component.hooks[hookIndex]) {
+        const value = factory();
+        component.hooks[hookIndex] = {
+            value,
+            deps: dependencies
+        };
+    }
+
+    return component.hooks[hookIndex].value;
+}
+
+// useCallback - Exactly like React!
+function useCallback(callback, dependencies) {
+    return useMemo(() => callback, dependencies);
 }
 
-// Reset hook index before each render
+// useRef - Exactly like React!
+function useRef(initialValue) {
+    const component = getComponentState();
+    const hookIndex = currentHookIndex++;
+
+    if (!component.hooks[hookIndex]) {
+        component.hooks[hookIndex] = {
+            current: initialValue
+        };
+    }
+
+    return component.hooks[hookIndex];
+}
+
+// useReducer - Exactly like React!
+function useReducer(reducer, initialState, init) {
+    const [state, setState] = useState(
+        init ? init(initialState) : initialState
+    );
+
+    const dispatch = (action) => {
+        setState(prevState => reducer(prevState, action));
+    };
+
+    return [state, dispatch];
+}
+
+// Custom hook: useLocalStorage
+function useLocalStorage(key, initialValue) {
+    const [storedValue, setStoredValue] = useState(() => {
+        try {
+            const item = window.localStorage.getItem(key);
+            return item ? JSON.parse(item) : initialValue;
+        } catch (error) {
+            console.error(error);
+            return initialValue;
+        }
+    });
+
+    const setValue = (value) => {
+        try {
+            const valueToStore = value instanceof Function ? value(storedValue) : value;
+            setStoredValue(valueToStore);
+            window.localStorage.setItem(key, JSON.stringify(valueToStore));
+        } catch (error) {
+            console.error(error);
+        }
+    };
+
+    return [storedValue, setValue];
+}
+
+// Custom hook: useFetch
+function useFetch(url, options = {}) {
+    const [data, setData] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+
+    useEffect(() => {
+        let cancelled = false;
+
+        const fetchData = async () => {
+            try {
+                setLoading(true);
+                const response = await fetch(url, options);
+                
+                if (!response.ok) {
+                    throw new Error(`HTTP error! status: ${response.status}`);
+                }
+                
+                const json = await response.json();
+                
+                if (!cancelled) {
+                    setData(json);
+                    setError(null);
+                }
+            } catch (e) {
+                if (!cancelled) {
+                    setError(e.message);
+                    setData(null);
+                }
+            } finally {
+                if (!cancelled) {
+                    setLoading(false);
+                }
+            }
+        };
+
+        fetchData();
+
+        return () => {
+            cancelled = true;
+        };
+    }, [url, JSON.stringify(options)]);
+
+    return { data, loading, error };
+}
+
+// Reset hooks before each render
 function resetHooks() {
-    hookIndex = 0;
+    currentHookIndex = 0;
+}
+
+// Initialize component state
+function initComponent() {
+    currentComponent = { hooks: [] };
+    currentHookIndex = 0;
 }
 
-// Export to global scope - make it available like React
+// Export to global scope (like React)
 window.useState = useState;
+window.useEffect = useEffect;
+window.useMemo = useMemo;
+window.useCallback = useCallback;
+window.useRef = useRef;
+window.useReducer = useReducer;
+window.useLocalStorage = useLocalStorage;
+window.useFetch = useFetch;
 window.resetHooks = resetHooks;
-// Also make it available without window prefix
+window.initComponent = initComponent;
+
+// Also make available without window prefix
 if (typeof globalThis !== 'undefined') {
     globalThis.useState = useState;
+    globalThis.useEffect = useEffect;
+    globalThis.useMemo = useMemo;
+    globalThis.useCallback = useCallback;
+    globalThis.useRef = useRef;
+    globalThis.useReducer = useReducer;
+    globalThis.useLocalStorage = useLocalStorage;
+    globalThis.useFetch = useFetch;
     globalThis.resetHooks = resetHooks;
-}
+    globalThis.initComponent = initComponent;
+}
+
+console.log('✅ React-like hooks loaded: useState, useEffect, useMemo, useCallback, useRef, useReducer');

package/template/pages/HooksDemo.jsx

@@ -0,0 +1,194 @@
+/** @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/scripts/dev-server.js

@@ -7,9 +7,152 @@ const { exec } = require('child_process');
 
 const PORT = process.env.PORT || 3000;
 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 module = require(filePath);
+            
+            // Support both default export and module.exports
+            const handler = module.default || module;
+            
+            if (typeof handler === 'function') {
+                apiHandlers[routeName] = handler;
+                console.log(`   ✅ /api/${routeName}`);
+            } else {
+                console.log(`   ⚠️  /api/${routeName} - No handler function exported`);
+            }
+        } 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...');
@@ -38,7 +181,24 @@ function notifyClients() {
 }
 
 // Create HTTP server
-const server = http.createServer((req, res) => {
+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'
+        });
+        res.end();
+        return;
+    }
+
     // Strip query parameters for file serving (cache busting)
     let filePath = '.' + req.url.split('?')[0];
     if (filePath === './') {
@@ -170,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(() => {
@@ -190,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 => {