core base constructor: Await for initalization.

Core Base: ``await`` for initalization in the base class constructor, so that the ``init`` event is really thrown after initialization is done.

Author: thet

CHANGES.md

@@ -72,6 +72,7 @@
 
 ### Technical
 
+-   Core Base: ``await`` for initalization in the base class constructor, so that the ``init`` event is really thrown after initialization is done.
 -   pat calendar: Explicitly import JavaScript language files to avoid missing Webpack TypeScript loader errors.
 -   Use Babel for all files, allowing latest JavaScript features everywhere.
 -   Add example `minimalpattern`.

src/core/base.js

@@ -11,7 +11,7 @@
  * Older Patternslib patterns on the other hand have a single global scope for
  * all DOM elements.
  */
-
+import "regenerator-runtime/runtime"; // needed for ``await`` support
 import $ from "jquery";
 import Registry from "./registry";
 import logging from "./logging";
@@ -41,14 +41,14 @@ const initBasePattern = function ($el, options, trigger) {
     return pattern;
 };
 
-const Base = function ($el, options, trigger) {
+const Base = async function ($el, options, trigger) {
     if (!$el.jquery) {
         $el = $($el);
     }
     this.$el = $el;
     this.el = $el[0];
     this.options = $.extend(true, {}, this.defaults || {}, options || {});
-    this.init($el, options, trigger);
+    await this.init($el, options, trigger);
     this.emit("init");
 };
 

src/core/base.test.js

@@ -1,6 +1,7 @@
 import registry from "./registry";
 import $ from "jquery";
 import Base from "./base";
+import utils from "./utils";
 import _ from "underscore";
 
 describe("pat-base: The Base class for patterns", function () {
@@ -157,4 +158,31 @@ describe("pat-base: The Base class for patterns", function () {
             })
         );
     });
+
+    it("triggers the init event after init has finished.", async function (done) {
+        const Tmp = Base.extend({
+            name: "example",
+            trigger: "pat-example",
+            init: async function () {
+                // await to actually give the Base constructor a chance to
+                // throw it's event before we throw it here.
+                await utils.timeout(1);
+                this.el.dispatchEvent(new Event("init_done"));
+            },
+        });
+        const node = document.createElement("div");
+        node.setAttribute("class", "pat-example");
+        const event_list = [];
+        node.addEventListener("init_done", () => event_list.push("pat init"));
+        $(node).on("init.example.patterns", () => event_list.push("base init"));
+        new Tmp(node);
+
+        // await until all asyncs are settled. 1 event loop should be enough.
+        await utils.timeout(1);
+
+        expect(event_list[0]).toBe("pat init");
+        expect(event_list[1]).toBe("base init");
+
+        done();
+    });
 });