create-aziz-app 2.0.11 → 2.0.13

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "create-aziz-app",
-  "version": "2.0.11",
+  "version": "2.0.13",
   "description": "A React-like framework with state management, routing, and API routes - Create apps with auto-import, live reload, and Next.js-like features",
   "keywords": [
     "react",
+    "full-stack",
     "framework",
     "cli",
     "create-app",
@@ -12,7 +13,7 @@
     "api-routes",
     "live-reload"
   ],
-  "license": "MIT",
+  "license": "AZIZ",
   "author": "Syed Muhammad Aziz Ahmed",
   "type": "commonjs",
   "files": [

package/template/README.md

@@ -1,6 +1,11 @@
-# Aziz App - React-like Framework
+# Aziz App - Lightweight Next.js Clone
 
-A simple, clean React-like framework with state management, routing, and API routes.
+A **lightweight Next.js clone** with React hooks, API routes, and file-based routing. All the benefits of Next.js, but **6x smaller** with **zero dependencies**!
+
+```
+Next.js: ~400KB + 20 dependencies
+Aziz App: ~50KB + 0 dependencies
+```
 
 ## 📁 Project Structure
 
@@ -96,39 +101,31 @@ function ProfilePage() {
 
 ## ✨ Features
 
-### Auto-Registration ⚡
-```javascript
-// Just name your function with "Page" suffix
-function AboutPage() {
-    return <div><h1>About</h1></div>;
-}
-// Automatically becomes route "#/about"
-```
-
-### State Management
+### React Hooks (Identical to Next.js!)
 ```javascript
 const [count, setCount] = useState(0);
 const [name, setName] = useState('');
-```
 
-### Routing
-```javascript
-// Auto-registers based on function name
-function HomePage() { }  // → #/home
+useEffect(() => {
+    console.log('Mounted!');
+}, []);
 
-// Or manually register for custom names
-registerPage("user-profile", UserProfilePage);
-
-// Navigate
-navigate("about");
+const memoized = useMemo(() => expensive(), [dep]);
+const callback = useCallback(() => action(), [dep]);
+const ref = useRef(null);
+const [state, dispatch] = useReducer(reducer, initial);
 ```
 
+**All hooks work exactly like React/Next.js!**
+
 ### API Routes
 ```javascript
-// api/todos.js
-registerApiRoute('todos', async (req, res) => {
-    return res.status(200).json({ todos: [] });
-});
+// api/todos.js - Runs on SERVER (Node.js)!
+module.exports = async function handler(req, res) {
+    if (req.method === 'GET') {
+        return res.status(200).json({ todos: [] });
+    }
+};
 
 // Use in components
 const response = await fetchApi('/api/todos');
@@ -150,13 +147,14 @@ The CLI will automatically set up your chosen framework!
 
 ## 📚 Documentation
 
+- **[Next.js Comparison](docs/NEXTJS-COMPARISON.md)** - How it compares to Next.js
 - **[Getting Started](docs/GETTING-STARTED.md)** - Complete setup guide
 - **[Auto-Registration](docs/AUTO-REGISTRATION.md)** - How pages auto-register
-- **[API Guide](docs/API-GUIDE.md)** - How to create API routes
+- **[API Routes](docs/API-ROUTES.md)** - Server-side API endpoints (like Next.js!)
 - **[Auto-Import](docs/AUTO-IMPORT.md)** - Auto-import system details
 - **[Dev Server](docs/DEV-SERVER.md)** - Live reload and development
+- **[How It Works](docs/HOW-IT-WORKS.md)** - System architecture
 - **[Troubleshooting](docs/TROUBLESHOOTING.md)** - Fix common issues
-- **[Quick Start](docs/QUICK-START.md)** - Quick examples
 
 ## 🛠️ Commands
 

package/template/api/hello.js

@@ -1,14 +1,26 @@
-/** @jsx h */
+// API Route: /api/hello
+// Simple Next.js-style API route
 
-// Example API route: /api/hello
-// Simple hello world API endpoint
+export default async function handler(req, res) {
+    const { method, query } = req;
 
-registerApiRoute('hello', async (req, res) => {
-    const name = req.query.name || 'World';
+    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';
     
     return res.status(200).json({
         message: `Hello, ${name}!`,
         timestamp: new Date().toISOString(),
-        method: req.method
+        method: method,
+        query: query
     });
-});
+}
+
+// CommonJS export for Node.js compatibility
+module.exports = handler;

package/template/api/users.js

@@ -1,62 +1,155 @@
-/** @jsx h */
+// API Route: /api/users
+// Next.js-style API route handler
 
-// Example API route: /api/users
-// This simulates a backend API endpoint
-
-// Mock database
-const users = [
-    { id: 1, name: 'Aziz Ahmed', email: 'aziz@example.com' },
-    { id: 2, name: 'John Doe', email: 'john@example.com' },
-    { id: 3, name: 'Jane Smith', email: 'jane@example.com' }
+// 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() }
 ];
 
-// Register the API route
-registerApiRoute('users', async (req, res) => {
-    // Handle different HTTP methods
-    switch (req.method) {
+// Next.js-style default export
+export default async function handler(req, res) {
+    const { method, query, body } = req;
+
+    switch (method) {
         case 'GET':
-            // Get all users or a specific user
-            if (req.query.id) {
-                const user = users.find(u => u.id === parseInt(req.query.id));
-                if (user) {
-                    return res.status(200).json(user);
-                } else {
-                    return res.status(404).json({ error: 'User not found' });
+            // 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 res.status(200).json(users);
+            
+            // Return all users
+            return res.status(200).json({
+                users,
+                total: users.length,
+                timestamp: new Date().toISOString()
+            });
 
         case 'POST':
-            // Create a new user
+            // 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
+                    }
+                });
+            }
+
+            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' 
+                });
+            }
+
+            // Create new user
             const newUser = {
-                id: users.length + 1,
-                name: req.body.name,
-                email: req.body.email
+                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(newUser);
+            
+            return res.status(201).json({
+                message: 'User created successfully',
+                user: newUser
+            });
 
         case 'PUT':
-            // Update a user
-            const userId = req.query.id || req.body.id;
+            // 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' 
+                });
+            }
+
             const userIndex = users.findIndex(u => u.id === parseInt(userId));
-            if (userIndex !== -1) {
-                users[userIndex] = { ...users[userIndex], ...req.body };
-                return res.status(200).json(users[userIndex]);
+            
+            if (userIndex === -1) {
+                return res.status(404).json({ 
+                    error: 'User not found',
+                    message: `No user found with id ${userId}` 
+                });
             }
-            return res.status(404).json({ error: 'User not found' });
+
+            // Update user
+            users[userIndex] = {
+                ...users[userIndex],
+                ...body,
+                id: users[userIndex].id, // Prevent ID change
+                updatedAt: new Date().toISOString()
+            };
+
+            return res.status(200).json({
+                message: 'User updated successfully',
+                user: users[userIndex]
+            });
 
         case 'DELETE':
-            // Delete a user
-            const deleteId = req.query.id;
+            // 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' 
+                });
+            }
+
             const deleteIndex = users.findIndex(u => u.id === parseInt(deleteId));
-            if (deleteIndex !== -1) {
-                const deleted = users.splice(deleteIndex, 1);
-                return res.status(200).json({ message: 'User deleted', user: deleted[0] });
+            
+            if (deleteIndex === -1) {
+                return res.status(404).json({ 
+                    error: 'User not found',
+                    message: `No user found with id ${deleteId}` 
+                });
             }
-            return res.status(404).json({ error: 'User not found' });
+
+            const deletedUser = users.splice(deleteIndex, 1)[0];
+
+            return res.status(200).json({
+                message: 'User deleted successfully',
+                user: deletedUser
+            });
 
         default:
-            return res.status(405).json({ error: 'Method not allowed' });
+            // 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']
+            });
     }
-});
+}
+
+// CommonJS export for Node.js compatibility
+module.exports = handler;

package/template/app.html

@@ -28,31 +28,27 @@
     <!-- 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 API routes -->
-    <script type="text/babel" src="api/hello.js"></script>
-    <script type="text/babel" src="api/users.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();
+    <!-- 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>

package/template/components/Navbar.jsx

@@ -5,12 +5,13 @@ function Navbar() {
 
     return (
         <nav>
-            <span class="brand" onClick={() => navigate("home")}>⚡ AzizJS</span>
-            <a href="#/home"     class={path === "home"     ? "active" : ""}>Home</a>
-            <a href="#/about"    class={path === "about"    ? "active" : ""}>About</a>
-            <a href="#/contact"  class={path === "contact"  ? "active" : ""}>Contact</a>
-            <a href="#/test"     class={path === "test"     ? "active" : ""}>Test</a>
-            <a href="#/api-demo" class={path === "api-demo" ? "active" : ""}>API Demo</a>
+            <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>
     );
 }