frontend-hamroun 1.1.90 → 1.2.0

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/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');
+  }
+}

package/src/components/Counter.tsx

@@ -0,0 +1,4 @@
+
+
+
+// ...existing code...import { useState, useEffect } from '../index';

package/src/context.ts

@@ -0,0 +1,32 @@
+
+
+const contexts = new Map<symbol, any>();
+let currentRender: Function | null = null;
+
+export interface Context<T> {
+  Provider: (props: { value: T; children?: any }) => any;
+  Consumer: (props: { children: (value: T) => any }) => any;
+  _id: symbol;
+  useSelector: <S>(selector: (state: T) => S) => S;
+}
+
+export function createContext<T>(defaultValue: T): Context<T> {
+  const context = {
+    Provider: ({ value, children }: { value: T, children?: any }) => {
+      return children;
+    },
+    Consumer: ({ children }: { children: (value: T) => any }) => {
+      return children(defaultValue);
+    },
+    _id: Symbol(),
+    useSelector: <S>(selector: (state: T) => S) => {
+      return selector(defaultValue);
+    }
+  };
+
+  return context;
+}
+
+export function useContext<T>(context: any): T {
+  return context;
+}

package/src/hooks.ts

@@ -0,0 +1,211 @@
+import { createElement } from './jsx-runtime';
+import { batchUpdates, isBatching } from './batch';
+import { diff } from './vdom';
+
+let currentRender: number = 0;
+const states = new Map<number, any[]>();
+const stateIndices = new Map<number, number>();
+const effects = new Map<number, Effect[]>();
+const memos = new Map<number, { value: any; deps: any[] }[]>();
+const refs = new Map<number, any[]>();
+
+interface Effect {
+  cleanup?: () => void;
+  deps?: any[];
+}
+
+// Add at the top with other declarations
+let globalRenderCallback: ((element: any, container: HTMLElement) => void) | null = null;
+let globalContainer: HTMLElement | null = null;
+let currentElement: any = null;
+
+const isServer = typeof window === 'undefined';
+const serverStates = new Map<number, any>();
+
+export function setRenderCallback(
+  callback: (element: any, container: HTMLElement) => void,
+  element: any,
+  container: HTMLElement
+) {
+  globalRenderCallback = callback;
+  globalContainer = container;
+  currentElement = element;
+}
+
+export function prepareRender() {
+  currentRender++;
+  stateIndices.set(currentRender, 0);
+  return currentRender;
+}
+
+export function finishRender() {
+  if (isServer) {
+    serverStates.delete(currentRender);
+  }
+  currentRender = 0;
+}
+
+export function useState<T>(initial: T): [T, (value: T | ((prev: T) => T)) => void] {
+  if (!currentRender) {
+    throw new Error('useState must be called within a render');
+  }
+
+  if (isServer) {
+    // Server-side state handling
+    if (!serverStates.has(currentRender)) {
+      serverStates.set(currentRender, new Map());
+    }
+    const componentState = serverStates.get(currentRender)!;
+    const index = stateIndices.get(currentRender) || 0;
+    
+    if (!componentState.has(index)) {
+      componentState.set(index, initial);
+    }
+
+    const state = componentState.get(index);
+    const setState = (newValue: T | ((prev: T) => T)) => {
+      // No-op for server-side
+    };
+
+    stateIndices.set(currentRender, index + 1);
+    return [state, setState];
+  }
+
+  if (!states.has(currentRender)) {
+    states.set(currentRender, []);
+  }
+
+  const componentStates = states.get(currentRender)!;
+  const index = stateIndices.get(currentRender)!;
+  
+  if (index >= componentStates.length) {
+    componentStates.push(initial);
+  }
+
+  const state = componentStates[index];
+  const setState = (newValue: T | ((prev: T) => T)) => {
+    const nextValue = typeof newValue === 'function' 
+      ? (newValue as Function)(componentStates[index])
+      : newValue;
+
+    if (componentStates[index] === nextValue) return; // Skip if value hasn't changed
+    
+    componentStates[index] = nextValue;
+    
+    if (isBatching) {
+      batchUpdates(() => rerender(currentRender));
+    } else {
+      rerender(currentRender);
+    }
+  };
+
+  stateIndices.set(currentRender, index + 1);
+  return [state, setState];
+}
+
+export function useEffect(callback: () => (() => void) | void, deps?: any[]) {
+  if (!currentRender) throw new Error('useEffect must be called within a render');
+  
+  const effectIndex = stateIndices.get(currentRender)!;
+  
+  if (!effects.has(currentRender)) {
+    effects.set(currentRender, []);
+  }
+
+  const componentEffects = effects.get(currentRender)!;
+  const prevEffect = componentEffects[effectIndex];
+  
+  // Run effect if deps changed
+  if (!prevEffect || !deps || !prevEffect.deps || 
+      deps.some((dep, i) => dep !== prevEffect.deps![i])) {
+    
+    // Cleanup previous effect
+    if (prevEffect?.cleanup) {
+      prevEffect.cleanup();
+    }
+
+    // Schedule new effect
+    queueMicrotask(() => {
+      const cleanup = callback() || undefined;
+      componentEffects[effectIndex] = { cleanup: cleanup, deps };
+    });
+  }
+  
+  stateIndices.set(currentRender, effectIndex + 1);
+}
+
+export function useMemo<T>(factory: () => T, deps: any[]): T {
+  if (!currentRender) throw new Error('useMemo must be called within a render');
+  
+  const memoIndex = stateIndices.get(currentRender)!;
+  
+  if (!memos.has(currentRender)) {
+    memos.set(currentRender, []);
+  }
+
+  const componentMemos = memos.get(currentRender)!;
+  const prevMemo = componentMemos[memoIndex];
+  
+  if (!prevMemo || (deps && deps.some((dep, i) => !Object.is(dep, prevMemo.deps[i])))) {
+    const value = factory();
+    componentMemos[memoIndex] = { value, deps };
+    stateIndices.set(currentRender, memoIndex + 1);
+    return value;
+  }
+
+  stateIndices.set(currentRender, memoIndex + 1);
+  return prevMemo.value;
+}
+
+export function useRef<T>(initial: T) {
+  if (!currentRender) throw new Error('useRef must be called within a render');
+  
+  const refIndex = stateIndices.get(currentRender)!;
+  
+  if (!refs.has(currentRender)) {
+    refs.set(currentRender, []);
+  }
+
+  const componentRefs = refs.get(currentRender)!;
+  if (refIndex >= componentRefs.length) {
+    // Initialize with an object that has a current property
+    const ref = { current: initial };
+    componentRefs.push(ref);
+    stateIndices.set(currentRender, refIndex + 1);
+    return ref;
+  }
+
+  const ref = componentRefs[refIndex];
+  stateIndices.set(currentRender, refIndex + 1);
+  return ref;
+}
+
+// Add a map to track component DOM nodes
+const componentNodes = new Map<Function, Node>();
+
+async function rerender(rendererId: number) {
+  try {
+    // Clean up effects
+    const componentEffects = effects.get(rendererId);
+    if (componentEffects) {
+      componentEffects.forEach(effect => {
+        if (effect.cleanup) effect.cleanup();
+      });
+      effects.set(rendererId, []);
+    }
+
+    if (globalRenderCallback && globalContainer && currentElement) {
+      await globalRenderCallback(currentElement, globalContainer);
+    }
+  } catch (error) {
+    console.error('Error during rerender:', error);
+  }
+}
+
+// Add new hook for error boundaries
+export function useErrorBoundary(): [Error | null, () => void] {
+  const [error, setError] = useState<Error | null>(null);
+  return [error, () => setError(null)];
+}
+
+// Remove withHooks export