Implement client async forced fragments

package.json

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

src/core.ts

@@ -31,6 +31,11 @@ export class Core extends Module {
  });
  }
 
+ const forcedFragments = Core.__pageConfiguration.fragments.filter(i => i.clientAsync && i.clientAsyncForce);
+ if (forcedFragments.length) {
+ forcedFragments.forEach(fragment => Core.renderAsyncFragment(fragment.name));
+ }
+
  if (this.isIntersectionObserverSupported()) {
  const asyncFragments = Core.__pageConfiguration.fragments.some(i => i.clientAsync);
 

src/types.ts

@@ -31,6 +31,7 @@ export interface IPageFragmentConfig {
  name: string;
  chunked: boolean;
  clientAsync: boolean;
+ clientAsyncForce: boolean | undefined;
  asyncDecentralized: boolean;
  attributes: { [name: string]: string };
  source: string | undefined;

test/core.spec.ts

@@ -202,6 +202,60 @@ describe('Module - Core', () => {
  },
  chunked: true,
  clientAsync: true,
+ clientAsyncForce: undefined,
+ source: undefined,
+ asyncDecentralized: false
+ }],
+ page: 'page',
+ peers: []
+ } as IPageLibConfiguration;
+
+ const fragmentContainer = global.window.document.createElement('div');
+ fragmentContainer.setAttribute('puzzle-fragment', 'test');
+ global.window.document.body.appendChild(fragmentContainer);
+
+ const fetchStub = global.fetch as SinonStub;
+ const stubAsyncRenderResponse = sandbox.stub(Core as any, "asyncRenderResponse").resolves();
+
+ Core.config(JSON.stringify(config));
+ await Core.renderAsyncFragment('test');
+ await Core.renderAsyncFragment('test');
+
+ expect(fetchStub.calledOnce).to.eq(true);
+ expect(fetchStub.getCall(0).lastArg.headers).to.haveOwnProperty("originalurl");
+ expect(stubAsyncRenderResponse.calledOnce).to.eq(true);
+ });
+
+ it('should render forced async fragment', async () => {
+ 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: true,
+ clientAsyncForce: true,
  source: undefined,
  asyncDecentralized: false
  }],