create-aziz-app 2.0.5 → 2.0.6

package/package.json

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