Merge pull request #5 from puzzle-js/feature/conditional-asset-fetch

Feature/conditional asset fetch

Author: Acanguven

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@puzzle-js/client-lib",
   "main": "dist/index.js",
-  "version": "1.1.6",
+  "version": "1.1.7",
   "author": "<emre.kul@trendyol.com>",
   "license": "MIT",
   "repository": {

src/core.ts

@@ -2,7 +2,7 @@ import {Module} from "./module";
 import {EVENT, RESOURCE_LOADING_TYPE} from "./enums";
 import {IPageFragmentConfig, IPageLibAsset, IPageLibConfiguration} from "./types";
 import {on} from "./decorators";
-import {AssetHelper} from "./assetHelper";
+import { AssetHelper } from "./assetHelper";
 
 export class Core extends Module {
   private static observer: IntersectionObserver | undefined;
@@ -55,7 +55,13 @@ export class Core extends Module {
 
   @on(EVENT.ON_PAGE_LOAD)
   static pageLoaded() {
-    const onFragmentRenderAssets = Core.__pageConfiguration.assets.filter(asset => asset.loadMethod === RESOURCE_LOADING_TYPE.ON_PAGE_RENDER && !asset.preLoaded);
+    const onFragmentRenderAssets = Core.__pageConfiguration.assets.filter(asset => {
+      if(asset.loadMethod === RESOURCE_LOADING_TYPE.ON_PAGE_RENDER && !asset.preLoaded) {
+        const fragment = Core.__pageConfiguration.fragments.find(fragment => fragment.name === asset.fragment);
+        return fragment && fragment.attributes.if !== "false";
+      }
+      return false;
+    });
 
     const scripts = Core.createLoadQueue(onFragmentRenderAssets);
 

src/modules/storage.ts

@@ -20,7 +20,7 @@ export class Storage extends Module {
 
     static async printApplicationCacheInfo() {
         const cacheNames = await caches.keys();
-        let storageList: { [key: string]: any } = {
+        const storageList: { [key: string]: any } = {
             total: 0
         };
 

test/core.spec.ts

@@ -3,10 +3,14 @@ import {JSDOM} from "jsdom";
 import {PuzzleJs} from "../src/puzzle";
 import {Core} from "../src/core";
 import {createPageLibConfiguration} from "./mock";
+import sinon from "sinon";
+import {AssetHelper} from "../src/assetHelper";
 import * as faker from "faker";
 import {IPageLibAsset, IPageLibConfiguration, IPageLibDependency} from "../src/types";
 import {RESOURCE_LOADING_TYPE, RESOURCE_TYPE} from "../src/enums";
 
+const sandbox = sinon.createSandbox();
+
 declare global {
   interface Window {
     [key: string]: any;
@@ -25,6 +29,7 @@ declare var global: Global;
 describe('Module - Core', () => {
   beforeEach(() => {
     global.window = (new JSDOM(``, {runScripts: "outside-only"})).window;
+    sandbox.verifyAndRestore();
   });
 
   afterEach(() => {
@@ -164,4 +169,46 @@ describe('Module - Core', () => {
         expect(queue).to.deep.eq(
           []);
     });
+
+    it('should create true load queue for js assets excluding conditional fragments', function () {
+        const assets = [
+            {
+                name: 'bundle1',
+                dependent: ['vendor1'],
+                preLoaded: false,
+                link: 'bundle1.js',
+                fragment: 'test',
+                loadMethod: RESOURCE_LOADING_TYPE.ON_PAGE_RENDER,
+                type: RESOURCE_TYPE.JS
+            }
+        ] as IPageLibAsset[];
+        const dependencies = [
+            {
+                name: 'vendor1',
+                link: 'vendor1.js',
+                preLoaded: false
+            }
+        ] as IPageLibDependency[];
+        const config = {
+            dependencies,
+            assets,
+            fragments: [{
+                name: 'test',
+                attributes: {
+                    if: "false"
+                },
+                chunked: true,
+                clientAsync: false,
+                source: undefined
+            }],
+            page: 'page'
+        } as IPageLibConfiguration;
+
+        const mockLoadJsSeries = sandbox.mock(AssetHelper);
+
+        Core.config(JSON.stringify(config));
+        Core.pageLoaded();
+
+        mockLoadJsSeries.expects("loadJsSeries").calledWith([]);
+    });
 });

test/mock.ts

@@ -9,5 +9,5 @@ export const createPageLibConfiguration = (providedConfiguration?: object) => {
     }],
     page: 'test-page',
     ...providedConfiguration
-  } as unknown as IPageLibConfiguration
+  } as unknown as IPageLibConfiguration;
 };

test/puzzle.spec.ts

@@ -33,7 +33,7 @@ describe('PuzzleJs', () => {
 
         PuzzleJs.inject({module: Module});
 
-        expect((<any>PuzzleJs)['module'].m).to.eq(Module.m);
+        expect((PuzzleJs as any)['module'].m).to.eq(Module.m);
     });
 
     it('should register listeners', function () {