frontend-hamroun 1.2.75 → 1.2.77

package/templates/fullstack-app/src/main.tsx

@@ -1,20 +1,16 @@
 import { render, hydrate, jsx } from 'frontend-hamroun';
-import { router } from './router';
 // Import Tailwind CSS
 import './styles.css';
 
-// Import pages directly to ensure they're available
-import HomePage from './pages/index';
-import AboutPage from './pages/about';
-import UsersPage from './pages/users';
-
-// Create a mutable variable for hydration state
-let isHydrating = document.getElementById('root')?.innerHTML.trim() !== '';
-
-console.log('[Client] Running client-side code. Hydration state:', isHydrating);
+// Type declaration for window.__INITIAL_STATE__
+declare global {
+  interface Window {
+    __INITIAL_STATE__?: any;
+  }
+}
 
 // Get initial state from server
-const initialState = window.__INITIAL_STATE__ || { 
+const initialState = window.__INITIAL_STATE__ || {
   route: window.location.pathname,
   timestamp: new Date().toISOString(),
   serverRendered: false,
@@ -26,196 +22,134 @@ const initialState = window.__INITIAL_STATE__ || {
 
 console.log('[Client] Initial state:', initialState);
 
-// Function to fetch data from API
-async function fetchData(path) {
-  try {
-    console.log(`[Client] Fetching data from API: ${path}`);
-    const response = await fetch(`/api${path}`);
-    if (!response.ok) {
-      throw new Error(`API request failed: ${response.status}`);
-    }
-    const data = await response.json();
-    console.log(`[Client] Received data:`, data);
-    return data;
-  } catch (error) {
-    console.error(`[Client] Error fetching data from ${path}:`, error);
-    return null;
-  }
-}
-
-// Initialize known routes
-function initializeRouter() {
-  console.log('[Client] Initializing router with known pages');
-  router.register('index', HomePage);
-  router.register('about', AboutPage);
-  router.register('users', UsersPage);
-}
-
-// Call initialization before rendering
-initializeRouter();
+// Create a mutable variable for hydration state
+let isHydrating = document.getElementById('root')?.innerHTML.trim() !== '';
 
-// Function to determine which page to render based on the route
-async function renderApp() {
+// Function to handle navigation
+async function handleRouteChange(path: string, isPushState = true) {
   try {
-    // Get current path
-    const currentPath = window.location.pathname;
-    
-    console.log(`[Client] Rendering for path: ${currentPath}`);
+    console.log(`[Router] Navigating to: ${path}`);
     
-    // Find the root element
-    const rootElement = document.getElementById('root');
-    if (!rootElement) {
-      console.error('[Client] Root element not found');
-      return;
+    // Update URL if needed
+    if (isPushState) {
+      window.history.pushState(null, '', path);
     }
     
-    // Fetch data based on the current route
-    console.log(`[Client] Fetching users data for ${currentPath}`);
-    const users = await fetchData('/users');
-    
-    if (users) {
-      initialState.data = {
-        ...initialState.data,
-        users
-      };
-      console.log(`[Client] Updated state with ${users.length} users`);
-    }
+    // Dynamically load the page component based on the path
+    const normalizedPath = path === '/' ? 'index' : path.replace(/^\//, '');
     
-    // Get the component for the current path
-    let PageComponent = null;
-    
-    // Special cases for known routes
-    if (currentPath === '/about') {
-      try {
-        const AboutPage = await import('./pages/about');
-        PageComponent = AboutPage.default;
-      } catch (err) {
-        console.error('[Client] Failed to load about page:', err);
-      }
-    } else if (currentPath === '/users') {
+    let Page;
+    try {
+      // Dynamic import for the page component
+      const module = await import(`./pages/${normalizedPath}.tsx`);
+      Page = module.default;
+    } catch (error) {
+      console.warn(`[Router] Could not load page for ${path}, trying index file`);
       try {
-        const UsersPage = await import('./pages/users');
-        PageComponent = UsersPage.default;
-      } catch (err) {
-        console.error('[Client] Failed to load users page:', err);
-      }
-    } else {
-      // Try the router for other paths
-      PageComponent = await router.resolve(currentPath);
-    }
-    
-    // If component wasn't found, handle special cases
-    if (!PageComponent) {
-      console.warn(`[Client] Page component not found for ${currentPath}, checking special cases`);
-      
-      // Special case for /users
-      if (currentPath === '/users') {
+        // Try loading index file in directory
+        const module = await import(`./pages/${normalizedPath}/index.tsx`);
+        Page = module.default;
+      } catch (innerError) {
+        console.error(`[Router] Failed to load page component for ${path}`);
+        
+        // Try to load 404 page
         try {
-          console.log('[Client] Attempting direct import of Users page');
-          const UsersModule = await import('./pages/users');
-          if (UsersModule.default) {
-            PageComponent = UsersModule.default;
+          const notFoundModule = await import(`./pages/404.tsx`);
+          Page = notFoundModule.default;
+        } catch (notFoundError) {
+          // If all fails, render a simple not found message
+          const rootElement = document.getElementById('root');
+          if (rootElement) {
+            render(
+              <div style={{ padding: '20px', maxWidth: '800px', margin: '0 auto' }}>
+                <h1>Page Not Found</h1>
+                <p>The page you requested could not be found.</p>
+                <a href="/" style={{ color: '#0066cc' }}>Go to Home</a>
+              </div>,
+              rootElement
+            );
           }
-        } catch (err) {
-          console.error('[Client] Failed to import Users page:', err);
+          return;
         }
       }
     }
     
-    // Final fallback if still no component
-    if (!PageComponent) {
-      // Create a simple fallback component
-      PageComponent = ({ initialState }) => jsx('div', { 
-        style: 'padding: 20px; max-width: 800px; margin: 0 auto;' 
-      }, [
-        jsx('h1', {}, ['Page Not Found']),
-        jsx('p', {}, [`No component found for path: ${initialState.route}`]),
-        jsx('a', { href: '/', style: 'color: #0066cc;' }, ['Go to Home'])
-      ]);
+    // Get the current page props
+    let pageProps = initialState.pageProps || {};
+    
+    // If the page defines getServerSideProps, fetch data
+    if (Page.getServerSideProps) {
+      try {
+        const response = await fetch(`/api/__props${path}`);
+        if (response.ok) {
+          const data = await response.json();
+          pageProps = data.props || {};
+        }
+      } catch (error) {
+        console.error('[Router] Error fetching page props:', error);
+      }
     }
     
-    // Update state with current route and timestamp
-    initialState.route = currentPath;
-    initialState.timestamp = new Date().toISOString();
-    initialState.serverRendered = false; // This is now a client render
+    // Update the state with current route
+    const updatedState = {
+      ...initialState,
+      route: path,
+      pageProps
+    };
+    
+    // Render the page
+    const rootElement = document.getElementById('root');
+    if (!rootElement) return;
     
-    // Render or hydrate
-    if (isHydrating) {
+    if (isHydrating && path === initialState.route) {
       console.log('[Client] Hydrating server-rendered content');
-      hydrate(<PageComponent initialState={initialState} />, rootElement);
-      // After hydration is complete, set to false for future renders
+      hydrate(<Page {...pageProps} initialState={updatedState} />, rootElement);
       isHydrating = false;
     } else {
       console.log('[Client] Rendering client-side');
-      render(<PageComponent initialState={initialState} />, rootElement);
+      render(<Page {...pageProps} initialState={updatedState} />, rootElement);
     }
   } catch (error) {
-    console.error('[Client] Error rendering app:', error);
-    
-    // Render error message
-    const rootElement = document.getElementById('root');
-    if (rootElement) {
-      rootElement.innerHTML = `
-        <div style="padding: 20px; color: red;">
-          <h1>Error</h1>
-          <p>${error.message}</p>
-          <pre>${error.stack}</pre>
-        </div>
-      `;
-    }
+    console.error('[Router] Navigation error:', error);
   }
 }
 
-// Initial render/hydrate
-renderApp();
+// Handle initial route
+handleRouteChange(window.location.pathname, false);
 
-// Set up client-side navigation
+// Handle client-side navigation
 document.addEventListener('click', (e) => {
-  // Find if the clicked element is an anchor or inside an anchor
-  let target = e.target;
+  let target = e.target as HTMLElement | null;
+  
+  // Find closest anchor element
   while (target && target.tagName !== 'A') {
     target = target.parentElement;
     if (!target) break;
   }
   
-  // If we found an anchor that's for internal navigation
   if (target && 
       target.tagName === 'A' && 
-      target.getAttribute('href') &&
-      target.getAttribute('href').startsWith('/') && 
-      !target.getAttribute('href').startsWith('//') &&
+      target.getAttribute('href') && 
+      target.getAttribute('href')?.startsWith('/') && 
+      !target.getAttribute('href')?.startsWith('//') && 
       !target.getAttribute('target')) {
-    e.preventDefault();
-    const href = target.getAttribute('href');
-    
-    // Update history
-    window.history.pushState(null, '', href);
     
-    // Set to false since we're doing client-side navigation now
-    isHydrating = false;
-    
-    // Re-render the app
-    renderApp();
+    e.preventDefault();
+    const href = target.getAttribute('href') || '/';
+    handleRouteChange(href);
   }
 });
 
 // Handle back/forward navigation
 window.addEventListener('popstate', () => {
-  // Not hydrating during history navigation
-  isHydrating = false;
-  renderApp();
+  handleRouteChange(window.location.pathname, false);
 });
 
-// Setup live reload for development
+// Set up socket.io for live reload in development
 if (typeof io !== 'undefined') {
   const socket = io();
-  
   socket.on('reload', () => {
     console.log('[Dev] Reloading page due to file changes');
     window.location.reload();
   });
-  
-  socket.on('welcome', (data) => {
-    console.log('[Dev] Connected to development server:', data);
-  });
 }

package/templates/fullstack-app/src/middleware.ts

@@ -0,0 +1,28 @@
+// Next.js-like global middleware
+import { Request, Response, NextFunction } from 'express';
+
+// Extend the Express Request interface
+declare global {
+  namespace Express {
+    interface Request {
+      timestamp: string;
+    }
+  }
+}
+
+// This middleware will be applied to all routes (API and pages)
+export default async function middleware(req: Request, res: Response, next?: NextFunction) {
+  // Add request timestamp
+  req.timestamp = await new Date().toISOString();
+  
+  // Log all requests in development mode
+  if (process.env.NODE_ENV !== 'production') {
+    console.log(`[${req.timestamp}] ${req.method} ${req.url}`);
+  }
+  
+  // Example of response header modification
+  res.setHeader('X-Powered-By', 'Frontend Hamroun');
+  
+  // Continue to next middleware
+  if (next) next();
+}

package/templates/fullstack-app/src/pages/404.tsx

@@ -0,0 +1,28 @@
+import { jsx } from 'frontend-hamroun';
+
+export default function NotFound({ initialState }) {
+  return (
+    <div className="not-found-container max-w-4xl mx-auto p-6">
+      <div className="bg-gray-50 border border-gray-200 rounded-lg p-8 shadow-sm">
+        <h1 className="text-3xl font-bold text-gray-700 mb-4">Page Not Found</h1>
+        
+        <p className="text-lg text-gray-600 mb-4">
+          The page you are looking for does not exist or has been moved.
+        </p>
+        
+        <p className="text-gray-600 mb-6">
+          Path: <code className="bg-gray-100 px-2 py-1 rounded">{initialState?.route || 'unknown'}</code>
+        </p>
+        
+        <div className="mt-6">
+          <a 
+            href="/"
+            className="inline-block px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
+          >
+            Back to Home
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/fullstack-app/src/pages/_app.tsx

@@ -0,0 +1,11 @@
+import { jsx } from 'frontend-hamroun';
+import Layout from '../components/Layout';
+
+// This is the main App wrapper component similar to Next.js _app.js
+export default function App({ Component, pageProps, initialState }) {
+  return (
+    <Layout>
+      <Component {...pageProps} initialState={initialState} />
+    </Layout>
+  );
+}

package/templates/fullstack-app/src/pages/_document.tsx

@@ -0,0 +1,25 @@
+import { jsx } from 'frontend-hamroun';
+
+export default function Document({ 
+  title = 'Frontend Hamroun App',
+  headContent,
+  bodyContent,
+  scripts
+}) {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>{title}</title>
+        <link rel="stylesheet" href="/styles.css" />
+        {headContent}
+      </head>
+      <body>
+        <div id="root">{bodyContent}</div>
+        <script src="/build/main.js" type="module"></script>
+        {scripts}
+      </body>
+    </html>
+  );
+}

package/templates/fullstack-app/src/pages/_error.tsx

@@ -0,0 +1,45 @@
+import { jsx, useState, useEffect } from 'frontend-hamroun';
+
+export default function ErrorPage({ initialState }) {
+  const { error } = initialState || {};
+  const [showDetails, setShowDetails] = useState(false);
+  const isDev = process.env.NODE_ENV !== 'production';
+  
+  return (
+    <div className="error-page-container max-w-4xl mx-auto p-6">
+      <div className="bg-red-50 border border-red-200 rounded-lg p-8 shadow-sm">
+        <h1 className="text-3xl font-bold text-red-700 mb-4">Something went wrong</h1>
+        
+        <p className="text-lg text-red-600 mb-4">
+          {error?.message || "An unexpected error occurred"}
+        </p>
+        
+        {isDev && error?.stack && (
+          <div className="mt-6">
+            <button
+              className="text-blue-600 underline mb-2"
+              onClick={() => setShowDetails(!showDetails)}
+            >
+              {showDetails ? "Hide" : "Show"} technical details
+            </button>
+            
+            {showDetails && (
+              <pre className="bg-gray-100 p-4 rounded-md text-sm overflow-auto max-h-96 text-gray-800">
+                {error.stack}
+              </pre>
+            )}
+          </div>
+        )}
+        
+        <div className="mt-6">
+          <a 
+            href="/"
+            className="inline-block px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
+          >
+            Back to Home
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/fullstack-app/src/pages/about.tsx

@@ -0,0 +1,71 @@
+import { jsx } from 'frontend-hamroun';
+import Layout from '../components/Layout';
+
+export default function AboutPage({ initialState }) {
+  return (
+    <Layout title="About - Frontend Hamroun">
+      <div className="max-w-4xl mx-auto">
+        <h1 className="text-3xl font-bold text-blue-600 mb-6">
+          About Frontend Hamroun
+        </h1>
+        
+        <div className="bg-white shadow-lg rounded-lg p-8 mb-8">
+          <h2 className="text-xl font-semibold text-gray-800 mb-4">What is Frontend Hamroun?</h2>
+          <p className="text-gray-600 mb-4">
+            Frontend Hamroun is a lightweight JavaScript framework for building modern web applications.
+            It provides a familiar component-based architecture with hooks, JSX support, and 
+            server-side rendering capabilities.
+          </p>
+          <p className="text-gray-600 mb-4">
+            This framework is designed to be simple yet powerful, offering the essential features
+            needed for web application development without the complexity of larger frameworks.
+          </p>
+          
+          <h3 className="text-lg font-medium text-gray-700 mt-6 mb-2">Key Features:</h3>
+          <ul className="list-disc pl-6 text-gray-600 space-y-2">
+            <li>Component-based architecture</li>
+            <li>JSX support</li>
+            <li>Hooks for state and effects</li>
+            <li>Server-side rendering</li>
+            <li>Minimal API surface</li>
+            <li>File-based routing</li>
+            <li>Built-in API routes</li>
+          </ul>
+        </div>
+        
+        <div className="bg-white shadow-lg rounded-lg p-8">
+          <h2 className="text-xl font-semibold text-gray-800 mb-4">Getting Started</h2>
+          <p className="text-gray-600 mb-4">
+            This application was created using the Frontend Hamroun fullstack template,
+            which provides a complete setup for building applications with server-side rendering,
+            API routes, and client-side navigation.
+          </p>
+          
+          <div className="bg-gray-50 p-4 rounded-md mt-4">
+            <h3 className="text-md font-medium text-gray-700 mb-2">Quick Start:</h3>
+            <pre className="bg-gray-800 text-gray-100 p-4 rounded overflow-x-auto">
+              <code>{`# Create a new application
+npx frontend-hamroun create my-app
+
+# Change directory
+cd my-app
+
+# Start the development server
+npm run dev`}</code>
+            </pre>
+          </div>
+        </div>
+      </div>
+    </Layout>
+  );
+}
+
+// Server-side data fetching
+export async function getServerSideProps() {
+  return {
+    props: {
+      pageTitle: 'About Frontend Hamroun',
+      description: 'Learn more about the Frontend Hamroun framework'
+    }
+  };
+}

package/templates/fullstack-app/src/pages/api/users/[id].ts

@@ -0,0 +1,73 @@
+// Dynamic API Route for individual user operations
+import { Request, Response } from 'express';
+
+// Sample data store
+const users = [
+  { id: 1, name: 'User 1', email: 'user1@example.com' },
+  { id: 2, name: 'User 2', email: 'user2@example.com' },
+  { id: 3, name: 'User 3', email: 'user3@example.com' }
+];
+
+// Utility to find user by ID
+const findUser = (id: number) => users.find(user => user.id === id);
+
+// GET handler for retrieving a specific user
+export async function get(req: Request, res: Response) {
+  const userId = parseInt(req.params.id);
+  
+  if (isNaN(userId)) {
+    return res.status(400).json({ error: 'Invalid user ID' });
+  }
+  
+  const user = findUser(userId);
+  
+  if (!user) {
+    return res.status(404).json({ error: 'User not found' });
+  }
+  
+  res.json(user);
+}
+
+// PUT handler for updating a user
+export async function put(req: Request, res: Response) {
+  const userId = parseInt(req.params.id);
+  
+  if (isNaN(userId)) {
+    return res.status(400).json({ error: 'Invalid user ID' });
+  }
+  
+  const userIndex = users.findIndex(user => user.id === userId);
+  
+  if (userIndex === -1) {
+    return res.status(404).json({ error: 'User not found' });
+  }
+  
+  // Update user, but preserve the ID
+  const updatedUser = { ...req.body, id: userId };
+  users[userIndex] = updatedUser;
+  
+  res.json(updatedUser);
+}
+
+// DELETE handler for removing a user
+export async function del(req: Request, res: Response) {
+  const userId = parseInt(req.params.id);
+  
+  if (isNaN(userId)) {
+    return res.status(400).json({ error: 'Invalid user ID' });
+  }
+  
+  const userIndex = users.findIndex(user => user.id === userId);
+  
+  if (userIndex === -1) {
+    return res.status(404).json({ error: 'User not found' });
+  }
+  
+  // Remove the user
+  users.splice(userIndex, 1);
+  
+  res.status(204).end();
+}
+
+// Use delete handler for DELETE method since 'delete' is a reserved word
+export const DELETE = del;

package/templates/fullstack-app/src/pages/api/users/index.ts

@@ -0,0 +1,43 @@
+// Next.js-like API Route for Users
+import { Request, Response } from 'express';
+
+// Sample data store
+const users = [
+  { id: 1, name: 'User 1', email: 'user1@example.com' },
+  { id: 2, name: 'User 2', email: 'user2@example.com' },
+  { id: 3, name: 'User 3', email: 'user3@example.com' }
+];
+
+// GET handler for retrieving all users
+export async function get(req: Request, res: Response) {
+  // Option to simulate delay for testing loading states
+  const delay = req.query.delay ? parseInt(req.query.delay as string) : 0;
+  
+  if (delay) {
+    await new Promise(resolve => setTimeout(resolve, delay));
+  }
+  
+  res.json(users);
+}
+
+// POST handler for creating a new user
+export async function post(req: Request, res: Response) {
+  try {
+    const newUser = req.body;
+    
+    // Validation
+    if (!newUser.name || !newUser.email) {
+      return res.status(400).json({ error: 'Name and email are required' });
+    }
+    
+    // Generate new ID
+    const newId = Math.max(0, ...users.map(u => u.id)) + 1;
+    const createdUser = { ...newUser, id: newId };
+    
+    users.push(createdUser);
+    
+    res.status(201).json(createdUser);
+  } catch (error) {
+    res.status(500).json({ error: 'Failed to create user' });
+  }
+}