create-aziz-app 2.0.15 → 3.0.0

package/README.md

@@ -1,4 +1,4 @@
-# ⚡ create-aziz-app
+# ⚡ Aziz.js
 
 > A lightweight Next.js clone — file-based routing, React hooks, server-side API routes, ES module imports. **Zero dependencies. Instant startup.**
 
@@ -10,9 +10,9 @@ npx create-aziz-app my-app
 
 ## What is this?
 
-AzizApp gives you the Next.js developer experience without the weight:
+Aziz.js gives you the Next.js developer experience without the weight:
 
-| | AzizApp | Next.js |
+| | Aziz.js | Next.js |
 |--|---------|---------|
 | Bundle size | **~50KB** | ~400KB+ |
 | Dependencies | **0** | 20+ |

package/bin/create-aziz-app.js

@@ -17,14 +17,14 @@ function question(query) {
 
 // Main function
 async function main() {
-    console.log(`\n⚡ Welcome to Aziz App Creator!\n`);
-    console.log(`🎨 A React-like framework with state management, routing, and API routes\n`);
+    console.log(`\n⚡ Welcome to Aziz.js!\n`);
+    console.log(`🎨 A lightweight Next.js clone — file-based routing, React hooks, API routes\n`);
 
     // Get project name
     let projectName = process.argv[2];
     if (!projectName) {
-        projectName = await question('📁 Project name (my-aziz-app): ');
-        projectName = projectName.trim() || 'my-aziz-app';
+        projectName = await question('📁 Project name (my-aziz-js-app): ');
+        projectName = projectName.trim() || 'my-aziz-js-app';
     }
 
     // Validate project name
@@ -97,7 +97,7 @@ async function main() {
     setupCSSFramework(targetDir, features.cssFramework);
 
     console.log(`✅ Done! Your project is ready.\n`);
-    console.log(`🎉 Welcome to Aziz App - A React-like Framework\n`);
+    console.log(`🎉 Welcome to Aziz.js\n`);
     console.log(`📁 Created project: ${projectName}\n`);
     console.log(`👉 Get started:\n`);
     console.log(`   cd ${projectName}`);
@@ -307,7 +307,7 @@ function Navbar() {
         <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
             <div class="container-fluid">
                 <span class="navbar-brand" onClick={() => navigate("home")} style={{ cursor: 'pointer' }}>
-                    ⚡ AzizApp
+                    ⚡ Aziz.js
                 </span>
                 <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                     <span class="navbar-toggler-icon"></span>
@@ -348,7 +348,7 @@ function Footer() {
     return (
         <footer class="bg-dark text-light text-center py-3 mt-auto">
             <div class="container">
-                <p class="mb-0">Made with ⚡ AzizApp</p>
+                <p class="mb-0">Made with ⚡ Aziz.js</p>
             </div>
         </footer>
     );
@@ -382,7 +382,7 @@ function Navbar() {
                         class="text-primary text-xl font-bold cursor-pointer hover:text-blue-300 transition"
                         onClick={() => navigate("home")}
                     >
-                        ⚡ AzizApp
+                        ⚡ Aziz.js
                     </span>
                     <div class="flex space-x-4">
                         <a href="#/home" class={\`px-3 py-2 rounded-md text-sm font-medium transition \${path === "home" ? "bg-primary text-dark" : "text-gray-300 hover:bg-gray-700 hover:text-white"}\`}>
@@ -419,7 +419,7 @@ function Footer() {
     return (
         <footer class="bg-dark text-gray-400 text-center py-4 mt-auto">
             <div class="container mx-auto">
-                <p>Made with ⚡ AzizApp</p>
+                <p>Made with ⚡ Aziz.js</p>
             </div>
         </footer>
     );

package/package.json

@@ -1,19 +1,20 @@
 {
   "name": "create-aziz-app",
-  "version": "2.0.15",
-  "description": "A React-like framework with state management, routing, and API routes - Create apps with auto-import, live reload, and Next.js-like features",
+  "version": "3.0.0",
+  "description": "Create Aziz.js apps — lightweight Next.js clone with file-based routing, React hooks, and API routes",
   "keywords": [
-    "react",
-    "full-stack",
+    "aziz.js",
+    "nextjs",
     "framework",
     "cli",
     "create-app",
-    "routing",
-    "state-management",
+    "file-based-routing",
+    "react-hooks",
     "api-routes",
-    "live-reload"
+    "live-reload",
+    "lightweight"
   ],
-  "license": "AZIZ",
+  "license": "MIT",
   "author": "Syed Muhammad Aziz Ahmed",
   "type": "commonjs",
   "files": [
@@ -24,8 +25,6 @@
     "create-aziz-app": "bin/create-aziz-app.js"
   },
   "scripts": {
-    "dev": "cd template && node scripts/dev-server.js",
-    "build": "cd template && node scripts/generate-imports.js",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "dev": "cd template && node scripts/dev-server.js"
   }
 }

package/template/README.md

@@ -1,10 +1,10 @@
-# ⚡ AzizApp
+# ⚡ Aziz.js
 
 A lightweight Next.js clone with file-based routing, React hooks, server-side API routes, and ES module imports — **zero dependencies, instant startup**.
 
 ```
-Next.js:   ~400KB  +  20 dependencies  +  10s startup
-AzizApp:   ~50KB   +  0 dependencies   +  <1s startup
+Next.js:  ~400KB  +  20 dependencies  +  10s startup
+Aziz.js:  ~50KB   +  0 dependencies   +  <1s startup
 ```
 
 ---
@@ -861,7 +861,7 @@ Click it to manually reload.
 
 ## Comparison with Next.js
 
-| Feature | AzizApp | Next.js |
+| Feature | Aziz.js | Next.js |
 |---------|---------|---------|
 | File-based routing | ✅ | ✅ |
 | `page.js` convention | ✅ | ✅ |
@@ -911,7 +911,7 @@ const AuthContext = createContext(null);
 ```
 
 **Can I use this in production?**
-AzizApp is designed for development and learning. For production apps with SEO requirements, consider Next.js. For simple SPAs and internal tools, AzizApp works great.
+Aziz.js is designed for development and learning. For production apps with SEO requirements, consider Next.js. For simple SPAs and internal tools, Aziz.js works great.
 
 **How do I add authentication?**
 ```js

package/template/_framework/boot.js

@@ -1,5 +1,5 @@
 // ============================================================
-//  AzizApp Framework Boot
+//  Aziz.js Framework Boot
 //  Loads layout.js + page.js for the current route
 //  Handles client-side navigation like Next.js App Router
 // ============================================================
@@ -14,7 +14,7 @@ window.Fragment = Fragment;
 
 // Boot the app
 async function boot() {
-    console.log('⚡ AzizApp booting...');
+    console.log('⚡ Aziz.js booting...');
 
     // Initialize hooks system
     initHooks();
@@ -22,7 +22,7 @@ async function boot() {
     // Start the router
     await router.init();
 
-    console.log('✅ AzizApp ready');
+    console.log('✅ Aziz.js ready');
 }
 
 boot().catch(err => {

package/template/_framework/hooks.js

@@ -1,5 +1,5 @@
 // ============================================================
-//  AzizApp Hooks
+//  Aziz.js Hooks
 //  React-identical hooks: useState, useEffect, useMemo,
 //  useCallback, useRef, useReducer, useContext
 // ============================================================

package/template/{modules → _framework}/next-response.js

@@ -1,4 +1,6 @@
-// NextResponse - Next.js-compatible response helper
+// NextResponse — identical to Next.js App Router API
+// Used in api/ route handlers
+
 class NextResponse {
     constructor(body, init = {}) {
         this.body = body;
@@ -40,19 +42,9 @@ class NextResponse {
     static error() {
         return new NextResponse(JSON.stringify({ error: 'Internal Server Error' }), {
             status: 500,
-            headers: {
-                'Content-Type': 'application/json'
-            }
+            headers: { 'Content-Type': 'application/json' }
         });
     }
 }
 
-// Export for Node.js (server-side)
-if (typeof module !== 'undefined' && module.exports) {
-    module.exports = { NextResponse };
-}
-
-// Export for browser (if needed)
-if (typeof window !== 'undefined') {
-    window.NextResponse = NextResponse;
-}
+module.exports = { NextResponse };

package/template/_framework/router.js

@@ -1,5 +1,5 @@
 // ============================================================
-//  AzizApp Router
+//  Aziz.js Router
 //  File-based routing like Next.js App Router
 //
 //  app/

package/template/_framework/runtime.js

@@ -1,5 +1,5 @@
 // ============================================================
-//  AzizApp Runtime
+//  Aziz.js Runtime
 //  h() — JSX factory (like React.createElement)
 //  render() — mount component tree to DOM
 // ============================================================

package/template/api/createUser.js

@@ -1,7 +1,7 @@
 // API Route: /api/createUser
 // Next.js App Router style
 
-const { NextResponse } = require('../modules/next-response');
+const { NextResponse } = require('../_framework/next-response');
 
 // Mock database
 let users = [

package/template/api/hello.js

@@ -1,7 +1,7 @@
 // API Route: /api/hello
 // Next.js App Router style
 
-const { NextResponse } = require('../modules/next-response');
+const { NextResponse } = require('../_framework/next-response');
 
 async function GET(request) {
     const { searchParams } = new URL(request.url);

package/template/api/loginUser.js

@@ -1,7 +1,7 @@
 // API Route: /api/loginUser
 // Next.js App Router style
 
-const { NextResponse } = require('../modules/next-response');
+const { NextResponse } = require('../_framework/next-response');
 
 // Mock database
 const users = [

package/template/api/users.js

@@ -1,7 +1,7 @@
 // API Route: /api/users
 // Next.js App Router style
 
-const { NextResponse } = require('../modules/next-response');
+const { NextResponse } = require('../_framework/next-response');
 
 let users = [
     { id: 1, name: 'Aziz Ahmed', email: 'aziz@example.com', createdAt: new Date().toISOString() },

package/template/app/about/page.js

@@ -9,7 +9,7 @@ export default function Page() {
             <h1>About 📖</h1>
 
             <div class="card">
-                <h2>What is AzizApp?</h2>
+                <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.

package/template/app/layout.js

@@ -19,5 +19,5 @@ export default function Layout({ children }) {
 // Optional: export metadata
 export const metadata = {
     title: 'My App',
-    description: 'Built with AzizApp'
+    description: 'Built with Aziz.js'
 };

package/template/components/Footer.js

@@ -4,7 +4,7 @@ import { h } from '/_framework/runtime.js';
 export default function Footer() {
     return (
         <footer>
-            <p>Made with ⚡ AzizApp</p>
+            <p>Made with ⚡ Aziz.js</p>
         </footer>
     );
 }

package/template/components/Navbar.js

@@ -15,7 +15,7 @@ export default function Navbar() {
 
     return (
         <nav>
-            <span class="brand" onClick={() => navigate('/')}>⚡ AzizApp</span>
+            <span class="brand" onClick={() => navigate('/')}>⚡ Aziz.js</span>
             {links.map(({ href, label }) =>
                 <a
                     href={href}

package/template/package.json

@@ -1,12 +1,9 @@
 {
-  "name": "aziz-app",
-  "version": "1.0.2",
-  "description": "Lightweight Next.js clone — file-based routing, React hooks, ES module imports",
-  "main": "index.html",
+  "name": "my-aziz-app",
+  "version": "1.0.0",
+  "description": "Built with Aziz.js",
   "scripts": {
     "dev": "node scripts/dev-server.js"
   },
-  "keywords": ["nextjs", "react", "framework", "routing", "lightweight"],
-  "author": "",
-  "license": "ISC"
+  "license": "MIT"
 }

package/template/scripts/dev-server.js

@@ -10,7 +10,7 @@ const ROOT = process.cwd();
 const clients = new Set();
 const apiHandlers = {};
 
-console.log('🚀 AzizApp dev server starting...\n');
+console.log('🚀 Aziz.js dev server starting...\n');
 
 // ─── Route Manifest ──────────────────────────────────────────
 // Scans app/ folder and builds a list of pages and layouts

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>
-    );
-}