elit 2.0.0 → 3.0.0

package/README.md

@@ -1,29 +1,85 @@
 # Elit
 
-⚡ A full-stack TypeScript framework (~10KB gzipped) with built-in dev server, HMR, build tool, and REST API. Zero dependencies, maximum productivity.
+⚡ A lightweight TypeScript framework with built-in dev server, HMR, routing, and reactive state management. **Zero production dependencies**, maximum developer experience.
 
 [![npm version](https://img.shields.io/npm/v/elit.svg)](https://www.npmjs.com/package/elit)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
-[![Bundle Size](https://img.shields.io/badge/bundle%20size-~10KB%20gzipped-success)](https://bundlephobia.com/package/elit)
+[![Bundle Size](https://img.shields.io/badge/bundle%20size-lightweight-success)](https://bundlephobia.com/package/elit)
 
 > **Quick Links:** [Installation](#installation) | [Features](#features) | [Quick Start](#quick-start) | [CLI Tools](#cli-tools) | [API](#api) | [Deployment](#deployment)
 
 ## Why Elit?
 
-- **🎯 Tiny Bundle Size**: Only ~10KB gzipped (30KB minified) - no framework bloat
-- **📦 Zero Dependencies**: Pure TypeScript, no external dependencies
+### Frontend Excellence
+- **🎯 Ultra Lightweight**: Modular design - import only what you need (DOM: 11KB, State: 15KB)
 - **⚡ Lightning Fast**: Direct DOM manipulation - no virtual DOM overhead
+- **🔄 Reactive State**: Simple but powerful reactive state management with `createState` and `computed`
+- **🎨 CSS-in-JS**: Type-safe styling with `CreateStyle`
+- **🛣️ Client Router**: Hash and history mode routing with dynamic parameters and guards
+- **📱 Virtual Scrolling**: Handle 100k+ items efficiently
+- **🌲 Tree-Shakeable**: Smart ES modules - only bundle what you use
+
+### Backend Performance
+- **🚀 High Performance**: 10,000+ req/s on Node.js with sub-7ms latency
+- **🌐 ServerRouter**: Full-featured routing with only 2.7% overhead vs raw HTTP
+- **🔌 WebSocket**: Built-in real-time communication support
+- **⚡ Cross-Runtime**: Works on Node.js, Bun, and Deno with runtime-specific optimizations
+- **🔧 Middleware Stack**: CORS, logging, rate limiting, compression, and more
+- **🔐 Zero Dependencies**: No production dependencies for maximum security
+
+### Developer Experience
 - **🔷 TypeScript First**: Full type safety and IntelliSense out of the box
-- **🔄 Reactive State**: Simple but powerful reactive state management
-- **🌲 Tree-Shakeable**: Import only what you need for optimal bundle size
-- **🚀 Full-Stack Ready**: Built-in dev server, HMR, build tool, and REST API
+- **📝 TypeScript Imports**: Write `import './file.ts'` - automatically rewritten to `.js` for browsers
 - **🔥 Hot Module Replacement**: Instant development feedback with automatic HMR
-- **🏗️ Build System**: Integrated esbuild with automatic client/server separation
-- **🌐 REST API Router**: Built-in server-side routing with middleware stack
-- **🔌 WebSocket Support**: Real-time state synchronization out of the box
-- **🎨 Developer Experience**: CLI tools, zero config, and excellent tooling support
+- **🏗️ Build System**: Integrated esbuild for fast production builds
+- **🎯 Zero Config**: Works out of the box with optional `elit.config.ts`
+- **📦 CLI Tools**: `npx elit dev`, `npx elit build`, `npx elit preview`
+- **🌍 Environment Support**: .env files with VITE_ prefix
 
-## Installation
+## Quick Start
+
+The fastest way to get started with Elit is using our scaffolding tool:
+
+```bash
+# With npm
+npm create elit@latest my-app
+
+# With yarn
+yarn create elit my-app
+
+# With pnpm
+pnpm create elit my-app
+
+# With bun
+bun create elit my-app
+
+# With deno
+deno run -A npm:create-elit my-app
+```
+
+Then follow the prompts!
+
+```bash
+cd my-app
+npm install
+npm run dev
+```
+
+### Available Templates
+
+Choose a template with the `--template` flag:
+
+- **basic** (default) - Full-featured app with styled counter example
+- **full** - Full-stack app with dev server and API routes
+- **minimal** - Minimal setup with just DOM rendering
+
+```bash
+npm create elit@latest my-app --template=full
+```
+
+## Manual Installation
+
+If you prefer to set up manually:
 
 ```bash
 npm install elit
@@ -46,75 +102,116 @@ npx elit preview
 
 ### Configuration
 
-Create `elit.config.mjs` (or .ts, .js, .json) in your project root:
+Create `elit.config.ts` (or .js, .mjs, .json) in your project root:
 
-```javascript
-import { defineConfig } from 'elit';
-import { resolve } from 'path';
+```typescript
+import { server } from './src/server';
+import { client } from './src/client';
 
-export default defineConfig({
+export default {
   dev: {
-    port: 3000,
-    host: 'localhost',
-    root: './src',
-    basePath: '/',
-    open: true
+    port: 3003,
+    host: '0.0.0.0',
+    open: false,
+    logging: true,
+    clients: [{
+      root: '.',
+      basePath: '',
+      ssr: () => client,  // Server-side rendering
+      api: server         // API routes
+    }]
   },
-  build: {
+  build: [{
     entry: './src/main.ts',
     outDir: './dist',
+    outFile: 'main.js',
     format: 'esm',
     minify: true,
-    platform: 'browser',
-    basePath: '/app',
+    sourcemap: true,
+    target: 'es2020',
     copy: [
-      {
-        from: 'index.html',
-        to: 'index.html',
-        transform: (content, config) => {
-          // Inject base tag from basePath
-          return content;
-        }
-      }
+      { from: './public/index.html', to: './index.html' }
     ]
-  },
+  }],
   preview: {
-    port: 4173,
+    port: 3000,
+    host: '0.0.0.0',
+    open: false,
+    logging: true,
     root: './dist',
-    basePath: '/app'
+    basePath: '',
+    index: './index.html'
   }
-});
+};
 ```
 
-## Features
+**Server setup (src/server.ts):**
 
-### Frontend Framework
+```typescript
+import { ServerRouter } from 'elit/server';
 
-- 🎯 **Ultra Lightweight**: Just 30KB minified, ~10KB gzipped
-- ⚡ **Reactive State**: Built-in reactive state management with `createState`
-- 🔄 **Computed Values**: Automatic dependency tracking with `computed`
-- 🎨 **CSS-in-JS**: Type-safe styling with `CreateStyle`
-- 🛣️ **Client-Side Router**: Hash and history mode routing with dynamic parameters
-- 📱 **Virtual Scrolling**: Handle 100k+ items efficiently
-- 🖥️ **SSR Support**: Full server-side rendering capabilities
-- 🎭 **SVG & MathML**: Complete support for all elements
-- 🔧 **Performance Utilities**: Throttle, debounce, batch rendering
-- 📦 **Tree-Shakeable**: Import only what you need
-- 🎮 **DOM Utilities**: Convenient helper functions
+export const router = new ServerRouter();
+
+router.get('/api/hello', async (ctx) => {
+    ctx.res.setHeader('Content-Type', 'text/html; charset=UTF-8');
+    ctx.res.end("Hello from Elit ServerRouter!");
+});
 
-### Full-Stack Tools
+export const server = router;
+```
 
-- 🔥 **Hot Module Replacement**: Instant development feedback
-- 🏗️ **Build System**: esbuild integration with automatic client/server separation
-- 🌐 **REST API Router**: Server-side routing with middleware stack
-- 🔧 **Middleware**: CORS, logging, error handling, rate limiting, compression, security
-- 🔄 **Shared State**: Real-time WebSocket state synchronization
-- 📊 **WebSocket Support**: Built-in WebSocket server
-- 📁 **Static File Server**: Gzip compression and cache headers
-- 🎯 **Zero Config**: Works out of the box with sensible defaults
-- 🔐 **Environment Variables**: Support for .env files with VITE_ prefix
+**Client SSR template (src/client.ts):**
 
-## Quick Start
+```typescript
+import { div, html, head, body, title, link, script, meta } from 'elit/el';
+
+export const client = html(
+    head(
+        title('Elit - Full-Stack TypeScript Framework'),
+        link({ rel: 'icon', type: 'image/svg+xml', href: 'favicon.svg' }),
+        meta({ charset: 'UTF-8' }),
+        meta({ name: 'viewport', content: 'width=device-width, initial-scale=1.0' }),
+        meta({ name: 'description', content: 'Full-stack TypeScript framework' })
+    ),
+    body(
+        div({ id: 'root' }),
+        script({ type: 'module', src: '/src/main.js' })
+    )
+);
+```
+
+## Features
+
+### Frontend Framework
+
+- 🎯 **Modular & Lightweight**: DOM (11KB), State (15KB), Router (13KB) - use only what you need
+- ⚡ **Reactive State**: Built-in reactive state management with `createState` and automatic dependency tracking
+- 🔄 **Computed Values**: Automatic dependency tracking with `computed` for derived state
+- 🎨 **CSS-in-JS**: Type-safe styling with `CreateStyle` and support for pseudo-selectors
+- 🛣️ **Client-Side Router**: Hash and history mode routing with dynamic parameters and navigation guards
+- 📱 **Virtual Scrolling**: Handle 100k+ items efficiently with `createVirtualList`
+- 🖥️ **SSR Support**: Full server-side rendering with `renderToString`
+- 🎭 **100+ Elements**: Complete HTML, SVG, and MathML element support
+- 🔧 **Performance Utilities**: Throttle, debounce, batch rendering, chunked rendering
+- 📦 **Tree-Shakeable**: ES modules with excellent tree-shaking support
+- 🎮 **DOM Utilities**: Query selectors, element creation, fragment support
+
+### Backend & Development
+
+- 🔥 **Hot Module Replacement**: Instant development feedback with automatic state preservation
+- 🏗️ **Build System**: Integrated esbuild with runtime-specific optimizations (Node.js, Bun, Deno)
+- 🌐 **ServerRouter**: High-performance routing (10,128 req/s) with minimal overhead (2.7%)
+- 🔧 **Rich Middleware**: CORS, logging, rate limiting, compression, security headers, and more
+- 🔌 **WebSocket Server**: Built-in WebSocket with automatic state synchronization
+- 📁 **Static File Server**: Efficient serving with proper MIME types and caching
+- 🎯 **Smart Defaults**: Zero-config development with optional `elit.config.mjs`
+- 📦 **Auto TypeScript**: Automatic TypeScript compilation on all runtimes
+- 🌍 **Environment Variables**: .env file support with VITE_ prefix
+- ⚡ **Cross-Runtime**: Optimized for Node.js, Bun, and Deno with specific adaptations
+
+## Manual Setup
+
+If you prefer to set up your project manually:
 
 ### 1. Create Your Project
 
@@ -135,7 +232,7 @@ npm install elit
 Create `src/main.ts`:
 
 ```typescript
-import { div, h1, button, createState, reactive, domNode } from 'elit';
+import { div, h1, button, createState, reactive, dom } from 'elit';
 
 const count = createState(0);
 
@@ -149,7 +246,8 @@ const app = div({ className: 'app' },
   )
 );
 
-domNode.render('#app', app);
+// Render to DOM
+dom.render('#app', app);
 ```
 
 Create `index.html`:
@@ -177,34 +275,6 @@ npx elit dev
 
 Your app will automatically reload when you make changes with HMR!
 
-### NPM Installation
-
-```bash
-npm install elit
-```
-
-```typescript
-import { div, h1, p, button, createState, reactive, domNode } from 'elit';
-
-// Create reactive state
-const count = createState(0);
-
-// Create elements with reactive updates
-const app = div({ className: 'app' },
-  h1('Hello Elit! 👋'),
-  p('A lightweight, reactive DOM library'),
-  reactive(count, (value) =>
-    button({
-      onclick: () => count.value++,
-      className: 'btn-primary'
-    }, `Count: ${value}`)
-  )
-);
-
-// Render to DOM
-domNode.render('#app', app);
-```
-
 ### CDN Usage
 
 ```html
@@ -216,7 +286,7 @@ domNode.render('#app', app);
 <body>
   <div id="app"></div>
   <script>
-    const { div, h1, button, createState, reactive, domNode } = window;
+    const { div, h1, button, createState, reactive, dom } = window;
 
     const count = createState(0);
     const app = div(
@@ -226,7 +296,7 @@ domNode.render('#app', app);
       )
     );
 
-    domNode.render('#app', app);
+    dom.render('#app', app);
   </script>
 </body>
 </html>
@@ -267,106 +337,142 @@ const deepState = createState({ nested: { value: 1 } }, { deep: true });
 ### Reactive Rendering
 
 ```typescript
-import { reactive, text, bindValue } from 'elit';
+import { reactive, text, bindValue, bindChecked } from 'elit';
 
 const message = createState('Hello');
+const isEnabled = createState(false);
 
 // Reactive element - re-renders when state changes
 const display = reactive(message, (value) =>
   div({ className: 'message' }, value)
 );
 
-// Reactive text
+// Reactive text node
 const label = text(message);
 
 // Two-way binding for inputs
 const inputEl = input({ type: 'text', ...bindValue(message) });
+const checkbox = input({ type: 'checkbox', ...bindChecked(isEnabled) });
 ```
 
 ### Shared State (Real-time Sync)
 
-**Requires `elit-server`** - Shared state syncs automatically between backend and frontend via WebSocket:
+Shared state automatically syncs between server and client via WebSocket:
+
+**Client-side:**
 
 ```typescript
 import { createSharedState, reactive } from 'elit';
 
-// Create shared state (auto-connects to elit-server)
+// Create shared state (auto-connects to WebSocket server)
 const counter = createSharedState('counter', 0);
-const todos = createSharedState('todos', []);
+const users = createSharedState('users', []);
 
 // Use with reactive rendering
 const app = div(
   reactive(counter.state, value =>
     div(`Counter: ${value}`)
   ),
-  button({ onclick: () => counter.value++ }, 'Increment')
+  button({ onclick: () => counter.set(counter.state.value + 1) }, 'Increment')
 );
 
 // Listen to changes
-counter.onChange((newValue, oldValue) => {
-  console.log(`${oldValue} → ${newValue}`);
+counter.onChange((newValue) => {
+  console.log('Counter changed to:', newValue);
 });
 
-// Update from any client - syncs to all
-counter.value++;
+// Update from any client - automatically syncs to all connected clients
+counter.set(10);
 ```
 
-**Backend (Node.js with elit-server):**
+**Server-side:**
 
-```javascript
-const { createDevServer } = require('elit-server');
+```typescript
+import { createDevServer, StateManager } from 'elit';
 
 const server = createDevServer({ port: 3000 });
 
-// Create matching shared states
-const counter = server.state.create('counter', { initial: 0 });
-const todos = server.state.create('todos', { initial: [] });
-
-// Listen to changes
-counter.onChange((newValue, oldValue) => {
-  console.log(`Counter: ${oldValue} → ${newValue}`);
-});
-
-// Update from backend - syncs to all clients
-counter.value++;
+// StateManager is built-in and handles WebSocket connections
+// All clients with matching shared state keys will sync automatically
 ```
 
-### elit-server - Development Server
+### Development Server with REST API
+
+Elit includes a built-in development server with HMR, WebSocket support, and REST API routing:
 
-Full-featured development server with HMR, REST API, and real-time features:
+**Server Configuration (server.ts):**
 
-```javascript
-const { createDevServer, Router, cors, logger } = require('elit-server');
+```typescript
+import { createDevServer, ServerRouter, cors, logger, json } from 'elit';
 
 // Create REST API router
-const api = new Router();
+const api = new ServerRouter();
 
 // Add middleware
-api.use(cors());
+api.use(cors({ origin: '*', methods: ['GET', 'POST', 'PUT', 'DELETE'] }));
 api.use(logger());
 
-// Define routes
+// Define API routes with helper functions
 api.get('/api/users', (ctx) => {
-  return { success: true, users: [...] };
+  json(ctx, { success: true, users: [] });
 });
 
-api.post('/api/users', (ctx) => {
+api.post('/api/users', async (ctx) => {
   const user = ctx.body;
-  return { success: true, user };
+  json(ctx, { success: true, user });
 });
 
-// Create server with API
+// Create development server
 const server = createDevServer({
   port: 3000,
-  root: __dirname,
-  api,
-  logging: true
+  root: './src',
+  open: true,
+  router: api
 });
+```
+
+**Available Middleware:**
 
-// Access shared state
-const counter = server.state.create('counter', {
-  initial: 0,
-  validate: (value) => typeof value === 'number'
+```typescript
+import {
+  cors,          // CORS headers
+  logger,        // Request logging
+  errorHandler,  // Error handling
+  rateLimit,     // Rate limiting
+  bodyLimit,     // Request body size limit
+  cacheControl,  // Cache headers
+  compress,      // Gzip compression
+  security       // Security headers
+} from 'elit';
+
+// Example usage
+api.use(cors({ origin: '*' }));
+api.use(logger({ format: 'detailed' }));
+api.use(rateLimit({ max: 100, windowMs: 60000 }));
+api.use(bodyLimit({ limit: 1024 * 1024 })); // 1MB
+api.use(compress());
+api.use(security());
+```
+
+**Helper Functions:**
+
+```typescript
+import { json, sendText, html, status } from 'elit';
+
+api.get('/api/data', (ctx) => {
+  json(ctx, { message: 'Hello' }); // JSON response
+});
+
+api.get('/text', (ctx) => {
+  sendText(ctx, 'Hello World'); // Text response
+});
+
+api.get('/page', (ctx) => {
+  html(ctx, '<h1>Hello</h1>'); // HTML response
+});
+
+api.get('/error', (ctx) => {
+  status(ctx, 404, 'Not Found'); // Custom status
 });
 ```
 
@@ -374,41 +480,16 @@ const counter = server.state.create('counter', {
 
 ```bash
 # Start dev server
-npx elit-dev
+npx elit dev
 
 # Custom port
-npx elit-dev --port 8080
+npx elit dev --port 8080
 
 # Custom root directory
-npx elit-dev --root ./public
+npx elit dev --root ./public
 
 # Disable auto-open browser
-npx elit-dev --no-open
-
-# Silent mode
-npx elit-dev --silent
-```
-
-**Middleware:**
-
-```javascript
-const {
-  cors,           // CORS headers
-  logger,         // Request logging
-  errorHandler,   // Error handling
-  rateLimit,      // Rate limiting
-  bodyLimit,      // Request body size limit
-  cacheControl,   // Cache headers
-  compress,       // Gzip compression
-  security        // Security headers
-} = require('elit-server');
-
-api.use(cors({ origin: '*' }));
-api.use(logger());
-api.use(rateLimit({ max: 100, window: 60000 }));
-api.use(bodyLimit(1024 * 1024)); // 1MB
-api.use(compress());
-api.use(security());
+npx elit dev --no-open
 ```
 
 ### Server-Side Rendering
@@ -478,7 +559,15 @@ const btn = button({ className: buttonClass }, 'Click me');
 ### Performance Utilities
 
 ```typescript
-import { batchRender, renderChunked, createVirtualList, throttle, debounce } from 'elit';
+import {
+  batchRender,
+  renderChunked,
+  createVirtualList,
+  throttle,
+  debounce,
+  lazy,
+  cleanupUnused
+} from 'elit';
 
 // Batch render multiple elements
 batchRender('#container', elements);
@@ -488,7 +577,7 @@ renderChunked('#container', largeArray, 5000, (current, total) => {
   console.log(`Rendered ${current}/${total}`);
 });
 
-// Virtual scrolling
+// Virtual scrolling for 100k+ items
 const virtualList = createVirtualList(
   container,
   items,
@@ -497,9 +586,61 @@ const virtualList = createVirtualList(
   5   // buffer size
 );
 
+// Lazy loading components
+const LazyComponent = lazy(() => import('./HeavyComponent'));
+
 // Throttle and debounce
 const throttledFn = throttle(handleScroll, 100);
 const debouncedFn = debounce(handleInput, 300);
+
+// Cleanup unused DOM elements
+const cleaned = cleanupUnused(rootElement);
+console.log(`Cleaned ${cleaned} elements`);
+```
+
+### Additional Features
+
+**DOM Utilities:**
+
+```typescript
+import { doc, el, els, createEl, elId, elClass, fragment } from 'elit';
+
+// Query selectors
+const element = el('.my-class');      // querySelector
+const elements = els('.my-class');    // querySelectorAll
+const byId = elId('my-id');          // getElementById
+const byClass = elClass('my-class'); // getElementsByClassName
+
+// Create elements
+const div = createEl('div');         // createElement
+const frag = fragment();             // createDocumentFragment
+
+// Access document
+doc.title = 'New Title';
+```
+
+**Effect System:**
+
+```typescript
+import { createState, effect } from 'elit';
+
+const count = createState(0);
+
+// Run side effects when state changes
+effect(() => {
+  console.log('Count is now:', count.value);
+});
+```
+
+**Reactive As (Advanced):**
+
+```typescript
+import { reactiveAs } from 'elit';
+
+// Use different reactive context
+const display = reactiveAs(customState, customContext, (value) =>
+  div(value)
+);
 ```
 
 ### JSON Rendering
@@ -530,7 +671,7 @@ renderVNode('#app', {
 ### Head Management
 
 ```typescript
-import { setTitle, addMeta, addLink, addStyle, renderToHead } from 'elit';
+import { setTitle, addMeta, addLink, addStyle } from 'elit';
 
 setTitle('My App');
 addMeta({ name: 'description', content: 'My awesome app' });
@@ -538,27 +679,6 @@ addLink({ rel: 'stylesheet', href: '/styles.css' });
 addStyle('body { margin: 0; }');
 ```
 
-### DOM Utilities
-
-Elit provides convenient DOM utility functions for common operations:
-
-```typescript
-import { doc, el, els, createEl, elId, elClass, fragment } from 'elit';
-
-// Query selectors (bound to document)
-const element = el('.my-class');           // querySelector
-const elements = els('.my-class');         // querySelectorAll
-const byId = elId('my-id');               // getElementById
-const byClass = elClass('my-class');      // getElementsByClassName
-
-// Create elements
-const div = createEl('div');              // createElement
-const frag = fragment();                  // createDocumentFragment
-
-// Access document object
-doc.title = 'New Title';
-```
-
 ## Available Elements
 
 ### HTML Elements (100+)
@@ -594,23 +714,62 @@ All MathML elements are prefixed with `math`:
 
 ## Bundle Size & Performance
 
-Elit is designed to be extremely lightweight while providing powerful features:
+Elit is designed to be modular and lightweight with excellent tree-shaking support:
+
+### Bundle Sizes (Minified)
+
+| Component | ESM | CJS | Description |
+|-----------|-----|-----|-------------|
+| **Full Framework** | 79.52 KB | 80.48 KB | All features included |
+| **DOM Only** | 11.06 KB | 11.07 KB | Just DOM utilities |
+| **State** | 15.34 KB | 15.38 KB | Reactive state management |
+| **Router** | 13.22 KB | 13.22 KB | Client-side routing |
+| **Server** | 51.07 KB | 51.18 KB | Server features + Router |
+| **HTTP** | 7.70 KB | 7.85 KB | HTTP utilities |
+| **CLI** | 127.63 KB | - | Full development toolchain |
+
+**Tree-shaking**: Import only what you need! Using modular imports (`elit/dom`, `elit/state`) keeps your bundle minimal.
+
+### Server Performance (Node.js v24.12.0)
 
-| Format | Size (Minified) | Size (Gzipped) |
-|--------|----------------|----------------|
-| ESM    | 29KB          | ~10KB          |
-| CJS    | 30KB          | ~10KB          |
-| IIFE   | 30KB          | ~10KB          |
+| Component | Throughput | Latency (P50) | Latency (Avg) | Description |
+|-----------|-----------|---------------|---------------|-------------|
+| **HTTP Server** | 10,410 req/s | 5.91ms | 6.69ms | Raw HTTP optimized |
+| **ServerRouter** | 10,128 req/s | 6.09ms | 6.94ms | Full routing + middleware |
 
-**Tree-shaking**: When using ES modules, only the features you import will be included in your bundle.
+**Router Overhead**: Only 2.7% slower than raw HTTP while providing:
+- Route matching with dynamic params
+- Query string parsing
+- Request context
+- Middleware chain support
+- Body parsing
 
-**Performance Optimizations**:
+### Cross-Runtime Support
+
+Elit works seamlessly on **Node.js, Bun, and Deno** with runtime-specific optimizations:
+
+- **Node.js**: Uses native `http` module
+- **Bun**: Ultra-fast `Bun.serve()` with synchronous response detection
+- **Deno**: `Deno.serve()` integration
+
+### Performance Optimizations
+
+**Frontend**:
 - Direct DOM manipulation (no virtual DOM diffing)
 - Optimized rendering with RAF batching
 - Smart children rendering with automatic fragment usage
 - Efficient attribute updates using charCode checks
 - Minimal function closures and memory allocation
 
+**Backend**:
+- **Zero-copy headers** for Bun/Deno runtimes
+- **Synchronous response detection** eliminates Promise overhead
+- **String-based body buffering** reduces allocations
+- **Inline Response creation** minimizes object overhead
+- **Pre-compiled route patterns** for fast matching
+
+[View detailed benchmarks →](./benchmark)
+
 ## Browser Usage
 
 When loaded via script tag, all exports are available on the `window` object:
@@ -618,7 +777,7 @@ When loaded via script tag, all exports are available on the `window` object:
 ```html
 <script src="https://unpkg.com/elit@latest/dist/index.global.js"></script>
 <script>
-  const { div, span, createState, domNode } = window;
+  const { div, span, createState, dom } = window;
   // or use DomLib global namespace
   const app = DomLib.div('Hello');
 </script>
@@ -792,54 +951,94 @@ const isProd = import.meta.env.PROD;
 
 ## Comparison with Other Frameworks
 
-| Feature | Elit | Vite + React | Next.js | SvelteKit |
-|---------|----------|--------------|---------|-----------|
-| Bundle Size | 30KB | ~140KB+ | ~200KB+ | ~15KB* |
-| Zero Dependencies | ✅ | ❌ | ❌ | ❌ |
-| Dev Server | ✅ Built-in | ✅ Vite | ✅ Built-in | ✅ Built-in |
-| HMR | ✅ | ✅ | ✅ | ✅ |
-| Build Tool | ✅ Built-in | ✅ Vite | ✅ Built-in | ✅ Built-in |
-| REST API | ✅ Built-in | ❌ | ✅ | ✅ |
-| TypeScript | ✅ | ✅ | ✅ | ✅ |
-| SSR | ✅ | ❌ | ✅ | ✅ |
-| Learning Curve | Easy | Medium | Medium | Easy |
-
-*Svelte requires compilation
+| Feature | Elit | Vite + React | Next.js | SvelteKit | Express.js |
+|---------|----------|--------------|---------|-----------|------------|
+| **Frontend Size** | 11-15KB (modular) | ~140KB+ | ~200KB+ | ~15KB* | N/A |
+| **Backend Size** | 51KB (Server) | N/A | N/A | N/A | ~200KB+ |
+| **Prod Dependencies** | **0** (Zero!) | Many | Many | Many | Many |
+| **Dev Server** | ✅ Built-in | ✅ Vite | ✅ Built-in | ✅ Built-in | ❌ |
+| **HMR** | ✅ | ✅ | ✅ | ✅ | ❌ |
+| **Build Tool** | ✅ esbuild | ✅ Vite | ✅ Turbopack | ✅ Vite | ❌ |
+| **REST API** | ✅ 10K+ req/s | ❌ | ✅ | ✅ | ✅ 8K+ req/s |
+| **Middleware** | ✅ Built-in | ❌ | ✅ | ✅ | ✅ |
+| **WebSocket** | ✅ Built-in | ❌ | ❌ | ❌ | ➕ Via package |
+| **Shared State** | ✅ Auto-sync | ❌ | ❌ | ❌ | ❌ |
+| **Cross-Runtime** | ✅ Node/Bun/Deno | ❌ | ❌ | ❌ | ✅ Node only |
+| **TypeScript** | ✅ Native | ✅ | ✅ | ✅ | ➕ Via setup |
+| **SSR** | ✅ | ❌ | ✅ | ✅ | ➕ Manual |
+| **Tree-Shaking** | ✅ Excellent | ✅ | ✅ | ✅ | ❌ |
+| **Learning Curve** | Easy | Medium | Medium | Easy | Easy |
+
+*Svelte requires compilation step
+
+### Performance Comparison
+
+**Backend (10K requests, 100 concurrent)**:
+- **Elit ServerRouter**: 10,128 req/s (6.94ms avg) on Node.js
+- **Express.js**: ~8,000 req/s (12ms avg) on Node.js
+- **Fastify**: ~12,000 req/s (8ms avg) on Node.js
+- **Elysia (Bun)**: ~100,000 req/s (<1ms avg) on Bun
+
+**Frontend Bundle**:
+- **Elit (modular)**: 11KB (DOM) + 15KB (State) = 26KB for typical app
+- **React + React-DOM**: 140KB+ (45KB gzipped)
+- **Vue 3**: 95KB+ (32KB gzipped)
+- **Svelte**: 15KB+ (6KB gzipped) *after compilation*
 
 ## Documentation
 
-- 📚 [Full Documentation](https://github.com/oangsa/elit/docs)
-- ⚡ [Quick Start Guide](./docs/QUICK_START.md)
-- 📖 [API Reference](./docs/API.md)
-- 🔄 [Migration Guide](./docs/MIGRATION.md)
-- 🤝 [Contributing Guide](./CONTRIBUTING.md)
+- 📚 [Full Documentation](https://d-osc.github.io/elit)
+- ⚡ [Quick Start](https://d-osc.github.io/elit#/docs)
+- 📖 [API Reference](https://d-osc.github.io/elit#/api)
+- 🎮 [Interactive Examples](https://d-osc.github.io/elit#/examples)
 
 ## Changelog
 
-### Elit - Full-Stack Framework
+### v2.0.0 - Full-Stack Framework with Performance Optimizations
+
+**🚀 Backend Performance Enhancements:**
+- ⚡ **Ultra-Fast HTTP**: 10,410 req/s with sub-7ms latency on Node.js
+- 🎯 **Optimized ServerRouter**: 10,128 req/s with only 2.7% overhead vs raw HTTP
+- 🔄 **Synchronous Response Detection**: Eliminates Promise overhead for Bun runtime
+- 🆓 **Zero-Copy Headers**: Direct headers reference for Bun/Deno runtimes
+- 📦 **String-Based Body Buffering**: Reduced allocations and faster responses
+- ⚡ **Cross-Runtime Optimizations**: Runtime-specific code paths for Node.js, Bun, and Deno
+- 🔧 **Pre-Compiled Routes**: Route patterns compiled once during registration
 
-**Major Changes:**
-- 🚀 **Integrated Build System**: Built-in esbuild with automatic client/server code separation
-- 🔥 **CLI Tools**: New commands - `npx elit dev`, `npx elit build`, `npx elit preview`
+**🏗️ Build System & CLI:**
+- 🚀 **Integrated Build System**: Built-in esbuild with runtime-specific transpilation
+- 🔥 **CLI Tools**: `npx elit dev`, `npx elit build`, `npx elit preview`
 - 🏗️ **Zero Config**: Works out of the box with optional `elit.config.mjs`
-- 🌐 **REST API Router**: Server-side routing with full middleware stack
-- 🔄 **Shared State**: Real-time WebSocket state synchronization
 - 🎯 **basePath Support**: Configure base paths for subdirectory deployments
 - 🔐 **Environment Variables**: .env file support with VITE_ prefix
-- 📦 **Gzip Compression**: Automatic compression for production builds
-- 💾 **Cache Headers**: Smart caching for static assets
+- 📦 **Smart Bundling**: Automatic code splitting and tree-shaking
 - ⚡ **Hot Module Replacement**: Instant development feedback
 
-**Core Library:**
-- 🎯 Ultra lightweight (~10KB gzipped)
-- ⚡ Reactive state management
-- 🎨 CSS-in-JS with CreateStyle
-- 🛣️ Client-side router
-- 📱 Virtual scrolling
-- 🖥️ SSR support
-- 🎭 100+ HTML, SVG, and MathML elements
-- 🔧 Performance utilities
-- 📦 Tree-shakeable ES modules
+**🌐 Server Features:**
+- 🌐 **ServerRouter**: High-performance routing with regex pattern matching
+- 🔧 **Rich Middleware**: CORS, logger, rate limit, compression, security headers
+- 🔌 **WebSocket Server**: Built-in WebSocket with state synchronization
+- 🔄 **Shared State**: Real-time auto-sync between server and all clients
+- 📁 **Static File Server**: Efficient serving with proper MIME types
+- 💾 **Cache Headers**: Smart caching for static assets
+- 📦 **Gzip Compression**: Automatic compression for production
+
+**🎨 Frontend Library:**
+- 🎯 **Modular Design**: DOM (11KB), State (15KB), Router (13KB) - use only what you need
+- ⚡ **Reactive State**: Automatic dependency tracking with `createState` and `computed`
+- 🎨 **CSS-in-JS**: Type-safe styling with `CreateStyle`
+- 🛣️ **Client Router**: Hash and history mode with navigation guards
+- 📱 **Virtual Scrolling**: Handle 100k+ items with `createVirtualList`
+- 🖥️ **SSR Support**: `renderToString` for server-side rendering
+- 🎭 **100+ Elements**: Complete HTML, SVG, and MathML support
+- 🔧 **Performance Utilities**: Throttle, debounce, batch rendering
+- 📦 **Tree-Shakeable**: Excellent ES module tree-shaking
+
+**📊 Benchmarks:**
+- HTTP Server: 10,410 req/s (Node.js v24.12.0)
+- ServerRouter: 10,128 req/s with full routing + middleware
+- Router Overhead: Only 2.7% vs raw HTTP
+- [View detailed benchmarks →](./benchmark)
 
 ## Examples
 
@@ -855,10 +1054,10 @@ Example applications demonstrating Elit features:
 ## Links
 
 - 📦 [npm - elit](https://www.npmjs.com/package/elit)
-- 📦 [npm - elit-server](https://www.npmjs.com/package/elit-server)
-- 🐙 [GitHub Repository](https://github.com/oangsa/elit)
-- 📚 Documentation (coming soon)
-- 💬 Discord Community (coming soon)
+- 🚀 [npm - create-elit](https://www.npmjs.com/package/create-elit)
+- 🐙 [GitHub Repository](https://github.com/d-osc/elit)
+- 📚 [Documentation](https://d-osc.github.io/elit)
+- 💬 Community & Issues: [GitHub Discussions](https://github.com/d-osc/elit/discussions)
 
 ## Contributing