frontend-hamroun 1.2.15 → 1.2.17

package/src/cli/index.ts

@@ -1,257 +0,0 @@
-#!/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'));
-
-// Define interfaces for type safety
-interface ProjectOptions {
-  template: string;
-  skipInstall: boolean;
-}
-
-// Available templates
-const TEMPLATES: Record<string, string> = {
-  '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(): readline.Interface {
-  return readline.createInterface({
-    input: process.stdin,
-    output: process.stdout
-  });
-}
-
-// Print banner
-function printBanner(): void {
-  console.log(`
-${colors.blue}${colors.bright}╔══════════════════════════════════════════════╗
-║                                              ║
-║   Frontend Hamroun v${packageJson.version.padEnd(25)}║
-║   A lightweight frontend & backend framework  ║
-║                                              ║
-╚══════════════════════════════════════════════╝${colors.reset}
-  `);
-}
-
-// Print help
-function printHelp(): void {
-  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: string, options: ProjectOptions): Promise<void> {
-  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: string, destination: string): void {
-  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(): string {
-  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(): void {
-  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: ProjectOptions = {
-      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

@@ -1,98 +0,0 @@
-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

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

package/src/context.ts

@@ -1,29 +0,0 @@
-import { useState, useEffect } from './hooks';
-
-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;
-  _currentValue: T;
-}
-
-export function createContext<T>(defaultValue: T): Context<T> {
-  const context: Context<T> = {
-    _currentValue: defaultValue,
-    Provider: function Provider({ value, children }) {
-      context._currentValue = value;
-      return children;
-    },
-    Consumer: function Consumer({ children }) {
-      return children(context._currentValue);
-    }
-  };
-
-  return context;
-}
-
-export function useContext<T>(context: Context<T>): T {
-  return context._currentValue;
-}

package/src/hooks.ts

@@ -1,211 +0,0 @@
-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