create-aziz-app 2.0.14 → 3.0.0

package/template/scripts/live-reload-client.js

@@ -24,7 +24,6 @@
     let reconnectAttempts = 0;
     const maxReconnectAttempts = 10;
     const port = window.location.port || 3000;
-
     function connect() {
         try {
             console.log('🔌 Connecting to live reload WebSocket...');

package/template/.vscode/settings.json

@@ -1,15 +0,0 @@
-{
-  "tailwindCSS.experimental.classRegex": [
-    ["class\\s*=\\s*['\"`]([^'\"`]*)['\"`]", "([^\\s]+)"]
-  ],
-  "tailwindCSS.includeLanguages": {
-    "javascript": "javascript",
-    "javascriptreact": "javascript"
-  },
-  "files.associations": {
-    "*.jsx": "javascriptreact"
-  },
-  "editor.quickSuggestions": {
-    "strings": true
-  }
-}

package/template/api/getUser.js

@@ -1,60 +0,0 @@
-// API Route: /api/getUser
-// Next.js App Router style with NextResponse
-
-const { NextResponse } = require('../modules/next-response');
-
-// Mock database
-const users = [
-    { _id: '1', name: 'Aziz Ahmed', email: 'aziz@example.com', role: 'admin', phone: '123-456-7890' },
-    { _id: '2', name: 'John Doe', email: 'john@example.com', role: 'user', phone: '098-765-4321' },
-    { _id: '3', name: 'Jane Smith', email: 'jane@example.com', role: 'user', phone: '555-123-4567' }
-];
-
-// GET handler - Next.js App Router style
-async function GET(request) {
-    try {
-        // Parse URL and get search params
-        const { searchParams } = new URL(request.url);
-        const email = searchParams.get('email');
-        const id = searchParams.get('id');
-
-        // Find by email
-        if (email) {
-            const user = users.find(u => u.email === email);
-            if (!user) {
-                return NextResponse.json(
-                    { error: 'User not found' },
-                    { status: 404 }
-                );
-            }
-            return NextResponse.json(user);
-        }
-
-        // Find by ID
-        if (id) {
-            const user = users.find(u => u._id === id);
-            if (!user) {
-                return NextResponse.json(
-                    { error: 'User not found' },
-                    { status: 404 }
-                );
-            }
-            return NextResponse.json(user);
-        }
-
-        // No params provided
-        return NextResponse.json(
-            { error: 'Email or ID required' },
-            { status: 400 }
-        );
-    } catch (error) {
-        console.error('Error fetching user:', error);
-        return NextResponse.json(
-            { error: 'Failed to fetch user' },
-            { status: 500 }
-        );
-    }
-}
-
-// Export the handler
-module.exports = { GET };

package/template/api/getUserWithDB.js

@@ -1,65 +0,0 @@
-// API Route: /api/getUserWithDB
-// Complete Next.js App Router style with DB and Model
-
-const { NextResponse } = require('../modules/next-response');
-const connectDB = require('../lib/db');
-const User = require('../models/User');
-
-// GET handler - Exactly like Next.js!
-async function GET(request) {
-    try {
-        // Connect to database
-        await connectDB();
-
-        // Parse URL and get search params
-        const { searchParams } = new URL(request.url);
-        const email = searchParams.get('email');
-        const id = searchParams.get('id');
-
-        // Find by email
-        if (email) {
-            const user = await User.findOne({ email });
-            
-            if (!user) {
-                return NextResponse.json(
-                    { error: 'User not found' },
-                    { status: 404 }
-                );
-            }
-
-            // Return user without sensitive fields
-            const { password, ...userData } = user;
-            return NextResponse.json(userData);
-        }
-
-        // Find by ID
-        if (id) {
-            const user = await User.findById(id);
-            
-            if (!user) {
-                return NextResponse.json(
-                    { error: 'User not found' },
-                    { status: 404 }
-                );
-            }
-
-            // Return user without sensitive fields
-            const { password, ...userData } = user;
-            return NextResponse.json(userData);
-        }
-
-        // No params - return error
-        return NextResponse.json(
-            { error: 'Email or ID required' },
-            { status: 400 }
-        );
-    } catch (error) {
-        console.error('Error fetching user:', error);
-        return NextResponse.json(
-            { error: 'Failed to fetch user' },
-            { status: 500 }
-        );
-    }
-}
-
-module.exports = { GET };

package/template/app.config.js

@@ -1,41 +0,0 @@
-// ============================================================
-//  APP CONFIGURATION
-//  Configure what files to auto-import
-// ============================================================
-
-// Define all files to be automatically loaded
-window.APP_CONFIG = {
-    // API routes to load
-    apiRoutes: [
-        'api/hello.js',
-        'api/users.js'
-    ],
-    
-    // Components to load
-    components: [
-        'components/Navbar.jsx',
-        'components/Footer.jsx',
-        'components/Counter.jsx'
-    ],
-    
-    // Pages to load
-    pages: [
-        'pages/Home.jsx',
-        'pages/About.jsx',
-        'pages/Contact.jsx',
-        'pages/test.jsx',
-        'pages/ApiDemo.jsx',
-        'pages/NewPage.jsx'
-    ]
-};
-
-// HOW TO ADD NEW FILES:
-// 
-// 1. Create your new file in the appropriate folder
-// 2. Add the path to the array above
-// 3. Refresh the page - it will auto-load!
-//
-// Example:
-// - New page: Add 'pages/MyNewPage.jsx' to pages array
-// - New component: Add 'components/MyComponent.jsx' to components array
-// - New API route: Add 'api/myroute.js' to apiRoutes array

package/template/app.html

@@ -1,55 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>My Aziz App</title>
-
-    <!-- Global Styles -->
-    <link rel="stylesheet" href="styles/globals.css">
-
-    <!-- Live Reload (only active in development) -->
-    <script src="scripts/live-reload-client.js"></script>
-
-    <!-- Babel compiles JSX in the browser -->
-    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
-</head>
-<body>
-
-    <!-- Navbar is always visible -->
-    <div id="navbar"></div>
-
-    <!-- Page content goes here -->
-    <div id="root"></div>
-
-    <!-- Footer is always visible -->
-    <div id="footer"></div>
-
-    <!-- Load core modules -->
-    <script type="text/babel" src="modules/router.js"></script>
-    <script type="text/babel" src="modules/state.js"></script>
-    <script type="text/babel" src="modules/api.js"></script>
-
-    <!-- Load shared components -->
-    <script type="text/babel" src="components/Counter.jsx"></script>
-    <script type="text/babel" src="components/Footer.jsx"></script>
-    <script type="text/babel" src="components/Navbar.jsx"></script>
-
-    <!-- Load pages -->
-    <script type="text/babel" src="pages/About.jsx"></script>
-    <script type="text/babel" src="pages/ApiDemo.jsx"></script>
-    <script type="text/babel" src="pages/Contact.jsx"></script>
-    <script type="text/babel" src="pages/Example.jsx"></script>
-    <script type="text/babel" src="pages/Home.jsx"></script>
-    <script type="text/babel" src="pages/test.jsx"></script>
-
-    <!-- Start the app -->
-    <script type="text/babel">
-        startApp();
-    </script>
-
-</body>
-</html>

package/template/components/Counter.jsx

@@ -1,36 +0,0 @@
-/** @jsx h */
-
-// Register this component
-if (window.AutoImport && window.AutoImport.registerComponent) {
-    window.AutoImport.registerComponent('Counter', Counter);
-}
-
-function Counter({ initialValue = 0 }) {
-    // Use the state management system
-    const [count, setCount] = window.StateManager ? 
-        window.StateManager.useState(initialValue) : [initialValue, () => {}];
-    
-    return (
-        <div class="card">
-            <h3>Counter Component</h3>
-            <p>This is a reusable counter component using the new state system.</p>
-            
-            <div class="count-display">{count}</div>
-            <div class="counter-actions">
-                <button class="btn btn-primary" onClick={() => setCount(count + 1)}>
-                    +
-                </button>
-                <button class="btn btn-danger" onClick={() => setCount(count - 1)}>
-                    -
-                </button>
-                <button class="btn btn-grey" onClick={() => setCount(initialValue)}>
-                    Reset
-                </button>
-            </div>
-            
-            <p style={{ marginTop: '16px', fontSize: '14px', color: '#666' }}>
-                Component state is isolated and reactive.
-            </p>
-        </div>
-    );
-}

package/template/components/Footer.jsx

@@ -1,9 +0,0 @@
-/** @jsx h */
-
-function Footer() {
-    return (
-        <footer>
-            <p>Built with create-aziz-app 🍦 — No frameworks needed</p>
-        </footer>
-    );
-}

package/template/components/Navbar.jsx

@@ -1,17 +0,0 @@
-/** @jsx h */
-
-function Navbar() {
-    const path = getCurrentPath();
-
-    return (
-        <nav>
-            <span class="brand" onClick={() => navigate("home")}>⚡ AzizApp</span>
-            <a href="#/home"       class={path === "home"       ? "active" : ""}>Home</a>
-            <a href="#/about"      class={path === "about"      ? "active" : ""}>About</a>
-            <a href="#/test"       class={path === "test"       ? "active" : ""}>Test</a>
-            <a href="#/hooks-demo" class={path === "hooks-demo" ? "active" : ""}>Hooks</a>
-            <a href="#/api-demo"   class={path === "api-demo"   ? "active" : ""}>API Demo</a>
-            <a href="#/contact"    class={path === "contact"    ? "active" : ""}>Contact</a>
-        </nav>
-    );
-}

package/template/docs/API-GUIDE.md

@@ -1,196 +0,0 @@
-# API Routes Guide
-
-## Overview
-
-Your app now has a Next.js-like API route system! Create API endpoints in the `api/` folder and call them from your components.
-
-## Creating API Routes
-
-### Basic Example
-
-Create a file in `api/` folder:
-
-```javascript
-// api/myroute.js
-registerApiRoute('myroute', async (req, res) => {
-    return res.status(200).json({ 
-        message: 'Hello from API!' 
-    });
-});
-```
-
-### Request Object (req)
-
-The request object contains:
-- `req.method` - HTTP method (GET, POST, PUT, DELETE)
-- `req.body` - Request body (parsed JSON)
-- `req.query` - Query parameters from URL
-- `req.params` - Route parameters
-
-### Response Object (res)
-
-The response object has methods:
-- `res.status(code)` - Set HTTP status code
-- `res.json(data)` - Send JSON response
-- `res.send(data)` - Send plain response
-
-### Full CRUD Example
-
-```javascript
-// api/todos.js
-const todos = [];
-
-registerApiRoute('todos', async (req, res) => {
-    switch (req.method) {
-        case 'GET':
-            // Get all todos
-            return res.status(200).json(todos);
-
-        case 'POST':
-            // Create new todo
-            const newTodo = {
-                id: Date.now(),
-                title: req.body.title,
-                completed: false
-            };
-            todos.push(newTodo);
-            return res.status(201).json(newTodo);
-
-        case 'PUT':
-            // Update todo
-            const id = req.body.id;
-            const index = todos.findIndex(t => t.id === id);
-            if (index !== -1) {
-                todos[index] = { ...todos[index], ...req.body };
-                return res.status(200).json(todos[index]);
-            }
-            return res.status(404).json({ error: 'Not found' });
-
-        case 'DELETE':
-            // Delete todo
-            const deleteId = req.query.id;
-            const deleteIndex = todos.findIndex(t => t.id === parseInt(deleteId));
-            if (deleteIndex !== -1) {
-                todos.splice(deleteIndex, 1);
-                return res.status(200).json({ message: 'Deleted' });
-            }
-            return res.status(404).json({ error: 'Not found' });
-
-        default:
-            return res.status(405).json({ error: 'Method not allowed' });
-    }
-});
-```
-
-## Using API Routes in Components
-
-### Basic GET Request
-
-```javascript
-const MyComponent = () => {
-    const [data, setData] = useState(null);
-
-    const loadData = async () => {
-        const response = await fetchApi('/api/myroute');
-        const result = await response.json();
-        setData(result);
-    };
-
-    return (
-        <div>
-            <button onClick={loadData}>Load Data</button>
-            {data && <p>{data.message}</p>}
-        </div>
-    );
-};
-```
-
-### POST Request
-
-```javascript
-const addItem = async () => {
-    const response = await fetchApi('/api/todos', {
-        method: 'POST',
-        body: JSON.stringify({
-            title: 'New Todo'
-        })
-    });
-    const result = await response.json();
-    console.log('Created:', result);
-};
-```
-
-### Query Parameters
-
-```javascript
-// Fetch with query params
-const response = await fetchApi('/api/users?id=123&name=John');
-```
-
-### DELETE Request
-
-```javascript
-const deleteItem = async (id) => {
-    const response = await fetchApi(`/api/todos?id=${id}`, {
-        method: 'DELETE'
-    });
-    const result = await response.json();
-    console.log(result.message);
-};
-```
-
-## Available API Routes
-
-### /api/hello
-Simple hello world endpoint
-- **GET** `/api/hello?name=YourName`
-- Returns: `{ message: "Hello, YourName!", timestamp: "...", method: "GET" }`
-
-### /api/users
-User management endpoint
-- **GET** `/api/users` - Get all users
-- **GET** `/api/users?id=1` - Get specific user
-- **POST** `/api/users` - Create user (body: `{ name, email }`)
-- **PUT** `/api/users?id=1` - Update user (body: `{ name, email }`)
-- **DELETE** `/api/users?id=1` - Delete user
-
-## Tips
-
-1. **Mock Data**: Currently, API routes use in-memory data. Replace with real backend calls when ready.
-
-2. **Error Handling**: Always wrap API calls in try-catch:
-```javascript
-try {
-    const response = await fetchApi('/api/myroute');
-    const data = await response.json();
-} catch (error) {
-    console.error('API Error:', error);
-}
-```
-
-3. **Loading States**: Use loading state for better UX:
-```javascript
-const [loading, setLoading] = useState(false);
-
-const loadData = async () => {
-    setLoading(true);
-    try {
-        const response = await fetchApi('/api/data');
-        const data = await response.json();
-        setData(data);
-    } finally {
-        setLoading(false);
-    }
-};
-```
-
-4. **Real Backend**: To connect to a real backend, modify `fetchApi` in `api.js` to use `fetch()` instead of the mock system.
-
-## Demo
-
-Visit `#/api-demo` in your app to see a live demo of the API system with:
-- GET requests
-- POST requests (create users)
-- DELETE requests
-- Loading states
-- Error handling