frontend-hamroun 1.2.50 → 1.2.51

package/README.md

@@ -1,6 +1,6 @@
 # Frontend Hamroun
 
-A lightweight JavaScript framework with Virtual DOM and hooks implementation inspired by modern frameworks.
+A lightweight full-stack JavaScript framework with Virtual DOM and hooks implementation inspired by modern frameworks.
 
 ![npm](https://img.shields.io/npm/v/frontend-hamroun)
 ![npm bundle size](https://img.shields.io/bundlephobia/minzip/frontend-hamroun)
@@ -9,24 +9,6 @@ A lightweight JavaScript framework with Virtual DOM and hooks implementation ins
 
 ## Installation
 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
 ```bash
 npm install frontend-hamroun
 ```
@@ -38,8 +20,9 @@ Create a new project using:
 ```bash
 npx create-frontend-app my-app
 # or
-npm create frontend-app@latest my-app
+npx frontend-hamroun create my-app
 ```
+
 Then:
 
 ```bash
@@ -68,31 +51,36 @@ render(<App />, document.getElementById('root'));
 
 ## Features
 
-- Lightweight (<5KB gzipped)
+- Lightweight full-stack framework (<5KB gzipped core)
 - Virtual DOM with efficient diffing algorithm
 - Hooks API (useState, useEffect, useMemo, useRef)
-- Context API
+- Context API for state management
 - Server-Side Rendering
+- Built-in API server with Express
+- Database integration (MongoDB, MySQL, PostgreSQL)
+- Authentication with JWT
 - Error Boundaries
 - JSX support
 - TypeScript support
-- Built-in CLI for project scaffolding
+- Interactive CLI for project scaffolding
+
+## Client-side Features
 
-## Hooks
+### Hooks
 
-### useState
+#### useState
 Manages component state.
 
-```tsx
+```jsx
 const [count, setCount] = useState(0);
 setCount(count + 1); // Direct value
 setCount(prev => prev + 1); // Using callback
 ```
 
-### useEffect
+#### useEffect
 Handles side effects in components.
 
-```tsx
+```jsx
 useEffect(() => {
   document.title = `Count: ${count}`;
   
@@ -103,28 +91,28 @@ useEffect(() => {
 }, [count]); // Only re-run when count changes
 ```
 
-### useMemo
+#### useMemo
 Memoizes expensive computations.
 
-```tsx
+```jsx
 const doubled = useMemo(() => {
   console.log('Computing doubled value');
   return count * 2;
 }, [count]);
 ```
 
-### useRef
+#### useRef
 Creates a mutable reference that persists across renders.
 
-```tsx
+```jsx
 const renderCount = useRef(0);
 renderCount.current += 1; // Update without triggering re-render
 ```
 
-### useErrorBoundary
+#### useErrorBoundary
 Handles component errors.
 
-```tsx
+```jsx
 const [error, resetError] = useErrorBoundary();
 
 if (error) {
@@ -137,11 +125,11 @@ if (error) {
 }
 ```
 
-## Context API
+### Context API
 
 Share state across components without prop drilling.
 
-```tsx
+```jsx
 // Create context
 const ThemeContext = createContext('light');
 
@@ -168,13 +156,56 @@ function ThemedComponent() {
 }
 ```
 
+## Server-Side Features
+
+### Server Setup
+
+```js
+import { server } from 'frontend-hamroun/server';
+
+const app = await server.createServer({
+  port: 3000,
+  apiDir: './api',
+  pagesDir: './pages',
+  staticDir: './public',
+  db: {
+    url: process.env.DB_URL,
+    type: 'mongodb' // or 'mysql', 'postgres'
+  },
+  auth: {
+    secret: process.env.JWT_SECRET,
+    expiresIn: '7d'
+  }
+});
+
+await app.start();
+```
+
+### API Routes
+
+Create API endpoints in your `apiDir` folder:
+
+```js
+// api/users.js
+export async function get(req, res) {
+  const users = await req.db.collection('users').find().toArray();
+  res.json(users);
+}
+
+export async function post(req, res) {
+  const user = req.body;
+  const result = await req.db.collection('users').insertOne(user);
+  res.status(201).json(result);
+}
+```
+
 ## Server-Side Rendering
 
 Frontend Hamroun supports server-side rendering with hydration:
 
-```tsx
+```jsx
 // Server-side
-import { renderToString } from 'frontend-hamroun';
+import { renderToString } from 'frontend-hamroun/ssr';
 
 const html = await renderToString(<App />);
 res.send(`
@@ -199,7 +230,7 @@ hydrate(<App />, document.getElementById('root'));
 ### Batch Updates
 Group multiple state updates together to prevent unnecessary re-renders.
 
-```tsx
+```jsx
 import { batchUpdates } from 'frontend-hamroun';
 
 batchUpdates(() => {
@@ -211,10 +242,29 @@ batchUpdates(() => {
 
 ## Project Templates
 
-The framework comes with two project templates:
+The framework comes with several project templates:
+
+1. **Basic App**: Simple client-side application
+2. **SSR Template**: Server-side rendering with hydration
+3. **Fullstack App**: Complete solution with API routes, authentication, and database integration
+
+## CLI Tools
+
+Frontend Hamroun comes with a powerful CLI for project management:
 
-1. **Basic App**: Client-side rendered application with TailwindCSS
-2. **SSR Template**: Server-side rendered application with Express
+```bash
+# Create a new project
+npx frontend-hamroun create my-app
+
+# Add a new component
+npx frontend-hamroun add:component Button
+
+# Add a new page
+npx frontend-hamroun add:page home
+
+# Add a new API route
+npx frontend-hamroun add:api users
+```
 
 ## Browser Compatibility
 

package/package.json

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