create-aziz-app 2.0.7 → 2.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-aziz-app",
-  "version": "2.0.7",
+  "version": "2.0.9",
   "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/README.md

@@ -72,8 +72,7 @@ Just create files in the appropriate folders - they're automatically imported!
 // pages/Profile.jsx
 /** @jsx h */
 
-registerPage("profile", ProfilePage);
-
+// Auto-registers as "#/profile" - no registerPage() needed!
 function ProfilePage() {
     const [name, setName] = useState('');
     
@@ -93,8 +92,19 @@ function ProfilePage() {
 
 **Navigate to:** `http://localhost:3000/#/profile`
 
+✨ **That's it!** No `registerPage()` call needed. Just name your function `YourNamePage()` and it auto-registers!
+
 ## ✨ 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
 ```javascript
 const [count, setCount] = useState(0);
@@ -103,8 +113,11 @@ const [name, setName] = useState('');
 
 ### Routing
 ```javascript
-// Register a page
-registerPage("about", AboutPage);
+// Auto-registers based on function name
+function HomePage() { }  // → #/home
+
+// Or manually register for custom names
+registerPage("user-profile", UserProfilePage);
 
 // Navigate
 navigate("about");
@@ -138,8 +151,11 @@ The CLI will automatically set up your chosen framework!
 ## 📚 Documentation
 
 - **[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
 - **[Auto-Import](docs/AUTO-IMPORT.md)** - Auto-import system details
+- **[Dev Server](docs/DEV-SERVER.md)** - Live reload and development
+- **[Troubleshooting](docs/TROUBLESHOOTING.md)** - Fix common issues
 - **[Quick Start](docs/QUICK-START.md)** - Quick examples
 
 ## 🛠️ Commands
@@ -153,8 +169,9 @@ npm run build    # Generate imports manually
 
 ### Pages
 - Files in `pages/` become routes
-- Use `registerPage("route", Component)`
-- Access via `#/route`
+- Name functions with "Page" suffix (e.g., `AboutPage`)
+- Auto-registers as route (e.g., `#/about`)
+- Optional: Use `registerPage("custom-name", Component)` for custom routes
 
 ### Components
 - Reusable UI components

package/template/app.html

@@ -3,6 +3,9 @@
 <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 -->
@@ -22,30 +25,31 @@
     <!-- 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/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 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();
     </script>
 
 </body>

package/template/docs/AUTO-REGISTRATION.md

@@ -0,0 +1,248 @@
+# Auto-Registration Guide
+
+## Overview
+
+Pages automatically register themselves based on their function name. No need to call `registerPage()` manually!
+
+## How It Works
+
+### ✨ Automatic Registration
+
+Just name your page function with "Page" at the end:
+
+```jsx
+/** @jsx h */
+
+// That's it! Automatically becomes route "#/example"
+function ExamplePage() {
+    return (
+        <div>
+            <h1>Example Page</h1>
+            <p>This page auto-registered!</p>
+        </div>
+    );
+}
+```
+
+### Function Name → Route Mapping
+
+The system converts your function name to a route:
+
+| Function Name | Auto Route | URL |
+|--------------|------------|-----|
+| `HomePage()` | `home` | `#/home` |
+| `AboutPage()` | `about` | `#/about` |
+| `ContactPage()` | `contact` | `#/contact` |
+| `UserProfilePage()` | `userprofile` | `#/userprofile` |
+| `MyAwesomePage()` | `myawesome` | `#/myawesome` |
+
+**Rule:** Remove "Page" suffix and convert to lowercase.
+
+## Manual Registration (Optional)
+
+You can still manually register for custom route names:
+
+```jsx
+/** @jsx h */
+
+// Custom route name with dashes or different naming
+registerPage("user-profile", UserProfilePage);
+
+function UserProfilePage() {
+    return <div><h1>User Profile</h1></div>;
+}
+```
+
+### When to Use Manual Registration
+
+- **Custom route names** with dashes: `"api-demo"`, `"user-settings"`
+- **Multiple routes** pointing to same component
+- **Override auto-registration** with different name
+
+## Examples
+
+### Example 1: Simple Auto Page
+
+```jsx
+/** @jsx h */
+
+function ProductsPage() {
+    return (
+        <div>
+            <h1>Products</h1>
+            <p>Browse our products</p>
+        </div>
+    );
+}
+```
+
+Access at: `#/products`
+
+### Example 2: With State
+
+```jsx
+/** @jsx h */
+
+function DashboardPage() {
+    const [count, setCount] = useState(0);
+    
+    return (
+        <div>
+            <h1>Dashboard</h1>
+            <p>Count: {count}</p>
+            <button onClick={() => setCount(count + 1)}>
+                Increment
+            </button>
+        </div>
+    );
+}
+```
+
+Access at: `#/dashboard`
+
+### Example 3: Manual Registration
+
+```jsx
+/** @jsx h */
+
+// Want route "#/user-settings" instead of "#/usersettings"
+registerPage("user-settings", UserSettingsPage);
+
+function UserSettingsPage() {
+    return (
+        <div>
+            <h1>User Settings</h1>
+        </div>
+    );
+}
+```
+
+Access at: `#/user-settings`
+
+## Creating a New Page
+
+### Step 1: Create the file
+
+Create `pages/MyNewPage.jsx`:
+
+```jsx
+/** @jsx h */
+
+function MyNewPage() {
+    return (
+        <div>
+            <h1>My New Page</h1>
+            <div class="card">
+                <p>This is my new page!</p>
+            </div>
+        </div>
+    );
+}
+```
+
+### Step 2: That's it!
+
+The dev server will:
+1. Detect the new file
+2. Auto-generate the import in `app.html`
+3. Auto-register the route as `#/mynew`
+4. Reload the browser
+
+Navigate to `#/mynew` and your page appears!
+
+## Debugging
+
+### Check Auto-Registration
+
+Open browser console when the app starts. You'll see:
+
+```
+📄 Auto-registered: home → HomePage()
+📄 Auto-registered: about → AboutPage()
+📄 Auto-registered: contact → ContactPage()
+📄 Auto-registered: mynew → MyNewPage()
+```
+
+### Page Not Found?
+
+1. **Check function name** - Must end with "Page"
+2. **Check file is loaded** - Look in `app.html` for the script tag
+3. **Check console** - Look for auto-registration message
+4. **Try manual registration** - Use `registerPage("route", ComponentPage)`
+
+## Best Practices
+
+### ✅ Do This
+
+```jsx
+// Clear, descriptive names
+function HomePage() { }
+function AboutPage() { }
+function ContactPage() { }
+function UserProfilePage() { }
+```
+
+### ❌ Avoid This
+
+```jsx
+// Won't auto-register (missing "Page" suffix)
+function Home() { }
+function About() { }
+
+// Will create weird routes
+function Page() { }  // route: "" (empty)
+function MyPage() { } // route: "my" (too generic)
+```
+
+## Migration Guide
+
+### Old Way (Still Works)
+
+```jsx
+/** @jsx h */
+
+registerPage("about", AboutPage);
+
+function AboutPage() {
+    return <div><h1>About</h1></div>;
+}
+```
+
+### New Way (Simpler)
+
+```jsx
+/** @jsx h */
+
+function AboutPage() {
+    return <div><h1>About</h1></div>;
+}
+```
+
+Both work! The new way is just less code.
+
+## Advanced: Multiple Routes
+
+Point multiple routes to the same component:
+
+```jsx
+/** @jsx h */
+
+// Auto-registers as "dashboard"
+function DashboardPage() {
+    return <div><h1>Dashboard</h1></div>;
+}
+
+// Also register as "home" and "index"
+registerPage("home", DashboardPage);
+registerPage("index", DashboardPage);
+```
+
+Now `#/dashboard`, `#/home`, and `#/index` all show the same page!
+
+## Summary
+
+- **Function name ends with "Page"** → Auto-registers
+- **Route name** = function name without "Page", lowercase
+- **Manual registration** still available for custom names
+- **Dev server** handles everything automatically
+- **Zero configuration** needed for basic pages

package/template/docs/DEV-SERVER.md

@@ -0,0 +1,98 @@
+# Dev Server Guide
+
+## Overview
+
+The dev server provides a smooth development experience with live reload, automatic import generation, and file watching.
+
+## Features
+
+### 🔄 Live Reload
+- **Automatic browser refresh** when you save files
+- **Visual indicator** in bottom-right corner shows connection status
+- **Smart caching** - forces cache clear on reload to always show latest changes
+- **CSS hot reload** - instant updates without regenerating imports
+
+### 👀 File Watching
+The dev server watches these directories:
+- `api/` - API route files
+- `components/` - React-like components
+- `pages/` - Page components
+- `modules/` - Core system modules
+- `styles/` - CSS files
+
+### 🚀 Auto Import Generation
+- Automatically generates script tags in `app.html`
+- Runs on startup and whenever JS/JSX files change
+- No need to manually add imports
+
+### 🎯 Smart Port Selection
+- Defaults to port 3000
+- Automatically finds next available port if 3000 is busy
+- Shows the actual URL in console
+
+## Usage
+
+```bash
+npm run dev
+```
+
+Then open the URL shown in console (usually `http://localhost:3000/`)
+
+## Visual Indicators
+
+The live reload indicator in the bottom-right corner shows:
+- 🔌 **Connecting...** - Initial connection
+- ✅ **Live Reload Active** - Connected and watching (fades after 2s)
+- 🔄 **Reloading...** - Changes detected, refreshing page
+- ⚠️ **Reconnecting...** - Connection lost, attempting to reconnect
+
+Hover over the indicator to make it fully visible.
+
+## How It Works
+
+1. **Server starts** and generates initial imports
+2. **Browser connects** via Server-Sent Events (SSE)
+3. **File watcher** detects changes in watched directories
+4. **Debouncing** prevents multiple rapid reloads (300ms for CSS, 500ms for JS)
+5. **Import regeneration** (for JS/JSX changes only)
+6. **Browser notification** via SSE
+7. **Page reload** with cache busting
+
+## Cache Control
+
+The dev server sends these headers to prevent caching:
+```
+Cache-Control: no-cache, no-store, must-revalidate
+Pragma: no-cache
+Expires: 0
+```
+
+This ensures you always see the latest changes without needing Ctrl+Shift+R.
+
+## Troubleshooting
+
+### Changes not showing?
+1. Check the visual indicator - is it green?
+2. Open browser console - look for "✅ Live reload connected"
+3. Check terminal - does it show "🔄 Notifying X browser(s) to reload..."?
+4. Try hard refresh once: Ctrl+Shift+R (Windows) or Cmd+Shift+R (Mac)
+
+### Port already in use?
+The server will automatically try the next port (3001, 3002, etc.)
+
+### Live reload disconnected?
+The page will automatically try to reconnect after 2 seconds.
+
+## Performance
+
+- **Debouncing** prevents reload spam when saving multiple files
+- **CSS-only changes** skip import regeneration for faster updates
+- **SSE connection** is lightweight and efficient
+- **Multiple browsers** can connect simultaneously
+
+## Development Tips
+
+1. Keep the terminal visible to see file change notifications
+2. The visual indicator helps confirm live reload is working
+3. CSS changes are faster than JS changes (no import regeneration)
+4. Multiple browser tabs will all reload simultaneously

package/template/docs/TROUBLESHOOTING.md

@@ -0,0 +1,282 @@
+# Troubleshooting Guide
+
+## Live Reload Issues
+
+### Indicator Stuck on "Connecting..."
+
+**Symptoms:**
+- Green indicator shows "🔌 Connecting..." and never changes
+- Changes don't show without hard refresh (Ctrl+Shift+R)
+
+**Causes:**
+- Browser cached old version of `app.html` without live reload script
+- SSE connection blocked by browser extension or firewall
+
+**Solutions:**
+
+1. **Hard refresh once** to clear cache:
+   - Windows/Linux: `Ctrl + Shift + R`
+   - Mac: `Cmd + Shift + R`
+
+2. **Check browser console** (F12):
+   - Look for: `"🔌 Connecting to live reload at http://localhost:3000/live-reload"`
+   - Look for: `"✅ Live reload connected"`
+   - If you see errors, note them
+
+3. **Disable browser extensions** temporarily:
+   - Ad blockers can block SSE connections
+   - Try in incognito/private mode
+
+4. **Check terminal output**:
+   - Should show: `"🔌 [time] Browser connected for live reload (1 total)"`
+   - If not showing, SSE connection failed
+
+5. **Restart dev server**:
+   ```bash
+   # Stop with Ctrl+C
+   npm run dev
+   ```
+
+6. **Clear browser cache completely**:
+   - Chrome: Settings → Privacy → Clear browsing data
+   - Firefox: Settings → Privacy → Clear Data
+   - Edge: Settings → Privacy → Clear browsing data
+
+### Changes Not Showing
+
+**Symptoms:**
+- Indicator shows "✅ Live Reload Active"
+- Page reloads but changes don't appear
+
+**Solutions:**
+
+1. **Check file was saved**:
+   - Verify file has no unsaved indicator in editor
+   - Check terminal shows: `"📝 Detected change: pages/Home.jsx"`
+
+2. **Check imports were regenerated**:
+   - Terminal should show: `"🔄 Regenerating imports..."`
+   - Check `app.html` has your file listed
+
+3. **Verify file location**:
+   - Files must be in: `api/`, `components/`, `pages/`, `modules/`, or `styles/`
+   - Files outside these folders won't trigger reload
+
+4. **Check for JavaScript errors**:
+   - Open browser console (F12)
+   - Look for red error messages
+   - Fix any syntax errors in your code
+
+5. **Manual import regeneration**:
+   ```bash
+   npm run build
+   ```
+
+### Indicator Shows "❌ Connection Error"
+
+**Symptoms:**
+- Red indicator with error message
+- Console shows EventSource errors
+
+**Solutions:**
+
+1. **Check dev server is running**:
+   - Terminal should show: `"✅ Dev server running with live reload!"`
+   - If not, run: `npm run dev`
+
+2. **Check port is correct**:
+   - Browser URL should match terminal output
+   - Example: `http://localhost:3000/`
+
+3. **Firewall blocking connection**:
+   - Allow Node.js through firewall
+   - Try different port: `PORT=3001 npm run dev`
+
+4. **Browser doesn't support EventSource**:
+   - Update to latest browser version
+   - Try different browser (Chrome, Firefox, Edge)
+
+## Page Not Found (404)
+
+**Symptoms:**
+- Clicking link shows 404 page
+- URL is correct but page doesn't load
+
+**Solutions:**
+
+1. **Check function name**:
+   ```jsx
+   // ✅ Correct - ends with "Page"
+   function AboutPage() { }
+   
+   // ❌ Wrong - missing "Page"
+   function About() { }
+   ```
+
+2. **Check file is loaded**:
+   - Open `app.html`
+   - Look for: `<script type="text/babel" src="pages/YourPage.jsx"></script>`
+   - If missing, run: `npm run build`
+
+3. **Check browser console**:
+   - Look for: `"📄 Auto-registered: about → AboutPage()"`
+   - If missing, function name is wrong
+
+4. **Manual registration**:
+   ```jsx
+   // Add this if auto-registration fails
+   registerPage("about", AboutPage);
+   ```
+
+## State Not Working
+
+**Symptoms:**
+- `useState` is undefined
+- State doesn't update
+
+**Solutions:**
+
+1. **Check `/** @jsx h */` at top of file**:
+   ```jsx
+   /** @jsx h */
+   
+   function MyPage() {
+       const [count, setCount] = useState(0);
+       // ...
+   }
+   ```
+
+2. **Check state.js is loaded**:
+   - Open `app.html`
+   - Look for: `<script type="text/babel" src="modules/state.js"></script>`
+
+3. **Check browser console for errors**:
+   - Look for: `"useState is not defined"`
+   - If found, state.js didn't load
+
+## Styling Not Applied
+
+**Symptoms:**
+- Page has no styling
+- Looks like plain HTML
+
+**Solutions:**
+
+1. **Check CSS file is linked**:
+   - Open `app.html`
+   - Look for: `<link rel="stylesheet" href="styles/globals.css">`
+
+2. **Check CSS file exists**:
+   - Verify `styles/globals.css` exists
+   - Check file has content
+
+3. **Check class names**:
+   ```jsx
+   // ✅ Correct
+   <div class="card">
+   
+   // ❌ Wrong (React syntax)
+   <div className="card">
+   ```
+
+4. **Hard refresh**:
+   - CSS might be cached
+   - Press: `Ctrl + Shift + R` (Windows) or `Cmd + Shift + R` (Mac)
+
+## API Routes Not Working
+
+**Symptoms:**
+- `fetchApi()` returns 404
+- API endpoint not found
+
+**Solutions:**
+
+1. **Check API file is loaded**:
+   - Open `app.html`
+   - Look for: `<script type="text/babel" src="api/yourfile.js"></script>`
+
+2. **Check route registration**:
+   ```jsx
+   // In api/users.js
+   registerApiRoute('users', async (req, res) => {
+       // handler
+   });
+   ```
+
+3. **Check URL format**:
+   ```jsx
+   // ✅ Correct
+   await fetchApi('/api/users');
+   
+   // ❌ Wrong
+   await fetchApi('api/users');  // missing leading /
+   await fetchApi('/users');     // missing /api/
+   ```
+
+4. **Check browser console**:
+   - Look for network errors
+   - Check request URL is correct
+
+## Port Already in Use
+
+**Symptoms:**
+- Error: `EADDRINUSE: address already in use :::3000`
+
+**Solutions:**
+
+1. **Server auto-finds next port**:
+   - Check terminal for actual port
+   - Example: `"Server running at http://localhost:3001/"`
+
+2. **Kill process on port 3000**:
+   ```bash
+   # Windows
+   netstat -ano | findstr :3000
+   taskkill /PID <PID> /F
+   
+   # Mac/Linux
+   lsof -ti:3000 | xargs kill -9
+   ```
+
+3. **Use different port**:
+   ```bash
+   PORT=3001 npm run dev
+   ```
+
+## General Tips
+
+### Before Asking for Help
+
+1. **Check browser console** (F12) for errors
+2. **Check terminal output** for server errors
+3. **Try hard refresh** (Ctrl+Shift+R)
+4. **Try incognito mode** to rule out extensions
+5. **Restart dev server** (Ctrl+C, then `npm run dev`)
+
+### Debug Checklist
+
+- [ ] Dev server is running
+- [ ] Browser URL matches server URL
+- [ ] File is saved
+- [ ] File is in correct folder
+- [ ] `/** @jsx h */` at top of JSX files
+- [ ] Function name ends with "Page"
+- [ ] No JavaScript errors in console
+- [ ] Live reload indicator is green
+
+### Still Having Issues?
+
+1. **Check documentation**:
+   - [Getting Started](GETTING-STARTED.md)
+   - [Auto-Registration](AUTO-REGISTRATION.md)
+   - [Dev Server](DEV-SERVER.md)
+
+2. **Create minimal reproduction**:
+   - Create new app: `npx create-aziz-app test-app`
+   - Test if issue persists in fresh app
+
+3. **Report issue** with:
+   - Browser console output
+   - Terminal output
+   - Code that's not working
+   - Steps to reproduce

package/template/modules/router.js

@@ -56,17 +56,35 @@ function h(tag, props, ...children) {
 //  "#/contact" → Contact page
 //
 //  To add a new page:
-//  1. Create pages/YourPage.jsx
-//  2. Load it in app.html with <script type="text/babel">
-//  3. Register it below in the `routes` object
+//  1. Create pages/YourPage.jsx with a function like AboutPage()
+//  2. The page will automatically be registered!
+//  3. Optional: Call registerPage("about", AboutPage) for custom route names
 // ============================================================
 const routes = {};
 
 // registerPage("about", AboutPage) — called by each page file
+// Now optional! Pages auto-register based on function name
 function registerPage(path, component) {
     routes[path] = component;
 }
 
+// Auto-register pages from global scope
+// Looks for functions ending with "Page" (e.g., AboutPage, HomePage)
+function autoRegisterPages() {
+    for (let key in window) {
+        if (key.endsWith('Page') && typeof window[key] === 'function') {
+            // Convert "AboutPage" → "about", "HomePage" → "home"
+            const routeName = key.replace('Page', '').toLowerCase();
+            
+            // Only register if not already registered
+            if (!routes[routeName]) {
+                routes[routeName] = window[key];
+                console.log(`📄 Auto-registered: ${routeName} → ${key}()`);
+            }
+        }
+    }
+}
+
 function getCurrentPath() {
     // Remove the "#/" prefix → "about", "contact", or "" for home
     return window.location.hash.replace("#/", "") || "home";
@@ -162,8 +180,10 @@ function NotFoundPage() {
     return (
         <div class="not-found">
             <h1>404</h1>
-            <p>Page not found.</p>
-            <button class="btn btn-primary" onClick={() => navigate("home")}>Go Home</button>
+            <p>Oops! The page you're looking for doesn't exist.</p>
+            <button class="btn btn-primary" onClick={() => navigate("home")}>
+                Go Home
+            </button>
         </div>
     );
 }
@@ -174,6 +194,9 @@ function NotFoundPage() {
 //  Called once after all scripts are loaded
 // ============================================================
 function startApp() {
+    // Auto-register any pages that weren't manually registered
+    autoRegisterPages();
+    
     renderShell();
     renderPage();
 

package/template/pages/About.jsx

@@ -1,8 +1,9 @@
 /** @jsx h */
 
-// Register this page at route "about" → "#/about"
-registerPage("about", AboutPage);
+// Optional: You can still manually register if you want a custom route name
+// registerPage("about", AboutPage);
 
+// Or just define the function and it auto-registers as "about"
 function AboutPage() {
     return (
         <div>
@@ -28,6 +29,20 @@ function AboutPage() {
                     Go to Contact →
                 </button>
             </div>
+
+            <div class="card">
+                <h2>✨ Auto-Registration</h2>
+                <p>
+                    This page works without calling <code>registerPage()</code>!
+                    Just name your function <code>YourNamePage()</code> and it automatically
+                    becomes a route.
+                </p>
+                <ul style={{ lineHeight: '1.8', marginLeft: '20px' }}>
+                    <li><code>HomePage()</code> → <code>#/home</code></li>
+                    <li><code>AboutPage()</code> → <code>#/about</code></li>
+                    <li><code>ContactPage()</code> → <code>#/contact</code></li>
+                </ul>
+            </div>
         </div>
     );
 }

package/template/pages/ApiDemo.jsx

@@ -1,6 +1,6 @@
 /** @jsx h */
 
-// Register this page at route "api-demo" → "#/api-demo"
+// Auto-registered as "api-demo" route (or manually register for custom name)
 registerPage("api-demo", ApiDemoPage);
 
 function ApiDemoPage() {

package/template/pages/Contact.jsx

@@ -1,8 +1,6 @@
 /** @jsx h */
 
-// Register this page at route "contact" → "#/contact"
-registerPage("contact", ContactPage);
-
+// Auto-registered as "contact" route
 function ContactPage() {
     return (
         <div>

package/template/pages/Example.jsx

@@ -0,0 +1,59 @@
+/** @jsx h */
+
+// That's it! No registerPage() needed.
+// This automatically becomes route "#/example"
+function ExamplePage() {
+    const [message, setMessage] = useState('Hello from Example Page! 🎉');
+    
+    return (
+        <div>
+            <h1>Example Page</h1>
+
+            <div class="card">
+                <h2>✨ Auto-Registration Demo</h2>
+                <p>
+                    This page was created without calling <code>registerPage()</code>.
+                    Just define a function ending with "Page" and it works!
+                </p>
+                
+                <div style={{ 
+                    background: '#f0f0f0', 
+                    padding: '16px', 
+                    borderRadius: '8px',
+                    fontFamily: 'monospace',
+                    fontSize: '14px'
+                }}>
+                    <strong>Function name:</strong> ExamplePage()<br/>
+                    <strong>Auto route:</strong> #/example<br/>
+                    <strong>URL:</strong> {window.location.href}
+                </div>
+            </div>
+
+            <div class="card">
+                <h2>State Management Works Too</h2>
+                <p>{message}</p>
+                <button 
+                    class="btn btn-primary" 
+                    onClick={() => setMessage('State updated! ✅')}
+                >
+                    Update Message
+                </button>
+            </div>
+
+            <div class="card">
+                <h2>Navigation</h2>
+                <div style={{ display: 'flex', gap: '12px' }}>
+                    <button class="btn btn-primary" onClick={() => navigate("home")}>
+                        Home
+                    </button>
+                    <button class="btn btn-primary" onClick={() => navigate("about")}>
+                        About
+                    </button>
+                    <button class="btn btn-primary" onClick={() => navigate("test")}>
+                        Test
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+}

package/template/pages/Home.jsx

@@ -1,7 +1,6 @@
 /** @jsx h */
 
-registerPage("home", HomePage);
-
+// Auto-registered as "home" route
 function HomePage() {
     return (
         <div>

package/template/pages/test.jsx

@@ -1,7 +1,6 @@
 /** @jsx h */
 
-registerPage("test", TestPage);
-
+// Auto-registered as "test" route
 function TestPage() {
     const [count, setCount] = useState(0);
     const [name, setName] = useState('');

package/template/scripts/dev-server.js

@@ -26,57 +26,136 @@ function generateImports() {
 
 // Notify all clients to reload
 function notifyClients() {
-    console.log('🔄 Notifying browser to reload...');
+    const timestamp = new Date().toLocaleTimeString();
+    console.log(`🔄 [${timestamp}] Notifying ${clients.length} browser(s) to reload...`);
     clients.forEach(client => {
         client.write('data: reload\n\n');
     });
 }
 
 // Live reload script to inject
-const liveReloadScript = `
+function getLiveReloadScript() {
+    return `
 <script>
-    // Live reload client
-    const evtSource = new EventSource('/live-reload');
-    evtSource.onmessage = (event) => {
-        if (event.data === 'reload') {
-            console.log('🔄 Changes detected, reloading...');
-            location.reload();
+    (function() {
+        // Create visual indicator
+        const indicator = document.createElement('div');
+        indicator.id = 'live-reload-indicator';
+        indicator.style.cssText = 'position: fixed; bottom: 20px; right: 20px; background: #4caf50; color: white; padding: 8px 16px; border-radius: 20px; font-size: 12px; font-family: monospace; z-index: 9999; box-shadow: 0 2px 8px rgba(0,0,0,0.2); transition: all 0.3s;';
+        indicator.textContent = '🔌 Connecting...';
+        document.body.appendChild(indicator);
+        
+        // Live reload client
+        console.log('🔌 Connecting to live reload at ' + window.location.origin + '/live-reload');
+        
+        let evtSource;
+        let reconnectAttempts = 0;
+        const maxReconnectAttempts = 5;
+        
+        function connect() {
+            try {
+                evtSource = new EventSource('/live-reload');
+                
+                evtSource.onopen = function() {
+                    console.log('✅ Live reload connected');
+                    reconnectAttempts = 0;
+                    indicator.style.background = '#4caf50';
+                    indicator.textContent = '✅ Live Reload Active';
+                    setTimeout(function() {
+                        indicator.style.opacity = '0.3';
+                    }, 2000);
+                };
+                
+                evtSource.onmessage = function(event) {
+                    if (event.data === 'reload') {
+                        console.log('🔄 Changes detected, reloading...');
+                        indicator.style.opacity = '1';
+                        indicator.style.background = '#2196f3';
+                        indicator.textContent = '🔄 Reloading...';
+                        setTimeout(function() {
+                            // Add timestamp to force cache bust
+                            var url = window.location.href.split('?')[0];
+                            window.location.href = url + '?t=' + Date.now();
+                        }, 100);
+                    }
+                };
+                
+                evtSource.onerror = function(err) {
+                    console.log('⚠️ Live reload connection error');
+                    indicator.style.background = '#ff9800';
+                    indicator.style.opacity = '1';
+                    indicator.textContent = '⚠️ Connection Lost';
+                    
+                    if (evtSource) {
+                        evtSource.close();
+                    }
+                    
+                    if (reconnectAttempts < maxReconnectAttempts) {
+                        reconnectAttempts++;
+                        console.log('Reconnecting... attempt ' + reconnectAttempts);
+                        setTimeout(connect, 2000);
+                    } else {
+                        indicator.textContent = '❌ Reload Failed';
+                        console.log('Max reconnection attempts reached. Please refresh manually.');
+                    }
+                };
+            } catch (e) {
+                console.error('Failed to create EventSource:', e);
+                indicator.style.background = '#f44336';
+                indicator.textContent = '❌ Connection Error';
+            }
         }
-    };
-    evtSource.onerror = () => {
-        console.log('⚠️ Live reload disconnected');
-    };
-    console.log('✅ Live reload connected');
+        
+        connect();
+        
+        // Show indicator on hover
+        indicator.addEventListener('mouseenter', function() {
+            indicator.style.opacity = '1';
+        });
+        indicator.addEventListener('mouseleave', function() {
+            if (indicator.textContent.includes('Active')) {
+                indicator.style.opacity = '0.3';
+            }
+        });
+    })();
 </script>
 `;
+}
 
 // Create HTTP server
 function createServer(port) {
     return http.createServer((req, res) => {
         // Handle live reload SSE endpoint
-        if (req.url === '/live-reload') {
+        if (req.url === '/live-reload' || req.url.startsWith('/live-reload?')) {
             res.writeHead(200, {
                 'Content-Type': 'text/event-stream',
-                'Cache-Control': 'no-cache',
+                'Cache-Control': 'no-cache, no-store, must-revalidate',
                 'Connection': 'keep-alive',
-                'Access-Control-Allow-Origin': '*'
+                'Access-Control-Allow-Origin': '*',
+                'X-Accel-Buffering': 'no'
             });
             
+            // Send initial connection message
+            res.write(':ok\n\n');
+            
             clients.push(res);
-            console.log('🔌 Browser connected for live reload');
+            const timestamp = new Date().toLocaleTimeString();
+            console.log(`🔌 [${timestamp}] Browser connected for live reload (${clients.length} total)`);
             
             req.on('close', () => {
                 const index = clients.indexOf(res);
                 if (index !== -1) {
                     clients.splice(index, 1);
                 }
-                console.log('🔌 Browser disconnected from live reload');
+                const closeTime = new Date().toLocaleTimeString();
+                console.log(`🔌 [${closeTime}] Browser disconnected (${clients.length} remaining)`);
             });
             
             return;
         }
 
-        let filePath = '.' + req.url;
+        // Strip query parameters for file serving (cache busting)
+        let filePath = '.' + req.url.split('?')[0];
         if (filePath === './') {
             filePath = './app.html';
         }
@@ -115,10 +194,16 @@ function createServer(port) {
             } else {
                 // Inject live reload script into HTML files
                 if (extname === '.html') {
-                    content = content.toString().replace('</body>', liveReloadScript + '</body>');
+                    content = content.toString().replace('</body>', getLiveReloadScript() + '</body>');
                 }
                 
-                res.writeHead(200, { 'Content-Type': contentType });
+                // Add cache control headers to prevent caching during development
+                res.writeHead(200, { 
+                    'Content-Type': contentType,
+                    'Cache-Control': 'no-cache, no-store, must-revalidate',
+                    'Pragma': 'no-cache',
+                    'Expires': '0'
+                });
                 res.end(content, 'utf-8');
             }
         });
@@ -143,16 +228,35 @@ function startServer(port) {
 }
 
 // Watch directories
-const watchDirs = ['api', 'components', 'pages', 'modules'];
+const watchDirs = ['api', 'components', 'pages', 'modules', 'styles'];
+
+// Debounce to prevent multiple rapid reloads
+let reloadTimeout = null;
 
 console.log('👀 Watching for changes in:');
 watchDirs.forEach(dir => {
     if (fs.existsSync(dir)) {
         console.log(`   - ${dir}/`);
         fs.watch(dir, { recursive: false }, (eventType, filename) => {
-            if (filename && (filename.endsWith('.js') || filename.endsWith('.jsx'))) {
+            if (filename && (filename.endsWith('.js') || filename.endsWith('.jsx') || filename.endsWith('.css'))) {
                 console.log(`\n📝 Detected change: ${dir}/${filename}`);
-                generateImports();
+                
+                // Clear existing timeout
+                if (reloadTimeout) {
+                    clearTimeout(reloadTimeout);
+                }
+                
+                // For CSS changes, just reload without regenerating imports
+                if (filename.endsWith('.css')) {
+                    reloadTimeout = setTimeout(() => {
+                        notifyClients();
+                    }, 300);
+                } else {
+                    // For JS/JSX changes, regenerate imports
+                    reloadTimeout = setTimeout(() => {
+                        generateImports();
+                    }, 500);
+                }
             }
         });
     }