From fa7b824fb7678161253d4fac7ecce69d1cad958b Mon Sep 17 00:00:00 2001 From: Mustafa Birinci Date: Wed, 9 Oct 2019 12:32:01 +0300 Subject: [PATCH 1/7] implement conditional asset fetching --- src/core.ts | 10 ++++++++-- src/types.ts | 1 + 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/src/core.ts b/src/core.ts index 86a390d..03565ba 100644 --- a/src/core.ts +++ b/src/core.ts @@ -46,7 +46,7 @@ export class Core extends Module { @on(EVENT.ON_FRAGMENT_RENDERED) static loadAssetsOnFragment(fragmentName: string) { - const onFragmentRenderAssets = Core.__pageConfiguration.assets.filter(asset => asset.fragment === fragmentName && asset.loadMethod === RESOURCE_LOADING_TYPE.ON_FRAGMENT_RENDER && !asset.preLoaded); + const onFragmentRenderAssets = Core.__pageConfiguration.assets.filter(asset => asset.fragment === fragmentName && !asset.disabled && asset.loadMethod === RESOURCE_LOADING_TYPE.ON_FRAGMENT_RENDER && !asset.preLoaded); const scripts = Core.createLoadQueue(onFragmentRenderAssets); @@ -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 => { + const fragment = Core.__pageConfiguration.fragments.find(fragment => fragment.name === asset.fragment); + if(fragment){ + return asset.loadMethod === RESOURCE_LOADING_TYPE.ON_PAGE_RENDER && fragment.attributes.if !== "true" && !asset.preLoaded; + } + return asset.loadMethod === RESOURCE_LOADING_TYPE.ON_PAGE_RENDER && !asset.preLoaded; + }); const scripts = Core.createLoadQueue(onFragmentRenderAssets); diff --git a/src/types.ts b/src/types.ts index 72ed845..6f2bb1f 100644 --- a/src/types.ts +++ b/src/types.ts @@ -18,6 +18,7 @@ export interface IPageLibAsset { link: string; preLoaded: boolean; defer?: boolean; + if?: boolean; } export interface ICustomPageAsset { From a0e4e0134ffd2cab68be9651ec776dd3767828e5 Mon Sep 17 00:00:00 2001 From: Mustafa Birinci Date: Wed, 9 Oct 2019 12:39:01 +0300 Subject: [PATCH 2/7] update package version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index a1a1fa3..3db5f74 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@puzzle-js/client-lib", "main": "dist/index.js", - "version": "1.1.6", + "version": "1.1.7", "author": "", "license": "MIT", "repository": { From a843d43925abd7b3da3dfaf3652966cd9a92446b Mon Sep 17 00:00:00 2001 From: Mustafa Birinci Date: Wed, 9 Oct 2019 13:14:40 +0300 Subject: [PATCH 3/7] fix --- src/core.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/core.ts b/src/core.ts index 03565ba..41065ed 100644 --- a/src/core.ts +++ b/src/core.ts @@ -46,7 +46,7 @@ export class Core extends Module { @on(EVENT.ON_FRAGMENT_RENDERED) static loadAssetsOnFragment(fragmentName: string) { - const onFragmentRenderAssets = Core.__pageConfiguration.assets.filter(asset => asset.fragment === fragmentName && !asset.disabled && asset.loadMethod === RESOURCE_LOADING_TYPE.ON_FRAGMENT_RENDER && !asset.preLoaded); + const onFragmentRenderAssets = Core.__pageConfiguration.assets.filter(asset => asset.fragment === fragmentName && asset.loadMethod === RESOURCE_LOADING_TYPE.ON_FRAGMENT_RENDER && !asset.preLoaded); const scripts = Core.createLoadQueue(onFragmentRenderAssets); From edb80c75d8b464b6fad11d1c97c53a21d7781b42 Mon Sep 17 00:00:00 2001 From: Mustafa Birinci Date: Wed, 9 Oct 2019 14:24:49 +0300 Subject: [PATCH 4/7] add unit test and fix lint errors --- src/core.ts | 9 ++++----- src/modules/storage.ts | 2 +- src/types.ts | 2 +- test/core.spec.ts | 44 ++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 50 insertions(+), 7 deletions(-) diff --git a/src/core.ts b/src/core.ts index 41065ed..ccfe7cc 100644 --- a/src/core.ts +++ b/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; @@ -56,11 +56,10 @@ export class Core extends Module { @on(EVENT.ON_PAGE_LOAD) static pageLoaded() { const onFragmentRenderAssets = Core.__pageConfiguration.assets.filter(asset => { - const fragment = Core.__pageConfiguration.fragments.find(fragment => fragment.name === asset.fragment); - if(fragment){ - return asset.loadMethod === RESOURCE_LOADING_TYPE.ON_PAGE_RENDER && fragment.attributes.if !== "true" && !asset.preLoaded; + 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 !== "true"; } - return asset.loadMethod === RESOURCE_LOADING_TYPE.ON_PAGE_RENDER && !asset.preLoaded; }); const scripts = Core.createLoadQueue(onFragmentRenderAssets); diff --git a/src/modules/storage.ts b/src/modules/storage.ts index 8ae318c..0e39565 100644 --- a/src/modules/storage.ts +++ b/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 }; diff --git a/src/types.ts b/src/types.ts index 6f2bb1f..c21b4c5 100644 --- a/src/types.ts +++ b/src/types.ts @@ -32,7 +32,7 @@ export interface IPageFragmentConfig { name: string; chunked: boolean; clientAsync: boolean; - attributes: { [name: string]: string }; + attributes: { [name: string]: string, if: string }; source: string | undefined; } diff --git a/test/core.spec.ts b/test/core.spec.ts index 2659343..73f9f66 100644 --- a/test/core.spec.ts +++ b/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,43 @@ 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: "true" + } + }], + page: 'page' + } as IPageLibConfiguration; + + const mockLoadJsSeries = sandbox.mock(AssetHelper); + + Core.config(JSON.stringify(config)); + Core.pageLoaded(); + + mockLoadJsSeries.expects("loadJsSeries").calledWith([]); + }); }); From e298007afee74de17b769ae9938677b2545d3c61 Mon Sep 17 00:00:00 2001 From: Mustafa Birinci Date: Wed, 9 Oct 2019 14:30:52 +0300 Subject: [PATCH 5/7] fix if condition expectation --- src/core.ts | 2 +- test/core.spec.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/core.ts b/src/core.ts index ccfe7cc..92e6c31 100644 --- a/src/core.ts +++ b/src/core.ts @@ -58,7 +58,7 @@ export class Core extends Module { 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 !== "true"; + return fragment && fragment.attributes.if !== "false"; } }); diff --git a/test/core.spec.ts b/test/core.spec.ts index 73f9f66..bdb2bc9 100644 --- a/test/core.spec.ts +++ b/test/core.spec.ts @@ -195,7 +195,7 @@ describe('Module - Core', () => { fragments: [{ name: 'test', attributes: { - if: "true" + if: "false" } }], page: 'page' From 9a9cb4c9f101c9f7359b822d650229c81395f880 Mon Sep 17 00:00:00 2001 From: Mustafa Birinci Date: Wed, 9 Oct 2019 15:08:31 +0300 Subject: [PATCH 6/7] fix filter condition on pageLoaded method --- src/core.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/core.ts b/src/core.ts index 92e6c31..dd55f05 100644 --- a/src/core.ts +++ b/src/core.ts @@ -60,6 +60,7 @@ export class Core extends Module { const fragment = Core.__pageConfiguration.fragments.find(fragment => fragment.name === asset.fragment); return fragment && fragment.attributes.if !== "false"; } + return false; }); const scripts = Core.createLoadQueue(onFragmentRenderAssets); From 79bc79c9897819a9a7f5831e35e66812b46e2225 Mon Sep 17 00:00:00 2001 From: Mustafa Birinci Date: Wed, 9 Oct 2019 15:25:07 +0300 Subject: [PATCH 7/7] fix types --- src/types.ts | 3 +-- test/core.spec.ts | 5 ++++- test/mock.ts | 2 +- test/puzzle.spec.ts | 2 +- 4 files changed, 7 insertions(+), 5 deletions(-) diff --git a/src/types.ts b/src/types.ts index c21b4c5..72ed845 100644 --- a/src/types.ts +++ b/src/types.ts @@ -18,7 +18,6 @@ export interface IPageLibAsset { link: string; preLoaded: boolean; defer?: boolean; - if?: boolean; } export interface ICustomPageAsset { @@ -32,7 +31,7 @@ export interface IPageFragmentConfig { name: string; chunked: boolean; clientAsync: boolean; - attributes: { [name: string]: string, if: string }; + attributes: { [name: string]: string }; source: string | undefined; } diff --git a/test/core.spec.ts b/test/core.spec.ts index bdb2bc9..3f653e1 100644 --- a/test/core.spec.ts +++ b/test/core.spec.ts @@ -196,7 +196,10 @@ describe('Module - Core', () => { name: 'test', attributes: { if: "false" - } + }, + chunked: true, + clientAsync: false, + source: undefined }], page: 'page' } as IPageLibConfiguration; diff --git a/test/mock.ts b/test/mock.ts index 8f799c3..6435cb4 100644 --- a/test/mock.ts +++ b/test/mock.ts @@ -9,5 +9,5 @@ export const createPageLibConfiguration = (providedConfiguration?: object) => { }], page: 'test-page', ...providedConfiguration - } as unknown as IPageLibConfiguration + } as unknown as IPageLibConfiguration; }; diff --git a/test/puzzle.spec.ts b/test/puzzle.spec.ts index c893878..5ef3b1e 100644 --- a/test/puzzle.spec.ts +++ b/test/puzzle.spec.ts @@ -33,7 +33,7 @@ describe('PuzzleJs', () => { PuzzleJs.inject({module: Module}); - expect((PuzzleJs)['module'].m).to.eq(Module.m); + expect((PuzzleJs as any)['module'].m).to.eq(Module.m); }); it('should register listeners', function () {