frontend-hamroun 1.1.90 → 1.2.1

package/src/backend/types.ts

@@ -0,0 +1,257 @@
+import { Request, Response, NextFunction, RequestHandler } from 'express';
+import { DatabaseConnector } from './database';
+
+/**
+ * Options for configuring a Hamroun server
+ */
+export interface HamrounServerOptions {
+  /**
+   * Port to run the server on (default: 3000)
+   */
+  port?: number;
+  
+  /**
+   * Directory to serve static files from (default: 'public')
+   */
+  staticDir?: string;
+  
+  /**
+   * Enable CORS headers (default: true)
+   */
+  enableCors?: boolean;
+  
+  /**
+   * Prefix for API routes (default: '/api')
+   */
+  apiPrefix?: string;
+  
+  /**
+   * Enable server-side rendering (default: true)
+   */
+  ssrEnabled?: boolean;
+  
+  /**
+   * Additional Express middleware to apply
+   */
+  middlewares?: RequestHandler[];
+  
+  /**
+   * Enable response compression (default: true)
+   */
+  enableCompression?: boolean;
+  
+  /**
+   * Enable helmet security headers (default: true)
+   */
+  enableHelmet?: boolean;
+  
+  /**
+   * Disable Content Security Policy (default: false)
+   */
+  disableCSP?: boolean;
+  
+  /**
+   * Logging format for Morgan (default: 'dev')
+   */
+  logFormat?: string | null;
+  
+  /**
+   * Trust proxy headers (default: false)
+   */
+  trustProxy?: boolean | string | number | string[] | number[];
+  
+  /**
+   * Static file cache age (default: '1d')
+   */
+  staticCacheAge?: string;
+  
+  /**
+   * Show detailed error information in responses (default: false)
+   */
+  showErrorDetails?: boolean;
+}
+
+/**
+ * Options for router configuration
+ */
+export interface RouterOptions {
+  /**
+   * Prefix to apply to all routes (overrides server apiPrefix)
+   */
+  prefix?: string;
+  
+  /**
+   * Enable authentication for all routes in this router
+   */
+  requireAuth?: boolean;
+  
+  /**
+   * Required role for all routes in this router
+   */
+  requiredRole?: string | string[];
+  
+  /**
+   * Enable rate limiting for this router
+   */
+  rateLimit?: {
+    windowMs: number;
+    max: number;
+    message?: string;
+  };
+}
+
+/**
+ * Context provided to route handlers
+ */
+export interface RouteContext {
+  req: Request;
+  res: Response;
+  next: NextFunction;
+  params: any;
+  query: any;
+  body: any;
+  user?: any;
+}
+
+/**
+ * Pagination options
+ */
+export interface PaginationOptions {
+  page: number;
+  limit: number;
+  sort?: string;
+  order?: 'asc' | 'desc';
+}
+
+/**
+ * Paginated result
+ */
+export interface PaginatedResult<T> {
+  data: T[];
+  pagination: {
+    total: number;
+    totalPages: number;
+    currentPage: number;
+    limit: number;
+    hasNextPage: boolean;
+    hasPrevPage: boolean;
+  };
+}
+
+/**
+ * Database connection options
+ */
+export interface DatabaseOptions {
+  /**
+   * URI to connect to the database
+   */
+  uri: string;
+  
+  /**
+   * Database name
+   */
+  name: string;
+  
+  /**
+   * Connection options
+   */
+  options?: Record<string, any>;
+  
+  /**
+   * Number of retry attempts (default: 3)
+   */
+  retryAttempts?: number;
+  
+  /**
+   * Retry delay in ms (default: 1000)
+   */
+  retryDelay?: number;
+  
+  /**
+   * Connection timeout in ms (default: 10000)
+   */
+  connectionTimeout?: number;
+  
+  /**
+   * Auto-index creation (default: true)
+   */
+  autoIndex?: boolean;
+}
+
+/**
+ * Data model structure
+ */
+export interface Model<T> {
+  /**
+   * Get all documents
+   */
+  getAll: (options?: PaginationOptions) => Promise<PaginatedResult<T>>;
+  
+  /**
+   * Get document by ID
+   */
+  getById: (id: string) => Promise<T | null>;
+  
+  /**
+   * Create a new document
+   */
+  create: (data: Partial<T>) => Promise<T>;
+  
+  /**
+   * Create multiple documents
+   */
+  createMany: (data: Partial<T>[]) => Promise<T[]>;
+  
+  /**
+   * Update a document
+   */
+  update: (id: string, data: Partial<T>) => Promise<T | null>;
+  
+  /**
+   * Delete a document
+   */
+  delete: (id: string) => Promise<boolean>;
+  
+  /**
+   * Find documents by custom query
+   */
+  find: (query: Record<string, any>, options?: PaginationOptions) => Promise<PaginatedResult<T>>;
+  
+  /**
+   * Count documents matching query
+   */
+  count: (query?: Record<string, any>) => Promise<number>;
+  
+  /**
+   * Find one document
+   */
+  findOne: (query: Record<string, any>) => Promise<T | null>;
+}
+
+/**
+ * API response format
+ */
+export interface ApiResponse<T = any> {
+  success: boolean;
+  data?: T;
+  error?: string;
+  message?: string;
+  meta?: Record<string, any>;
+}
+
+// Extend Express Application interface
+declare global {
+  namespace Express {
+    interface Application {
+      registerApi: (routePath: string, router: any, options?: RouterOptions) => Application;
+      registerSSR: (routePath: string, component: any, options?: any) => Application;
+      start: (callback?: () => void) => any;
+      connectToDatabase: (dbOptions: DatabaseOptions) => Promise<DatabaseConnector>;
+    }
+    
+    interface Request {
+      user?: any;
+      pagination?: PaginationOptions;
+    }
+  }
+}

package/src/batch.ts

@@ -0,0 +1,24 @@
+export let isBatching = false;
+const queue: Function[] = [];
+
+export function batchUpdates(fn: Function) {
+  if (isBatching) {
+    queue.push(fn);
+    return;
+  }
+
+  isBatching = true;
+  try {
+    fn();
+    while (queue.length > 0) {
+      const nextFn = queue.shift();
+      nextFn?.();
+    }
+  } finally {
+    isBatching = false;
+  }
+}
+
+export function getIsBatching() {
+  return isBatching;
+}

package/src/cli/index.js

@@ -1,60 +1,42 @@
 #!/usr/bin/env node
 
-const fs = require('fs');
-const path = require('path');
-const { exec } = require('child_process');
-const readline = require('readline');
-const { promisify } = require('util');
-const copyFile = promisify(fs.copyFile);
+import fs from 'fs';
+import path from 'path';
+import readline from 'readline';
+import { exec } from 'child_process';
+import { promisify } from 'util';
+
+// Promisify fs functions
 const mkdir = promisify(fs.mkdir);
-const access = promisify(fs.access);
 const readdir = promisify(fs.readdir);
 const writeFile = promisify(fs.writeFile);
 const readFile = promisify(fs.readFile);
+const copyFile = promisify(fs.copyFile);
+const access = promisify(fs.access);
+const execPromise = promisify(exec);
 
+// Find the templates directory
+const TEMPLATES_DIR = path.join(path.dirname(new URL(import.meta.url).pathname), '..', 'templates');
+
+// Create readline interface
 const rl = readline.createInterface({
   input: process.stdin,
   output: process.stdout
 });
 
+// Promisify question
 const question = (query) => new Promise((resolve) => rl.question(query, resolve));
 
-const TEMPLATES_DIR = path.join(__dirname, '..', '..', 'templates');
-const COLORS = {
-  reset: '\x1b[0m',
-  green: '\x1b[32m',
-  yellow: '\x1b[33m',
-  blue: '\x1b[34m', 
-  red: '\x1b[31m',
-  cyan: '\x1b[36m'
-};
-
-/**
- * Format colored console log
- */
+// Simple logger
 const log = {
-  info: (msg) => console.log(`${COLORS.blue}ℹ ${COLORS.reset}${msg}`),
-  success: (msg) => console.log(`${COLORS.green}✓ ${COLORS.reset}${msg}`),
-  warn: (msg) => console.log(`${COLORS.yellow}⚠ ${COLORS.reset}${msg}`),
-  error: (msg) => console.log(`${COLORS.red}✗ ${COLORS.reset}${msg}`),
-  title: (msg) => console.log(`\n${COLORS.cyan}${msg}${COLORS.reset}\n`)
+  info: (msg) => console.log(`\x1b[36minfo\x1b[0m: ${msg}`),
+  success: (msg) => console.log(`\x1b[32msuccess\x1b[0m: ${msg}`),
+  warn: (msg) => console.log(`\x1b[33mwarning\x1b[0m: ${msg}`),
+  error: (msg) => console.log(`\x1b[31merror\x1b[0m: ${msg}`),
+  title: (msg) => console.log(`\n\x1b[1m${msg}\x1b[0m\n`)
 };
 
-/**
- * Execute shell command
- */
-const execPromise = (cmd, options = {}) => {
-  return new Promise((resolve, reject) => {
-    const process = exec(cmd, options, (error, stdout) => {
-      if (error) {
-        reject(error);
-        return;
-      }
-      resolve(stdout);
-    });
-  });
-}
-
+// Rest of the CLI functionality...
 /**
  * Copy directory recursively
  */

package/src/cli/index.ts

@@ -0,0 +1,251 @@
+#!/usr/bin/env node
+
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { execSync } from 'child_process';
+import readline from 'readline';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// Get package.json to read version
+const packageJsonPath = path.resolve(__dirname, '../../package.json');
+const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
+
+// Available templates
+const TEMPLATES = {
+  'basic': 'Basic frontend only template',
+  'full-stack': 'Complete frontend and backend template',
+  'api-only': 'Backend API only template'
+};
+
+// CLI colors
+const colors = {
+  reset: '\x1b[0m',
+  bright: '\x1b[1m',
+  green: '\x1b[32m',
+  blue: '\x1b[34m',
+  red: '\x1b[31m',
+  yellow: '\x1b[33m'
+};
+
+// Create readline interface
+function createInterface() {
+  return readline.createInterface({
+    input: process.stdin,
+    output: process.stdout
+  });
+}
+
+// Print banner
+function printBanner() {
+  console.log(`
+${colors.blue}${colors.bright}╔══════════════════════════════════════════════╗
+║                                              ║
+║   Frontend Hamroun v${packageJson.version.padEnd(25)}║
+║   A lightweight frontend & backend framework  ║
+║                                              ║
+╚══════════════════════════════════════════════╝${colors.reset}
+  `);
+}
+
+// Print help
+function printHelp() {
+  console.log(`
+${colors.bright}USAGE:${colors.reset}
+  ${colors.blue}npx frontend-hamroun${colors.reset} [command] [options]
+
+${colors.bright}COMMANDS:${colors.reset}
+  ${colors.blue}create${colors.reset} <project-name> [options]  Create a new project
+  ${colors.blue}help${colors.reset}                           Display this help message
+  ${colors.blue}version${colors.reset}                        Display version information
+
+${colors.bright}OPTIONS:${colors.reset}
+  ${colors.blue}--template${colors.reset}, ${colors.blue}-t${colors.reset} <template>       Specify template (default: basic)
+  ${colors.blue}--skip-install${colors.reset}, ${colors.blue}-s${colors.reset}            Skip package installation
+
+${colors.bright}AVAILABLE TEMPLATES:${colors.reset}
+${Object.entries(TEMPLATES).map(([name, desc]) => `  ${colors.blue}${name.padEnd(12)}${colors.reset} ${desc}`).join('\n')}
+
+${colors.bright}EXAMPLES:${colors.reset}
+  ${colors.blue}npx frontend-hamroun create${colors.reset} my-app
+  ${colors.blue}npx frontend-hamroun create${colors.reset} my-app --template full-stack
+  ${colors.blue}npx frontend-hamroun create${colors.reset} my-api -t api-only --skip-install
+  `);
+}
+
+// Create project from template
+async function createProject(projectName, options) {
+  const template = options.template || 'basic';
+  
+  // Check if template exists
+  if (!Object.keys(TEMPLATES).includes(template)) {
+    console.error(`${colors.red}error:${colors.reset} Template "${template}" not found.`);
+    console.log(`Available templates: ${Object.keys(TEMPLATES).join(', ')}`);
+    process.exit(1);
+  }
+  
+  // Check if project directory already exists
+  const projectPath = path.resolve(process.cwd(), projectName);
+  if (fs.existsSync(projectPath)) {
+    console.error(`${colors.red}error:${colors.reset} Directory ${projectName} already exists.`);
+    process.exit(1);
+  }
+  
+  console.log(`
+${colors.bright}Creating a new project with Frontend Hamroun...${colors.reset}
+${colors.blue}• Project name:${colors.reset} ${projectName}
+${colors.blue}• Template:${colors.reset} ${template}
+${colors.blue}• Directory:${colors.reset} ${projectPath}
+  `);
+  
+  try {
+    // Find templates directory
+    const templateDir = path.resolve(__dirname, '../../templates', template);
+    
+    // Create project directory
+    fs.mkdirSync(projectPath, { recursive: true });
+    
+    // Copy template files
+    copyTemplateFiles(templateDir, projectPath);
+    
+    // Update package.json with project name
+    const projectPackageJsonPath = path.join(projectPath, 'package.json');
+    if (fs.existsSync(projectPackageJsonPath)) {
+      const projectPackageJson = JSON.parse(fs.readFileSync(projectPackageJsonPath, 'utf8'));
+      projectPackageJson.name = projectName;
+      fs.writeFileSync(
+        projectPackageJsonPath, 
+        JSON.stringify(projectPackageJson, null, 2)
+      );
+    }
+    
+    // Install dependencies
+    if (!options.skipInstall) {
+      console.log(`\n${colors.blue}Installing dependencies...${colors.reset}`);
+      
+      const command = getPackageManager() === 'yarn' 
+        ? 'yarn' 
+        : 'npm install';
+      
+      execSync(command, { 
+        cwd: projectPath, 
+        stdio: 'inherit' 
+      });
+    }
+    
+    // Success message
+    console.log(`
+${colors.green}${colors.bright}Success!${colors.reset} Created ${projectName} at ${projectPath}
+
+${colors.blue}Inside that directory, you can run several commands:${colors.reset}
+
+  ${colors.bright}npm run dev${colors.reset}
+    Starts the development server.
+
+  ${colors.bright}npm run build${colors.reset}
+    Builds the app for production.
+
+  ${colors.bright}npm start${colors.reset}
+    Runs the built app in production mode.
+
+${colors.blue}We suggest that you begin by typing:${colors.reset}
+
+  ${colors.bright}cd${colors.reset} ${projectName}
+  ${colors.bright}npm run dev${colors.reset}
+
+${colors.green}Happy coding!${colors.reset}
+    `);
+    
+  } catch (error) {
+    console.error(`${colors.red}Failed to create project:${colors.reset}`, error);
+    process.exit(1);
+  }
+}
+
+// Copy template files recursively
+function copyTemplateFiles(source, destination) {
+  const files = fs.readdirSync(source);
+  
+  for (const file of files) {
+    const sourcePath = path.join(source, file);
+    const destPath = path.join(destination, file);
+    
+    const stats = fs.statSync(sourcePath);
+    
+    if (stats.isDirectory()) {
+      fs.mkdirSync(destPath, { recursive: true });
+      copyTemplateFiles(sourcePath, destPath);
+    } else {
+      fs.copyFileSync(sourcePath, destPath);
+    }
+  }
+  
+  console.log(`${colors.green}•${colors.reset} Copied template files`);
+}
+
+// Detect package manager
+function getPackageManager() {
+  try {
+    const userAgent = process.env.npm_config_user_agent;
+    if (userAgent && userAgent.startsWith('yarn')) {
+      return 'yarn';
+    }
+    return 'npm';
+  } catch (error) {
+    return 'npm';
+  }
+}
+
+// Parse command line arguments
+function parseArgs() {
+  const args = process.argv.slice(2);
+  const command = args[0];
+  
+  if (!command || command === 'help') {
+    printBanner();
+    printHelp();
+    process.exit(0);
+  }
+  
+  if (command === 'version') {
+    console.log(`frontend-hamroun v${packageJson.version}`);
+    process.exit(0);
+  }
+  
+  if (command === 'create') {
+    const projectName = args[1];
+    
+    if (!projectName) {
+      console.error(`${colors.red}error:${colors.reset} Project name is required.`);
+      console.log(`Run ${colors.blue}npx frontend-hamroun help${colors.reset} for usage information.`);
+      process.exit(1);
+    }
+    
+    // Parse options
+    const options = {
+      template: 'basic',
+      skipInstall: false
+    };
+    
+    for (let i = 2; i < args.length; i++) {
+      if (args[i] === '--template' || args[i] === '-t') {
+        options.template = args[++i];
+      } else if (args[i] === '--skip-install' || args[i] === '-s') {
+        options.skipInstall = true;
+      }
+    }
+    
+    printBanner();
+    createProject(projectName, options);
+    return;
+  }
+  
+  console.error(`${colors.red}error:${colors.reset} Unknown command: ${command}`);
+  console.log(`Run ${colors.blue}npx frontend-hamroun help${colors.reset} for usage information.`);
+  process.exit(1);
+}
+
+// Run CLI
+parseArgs();

package/src/component.ts

@@ -0,0 +1,98 @@
+import { createElement } from './jsx-runtime';
+
+export class Component {
+  state: any = {};
+  props: any;
+  element: HTMLElement | null = null;
+  private _mounted: boolean = false;
+
+  constructor(props: any = {}) {
+    this.props = props;
+  }
+
+  componentDidMount() {
+    // Hook for after component is mounted
+  }
+
+  async setState(newState: any) {
+    const prevState = { ...this.state };
+    this.state = { ...prevState, ...newState };
+    console.log(`${this.constructor.name} state updated:`, {
+      prev: prevState,
+      next: this.state
+    });
+    
+    await Promise.resolve(); // Ensure state is updated before re-render
+    if (this._mounted) {
+      await this.update();
+    } else {
+      await this.update();
+    }
+  }
+
+  private _replayEvents(oldElement: HTMLElement, newElement: HTMLElement) {
+    const oldEvents = (oldElement as any).__events || {};
+    Object.entries(oldEvents).forEach(([event, handler]) => {
+      newElement.addEventListener(event as keyof HTMLElementEventMap, handler as EventListener);
+    });
+    (newElement as any).__events = oldEvents;
+  }
+
+  private _deepCloneWithEvents(node: HTMLElement): HTMLElement {
+    const clone = node.cloneNode(false) as HTMLElement;
+    
+    // Copy events from original element
+    const events = (node as any).__events || {};
+    (clone as any).__events = events;
+    Object.entries(events).forEach(([event, handler]) => {
+      clone.addEventListener(event as keyof HTMLElementEventMap, handler as EventListener);
+    });
+
+    // Clone children
+    Array.from(node.childNodes).forEach(child => {
+      if (child instanceof HTMLElement) {
+        clone.appendChild(this._deepCloneWithEvents(child));
+      } else {
+        clone.appendChild(child.cloneNode(true));
+      }
+    });
+
+    return clone;
+  }
+
+  async update() {
+    const vdom = this.render();
+    if (!vdom) return document.createTextNode('');
+    
+    const rendered = await createElement(vdom);
+    if (rendered instanceof HTMLElement) {
+      return this._updateElement(rendered);
+    }
+    
+    const wrapper = document.createElement('div');
+    wrapper.appendChild(rendered);
+    return this._updateElement(wrapper);
+  }
+
+  private async _updateElement(rendered: HTMLElement) {
+    const newElement = this._deepCloneWithEvents(rendered);
+    (newElement as any).__instance = this;
+    
+    if (!this.element) {
+      this.element = newElement;
+      if (!this._mounted) {
+        this._mounted = true;
+        queueMicrotask(() => this.componentDidMount());
+      }
+    } else if (this.element.parentNode) {
+      this.element.parentNode.replaceChild(newElement, this.element);
+      this.element = newElement;
+    }
+    
+    return this.element;
+  }
+
+  render(): any {
+    throw new Error('Component must implement render() method');
+  }
+}