Merge pull request #21 from puzzle-js/asset-defer-loader

asset defer loader added

Author: cihadhoruzoglu

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@puzzle-js/client-lib",
   "main": "dist/index.js",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "author": "<[email protected]>",
   "license": "MIT",
   "repository": {

src/assetHelper.ts

@@ -1,45 +1,60 @@
 import {IPageLibAsset} from "./types";
 
 export class AssetHelper {
-  static loadJs(asset: IPageLibAsset): Promise<any> | null {
-    let loader: Promise<any> | null = null;
-    const scriptTag: any = window.document.createElement('script');
-    if (!window.document.querySelector(`[puzzle-asset="${asset.name}"]`)) {
-      scriptTag.type = 'text/javascript';
-      scriptTag.setAttribute('puzzle-asset', asset.name);
-      scriptTag.src = asset.link;
-      scriptTag.defer = asset.defer || false;
-      scriptTag.crossOrigin = "anonymous";
-
-      if (!asset.defer) {
-        loader = new Promise((resolve) => {
-          scriptTag.onload = () => {
-            resolve();
-          };
+    static promises: Record<string, {
+        resolve: () => void,
+        reject: () => void,
+        promise: Promise<any>
+    }> = {};
+
+    static createDeferred() {
+        let resolve, reject: any;
+        const promise = new Promise((r, rej) => {
+            resolve = r;
+            reject = rej;
         });
-      }
 
-      window.document.body.appendChild(scriptTag);
-    } else {
-      return null;
+        return {
+            promise,
+            resolve: resolve as any,
+            reject: reject as any
+        };
+    }
+
+    static loadJs(asset: IPageLibAsset): Promise<any> {
+        const scriptTag: any = window.document.createElement('script');
+
+        if (!this.promises[asset.name]) {
+            this.promises[asset.name] = this.createDeferred();
+            scriptTag.type = 'text/javascript';
+            scriptTag.setAttribute('puzzle-asset', asset.name);
+            scriptTag.src = asset.link;
+            scriptTag.defer = asset.defer || false;
+            scriptTag.crossOrigin = "anonymous";
+
+            if (!asset.defer) {
+                scriptTag.onload = () => {
+                    this.promises[asset.name].resolve();
+                };
+            } else {
+                this.promises[asset.name].resolve();
+            }
+
+            window.document.body.appendChild(scriptTag);
+        }
+
+        return this.promises[asset.name].promise;
     }
 
-    return loader;
-  }
-
-  static loadJsSeries(scripts: IPageLibAsset[]) {
-    for (let i = 0, p: any = Promise.resolve(); i < scripts.length; i++) {
-      p = p.then(() => new Promise(resolve => {
-          const assetLoading = AssetHelper.loadJs(scripts[i]);
-          if (!assetLoading) {
-            resolve();
-          } else {
-            assetLoading.then(() => {
-              resolve();
-            });
-          }
+    static loadJsSeries(scripts: IPageLibAsset[]) {
+        for (let i = 0, p: any = Promise.resolve(); i < scripts.length; i++) {
+            p = p.then(() => new Promise(resolve => {
+                    const assetLoading = AssetHelper.loadJs(scripts[i]);
+                    assetLoading.then(() => {
+                        resolve();
+                    });
+                }
+            ));
         }
-      ));
     }
-  }
 }

test/assetHelper.spec.ts

@@ -48,7 +48,6 @@ describe('Module - Asset Helper', () => {
         const result = AssetHelper.loadJs(asset);
 
         // assert
-        expect(result).to.eq(null);
         expect(global.window.document.body.children.length).to.eq(1);
     });