rasti 4.0.0 → 4.0.1

package/README.md

@@ -1,7 +1,7 @@
 <p align="center">
     <picture>
-        <source media="(prefers-color-scheme: dark)" srcset="https://cdn.jsdelivr.net/gh/8tentaculos/rasti@v4.0.0/docs/logo-dark.svg">
-        <img alt="Rasti.js" src="https://cdn.jsdelivr.net/gh/8tentaculos/rasti@v4.0.0/docs/logo.svg" height="120">
+        <source media="(prefers-color-scheme: dark)" srcset="https://cdn.jsdelivr.net/gh/8tentaculos/rasti@v4.0.1/docs/logo-dark.svg">
+        <img alt="Rasti.js" src="https://cdn.jsdelivr.net/gh/8tentaculos/rasti@v4.0.1/docs/logo.svg" height="120">
     </picture>
 </p>
 
@@ -58,8 +58,8 @@ import { Model, Component } from 'https://esm.run/rasti';
 
 Include **Rasti** directly in your HTML using a CDN. Available UMD builds:
 
-- [https://cdn.jsdelivr.net/npm/rasti/dist/rasti.js](https://cdn.jsdelivr.net/npm/rasti/dist/rasti.js)
-- [https://cdn.jsdelivr.net/npm/rasti/dist/rasti.min.js](https://cdn.jsdelivr.net/npm/rasti/dist/rasti.min.js)
+- [rasti.js](https://cdn.jsdelivr.net/npm/rasti/dist/rasti.js)
+- [rasti.min.js](https://cdn.jsdelivr.net/npm/rasti/dist/rasti.min.js)
 
 ```html
 <script src="https://cdn.jsdelivr.net/npm/rasti"></script>
@@ -123,7 +123,7 @@ const Navigation = Component.create`
 // Create a Main component that includes the Navigation and displays the current route's label as the title.
 const Main = Component.create`
     <main>
-        <${Navigation} routes=${({ props }) => props.routes} />
+        <${Navigation} routes="${({ props }) => props.routes}" />
         <section>
             <h1>
                 ${({ model, props }) => props.routes.find(
@@ -179,7 +179,7 @@ Counter.mount({ model }, document.body);
 - **Lightweight and Efficient**  
   Minimal footprint with optimized performance, ensuring smooth updates.  
 - **Just the Right Abstraction**  
-  Keeps you close to the DOM with no over-engineering. Fully hackable—if you're curious about how something works, just check the source code.  
+  Keeps you close to the DOM with no over-engineering. Fully hackable, if you're curious about how something works, just check the source code.  
 
 ## Example
 

package/dist/rasti.js

@@ -1031,12 +1031,17 @@
             if (this.delegatedEventListeners.length) this.undelegateEvents();
 
             // Store events by type i.e.: "click", "submit", etc.
-            let eventTypes = {};
+            const eventTypes = {};
 
             Object.keys(events).forEach(key => {
-                const keyParts = key.split(' ');
-                const type = keyParts.shift();
-                const selector = keyParts.join(' ');
+                const match = key.match(/^(\w+)(?:\s+(.+))*$/);
+
+                if (!match) {
+                    const message = `Invalid event format: ${key}`;
+                    throw new Error(createDevelopmentErrorMessage(message) );
+                }
+                // Extract type and selector from the event key.
+                const [,type, selector] = match;
 
                 let listener = events[key];
                 // Listener may be a string representing a method name on the view, or a function.
@@ -1046,32 +1051,30 @@
 
                 if (!eventTypes[type]) eventTypes[type] = [];
 
-                eventTypes[type].push({ selector, listener });
+                eventTypes[type].push([selector, listener]);
             });
 
             Object.keys(eventTypes).forEach(type => {
                 // Listener for the type of event.
                 const typeListener = (event) => {
-                    // Iterate and run every individual listener if the selector matches.
-                    eventTypes[type].forEach(({ selector, listener }) => {
-                        // No selector provided: invoke listener once with root element.
-                        if (!selector) {
-                            listener.call(this, event, this, this.el);
-                            return;
-                        }
-
-                        let node = event.target;
-                        // Traverse ancestors until reaching the view root (`this.el`).
-                        while (node && node !== this.el) {
-                            if (node.matches && node.matches(selector)) {
-                                listener.call(this, event, this, node);
-                            }
-                            node = node.parentElement;
+                    let node = event.target;
+                    // Traverse ancestors until reaching the view root (`this.el`).
+                    while (node) {
+                        if (node.matches) {
+                            // Iterate and run every individual listener if the selector matches.
+                            eventTypes[type].forEach(([selector, listener]) => {
+                                if ((node === this.el && !selector) || (node !== this.el && node.matches(selector))) {
+                                    listener.call(this, event, this, node);
+                                }
+                            });
                         }
-                    });
+                        // Continue traversing ancestors until reaching the view root (`this.el`) or stopping propagation.
+                        node = node === this.el || event.cancelBubble ? null : node.parentElement;
+                    }
                 };
-
-                this.delegatedEventListeners.push({ type, listener : typeListener });
+                // Store the type and listener in the delegated event listeners array.
+                this.delegatedEventListeners.push([type, typeListener]);
+                // Add the event listener to the element.
                 this.el.addEventListener(type, typeListener);
             });
             // Return `this` for chaining.
@@ -1085,7 +1088,7 @@
          * @return {View} Return `this` for chaining.
          */
         undelegateEvents() {
-            this.delegatedEventListeners.forEach(({ type, listener }) => {
+            this.delegatedEventListeners.forEach(([type, listener]) => {
                 this.el.removeEventListener(type, listener);
             });
 
@@ -1944,15 +1947,12 @@
     const isComponent = (el) => !!(el && el.dataset && el.dataset[Component.DATASET_ELEMENT] && el.dataset[Component.DATASET_ELEMENT].endsWith('-1'));
 
     /**
-     * Check if an element contains a component.
-     * It checks if the element is a component root element or if it contains a component.
+     * Check if an element contains (or is) a dynamic element.
      * @param {Element} el The element to check.
-     * @return {boolean} True if the element contains a component.
+     * @return {boolean} True if the element contains (or is) a dynamic element.
      * @private
      */
-    const containsElement = (el) => !!(
-        el && ((el.dataset && el.dataset[Component.DATASET_ELEMENT]) || (el.querySelector && el.querySelector(`[${Component.ATTRIBUTE_ELEMENT}]`)))
-    );
+    const containsElement = (el) => !!(el && ((el.dataset && el.dataset[Component.DATASET_ELEMENT]) || (el.querySelector && el.querySelector(`[${Component.ATTRIBUTE_ELEMENT}]`))));
 
     /**
      * Generate string with placeholders for interpolated expressions.
@@ -2525,12 +2525,12 @@
                         element.hydrate(this.el);
                     }
                 });
-                // Delegate events.
-                this.delegateEvents();
                 // Get references for interpolation marker comments
                 this.template.interpolations.forEach(interpolation => interpolation.hydrate(this.el));
                 this.children.forEach(child => child.hydrate(this.el));
             }
+            // Delegate events.
+            this.delegateEvents();
             // Call `onHydrate` lifecycle method.
             this.onHydrate.call(this);
             // Return `this` for chaining.
@@ -2693,7 +2693,7 @@
 
         /**
          * Render the component as a string.
-         * Used internally on the render process.
+         * Used internally on the render process.  
          * Use it for server-side rendering or static site generation.
          * @return {string} The rendered component.
          * @example
@@ -2710,10 +2710,10 @@
          * const app = new App();
          * 
          * console.log(app.toString());
-         * // <div data-rasti-el="r1-1"><!--rasti-s-r1-1--><button class="button" data-rasti-el="r2-1">Click me</button><!--rasti-e-r1-1--></div>
+         * // <div data-rst-el="r1-1"><!--rst-s-r1-1--><button class="button" data-rst-el="r2-1">Click me</button><!--rst-e-r1-1--></div>
          * 
          * console.log(`${app}`);
-         * // <div data-rasti-el="r1-1"><!--rasti-s-r1-1--><button class="button" data-rasti-el="r2-1">Click me</button><!--rasti-e-r1-1--></div>
+         * // <div data-rst-el="r1-1"><!--rst-s-r1-1--><button class="button" data-rst-el="r2-1">Click me</button><!--rst-e-r1-1--></div>
          */
         toString() {
             // Normally there won't be any children, but if there are, destroy them.
@@ -2875,10 +2875,10 @@
             } else {
                 // Update elements attributes.
                 this.template.elements.forEach(element => element.update());
-                // If there are pending event types, delegate events again.
-                if (this.eventsManager.hasPendingTypes()) {
-                    this.delegateEvents();
-                }
+            }
+            // If there are pending event types, delegate events again.
+            if (this.eventsManager.hasPendingTypes()) {
+                this.delegateEvents();
             }
             // Call onUpdate lifecycle method.
             this.onUpdate.call(this);
@@ -3283,9 +3283,9 @@
      * // Increment `model.seconds` every second.
      * setInterval(() => model.seconds++, 1000);
      */
-    var Component$1 = Component.create`<div></div>`;
+    var Component_default = Component.create`<div></div>`;
 
-    exports.Component = Component$1;
+    exports.Component = Component_default;
     exports.Emitter = Emitter;
     exports.Model = Model;
     exports.View = View;