frontend-hamroun 1.2.53 → 1.2.54

package/README.md

@@ -1,69 +1,31 @@
-<div align="center">
-
-# 🚀 Frontend Hamroun
-
-<img src="https://raw.githubusercontent.com/hamroun/frontend-hamroun/main/assets/logo.png" alt="Frontend Hamroun Logo" width="300" style="border-radius: 10px; margin: 20px 0;"/>
+# Frontend Hamroun
 
 A lightweight full-stack JavaScript framework with Virtual DOM and hooks implementation
 
-[![npm](https://img.shields.io/npm/v/frontend-hamroun?style=for-the-badge&color=blue)](https://www.npmjs.com/package/frontend-hamroun)
-[![npm bundle size](https://img.shields.io/bundlephobia/minzip/frontend-hamroun?style=for-the-badge&color=green)](https://bundlephobia.com/result?p=frontend-hamroun)
-[![npm](https://img.shields.io/npm/dt/frontend-hamroun?style=for-the-badge&color=purple)](https://www.npmjs.com/package/frontend-hamroun)
-[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg?style=for-the-badge)](LICENSE)
-
-<img src="https://via.placeholder.com/800x400?text=Frontend+Hamroun+Framework" alt="Framework Banner" width="800" style="border-radius: 10px;"/>
-
-</div>
-
-<br>
-
-## 📋 Contents
+[![npm](https://img.shields.io/npm/v/frontend-hamroun)](https://www.npmjs.com/package/frontend-hamroun)
+[![npm bundle size](https://img.shields.io/bundlephobia/minzip/frontend-hamroun)](https://bundlephobia.com/result?p=frontend-hamroun)
+[![npm](https://img.shields.io/npm/dt/frontend-hamroun)](https://www.npmjs.com/package/frontend-hamroun)
+[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)
 
-- [Installation](#-installation)
-- [Quick Start](#-quick-start)
-- [Features](#-features)
-- [Client-side Features](#-client-side-features)
-- [Server-side Features](#-server-side-features)
-- [Server-Side Rendering](#-server-side-rendering)
-- [Performance Optimization](#-performance-optimization)
-- [CLI Tools](#-cli-tools)
-- [TypeScript Support](#-typescript-support)
-- [Browser Compatibility](#-browser-compatibility)
-- [Contributing](#-contributing)
-- [Documentation](#-documentation)
-
-<br>
-
-## 🔌 Installation
+## Installation
 
 ```bash
 npm install frontend-hamroun
 ```
 
-<div align="center">
-  
-### ✨ Quick Links
-
-[![Documentation](https://img.shields.io/badge/Documentation-Read_Docs-blue?style=for-the-badge)](https://github.com/hamroun/frontend-hamroun)
-[![Examples](https://img.shields.io/badge/Examples-View_Code-green?style=for-the-badge)](https://github.com/hamroun/frontend-hamroun/examples)
-[![API Reference](https://img.shields.io/badge/API-Reference-orange?style=for-the-badge)](https://github.com/hamroun/frontend-hamroun/docs/API.md)
-[![Discord](https://img.shields.io/badge/Discord-Join_Chat-7289DA?style=for-the-badge&logo=discord&logoColor=white)](https://discord.gg/frontendhamroun)
-
-</div>
+## Quick Start
 
-## 🚀 Quick Start
-
-Create a new project with a single command:
+Create a new project using:
 
 ```bash
-# Using create-frontend-app
+# Using the create-frontend-app command
 npx create-frontend-app my-app
 
 # Or using the frontend-hamroun CLI
 npx frontend-hamroun create my-app
 ```
 
-Then launch your new project:
+Then:
 
 ```bash
 cd my-app
@@ -71,92 +33,17 @@ npm install
 npm run dev
 ```
 
-<div align="center">
-
-### 🎮 Interactive Demo
-
-[![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?style=for-the-badge&logo=codesandbox)](https://codesandbox.io)
-[![Open in StackBlitz](https://img.shields.io/badge/Open%20in-StackBlitz-orange?style=for-the-badge&logo=stackblitz)](https://stackblitz.com)
-
-</div>
-
-## 🎯 Features
-
-<div class="features-grid" style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;">
-
-<div class="feature-card" style="background: #f8f9fa; border-radius: 8px; padding: 20px;">
-  <h3>🔍 Lightweight Core</h3>
-  <p><strong>&lt;5KB</strong> gzipped for essential runtime</p>
-</div>
-
-<div class="feature-card" style="background: #f8f9fa; border-radius: 8px; padding: 20px;">
-  <h3>⚡ Full-Stack Solution</h3>
-  <p>Client and server capabilities in one package</p>
-</div>
-
-<div class="feature-card" style="background: #f8f9fa; border-radius: 8px; padding: 20px;">
-  <h3>🔄 Virtual DOM</h3>
-  <p>Efficient rendering and diffing algorithm</p>
-</div>
-
-<div class="feature-card" style="background: #f8f9fa; border-radius: 8px; padding: 20px;">
-  <h3>🪝 Hooks API</h3>
-  <p>Complete hooks system for state management</p>
-</div>
-
-<div class="feature-card" style="background: #f8f9fa; border-radius: 8px; padding: 20px;">
-  <h3>🌐 Server-Side Rendering</h3>
-  <p>Optimized SSR with hydration</p>
-</div>
-
-<div class="feature-card" style="background: #f8f9fa; border-radius: 8px; padding: 20px;">
-  <h3>🔐 Authentication</h3>
-  <p>Built-in JWT authentication system</p>
-</div>
-
-<div class="feature-card" style="background: #f8f9fa; border-radius: 8px; padding: 20px;">
-  <h3>💾 Database Integration</h3>
-  <p>Support for MongoDB, MySQL, PostgreSQL</p>
-</div>
-
-<div class="feature-card" style="background: #f8f9fa; border-radius: 8px; padding: 20px;">
-  <h3>🧩 TypeScript Support</h3>
-  <p>Full type definitions included</p>
-</div>
-
-</div>
-
-<br>
-
-## 📊 Framework Comparison
-
-| Feature | Frontend Hamroun | React | Vue | Angular |
-|---------|------------------|-------|-----|---------|
-| Bundle Size | < 5KB | 42KB | 33KB | 65KB |
-| Virtual DOM | ✅ | ✅ | ✅ | ❌ |
-| Hooks API | ✅ | ✅ | ⚠️ | ❌ |
-| Built-in SSR | ✅ | ❌ | ⚠️ | ✅ |
-| Built-in API Server | ✅ | ❌ | ❌ | ❌ |
-| DB Integration | ✅ | ❌ | ❌ | ❌ |
-| Learning Curve | Low | Medium | Low | High |
-
-<br>
-
-## 💻 Basic Usage
+## Basic Usage
 
 ```jsx
 import { render, useState } from 'frontend-hamroun';
 
 function App() {
   const [count, setCount] = useState(0);
-  
   return (
-    <div className="app">
-      <h1>Frontend Hamroun Demo</h1>
-      <p>Count: {count}</p>
-      <button onClick={() => setCount(count + 1)}>
-        Increment
-      </button>
+    <div>
+      <h1>Count: {count}</h1>
+      <button onClick={() => setCount(count + 1)}>Increment</button>
     </div>
   );
 }
@@ -164,15 +51,23 @@ function App() {
 render(<App />, document.getElementById('root'));
 ```
 
-<div align="center">
-  <img src="https://via.placeholder.com/600x300?text=Application+Screenshot" alt="Application Screenshot" width="600" style="border-radius: 8px;"/>
-</div>
+## Features
 
-## 🧩 Client-side Features
+- **Lightweight Core**: <5KB gzipped for essential runtime
+- **Full-Stack Solution**: Client and server capabilities in one package
+- **Virtual DOM**: Efficient rendering and diffing algorithm
+- **Hooks API**: Complete hooks system (useState, useEffect, useMemo, useRef)
+- **Context API**: Simple state management across components
+- **Server-Side Rendering**: Optimized SSR with hydration
+- **Database Integration**: Support for MongoDB, MySQL, and PostgreSQL
+- **Authentication**: Built-in JWT authentication system
+- **API Routing**: Express-based file system routing
+- **TypeScript Support**: Full type definitions included
+- **Interactive CLI**: Powerful tools for project scaffolding and component creation
 
-### Component Development
+## Client-side Features
 
-Frontend Hamroun provides a React-like development experience:
+### Component Development
 
 ```jsx
 import { useState, useEffect } from 'frontend-hamroun';
@@ -188,81 +83,22 @@ function Counter() {
   return (
     <div className="counter">
       <h2>Counter: {count}</h2>
-      <div className="buttons">
-        <button onClick={() => setCount(count + 1)}>+</button>
-        <button onClick={() => setCount(count - 1)}>-</button>
-      </div>
-    </div>
-  );
-}
-```
-
-<details>
-<summary><b>🔍 View Hooks API Reference</b></summary>
-
-### Hooks System
-
-#### 🔄 useState
-```jsx
-const [count, setCount] = useState(0);
-setCount(count + 1); // Direct update
-setCount(prev => prev + 1); // Functional update
-```
-
-#### 🔄 useEffect
-```jsx
-useEffect(() => {
-  // Effect logic
-  const subscription = api.subscribe();
-  
-  return () => {
-    // Cleanup logic
-    subscription.unsubscribe();
-  };
-}, [dependency]); // Dependency array
-```
-
-#### 🔄 useMemo
-```jsx
-const expensiveValue = useMemo(() => {
-  return computeExpensiveValue(a, b);
-}, [a, b]); // Recomputes only when a or b changes
-```
-
-#### 🔄 useRef
-```jsx
-const inputRef = useRef(null);
-
-// Access the DOM element directly
-useEffect(() => {
-  inputRef.current.focus();
-}, []);
-
-return <input ref={inputRef} />;
-```
-
-#### 🔄 useErrorBoundary
-```jsx
-const [error, resetError] = useErrorBoundary();
-
-if (error) {
-  return (
-    <div className="error-boundary">
-      <h2>Something went wrong</h2>
-      <p>{error.message}</p>
-      <button onClick={resetError}>Try again</button>
+      <button onClick={() => setCount(count + 1)}>+</button>
+      <button onClick={() => setCount(count - 1)}>-</button>
     </div>
   );
 }
 ```
 
-</details>
+### Hooks API
 
-### 🔄 Context API
+- **useState**: Manage component state
+- **useEffect**: Handle side effects
+- **useMemo**: Memoize expensive calculations
+- **useRef**: Reference DOM elements and persist values
+- **useErrorBoundary**: Create error boundaries
 
-Share state across your component tree:
-
-<div class="code-with-diagram" style="display: flex; align-items: flex-start; gap: 20px;">
+### Context API
 
 ```jsx
 // Create context
@@ -276,9 +112,7 @@ function App() {
     <ThemeContext.Provider value={theme}>
       <Header />
       <Main />
-      <button onClick={() => setTheme(
-        theme === 'light' ? 'dark' : 'light'
-      )}>
+      <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
         Toggle theme
       </button>
     </ThemeContext.Provider>
@@ -288,35 +122,11 @@ function App() {
 // Consumer
 function Header() {
   const theme = useContext(ThemeContext);
-  return (
-    <header className={theme}>
-      <h1>My App</h1>
-    </header>
-  );
+  return <header className={theme}><h1>My App</h1></header>;
 }
 ```
 
-<div class="diagram" style="background: #f8f9fa; border-radius: 8px; padding: 15px; width: 300px;">
-  <strong>Context Flow Diagram</strong><br>
-  <pre style="background: #f0f0f0; padding: 10px; margin-top: 10px; border-radius: 5px;">
-App (Provider)
-    │
-    ├─► Header (Consumer)
-    │     Uses theme value
-    │
-    ├─► Main
-    │     │
-    │     └─► Article (Consumer)
-    │           Uses theme value
-    │
-    └─► Footer (Consumer)
-          Uses theme value
-  </pre>
-</div>
-
-</div>
-
-## 🖥️ Server-Side Features
+## Server-Side Features
 
 ### Express Server Integration
 
@@ -342,18 +152,8 @@ await app.start();
 console.log('Server running at http://localhost:3000');
 ```
 
-<div align="center">
-  <img src="https://via.placeholder.com/600x300?text=Server+Architecture+Diagram" alt="Server Architecture" width="600" style="border-radius: 8px;"/>
-</div>
-
 ### API Routes
 
-Create API endpoints easily with file-based routing:
-
-<div class="file-structure" style="display: flex; gap: 20px;">
-
-<div class="code-example" style="flex: 1;">
-
 ```js
 // api/users.js - Automatically mapped to /api/users
 export async function get(req, res) {
@@ -365,179 +165,18 @@ export async function post(req, res) {
   const { name, email } = req.body;
   
   if (!name || !email) {
-    return res.status(400).json({ 
-      error: 'Name and email are required' 
-    });
+    return res.status(400).json({ error: 'Name and email are required' });
   }
   
-  const result = await req.db.collection('users').insertOne({
-    name, 
-    email
-  });
-  
+  const result = await req.db.collection('users').insertOne({ name, email });
   res.status(201).json(result);
 }
 ```
 
-</div>
-
-<div class="file-structure-diagram" style="background: #f8f9fa; border-radius: 8px; padding: 15px; min-width: 250px;">
-  <strong>File-based Routing</strong><br>
-  <pre style="background: #f0f0f0; padding: 10px; margin-top: 10px; border-radius: 5px;">
-api/
-├── users.js
-│   ├── get() → GET /api/users
-│   └── post() → POST /api/users
-├── posts/
-│   ├── index.js
-│   │   └── get() → GET /api/posts
-│   └── [id].js
-│       └── get() → GET /api/posts/:id
-└── auth/
-    ├── login.js
-    │   └── post() → POST /api/auth/login
-    └── register.js
-        └── post() → POST /api/auth/register
-  </pre>
-</div>
-
-</div>
-
-<details>
-<summary><b>🔍 View Database Integration Examples</b></summary>
-
-### 💾 Database Integration
-
-Access your database directly in API routes:
-
-<div class="tabs">
-<div class="tab" id="mongodb">
-
-#### MongoDB Example
-
-```js
-// MongoDB example
-export async function get(req, res) {
-  const { id } = req.params;
-  const user = await req.db.collection('users').findOne({
-    _id: new ObjectId(id)
-  });
-  
-  if (!user) {
-    return res.status(404).json({ error: 'User not found' });
-  }
-  
-  res.json(user);
-}
-```
-
-</div>
-<div class="tab" id="mysql">
-
-#### MySQL Example
-
-```js
-// MySQL example 
-export async function get(req, res) {
-  const [users] = await req.db.execute(
-    'SELECT * FROM users WHERE active = ?', 
-    [true]
-  );
-  res.json(users);
-}
-```
-
-</div>
-<div class="tab" id="postgres">
-
-#### PostgreSQL Example
-
-```js
-// PostgreSQL example
-export async function get(req, res) {
-  const result = await req.db.query(
-    'SELECT * FROM users WHERE role = $1', 
-    ['admin']
-  );
-  res.json(result.rows);
-}
-```
-
-</div>
-</div>
-
-</details>
-
-<details>
-<summary><b>🔍 View Authentication Example</b></summary>
-
-### 🔐 Authentication
-
-Built-in JWT authentication:
-
-```js
-// api/auth/login.js
-export async function post(req, res) {
-  const { username, password } = req.body;
-  const user = await req.db.collection('users').findOne({ username });
-  
-  if (!user || !await req.auth.comparePasswords(password, user.password)) {
-    return res.status(401).json({ error: 'Invalid credentials' });
-  }
-  
-  const token = req.auth.generateToken(user);
-  res.json({ 
-    token, 
-    user: { id: user._id, username: user.username } 
-  });
-}
-
-// Protected route
-// api/profile.js
-export async function get(req, res) {
-  // req.auth.requireAuth middleware automatically added
-  // req.user contains the authenticated user
-  res.json(req.user);
-}
-```
-
-</details>
-
-<details>
-<summary><b>🔍 View Middleware Example</b></summary>
-
-### Middleware Support
-
-Add custom middleware to your routes:
-
-```js
-// middleware/logger.js
-export default function logger(req, res, next) {
-  console.log(`${req.method} ${req.path}`);
-  next();
-}
-
-// server.js
-import logger from './middleware/logger';
-
-const app = await server.createServer({
-  // ...other options
-  middleware: [logger]
-});
-```
-
-</details>
-
-## 🌐 Server-Side Rendering
-
-Frontend Hamroun provides seamless SSR with hydration:
-
-<div class="ssr-diagram-container" style="display: flex; gap: 20px; margin-bottom: 20px;">
-
-<div class="code-example" style="flex: 1;">
+## Server-Side Rendering
 
 ```jsx
-// server.js
+// Server-side
 import { renderToString } from 'frontend-hamroun/ssr';
 import App from './App';
 
@@ -559,47 +198,17 @@ app.get('*', async (req, res) => {
   `);
 });
 
-// client.js
+// Client-side
 import { hydrate } from 'frontend-hamroun';
 import App from './App';
 
-hydrate(<App url={window.location.pathname} />, 
-  document.getElementById('root'));
+hydrate(<App url={window.location.pathname} />, document.getElementById('root'));
 ```
 
-</div>
-
-<div class="ssr-flow-diagram" style="background: #f8f9fa; border-radius: 8px; padding: 15px; min-width: 250px;">
-  <strong>SSR Flow</strong><br>
-  <pre style="background: #f0f0f0; padding: 10px; margin-top: 10px; border-radius: 5px;">
-1. HTTP Request
-   ↓
-2. Server renders React to HTML
-   ↓
-3. HTML sent to browser
-   ↓
-4. Browser displays HTML
-   ↓
-5. JavaScript loads
-   ↓
-6. Hydration attaches event
-   handlers to existing DOM
-   ↓
-7. App becomes interactive
-  </pre>
-</div>
-
-</div>
-
-<div align="center">
-  <img src="https://via.placeholder.com/700x200?text=SSR+vs+CSR+Performance+Comparison" alt="SSR Performance" width="700" style="border-radius: 8px;"/>
-</div>
-
-## ⚡ Performance Optimization
+## Performance Features
 
 ### Batch Updates
-
-Group state updates for better performance:
+Group multiple state updates together to prevent unnecessary re-renders:
 
 ```jsx
 import { batchUpdates } from 'frontend-hamroun';
@@ -614,121 +223,33 @@ function handleSubmit() {
 }
 ```
 
-### Virtual DOM Diffing
-
-The framework uses an efficient diffing algorithm to minimize DOM operations:
-
-<div class="diffing-container" style="display: flex; gap: 20px; margin-bottom: 20px;">
-
-<div class="code-example" style="flex: 1;">
-
-```jsx
-// This only updates the changed parts of the DOM
-function Counter() {
-  const [count, setCount] = useState(0);
-  return (
-    <div>
-      <h1>Counter</h1>
-      <p>Count: {count}</p> {/* Only this text node updates */}
-      <button onClick={() => setCount(count + 1)}>
-        Increment
-      </button>
-    </div>
-  );
-}
-```
-
-</div>
-
-<div class="diffing-diagram" style="background: #f8f9fa; border-radius: 8px; padding: 15px; min-width: 250px;">
-  <strong>Diffing Process</strong><br>
-  <pre style="background: #f0f0f0; padding: 10px; margin-top: 10px; border-radius: 5px;">
-Old Virtual DOM
-    ↓
-New Virtual DOM
-    ↓
-Compare Trees
-    ↓
-Identify Differences
-    ↓
-Update Only Changed
-DOM Elements
-  </pre>
-</div>
-
-</div>
-
-<div align="center">
-  <img src="https://via.placeholder.com/700x200?text=Performance+Benchmark+Graph" alt="Performance Benchmark" width="700" style="border-radius: 8px;"/>
-</div>
-
-## 🛠️ CLI Tools
+## CLI Tools
 
 Frontend Hamroun includes powerful CLI tools for development:
 
-<div class="cli-examples" style="background: #f8f9fa; border-radius: 8px; padding: 20px; margin-bottom: 20px;">
-
 ```bash
-# Create a new project with interactive template selection
+# Create a new project
 npx frontend-hamroun create my-app
 
-# Generate a new component with customizable features
+# Generate a new component
 npx frontend-hamroun add:component Button
 
-# Create a new page component
+# Create a new page
 npx frontend-hamroun add:page Home
 
 # Generate an API route
 npx frontend-hamroun add:api users --methods=get,post,put,delete
-
-# View development tools and tips
-npx frontend-hamroun dev:tools
 ```
 
-</div>
-
-### 📦 Project Templates
-
-<div class="templates-container" style="display: flex; gap: 20px; overflow-x: auto; padding-bottom: 15px; margin-bottom: 20px;">
-
-<div class="template-card" style="background: #f0f5ff; border-radius: 8px; padding: 15px; min-width: 250px; border-left: 5px solid #4285f4;">
-  <h3>🚀 Basic App</h3>
-  <p>Client-side SPA with essential features</p>
-  <ul>
-    <li>Quick setup</li>
-    <li>No build step in development</li>
-    <li>Focused on simplicity</li>
-    <li>Perfect for learning</li>
-  </ul>
-</div>
-
-<div class="template-card" style="background: #f0fff4; border-radius: 8px; padding: 15px; min-width: 250px; border-left: 5px solid #34a853;">
-  <h3>🌐 SSR Template</h3>
-  <p>Server-side rendering with hydration</p>
-  <ul>
-    <li>SEO-friendly</li>
-    <li>Fast initial load</li>
-    <li>Express server included</li>
-    <li>Optimized for content sites</li>
-  </ul>
-</div>
-
-<div class="template-card" style="background: #fff8e1; border-radius: 8px; padding: 15px; min-width: 250px; border-left: 5px solid #fbbc04;">
-  <h3>⚡ Fullstack App</h3>
-  <p>Complete solution with API, authentication, and database</p>
-  <ul>
-    <li>API routes included</li>
-    <li>Database integration</li>
-    <li>Authentication ready</li>
-    <li>Production-ready setup</li>
-  </ul>
-</div>
-
-</div>
-
-## 📘 TypeScript Support
-
-Frontend Hamroun is built with TypeScript and includes full type definitions:
+## Project Templates
+
+Choose from multiple project templates:
+
+1. **Basic App**: Client-side SPA with essential features
+2. **SSR Template**: Server-side rendering with hydration
+3. **Fullstack App**: Complete solution with API, authentication, and database
+
+## TypeScript Support
 
 ```tsx
 import { useState } from 'frontend-hamroun';
@@ -754,67 +275,14 @@ function UserProfile({ id, name, email }: UserProps) {
 }
 ```
 
-## 🌍 Browser Compatibility
-
-Frontend Hamroun works in all modern browsers:
-
-<div class="browser-compatibility" style="display: flex; justify-content: space-between; margin: 20px 0;">
-  <div style="text-align: center; padding: 10px;">
-    <div style="font-size: 2em;">�Chrome</div>
-    <div>Latest 2 versions</div>
-  </div>
-  <div style="text-align: center; padding: 10px;">
-    <div style="font-size: 2em;">🦊</div>
-    <div>Firefox</div>
-    <div>Latest 2 versions</div>
-  </div>
-  <div style="text-align: center; padding: 10px;">
-    <div style="font-size: 2em;">🧭</div>
-    <div>Safari</div>
-    <div>Latest 2 versions</div>
-  </div>
-  <div style="text-align: center; padding: 10px;">
-    <div style="font-size: 2em;">🌐</div>
-    <div>Edge</div>
-    <div>Latest 2 versions</div>
-  </div>
-  <div style="text-align: center; padding: 10px;">
-    <div style="font-size: 2em;">🏛️</div>
-    <div>IE11</div>
-    <div>With polyfills</div>
-  </div>
-</div>
-
-## 👥 Contributing
-
-Contributions are welcome! See [CONTRIBUTING.md](./docs/CONTRIBUTING.md) for details.
-
-<div class="contribution-workflow" style="background: #f8f9fa; border-radius: 8px; padding: 20px; margin: 20px 0;">
-  <h3>Contribution Workflow</h3>
-  <ol>
-    <li>Fork the repository</li>
-    <li>Create your feature branch: <code>git checkout -b feature/amazing-feature</code></li>
-    <li>Commit your changes: <code>git commit -m 'Add amazing feature'</code></li>
-    <li>Push to the branch: <code>git push origin feature/amazing-feature</code></li>
-    <li>Open a Pull Request</li>
-  </ol>
-</div>
-
-## 📚 Documentation
-
-For complete documentation, visit [our documentation site](https://github.com/hamroun/frontend-hamroun).
-
-<div align="center">
-
-<div style="margin-top: 40px;">
-  <h3>💖 Support the Project</h3>
-
-  [![GitHub Sponsors](https://img.shields.io/badge/Sponsor-Hamroun-pink?style=for-the-badge&logo=github-sponsors)](https://github.com/sponsors/hamroun)
-  [![Star on GitHub](https://img.shields.io/badge/Star-on_GitHub-yellow?style=for-the-badge&logo=github)](https://github.com/hamroun/frontend-hamroun)
-</div>
-
-<div style="margin-top: 30px;">
-  <p>MIT © Hamroun</p>
-</div>
-
-</div>
+## Browser Compatibility
+
+Frontend Hamroun works in all modern browsers (Chrome, Firefox, Safari, Edge) and in IE11 with appropriate polyfills.
+
+## Documentation
+
+For complete documentation, visit our [GitHub repository](https://github.com/hamroun/frontend-hamroun).
+
+## License
+
+MIT © Hamroun

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frontend-hamroun",
-  "version": "1.2.53",
+  "version": "1.2.54",
   "description": "A lightweight full-stack JavaScript framework",
   "type": "module",
   "main": "./dist/index.js",