Implement lazy loading of external libraries

CHANGES.md

@@ -18,10 +18,12 @@
 -   pat tooltip: Remove undocumented "souce: auto" parameter. This parameter should not be used as it is not explicit enough and would lead to unintuitive behavior.
 -   Remove outdated pre IE9 browser compatibility polyfill `core/compat`.
 -   Remove unused `lib/htmlparser`.
+-   Remove obsolete library `prefixfree`.
 
 
 ### Features
 
+-   Implenent lazy loading for external libraries via dynamic imports. Leads to significantly reduced bundle sizes.
 -   Upgrade pat-calendar to use lates fullcalendar version (5.3.0).
 -   pat tooltip: Use tippy v6 based implementation.
 

index.html

@@ -4,11 +4,6 @@
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>Patterns demo pages</title>
         <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/dist/bundle-vendors.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
         <script
             src="/dist/bundle.js"
             type="text/javascript"

package.json

@@ -27,7 +27,6 @@
     "moment-timezone": "^0.5.31",
     "photoswipe": "^4.1.3",
     "pikaday": "^1.8.0",
-    "prefixfree": "^1.0.0",
     "promise-polyfill": "^8.1.0",
     "screenfull": "^5.0.0",
     "select2": "^3.5.1",

src/core/push_kit.js

@@ -28,23 +28,27 @@
  * - patterns-push-login containing the name of a read only user on the message queue server used to connect.
  * - patterns-push-password containing the password of a read only user on the message queue server used to connect.
  */
-
+import "regenerator-runtime/runtime"; // needed for ``await`` support
 import $ from "jquery";
-import { Client } from "@stomp/stompjs";
+
+// Lazy loading modules.
+let StompJS;
 
 const push_kit = {
-    init() {
+    async init() {
         const push_url = $("meta[name=patterns-push-server-url]").attr("content"); // prettier-ignore
         const push_exchange = $("meta[name=patterns-push-exchange-base-name]").attr("content"); // prettier-ignore
-        const push_user_id = $("meta[name=patterns-push-user-id]").attr("content"); // prettier-ignore
-        const push_login = $("meta[name=patterns-push-login]").attr("content"); // prettier-ignore
-        const push_pass = $("meta[name=patterns-push-password]").attr("content"); // prettier-ignore
 
         if (!push_url || !push_exchange) {
             return;
         }
 
-        const client = new Client({
+        const push_user_id = $("meta[name=patterns-push-user-id]").attr("content"); // prettier-ignore
+        const push_login = $("meta[name=patterns-push-login]").attr("content"); // prettier-ignore
+        const push_pass = $("meta[name=patterns-push-password]").attr("content"); // prettier-ignore
+
+        StompJS = await import("@stomp/stompjs");
+        const client = new StompJS.Client({
             brokerURL: push_url,
             connectHeaders: {
                 login: push_login,

src/pat/auto-scale/example-2.html

@@ -4,11 +4,6 @@
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>Demo page</title>
         <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/dist/bundle-vendors.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
         <script
             src="/dist/bundle.js"
             type="text/javascript"

src/pat/auto-scale/index.html

@@ -4,11 +4,6 @@
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>Auto scale</title>
         <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/dist/bundle-vendors.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
         <script
             src="/dist/bundle.js"
             type="text/javascript"

src/pat/auto-submit/index.html

@@ -4,11 +4,6 @@
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>Auto submit</title>
         <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/dist/bundle-vendors.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
         <script
             src="/dist/bundle.js"
             type="text/javascript"

src/pat/auto-submit/test.html

@@ -4,11 +4,6 @@
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>Auto submit</title>
         <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/dist/bundle-vendors.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
         <script
             src="/dist/bundle.js"
             type="text/javascript"

src/pat/auto-suggest/auto-suggest.js

@@ -5,11 +5,11 @@
  * Copyright 2012 JC Brand
  * Copyright 2013 Marko Durkovic
  */
+import "regenerator-runtime/runtime"; // needed for ``await`` support
 import $ from "jquery";
 import logging from "../../core/logging";
 import Parser from "../../core/parser";
 import registry from "../../core/registry";
-import "select2";
 
 var log = logging.getLogger("autosuggest");
 var parser = new Parser("autosuggest");
@@ -44,7 +44,9 @@ parser.addAlias("pre-fill", "prefill");
 var _ = {
     name: "autosuggest",
     trigger: ".pat-autosuggest,.pat-auto-suggest",
-    init: function ($el, opts) {
+    async init($el, opts) {
+        await import("select2");
+
         if ($el.length > 1) {
             return $el.each(function () {
                 _.init($(this), opts);

src/pat/auto-suggest/auto-suggest.test.js

@@ -1,7 +1,8 @@
-import pattern from "./auto-suggest";
 import $ from "jquery";
+import pattern from "./auto-suggest";
+import utils from "../../core/utils";
 
-var utils = {
+var testutils = {
     createInputElement: function (c) {
         var cfg = c || {};
         return $("<input/>", {
@@ -34,138 +35,109 @@ var utils = {
 };
 
 describe("pat-autosuggest", function () {
-    describe("An ordinary <input> element", function () {
-        beforeEach(function () {
-            $("div#lab").remove(); // Looks likes some specs don't clean up after themselves.
-            $("<div/>", { id: "lab" }).appendTo(document.body);
-        });
+    beforeEach(function () {
+        $("div#lab").remove(); // Looks likes some specs don't clean up after themselves.
+        $("<div/>", { id: "lab" }).appendTo(document.body);
+    });
 
-        afterEach(function () {
-            $("#lab").remove();
-        });
+    afterEach(function () {
+        $("#lab").remove();
+        jest.restoreAllMocks();
+    });
 
-        it("gets converted into a select2 widget", function () {
-            utils.createInputElement();
+    describe("An ordinary <input> element", function () {
+        it("gets converted into a select2 widget", async function () {
+            testutils.createInputElement();
             var $el = $("input.pat-autosuggest");
 
             expect($(".select2-container").length).toBe(0);
             expect($el.hasClass("select2-offscreen")).toBeFalsy();
             pattern.init($el);
+            await utils.timeout(1); // wait a tick for async to settle.
             expect($el.hasClass("select2-offscreen")).toBeTruthy();
             expect($(".select2-container").length).toBe(1);
-            utils.removeSelect2();
+            testutils.removeSelect2();
         });
     });
 
     describe("An <input> element with an ajax option", function () {
-        beforeEach(function () {
-            $("div#lab").remove(); // Looks likes some specs don't clean up after themselves.
-            $("<div/>", { id: "lab" }).appendTo(document.body);
-        });
-
-        afterEach(function () {
-            $("#lab").remove();
-        });
-
-        it("keeps the ajax option when turning into a select2 widget", function () {
-            utils.createInputElement({
+        it("keeps the ajax option when turning into a select2 widget", async function () {
+            testutils.createInputElement({
                 data: "ajax-url: http://test.org/test",
             });
             var $el = $("input.pat-autosuggest");
             spyOn($el, "select2");
 
             pattern.init($el);
+            await utils.timeout(1); // wait a tick for async to settle.
             expect($el.select2.calls.mostRecent().args[0].ajax).toBeDefined();
-            utils.removeSelect2();
+            testutils.removeSelect2();
         });
     });
 
     describe("A <select> element", function () {
-        beforeEach(function () {
-            $("div#lab").remove(); // Looks likes some specs don't clean up after themselves.
-            $("<div/>", { id: "lab" }).appendTo(document.body);
-        });
-
-        afterEach(function () {
-            $("#lab").remove();
-        });
-
-        it("gets converted into a select2 widget", function () {
-            utils.createSelectElement();
+        it("gets converted into a select2 widget", async function () {
+            testutils.createSelectElement();
             var $el = $("select.pat-autosuggest");
             expect($(".select2-container").length).toBe(0);
             expect($el.hasClass("select2-offscreen")).toBeFalsy();
             pattern.init($el);
+            await utils.timeout(1); // wait a tick for async to settle.
             expect($el.hasClass("select2-offscreen")).toBeTruthy();
             expect($(".select2-container").length).toBe(1);
-            utils.removeSelect2();
+            testutils.removeSelect2();
         });
     });
 
     describe("Selected items", function () {
-        beforeEach(function () {
-            $("div#lab").remove(); // Looks likes some specs don't clean up after themselves.
-            $("<div/>", { id: "lab" }).appendTo(document.body);
-        });
-
-        afterEach(function () {
-            $("#lab").remove();
-        });
-
-        it("can be given custom CSS classes", function () {
-            utils.createInputElement({
+        it("can be given custom CSS classes", async function () {
+            testutils.createInputElement({
                 data:
                     'words: apple,orange,pear; pre-fill: orange; selection-classes: {"orange": ["fruit", "orange"]}',
             });
             var $el = $("input.pat-autosuggest");
             expect($(".select2-search-choice").length).toBe(0);
             pattern.init($el);
+            await utils.timeout(1); // wait a tick for async to settle.
             expect($(".select2-search-choice").length).toBe(1);
             expect($(".select2-search-choice").hasClass("fruit")).toBeTruthy();
             expect($(".select2-search-choice").hasClass("orange")).toBeTruthy();
-            utils.removeSelect2();
+            testutils.removeSelect2();
         });
 
-        it("can be restricted to a certain amount", function () {
+        it("can be restricted to a certain amount", async function () {
             // First check without limit
-            utils.createInputElement({
+            testutils.createInputElement({
                 data: "words: apple,orange,pear; pre-fill: orange",
             });
             expect($(".select2-input").length).toBe(0);
             pattern.init($("input.pat-autosuggest"));
+            await utils.timeout(1); // wait a tick for async to settle.
             expect($(".select2-input").length).toBe(1);
             expect($(".select2-selection-limit").length).toBe(0);
             $(".select2-input").val("apple").click();
             expect($(".select2-selection-limit").length).toBe(0);
-            utils.removeSelect2();
+            testutils.removeSelect2();
 
             // Then with limit
-            utils.createInputElement({
+            testutils.createInputElement({
                 data:
                     "maximum-selection-size: 1; words: apple,orange,pear; pre-fill: orange",
             });
             expect($(".select2-input").length).toBe(0);
             pattern.init($("input.pat-autosuggest"));
+            await utils.timeout(1); // wait a tick for async to settle.
             expect($(".select2-input").length).toBe(1);
             expect($(".select2-selection-limit").length).toBe(0);
             $(".select2-input").val("apple").click();
             // Now we have a select style control. It has a close button
             expect($(".select2-search-choice-close").length).toBe(1);
-            utils.removeSelect2();
+            testutils.removeSelect2();
         });
     });
 
     describe("Placeholder tests", function () {
-        beforeEach(function () {
-            $("div#lab").remove(); // Looks likes some specs don't clean up after themselves.
-            $("<div/>", { id: "lab" }).appendTo(document.body);
-        });
-
-        afterEach(function () {
-            $("#lab").remove();
-        });
-
-        it("A placeholder on the original element is reused on the auto-suggest element", function () {
+        it("A placeholder on the original element is reused on the auto-suggest element", async function () {
             var placeholder = "Test placeholder";
 
             $("<input/>", {
@@ -178,13 +150,14 @@ describe("pat-autosuggest", function () {
 
             expect($el.prop("placeholder")).toBe(placeholder);
             pattern.init($el);
+            await utils.timeout(1); // wait a tick for async to settle.
             // XXX Placeholder is used as value of the input field.
             // Change this as soon Select2 changes this odd behavior.
             expect($(".select2-input").val()).toBe(placeholder);
-            utils.removeSelect2();
+            testutils.removeSelect2();
         });
 
-        it("No placeholder doesn't create an automatic one.", function () {
+        it("No placeholder doesn't create an automatic one.", async function () {
             $("<input/>", {
                 id: "select2",
                 class: "pat-autosuggest",
@@ -194,10 +167,11 @@ describe("pat-autosuggest", function () {
 
             expect($el.prop("placeholder")).toBe("");
             pattern.init($el);
+            await utils.timeout(1); // wait a tick for async to settle.
             // XXX Placeholder is used as value of the input field.
             // Change this as soon Select2 changes this odd behavior.
             expect($(".select2-input").val()).toBe("");
-            utils.removeSelect2();
+            testutils.removeSelect2();
         });
     });
 });

src/pat/auto-suggest/index.html

@@ -4,11 +4,6 @@
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>Demo page</title>
         <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/dist/bundle-vendors.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
         <script
             src="/dist/bundle.js"
             type="text/javascript"

src/pat/autofocus/index.html

@@ -4,11 +4,6 @@
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>Focus demo page</title>
         <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/dist/bundle-vendors.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
         <script
             src="/dist/bundle.js"
             type="text/javascript"

src/pat/bumper/index.html

@@ -4,11 +4,6 @@
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>Demo page</title>
         <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/dist/bundle-vendors.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
         <script
             src="/dist/bundle.js"
             type="text/javascript"