frontend-hamroun 1.2.77 → 1.2.79

package/templates/complete-app/server.ts

@@ -0,0 +1,275 @@
+import express from 'express';
+import { fileURLToPath } from 'url';
+import { dirname, join } from 'path';
+import { renderToString } from 'frontend-hamroun';
+import { Database } from 'frontend-hamroun';
+import { AuthService } from 'frontend-hamroun';
+import { requestLogger, errorHandler, notFoundHandler, rateLimit } from 'frontend-hamroun';
+import dotenv from 'dotenv';
+import fetch from 'node-fetch';
+
+// Load environment variables
+dotenv.config();
+
+// Get directory name in ESM
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+// Create Express app
+const app = express();
+const port = process.env.PORT ? parseInt(process.env.PORT) : 3000;
+
+// Add middleware
+app.use(express.json());
+app.use(express.urlencoded({ extended: true }));
+app.use(requestLogger);
+
+// Rate limiting for API routes
+app.use('/api', rateLimit({ 
+  windowMs: 15 * 60 * 1000, // 15 minutes
+  max: 100 // limit each IP to 100 requests per windowMs
+}));
+
+// Configure database if connection string is provided
+let db = null;
+if (process.env.DATABASE_URL) {
+  db = new Database({
+    url: process.env.DATABASE_URL,
+    type: (process.env.DATABASE_TYPE || 'mongodb') as 'mongodb' | 'mysql' | 'postgres'
+  });
+  
+  // Connect to database
+  try {
+    await db.connect();
+    console.log('Database connected successfully');
+  } catch (error) {
+    console.error('Database connection failed:', error);
+  }
+}
+
+// Configure auth if secret is provided
+let auth = null;
+if (process.env.JWT_SECRET) {
+  auth = new AuthService({
+    secret: process.env.JWT_SECRET,
+    expiresIn: process.env.JWT_EXPIRES_IN || '24h'
+  });
+  
+  // Add auth middleware
+  app.use(auth.initialize());
+  
+  // Example protected route
+  app.get('/api/protected', auth.requireAuth(), (req, res) => {
+    res.json({ message: 'Protected route accessed successfully' });
+  });
+  
+  // Example role-based protection
+  app.get('/api/admin', auth.requireRoles(['admin']), (req, res) => {
+    res.json({ message: 'Admin route accessed successfully' });
+  });
+  
+  // Login route
+  app.post('/api/login', async (req, res) => {
+    const { username, password } = req.body;
+    
+    // In a real app, fetch user from database
+    const user = { id: 1, username, roles: ['user'] };
+    const token = auth.generateToken(user);
+    
+    res.json({ token, user: { id: user.id, username: user.username, roles: user.roles } });
+  });
+}
+
+// Serve static files from public directory
+app.use(express.static(join(__dirname, 'public')));
+
+// API endpoint example
+app.get('/api/page-data', (req, res) => {
+  res.json({
+    title: 'Server-side Data',
+    content: 'This data was fetched from the server',
+    timestamp: new Date().toISOString()
+  });
+});
+
+// Meta tag generation function (using local logic for simplicity)
+async function generateMetaTags(pageContent) {
+  // Extract title from page content
+  const title = pageContent.split('\n')[0].replace(/[#*]/g, '').trim() || 
+    'Frontend Hamroun SSR Page';
+  
+  // Generate description from content
+  const description = pageContent.substring(0, 150) + '...';
+  
+  // Extract keywords
+  const keywords = pageContent
+    .toLowerCase()
+    .replace(/[^\w\s]/g, '')
+    .split(/\s+/)
+    .filter(w => w.length > 3)
+    .slice(0, 5)
+    .join(', ');
+  
+  return {
+    title,
+    description,
+    keywords
+  };
+}
+
+// Helper function to check if file exists
+async function fileExists(path) {
+  try {
+    const fs = await import('fs/promises');
+    await fs.access(path);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+// Implement basic SSR without relying on complex server functionality
+app.get('*', async (req, res) => {
+  try {
+    // Import the page component
+    const pagesDir = join(__dirname, 'src', 'pages');
+    let componentPath;
+    
+    // Map URL path to component file
+    if (req.path === '/') {
+      componentPath = join(pagesDir, 'index.js');
+    } else {
+      componentPath = join(pagesDir, `${req.path}.js`);
+      // Check if it's a directory with index.js
+      if (!await fileExists(componentPath)) {
+        componentPath = join(pagesDir, req.path, 'index.js');
+      }
+    }
+    
+    // If component doesn't exist, return 404
+    if (!await fileExists(componentPath)) {
+      return res.status(404).send(`
+        <!DOCTYPE html>
+        <html>
+          <head>
+            <title>404 - Page Not Found</title>
+          </head>
+          <body>
+            <h1>404 - Page Not Found</h1>
+            <p>The page you requested does not exist.</p>
+          </body>
+        </html>
+      `);
+    }
+    
+    // Import the component
+    const { default: PageComponent } = await import(componentPath);
+    
+    // Generate page content for meta tags
+    const pageContent = `
+      Frontend Hamroun SSR Page
+      This is a server-rendered page using the Frontend Hamroun framework.
+      Path: ${req.path}
+      Timestamp: ${new Date().toISOString()}
+    `;
+    
+    // Generate meta tags
+    const metaTags = await generateMetaTags(pageContent);
+    
+    // Render the component to string
+    const content = renderToString(PageComponent());
+    
+    // Send the HTML response
+    res.send(`
+      <!DOCTYPE html>
+      <html lang="en">
+      <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        
+        <!-- Generated Meta Tags -->
+        <title>${metaTags.title}</title>
+        <meta name="description" content="${metaTags.description}">
+        <meta name="keywords" content="${metaTags.keywords}">
+        
+        <!-- Open Graph Meta Tags -->
+        <meta property="og:title" content="${metaTags.title}">
+        <meta property="og:description" content="${metaTags.description}">
+        <meta property="og:type" content="website">
+        <meta property="og:url" content="${req.protocol}://${req.get('host')}${req.originalUrl}">
+        
+        <!-- Import Tailwind-like styles for quick styling -->
+        <link href="https://cdn.jsdelivr.net/npm/daisyui@3.7.4/dist/full.css" rel="stylesheet" type="text/css" />
+        <script src="https://cdn.tailwindcss.com"></script>
+        
+        <!-- Client-side script for hydration -->
+        <script type="module" src="/assets/client.js"></script>
+      </head>
+      <body>
+        <div id="app">${content}</div>
+        
+        <!-- Add initial state for hydration -->
+        <script>
+          window.__INITIAL_STATE__ = ${JSON.stringify({
+            path: req.path,
+            timestamp: new Date().toISOString(),
+            metaTags
+          })};
+        </script>
+      </body>
+      </html>
+    `);
+  } catch (error) {
+    console.error('Error rendering page:', error);
+    res.status(500).send(`
+      <!DOCTYPE html>
+      <html>
+        <head>
+          <title>500 - Server Error</title>
+        </head>
+        <body>
+          <h1>500 - Server Error</h1>
+          <p>There was an error processing your request.</p>
+          ${process.env.NODE_ENV === 'development' ? `<pre>${error.stack}</pre>` : ''}
+        </body>
+      </html>
+    `);
+  }
+});
+
+// Add error handler middleware
+app.use(errorHandler);
+
+// Add not found handler for API routes that weren't caught
+app.use(notFoundHandler);
+
+// Graceful shutdown function to close database connections
+function gracefulShutdown() {
+  console.log('Shutting down server...');
+  
+  // Close database connection if it exists
+  if (db) {
+    db.disconnect()
+      .then(() => console.log('Database disconnected'))
+      .catch(err => console.error('Error disconnecting from database:', err))
+      .finally(() => process.exit(0));
+  } else {
+    process.exit(0);
+  }
+}
+
+// Start the server
+const server = app.listen(port, () => {
+  console.log(`Server running at http://localhost:${port}`);
+  console.log(`Available API endpoints:`);
+  console.log(` - GET /api/page-data`);
+  console.log(` - POST /api/login`);
+  if (process.env.JWT_SECRET) {
+    console.log(` - GET /api/protected (requires authentication)`);
+    console.log(` - GET /api/admin (requires admin role)`);
+  }
+});
+
+// Handle graceful shutdown
+process.on('SIGINT', gracefulShutdown);
+process.on('SIGTERM', gracefulShutdown);

package/templates/complete-app/src/App.tsx

@@ -0,0 +1,59 @@
+import { useState, useEffect, useMemo, useRef, createContext } from 'frontend-hamroun';
+
+// Create a theme context
+const ThemeContext = createContext('light');
+
+export function App() {
+  // Initialize with a default state that works on both server and client
+  const [count, setCount] = useState(0);
+  const [theme, setTheme] = useState<'light' | 'dark'>('light');
+  const renderCount = useRef(0);
+  
+  // Client-side only effect
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      renderCount.current += 1;
+      console.log('Component rendered', renderCount.current, 'times');
+    }
+    return () => console.log('Component unmounting');
+  }, [count]);
+  
+  // Memoized value
+  const doubled = useMemo(() => count * 2, [count]);
+  
+  return (
+    <ThemeContext.Provider value={theme}>
+      <div style={{ 
+        padding: '20px', 
+        backgroundColor: theme === 'dark' ? '#333' : '#fff',
+        color: theme === 'dark' ? '#fff' : '#333'
+      }}>
+        <h1>Server-Side Rendered App</h1>
+        <div>
+          <button 
+            onClick={() => setCount(count - 1)}
+            data-action="decrement"
+          >-</button>
+          <span style={{ margin: '0 10px' }}>{count}</span>
+          <button 
+            onClick={() => setCount(count + 1)}
+            data-action="increment"
+          >+</button>
+        </div>
+        <p>Doubled value: {doubled}</p>
+        {typeof window !== 'undefined' && (
+          <p>Render count: {renderCount.current}</p>
+        )}
+        <button 
+          onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
+          style={{ marginTop: '10px' }}
+        >
+          Toggle Theme ({theme})
+        </button>
+        <script dangerouslySetInnerHTML={{
+          __html: `window.__INITIAL_STATE__ = ${JSON.stringify({ count: 0, theme: 'light' })};`
+        }} />
+      </div>
+    </ThemeContext.Provider>
+  );
+}

package/templates/complete-app/src/client.ts

@@ -0,0 +1,61 @@
+import { hydrate, jsx } from 'frontend-hamroun';
+
+// Dynamically import the appropriate page component
+async function hydratePage() {
+  try {
+    // Get initial state from server
+    const initialState = window.__INITIAL_STATE__ || {};
+    
+    // Get current path
+    const path = initialState.route || window.location.pathname;
+    const normalizedPath = path === '/' ? '/index' : path;
+    
+    // Create path to module
+    const modulePath = `.${normalizedPath.replace(/\/$/, '')}.js`;
+    
+    try {
+      // Dynamically import the component
+      const module = await import(`./pages${normalizedPath}.js`).catch(() => 
+        import(`./pages${normalizedPath}/index.js`));
+      
+      const PageComponent = module.default;
+      
+      // Find the root element
+      const rootElement = document.getElementById('root');
+      
+      if (rootElement && PageComponent) {
+        // Hydrate the application with the same params from the server
+        hydrate(jsx(PageComponent, { params: initialState.params || {} }), rootElement);
+        console.log('Hydration complete');
+      } else {
+        console.error('Could not find root element or page component');
+      }
+    } catch (importError) {
+      console.error('Error importing page component:', importError);
+      
+      // Fallback to App component if available
+      try {
+        const { App } = await import('./App.js');
+        const rootElement = document.getElementById('root');
+        
+        if (rootElement && App) {
+          hydrate(jsx(App, {}), rootElement);
+          console.log('Fallback hydration complete');
+        }
+      } catch (fallbackError) {
+        console.error('Fallback hydration failed:', fallbackError);
+      }
+    }
+  } catch (error) {
+    console.error('Hydration error:', error);
+  }
+}
+
+// Add global variable for JSX
+window.jsx = jsx;
+
+// Hydrate when DOM is ready
+document.addEventListener('DOMContentLoaded', hydratePage);
+
+// Handle client-side navigation (if implemented)
+window.addEventListener('popstate', hydratePage);

package/templates/complete-app/src/client.tsx

@@ -0,0 +1,18 @@
+import { hydrate, createElement } from 'frontend-hamroun';
+
+// For simplicity in this example, we just hydrate the root component
+// In a more complex app, you might use a router
+import HomePage from './pages/index';
+
+// When the DOM is ready, hydrate the server-rendered HTML
+document.addEventListener('DOMContentLoaded', () => {
+  const rootElement = document.getElementById('app');
+  
+  if (rootElement) {
+    // Hydrate the app with the same component that was rendered on the server
+    hydrate(<HomePage />, rootElement);
+    console.log('Hydration complete');
+  } else {
+    console.error('Could not find root element with id "app"');
+  }
+});

package/templates/complete-app/src/pages/index.tsx

@@ -0,0 +1,51 @@
+import { useState, useEffect } from 'frontend-hamroun';
+
+// This component will be rendered on both server and client
+export default function HomePage() {
+  const [count, setCount] = useState(0);
+  const [serverTime, setServerTime] = useState('');
+
+  // This effect only runs on the client after hydration
+  useEffect(() => {
+    // Set server render time (only when hydrating)
+    if (!serverTime) {
+      setServerTime('Client-side hydration complete');
+    }
+    
+    // Simple cleanup function
+    return () => {
+      console.log('Component unmounting');
+    };
+  }, []);
+
+  return (
+    <div id="app">
+      <div className="hero min-h-screen bg-base-200">
+        <div className="hero-content text-center">
+          <div className="max-w-md">
+            <h1 className="text-5xl font-bold">Frontend Hamroun SSR</h1>
+            <p className="py-6">
+              This page was rendered on the server and hydrated on the client.
+            </p>
+            
+            {/* Interactive counter demonstrates client-side hydration */}
+            <div className="my-4 p-4 bg-base-300 rounded-lg">
+              <p>Counter: {count}</p>
+              <button 
+                className="btn btn-primary mt-2"
+                onClick={() => setCount(count + 1)}
+              >
+                Increment
+              </button>
+            </div>
+            
+            {/* Shows server render time or hydration status */}
+            <div className="text-sm opacity-70 mt-4">
+              {serverTime ? serverTime : `Server rendered at: ${new Date().toISOString()}`}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/complete-app/src/server.ts

@@ -0,0 +1,218 @@
+import express from 'express';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { renderToString, jsx } from 'frontend-hamroun';
+import { App } from './App.js';
+import fs from 'fs';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const app = express();
+const port = 3000;
+
+// Find the client entry file
+const getClientEntry = () => {
+  const assetsDir = path.join(__dirname, './');
+  const files = fs.readdirSync(assetsDir);
+  return files.find(file => file.startsWith("client") && file.endsWith('.js'));
+};
+
+// Serve static files from dist/assets
+app.use('/assets', express.static(path.join(__dirname, './')));
+
+// Serve static files from dist
+app.use(express.static(path.join(__dirname, 'dist')));
+
+// Auto-routing middleware - scans the pages directory for components
+const getPagesDirectory = () => {
+  return path.join(__dirname, 'pages');
+};
+
+// Helper to check if a file exists
+const fileExists = async (filePath) => {
+  try {
+    await fs.promises.access(filePath);
+    return true;
+  } catch {
+    return false;
+  }
+};
+
+// Map URL path to component path
+const getComponentPath = async (urlPath) => {
+  const pagesDir = getPagesDirectory();
+  
+  // Handle root path
+  if (urlPath === '/') {
+    const indexPath = path.join(pagesDir, 'index.js');
+    if (await fileExists(indexPath)) {
+      return { 
+        componentPath: indexPath,
+        params: {}
+      };
+    }
+  }
+  
+  // Try direct match (e.g., /about -> /pages/about.js)
+  const directPath = path.join(pagesDir, `${urlPath.slice(1)}.js`);
+  if (await fileExists(directPath)) {
+    return { 
+      componentPath: directPath,
+      params: {}
+    };
+  }
+  
+  // Try directory index (e.g., /about -> /pages/about/index.js)
+  const dirIndexPath = path.join(pagesDir, urlPath.slice(1), 'index.js');
+  if (await fileExists(dirIndexPath)) {
+    return { 
+      componentPath: dirIndexPath,
+      params: {}
+    };
+  }
+  
+  // Look for dynamic routes (with [param] in filename)
+  const segments = urlPath.split('/').filter(Boolean);
+  const dynamicRoutes = [];
+  
+  // Recursively scan pages directory for all files
+  const scanDir = (dir, basePath = '') => {
+    const items = fs.readdirSync(dir, { withFileTypes: true });
+    
+    for (const item of items) {
+      const itemPath = path.join(dir, item.name);
+      const routePath = path.join(basePath, item.name);
+      
+      if (item.isDirectory()) {
+        scanDir(itemPath, routePath);
+      } else if (item.name.endsWith('.js') && item.name.includes('[')) {
+        // This is a dynamic route file
+        const urlPattern = routePath
+          .replace(/\.js$/, '')
+          .replace(/\[([^\]]+)\]/g, ':$1');
+        
+        dynamicRoutes.push({
+          pattern: urlPattern,
+          componentPath: itemPath
+        });
+      }
+    }
+  };
+  
+  scanDir(pagesDir);
+  
+  // Check if any dynamic routes match
+  for (const route of dynamicRoutes) {
+    const routeSegments = route.pattern.split('/').filter(Boolean);
+    if (routeSegments.length !== segments.length) continue;
+    
+    const params = {};
+    let matches = true;
+    
+    for (let i = 0; i < segments.length; i++) {
+      const routeSeg = routeSegments[i];
+      const urlSeg = segments[i];
+      
+      if (routeSeg.startsWith(':')) {
+        // This is a parameter
+        const paramName = routeSeg.slice(1);
+        params[paramName] = urlSeg;
+      } else if (routeSeg !== urlSeg) {
+        matches = false;
+        break;
+      }
+    }
+    
+    if (matches) {
+      return {
+        componentPath: route.componentPath,
+        params
+      };
+    }
+  }
+  
+  // No match found
+  return null;
+};
+
+// Handle all routes with auto-routing
+app.get('*', async (req, res) => {
+  try {
+    const clientEntry = getClientEntry();
+    const routeResult = await getComponentPath(req.path);
+    
+    if (!routeResult) {
+      return res.status(404).send(`
+        <!DOCTYPE html>
+        <html>
+          <head>
+            <title>404 - Page Not Found</title>
+            <meta name="viewport" content="width=device-width, initial-scale=1.0">
+          </head>
+          <body>
+            <div id="root">
+              <h1>404 - Page Not Found</h1>
+              <p>The page you requested could not be found.</p>
+            </div>
+            <script type="module" src="/assets/${clientEntry}"></script>
+          </body>
+        </html>
+      `);
+    }
+    
+    // Import the component dynamically
+    const { default: PageComponent } = await import(routeResult.componentPath);
+    
+    if (!PageComponent) {
+      throw new Error(`Invalid component in ${routeResult.componentPath}`);
+    }
+    
+    // Render the component with params
+    const html = await renderToString(jsx(PageComponent, { params: routeResult.params }));
+    
+    // Create route data for client hydration
+    const initialState = {
+      route: req.path,
+      params: routeResult.params,
+      timestamp: new Date().toISOString()
+    };
+    
+    res.send(`
+      <!DOCTYPE html>
+      <html>
+        <head>
+          <title>Frontend Hamroun SSR</title>
+          <meta name="viewport" content="width=device-width, initial-scale=1.0">
+          <meta charset="UTF-8">
+        </head>
+        <body>
+          <div id="root">${html}</div>
+          <script>window.__INITIAL_STATE__ = ${JSON.stringify(initialState)}</script>
+          <script type="module" src="/assets/${clientEntry}"></script>
+        </body>
+      </html>
+    `);
+  } catch (error) {
+    console.error('Rendering error:', error);
+    res.status(500).send(`
+      <!DOCTYPE html>
+      <html>
+        <head>
+          <title>500 - Server Error</title>
+          <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        </head>
+        <body>
+          <div id="root">
+            <h1>500 - Server Error</h1>
+            <p>Something went wrong on the server.</p>
+            <pre>${process.env.NODE_ENV === 'production' ? '' : error.stack}</pre>
+          </div>
+          <script type="module" src="/assets/${clientEntry}"></script>
+        </body>
+      </html>
+    `);
+  }
+});
+
+app.listen(port, () => {
+  console.log(`Server running at http://localhost:${port}`);
+});