frontend-hamroun 1.2.25 → 1.2.26

package/dist/index.d.ts

@@ -8,5 +8,10 @@ export type { Context } from './context';
 export type { VNode } from './types';
 export type { Server, ServerConfig, User, DbConfig, MiddlewareFunction } from './server-types';
 export declare const server: {
-    getServer(): Promise<any>;
+    getServer(): Promise<typeof import("./server/index.js")>;
 };
+export { Database } from './server/database.js';
+export { AuthService } from './server/auth.js';
+export { ApiRouter } from './server/api-router.js';
+export { requestLogger, errorHandler, notFoundHandler, rateLimit } from './server/middleware.js';
+export { Server as serverModule } from './server/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frontend-hamroun",
-  "version": "1.2.25",
+  "version": "1.2.26",
   "description": "A lightweight full-stack JavaScript framework",
   "type": "module",
   "main": "./dist/index.js",

package/templates/fullstack-app/server.js

@@ -2,6 +2,14 @@ import express from 'express';
 import path from 'path';
 import { fileURLToPath } from 'url';
 import fs from 'fs';
+import dotenv from 'dotenv';
+import { createServer } from 'http';
+import { Server as SocketServer } from 'socket.io';
+import compression from 'compression';
+import cors from 'cors';
+
+// Load environment variables
+dotenv.config();
 
 // Get __dirname equivalent in ESM
 const __filename = fileURLToPath(import.meta.url);
@@ -10,9 +18,29 @@ const __dirname = path.dirname(__filename);
 // Create Express app
 const app = express();
 const PORT = process.env.PORT || 3000;
+const httpServer = createServer(app);
+
+// Create socket.io server
+const io = new SocketServer(httpServer, {
+  cors: {
+    origin: process.env.NODE_ENV === 'production' ? false : '*',
+    methods: ['GET', 'POST']
+  }
+});
 
-// Middleware
+// Middleware setup
 app.use(express.json());
+app.use(express.urlencoded({ extended: true }));
+app.use(compression()); // Add compression for better performance
+app.use(cors()); // Enable CORS for API access
+
+// Add request logging in development mode
+if (process.env.NODE_ENV !== 'production') {
+  app.use((req, res, next) => {
+    console.log(`${new Date().toISOString()} - ${req.method} ${req.url}`);
+    next();
+  });
+}
 
 // For production, serve the built files
 if (process.env.NODE_ENV === 'production') {
@@ -22,7 +50,22 @@ if (process.env.NODE_ENV === 'production') {
   console.log('Running in development mode - Vite handles the frontend');
 }
 
-// API endpoints
+// Global in-memory store for demo purposes
+// In a real app, you would use a database
+const store = {
+  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' }
+  ],
+  posts: [
+    { id: 1, title: 'Post 1', content: 'Content for post 1', authorId: 1 },
+    { id: 2, title: 'Post 2', content: 'Content for post 2', authorId: 2 },
+    { id: 3, title: 'Post 3', content: 'Content for post 3', authorId: 1 }
+  ]
+};
+
+// API endpoints - Core data
 app.get('/api/hello', (req, res) => {
   res.json({
     message: "Hello from the API!",
@@ -31,11 +74,100 @@ app.get('/api/hello', (req, res) => {
       "Server-side rendering",
       "API routes",
       "Component-based UI",
-      "React-like development experience"
+      "React-like development experience",
+      "WebSocket integration",
+      "Database connectivity",
+      "Authentication"
     ]
   });
 });
 
+// Dynamic API route loading
+const apiDir = path.join(__dirname, 'api');
+if (fs.existsSync(apiDir)) {
+  console.log('Loading API routes from directory...');
+  
+  // Function to map file paths to API routes
+  const registerApiRoutes = async (dir, routePrefix = '') => {
+    const entries = fs.readdirSync(dir, { withFileTypes: true });
+    
+    for (const entry of entries) {
+      const fullPath = path.join(dir, entry.name);
+      
+      if (entry.isDirectory()) {
+        // Process directories recursively
+        await registerApiRoutes(fullPath, `${routePrefix}/${entry.name}`);
+      } else if (entry.name.endsWith('.js') || entry.name.endsWith('.ts')) {
+        // Process API file
+        try {
+          const fileName = entry.name.replace(/\.[^/.]+$/, ""); // Remove extension
+          const routePath = fileName === 'index' 
+            ? routePrefix 
+            : fileName.startsWith('[') && fileName.endsWith(']')
+              ? `${routePrefix}/:${fileName.slice(1, -1)}` // Convert [param] to :param
+              : `${routePrefix}/${fileName}`;
+              
+          // Import the route module
+          const module = await import(`file://${fullPath}`);
+          
+          // Register handlers for HTTP methods
+          ['get', 'post', 'put', 'delete', 'patch'].forEach(method => {
+            if (typeof module[method] === 'function') {
+              console.log(`  Registered ${method.toUpperCase()} ${routePath}`);
+              app[method](`/api${routePath}`, module[method]);
+            }
+          });
+          
+          // Special case for 'delete' which might be named 'delete_' in some files
+          if (typeof module['delete_'] === 'function') {
+            console.log(`  Registered DELETE ${routePath}`);
+            app.delete(`/api${routePath}`, module['delete_']);
+          }
+        } catch (err) {
+          console.error(`Error loading API route ${fullPath}:`, err);
+        }
+      }
+    }
+  };
+  
+  // Start registering API routes
+  try {
+    await registerApiRoutes(apiDir);
+    console.log('API routes loaded successfully');
+  } catch (err) {
+    console.error('Error loading API routes:', err);
+  }
+} else {
+  console.log('API directory not found, skipping API route loading');
+}
+
+// WebSocket setup
+io.on('connection', (socket) => {
+  console.log('Client connected:', socket.id);
+  
+  // Send welcome message
+  socket.emit('welcome', { 
+    message: 'Connected to WebSocket server',
+    time: new Date().toISOString()
+  });
+  
+  // Handle client messages
+  socket.on('message', (data) => {
+    console.log('Received message:', data);
+    // Broadcast to all clients
+    io.emit('broadcast', {
+      from: socket.id,
+      data,
+      time: new Date().toISOString()
+    });
+  });
+  
+  // Handle disconnect
+  socket.on('disconnect', () => {
+    console.log('Client disconnected:', socket.id);
+  });
+});
+
 // In production or if using SSR, handle all requests
 app.get('*', (req, res, next) => {
   // Skip API routes
@@ -57,9 +189,19 @@ app.get('*', (req, res, next) => {
   }
 });
 
+// Error handling middleware
+app.use((err, req, res, next) => {
+  console.error('Server error:', err);
+  res.status(500).json({
+    error: process.env.NODE_ENV === 'production' 
+      ? 'Internal server error' 
+      : err.message
+  });
+});
+
 // Start server
-app.listen(PORT, () => {
-  console.log(`API Server running on http://localhost:${PORT}`);
+httpServer.listen(PORT, () => {
+  console.log(`Server running on http://localhost:${PORT}`);
   
   if (process.env.NODE_ENV !== 'production') {
     console.log(`Frontend development server will run on http://localhost:5173`);

package/templates/ssr-template/readme.md

@@ -1,6 +1,6 @@
 # Frontend Hamroun SSR Template
 
-This is a simple server-side rendering (SSR) example using Frontend Hamroun.
+This is a comprehensive server-side rendering (SSR) example using Frontend Hamroun.
 
 ## Getting Started
 
@@ -16,26 +16,123 @@ This is a simple server-side rendering (SSR) example using Frontend Hamroun.
 
 3. Open your browser at http://localhost:3000
 
-## How it Works
+## Core Features
 
-This example demonstrates:
+This template demonstrates:
 
-- Server-side rendering of components
-- A simple API endpoint
-- Basic client-side interactivity after SSR
+### Server-Side Rendering
+- Pre-rendering of components on the server
+- Hydration of server-rendered content on the client
+- Data fetching during server rendering
+- AI-powered meta tag generation
 
-The server renders the component on each request using `renderToString`, then sends the HTML to the client. A small script adds interactivity to the rendered HTML on the client side.
+### API Integration
+- RESTful API endpoints
+- Dynamic API routing
+- API middleware for validation and security
+- File-based API structure
 
-## Adding More Components
+### Database Integration
+- MongoDB, MySQL, and PostgreSQL support
+- ORM-like query interface
+- Connection pooling
+- Transaction support
 
-To add more components, create them directly in the server.js file or in separate files and import them. Use the `createElement` function from 'frontend-hamroun/jsx-runtime' to create elements.
+### Authentication & Authorization
+- JWT-based authentication
+- Role-based access control
+- Password hashing and validation
+- Token refresh mechanism
 
-## Advanced Usage
+### Performance Optimization
+- Caching strategies
+- Response compression
+- Static asset optimization
+- Efficient metadata handling
 
-For more complex applications, you may want to:
+## Implementation Examples
 
-1. Add a build step with a bundler like Vite or Webpack
-2. Use a routing solution for more complex page structures
-3. Set up database connections and more robust API endpoints
+### Creating Components
 
-Check the Frontend Hamroun documentation for more examples and advanced usage patterns.
+Use the `jsx` or `createElement` function from 'frontend-hamroun':
+
+```jsx
+import { jsx } from 'frontend-hamroun';
+
+export default function MyComponent(props) {
+  return jsx('div', { className: "container" }, [
+    jsx('h1', {}, "Hello World"),
+    jsx('p', {}, `Props value: ${props.value}`)
+  ]);
+}
+```
+
+### Creating API Routes
+
+Create files in the `api` directory following this pattern:
+
+```typescript
+// api/users/index.ts
+import { Request, Response } from 'express';
+
+export const get = (req: Request, res: Response) => {
+  res.json({ users: [...] });
+};
+
+export const post = (req: Request, res: Response) => {
+  // Create user
+  res.status(201).json({ success: true });
+};
+```
+
+### Database Usage
+
+```typescript
+import { Server } from 'frontend-hamroun/server';
+
+const server = new Server({
+  db: {
+    url: process.env.DATABASE_URL,
+    type: 'mongodb' // or 'mysql', 'postgres'
+  }
+});
+
+// Get typed database instance
+const db = server.getDatabase();
+const users = await db.query('SELECT * FROM users'); // For SQL
+const docs = await db.getMongoDb().collection('users').find().toArray(); // For MongoDB
+```
+
+### Authentication
+
+```typescript
+import { AuthService } from 'frontend-hamroun/server';
+
+const auth = new AuthService({
+  secret: process.env.JWT_SECRET,
+  expiresIn: '24h'
+});
+
+// Protect routes
+app.get('/api/protected', auth.requireAuth(), (req, res) => {
+  res.json({ message: "Authenticated!" });
+});
+
+// Create user & login
+const hashedPassword = await auth.hashPassword(password);
+const token = auth.generateToken(user);
+```
+
+### Advanced Middleware
+
+```typescript
+import { rateLimit, requestLogger, errorHandler } from 'frontend-hamroun/server';
+
+app.use(requestLogger);
+app.use('/api', rateLimit({ windowMs: 15 * 60 * 1000, max: 100 }));
+app.use(errorHandler);
+```
+
+## Next Steps
+
+Explore the full API documentation for more advanced features and customization options.

package/templates/ssr-template/server.ts

@@ -2,6 +2,14 @@ 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);
@@ -11,6 +19,67 @@ const __dirname = dirname(__filename);
 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')));
 
@@ -23,6 +92,42 @@ app.get('/api/page-data', (req, res) => {
   });
 });
 
+// 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 {
@@ -60,6 +165,17 @@ app.get('*', async (req, res) => {
     // 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());
     
@@ -70,15 +186,36 @@ app.get('*', async (req, res) => {
       <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <title>Frontend Hamroun SSR</title>
+        
+        <!-- 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>
     `);
@@ -100,24 +237,39 @@ app.get('*', async (req, res) => {
   }
 });
 
-// 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;
+// 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
-app.listen(port, () => {
+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', () => {
-  console.log('Shutting down server...');
-  process.exit(0);
-});
+process.on('SIGINT', gracefulShutdown);
+process.on('SIGTERM', gracefulShutdown);