frontend-hamroun 1.1.90 → 1.2.1

package/src/renderer.ts

@@ -0,0 +1,55 @@
+import { createElement } from './jsx-runtime';
+import { prepareRender, finishRender, setRenderCallback } from './hooks';
+import { batchUpdates } from './batch';
+
+// Track hydration state
+let isHydrating = false;
+
+/**
+ * Hydrates a server-rendered component
+ * @param element The element to hydrate
+ * @param container The container element that contains server-rendered HTML
+ */
+export async function hydrate(element: any, container: HTMLElement) {
+  isHydrating = true;
+  try {
+    await render(element, container);
+  } finally {
+    isHydrating = false;
+  }
+}
+
+/**
+ * Renders a component to the DOM
+ * @param element The element to render
+ * @param container The container to render into
+ */
+export async function render(element: any, container: HTMLElement) {
+  console.log('Rendering to:', container.id || 'unnamed-container');
+  
+  batchUpdates(async () => {
+    const rendererId = prepareRender();
+    try {
+      setRenderCallback(render, element, container);
+      const domNode = await createElement(element);
+      
+      // Don't clear container if we're hydrating
+      if (!isHydrating) {
+        container.innerHTML = '';
+      }
+      
+      // When hydrating, we should match and update existing nodes
+      // rather than appending new ones
+      if (isHydrating && container.firstChild) {
+        // During hydration, we assume the structure matches
+        // and just attach event handlers without replacing DOM
+        console.log('Hydrating existing DOM');
+      } else {
+        container.appendChild(domNode);
+      }
+      
+    } finally {
+      finishRender();
+    }
+  });
+}

package/src/server-renderer.ts

@@ -0,0 +1,114 @@
+import { prepareRender, finishRender, setRenderCallback } from './hooks';
+
+/**
+ * Renders a component to a string
+ */
+export async function renderToString(element: any): Promise<string> {
+  // Setup render context
+  const rendererId = prepareRender();
+  setRenderCallback(() => {}, element, null as any);
+  
+  try {
+    if (element == null) return '';
+    
+    if (typeof element === 'boolean') return '';
+    
+    if (typeof element === 'number' || typeof element === 'string') {
+      return escapeHtml(String(element));
+    }
+
+    if (Array.isArray(element)) {
+      const children = await Promise.all(element.map(renderToString));
+      return children.join('');
+    }
+
+    if ('type' in element && element.props !== undefined) {
+      const { type, props } = element;
+
+      // Handle function components
+      if (typeof type === 'function') {
+        try {
+          // Prepare new render context for the component
+          prepareRender();
+          const result = await type(props || {});
+          const html = await renderToString(result);
+          finishRender();
+          return html;
+        } catch (error) {
+          console.error('Error rendering component:', error);
+          return '';
+        }
+      }
+
+      // Handle Fragment special case
+      if (type === Symbol.for('react.fragment') || type.name === 'Fragment') {
+        if (props.children) {
+          const children = Array.isArray(props.children) ? props.children : [props.children];
+          const renderedChildren = await Promise.all(children.map(renderToString));
+          return renderedChildren.join('');
+        }
+        return '';
+      }
+
+      // Handle regular elements
+      let html = `<${type}`;
+
+      // Add attributes, skipping internal ones like 'key'
+      for (const [key, value] of Object.entries(props || {})) {
+        if (key === 'children' || key === 'key') continue;
+        if (key === 'className') {
+          html += ` class="${escapeHtml(String(value))}"`;
+        } else if (key === 'style' && typeof value === 'object') {
+          html += ` style="${stringifyStyle(value || {})}"`;
+        } else if (!key.startsWith('on')) {
+          html += ` ${key}="${escapeHtml(String(value))}"`;
+        }
+      }
+
+      // Handle self-closing tags
+      const voidElements = new Set([
+        'area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input',
+        'link', 'meta', 'param', 'source', 'track', 'wbr'
+      ]);
+      
+      if (voidElements.has(type)) {
+        return html + '/>';
+      }
+
+      html += '>';
+
+      // Add children
+      if (props?.children) {
+        const children = Array.isArray(props.children) ? props.children : [props.children];
+        for (const child of children) {
+          html += await renderToString(child);
+        }
+      }
+
+      return html + `</${type}>`;
+    }
+
+    return escapeHtml(String(element));
+  } finally {
+    finishRender();
+  }
+}
+
+function escapeHtml(str: string): string {
+  return str
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+}
+
+function stringifyStyle(style: Record<string, any>): string {
+  return Object.entries(style)
+    .map(([key, value]) => `${hyphenate(key)}:${value}`)
+    .join(';');
+}
+
+function hyphenate(str: string): string {
+  return str.replace(/[A-Z]/g, match => '-' + match.toLowerCase());
+}

package/src/types/bcrypt.d.ts

@@ -0,0 +1,30 @@
+declare module 'bcrypt' {
+  /**
+   * Generate a salt
+   * @param rounds Number of rounds to use, defaults to 10
+   * @param callback Callback function (err, salt)
+   */
+  export function genSalt(rounds?: number, callback?: (err: Error | null, salt: string) => void): Promise<string>;
+  
+  /**
+   * Generate a hash for the provided string
+   * @param data Data to hash
+   * @param saltOrRounds Salt or number of rounds to use
+   * @param callback Callback function (err, hash)
+   */
+  export function hash(data: string, saltOrRounds: string | number, callback?: (err: Error | null, hash: string) => void): Promise<string>;
+  
+  /**
+   * Compare provided data with a hash
+   * @param data Data to compare
+   * @param encrypted Hash to compare against
+   * @param callback Callback function (err, result)
+   */
+  export function compare(data: string, encrypted: string, callback?: (err: Error | null, result: boolean) => void): Promise<boolean>;
+  
+  /**
+   * Get the number of rounds used in the specified hash
+   * @param encrypted Hash to extract rounds from
+   */
+  export function getRounds(encrypted: string): number;
+}

package/src/types/jsonwebtoken.d.ts

@@ -0,0 +1,55 @@
+declare module 'jsonwebtoken' {
+  export interface JwtPayload {
+    [key: string]: any;
+    iat?: number;
+    exp?: number;
+    aud?: string | string[];
+    sub?: string;
+    iss?: string;
+  }
+
+  export interface VerifyOptions {
+    algorithms?: string[];
+    audience?: string | string[];
+    complete?: boolean;
+    issuer?: string | string[];
+    jwtid?: string;
+    ignoreExpiration?: boolean;
+    ignoreNotBefore?: boolean;
+    subject?: string;
+    clockTolerance?: number;
+    maxAge?: string | number;
+    clockTimestamp?: number;
+  }
+
+  export interface SignOptions {
+    algorithm?: string;
+    keyid?: string;
+    expiresIn?: string | number;
+    notBefore?: string | number;
+    audience?: string | string[];
+    subject?: string;
+    issuer?: string;
+    jwtid?: string;
+    noTimestamp?: boolean;
+    header?: object;
+    encoding?: string;
+  }
+
+  export function sign(
+    payload: string | Buffer | object,
+    secretOrPrivateKey: string | Buffer,
+    options?: SignOptions
+  ): string;
+
+  export function verify(
+    token: string,
+    secretOrPublicKey: string | Buffer,
+    options?: VerifyOptions
+  ): JwtPayload | string;
+
+  export function decode(
+    token: string,
+    options?: { complete?: boolean; json?: boolean }
+  ): null | JwtPayload | { [key: string]: any };
+}

package/src/types.d.ts

@@ -0,0 +1,26 @@
+declare namespace JSX {
+  interface IntrinsicElements {
+  }
+  
+  interface Element extends Node {}
+  
+  interface ElementAttributesProperty {
+    props: {};
+  }
+  
+  interface ElementChildrenAttribute {
+    children: {};
+  }
+}
+
+interface Window {
+  jsx: any;
+  jsxs: any;
+  Fragment: any;
+  __renderStats?: {
+    elementsCreated: number;
+    textNodesCreated: number;
+    eventsAttached: number;
+    renderTime: number;
+  };
+}

package/src/types.ts

@@ -0,0 +1,21 @@
+export type { Context } from './context';
+
+export interface VNode {
+  type: string | Function;
+  props: Record<string, any>;
+  key?: string | number;
+}
+
+// Global JSX namespace
+declare global {
+  namespace JSX {
+    interface Element {
+      type: string | Function;
+      props: Record<string, any>;
+      key?: string | number;
+    }
+    interface IntrinsicElements {
+      [elemName: string]: any;
+    }
+  }
+}

package/src/vdom.ts

@@ -0,0 +1,34 @@
+interface VNode {
+  type: string | Function;
+  props: Record<string, any>;
+  key?: string | number;
+}
+
+function arePropsEqual(oldProps: any, newProps: any): boolean {
+  // Handle null/undefined props
+  oldProps = oldProps || {};
+  newProps = newProps || {};
+  
+  const oldKeys = Object.keys(oldProps).filter(k => k !== 'children');
+  const newKeys = Object.keys(newProps).filter(k => k !== 'children');
+  
+  if (oldKeys.length !== newKeys.length) return false;
+  return oldKeys.every(key => oldProps[key] === newProps[key]);
+}
+
+export function diff(oldNode: VNode | any, newNode: VNode | any): boolean {
+  if (oldNode == null || newNode == null) return oldNode !== newNode;
+  if (typeof oldNode !== typeof newNode) return true;
+  if (typeof newNode === 'string' || typeof newNode === 'number')
+    return oldNode !== newNode;
+  
+  // Handle primitive values that are not objects
+  if (!oldNode.type || !newNode.type) return oldNode !== newNode;
+  
+  if (newNode.type !== oldNode.type) return true;
+  return !arePropsEqual(oldNode.props, newNode.props);
+}
+
+export function shouldComponentUpdate(oldProps: any, newProps: any): boolean {
+  return !arePropsEqual(oldProps, newProps);
+}

package/templates/basic-app/package.json

@@ -1,28 +1,30 @@
 {
-  "name": "my-app",
+  "name": "front-package-app",
   "private": true,
-  "version": "0.0.0",
+  "version": "0.1.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
     "preview": "vite preview",
-    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "lint:fix": "eslint src --ext ts,tsx --fix"
+    "start": "node dist/server.js",
+    "dev:full": "concurrently \"npm run dev\" \"npm run dev:server\"",
+    "dev:server": "tsx watch src/server.ts"
   },
   "dependencies": {
-    "frontend-hamroun": "latest"
+    "front-package": "latest"
   },
   "devDependencies": {
-    "typescript": "^5.0.0",
-    "vite": "^4.4.9",
-    "@typescript-eslint/eslint-plugin": "^6.0.0",
-    "@typescript-eslint/parser": "^6.0.0",
-    "eslint": "^8.45.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.3",
-    "tailwindcss": "^3.3.3",
-    "postcss": "^8.4.27",
-    "autoprefixer": "^10.4.14"
+    "@tailwindcss/forms": "^0.5.7",
+    "@tailwindcss/typography": "^0.5.10",
+    "@types/node": "^20.10.0",
+    "autoprefixer": "^10.4.16",
+    "concurrently": "^8.2.2",
+    "cssnano": "^6.0.1",
+    "postcss": "^8.4.31",
+    "tailwindcss": "^3.3.5",
+    "tsx": "^4.6.0",
+    "typescript": "^5.3.2",
+    "vite": "^5.0.0"
   }
 }

package/templates/basic-app/postcss.config.js

@@ -2,5 +2,6 @@ export default {
   plugins: {
     tailwindcss: {},
     autoprefixer: {},
+    cssnano: process.env.NODE_ENV === 'production' ? { preset: 'default' } : false
   },
 }

package/templates/basic-app/src/App.tsx

@@ -0,0 +1,65 @@
+import { useState, useEffect } from 'frontend-hamroun';
+import { Header } from './components/Header';
+import { Counter } from './components/Counter';
+import { ApiClient } from './api.js';
+import { TodoList } from './components/TodoList.js';
+
+interface AppProps {
+  api: ApiClient;
+}
+
+export function App({ api }: AppProps) {
+  const [todos, setTodos] = useState([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    // Fetch data when component mounts
+    async function fetchData() {
+      try {
+        setIsLoading(true);
+        const data = await api.getTodos();
+        setTodos(data);
+        setError(null);
+      } catch (err) {
+        setError('Failed to fetch todos');
+        console.error(err);
+      } finally {
+        setIsLoading(false);
+      }
+    }
+
+    fetchData();
+  }, [api]);
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <Header title="My Front Package App" />
+      
+      <main className="container mx-auto px-4 py-8">
+        <h1 className="text-3xl font-bold text-center mb-8">
+          Welcome to your Front Package app!
+        </h1>
+        
+        <div className="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl mb-8">
+          <div className="p-8">
+            <Counter />
+          </div>
+        </div>
+        
+        <div className="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl">
+          <div className="p-8">
+            <h2 className="text-xl font-bold mb-4">Todo List</h2>
+            {isLoading ? (
+              <div className="text-center py-4">Loading...</div>
+            ) : error ? (
+              <div className="text-red-500 py-4">{error}</div>
+            ) : (
+              <TodoList todos={todos} api={api} setTodos={setTodos} />
+            )}
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+}

package/templates/basic-app/src/api.ts

@@ -0,0 +1,58 @@
+export interface Todo {
+  id: string;
+  title: string;
+  completed: boolean;
+}
+
+export interface ApiClientOptions {
+  baseUrl: string;
+}
+
+export interface ApiClient {
+  getTodos: () => Promise<Todo[]>;
+  getTodo: (id: string) => Promise<Todo>;
+  addTodo: (todo: Omit<Todo, 'id'>) => Promise<Todo>;
+  updateTodo: (id: string, updates: Partial<Omit<Todo, 'id'>>) => Promise<Todo>;
+  deleteTodo: (id: string) => Promise<void>;
+}
+
+export function createApiClient(options: ApiClientOptions): ApiClient {
+  const { baseUrl } = options;
+  
+  async function fetchJson<T>(endpoint: string, options: RequestInit = {}): Promise<T> {
+    const response = await fetch(`${baseUrl}${endpoint}`, {
+      ...options,
+      headers: {
+        'Content-Type': 'application/json',
+        ...options.headers,
+      },
+    });
+    
+    if (!response.ok) {
+      const error = await response.text();
+      throw new Error(error || `API request failed with status ${response.status}`);
+    }
+    
+    return response.json();
+  }
+
+  return {
+    getTodos: () => fetchJson<Todo[]>('/todos'),
+    
+    getTodo: (id: string) => fetchJson<Todo>(`/todos/${id}`),
+    
+    addTodo: (todo) => fetchJson<Todo>('/todos', {
+      method: 'POST',
+      body: JSON.stringify(todo),
+    }),
+    
+    updateTodo: (id: string, updates) => fetchJson<Todo>(`/todos/${id}`, {
+      method: 'PATCH',
+      body: JSON.stringify(updates),
+    }),
+    
+    deleteTodo: (id: string) => fetchJson<void>(`/todos/${id}`, {
+      method: 'DELETE',
+    }),
+  };
+}

package/templates/basic-app/src/components/Counter.tsx

@@ -0,0 +1,26 @@
+import { useState } from 'front-package';
+
+export function Counter() {
+  const [count, setCount] = useState(0);
+
+  return (
+    <div className="text-center">
+      <h2 className="text-xl font-bold mb-4">Counter Example</h2>
+      <p className="mb-4">Count: <span className="font-bold">{count}</span></p>
+      <div className="flex justify-center gap-2">
+        <button 
+          onClick={() => setCount(count - 1)}
+          className="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600 transition"
+        >
+          Decrement
+        </button>
+        <button 
+          onClick={() => setCount(count + 1)}
+          className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition"
+        >
+          Increment
+        </button>
+      </div>
+    </div>
+  );
+}

package/templates/basic-app/src/components/Header.tsx

@@ -0,0 +1,9 @@
+export function Header({ title }: { title: string }) {
+  return (
+    <header className="bg-primary-600 text-white shadow-lg">
+      <div className="container mx-auto px-4 py-6">
+        <h1 className="text-2xl font-bold">{title}</h1>
+      </div>
+    </header>
+  );
+}

package/templates/basic-app/src/components/TodoList.tsx

@@ -0,0 +1,90 @@
+import { useState } from 'front-package';
+import { ApiClient, Todo } from '../api';
+
+interface TodoListProps {
+  todos: Todo[];
+  api: ApiClient;
+  setTodos: (todos: Todo[]) => void;
+}
+
+export function TodoList({ todos, api, setTodos }: TodoListProps) {
+  const [newTodoText, setNewTodoText] = useState('');
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  async function handleAddTodo(e: Event) {
+    e.preventDefault();
+    if (!newTodoText.trim()) return;
+    
+    try {
+      setIsSubmitting(true);
+      const newTodo = await api.addTodo({
+        title: newTodoText,
+        completed: false
+      });
+      
+      setTodos([...todos, newTodo]);
+      setNewTodoText('');
+    } catch (err) {
+      console.error('Failed to add todo:', err);
+    } finally {
+      setIsSubmitting(false);
+    }
+  }
+
+  async function handleToggleTodo(id: string, completed: boolean) {
+    try {
+      await api.updateTodo(id, { completed });
+      setTodos(
+        todos.map(todo => 
+          todo.id === id ? { ...todo, completed } : todo
+        )
+      );
+    } catch (err) {
+      console.error('Failed to update todo:', err);
+    }
+  }
+
+  return (
+    <div>
+      <form onSubmit={handleAddTodo} className="mb-4">
+        <div className="flex gap-2">
+          <input
+            type="text"
+            value={newTodoText}
+            onChange={(e) => setNewTodoText(e.target.value)}
+            placeholder="Add a new todo..."
+            className="flex-1 border rounded px-3 py-2"
+            disabled={isSubmitting}
+          />
+          <button 
+            type="submit" 
+            className="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600 transition"
+            disabled={isSubmitting || !newTodoText.trim()}
+          >
+            {isSubmitting ? 'Adding...' : 'Add'}
+          </button>
+        </div>
+      </form>
+
+      <ul className="space-y-2">
+        {todos.length === 0 ? (
+          <li className="text-center py-2 text-gray-500">No todos yet</li>
+        ) : (
+          todos.map(todo => (
+            <li key={todo.id} className="flex items-center gap-2 p-2 border-b">
+              <input
+                type="checkbox"
+                checked={todo.completed}
+                onChange={(e) => handleToggleTodo(todo.id, e.target.checked)}
+                className="h-5 w-5 text-blue-600"
+              />
+              <span className={todo.completed ? 'line-through text-gray-500' : ''}>
+                {todo.title}
+              </span>
+            </li>
+          ))
+        )}
+      </ul>
+    </div>
+  );
+}

package/templates/basic-app/src/main.ts

@@ -0,0 +1,20 @@
+import './main.css';
+import { render } from 'frontend-hamroun';
+import { App } from './App';
+import { createApiClient } from './api';
+
+// Initialize API client
+const api = createApiClient({
+  baseUrl: import.meta.env.VITE_API_URL || '/api'
+});
+
+// Render the app into the DOM
+document.addEventListener('DOMContentLoaded', () => {
+  const rootElement = document.getElementById('app');
+  if (rootElement) {
+    render(<App api={api} />, rootElement);
+    console.log('App rendered successfully');
+  } else {
+    console.error('Root element #app not found');
+  }
+});