create-aziz-app 1.0.3 → 2.0.1

package/bin/create-aziz-app.js

@@ -1,41 +1,60 @@
 #!/usr/bin/env node
 
-const fs = require("fs");
+const fs   = require("fs");
 const path = require("path");
 
-// The folder name comes from the command line argument
-// e.g. npm create aziz-app my-app  →  projectName = "my-app"
 const projectName = process.argv[2] || "my-aziz-app";
-const targetDir = path.join(process.cwd(), projectName);
+const targetDir   = path.join(process.cwd(), projectName);
 const templateDir = path.join(__dirname, "../template");
 
-// Create the project folder
+console.log(`\n⚡ Creating "${projectName}"...\n`);
+
 if (fs.existsSync(targetDir)) {
-    console.log(`❌ Folder "${projectName}" already exists.`);
+    console.error(`❌ Folder "${projectName}" already exists. Choose a different name.`);
     process.exit(1);
 }
 
-fs.mkdirSync(targetDir, { recursive: true });
-
-// Copy all template files into the new project folder
+// Copy the entire template folder into the new project
 copyDir(templateDir, targetDir);
 
-console.log(`
-✅ Project "${projectName}" created!
-
-👉 Next steps:
-   cd ${projectName}
-   Open app.html with Live Server and start coding!
-`);
+console.log(`✅ Done! Your project is ready.\n`);
+console.log(`🎉 Welcome to Aziz App - A React-like Framework\n`);
+console.log(`📁 Created project: ${projectName}\n`);
+console.log(`👉 Get started:\n`);
+console.log(`   cd ${projectName}`);
+console.log(`   npm run dev\n`);
+console.log(`🌐 This will:`);
+console.log(`   • Start dev server on http://localhost:3000/`);
+console.log(`   • Watch for file changes`);
+console.log(`   • Auto-import new files`);
+console.log(`   • Live reload browser\n`);
+console.log(`� Project structure:\n`);
+console.log(`   app.html          ← Main HTML file`);
+console.log(`   modules/          ← Core system (router, state, API)`);
+console.log(`   pages/            ← Your pages (auto-imported)`);
+console.log(`   components/       ← Your components (auto-imported)`);
+console.log(`   api/              ← Your API routes (auto-imported)`);
+console.log(`   scripts/          ← Build tools`);
+console.log(`   docs/             ← Documentation\n`);
+console.log(`✨ Features:\n`);
+console.log(`   • State Management    - useState() like React`);
+console.log(`   • File-based Routing  - pages/About.jsx → #/about`);
+console.log(`   • API Routes          - Next.js-like API system`);
+console.log(`   • Auto-Import         - No manual script tags!`);
+console.log(`   • Live Reload         - Instant browser refresh\n`);
+console.log(`💡 Quick tips:\n`);
+console.log(`   • Create pages/MyPage.jsx → Auto-imported!`);
+console.log(`   • Create api/todos.js → Auto-imported!`);
+console.log(`   • Just save and browser refreshes automatically`);
+console.log(`   • Read docs/ folder for detailed guides\n`);
+console.log(`🚀 Ready to build something awesome!\n`);
 
-// Helper: copy a folder recursively
+// ---- Helper ----
 function copyDir(src, dest) {
     fs.mkdirSync(dest, { recursive: true });
-
     for (let file of fs.readdirSync(src)) {
-        const srcPath = path.join(src, file);
+        const srcPath  = path.join(src, file);
         const destPath = path.join(dest, file);
-
         if (fs.statSync(srcPath).isDirectory()) {
             copyDir(srcPath, destPath);
         } else {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-aziz-app",
-  "version": "1.0.3",
+  "version": "2.0.1",
   "description": "so close to react ~~ just joking",
   "keywords": [
     "html",
@@ -20,6 +20,8 @@
   },
   "main": "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"
   }
 }

package/template/README.md

@@ -0,0 +1,189 @@
+# Aziz App - React-like Framework
+
+A simple, clean React-like framework with state management, routing, and API routes.
+
+## 📁 Project Structure
+
+```
+template/
+├── app.html              # Main HTML file
+├── app.config.js         # Auto-generated config (don't edit manually)
+│
+├── modules/              # Core system modules
+│   ├── router.js         # Routing & rendering engine
+│   ├── state.js          # State management (useState)
+│   ├── api.js            # API route system
+│   └── README.md         # Module documentation
+│
+├── scripts/              # Build & dev tools
+│   ├── dev-server.js     # Development server with auto-import
+│   ├── generate-imports.js  # Import generator
+│   └── build.js          # Build script
+│
+├── docs/                 # Documentation
+│   ├── API-GUIDE.md      # API routes guide
+│   ├── AUTO-IMPORT.md    # Auto-import system docs
+│   ├── GETTING-STARTED.md  # Getting started guide
+│   └── QUICK-START.md    # Quick start guide
+│
+├── api/                  # API route handlers
+│   ├── hello.js          # Example: /api/hello
+│   └── users.js          # Example: /api/users
+│
+├── components/           # Reusable UI components
+│   ├── Navbar.jsx
+│   ├── Footer.jsx
+│   └── Counter.jsx
+│
+└── pages/                # Page components (routes)
+    ├── Home.jsx          # Route: #/home
+    ├── About.jsx         # Route: #/about
+    ├── Contact.jsx       # Route: #/contact
+    ├── test.jsx          # Route: #/test
+    └── ApiDemo.jsx       # Route: #/api-demo
+```
+
+## 🚀 Quick Start
+
+### 1. Start the Dev Server
+
+```bash
+npm run dev
+```
+
+This will:
+- Start HTTP server on `http://localhost:3000/`
+- Watch for file changes in `api/`, `components/`, and `pages/`
+- Auto-generate imports when you create new files
+- Auto-reload on changes
+
+### 2. Open Your Browser
+
+```
+http://localhost:3000/
+```
+
+### 3. Create New Files
+
+Just create files in the appropriate folders - they're automatically imported!
+
+**Create a new page:**
+```javascript
+// pages/Profile.jsx
+/** @jsx h */
+
+registerPage("profile", ProfilePage);
+
+function ProfilePage() {
+    const [name, setName] = useState('');
+    
+    return (
+        <div>
+            <h1>Profile</h1>
+            <input 
+                value={name}
+                onInput={(e) => setName(e.target.value)}
+                placeholder="Your name"
+            />
+            <p>Hello, {name}!</p>
+        </div>
+    );
+}
+```
+
+**Navigate to:** `http://localhost:3000/#/profile`
+
+## ✨ Features
+
+### State Management
+```javascript
+const [count, setCount] = useState(0);
+const [name, setName] = useState('');
+```
+
+### Routing
+```javascript
+// Register a page
+registerPage("about", AboutPage);
+
+// Navigate
+navigate("about");
+```
+
+### API Routes
+```javascript
+// api/todos.js
+registerApiRoute('todos', async (req, res) => {
+    return res.status(200).json({ todos: [] });
+});
+
+// Use in components
+const response = await fetchApi('/api/todos');
+const data = await response.json();
+```
+
+### Auto-Import
+- Create files in `pages/`, `components/`, or `api/`
+- Dev server automatically detects them
+- Refresh browser to see changes
+
+## 📚 Documentation
+
+- **[Getting Started](docs/GETTING-STARTED.md)** - Complete setup guide
+- **[API Guide](docs/API-GUIDE.md)** - How to create API routes
+- **[Auto-Import](docs/AUTO-IMPORT.md)** - Auto-import system details
+- **[Quick Start](docs/QUICK-START.md)** - Quick examples
+
+## 🛠️ Commands
+
+```bash
+npm run dev      # Start dev server with auto-import
+npm run build    # Generate imports manually
+```
+
+## 🎯 Key Concepts
+
+### Pages
+- Files in `pages/` become routes
+- Use `registerPage("route", Component)`
+- Access via `#/route`
+
+### Components
+- Reusable UI components
+- Use JSX syntax with `/** @jsx h */`
+- Import automatically
+
+### API Routes
+- Files in `api/` become API endpoints
+- Use `registerApiRoute("path", handler)`
+- Access via `fetchApi('/api/path')`
+
+### State
+- Use `useState(initialValue)` like React
+- Returns `[value, setValue]`
+- Triggers re-render on change
+
+## 🔥 Hot Tips
+
+1. **Dev server must be running** for auto-import to work
+2. **Refresh browser** after creating new files
+3. **Use `/** @jsx h */`** at the top of JSX files
+4. **Route names are case-sensitive** - `#/home` not `#/Home`
+
+## 📦 What's in Each Folder
+
+- **`modules/`** - Core framework code (don't modify unless extending)
+- **`scripts/`** - Build tools (don't modify)
+- **`docs/`** - Documentation (read these!)
+- **`api/`** - Your API routes (add your endpoints here)
+- **`components/`** - Your components (add reusable UI here)
+- **`pages/`** - Your pages (add new pages here)
+
+## 🎉 You're Ready!
+
+Start the dev server and start building:
+```bash
+npm run dev
+```
+
+Then open `http://localhost:3000/` and start creating!

package/template/api/hello.js

@@ -0,0 +1,14 @@
+/** @jsx h */
+
+// Example API route: /api/hello
+// Simple hello world API endpoint
+
+registerApiRoute('hello', async (req, res) => {
+    const name = req.query.name || 'World';
+    
+    return res.status(200).json({
+        message: `Hello, ${name}!`,
+        timestamp: new Date().toISOString(),
+        method: req.method
+    });
+});

package/template/api/users.js

@@ -0,0 +1,62 @@
+/** @jsx h */
+
+// 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' }
+];
+
+// Register the API route
+registerApiRoute('users', async (req, res) => {
+    // Handle different HTTP methods
+    switch (req.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' });
+                }
+            }
+            return res.status(200).json(users);
+
+        case 'POST':
+            // Create a new user
+            const newUser = {
+                id: users.length + 1,
+                name: req.body.name,
+                email: req.body.email
+            };
+            users.push(newUser);
+            return res.status(201).json(newUser);
+
+        case 'PUT':
+            // Update a user
+            const userId = req.query.id || req.body.id;
+            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]);
+            }
+            return res.status(404).json({ error: 'User not found' });
+
+        case 'DELETE':
+            // Delete a user
+            const deleteId = req.query.id;
+            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] });
+            }
+            return res.status(404).json({ error: 'User not found' });
+
+        default:
+            return res.status(405).json({ error: 'Method not allowed' });
+    }
+});

package/template/app.config.js

@@ -0,0 +1,41 @@
+// ============================================================
+//  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

@@ -3,53 +3,156 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>My Aziz Js App</title>
+    <title>My Aziz App</title>
 
     <!-- Babel compiles JSX in the browser -->
     <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
 
     <style>
+        /* ---- Reset ---- */
         * { margin: 0; padding: 0; box-sizing: border-box; }
+
         body {
             font-family: Arial, sans-serif;
-            background-color: #f0f0f0;
+            background-color: #f5f5f5;
+            color: #333;
+            min-height: 100vh;
             display: flex;
             flex-direction: column;
+        }
+
+        /* ---- Navbar ---- */
+        nav {
+            background-color: #282c34;
+            padding: 16px 32px;
+            display: flex;
             align-items: center;
-            min-height: 100vh;
+            gap: 24px;
         }
-        .header {
+        nav .brand {
+            color: #61dafb;
+            font-size: 20px;
+            font-weight: bold;
+            cursor: pointer;
+        }
+        nav a {
+            color: #ffffffcc;
+            text-decoration: none;
+            font-size: 15px;
+            transition: color 0.2s;
+        }
+        nav a:hover, nav a.active { color: #61dafb; }
+
+        /* ---- Page wrapper ---- */
+        #root {
+            flex: 1;
+            padding: 40px 32px;
+            max-width: 900px;
             width: 100%;
+            margin: 0 auto;
+        }
+
+        /* ---- Footer ---- */
+        footer {
             background-color: #282c34;
-            color: white;
-            padding: 20px;
+            color: #888;
             text-align: center;
+            padding: 16px;
+            font-size: 13px;
+        }
+
+        /* ---- Utility styles ---- */
+        h1 { margin-bottom: 16px; color: #282c34; }
+        h2 { margin-bottom: 12px; }
+        p  { line-height: 1.6; margin-bottom: 12px; color: #555; }
+
+        .card {
+            background: white;
+            border-radius: 10px;
+            padding: 24px;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+            margin-bottom: 20px;
+        }
+
+        .btn {
+            display: inline-block;
+            padding: 10px 22px;
+            border: none;
+            border-radius: 8px;
+            cursor: pointer;
+            font-size: 15px;
+            transition: opacity 0.2s;
         }
-        .main { margin-top: 60px; text-align: center; }
-        .counter-box {
-            background-color: white;
-            padding: 40px 60px;
-            border-radius: 12px;
-            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
-        }
-        .counter-box h2 { margin-bottom: 20px; color: #333; }
-        .count-display { font-size: 64px; font-weight: bold; color: #282c34; margin: 20px 0; }
-        .btn { padding: 12px 28px; margin: 0 8px; font-size: 24px; border: none; border-radius: 8px; cursor: pointer; transition: background-color 0.2s; }
-        .btn-plus  { background-color: #61dafb; color: #282c34; }
-        .btn-minus { background-color: #ff6b6b; color: white; }
-        .btn-reset { background-color: #ccc; color: #333; font-size: 16px; padding: 12px 24px; margin-top: 20px; display: block; width: 100%; border-radius: 8px; border: none; cursor: pointer; }
         .btn:hover { opacity: 0.85; }
-        .footer { margin-top: auto; padding: 20px; color: #888; font-size: 14px; }
+        .btn-primary { background-color: #61dafb; color: #282c34; font-weight: bold; }
+        .btn-danger  { background-color: #ff6b6b; color: white; }
+        .btn-grey    { background-color: #ccc; color: #333; }
+
+        /* ---- Counter (on home page) ---- */
+        .count-display {
+            font-size: 64px;
+            font-weight: bold;
+            color: #282c34;
+            margin: 16px 0;
+            text-align: center;
+        }
+        .counter-actions { display: flex; gap: 12px; justify-content: center; margin-top: 8px; }
+
+        /* ---- Form ---- */
+        form { display: flex; flex-direction: column; gap: 12px; }
+        input, textarea {
+            padding: 10px 14px;
+            border: 1px solid #ddd;
+            border-radius: 8px;
+            font-size: 15px;
+            outline: none;
+            transition: border-color 0.2s;
+        }
+        input:focus, textarea:focus { border-color: #61dafb; }
+        textarea { resize: vertical; min-height: 100px; }
+
+        /* ---- 404 ---- */
+        .not-found { text-align: center; padding: 60px 0; }
+        .not-found h1 { font-size: 80px; color: #61dafb; }
     </style>
 </head>
 <body>
 
+    <!-- Navbar is always visible -->
+    <div id="navbar"></div>
+
+    <!-- Page content goes here -->
     <div id="root"></div>
 
-    <script type="text/babel" src="components/Header.jsx"></script>
-    <script type="text/babel" src="components/Counter.jsx"></script>
-    <script type="text/babel" src="components/Footer.jsx"></script>
-    <script type="text/babel" src="app.js"></script>
+    <!-- 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/Home.jsx"></script>
+    <script type="text/babel" src="pages/NewPage.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,18 +1,36 @@
 /** @jsx h */
 
-function Counter() {
-    return (
-        <div class="main">
-            <div class="counter-box">
-                <h2>Counter App</h2>
-
-                <div class="count-display">{state.count}</div>
-
-                <button class="btn btn-minus" onClick={() => decrement()}>−</button>
-                <button class="btn btn-plus"  onClick={() => increment()}>+</button>
+// Register this component
+if (window.AutoImport && window.AutoImport.registerComponent) {
+    window.AutoImport.registerComponent('Counter', Counter);
+}
 
-                <button class="btn-reset" onClick={() => reset()}>Reset</button>
+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

@@ -2,8 +2,8 @@
 
 function Footer() {
     return (
-        <div class="footer">
-            <p>Built with Vanilla JS 🍦 — No frameworks needed</p>
-        </div>
+        <footer>
+            <p>Built with create-aziz-app 🍦 — No frameworks needed</p>
+        </footer>
     );
 }

package/template/components/Navbar.jsx

@@ -0,0 +1,16 @@
+/** @jsx h */
+
+function Navbar() {
+    const path = getCurrentPath();
+
+    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>
+        </nav>
+    );
+}