create-aziz-app 2.0.4 → 2.0.6

package/bin/create-aziz-app.js

@@ -309,6 +309,9 @@ function Footer() {
 `;
         fs.writeFileSync(footerPath, footerContent);
     }
+    
+    // Update all pages
+    updatePagesForBootstrap(targetDir);
 }
 
 // Update components for Tailwind
@@ -374,6 +377,315 @@ function Footer() {
 `;
         fs.writeFileSync(footerPath, footerContent);
     }
+    
+    // Update all pages
+    updatePagesForTailwind(targetDir);
+}
+
+// Update all pages for Bootstrap
+function updatePagesForBootstrap(targetDir) {
+    const pagesDir = path.join(targetDir, 'pages');
+    if (!fs.existsSync(pagesDir)) return;
+    
+    // Update Home.jsx
+    const homePath = path.join(pagesDir, 'Home.jsx');
+    if (fs.existsSync(homePath)) {
+        fs.writeFileSync(homePath, getBootstrapHomePage());
+    }
+    
+    // Update test.jsx
+    const testPath = path.join(pagesDir, 'test.jsx');
+    if (fs.existsSync(testPath)) {
+        fs.writeFileSync(testPath, getBootstrapTestPage());
+    }
+    
+    // About and Contact pages are simple, they work with any framework
+}
+
+// Update all pages for Tailwind
+function updatePagesForTailwind(targetDir) {
+    const pagesDir = path.join(targetDir, 'pages');
+    if (!fs.existsSync(pagesDir)) return;
+    
+    // Update Home.jsx
+    const homePath = path.join(pagesDir, 'Home.jsx');
+    if (fs.existsSync(homePath)) {
+        fs.writeFileSync(homePath, getTailwindHomePage());
+    }
+    
+    // Update test.jsx
+    const testPath = path.join(pagesDir, 'test.jsx');
+    if (fs.existsSync(testPath)) {
+        fs.writeFileSync(testPath, getTailwindTestPage());
+    }
+}
+
+// Bootstrap Home Page
+function getBootstrapHomePage() {
+    return `/** @jsx h */
+
+registerPage("home", HomePage);
+
+function HomePage() {
+    return (
+        <div class="container py-5">
+            <h1 class="display-4 mb-4">Welcome Home 👋</h1>
+
+            <div class="card mb-4">
+                <div class="card-body">
+                    <h2 class="card-title">Global State Counter</h2>
+                    <p class="card-text">This uses the global state. Click the buttons to update it.</p>
+
+                    <div class="text-center my-4">
+                        <h1 class="display-1 fw-bold text-primary">{state.count}</h1>
+                    </div>
+
+                    <div class="d-flex gap-2 justify-content-center">
+                        <button class="btn btn-danger" onClick={() => setState({ count: state.count - 1 })}>−</button>
+                        <button class="btn btn-primary" onClick={() => setState({ count: state.count + 1 })}>+</button>
+                        <button class="btn btn-secondary" onClick={() => setState({ count: 0 })}>Reset</button>
+                    </div>
+                </div>
+            </div>
+
+            <div class="card">
+                <div class="card-body">
+                    <h2 class="card-title">File-based Routing</h2>
+                    <p class="card-text">
+                        Each file in <strong>pages/</strong> is a route — just like Next.js.
+                        Add a new file, run the build script, and it's a new page.
+                    </p>
+                    <div class="d-flex gap-2">
+                        <button class="btn btn-primary" onClick={() => navigate("test")}>
+                            Go to Test Page →
+                        </button>
+                        <button class="btn btn-outline-primary" onClick={() => navigate("about")}>
+                            Go to About →
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
+`;
+}
+
+// Tailwind Home Page
+function getTailwindHomePage() {
+    return `/** @jsx h */
+
+registerPage("home", HomePage);
+
+function HomePage() {
+    return (
+        <div class="container mx-auto py-10 px-4">
+            <h1 class="text-4xl font-bold mb-6 text-gray-800">Welcome Home 👋</h1>
+
+            <div class="bg-white rounded-lg shadow-md p-6 mb-6">
+                <h2 class="text-2xl font-bold mb-3 text-gray-800">Global State Counter</h2>
+                <p class="text-gray-600 mb-4">This uses the global state. Click the buttons to update it.</p>
+
+                <div class="text-center my-6">
+                    <h1 class="text-7xl font-bold text-primary">{state.count}</h1>
+                </div>
+
+                <div class="flex gap-3 justify-center">
+                    <button class="px-6 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition" onClick={() => setState({ count: state.count - 1 })}>−</button>
+                    <button class="px-6 py-2 bg-primary text-dark font-bold rounded-lg hover:opacity-80 transition" onClick={() => setState({ count: state.count + 1 })}>+</button>
+                    <button class="px-6 py-2 bg-gray-400 text-white rounded-lg hover:bg-gray-500 transition" onClick={() => setState({ count: 0 })}>Reset</button>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-lg shadow-md p-6">
+                <h2 class="text-2xl font-bold mb-3 text-gray-800">File-based Routing</h2>
+                <p class="text-gray-600 mb-4">
+                    Each file in <strong>pages/</strong> is a route — just like Next.js.
+                    Add a new file, run the build script, and it's a new page.
+                </p>
+                <div class="flex gap-3">
+                    <button class="px-6 py-2 bg-primary text-dark font-bold rounded-lg hover:opacity-80 transition" onClick={() => navigate("test")}>
+                        Go to Test Page →
+                    </button>
+                    <button class="px-6 py-2 border-2 border-primary text-primary rounded-lg hover:bg-primary hover:text-dark transition" onClick={() => navigate("about")}>
+                        Go to About →
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+}
+`;
+}
+
+// Bootstrap Test Page
+function getBootstrapTestPage() {
+    return `/** @jsx h */
+
+registerPage("test", TestPage);
+
+function TestPage() {
+    const [count, setCount] = useState(0);
+    const [name, setName] = useState('');
+    const [email, setEmail] = useState('');
+    
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        alert(\`Form submitted!\\nName: \${name}\\nEmail: \${email}\\nCount: \${count}\`);
+    };
+    
+    return (
+        <div class="container py-5">
+            <h1 class="display-4 mb-4">Test Page 🧪</h1>
+
+            <div class="card mb-4">
+                <div class="card-body">
+                    <h2 class="card-title">Counter Example</h2>
+                    <p class="card-text">This demonstrates the state management system.</p>
+                    
+                    <div class="text-center my-4">
+                        <h1 class="display-1 fw-bold text-primary">{count}</h1>
+                    </div>
+                    <div class="d-flex gap-2 justify-content-center">
+                        <button class="btn btn-primary" onClick={() => setCount(count + 1)}>
+                            Increment
+                        </button>
+                        <button class="btn btn-danger" onClick={() => setCount(0)}>
+                            Reset
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            <div class="card mb-4">
+                <div class="card-body">
+                    <h2 class="card-title">Form Example</h2>
+                    <p class="card-text">Try the form with state management.</p>
+                    
+                    <form onSubmit={handleSubmit}>
+                        <div class="mb-3">
+                            <label class="form-label">Name:</label>
+                            <input 
+                                type="text" 
+                                class="form-control"
+                                value={name}
+                                onInput={(e) => setName(e.target.value)}
+                                placeholder="Enter your name"
+                            />
+                        </div>
+                        
+                        <div class="mb-3">
+                            <label class="form-label">Email:</label>
+                            <input 
+                                type="email" 
+                                class="form-control"
+                                value={email}
+                                onInput={(e) => setEmail(e.target.value)}
+                                placeholder="Enter your email"
+                            />
+                        </div>
+                        
+                        <button type="submit" class="btn btn-primary">
+                            Submit Form
+                        </button>
+                    </form>
+                </div>
+            </div>
+            
+            <div class="card">
+                <div class="card-body">
+                    <h2 class="card-title">State Information</h2>
+                    <p class="mb-2">Current count: <strong class="text-primary">{count}</strong></p>
+                    <p class="mb-2">Current name: <strong class="text-primary">{name || 'Not set'}</strong></p>
+                    <p class="mb-0">Current email: <strong class="text-primary">{email || 'Not set'}</strong></p>
+                </div>
+            </div>
+        </div>
+    );
+}
+`;
+}
+
+// Tailwind Test Page
+function getTailwindTestPage() {
+    return `/** @jsx h */
+
+registerPage("test", TestPage);
+
+function TestPage() {
+    const [count, setCount] = useState(0);
+    const [name, setName] = useState('');
+    const [email, setEmail] = useState('');
+    
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        alert(\`Form submitted!\\nName: \${name}\\nEmail: \${email}\\nCount: \${count}\`);
+    };
+    
+    return (
+        <div class="container mx-auto py-10 px-4">
+            <h1 class="text-4xl font-bold mb-6 text-gray-800">Test Page 🧪</h1>
+
+            <div class="bg-white rounded-lg shadow-md p-6 mb-6">
+                <h2 class="text-2xl font-bold mb-3 text-gray-800">Counter Example</h2>
+                <p class="text-gray-600 mb-4">This demonstrates the state management system.</p>
+                
+                <div class="text-center my-6">
+                    <h1 class="text-7xl font-bold text-primary">{count}</h1>
+                </div>
+                <div class="flex gap-3 justify-center">
+                    <button class="px-6 py-2 bg-primary text-dark font-bold rounded-lg hover:opacity-80 transition" onClick={() => setCount(count + 1)}>
+                        Increment
+                    </button>
+                    <button class="px-6 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition" onClick={() => setCount(0)}>
+                        Reset
+                    </button>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-lg shadow-md p-6 mb-6">
+                <h2 class="text-2xl font-bold mb-3 text-gray-800">Form Example</h2>
+                <p class="text-gray-600 mb-4">Try the form with state management.</p>
+                
+                <form onSubmit={handleSubmit} class="space-y-4">
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-1">Name:</label>
+                        <input 
+                            type="text" 
+                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary outline-none transition"
+                            value={name}
+                            onInput={(e) => setName(e.target.value)}
+                            placeholder="Enter your name"
+                        />
+                    </div>
+                    
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-1">Email:</label>
+                        <input 
+                            type="email" 
+                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary outline-none transition"
+                            value={email}
+                            onInput={(e) => setEmail(e.target.value)}
+                            placeholder="Enter your email"
+                        />
+                    </div>
+                    
+                    <button type="submit" class="px-6 py-2 bg-primary text-dark font-bold rounded-lg hover:opacity-80 transition">
+                        Submit Form
+                    </button>
+                </form>
+            </div>
+            
+            <div class="bg-white rounded-lg shadow-md p-6">
+                <h2 class="text-2xl font-bold mb-3 text-gray-800">State Information</h2>
+                <p class="mb-2 text-gray-700">Current count: <strong class="text-primary">{count}</strong></p>
+                <p class="mb-2 text-gray-700">Current name: <strong class="text-primary">{name || 'Not set'}</strong></p>
+                <p class="mb-0 text-gray-700">Current email: <strong class="text-primary">{email || 'Not set'}</strong></p>
+            </div>
+        </div>
+    );
+}
+`;
 }
 
 // Run main function

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-aziz-app",
-  "version": "2.0.4",
+  "version": "2.0.6",
   "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",

package/template/modules/router.js

@@ -150,6 +150,13 @@ function renderShell() {
     footer.appendChild(Footer());
 }
 
+// Re-render shell when route changes (for navbar active state)
+function updateShell() {
+    const navbar = document.getElementById("navbar");
+    navbar.innerHTML = "";
+    navbar.appendChild(Navbar());
+}
+
 // 404 page — shown when no route matches
 function NotFoundPage() {
     return (
@@ -170,8 +177,11 @@ function startApp() {
     renderShell();
     renderPage();
 
-    // Re-render the page whenever the hash changes (back/forward navigation)
-    window.addEventListener("hashchange", renderPage);
+    // Re-render the page and navbar whenever the hash changes (back/forward navigation)
+    window.addEventListener("hashchange", () => {
+        updateShell(); // Update navbar active state
+        renderPage();
+    });
 }
 
 // Export to global scope

package/template/pages/Home.jsx

@@ -1,6 +1,5 @@
 /** @jsx h */
 
-// Register this page at route "home" → "#/"
 registerPage("home", HomePage);
 
 function HomePage() {
@@ -25,14 +24,16 @@ function HomePage() {
                 <h2>File-based Routing</h2>
                 <p>
                     Each file in <strong>pages/</strong> is a route — just like Next.js.
-                    Add a new file, register it in app.js, and it's a new page.
+                    Add a new file, run the build script, and it's a new page.
                 </p>
-                <button class="btn btn-primary" onClick={() => navigate("test")}>
-                    Go to Test Page →
-                </button>
-                <button class="btn btn-primary" onClick={() => navigate("about")}>
-                    Go to About →
-                </button>
+                <div style={{ display: 'flex', gap: '12px' }}>
+                    <button class="btn btn-primary" onClick={() => navigate("test")}>
+                        Go to Test Page →
+                    </button>
+                    <button class="btn btn-primary" onClick={() => navigate("about")}>
+                        Go to About →
+                    </button>
+                </div>
             </div>
         </div>
     );

package/template/pages/test.jsx

@@ -1,6 +1,5 @@
 /** @jsx h */
 
-// Register this page at route "test" → "#/test"
 registerPage("test", TestPage);
 
 function TestPage() {
@@ -19,7 +18,7 @@ function TestPage() {
 
             <div class="card">
                 <h2>Counter Example</h2>
-                <p>This demonstrates the new state management system.</p>
+                <p>This demonstrates the state management system.</p>
                 
                 <div class="count-display">{count}</div>
                 <div class="counter-actions">
@@ -37,15 +36,6 @@ function TestPage() {
                 <p>Try the form with state management.</p>
                 
                 <form onSubmit={handleSubmit}>
-                                        <div>
-                        <label>Email:</label>
-                        <input 
-                            type="email" 
-                            value={email}
-                            onInput={(e) => setEmail(e.target.value)}
-                            placeholder="Enter your email"
-                        />
-                    </div>
                     <div>
                         <label>Name:</label>
                         <input 
@@ -56,6 +46,15 @@ function TestPage() {
                         />
                     </div>
                     
+                    <div>
+                        <label>Email:</label>
+                        <input 
+                            type="email" 
+                            value={email}
+                            onInput={(e) => setEmail(e.target.value)}
+                            placeholder="Enter your email"
+                        />
+                    </div>
                     
                     <button type="submit" class="btn btn-primary">
                         Submit Form

package/template/scripts/dev-server.js

@@ -35,18 +35,59 @@ function notifyClients() {
 // Live reload script to inject
 const liveReloadScript = `
 <script>
-    // Live reload client
+    // Hot Module Replacement (HMR) - Smart reload
     const evtSource = new EventSource('/live-reload');
+    let isReloading = false;
+    
     evtSource.onmessage = (event) => {
-        if (event.data === 'reload') {
-            console.log('🔄 Changes detected, reloading...');
-            location.reload();
+        if (event.data === 'reload' && !isReloading) {
+            isReloading = true;
+            console.log('🔄 Changes detected, hot reloading...');
+            
+            // Save current state
+            const currentPath = window.location.hash;
+            const scrollPos = window.scrollY;
+            
+            // Reload only changed scripts
+            const scripts = document.querySelectorAll('script[type="text/babel"]');
+            let reloadCount = 0;
+            
+            scripts.forEach((script, index) => {
+                if (script.src && !script.src.includes('babel.min.js')) {
+                    const newScript = document.createElement('script');
+                    newScript.type = 'text/babel';
+                    newScript.src = script.src + '?t=' + Date.now();
+                    
+                    newScript.onload = () => {
+                        reloadCount++;
+                        if (reloadCount === scripts.length - 1) {
+                            // All scripts reloaded, re-render
+                            setTimeout(() => {
+                                if (typeof renderShell === 'function') renderShell();
+                                if (typeof renderPage === 'function') renderPage();
+                                window.scrollTo(0, scrollPos);
+                                console.log('✅ Hot reload complete');
+                                isReloading = false;
+                            }, 100);
+                        }
+                    };
+                    
+                    script.parentNode.replaceChild(newScript, script);
+                }
+            });
+            
+            // Fallback: if no scripts to reload, just refresh
+            if (scripts.length <= 1) {
+                location.reload();
+            }
         }
     };
+    
     evtSource.onerror = () => {
         console.log('⚠️ Live reload disconnected');
     };
-    console.log('✅ Live reload connected');
+    
+    console.log('✅ Hot reload connected');
 </script>
 `;