{"id":21685967,"url":"https://github.com/tarekraafat/eleva","last_synced_at":"2026-01-27T18:21:21.755Z","repository":{"id":264441098,"uuid":"893390543","full_name":"TarekRaafat/eleva","owner":"TarekRaafat","description":"A minimalist, lightweight, pure vanilla JavaScript frontend runtime framework.","archived":false,"fork":false,"pushed_at":"2025-06-23T15:25:16.000Z","size":2399,"stargazers_count":27,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-27T11:38:42.579Z","etag":null,"topics":["component-architecture","efficiency","eleva","fast","framework","frontend","javascript","lightweight","minimal","minimalistic","modern","opensource","optimized","performance","purejs","purevanilla","reactive","runtime","speed","ui"],"latest_commit_sha":null,"homepage":"https://elevajs.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/TarekRaafat.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":"TarekRaafat","buy_me_a_coffee":"TarekRaafat","custom":["paypal.me/TarekMRaafat"]}},"created_at":"2024-11-24T10:19:43.000Z","updated_at":"2025-06-23T15:25:20.000Z","dependencies_parsed_at":"2024-11-24T10:51:27.841Z","dependency_job_id":"1758d94c-e60d-4b0f-9889-eef32e665d17","html_url":"https://github.com/TarekRaafat/eleva","commit_stats":null,"previous_names":["tarekraafat/eleva"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/TarekRaafat/eleva","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TarekRaafat%2Feleva","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TarekRaafat%2Feleva/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TarekRaafat%2Feleva/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TarekRaafat%2Feleva/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TarekRaafat","download_url":"https://codeload.github.com/TarekRaafat/eleva/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TarekRaafat%2Feleva/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263542605,"owners_count":23477456,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["component-architecture","efficiency","eleva","fast","framework","frontend","javascript","lightweight","minimal","minimalistic","modern","opensource","optimized","performance","purejs","purevanilla","reactive","runtime","speed","ui"],"created_at":"2024-11-25T16:27:07.062Z","updated_at":"2026-01-27T18:21:21.748Z","avatar_url":"https://github.com/TarekRaafat.png","language":"JavaScript","funding_links":["https://github.com/sponsors/TarekRaafat","https://buymeacoffee.com/TarekRaafat","paypal.me/TarekMRaafat"],"categories":[],"sub_categories":[],"readme":"# Eleva.js 🚀\n\n\u003e **Version:** `1.1.0` | **Size:** ~6KB min (~2.5KB gzip) | **Dependencies:** Zero | **TypeScript:** Yes\n\u003e\n\u003e *Also known as: elevajs, eleva*\n\n**Best DX for Building the Best UX** — Pure JavaScript, Pure Performance, Simply Elegant.\n\n[![License](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)\n[![GitHub package.json version](https://img.shields.io/github/package-json/v/tarekraafat/eleva?label=github)](https://github.com/TarekRaafat/eleva)\n[![Version](https://img.shields.io/npm/v/eleva.svg?style=flat)](https://www.npmjs.com/package/eleva)\n![100% Javascript](https://img.shields.io/github/languages/top/TarekRaafat/eleva?color=yellow)\n![Zero Dependencies](https://img.shields.io/badge/dependencies-0-green.svg)\n[![codecov](https://codecov.io/gh/TarekRaafat/eleva/branch/master/graph/badge.svg?token=LFA6KENM24)](https://codecov.io/gh/TarekRaafat/eleva)\n[![Minified Size](https://badgen.net/bundlephobia/min/eleva@latest)](https://bundlephobia.com/package/eleva@latest)\n[![Gzipped Size](https://badgen.net/bundlephobia/minzip/eleva@latest)](https://bundlephobia.com/package/eleva@latest)\n[![](https://data.jsdelivr.com/v1/package/npm/eleva/badge?style=rounded)](https://www.jsdelivr.com/package/npm/eleva)\n\n\u003cbr\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://elevajs.com/\"\u003e\u003cimg src=\"./docs/imgs/eleva.js Full Logo.png\" alt=\"Eleva.js Logo - A minimalist, lightweight pure vanilla JavaScript frontend framework\" width=\"50%\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.producthunt.com/posts/eleva?embed=true\u0026utm_source=badge-featured\u0026utm_medium=badge\u0026utm_souce=badge-eleva\" target=\"_blank\"\u003e\u003cimg src=\"https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=938663\u0026theme=light\u0026t=1741247713068\" alt=\"eleva.js - A\u0026#0032;minimalist\u0026#0044;\u0026#0032;pure\u0026#0032;vanilla\u0026#0032;javascript\u0026#0032;frontend\u0026#0032;framework\u0026#0046; | Product Hunt\" style=\"width: 250px; height: 54px;\" width=\"250\" height=\"54\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cbr\u003e\n\u003cbr\u003e\n\u003cbr\u003e\n\n**A minimalist, lightweight, pure vanilla JavaScript frontend runtime framework.**\n_Designed for the best Developer Experience (DX) to help you build exceptional User Experiences (UX). Built with love for native JavaScript and a minimal core that can be extended through a powerful plugin system — because sometimes, less really is more!_ 😊\n\n\u003e **Stable Release**: This is `v1.1.0` - The latest stable release of Eleva.js!\n\n\n\nWelcome to Eleva! This is my humble, experimental playground for a fresh approach to frontend development. Eleva was born out of my genuine passion for pure vanilla JavaScript-no frameworks, no bloat, just the power of native code. I hope you'll have fun exploring, testing, and contributing to make Eleva even better. 🚀\n\n---\n\n## What is Eleva.js?\n\n**Eleva** is a minimalist, lightweight (6KB), pure vanilla JavaScript frontend framework crafted for **exceptional Developer Experience (DX)**. When developers enjoy building, users enjoy using — Eleva makes it effortless to create beautiful, responsive, and performant User Interfaces (UI) without the complexity, bundle size, or build tool requirements of traditional frameworks.\n\nUnlike React, Vue, or Angular, Eleva:\n- **Has zero dependencies** - No node_modules bloat\n- **Requires no build step** - Works directly in browsers via CDN\n- **Uses real DOM** - No virtual DOM overhead for simple apps\n- **Provides signal-based reactivity** - Fine-grained updates like Solid.js\n- **Includes TypeScript support** - Built-in type declarations\n- **Is just JavaScript** - If it works in vanilla JS, it works in Eleva\n\nEleva is ideal for developers building performance-critical applications, data-intensive dashboards (10K+ rows), micro-frontends, or anyone seeking a simpler alternative to React, Vue, or Angular.\n\n---\n\n## Table of Contents\n\n- [Eleva.js 🚀](#elevajs-)\n  - [What is Eleva.js?](#what-is-elevajs)\n  - [Table of Contents](#table-of-contents)\n  - [Quick Reference](#quick-reference)\n  - [Introduction](#introduction)\n  - [Design Philosophy](#design-philosophy)\n  - [Best-in-Class Developer Experience (DX)](#best-in-class-developer-experience-dx)\n  - [Features](#features)\n  - [When to Use Eleva](#when-to-use-eleva)\n  - [Version Strategy](#version-strategy)\n  - [Version Guide](#version-guide)\n  - [Performance](#performance)\n  - [Performance Benchmarks](#performance-benchmarks)\n  - [Eleva vs. Popular Frameworks](#eleva-vs-popular-frameworks)\n  - [Browser Support](#browser-support)\n  - [Installation](#installation)\n  - [Usage](#usage)\n    - [ES Module Example](#es-module-example)\n    - [UMD Example](#umd-example)\n  - [API Reference](#api-reference)\n    - [TemplateEngine](#templateengine)\n    - [Signal](#signal)\n    - [Emitter](#emitter)\n    - [Renderer](#renderer)\n    - [Eleva (Core)](#eleva-core)\n    - [Plugins](#plugins)\n      - [Core Framework Only (Lightweight)](#core-framework-only-lightweight)\n      - [Attr Plugin](#attr-plugin)\n      - [Router Plugin](#router-plugin)\n      - [Store Plugin](#store-plugin)\n  - [Development](#development)\n  - [Testing](#testing)\n  - [Contributing](#contributing)\n  - [License](#license)\n  - [Contact](#contact)\n\n---\n\n## Quick Reference\n\n### Minimal Setup (30 seconds)\n\n```javascript\nimport Eleva from \"eleva\";\n\nconst app = new Eleva(\"MyApp\");\n\napp.component(\"Counter\", {\n  setup: ({ signal }) =\u003e ({ count: signal(0) }),\n  template: (ctx) =\u003e `\u003cbutton @click=\"() =\u003e count.value++\"\u003e${ctx.count.value}\u003c/button\u003e`\n});\n\napp.mount(document.getElementById(\"app\"), \"Counter\");\n```\n\n### API at a Glance\n\n| Method | Purpose |\n|--------|---------|\n| `new Eleva(name)` | Create app |\n| `app.component(name, def)` | Register component |\n| `app.mount(el, name)` | Mount to DOM |\n| `app.use(plugin)` | Add plugin |\n| `signal(value)` | Reactive state |\n| `emitter.on/emit` | Events |\n\n### Template Syntax\n\n\u003e **Quick Rule:** `${}` needs `ctx.` — `@events` and `:props` don't.\n\n| Syntax | Use | `ctx.`? |\n|--------|-----|:-------:|\n| `${expr}` | JS value interpolation | ✓ |\n| `@click` | Event handler | ✗ |\n| `:prop` | Pass to child | ✗ |\n\n\u003e **How it works:** Use `${ctx.value}` to interpolate values into your template. For `@events` and `:props`, expressions are evaluated against the component context directly — no `ctx.` prefix needed. This allows cleaner syntax like `:user=\"userData\"` instead of `:user=\"${ctx.userData}\"`.\n\n---\n\n## Introduction\n\nEleva is a lightweight, no-nonsense runtime framework for frontend applications. Built with love for **pure vanilla JavaScript**, Eleva features a minimal core with essential functionality that can be extended through a powerful plugin system. This approach lets you create highly modular and scalable applications without the overhead of large frameworks. I built Eleva to prove that you don't need heavy frameworks or libraries to build amazing user interfaces-sometimes, the simplest approach is the most powerful.\n\n**My Inspiration:**  \nThe idea behind Eleva comes from a deep appreciation for native JavaScript. I wanted to create a tool that stays true to the language without introducing new syntax or complexity, making it easy to integrate into your projects.\n\n**Core Principles:**\n\n- **🌱 Minimalism:** Only essential features in the core, keeping the framework lean and focused.\n- **🔌 Extensibility:** Extend functionality by plugging in your own ideas, such as custom state management, routing, and more.\n- **🚀 Performance:** Fast, efficient, and designed with modern browsers in mind.\n- **🍦 Pure Vanilla:** No dependencies, no magic-just plain JavaScript.\n- **🔍 Transparent:** No hidden layers or abstractions — if it works in vanilla JS, it works in Eleva.\n\n---\n\n## Design Philosophy\n\n**Eleva is an unopinionated framework with a minimal core philosophy.**\n\nUnlike monolithic frameworks that include everything out-of-the-box, Eleva intentionally provides only essential features in its core, relying on a powerful plugin system for extensibility. This architectural choice means:\n\n- **🔄 Flexibility:** Architect your application your way-no rigid structure required.\n- **🎯 Native JavaScript:** Built using pure vanilla JavaScript, Eleva integrates seamlessly with your existing code without unfamiliar syntax.\n- **⚙️ Configurability:** Extend Eleva's functionality with a simple API and optional plugins.\n- **🆓 Freedom:** Decide the best way to implement features without unnecessary constraints.\n- **🔍 Transparent:** No magic, no hidden abstractions — what you write is what runs.\n\n### Core Philosophy\n\n\u003e **💡 Vanilla JavaScript. Elevated.**\n\nEleva takes plain vanilla JavaScript to the next level. Signals for reactivity. Components for structure. Your JS knowledge stays front and center, not hidden behind abstractions. **If it works in vanilla JS, it works in Eleva.**\n\n---\n\n## Best-in-Class Developer Experience (DX)\n\nEleva is built on a simple principle: **great DX leads to great UX**. When developers have intuitive tools, they build better interfaces. Every aspect of Eleva's design prioritizes your productivity and enjoyment.\n\n**Why Eleva's DX Stands Out:**\n\n| DX Feature | How It Helps You Build Better UX |\n|------------|----------------------------------|\n| **Zero Config** | Start building immediately — no webpack, no bundlers, no setup |\n| **Intuitive API** | Learn in minutes, master in hours — more time for polishing UI |\n| **Pure JavaScript** | No JSX, no compilation — what you write is what runs |\n| **Instant Feedback** | Signal-based reactivity shows changes immediately |\n| **TypeScript Built-in** | Full autocomplete and type safety out of the box |\n| **Tiny Bundle** | ~2.5KB gzipped means instant page loads for your users |\n\n- **🎨 Craftsmanship:** Every line of code is written with care, keeping the framework lightweight, efficient, and easy to understand.\n- **🛠️ Developer-First:** Intuitive API and minimal core mean you spend less time wrestling with the framework and more time perfecting your UI.\n- **🌟 No Magic:** Pure vanilla JavaScript with no hidden abstractions — debug easily, ship confidently.\n- **🏗️ Scales With You:** From prototype to production, Eleva grows with your project without added complexity.\n\n\u003e _\"The best UX comes from developers who love their tools.\"_ — Eleva's DX philosophy\n\n---\n\n## Features\n\n- **🧩 Component-Based Architecture:** Create reusable UI components with a rich context API\n- **⚡ Signal-Based Reactivity:** Fine-grained reactivity that updates only what's needed\n- **🔔 Event Handling:** Built-in event emitter for robust inter-component communication\n- **📝 Template Parsing:** Dynamic interpolation with a custom TemplateEngine (trusted templates only)\n- **🔄 DOM Diffing \u0026 Patching:** High-performance updates without a virtual DOM\n- **🔄 Lifecycle Hooks:** Complete lifecycle management with before/after mount and update hooks\n- **🧹 Automatic Cleanup:** Proper cleanup of resources, watchers, and child components on unmount\n- **🔌 Plugin System:** Extensible architecture with a simple plugin API\n- **🎯 Built-in Plugins:** Attr for advanced attributes, Router for client-side routing, and Store for reactive state management\n- **📦 UMD \u0026 ES Module Builds:** Supports modern build tools and browser environments\n- **🤝 Friendly API:** A gentle learning curve for both beginners and seasoned developers\n- **💎 Tiny Footprint \u0026 TypeScript Support:** Approximately ~6 KB minified with built-in TypeScript declarations\n\n---\n\n## When to Use Eleva\n\nEleva is ideal for developers seeking a lightweight, flexible, and high-performance solution for building frontend applications. Here are some scenarios where Eleva shines:\n\n- **⚡ Performance-Critical Applications:** 240fps-capable rendering handles everything from simple counters to 10K+ row dashboards (via virtual scrolling).\n- **📦 Bundle-Sensitive Projects:** At ~6KB with zero dependencies, ideal for embedded widgets, micro-frontends, and mobile-first apps.\n- **🔄 Unopinionated \u0026 Flexible:** Architect your application your way with a straightforward API and plugin system.\n- **🎯 Developer-Friendly:** Stick to pure vanilla JavaScript with familiar syntax and built-in TypeScript support.\n- **🧪 Rapid Prototyping:** Start building immediately—no build tooling required.\n- **🔌 Extensible:** Easily add features like routing or state management through plugins.\n- **🚀 Built-in Routing:** Advanced client-side routing with navigation guards and reactive state via Router plugin.\n- **🎯 Advanced Attributes:** Sophisticated attribute handling with ARIA support via Attr plugin.\n- **🏪 Reactive State Management:** Centralized, reactive data store with persistence and namespacing via Store plugin.\n- **📦 Module Format Flexibility:** Choose from ESM, CommonJS, or UMD formats based on your project's needs.\n\n---\n\n## Version Strategy\n\nI believe in clear versioning that reflects the maturity of the project:\n\n- **Stable Versions:** Version `1.0.0` and above follow semantic versioning with full backward compatibility guarantees within major versions.\n- **Semantic Versioning:** Eleva follows semantic versioning strictly to clearly communicate any breaking changes.\n\n---\n\n## Version Guide\n\nI follow [Semantic Versioning (SemVer)](https://semver.org/):\n\n- **🔢 Major Version:** Breaking changes or major overhauls (e.g., from `1.0.0` to `2.0.0`).\n- **🔢 Minor Version:** New features in a backward-compatible manner (e.g., from `1.1.0` to `1.2.0`).\n- **🔢 Patch Version:** Backward-compatible bug fixes and minor improvements (e.g., `1.0.1`).\n- **📌 Pre-release Identifiers:** Suffixes like `-alpha`, `-beta`, or `-rc` denote unstable releases (e.g., `1.2.0-alpha`).\n\n---\n\n## Performance\n\nEleva is crafted for performance:\n\n- **Lightweight:** Approximately ~6 KB minified and ~2.5 KB gzipped.\n- **Efficient Reactivity:** Signal-based updates ensure only necessary DOM parts are updated.\n- **Optimized Diffing:** Renderer efficiently patches changes without the overhead of a virtual DOM.\n- **No Bloat:** Pure vanilla JavaScript with zero dependencies keeps your project nimble.\n- **Tree-Shakable:** ESM format allows bundlers to eliminate unused code.\n- **Format-Specific Optimizations:** Each module format is optimized for its target environment.\n\n---\n\n## Performance Benchmarks\n\nBenchmarks using [js-framework-benchmark](https://krausest.github.io/js-framework-benchmark/) methodology (1,000 rows):\n\n| **Framework**                 | **Bundle Size (min+gzip)** | **Create 1K Rows** (ms) | **Partial Update** (ms) | **Memory** (MB)* |\n| ----------------------------- | -------------------------- | ----------------------- | ----------------------- | ---------------- |\n| **Eleva** (Direct DOM)        | **~2.5 KB**                | **~25**                 | ~86                     | **~0.5** (Chrome) |\n| **React 19** (Virtual DOM)    | ~44 KB                     | 40-70                   | 10-20                   | 2-5              |\n| **Vue 3.5** (Reactive)        | ~35 KB                     | 25-45                   | 5-15                    | 2-4              |\n| **Angular 19** (Signals)      | ~90 KB                     | 50-80                   | 15-25                   | 3-6              |\n\n**Eleva's Strengths:**\n- **Smallest bundle size** (~2.5 KB vs 35-90 KB)\n- **Competitive initial render** (~25ms for 1K rows)\n- **Zero dependencies** and minimal runtime overhead\n- **Direct DOM diffing** without virtual DOM overhead\n\n**Performance Tips:**\n- Use `key` attribute on list items for optimal diffing\n- Eleva excels at initial renders and memory efficiency\n- For large lists (10K+ rows), use [virtual scrolling](https://elevajs.com/examples/patterns/lists/virtual-scrolling.html) for **5.5x less memory** and **10x faster creation**\n- See [Large List Performance](https://elevajs.com/examples/patterns/best-practices/performance.html#large-list-performance) for detailed patterns and benchmarks\n\n\u003e 💡 **Run benchmarks yourself:** `bun run test:benchmark` | [Detailed benchmark results](https://github.com/TarekRaafat/eleva/blob/master/test/__results__/performance/BENCHMARKS.md)\n\n---\n\n## Eleva vs. Popular Frameworks\n\nHow does Eleva compare to popular JavaScript frameworks like React, Vue, Svelte, and Angular?\n\n| Feature | Eleva 1 | React 19 | Vue 3.5 | Svelte 5 | Angular 19 |\n|---------|-----------|----------|---------|----------|------------|\n| **Bundle Size** | ~6KB | ~44KB | ~45KB | ~3KB* | ~90KB |\n| **Dependencies** | 0 | 3+ | 0 | 0 | 10+ |\n| **Virtual DOM** | No | Yes | Yes | No | No |\n| **Reactivity** | Signals | useState/Hooks | Refs/Reactive | Compiler | Zone.js |\n| **TypeScript** | Built-in | Optional | Optional | Built-in | Built-in |\n| **Build Required** | No | Yes | Optional | Yes | Yes |\n| **Learning Curve** | Low | Medium | Medium | Low | High |\n\n_*Svelte compiles away, so runtime is minimal but build step is required._\n\nEleva offers a refreshing alternative to frameworks like React, Vue, and Angular:\n\n- **Simplicity:** No virtual DOM, JSX, or complex state management-just plain JavaScript.\n- **Modularity:** Easily extend via plugins to suit your project's needs.\n- **Size:** A fraction of the size of mainstream frameworks.\n- **Learning Curve:** Familiar syntax and a clear API make it accessible to all developers.\n\n_Note:_ Eleva isn't trying to replace these giants but provides a lightweight option when you want simplicity and speed. 🌟\n\n---\n\n## Browser Support\n\nEleva targets **modern evergreen browsers** and requires no polyfills.\n\n| Browser | Minimum Version |\n|---------|-----------------|\n| Chrome | 71+ |\n| Firefox | 69+ |\n| Safari | 12.1+ |\n| Edge | 79+ (Chromium) |\n| iOS Safari | 12.2+ |\n\n**Not Supported:** Internet Explorer, Legacy Edge (\u003c 79)\n\n**Why?** Eleva uses modern JavaScript features (`queueMicrotask`, ES6 Classes, async/await) to maintain its tiny footprint. These browsers cover **96%+ of global web traffic**.\n\n\u003e 💡 For legacy browser support, use Babel with appropriate polyfills.\n\n---\n\n## Installation\n\nEleva is available on npm. Try it out and share your thoughts!\n\n```bash\nnpm install eleva\n```\n\nOr include it directly via CDN:\n\n```html\n\u003c!-- jsDelivr (Recommended) --\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/eleva\"\u003e\u003c/script\u003e\n```\n\nor\n\n```html\n\u003c!-- unpkg --\u003e\n\u003cscript src=\"https://unpkg.com/eleva\"\u003e\u003c/script\u003e\n```\n\n---\n\n## Usage\n\n### ES Module Example\n\n```js\n// Import Eleva (using ES modules)\nimport Eleva from \"eleva\";\n\n// Create a new Eleva instance\nconst app = new Eleva(\"MyApp\");\n\n// Define a component\napp.component(\"HelloWorld\", {\n  // The setup method is optional; if omitted, an empty state is used.\n  setup({ signal }) {\n    const count = signal(0);\n    return { \n      count,\n      onMount: ({ container, context }) =\u003e {\n        console.log('Component mounted!');\n      }\n    };\n  },\n  template: (ctx) =\u003e `\n    \u003cdiv\u003e\n      \u003ch1\u003eHello, Eleva! 👋\u003c/h1\u003e\n      \u003cp\u003eCount: ${ctx.count.value}\u003c/p\u003e\n      \u003cbutton @click=\"() =\u003e count.value++\"\u003eIncrement\u003c/button\u003e\n    \u003c/div\u003e\n  `\n});\n\n// Mount the component and handle the Promise\napp.mount(document.getElementById(\"app\"), \"HelloWorld\")\n  .then(instance =\u003e {\n    console.log(\"Component mounted:\", instance);\n    // Later...\n    // instance.unmount();\n  });\n```\n\nInteractive Demo: [CodePen](https://codepen.io/tarekraafat/pen/GgRrxdY?editors=1010)\n\n### UMD Example\n\nInclude Eleva via a script tag and use the global variable:\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"UTF-8\" /\u003e\n    \u003ctitle\u003eEleva Example\u003c/title\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cdiv id=\"app\"\u003e\u003c/div\u003e\n    \u003cscript src=\"https://cdn.jsdelivr.net/npm/eleva\"\u003e\u003c/script\u003e\n    \u003cscript\u003e\n      const app = new Eleva(\"MyApp\");\n      app.component(\"HelloWorld\", {\n        setup({ signal }) {\n          const count = signal(0);\n          return { count };\n        },\n        template: (ctx) =\u003e `\n          \u003cdiv\u003e\n            \u003ch1\u003eHello, Eleva! 👋\u003c/h1\u003e\n            \u003cp\u003eCount: ${ctx.count.value}\u003c/p\u003e\n            \u003cbutton @click=\"() =\u003e count.value++\"\u003eIncrement\u003c/button\u003e\n          \u003c/div\u003e\n        `,\n      });\n      app.mount(document.getElementById(\"app\"), \"HelloWorld\");\n    \u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\nInteractive Demo: [CodePen](https://codepen.io/tarekraafat/pen/jEOyzYN?editors=1010)\n\n---\n\n## API Reference\n\n### Named Exports\n\nEleva exposes the core utilities as named exports for direct use and typing:\n\n```javascript\nimport Eleva, { Signal, Emitter, Renderer, TemplateEngine } from \"eleva\";\n```\n\n### TemplateEngine\n\n- **`TemplateEngine.evaluate(expr, data)`**\n  Evaluates JavaScript expressions within a given context (not sandboxed). Used internally for `@events` and `:props` attribute processing.\n\n### Signal\n\n- **`new Signal(initialValue)`**\n  Creates a reactive data holder.\n- **`.value` (getter/setter)**\n  Get or update the current value and trigger watchers.\n- **`.watch(callback)`**\n  Registers a function to run when the value updates.\n\n### Emitter\n\n- **`new Emitter()`**\n  Creates an Emitter instance.\n- **`.on(event, handler)`**\n  Listen to events.\n- **`.off(event, handler)`**\n  Remove event listeners (omit `handler` to remove all listeners for the event).\n- **`.emit(event, ...args)`**\n  Trigger events with additional arguments.\n\n### Renderer\n\n- **`new Renderer()`**\n  Creates a Renderer instance.\n- **`.patchDOM(container, newHtml)`**:\n  Updates container content with the new HTML.\n\n### Eleva (Core)\n\n- **`new Eleva(name, config)`**  \n  Create an Eleva instance.\n- **`.use(plugin, options)`**  \n  Install plugins.\n- **`.component(name, definition)`**  \n  Register a component.\n- **`.mount(container, compName, props)`**  \n  Mount a component to the DOM.\n\n### Plugins\n\nEleva's plugin system allows you to extend functionality as needed. Plugins are **separately bundled** from the core framework, ensuring optimal tree-shaking and minimal bundle sizes.\n\n**Plugin Types:**\n\n| Type | Source | Installation |\n|------|--------|--------------|\n| **Core Plugins** | Bundled with Eleva | `import { X } from \"eleva/plugins\"` |\n| **External Plugins** | Community/Ecosystem | `npm install eleva-plugin-x` |\n\n\u003e **Core plugins** (Attr, Router, Store) are official, tested, and documented. **External plugins** are community-created and installed separately. See [Plugin Documentation](https://elevajs.com/plugins/) for details.\n\u003e **TypeScript:** Use `import type { ... } from \"eleva\"` for core types and `import { Attr, Router, Store } from \"eleva/plugins\"` for plugin types — no deep imports needed.\n\n#### Core Framework Only (Lightweight)\n\n```javascript\nimport Eleva from 'eleva';\n\nconst app = new Eleva(\"myApp\");\n// Core framework only - ~6KB minified\n```\n\n#### Attr Plugin\n\nAdvanced attribute handling for ARIA, data attributes, boolean properties, and dynamic property detection:\n\n```javascript\nimport Eleva from 'eleva';\nimport { Attr } from 'eleva/plugins';\n\nconst app = new Eleva(\"myApp\");\napp.use(Attr, {\n    enableAria: true,      // ARIA attribute handling\n    enableData: true,       // Data attribute management\n    enableBoolean: true,    // Boolean attribute processing\n    enableDynamic: true     // Dynamic property detection\n});\n\n// Use advanced attributes in components\napp.component(\"myComponent\", {\n    template: (ctx) =\u003e `\n        \u003cbutton \n            aria-expanded=\"${ctx.isExpanded.value}\"\n            data-user-id=\"${ctx.userId.value}\"\n            disabled=\"${ctx.isLoading.value}\"\n            class=\"btn ${ctx.variant.value}\"\n        \u003e\n            ${ctx.text.value}\n        \u003c/button\u003e\n    `\n});\n```\n\n📚 **[Full Attr Documentation →](https://elevajs.com/plugins/attr/)** - Comprehensive guide with ARIA attributes, data attributes, boolean handling, and dynamic properties.\n\n#### Router Plugin\n\n🚀 **Advanced client-side routing** with multiple modes, navigation guards, reactive state, and component resolution:\n\n```javascript\nimport Eleva from 'eleva';\nimport { Router } from 'eleva/plugins';\n\nconst app = new Eleva(\"myApp\");\n\n// Define components\nconst HomePage = { template: () =\u003e `\u003ch1\u003eHome\u003c/h1\u003e` };\nconst AboutPage = { template: () =\u003e `\u003ch1\u003eAbout\u003c/h1\u003e` };\nconst UserPage = {\n    template: (ctx) =\u003e `\u003ch1\u003eUser: ${ctx.router.currentParams.value.id}\u003c/h1\u003e`\n};\n\n// Install router with advanced configuration\nconst router = app.use(Router, {\n    mount: '#app',                    // Mount element selector\n    mode: 'hash',                     // 'hash', 'history', or 'query'\n    routes: [\n        { \n            path: '/', \n            component: HomePage,\n            meta: { title: 'Home' }\n        },\n        { \n            path: '/about', \n            component: AboutPage,\n            beforeEnter: (to, from) =\u003e {\n                // Navigation guard\n                return true;\n            }\n        },\n        { \n            path: '/users/:id', \n            component: UserPage,\n            afterEnter: (to, from) =\u003e {\n                // Lifecycle hook\n                console.log('User page entered');\n            }\n        }\n    ],\n    onBeforeEach: (to, from) =\u003e {\n        // Global navigation guard\n        return true;\n    }\n});\n\n// Access reactive router state\nrouter.currentRoute.watch(route =\u003e {\n    console.log('Route changed:', route);\n});\n\n// Programmatic navigation\nrouter.navigate('/users/123', { replace: true });\n```\n\n📚 **[Full Router Documentation →](https://elevajs.com/plugins/router/)** - Comprehensive guide with 13 events, 7 reactive signals, navigation guards, scroll management, and more.\n\n#### Store Plugin\n\n🏪 **Reactive state management** with centralized data store, persistence, namespacing, and cross-component reactive updates:\n\n```javascript\nimport Eleva from 'eleva';\nimport { Store } from 'eleva/plugins';\n\nconst app = new Eleva(\"myApp\");\n\n// Install store with configuration\napp.use(Store, {\n    state: {\n        theme: \"light\",\n        counter: 0,\n        user: {\n            name: \"John Doe\",\n            email: \"john@example.com\"\n        }\n    },\n    actions: {\n        increment: (state) =\u003e state.counter.value++,\n        decrement: (state) =\u003e state.counter.value--,\n        toggleTheme: (state) =\u003e {\n            state.theme.value = state.theme.value === \"light\" ? \"dark\" : \"light\";\n        },\n        updateUser: (state, updates) =\u003e {\n            state.user.value = { ...state.user.value, ...updates };\n        }\n    },\n    // Optional: Namespaced modules\n    namespaces: {\n        auth: {\n            state: { token: null, isLoggedIn: false },\n            actions: {\n                login: (state, token) =\u003e {\n                    state.auth.token.value = token;\n                    state.auth.isLoggedIn.value = true;\n                },\n                logout: (state) =\u003e {\n                    state.auth.token.value = null;\n                    state.auth.isLoggedIn.value = false;\n                }\n            }\n        }\n    },\n    // Optional: State persistence\n    persistence: {\n        enabled: true,\n        key: \"myApp-store\",\n        storage: \"localStorage\",  // or \"sessionStorage\"\n        include: [\"theme\", \"user\"] // Only persist specific keys\n    }\n});\n\n// Use store in components\napp.component(\"Counter\", {\n    setup({ store }) {\n        return {\n            count: store.state.counter,\n            theme: store.state.theme,\n            increment: () =\u003e store.dispatch(\"increment\"),\n            decrement: () =\u003e store.dispatch(\"decrement\")\n        };\n    },\n    template: (ctx) =\u003e `\n        \u003cdiv class=\"${ctx.theme.value}\"\u003e\n            \u003ch3\u003eCounter: ${ctx.count.value}\u003c/h3\u003e\n            \u003cbutton @click=\"decrement\"\u003e-\u003c/button\u003e\n            \u003cbutton @click=\"increment\"\u003e+\u003c/button\u003e\n        \u003c/div\u003e\n    `\n});\n\n// Create state and actions at runtime\napp.component(\"TodoManager\", {\n    setup({ store }) {\n        // Register new module dynamically\n        store.registerModule(\"todos\", {\n            state: { items: [], filter: \"all\" },\n            actions: {\n                addTodo: (state, text) =\u003e {\n                    state.todos.items.value = [...state.todos.items.value, {\n                        id: Date.now(),\n                        text,\n                        completed: false\n                    }];\n                },\n                toggleTodo: (state, id) =\u003e {\n                    const todo = state.todos.items.value.find(t =\u003e t.id === id);\n                    if (todo) todo.completed = !todo.completed;\n                }\n            }\n        });\n\n        // Create individual state properties\n        const notification = store.createState(\"notification\", null);\n\n        // Create individual actions\n        store.createAction(\"showNotification\", (state, message) =\u003e {\n            state.notification.value = message;\n            setTimeout(() =\u003e state.notification.value = null, 3000);\n        });\n\n        return {\n            todos: store.state.todos.items,\n            notification,\n            addTodo: (text) =\u003e store.dispatch(\"todos.addTodo\", text),\n            notify: (msg) =\u003e store.dispatch(\"showNotification\", msg)\n        };\n    }\n});\n\n// Subscribe to store changes\nconst unsubscribe = app.store.subscribe((mutation, state) =\u003e {\n    console.log('Store updated:', mutation.type, state);\n});\n\n// Access store globally\nconsole.log(app.store.getState()); // Get current state values\napp.dispatch(\"increment\");          // Dispatch actions globally\n```\n\n📚 **[Full Store Documentation →](https://elevajs.com/plugins/store/)** - Comprehensive guide with 10 API methods, persistence options, namespaces, subscriptions, and migration guides.\n\n**Bundle Sizes:**\n- Core framework only: ~6KB (minified)\n- Core + Attr: ~8KB (minified)\n- Core + Router: ~21KB (minified)\n- Core + Store: ~12KB (minified)\n- Core + All plugins: ~29KB (minified)\n\n**Individual Plugin Sizes:**\n- Attr: ~2.2KB (minified)\n- Router: ~15KB (minified)\n- Store: ~6KB (minified)\n\n**Available Plugin Formats:**\n\n**For Bundlers (Tree-Shaking Supported):**\n- ESM: `import { Attr, Router, Store } from 'eleva/plugins'`\n- CJS: `const { Attr, Router, Store } = require('eleva/plugins')`\n\n**For CDN (Individual Plugins - Smaller Bundle Size):**\n- UMD: `\u003cscript src=\"https://cdn.jsdelivr.net/npm/eleva@latest/dist/eleva.umd.min.js\"\u003e\u003c/script\u003e`\n- UMD: `\u003cscript src=\"https://cdn.jsdelivr.net/npm/eleva@latest/dist/plugins/attr.umd.min.js\"\u003e\u003c/script\u003e`\n- UMD: `\u003cscript src=\"https://cdn.jsdelivr.net/npm/eleva@latest/dist/plugins/router.umd.min.js\"\u003e\u003c/script\u003e`\n- UMD: `\u003cscript src=\"https://cdn.jsdelivr.net/npm/eleva@latest/dist/plugins/store.umd.min.js\"\u003e\u003c/script\u003e`\n\n**Individual Plugin Imports (Smaller Bundle Size):**\n- ESM: `import { Attr } from 'eleva/plugins/attr'`\n- ESM: `import { Router } from 'eleva/plugins/router'`\n- ESM: `import { Store } from 'eleva/plugins/store'`\n- CJS: `const { Attr } = require('eleva/plugins/attr')`\n- CJS: `const { Router } = require('eleva/plugins/router')`\n- CJS: `const { Store } = require('eleva/plugins/store')`\n\nFor detailed API documentation, please check the [docs](https://elevajs.com) folder.\n\n---\n\n## Development\n\nI welcome developers to dive in and experiment with Eleva! Here's how to get started locally:\n\n1. **Clone the Repository:**\n\n   ```bash\n   git clone https://github.com/TarekRaafat/eleva.git\n   cd eleva\n   ```\n\n2. **Install Dependencies:**\n\n   ```bash\n   npm install\n   ```\n\n3. **Run in Development Mode (Watch):**\n\n   ```bash\n   npm run dev\n   ```\n\n4. **Build for Production without TypeScript Declarations:**\n\n   ```bash\n   npm run build\n   ```\n\n5. **Generate and Bundle TypeScript Declarations:**\n\n   ```bash\n   npm run build:types\n   npm run build:types:bundle\n   ```\n\n6. **Build for Production with TypeScript Declarations:**\n\n   ```bash\n   npm run build:all\n   ```\n\n---\n\n## Testing\n\nEleva has a comprehensive test suite with **100% line coverage**:\n\n| Metric | Value |\n|--------|-------|\n| **Total Tests** | 273 |\n| **Line Coverage** | 100% |\n| **Test Runner** | Bun |\n\nRun the test suite:\n\n```bash\nbun test              # Run all tests\nbun test:coverage     # Run with coverage report\nbun test:benchmark    # Run performance benchmarks\n```\n\nContributions to tests are very welcome! 🧪\n\n---\n\n## Contributing\n\nI'd love to have you onboard as a contributor! Whether you're adding new features, squashing bugs, or sharing ideas, your input is invaluable. Please check out [CONTRIBUTING](https://github.com/TarekRaafat/eleva/blob/master/CONTRIBUTING.md) for guidelines on getting started.\n\n---\n\n## License\n\nEleva is open-source and available under the [MIT License](https://github.com/TarekRaafat/eleva/blob/master/LICENSE).\n\n---\n\n## Contact\n\n- **Author:** [Tarek Raafat](https://github.com/TarekRaafat)\n- **Email:** [tarek.m.raafat@gmail.com](mailto:tarek.m.raafat@gmail.com)\n- **Website:** [tarekraafat.com](https://www.tarekraafat.com)\n\n---\n\n**Note:** This is the first official stable release of Eleva.js! The framework is production-ready with a stable API. Your feedback and contributions will help make Eleva even better. Let's build something great together! 💪✨\n\n---\n\n[![NPM](https://nodei.co/npm/eleva.png?downloads=true\u0026downloadRank=true\u0026stars=true)](https://nodei.co/npm/eleva/)\n\n---\n\n[Documentation](https://elevajs.com) |\n[Examples](https://elevajs.com/examples) |\n[Changelog](https://github.com/TarekRaafat/eleva/blob/master/CHANGELOG.md) |\n[GitHub Discussions](https://github.com/TarekRaafat/eleva/discussions)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftarekraafat%2Feleva","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftarekraafat%2Feleva","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftarekraafat%2Feleva/lists"}