create-aziz-app 2.0.7 → 2.0.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-aziz-app",
-  "version": "2.0.7",
+  "version": "2.0.8",
   "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,10 @@ 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
 - **[Quick Start](docs/QUICK-START.md)** - Quick examples
 
 ## 🛠️ Commands
@@ -153,8 +168,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

@@ -40,6 +40,7 @@
     <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>
 

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/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,7 +26,8 @@ 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');
     });
@@ -35,18 +36,74 @@ function notifyClients() {
 // Live reload script to inject
 const liveReloadScript = `
 <script>
-    // Live reload client
-    const evtSource = new EventSource('/live-reload');
-    evtSource.onmessage = (event) => {
-        if (event.data === 'reload') {
-            console.log('🔄 Changes detected, reloading...');
-            location.reload();
-        }
-    };
-    evtSource.onerror = () => {
-        console.log('⚠️ Live reload disconnected');
-    };
-    console.log('✅ Live reload connected');
+    (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...');
+        const evtSource = new EventSource('/live-reload');
+        
+        evtSource.onopen = () => {
+            console.log('✅ Live reload connected');
+            indicator.style.background = '#4caf50';
+            indicator.textContent = '✅ Live Reload Active';
+            // Hide after 2 seconds
+            setTimeout(() => {
+                indicator.style.opacity = '0.3';
+            }, 2000);
+        };
+        
+        evtSource.onmessage = (event) => {
+            if (event.data === 'reload') {
+                console.log('🔄 Changes detected, reloading...');
+                indicator.style.opacity = '1';
+                indicator.style.background = '#2196f3';
+                indicator.textContent = '🔄 Reloading...';
+                // Force reload and clear cache
+                setTimeout(() => {
+                    window.location.reload(true);
+                }, 100);
+            }
+        };
+        
+        evtSource.onerror = (err) => {
+            console.log('⚠️ Live reload disconnected, retrying...');
+            indicator.style.background = '#ff9800';
+            indicator.style.opacity = '1';
+            indicator.textContent = '⚠️ Reconnecting...';
+            evtSource.close();
+            // Retry connection after 2 seconds
+            setTimeout(() => {
+                window.location.reload();
+            }, 2000);
+        };
+        
+        // Show indicator on hover
+        indicator.addEventListener('mouseenter', () => {
+            indicator.style.opacity = '1';
+        });
+        indicator.addEventListener('mouseleave', () => {
+            indicator.style.opacity = '0.3';
+        });
+    })();
 </script>
 `;
 
@@ -118,7 +175,13 @@ function createServer(port) {
                     content = content.toString().replace('</body>', liveReloadScript + '</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 +206,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);
+                }
             }
         });
     }