create-aziz-app 2.0.14 → 2.0.15

package/template/_framework/boot.js

@@ -0,0 +1,36 @@
+// ============================================================
+//  AzizApp Framework Boot
+//  Loads layout.js + page.js for the current route
+//  Handles client-side navigation like Next.js App Router
+// ============================================================
+
+import { h, render, Fragment } from '/_framework/runtime.js';
+import { initHooks, resetHooks } from '/_framework/hooks.js';
+import { router } from '/_framework/router.js';
+
+// Make h and Fragment globally available for JSX
+window.h = h;
+window.Fragment = Fragment;
+
+// Boot the app
+async function boot() {
+    console.log('⚡ AzizApp booting...');
+
+    // Initialize hooks system
+    initHooks();
+
+    // Start the router
+    await router.init();
+
+    console.log('✅ AzizApp ready');
+}
+
+boot().catch(err => {
+    console.error('❌ Boot failed:', err);
+    document.getElementById('root').innerHTML = `
+        <div style="padding:40px;font-family:monospace;color:red">
+            <h2>Boot Error</h2>
+            <pre>${err.message}</pre>
+        </div>
+    `;
+});

package/template/_framework/hooks.js

@@ -0,0 +1,207 @@
+// ============================================================
+//  AzizApp Hooks
+//  React-identical hooks: useState, useEffect, useMemo,
+//  useCallback, useRef, useReducer, useContext
+// ============================================================
+
+let currentFiber = null;   // current component being rendered
+let hookIndex = 0;         // current hook slot
+
+// Called before rendering a component
+export function prepareHooks(fiber) {
+    currentFiber = fiber;
+    hookIndex = 0;
+}
+
+// Called after rendering a component
+export function finishHooks() {
+    currentFiber = null;
+    hookIndex = 0;
+}
+
+// Global reset (called before full page re-render)
+export function resetHooks() {
+    currentFiber = null;
+    hookIndex = 0;
+}
+
+export function initHooks() {
+    // Expose all hooks globally (no import needed in pages)
+    window.useState    = useState;
+    window.useEffect   = useEffect;
+    window.useMemo     = useMemo;
+    window.useCallback = useCallback;
+    window.useRef      = useRef;
+    window.useReducer  = useReducer;
+    window.useContext  = useContext;
+    window.createContext = createContext;
+    window.useLocalStorage = useLocalStorage;
+    window.useFetch    = useFetch;
+    window.resetHooks  = resetHooks;
+    window.prepareHooks = prepareHooks;
+    window.finishHooks  = finishHooks;
+}
+
+// ─── useState ────────────────────────────────────────────────
+export function useState(initialValue) {
+    const fiber = currentFiber;
+    const idx   = hookIndex++;
+
+    if (!fiber) throw new Error('useState called outside component');
+
+    if (fiber.hooks[idx] === undefined) {
+        fiber.hooks[idx] = {
+            value: typeof initialValue === 'function' ? initialValue() : initialValue
+        };
+    }
+
+    const hook = fiber.hooks[idx];
+
+    const setState = (next) => {
+        const nextVal = typeof next === 'function' ? next(hook.value) : next;
+        if (nextVal !== hook.value) {
+            hook.value = nextVal;
+            scheduleRender();
+        }
+    };
+
+    return [hook.value, setState];
+}
+
+// ─── useReducer ──────────────────────────────────────────────
+export function useReducer(reducer, initialState, init) {
+    const [state, setState] = useState(init ? init(initialState) : initialState);
+    const dispatch = (action) => setState(prev => reducer(prev, action));
+    return [state, dispatch];
+}
+
+// ─── useEffect ───────────────────────────────────────────────
+export function useEffect(callback, deps) {
+    const fiber = currentFiber;
+    const idx   = hookIndex++;
+
+    if (!fiber) throw new Error('useEffect called outside component');
+
+    const prev = fiber.hooks[idx];
+    const changed = !prev || !deps || deps.some((d, i) => d !== prev.deps?.[i]);
+
+    if (changed) {
+        // Queue cleanup + effect after render
+        queueMicrotask(() => {
+            if (prev?.cleanup) prev.cleanup();
+            const cleanup = callback();
+            if (fiber.hooks[idx]) {
+                fiber.hooks[idx].cleanup = typeof cleanup === 'function' ? cleanup : undefined;
+            }
+        });
+    }
+
+    fiber.hooks[idx] = { deps, cleanup: prev?.cleanup };
+}
+
+// ─── useMemo ─────────────────────────────────────────────────
+export function useMemo(factory, deps) {
+    const fiber = currentFiber;
+    const idx   = hookIndex++;
+
+    if (!fiber) throw new Error('useMemo called outside component');
+
+    const prev = fiber.hooks[idx];
+    const changed = !prev || deps.some((d, i) => d !== prev.deps?.[i]);
+
+    if (changed) {
+        fiber.hooks[idx] = { value: factory(), deps };
+    }
+
+    return fiber.hooks[idx].value;
+}
+
+// ─── useCallback ─────────────────────────────────────────────
+export function useCallback(fn, deps) {
+    return useMemo(() => fn, deps);
+}
+
+// ─── useRef ──────────────────────────────────────────────────
+export function useRef(initial) {
+    const fiber = currentFiber;
+    const idx   = hookIndex++;
+
+    if (!fiber) throw new Error('useRef called outside component');
+
+    if (!fiber.hooks[idx]) {
+        fiber.hooks[idx] = { current: initial };
+    }
+
+    return fiber.hooks[idx];
+}
+
+// ─── useContext ───────────────────────────────────────────────
+const contexts = new Map();
+
+export function createContext(defaultValue) {
+    const ctx = {
+        _value: defaultValue,
+        Provider({ value, children }) {
+            ctx._value = value;
+            return children;
+        }
+    };
+    return ctx;
+}
+
+export function useContext(ctx) {
+    return ctx._value;
+}
+
+// ─── useLocalStorage ─────────────────────────────────────────
+export function useLocalStorage(key, initial) {
+    const [value, setValue] = useState(() => {
+        try {
+            const stored = localStorage.getItem(key);
+            return stored !== null ? JSON.parse(stored) : initial;
+        } catch { return initial; }
+    });
+
+    const set = (next) => {
+        const val = typeof next === 'function' ? next(value) : next;
+        setValue(val);
+        try { localStorage.setItem(key, JSON.stringify(val)); } catch {}
+    };
+
+    return [value, set];
+}
+
+// ─── useFetch ────────────────────────────────────────────────
+export function useFetch(url, options = {}) {
+    const [data, setData]       = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError]     = useState(null);
+
+    useEffect(() => {
+        let cancelled = false;
+        setLoading(true);
+
+        fetch(url, options)
+            .then(r => { if (!r.ok) throw new Error(`HTTP ${r.status}`); return r.json(); })
+            .then(d  => { if (!cancelled) { setData(d); setLoading(false); } })
+            .catch(e => { if (!cancelled) { setError(e.message); setLoading(false); } });
+
+        return () => { cancelled = true; };
+    }, [url]);
+
+    return { data, loading, error };
+}
+
+// ─── Render scheduler ────────────────────────────────────────
+let renderScheduled = false;
+
+function scheduleRender() {
+    if (renderScheduled) return;
+    renderScheduled = true;
+    requestAnimationFrame(() => {
+        renderScheduled = false;
+        if (typeof window.__rerenderPage === 'function') {
+            window.__rerenderPage();
+        }
+    });
+}

package/template/_framework/router.js

@@ -0,0 +1,279 @@
+// ============================================================
+//  AzizApp Router
+//  File-based routing like Next.js App Router
+//
+//  app/
+//    layout.js          → root layout (wraps everything)
+//    page.js            → /
+//    about/
+//      page.js          → /about
+//      layout.js        → layout for /about and children
+//    blog/
+//      [slug]/
+//        page.js        → /blog/:slug
+// ============================================================
+
+import { h, render } from '/_framework/runtime.js';
+import { prepareHooks, finishHooks, resetHooks } from '/_framework/hooks.js';
+
+// All registered routes (populated by dev server scan)
+const routes = {};
+
+// Current fiber tree for hooks
+const fibers = new Map();
+
+function getFiber(id) {
+    if (!fibers.has(id)) {
+        fibers.set(id, { hooks: [] });
+    }
+    return fibers.get(id);
+}
+
+// Wrap a component so hooks work correctly
+function withHooks(id, Component) {
+    return function WrappedComponent(props) {
+        const fiber = getFiber(id);
+        prepareHooks(fiber);
+        const result = Component(props);
+        finishHooks();
+        return result;
+    };
+}
+
+// Navigate to a path
+export function navigate(path) {
+    history.pushState(null, '', path);
+    router.render();
+}
+
+// Link component (like Next.js <Link>)
+export function Link({ href, children, className, style }) {
+    return h('a', {
+        href,
+        class: className,
+        style,
+        onClick: (e) => {
+            e.preventDefault();
+            navigate(href);
+        }
+    }, ...(Array.isArray(children) ? children : [children]));
+}
+
+// useRouter hook
+export function useRouter() {
+    return {
+        pathname: window.location.pathname,
+        push: navigate,
+        back: () => history.back(),
+        forward: () => history.forward(),
+        params: router.currentParams || {}
+    };
+}
+
+// useParams hook
+export function useParams() {
+    return router.currentParams || {};
+}
+
+// useSearchParams hook
+export function useSearchParams() {
+    const params = new URLSearchParams(window.location.search);
+    return {
+        get: (key) => params.get(key),
+        getAll: (key) => params.getAll(key),
+        has: (key) => params.has(key),
+        toString: () => params.toString()
+    };
+}
+
+// Match a route pattern to a pathname
+// Supports: /about, /blog/[slug], /blog/[...slug]
+function matchRoute(pattern, pathname) {
+    const patternParts = pattern.split('/').filter(Boolean);
+    const pathParts    = pathname.split('/').filter(Boolean);
+    const params = {};
+
+    // Catch-all: /blog/[...slug]
+    const catchAll = patternParts.findIndex(p => p.startsWith('[...'));
+    if (catchAll !== -1) {
+        if (pathParts.length < catchAll) return null;
+        const paramName = patternParts[catchAll].slice(4, -1);
+        params[paramName] = pathParts.slice(catchAll);
+        return params;
+    }
+
+    if (patternParts.length !== pathParts.length) return null;
+
+    for (let i = 0; i < patternParts.length; i++) {
+        if (patternParts[i].startsWith('[') && patternParts[i].endsWith(']')) {
+            // Dynamic segment
+            params[patternParts[i].slice(1, -1)] = pathParts[i];
+        } else if (patternParts[i] !== pathParts[i]) {
+            return null;
+        }
+    }
+
+    return params;
+}
+
+// Find the best matching route for a pathname
+function resolveRoute(pathname) {
+    // Exact match first
+    if (routes[pathname]) {
+        return { route: routes[pathname], params: {} };
+    }
+
+    // Pattern match
+    for (const pattern in routes) {
+        if (pattern.includes('[')) {
+            const params = matchRoute(pattern, pathname);
+            if (params !== null) {
+                return { route: routes[pattern], params };
+            }
+        }
+    }
+
+    return null;
+}
+
+// Collect layout chain for a path
+// /about/team → [app/layout.js, app/about/layout.js]
+function getLayoutChain(pathname) {
+    return router.layouts.filter(({ path }) => {
+        if (path === '/') return true;
+        return pathname === path || pathname.startsWith(path + '/');
+    }).sort((a, b) => a.path.length - b.path.length);
+}
+
+export const router = {
+    layouts: [],
+    currentParams: {},
+
+    // Register a route (called by dev server scan result)
+    register(pathname, module) {
+        routes[pathname] = module;
+    },
+
+    // Register a layout
+    registerLayout(pathname, module) {
+        this.layouts.push({ path: pathname, module });
+    },
+
+    async init() {
+        // Expose globals
+        window.navigate   = navigate;
+        window.useRouter  = useRouter;
+        window.useParams  = useParams;
+        window.useSearchParams = useSearchParams;
+        window.Link       = Link;
+        window.__rerenderPage = () => this.render();
+
+        // Load routes from server
+        await this.loadRoutes();
+
+        // Handle browser back/forward
+        window.addEventListener('popstate', () => this.render());
+
+        // Initial render
+        await this.render();
+    },
+
+    async loadRoutes() {
+        try {
+            // Dev server exposes the route manifest
+            const res = await fetch('/_framework/routes.json');
+            const manifest = await res.json();
+
+            // Dynamically import each page and layout
+            for (const { pathname, filePath, type } of manifest) {
+                try {
+                    const mod = await import(filePath + '?t=' + Date.now());
+                    if (type === 'page') {
+                        this.register(pathname, mod);
+                    } else if (type === 'layout') {
+                        this.registerLayout(pathname, mod);
+                    }
+                } catch (err) {
+                    console.error(`Failed to load ${filePath}:`, err);
+                }
+            }
+
+            console.log(`📄 Loaded ${Object.keys(routes).length} routes`);
+        } catch (err) {
+            console.error('Failed to load routes:', err);
+        }
+    },
+
+    async render() {
+        const pathname = window.location.pathname;
+        const root = document.getElementById('root');
+
+        // Find matching route
+        const match = resolveRoute(pathname);
+
+        if (!match) {
+            root.innerHTML = '';
+            const notFound = h('div', { style: { padding: '40px', textAlign: 'center' } },
+                h('h1', { style: { fontSize: '80px', color: '#61dafb' } }, '404'),
+                h('p', {}, 'Page not found'),
+                h('button', {
+                    style: { padding: '10px 24px', cursor: 'pointer' },
+                    onClick: () => navigate('/')
+                }, 'Go Home')
+            );
+            root.appendChild(notFound);
+            return;
+        }
+
+        this.currentParams = match.params;
+
+        const { route } = match;
+        const PageComponent = route.default;
+
+        if (!PageComponent) {
+            console.error(`Route has no default export: ${pathname}`);
+            return;
+        }
+
+        // Get layout chain
+        const layoutChain = getLayoutChain(pathname);
+
+        // Wrap page in layouts (innermost first, outermost last)
+        let content = () => {
+            const fiber = getFiber('page:' + pathname);
+            prepareHooks(fiber);
+            const result = PageComponent({});
+            finishHooks();
+            return result;
+        };
+
+        // Apply layouts from innermost to outermost
+        for (let i = layoutChain.length - 1; i >= 0; i--) {
+            const { module: layoutMod, path: layoutPath } = layoutChain[i];
+            const LayoutComponent = layoutMod.default;
+            if (!LayoutComponent) continue;
+
+            const innerContent = content;
+            content = () => {
+                const fiber = getFiber('layout:' + layoutPath);
+                prepareHooks(fiber);
+                const result = LayoutComponent({ children: innerContent() });
+                finishHooks();
+                return result;
+            };
+        }
+
+        // Render
+        root.innerHTML = '';
+        const tree = content();
+        if (Array.isArray(tree)) {
+            tree.forEach(node => {
+                if (node instanceof Node) root.appendChild(node);
+            });
+        } else if (tree instanceof Node) {
+            root.appendChild(tree);
+        }
+    }
+};
+
+export default router;

package/template/_framework/runtime.js

@@ -0,0 +1,86 @@
+// ============================================================
+//  AzizApp Runtime
+//  h() — JSX factory (like React.createElement)
+//  render() — mount component tree to DOM
+// ============================================================
+
+export const Fragment = Symbol('Fragment');
+
+// JSX factory — Babel compiles <div> → h("div", props, ...children)
+export function h(tag, props, ...children) {
+    // Fragment: just return children
+    if (tag === Fragment) {
+        return flatChildren(children);
+    }
+
+    // Component function
+    if (typeof tag === 'function') {
+        return tag({ ...(props || {}), children: flatChildren(children) });
+    }
+
+    const el = document.createElement(tag);
+
+    if (props) {
+        for (const key in props) {
+            if (key === 'children') continue;
+
+            if (key === 'ref' && props[key] && typeof props[key] === 'object') {
+                // useRef support
+                props[key].current = el;
+            } else if (key.startsWith('on')) {
+                // onClick → click
+                el.addEventListener(key.slice(2).toLowerCase(), props[key]);
+            } else if (key === 'className' || key === 'class') {
+                el.className = props[key];
+            } else if (key === 'htmlFor') {
+                el.setAttribute('for', props[key]);
+            } else if (key === 'style' && typeof props[key] === 'object') {
+                Object.assign(el.style, props[key]);
+            } else if (key === 'dangerouslySetInnerHTML') {
+                el.innerHTML = props[key].__html;
+            } else if (key === 'value' && (tag === 'input' || tag === 'textarea' || tag === 'select')) {
+                el.value = props[key];
+            } else if (key === 'checked' && tag === 'input') {
+                el.checked = props[key];
+            } else if (key === 'disabled') {
+                if (props[key]) el.setAttribute('disabled', '');
+            } else if (key === 'key') {
+                // ignore reconciliation key for now
+            } else {
+                el.setAttribute(key, props[key]);
+            }
+        }
+    }
+
+    appendChildren(el, flatChildren(children));
+    return el;
+}
+
+function flatChildren(children) {
+    return children.flat(Infinity).filter(c => c !== null && c !== undefined && c !== false && c !== true);
+}
+
+function appendChildren(parent, children) {
+    for (const child of children) {
+        if (child instanceof Node) {
+            parent.appendChild(child);
+        } else if (Array.isArray(child)) {
+            appendChildren(parent, child);
+        } else {
+            parent.appendChild(document.createTextNode(String(child)));
+        }
+    }
+}
+
+// Mount a component tree into a DOM element
+export function render(component, container) {
+    container.innerHTML = '';
+    const result = typeof component === 'function' ? component() : component;
+    if (Array.isArray(result)) {
+        appendChildren(container, result);
+    } else if (result instanceof Node) {
+        container.appendChild(result);
+    }
+}
+
+export default { h, render, Fragment };

package/template/api/hello.js

@@ -1,26 +1,17 @@
 // API Route: /api/hello
-// Simple Next.js-style API route
+// Next.js App Router style
 
-export default async function handler(req, res) {
-    const { method, query } = req;
+const { NextResponse } = require('../modules/next-response');
 
-    if (method !== 'GET') {
-        res.setHeader('Allow', ['GET']);
-        return res.status(405).json({ 
-            error: 'Method not allowed',
-            message: `Method ${method} is not allowed. Use GET instead.`
-        });
-    }
-
-    const name = query.name || 'World';
+async function GET(request) {
+    const { searchParams } = new URL(request.url);
+    const name = searchParams.get('name') || 'World';
     
-    return res.status(200).json({
+    return NextResponse.json({
         message: `Hello, ${name}!`,
         timestamp: new Date().toISOString(),
-        method: method,
-        query: query
+        method: request.method
     });
 }
 
-// CommonJS export for Node.js compatibility
-module.exports = handler;
+module.exports = { GET };