eleva 1.2.2-alpha → 1.2.4-alpha

package/README.md

@@ -1,33 +1,41 @@
-# Eleva 🚀
+# eleva.js 🚀
 
 Pure JavaScript, Pure Performance, Simply Elegant.
 
 [![License](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
+[![GitHub package.json version](https://img.shields.io/github/package-json/v/tarekraafat/eleva?label=github)](https://github.com/TarekRaafat/eleva)
 [![Version](https://img.shields.io/npm/v/eleva.svg?style=flat)](https://www.npmjs.com/package/eleva)
 ![100% Javascript](https://img.shields.io/github/languages/top/TarekRaafat/eleva?color=yellow)
-![Zero Dependencies](https://img.shields.io/badge/Dependencies-0-green.svg)
+![Zero Dependencies](https://img.shields.io/badge/dependencies-0-green.svg)
+[![codecov](https://codecov.io/gh/TarekRaafat/eleva/branch/master/graph/badge.svg?token=LFA6KENM24)](https://codecov.io/gh/TarekRaafat/eleva)
 [![Minified Size](https://badgen.net/bundlephobia/min/eleva@latest)](https://bundlephobia.com/package/eleva@latest)
 [![Gzipped Size](https://badgen.net/bundlephobia/minzip/eleva@latest)](https://bundlephobia.com/package/eleva@latest)
+[![](https://data.jsdelivr.com/v1/package/npm/eleva/badge)](https://www.jsdelivr.com/package/npm/eleva)
 
 <br>
 <br>
 
 <p align="center">
-  <img src="./docs/imgs/Eleva Logo.png" alt="Eleva Logo" width="50%">
+  <a href="https://tarekraafat.github.io/eleva/"><img src="./docs/imgs/eleva.js Full Logo.png" alt="eleva.js Full Logo" width="50%"></a>
+</p>
+
+<p align="center">
+  <a href="https://www.producthunt.com/posts/eleva?embed=true&utm_source=badge-featured&utm_medium=badge&utm_souce=badge-eleva" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=938663&theme=light&t=1741247713068" alt="eleva.js - A&#0032;minimalist&#0044;&#0032;pure&#0032;vanilla&#0032;javascript&#0032;frontend&#0032;framework&#0046; | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
 </p>
 
+<br>
 <br>
 <br>
 
 **A minimalist, lightweight, pure vanilla JavaScript frontend runtime framework.**  
 _Built with love for native JavaScript—because sometimes, less really is more!_ 😊
 
-<!-- [![](https://data.jsdelivr.com/v1/package/npm/eleva/badge)](https://www.jsdelivr.com/package/npm/eleva) -->
+> **Stability Notice**: This is `v1.2.3-alpha` - The core functionality is stable, but I'm seeking community feedback before the final v1.0.0 release.  
+> While suitable for production use, please be aware of the [known limitations](docs/known-limitations.md).
+
+**Version:** `1.2.3-alpha`
 
-> **Stability Notice**: This is `v1.2.0-alpha` - APIs may change significantly until the stable release.  
-> Not recommended for production use yet. Follow the [versioning guide](#version-guide) for updates.
 
-**Version:** `1.2.0-alpha`
 
 Welcome 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. 🚀
 
@@ -35,7 +43,7 @@ Welcome to Eleva! This is my humble, experimental playground for a fresh approac
 
 ## Table of Contents
 
-- [Eleva 🚀](#eleva-)
+- [eleva.js 🚀](#elevajs-)
   - [Table of Contents](#table-of-contents)
   - [Introduction](#introduction)
   - [Design Philosophy](#design-philosophy)
@@ -67,7 +75,7 @@ Welcome to Eleva! This is my humble, experimental playground for a fresh approac
 
 ## Introduction
 
-Eleva is a lightweight, no-nonsense runtime framework for frontend applications. Built with love for **pure vanilla JavaScript**, Eleva 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 libraries to build amazing user interfaces—sometimes, the simplest approach is the most powerful.
+Eleva is a lightweight, no-nonsense runtime framework for frontend applications. Built with love for **pure vanilla JavaScript**, Eleva 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.
 
 **My Inspiration:**  
 The 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.
@@ -83,7 +91,7 @@ The idea behind Eleva comes from a deep appreciation for native JavaScript. I wa
 
 ## Design Philosophy
 
-**Eleva is an unopinionated library.**
+**Eleva is an unopinionated framework.**
 
 Unlike many frameworks that enforce a specific project structure or coding paradigm, Eleva provides a minimal core with a flexible plugin system. This means:
 
@@ -100,10 +108,10 @@ This unopinionated approach makes Eleva versatile and ideal for developers who w
 
 Eleva is built with meticulous attention to detail and a deep passion for pure vanilla JavaScript. Every aspect of its design and architecture is handcrafted with the developer in mind. This makes Eleva not only innovative but also a solid foundation for your projects.
 
-- **🎨 Craftsmanship:** Every line of code is written with care, keeping the library lightweight, efficient, and easy to understand.
+- **🎨 Craftsmanship:** Every line of code is written with care, keeping the framework lightweight, efficient, and easy to understand.
 - **🛠️ Developer-Centric:** Its intuitive API and minimal core mean you spend less time wrestling with the framework and more time building your application.
 - **🌟 Innovative & Fresh:** Stick to pure vanilla JavaScript and avoid unnecessary abstractions.
-- **🏗️ Solid & Reliable:** Focused on performance and modularity, Eleva scales with your project’s needs.
+- **🏗️ Solid & Reliable:** Focused on performance and modularity, Eleva scales with your project's needs.
 
 This unique, developer-first approach makes Eleva a standout choice for building high-performance frontend applications without compromising on simplicity or control.
 
@@ -112,13 +120,13 @@ This unique, developer-first approach makes Eleva a standout choice for building
 ## Features
 
 - **🧩 Component-Based Architecture:** Create reusable UI components effortlessly.
-- **⚡ Signal-Based Reactivity:** Fine-grained reactivity that updates only what’s needed.
+- **⚡ Signal-Based Reactivity:** Fine-grained reactivity that updates only what's needed.
 - **🔔 Event Handling:** Built-in event emitter for robust inter-component communication.
 - **📝 Template Parsing:** Secure and dynamic interpolation with a custom TemplateEngine.
 - **🔄 DOM Diffing & Patching:** High-performance updates without a virtual DOM.
 - **📦 UMD & ES Module Builds:** Supports modern build tools and browser environments.
 - **🤝 Friendly API:** A gentle learning curve for both beginners and seasoned developers.
-- **💎 Tiny Footprint & TypeScript Support:** Approximately ~4 KB minified with built-in TypeScript declarations, to keep your bundle lean and your codebase strongly typed.
+- **💎 Tiny Footprint & TypeScript Support:** Approximately ~6 KB minified with built-in TypeScript declarations, to keep your bundle lean and your codebase strongly typed.
 
 ---
 
@@ -126,7 +134,7 @@ This unique, developer-first approach makes Eleva a standout choice for building
 
 Eleva is ideal for developers seeking a lightweight, flexible, and high-performance solution for building frontend applications. Here are some scenarios where Eleva shines:
 
-- **🚀 Small to Medium Projects:** Perfect for web apps or websites that don’t require the overhead of a full-fledged framework.
+- **🚀 Small to Medium Projects:** Perfect for web apps or websites that don't require the overhead of a full-fledged framework.
 - **⚡ Performance-Critical Applications:** Optimized reactivity and DOM diffing ensure smooth performance without bloat.
 - **🔄 Unopinionated & Flexible:** Architect your application your way with a straightforward API and plugin system.
 - **🎯 Developer-Friendly:** Stick to pure vanilla JavaScript with familiar syntax and built-in TypeScript support.
@@ -140,7 +148,7 @@ Eleva is ideal for developers seeking a lightweight, flexible, and high-performa
 I believe in clear versioning that reflects the maturity of the project:
 
 - **Pre-release Versions (Alpha/Beta):** Early versions like `1.2.0-alpha` indicate the API is still evolving. Expect frequent updates and share your feedback!
-- **Semantic Versioning:** Once stable, I’ll follow semantic versioning strictly to clearly communicate any breaking changes.
+- **Semantic Versioning:** Once stable, I'll follow semantic versioning strictly to clearly communicate any breaking changes.
 - **Fresh Start:** This release (`1.2.0-alpha`) marks a significant update with enhanced inline documentation, improved JSDoc annotations, and a refined mounting context that now includes an `emitter` property.
 
 ---
@@ -160,7 +168,7 @@ I follow [Semantic Versioning (SemVer)](https://semver.org/):
 
 Eleva is crafted for performance:
 
-- **Lightweight:** Approximately ~4 KB minified and ~1.8 KB gzipped.
+- **Lightweight:** Approximately ~6 KB minified and ~2 KB gzipped.
 - **Efficient Reactivity:** Signal-based updates ensure only necessary DOM parts are updated.
 - **Optimized Diffing:** Renderer efficiently patches changes without the overhead of a virtual DOM.
 - **No Bloat:** Pure vanilla JavaScript with zero dependencies keeps your project nimble.
@@ -169,14 +177,14 @@ Eleva is crafted for performance:
 
 ## Performance Benchmarks
 
-Preliminary benchmarks illustrate Eleva’s efficiency compared to popular frameworks:
+Preliminary benchmarks illustrate Eleva's efficiency compared to popular frameworks:
 
 | **Framework**                 | **Bundle Size** (KB) | **Initial Load Time** (ms) | **DOM Update Speed** (s) | **Peak Memory Usage** (KB) | **Overall Performance Score** (lower is better) |
 | ----------------------------- | -------------------- | -------------------------- | ------------------------ | -------------------------- | ----------------------------------------------- |
-| **Eleva** (Direct DOM)        | **1.8**              | **10**                     | **0.018**                | **0.25**                   | **3.02 (Best)**                                 |
-| **React** (Virtual DOM)       | 42                   | 40                         | 0.020                    | 0.25                       | 20.57                                           |
-| **Vue** (Reactive State)      | 33                   | 35                         | 0.021                    | 3.10                       | 17.78                                           |
-| **Angular** (Two-way Binding) | 80                   | 100                        | 0.021                    | 0.25                       | 45.07 (Slowest)                                 |
+| **Eleva** (Direct DOM)        | **2**              | **0.05**                     | **0.002**                | **0.25**                   | **0.58 (Best)**                                 |
+| **React** (Virtual DOM)       | 4.1                   | 5.34                         | 0.020                    | 0.25                       | 9.71                                           |
+| **Vue** (Reactive State)      | 45                   | 4.72                         | 0.021                    | 3.10                       | 13.21                                           |
+| **Angular** (Two-way Binding) | 62                   | 5.26                        | 0.021                    | 0.25                       | 16.88 (Slowest)                                 |
 
 Detailed [Benchmark Metrics Report](BENCHMARK.md)
 
@@ -189,11 +197,11 @@ Detailed [Benchmark Metrics Report](BENCHMARK.md)
 Eleva offers a refreshing alternative to frameworks like React, Vue, and Angular:
 
 - **Simplicity:** No virtual DOM, JSX, or complex state management—just plain JavaScript.
-- **Modularity:** Easily extend via plugins to suit your project’s needs.
+- **Modularity:** Easily extend via plugins to suit your project's needs.
 - **Size:** A fraction of the size of mainstream frameworks.
 - **Learning Curve:** Familiar syntax and a clear API make it accessible to all developers.
 
-_Note:_ Eleva isn’t trying to replace these giants but provides a lightweight option when you want simplicity and speed. 🌟
+_Note:_ Eleva isn't trying to replace these giants but provides a lightweight option when you want simplicity and speed. 🌟
 
 ---
 
@@ -347,7 +355,7 @@ For detailed API documentation, please check the [docs](docs/index.md) folder.
 
 ## Development
 
-I welcome developers to dive in and experiment with Eleva! Here’s how to get started locally:
+I welcome developers to dive in and experiment with Eleva! Here's how to get started locally:
 
 1. **Clone the Repository:**
 
@@ -403,7 +411,7 @@ Contributions to tests are very welcome! 🧪
 
 ## Contributing
 
-I’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](CONTRIBUTING.md) for guidelines on getting started.
+I'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](CONTRIBUTING.md) for guidelines on getting started.
 
 ---
 
@@ -421,7 +429,7 @@ Eleva is open-source and available under the [MIT License](LICENSE).
 
 ---
 
-**Note:** This is an alpha release. I'm still polishing things up, so expect some bumps along the way. Your feedback and contributions will help shape Eleva into something truly amazing. Let’s build something great together! 💪✨
+**Note:** This is an alpha release. I'm still polishing things up, so expect some bumps along the way. Your feedback and contributions will help shape Eleva into something truly amazing. Let's build something great together! 💪✨
 
 ---
 

package/dist/eleva.d.ts

@@ -95,9 +95,11 @@ declare class Eleva {
     private _prepareLifecycleHooks;
     /**
      * Processes DOM elements for event binding based on attributes starting with "@".
+     * Tracks listeners for cleanup during unmount.
      *
      * @param {HTMLElement} container - The container element in which to search for events.
      * @param {Object<string, any>} context - The current context containing event handler definitions.
+     * @param {Array<Function>} cleanupListeners - Array to collect cleanup functions for each event listener.
      * @private
      */
     private _processEvents;

package/dist/eleva.esm.js

@@ -13,9 +13,9 @@ class TemplateEngine {
    * @returns {string} The resulting string with evaluated values.
    */
   static parse(template, data) {
+    if (!template || typeof template !== "string") return template;
     return template.replace(/\{\{\s*(.*?)\s*\}\}/g, (_, expr) => {
-      const value = this.evaluate(expr, data);
-      return value === undefined ? "" : value;
+      return this.evaluate(expr, data);
     });
   }
 
@@ -27,11 +27,10 @@ class TemplateEngine {
    * @returns {any} The result of the evaluated expression, or an empty string if undefined or on error.
    */
   static evaluate(expr, data) {
+    if (!expr || typeof expr !== "string") return expr;
     try {
-      const keys = Object.keys(data);
-      const values = Object.values(data);
-      const result = new Function(...keys, `return ${expr}`)(...values);
-      return result === undefined ? "" : result;
+      const compiledFn = new Function("data", `with(data) { return ${expr} }`);
+      return compiledFn(data);
     } catch (error) {
       console.error(`Template evaluation error:`, {
         expression: expr,
@@ -60,6 +59,8 @@ class Signal {
     this._value = value;
     /** @private {Set<function>} Collection of callback functions to be notified when value changes */
     this._watchers = new Set();
+    /** @private {boolean} Flag to prevent multiple synchronous watcher notifications and batch updates into microtasks */
+    this._pending = false;
   }
 
   /**
@@ -79,7 +80,7 @@ class Signal {
   set value(newVal) {
     if (newVal !== this._value) {
       this._value = newVal;
-      this._watchers.forEach(fn => fn(newVal));
+      this._notifyWatchers();
     }
   }
 
@@ -93,6 +94,24 @@ class Signal {
     this._watchers.add(fn);
     return () => this._watchers.delete(fn);
   }
+
+  /**
+   * Notifies all registered watchers of a value change using microtask scheduling.
+   * Uses a pending flag to batch multiple synchronous updates into a single notification.
+   * All watcher callbacks receive the current value when executed.
+   *
+   * @private
+   * @returns {void}
+   */
+  _notifyWatchers() {
+    if (!this._pending) {
+      this._pending = true;
+      queueMicrotask(() => {
+        this._pending = false;
+        this._watchers.forEach(fn => fn(this._value));
+      });
+    }
+  }
 }
 
 /**
@@ -155,11 +174,24 @@ class Renderer {
    *
    * @param {HTMLElement} container - The container element to patch.
    * @param {string} newHtml - The new HTML content to apply.
+   * @throws {Error} If container is not an HTMLElement or newHtml is not a string
    */
   patchDOM(container, newHtml) {
+    if (!(container instanceof HTMLElement)) {
+      throw new Error("Container must be an HTMLElement");
+    }
+    if (typeof newHtml !== "string") {
+      throw new Error("newHtml must be a string");
+    }
     const tempContainer = document.createElement("div");
-    tempContainer.innerHTML = newHtml;
-    this.diff(container, tempContainer);
+    try {
+      tempContainer.innerHTML = newHtml;
+      this.diff(container, tempContainer);
+    } catch (error) {
+      throw new Error(`Failed to patch DOM: ${error.message}`);
+    } finally {
+      tempContainer.innerHTML = "";
+    }
   }
 
   /**
@@ -167,56 +199,71 @@ class Renderer {
    *
    * @param {HTMLElement} oldParent - The original DOM element.
    * @param {HTMLElement} newParent - The new DOM element.
+   * @throws {Error} If either parent is not an HTMLElement
    */
   diff(oldParent, newParent) {
+    if (!(oldParent instanceof HTMLElement) || !(newParent instanceof HTMLElement)) {
+      throw new Error("Both parents must be HTMLElements");
+    }
+
+    // Fast path for identical nodes
+    if (oldParent.isEqualNode(newParent)) return;
     const oldNodes = Array.from(oldParent.childNodes);
     const newNodes = Array.from(newParent.childNodes);
     const max = Math.max(oldNodes.length, newNodes.length);
+
+    // Batch DOM operations for better performance
+    const operations = [];
     for (let i = 0; i < max; i++) {
       const oldNode = oldNodes[i];
       const newNode = newNodes[i];
 
       // Case 1: Append new nodes that don't exist in the old tree.
       if (!oldNode && newNode) {
-        oldParent.appendChild(newNode.cloneNode(true));
+        operations.push(() => oldParent.appendChild(newNode.cloneNode(true)));
         continue;
       }
       // Case 2: Remove old nodes not present in the new tree.
       if (oldNode && !newNode) {
-        oldParent.removeChild(oldNode);
+        operations.push(() => oldParent.removeChild(oldNode));
         continue;
       }
 
       // Case 3: For element nodes, compare keys if available.
-      if (oldNode.nodeType === Node.ELEMENT_NODE && newNode.nodeType === Node.ELEMENT_NODE) {
+      if (oldNode?.nodeType === Node.ELEMENT_NODE && newNode?.nodeType === Node.ELEMENT_NODE) {
         const oldKey = oldNode.getAttribute("key");
         const newKey = newNode.getAttribute("key");
         if (oldKey || newKey) {
           if (oldKey !== newKey) {
-            oldParent.replaceChild(newNode.cloneNode(true), oldNode);
+            operations.push(() => oldParent.replaceChild(newNode.cloneNode(true), oldNode));
             continue;
           }
         }
       }
 
       // Case 4: Replace nodes if types or tag names differ.
-      if (oldNode.nodeType !== newNode.nodeType || oldNode.nodeName !== newNode.nodeName) {
-        oldParent.replaceChild(newNode.cloneNode(true), oldNode);
+      if (oldNode?.nodeType !== newNode?.nodeType || oldNode?.nodeName !== newNode?.nodeName) {
+        operations.push(() => oldParent.replaceChild(newNode.cloneNode(true), oldNode));
         continue;
       }
+
       // Case 5: For text nodes, update content if different.
-      if (oldNode.nodeType === Node.TEXT_NODE) {
+      if (oldNode?.nodeType === Node.TEXT_NODE) {
         if (oldNode.nodeValue !== newNode.nodeValue) {
           oldNode.nodeValue = newNode.nodeValue;
         }
         continue;
       }
+
       // Case 6: For element nodes, update attributes and then diff children.
-      if (oldNode.nodeType === Node.ELEMENT_NODE) {
+      if (oldNode?.nodeType === Node.ELEMENT_NODE) {
         this.updateAttributes(oldNode, newNode);
         this.diff(oldNode, newNode);
       }
     }
+
+    // Execute batched operations
+    operations.forEach(op => op());
   }
 
   /**
@@ -224,34 +271,69 @@ class Renderer {
    *
    * @param {HTMLElement} oldEl - The element to update.
    * @param {HTMLElement} newEl - The element providing the updated attributes.
+   * @throws {Error} If either element is not an HTMLElement
    */
   updateAttributes(oldEl, newEl) {
-    const attributeToPropertyMap = {
-      value: "value",
-      checked: "checked",
-      selected: "selected",
-      disabled: "disabled"
+    if (!(oldEl instanceof HTMLElement) || !(newEl instanceof HTMLElement)) {
+      throw new Error("Both elements must be HTMLElements");
+    }
+
+    // Special cases for properties that don't map directly to attributes
+    const specialProperties = {
+      value: true,
+      checked: true,
+      selected: true,
+      disabled: true,
+      readOnly: true,
+      multiple: true
     };
 
-    // Remove old attributes that no longer exist.
+    // Batch attribute operations for better performance
+    const operations = [];
+
+    // Remove old attributes that no longer exist
     Array.from(oldEl.attributes).forEach(attr => {
       if (attr.name.startsWith("@")) return;
       if (!newEl.hasAttribute(attr.name)) {
-        oldEl.removeAttribute(attr.name);
+        operations.push(() => oldEl.removeAttribute(attr.name));
       }
     });
-    // Add or update attributes from newEl.
+
+    // Add or update attributes from newEl
     Array.from(newEl.attributes).forEach(attr => {
       if (attr.name.startsWith("@")) return;
       if (oldEl.getAttribute(attr.name) !== attr.value) {
-        oldEl.setAttribute(attr.name, attr.value);
-        if (attributeToPropertyMap[attr.name]) {
-          oldEl[attributeToPropertyMap[attr.name]] = attr.value;
-        } else if (attr.name in oldEl) {
-          oldEl[attr.name] = attr.value;
-        }
+        operations.push(() => {
+          oldEl.setAttribute(attr.name, attr.value);
+
+          // Convert kebab-case to camelCase for property names
+          const propName = attr.name.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+
+          // Handle special cases first
+          if (specialProperties[propName]) {
+            oldEl[propName] = attr.value === "" ? true : attr.value;
+          }
+          // Handle ARIA attributes
+          else if (attr.name.startsWith("aria-")) {
+            const ariaName = "aria" + attr.name.slice(5).replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+            oldEl[ariaName] = attr.value;
+          }
+          // Handle data attributes
+          else if (attr.name.startsWith("data-")) {
+            // dataset handles the camelCase conversion automatically
+            const dataName = attr.name.slice(5);
+            oldEl.dataset[dataName] = attr.value;
+          }
+          // Handle standard properties
+          else if (propName in oldEl) {
+            oldEl[propName] = attr.value;
+          }
+        });
       }
     });
+
+    // Execute batched operations
+    operations.forEach(op => op());
   }
 }
 
@@ -401,6 +483,7 @@ class Eleva {
       };
       const watcherUnsubscribers = [];
       const childInstances = [];
+      const cleanupListeners = [];
       if (!this._isMounted) {
         mergedContext.onBeforeMount && mergedContext.onBeforeMount();
       } else {
@@ -414,7 +497,7 @@ class Eleva {
       const render = () => {
         const newHtml = TemplateEngine.parse(template(mergedContext), mergedContext);
         this.renderer.patchDOM(container, newHtml);
-        this._processEvents(container, mergedContext);
+        this._processEvents(container, mergedContext, cleanupListeners);
         this._injectStyles(container, compName, style, mergedContext);
         this._mountChildren(container, children, childInstances);
         if (!this._isMounted) {
@@ -438,12 +521,13 @@ class Eleva {
         container,
         data: mergedContext,
         /**
-         * Unmounts the component, cleaning up watchers, child components, and clearing the container.
+         * Unmounts the component, cleaning up watchers and listeners, child components, and clearing the container.
          *
          * @returns {void}
          */
         unmount: () => {
           watcherUnsubscribers.forEach(fn => fn());
+          cleanupListeners.forEach(fn => fn());
           childInstances.forEach(child => child.unmount());
           mergedContext.onUnmount && mergedContext.onUnmount();
           container.innerHTML = "";
@@ -470,12 +554,14 @@ class Eleva {
 
   /**
    * Processes DOM elements for event binding based on attributes starting with "@".
+   * Tracks listeners for cleanup during unmount.
    *
    * @param {HTMLElement} container - The container element in which to search for events.
    * @param {Object<string, any>} context - The current context containing event handler definitions.
+   * @param {Array<Function>} cleanupListeners - Array to collect cleanup functions for each event listener.
    * @private
    */
-  _processEvents(container, context) {
+  _processEvents(container, context, cleanupListeners) {
     container.querySelectorAll("*").forEach(el => {
       [...el.attributes].forEach(({
         name,
@@ -487,6 +573,7 @@ class Eleva {
           if (typeof handler === "function") {
             el.addEventListener(event, handler);
             el.removeAttribute(name);
+            cleanupListeners.push(() => el.removeEventListener(event, handler));
           }
         }
       });
@@ -533,7 +620,7 @@ class Eleva {
           value
         }) => {
           if (name.startsWith("eleva-prop-")) {
-            props[name.slice("eleva-prop-".length)] = value;
+            props[name.replace("eleva-prop-", "")] = value;
           }
         });
         const instance = this.mount(childEl, children[childSelector], props);