@yhwh-script/event-bux 1.0.2 → 1.0.4

package/README.md

@@ -1,6 +1,6 @@
 ## Getting started
 
-To install EventBux module into your project, simply run
+To install the eventbus into your project, simply run
 
 ```bash
 npm install @yhwh-script/event-bux
@@ -17,21 +17,25 @@ classDiagram
     EventBus: -WeakMap listeners
 ```
 
-## Recommendation
+## How-To
 
-After importing this module in your code, it is recommended to add it to the window object, like in `@yhwh-script/components`
+For instance: 
 
 ```javascript
-  Promise.all([
-    import('@yhwh-script/event-bux')
-  ]).then((importedModules) => {
-    importedModules.forEach((module) => {
-      if (!module.name) {
-        throw new Error('Missing name in imported module.');
-      }
-      window[module.name] = module;
-    });
-  }).finally(() => {
-    import('./components')
-  });
-```
+<script type="module">
+  import * as bus from '@yhwh-script/event-bux';
+  window.bus = bus;
+</script>
+```
+
+After importing `@yhwh-script/event-bux`, it is recommended to add it to the `window` object.
+
+You can use your own import or stick to other `@yhwh-script` examples
+
+Then use `bus.addEventListener(type, listener)` and `bus.dispatchEvent(type, event)` in your WebComponents. You are not bound to event bubbling or capturing (which are the standard event propagation mechanisms), but you can send events even between WebComponents! Check it out!
+
+![EventBus schema](eventbus.png)
+
+## Contribute
+
+Welcome!

package/index.js

@@ -1,52 +1,47 @@
-export const name = 'bus'; // implements EventTarget
-
+export const name = "eventbux"; // The module name, can be made globally available via the window object, which should be on top.
 const listeners = new WeakMap(); // WeakMap to store listeners per object. Keep it private unless you know what you do.
-// Should auto-cleanup listeners when object is GC'd
-export const addEventListener = function (eventName, handler, context = undefined) {
+// Should auto-cleanup listeners when object is GC'd (TODO Test!)
+// This module implements EventTarget.
+export const addEventListener = function (type, listener, context = undefined) { // (TODO check integration into options)
     if (context && typeof context === 'object') { // context is well defined, should be a WebComponent
         if (!listeners.has(context)) { // context is yet unknown to the listeners
             listeners.set(context, new Map()); // will be stored here
         }
         const contextListeners = listeners.get(context);
-        if (!contextListeners.has(eventName)) { // eventName is not yet registered
-            contextListeners.set(eventName, []);
+        if (!contextListeners.has(type)) { // eventName is not yet registered
+            contextListeners.set(type, []);
         } // next push the handler to the WeakMap for the given context
-        contextListeners.get(eventName).push(handler);
+        contextListeners.get(eventName).push(listener);
     } else { // default
-        if (context) {
-            throw new Error("Syntax error.") // illegal context
+        if (context) { // illegal context
+            throw new Error("Syntax error.")
         }
-        window.addEventListener(eventName, handler);
+        window.addEventListener(type, listener);
     }
 }
 
-export const removeEventListener = function (eventName, handler, context = undefined) {
+export const removeEventListener = function (type, listener, context = undefined) {
     if (context && typeof context === 'object') {
         const contextListeners = listeners.get(context);
-        if (contextListeners && contextListeners.has(eventName)) {
-            const handlers = contextListeners.get(eventName);
-            const index = handlers.indexOf(handler);
+        if (contextListeners && contextListeners.has(type)) {
+            const handlers = contextListeners.get(type);
+            const index = handlers.indexOf(listener);
             if (index > -1) {
                 handlers.splice(index, 1);
             }
         }
     } else { // default
-        window.removeEventListener(eventName);
+        window.removeEventListener(type);
     }
 }
 
-export const dispatchEvent = function (customEvent, context = undefined) {
-    let eventName = customEvent.type;
-    let detail = customEvent.detail;
-    const event = { type: eventName, detail, target: context };
-
-    // Call context-specific listeners
+export const dispatchEvent = function (event, context = undefined) { // TODO check if context == event.target, if yes, remove context? What if CustomEvent is used?
     if (context && listeners.has(context)) {
         const contextListeners = listeners.get(context);
-        if (contextListeners.has(eventName)) {
-            contextListeners.get(eventName).forEach(handler => handler(event));
+        if (contextListeners.has(event.type)) { // Call context-specific listeners
+            contextListeners.get(event.type).forEach(handler => handler(event));
         }
-    } else {
-        window.dispatchEvent(customEvent);
+    } else { // default
+        window.dispatchEvent(event);
     }
 }

package/package.json

@@ -22,5 +22,5 @@
         "url": "git+https://github.com/yhwh-script/event-bux.git"
     },
     "type": "module",
-    "version": "1.0.2"
+    "version": "1.0.4"
 }