frontend-hamroun 1.1.90 → 1.2.1

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

package/src/index.ts

@@ -0,0 +1,113 @@
+// Frontend exports
+import { jsx, jsxs, createElement, Fragment } from './jsx-runtime/index';
+import { Component } from './component';
+import { useState, useEffect, useRef, useMemo, useErrorBoundary } from './hooks';
+import { render, hydrate } from './renderer';
+import { renderToString } from './server-renderer';
+import { prepareRender, finishRender } from './hooks';
+import { batchUpdates } from './batch';
+
+// Backend functionality
+import { createServer } from './backend/server';
+import { Router } from './backend/router';
+import { createApiRouter } from './backend/api-utils';
+
+// Export JSX runtime
+export {
+  jsx,
+  jsxs,
+  createElement,
+  Fragment
+};
+
+// Export hooks
+export {
+  useState,
+  useEffect,
+  useRef,
+  useMemo,
+  useErrorBoundary,
+  prepareRender,
+  finishRender,
+  batchUpdates
+};
+
+// Export component base class
+export { Component };
+
+// Export renderers
+export {
+  render,
+  hydrate,
+  renderToString
+};
+// Export backend functionality
+export {
+  createServer,
+  Router,
+  createApiRouter
+};
+
+// Default export with all functionality
+export default {
+  // Frontend
+  jsx,
+  jsxs,
+  createElement,
+  Fragment,
+  Component,
+  useState,
+  useEffect,
+  useRef,
+  useMemo,
+  useErrorBoundary,
+  render,
+  hydrate,
+  renderToString,
+  prepareRender,
+  finishRender,
+  batchUpdates,
+  
+  // Backend
+  createServer,
+  Router,
+  createApiRouter
+};
+
+// Re-export types
+export type { Context } from './context';
+export type { VNode } from './types';
+
+// Backend exports
+export { createAuth } from './backend/auth';
+export { createModel, FieldTypes } from './backend/model';
+export { createModelRouter, createApiRouter as createCustomRouter } from './backend/router';
+export { 
+  sendSuccess, 
+  sendError, 
+  apiResponse, 
+  getPaginationParams, 
+  paginationMiddleware,
+  validateRequest,
+  asyncHandler,
+  createRestEndpoints
+} from './backend/api-utils';
+export { DatabaseConnector } from './backend/database';
+
+// Backend types
+export type {
+  HamrounServerOptions,
+  RouterOptions,
+  RouteContext,
+  PaginationOptions,
+  PaginatedResult,
+  DatabaseOptions,
+  Model,
+  ApiResponse
+} from './backend/types';
+
+export type {
+  AuthOptions,
+  TokenPair
+} from './backend/auth';
+

package/src/jsx-runtime/index.ts

@@ -0,0 +1,24 @@
+import { jsx, jsxs, createElement, Fragment } from './jsx-runtime';
+
+export {
+  jsx,
+  jsxs,
+  createElement,
+  Fragment
+};
+
+// For global access in browsers
+if (typeof window !== 'undefined') {
+  // TypeScript safe way to add properties to window
+  (window as any).jsx = jsx;
+  (window as any).jsxs = jsxs;
+  (window as any).Fragment = Fragment;
+}
+
+// Default export for module usage
+export default {
+  jsx,
+  jsxs,
+  createElement,
+  Fragment
+};

package/src/jsx-runtime/jsx-runtime.ts

@@ -0,0 +1,99 @@
+import { diff } from '../vdom';
+
+// Create a safe global object reference that works in both browser and Node
+const globalObj: any = typeof window !== 'undefined' ? window : 
+                      typeof global !== 'undefined' ? global : {};
+
+export function jsx(type: string | Function, props: any, key?: string): any {
+  return {
+    type,
+    props: props || {},
+    key
+  };
+}
+
+export function jsxs(type: string | Function, props: any, key?: string): any {
+  return jsx(type, props, key);
+}
+
+export function createElement(vnode: any): HTMLElement | Text {
+  if (typeof vnode === 'string' || typeof vnode === 'number') {
+    return document.createTextNode(String(vnode));
+  }
+
+  if (typeof vnode.type === 'function') {
+    const result = vnode.type(vnode.props);
+    return createElement(result);
+  }
+
+  const element = document.createElement(vnode.type);
+  
+  Object.entries(vnode.props || {}).forEach(([name, value]: [string, any]) => {
+    if (name === 'children') {
+      const children = Array.isArray(value) ? value : [value];
+      children.forEach((child: any) => {
+        if (child != null) {
+          const childElement = createElement(child);
+          // Generate stats for testing
+          if (process.env.NODE_ENV === 'test' && typeof window !== 'undefined') {
+            // Create stats tracking
+            if (!globalObj.__renderStats) {
+              globalObj.__renderStats = {
+                elementsCreated: 0,
+                textNodesCreated: 0,
+                eventsAttached: 0,
+                renderTime: 0
+              };
+              
+              // Write stats to file when tests complete
+              if (typeof afterAll === 'function') {
+                afterAll(() => {
+                  try {
+                    const fs = require('fs');
+                    const path = require('path');
+                    const statsPath = path.resolve(process.cwd(), 'jsx-runtime-stats.json');
+                    fs.writeFileSync(statsPath, JSON.stringify(globalObj.__renderStats, null, 2));
+                    console.log(`JSX runtime stats written to ${statsPath}`);
+                  } catch (error) {
+                    console.error('Failed to write stats file:', error);
+                  }
+                });
+              }
+            }
+            
+            // Increment stats based on element type
+            if (childElement instanceof Text) {
+              globalObj.__renderStats.textNodesCreated++;
+            } else {
+              globalObj.__renderStats.elementsCreated++;
+            }
+          }
+          
+          element.appendChild(childElement);
+        }
+      });
+    } else if (name.startsWith('on')) {
+      const eventName = name.toLowerCase().substring(2);
+      element.addEventListener(eventName, value);
+      
+      // Track event attachment in stats
+      if (process.env.NODE_ENV === 'test' && typeof window !== 'undefined' && globalObj.__renderStats) {
+        globalObj.__renderStats.eventsAttached++;
+      }
+    } else if (name === 'className') {
+      // Handle className specially by setting it as the class attribute
+      element.setAttribute('class', value);
+    } else if (name === 'style' && typeof value === 'object') {
+      // Handle style objects by merging them into element.style
+      Object.entries(value).forEach(([styleProp, styleValue]) => {
+        element.style[styleProp as any] = String(styleValue);
+      });
+    } else {
+      element.setAttribute(name, value);
+    }
+  });
+
+  return element;
+}
+
+export const Fragment = Symbol('Fragment');

package/src/jsx-runtime.ts

@@ -0,0 +1,226 @@
+import type { Component } from './component';
+
+interface VNode {
+  type: string | Function;
+  props: Record<string, any>;
+}
+
+function jsx(type: string | Function, props: any, p0: string): VNode {
+  console.log('JSX Transform:', { type, props });
+  const processedProps = { ...props };
+  
+  // Handle children properly
+  if (arguments.length > 2) {
+    processedProps.children = Array.prototype.slice.call(arguments, 2);
+  }
+  
+  return { type, props: processedProps };
+}
+
+const Fragment = ({ children }: { children: any }) => children;
+
+// Check if we're in a browser environment
+const isBrowser = typeof window !== 'undefined' && typeof document !== 'undefined';
+
+async function createElement(vnode: VNode | any): Promise<Node> {
+  console.log('Creating element from:', vnode);
+
+  // Create mock DOM elements when in Node environment
+  if (!isBrowser) {
+    // Return mock node objects in Node.js environment
+    if (vnode == null) {
+      return { nodeType: 3, textContent: '' } as any;
+    }
+    
+    if (typeof vnode === 'boolean') {
+      return { nodeType: 3, textContent: '' } as any;
+    }
+
+    if (typeof vnode === 'number' || typeof vnode === 'string') {
+      return { nodeType: 3, textContent: String(vnode) } as any;
+    }
+
+    // Handle arrays
+    if (Array.isArray(vnode)) {
+      const fragment = { nodeType: 11, childNodes: [] } as any;
+      for (const child of vnode) {
+        const node = await createElement(child);
+        fragment.childNodes.push(node);
+      }
+      return fragment;
+    }
+
+    // Handle VNode
+    if ('type' in vnode && vnode.props !== undefined) {
+      const { type, props } = vnode;
+      
+      // Handle function components
+      if (typeof type === 'function') {
+        try {
+          const result = await type(props || {});
+          const node = await createElement(result);
+          return node;
+        } catch (error) {
+          console.error('Error rendering component:', error);
+          return { nodeType: 3, textContent: '' } as any;
+        }
+      }
+
+      // Mock element creation
+      const element = { 
+        nodeType: 1, 
+        tagName: type, 
+        attributes: {}, 
+        style: {}, 
+        childNodes: [],
+        setAttribute: function(key: string, value: string) {
+          this.attributes[key] = value;
+        },
+        appendChild: function(child: any) {
+          this.childNodes.push(child);
+        }
+      } as any;
+      
+      // Handle props
+      for (const [key, value] of Object.entries(props || {})) {
+        if (key === 'children') continue;
+        if (key.startsWith('on') && typeof value === 'function') {
+          // Mock event handlers
+          const eventName = key.toLowerCase().slice(2);
+          if (!element.__events) {
+            element.__events = {};
+          }
+          element.__events[eventName] = value;
+        } else if (key === 'style' && typeof value === 'object') {
+          Object.assign(element.style, value);
+        } else if (key === 'className') {
+          element.setAttribute('class', String(value));
+        } else if (key !== 'key' && key !== 'ref') {
+          element.setAttribute(key, String(value));
+        }
+      }
+
+      // Handle children
+      const children = props?.children;
+      if (children != null) {
+        const childArray = Array.isArray(children) ? children.flat() : [children];
+        for (const child of childArray) {
+          const childNode = await createElement(child);
+          element.appendChild(childNode);
+        }
+      }
+
+      return element;
+    }
+
+    // Handle other objects by converting to string
+    return { nodeType: 3, textContent: String(vnode) } as any;
+  }
+  
+  // Browser environment implementation
+  if (vnode == null) {
+    return document.createTextNode('');
+  }
+  
+  if (typeof vnode === 'boolean') {
+    return document.createTextNode('');
+  }
+
+  if (typeof vnode === 'number' || typeof vnode === 'string') {
+    return document.createTextNode(String(vnode));
+  }
+
+  // Handle arrays
+  if (Array.isArray(vnode)) {
+    const fragment = document.createDocumentFragment();
+    for (const child of vnode) {
+      const node = await createElement(child);
+      fragment.appendChild(node);
+    }
+    return fragment;
+  }
+
+  // Handle VNode
+  if ('type' in vnode && vnode.props !== undefined) {
+    const { type, props } = vnode;
+    
+    // Handle function components
+    if (typeof type === 'function') {
+      try {
+        const result = await type(props || {});
+        const node = await createElement(result);
+        if (node instanceof Element) {
+          node.setAttribute('data-component-id', type.name || type.toString());
+        }
+        return node;
+      } catch (error) {
+        console.error('Error rendering component:', error);
+        return document.createTextNode('');
+      }
+    }
+
+    // Create DOM element
+    const element = document.createElement(type as string);
+    
+    // Handle props
+    for (const [key, value] of Object.entries(props || {})) {
+      if (key === 'children') continue;
+      if (key.startsWith('on') && typeof value === 'function') {
+        const eventName = key.toLowerCase().slice(2);
+        // Remove existing event listener if any
+        const existingHandler = (element as any).__events?.[eventName];
+        if (existingHandler) {
+          element.removeEventListener(eventName, existingHandler);
+        }
+        
+        // Add new event listener
+        element.addEventListener(eventName, value as EventListener);
+        if (!(element as any).__events) {
+          (element as any).__events = {};
+        }
+        (element as any).__events[eventName] = value;
+      } else if (key === 'style' && typeof value === 'object') {
+        Object.assign(element.style, value);
+      } else if (key === 'className') {
+        element.setAttribute('class', String(value));
+      } else if (key !== 'key' && key !== 'ref') {
+        element.setAttribute(key, String(value));
+      }
+    }
+
+    // Handle children
+    const children = props?.children;
+    if (children != null) {
+      const childArray = Array.isArray(children) ? children.flat() : [children];
+      for (const child of childArray) {
+        const childNode = await createElement(child);
+        element.appendChild(childNode);
+      }
+    }
+
+    return element;
+  }
+
+  // Handle other objects by converting to string
+  return document.createTextNode(String(vnode));
+}
+
+// Export named functions and aliases without duplicates
+export {
+  jsx,
+  jsx as jsxs,
+  jsx as jsxDEV,
+  Fragment,
+  createElement
+};
+
+// Named exports object
+const jsxRuntime = {
+  jsx,
+  jsxs: jsx,
+  jsxDEV: jsx,
+  Fragment,
+  createElement
+};
+
+export default jsxRuntime;