create-aziz-app 2.0.12 → 2.0.14

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

@@ -30,17 +30,34 @@ function loadApiRoutes() {
             // Clear require cache to allow hot reload
             delete require.cache[require.resolve(filePath)];
             
-            // Load the API handler
-            const handler = require(filePath);
+            // Load the API module
+            const module = 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}`);
+            // Support both styles:
+            // 1. Default export function (old style)
+            // 2. Named exports: GET, POST, PUT, DELETE (new Next.js App Router style)
+            
+            if (module.GET || module.POST || module.PUT || module.DELETE || module.PATCH) {
+                // New style: Named exports
+                const methods = {};
+                if (module.GET) methods.GET = module.GET;
+                if (module.POST) methods.POST = module.POST;
+                if (module.PUT) methods.PUT = module.PUT;
+                if (module.DELETE) methods.DELETE = module.DELETE;
+                if (module.PATCH) methods.PATCH = module.PATCH;
+                
+                apiHandlers[routeName] = methods;
+                console.log(`   ✅ /api/${routeName} [${Object.keys(methods).join(', ')}]`);
             } else {
-                console.log(`   ⚠️  /api/${routeName} - No default export`);
+                // Old style: Default export
+                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}`);
@@ -49,6 +66,7 @@ function loadApiRoutes() {
     
     console.log('');
 }
+}
 
 // Parse request body
 function parseBody(req) {
@@ -103,48 +121,91 @@ async function handleApiRequest(req, res) {
         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, {
+        // Check if handler is a function (old style) or object with HTTP methods (new style)
+        let result;
+        
+        if (typeof handler === 'function') {
+            // Old style: default export function
+            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;
+                }
+            };
+
+            await handler(apiReq, apiRes);
+        } else if (typeof handler === 'object') {
+            // New style: Named exports (GET, POST, PUT, DELETE)
+            const methodHandler = handler[req.method];
+            
+            if (!methodHandler) {
+                res.writeHead(405, { 
                     '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
+                    'Allow': Object.keys(handler).join(', ')
                 });
-                res.end(data);
-                return this;
-            },
-            setHeader(key, value) {
-                this.headers[key] = value;
-                return this;
+                res.end(JSON.stringify({ 
+                    error: 'Method not allowed',
+                    allowedMethods: Object.keys(handler)
+                }));
+                return;
             }
-        };
 
-        // Call the handler
-        await handler(apiReq, apiRes);
+            // Create Next.js-style request object
+            const request = {
+                method: req.method,
+                headers: req.headers,
+                url: `http://localhost:${PORT}${req.url}`,
+                json: async () => body,
+                text: async () => typeof body === 'string' ? body : JSON.stringify(body)
+            };
+
+            // Call the handler
+            result = await methodHandler(request);
+
+            // Handle NextResponse
+            if (result && result.body !== undefined) {
+                const statusCode = result.status || 200;
+                const headers = {
+                    'Access-Control-Allow-Origin': '*',
+                    ...Object.fromEntries(result.headers || [])
+                };
+                
+                res.writeHead(statusCode, headers);
+                res.end(result.body);
+            }
+        }
         
     } catch (error) {
         console.error(`❌ API Error on /api/${routeName}:`, error);