create-aziz-app 2.0.15 → 3.0.0

package/template/modules/auto-import.js

@@ -1,130 +0,0 @@
-/** @jsx h */
-
-// ============================================================
-//  AUTO-IMPORT SYSTEM
-//  Automatically discovers and loads all components, pages, and API routes
-// ============================================================
-
-// Track loaded scripts
-const loadedScripts = new Set();
-let scriptsToLoad = 0;
-let scriptsLoaded = 0;
-
-// Get configuration from app.config.js
-function getConfig() {
-    return window.APP_CONFIG || {
-        apiRoutes: [],
-        components: [],
-        pages: []
-    };
-}
-
-// Load a script dynamically
-function loadScript(src) {
-    return new Promise((resolve, reject) => {
-        if (loadedScripts.has(src)) {
-            resolve();
-            return;
-        }
-
-        const script = document.createElement('script');
-        script.type = 'text/babel';
-        script.src = src;
-        
-        script.onload = () => {
-            loadedScripts.add(src);
-            scriptsLoaded++;
-            console.log(`✓ Loaded: ${src} (${scriptsLoaded}/${scriptsToLoad})`);
-            resolve();
-        };
-        
-        script.onerror = () => {
-            console.error(`✗ Failed to load: ${src}`);
-            scriptsLoaded++;
-            reject(new Error(`Failed to load ${src}`));
-        };
-        
-        document.body.appendChild(script);
-    });
-}
-
-// Load all scripts in order
-async function autoLoadScripts() {
-    console.log('🚀 Auto-import starting...');
-    
-    const config = getConfig();
-    
-    // Calculate total scripts to load
-    scriptsToLoad = 
-        config.apiRoutes.length +
-        config.components.length +
-        config.pages.length;
-    
-    if (scriptsToLoad === 0) {
-        console.warn('⚠️ No files configured in app.config.js');
-        if (typeof startApp === 'function') {
-            startApp();
-        }
-        return;
-    }
-    
-    try {
-        // Load API routes first
-        if (config.apiRoutes.length > 0) {
-            console.log('📡 Loading API routes...');
-            for (const route of config.apiRoutes) {
-                await loadScript(route);
-            }
-        }
-        
-        // Load components
-        if (config.components.length > 0) {
-            console.log('🧩 Loading components...');
-            for (const component of config.components) {
-                await loadScript(component);
-            }
-        }
-        
-        // Load pages
-        if (config.pages.length > 0) {
-            console.log('📄 Loading pages...');
-            for (const page of config.pages) {
-                await loadScript(page);
-            }
-        }
-        
-        console.log('✅ Auto-import complete!');
-        
-        // Start the app after everything is loaded
-        if (typeof startApp === 'function') {
-            console.log('🎉 Starting app...');
-            startApp();
-        } else {
-            console.error('❌ startApp function not found!');
-        }
-        
-    } catch (error) {
-        console.error('❌ Auto-import failed:', error);
-    }
-}
-
-// Export to global scope
-window.autoLoadScripts = autoLoadScripts;
-
-// Start auto-loading when this script loads
-function startAutoImport() {
-    // Small delay to ensure config is loaded
-    if (!window.APP_CONFIG) {
-        console.warn('⚠️ APP_CONFIG not found, retrying...');
-        setTimeout(startAutoImport, 50);
-        return;
-    }
-    
-    if (document.readyState === 'loading') {
-        document.addEventListener('DOMContentLoaded', autoLoadScripts);
-    } else {
-        autoLoadScripts();
-    }
-}
-
-startAutoImport();

package/template/modules/router.js

@@ -1,218 +0,0 @@
-/** @jsx h */
-
-// ============================================================
-//  h() — our createElement
-//  Babel compiles <div class="x"> → h("div", { class: "x" })
-//  This builds a real DOM element from that
-// ============================================================
-function h(tag, props, ...children) {
-    // If it's a component function, call it with its props
-    if (typeof tag === "function") {
-        return tag({ ...props, children });
-    }
-
-    const el = document.createElement(tag);
-
-    if (props) {
-        for (let key in props) {
-            if (key === "children") continue;
-
-            if (key.startsWith("on")) {
-                // onClick → "click" event listener
-                el.addEventListener(key.slice(2).toLowerCase(), props[key]);
-            } else if (key === "className") {
-                el.className = props[key];
-            } else if (key === "style" && typeof props[key] === "object") {
-                Object.assign(el.style, props[key]);
-            } else if (key === "value" && (tag === "input" || tag === "textarea")) {
-                // Set value property directly for inputs/textareas
-                el.value = props[key];
-            } else {
-                el.setAttribute(key, props[key]);
-            }
-        }
-    }
-
-    // Flatten and append children
-    const flat = children.flat(Infinity);
-    for (let child of flat) {
-        if (child === null || child === undefined || child === false) continue;
-        if (typeof child === "string" || typeof child === "number") {
-            el.appendChild(document.createTextNode(child));
-        } else if (child instanceof Node) {
-            el.appendChild(child);
-        }
-    }
-
-    return el;
-}
-
-
-// ============================================================
-//  ROUTER
-//  File-based routing using the URL hash
-//  "#/"        → Home page
-//  "#/about"   → About page
-//  "#/contact" → Contact page
-//
-//  To add a new page:
-//  1. Create pages/YourPage.jsx with a function like AboutPage()
-//  2. The page will automatically be registered!
-//  3. Optional: Call registerPage("about", AboutPage) for custom route names
-// ============================================================
-const routes = {};
-
-// registerPage("about", AboutPage) — called by each page file
-// Now optional! Pages auto-register based on function name
-function registerPage(path, component) {
-    routes[path] = component;
-}
-
-// Auto-register pages from global scope
-// Looks for functions ending with "Page" (e.g., AboutPage, HomePage)
-function autoRegisterPages() {
-    for (let key in window) {
-        if (key.endsWith('Page') && typeof window[key] === 'function') {
-            // Convert "AboutPage" → "about", "HomePage" → "home"
-            const routeName = key.replace('Page', '').toLowerCase();
-            
-            // Only register if not already registered
-            if (!routes[routeName]) {
-                routes[routeName] = window[key];
-                console.log(`📄 Auto-registered: ${routeName} → ${key}()`);
-            }
-        }
-    }
-}
-
-function getCurrentPath() {
-    // Remove the "#/" prefix → "about", "contact", or "" for home
-    return window.location.hash.replace("#/", "") || "home";
-}
-
-function navigate(path) {
-    window.location.hash = "/" + path;
-}
-
-
-// ============================================================
-//  STATE MANAGEMENT
-//  Simple global state — update it and the page re-renders
-// ============================================================
-let state = {
-    count: 0
-};
-
-function setState(newState) {
-    // Merge new values into state
-    state = { ...state, ...newState };
-    renderPage(); // re-render when state changes
-}
-
-
-// ============================================================
-//  RENDER ENGINE
-// ============================================================
-function renderPage() {
-    // Reset hooks before rendering
-    if (typeof resetHooks === 'function') {
-        resetHooks();
-    }
-    
-    const path = getCurrentPath();
-    const root = document.getElementById("root");
-    
-    // Save focus state before re-render
-    const activeElement = document.activeElement;
-    const shouldRestoreFocus = activeElement && (activeElement.tagName === 'INPUT' || activeElement.tagName === 'TEXTAREA');
-    const focusInfo = shouldRestoreFocus ? {
-        type: activeElement.type,
-        placeholder: activeElement.placeholder,
-        value: activeElement.value,
-        selectionStart: activeElement.selectionStart,
-        selectionEnd: activeElement.selectionEnd
-    } : null;
-    
-    root.innerHTML = "";
-
-    const PageComponent = routes[path] || NotFoundPage;
-    root.appendChild(PageComponent());
-    
-    // Restore focus after re-render (use setTimeout to ensure DOM is ready)
-    if (focusInfo) {
-        setTimeout(() => {
-            const inputs = root.querySelectorAll('input, textarea');
-            for (let input of inputs) {
-                // Match by type and placeholder for unique identification
-                if (input.type === focusInfo.type && 
-                    input.placeholder === focusInfo.placeholder) {
-                    input.focus();
-                    // Restore cursor position
-                    if (focusInfo.selectionStart !== null && focusInfo.selectionEnd !== null) {
-                        input.setSelectionRange(focusInfo.selectionStart, focusInfo.selectionEnd);
-                    }
-                    break;
-                }
-            }
-        }, 0);
-    }
-}
-
-function renderShell() {
-    // Render navbar and footer (they don't change between pages)
-    const navbar  = document.getElementById("navbar");
-    const footer  = document.getElementById("footer");
-    navbar.innerHTML  = "";
-    footer.innerHTML  = "";
-    navbar.appendChild(Navbar());
-    footer.appendChild(Footer());
-}
-
-// Re-render shell when route changes (for navbar active state)
-function updateShell() {
-    const navbar = document.getElementById("navbar");
-    navbar.innerHTML = "";
-    navbar.appendChild(Navbar());
-}
-
-// 404 page — shown when no route matches
-function NotFoundPage() {
-    return (
-        <div class="not-found">
-            <h1>404</h1>
-            <p>Oops! The page you're looking for doesn't exist.</p>
-            <button class="btn btn-primary" onClick={() => navigate("home")}>
-                Go Home
-            </button>
-        </div>
-    );
-}
-
-
-// ============================================================
-//  START
-//  Called once after all scripts are loaded
-// ============================================================
-function startApp() {
-    // Auto-register any pages that weren't manually registered
-    autoRegisterPages();
-    
-    renderShell();
-    renderPage();
-
-    // Re-render the page and navbar whenever the hash changes (back/forward navigation)
-    window.addEventListener("hashchange", () => {
-        updateShell(); // Update navbar active state
-        renderPage();
-    });
-}
-
-// Export to global scope
-window.h = h;
-window.registerPage = registerPage;
-window.getCurrentPath = getCurrentPath;
-window.navigate = navigate;
-window.state = state;
-window.setState = setState;
-window.renderPage = renderPage;
-window.startApp = startApp;

package/template/modules/state.js

@@ -1,248 +0,0 @@
-/** @jsx h */
-
-// ============================================================
-//  STATE MANAGEMENT
-//  React-like hooks system (useState, useEffect, etc.)
-//  Exactly like React/Next.js!
-// ============================================================
-
-let currentComponent = null;
-let currentHookIndex = 0;
-const componentStates = new Map();
-
-// Get or create state for current component
-function getComponentState() {
-    if (!currentComponent) {
-        currentComponent = { hooks: [] };
-    }
-    return currentComponent;
-}
-
-// useState - Exactly like React!
-function useState(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;
-    
-    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;
-    
-    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);
-}
-
-// 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() {
-    currentHookIndex = 0;
-}
-
-// Initialize component state
-function initComponent() {
-    currentComponent = { hooks: [] };
-    currentHookIndex = 0;
-}
-
-// 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;
-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/package-lock.json

@@ -1,13 +0,0 @@
-{
-  "name": "aziz-app",
-  "version": "1.0.2",
-  "lockfileVersion": 3,
-  "requires": true,
-  "packages": {
-    "": {
-      "name": "aziz-app",
-      "version": "1.0.2",
-      "license": "ISC"
-    }
-  }
-}

package/template/pages/About.jsx

@@ -1,48 +0,0 @@
-/** @jsx h */
-
-// Optional: You can still manually register if you want a custom route name
-// registerPage("about", AboutPage);
-
-// Or just define the function and it auto-registers as "about"
-function AboutPage() {
-    return (
-        <div>
-            <h1>About 📖</h1>
-
-            <div class="card">
-                <h2>What is this?</h2>
-                <p>
-                    This app is built with <strong>create-aziz-app</strong> — a lightweight
-                    vanilla JS framework with JSX support and file-based routing.
-                    No React, no Vite, no dependencies. Just plain JavaScript + Babel.
-                </p>
-            </div>
-
-            <div class="card">
-                <h2>How routing works</h2>
-                <p>
-                    The URL hash controls which page is shown.
-                    Changing <strong>#/about</strong> to <strong>#/contact</strong>
-                    loads the Contact page — no page refresh needed.
-                </p>
-                <button class="btn btn-primary" onClick={() => navigate("contact")}>
-                    Go to Contact →
-                </button>
-            </div>
-
-            <div class="card">
-                <h2>✨ Auto-Registration</h2>
-                <p>
-                    This page works without calling <code>registerPage()</code>!
-                    Just name your function <code>YourNamePage()</code> and it automatically
-                    becomes a route.
-                </p>
-                <ul style={{ lineHeight: '1.8', marginLeft: '20px' }}>
-                    <li><code>HomePage()</code> → <code>#/home</code></li>
-                    <li><code>AboutPage()</code> → <code>#/about</code></li>
-                    <li><code>ContactPage()</code> → <code>#/contact</code></li>
-                </ul>
-            </div>
-        </div>
-    );
-}