turbo-web 4.3.0 → 4.5.0

package/README.md

@@ -84,7 +84,10 @@ JavaScript object tree that represents the UI.
 ### [CORE] Feature 4: Components
 **Encapsulation & Reusability** principles: making UI building blocks with better combined hierarchical tree structure.
 
+// Events accept additional modificator ```.stop .prevent``` to stop event bubbling and prevent default browser behaviour.
+
 ```component.js // building scheme: h(tagOrComponent, { attributes, class, style, on: events }, [children])```
+
 ### Feature 5: Client-Side Router (#hash-based)
 Allows for the **SPA design** (Single Page Application) with route guards (fn: checkNavigation) and a common "catch-all route" (cases: route not found). Based on a hash part of the URL, implemented with regex pattern matching by simulating URL path, parameters and query as part of the hash fragment itself.
 
@@ -190,4 +193,10 @@ onMounted() {
 onUnmounted() {
     if (this.unsubscribe) this.unsubscribe();
 },
+```
+### [6] Event bubbling & default browser behaviour override
+It is possible to prevent both by passing additional modificators with functions.
+```
+on: { 'click.stop': () => this.addLog('Button with .stop Clicked') }
+on: { 'click.prevent': () => this.addLog('Link with .prevent Clicked') }
 ```

package/dist/turbo.js

@@ -194,25 +194,42 @@ function hSlot(name = 'default', children = []) {
     return { type: DOM_TYPES.SLOT, name: name, children: children }
 }
 
-function addEventListener(eventName, handler, el, hostComponent = null) {
-    function boundHandler() {
+function addEventListener(eventNameWithModifiers, handlerConfig, el, hostComponent = null) {
+    const [eventName, ...modifiers] = eventNameWithModifiers.split('.');
+    const isDelegated = typeof handlerConfig === 'object' && handlerConfig.delegate;
+    const handler = isDelegated ? handlerConfig.handler : handlerConfig;
+    const selector = isDelegated ? handlerConfig.delegate : null;
+    function boundHandler(event) {
+        let target = event.target;
+        if (isDelegated) {
+            target = event.target.closest(selector);
+            if (!target || !el.contains(target)) return;
+        }
+        if (modifiers.includes('stop')) {
+            event.stopPropagation();
+        }
+        if (modifiers.includes('prevent')) {
+            event.preventDefault();
+        }
+        const args = isDelegated ? [event, target] : [event];
         hostComponent
-            ? handler.apply(hostComponent, arguments)
-            : handler(...arguments);
+            ? handler.apply(hostComponent, args)
+            : handler(...args);
     }
     el.addEventListener(eventName, boundHandler);
     return boundHandler
 }
 function addEventListeners(listeners = {}, el, hostComponent = null ) {
     const addedListeners = {};
-    Object.entries(listeners).forEach(([eventName, handler]) => {
-        const listener = addEventListener(eventName, handler, el, hostComponent);
+    Object.entries(listeners).forEach(([eventName, handlerConfig]) => {
+        const listener = addEventListener(eventName, handlerConfig, el, hostComponent);
         addedListeners[eventName] = listener;
     });
     return addedListeners
 }
 function removeEventListeners(listeners = {}, el) {
-    Object.entries(listeners).forEach(([eventName, handler]) => {
+    Object.entries(listeners).forEach(([eventNameWithModifiers, handler]) => {
+        const eventName = eventNameWithModifiers.split('.')[0];
         el.removeEventListener(eventName, handler);
     });
 }
@@ -893,14 +910,15 @@ function patchStyles(el, oldStyle = {}, newStyle = {}) {
 }
 function patchEvents(el, oldListeners = {}, oldEvents = {}, newEvents = {}, hostComponent) {
     const { removed, added, updated } = objectsDiff(oldEvents, newEvents);
-    for (const eventName of removed.concat(updated)) {
-        el.removeEventListener(eventName, oldListeners[eventName]);
-    }
-    const addedListeners = {};
-    for (const eventName of added.concat(updated)) {
-        const listener =
-            addEventListener(eventName, newEvents[eventName], el, hostComponent);
-        addedListeners[eventName] = listener;
+    for (const eventNameWithModifiers of removed.concat(updated)) {
+        const eventName = eventNameWithModifiers.split('.')[0];
+        el.removeEventListener(eventName, oldListeners[eventNameWithModifiers]);
+    }
+    const addedListeners = { ...oldListeners };
+    removed.forEach(key => delete addedListeners[key]);
+    for (const eventNameWithModifiers of added.concat(updated)) {
+        const listener = addEventListener(eventNameWithModifiers, newEvents[eventNameWithModifiers], el, hostComponent);
+        addedListeners[eventNameWithModifiers] = listener;
     }
     return addedListeners
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "turbo-web",
-  "version": "4.3.0",
+  "version": "4.5.0",
   "main": "dist/turbo.js",
   "files": [
     "dist",