Merge pull request #1111 from Patternslib/basepattern-notify-not-instantiated

Basepattern notify not instantiated

Author: thet

src/core/basepattern.js

@@ -6,6 +6,7 @@
  *
  * For usage, see basepattern.md
  */
+import events from "./events";
 import logging from "./logging";
 
 const log = logging.getLogger("basepattern");
@@ -46,6 +47,14 @@ class BasePattern {
             if (typeof this.el[`pattern-${this.name}`] !== "undefined") {
                 // Do not reinstantiate
                 log.debug(`Not reinstatiating the pattern ${this.name}.`, this.el);
+
+                // Notify that not instantiated
+                this.el.dispatchEvent(
+                    new Event(`not-init.${this.name}.patterns`, {
+                        bubbles: true,
+                        cancelable: false,
+                    })
+                );
                 return;
             }
 
@@ -80,9 +89,15 @@ class BasePattern {
      * @param {function} callback - Callback to call when the event is thrown.
      */
     one(event_name, event_callback) {
-        this.el.addEventListener(`${event_name}.${this.name}.patterns`, event_callback, {
-            once: true,
-        });
+        events.add_event_listener(
+            this.el,
+            `${event_name}.${this.name}.patterns`,
+            `basepattern-one--${event_name}.${this.name}.patterns`,
+            event_callback,
+            {
+                once: true,
+            }
+        );
     }
 
     /**

src/core/basepattern.test.js

@@ -185,7 +185,48 @@ describe("Basepattern class tests", function () {
         expect(el["pattern-example"]).toBeInstanceOf(Pat);
     });
 
-    it("6.1 - Registers a one-time event listener on the element.", async function () {
+    it("6.1 - Can register a special namespaced one-time event listener on the element.", async function () {
+        class Pat extends BasePattern {
+            static name = "example";
+            static trigger = ".example";
+        }
+
+        const el = document.createElement("div");
+
+        const pat = new Pat(el);
+
+        let cnt = 0;
+        pat.one("test", () => {
+            cnt++;
+        });
+
+        el.dispatchEvent(new Event("test.example.patterns")); // Note this special event name.
+
+        expect(cnt).toBe(1);
+
+        // The handler is now unregistered.
+        el.dispatchEvent(new Event("test.example.patterns"));
+
+        expect(cnt).toBe(1);
+    });
+
+    it("6.2 - Throws a init event after asynchronous initialization has finished.", async function () {
+        const events = (await import("./events")).default;
+        class Pat extends BasePattern {
+            static name = "example";
+            static trigger = ".example";
+        }
+
+        const el = document.createElement("div");
+
+        const pat = new Pat(el);
+        await events.await_pattern_init(pat);
+
+        // If test reaches this expect statement, the init event catched.
+        expect(true).toBe(true);
+    });
+
+    it("6.3 - Throws a not-init event in case of an double initialization event which is handled by await_pattern_init.", async function () {
         const events = (await import("./events")).default;
         class Pat extends BasePattern {
             static name = "example";
@@ -200,5 +241,55 @@ describe("Basepattern class tests", function () {
 
         // If test reaches this expect statement, the init event catched.
         expect(true).toBe(true);
+
+        // The same pattern cannot be registered twice without destroying the
+        // first one. If the same pattern is initialized twice on the same
+        // element, a event is thrown.
+        const pat2 = new Pat(el);
+        try {
+            await events.await_pattern_init(pat2);
+        } catch (e) {
+            expect(e instanceof Error).toBe(true);
+            expect(e.message).toBe(`Pattern "example" not initialized.`);
+        }
+
+        // We can also use the catch method of the promise to handle that case.
+        const pat3 = new Pat(el);
+        await events.await_pattern_init(pat3).catch((e) => {
+            expect(e instanceof Error).toBe(true);
+            expect(e.message).toBe(`Pattern "example" not initialized.`);
+            return; // We need to return here.
+        });
+
+        // If test reaches this expect statement, the not-init event was catched.
+        expect(true).toBe(true);
+    });
+
+    it("6.4 - Destroying a pattern before re-initializing again also works together with await_pattern_init.", async function () {
+        const events = (await import("./events")).default;
+        class Pat extends BasePattern {
+            static name = "example";
+            static trigger = ".example";
+        }
+
+        const el = document.createElement("div");
+        el.classList.add("example");
+
+        const pat = new Pat(el);
+        await events.await_pattern_init(pat);
+
+        // If test reaches this expect statement, the init event catched.
+        expect(true).toBe(true);
+
+        pat.destroy();
+
+        const pat2 = new Pat(el);
+        await events.await_pattern_init(pat2).catch(() => {
+            // this is not reached.
+            expect(false).toBe(true);
+        });
+
+        // If test reaches this expect statement, the init event catched.
+        expect(true).toBe(true);
     });
 });

src/core/events.js

@@ -3,7 +3,7 @@
 // Event listener registration for easy-to-remove event listeners.
 // once Safari supports the ``signal`` option for addEventListener we can abort
 // event handlers by calling AbortController.abort().
-const event_listener_map = {};
+export const event_listener_map = {};
 
 /**
  * Add an event listener to a DOM element under a unique id.
@@ -22,11 +22,21 @@ const add_event_listener = (el, event_type, id, cb, opts = {}) => {
     }
     remove_event_listener(el, id); // do not register one listener twice.
 
+    // Create event_listener_map entry if not existent.
     if (!event_listener_map[el]) {
         event_listener_map[el] = {};
     }
-    event_listener_map[el][id] = [event_type, cb, opts.capture ? opts : undefined]; // prettier-ignore
-    el.addEventListener(event_type, cb, opts);
+    let _cb = cb;
+    if (opts?.once === true) {
+        // For `once` events, also remove the entry from the event_listener_map.
+        _cb = (e) => {
+            delete event_listener_map[el][id];
+            cb(e);
+        };
+    }
+    // Only `capture` option is necessary for `removeEventListener`.
+    event_listener_map[el][id] = [event_type, _cb, opts.capture ? opts : undefined];
+    el.addEventListener(event_type, _cb, opts);
 };
 
 /**
@@ -90,7 +100,29 @@ const await_event = (el, event_name) => {
  */
 const await_pattern_init = (pattern) => {
     // See: https://stackoverflow.com/a/44746691/1337474
-    return new Promise((resolve) => pattern.one("init", resolve));
+    return new Promise((resolve, reject) => {
+        // Case initialized
+        pattern.one("init", () => {
+            // Resolve promise and unregister the not-init event handler.
+            remove_event_listener(
+                pattern.el,
+                `basepattern-one--not-init.${pattern.name}.patterns`
+            );
+            resolve();
+        });
+
+        // Case not initialized
+        pattern.one("not-init", () => {
+            // Reject promise and unregister the init event handler.
+            remove_event_listener(
+                pattern.el,
+                `basepattern-one--init.${pattern.name}.patterns`
+            );
+            reject();
+        });
+    }).catch(() => {
+        throw new Error(`Pattern "${pattern.name}" not initialized.`);
+    });
 };
 
 /**

src/core/events.test.js

@@ -50,7 +50,22 @@ describe("core.events tests", () => {
             done();
         });
 
-        it("Awaits an event to happen", async () => {
+        it("Supports once-events and unregisters them from the event_listener_map", async () => {
+            const event_listener_map = (await import("./events")).event_listener_map;
+            const el = document.createElement("div");
+
+            // register the once-event handler
+            events.add_event_listener(el, "test", "test_once_event", () => {}, {
+                once: true,
+            });
+
+            expect(event_listener_map[el].test_once_event).toBeDefined();
+            el.dispatchEvent(new Event("test"));
+
+            expect(event_listener_map[el].test_once_event).not.toBeDefined();
+        });
+
+        it("Awaits an event to happen.", async () => {
             const el = document.createElement("div");
 
             window.setTimeout(() => {
@@ -63,7 +78,7 @@ describe("core.events tests", () => {
             expect(true).toBe(true);
         });
 
-        it("Awaits a pattern to be initialized", async () => {
+        it("Awaits a pattern to be initialized.", async () => {
             const pat = Base.extend({
                 name: "tmp",
                 trigger: ".pat-tmp",
@@ -79,7 +94,47 @@ describe("core.events tests", () => {
             expect(true).toBe(true);
         });
 
-        it("Awaits a class based pattern to be initialized", async () => {
+        it("Awaits a class based pattern to be initialized.", async () => {
+            class Pat extends BasePattern {
+                static name = "tmp";
+                static trigger = ".pat-tmp";
+                init() {}
+            }
+
+            const el = document.createElement("div");
+            const instance = new Pat(el);
+
+            await events.await_pattern_init(instance);
+
+            // If test reaches this expect statement, all is fine.
+            expect(true).toBe(true);
+
+            // The same pattern cannot be registered twice without destroying
+            // the first one. If the same pattern is initialized twice on the
+            // same element, a event is thrown.
+            const pat2 = new Pat(el);
+            try {
+                await events.await_pattern_init(pat2);
+            } catch (e) {
+                expect(e instanceof Error).toBe(true);
+                expect(e.message).toBe(`Pattern "tmp" not initialized.`);
+            }
+
+            // We can also use the catch method of the promise to handle that
+            // case.
+            const pat3 = new Pat(el);
+            await events.await_pattern_init(pat3).catch((e) => {
+                expect(e instanceof Error).toBe(true);
+                expect(e.message).toBe(`Pattern "tmp" not initialized.`);
+                return; // We need to return here.
+            });
+
+            // If test reaches this expect statement, the not-init event was
+            // catched.
+            expect(true).toBe(true);
+        });
+
+        it("Handles double-registration attempts by rejecting the await_pattern_init promise.", async () => {
             class Pat extends BasePattern {
                 static name = "tmp";
                 static trigger = ".pat-tmp";