frontend-hamroun 1.2.62 → 1.2.64

package/README.md

@@ -4,10 +4,6 @@
   <img src="https://drive.google.com/uc?export=view&id=15VsMSNDhWAfV_R6ZWJltOJd-RMs9UH_y" alt="Frontend Hamroun Logo" width="300">
 </p>
 
-<p align="center">
-  <code style="font-size: 24px; color: #4A90E2; background-color: transparent">{ Frontend Hamroun }</code>
-</p>
-
 A lightweight full-stack JavaScript framework with Virtual DOM and hooks implementation
 
 [![npm](https://img.shields.io/npm/v/frontend-hamroun)](https://www.npmjs.com/package/frontend-hamroun)
@@ -15,15 +11,32 @@ A lightweight full-stack JavaScript framework with Virtual DOM and hooks impleme
 [![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
+## 📋 Table of Contents
+
+- [Installation](#installation)
+- [Quick Start](#quick-start)
+- [Basic Usage](#basic-usage)
+- [Features](#features)
+- [Client-side Features](#client-side-features)
+- [Server-Side Features](#server-side-features)
+- [Server-Side Rendering](#server-side-rendering)
+- [Performance Features](#performance-features)
+- [CLI Tools](#cli-tools)
+- [TypeScript Support](#typescript-support)
+- [Browser Compatibility](#browser-compatibility)
+- [Documentation](#documentation)
+- [License](#license)
+
+## 🚀 Installation
 
 ```bash
 npm install frontend-hamroun
 ```
 
-## Quick Start
+## 🏁 Quick Start
 
-Create a new project using:
+<details>
+<summary><b>Create a new project using CLI (Click to expand)</b></summary>
 
 ```bash
 # Using the create-frontend-app command
@@ -40,8 +53,21 @@ cd my-app
 npm install
 npm run dev
 ```
+</details>
+
+<details>
+<summary><b>Add to an existing project (Click to expand)</b></summary>
 
-## Basic Usage
+```bash
+# Install the package
+npm install frontend-hamroun
+
+# Import components in your code
+import { render, useState } from 'frontend-hamroun';
+```
+</details>
+
+## 💻 Basic Usage
 
 ```jsx
 import { render, useState } from 'frontend-hamroun';
@@ -59,23 +85,30 @@ function App() {
 render(<App />, document.getElementById('root'));
 ```
 
-## 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
-
-## Client-side Features
-
-### Component Development
+## ✨ Features
+
+<table>
+  <tr>
+    <td><b>🔍 Lightweight Core</b><br>Under 5KB gzipped</td>
+    <td><b>🌐 Full-Stack</b><br>Client and server in one</td>
+    <td><b>⚡ Virtual DOM</b><br>Efficient rendering</td>
+  </tr>
+  <tr>
+    <td><b>🪝 Hooks API</b><br>Complete hook system</td>
+    <td><b>📊 Context API</b><br>Simple state management</td>
+    <td><b>🖥️ SSR</b><br>Server-side rendering</td>
+  </tr>
+  <tr>
+    <td><b>🗄️ Database</b><br>Multiple DB support</td>
+    <td><b>🔐 Authentication</b><br>Built-in JWT</td>
+    <td><b>🧩 TypeScript</b><br>Full type definitions</td>
+  </tr>
+</table>
+
+## 🧩 Client-side Features
+
+<details open>
+<summary><b>Component Development</b></summary>
 
 ```jsx
 import { useState, useEffect } from 'frontend-hamroun';
@@ -97,16 +130,66 @@ function Counter() {
   );
 }
 ```
+</details>
+
+<details>
+<summary><b>Hooks API</b></summary>
+
+### 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
+```
 
-### Hooks API
+### useMemo
+```jsx
+const expensiveValue = useMemo(() => {
+  return computeExpensiveValue(a, b);
+}, [a, b]); // Recomputes only when a or b changes
+```
 
-- **useState**: Manage component state
-- **useEffect**: Handle side effects
-- **useMemo**: Memoize expensive calculations
-- **useRef**: Reference DOM elements and persist values
-- **useErrorBoundary**: Create error boundaries
+### useRef
+```jsx
+const inputRef = useRef(null);
+// Access the DOM element directly
+useEffect(() => {
+  inputRef.current.focus();
+}, []);
+return <input ref={inputRef} />;
+```
 
-### Context API
+### 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>
+    </div>
+  );
+}
+```
+</details>
+
+<details>
+<summary><b>Context API</b></summary>
 
 ```jsx
 // Create context
@@ -123,7 +206,7 @@ function App() {
       <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
         Toggle theme
       </button>
-    </Context.Provider>
+    </ThemeContext.Provider>
   );
 }
 
@@ -133,10 +216,12 @@ function Header() {
   return <header className={theme}><h1>My App</h1></header>;
 }
 ```
+</details>
 
-## Server-Side Features
+## 🖥️ Server-Side Features
 
-### Express Server Integration
+<details>
+<summary><b>Express Server Integration</b></summary>
 
 ```js
 import { server } from 'frontend-hamroun/server';
@@ -159,8 +244,10 @@ const app = await server.createServer({
 await app.start();
 console.log('Server running at http://localhost:3000');
 ```
+</details>
 
-### API Routes
+<details>
+<summary><b>API Routes</b></summary>
 
 ```js
 // api/users.js - Automatically mapped to /api/users
@@ -180,8 +267,87 @@ export async function post(req, res) {
   res.status(201).json(result);
 }
 ```
+</details>
+
+<details>
+<summary><b>Database Support (MongoDB, MySQL, PostgreSQL)</b></summary>
+
+#### MongoDB Example
+
+```js
+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);
+}
+```
+
+#### MySQL Example
+
+```js
+export async function get(req, res) {
+  const [users] = await req.db.execute(
+    'SELECT * FROM users WHERE active = ?', 
+    [true]
+  );
+  res.json(users);
+}
+```
+
+#### PostgreSQL Example
+
+```js
+export async function get(req, res) {
+  const result = await req.db.query(
+    'SELECT * FROM users WHERE role = $1', 
+    ['admin']
+  );
+  res.json(result.rows);
+}
+```
+</details>
+
+<details>
+<summary><b>Authentication</b></summary>
+
+```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>
 
-## Server-Side Rendering
+## 🔄 Server-Side Rendering
+
+<details>
+<summary><b>SSR Implementation</b></summary>
 
 ```jsx
 // Server-side
@@ -212,10 +378,13 @@ import App from './App';
 
 hydrate(<App url={window.location.pathname} />, document.getElementById('root'));
 ```
+</details>
+
+## ⚡ Performance Features
 
-## Performance Features
+<details>
+<summary><b>Batch Updates</b></summary>
 
-### Batch Updates
 Group multiple state updates together to prevent unnecessary re-renders:
 
 ```jsx
@@ -230,10 +399,12 @@ function handleSubmit() {
   });
 }
 ```
+</details>
 
-## CLI Tools
+## 🛠️ CLI Tools
 
-Frontend Hamroun includes powerful CLI tools for development:
+<details>
+<summary><b>Project Creation and Component Generation</b></summary>
 
 ```bash
 # Create a new project
@@ -248,16 +419,31 @@ npx frontend-hamroun add:page Home
 # Generate an API route
 npx frontend-hamroun add:api users --methods=get,post,put,delete
 ```
+</details>
 
-## Project Templates
-
-Choose from multiple project templates:
+<details>
+<summary><b>Project Templates</b></summary>
 
 1. **Basic App**: Client-side SPA with essential features
+   - Quick setup
+   - No build step in development
+   - Perfect for learning the framework
+
 2. **SSR Template**: Server-side rendering with hydration
+   - SEO-friendly
+   - Fast initial load
+   - Express server included
+
 3. **Fullstack App**: Complete solution with API, authentication, and database
+   - API routes included
+   - Database integration
+   - Authentication ready
+</details>
 
-## TypeScript Support
+## 📝 TypeScript Support
+
+<details>
+<summary><b>Type-Safe Components</b></summary>
 
 ```tsx
 import { useState } from 'frontend-hamroun';
@@ -282,15 +468,24 @@ function UserProfile({ id, name, email }: UserProps) {
   );
 }
 ```
+</details>
 
-## Browser Compatibility
+## 🌐 Browser Compatibility
 
-Frontend Hamroun works in all modern browsers (Chrome, Firefox, Safari, Edge) and in IE11 with appropriate polyfills.
+Frontend Hamroun works in all modern browsers:
+- Chrome, Firefox, Safari, Edge (latest 2 versions)
+- IE11 with appropriate transpilation and polyfills
 
-## Documentation
+## 📚 Documentation
 
 For complete documentation, visit our [GitHub repository](https://github.com/hamroun/frontend-hamroun).
 
-## License
+## 📄 License
 
 MIT © Hamroun
+
+---
+
+<p align="center">
+  <a href="#-installation">⬆️ Back to top</a>
+</p>

package/package.json

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