create-aziz-app 2.0.14 → 3.0.0

package/template/api/users.js

@@ -1,155 +1,59 @@
 // API Route: /api/users
-// Next.js-style API route handler
+// Next.js App Router style
+
+const { NextResponse } = require('../_framework/next-response');
 
-// Mock database (in production, use a real database)
 let users = [
     { id: 1, name: 'Aziz Ahmed', email: 'aziz@example.com', createdAt: new Date().toISOString() },
     { id: 2, name: 'John Doe', email: 'john@example.com', createdAt: new Date().toISOString() },
     { id: 3, name: 'Jane Smith', email: 'jane@example.com', createdAt: new Date().toISOString() }
 ];
 
-// Next.js-style default export
-export default async function handler(req, res) {
-    const { method, query, body } = req;
-
-    switch (method) {
-        case 'GET':
-            // GET /api/users - Get all users
-            // GET /api/users?id=1 - Get specific user
-            if (query.id) {
-                const user = users.find(u => u.id === parseInt(query.id));
-                if (!user) {
-                    return res.status(404).json({ 
-                        error: 'User not found',
-                        message: `No user found with id ${query.id}` 
-                    });
-                }
-                return res.status(200).json(user);
-            }
-            
-            // Return all users
-            return res.status(200).json({
-                users,
-                total: users.length,
-                timestamp: new Date().toISOString()
-            });
-
-        case 'POST':
-            // POST /api/users - Create new user
-            const { name, email } = body;
-            
-            // Validation
-            if (!name || !email) {
-                return res.status(400).json({ 
-                    error: 'Validation error',
-                    message: 'Name and email are required',
-                    fields: {
-                        name: !name ? 'Name is required' : null,
-                        email: !email ? 'Email is required' : null
-                    }
-                });
-            }
+async function GET(request) {
+    const { searchParams } = new URL(request.url);
+    const id = searchParams.get('id');
 
-            if (!email.includes('@')) {
-                return res.status(400).json({ 
-                    error: 'Validation error',
-                    message: 'Invalid email format' 
-                });
-            }
-
-            // Check if email already exists
-            if (users.find(u => u.email === email)) {
-                return res.status(409).json({ 
-                    error: 'Conflict',
-                    message: 'User with this email already exists' 
-                });
-            }
+    if (id) {
+        const user = users.find(u => u.id === parseInt(id));
+        if (!user) return NextResponse.json({ error: 'User not found' }, { status: 404 });
+        return NextResponse.json(user);
+    }
 
-            // Create new user
-            const newUser = {
-                id: users.length > 0 ? Math.max(...users.map(u => u.id)) + 1 : 1,
-                name,
-                email,
-                createdAt: new Date().toISOString()
-            };
-            
-            users.push(newUser);
-            
-            return res.status(201).json({
-                message: 'User created successfully',
-                user: newUser
-            });
+    return NextResponse.json({ users, total: users.length });
+}
 
-        case 'PUT':
-            // PUT /api/users?id=1 - Update user
-            const userId = query.id || body.id;
-            
-            if (!userId) {
-                return res.status(400).json({ 
-                    error: 'Bad request',
-                    message: 'User ID is required' 
-                });
-            }
+async function POST(request) {
+    const { name, email } = await request.json();
 
-            const userIndex = users.findIndex(u => u.id === parseInt(userId));
-            
-            if (userIndex === -1) {
-                return res.status(404).json({ 
-                    error: 'User not found',
-                    message: `No user found with id ${userId}` 
-                });
-            }
+    if (!name || !email) {
+        return NextResponse.json({ error: 'Name and email are required' }, { status: 400 });
+    }
 
-            // Update user
-            users[userIndex] = {
-                ...users[userIndex],
-                ...body,
-                id: users[userIndex].id, // Prevent ID change
-                updatedAt: new Date().toISOString()
-            };
+    if (users.find(u => u.email === email)) {
+        return NextResponse.json({ error: 'Email already exists' }, { status: 409 });
+    }
 
-            return res.status(200).json({
-                message: 'User updated successfully',
-                user: users[userIndex]
-            });
+    const newUser = {
+        id: Math.max(...users.map(u => u.id)) + 1,
+        name, email,
+        createdAt: new Date().toISOString()
+    };
+    users.push(newUser);
 
-        case 'DELETE':
-            // DELETE /api/users?id=1 - Delete user
-            const deleteId = query.id;
-            
-            if (!deleteId) {
-                return res.status(400).json({ 
-                    error: 'Bad request',
-                    message: 'User ID is required' 
-                });
-            }
+    return NextResponse.json({ message: 'User created', user: newUser }, { status: 201 });
+}
 
-            const deleteIndex = users.findIndex(u => u.id === parseInt(deleteId));
-            
-            if (deleteIndex === -1) {
-                return res.status(404).json({ 
-                    error: 'User not found',
-                    message: `No user found with id ${deleteId}` 
-                });
-            }
+async function DELETE(request) {
+    const { searchParams } = new URL(request.url);
+    const id = searchParams.get('id');
 
-            const deletedUser = users.splice(deleteIndex, 1)[0];
+    if (!id) return NextResponse.json({ error: 'ID required' }, { status: 400 });
 
-            return res.status(200).json({
-                message: 'User deleted successfully',
-                user: deletedUser
-            });
+    const idx = users.findIndex(u => u.id === parseInt(id));
+    if (idx === -1) return NextResponse.json({ error: 'User not found' }, { status: 404 });
 
-        default:
-            // Method not allowed
-            res.setHeader('Allow', ['GET', 'POST', 'PUT', 'DELETE']);
-            return res.status(405).json({ 
-                error: 'Method not allowed',
-                message: `Method ${method} is not allowed for this endpoint`,
-                allowedMethods: ['GET', 'POST', 'PUT', 'DELETE']
-            });
-    }
+    const deleted = users.splice(idx, 1)[0];
+    return NextResponse.json({ message: 'User deleted', user: deleted });
 }
 
-// CommonJS export for Node.js compatibility
-module.exports = handler;
+module.exports = { GET, POST, DELETE };

package/template/app/about/page.js

@@ -0,0 +1,45 @@
+/** @jsx h */
+import { h } from '/_framework/runtime.js';
+import { navigate } from '/_framework/router.js';
+
+// About page — route: /about
+export default function Page() {
+    return (
+        <div style={{ padding: '40px 32px', maxWidth: '900px', margin: '0 auto' }}>
+            <h1>About 📖</h1>
+
+            <div class="card">
+                <h2>What is Aziz.js?</h2>
+                <p>
+                    A lightweight Next.js clone — file-based routing, React hooks,
+                    server-side API routes, and ES module imports. Zero dependencies.
+                </p>
+            </div>
+
+            <div class="card">
+                <h2>File Structure</h2>
+                <pre style={{ background: '#282c34', color: '#61dafb', padding: '16px', borderRadius: '8px', fontSize: '13px' }}>
+{`app/
+  layout.js       ← root layout
+  page.js         ← /
+  about/
+    page.js       ← /about
+  blog/
+    [slug]/
+      page.js     ← /blog/:slug
+
+api/
+  users.js        ← /api/users
+
+components/
+  Navbar.js
+  Footer.js`}
+                </pre>
+            </div>
+
+            <button class="btn btn-primary" onClick={() => navigate('/')}>
+                ← Back Home
+            </button>
+        </div>
+    );
+}

package/template/app/layout.js

@@ -0,0 +1,23 @@
+/** @jsx h */
+import { h } from '/_framework/runtime.js';
+import Navbar from '/components/Navbar.js';
+import Footer from '/components/Footer.js';
+
+// Root layout — wraps every page (like Next.js app/layout.js)
+export default function Layout({ children }) {
+    return (
+        <div style={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}>
+            <Navbar />
+            <main style={{ flex: 1 }}>
+                {children}
+            </main>
+            <Footer />
+        </div>
+    );
+}
+
+// Optional: export metadata
+export const metadata = {
+    title: 'My App',
+    description: 'Built with Aziz.js'
+};

package/template/app/page.js

@@ -0,0 +1,54 @@
+/** @jsx h */
+import { h } from '/_framework/runtime.js';
+import { navigate } from '/_framework/router.js';
+
+// Home page — route: /
+export default function Page() {
+    const [count, setCount] = useState(0);
+
+    return (
+        <div style={{ padding: '40px 32px', maxWidth: '900px', margin: '0 auto' }}>
+            <h1>Welcome Home 👋</h1>
+
+            <div class="card">
+                <h2>Counter</h2>
+                <p>useState works exactly like React!</p>
+                <div class="count-display">{count}</div>
+                <div class="counter-actions">
+                    <button class="btn btn-danger"  onClick={() => setCount(c => c - 1)}>−</button>
+                    <button class="btn btn-primary" onClick={() => setCount(c => c + 1)}>+</button>
+                    <button class="btn btn-grey"    onClick={() => setCount(0)}>Reset</button>
+                </div>
+            </div>
+
+            <div class="card">
+                <h2>File-based Routing</h2>
+                <p>
+                    Each <code>page.js</code> inside <code>app/</code> is a route — just like Next.js.
+                    Create <code>app/about/page.js</code> and it becomes <code>/about</code>.
+                </p>
+                <div style={{ display: 'flex', gap: '12px' }}>
+                    <button class="btn btn-primary" onClick={() => navigate('/about')}>
+                        Go to About →
+                    </button>
+                    <button class="btn btn-primary" onClick={() => navigate('/test')}>
+                        Go to Test →
+                    </button>
+                </div>
+            </div>
+
+            <div class="card">
+                <h2>Import Anything</h2>
+                <p>
+                    Use <code>import</code> statements just like Next.js.
+                    The dev server resolves bare imports from <code>node_modules</code>.
+                </p>
+                <pre style={{ background: '#282c34', color: '#61dafb', padding: '16px', borderRadius: '8px', overflow: 'auto', fontSize: '13px' }}>
+{`import mongoose from 'mongoose';
+import connectDB from '@/lib/db';
+import User from '@/models/User';`}
+                </pre>
+            </div>
+        </div>
+    );
+}

package/template/app/test/page.js

@@ -0,0 +1,55 @@
+/** @jsx h */
+import { h } from '/_framework/runtime.js';
+
+// Test page — route: /test
+export default function Page() {
+    const [count, setCount]   = useState(0);
+    const [name, setName]     = useState('');
+    const [email, setEmail]   = useState('');
+
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        alert(`Name: ${name}\nEmail: ${email}\nCount: ${count}`);
+    };
+
+    return (
+        <div style={{ padding: '40px 32px', maxWidth: '900px', margin: '0 auto' }}>
+            <h1>Test Page 🧪</h1>
+
+            <div class="card">
+                <h2>useState</h2>
+                <div class="count-display">{count}</div>
+                <div class="counter-actions">
+                    <button class="btn btn-primary" onClick={() => setCount(c => c + 1)}>+</button>
+                    <button class="btn btn-danger"  onClick={() => setCount(0)}>Reset</button>
+                </div>
+            </div>
+
+            <div class="card">
+                <h2>Form</h2>
+                <form onSubmit={handleSubmit}>
+                    <input
+                        type="text"
+                        value={name}
+                        onInput={(e) => setName(e.target.value)}
+                        placeholder="Your name"
+                    />
+                    <input
+                        type="email"
+                        value={email}
+                        onInput={(e) => setEmail(e.target.value)}
+                        placeholder="Your email"
+                    />
+                    <button type="submit" class="btn btn-primary">Submit</button>
+                </form>
+            </div>
+
+            <div class="card">
+                <h2>State</h2>
+                <p>Name: <strong>{name || '—'}</strong></p>
+                <p>Email: <strong>{email || '—'}</strong></p>
+                <p>Count: <strong>{count}</strong></p>
+            </div>
+        </div>
+    );
+}

package/template/components/Footer.js

@@ -0,0 +1,10 @@
+/** @jsx h */
+import { h } from '/_framework/runtime.js';
+
+export default function Footer() {
+    return (
+        <footer>
+            <p>Made with ⚡ Aziz.js</p>
+        </footer>
+    );
+}

package/template/components/Navbar.js

@@ -0,0 +1,30 @@
+/** @jsx h */
+import { h } from '/_framework/runtime.js';
+import { navigate, useRouter } from '/_framework/router.js';
+
+export default function Navbar() {
+    const { pathname } = useRouter();
+
+    const links = [
+        { href: '/',       label: 'Home'     },
+        { href: '/about',  label: 'About'    },
+        { href: '/test',   label: 'Test'     },
+        { href: '/api-demo', label: 'API Demo' },
+        { href: '/contact', label: 'Contact' },
+    ];
+
+    return (
+        <nav>
+            <span class="brand" onClick={() => navigate('/')}>⚡ Aziz.js</span>
+            {links.map(({ href, label }) =>
+                <a
+                    href={href}
+                    class={pathname === href ? 'active' : ''}
+                    onClick={(e) => { e.preventDefault(); navigate(href); }}
+                >
+                    {label}
+                </a>
+            )}
+        </nav>
+    );
+}

package/template/index.html

@@ -0,0 +1,24 @@
+<!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">
+    <title>My App</title>
+
+    <!-- Global Styles -->
+    <link rel="stylesheet" href="/styles/globals.css">
+
+    <!-- Babel for JSX (loaded before modules) -->
+    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+</head>
+<body>
+    <div id="root"></div>
+
+    <!-- Boot the framework -->
+    <script type="module" src="/_framework/boot.js"></script>
+
+    <!-- Live Reload (dev only) -->
+    <script src="/scripts/live-reload-client.js"></script>
+</body>
+</html>

package/template/package.json

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