create-aziz-app 1.0.3 → 2.0.2

package/template/modules/README.md

@@ -0,0 +1,129 @@
+# Modules Folder
+
+This folder contains the core system modules that power your application.
+
+## Core Modules
+
+### 📦 router.js
+The main application engine containing:
+- **`h()` function** - JSX createElement (converts JSX to DOM elements)
+- **Router system** - File-based routing with hash navigation
+- **`registerPage()`** - Register page components
+- **`navigate()`** - Navigate between pages
+- **`renderPage()`** - Render engine with focus preservation
+- **Global state** - Basic global state management
+
+### 🔄 state.js
+State management system:
+- **`useState(initialValue)`** - React-like hooks for local component state
+- **Hook system** - Manages state across re-renders
+- **`resetHooks()`** - Resets hook index before each render
+
+### 🌐 api.js
+API route system (Next.js-like):
+- **`registerApiRoute(path, handler)`** - Register API endpoints
+- **`fetchApi(path, options)`** - Fetch-like API for making requests
+- **Request/Response objects** - Express-like req/res handling
+- **Mock API system** - Client-side API simulation
+
+## How It Works
+
+### 1. Router System
+```javascript
+// Register a page
+registerPage("home", HomePage);
+
+// Navigate programmatically
+navigate("about");
+
+// Get current path
+const path = getCurrentPath(); // returns "home", "about", etc.
+```
+
+### 2. State Management
+```javascript
+// Use state in components
+const [count, setCount] = useState(0);
+const [name, setName] = useState('');
+
+// Update state
+setCount(count + 1);
+setName('New Name');
+```
+
+### 3. API Routes
+```javascript
+// Register an API route
+registerApiRoute('myroute', async (req, res) => {
+    return res.status(200).json({ data: 'Hello!' });
+});
+
+// Call from components
+const response = await fetchApi('/api/myroute');
+const data = await response.json();
+```
+
+## Module Loading Order
+
+The modules must be loaded in this order (see `app.html`):
+
+1. **router.js** - Core engine and routing
+2. **state.js** - State management
+3. **api.js** - API system
+4. **API routes** - Your API endpoints
+5. **Components** - Reusable UI components
+6. **Pages** - Page components
+7. **Start app** - Call `startApp()`
+
+## Extending the System
+
+### Add New Core Features
+
+Create new modules in this folder for additional core functionality:
+
+```javascript
+// modules/auth.js
+function login(username, password) {
+    // Authentication logic
+}
+
+function logout() {
+    // Logout logic
+}
+
+window.auth = { login, logout };
+```
+
+Then load it in `app.html`:
+```html
+<script type="text/babel" src="modules/auth.js"></script>
+```
+
+### Module Best Practices
+
+1. **Export to global scope** - Use `window.functionName` or `globalThis.functionName`
+2. **Keep modules focused** - Each module should have a single responsibility
+3. **Document your modules** - Add comments explaining what each function does
+4. **Load order matters** - Ensure dependencies are loaded first
+
+## File Structure
+
+```
+template/
+├── modules/           # Core system modules (you are here)
+│   ├── router.js     # Routing and rendering engine
+│   ├── state.js      # State management
+│   ├── api.js        # API route system
+│   └── README.md     # This file
+├── api/              # API route handlers
+├── components/       # Reusable UI components
+├── pages/            # Page components
+└── app.html          # Main HTML file
+```
+
+## Notes
+
+- These modules are loaded via Babel standalone for JSX support
+- All modules use the `/** @jsx h */` pragma to use the custom `h()` function
+- The system is designed to be simple and easy to understand
+- You can replace any module with your own implementation

package/template/modules/api.js

@@ -0,0 +1,148 @@
+/** @jsx h */
+
+// ============================================================
+//  API ROUTE SYSTEM
+//  Next.js-like API routes for client-side
+//  Can be easily replaced with real backend calls
+// ============================================================
+
+// API routes registry
+const apiRoutes = {};
+
+// Register an API route
+function registerApiRoute(path, handler) {
+    apiRoutes[path] = handler;
+    console.log(`Registered API route: /api/${path}`);
+}
+
+// API request/response helpers
+class ApiRequest {
+    constructor(method, body, query, params) {
+        this.method = method;
+        this.body = body;
+        this.query = query;
+        this.params = params;
+    }
+}
+
+class ApiResponse {
+    constructor() {
+        this.statusCode = 200;
+        this.headers = {};
+        this.data = null;
+    }
+
+    status(code) {
+        this.statusCode = code;
+        return this;
+    }
+
+    json(data) {
+        this.data = data;
+        this.headers['Content-Type'] = 'application/json';
+        return this;
+    }
+
+    send(data) {
+        this.data = data;
+        return this;
+    }
+}
+
+// Execute an API route
+async function callApi(path, options = {}) {
+    const {
+        method = 'GET',
+        body = null,
+        query = {},
+        params = {}
+    } = options;
+
+    // Find the route handler
+    const handler = apiRoutes[path];
+    
+    if (!handler) {
+        return {
+            status: 404,
+            data: { error: 'API route not found' }
+        };
+    }
+
+    // Create request and response objects
+    const req = new ApiRequest(method, body, query, params);
+    const res = new ApiResponse();
+
+    try {
+        // Call the handler
+        await handler(req, res);
+
+        return {
+            status: res.statusCode,
+            data: res.data,
+            headers: res.headers
+        };
+    } catch (error) {
+        console.error(`API Error on ${path}:`, error);
+        return {
+            status: 500,
+            data: { error: error.message }
+        };
+    }
+}
+
+// Fetch-like API for making requests
+async function fetchApi(path, options = {}) {
+    const {
+        method = 'GET',
+        body = null,
+        headers = {}
+    } = options;
+
+    // Parse query params from path
+    const [routePath, queryString] = path.split('?');
+    const query = {};
+    if (queryString) {
+        queryString.split('&').forEach(param => {
+            const [key, value] = param.split('=');
+            query[decodeURIComponent(key)] = decodeURIComponent(value);
+        });
+    }
+
+    // Parse body if it's JSON
+    let parsedBody = body;
+    if (body && typeof body === 'string') {
+        try {
+            parsedBody = JSON.parse(body);
+        } catch (e) {
+            parsedBody = body;
+        }
+    }
+
+    const result = await callApi(routePath.replace('/api/', ''), {
+        method,
+        body: parsedBody,
+        query
+    });
+
+    // Return a fetch-like response
+    return {
+        ok: result.status >= 200 && result.status < 300,
+        status: result.status,
+        statusText: result.status === 200 ? 'OK' : 'Error',
+        headers: result.headers,
+        json: async () => result.data,
+        text: async () => JSON.stringify(result.data)
+    };
+}
+
+// Export to global scope
+window.registerApiRoute = registerApiRoute;
+window.fetchApi = fetchApi;
+window.callApi = callApi;
+
+// Also make available without window prefix
+if (typeof globalThis !== 'undefined') {
+    globalThis.registerApiRoute = registerApiRoute;
+    globalThis.fetchApi = fetchApi;
+    globalThis.callApi = callApi;
+}

package/template/modules/auto-import.js

@@ -0,0 +1,130 @@
+/** @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

@@ -0,0 +1,185 @@
+/** @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
+//  2. Load it in app.html with <script type="text/babel">
+//  3. Register it below in the `routes` object
+// ============================================================
+const routes = {};
+
+// registerPage("about", AboutPage) — called by each page file
+function registerPage(path, component) {
+    routes[path] = component;
+}
+
+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());
+}
+
+// 404 page — shown when no route matches
+function NotFoundPage() {
+    return (
+        <div class="not-found">
+            <h1>404</h1>
+            <p>Page not found.</p>
+            <button class="btn btn-primary" onClick={() => navigate("home")}>Go Home</button>
+        </div>
+    );
+}
+
+
+// ============================================================
+//  START
+//  Called once after all scripts are loaded
+// ============================================================
+function startApp() {
+    renderShell();
+    renderPage();
+
+    // Re-render the page whenever the hash changes (back/forward navigation)
+    window.addEventListener("hashchange", 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

@@ -0,0 +1,54 @@
+/** @jsx h */
+
+// ============================================================
+//  STATE MANAGEMENT SYSTEM
+//  A simple, reactive state management system
+// ============================================================
+
+// Component state storage - keyed by component instance
+const componentStates = new Map();
+let currentComponent = null;
+let hookIndex = 0;
+
+// Create a hook-like state for components
+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);
+    }
+    
+    // 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();
+        }
+    };
+    
+    return [currentValue, setValue];
+}
+
+// Reset hook index before each render
+function resetHooks() {
+    hookIndex = 0;
+}
+
+// Export to global scope - make it available like React
+window.useState = useState;
+window.resetHooks = resetHooks;
+// Also make it available without window prefix
+if (typeof globalThis !== 'undefined') {
+    globalThis.useState = useState;
+    globalThis.resetHooks = resetHooks;
+}

package/template/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "aziz-app",
+  "version": "1.0.0",
+  "description": "A simple, clean React-like framework with state management, routing, and API routes",
+  "main": "app.html",
+  "scripts": {
+    "dev": "node scripts/dev-server.js",
+    "build": "node scripts/generate-imports.js"
+  },
+  "keywords": [
+    "react",
+    "framework",
+    "routing",
+    "state-management"
+  ],
+  "author": "",
+  "license": "ISC"
+}

package/template/pages/About.jsx

@@ -0,0 +1,33 @@
+/** @jsx h */
+
+// Register this page at route "about" → "#/about"
+registerPage("about", AboutPage);
+
+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>
+    );
+}