create-aziz-app 2.0.6 → 2.0.7

package/bin/create-aziz-app.js

@@ -312,6 +312,9 @@ function Footer() {
     
     // Update all pages
     updatePagesForBootstrap(targetDir);
+    
+    // Update 404 page
+    update404ForBootstrap(targetDir);
 }
 
 // Update components for Tailwind
@@ -380,6 +383,9 @@ function Footer() {
     
     // Update all pages
     updatePagesForTailwind(targetDir);
+    
+    // Update 404 page
+    update404ForTailwind(targetDir);
 }
 
 // Update all pages for Bootstrap
@@ -688,6 +694,79 @@ function TestPage() {
 `;
 }
 
+// Update 404 page for Bootstrap
+function update404ForBootstrap(targetDir) {
+    const routerPath = path.join(targetDir, 'modules', 'router.js');
+    if (!fs.existsSync(routerPath)) return;
+    
+    let content = fs.readFileSync(routerPath, 'utf8');
+    
+    const old404 = `// 404 page — shown when no route matches
+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>
+        </div>
+    );
+}`;
+    
+    const new404 = `// 404 page — shown when no route matches
+function NotFoundPage() {
+    return (
+        <div class="container text-center py-5">
+            <h1 class="display-1 fw-bold text-primary mb-4">404</h1>
+            <p class="lead mb-4">Oops! The page you're looking for doesn't exist.</p>
+            <button class="btn btn-primary btn-lg" onClick={() => navigate("home")}>
+                <i class="bi bi-house-door me-2"></i>Go Home
+            </button>
+        </div>
+    );
+}`;
+    
+    content = content.replace(old404, new404);
+    fs.writeFileSync(routerPath, content);
+}
+
+// Update 404 page for Tailwind
+function update404ForTailwind(targetDir) {
+    const routerPath = path.join(targetDir, 'modules', 'router.js');
+    if (!fs.existsSync(routerPath)) return;
+    
+    let content = fs.readFileSync(routerPath, 'utf8');
+    
+    const old404 = `// 404 page — shown when no route matches
+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>
+        </div>
+    );
+}`;
+    
+    const new404 = `// 404 page — shown when no route matches
+function NotFoundPage() {
+    return (
+        <div class="flex flex-col items-center justify-center min-h-[60vh] text-center px-4">
+            <h1 class="text-9xl font-bold text-primary mb-4">404</h1>
+            <p class="text-2xl text-gray-600 mb-8">Oops! The page you're looking for doesn't exist.</p>
+            <button 
+                class="px-8 py-3 bg-primary text-dark font-bold rounded-lg hover:opacity-80 transition transform hover:scale-105"
+                onClick={() => navigate("home")}
+            >
+                ← Go Home
+            </button>
+        </div>
+    );
+}`;
+    
+    content = content.replace(old404, new404);
+    fs.writeFileSync(routerPath, content);
+}
+
 // Run main function
 main().catch(err => {
     console.error('❌ Error:', err);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-aziz-app",
-  "version": "2.0.6",
+  "version": "2.0.7",
   "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/.vscode/settings.json

@@ -0,0 +1,15 @@
+{
+  "tailwindCSS.experimental.classRegex": [
+    ["class\\s*=\\s*['\"`]([^'\"`]*)['\"`]", "([^\\s]+)"]
+  ],
+  "tailwindCSS.includeLanguages": {
+    "javascript": "javascript",
+    "javascriptreact": "javascript"
+  },
+  "files.associations": {
+    "*.jsx": "javascriptreact"
+  },
+  "editor.quickSuggestions": {
+    "strings": true
+  }
+}

package/template/scripts/dev-server.js

@@ -35,59 +35,18 @@ function notifyClients() {
 // Live reload script to inject
 const liveReloadScript = `
 <script>
-    // Hot Module Replacement (HMR) - Smart reload
+    // Live reload client
     const evtSource = new EventSource('/live-reload');
-    let isReloading = false;
-    
     evtSource.onmessage = (event) => {
-        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();
-            }
+        if (event.data === 'reload') {
+            console.log('🔄 Changes detected, reloading...');
+            location.reload();
         }
     };
-    
     evtSource.onerror = () => {
         console.log('⚠️ Live reload disconnected');
     };
-    
-    console.log('✅ Hot reload connected');
+    console.log('✅ Live reload connected');
 </script>
 `;
 

package/template/tailwind.config.js

@@ -0,0 +1,17 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./pages/**/*.{js,jsx}",
+    "./components/**/*.{js,jsx}",
+    "./app.html",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        primary: '#61dafb',
+        dark: '#282c34',
+      },
+    },
+  },
+  plugins: [],
+}